




.modal_online_rec{
    display: none;
}

.online_rec_close{
    font-size: 37px;
    text-decoration: none;
    transform: rotate(45deg);
    display: inline-block;
    position: absolute;
    /*right: 0px;*/
    /*top: -8px;*/

    right: 10px;
    top: -4px;
    color: #b10807;
    padding: 10px;
    line-height: 19px;
}


.online_rec .or_left{
    height: 440px;
}
.online_rec .or_right{
    padding-left: 20px;
    flex: 1;
}




.online_rec_header{
    color: #a7010f;
    font-size: 43px;
    background: url(img/header.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    display: inline-block;
    padding-right: 106px;
    border-bottom: 2px solid #d2d2d2;
    margin-bottom: 30px;
    font-weight: bold;
    padding-top: 20px;
}
.online_rec_header span{
    color: #000;
}
.online_rec{
    /*padding: 40px 20px;*/
    /*border: 3px solid #b10807;*/
    /* border-radius: 15px; */
    /*margin: 30px 0;*/


    /*min-width: 600px;*/
    /*min-height: 400px;*/

    display: flex;
    min-height: 570px;

}
.online_rec .or_steps_title{
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*padding-bottom: 30px;*/

    font-size: 10px;
    line-height: 14px;
}

.online_rec .or_steps_title .or_step{
    text-align: center;
    padding: 7px 0px 7px 0px;
    opacity: 0.5;
    background: #c7c3c4;
    position: relative;
    width: 127px;
    border-bottom: 1px solid #fff;
}
.online_rec .or_steps_title .or_step.completed{
    /*opacity: 1;*/
    /*position: relative;*/
    /*border-color: green;*/
    /*cursor: pointer;*/
}
.online_rec .or_steps_title .or_step.completed.sended{
    cursor: default;
}


.online_rec .or_steps_title .or_step.completed:after{
    /*content: "";*/
    /*background: url(img/done.svg?2);*/
    /*background-repeat: no-repeat;*/
    /*background-position: center left;*/
    /*position: absolute;*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*left: 50%;*/
    /*bottom: 5px;*/
    /*margin-left: -10px;*/
}
.online_rec .or_steps_title .or_step.completed:hover{
    border-color: #00669a;
}

.online_rec .or_steps_title .or_step.completed:hover:after{
    background: none;
}







.online_rec .or_steps_title .or_step.active{
    opacity: 1;
    height: 275px;
    overflow: hidden;
    background: #00669a;
}

.online_rec .or_steps_title .or_step.active .or_step_title{
    transform: rotate(-90deg);
    position: absolute;
    bottom: -27px;
    left: 87px;
    padding: 0;
    transform-origin: top left;
    width: 200px;
    font-size: 27px;
    z-index: 2;
}
.online_rec .or_steps_title .or_step.active .or_step_value{
    position: absolute;
    top: 5px;
    right: -18px;
    left: unset;
    font-size: 185px;
    line-height: 185px;
    width: auto;
    text-align: right;
    color: #007aae;
}

.online_rec .or_steps_title .or_step .or_step_title{
    font-weight: bold;
    padding-bottom: 0px;
    padding-left: 35px;
    font-size: 15px;
    text-align: left;
    color: #fff;
    min-height: 26px;
}
.online_rec .or_steps_title .or_step .or_step_value{
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 37px;
    line-height: 42px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    text-align: center;
    width: 31px;
    color: #e3e1e2;
}

.or_select_brand_model{
    background-image: url(img/step1.jpg);
    /*min-width: 557px;*/
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: 50px 9px;
}


.fancybox-wrap.online_rec_fancybox > div{
    background: #fff;
}


.online_rec .btn_block{}
.online_rec .btn_block .go_to_next{}
.online_rec .or_select_brand_model .or_select_model_block{
    /*display: none;*/

}

.online_rec .or_select_brand_model .or_select_model_block.opacity{
    opacity: 0.3;
}
.online_rec .or_select_brand_model .or_select_model_block.opacity select{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}


.online_rec .or_select_work .btn_block,
.online_rec .or_select_brand_model .btn_block,
.online_rec .or_select_work,
.online_rec .or_select_adress,
.online_rec .or_select_date_time,
.online_rec .or_select_form_send{
    display: none;
}




.online_rec .or_select_brand_model .or_select_brand_block,
.online_rec .or_select_brand_model .or_select_model_block{
    padding: 5px 0px;
}


.online_rec .or_select_brand_model .or_select_brand_block span,
.online_rec .or_select_brand_model .or_select_model_block span{
    min-width: 62px;
    display: block;
    font-size: 19px;
    font-weight: bold;
}
.online_rec .or_select_brand_model .or_select_brand_block .select_custom{
    font-size: 14px;
    background: #00669a;
    color: #fff;
    padding: 13px 22px;
    border: none;
    border-radius: 22px;
    margin-top: 10px;
    margin-bottom: 0px;
    appearance: none;
    background-image: url("img/138-2.png");
    background-repeat: no-repeat;
    background-position: right center;
    min-width: 266px;
    display: inline-block;
}

.online_rec .or_select_brand_model .or_select_brand_block .select_custom.selected{

    background-image: url(img/139.png);
    background-repeat: no-repeat;
    background-position: right center;
}



.or_select_brand .options{
    display: none;

    display: none;
    position: absolute;
    background: #fff;
    padding: 5px 0px;
    border: 1px solid;
    z-index: 3;
    min-width: 400px;
    max-width: 550px;
    overflow: hidden;

}
.or_select_brand .options .item_brand{
    padding: 0px 3px;
    cursor: pointer;
    width: 19%;
    float: left;
    height: 29px;
    text-align: center;
    display: flex
;
    align-items: center;
    background: #eee;
    margin: 0.5%;
    border-radius: 16px;
    justify-content: center;
    font-size: 14px;
}

.or_select_brand .options .item_brand:hover,
.or_select_model .options .item_brand:hover {
    background: #00669a;
    color: #fff;
}


.online_rec .or_select_brand_model .or_select_model_block  .or_select_model{}
.online_rec .or_select_brand_model .or_select_model_block  .or_select_model .select_custom{
    font-size: 14px;
    background: #00669a;
    color: #fff;
    padding: 13px 22px;
    border: none;
    border-radius: 22px;
    margin-top: 10px;
    margin-bottom: 0px;
    appearance: none;
    background-image: url(img/138-2.png);
    background-repeat: no-repeat;
    background-position: right center;
    min-width: 266px;
    display: inline-block;
}
.online_rec .or_select_brand_model .or_select_model_block  .or_select_model .select_custom.selected{

    background-image: url(img/139.png);
    background-repeat: no-repeat;
    background-position: right center;
}


.online_rec .or_select_brand_model .or_select_model_block  .or_select_model .options{
    display: none;
    position: absolute;
    background: #fff;
    padding: 5px 0px;
    border: 1px solid;
    z-index: 3;
    min-width: 400px;
    max-width: 550px;
    overflow: hidden;
}
.online_rec .or_select_brand_model .or_select_model_block  .or_select_model .options .item_model{
    padding: 3px 9px;
    cursor: pointer;
    width: 24%;
    float: left;
    height: 55px;
    text-align: center;
    display: flex;
    align-items: center;
    background: #eee;
    margin: 0.5%;
    border-radius: 16px;
    justify-content: center;
}

}
.online_rec .or_select_brand_model .or_select_model_block  .or_select_model .options .item_model:hover{
    background: #00669a;
    color:#fff;
}



