/* Genaral Rules */

.rsv {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px 0;
    font-size:16px;
    background-color: #fff;
    padding:0px;
    border-radius: 4px;padding: 15px;
}

/* Sliders */

.rsv_range,
.rsv_range__fill {
    background: #f2f2f2;
    display: block;height: 8em;
    box-sizing: border-box;
    border-radius: 4em;
}

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

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

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

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

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

.rsv-range {margin-bottom: 20px;}
.rsv-slider-principal {width:48%;float:left;}
.rsv-slider-term {width:48%;float:right;}
.fitnessversicherung-slider-principal {width:100%;}

.rsv-termslider-full, .rsv-loanslider-full {width:100%;}

/* Selectors */

.rsv .selectors {
    padding: 15px 15px 0 15px;border: solid thin silver;border-radius: 4px;
}

/* Slider Outputs */

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

.rsv_rates {position: relative;margin-top: 15px;}
.rsv_rates .more_info a {color: #FFF !important;}

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

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

.output { clear: both; }

/* Sorting */
.rsv .sortinglabel {color:#333;display: block;font-weight: 300;font-size: 1rem;}
.rsv select {width: 100%;font-size: 1rem;line-height: 1.5;border: 1px solid #bbb;-webkit-border-radius: 3px;border-radius: 3px;height: 3em;max-width: 100%;padding: 0.7em;margin-bottom: 0.5em;}

/* Bank Box Rules */
.rsv_box { margin-top: 16px; width: 100%; text-align:left; background-color: #ffffff;padding:0;}

.rsv_name {text-align: left;font-weight: 900;margin-bottom: 12px;border-bottom: 1px solid #666;}
.rsv_company {text-align: left;font-weight: 900;margin-bottom: 12px;border-bottom: 1px solid #666;}
.rsv_company em {font-weight: 400;color: #666666;}
.rsv_logo {float: left;margin: 0 12px 12px 0;}
.rsv_logo img {margin: 0;padding:0;}

.rsv_details { padding: 0 0 12px 0; }
.rsv_details span {color:#666666;font-size:12px}

.rsv_rates { padding-top: 0; }
.rsv_rates span {color:#666666;font-size:12px}

.rsv_interest {float:left;text-align: left;color: #666666;}
.rsv_interest b{font-weight: 900;font-size: 25px;color:#343848;}

.rsv_repayment {float:right;text-align: right;color: #666666;}
.rsv_repayment b{font-weight: 900;font-size: 25px;color:#343848;}

.rsv_inside {float:left;width:50%;}

.rsv_comment {margin-bottom: 12px;color:#343848;}

.rsv_highlight {margin-bottom: 12px;color:#343848;display:inline-block;background:#A7F432;padding:2px;}

.rsv_coverage {float:left;text-align: left;color: #666666;}
.rsv_coverage b{font-weight: 900;font-size: 25px;color:#343848;}

.rsv_annual {float:left;text-align: left;color: #666666;}
.rsv_annual b{font-weight: 900;font-size: 25px;color:#343848;}

.rsv_cover {margin: 6px 0;}

.rsv_apply {float:right;text-align: center; padding: 0;line-height: 40px;width:200px;}
.rsv_apply a {display: block;background: #FF135D; color: #FFF !important;text-decoration: none;text-align:center !important;}
.rsv_apply a.url {background: #51D928;}
.rsv_apply a:hover {background: #343848 !important;}

.rsv_savings {text-align: right; padding:0;color:#666666;}
.rsv_savings b{font-weight: 900;font-size: 25px;color:#343848;}

.rsv_inside {width:50%;float:left;line-height: 40px;}

.rsv .read_more { margin-top: 10px;}
.fa.fa-star, .far.fa-star {padding: 1px;font-size: 1em;color: #f89426;}
.grid .colmd4 a {font-size:14px; color:#333333;}

/* Bank Box Read More */
.rsv_box .drop { display: none;}
.rsv .readmore {color: #FF135D;text-align: left; width: 100%;display: block; text-decoration: none;padding:0; }
.rsv_box h6 {color:#324848;margin:12px 0 0 0;}
.rsv_box ul {margin-left:1em !important;}

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

/* Normal Grid Options */
.grid::after { clear: both; content: ' '; display: block; background-color: #f2f2f2;padding:0;}
.colmd3 { width: 50%; text-align: left;}
.col-md-0 { display: none; }

/* List Icon */
.drop {}
.drop ul,
.drop li {padding: 0;
    margin: 2px 1em;
    list-style: none;
}
.drop li:before {content: '\f00c';font-family: 'FontAwesome';float: left;margin-left: -1.5em;color: #FF135D;}

/* Circle Rules */
.rsv .circle-down 	{ height: 20px; width: 20px; position: absolute; top: 0; left: 0; border-radius: 10px; border: 2px solid #FF135D; }
.rsv .circle-down:after {
	content: "";
	width: 10px;
	position: absolute;
	height: 2px;
	background-color: #FF135D;
	top: 50%;
	margin-top: -1px;
	left: 50%;
	margin-left: -5px;
}
.rsv .circle-up 		{ height: 20px; width: 20px; position: absolute; right: 0; top: 0; border-radius: 10px; border: 2px solid #FF135D; }
.rsv .circle-up:after {
	content: "";
	width: 10px;
	position: absolute;
	height: 2px;
	background-color: #FF135D;
	top: 50%;
	left: 50%;
	margin-top: -1px;
	margin-left: -5px;
}
.rsv .circle-up:before {
	content: "";
	width: 2px;
	position: absolute;
	height: 10px;
	background-color: #FF135D;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -1px;
}
.rsv .output-number	{ line-height: 20px; font-size:20px;color: #666666}
.rsv .output-number output {color: #FF135D;}
.rsv .output-pad		{ padding: 0 25px; line-height: 20px; min-height: 20px; position: relative; }
.rsv .circle-up:hover, .circle-down:hover { background-color: #e6e6e6; cursor: pointer; }
.rsv .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 */
}

/* 600px wide screens */
@media only screen and (max-width: 600px) {
    .kvg0, .grid > div.kvg0 { display: inline-block; }
	.kvgsm0, .grid > div.kvg0 { display: none; }
	.extra { width: 100%; }
    .rsv-slider-principal {width:100%;float:left;}
    .rsv-slider-term {width:100%;float:left;}
    .rsv select {padding: 2px;}
    .rsv_slider_output, .rsv_slider_output div { line-height: 26px; }

    .kvg0 .rsv_name {float:left;width:50%}
    .kvg0 .rsv_rate {float:right;width:50%;text-align: right;}
    .kvg0 .kvg7 {margin-bottom: 0;}
    .kvg3 { width: 100%; }

    .rsv_left {text-align: left;}
    .rsv_middle {text-align: center;}
    .rsv_right {text-align: right;}

    .rsv .circle-down 	{height: 16px; width: 16px;border-radius: 8px;}
    .rsv .circle-down:after {height: 2px;width: 10px;margin-top: -1px;margin-left: -5px;}
    .rsv .circle-up 		{height: 16px; width: 16px;border-radius: 10px;}
    .rsv .circle-up:after {width: 10px;height: 2px;margin-top: -1px;margin-left: -5px;}
    .rsv .circle-up:before {height: 10px;width: 2px;margin-top: -5px;margin-left: -1px;}
    .rsv .output-number	{line-height: 16px; font-size:16px;}
    .rsv .output-pad		{padding: 0 16px; line-height: 16px; min-height: 16px;}

    .rsv_interest, .rsv_repayment {font-size: 12px;}
    .rsv_interest b, .rsv_repayment b {font-size: 16px;}

    .rsv {font-size: 14px;}
    .rsv_cover {font-size: 12px;}
    .rsv_logo img {max-width:100px}
    .rsv_rates {margin-top: 10px;}
    .rsv_annual, .rsv_savings, .rsv_coverage {font-size: 12px;}
    .rsv_annual b, .rsv_savings b, .rsv_coverage b {font-size: 16px;}
    .rsv_apply {line-height: 36px;width:120px;}
    .rsv_inside {line-height: 36px;width:120px}
    .rsv .readmore {text-align: left;}

}