mortgage-calculator-package/dist/styles.css

A simple, embeddable mortgage calculator that dynamically generates an interactive and styled calculator widget. It allows users to input mortgage amount, interest rate, amortization period, and payment frequency, and calculates the monthly payment based

@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,200;0,400;0,600;0,800;1,200;1,400;1,600;1,800&display=swap);
body{margin:0}.mortgage-calculator{margin:2rem auto;font-family:"Poppins",serif;max-width:80vw;border-radius:15px;border:1px solid rgba(35,38,55,.2);background:hsla(0,0%,100%,.04)}@media(max-width: 991px){.mortgage-calculator{margin:1rem auto;width:95vw;max-width:unset;border-radius:8px}}.mortgage-calculator .section-heading{color:#fff;font-family:"DM Sans";font-size:40px;font-style:normal;font-weight:700;line-height:normal;border-radius:15px 15px 0px 0px;background:#1a4383;padding:1rem 1rem 1rem 2rem}@media(max-width: 991px){.mortgage-calculator .section-heading{font-size:28px;padding:.5rem;border-radius:8px 8px 0px 0px}}.mortgage-calculator .tab-layout .tab-headers{display:grid;grid-template-columns:repeat(2, auto);align-items:center}.mortgage-calculator .tab-layout .tab-headers .tab-header{color:rgba(0,0,0,.5);font-family:"DM Sans";font-size:26px;font-style:normal;font-weight:500;line-height:normal;padding:1rem 0;border-bottom:1px solid rgba(35,38,55,.2);text-align:center;cursor:pointer}.mortgage-calculator .tab-layout .tab-headers .tab-header.active{color:#000;font-weight:700;border-bottom:3px solid #000}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-headers .tab-header{font-size:20px;padding:.5rem 0}}.mortgage-calculator .tab-layout .tab-content{display:none;grid-template-columns:3fr 2fr;grid-gap:2rem;padding:2rem}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content{grid-template-columns:1fr;grid-gap:1rem;padding:1rem}}.mortgage-calculator .tab-layout .tab-content.active{display:grid}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input{display:grid;grid-gap:1rem;margin-bottom:2rem}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.debt-service-rate .header,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.add-rental-income .header,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.stress-test-rule .header,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.rental-income-rule .header,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.calculation-rules .header{grid-template-columns:auto}}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.debt-service-rate.debt-service-rate .header .btn-group-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.add-rental-income.debt-service-rate .header .btn-group-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.stress-test-rule.debt-service-rate .header .btn-group-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.rental-income-rule.debt-service-rate .header .btn-group-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.calculation-rules.debt-service-rate .header .btn-group-selector{grid-column:1/span 2;justify-content:start}}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input{grid-gap:.5rem;margin-bottom:1rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header{display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;align-items:center;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header.stacked{grid-template-columns:1fr;grid-gap:1rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper{display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper .toggle{display:grid;grid-template-columns:repeat(2, auto);justify-content:start;align-items:center;background:#fff;border-radius:500px;padding:.25rem;border:1px solid #1a4383}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper .toggle.switched-on{background:#1a4383}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper .toggle .opt{width:20px;height:20px;border-radius:50%;cursor:pointer}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper .toggle .opt.on.selected{background:#fff}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-toggle-wrapper .toggle .opt.off.selected{background:#1a4383}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-wrapper{display:grid;grid-template-columns:repeat(2, auto);justify-content:start;align-items:center;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-wrapper .title{color:#000;font-family:"DM Sans";font-size:24px;font-style:normal;font-weight:700;line-height:normal}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .title-wrapper .title{font-size:18px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .mortgage-calculator-info{color:#161819;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:500;line-height:16px;opacity:.8}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .mortgage-calculator-info.full-row-width{grid-column:1/span 2}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .info-icon{cursor:pointer}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector{display:grid;grid-template-columns:repeat(2, auto);align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector.btn-group-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector.btn-group-selector{justify-content:end}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector{justify-content:start}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector.btn-group-selector .selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector.btn-group-selector .selector{width:120px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector.btn-group-selector .selector.active,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector.btn-group-selector .selector.active{font-weight:500}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector .selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector .selector{color:#1a4383;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:400;line-height:normal;border-radius:12px 0px 0px 12px;border:1px solid #1a4383;width:75px;text-align:center;padding:.25rem 0;cursor:pointer}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector .selector,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector .selector{font-size:14px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector .selector.active,.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector .selector.active{background:#1a4383;color:#fff}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .fixed-variable-selector .selector:nth-child(2),.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .btn-group-selector .selector:nth-child(2){border-radius:0px 12px 12px 0px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors{display:grid;grid-template-columns:repeat(3, auto);align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors .selector{color:#1a4383;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:400;line-height:normal;border-radius:12px 0px 0px 12px;border:1px solid #1a4383;width:75px;text-align:center;padding:.25rem 0;cursor:pointer}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors .selector{font-size:14px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors .selector.active{background:#1a4383;color:#fff}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors .selector:nth-child(2){border-top:1px solid #1a4383;border-bottom:1px solid #1a4383;border-left:none;border-right:none;border-radius:0}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .header .extra-payment-selectors .selector:nth-child(3){border-radius:0px 12px 12px 0px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .sub-header{display:grid;grid-template-columns:repeat(2, auto);align-items:center;justify-content:space-between}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .sub-header .title{color:#000;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:700;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .sub-header.rental-income-rule{margin-top:2rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .current-calculated-ratios{display:grid;justify-content:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .current-calculated-ratios .label{color:rgba(22,24,25,.8);text-align:center;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:500;line-height:24px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .current-calculated-ratios .value{color:#161819;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:800;line-height:24px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector{display:grid;grid-template-columns:repeat(2, auto);align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.btn-group-selector{justify-content:end}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.full-width{grid-template-columns:repeat(2, 1fr);justify-content:start}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.full-width .selector{width:auto !important;padding:.5rem;border-radius:6px 0px 0px 6px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.full-width .selector:nth-child(2){border-radius:0px 6px 6px 0px}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector{justify-content:start}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.btn-group-selector .selector{width:120px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector.btn-group-selector .selector.active{font-weight:500}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector .selector{color:#1a4383;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:400;line-height:normal;border-radius:12px 0px 0px 12px;border:1px solid #1a4383;width:75px;text-align:center;padding:.25rem 0;cursor:pointer}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector .selector{font-size:14px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector .selector.active{background:#1a4383;color:#fff}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .btn-group-selector .selector:nth-child(2){border-radius:0px 12px 12px 0px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .foot-notes{display:grid;align-items:center;justify-content:start}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .foot-notes .foot-note{opacity:.8;color:#000;font-family:"DM Sans";font-size:12px;font-style:normal;font-weight:500;line-height:18px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .foot-notes .foot-note span{opacity:1}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.mortgage-calculator-input{border-radius:15px;border:1px solid rgba(35,38,55,.2);background:rgba(95,117,138,.04);padding:2rem}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.mortgage-calculator-input{padding:1rem}}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input.mortgage-calculator-input.calculator-settings .header{grid-template-columns:1fr;grid-gap:.5rem;margin-bottom:.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields{display:grid;grid-template-columns:2fr 1fr;align-items:stretch;grid-gap:1rem}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields{grid-template-columns:1fr}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields.single-field{grid-template-columns:1fr}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields.half-width-fields{grid-template-columns:repeat(2, 1fr)}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields.half-width-fields{grid-template-columns:1fr}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields .field-label{color:#1a4383;font-family:"DM Sans";font-size:12px;font-style:normal;font-weight:600;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields.expandable{max-height:0;overflow-x:hidden;overflow-y:auto;transition:all .15s ease}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-fields.expanded{max-height:285px}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field{display:grid;border-radius:12px;border:1px solid rgba(35,38,55,.2);background:#fff;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05);padding:1rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .title-selector-wrapper{display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .title-selector-wrapper .fixed-variable-selector{display:grid;grid-template-columns:repeat(2, auto);align-items:center;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .title-selector-wrapper .fixed-variable-selector .selector{color:#1a4383;border-radius:1rem;border:1px solid #1a4383;font-family:"DM Sans";font-size:12px;font-style:normal;font-weight:700;line-height:normal;width:75px;text-align:center;padding:.25rem 0;cursor:pointer}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .title-selector-wrapper .fixed-variable-selector .selector.active{background:#1a4383;color:#fff}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field{padding:.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field input[type=text]{color:#161819;font-family:"DM Sans";font-size:18px;font-style:normal;font-weight:700;line-height:normal;border:none;padding:.5rem;padding-left:0}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field input[type=text]{font-size:16px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .downpayment-percentage-wrapper{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:1rem}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .downpayment-percentage-wrapper{grid-gap:.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .downpayment-percentage-wrapper .percentage-value-input{border-radius:12px;border:1px solid rgba(35,38,55,.2);background:#fff;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05);padding:.5rem;width:100px;text-align:center}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .downpayment-percentage-wrapper .percentage-value-input{width:40px;font-size:12px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .range-label{display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field .range-label span{color:#000;font-family:"DM Sans";font-size:12px;font-style:normal;font-weight:400;line-height:normal;opacity:.6}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field.disabled{pointer-events:none;background:#f0f0f0}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .input-field.disabled input[type=text]{background:#f0f0f0}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown{position:relative}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown.inline{display:flex;align-items:stretch}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:1rem;border-radius:12px;border:1px solid rgba(35,38,55,.2);background:#fff;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05);padding:1rem;cursor:pointer}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field.inline-label{grid-template-rows:auto auto;grid-gap:0;width:100%}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field.inline-label .field-label{grid-column:1/-1}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field .info-icon{transition:all .15s ease}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field{grid-gap:.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field.dropdown-expanded .info-icon{transform:rotate(90deg)}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field span{color:#161819;font-family:"DM Sans";font-size:18px;font-style:normal;font-weight:700;line-height:normal}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-field span{font-size:14px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts{position:absolute;top:4rem;border-radius:5px;background-color:#fff;box-shadow:0 1px 3px 0 rgba(12,18,28,.33);z-index:100;max-height:0;overflow-x:hidden;overflow-y:auto;transition:all .15s ease;width:100%}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts.payment-frequency-dd{top:7rem}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts.expanded{max-height:285px}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts{top:3.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts .dropdown-opt{color:#161819;font-family:"DM Sans";font-size:18px;font-style:normal;font-weight:700;line-height:normal;cursor:pointer;padding:.5rem 1rem;transition:all .15s ease}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts .dropdown-opt{font-size:14px}}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown .dropdown-opts .dropdown-opt:hover{background-color:#ededed}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown.disabled{pointer-events:none}.mortgage-calculator .tab-layout .tab-content .calculator-inputs .calculator-input .dropdown.disabled .dropdown-field{background:#f0f0f0}.mortgage-calculator .tab-layout .tab-content .calculator-results{display:grid;grid-gap:1rem;height:fit-content}@media(max-width: 991px){.mortgage-calculator .tab-layout .tab-content .calculator-results{grid-gap:.5rem}}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .monthly-mortgage .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .monthly-mortgage .service-detail-icon{background:#0157ff !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .debt-payment .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .debt-payment .service-detail-icon{background:red !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .home-expenses .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .home-expenses .service-detail-icon{background:#023aa6 !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .cash-left .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .cash-left .service-detail-icon{background:#69d900 !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .breakdown-bar-container,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .breakdown-bar-container{width:100%;height:.5rem;display:flex;gap:.5rem;overflow:hidden;margin-bottom:.75rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-monthly-mortgage,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-monthly-mortgage{width:43%;background-color:#0157ff}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-debt-payment,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-debt-payment{width:20%;background-color:red}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-home-expenses,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-home-expenses{width:16%;background-color:#023aa6}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-cash-left,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .breakdown-bar-container .breakdown-bar-cash-left{width:21%;background-color:#69d900}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results{border-radius:20px;border:1px solid rgba(35,38,55,.2);background:#fff;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .label,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .label{color:#000;font-family:"DM Sans";font-size:20px;font-style:normal;font-weight:700;line-height:normal;padding:1rem;text-align:left;border-bottom:1px solid rgba(35,38,55,.2)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .max-mortgage-amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .max-mortgage-amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .max-mortgage-amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .max-mortgage-amount{padding:1rem 0;border-bottom:1px solid rgba(35,38,55,.2)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .max-mortgage-amount .amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .max-mortgage-amount .amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .max-mortgage-amount .amount,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .max-mortgage-amount .amount{color:#1a4383;text-align:center;font-family:"DM Sans";font-size:30px;font-style:normal;font-weight:800;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios-wrapper,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios-wrapper,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios-wrapper,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios-wrapper{display:grid;grid-gap:1rem;padding:1rem;border-bottom:1px solid rgba(35,38,55,.2)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios-wrapper .item,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios-wrapper .item,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios-wrapper .item,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios-wrapper .item{display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;align-items:center}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios-wrapper .item .item-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios-wrapper .item .item-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios-wrapper .item .item-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios-wrapper .item .item-label{color:#000;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:500;line-height:normal;opacity:.8}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios-wrapper .item .item-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios-wrapper .item .item-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios-wrapper .item .item-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios-wrapper .item .item-value{color:#000;text-align:right;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:500;line-height:normal;opacity:.8}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios{display:grid;grid-template-columns:repeat(2, auto);align-items:center;justify-content:space-around;padding:1rem;border-bottom:1px solid rgba(35,38,55,.2)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios .ratio,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios .ratio,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios .ratio,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios .ratio{display:grid;grid-template-columns:auto;align-items:center;justify-items:center;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios .ratio .value,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios .ratio .value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios .ratio .value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios .ratio .value{color:#1a4383;font-family:"DM Sans";font-size:30px;font-style:normal;font-weight:800;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .ratios .ratio .value-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .ratios .ratio .value-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .ratios .ratio .value-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .ratios .ratio .value-label{color:#000;font-family:"DM Sans";font-size:16px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:1.6px}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details{padding:1rem 1rem 3rem 1rem;display:grid;grid-template-columns:1fr;grid-gap:1rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .st-rate,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .st-rate,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .st-rate,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .st-rate{display:grid;grid-template-columns:repeat(2, auto);align-items:center;justify-content:space-between}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .st-rate .st-rate-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .st-rate .st-rate-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .st-rate .st-rate-label,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .st-rate .st-rate-label{color:#000;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:600;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .st-rate .st-rate-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .st-rate .st-rate-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .st-rate .st-rate-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .st-rate .st-rate-value{color:#000;text-align:right;font-family:"DM Sans";font-size:18px;font-style:normal;font-weight:700;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:.5rem;align-items:center;justify-content:start}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag{color:#fff;text-align:center;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:700;line-height:42px;border-radius:5px;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05);height:42px;cursor:pointer;transition:filter .2s ease}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:hover,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:hover,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:hover,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:hover{filter:brightness(115%)}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(1),.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(1),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(1),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(1){background:#1a4383}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(2),.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(2),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(2),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(2){background:#3378e3}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(3),.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(3),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .ratio-tags .ratio-tag:nth-child(3),.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .ratio-tags .ratio-tag:nth-child(3){background:#3378e3}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details{display:grid;grid-template-columns:1fr;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail{display:grid;grid-template-columns:15px 1fr auto;align-items:center;justify-content:start;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-icon{width:12px;height:12px;border-radius:50%}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-name,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-name,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-name,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-name{color:#000;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:600;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail .service-detail-value,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail .service-detail-value{color:#000;text-align:right;font-family:"DM Sans";font-size:14px;font-style:normal;font-weight:800;line-height:normal}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.monthly-mortgage .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.monthly-mortgage .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.monthly-mortgage .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.monthly-mortgage .service-detail-icon{background:#0157ff}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.debt-payment .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.debt-payment .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.debt-payment .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.debt-payment .service-detail-icon{background:#ffc400}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.home-expenses .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.home-expenses .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.home-expenses .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.home-expenses .service-detail-icon{background:#023aa6}.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.cash-left .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.debt-service-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.cash-left .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .debt-service-ratios .details .debt-service-details .service-detail.cash-left .service-detail-icon,.mortgage-calculator .tab-layout .tab-content .calculator-results.max-mortgage-calculator-results .max-mortgage-results .details .debt-service-details .service-detail.cash-left .service-detail-icon{background:#99a5bd}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .mortgage-payment{border-radius:12px;border:1px solid rgba(35,38,55,.2);background:#fff;box-shadow:0px 8px 20px 0px rgba(57,40,123,.05)}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .mortgage-payment .label{font-size:20px !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .mortgage-payment .value{font-size:48px !important}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .payment-breakdown{padding:0;border-radius:12px;border:1px solid rgba(35,38,55,.2);background:#f3f5f9}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .payment-breakdown .section-label{font-size:20px !important;padding:1.5rem 1.5rem 0 1.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .payment-breakdown .section-wrapper{grid-template-columns:1fr;margin-top:0}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .payment-breakdown .section-wrapper .breakdown-details .breakdown-detail{padding:1.5rem;display:grid;grid-gap:.5rem}.mortgage-calculator .tab-layout .tab-content .calculator-results.mortgage-calculator-results .payment-breakdown .section-wrapper .breakdown-details .breakdown-detail .breakdown-bar-container{width:100%;height:.5rem;display:flex;gap:.5rem;overflow:hidden;margin-bottom:.75rem}.mortgage-calculator .tab-layout .tab