section.rates_calc{padding: 100px 30px; background: var(--grade);}
section.rates_calc h2{margin: 0 0 40px 0;}
section.rates_calc h3{color: var(--font)}

/* rate table */
.todo-under {  box-shadow: var(--shadow);  background-color: white; padding: 20px 0;}
#box1{display: block; background: transparent;}
.rate-drop-switch{height: 0; width: 0; padding: 0; display: none;}
.boxwrap.region-table {padding: 0px; width: 100%;}


.region-table table.regions_rates_table {width: 100%; }
.region-table table.regions_rates_table th { font-size: 16px; text-align: left; padding: 12px 10px;}
.region-table table.regions_rates_table td { font-size: 16px; text-align: left; padding: 12px 10px;cursor: pointer;}
.region-table table.regions_rates_table tr th:first-child, .region-table table.regions_rates_table tr td:first-child{padding-left: 30px;} 
.region-table table.regions_rates_table tr th:last-child, .region-table table.regions_rates_table tr td:last-child{padding-right: 30px;} 

.region-table table.regions_rates_table tr td:last-child:after{content: '%'} 
.region-table table.regions_rates_table tr.activated { background: var(--second); color: white;}


/* slider box & monthly payment box*/
.rate-slider{  box-shadow: var(--shadow);  background-color: white; padding: 27px 47px; max-width: 750px; margin: 0 auto;}

/*  slider box amounts */
.rate-slider-title{font-size: 16px;}
.header-figure{font-size: 24px;font-weight: 700; line-height: 1; text-transform: uppercase;  color: #333;}

/* slider */
form#wrapperform{display: flex; justify-content: space-between;height: 45px; margin-top: 30px;}
form#wrapperform input[type=range] {  -webkit-appearance: none; width: 100%; max-width: 420px;  display: inline-block;}
form#wrapperform input[type=range]:focus {outline: none;}

/* slider ball */
form#wrapperform input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;  border: 0;  height: 30px;  width: 30px;  border-radius: 50%;  background: var(--second);  cursor: pointer;margin-top: -5px;}
form#wrapperform input[type=range]::-moz-range-thumb {  border: 0;  height: 30px;  width: 30px;  border-radius: 50%;  background: var(--second);  cursor: pointer;}

/* slider track */
form#wrapperform input[type=range]::-webkit-slider-runnable-track {width: 100%;  height: 15px;  cursor: pointer;  background: #e5e5e5; border: 0; margin-top: 5px;}
form#wrapperform input[type=range]::-moz-range-track { width: 100%;  height: 15px; cursor: pointer; background: #e5e5e5;  border: 0;}
form#wrapperform input[type=range]:focus::-webkit-slider-runnable-track {background-color: var(--ltblue);}
form#wrapperform input[type=range]:focus::-moz-range-track{background-color: var(--ltblue);}


/* slider's dollar amount */
.dollar_wrapper{display: inline-block; border: solid 3px #e5e5e5; width: 100%; max-width: 165px; position: relative;}
form#wrapperform input#loan-amount {font-size: 22px; width: calc(100% - 20px); font-weight: 700; text-align: right; border: 0; background: transparent; color: #333;}
.dollar_wrapper:before {content: '$';}

/* monthly payment box */
div#rate-slider-output-wrap{border: solid 0px fuchsia;display: flex;  flex-direction: column;  align-items: flex-end; padding-right: 30px;}
#rate-slider-output-amount:before{content: '$'; font-size: 30px;position: absolute; top: 0; left: 0;}
#rate-slider-output-amount {border: solid 0px lime;  font-size: 58px; line-height: 1;  font-weight: 700;  color: var(--main); position: relative; padding-left: 20px;}
#rate-slider-output-term {border: solid 0px orange; font-size: 18px;  text-align: right;}

.slider_calc_ctas {display: flex; justify-content: center; align-items: center; z-index: 90}

.slider_calc_ctas a	{margin: 10px;}


/*L*/
@media only screen and (max-width: 1199px) { 
	#payment-container{margin-top: 50px;}
	form#wrapperform input[type=range] { width: 50%;  }
	.header-figure{font-size: 20}


}

/*M*/
@media only screen and (max-width: 991px) {
section.rates_calc{padding: 80px 30px;}
	.rate-slider{ max-width:100%; }
	#rate-slider-container{margin-top: 50px;}
	form#wrapperform input[type=range] { width: 100%;  }

}

/*S*/
@media only screen and  (max-width: 767px) {
section.rates_calc{padding: 70px 30px;}
	.rate-slider{padding: 27px 40px}
	form#wrapperform{flex-direction: column; align-items: center;height: auto; margin-top: 20px;}
	.header-figure{font-size: 24px;}
	form#wrapperform input[type=range] {max-width: 100%; display: block;}
	.dollar_wrapper{display: block; margin-top: 30px}
}

/*XS*/
@media only screen and  (max-width: 575px) {
	section.rates_calc{padding: 60px 0px;}
	.slider_calc_ctas {flex-direction: column;padding-top: 30px;}
	div#rate-slider-output-wrap{max-width: 275px; margin: 0 auto;padding-right: 0}
	.header-figure{font-size: 18px}
	.rate-slider{padding: 20px 20px}

}

@media only screen and  (max-width: 400px) {
	.header-figure{font-size: 16px}


}