.bus-scheme-block {
    margin: 0 0 80px 0;
}

.bus-route-head {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 45px 0;
}

.bus-r-quantity {
    font-size: 14px;
    font-weight: normal;
}


.bus-scheme-holder {
    border-radius: 8px;
    width: fit-content;
    box-shadow: 0 0 5px #dcdcdc;
    padding: 20px 110px 10px 20px;
    margin: 0 auto 30px auto;
    position: relative;
}

.bus-seats-row {
    margin: 0 0 10px 0;
}

.bus-seat-description {
    display: none;
    position: absolute;
    z-index: 2;
    font-size: 12px;
    line-height: normal;
    background-color: black;
    font-weight: normal;
    color: white;
    padding: 5px;
    border-radius: 5px;
    left: -100%;
    width: 150px;
    top: -40px;
}

.bss-triangle {
    width: 11px;
    height: 9px;
    background: url(../images/seat_triganle.svg) no-repeat center center;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    bottom: -9px;
}

.bus-seat {
    border: 1px solid #e4e4e4;
    width: 50px;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-right: 10px;   
    position: relative;
}

.bus-seat:hover {
    background-color: #ffd683;
}


.bus-seat:hover .bus-seat-description {
    display: block;
}



.bs-active {
    background-color: #ffd683;
}

.bs-booked {
    background-color: #ffd6d5;
    cursor:default;
}


.bs-booked:hover {
    background-color: #ffd6d5;
}

.bs-occupied {
    background-color: #f1605d;
    color: white;
    cursor:default;
}


.bs-occupied:hover {
    background-color: #f1605d;
}


.bs-unavailible {
    background-color: #e4e4e4;
    color: #9e9e9e;
    cursor:default;
}


.bs-unavailible:hover {
    background-color: #e4e4e4;
}


.bus-seat-empty {
    width: 50px;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;   
}

.bus-exit {
    position: absolute;
    background: url(../images/bus_exit.png) no-repeat center;
    width: 66px;
    height: 127px;
    bottom: 7px;
    right: 25px;
}

.bexit-position-48 {
    right: 465px;
}

.bexit-position-50 {
    right: 500px;
}

.bus-driver {
    background: url(../images/steering_wheel.png) no-repeat center center;
    width: 55px;
    height: 55px;
    position: absolute;
    right: 30px;
    top: 50px;
}




@media (max-width:1199px) {

    .bus-scheme-holder {
        width: fit-content;
        padding: 20px 75px 10px 20px;

    }

    .bus-driver {
        right: 15px;
        top: 50px;
    }

    .bus-exit {
        right: 10px;
        bottom: 0px;
    }

    .bexit-position-48 {
        right: 400px;
    }

    .bexit-position-50 {
        right: 433px;
    }
    

    .bus-seat {
        width: 45px;
        line-height: 45px;
    }

    .bus-seat-empty {
        width: 45px;
        line-height: 45px;
    }

}



@media (max-width:991px) {

    .bus-scheme-holder {
        width: fit-content;
        padding: 10px 85px 2px 10px;
    }

    .bus-seats-row {
        margin: 0 0 7px 0;
    }


    .bus-seat {
        width: 36px;
        font-size: 16px;
        line-height: 36px;
        margin-right: 2px;
        font-size: 16px;   
    }

    .bus-seat-empty {
        font-size: 16px;
        width: 36px;
        line-height: 36px;
        margin-right: 2px;   
    }

    .bus-exit {
        position: absolute;
        background: url(../images/bus_exit.png) no-repeat center;
        background-size: 45px;
        width: 45px;
        height: 89px;
        bottom: 0px;
        right: 22px;
    }

    .bexit-position-48 {
        right: 315px;
    }

    .bexit-position-50 {
        right: 338px;
    }

    .bus-driver {
        width: 45px;
        height: 45px;
        background-size: 45px;
        right: 20px;
        top: 40px;
    }


    .bus-seat-description {

        left: -140%;
        width: 150px;
        top: -40px;
    }

}


