@charset "utf-8";
/* CSS Document */
/*
/*      CLIENT - Desktop
*/

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

.flag {
	margin: 0 5px 4px 0;
    fill: var(--nav-bar-link);
    width: 24px;
    height: 16px;
    background-size: 28px 22px !important;
    background-position: center center !important;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.0) !important;
}
a.flag {
    margin-left: 0;
    margin-bottom: 1px;	
    float: left;
}
#flags {
    float: right;
}

/* ==========================================================================
 LANGUAGE SELECTOR FLY OPEN MENU - ACTIVATED WHEN >4 LANGUAGES ENABLED
========================================================================== */
.flag { width: 24px; }
/* 4 OR LESS = NO CHEVRON */
.button-container {
    display: flex;
    justify-content: end;
    height: 18px;
    float: right;
    margin-top: 4px;
    z-index: 9999;
}
.button-text-container {
    display: flex;
    align-items: left;
    justify-content: right;
    overflow: hidden;
    width: 118px;
    transition: width 1s;
    will-change: width;
    height: 18px !important
}
.button-icon-container {
    display: none;
    width: 0 !important;
}
/* NOW WE COOK WITH BUTTER */
.chevron .button-container {
    display: flex;
    justify-content: end;
    height: 18px;
    float: right;
    margin-top: 4px;
    z-index: 9999;
}
.chevron .button-text-container {
    display: flex;
    align-items: left;
    justify-content: right;
    overflow: hidden;
    width: 118px;
    transition: width 1s;
	transition-timing-function: ease-in-out;	
    will-change: width;
    height: 18px !important;
    width: 118px;
    transition: width 3s;
	transition-timing-function: ease-in-out;	
    will-change: width;	
    transition: width 2s;
	transition-timing-function: ease-in-out;	
    will-change: width;	
}
.chevron .button-text-container.shrink  {
	width: 118px !important;
}
.chevron .button-text-container.grow {
    transition: width 2s;
	transition-timing-function: ease-in-out;	
    will-change: width;  
}
.chevron .button-icon-container {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 18px !important;
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    margin-left: -6px;	
}
.chevron .button-icon-container svg  {
  will-change: transform; 
  transition: transform .5s;
  transform: rotate(0deg);
  transition-timing-function: ease-in-out;
}
.chevron .button-text-container.grow ~ .button-icon-container svg {
  transform: rotate(0deg);
}
.chevron .button-text-container.shrink ~ .button-icon-container svg {
  transform: rotate(180deg);
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  20% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  80% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }  
}
@keyframes hvr-wobble-horizontal {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  20% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  80% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }  
}
.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
ul#nav{
    margin-left: 0;
    will-change: margin-left;	
    transition: margin-left 3s;
	transition-timing-function: ease-in-out;	
}
ul#nav.hide-nav {
    margin-left: -700px;
    transition: margin-left 1s;
	transition-timing-function: ease-in-out;
}
.tickets-page #ticketInfo  {
    width: 100%;
    margin: 20px 0 10px 0px;
    background: #fff6;
    border-radius: 6px;
    padding: 0px;
}
.tickets-page .headline {
    background: initial;
    margin: 20px !important;
    font-size: 18px;
    color: #888;
}
@media screen and (max-width: 600px) {
	.tickets-page .headline {
		margin: 20px 20px 20px 0!important;
	}
	.tickets-page #ticketInfo {
		margin: 20px 0;
	}
	.thread-event .description {
		margin: 2px 0 0 5px !important;	
	}
}
.tickets-page th {
    font-weight: 600;
    width: 130px !important;
}
.tickets-page td {
    padding: 0;
}		

/* ==========================================================================
 PASSWORD RESET PAGE
========================================================================== */		
a[href="pwreset.php"] {
    text-align: center !important;
    padding-top: 4px;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}
