:root {

    --sqz-screen-width: 1920px;
    --sqz-screen-height: 1080px;

    --sqz-blue: #3B70fa;
    --sqz-light-blue: #56B8ff;
    --sqzz-navy: #132B4d;
    --sqz-off-white: #f4f2f2;
    --sqz-white: #ffffff;
    --sqz-error: #f35476;
    --sqz-warning: #fbbc51;
    --sqz-success: #03a766;
    --sqz-grey: #cccccc;
    --sqz-warning-text: #b17207;
    
    
    --sqz-blue-rgb: 59, 112, 250;
    --sqz-light-blue-rgb: 86, 184, 255;
    --sqzz-navy-rgb: 19, 43, 77;
    --sqz-off-white-rgb: 244, 242, 242;
    --sqz-white-rgb: 255, 255, 255;
    --sqz-error-rgb: 243, 84, 118;
    --sqz-warning-rgb: 251, 188, 81;
    --sqz-success-rgb: 3, 167, 102;
    --sqz-grey: #cccccc;
    --sqz-warning-text: #b17207;
    
    
    
    
    --sqz-box-width: 52rem;
    --sqz-box-height:56rem;
    --sqz-icon-width: 2.4rem;
    --sqz-icon-height: 2.4rem;

    --sqz-p-margin: 1rem;
    
    --sqz-transition: all 0.3s ease-in-out 0s;
    
    --sqz-html-font-size: 62.5%;
    --sqz-body-font-size: 1.4rem;
    --sqz-body-font: "Montserrat", sans-serif;
    --sqz-body-font-weight: 400;
    --sqz-medium-font-weight: 600;
    --sqz-heading-font-weight: 700;
    --sqz-heading-three-size: 1.8rem;


    --sqz-link-color: var(--sqz-light-blue);
    --sqz-wrapper-padding: 5rem;
    --sqz-form-body-padding: 5rem;
    --sqz-field-row-padding: 2rem;

    --sqz-label-color: var(--sqz-light-blue);
    --sqz-field-border: var(--sqz-light-blue);
    --sqz-field-focus-border: var(--sqz-blue);
    --sqz-field-focus-background: rgba(var(--sqz-light-blue-rgb), 0.1);

    --sqz-field-color: var(--sqzz-navy);
    --sqz-has-error-border: var(--sqz-error);
    --sqz-is-success-border:var(--sqz-success);
    --sqz-field-padding: 1.4rem;
    --sqz-field-height: 4.6rem;
    
    --sqz-radio-border: rgba(var(--sqz-light-blue-rgb), 0.4);

    --sqz-btn-background: var(--sqz-blue);
    --sqz-btn-color: var(--sqz-white);
    --sqz-btn-hover-color: var(--sqz-white);
    --sqz-btn-hover-background: var(--sqzz-navy);
    --sqz-btn-disabled-color: rgba(var(--sqz-off-white-rgb), 0.5);
    --sqz-btn-disabled-background: var(--sqz-grey);

    --swiper-pagination-bottom: 0;
    --swiper-pagination-color: var(--sqzz-navy);
    --swiper-pagination-bullet-inactive-color: var(--sqz-white);
    --swiper-pagination-bullet-inactive-opacity: 1;


}

@media (max-width:767px) {
    :root {
        --sqz-wrapper-padding: 2rem;
        --sqz-form-body-padding: 1rem;
        --sqz-pop-box-paddng: 1rem;
        --sqz-field-row-padding: 1rem;
    }
}


* {box-sizing: border-box;}
html { font-size: var(--sqz-html-font-size); } /* =10px */
body {padding: 0; margin:0; background: var(--sqz-off-white); font-family: var(--sqz-body-font); font-size: var(--sqz-body-font-size); font-weight: var(--sqz-body-font-weight); line-height: 1.5;}

.sqz-left {text-align: left;}
.sqz-center {text-align: center;}
.sqz-right {text-align: right;}


.sqz-pt_0 {padding-top: 0 !important;}
.sqz-pt_1 {padding-top: 1rem !important;}
.sqz-pt_2 {padding-top: 2rem !important;}
.sqz-pb_0 {padding-bottom: 0 !important;}
.sqz-pb_1 {padding-bottom: 1rem !important;}
.sqz-pb_2 {padding-bottom: 2rem !important;}