.online_rec .or_select_adress .or_select_city .options,
.online_rec .or_select_adress .or_select_address .options{
    display: none;
    position: absolute;
    background: #fff;
    padding: 5px 0px;
    border: 1px solid;
    z-index: 3;

    max-width: 550px;
    overflow: hidden;
}


.online_rec .or_select_adress .or_select_city  .options .item_city1,
.online_rec .or_select_adress .or_select_address  .options .item_address{
    padding: 6px 10px;
    cursor: pointer;
    /* width: 100%; */
    /* float: left; */
    /* height: 30px; */
    text-align: left;
    /* display: flex
; */
    /* align-items: center; */
    background: #eee;
    /* margin: 0.5%; */
    border-radius: 16px;
    justify-content: center;
    line-height: 24px;
    margin: 5px 6px;
}





.online_rec .or_select_work .or_select_work_block{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 430px;
    padding-bottom: 10px;
}
.online_rec .or_select_work .or_select_work_block .or_select_work_el{
    /*background-size: 102px;*/
    background-size: auto 98px;
    width: 33%;
    height: 130px;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 96px;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
    /*opacity: 0.7;*/
    color: #00669a;
    margin-top: 5px;
}

.online_rec .or_select_work .or_select_work_block .or_select_work_el:hover{

    /*opacity: 1;*/
    box-shadow: 0px 0px 6px 0px rgba(0, 102, 154, 0.3);
}

