@import"https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:Ubuntu,sans-serif;font-size:1rem;min-height:100vh;background-color:var(--blue-200)}@media (min-width: 1100px){body{display:flex;align-items:center;justify-content:center}}label{color:var(--blue-950)}li{list-style-type:none}h2{font-size:1.25rem}p{color:var(--grey-500)}button{font-size:inherit;background-color:transparent;border:none;cursor:pointer}:root{--blue-950: hsl(213, 96%, 18%);--purple-600: hsl(243, 100%, 62%);--blue-300: hsl(228, 100%, 84%);--blue-200: hsl(206, 94%, 87%);--red-500: hsl(354, 84%, 57%);--grey-500: hsl(231, 11%, 63%);--purple-200: hsl(229, 24%, 87%);--blue-100: hsl(218, 100%, 97%);--blue-50: hsl(231, 100%, 99%);--white: hsl(0, 100%, 100%)}.app{display:grid;grid-template-columns:1fr;width:auto;height:100%;background-color:var(--white)}.app aside{position:absolute;top:0;left:0;right:0;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='375'%20height='172'%20viewBox='0%200%20375%20172'%3e%3cdefs%3e%3cpath%20id='a'%20d='M0%200h375v172H0z'/%3e%3c/defs%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cmask%20id='b'%20fill='%23fff'%3e%3cuse%20xlink:href='%23a'/%3e%3c/mask%3e%3cuse%20xlink:href='%23a'%20fill='%23483EFF'/%3e%3cg%20mask='url(%23b)'%3e%3cg%20transform='translate(-151.029%20-133.957)'%3e%3cpath%20fill='%236259FF'%20d='M79.546%20349.634c54.547%20128.646%20292.524%20204.132%20354.626%2099.852%2062.102-104.28-95.035-123.204-150.583-230.963-55.547-107.759-98.711-175.015-178.973-150.466C24.354%2092.607%2025%20220.987%2079.546%20349.634Z'/%3e%3cellipse%20cx='129.864'%20cy='258.711'%20fill='%23FFAF7E'%20rx='96.329'%20ry='96.373'/%3e%3cpath%20fill='%23F9818E'%20d='M464.88%20433.146c87.31-40.69%20133.585-206.525%2060.253-246.82-73.333-40.293-82.587%2068.465-155.485%20109.343-72.898%2040.877-118.192%2072.245-99.348%20126.973%2018.845%2054.728%20107.27%2051.194%20194.58%2010.504Z'/%3e%3cg%20stroke='%23FFF'%20stroke-linecap='round'%20stroke-linejoin='bevel'%20stroke-width='5'%3e%3cpath%20d='m367.336%20243.125%2015.263-15.549M430.872%20251.016l-17.995-15.112M399.36%20271.751l-9.94%2021.293'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:cover;padding:3rem 2rem;height:20vh}.app aside ul{display:flex;justify-content:center}.app aside ul>li{display:flex;align-items:center;gap:1rem}.app aside ul>li .step{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--white);border-radius:50%;font-size:1rem;color:var(--white);transition:all .3s linear}.app aside ul>li .step.active{background-color:var(--blue-300);color:#000}.app aside ul>li .step-label{display:none;color:var(--grey-500)}.app aside ul>li .step-name{display:none;font-weight:700;color:var(--white)}.app main{background-color:var(--white);z-index:99;margin:15vh auto;margin-bottom:0;border-radius:.75rem;width:90%;height:100%;padding:2rem 1.5rem;display:flex;flex-direction:column}.app main .buttons{position:fixed;bottom:0;left:0;width:100%;padding:2rem;background-color:var(--white);display:flex;align-items:center;justify-content:space-between;margin-top:auto}.app main .buttons.hide{display:none}.app main .buttons .prev-button{color:var(--grey-500);font-weight:700;transition:all .2s linear}.app main .buttons .prev-button:hover{color:var(--blue-950)}.app main .buttons .next-button{margin-left:auto;padding:.75rem 1.75rem;border-radius:.5rem;background-color:var(--blue-950);color:var(--white);transition:all .2s linear}.app main .buttons .next-button:hover{background-color:var(--purple-600)}.app main .buttons .next-button:active{background-color:var(--blue-300)}@media (min-width: 1100px){.app{grid-template-columns:2fr 5fr;width:1100px;height:620px;padding:1rem;border-radius:1rem}.app aside{position:static;height:100%;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='274'%20height='568'%20fill='none'%20viewBox='0%200%20274%20568'%3e%3crect%20width='274'%20height='568'%20fill='%23483EFF'%20rx='10'/%3e%3cmask%20id='a'%20width='274'%20height='568'%20x='0'%20y='0'%20maskUnits='userSpaceOnUse'%20style='mask-type:alpha'%3e%3crect%20width='274'%20height='568'%20fill='%23fff'%20rx='10'/%3e%3c/mask%3e%3cg%20mask='url(%23a)'%3e%3cpath%20fill='%236259FF'%20fill-rule='evenodd'%20d='M-34.692%20543.101C3.247%20632.538%20168.767%20685.017%20211.96%20612.52c43.194-72.497-66.099-85.653-104.735-160.569-38.635-74.916-68.657-121.674-124.482-104.607-55.824%2017.068-55.375%20106.32-17.436%20195.757Z'%20clip-rule='evenodd'/%3e%3cpath%20fill='%23F9818E'%20fill-rule='evenodd'%20d='M233.095%20601.153c60.679-28.278%2092.839-143.526%2041.875-171.528-50.965-28.003-57.397%2047.579-108.059%2075.987-50.662%2028.408-82.14%2050.207-69.044%2088.241%2013.096%2038.034%2074.549%2035.578%20135.228%207.3Z'%20clip-rule='evenodd'/%3e%3cpath%20stroke='%23fff'%20stroke-linecap='round'%20stroke-linejoin='bevel'%20stroke-width='5'%20d='m165.305%20469.097%2010.607-10.806M209.461%20474.581l-12.506-10.503M187.56%20488.991l-6.908%2014.798'/%3e%3cpath%20fill='%23FFAF7E'%20d='M.305%20546.891c37.003%200%2067-29.997%2067-67s-29.997-67-67-67-67%2029.997-67%2067%2029.997%2067%2067%2067Z'/%3e%3c/g%3e%3c/svg%3e");border-radius:.5rem}.app aside ul{display:block}.app aside ul>li{margin-bottom:2rem}.app aside ul>li .step-label,.app aside ul>li .step-name{display:block}.app main{position:static;width:100%;padding:3rem 6rem;margin:0}.app main .buttons{position:static;padding:0}}h1{color:var(--blue-950)}.note{margin-top:.5rem;margin-bottom:3rem;color:var(--grey-500)}form .input-box>div{display:flex;align-items:center;justify-content:space-between;font-size:.9rem}form .input-box>div p{color:var(--red-500)}form .input-box input{width:100%;padding:.75rem;border:2px solid var(--grey-500);border-radius:.5rem;margin-top:.5rem;margin-bottom:1.5rem;font-size:inherit}form .input-box input:hover{border:2px solid var(--blue-300)}form .input-box input.alert{border-color:var(--red-500)}section h1{color:var(--blue-950)}section>p{margin-top:.5rem;margin-bottom:1rem;color:var(--grey-500)}section .plans .plan{display:flex;gap:1rem;border:2px solid var(--grey-500);border-radius:1rem;padding:1rem;width:100%;height:6rem;transition:all .2s linear;margin-bottom:1rem;cursor:pointer}section .plans .plan.active{border-color:var(--blue-300)}section .plans .plan:hover{border-color:var(--purple-600)}section .plans .plan img{width:2.5rem;height:2.5rem}section .plans .plan .plan-body h2{font-size:1.1rem;color:var(--blue-950)}section .plans .plan .plan-body>div{margin:.3rem 0}section .plans .plan .plan-body>div span{color:var(--grey-500)}section .plans .plan .plan-body p{color:var(--blue-950)}section .plan-time{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:1rem 2rem;background-color:var(--blue-100);border-radius:1rem}section .plan-time span{font-weight:700;color:var(--grey-500)}section .plan-time span.active{color:var(--purple-950)}section .plan-time .plan-changer{width:2.25rem;height:1.4rem;padding:.2rem;background-color:var(--blue-950);border-radius:2rem}section .plan-time .plan-changer .dot{width:1rem;height:1rem;background-color:var(--white);border-radius:50%;transition:all .2s linear}section .plan-time .plan-changer .dot.right{margin-left:.85rem}section .plan-err{text-align:center;margin-top:1.5rem;color:var(--red-500)}@media (min-width: 1100px){section>p{margin-bottom:3rem}section .plans{display:flex;align-items:center;justify-content:space-between;gap:1rem}section .plans .plan{margin-bottom:0;height:13rem;flex-direction:column}section .plans .plan .plan-body{margin-top:auto}}.third ul li{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--purple-600);border-radius:.5rem;padding:1rem;margin-bottom:1rem}.third ul li .left{display:flex;align-items:center;gap:1rem}.third ul li .left .custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer}.third ul li .left .custom-checkbox input{display:none}.third ul li .left .custom-checkbox .checkbox{width:1.25rem;height:1.25rem;border:1px solid var(--purple-600);border-radius:.25rem;display:flex;align-items:center;justify-content:center;background:var(--white);transition:all .2s}.third ul li .left .custom-checkbox input:checked+.checkbox{background:var(--purple-600)}.third ul li .left .content h2{text-transform:capitalize;margin-bottom:.3rem}.forth .body .plan{padding:1.5rem;background-color:var(--blue-50);border-radius:.5rem}.forth .body .plan .plan__name{display:flex;align-items:center;justify-content:space-between;padding-bottom:2rem;border-bottom:1px solid var(--grey-500);color:var(--blue-950)}.forth .body .plan .plan__name button{margin-top:.3rem;text-decoration:underline;color:var(--grey-500);transition:all .2s linear;font-size:.85rem}.forth .body .plan .plan__name button:hover{color:var(--purple-600)}.forth .body .plan .plan__name span{font-weight:700}.forth .body .plan ul{margin-top:1rem}.forth .body .plan ul li{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.forth .body .plan ul li p{text-transform:capitalize}.forth .body .plan ul li span{color:var(--blue-95)}.forth .body .total{display:flex;align-items:center;justify-content:space-between;padding:1.5rem}.forth .body .total span{font-weight:700;color:var(--purple-600);font-size:1.25rem}.thank-you{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%}.thank-you h1{color:var(--blue-950)}.thank-you p{text-align:center}