body{background:#fff!important}
.mortgageAmortisationBody .row{display:block}
.mortgageAmortisationcalcBox{padding:27px 30px 31px;border:solid 1px #e6e6e6;box-shadow:0 0 24px 0 rgba(0,0,0,0.02);border-radius:6px;display:flex;gap:30px}
.mortgageAmortisationcalcBox .mortagageCalcForm{width:50%}
.mortgageAmortisationcalcBox .mortagageCalcForm label{color:#666;font-size:16px;text-align:left;font-weight:700}
.mortgageAmortisationcalcBox .mortagageCalcForm form input{margin:15px 0 20px;padding:0 20px;height:50px;font-size:16px;width:100%;border:1px solid #e0e0e0;display:block;background:#fff;font-weight:700;color:#000}
.mortgageAmortisationcalcBox .dollar{position:relative}
.mortgageAmortisationcalcBox .dollar::after{content:"$";position:absolute;bottom:15px;left:6px;font-weight:700;font-size:16px}
.mortgageAmortisationcalcBox .interestRate{position:relative}
.mortgageAmortisationcalcBox .interestRate::after{content:"%";position:absolute;right:9px;bottom:16px;font-family:'Arial';font-family:500;color:#b9b9b9;font-size:16px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox .mortgageLoanSelect{height:50px;border:solid 1px #e3e3e3;font-size:16px;font-weight:700;color:#000;cursor:pointer;display:flex;align-items:center}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox .mortgageYearsSelect{position:relative}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox .mortgageYearsSelect::after{content:"\e9f5";font-family:'icomoon';position:absolute;font-size:10px;color:#666;right:10px;top:14px;z-index:0;transition:.3s}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems{margin:12px 0 30px;display:flex;position:relative}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{content:'OR';position:absolute;top:17px;left:163px;color:#666;font-size:12px;font-weight:700}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn{width:50%;position:relative}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn + .mortgageSelectBtn{margin-left:30px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn ul{display:none;position:absolute;content:"";background:#fff;height:auto;width:100%;top:52px;box-shadow:0 3px 6px 0 #000;border-radius:8px;padding:15px;z-index:2}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn:hover ul{display:block}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn:hover ul li{padding:10px 0;font-size:16px;text-align:left;height:auto;color:#333;display:block;width:100%}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems strong{margin:0 6px;display:flex;align-items:center;color:#666;font-size:12px;font-weight:700}
.mortgageAmortisationcalcBox .mortagageCalcForm form .paymentFrequencySelectBtn{margin-top:11px;display:flex}
.mortgageAmortisationcalcBox .mortagageCalcForm form .paymentFrequencySelectBtn .paymentFrequencyBtn + .paymentFrequencyBtn{margin-left:30px;cursor:pointer;font-weight:700}
.mortgageAmortisationcalcBox .mortagageCalcForm form .paymentFrequencySelectBtn .weeklyFrequencyBtn{background:#fcfcfc;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 10px 0 var(--black-13-6);font-weight:700}
.mortgageAmortisationcalcBox .mortagageCalcForm form .paymentFrequencySelectBtn .active{background:#5f449b;color:#fff}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox{padding-top:23px;overflow:hidden}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox .progressBar{margin:auto;width:211px;height:211px}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox .progressBar canvas{width:211px;height:211px}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox{margin-top:30px;background-color:#f7f7f7;border-radius:8px;width:314px;height:auto}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul{margin-top:20px;background:#ebecff}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul li{padding:11px 25px;display:flex;justify-content:space-between;border-bottom:1px solid #d9dbff}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul li:last-child{border-bottom:none}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul li span{color:#333;font-size:14px;font-weight:700}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul li strong{color:#5f449b;font-weight:700}
@keyframes left {
100%{transform:rotate(180deg)}
}
.circle .right{z-index:3;transform:rotate(180deg)}
.circle .right .progress{animation:right 4s linear both;animation-delay:4s}
@keyframes right {
100%{transform:rotate(180deg)}
}
.circle .dot{z-index:2;position:absolute;left:50%;top:50%;width:50%;height:10px;margin-top:-5px;animation:dot 8s linear both;transform-origin:0 50%}
.circle .dot span{position:absolute;right:0;width:10px;height:10px;border-radius:100%}
@keyframes dot {
0%{transform:rotate(-90deg)}
50%{transform:rotate(90deg);z-index:4}
100%{transform:rotate(270deg);z-index:4}
}
@media screen and (max-width: 1024px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:114px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox button{font-size:11px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox button::after{right:6px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:126px}
}
@media screen and (width:840px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems{display:block}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn{width:100%}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn + .mortgageSelectBtn{margin-left:0;padding-top:20px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:77px;top:52px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .paymentFrequencySelectBtn .paymentFrequencyBtn + .paymentFrequencyBtn{margin-left:9px}
.mortgageAmortisationcalcBox{display:block}
.mortgageAmortisationcalcBox .mortagageCalcForm{width:100%}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox{width:100%}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:327px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageLoanTermSelectBox button{font-size:16px}
}
@media screen and (max-width:540px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:214px}
.mortgageAmortisationcalcBox{display:block;}
.mortgageAmortisationcalcBox .mortagageCalcForm{width:100%}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox{width:100%}}
@media screen and (max-width:414px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:152px}
}
@media screen and (max-width:390px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:141px}
}
@media screen and (max-width:375px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:132px}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox{overflow:hidden}
.mortgageAmortisationcalcBox .monthlyPaymentGraphBox ul li{padding:11px 12px}
}
@media screen and (max-width:360px) {
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems::after{left:125px}
.mortgageAmortisationcalcBox .mortagageCalcForm form .mortgageSelectItems .mortgageSelectBtn .mortgageLoanSelect{font-size:11px}
}