/* General Rules */

/*
primary #FFC801
secondary #0A0A0A
text #2E2E2E
buttons #28A745
*/

#electrono {
 -moz-box-sizing: border-box;
	box-sizing: border-box; 
	margin: 20px 0;
	padding:10px;
	font-size:16px;
}

/* Sliders */
.electrono,
.electrono__fill {
	background: #e6e6e6;display: block;height: 8em;
	box-sizing: border-box;
	border-radius: 4em;
}

.electrono {
	position: relative;
	height: 14px;
	width: 100%;
	margin:1em 0;
}

.electrono--disabled {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity: 0.4;
}

.electrono__fill {
	height: 14px;
	width: 100%;
	background: #FFC801;
	position: absolute;
	top: 0;
}

.electrono__handle {
	background: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	width: 20px;
	height:20px;
	position: absolute;
	top: -8px;
	border-radius: 50%;
	border: 6px solid #0A0A0A;
	box-sizing: content-box !important;
}

input[type="range"]:focus + .electrono .electrono__handle {
	-webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
	-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
	box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

#electrono h2 {text-align: center;}

.electrono-range {margin-bottom: 24px;}
.electrono-slider-principal {width:100%;}

/* Slider Outputs */
#electrono .output-left {display:inline-block;width:50%;text-align: left;}
#electrono .output-right {display:inline-block;width:50%;text-align: right;}

#electrono .electrono_slider_output { font-size: 20px; text-align: center; }
#electrono .electrono_slider_output div { line-height: 20px; }

#electrono .electrono_rates { position: relative;}
#electrono .electrono_rates .more_info a {color: #FFF !important;}

#electrono .electrono-slideroutput {margin-bottom:20px; display: none; }
#electrono .electrono-slideroutput:after, .electrono-range:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}

#electrono .main_output { padding-bottom: 14px; clear:both;}

#electrono .output { clear: both; }

/* Number of Offers */
#electrono .companys_matches {font-size: 20px; text-align:center; margin-bottom: 22px !important; color:#0A0A0A;}

/* Filters */

#electrono .filters {border: 1px solid #C3C4C6;background-color: #fff; padding: 12px;border-radius: 4px;margin-bottom: 20px;}
#electrono .filterbox {display:none; margin-top: 12px;}
#electrono .filterboxlabel {cursor: pointer;color:#0A0A0A;}

#electrono .filterlabel {display: inline-block;margin-right:18px;font-weight: 900;}

.fas .fa-chevron-down, .fas .fa-chevron-up {color: #FFC801;}

#electrono .container {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	margin: 6px 18px 6px 0;
	cursor: pointer;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#electrono .container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

#electrono .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #eee;
	border: 1px solid #FFC801;
}

#electrono .container:hover input ~ .checkmark {
	background-color: #ccc;
}

#electrono .container input:checked ~ .checkmark {
	background-color: #0A0A0A;
}

#electrono .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

#electrono .container input:checked ~ .checkmark:after {
	display: block;
}

#electrono .container .checkmark:after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Bank Box Rules */
#electrono .companys_header {border: 2px solid #f4f4f4;background-color: #f4f4f4;padding: 0 20px;}
#electrono .companys_header div {text-align: center;line-height: 30px;}

#electrono .company_box { margin-bottom: 16px; border: 1px solid #C3C4C6; width: ; text-align: center;padding: 20px; background: #FFF;position:relative;box-sizing: border-box;border-radius: 4px;}
#electrono .company_box .toprow {display:grid;grid-template-columns:20% 50% 20%;grid-column-gap: 5%;margin-bottom: 12px;}
#electrono .company_logo {text-align:left;}
#electrono .company_logo img {vertical-align: middle;width:auto !important;max-height: 70px !important;margin:0 !important;padding-left:20px}
#electrono .company_results {color:#0A0A0A;}
#electrono .company_results span {color:#2E2E2E;font-size:28px;}
#electrono .company_apply {line-height: 50px;}
#electrono .company_apply a ,.company_apply span {display:block;background: #28A745;font-size:18px;font-weight:500;color: #FFF !important;text-decoration: none;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 5px 0 rgba(0,0,0,.15);border-radius: 5px;}
#electrono .company_apply.mobile {display:none}

