:root{--color-lime: hsl(61, 70%, 52%);--color-red: hsl(4, 69%, 50%);--color-white: hsl(0, 0%, 100%);--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(201, 56%, 16%)}@font-face{font-family:PlusJakartaSans;src:url(/assets/PlusJakartaSans-Medium-BWT6vWE5.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:PlusJakartaSans;src:url(/assets/PlusJakartaSans-Bold-K_68Q89b.ttf) format("truetype");font-weight:700;font-style:normal}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:PlusJakartaSans}img{width:100%;display:block}button{font:inherit;outline:none;border:none;background:transparent;cursor:pointer}input{font:inherit}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}fieldset{border:none}p{font-size:16px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.wrapper{background-color:var(--color-slate-100);display:flex;justify-content:center;align-items:center}.contents{display:flex;flex-direction:column;width:100%;background-color:var(--color-white)}@media (min-width: 768px){.wrapper{height:100vh}.contents{flex-direction:row;max-width:1000px;border-radius:20px;overflow:hidden;margin-inline:1rem}}.form-section-wrapper{padding:2rem 1.5rem}.form-section-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1.8rem}.form-section-title{font-size:clamp(1.5rem,1vw,1.7rem)}.form-section-clear-btn{color:var(--color-slate-700);text-decoration:underline;white-space:nowrap}.form-section-form{display:flex;flex-direction:column;gap:1.5rem;width:100%}.form-section-form label,legend{display:block;color:var(--color-slate-700);margin-bottom:.5rem}.form-section-input-wrapper{display:flex;align-items:center;border:1px solid var(--color-slate-700);border-radius:5px;overflow:hidden;font-size:1.2rem}.form-section-input-wrapper.error{border:2px solid var(--color-red)}.form-section-input-wrapper span{display:flex;justify-content:center;align-items:center;background-color:var(--color-slate-100);padding:.8rem 1rem;color:var(--color-slate-700);font-weight:700;flex-shrink:0;white-space:nowrap}.form-section-input-wrapper span.error{background-color:var(--color-red);color:var(--color-white);font-weight:500}.form-section-input-wrapper input{flex:1;padding:.8rem 1rem;outline:none;border:none;color:var(--color-slate-900);font-weight:700;width:100%;cursor:pointer}.form-section-input-wrapper:focus-within{border-color:#d7da2fcc}.form-section-input-wrapper:focus-within span{background-color:#d7da2fcc}.form-section-input-wrapper input:focus+span{background-color:#d7da2fcc}.form-section-term-rate-wrapper{display:flex;flex-direction:column;gap:1.5rem}.form-section-term-wrapper,.form-section-rate-wrapper{flex:1}.error-message{color:var(--color-red);font-size:.8rem;font-weight:500;margin-top:.5rem}.radio-wrapper{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;border:1px solid var(--color-slate-700);border-radius:5px;cursor:pointer;transition:border .2s ease-in}.radio-wrapper:hover{border-color:#d7da2fcc}input[type=radio]{appearance:none;width:1rem;height:1rem;border:1px solid var(--color-slate-900);border-radius:50%;outline:none;position:relative;cursor:pointer;background-color:#fff}input[type=radio]:checked{border-color:var(--color-lime)}input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.6rem;height:.6rem;border-radius:50%;background-color:var(--color-lime)}.radio-wrapper:focus-within{background-color:#d7da2f33;border-color:#d7da2fcc}.radio-wrapper label{margin-bottom:0;color:var(--color-slate-900);font-weight:700;font-size:1.1rem;margin-left:.3rem;cursor:pointer}.radio-wrapper.space{margin-bottom:.7rem}.form-section-calculate-btn{display:flex;justify-content:center;align-items:center;gap:.7rem;padding:.8rem 0;padding-inline:.5rem;background-color:var(--color-lime);border-radius:50px;transition:background-color .2s ease-in}.form-section-calculate-btn:hover{background-color:#d7da2f99}.calculator-icon{width:1.5rem;height:1.5rem}.form-section-calculate-btn span{font-weight:700;color:var(--color-slate-900);white-space:nowrap}@media (min-width: 768px){.form-section-wrapper{flex:1;padding:2rem}.form-section-title-wrapper{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:2.5rem}.form-section-term-rate-wrapper{flex-direction:row}.form-section-calculate-btn{width:80%}}@media (min-width: 900px){.form-section-calculate-btn{width:70%}}.result-wrapper{flex:1;padding:2rem 1.5rem;color:var(--color-white);background-color:#123040f2}@media (min-width: 768px){.result-wrapper{border-radius:0 0 0 70px}}.empty-wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}.empty-img{width:10rem;height:auto}.empty-title{font-size:1.3rem;font-weight:500}.empty-description{color:var(--color-slate-500);line-height:1.5}@media (min-width: 768px){.empty-wrapper{height:100%;justify-content:center}.empty-img{width:12rem}.empty-title{font-size:1.5rem}}.completed-wrapper{display:flex;flex-direction:column;gap:1rem}.completed-title{font-size:1.3rem;font-weight:500}.completed-description,.completed-result-title{color:var(--color-slate-500);line-height:1.5}.completed-result-wrapper{background-color:var(--color-slate-900);border-radius:5px;padding:1.3rem 1rem;border-top:4px solid var(--color-lime);margin-top:.8rem}.completed-result-monthly{border-bottom:1px solid var(--color-slate-700);padding-bottom:1rem}.completed-result-term{padding-top:1rem}.completed-result-title{margin-bottom:.5rem}.completed-result-monthly-repayment{color:var(--color-lime);font-weight:500;font-size:2.5rem}.completed-result-term-repayment{font-size:1.4rem}@media (min-width: 768px){.completed-wrapper{padding:0 1rem}.completed-title{font-size:1.5rem}.completed-result-wrapper{padding:1.3rem}.completed-result-monthly{padding-bottom:1.8rem}.completed-result-term{padding-top:1.8rem}.completed-result-monthly-repayment{font-size:3.5rem}.completed-result-term-repayment{font-size:1.6rem}}
