@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";*{padding:0;margin:0;font-family:Plus Jakarta Sans,sans-serif}body{background-color:#e3f3fd;min-height:100vh;display:flex;align-items:center;justify-content:center}main{background-color:#fff;height:36rem;max-width:65rem;width:100%;display:flex;flex-wrap:wrap;border-radius:1rem}main .calculator_main{display:flex;flex-direction:column;gap:1.2rem;padding:2rem 1.75rem;flex:1 1}main .calculator_main header{display:flex;justify-content:space-between;flex-wrap:wrap}main .calculator_main header h1{color:#122f3f}main .calculator_main header button{background-color:transparent;border:none;text-decoration:underline;cursor:pointer;color:#4e6e7e;font-size:1rem}main .calculator_main header button:hover{color:#122f3f}main .calculator_main form{height:90%;display:flex;flex-direction:column;justify-content:space-between}input::-webkit-inner-spin-button{display:none}main .calculator_main form .amount_wrapper label,main .calculator_main form .mortgage_info_wrapper label,main .calculator_main form .mortgage_type_wrapper p{color:#4e6e7e;font-size:.875rem}.amount_input_wrapper,.input_wrapper{margin-top:.4rem;width:100%;height:3rem;display:flex}main .calculator_main form .amount_wrapper .amount_input_wrapper span,main .calculator_main form .amount_wrapper .amount_input_wrapper input,main .calculator_main form .mortgage_info_wrapper .term_wrapper span,main .calculator_main form .mortgage_info_wrapper .term_wrapper input,main .calculator_main form .mortgage_info_wrapper .interest_wrapper span,main .calculator_main form .mortgage_info_wrapper .interest_wrapper input{border:1px solid hsl(200,24%,40%)}input:focus{outline:none}.amount_input_wrapper:focus-within span,.term_wrapper:focus-within span,.interest_wrapper:focus-within span{border-color:#d7da2f!important;background-color:#d7da2f!important}.amount_input_wrapper:focus-within input,.term_wrapper:focus-within input,.interest_wrapper:focus-within input{border-color:#d7da2f!important}main .calculator_main form .amount_wrapper .amount_input_wrapper:hover span,main .calculator_main form .mortgage_info_wrapper .term_wrapper:hover span,main .calculator_main form .mortgage_info_wrapper .interest_wrapper:hover span,main .calculator_main form .amount_wrapper .amount_input_wrapper:hover input,main .calculator_main form .mortgage_info_wrapper .term_wrapper:hover input,main .calculator_main form .mortgage_info_wrapper .interest_wrapper:hover input{border:1px solid hsl(202,55%,16%)}main .calculator_main form .amount_wrapper .amount_input_wrapper:hover span{border-right:none}main .calculator_main form .amount_wrapper .amount_input_wrapper:hover input{border-left:none;cursor:pointer}main .calculator_main form .mortgage_info_wrapper .term_wrapper:hover span,main .calculator_main form .mortgage_info_wrapper .interest_wrapper:hover span{border-left:none}main .calculator_main form .mortgage_info_wrapper .term_wrapper:hover input,main .calculator_main form .mortgage_info_wrapper .interest_wrapper:hover input{cursor:pointer;border-right:none}main .calculator_main form .amount_wrapper .amount_input_wrapper span,main .calculator_main form .mortgage_info_wrapper .term_wrapper span,main .calculator_main form .mortgage_info_wrapper .interest_wrapper span{width:4rem;display:flex;align-items:center;justify-content:center;font-weight:700;background-color:#e3f3fd;border-radius:.4rem 0 0 .4rem;border-right:none;color:#4e6e7e}main .calculator_main form .amount_wrapper .amount_input_wrapper input{width:90%;border-radius:0 .4rem .4rem 0;border-left:none;padding:.2rem .6rem}main .calculator_main form .mortgage_info_wrapper{margin-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem}main .calculator_main form .mortgage_info_wrapper .term_wrapper,main .calculator_main form .mortgage_info_wrapper .interest_wrapper{flex:1 0 10rem}main .calculator_main form .mortgage_info_wrapper .term_wrapper span,main .calculator_main form .mortgage_info_wrapper .interest_wrapper span{width:4rem;border-left:none;border-right:1px solid hsl(200,24%,40%);border-radius:0 .4rem .4rem 0;font-size:.875rem}main .calculator_main form .mortgage_info_wrapper .term_wrapper input,main .calculator_main form .mortgage_info_wrapper .interest_wrapper input{border-right:none;width:85%;border-radius:.4rem 0 0 .4rem;padding:.2rem .6rem}.mortgage_type_wrapper{margin-top:1rem;display:flex;flex-direction:column}.mortgage_type_wrapper .type_label{margin-top:1rem;border:1px solid hsl(200,24%,40%);padding:.8rem;border-radius:.4rem;cursor:pointer;transition:.4s ease border-color}.mortgage_type_wrapper .type_label:hover{border-color:#d7da2f}.mortgage_type_wrapper .type_label:has(input[type=radio]:checked){border-color:#d7da2f;background-color:#d7da2f33}.mortgage_type_wrapper .type_label input[type=radio]{filter:hue-rotate(210deg)}.mortgage_type_wrapper label span{margin-left:.6rem;font-weight:700;color:#122f3f}.submit_btn{width:20rem;margin-top:1rem;padding:.8rem;display:flex;align-items:center;justify-content:center;gap:.8rem;border-radius:1.5rem;border:none;background-color:#d7da2f;color:#122f3f;font-weight:700;cursor:pointer;font-size:1rem;transition:.4s ease background-color}.submit_btn:hover{background-color:#d7da2fcc}main .infos_main{flex:1 1;width:50%;background-color:#122f3f;border-radius:0 1rem 1rem 4rem;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;padding:2rem}main .infos_main h1{color:#fff}main .infos_main p{text-align:center;width:80%;color:#6b94a8}main .infos_main .results_container{height:100%;display:flex;flex-direction:column;gap:2rem}main .infos_main .results_container h2{color:#fff}main .infos_main .results_container p{width:90%;text-align:start}main .infos_main .results_container .results_shown{background-color:#041620;height:14rem;border-radius:.4rem;padding:2rem;position:relative}main .infos_main .results_container .results_shown .separator{position:absolute;top:0;left:0;height:.4rem;width:100%;background-color:#d7da2f;border-radius:.4rem .4rem 0 0}main .infos_main .results_container .results_shown h1{color:#d7da2f;font-size:3rem}main .infos_main .results_container .results_shown hr{margin:2rem 0}main .infos_main .results_container .results_shown h2{font-size:1.4rem;padding:.8rem 0}.input_error input,.input_error span{border-color:#d73328!important}.input_error span{background-color:#d73328!important;color:#fff!important}.amount_input_wrapper,.input_wrapper,.mortgage_type_wrapper{position:relative}.error_message{font-size:.875rem;margin-top:.4rem;color:#d73328!important}@media screen and (max-width: 428px){main{height:100vh}main,main .infos_main{border-radius:0}}