*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,p,figure,picture{margin:0}h1,h2,h3,h4,h5,h6,p{font-weight:400}input,button,textarea,select{font:inherit}:root{font-family:Plus Jakarta Sans,sans-serif;line-height:1.5;font-weight:400;font-size:16px;--fs-headerL: 56px;--fs-headerS: 24px;--fs-bodyL: 18px;--fs-bodyM: 16px;--fs-bodyS: 14px;--color-red: 4 69% 50%;--color-lime: 61 70% 52%;--color-slate-900: 202 55% 16%;--color-slate-700: 200 24% 40%;--color-slate-500: 200 26% 54%;--color-slate-300: 203 41% 72%;--color-slate-100: 202 86% 94%;--color-white: 0 0 100%;color-scheme:light dark;color:hsl(var(--color-slate-900));background-color:hsl(var(--color-white));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.font-headerL{font-size:var(--fs-headerL);font-weight:700;line-height:125%;letter-spacing:-1px}.font-headerS{font-size:var(--fs-headerS);font-weight:700;line-height:125%;letter-spacing:-1px}.font-bodyL{font-size:var(--fs-bodyL);font-weight:700;line-height:125%;letter-spacing:-1px}.font-bodyM{font-size:var(--fs-bodyM);font-weight:500;line-height:150%;letter-spacing:0px}.font-bodyS{font-size:var(--fs-bodyS);font-weight:500;line-height:150%;letter-spacing:0px}.font-lime{color:hsl(var(--color-lime))}.font-red{color:hsl(var(--color-red))}.font-white{color:hsl(var(--color-white))}.font-slate-300{color:hsl(var(--color-slate-300))}.font-slate-700,.font-slate-900{color:hsl(var(--color-slate-700))}.flex{display:flex}.flex-column{flex-direction:column}.align-center{align-items:center}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}body{margin:0;display:flex;align-items:center;justify-content:center;min-width:320px;min-height:100vh;background-color:hsl(var(--color-slate-100))}@media (min-width: 1200px){#root{max-width:1024px}}main{display:flex;flex-direction:column;overflow:hidden;background-color:hsl(var(--color-white))}@media (min-width: 700px){main{margin:1.5rem;border-radius:24px}}@media (min-width: 1200px){main{flex-direction:row}}.input-wrapper{overflow:hidden}.input-area{display:flex;flex-direction:column;align-items:start;padding:1.5rem}.input-area header{width:100%;margin-block:1rem;display:flex;gap:1rem;flex-direction:column}.input-area header .clear-all{width:fit-content;border:none;background-color:transparent;border-bottom:solid 1pt hsl(var(--color-slate-700));cursor:pointer}.input-area header .clear-all:focus,.input-area header .clear-all:hover{color:hsl(var(--color-slate-900));border-bottom:solid 1pt hsl(var(--color-slate-900))}@media (min-width: 700px){.input-area header{flex-direction:row;justify-content:space-between}}@media (min-width: 1200px){.input-area{width:50%}}form{width:100%}form label{display:block}form label.invalid .input-wrapper{border-color:hsl(var(--color-red))}form label.invalid .input-wrapper span{background-color:hsl(var(--color-red));color:hsl(var(--color-white))}form fieldset{border:none;padding:0}form fieldset legend{text-align:left}form fieldset label{border-radius:4px;border:solid 1pt hsl(var(--color-slate-500));margin-block:.5rem;padding:.5rem}form fieldset label.checked{background-color:hsl(var(--color-lime)/.15);border:solid 1pt hsl(var(--color-lime))}form fieldset label:hover,form fieldset label:focus{border-color:hsl(var(--color-lime))}form fieldset .mortgage-type{margin-left:1rem}form button{width:100%;background-color:hsl(var(--color-lime));padding-block:1rem;border-radius:1.5rem;border:none;outline:none}@media (min-width: 700px){form button{width:50%}}@media (min-width: 1200px){form button{width:67%}}form>*{margin-block:1rem}form button:hover,form button:focus{background-color:hsl(var(--color-lime)/.5)}input[type=radio]{opacity:0}.custom-radio{display:inline-block;position:relative;width:16px;height:16px;border:1pt solid hsl(var(--color-slate-900));border-radius:50%;background-color:transparent;cursor:pointer}input[type=radio]:checked+.custom-radio{border-color:hsl(var(--color-lime))}input[type=radio]:checked+.custom-radio:before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:hsl(var(--color-lime));border-radius:50%;transform:translate(-50%,-50%)}.input-wrapper{display:grid;border-radius:4px;border:solid 1pt hsl(var(--color-slate-500))}.input-wrapper input{border:none;outline:none;padding:.5rem 1rem;cursor:pointer}.input-wrapper:hover,.input-wrapper:focus{border-color:hsl(var(--color-slate-900))}.input-wrapper span{background-color:hsl(var(--color-slate-100));padding-block:.8rem;text-align:center}.input-wrapper.input-amount{grid-template-columns:10% 90%;grid-template-rows:auto}.input-wrapper.input-term{grid-template-columns:80% 20%;grid-template-rows:auto}.input-wrapper.input-rate{grid-template-columns:90% 10%;grid-template-rows:auto}.input-subcontainer{display:flex;flex-direction:column}@media (min-width: 700px){.input-subcontainer{flex-direction:row;gap:1rem}.input-subcontainer>*{flex:1}.input-subcontainer .input-wrapper.input-term{grid-template-columns:70% 30%;grid-template-rows:auto}.input-subcontainer .input-wrapper.input-rate{grid-template-columns:75% 25%;grid-template-rows:auto}}@media (min-width: 1200px){.input-subcontainer>*{width:calc(50% - .5rem)}.input-subcontainer .input-wrapper.input-term{grid-template-columns:60% 40%;grid-template-rows:auto}.input-subcontainer .input-wrapper.input-rate{grid-template-columns:70% 30%;grid-template-rows:auto}}.result-area{display:grid;background-color:hsl(var(--color-slate-900));padding:1.5rem}.result-area>*{margin-block:.75rem}.result-area .empty-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.result-area .result-card *+*{margin-top:1rem}.result-area .result-subcard{background-color:#00000040;border-top:solid 4pt hsl(var(--color-lime));border-radius:8px;padding:1rem}.result-area .result-subcard hr{color:hsla(var(--color-slate-300)/.25)}.result-area .result-subcard *+*{margin-top:1rem}@media (min-width: 1200px){.result-area{width:50%;border-radius:0 24px 24px 96px}}