/****** FILE: tptq_site_common/css/css_compiled/tptq/loaders.css *****/
.loader-4{font-size: 20px;margin: 0 auto;top: 50%;transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);width: 1em;height: 1em;border-radius: 50%;position: relative;text-indent: -9999em;-webkit-animation: load4 1.3s infinite linear;animation: load4 1.3s infinite linear;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0)}

@-webkit-keyframes load4{0%,100%{box-shadow: 0 -3em 0 .2em #fff, 2em -2em 0 0em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 0 #fff}12.5%{box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 .2em #fff, 3em 0 0 0 #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff}25%{box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 .2em #fff, 2em 2em 0 0 #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff}37.5%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 0 #fff, 2em 2em 0 .2em #fff, 0 3em 0 0em #fff, -2em 2em 0 -1em #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff}50%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 0em #fff, 0 3em 0 .2em #fff, -2em 2em 0 0 #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff}62.5%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 0 #fff, -2em 2em 0 .2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -1em #fff}75%{box-shadow: 0em -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 .2em #fff, -2em -2em 0 0 #fff}87.5%{box-shadow: 0em -3em 0 0 #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0 #fff, -2em -2em 0 .2em #fff}}

@keyframes load4{0%,100%{box-shadow: 0 -3em 0 .2em #fff, 2em -2em 0 0em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 0 #fff}12.5%{box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 .2em #fff, 3em 0 0 0 #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff}25%{box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 .2em #fff, 2em 2em 0 0 #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff}37.5%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 0 #fff, 2em 2em 0 .2em #fff, 0 3em 0 0em #fff, -2em 2em 0 -1em #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff}50%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 0em #fff, 0 3em 0 .2em #fff, -2em 2em 0 0 #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff}62.5%{box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 0 #fff, -2em 2em 0 .2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -1em #fff}75%{box-shadow: 0em -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 .2em #fff, -2em -2em 0 0 #fff}87.5%{box-shadow: 0em -3em 0 0 #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0 #fff, -2em -2em 0 .2em #fff}}

.loader-5{margin: 100px auto;font-size: 25px;width: 1em;height: 1em;border-radius: 50%;position: relative;text-indent: -9999em;-webkit-animation: load5 1.1s infinite ease;animation: load5 1.1s infinite ease;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0)}

@-webkit-keyframes load5{0%,100%{box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.5), -1.8em -1.8em 0 0em rgba(255,255,255,0.7)}12.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.5)}25%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.5), 1.8em -1.8em 0 0em rgba(255,255,255,0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}37.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.5), 2.5em 0em 0 0em rgba(255,255,255,0.7), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}50%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.5), 1.75em 1.75em 0 0em rgba(255,255,255,0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}62.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.5), 0em 2.5em 0 0em rgba(255,255,255,0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}75%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.5), -1.8em 1.8em 0 0em rgba(255,255,255,0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}87.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.5), -2.6em 0em 0 0em rgba(255,255,255,0.7), -1.8em -1.8em 0 0em #fff}}

@keyframes load5{0%,100%{box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.5), -1.8em -1.8em 0 0em rgba(255,255,255,0.7)}12.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.5)}25%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.5), 1.8em -1.8em 0 0em rgba(255,255,255,0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}37.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.5), 2.5em 0em 0 0em rgba(255,255,255,0.7), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}50%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.5), 1.75em 1.75em 0 0em rgba(255,255,255,0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255,255,255,0.2), -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}62.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.5), 0em 2.5em 0 0em rgba(255,255,255,0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255,255,255,0.2), -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}75%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.5), -1.8em 1.8em 0 0em rgba(255,255,255,0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255,255,255,0.2)}87.5%{box-shadow: 0em -2.6em 0em 0em rgba(255,255,255,0.2), 1.8em -1.8em 0 0em rgba(255,255,255,0.2), 2.5em 0em 0 0em rgba(255,255,255,0.2), 1.75em 1.75em 0 0em rgba(255,255,255,0.2), 0em 2.5em 0 0em rgba(255,255,255,0.2), -1.8em 1.8em 0 0em rgba(255,255,255,0.5), -2.6em 0em 0 0em rgba(255,255,255,0.7), -1.8em -1.8em 0 0em #fff}}

.loader-6{font-size: 90px;text-indent: -9999em;overflow: hidden;width: 1em;height: 1em;border-radius: 50%;margin: 72px auto;position: relative;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);-webkit-animation: load6 1.7s infinite ease;animation: load6 1.7s infinite ease}

