@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Plus Jakarta Sans}:root{--Lime: hsl(61, 70%, 52%);--Red: hsl(4, 69%, 50%);--White: hsl(0, 0%, 100%);--Slate-100: hsl(202, 86%, 94%);--Slate-300: hsl(203, 41%, 72%);--Slate-500: hsl(200, 26%, 54%);--Slate-700: hsl(200, 24%, 40%);--Slate-900: hsl(202, 55%, 16%)}body{height:100vh;background-color:var(--Slate-100)}.container{background-color:var(--White);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;width:70%;border-radius:18px;box-shadow:0 2px 20px #9abed542}.container form{display:flex;flex-direction:column;width:50%;padding:40px}.container form p{color:var(--Slate-700);font-weight:500;margin:20px 0 10px}.container form .form-header{display:flex;justify-content:space-between}.container form .form-header h1{font-weight:700;font-size:x-large;color:var(--Slate-900)}.container form .form-header .clear{all:unset;text-decoration:underline;color:var(--Slate-700);cursor:pointer}.container form .row{display:flex;gap:2rem}.container form .input-group{display:flex;align-items:center;border:1px var(--Slate-700) solid;border-radius:6px;cursor:pointer}.container form .input-group input{all:unset;padding-inline:20px;font-size:18px;font-weight:500;height:40px;width:100%}.container form .input-group.focused{border:1px solid var(--Lime)}.container form .input-group.focused label{background-color:var(--Lime)}.container form .input-group label{padding:10px 15px;font-weight:700;font-size:18px;background-color:var(--Slate-100);color:var(--Slate-700);z-index:-1}.container form .input-group.error{border:1px solid var(--Red)}.container form .input-group label.error{background-color:var(--Red);color:var(--White)}.radio-block{display:flex;flex-direction:column;gap:.5rem}.radio-option{display:flex;align-items:center;height:50px;gap:.5rem;padding:.5rem;border:1px solid var(--Slate-700);border-radius:6px;cursor:pointer;font-weight:700;color:var(--Slate-900);font-size:18px}.radio-option input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--White);margin:0;font:inherit;color:currentColor;width:1.15em;height:1.15em;border:.15em solid var(--Slate-500);border-radius:50%;display:grid;place-content:center}.radio-option input[type=radio]:before{content:"";width:.65em;height:.65em;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--Lime)}input[type=radio]:checked:before{transform:scale(1)}.radio-option.active{background-color:#d7da2f5b;border:solid 1px var(--Lime);color:var(--Slate-900)}.radio-option.active input[type=radio]{border:.15em solid var(--Lime)}.container form .submit-btn{all:unset;background-color:var(--Lime);width:200px;border-radius:50px;display:flex;align-items:center;padding:10px 20px;margin-top:40px;justify-content:space-between;font-weight:700;color:var(--Slate-900);cursor:pointer;transition:.3s}.container form .submit-btn:hover{background-color:#d7da2f86}.container form .submit-btn:active{scale:.95}.container .display-result{background-color:var(--Slate-900);width:50%;border-radius:0 18px 18px 80px;display:flex}.container .display-result .image{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px}.container .display-result .image h2{color:var(--White);margin-bottom:1rem}.container .display-result .image p{color:var(--Slate-500)}.container .display-result .result{padding:40px}.container .display-result .result h2{color:var(--White);letter-spacing:.2px;font-weight:600}.container .display-result .result p.text{color:var(--Slate-500);margin:20px 0}.devider{border-bottom:1px solid var(--Slate-700);margin:20px 0}.container .display-result .result .table{background-color:#0e242f;border-top:4px solid var(--Lime);border-radius:8px;padding:20px}.container .display-result .result .table p{color:var(--Slate-500);margin-bottom:10px}.container .display-result .result .table p.monthly{color:var(--Lime);font-size:3rem;font-weight:600}.container .display-result .result .table p.total{color:var(--White);font-size:1.5rem;font-weight:500}@media (max-width : 1092px){.container form{height:75%}.container form .row{flex-wrap:wrap;gap:0}}@media (max-width : 975px){.container{position:relative;top:0;left:0;transform:translate(0);display:flex;align-items:center;flex-direction:column;width:100%}.container form{width:fit-content;flex-wrap:wrap}.container form .form-header{flex-direction:column;gap:.8rem}.container form .container form .row{display:flex;flex-direction:column;gap:1rem}.container .display-result{background-color:var(--Slate-900);width:fit-content;display:flex;border-radius:0;padding:40px 0}}@media (max-width : 630px){.container{position:relative;top:0;left:0;transform:translate(0);display:flex;align-items:center;flex-direction:column;width:100%}.container form{width:fit-content;flex-wrap:wrap}.container form .form-header{flex-direction:column;gap:.8rem}.container form .row{display:flex;flex-direction:column;gap:0}.container .display-result{background-color:var(--Slate-900);width:fit-content;display:flex;border-radius:0;padding:40px 0}}