.ui-slider-range { background: rgb(157,191,19); }
.ui-slider-handle {
	background: rgb(157,191,19) !important;
	border-color: rgb(194,194,194) !important;
	box-shadow: none !important;
	width: 1.5em !important;
	height: 1.5em !important;
	top: -0.4em !important;
	border-radius: 100px;
}
.ui-slider-handle:focus { outline: none !important; }
.ui-slider .ui-state-active { background: rgb(157,191,19); border-color: rgb(157,191,19); }

.flex-container { display: flex; flex-wrap: wrap; }
.flex-item-lcos { margin: 5px 0px; }
.w100 { width: 100%; }
.w50 { width: 50%; }
.w25 { width: 25%; }

.lcos_formContainer { display: none; padding: 0px 0px 30px 0px; }

.flex-item-lcos select, .flex-item-lcos input[type=text] { width: 100%; }
.lcos_input_error { background: #FF6666; display: none; border-radius: 5px; color: #FFF; margin: 12px 5px 5px 0px; padding: 3px 5px 3px 10px; position: relative; font-size: 14px; }
.lcos_input_error::after {
    content: " ";
    position: absolute;
    top: -25px; /* At the bottom of the tooltip */
    margin-left: -5px;
    border-width: 15px;
    border-style: solid;
	left: 8px;
	border-color: transparent transparent #FF6666 transparent;
}


.loaderContainer { position: absolute; display: none; z-index: 100; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(255,255,255,0.7); }
.cssload-container { margin-top: 25%; width: 100%; height: 49px; text-align: center; }
.cssload-speeding-wheel { width: 49px; height: 49px; margin: 0 auto; border: 3px solid rgb(0,0,0);
	border-radius: 50%; border-left-color: transparent; border-right-color: transparent;
	animation: cssload-spin 575ms infinite linear; -o-animation: cssload-spin 575ms infinite linear;
	-ms-animation: cssload-spin 575ms infinite linear; -webkit-animation: cssload-spin 575ms infinite linear;
	-moz-animation: cssload-spin 575ms infinite linear;
}
@keyframes cssload-spin { 100%{ transform: rotate(360deg); transform: rotate(360deg); } }
@-o-keyframes cssload-spin { 100%{ -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-ms-keyframes cssload-spin { 100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes cssload-spin { 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-moz-keyframes cssload-spin { 100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); } }
.successContainer { position: absolute; display: none; z-index: 100; top: 0px; right: 0px; bottom: 0px; left: 0px;
	background: rgba(255,255,255,0.8); padding: 15% 10px; text-align: left; font-size: 34px; font-weight: bold; color: #333; }

.tesvolt_price_container { text-align: center; }
.slider-container { padding: 15px 15px 0px 15px; }
.tesvolt_slider { margin: 0px auto 0px auto; width: 95%; }
.tesvolt_slider_label { text-align: center; padding: 10px 0px 0px 0px; line-height: 30px; }

#lcos_main_container { width: 100%; padding: 60px 0px 100px 0px; }
#lcos_main_container * { box-sizing: border-box; }
.lcos_tesvolt_charge_container, .lcos_comparison_charge_container { font-size: 20px; }

.lcos_tesvolt_lcos_container.higher, .lcos_comparison_lcos_container.higher { color: red; }
.lcos_tesvolt_lcos_container.lower, .lcos_comparison_lcos_container.lower { color: green; }

.lcos_sub_container { display: flex; flex-wrap: wrap; justify-content: center; }
.lcos_col_label { width: 30%; background: #DDD; margin: 80px 0px 30px 0px; text-align: right; white-space: nowrap; text-overflow:ellipsis;overflow:hidden; }
.lcos_col_tesvolt { width: 40%; background: rgba(157,191,38,0.6); padding: 80px 0px 30px 0px; text-align: center; border-radius: 8px; }
.lcos_col_other { width: 30%; background: #DDD; margin: 80px 0px 30px 0px; text-align: left; position: relative; }

.lcos_col_label .titleField { background: transparent; position: relative; height: 0px; }
.lcos_col_label .titleField div { position: absolute; top: -50px; left: 0px; right: 0px; text-align: center; }
.lcos_col_tesvolt .titleField { background: transparent; position: relative; height: 0px; }
.lcos_col_tesvolt .titleField div { position: absolute; top: -68px; left: 0px; right: 0px; text-align: center; font-size: 24px; line-height: 28px; overflow: hidden; white-space: nowrap; }
.lcos_col_other .titleField { background: transparent; position: relative; height: 0px; }
.lcos_col_other .titleField div { position: absolute; top: -50px; left: 20px; right: 0px; text-align: left; font-size: 20px; }

.lcos_col_label .ResultField { background: transparent; position: relative; height: 0px; }
.lcos_col_label .ResultField div.rf { position: absolute; top: 40px; left: 0px; right: 0px; text-align: center; }
.lcos_col_tesvolt .ResultField { background: transparent; position: relative; height: 0px; }
.lcos_col_tesvolt .ResultField div.rf { position: absolute; top: 40px; left: 0px; right: 0px; text-align: center; font-size: 32px; }
.lcos_col_other .ResultField { background: transparent; position: relative; height: 0px; }
.lcos_col_other .ResultField div.rf { position: absolute; top: 45px; left: 0px; right: 0px; text-align: center; font-size: 28px; }

.row { height: 40px; border-bottom: 0px solid #FFF; line-height: 40px; }
.lcos_col_label .row, .lcos_col_label .row_double { padding: 0px 10px 0px 10px; }
.lcos_col_label .row_double { padding: 0px 10px 0px 10px; }
.lcos_col_other .row { padding: 0px 10px 5px 10px; line-height: 0px; }
.lcos_col_other .row_double { padding: 15px 10px 5px 10px; line-height: 0px; }
.row_double { height: 80px; border-bottom: 0px solid #FFF; line-height: 80px; }

.lcos_col_label .row:nth-child(odd), .lcos_col_label .row_double:nth-child(odd) { background: #EFEFEF; }
.lcos_col_tesvolt .row:nth-child(even), .lcos_col_tesvolt .row_double:nth-child(even) { background: rgba(157,191,38,0.3); }
.lcos_col_other .row:nth-child(odd), .lcos_col_other .row_double:nth-child(odd) { background: #EFEFEF; }

.lcos_col_other input { border: none; border-bottom: 2px solid rgba(157,191,38,0.9); box-sizing: content-box; outline: none; text-align: center;
	margin: 5px; padding: 0px; height: 30px; font-size: 24px; vertical-align: middle; width: 80px; background: none;
	background: rgba(157,191,38,0.1); font-family: 'XXIINeueNorm', sans-serif; border-top-left-radius: 8px; border-top-right-radius: 8px;
}

.lcos_col_other input.error { background: rgba(255,0,0,0.2); border-color: rgb(255,0,0); }

.lcos_col_other input::-webkit-input-placeholder { color: #BBB; }
.lcos_col_other input::-moz-placeholder { color: #BBB; }
.lcos_col_other input:-ms-input-placeholder { color: #BBB; }
.lcos_col_other input:-moz-placeholder { color: #BBB; }

#msg_fillOut { position: absolute; border: 2px solid red; left: 5px; top: -5px; width: 140px; bottom: -5px; opacity: 0;
	transition: all 0.6s; -webkit-transition: all 0.6s; }
#msg_fillOut.visible { opacity: 1; margin: 0px; }
#msg_fillOut .dd1 { position: absolute; right: -2px; top: -100px; border-right: 2px solid red; height: 100px; }
#msg_fillOut .dd2 { position: absolute; right: -30px; top: -117px; color: #FFF; border-radius: 3px; background: red; font-size: 18px; white-space: nowrap; line-height: 30px; padding: 0px 5px; }

.tooltip {
	position: relative;
}

/* Tooltip text */
.tooltiptext {
	font-family: Arial;
    display: none;
	width: 320px;
	min-height: 40px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
	left: 145px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 100;
	top: -36px;
	left: 10px;
	background: #666;
	font-size: 14px;
	line-height: 18px;
	padding: 7px 5px;
	transform: translate(-110%, 0);
}

.row .tooltiptext { top: -5px; }
.row_double .tooltiptext { top: 10px; }

.tooltiptext::after {
    content: " ";
    position: absolute;
    right: -28px; /* At the bottom of the tooltip */
    margin-left: -5px;
    border-width: 15px;
    border-style: solid;
	top: 7px;
	border-color: transparent transparent transparent #666 ;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    display: block;
}

@media only screen and (max-width:1450px) {
	.tooltiptext { width: 190px; }
}

@media only screen and (max-width:1100px) {
	/* .tooltiptext { right: 98%; left: auto; }
	.tooltiptext::after { right: -25px; left: auto; border-color: transparent transparent transparent #666; } */
}

@media only screen and (max-width:900px) {
	.w25 { width: 10%; }
	.w50 { width: 80%; }
}

@media only screen and (max-width:640px) {
	.w25 { display: none; }
	.w50 { width: 100%; }
}

@media only screen and (max-width:500px) {
	.lcos_col_label { display: none; }
	.lcos_col_other, .lcos_col_tesvolt { width: 50%; }
	.tooltip:hover .tooltiptext { display: none; }
}