/* Обертка */

#ite_vr--wrapper {
    padding: 16px;
    border-radius: var(--r_block);
}

#ite_vr--wrapper>.text-danger {
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--error) !important;
}

#ite_vr--wrapper .ticket_promo {
    margin-bottom: 16px;
    border: 1px solid var(--main);
    color: var(--main);
    background-color: var(--white);
    border-radius: var(--r_table);
}


/* Форма */

#ite_vr {
    width: 100%;
    position: relative;
    overflow: hidden;
    color: var(--text_black);
}

#ite_vr .progress_bar {
    margin-bottom: 16px;
}

#ite_vr .progress_bar .step_name {
    padding: 8px;
    padding-left: 16px;
    font-size: var(--f_20);
    line-height: calc(var(--f_20) + 6px);
    border-radius: var(--r_table);
    color: var(--white);
    background: var(--main);
}

#ite_vr .inner_wrap>div:not(:last-child) {
    padding-bottom: 16px;
}

#ite_vr .form-group {
    vertical-align: top !important;
}

#ite_vr label {
    font-size: var(--f_18);
    line-height: calc(var(--f_18) + 5.4px);
    margin-bottom: 8px;
}

#ite_vr .row {
    margin: 0;
    display: block;
}

#ite_vr .row>* {
    padding: 0;
    width: 100%;
}

#ite_vr .form-table .form-group {
    padding-right: 0;
}

#ite_vr .form-group>label.color10,
#ite_vr .required_dot,
#ite_vr .help-block,
.color10,
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error.checkbox-inline label,
.has-error.checkbox label,
.has-error .control-label,
.has-error .form-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.radio-inline label,
.has-error.radio label {
    color: var(--error);
}

#ite_vr .form-control {
    border-radius: var(--r_dropdown);
}


/* Инпуты */

#ite_vr .radio,
#ite_vr .checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#ite_vr .radio>*,
#ite_vr .checkbox>* {
    cursor: pointer;
}

#ite_vr .checkbox input[type=checkbox],
#ite_vr .radio input[type=radio] {
    --bs-form-check-bg: var(--bs-body-bg);
    flex-shrink: 0;
    width: calc(1em + 2px);
    height: calc(1em + 2px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: initial !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--main) !important;
    border-radius: var(--r_input) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    outline: initial;
}

#ite_vr .radio input[type=radio] {
    border-radius: var(--r_circle) !important;
}

#ite_vr .checkbox input[type=checkbox]:checked,
#ite_vr .radio input[type=radio]:checked {
    background-color: var(--main) !important;
    border-color: var(--main) !important;
    background-image: var(--form_reg_checked) !important;
}

#ite_vr .checkbox input[type=checkbox]:focus,
#ite_vr .radio input[type=radio]:focus {
    border-color: var(--main);
    box-shadow: initial;
}

#ite_vr .checkbox input[type=checkbox]+label,
#ite_vr .radio input[type=radio]+label {
    font-size: var(--bs-body-font-size) !important;
    line-height: initial !important;
    margin-bottom: 0 !important;
    padding-left: 8px;
}

#ite_vr input[type=radio]:focus+.checkbox-label {
    border: initial !important;
}

#ite_vr .has-error .form-control {
    border-color: var(--main);
}

#ite_vr .fix_checkbox_reg {
    display: flex;
    align-items: center;
}

#ite_vr .fix_checkbox_reg label {
    margin-right: 8px;
}

#ite_vr .fix_checkbox_reg label a {
    color: var(--main) !important;
}


/* Поля ввода */

#ite_vr input[type="text"],
#ite_vr select {
    width: 100% !important;
    height: 38px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: var(--white);
    border: 1px solid var(--main);
    border-radius: var(--r_block) !important;
    box-shadow: initial !important;
}

#ite_vr .col-md-6.col-lg-4 {
    width: 100% !important;
}

#ite_vr .segment:not(:last-child) {
    margin-bottom: 8px;
}

#ite_vr textarea {
    border: 1px solid var(--main);
    border-radius: var(--r_input);
    outline: none !important;
    box-shadow: none !important;
}

#ite_vr .phoneCodeInput {
    display: inline-block;
    margin-right: 1%;
    width: 39%;
}

#ite_vr .phoneNumber {
    display: inline-block;
    width: 60%;
}

#ite_vr select {
    appearance: auto;
    padding: 0 8px;
}


/* Кнопки */

#ite_vr .arrows,
#ite_vr .pay_ticket,
#ite_vr .print_ticket,
#ite_vr .apply-promocode,
#ite_vr .save_ticket {
    width: max-content;
    width: 140px !important;
    border: 0;
    cursor: pointer;
    margin-right: 0;
    padding: 12px 24px;
    border-radius: var(--r_static_large);
    background-color: var(--light);
    border: 1px solid var(--white);
}