.pwreset-page h1 {
    margin: 0 0 20px 0;
}		
.pwreset-page form[action="pwreset.php"] {
    width: 500px;
    min-height: 265px !important;
    border-radius: 5px !important;
    padding: 40px !important;
    background: #E8EBEF !important;
    position: relative !important;
    -webkit-box-shadow: 0 5px 0 0 #C6CCD4 !important;
    -moz-box-shadow: 0 3px 0 0 #C6CCD4 !important;
    box-shadow: 0px 5px 0px 0px #C6CCD4 !important;
    display: block !important;
    margin: 0 auto !important;
    margin: 56px auto !important;
}
.pwreset-page form[action="pwreset.php"] div {
    width: 100% !important;
}
.pwreset-page form[action="pwreset.php"] strong {
    color: #475260 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    font-size: 25px !important;
    font-family: Montserrat, sans-serif !important;
}
.pwreset-page form[action="pwreset.php"] div div {
    text-align: left;
    width: fit-content !important;
    margin: 20px auto 40px !important;
    color: #475260;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
	width: intrinsic !important;          /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content !important;    /* Firefox/Gecko */
	width: -webkit-max-content !important;
	width: max-content;						/* some mobile browsers (e.g. Samsung Internet) */
}
@media screen and (max-width: 700px) {
	.pwreset-page form[action="pwreset.php"] {
		padding: 6% !important;
		width: 88% !important;
	}
	.pwreset-page form[action="pwreset.php"] strong {
		font-size: 22px !important;
	}	
}

/* ==========================================================================
 ACCOUNT REGISTRATION PAGE
========================================================================== */
.account-page h1 {
    margin: 0 0 30px 0;
}
.account-page div {
    font-size: 18px;
    font-weight: 300;
    line-height: initial;
    font-family: 'Open Sans', sans-serif;
    overflow: initial;
}
.account-page div strong {
	font-size: 22px;
	font-weight: 300;
}



form#reply input {
    margin-bottom: 9px;
    color: #ffffff;
    color: #fff !important;
    font-family: Montserrat;
    letter-spacing: initial !important;
    font-size: 15px;
    padding: 10px 20px !important;
}
form#reply input[type="submit"] {
    background: #00bbd7;
    -webkit-box-shadow: 0 3px 0 0 #0296ac;
    -moz-box-shadow: 0 3px 0 0 #0296ac;
    box-shadow: 0 3px 0 0 #0296ac;	
}
form#reply input[type="submit"]:hover {
    background: #00c8e6;
}
form#reply input[type="reset"], 
form#reply input[type="button"] {
    background: #b4b9c1;
    -webkit-box-shadow: 0 3px 0 0 #8c8f95;
    -moz-box-shadow: 0 3px 0 0 #8c8f95;
    box-shadow: 0 3px 0 0 #8c8f95;
    color: #5d6166 !important;
    font-weight: 600;
}
form#reply input[type="reset"]:hover,
form#reply input[type="button"]:hover {
    background: #ced4db;
}
form#reply p[style="text-align:center"] {
    margin: 20px 0 0 0;
}

/* ==========================================================================
 RTL TRANSLATIONS
========================================================================== */
.rtl .pull-right.flush-right a:last-child {
    margin-right: 13px;
}
.rtl .chevron .button-container {
    margin-right: -7px;
}
.rtl .chevron .button-icon-container {
    margin-right: 5px;
}
.rtl .infoTable th {
    text-align: right;
    padding: 3px 0px 3px 8px;
}
.rtl #ticketTable tr td {
    text-align: left;
}
.rtl #ticketTable th:last-child {
    border-radius: 5px 0 0 0;
    padding-left: 20px;
}
.rtl #ticketTable th:first-child {
    border-radius: 0 5px 0 0;
}
.rtl #ticketTable td:last-child {
    padding-left: 20px;
}
.rtl #search-container {
    float: right;
}
.rtl #ticketSearchForm input[type="text"] {
    height: 35px !important;
}
.rtl #ticketSearchForm select {
    padding: 4px 11px 4px 0 !important;	
    background-position: left 8px center !important;
}
.rtl #ticketSearchForm input[type="text"]::placeholder {
    padding-right: 44px;
}