.online_rec .or_select_work .or_select_work_block .or_select_work_el.active{
    font-weight: bold;
    /*opacity: 1;*/
    box-shadow: 0px 0px 6px 0px rgba(0, 102, 154, 0.8);
}


.online_rec .or_select_adress{


    background: url(img/select_adress.jpg);

    background-repeat: no-repeat;
    background-position: 170px 0px;
    min-height: 410px;


}
.online_rec .or_select_adress_block{}
.online_rec .or_select_adress_block .or_select_adress_el{
    cursor: pointer;
    border: 1px solid;
    border-radius: 7px;
    margin: 6px 0px;
    padding: 1px 10px;
}


.online_rec .or_select_adress_block .or_select_adress_el:hover{
    font-weight: bold;
}



.or_select_adress_block{}
.or_select_adress_block .or_select_city,
.or_select_adress_block .or_select_address{

    padding: 5px 0px;
}


.or_select_adress_block .or_select_city>span,
.or_select_adress_block .or_select_address>span{
    min-width: 62px;
    display: block;
    font-size: 19px;
    font-weight: bold;
}


/*.or_select_adress_block .or_select_city select {*/
/*    font-size: 14px;*/
/*    background: #00669a;*/
/*    color: #fff;*/
/*    padding:13px 49px 13px 22px;*/

/*    border: none;*/
/*    border-radius: 22px;*/
/*    margin-top: 10px;*/
/*    margin-bottom: 0px;*/
/*    appearance: none;*/
/*    background-image: url(img/138-2.png);*/
/*    background-repeat: no-repeat;*/
/*    background-position: right center;*/
/*    min-width: 266px;*/


/*}*/

/*.online_rec .or_select_adress_block .or_select_city select.selected{*/

/*    background-image: url(img/139.png);*/
/*    background-repeat: no-repeat;*/
/*    background-position: right center;*/
/*}*/


.or_select_adress_block .or_select_address .select_city{
    display: none;
}




.or_select_adress_block .or_select_city .select_custom,
.or_select_adress_block .or_select_address .select_custom {
    font-size: 14px;
    background: #00669a;
    color: #fff;
    padding:13px 49px 13px 22px;

    border: none;
    border-radius: 22px;
    margin-top: 10px;
    margin-bottom: 0px;
    appearance: none;
    background-image: url(img/138-2.png);
    background-repeat: no-repeat;
    background-position: right center;
    min-width: 266px;
    display: inline-block;

}

.or_select_adress_block .or_select_city .select_custom.selected,
.or_select_adress_block .or_select_address .select_custom.selected{


    background-image: url(img/139.png);
    background-repeat: no-repeat;
    background-position: right center;
}


.online_rec .or_select_adress .or_select_city  .options .item_city1:hover,
.online_rec .or_select_adress .or_select_address  .options .item_address:hover{
    background: #00669a;
    color:#fff;
}


.select_city1 .options,
.select_city .options{
    display: none;
}




.online_rec .or_select_adress_block{}



.innerpage .content    table.ui-datepicker-calendar{
    margin: 0;
}
.innerpage .content    table.ui-datepicker-calendar td{
    padding: 1px 1px;
}

.or_select_date_time .ui-datepicker {
    width: 200px; /*what ever width you want*/
}



.or_select_date_time .or_select_date_time_block{

    background: url(img/select_time.jpg);
    /*min-width: 500px;*/
    min-height: 261px;
    background-repeat: no-repeat;
    background-position: 167px 0px;
}
.or_select_date_time .or_select_date{}
.or_select_date_time .or_select_time{
    /*display: none;*/
    width: 100%;
    padding-top: 15px;
}
.or_select_date_time .or_select_time .or_select_time_item{
    float: left;
    width: 93px;
    text-align: center;

    border-radius: 23px;
    line-height: 42px;
    margin: 0px 4px 8px;

    color: #fff;
}
.or_select_date_time .or_select_time .or_select_time_item:nth-child(4n+1){
    margin-left: 0;
    clear: left;
}



.or_select_date_time .or_select_time .or_select_time_item.real_time{
    cursor: pointer;
    background: #006599;
}

.or_select_date_time .or_select_time .or_select_time_item.real_time.active{
    background-image: url(img/139.png);
    background-repeat: no-repeat;
    background-position: right center;
    text-align: left;
    padding-left: 9px;
}




.or_select_date_time .or_select_time .or_select_time_item.real_time:hover{
    /*font-weight: bold;*/
}



