#test{
    position: fixed;
    top: 0;
    left: 0;
}

.form-agree-quiz{
    padding-top: 10px;
}

.stepper-wrapper{
    position: relative;
    height: 814px;
}
#stepper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    padding: 65px;
    background: #F9F9F9;
}
.stepper{
    font-family: Roboto;
}
.stepper-progress-title, .stepper-progress-title-last{
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 0;
    text-align: center;
    font-family: Roboto;
    line-height: 53px;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 596px;
}

.stepper-progress-form-wrapper{
    width: 400px;
    padding: 22px 30px;
    margin: 30px auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px rgba(15, 32, 66, 0.0997509), 0px 1px 3px rgba(0, 0, 0, 0.101817);
    border-radius: 4px;
}

.stepper-progress-title-last--two{
    margin: 0px auto;
    width: 596px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    line-height: 22px;
    text-align: center;
    color: #000000;
}

.stepper-progress-title-last--two span{
    font-weight: bold;
}


.stepper-wrapper .callback_window1_form{
    width: 100%;
    max-width: 580px;
    margin: auto;
    text-align: left;
}
.stepper-progress{
    background: linear-gradient(180deg, #D6D6D6 0%, #CCCCCC 100%);
    width: 100%;
    height: 7px;
    border-radius: 6px;
    position: relative;
    margin-bottom: 22px;
}
.stepper-progress-complete{
    position: absolute;
    width: 0%;
    background-color: #2CD848;
    background-size: 100% 100%;
    top: 0;
    bottom: 0;
    border-radius: 6px;
}
.stepper-progress-question{
    font-size: 16px;
    color: #9F9F9F;
    margin-bottom: 8px;
}
.stepper-steps-wrapper{
    min-height: 450px;
}
.stepper-step-content{
    max-height: 450px;
    overflow-y: auto;
}
#content .stepper-step-content ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.stepper-step-content li{
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 10px 30px;
    float: left;
    background-color: white;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
.stepper-step-content li{
    position: relative;
}
[data-name="service"] .stepper-step-content li{
    text-align: left;
    padding-left: 35px;
}
.stepper-step-content li.inline{
    font-size: 19px;
}
.stepper-step-content li.inline img{
    margin-right: 20px;
}
.stepper-step-content li.inline.checked{
    background: #2CD848;
    color: white;
}
.stepper-step-content::-webkit-scrollbar {
    width: 2px;
}

.stepper-step-content::-webkit-scrollbar-track {
    background-color: #E3E3E3;
    outline: 1px solid slategrey;
    border-radius: 6px;
}

.stepper-step-content::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 6px;
}
.stepper-step-content ul{
    padding-left: 0;
    margin-left: 0;
}
.stepper-footer{
    text-align: center;
    margin-top: 47px;
    font-size: 16px;
    color: #000000;
    min-height: 48px;
}
.stepper-footer .stepper-prev{
    line-height: 48px;
    cursor: pointer;
}
.step-many .stepper-item:before{
    content:"";
    position:absolute;
    left:10px;
    top: 12px;
    z-index:100;
    width: 21px;
    height: 21px;
    border: 1px solid #9F9F9F;
    box-sizing: border-box;
    border-radius: 6px;
}
.step-many .stepper-item:before{
    border: 1px solid #FFFFFF;
}
.step-many .stepper-item.checked:after{
    content:"\2713";
    position:absolute;
    left: 14px;
    top: 16px;
    z-index:100;
    line-height: 15px;
    font-size: 18px;
}
.stepper-wrapper .btn-pink{
    background: linear-gradient(180deg, #FF5555 0%, #FF175D 100%);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 16px;
    padding: 12px 50px;
}
.stepper-wrapper  .btn-pink:hover, .stepper-wrapper  .btn-pink:focus, .stepper-wrapper  .btn-pink:active{
    outline: 0;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FF5555 0%, #FF175D 100%);
}
.stepper-wrapper #last-step{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    padding: 2% 65px 8% 65px;
    background: #F9F9F9;
    text-align: center;
    height: 100%;
    z-index: 100;
}
.stepper-wrapper #last-step h3{
    font-size: 28px;
    font-weight: bold;
    color: #000000;
}
.stepper-wrapper .btn-mes{
    width: 186px;
    color: white;
    text-align: left;
    font-weight: bold;
    font-size: 19px;
    line-height: 19px;
    padding: 15px;
    padding-left: 70px;
    position: relative;
    margin-bottom: 15px;
    margin-left: 3px;
    margin-right: 3px;
    border: 0;
}
.stepper-wrapper .btn-mes span{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 50px;
}
.stepper-wrapper .btn-mes:hover,.stepper-wrapper .btn-mes:focus,.stepper-wrapper .btn-mes:active{
    outline: 0;
    color: #FFFFFF;
}
.stepper-wrapper .mes-green{
    background: linear-gradient(217.87deg, #71F97C 21.17%, #5DCF45 64.43%);
    border-radius: 4px;
}
.stepper-wrapper .mes-green .btn-mes-back{
    background: linear-gradient(180deg, #71F97C 0%, #5DCF45 100%);
    border-radius: 4px;
}
.stepper-wrapper .mes-green .btn-mes-icon{
    background-image: url("img/WhatsApp.png");
    background-position: center;
    background-repeat: no-repeat;

}
.stepper-wrapper .mes-green:hover,.stepper-wrapper .mes-green:focus,.stepper-wrapper .mes-green:active{
    background: linear-gradient(180deg, #58BF5E 0%, #55BE3E 100%);
}
.stepper-wrapper .mes-blue{
    background: linear-gradient(202.73deg, #37AEE2 26.17%, #1E96C8 62.58%);
    border-radius: 4px;
}
.stepper-wrapper .mes-blue .btn-mes-back{
    background: linear-gradient(180deg, #50A6DA 0%, #4396D0 100%);
    border-radius: 4px;
}
.stepper-wrapper .mes-blue .btn-mes-icon{
    background-image: url("img/Telegram_logo.png");
    background-position: center;
    background-repeat: no-repeat;
}
.stepper-wrapper .mes-blue:hover,.stepper-wrapper .mes-blue:focus,.stepper-wrapper .mes-blue:active{
    background: linear-gradient(180deg, #54ABDC 0%, #337E95 100%);
}
.stepper-wrapper .mes-violet{
    background: linear-gradient(234.66deg, #7A64EE 6.71%, #5044A5 75.79%);
    border-radius: 4px;
}
.stepper-wrapper .mes-violet .btn-mes-back{
    background: linear-gradient(180deg, #7A64EE 0%, #5044A5 100%);
    border-radius: 4px;
}
.stepper-wrapper .mes-violet .btn-mes-icon{
    background-image: url("img/viber.png");
    background-position: center;
    background-repeat: no-repeat;
}
.stepper-wrapper .mes-violet:hover,.stepper-wrapper .mes-violet:focus,.stepper-wrapper .mes-violet:active{
    background: linear-gradient(180deg, #513DBE 0%, #41368D 100%);
}
.last-step-mes-wrapper{
    width: 70%;
    margin: auto;
    text-align: left;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 54px;
    padding-bottom: 180px;
}
.last-step-mes-wrapper .stepper-progress-title-last{
    margin-bottom: 5px;
    text-align: left;
}
.last-step-mes-wrapper p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 19px;
    color: #000;
}
.last-step-mes-wrapper p.small{
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 14px;
}
.last-step-mes-wrapper-prev{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 16px;
    color: #CCCCCC;
    position: absolute;
    left: 65px;
    bottom: 45px;
    cursor: pointer;
}
.stepper-brand{
    width: 75px;
    height: 75px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
[data-name="brand"] li{
    width: 138px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.stepper-model{
    width: 75px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}
[data-name="model"] span{
    line-height: 34px;
    padding-left: 10px;
    font-size: 19px;
}
[data-name="autoService"] span{
    font-size: 19px;
}
.stepper-loader{
    position: absolute;
    background-color: #020202ab;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 100;
    display: none;
}
.lds-ripple {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 64px;
    height: 64px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
.stepper-progress-first{
    ~display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #F9F9F9;
    z-index: 1;
    padding-top: 88px;
    padding-left: 112px;
    padding-right: 67px;
}
.stepper-progress-first-title{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    line-height: 74px;
    font-size: 78px;
    color: black;
    margin-bottom: 15px;
}
.stepper-progress-first-title_sub{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 28px;
    color: black;
    margin-bottom: 24px;
}
.stepper-progress-first-left{
    float: left;
    width: 60%;
    padding-right: 30px;
}
.stepper-progress-first-right{
    float: right;
    width: 40%;
}
.stepper-progress-first-right img{
    width: 100%;
    height: auto;
}
.stepper-progress-first .btn-pink{
    box-shadow: 0px 4px 30px #56CAD8;
    padding: 17px 55px;
    font-size: 28px;
}
.last-step-thx-right-wrapper{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    left: 50%;
}
.last-step-thx-left-wrapper{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
}
.last-step-thx-back{
    height: 500px;
    max-width: 100%;
    background-image: url("img/thx_tel.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.last-step-thx-back-mes{
    background-image: url("img/thx_mes.png");
}
.last-step-thx-right-wrapper .stepper-progress-title-last{
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    font-size: 78px;
    text-align: center;
    color: #000000;
}
.last-step-thx-right-wrapper p{
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 28px;
    text-align: center;
    color: #000000;
}
#last-step .form-group{
    padding-left: 4px;
    padding-top: 10px;
    float: right;
}
#last-step input[type=checkbox]{
    transform: scale(1.5);
    margin-top: 0;
    margin-right: 5px;

}
#last-step label{
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #5F5F5F;

}
#last-step label a{
    color: black;
    font-size: 16px;
    line-height: 19px;
    color: #5F5F5F;
    text-decoration: underline;
}
#last-step .callback_window1_form input[type=text]{
    width: 100%;
    float: none;
    margin-bottom: 15px;
}
#last-step .stepper-finish{
    width: 100%;
    float: none;
}

.stepper-progress__final__view__text{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 19px;
    line-height: 22px;
    color: #000000;
    text-align: left;
    margin-bottom: 10px;
    opacity: 0.5;
}

.stepper-progress__final__view{
    width: 50%;
    height: 8px;
    background: #E3E3E3;
    border-radius: 6px;
    margin-bottom: 45px;
    opacity: 0.5;
}
.stepper-progress__final__view--green{
    background: #2CD848;
    border-radius: 6px;
    width: 95%;
    height: 8px;
}

.stepper-progress__final__view__percent{
    position: absolute;
    right: 2%;
    margin-top: -39px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 19px;
    line-height: 18px;
    text-align: center;
    color: #2CD848;
}

.stepper-finish-button--social, .stepper-finish-button--social:hover,
.stepper-finish-button--social:active, .stepper-finish-button--social:visited
{
    display: block !important;
    background: #FFFFFF;
    border: 1px solid #CBD2D9 !important;
    box-shadow: 0px 3px 0px #CBD2D9 !important;
    border-radius: 4px;
    display: block;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 48px !important;
    text-align: center;
    padding: 0px 5px;
    margin-bottom: 15px !important;
    color: #243B53;
    outline: none;
    text-decoration: none;
}

.stepper-finish-button--social--whatsapp, .stepper-finish-button--social:hover .stepper-finish-button--social--whatsapp{
    color: #25d366;
}
.stepper-finish-button--social--telegram, .stepper-finish-button--social:hover .stepper-finish-button--social--telegram{
    color: #0088CC;
}
.stepper-finish-button--social--viber, .stepper-finish-button--social:hover .stepper-finish-button--social--viber{
    color: #59267c;
}
.stepper-phone-hint{
    font-weight: bold;
    text-align: left;
    font-family: Roboto;
    font-style: normal;
    font-size: 19px;
    line-height: 22px;
    margin-bottom: 5px;
    color: #000000;
}


.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 15px;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 21px;
    width: 21px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #9F9F9F;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.stepper-finish-button-error{
    position: absolute;
    right: -65px;
    margin-top: -47px;
    display: none;
}

.stepper-finish-button-error__text{
    background: #EB0029;
    color: #FFFFFF;
    text-align:center;
    width: 180px;
    height: 36px;
    line-height: 36px;
    font-size: 13px !important;
    border-radius: 7px;
}

.stepper-finish-button-error__text:after{
    border: 8px solid transparent;
    border-top: 11px solid #EB0029;
    margin-left: 82px;
    display: block;
    width: 0;
    height: 0;
    content: "";
}

.stepper-finish-button-error__icon{
    background: #EB0029;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #FFFFFF;
    text-align:center;
    margin-left: 80px;
    margin-top: 23px;
}



@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}
@media screen and (max-width: 991px){
    .last-step-mes-wrapper{
        width: 100%;
    }
    .stepper-progress-first-title{
        line-height: 50px;
        font-size: 54px;
    }
    .stepper-progress-first{
        padding-left: 20px;
    }
}
@media screen and (max-width: 359px){
    .stepper-finish-button--social{
        font-size: 13px !important;
    }
}

@media screen and (max-width: 768px) {
    #stepper{
        padding: 43px;
    }
}

@media screen and (max-width: 767px){
    .stepper-finish-button-error{
        left: 0px;
        background: #fff;
        margin-top: -25px;
        float: left;
        max-width: 250px;
    }

    .stepper-finish-button-error__text--mobile{
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 19px;
        line-height: 22px;
        color: #EB0029;
    }

    .stepper-wrapper{
        height: 580px;
        margin-bottom: 30px;
    }
    #stepper{
        position: relative;
        top: 0;
        transform: none;
        left: auto;
        right: auto;
        padding: 15px;
        margin: 0 -15px;
        z-index: 100;
        padding-bottom: 50px;
    }
    .stepper-wrapper #last-step h3{
        text-align: left;
        font-size: 19px;
        padding-top: 0;
        margin-top: 5px;
        padding-bottom: 0;
    }
    .stepper-progress-first-btn.btn-pink{
        font-size: 22px;
    }
    .last-step-wrapper .stepper-progress-title-last{
        margin-bottom: 15px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 26px;
        line-height: 30px;
        width: auto;
        text-align: left;
    }
    .stepper-progress-title, .stepper-progress-title-last,
    .stepper-progress-title-last--two, .stepper-progress-form-wrapper{
        width: auto !important;
    }

    .stepper-progress-title-last--two{
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
    }

    .stepper-progress__final__view__text{
        font-weight: normal;
        font-size: 19px;
        line-height: 22px;
        color: #000000;
    }

    .stepper-progress__final__view{
        width: 100%;
        margin-bottom: 25px;
    }

    .stepper-finish-button--social{
        font-size: 16px;
    }

    .stepper-progress-title, .stepper-progress-title-last{
        font-size: 28px;
    }
    .stepper-progress-title-last span{
        font-weight: normal;
        font-size: 19px;
    }
    [data-name="brand"] li{
        width: 130px;
    }
    .stepper-steps-wrapper{
        ~min-height: 100%;
        min-height: 370px
    }
    .stepper-step-content{
        max-height: 370px;
        min-height: 100%;
    }
    .btn-pink{
        ~background: none;
        ~color: #00ACFF;
    }
    .btn-pink:hover, .btn-pink:focus, .btn-pink:active {
        outline: 0;
        background: none;
        color: #00ACFF;
    }
    .stepper-footer{
        background: linear-gradient(180deg, rgba(249, 249, 249, 0.76) 0%, #F9F9F9 35.91%, #F9F9F9 100%);
        position: absolute;
        bottom: 0;
        height: 48px;
        margin-top: 0;
        right: 15px;
        left: 15px;
    }
    #last-step{
        position: relative;
        top: 0;
        transform: none;
        left: auto;
        right: auto;
        margin: 0 -15px;
        padding: 15px;
        text-align: left;
    }
    #last-step h3{
        font-size: 20px;
        padding: 15px;
        padding-left: 0;
    }
    .btn-mes{
        font-size: 12px;
        width: 150px;
    }
    .stepper-progress-first-left,.stepper-progress-first-right{
        float: none;
        width: 100%;
        text-align: center;
        padding-right: 0;
    }
    .stepper-progress-first-right{
        margin-bottom: 30px;
    }
    .stepper-progress-first{
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 30px;
    }
    .stepper-progress-first-title{
        line-height: 41px;
        font-size: 43px;
    }
    .stepper-progress-first-title_sub{
        line-height: 21px;
        font-size: 19px;
    }
    .stepper-progress-first-right img{
        width: 156px;
    }
    .last-step-mes-wrapper{
        width: 100%;
        padding-left: 0;
    }
    .stepper-wrapper #last-step{
        padding: 8% 0px !important;
    }
    .last-step-thx-right-wrapper,.last-step-thx-left-wrapper{
        position: relative !important;
        top: inherit;
        transform: inherit;
        margin: auto;
        left: inherit;
    }
    .last-step-thx-right-wrapper .stepper-progress-title-last{
        font-size: 60px;
    }
    .stepper-wrapper .callback_window1_form{
        padding: 0;
        margin-left: 0;
    }
    .last-step-wrapper .visible-xs{
        text-align: left;
    }
    .stepper-wrapper .btn-mes{
        margin-bottom: 5px;
    }
    #last-step .callback_window1_form input[type=text]{
        width: 100%;
        float: none;
    }
    #last-step .stepper-finish{
        float: none;
        margin-top: 10px;
        width: 100%;
        font-size: 16px;
        line-height: 19px !important;

    }
    #last-step .form-group{
        float: left;
        width: 100%;
    }
    .last-step-thx-back{
        height: 300px;
    }
}