#ite_vr .arrows.prev {
    margin-right: 12px;
}

#ite_vr .arrows.next,
#ite_vr .print_ticket {
    border: 1px solid var(--main);
}

#ite_vr .arrows.send,
#ite_vr .pay_ticket,
#ite_vr .save_ticket {
    color: var(--white);
    background-color: var(--main);
    border: 1px solid var(--main);
}

#ite_vr .apply-promocode {
    /* width: 190px !important; */
    height: 38px;
    padding: 0;
    position: absolute;
    /* top: 61px; */
    right: 0;
    border: 1px solid var(--main);
}

#ite_vr .pay_ticket {
    float: right !important;
    margin-top: 20px;
}

#ite_vr .print_ticket,
#ite_vr .save_ticket {
    position: relative;
    top: 20px;
}

#ite_vr .print_ticket {
    margin-right: 12px;
}


/* Оплата */

#ite_vr .segment {
    position: relative;
}

#ite_vr h3 {
    visibility: inherit;
    font-weight: 600;
    margin-bottom: 4px;
}

#ite_vr .form-table .form-group input {
    width: calc(100% - 338px) !important;
}

#ite_vr .form-table .form-label {
    width: initial !important;
    margin-bottom: 0px;
    margin-right: 12px !important;
}

#ite_vr .reg_ticket {
    width: 100%;
    margin-top: 45px;
}


/* Информация */

#ite_vr--wrapper .ticket_info a {
    width: fit-content;
    color: var(--main);
    font-weight: 600;
}

@media screen and (max-width: 480px) {
    #ite_vr--wrapper {
        border-radius: var(--r_media);
    }
    #ite_vr .progress_bar .step_name {
        padding: 8px;
    }
    #ite_vr .progress_bar .step_name,
    #ite_vr label {
        font-size: var(--f_16) !important;
        line-height: calc(var(--f_16) + 4.8px) !important;
    }
    #ite_vr label span span {
        font-size: var(--f_14) !important;
        line-height: calc(var(--f_14) + 4.2px) !important;
    }
    #ite_vr .checkbox input[type=checkbox]+label,
    #ite_vr .radio input[type=radio]+label {
        font-size: var(--f_14) !important;
        line-height: calc(var(--f_14) + 4.2px) !important;
    }
    #ite_vr--wrapper>.text-danger {
        font-size: var(--f_12);
        line-height: calc(var(--f_12) + 3.6px);
    }
    #ite_vr .next,
    #ite_vr .prev,
    #ite_vr .send,
    #ite_vr .pay_ticket,
    #ite_vr .apply-promocode {
        padding: 4px;
        width: 100% !important;
    }
    #ite_vr .btn-toolbar {
        justify-content: end;
        flex-wrap: nowrap;
        gap: 8px;
    }
    #ite_vr .arrows.prev {
        margin-right: 0;
    }
    #ite_vr .form-group>label.color10,
    #ite_vr .required_dot,
    #ite_vr .help-block,
    .color10,
    .has-error .checkbox,
    .has-error .checkbox-inline,
    .has-error.checkbox-inline label,
    .has-error.checkbox label,
    .has-error .control-label,
    .has-error .form-label,
    .has-error .help-block,
    .has-error .radio,
    .has-error .radio-inline,
    .has-error.radio-inline label,
    .has-error.radio label {
        font-size: var(--f_12);
        line-height: calc(var(--f_12) + 3.6px);
    }
    #ite_vr .help-block {
        margin: 0;
        margin-top: 4px;
    }
    #ite_vr input[type="text"],
    #ite_vr select {
        height: 34px;
        padding-left: 12px;
        padding-right: 12px;
    }
    #ite_vr .phoneCodeInput,
    #ite_vr .phoneNumber,
    #ite_vr .phoneNumber textarea {
        width: 100% !important;
        display: block !important;
    }
    #ite_vr .phoneNumberLabel {
        display: none !important;
    }
    #ite_vr .phoneCodeInput {
        margin-bottom: 8px;
    }
    #ite_vr .form-table .form-group input {
        width: 100% !important;
        margin-top: 4px;
    }
    #ite_vr .apply-promocode {
        position: relative;
        bottom: 0;
        top: initial;
        margin-top: 8px;
    }
    #ite_vr .print_ticket,
    #ite_vr .save_ticket {
        display: inline-block;
        text-align: center;
        padding: 8px 4px;
        top: 12px;
    }
    #ite_vr .print_ticket {
        width: calc(40% - 8px) !important;
        margin-right: 8px;
    }
    #ite_vr .save_ticket {
        width: 60% !important;
    }
    #ite_vr .reg_ticket {
        margin-top: 24px;
    }
}