.or_select_date_time .or_select_time .or_select_time_item.demo_time{
    background: #c7c3c3;
}



.or_select_date_time .or_btn_prev_next{
    clear:left;
    padding-top: 20px;
}




.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover{

}





.or_select_date_time{
    /*display: block !important;*/
}


.or_select_form_send{
    background: url(img/send_form.jpg);
    background-position: 79px 0px;
    background-repeat: no-repeat;
}


.or_select_form_send input[readonly]{
    color: #bbb;
}

.or_select_form_send input[type="text"]{
    width: 100%;
}



.online_rec .bf{}
.online_rec .bf .bf_item{
    padding-bottom: 3px;
    padding-top: 8px;
}
.online_rec .bf .bf_item .bf_title{
    font-size: 19px;
    padding-bottom: 10px;
    font-weight: bold;
}
.online_rec .bf .bf_item input{
    border: none;
    background: #00669a;
    border-radius: 20px;
    line-height: 37px;
    width: auto;
    min-width: 250px;
    box-shadow: 0px 1px 1px #4791b9;
    color: #fff;
    padding: 0 17px;
}

.online_rec .bf .bf_item input::placeholder{
    color: #ddd;
}


.online_rec .bf .bf_error{
    padding-bottom: 20px;
    color: red;
    font-weight: bold;
    padding-top: 10px;
}
.online_rec .bf .submit{
    padding: 9px 20px;
    background: #b10706;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    border-radius: 20px;
    font-size: 18px;
    text-transform: uppercase;


    line-height: 21px;
    font-weight: bold;
}