@-webkit-keyframes load6{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}5%,95%{box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}10%,59%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.08699999999999999em -0.825em 0 -0.42em #fff, -0.173em -0.8120000000000001em 0 -0.44em #fff, -0.256em -0.789em 0 -0.46em #fff, -0.297em -0.775em 0 -0.477em #fff}20%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.338em -0.758em 0 -0.42em #fff, -0.555em -0.617em 0 -0.44em #fff, -0.671em -0.488em 0 -0.46em #fff, -0.749em -0.34em 0 -0.477em #fff}38%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.377em -0.74em 0 -0.42em #fff, -0.645em -0.522em 0 -0.44em #fff, -0.775em -0.297em 0 -0.46em #fff, -0.82em -0.09em 0 -0.477em #fff}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}}

@keyframes load6{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}5%,95%{box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}10%,59%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.08699999999999999em -0.825em 0 -0.42em #fff, -0.173em -0.8120000000000001em 0 -0.44em #fff, -0.256em -0.789em 0 -0.46em #fff, -0.297em -0.775em 0 -0.477em #fff}20%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.338em -0.758em 0 -0.42em #fff, -0.555em -0.617em 0 -0.44em #fff, -0.671em -0.488em 0 -0.46em #fff, -0.749em -0.34em 0 -0.477em #fff}38%{box-shadow: 0 -0.83em 0 -0.4em #fff, -0.377em -0.74em 0 -0.42em #fff, -0.645em -0.522em 0 -0.44em #fff, -0.775em -0.297em 0 -0.46em #fff, -0.82em -0.09em 0 -0.477em #fff}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff}}

.loader-8{margin: 60px auto;font-size: 10px;position: relative;text-indent: -9999em;border-top: 1.1em solid rgba(255,255,255,0.2);border-right: 1.1em solid rgba(255,255,255,0.2);border-bottom: 1.1em solid rgba(255,255,255,0.2);border-left: 1.1em solid #fff;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);-webkit-animation: load8 1.1s infinite linear;animation: load8 1.1s infinite linear}

.loader-8,.loader-8:after{border-radius: 50%;width: 10em;height: 10em}
@-webkit-keyframes load8{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg)}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg)}}
@keyframes load8{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg)}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg)}}