.sqz-mt_0 {margin-top: 0 !important;}
.sqz-mt_1 {margin-top: 1rem !important;}
.sqz-mt_2 {margin-top: 2rem !important;}
.sqz-mt_3 {margin-top: 3rem !important;}
.sqz-mb_0 {margin-bottom: 0 !important;}
.sqz-mb_1 {margin-bottom: 1rem !important;}
.sqz-mb_2 {margin-bottom: 2rem !important;}
.sqz-mb_3 {margin-bottom: 3rem !important;}

.sqz-light_blue_bgr_20 {
    --sqz-link-color: var(--sqz-navy);
}

.sqz-success_bgr_20 {
    --sqz-body-color: var(--sqz-success);
    --sqz-link-color: var(--sqz-success);
    --sqz-p-margin: 0;
}

.sqz-error_bgr_20 {
    --sqz-body-color: var(--sqz-error);
    --sqz-heading-color: var(--sqz-error);
}

.sqz-warning_bgr_20 {
    --sqz-body-color: var(--sqz-warning-text);
    --sqz-heading-color: var(--sqz-warning-text);
    --sqz-btn-background: var(--sqz-warning);
    --sqz-btn-color: var(--sqz-warning-text);
}

.sqz-pop_box {
    --sqz-form-body-padding: 3rem;
    --sqz-error-box-height: 0;
    --sqz-btn-background: var(--sqz-success);
    --sqz-label-color: var(--sqzz-navy);
}

.sqz-receive_sms, .sqz-back_box {
    --sqz-link-color : var(--sqz-body-color);
}

.sqz-white_bgr {background: var(--sqz-white);}
.sqz-light_blue_bgr_20 {background: rgba(var(--sqz-light-blue-rgb), 0.2);}
.sqz-error_bgr_20 {background: rgba(var(--sqz-error-rgb), 0.2);}
.sqz-success_bgr_20 {background: rgba(var(--sqz-success-rgb), 0.2);}
.sqz-warning_bgr_20 {background: rgba(var(--sqz-warning-rgb), 0.2);}

.sqz-footer {--sqz-body-color: var(--sqz-white); --sqz-link-color:var(--sqz-white)}

h3, .sqz-h3 {font-size: var(--sqz-heading-three-size);}
h4, .sqz-h4 {font-size: var(--sqz-body-font-size); font-weight: var(--sqz-medium-font-weight); margin: 0 0 1rem; color: var(--sqz-heading-color);}

p {color: var(--sqz-body-color); margin: 0 0 var(--sqz-p-margin);} 
a {color: var(--sqz-link-color);}
a:hover {text-decoration: none;}

