@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";.main-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-100, 8px);align-self:stretch;max-width:375px;margin:auto;gap:40px;padding:40px}.main-content h1{color:var(--color-slate-900, #133041);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-2, 24px);font-style:normal;font-weight:700;line-height:125%;margin-bottom:8px}.main-content a{color:#4e6e7e;display:flex;align-items:center;cursor:pointer;text-decoration:underline}.main-content a:hover{color:#133041}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.form{width:100%}.form form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-300, 24px);align-self:stretch}.form form label{color:var(--color-slate-700, #4E6E7E);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-4, 16px);font-style:normal;font-weight:500;line-height:150%;margin-bottom:12px 24px}.form form input[type=number]{width:250px;padding:12.5px 16px;border-radius:4px;border:1px solid #6B94A8;width:calc(100% - 32px)}.form form .mortgage-amount{display:flex;flex-direction:column;width:100%;gap:12px;position:relative}.form form .mortgage-amount input[name=mortgage-amount]{background-image:linear-gradient(90deg,#e4f4fd 60px,#fff 60px);text-indent:50px}.form form .mortgage-amount input[name=mortgage-amount] label{gap:12px}.form form .mortgage-amount input[type=number]:hover{cursor:pointer;border-color:#133041}.form form .mortgage-amount input[type=number]:focus{cursor:pointer;outline:none;border:1px solid #D8DB2F;background-image:linear-gradient(90deg,#d8db2f 60px,#fff 60px)}.form form .mortgage-amount svg{position:absolute;top:50px;left:25px}.form form .wrapper{width:100%}.form form .wrapper .mortgage-term{position:relative;display:flex;flex-direction:column;width:100%;gap:12px}.form form .wrapper .mortgage-term input[name=mortgage-term]{background-image:linear-gradient(270deg,#e4f4fd 80px,#fff 80px);background-repeat:no-repeat}.form form .wrapper .mortgage-term input[type=number]:hover{cursor:pointer;border-color:#133041}.form form .wrapper .mortgage-term input[type=number]:focus{cursor:pointer;outline:none;border:1px solid #D8DB2F;background-image:linear-gradient(270deg,#d8db2f 80px,#fff 80px)}.form form .wrapper .mortgage-term .absolute p{font-family:Plus Jakarta Sans;position:absolute;top:45px;right:20px;font-weight:700;color:#4e6e7e;font-size:16px}.form form .wrapper .interest-rate{width:100%;position:relative}.form form .wrapper .interest-rate input[name=interest-rate]{margin:12px 0;background-image:linear-gradient(270deg,#e4f4fd 60px,#fff 60px);background-repeat:no-repeat;background-position:right;background-position-x:95%}.form form .wrapper .interest-rate input[type=number]:hover{cursor:pointer;border-color:#133041}.form form .wrapper .interest-rate input[type=number]:focus{cursor:pointer;outline:none;border:1px solid #D8DB2F;background-image:linear-gradient(270deg,#d8db2f 60px,#fff 60px)}.form form .wrapper .interest-rate svg{position:absolute;right:20px;top:50px}.form form .radio{display:flex;flex-direction:column;width:100%;gap:var(--spacing-150, 12px)}.form form .radio h2{font-family:plus jakarta sans;font-weight:500;color:#4e6e7e;font-size:16px}.form form .radio label{font-weight:700;color:#133041;cursor:pointer}.form form .radio input[type=radio]{height:25px;width:55px;vertical-align:middle;cursor:pointer;accent-color:yellow}.form form .radio div:hover{border-color:#d8db2f;cursor:pointer}.form form .radio div:has(input[type=radio]:checked){background-color:#d8db2f26;border:1px solid var(--color-lime, #D8DB2F)}.form form .radio div{display:flex;flex-direction:row-reverse;border:1px solid #6B94A8;border-radius:4px;width:100%;justify-content:start;padding:12.5px 0}.form form input[type=button]{background:url(/assets/calc-CtbyNOnO.svg) no-repeat center;cursor:pointer;padding:16.5px 46px;width:100%;background-color:#d8db2f;border-radius:999px;border:none}.form form input[type=button]:hover{background-color:#d8db2f99}.error{color:var(--color-red, #D73328);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-5, 14px);font-style:normal;font-weight:500;line-height:150%}.attribution{font-size:14px;text-align:center;position:absolute;bottom:0;width:100%}.attribution a{color:#4e6e7e}@media screen and (min-width: 768px){body{height:calc(100vh - 56px);display:flex;justify-content:center;align-items:center}:root{background:var(--color-slate-100, #E4F4FD)}.main-content{padding:0;border-radius:24px;background:var(--color-white, #FFF);box-shadow:0 32px 64px #1330411a;max-width:688px;margin:40px auto}.main-content .text{padding:40px 40px 0;width:calc(100% - 80px);display:flex;justify-content:space-between}.main-content .text a{justify-content:end}.main-content .wrapper{display:flex;gap:24px}.main-content .form form{padding:0 40px}.main-content .form form input[type=button]{width:318px}}@media screen and (min-width: 1440px){.main-content{flex-direction:row;gap:80px;max-width:950px;position:relative}.main-content .text{position:absolute;top:20px;width:400px}.main-content .form{margin-top:80px;width:400px;padding:40px 0}.main-content .form form{width:400px}}.result-empty{background:#133041;display:flex;padding:var(--spacing-400, 32px) 0;flex-direction:column;align-items:flex-start;gap:var(--spacing-300, 24px);align-self:stretch;text-align:center}.result-empty img{margin:auto}.result-empty h2{color:var(--color-white, #FFF);text-align:center;width:100%;font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-2, 24px);font-style:normal;font-weight:700;line-height:125%}.result-empty p{color:var(--color-slate-300, #9ABED5);text-align:center;font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-4, 16px);font-style:normal;font-weight:500;line-height:150%}.result-filled{display:flex;padding:var(--spacing-400, 32px) var(--spacing-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--spacing-300, 24px);align-self:stretch;background:var(--color-slate-900, #133041);font-family:Plus Jakarta Sans}.result-filled .text-content h2{color:var(--color-white, #FFF);font-size:var(--font-size-text-preset-2, 24px);font-style:normal;font-weight:700;line-height:125%}.result-filled .text-content p{color:var(--color-slate-300, #9ABED5);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-4, 16px);font-style:normal;font-weight:500;line-height:150%}.result-filled .overview{display:flex;padding:var(--spacing-300, 24px) var(--spacing-200, 16px);flex-direction:column;align-items:flex-start;gap:var(--spacing-200, 16px);align-self:stretch;border-radius:var(--spacing-100, 8px);border-top:4px solid var(--color-lime, #D8DB2F);background:#00000040}.result-filled .overview .monthly{border-bottom:1px solid rgba(154,190,213,.25);padding-bottom:16px}.result-filled .overview .monthly p{color:var(--color-slate-300, #9ABED5);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-4, 16px);font-style:normal;font-weight:500;line-height:150%}.result-filled .overview .monthly span{color:var(--color-lime, #D8DB2F);font-family:Plus Jakarta Sans;font-size:40px;font-style:normal;font-weight:700;line-height:normal}.result-filled .overview .total{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-100, 8px)}.result-filled .overview .total p{color:var(--color-slate-300, #9ABED5);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-4, 16px);font-style:normal;font-weight:500;line-height:150%}.result-filled .overview .total span{color:var(--color-white, #FFF);font-family:Plus Jakarta Sans;font-size:var(--font-size-text-preset-2, 24px);font-style:normal;font-weight:700;line-height:125%}.result-filled,.result-empty{padding:40px}@media only screen and (min-width: 688px){.result-empty,.result-filled{border-radius:0 0 24px 24px}}@media screen and (min-width: 1440px){.result-empty,.result-filled{gap:var(--spacing-500, 40px);border-radius:0 24px 24px 80px}.result-empty{gap:20px}.result-empty p{padding-bottom:40px}}*{padding:0;margin:0}:root{margin:auto}