section.rates_calc{padding: 100px 30px;}
section.rates_calc h2{margin: 0 0 40px 0;}

/* rate table */
.todo-under {border-radius: 50px 0;  box-shadow: var(--shadow);  background-color: var(--whitebg); 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%;}

.max_amt{display: none;}

.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(--main); color: var(--whitebg);}


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

/*  slider box amounts */
.rate-slider-title{font-size: 16px;}
.header-figure{font-size: 30px;font-weight: 900; line-height: 1.15}
	.calcbuttons{display:none;}
	#buttons1{display: inline;}



/* 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; background-color: transparent}
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-radius: 15px 0; border: solid 3px #e5e5e5;width: 100%; max-width: 165px; position: relative;}
form#wrapperform input#loan-amount {font-size: 26px; width: calc(100% - 20px); font-weight: 900; text-align: right; border: 0; background: transparent;}
.dollar_wrapper:before {content: '$';}

body.dark-mode .dollar_wrapper{background-color: var(--pale); color: var(--whitebg)}


/* 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 {border: solid 0px lime;  font-size: 62px;  line-height: 1;  font-weight: 900;  color: var(--main); position: relative; padding-left: 20px;}
#rate-slider-output-amount:before{content: '$'; font-size: 30px;position: absolute; top: 0; left: 0;}
#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;}
.slider_calc_ctas a{margin: 5px;}


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

}

/*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%;  }
	.dollar_wrapper{ max-width: 200px; }



}

/*S*/
@media only screen and  (max-width: 767px) {
section.rates_calc{padding: 70px 30px;}
	.slider_calc_ctas {flex-direction: column;}
	.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{padding-top: 30px;}
	div#rate-slider-output-wrap{max-width: 275px; width: auto; margin: 0 auto;padding: 0;  align-items: center;}
}

