section.rates_calc .container-fluid{max-width: 1400px}

.placeholder{background: none;}

/* rate table */
.todo-under {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, .bttns{display: none;}

.region-table table.regions_rates_table {width: 100%; border-collapse: separate; border-spacing: 0 1rem; }
.region-table table.regions_rates_table th { text-align: left; padding: 0px 0 0px 10px;color: white;font-size: 18px;}
.region-table table.regions_rates_table tr th:last-child{width: 150px; text-align: left; }

.region-table table.regions_rates_table td { font-size: 16px; text-align: left; padding: 25px 0 25px 10px ;cursor: pointer; background-color: white; color: var(--font);font-size: 20px;}
/*
.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 td{ background-color: var(--second);}


/* slider box & monthly payment box*/
.rate-slider{ background-color: white; padding: 30px; max-width: 750px; margin: 20px auto; color: var(--font);}

/*  slider box amounts */
.rate-slider-title{font-size: 20px;  font-weight: 500;}
.rate-slider-title span{color: var(--second);}
.header-figure{  font-size: 32px;  font-weight: 500; line-height: 1.15}
#number-of-months-header:after{content:' Months';}
#loan-interest:after{content: '%'} 



/* 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(--main);  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: #b7cbe1; border: 0; margin-top: 5px;}
form#wrapperform input[type=range]::-moz-range-track { width: 100%;  height: 15px; cursor: pointer; background: #b7cbe1;  border: 0;}
form#wrapperform input[type=range]:focus::-webkit-slider-runnable-track {background-color: var(--pale);}
form#wrapperform input[type=range]:focus::-moz-range-track{background-color: var(--pale);}


/* slider's dollar amount */
.dollar_wrapper{display: inline-block;border: 0; background-color: var(--pale); width: 100%; max-width: 165px; position: relative; padding: 0 10px;}
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(--font)}


/* 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: 56px;  font-weight: 500; line-height: 1;  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: 20px; font-weight: 500; text-align: right; color: var(--font);}

.slider_calc_ctas {display: flex; justify-content: center; align-items: center;}
.slider_calc_ctas a{margin: 5px;}
	.calcbuttons{display:none;}
	#buttons1{display: inline;}


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


}

/*M*/
@media only screen and (max-width: 991px) {
	section.rates_calc{padding: 60px var(--Pside);}
	.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) {
	.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: 50px var(--Pside);}
	.slider_calc_ctas{padding-top: 30px;}
	div#rate-slider-output-wrap{max-width: 275px; width: auto; margin: 0 auto;padding: 0;  align-items: center;}
}