/* BLACK */
#mort_calc_wrap{border: solid 0px black; display: flex; align-items: flex-end; padding-bottom: 40px}

#loan_length_wrap{background: var(--blugradeV); border-radius: 10px; padding: 22px; width: 40%}
.choose{font-size: 30px; font-weight: 600; color: white;   line-height: 1.2; margin-bottom: 20px;}
.loan_length{border-radius: 10px; background-color: white; padding: 17px;}
.loan_length label{color: var(--font); display: block;  font-size: 16px;}
.loan_length label:hover{color: var(--second); font-weight: 600;}
.loan_length table{ width: 100%;}
.loan_length input {display: none;}


table.calc_titles{width: 100%;}
table.calc_titles th {font-weight: 600; color: black; font-size: 20px; padding: 0 5px }
table.calc_titles td {font-weight: 600; color: var(--second); font-size: 18px;padding: 0 5px }

table.chooser tr th, table.chooser tr td {width: 23%;}
table.chooser tr th:first-child, table.chooser tr td:first-child {width: 44%;}


/* GOLD */
.top-row{border: solid 0px gold; width: 60%; padding-left: 30px; position: relative;}
.loanamt{  font-size: 30px; font-weight: 600; color: var(--main); display: block;}




/* LIME */
#loan_amount_input{border: solid 0px lime; }
#loan_amount_range{width: 100%;}
#loan_amount_output{display: block; width: 33%; height: 50px; padding: 13px; border-radius: 10px; border: solid 1px #999; font-size: 20px; font-weight: 600; color: var(--second); line-height: 1}


/* SLIDER */
/* Hides the slider so custom styles can be added
input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}
 */

input[type=range] {-webkit-appearance: none; border: 0; background-color: var(--font); height: 2px;}
input[type=range]:focus {outline: none;}

input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus::-webkit-slider-thumb{background: var(--blu)}
input[type=range]:hover::-moz-range-thumb, input[type=range]:focus::-moz-range-thumb{background: var(--blu)}

/* SLIDER BUTTON */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; border: 0px solid #000000; height: 20px; width: 20px; border-radius: 50%; background: var(--second); cursor: pointer; }
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {border: 0px solid #000000; height: 20px; width: 20px; border-radius: 50%x;  background:  var(--second); cursor: pointer;}

/* GREEN */
#rate_output_wrap{border: solid 0px green; width: 63%; position: absolute; top: 0; right: 0;}

/* CYAN */
.second-row{border: solid 0px cyan; background-color: var(--pale); display: flex;align-items: center; border-radius: 10px;}

/* FUCHSIA */
.calc_answer{border: solid 0px fuchsia; width: 70%; display: flex;align-items: center;}

/* PURPLE */
.Phead{border: solid 0px purple; width: 61%;  font-size: 30px; font-weight: 600; color: var(--second); padding: 30px;}
#payment_output{height: 65px; padding: 13px 18px; line-height: 1; border-radius: 10px; border: 1px solid #999; background-color: #fff; width: 36%}
output#total{  font-size: 30px;  font-weight: bold; color: var(--second)}

/* SILVER */
.calc_buttons{border: solid 0px silver}
.calc_buttons a{margin: 0 10px;}

	/*XL*/
	@media only screen and (max-width: 1240px) {
		table.calc_titles th {font-size: 18px;  }
		table.calc_titles td {font-size: 16px;}
	}

	/*L*/
	@media only screen and (max-width: 1199px) {
		#rate_output_wrap{width: 100%; position: relative;}
		#loan_length_wrap, .top-row{width: 50%}
		.calc_buttons{WIDTH: 100%; display: flex; justify-content: flex-end; padding: 20px 30px 20px 0}
		.second-row{display: block;}
		.calc_answer{ width: 100%; }
		.Phead{width: 50%;padding: 30px;}
		#payment_output{width: calc(50% - 30px);}
		#loan_amount_output{width: 100%; }
	}

	/*M*/
	@media only screen and (max-width: 991px) {
		#loan_length_wrap{width: 56%}
		.top-row{width: 44%}
		.Phead{width: 44%;padding: 20px;}
		#payment_output{width: calc(56% - 30px)}
	}

	/*S*/
	@media only screen and  (max-width: 767px) {
		#mort_calc_wrap{ display: block;}
		#loan_length_wrap{width: 100%; margin-bottom: 30px;}
		.top-row{width: 100%; padding: 0}
		#loan_amount_output{ width: 36%;}
		#rate_output_wrap{width: 60%; position: absolute; top: 0px; right: 0;}
		.calc_answer{display: block;}
		.Phead{width: 100%;padding: 30px; text-align: center;}
		#payment_output{max-width: 385px; width: 100%; text-align: center; margin: 0 auto;}
		.calc_buttons{display: block; text-align: center;}
		.calc_buttons a{margin: 20px 10px;}
	}

	/*XS*/
	@media only screen and  (max-width: 575px) {
		#rate_output_wrap{width: 100%; position: relative;}
		#payment_output{max-width: 90%; }
		#loan_amount_output{ width: 100%;}
		.calc_buttons{padding: 10px 0}
	}