: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-400:hsl(200, 26%, 54%);--color-slate-700:hsl(200, 24%, 40%);--color-slate-900:hsl(202, 55%, 16%);--font-family: "Plus Jakarta Sans", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{width:98vw;height:100vh;background-color:var(--color-slate-100)}.App{width:1008px;min-height:606px;margin:0 auto;padding-bottom:40px;display:flow-root;background-color:var(--color-slate-100)}.app-main{height:fit-content;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0;margin:100px auto;background-color:#fff}@media only screen and (min-width:768px)and (max-width:1023px){.App{width:760px;margin:40px auto;padding-bottom:40px;display:flow-root;background-color:var(--color-slate-100)}.app-main{flex-direction:column;align-items:stretch;gap:0;border-radius:0 0 0 80px;margin:40px auto 0}}@media only screen and (max-width:767px){.App{width:100%;margin:40px auto;padding:0 5px 40px;display:flow-root;background-color:var(--color-slate-100)}.app-main{flex-direction:column;align-items:center;gap:16px;margin:16px auto;border-radius:0 0 0 80px}}.calculator-form{width:504px;height:656px;padding:40px;box-sizing:border-box;background:var(--color-white);border:1px solid var(--color-slate-100);border-right:none;display:flex;flex-direction:column;font-family:var(--font-family)}header{display:flex;flex-direction:row;justify-content:space-between}.calc-h1{font-family:var(--font-family);font-weight:700;font-size:22px;margin:0 0 40px;text-align:left;display:inline;color:var(--color-slate-900)}.clear-all-btn{background-color:#fff;border:none;font-family:var(--font-family);font-weight:500;font-size:12px;display:inline;position:relative;top:-18px;text-decoration:underline;color:var(--color-slate-900);cursor:pointer}.clear-all-btn:focus{outline:none}.clear-all-btn:focus-visible{outline:2px solid var(--color-slate-300);outline-offset:none;padding:2px;font-size:14px;border-radius:6px}.clear-all-btn:hover{text-decoration-thickness:1px;font-size:16px}.form-group{display:flex;flex-direction:column;gap:8px;margin-top:16px}.form-group>label{font-size:14px;font-weight:600;color:var(--color-slate-900)}.input-wrapper{position:relative;width:100%}.input-wrapper.with-prefix input{padding-left:48px}.input-wrapper.with-suffix input{padding-right:60px}.input-adornment{position:absolute;top:50%;transform:translateY(-50%);height:46px;padding:4px 18px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.input-adornment.prefix{left:1px;background:#e0f2fe;color:#0369a1}.input-adornment.suffix{right:1px;background:#e0f2fe;color:#0369a1}input[type=number],input[type=text]{width:100%;height:48px;border:1px solid var(--color-slate-300);border-radius:8px;padding:0 16px;font-size:16px;color:var(--color-slate-900);background:var(--color-white);transition:border-color .2s ease,box-shadow .2s ease;outline:none;box-sizing:border-box}input[type=number]:focus,input[type=text]:focus{border-color:var(--color-slate-700);box-shadow:0 0 0 3px #2563eb26}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.error-label-amount,.error-label-term,.error-label-rate,.error-label-radio-btns{color:var(--color-red);font-size:12px;margin-top:6px}.type-label{font-size:16px;font-weight:500}.radio-inputs{display:flex;flex-direction:column;gap:12px}.radio-label{display:inline-flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--color-slate-300);border-radius:8px;cursor:pointer;font-size:18px;font-weight:700;color:var(--color-slate-900);background:#f8fafc;transition:color .2s ease,box-shadow .2s ease,background .2s ease}input[type=radio]{width:auto;height:auto;margin:0}.radio-label:hover{border:1px solid var(--color-lime)}.radio-label:has(input:checked){border-color:var(--color-lime);box-shadow:0 0 0 3px var(--color-slate-300);background:#f7fee7}button[type=submit]{margin-top:40px;margin-bottom:40px;padding:16px;width:80%;height:56px;border:none;border-radius:28px;background:var(--color-lime);color:var(--color-slate-900);font-size:18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:filter .15s ease,transform .02s ease}button[type=submit]:before{content:"";width:18px;height:18px;display:inline-block}button[type=submit]:hover{opacity:70%}button[type=submit]:active{transform:translateY(1px)}button[type=submit]:focus-visible{outline:3px solid rgba(190,242,100,.6);outline-offset:2px}@media only screen and (min-width:768px)and (max-width:1023px){.calculator-form{width:768px;height:max-content}}@media only screen and (max-width:767px){.calculator-form{width:100%;height:max-content}.form-row{flex-direction:column}input[type=number],input[type=text]{width:100%}button[type=submit]{width:96%}}.results-container-empty,.results-container{width:504px;height:656px;margin:0;padding:40px;font-family:var(--font-family);background-color:var(--color-slate-900);border-radius:0 0 0 80px}.illustration{padding:80px 110px;text-align:center}h2{color:#fff;font-weight:700;font-size:24px;text-align:center}h3{color:var(--color-slate-300);font-weight:500;font-size:16px}p{color:var(--color-slate-300);font-weight:500;font-size:16px;text-align:center;padding-top:16px}.result-boxes{margin-top:40px;border-top:4px solid var(--color-lime);background-color:#00000040}.result-box-1{border-bottom:2px solid var(--color-slate-500)}.result-box-1,.result-box-2{width:100%;padding:32px}.num1{font-weight:700;font-size:56px;color:var(--color-lime);text-align:left}.num2{font-weight:500;font-size:24px;color:#fff;text-align:left}@media only screen and (min-width:768px)and (max-width:1023px){.results-container,.results-container-empty{width:768px;height:max-content}.illustration{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0 auto;padding-bottom:30px;text-align:center}.result-box-1,.result-box-2{width:100%;padding:16px 32px}}@media only screen and (max-width:767px){.results-container,.results-container-empty{width:100%;height:max-content;overflow:auto}.illustration{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0 auto;padding:30px 0;text-align:center}.result-box-1,.result-box-2{width:100%;padding:12px 16px}.num1{font-size:40px}}