.online_rec .finish_step{
     display: none;
    padding: 5px 0 45px;
    background-image: url(img/finish2.jpg);
    background-repeat: no-repeat;
    /*background-position: left bottom;*/
    background-position: 303px 0px;
    font-size: 19px;
    font-weight: bold;
    /*min-width: 303px;*/
    height: 386px;
}
.online_rec .finish_step .finish_step_in {
    background-image: url(img/139.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 57px;

}





.or_btn_prev_next{}

.or_select_brand_model .or_btn_prev_next{
    padding-top: 166px;
}

.or_btn_prev_next_title{
    padding: 13px 0 21px 0;
    font-size: 19px;
    font-weight: bold;
}
.or_btn_prev_next_btn_bl{
    display: flex;
    gap: 15px;
}


.or_btn_prev_next_prev,
.or_btn_prev_next_next{
    width: 122px;
    text-align: center;

    background: #d1cfcf;
    color: #fff;
    /* padding: 8px 0px; */
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    border-radius: 20px;
    line-height: 40px;
}

.or_btn_prev_next_prev.active,
.or_btn_prev_next_next.active{
    background: #b10807;
    cursor: pointer;
}



.or_select_adress_maps{
    padding-top: 20px;
    padding-bottom: 20px;
}

.or_baloon_btn{
    background: #b10807;
    cursor: pointer;
    display: block;
    padding: 7px 0px;
    color: #fff;
    font-weight: bold;
    border-radius: 16px;
    margin: 0 auto;
    width: 155px;
    text-align: center;
    margin-top: 14px;
}



.or_btn_prev_next .or_steps{
    padding-bottom: 10px;
    line-height: 21px;
}

.or_steps_title_content{
    font-size: 19px;
    font-weight: bold;
    padding-bottom: 10px;

}



.or_steps_1,
.or_steps_2,
.or_steps_3,
.or_steps_4{
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    color: #00669a;
}



.or_steps_1:after,
.or_steps_2:after,
.or_steps_3:after {
    background-image: url(img/str.svg);
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    padding-left: 10px;
    margin-left: 7px;
    margin-right: 4px;

}




.or_select_work         .or_steps_1:after{display: none;}
.or_select_adress       .or_steps_2:after{display: none;}
.or_select_date_time    .or_steps_3:after{display: none;}
.or_steps_br .or_steps_1:after, .or_steps_br .or_steps_2:after, .or_steps_br .or_steps_3:after{display: none;}

.or_steps_br .or_steps_1,
.or_steps_br .or_steps_2,
.or_steps_br .or_steps_3,
.or_steps_br .or_steps_4{


}

.or_steps_1.finish,
.or_steps_2.finish,
.or_steps_3.finish,
.or_steps_4.finish{
    cursor: default;
    text-decoration: none;
    color: #000;
}


.online_rec_fancybox .fancybox-inner{
    min-height: 580px;
}



.or_steps_br .or_steps_name,
.or_steps_br .or_steps_phone,
.or_steps_br .or_steps_email{
    display: inline-block;
}

.finish_step .or_steps{
    /*background-color: rgba(255, 255, 255, 0.8);*/
    padding: 20px 0;
    line-height: 21px;
    font-size: 17px;
    font-weight: normal;
    max-width: 300px;
}






@media screen and (max-width: 940px) {


    .online_rec_header{

        font-size: 29px;

        padding-right: 69px;

        margin-bottom: 30px;

        padding-top: 9px;
        margin-left: 15px;
    }


    .online_rec{
        padding: 0;
    }
    .fancybox-wrap.online_rec_fancybox > div{
        padding: 0 !important;
    }
    .online_rec .or_steps_title .or_step{
        width: 65px;
    }
    .online_rec .or_steps_title .or_step .or_step_title{
        display: none;
    }
    .online_rec .or_steps_title .or_step.active .or_step_title{
        left: 27px;
        display: block;
    }
    .online_rec .or_steps_title .or_step .or_step_value{
        position: relative;
        width: 100%;
        line-height: 28px;
        left: unset;
    }
    .online_rec .or_select_brand_model .or_select_brand_block .or_select_brand .select_custom,
    .online_rec .or_select_brand_model .or_select_model_block .or_select_model .select_custom{
        min-width: 255px;
    }

    .or_select_brand_model{
        background-size: 300px;
        background-position: -2px 157px;
    }


    .online_rec .or_select_brand_model .or_select_model_block .or_select_model .options {
        min-width: 260px;
        margin-right: 7px;
    }
    .online_rec .or_select_brand_model .or_select_model_block .or_select_model .options .item_model,
    .or_select_brand .options .item_brand{

        /*font-size: 14px;*/
        font-size: 13px;
        height: 36px;
        width: 32%;
        padding: 0px 2px;

    }


    .online_rec .or_select_work .or_select_work_block{
        width: auto;
    }
    .online_rec .or_select_work .or_select_work_block .or_select_work_el{
        /*width: 50%;*/
    }


    .or_select_adress{
        background-position: 97px 418px;
    }





    .or_select_date_time .or_select_time .or_select_time_item:nth-child(4n+1) {
        clear: unset;
        margin: 0px 4px 8px;
    }
    .or_select_date_time .or_select_time .or_select_time_item:nth-child(3n+1) {
        margin-left: 0px;
    }

    .or_select_date_time .or_select_time .or_select_time_item{
        width: 86px;
    }

    .or_select_date_time .or_select_time .or_select_time_item.real_time.active{

        padding-left: 6px;
    }
    .or_select_date .ui-datepicker-inline{
        margin: 0 auto;
    }

    .or_select_date_time .or_select_date_time_block{
        background: none;
    }
    .online_rec .or_select_date_time {
        background: url(img/select_time.jpg);

        min-height: 261px;
        background-repeat: no-repeat;
        background-position:  0px 208px;
    }
    .online_rec .or_select_work .or_select_work_block .or_select_work_el {
        /*background-size: 86px;*/
        background-size: 73px;
        height: 120px;
        padding-top: 74px;
    }

    .or_select_adress_maps #map{
        max-width: 270px;
        width: 270px !important;
        /*overflow: hidden;*/
    }


    .or_btn_prev_next_prev, .or_btn_prev_next_next{
        width: 100px;
    }
    .online_rec .bf .submit{
        padding: 9px 14px;
    }

    .online_rec_close{
        right: 10px;
        top: -3px;

    }


    .online_rec .or_right{
        padding-top: 10px;
        padding-bottom: 10px;
    }



    .online_rec_fancybox .fancybox-inner{
        min-height: 620px;
        width: 100% !important;
    }



    .online_rec .finish_step{
        background-position: 38px 314px;
        min-height: 100%;
        background-size: 200px;
    }



    .or_select_brand .options{
        max-width: 100%;
        min-width: unset;
        margin-right: 7px;
    }
    .or_select_brand .options .item_brand{
        width: 32%;
    }

    .online_rec .or_select_adress .or_select_address .options{
        margin-right: 7px;
    }





    .online_rec_fancybox{
        left: 5px !important;
        right: 5px !important;
        width: auto !important;

    }


    /*Работа с разными фонами и тем что текст не читается */
    .or_btn_prev_next_title{

        text-shadow: -1px -1px 1px #fff;
    }
}
