/****************************************** Mortgage Calculator Form Start **************************************************/
main * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
main > .section-whitebg{padding:140px 100px;}
main > .section-whitebg > .container{max-width:100%; margin:auto;}

#MortgageCalculatorTab a{outline:none;}
#MortgageCalculatorTab{display:flex; flex-direction:column; gap:40px; font-family:'Poppins', sans-serif;}
#MortgageCalculatorTab .calculator-top{display:flex;}
#MortgageCalculatorTab .calculator-top .calculator-title{background:#121212; padding:18px 24px; display:flex; align-items:center; justify-content:center;}
#MortgageCalculatorTab .calculator-top .sec-tit{font-size:20px; font-weight:600; color:#fff; padding:0; margin:0; white-space:nowrap;}
#MortgageCalculatorTab .calculator-top .nav{padding:0 32px; margin:0; display:flex; width:100%; background:#fff; border:solid 2px #f3f3f3; border-left:none; column-gap:30px;}
#MortgageCalculatorTab .calculator-top .nav:before,
#MortgageCalculatorTab .calculator-top .nav:after{display:none;}
#MortgageCalculatorTab .calculator-top .nav li{list-style:none; padding:0; margin:0; border:none; display:flex; align-items:center;}
#MortgageCalculatorTab .calculator-top .nav li > a{border:none; padding:0; margin:0; font-size:15px; font-weight:600; color:#000; cursor:pointer;}
#MortgageCalculatorTab .calculator-top .nav li > a:hover{color:#BC8F45;}
#MortgageCalculatorTab .calculator-top .nav li.active > a,
#MortgageCalculatorTab .calculator-top .nav li > a.active{color:#BC8F45; background-position:0 !important;}

#MortgageCalculatorTab .sub-tabtop{display:flex; border-bottom:solid 2px #f3f3f3; padding-bottom:5px; margin-bottom:32px;}
#MortgageCalculatorTab .sub-tabtop .calculator-title{padding:0 32px 0 0; display:flex; align-items:center; justify-content:center;}
#MortgageCalculatorTab .sub-tabtop .sec-tit{font-size:20px; font-weight:600; color:#000; padding:0; margin:0; white-space:nowrap;}
#MortgageCalculatorTab .sub-tabtop .nav{padding:0 32px; margin:0; display:flex; width:100%;  border-left:solid 2px #f3f3f3; column-gap:30px;}
#MortgageCalculatorTab .sub-tabtop .nav:before,
#MortgageCalculatorTab .sub-tabtop .nav:after{display:none;}
#MortgageCalculatorTab .sub-tabtop .nav li{list-style:none; padding:0; margin:0; border:none; display:flex; align-items:center;}
#MortgageCalculatorTab .sub-tabtop .nav li > a{border:none; padding:12px 0; margin:0; font-size:15px; font-weight:600; color:#000; cursor:pointer}
#MortgageCalculatorTab .sub-tabtop .nav li > a:before{bottom:-7px !important;}
#MortgageCalculatorTab .sub-tabtop .nav li > a:hover{color:#BC8F45;}
#MortgageCalculatorTab .sub-tabtop .nav li.active > a,
#MortgageCalculatorTab .sub-tabtop .nav li > a.active{color:#BC8F45; background-position:0 !important;}

