/*
Dark grey:  #58595B
Blue:		#006699
*/

/* Colours */
#kreditrechner {
	color:#58595B;
	background-color: #ffffff;
	border: 1px solid #ccc;
}

.kreditrechner-down:after,
.kreditrechner-up:after,
.kreditrechner-up:before,
.kreditrechner__fill {
	background: #2a83b6;
}
.kreditrechner-down, .kreditrechner-up, .kreditrechner__handle {border: 2px solid #2a83b6; }
.kreditrechner-up:hover, .kreditrechner-down:hover { background-color: #ffffff;}
.kreditrechner-output-values output,
.kreditrechner-outputs .outputvalue {
	color: #2a83b6;
}
.kreditrechner-outputs, .kreditrechner__handle {background-color: #FFFFFF;}

.kreditrechner_slider svg {fill:#2a83b6;}

/* Form Settings */
#kreditrechner {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom:20px;
	padding:24px;
}

/* Buttons */
.kreditrechner-range {margin-bottom: 24px;}
.kreditrechner_slider {display:grid;grid-template-columns:5% 90% 5%;grid-column-gap: 0;position: relative;}
.kreditrechner_slider svg {cursor: pointer;}
.kreditrechner_slider div.plus {text-align:right;}

.kreditrechner-pad	{line-height: 25px;margin:  0 auto 6px;text-align: center; }
.kreditrechner-pad .output-label {color: #585858;font-size:18px;}
.kreditrechner-pad .output-value {color: #585858;font-weight: 900;font-size:18px;}

.circle-control {touch-action: none;}

/* Sliders */
.kreditrechner,
.kreditrechner__fill,
input[type=range] {
	background: #e6e6e6;display: block;
	box-sizing: border-box;
	border-radius: 3px;
}

.kreditrechner {
	position: relative;
	height: 6px;
	width: 100%;
	margin:9px 0;
}

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

.kreditrechner__fill {
	height: 6px;
	width: 100%;
	position: absolute;
	top: 0;
}

.kreditrechner__handle {
	background: #fff;
	cursor: pointer;
	display: inline-block;
	border: 2px solid #2a83b6;
	width: 21px;
	height:21px;
	position: absolute;
	top: -9px;
	border-radius: 50%;
	box-sizing: content-box !important;
}

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

/* Slider outputs */
.kreditrechner-slideroutput:after, .kreditrechner-range:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.kreditrechner-slideroutput { text-align: center; }
.kreditrechner-slideroutput .kreditrechner-sliderbuttonleft { position: relative; float: left; height: 30px; width: 10%; text-align: left; }
.kreditrechner-slideroutput .kreditrechner-sliderbuttonright {position: relative; float: right; height: 30px; width:10%; text-align: right; }
.kreditrechner-slideroutput .kreditrechner-slidercenter {margin: auto; width:40%; display: inline-block; text-align:center; outline: 0; }
.kreditrechner-slidercenter input.output { width: 100%; text-align: center; }

/* Outputs */
#kreditrechner table.output-table {width:100%;border-collapse: collapse;}
#kreditrechner table.output-table td {padding: 10px 0 ;border:none; border-bottom: 1px solid #ccc;vertical-align: middle !important;}
#kreditrechner table.output-table td.first {padding:  0 0 10px 0;}
#kreditrechner table.output-table td.last {border-bottom: none;padding: 10px 0 0 0;}
#kreditrechner table td.table-label {text-align: left;font-weight: 400;}
#kreditrechner table td.table-davon {text-align: left;font-style: italic;}
#kreditrechner table td.table-output {text-align: right;font-weight: 900;}

/* Disclaimer */
.disclaimer {padding-top: 24px;font-size: 12px;}

@media only screen and (max-width:600px) {
	.kreditrechner-grid{display:block;}
	.kreditrechner_form {padding: 12px;}
	.kreditrechner_slider {grid-template-columns:9% 82% 9%;}
	.kreditrechner-inputs {margin-right:0;}
	.kreditrechner-pad .output-label {color: #585858;font-size:16px;}
	.kreditrechner-pad .output-value {color: #585858;font-weight: 900;font-size:16px;}
	.kreditrechner-outputs {padding: 12px;margin-top:12px;}
	.kreditrechner-output-values {font-size:16px;}
	.kreditrechner-outputs .outputvalue {font-size:16px;}
}