@import"https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap";*{box-sizing:border-box}html,body{width:100%;height:100%}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button{border:none;background-color:transparent}body{font-family:Ubuntu,sans-serif}.form-title{font-size:32px;font-style:normal;font-weight:700;line-height:normal;color:#022959}.form-subtitle{font-size:16px;font-style:normal;font-weight:400;line-height:25px;color:#9699aa}@media (max-width: 478px){.form-title{font-size:24px}}.buttons .btn{color:#9699aa;font-weight:500;line-height:normal;font-style:normal;font-size:16px;cursor:pointer;width:123px;height:48px;border-radius:8px}.buttons .btn.active{background-color:#022959;color:#fff}.buttons .btn.active:hover{background-color:#164a8a}.buttons .btn.confirm{color:#fff;background-color:#483eff}.buttons .btn.confirm:hover{background-color:#928cff}@media (max-width: 478px){.buttons .btn{width:97px;height:40px}}.switch{position:relative;display:inline-block;width:38px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#022959;transition:.4s}.slider:before{position:absolute;content:"";height:12px;width:12px;left:4px;bottom:4px;background-color:#fff;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}input:checked+.slider{background-color:#022959}input:checked+.slider:before{transform:translate(18px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}body{background-color:#eff5ff;display:flex;align-items:center;justify-content:center}body .multi-step-form{background-color:#fff;border-radius:16px;box-shadow:0 25px 40px -20px #0000001a;padding:16px;width:940px;height:600px}body .multi-step-form .form-container{display:flex}body .multi-step-form .form-container .side-bar{width:274px;height:568px;border-radius:10px;background:url(/assets/bg-sidebar-desktop-e6d2744a.svg) no-repeat center/cover;display:flex;flex-direction:column;padding-top:40px;padding-left:32px;gap:32px;color:#fff}body .multi-step-form .form-container .side-bar .item{display:flex;align-items:center;gap:16px}body .multi-step-form .form-container .side-bar .item .item-number{border:1px solid #FFF;width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px}body .multi-step-form .form-container .side-bar .item .item-number.active{background-color:#bee2fd;color:#022959;border:none}body .multi-step-form .form-container .side-bar .item .item-body{display:flex;flex-direction:column;gap:4px}body .multi-step-form .form-container .side-bar .item .item-body .subtitle{font-size:12px;font-weight:400;line-height:normal;font-style:normal;color:#abbcff;text-transform:uppercase}body .multi-step-form .form-container .side-bar .item .item-body .title{font-size:14px;font-style:normal;font-weight:700;line-height:normal;letter-spacing:1px;text-transform:uppercase}body .multi-step-form .form-container .buttons{display:flex}body .multi-step-form .form-container .buttons .btn.active,body .multi-step-form .form-container .buttons .btn.confirm{margin-left:auto}body .multi-step-form .form-container form{flex:1;padding:0 50px}body .multi-step-form .form-container form .step1-form{display:flex;height:90%;flex-direction:column;gap:12px;padding:20px 0}body .multi-step-form .form-container form .step1-form .form-wrapper{display:flex;flex-direction:column;gap:24px}body .multi-step-form .form-container form .step1-form .form-wrapper .form-control{display:flex;flex-direction:column;gap:8px;position:relative}body .multi-step-form .form-container form .step1-form .form-wrapper .form-control input{height:48px;border-radius:8px;border:1px solid #D6D9E6;padding:0 16px}body .multi-step-form .form-container form .step1-form .form-wrapper .form-control .error-message{color:#ee374a;position:absolute;right:0;font-size:14px;font-weight:700;font-style:normal;line-height:normal}body .multi-step-form .form-container form .step2-form{display:flex;height:90%;flex-direction:column;gap:12px;padding:20px 0}body .multi-step-form .form-container form .step2-form .radio-group{margin-top:35px;display:flex;gap:18px}body .multi-step-form .form-container form .step2-form .radio-group label{border:1px solid #D6D9E6;flex:1;height:160px;border-radius:8px;display:flex;flex-direction:column;padding:16px;cursor:pointer}body .multi-step-form .form-container form .step2-form .radio-group label:hover{border:1px solid #483EFF}body .multi-step-form .form-container form .step2-form .radio-group label .info{margin-top:auto}body .multi-step-form .form-container form .step2-form .radio-group label .info .select-title{color:#022959;font-size:16px;font-weight:500;margin-bottom:7px}body .multi-step-form .form-container form .step2-form .radio-group label .info .select-price{color:#9699aa;font-size:14px;font-weight:400}body .multi-step-form .form-container form .step2-form .radio-group label.selected{border:1px solid #483EFF;background-color:#f8f9ff}body .multi-step-form .form-container form .step2-form .radio-group label input{display:none}body .multi-step-form .form-container form .step2-form .switch-box{display:flex;align-items:center;justify-content:center;height:48px;background-color:#f8f9ff;gap:24px;margin-top:32px}body .multi-step-form .form-container form .step2-form .switch-box .switch-price{color:#9699aa;font-weight:500;font-size:14px}body .multi-step-form .form-container form .step2-form .switch-box .switch-price.active{color:#022959}body .multi-step-form .form-container form .step3-form{height:90%;display:flex;flex-direction:column;gap:12px;padding:20px 0}body .multi-step-form .form-container form .step3-form .checkbox-group{display:flex;flex-direction:column;gap:16px;margin-top:28px}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label{width:100%;height:81px;border:1px solid #D6D9E6;border-radius:8px;display:flex;align-items:center;gap:24px;padding:24px 12px;cursor:pointer}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label:hover{border:1px solid #483EFF}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label.active{border:1px solid #483EFF;background-color:#f8f9ff}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .checkbox-text{display:flex;flex-direction:column;gap:7px}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .checkbox-text .checkbox-title{font-size:16px;font-weight:500;color:#022959}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .checkbox-text .checkbox-info{font-size:14px;font-weight:400;line-height:20px;color:#9699aa}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .price{margin-left:auto;font-size:14px;font-weight:400;line-height:20px;color:#483eff}body .multi-step-form .form-container form .step4-form{height:90%;display:flex;flex-direction:column;gap:12px;padding:20px 0}body .multi-step-form .form-container form .step4-form .control-panel{background-color:#f8f9ff;padding:24px;display:flex;flex-direction:column;gap:16px;margin-bottom:25px}body .multi-step-form .form-container form .step4-form .control-panel .control-item{display:flex;justify-content:space-between}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-price{color:#022959;font-size:14px;font-weight:400;line-height:20px}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-price-picked{color:#022959;font-size:16px;font-weight:700;line-height:20px}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-item-name{display:flex;flex-direction:column;align-items:flex-start;gap:7px}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-item-name h4{color:#9699aa;font-weight:400;line-height:20px}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-item-name .change{color:#9699aa;font-size:14px;font-weight:400;line-height:20px;text-decoration-line:underline;cursor:pointer}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-item-name .change:hover{color:#483eff}body .multi-step-form .form-container form .step4-form .control-panel .control-item .control-item-name .picked{color:#022959;font-size:16px;font-weight:500}body .multi-step-form .form-container form .step4-form .control-panel .control-item:first-child{padding-bottom:24px;border-bottom:1px solid rgba(150,153,170,.3)}body .multi-step-form .form-container form .step4-form .total-amount{display:flex;justify-content:space-between;align-items:center}body .multi-step-form .form-container form .step4-form .total-amount .total{font-size:14px;font-weight:400;line-height:20px;color:#9699aa}body .multi-step-form .form-container form .step4-form .total-amount .total-price{color:#483eff;font-size:20px;font-weight:700;line-height:20px}body .multi-step-form .form-container form .success-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:90%}body .multi-step-form .form-container form .success-page .success-title{margin-top:32px;color:#022959;font-size:32px;font-weight:700}body .multi-step-form .form-container form .success-page .success-text{text-align:center;color:#9699aa;font-size:16px;line-height:25px;font-weight:400;width:50ch;margin-top:14px}body .multi-step-form .form-container form .buttons{margin-top:auto}@media (max-width: 478px){body{align-items:flex-start}body .multi-step-form{padding:0;width:100%;background-color:#eff5ff;box-shadow:none}body .multi-step-form .form-container{flex-direction:column;align-items:center;width:100vw}body .multi-step-form .form-container .side-bar{flex-direction:row;justify-content:center;width:100%;height:172px;background:url(/assets/bg-sidebar-mobile-f8e29a05.svg) no-repeat center/cover;padding:0;border-radius:0}body .multi-step-form .form-container .side-bar .item{justify-content:center}body .multi-step-form .form-container .side-bar .item .item-body{display:none}body .multi-step-form .form-container form{margin-top:-50px;background-color:#fff;border-radius:10px;width:90%;box-shadow:0 25px 40px -20px #0000001a;padding:0 30px}body .multi-step-form .form-container form .step2-form .radio-group{flex-direction:column;gap:12px;margin-top:0}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label{gap:12px;padding:12px}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .checkbox-text{gap:0}body .multi-step-form .form-container form .step3-form .checkbox-group .checkbox-label .checkbox-text .checkbox-title{font-size:14px}body .multi-step-form .form-container form .success-page{padding:12px}body .multi-step-form .form-container form .success-page .success-title{font-size:24px}body .multi-step-form .form-container form .success-page .success-text{width:34ch;font-size:14px}body .multi-step-form .form-container form .buttons{position:fixed;bottom:0;left:0;right:0;background-color:#fff}body .multi-step-form .form-container form .buttons .btn{margin:16px}}