#MortgageCalculatorTab .tab-content{width:100%;}
#MortgageCalculatorTab .tab-pane,
#MortgageCalculatorTab .tab-pane{display:none;}
#MortgageCalculatorTab .tab-pane.show,
#MortgageCalculatorTab .tab-pane.active{display:block;}
#MortgageCalculatorTab .tab-row{display:flex; justify-content:space-between; align-items: flex-start; row-gap:30px;}
#MortgageCalculatorTab .tab-col1{width:calc(33.33% - 15px); background:#121212; padding:32px 24px;}
#MortgageCalculatorTab .tab-col1 h2{font-size:24px; color:#fff; font-weight:600; padding:0 0 26px; margin:0;; border-bottom:solid 1px rgba(255,255,255,0.2);}
#MortgageCalculatorTab .tab-col1 > form{padding:26px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; row-gap:20px;}
#MortgageCalculatorTab .tab-col1 .form-group{width:calc(50% - 8px); position:relative; margin:0; display:flex; flex-direction:column; justify-content: space-between;}
#MortgageCalculatorTab .tab-col1 .form-group > label{padding:0 0 10px; margin:0; font-size:14px; color:#fff; font-weight:500;}
#MortgageCalculatorTab .tab-col1 .form-group > label > span{display:block;}
#MortgageCalculatorTab .tab-col1 .form-group .form-control{padding:15px 16px; margin:0; background:#2a2a2a; border:none; color:#fff; font-size:14px; font-weight:500; box-shadow:none; outline:none; height:50px; width:100%;}
#MortgageCalculatorTab .tab-col1 .form-group .form-control::-moz-placeholder{color:#fff;}
#MortgageCalculatorTab .tab-col1 .form-group .form-control:-ms-input-placeholder{color:#fff}
#MortgageCalculatorTab .tab-col1 .form-group .form-control::-webkit-input-placeholder{color:#fff}
#MortgageCalculatorTab .tab-col1 .form-group input[type=number]::-webkit-outer-spin-button,
#MortgageCalculatorTab .tab-col1 .form-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; -moz-appearance:none; appearance:none;}
#MortgageCalculatorTab .tab-col1 .form-group input[type=number]{-moz-appearance:textfield;}
#MortgageCalculatorTab .tab-col1 .form-group select.form-control{-webkit-appearance:none; -moz-appearance:none; appearance:none; background:#2a2a2a url(images/select-down.svg) right 16px center no-repeat; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right:40px;}
#MortgageCalculatorTab .tab-col1 .input-item-relative{position:relative;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn-group-wrp{position:absolute; right:2px; top:2px; overflow:hidden; background:#5d5d5d;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn-group{display:flex;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn{padding:0 16px; margin:0; background:none; outline:none; color:#fff; height:46px; display:flex; align-items:center; float:none; border:none; font-size:14px; font-weight:500; cursor:pointer;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn > input{opacity:0; visibility:hidden; position:absolute; left:0; right:0; top:0; bottom:0; margin:0;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn.active{background:#fff; color:#000;}