/****** FILE: tptq_site_common/css/css_compiled/tptq/sitestyle.css *****/
.clear { clear: both; float: none; }
.desktop div { display: block; }
.desktop ul { display: block; list-style: outside none none; margin: 0; padding: 0; }
.desktop ul li { display: block; float: left; margin: 0; padding: 0; }
.desktop fieldset { border: 0px; margin: 0px; padding: 0px; }
.desktop form select { width: 100% }
.desktop select {
	background: url("img/ui-select.svg") no-repeat 90% transparent;
	border-radius: 3px;
	border: 1px solid #363636;
	border: 1px solid rgba(0,0,0,0.3);
	font-family: 'Tanseek Modern Light', sans-serif;
	font-size: 18px;
	height: 24px;
	padding-right: 20px;
	-webkit-padding-start: 5px;
	font-style: normal;
	text-indent: 1px;
}
.desktop select::-ms-expand { display: none }
.desktop select option,select optgroup { background-color: white; color: black; font-size: 12px; }
.LanguagesTagsList { display: flex; flex-wrap: wrap; }
.LanguagesTagsList .LanguagesTag { width: 33%; }
.LanguagesTag { margin: 10px 0px; font-style: normal; font-weight: normal; font-stretch: normal; display: flex; align-items: center; }
.LanguagesTag .ShortCut { min-width: 44px; height: 44px; line-height: 34px; padding: 5px 2px; margin: 0px 10px; text-align: center; background-color: #000; color: #fff; font-size: 25px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.LanguagesTag .Title { font-size: 22px; line-height: 24px; padding: 0px; margin: 0px 10px; }
.SliderField .jquery-slider { width: 130px; height: 2px; position: relative; background: #ccc; display: block; margin: 0 5px 14px; cursor: pointer;}
.SliderField .jquery-slider .ui-slider-handle { width: 10px; height: 10px; position: relative; background: #222; display: inherit; margin-left: -5px; top: -4px; border-radius: 50%; color: #aaa; border: medium none; }
.SliderField .jquery-slider .ui-slider-handle:hover,.SliderField .jquery-slider .ui-slider-handle:focus { text-decoration: none; }
.SliderField .jquery-slider .ui-slider-handle:hover > .size-bubble,.SliderField .jquery-slider .ui-slider-handle:focus > .size-bubble { display: block; }
.SliderField .jquery-slider .ui-slider-handle .size-bubble { cursor: default; display: none; background: #222; width: 50px; height: 24px; line-height: 24px; text-align: center; border-radius: 12px; position: relative; top: -30px; left: -20px; font-style: normal; font-weight: normal; font-stretch: normal; }
.SliderField .jquery-slider .ui-slider-handle .size-bubble em,.SliderField .jquery-slider .ui-slider-handle .size-bubble i { font-style: normal; font-weight: normal; font-stretch: normal; }
.SliderField .jquery-slider .ui-slider-handle .size-bubble:after { cursor: pointer; content: ""; border: 5px solid transparent; border-top: 5px solid #222; position: absolute; bottom: -10px; left: 20px; }
.SliderField:hover > output,.SliderField:focus > output { display: inline-block; }.SliderField:hover > output:after, .SliderField:focus > output:after { display: block; }
output:after { content: ""; position: absolute; display: none; width: 0; height: 0; border-top: 8px solid #444; border-left: 6px solid transparent; border-right: 6px solid transparent; top: 100%; left: 50%; margin-left: -6px; margin-top: -1px; }
input[type='text'], input[type='password'], input.text { background: #f4f4f4; border-radius: 3px; height: 30px; line-height: 30px; padding: 0px 10px; border: 0px; }
.err-message { display: block; background-color: #fff; color: #fc3200; padding: 10px; text-align: center; }
.icon { display: inline-block; float: none; height: 20px; vertical-align: top; width: 20px; pointer-events: none; }
.Pulse { -webkit-animation: fa-spin .5s infinite steps(10); animation: fa-spin .5s infinite steps(10);}
@-webkit-keyframes fa-spin { 0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}100%{-webkit-transform: rotate(359deg); transform: rotate(359deg);}}
@keyframes fa-spin {0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}100%{-webkit-transform: rotate(359deg); transform: rotate(359deg);}}
a.popup { cursor: pointer; }

/* fontfamilyoverview */
.OverviewMainSettings { text-align: right; padding: 0 20px; }
.OverviewMainSettings .PermalinkResetDropdown { text-align: left; }
.OverviewMainSettings .AvailableEncodingCustomTextsDropdown {display: inline-block; margin: 20px 10px; }
.OverviewStickyScroll {position: absolute; font-style: normal; font-weight: normal; font-stretch: normal; padding-left: 10px;}

.OverviewContainer { margin: 0 0 90px; }
.OverviewContainer .Text:focus { outline: 0px transparent;}
.OverviewContainer .CustomEncodingText { display: none; }
.FontOverviewBox { display: none; position: relative; }
.FontOverviewBox:hover,.FontOverviewBox:focus { background: #f6f6f6; }
.FontOverviewBox:hover > .StatusBar,.FontOverviewBox:focus > .StatusBar { display: none !important; }
.FontOverviewBox:hover .Settings,.FontOverviewBox:focus .Settings { background-color: #f6f6f6; }
.FontOverviewBox .Loader { display: none; background: rgba(255,255,255,0.5) none repeat scroll 0 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; }
.FontOverviewBox .Settings { display: block !important; position: absolute; top: 0; left: 0; height: 24px; z-index: 2; background-color: #fff; }
.FontOverviewBox .Settings .field { display: inline-table; float: left; }
.FontOverviewBox .Settings .field label { display: none; }
.FontOverviewBox .Settings #StyleName select { border: transparent !important; height: 40px; line-height: 10px; float: left; font-size: 23px; backgroud-color: #cecece; }
.FontOverviewBox .Settings #StyleAlign .align { background: transparent; cursor: pointer; display: inline-block; }
.FontOverviewBox .Settings #StyleAlign .align .icon { fill: #aaa; }
.FontOverviewBox .Settings #StyleAlign .align.selected .icon,.FontOverviewBox .Settings #StyleAlign .align:hover .icon,.FontOverviewBox .Settings #StyleAlign .align:focus .icon { fill: #000; }
.FontOverviewBox .Settings #StyleAlign .align.selected { pointer-events: none; cursor: default; }
.FontOverviewBox .Settings #StyleSize{ position: relative; top: 20px; }
.FontOverviewBox .Settings .FontPreviewLetters { display: none; }
.FontOverviewBox .Text{ position: relative; top: 60px; color: #000; width: 100%; overflow: hidden; }
.FontOverviewBox .Text:hover,.FontOverviewBox .Text:focus{ cursor: pointer; }
.FontOverviewBox .Text:hover .mytooltip,.FontOverviewBox .Text:focus .mytooltip { display: block; position: fixed; overflow: hidden;}
.FontOverviewBox .Text:focus { cursor: text; }
.FontOverviewBox .Text:focus .mytooltip { display: none; }
.FontOverviewBox .Text.Columns { width: 47%; }
.FontOverviewBox .Text[data-text-type="paragraph"], .FontOverviewBox .Text[data-text-type="subheader"]{ line-height: 1.4 !important; }
.FontOverviewBox .Text.ltr { direction: ltr; float: left; }
.FontOverviewBox .Text.rtl { direction: rtl; float: right; }
.FontOverviewBox .StatusBar {display: block; height: 24px; line-height: 24px; padding-left: 6px; position: absolute; top: 0; left: 0; font-size: 13px; font-style: normal; font-weight: normal; font-stretch: normal; color: #444; }
.FontOverviewBox .StatusBar span { position: relative; }
.FontOverviewBox .StatusBar .FontSize { color: #aaa; }
.FontOverviewBox .StatusBar:hover,.FontOverviewBox .StatusBar:focus { text-decoration: none; }
.FontOverviewBox .GoToFamilyWrapper { font-size: 13px; position: absolute; top: 3px; right: 7px; }
.mytooltip { display: none; font-style: normal; font-weight: normal; font-stretch: normal; background: #222; height: 24px; text-align: center; color: #aaa; border-radius: 12px; line-height: 24px; padding: 0 10px; text-decoration: none; z-index: 100; letter-spacing: initial; }

.FontOverviewHeadline .Text { white-space: nowrap; font-size: 100px; line-height: 110px; }
.OverviewColumns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

/* Font combinator */
.fontList .fontListSelector { display: block; width: 100%; height: 60px; padding: 15px 0; border-bottom: 1px solid #ddd; }
.fontList .fontListSelector ul { text-align: center; }
.fontList .fontListSelector ul li { border-radius: 10px; display: inline-block; height: 24px; line-height: 24px; margin: 0 3px 0; padding: 0 15px; }

.fontList .fontListSelector ul li.active{cursor: default;background: #e7e7e7}
.fontList .fontListSelector ul li span{color: #aaa}
.fontList li{float: none;font-size: 24px;line-height: 24px;padding: 13px;cursor: pointer;list-style-type: none;position: relative}
.fontList li .SectionGo{position: absolute;right: 13px;top: 15px;opacity: 0;width: 20px;height: 20px}
.fontList li .SectionGo a{display: block}
.fontList li .SectionGo .icon{fill: #444;opacity: 0.5}
.fontList li .SectionGo:hover .icon,.fontList li .SectionGo:focus .icon{opacity: 1}
.fontList li:hover .SectionGo,.fontList li:focus .SectionGo{opacity: 1}
.fontList ul li:hover,.fontList ul li:focus{background: #f0f0f0;cursor: pointer}
.fontList ul li:hover .mytooltip,.fontList ul li:focus .mytooltip{display: block;position: fixed;overflow: hidden}
.fontList ul li:focus{background: transparent;cursor: pointer}
.fontList ul li:focus .mytooltip{display: none}
.fontList .nano{overflow: visible}.fontList .nano > .nano-content{overflow: visible;overflow-y: scroll}
.fontList .nano > .nano-content:focus{outline: none}
.fontList .CombinatorBottomArrow{padding: 6px;height: 32px;text-align: center;width: 100%;border-top: 1px solid #e8e8e8;position: relative;bottom: 0px;left: 0px}
.fontList .CombinatorBottomArrow .icon{fill: #444;opacity: 0.5;transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg)}
.combinatorContent .Drop{display: none;width: 100%;height: 100%;position: absolute;top: 0;left: 0;color: #000;font-size: 50px;text-align: center;vertical-align: middle;font-style: normal;font-weight: normal;font-stretch: normal;z-index: 2}
.combinatorContent .Drop em,.combinatorContent .Drop i{font-style: normal;font-weight: normal;font-stretch: normal}
.combinatorContent .Drop .DropText{top: 50%;left: 50%;transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);position: absolute;background: #222 none repeat scroll 0 0;border-radius: 12px;color: #aaa;font-size: 15px;font-stretch: normal;font-style: normal;font-weight: normal;height: 24px;line-height: 24px;padding: 0 10px;text-align: center;text-decoration: none}
.combinatorContent .ui-state-hover{background: none;border: none;color: initial;font-weight: initial}
.combinatorContent .ui-state-hover + .Drop{display: block}
.combinatorContent .ui-state-active{background: none;border: none;color: initial;font-weight: initial}
.combinatorContent .ui-state-active + .Drop{display: block}
.combinatorContent .ui-state-active + .Drop .DropText{background-color: #f70;color: #fff}
.combinatorContent .StatusBar .FamilyName{display: none !important}
.combinatorContent .DragDropFontsHelpText{text-align: center;opacity: 0.5;line-height: 20px;width: 100%;height: 20px;position: absolute;top: 35px;left: 0px}

.combinatorContent .DragDropFontsHelpText .icon{fill: #444}