#electrono .product {color: #2E2E2E;text-align:left;padding-left:28px;padding-bottom:4px;}

#electrono .company_box .midrow {display:grid;grid-template-columns:40% 18% 18% 18%;grid-column-gap: 2%;margin-bottom: 12px;background-color: #e6e6e6;padding:12px;border-radius: 8px;}

#electrono .company_details div:first-child {text-align: left;}
#electrono .company_details {color:#2E2E2E; float: left; display: inline-block; vertical-align: middle;}
#electrono .company_details b {font-size:18px;}

#electrono .company_inside {text-align: center;}
#electrono .company_inside a.applylink {text-decoration: none;color:#004183;}

/* Bank Box Read More */
#electrono .company_box .drop { display: none;}
#electrono .readmore { color: #0A0A0A; padding: 5px; text-align: left; width: 100%; min-height: 20px; text-decoration: none; }
#electrono .grid {text-align: left;}
#electrono .grid::after { clear: both; content: ' '; display: block; }

#electrono_header { display: block;}

/* Circle Rules */
.electrono-down 	{ height: 25px; width: 25px; position: absolute; top: 0; left: 0; border-radius: 12.5px; border: 2px solid #0A0A0A; }
.electrono-down:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #0A0A0A;
	top: 50%;
	margin-top: -1.5px;
	left: 50%; 
	margin-left: -7.5px;
}
.electrono-up 		{ height: 25px; width: 25px; position: absolute; right: 0; top: 0; border-radius: 12.5px; border: 2px solid #0A0A0A; }
.electrono-up:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #0A0A0A;
	top: 50%;
	left: 50%; 
	margin-top: -1.5px;
	margin-left: -7.5px;
}
.electrono-up:before {
	content: "";
	width: 3px;
	position: absolute;
	height: 15px;
	background-color: #0A0A0A;
	top: 50%;
	left: 50%;
	margin-top: -7.5px;
	margin-left: -1.5px;
}
#electrono .output-number	{ line-height: 22px; font-size:22px;color: #2E2E2E}
#electrono .output-number output {color: #0A0A0A;}
#electrono .output-pad		{ padding: 0 25px; line-height: 25px; min-height: 25px; position: relative; }
.electrono-up:hover, .electrono-down:hover { background-color: #FFC801; cursor: pointer; }
.electrono-control {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome and Opera */
}

/* Show More */
#sw_show_more{text-align:center;cursor:pointer;position:relative;color:#0A0A0A;font-size:25px;z-index:999;margin:15px auto 35px auto;height:25px;line-height:25px!important}
#sw_show_more:hover{color:#408dc2;}
#sw_show_more .fg{position:absolute;width:100%;height:100%;top:0;left:0}

/* 965px wide screens */
@media only screen and (max-width: 965px) {
	#electrono .readmore { border-right: none; }
}

/* 600px wide screens */
@media only screen and (max-width: 600px) {
	#electrono {font-size: 14px;}
	
	#electrono .output-number	{font-size:18px;}
	
	#electrono .companys_header {display:none;}
	#electrono .electrono_rates {margin-top: 10px;}
	
#electrono .company_box .toprow {
	display: grid;
	grid-template-columns: 35% 55%;
	grid-column-gap: 10%;
	margin-bottom: 12px;
}
	#electrono .company_details { width: 100% !important;}
	
	#electrono .company_logo {text-align: center;}
	#electrono .company_logo img {width:auto!important;height:auto;overflow:hidden;margin:0 !important!;padding-left:5px}
	#electrono .company_apply {line-height: 45px;}
	#electrono .company_apply.desktop {display:none}
	#electrono .company_apply.mobile {display:block;margin-bottom: 16px;}
	#electrono .company_details span, .company_details b{width: 50%; float:left;text-align: left;font-size:14px;}
	#electrono .company_details b{text-align: right}
	#electrono .company_details br {display: none;}
	
	#electrono .company_box .midrow {display:block;margin-bottom: 12px;background-color: #e6e6e6;padding:6px;}
	
	#electrono .container {padding-left: 23px;margin: 10px 0 10px 0;font-size: 15px;display:block;}
	
}