.sqz-wrapper {padding: var(--sqz-wrapper-padding); width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.sqz-inner_wrapper {position: relative; z-index: 9; max-width: 100%;}
.sqz-bgr {width: 10px; height: 10px; position: fixed;}
.sqz-bgr:after {content:''; width:calc(var(--sqz-screen-width) * 2); height:calc(var(--sqz-screen-height) *2); position: absolute; left: calc(var(--sqz-screen-width)* -1.2); bottom: calc(var(--sqz-screen-height) * -1.15); background: url('../img/cloud-bg-full.svg'); background-repeat: no-repeat; background-size: cover; z-index: 1;}

.sqz-btn {background: var(--sqz-btn-background); border: none; border-radius: 3rem; padding: var(--sqz-field-padding) calc(var(--sqz-field-padding) * 3); height: var(--sqz-field-height); color: var(--sqz-btn-color); position: relative; transition: var(--sqz-transition); text-decoration: none; font-weight: var(--sqz-medium-font-weight);}
.sqz-btn:hover {background: var(--sqz-btn-hover-background); color: var(--sqz-btn-hover-color);}
.sqz-box {width: var(--sqz-box-width); max-width: 100%; min-height: var(--sqz-box-height); background-color: var(--sqz-off-white); border-radius: 2rem; padding: 2rem; box-shadow:0 0 40px rgba(7,30,64,0.2); position: relative; z-index: 9;}
.sqz-header {margin: 3rem 0 2rem; padding: 0 calc(var(--sqz-form-body-padding) + var(--sqz-field-row-padding));}
.sqz-header img {margin: auto; display: block;}
.sqz-logo {width: 174px; margin: auto;}
.sqz-logo img {width: 100%; max-width: 100%; height: auto;}

.sqz-form_body {padding: 0 var(--sqz-form-body-padding);}
.sqz-field_row {margin: 0 0 2rem; padding: 0 var(--sqz-field-row-padding);}
.sqz-field_row .sqz-btn {width: 100%;}
.sqz-field_row ol {padding: 0; list-style-position: inside;}
.sqz-field_row .sqz-qr {margin: auto;}

.sqz-field_wrap {position: relative;}

.sqz-icon {width: var(--sqz-icon-width); height:var(--sqz-icon-height); position: absolute; right:1rem; top:50%; transform: translateY(-50%); display: none;}
.sqz-has_error .sqz-icon_error {display: block;}
.sqz-is_success .sqz-icon_success {display: block;}
.sqz-loading .sqz-icon_loading {display: block;}

.sqz-has_error {--sqz-field-border:var(--sqz-has-error-border);}
.sqz-is_success {--sqz-field-border:var(--sqz-is-success-border);}

.sqz-label {color: var(--sqz-label-color); display: block; margin: 0 0 0.8rem;}
.sqz-field {border:solid 1px var(--sqz-field-border); border-radius: 5rem; color: var(--sqz-field-color); font-weight: var(--sqz-medium-font-weight); padding: var(--sqz-field-padding); width: 100%; transition: var(--sqz-transition);}
.sqz-field:focus {outline: none; border-color: var(--sqz-field-focus-border); background: var(--sqz-field-focus-background);} 
.sqz-radio_wrap {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 3rem;}
.sqz-radio_wrap label {height: 3rem; border-radius: 6rem; border: solid 1px var(--sqz-radio-border); display: flex; align-items: center; padding: 0.7rem 3rem; position: relative; color:var(--sqz-blue); transition: var(--sqz-transition);}
.sqz-radio_wrap input {opacity: 0; position: absolute;}
.sqz-radio_wrap label::before, .sqz-radio_wrap label:after {content:''; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: solid 1px var(--sqz-radio-border); position:absolute; left: 0.7rem;}
.sqz-radio_wrap label::after {background: var(--sqz-blue); opacity: 0; transition: var(--sqz-transition);}
.sqz-radio_wrap label:hover, .sqz-radio_wrap input:checked ~ label {background: var(--sqz-radio-border);}
.sqz-radio_wrap input:checked ~ label::after {opacity: 1;}

.sqz-message_box {border-radius: 1.2rem; padding: 2.4rem 7rem; margin: 2rem 0 0; position: relative;}
.sqz-error_box {--sqz-p-margin: 0; min-height: var(--sqz-error-box-height, 14.7rem); display: flex; flex-direction: column; justify-content: center;}
.swiper-wrapper {padding-bottom: 3rem;}
.sqz-download_box .sqz-btn {display:inline-block; margin: 2.6rem 0 0; width: 100%; text-align: center;}


.sqz-pop_box {position: absolute; left: 2rem; top: 2rem; right: 2rem; bottom: 2rem; border-radius: 1.2rem; padding: 0 2rem 2rem; display: none; z-index: 9; opacity: 0; transition: var(--sqz-transition);}
.sqz-close {position: absolute; right: 1rem; top: 1rem; background: none; border: none; padding: 0; cursor: pointer; transition: var(--sqz-transition);}
.sqz-close:hover {opacity: 0.5;}
.sqz-btn:disabled {background: var(--sqz-btn-disabled-background); color: var(--sqz-btn-disabled-color); pointer-events: none;}


.sqz-receive_sms {margin-top:3rem;}
.sqz-back_box {position: absolute; left: 0; right: 0; bottom: 0;}
.sqz-back_box p {display: flex; align-items: center;}
.sqz-back_box p img {margin-right: 1rem;}

@media (max-width:767px) {
    .sqz-wrapper {height: auto;}
    .sqz-box {padding: 1rem;}
    .sqz-message_box { padding: 2.4rem 2rem;}
    .sqz-pop_box {--sqz-form-body-padding: 0.5rem;}
}

@media (max-width:375px) {
    .sqz-wrapper {--sqz-wrapper-padding: 1rem;}
    .sqz-box {padding: 1rem;}
    .sqz-pop_box {left: 1rem; top: 1rem; right: 1rem; bottom: 1rem; padding: 0 1rem 1rem;}
}