@media (max-width:767px) {

    .bus-route-head {
        margin: 0 0 30px 0;
    }

    .bus-scheme-holder {
        width: fit-content;
        /*width: 360px;*/
        /*transform: rotate(270deg);*/
        padding: 46px 4px 2px 10px;
        display:flex;
    }

    .bus-seat, .bus-seat-empty {
        display: block;
        /*-webkit-transform: scaleY(-1);
        transform: scaleY(-1);*/
    }

    .bus-seats-row {
       display: inline-block;
       /*-webkit-transform: scaleY(-1);
       transform: scaleY(-1);*/
       display:flex;
       flex-flow: column;
       margin: 0 4px 0px 0;
    }

/* 48 seat ordering*/

    #s45{order:13;}
    #s41{order:12;}
    #s37{order:11;}
    #s33{order:10;}
    #s29{order:9;}
    #s25{order:8;}
    #s23{order:7;}
    #s21{order:6;}
    #s17{order:5;}
    #s13{order:4;}
    #s9{order:3;}
    #s5{order:2;}
    #s1{order:1;}


    #s46{order:13;}
    #s42{order:12;}
    #s38{order:11;}
    #s34{order:10;}
    #s30{order:9;}
    #s26{order:8;}
    #s24{order:7;}
    #s22{order:6;}
    #s18{order:5;}
    #s14{order:4;}
    #s10{order:3;}
    #s6{order:2;}
    #s2{order:1;}

    #s47{order:13;}
    #s43{order:12;}
    #s39{order:11;}
    #s35{order:10;}
    #s31{order:9;}
    #s27{order:8;}
    #se01{order:7;}
    #se02{order:6;}
    #s19{order:5;}
    #s15{order:4;}
    #s11{order:3;}
    #s7{order:2;}
    #s3{order:1;}

    #s48{order:13;}
    #s44{order:12;}
    #s40{order:11;}
    #s36{order:10;}
    #s32{order:9;}
    #s28{order:8;}
    #se03{order:7;}
    #se04{order:6;}
    #s20{order:5;}
    #s16{order:4;}
    #s12{order:3;}
    #s8{order:2;}
    #s4{order:1;}


/* 50 seat ordering*/

#b47{order:14;}
#b43{order:13;}
#b39{order:12;}
#b35{order:11;}
#b31{order:10;}
#b27{order:9;}
#b25{order:8;}
#b23{order:7;}
#b21{order:6;}
#b17{order:5;}
#b13{order:4;}
#b9{order:3;}
#b5{order:2;}
#b1{order:1;}


#b48{order:14;}
#b44{order:13;}
#b40{order:12;}
#b36{order:11;}
#b32{order:10;}
#b28{order:9;}
#b26{order:8;}
#b24{order:7;}
#b22{order:6;}
#b18{order:5;}
#b14{order:4;}
#b10{order:3;}
#b6{order:2;}
#b2{order:1;}

#b49{order:14;}
#b45{order:13;}
#b41{order:12;}
#b37{order:11;}
#b33{order:10;}
#b29{order:9;}
#be01{order:8;}
#be02{order:7;}
#be03{order:6;}
#b19{order:5;}
#b15{order:4;}
#b11{order:3;}
#b7{order:2;}
#b3{order:1;}

#b50{order:14;}
#b46{order:13;}
#b42{order:12;}
#b38{order:11;}
#b34{order:10;}
#b30{order:9;}
#be04{order:8;}
#be05{order:7;}
#be06{order:6;}
#b20{order:5;}
#b16{order:4;}
#b12{order:3;}
#b8{order:2;}
#b4{order:1;}



    .bus-seat {
        margin: 0 2px 6px 0;
        width: 37px;
        font-size: 16px;
        line-height: 35px;

    }

    .bus-seat-empty {
        margin: 0 2px 8px 0;
        width: 37px;
        font-size: 16px;
        line-height: 35px;
    }


    .bus-exit {
        transform: rotate(270deg); 
        top: -11px;
        background-size: 34px;
        width: 35px;
        height: 69px;
        right: 17px;
    }

    .bexit-position-48 {
        top: 266px;
    }

    .bexit-position-50 {
        top: 288px;
    }

    .bus-driver {
       transform: rotate(270deg); 
       background-size: 30px;
       width: 30px;
       height: 30px;
       top: 9px;
       right: 170px;
       z-index: 0;
    }


    .bus-seat-description {
        left: -55px;
        width: 150px;
        top: -47px;
        /*display: block;*/
        z-index: 1;
     
    }

}


/* bus legend*/

.bus-legend {
    width: fit-content;
    box-shadow: 0 0 5px #dcdcdc;
    padding: 15px 0px 15px 20px;
    margin: 0 auto 20px auto;
    border-radius: 8px;
}

.legend-text {
    font-size: 16px;
    display: inline;
    margin-right: 30px;
}

.legend-square {
    width: 17px;
    line-height: 17px;
    display: inline-block;
    border-radius: 3px;
}

.legend-chosen {background-color: #ffd683;}
.legend-booked {background-color: #ffd6d5}
.legend-occupied {background-color: #f1605d}
.legend-unavailable {background-color: #dcdcdc;}


@media (max-width:767px) {
    .bus-legend {
      width: 280px;
      padding: 10px 0px 10px 10px;
      text-align: center;
    }

    .legend-text {
        font-size: 16px;
        display: inline;
        margin-right: 10px;
    }

}