/* Form Styles */
#thistlecu {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	margin: 0 auto 20px auto;
	background-color: #DCCCF8;
}

/* Grid */
.thistlecu_grid {display:grid;grid-template-columns:60% 40%;}

/* Input Section */
#thistlecu .loantypelabel {text-align: left;}
#thistlecu .thistlecu-inputs  {padding: 20px;}
#thistlecu .slider-label {color:#000000;font-size:18px;margin: 20px 0 4px 0;text-align: left;}
#thistlecu .thistlecu_slider_output {line-height: 25px; font-size: 25px; text-align: center; margin-bottom: 6px;}

/* Loan selector */
#thistlecu span.select {
	position: relative !important;
	display: block !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: auto;
}
#thistlecu select {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 3px 0 10px 0;
	width: 100%;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 16px;
	outline: none;
}

#thistlecu select {
	-webkit-appearance: none;
	-moz-appearance: none;
	background: white;
	margin-right:0;
	padding: 10px;
}

#thistlecu select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}

/* Selector Arrows */
#thistlecu select.minimal {
  background-image:
	linear-gradient(45deg, transparent 50%, gray 50%),
	linear-gradient(135deg, gray 50%, transparent 50%),
	radial-gradient(#ddd 70%, transparent 72%);
  background-position:
	calc(100% - 20px) calc(17px),
	calc(100% - 12px) calc(17px),
	calc(100% - .5em) 8px;
  background-size:
	8px 8px,
	8px 8px,
	1.5em 1.5em;
  background-repeat: no-repeat;
}

#thistlecu .range {padding-top: 24px;}

/* Up down buttons */
#thistlecu .thistlecu-down { height: 25px; width: 25px; position: absolute; left: 0; border-radius: 12.5px; border: 2px solid #3f0250; }

#thistlecu .thistlecu-down:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #3f0250;
	top: 50%;
	margin-top: -1.5px;
	left: 50%; 
	margin-left: -7.5px;
}
#thistlecu .thistlecu-up { height: 25px; width: 25px; position: absolute; right: 0;border-radius: 12.5px; border: 2px solid #3f0250; }

#thistlecu .thistlecu-up:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #3f0250;
	top: 50%;
	left: 50%; 
	margin-top: -1.5px;
	margin-left: -7.5px;
}

#thistlecu .thistlecu-up:before {
	content: "";
	width: 3px;
	position: absolute;
	height: 15px;
	background-color: #3f0250;
	top: 50%;
	left: 50%;
	margin-top: -7.5px;
	margin-left: -1.5px;
}

#thistlecu .thistlecu-up:hover, .thistlecu-down:hover { background-color: #e6e6e6; cursor: pointer; }

#thistlecu .thistlecu-control {
	touch-action: none;
}

/* Slider values */
#thistlecu .output-values {line-height: 25px; font-size:25px;color: #666666;text-align: center;}
#thistlecu .output-values output {color: #3f0250;}
#thistlecu .output-pad	{ padding: 0 25px; line-height: 25px; min-height: 25px; position: relative; text-align: center;}

/* Sliders */
#thistlecu .thistlecu, .thistlecu__fill {
	background: #4b5259;display: block;height: 8px;
	border-radius: 4px;
	box-sizing: border-box;
	}

#thistlecu .thistlecu {position: relative;height: 8px;width: 100%;margin:1em 0 0.5em 0;}

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

#thistlecu .thistlecu__fill {height: 8px;width: 100%;background: #3f0250;position: absolute;top: 0;border-radius: 4px 0 0 4px;}

#thistlecu .thistlecu__handle {
	background: #3f0250;
	border: 2px solid #EFEFEF;
	cursor: pointer;
	display: inline-block;
	width: 25px;
	height: 25px;
	position: absolute;
	top: -9.5px;
	border-radius: 50%;
}

/* Outputs */
#thistlecu .thistlecu-outputs {padding: 20px;}
#thistlecu .thistlecu-outputs .interestrate {font-weight: 600;font-size:2.3em;color: #3f0250}
#thistlecu .thistlecu-outputs table.output-table {width:100%;border-collapse: collapse;text-align: left;background-color: #d7d7d7}
#thistlecu .thistlecu-outputs table.output-table td {padding: 10px;border-bottom: 2px solid #EFEFEF !important;vertical-align: middle !important;}
#thistlecu .thistlecu-outputs table.output-table td span {font-size:24px;font-weight:900;}

/* Application Button */
#thistlecu .thistlecu_register a {margin: 20px 0 0 0;font-family: inherit;font-size: inherit;width: 100%;box-sizing: border-box;background: #3f0250;color:#FFF;text-align: center;cursor: pointer;border:none;padding:8px;border-radius: 18px;display:block;text-decoration: none;}

/* Cell Phone */
@media only screen and (max-width: 800px) {
	#thistlecu .thistlecu_grid {display:block;}
	#thistlecu{
		padding: 12px;
	}
}