/* Genaral Rules */

.loancomparison_form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    margin: 20px 0;
}

/* Sliders */

.loancomparison,
.loancomparison__fill {
    background: #e6e6e6;display: block;height: 8em;
    box-sizing: border-box;
    border-radius: 4em;
}

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

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

.loancomparison__fill {
    height: 14px;
    width: 100%;
    background: #369e71;
    position: absolute;
    top: 0;
}

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

input[type="range"]:focus + .loancomparison .loancomparison__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);
}

.loancomparison-range {margin-bottom: 20px;}

.loancomparison-slider-principal {width:48%;float:left;}

.loancomparison-slider-term {width:48%;float:right;}

/* Slider Outputs */

.loancomparison_slider_output { font-size: 100%; text-align: center; }
.loancomparison_slider_output div { line-height: 25px; }

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

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

.loancomparison_form .main_output { padding-bottom: 14px; clear:both;}
	
.output { clear: both; }

/* Number of Offers */
.banks_matches {font-size: 130%; text-align:center; margin-bottom: 20px !important; color:#369e71;}

/* Checkboxes */
.loancomparison-filterlabel {text-align:center;font-size: 100%;margin-bottom:20px;}
.loancomparison-filterlabel ul, .loancomparison-filterlabel li, .loancomparison_filter_content ul, .loancomparison_filter_content li { list-style: none; position: relative; font-size: 100%;}
.loancomparison-filterlabel ul {padding: 0 !important; margin: 0 !important;  width: 100%;}
.loancomparison-filterlabel li {float: right; text-align: left; }
.loancomparison-filterlabel li.label {float: left; font-weight: 600;color:#339966;}
.loancomparison-filterlabel li.check {padding-left: 10px; }
.loancomparison-filterlabel::after {clear: both; content: " "; display: block; }

.loancomparison_checkbox {width: 20px;height: 20px;display: inline-block;position: relative;top: 3px;margin-right: 10px;}
.loancomparison_checkbox input { visibility: hidden; position: absolute; }
.loancomparison_checkbox label { width: 100%; height: 100%; display: block; border-radius: 3px; border: 1px solid #339966; position: relative; background-color: white; cursor: pointer; }
.loancomparison_checkbox label::after { opacity: 0; border: 3px solid #339966; background: transparent; position: absolute; width: 9px; height: 5px; bottom: 7px; left: 5px; border-top: none; border-right: none; transform: rotate(-45deg);content: "";}
.loancomparison_checkbox label:hover::after {opacity: 0.5;}
.loancomparison_checkbox input[type=checkbox]:checked + label:after {opacity: 1;}
.loancomparison-header-hidden, .loancomparison-slider-hidden, .loancomparison-filter-hidden { display: none !important;}

/* Sorting */
.sorting {font-size: 100%; margin-bottom: 20px;width:100%;}
.sortinglabel {font-weight: 600;color:#339966;float:left;padding: 4px 0;}
.loancomparison_form select {color: #465069;font-family: inherit;font-size: inherit;height:auto;border:1px solid #339966;box-sizing: border-box;line-height:normal;margin: 0;padding: 3px;border-radius:5px;float:right;}
.sorting::after {clear: both; content: " "; display: block; }

/* Bank Box Rules */
.bank_box { margin-bottom: 16px; border: 1px solid #aacc5e; width: 100%; text-align: center;padding: 20px; background: #FFF;}
.bank_logo img {vertical-align: middle;max-height: 40px;}
.bank_details { padding-top: 0; }
.bank_details span {color:#666666;font-size: 80%;}
.bank_details b {font-size:110%;}
.bank_apply { padding: 20px 0 0 0;}
.bank_apply a { display: block; height: 40px; border: 2px solid #369e71; background: #aacc5e; color: #FFF !important;border-radius: 3px; line-height: 38px; text-decoration: none; color: #3D9BE9; padding-bottom: 30px;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 5px 0 rgba(0,0,0,.15);}
.bank_apply a:hover {color: #343848 !important;}
.read_more { margin-top: 10px;}
.read_more a {border: 2px solid #3D9BE9; border-radius: 3px; line-height: 30px; text-decoration: none; background: #ADD8E6; color: #343848; padding:5px;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 5px 0 rgba(0,0,0,.15);}
.fa.fa-star {padding: 1px;font-size: 1em;color: #f89426;}

/* Bank Box Read More */
.bank_box .drop { display: none;}
.readmore { color: #369e71; padding: 5px; text-align: center; width: 100%; min-height: 20px; display: block; text-decoration: none; }
.bank_box h6 {color:#3D9BE9;margin:12px 0 0 0;}

.bank-padding { padding-bottom: 10px; }

.loancomparison_form_header { display: block;}

/* Normal Grid Options */
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-sm-1,
.col-sm-2,
.col-sm-3 { float: left; display: inline-block; vertical-align: middle;}
.grid::after { clear: both; content: ' '; display: block; }
.col-md-2 { width: 16.6666666667%; }
.col-md-3 { width: 50%; }
.col-md-4 { width: 16.6666666667%; }
.col-md-5 { width: 100%; }
.col-md-0 { display: none; }

.bank_logo { padding: 0 0 0 0;}
.bank_apply { padding: 0 0 0 0;}

/* Circle Rules */
.circle-down 	{ height: 25px; width: 25px; position: absolute; top: 0; left: 0; border-radius: 12.5px; border: 2px solid #369e71; }
.circle-down:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #369e71;
	top: 50%;
	margin-top: -1.5px;
	left: 50%; 
	margin-left: -7.5px;
}
.circle-up 		{ height: 25px; width: 25px; position: absolute; right: 0; top: 0; border-radius: 12.5px; border: 2px solid #369e71; }
.circle-up:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #369e71;
	top: 50%;
	left: 50%; 
	margin-top: -1.5px;
	margin-left: -7.5px;
}
.circle-up:before {
	content: "";
	width: 3px;
	position: absolute;
	height: 15px;
	background-color: #369e71;
	top: 50%;
	left: 50%;
	margin-top: -7.5px;
	margin-left: -1.5px;
}
.output-number	{ line-height: 25px; font-size:25px;color: #666666}
.output-number output {color: #369e71;}
.output-pad		{ padding: 0 25px; line-height: 25px; min-height: 25px; position: relative; }
.circle-up:hover, .circle-down:hover { background-color: #e6e6e6; cursor: pointer; }
.circle-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 */
#lc_show_more{text-align:center;cursor:pointer;position:relative;color:#0074c4;min-width:350px;border:2px solid #0074c4;font-size:100%;font-weight:700;z-index:999;margin:15px auto 35px auto;border-radius:5px;width:150px;height:40px;line-height:40px!important}
#lc_show_more:hover{color:#408dc2;border:2px solid #408dc2}
#lc_show_more .fg{position:absolute;width:100%;height:100%;top:0;left:0}

/* 965px wide screens */
@media only screen and (max-width: 965px) {
	.col-md-3 { width: 33.3333333333333%; }
    .col-sm-3 { width: 33.3333333333333%; }
	.col-md-0, .grid > div.col-md-0 { display: inline-block; }
	.col-sm-0, .grid > div.col-md-0 { display: none; }
	.readmore { border-right: none; }
	.extra { width: 100%; }
	.more_info_wrap { padding: 10px 5px; }
	.col-sm-indent { padding: 0 0 15px 0; }
    
    .loancomparison_form .logo { padding-left: 8px !important; }
	.loancomparison-filterlabel li { width: 50%; float: left; padding: 2px 0 !important; }
    .col-md-5 {clear: both;float:none;text-align: center; margin:0 auto;}
    .bank_logo { padding: 5px 0 0 5px;}
    .bank_apply { padding: 5px 5px 0 0;}
}

/* 600px wide screens */
@media only screen and (max-width: 600px) {
    .loancomparison_form {font-size: 0.9rem;}
    .loancomparison-slider-principal {width:100%;float:left;}
    .loancomparison-slider-term {width:100%;float:left;}
	
    .output-number	{font-size:20px;}
    
    .banks_header {display:none;}
    .loancomparison_rates {margin-top: 10px;}

	.col-md-2,
	.col-md-3,
    .col-md-4 { width: 100%; }
	.col-sm-1 { width: 50%; }
	.col-sm-2 { width: 100%; }
	.col-sm-3 { width: 50%; }
    
    .col-md-2 {margin: 5px 0;}
    .loancomparison-filterlabel {font-size: 100%;}
    .loancomparison-filterlabel .label { display: none; }
	.loancomparison-filterlabel .check { display: block; clear: both; }
}

/* 425px wide screens */
@media only screen and (max-width: 425px) {
    .loancomparison_form {font-size: 0.8rem;}
    .output-number	{font-size:18px;}
    .bank_box {font-size: 100%;padding: 10px;}
    .loancomparison_form select {padding: 2px;}
    .loancomparison-filterlabel li { width: 100%;}
    .loancomparison_filter_toggle a {height:26px;line-height: 26px; padding: 4px 6px;border-radius: 13px; font-size: 100%;}
}