#MortgageCalculatorTab .tab-col2{width:calc(66.67% - 15px); display:grid; gap:30px; grid-template-columns:repeat(1, 1fr);}
#MortgageCalculatorTab .tab-col2-top{display:grid; gap:30px; grid-template-columns:repeat(2, 1fr);}
#MortgageCalculatorTab .tab-col2-top .conventional-button{display:grid; gap:16px; grid-template-columns:repeat(2, 1fr); height:100%;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head{padding:35px 20px; margin:0; color:#000; display:flex; flex-direction:column; justify-content:space-between; background:#f3f3f3;}
/*#MortgageCalculatorTab .tab-col2-top .conventional-button .org-bg{background:#ff8019;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .dbl-bg{background:#074991;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .drk-bg{background:#222222;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .lbl-bg{background:#2fabe1;}*/
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head p{padding:0 0 20px; margin:0; font-size:14px; font-weight:600; line-height:22px;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head h2{color:#000; font-size:20px; font-weight:bold;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head.drk-bg h2 span:first-child{padding-right:5px;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head.drk-bg h2 span:last-child{padding-left:5px;}
#MortgageCalculatorTab .tab-col2-top .boxs2{display:grid; gap:30px; grid-template-columns:repeat(1, 1fr);}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data{border:solid 2px #f3f3f3; padding:40px 24px;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data .slider-label{display:flex; justify-content:space-between; font-size:20px; color:#000; font-weight:600; padding:0 0 30px;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data .slider-label strong{font-weight:700;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data .calculator-sliders{background:#f3f3f3; border:none; outline:none; border-radius:0; height:4px;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data .ui-slider-range{background:#000; border-radius:0;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data .ui-slider-handle{background:#fff; border-radius:100%; height:20px; width:20px; border:solid 3px #000; top:-9px; outline:none;}

#MortgageCalculatorTab .tab-col2-btm{display:grid; gap:30px; grid-template-columns:repeat(2, 1fr);}
#MortgageCalculatorTab .tab-col2-btm .info-boxs{border:solid 2px #f3f3f3; padding:30px 24px;}
#MortgageCalculatorTab .tab-col2-btm .card-title{padding:0 0 30px;}
#MortgageCalculatorTab .tab-col2-btm .card-title h2{font-size:20px; color:#000; font-weight:600; padding:0; margin:0;}
#MortgageCalculatorTab .tab-col2-btm .graph-items{display:flex; align-items:flex-start;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph{max-width:200px; position:relative;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph .absolute-center{position:absolute; left:50%; top:50%; text-align:center; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); display:flex; flex-direction:column; justify-content:center; line-height:24px;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph .absolute-center strong{font-size:20px; color:#000; font-weight:700;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph .absolute-center p{padding:0; margin:0; font-size:15px; font-weight:500; color:#000;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list{padding:0 0 0 20px; margin:0; list-style:none; display:flex; flex-direction:column; row-gap:24px;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list li{position:relative; padding:0 0 0 22px;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list li span.dots{position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:100%;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list li > span:not(.dots){font-size:14px; line-height:24px; font-weight:600; display:block; color:#000;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list li > span:not(.dots) > span{font-weight:bold;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul{display:grid; grid-template-columns:repeat(2, 1fr); padding:0; margin:0; list-style:none; column-gap:16px; row-gap:32px;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul li{font-size:12px; font-weight:500; color:#000;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul li span > b{font-weight:normal;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul li span > span{font-weight:bold; font-size:20px; display:block;}

#MortgageCalculatorTab .tab-col1 .input-item-relative.payment-frequency .btn-group-wrp{position:relative; right:0; top:0; border:solid 2px #2a2a2a;}
#MortgageCalculatorTab .tab-col1 .input-item-relative.payment-frequency .btn{width:50%; justify-content:center;}

#MortgageCalculatorTab .fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}
#MortgageCalculatorTab .fade.in{opacity:1}

#MortgageCalculatorTab .summary-description{width:100%; border:solid 2px #f3f3f3; padding:30px 24px;}
#MortgageCalculatorTab .summary-description h4{font-size:20px; color:#000; font-weight:600; padding:0 0 15px; margin:0;}
#MortgageCalculatorTab .summary-description p{padding:0; margin:0; font-size:15px; color:#000;}
#MortgageCalculatorTab .summary-description p strong{color:#BC8F45;}

.section-whitebg .disclaimer-description{padding:30px 0 0; margin:0;}
.section-whitebg .disclaimer-description h3{font-family: "Montserrat",sans-serif; font-size:14px; color:#000; font-weight:600; padding:0 0 10px; margin:0;}
.section-whitebg .disclaimer-description p{font-family: "Montserrat",sans-serif; font-size:11px; color:#000; padding:0 0 10px;}
.section-whitebg .disclaimer-description p:last-of-type{padding:0; margin:0;}

#MortgageCalculatorTab .tab-col2 .purchase-top{display:grid; gap:30px; grid-template-columns:repeat(2, 1fr);}
#MortgageCalculatorTab .tab-col2 .purchase-top .top-head{padding:16px 12px; display:flex; justify-content:space-between; font-size:14px;}
#MortgageCalculatorTab .tab-col2 .purchase-top .top-head span > span{display:block; font-weight:bold;}
#MortgageCalculatorTab .tab-col2 .purchase-top .light-primary-bg{background:rgba(0,0,0,0.05);}
#MortgageCalculatorTab .tab-col2 .purchase-top .light-red-bg{background:rgb(188 143 69 / 5%);}
#MortgageCalculatorTab .tab-col2 .purchase-top .light-red-bg span > span{color:#bc8f45;}

#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab{margin-bottom:24px; border-bottom:solid 2px #f3f3f3;}
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li{position:relative; transition:transform .3s ease-in-out; cursor:pointer; padding-bottom:10px;}
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li span{font-size:16px;}
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li:hover,
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li.active{color:#bc8f45;}
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li:after{content:''; position:absolute; width:100%; height:2px; border-radius:0; background-color:#bc8f45 ;bottom:-2px; left:0; transform-origin:right; transform:scaleX(0); transition:transform .3s ease-in-out; opacity:1; transition-duration:inherit;}
#MortgageCalculatorTab .tab-col .info-boxs ul.payment-ultab li.active:after{transform-origin:left; transform:scaleX(1);}

#MortgageCalculatorTab .tab-col2 .field-box{display:flex; flex-direction:column;}
#MortgageCalculatorTab .tab-col2 .field-box label{padding:0 0 10px; margin:0; font-size:14px; font-weight:500;}
#MortgageCalculatorTab .tab-col2 .field-box input{border:solid 1px #f3f3f3; font-size:14px; border-radius:0; height:auto; padding:10px 16px;}
#MortgageCalculatorTab .tab-col2 .btn-group{padding-top:24px;}
#MortgageCalculatorTab .tab-col2 .btn-set{display:flex; justify-content:space-between; border:solid 1px #f3f3f3; padding:10px;}
#MortgageCalculatorTab .tab-col2 .btn-set button{width:100%; text-align:center; font-size:14px; font-weight:500; color:#000; background:none; border:none; border-radius:0; outline:none; padding:14px 5px; box-shadow:none;}
#MortgageCalculatorTab .tab-col2 .btn-set button.active{background:#bc8f45; color:#fff;}

#MortgageCalculatorTab .tab-col1 h5{color:#fff; padding:0 0 10px; margin:0; font-size:18px;}
#MortgageCalculatorTab .tab-col1 .full-group.form-group{width:100%;}
#MortgageCalculatorTab .tab-col1 .full-group .sub-group{display:flex; flex-wrap:wrap; row-gap:20px; justify-content:space-between;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp{position:relative; right:0; top:0; background:none;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group{flex-direction:column; gap:2px;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary{background:#5d5d5d; position:relative; width:100%; color:#fff; padding:0 16px; gap:10px;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary .checkmark{width:16px; height:16px; border-radius:100%; border:solid 2px #fff; position:relative;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary .checkmark:after{content:''; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:8px; height:8px; border-radius:100%;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary.active{background:#fff; color: #000;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary.active .checkmark{border-color: #000;}
#MortgageCalculatorTab .tab-col1 .full-group > .input-item-relative .btn-group-wrp .btn-group .btn-primary.active .checkmark:after{background:#000;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head{display: grid; grid-template-columns: repeat(2, 1fr); gap:16px;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head .light-primary-bg{padding: 35px 20px; margin: 0; color: #000; background: #f3f3f3; text-align: center; border: solid 1px transparent;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head .light-primary-bg p{padding:0 0 20px; margin:0; font-size:14px; font-weight:600; line-height:22px; display: block;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head .light-primary-bg h2{color:#000; font-size:30px; font-weight:bold;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head .light-primary-bg.active{border-color: #BC8F45;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper{display: grid; grid-template-columns: repeat(1, 1fr); gap:24px;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper .progress-bar-inner .refinance-loan-info{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; align-items: center;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper .progress-bar-inner .refinance-loan-info p,
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper .progress-bar-inner .refinance-loan-info span{margin:0; font-size:14px; font-weight:600; line-height:22px; color: #000;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper .progress-bar-inner #myProgress{width: 100%; background-color: #f3f3f3; border-radius: 0px; overflow: hidden;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .refinance-data .progress-bar-wrapper .progress-bar-inner #myProgress #myBar{height: 40px; transition: width 500ms linear; background-color: #BC8F45;}

#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item{width: 100%;}

#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item .rentvs-buy-list-title{position: relative;cursor: pointer;padding: 15px 0;margin-bottom: 5px;border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item .rentvs-buy-list-title:after {content: '';position: absolute;top:22px; right: 0;background-image: url(./images/down-arrow.svg);background-repeat: no-repeat;background-position: center center;background-size: cover;-webkit-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;width: 12px;height: 12px;display: block;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item .rentvs-buy-list-title .title-check-mark {width: 16px;height: 16px;border-radius: 50%;border: 2px solid #BC8F45;background-color: transparent;display: inline-block;margin-right: 10px;vertical-align: middle;text-align: center;line-height: 12px;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item .rentvs-buy-list-title.active .title-check-mark{background-color: #BC8F45;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form .rentvs-buy-list-item h4.active:after {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 > form{padding: 0; grid-row-gap: 10px;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 .mortage-information-section,
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 .buying-assumptions-section,
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 .renting-assumptions-section{display: flex; flex-wrap: wrap; grid-row-gap: 16px; padding-top: 16px;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col1 .form-group{/*width: 100%;*/}
#MortgageCalculatorTab .slider-data-wrp #rentbuy_slider{border: none; background: #f3f3f3; height: 4px;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col2-top .boxs2 .calculator-slider-data .ui-slider-handle{width: 40px; height: 40px; top: -20px; display: flex; align-items: center; justify-content: center;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col2-top .conventional-button .top-head{text-align: center;}
#MortgageCalculatorTab #rentvsbuy_tab .tab-col2-top .conventional-button .top-head h2{font-size: 22px;}

#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper{display: grid; grid-template-columns: repeat(1, 1fr); gap:24px;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper .progress-bar-inner .rent-buy-loan-info{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; align-items: center;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper .progress-bar-inner .rent-buy-loan-info p,
#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper .progress-bar-inner .rent-buy-loan-info span{margin:0; font-size:14px; font-weight:600; line-height:22px; color: #000;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper .progress-bar-inner #myProgress{width: 100%; background-color: #f3f3f3; border-radius: 0px; overflow: hidden;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .conventional_payment-breakdown .progress-bar-wrapper .progress-bar-inner #myProgress #myBar{height: 40px; transition: width 500ms linear; background-color: #BC8F45;}

#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head{display: grid; grid-template-columns: repeat(2, 1fr); gap:16px;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head .light-primary-bg{padding: 35px 20px; margin: 0; color: #000; background: #f3f3f3; text-align: center; border: solid 1px transparent;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head .light-primary-bg p{padding:0 0 20px; margin:0; font-size:14px; font-weight:600; line-height:22px; display: block;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head .light-primary-bg h2{color:#000; font-size:30px; font-weight:bold;}
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head .light-primary-bg.active{border-color: #BC8F45;}
#MortgageCalculatorTab #debtservice_tab #dscr_mortgageForm .blank-space{width: 100%; padding: 25px;}
#MortgageCalculatorTab #debtservice_tab #dscr_mortgageForm .btn-group-wrp{width: 100%; border-radius: 4px; top: 0;}
#MortgageCalculatorTab #debtservice_tab #dscr_mortgageForm .btn-group-wrp .btn{width: 50%; height: 50px; justify-content: center;}

#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul{grid-template-columns:repeat(1,1fr); row-gap:16px;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul > li{border:solid 2px #f3f3f3;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul > li > .dscr_rm_title > span{display:flex; justify-content:space-between; gap:16px; padding:12px 40px 12px 16px; align-items:center; position:relative;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul > li > .dscr_rm_title > span:after{content:''; background:url(images/aerrow-down.png) center right no-repeat; position:absolute; right:16px; top:0; bottom:0; margin:auto; width:12px; height:7px; background-size:contain; transition:all 0.3s;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul > li.active > .dscr_rm_title > span:after{transform:rotateX(180deg);}
#MortgageCalculatorTab .tab-col2-btm .info-boxs .dscr_rm_items > ul > li > .dscr_rm_content{padding:0 16px 16px; font-weight:normal;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs.summary-outer{border:none; padding:0; display:flex; row-gap:24px; flex-direction:column; flex-wrap:wrap;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs.summary-outer .summary-description p span{font-weight:bold;}

@media only screen and (max-width: 1366px){
main > .section-whitebg{padding: 100px 50px;}
}

@media only screen and (min-width: 1260px){
#MortgageCalculatorTab .tab-col1{width:calc(35.28% - 10px);}
#MortgageCalculatorTab .tab-col2{width:calc(64.72% - 10px);}
/*#MortgageCalculatorTab .tab-col1 .form-group > label{font-size:13px;}*/
#MortgageCalculatorTab .tab-col1 .form-group .form-control{/*font-size:13px;*/ min-height:50px;}
#MortgageCalculatorTab .tab-col1 .input-item-relative .btn{/*font-size:12px;*/ padding:0 12px;}
#MortgageCalculatorTab .tab-col2-top,
#MortgageCalculatorTab .tab-col2-btm{gap:20px;}

/*#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head p{font-size:13px;}*/
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head h2{font-size:16px;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph{max-width:160px;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul li span > span{font-size:18px;}
/*#MortgageCalculatorTab .tab-col1 .input-item-relative.payment-frequency .btn{font-size:13px;}*/

}

@media only screen and (max-width: 1259px) and (min-width: 992px){
#MortgageCalculatorTab .tab-col2-top,
#MortgageCalculatorTab .tab-col2-btm{grid-template-columns:repeat(1, 1fr);}
#MortgageCalculatorTab .tab-col1{width:470px;}
#MortgageCalculatorTab .tab-col2{width:calc(100% - 500px);}

}

@media only screen and (max-width: 1259px){
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head{padding:20px;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data{padding:24px 24px 32px;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs{padding:24px 24px 30px;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list,
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul{row-gap:16px;}
#MortgageCalculatorTab .tab-col2-btm .card-title{padding:0 0 16px;}
#MortgageCalculatorTab .calculator-top .sec-tit{font-size:20px;}
main > .section-whitebg{padding:60px 10px;}
#MortgageCalculatorTab .summary-description{padding:24px;}

#MortgageCalculatorTab .calculator-top .nav{padding:0 24px; column-gap:16px;}
#MortgageCalculatorTab .calculator-top .nav li>a{font-size:12px;}
#MortgageCalculatorTab .sub-tabtop .calculator-title{padding-right:24px;}
#MortgageCalculatorTab .sub-tabtop .nav{padding:0 24px; column-gap:16px;}
#MortgageCalculatorTab .sub-tabtop .nav li > a{font-size:12px;}

}

@media only screen and (max-width: 1024px){
main > .section-whitebg{padding: 100px 10px;}
}

@media only screen and (max-width: 991px) {
#MortgageCalculatorTab .tab-row{flex-direction:column;}
#MortgageCalculatorTab .tab-col1,
#MortgageCalculatorTab .tab-col2{width:100%;}
/*#MortgageCalculatorTab .calculator-top .nav{padding:0 24px; column-gap:24px;}
#MortgageCalculatorTab .calculator-top .nav li > a{font-size:16px;}*/
#MortgageCalculatorTab .tab-col2-btm .relative-graph{max-width:160px;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head h2{font-size:16px;}
#MortgageCalculatorTab .calculator-top .nav{padding:10px 24px; flex-wrap:wrap; row-gap:6px;}

}

@media only screen and (max-width: 767px) {
#MortgageCalculatorTab .calculator-top{flex-direction:column;}
#MortgageCalculatorTab .tab-col2-top,
#MortgageCalculatorTab .tab-col2-btm{grid-template-columns:repeat(1, 1fr);}
main > .section-whitebg{padding:50px 10px;}
#MortgageCalculatorTab .calculator-top .nav{border-left:solid 2px #f3f3f3;}
#MortgageCalculatorTab .calculator-top .nav li>a{font-size:14px;}
#MortgageCalculatorTab .sub-tabtop .nav{border:none; padding:0;}
#MortgageCalculatorTab .sub-tabtop .nav li>a{font-size:14px;}
#MortgageCalculatorTab .sub-tabtop{flex-wrap:wrap;}

}

@media only screen and (max-width: 574px) {
#MortgageCalculatorTab{gap:30px;}
#MortgageCalculatorTab .calculator-top .sec-tit{font-size:18px; text-align:center;}
#MortgageCalculatorTab .calculator-top .nav{padding:16px 20px; border:solid 2px #dae4ef; border-top:none; /*gap:20px; flex-wrap:wrap; justify-content:space-between;*/}
#MortgageCalculatorTab .calculator-top .nav li > a{font-size:13px;}
#MortgageCalculatorTab .tab-col1 h2{font-size:20px; padding-bottom:16px;}
#MortgageCalculatorTab .tab-col1 .form-group{width:100%;}
#MortgageCalculatorTab .tab-col2-top .conventional-button{grid-template-columns:repeat(1, 1fr);}
#MortgageCalculatorTab .tab-col1{padding:24px 20px;}
#MortgageCalculatorTab .tab-col1 > form{padding-top:16px;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head h2{font-size:20px;}
#MortgageCalculatorTab .tab-col2-btm .graph-items{flex-direction:column; gap:20px;}
#MortgageCalculatorTab .tab-col2-btm .relative-graph{margin:auto; max-width:200px;}
#MortgageCalculatorTab .tab-col2-btm .info-boxs{padding:20px;}
#MortgageCalculatorTab .tab-col2-btm ul.payment-results-list{margin:auto;}
#MortgageCalculatorTab .tab-col2-top .conventional-button .top-head p{padding-bottom:16px;}
#MortgageCalculatorTab .tab-col2-top .boxs2 .calculator-slider-data{padding:20px 20px 32px}
#MortgageCalculatorTab .tab-col1 .form-group > label > span{display:unset;}
#MortgageCalculatorTab .tab-col2-btm .boxs2 ul{grid-template-columns:repeat(1, 1fr);}
#MortgageCalculatorTab .summary-description{padding:20px;}
#MortgageCalculatorTab .summary-description p{font-size:14px;}
#MortgageCalculatorTab .sub-tabtop .nav li>a{font-size:13px;}

/*#MortgageCalculatorTab .tab-col2-top,
#MortgageCalculatorTab .tab-col2-btm{gap:16px;}*/
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.refinance-cost-head,
#MortgageCalculatorTab .tab-col2 .tab-col2-top .info-boxs .top-head.varefinance-cost-head{grid-template-columns:repeat(1,1fr);}
#MortgageCalculatorTab .tab-col2 .purchase-top{gap:16px; grid-template-columns:repeat(1,1fr);}
#MortgageCalculatorTab .tab-col2 .purchase-top .top-head{flex-direction:column; gap:8px;}

}

/****************************************** Mortgage Calculator Form Start **************************************************/