/* Buttons */
.button.submit{cursor: default;}
.button.submit.active{cursor: pointer; background: #000; border-color: #000; color: #fff;}
.button.submit.active:hover{color: #00d8ae;}

/* Messages */
div.flash-message{background: #eee; border-radius: 15px; padding: 20px 30px; margin-bottom: 20px; display: flex; flex-direction: column;
gap: 12px;}
div.flash-message p{font-weight: 500}
div.flash-message.success{background: #00d8ae; color: #fff;}

/* Forms */
div.form-wrapper{max-width: 580px; background: #fff; margin: 0 auto; border-radius: 20px; padding: 50px 44px; position: relative;}
div.form-wrapper.register{margin-bottom: 20px;}
div.form-title{font: 24px/100% 'Uncage'; font-weight: 600; text-transform: uppercase; margin-bottom: 30px; text-align: center;}
div.form-title.light{font-weight: 500; font-size: 18px; color: #414141;}
div.policy-text{font-size: 14px; color: #888;}
div.policy-text a{text-decoration: underline; color: #888;}
div.form-bottom-links{display: flex; justify-content: center; gap: 10px;}
div.form-bottom-links a{border-bottom: 1px solid #00d8ae; display: inline-block; padding-bottom: 5px;}

form.regular{display: flex; flex-direction: column; gap: 20px;}
form.regular div.field{display: flex; flex-direction: column; gap: 8px; position: relative;}
form.regular div.fields-small{display: flex; justify-content: space-between; gap: 20px;}
form.regular div.fields-small > div{width: calc((100% - 20px) / 2);}
form.regular div.field.flat{flex-direction: row; align-items: flex-start; gap: 20px;}
form.regular div.field.promo-code{max-width: 354px;}
form.regular div.field > label{font-size: 14px; cursor: default;}
form.regular .error-text{color: #d80000; font-size: 14px; margin-top: -2px;}
form.regular div.field.policy-agree + .error-text{margin-top: -12px;}
form.regular .common-error{color: #d80000; font-size: 14px; margin-bottom: -11px;}
form.regular .common-error.center{text-align: center;}
form.regular div.field label span{color: #d80000;}
form.regular div.field label.upper{text-transform: capitalize;}
form.regular div.field > label > small{text-decoration: underline; color: #888; font-size: 14px; cursor: pointer;}
form.regular div.field div.help-text{color: #d80000; font-size: 14px; margin-top: -1px;}
form.regular div.field input[type="text"], form.regular div.field input[type="password"], form.regular div.field select{border-radius: 15px;
height: 51px; background: #eee; padding: 0 15px; border: 1px solid transparent; outline: none;}
form.regular div.field > *.error{border-color: #d80000 !important;}
form.regular div.field input[type="password"]{padding-right: 45px !important;}
form.regular div.field span.show-password{width: 25px; height: 25px; cursor: pointer; position: absolute; right: 15px;
top: 40px; background: url(../images/eye.svg) no-repeat center; z-index: 3;}
form.regular div.field span.show-password.active{background-image: url(../images/eye-green.svg);}
form.regular div.field input[type="radio"]{appearance: none; background: transparent;}
form.regular div.field.radio label:has(input){padding-left: 25px; background: url(../images/radio-btn.svg) left center no-repeat;
background-size: contain; cursor: pointer;}
form.regular div.field.radio label:has(input:checked){background-image: url(../images/radio-btn-active.svg);}
form.regular div.field.date input[type="text"]{background: #eee url(../images/calendar-grey.svg) right 15px center no-repeat;
padding-right: 45px;}
form.regular div.field select{background: #eee url(../images/select-textarea.svg) right 15px center no-repeat; color: #414141;
padding-right: 35px; appearance: none; cursor: pointer;}
form.regular div.field select option[value=""]{color: #888;}
form.regular div.field input[type="text"]::placeholder{color:#888;}
form.regular div.buttons{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;}
form.regular div.buttons.double > *{width: calc((100% - 20px) / 2);}
form.regular label.checkbox{cursor: pointer;}
form.regular label.checkbox::after{background: url(../images/checkbox.svg) center no-repeat; background-size: contain; width: 18px;
height: 18px; content: ''; cursor: pointer; display: flex;}
form.regular label.checkbox input[type="checkbox"]{display: none;}
form.regular label.checkbox:has(input[type="checkbox"]:checked)::after{background-image: url(../images/checkbox-checked.svg);}
form.regular div.field.policy-agree{flex-direction: row; align-items: center; gap: 7px;}
form.regular input:focus{border-color: #00d8ae !important; background-color: #fff !important;}
form.regular div.files-uploaded-list{padding-left: 28px; background: url(../images/attach-file.svg) left top 0 no-repeat;
font-weight: 500; color: #888;}

form.regular div.fields-line{display: flex; gap: 20px;}
form.regular div.fields-line div.field{flex-shrink: 1; flex-grow: 1}
form.regular div.fields-line div.field.large{width: 35.897%;}
form.regular div.fields-line div.field.small{width: 18.718%;}
form.regular div.fields-line div.field.medium{width: 23.077%;}

/* Checkbox iOS */
.checkbox-ios{display: inline-block; height: 28px; line-height: 20px; margin-right: 10px; position: relative;
vertical-align: middle; font-size: 14px; user-select: none;}
.checkbox-ios .checkbox-ios-switch{position: relative; display: inline-block; box-sizing: border-box;         
width: 60px; height: 28px; border: 1px solid #777; border-radius: 14px;
vertical-align: top; background: #eee; transition: .3s;}
.checkbox-ios .checkbox-ios-switch:before{content: ''; position: absolute; top: 0px; left: 2px;  
display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: #fff;
transition: .3s; box-shadow: 0px 0px 8.4px 0px #00000040;}
.checkbox-ios input[type="checkbox"]{display: block; width: 0; height: 0; position: absolute;
z-index: -1; opacity: 0;}
.checkbox-ios input[type="checkbox"]:not(:disabled):active + .checkbox-ios-switch:before{
box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);}
.checkbox-ios input[type="checkbox"]:checked + .checkbox-ios-switch{
background: #00d8ae; border-color: #00d8ae !important;}
.checkbox-ios input[type="checkbox"]:checked + .checkbox-ios-switch:before{
transform:translateX(29px); background: #fff;}
.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch{
cursor: pointer; border-color: #dddee1;}
.checkbox-ios input[type="checkbox"]:disabled + .checkbox-ios-switch{
filter: grayscale(70%); border-color: rgba(0, 0, 0, .1);}
.checkbox-ios input[type="checkbox"]:disabled + .checkbox-ios-switch:before{
background: #eee;}

/* Modal */
div.modal-window{width: 580px; right: 0; z-index: 10000; background: #fff; border-radius: 20px; scrollbar-width: thin;
position: fixed; top: 10%; left: calc(50% - 290px); padding: 50px 44px; display: none;}
div.modal-window span.close{background: url(../images/close-green.svg) center no-repeat; position: absolute; transition: all 0.5s ease;
top: 17px; right: 20px; background-size: contain; width: 15px; height: 15px; cursor: pointer;}
div.modal-window span.close:hover{rotate: 180deg;}
div.modal-window div.content{display: flex; flex-direction: column; align-items: center;}
div.modal-window div.content div.message{display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%;
margin-bottom: 30px;}
div.modal-window div.buttons{display: flex; justify-content: space-between;}
div.modal-window div.buttons .button{width: 48%;}
#modal-confirm{padding-bottom: 30px;}

div.info-title{background: url(../images/information.svg) top center no-repeat; background-size: 32px 32px; padding-top: 42px;
text-align: center; margin-bottom: 30px;}
div.info-title.attention{background-image: url(../images/attention-red.svg);}
div.form-action-success{padding: 44px 0 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
background: url(../images/checkbox-checked.svg) top center no-repeat; background-size: 34px 34px; text-align: center;}
div.form-action-success > span{font-size: 14px; color: #888; display: inline-block;}

#modal-sms-code div.info-title{max-width: 410px; margin-left: auto; margin-right: auto;}

/* SMS code */
div.sms-confirmation-code{margin-bottom: 30px; display: flex; flex-direction: column; align-items: center;}
div.sms-confirmation-code div.text{margin-bottom: 14px; font-size: 14px;}
div.sms-confirmation-code div.inputs{margin-bottom: 30px; display: flex; align-items: center; gap: 10px;}
div.sms-confirmation-code div.inputs input{width: 50px; height: 55px; background: #eee; border-radius: 15px; font-size: 25px;
border: none; text-align: center;}
div.sms-confirmation-code div.send-code-again{border-bottom: 1px solid #00d8ae; display: inline-block; padding-bottom: 3px;
font-size: 14px; cursor: pointer;}
div.sms-confirmation-code div.send-code-again.timer{cursor: default; border: none;}
div.sms-confirmation-code  .common-error{color: #d80000; font-size: 14px; text-align: center; margin-bottom: 12px;}