.calc-results{padding-block:1.5em .75em;display:flex;flex-direction:column;align-items:center;background-color:var(--color-background)}.calc-results__instructions{margin-block:0 1.25em;margin-inline:1.75em;text-align:center}.calc-results .instructions__title{color:var(--white)}.instructions__text{color:var(--color-slate-300);line-height:1.4}.calc-results__initial-image{margin-block-start:1em}.calc_results__values-table{width:calc(100% - 3em);margin-block-end:1.25em;padding-block:1.25em;padding-inline:1em;background-color:hsl(from var(--color-background) h s calc(l - 4));border-radius:8px;box-shadow:0 -4px var(--color-primary)}.calc_results__values-table h3{margin-block-end:.5em;color:var(--color-slate-300);font-size:1em;font-weight:var(--font-normal)}.values-table__repayment{margin-block-end:.5em;padding-block:.1em .4em;color:var(--color-primary);font-size:var(--font-size-xxl);border-block-end:1px solid var(--color-slate-700)}.values-table__total{color:var(--white);font-size:var(--font-size-l)}@media (width > 768px){.calc-results{width:50%;justify-content:stretch;border-end-start-radius:14%}.calc-results:has(img){justify-content:center}.calc_results__values-table{margin-block-start:2em;padding-block:2em}.values-table__repayment{font-size:var(--font-size-xxxl);margin-block-end:.75em;padding-block-end:.75em}}.calc-form-container{padding:clamp(1rem,6vw,2rem)}.calc-form__reset{color:var(--color-text-normal);background:none;border:none;border-block-end:1px solid var(--color-text-normal);cursor:pointer}.calc-form__reset:hover{color:var(--color-text-bold)}.inputs__mortgage-conditions{--gap: 1.5em;display:flex;flex-direction:column;gap:var(--gap)}.user-input:has(.required-field):after{content:"This field is required";font-size:var(--font-size-s);color:var(--color-error)}.input-field{display:flex;align-items:center;font-size:var(--font-size-m);font-weight:var(--font-bold);background-color:var(--color-slate-100);border:1px solid var(--color-text-normal);border-radius:.25em;overflow:hidden}.input-field:hover,.input-field:has(>.input--numeric:focus){color:var(--color-text-bold);background-color:var(--color-primary);border-color:var(--color-primary);cursor:pointer}.input-field:has(>.required-field){color:var(--white);font-weight:var(--font-normal);background-color:var(--color-error);border-color:var(--color-error)}.input--numeric{width:0;padding-block:.5em;padding-inline:.75em;flex-grow:1;color:var(--color-text-bold);font-size:inherit;font-weight:inherit;line-height:1.4;border:none;outline:none}.input--numeric:hover{cursor:pointer}.input--numeric:focus{cursor:text}.input__unit{padding-inline:.75em;text-align:center}.calc-form__mortgage-types{border:none;padding-block-start:.75em}.mortgage-type-option{padding-block:.5em;padding-inline:1em;gap:1em;color:var(--color-text-bold);line-height:1.4;background-color:transparent}.mortgage-type-option:has(>input:checked){background-color:hsl(from var(--color-primary) h s l / .3);border-color:var(--color-primary)}.mortgage-type-option label{flex-grow:1;cursor:pointer}.mortgage-type-option input[type=radio]{--size: 1.25em;width:var(--size);height:var(--size);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;border:1px solid var(--color-text-bold);transition:.3s all ease-out}.mortgage-type-option input:checked{border:.25em solid var(--white);outline:.125em solid var(--color-primary);background-color:var(--color-primary)}.button-submit{display:flex;align-items:center;justify-content:center;gap:.5em;font-size:var(--font-size-m);font-weight:var(--font-bold)}.button-submit span{line-height:1}@media (width > 768px){.calc-form-container{width:50%}.calc-form__header{display:flex;align-items:center;justify-content:space-between}.calc-form__reset{height:fit-content}.inputs__mortgage-conditions{width:100%;flex-direction:row}.inputs__mortgage-conditions .user-input{flex-grow:1}.button-submit{margin-block-start:.5em;padding-inline:1.75em;place-self:flex-start}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font-normal: 500;--font-bold: 700;--font-size-xxs: .5em;--font-size-xs: .625em;--font-size-s: .75em;--font-size-m: 1.25em;--font-size-l: 1.5em;--font-size-xxl: 2.5em;--font-size-xxxl: 3em;--color-slate-100: hsl(202, 86%, 94%);--color-slate-300: hsl(203, 41%, 72%);--color-slate-500: hsl(200, 26%, 54%);--color-slate-700: hsl(200, 24%, 40%);--color-slate-900: hsl(202, 55%, 16%);--color-primary: hsl(61, 70%, 52%);--color-background: var(--color-slate-900);--color-text-normal: var(--color-slate-700);--color-text-bold: var(--color-slate-900);--color-error: hsl(4, 69%, 50%);--white: hsl(0, 0%, 100%);font-family:Plus Jakarta Sans,sans-serif;font-weight:var(--font-normal)}body{font-size:1rem;color:var(--color-text-normal);background-color:#e3f3fd}input{font-family:inherit;font-size:1rem}.mortgage-calc-app{background-color:var(--white)}[class*=stack]{--gap: 1em;display:flex;flex-direction:column;gap:var(--gap)}.stack--space-xs{--gap: .5em}.stack--space-s{--gap: .75em}.stack--space-l{--gap: 1.5em}[class*=title]{margin-block:.5em;color:var(--color-text-bold);font-size:var(--font-size-l)}[class*=button]{margin-block-end:.5em;padding-block:.75em;color:var(--color-text-bold);background-color:var(--color-primary);border:none;border-radius:1.5em;cursor:pointer}[class*=button]:hover{background-color:hsl(from var(--color-primary) h s l / .6)}.text--left{text-align:left}@font-face{font-family:Plus Jakarta Sans;src:url(/assets/PlusJakartaSans-VariableFont_wght-D_DSbd_K.ttf) format("truetype-variations");font-weight:200 800;font-size:normal}@media (width > 425px){#app{width:100vw;display:flex;flex-direction:column;align-items:center}.mortgage-calc-app{max-width:425px}}@media (width > 768px){#app{height:100vh;justify-content:center}.mortgage-calc-app{max-width:1000px;display:flex;border-radius:2rem;overflow:hidden}}
