@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  
    div.modal .modal-dialog {
        margin: 30px 20px !important;
    }

    div.modal div.modal-body{
        max-height: 50vh;
        overflow-y: auto;
    }    

    body.page-project-map-tool-new-car div.createvehicle .col-md-2.column5{
        margin: 0 16px;
    }      

    body.page-project-map-tool-new-car #edit-save-wrapper {
        position: absolute;
        margin-top: 0;
        right: 0;
        bottom: 5em;
    }    

    body.page-project-map-tool-new-car label.ecl-form-label{
        min-height:40px;
    }

    #mapInfoModal .modal-dialog{
        width: 83% !important;
        max-width: 600px !important;
        right: 0 !important;
    }

    #mapInfoModal .modal-dialog .modal-body{
        max-height: none;
    }

}


@media only screen and (max-device-width: 767px){

    div.modal .modal-dialog {
        margin: 30px 20px !important;
    }

    body.page-project-map-tool-vehicles-detail .container .user_car .col-md-3.left{
        height:auto;
        margin:auto;
    }

    body.page-project-map-tool-new-car div.createvehicle div.body > div {
        border-right: none !important;
        padding:0 !important;
    }   

    body.page-project-map-tool-new-car div.createvehicle.section3 div.body div.column5,
    body.page-project-map-tool-new-car div.createvehicle div.body div.fields > div{
        border-right: none !important;
        padding:0 !important;    
        margin:0;
    }

    body.page-project-map-tool-new-car div.createvehicle.section2 div.body > div {
        padding:0 5px !important;
    }     

    body.page-project-map-tool-new-car div.createvehicle.section2 div.body button {
        padding:10px 5px;
    }        

    body.page-project-map-tool-new-car .createvehicle .head{
        padding-left: 2pc !important;
    }    

    body.page-project-map-tool-new-car #edit-save-wrapper{
        margin-bottom: 0px;
        right: 0em;
        bottom: 5em;
    }     

    body.page-project-map-tool-new-car div.slidedot{
        left: 1.5em;
    }

    body.page-project-map-tool-fuel-consumption form div.right-boundary{
        border-right:0;
    }

    body.page-project-map-tool-fuel-consumption div.show_avg_fuel{
        margin : 7% 0;
    }    

}



@media only screen and (min-device-width: 640px) and (max-device-width: 767px) and (orientation: landscape) {

    body.page-project-map-tool-vehicles-detail button.vehicle_button span.vehicle_text{
        width:91%;
    }

    div.modal div.modal-body{
        max-height: 50vh;
        overflow-y: auto;
    }    

    body.page-project-map-tool-new-car .section7 .body {
        height: 143vh;
    }   

    .modal-dialog {
        width: 83% !important;
        right: 0 !important;
        max-width: 600px !important;
    }

    #mapInfoModal .modal-dialog .modal-body{
        max-height : 225px;
    }


}

@media only screen and (max-device-width: 414px) and (orientation: portrait) {

    body.page-project-map-tool-vehicles-detail button.vehicle_button span.vehicle_text{
        width:87%;
    }

    div.modal div.modal-body{
        max-height: 70vh;
        overflow-y: auto;
    }       

    body.page-project-map-tool-new-car .section7 .body {
        height: 80vh;
    }        

    body.page-project-map-tool-fuel-consumption div.register-fuel-consumption.createvehicle div.head > span.text{
        width:70%;
    }

    body.page-project-map-tool-fuel-consumption div.register-fuel-consumption.createvehicle div.head > span.vehicle-icon{
        width:30%;
    }    

    body.page-project-map-tool-maps-routes .leaflet-routing-geocoders input{
        width:197px;
    }

    #mapInfoModal .modal-dialog {
        width: 92% !important;
        right: 0 !important;
        max-width: 600px !important;
    }


    #mapInfoModal .modal-dialog .modal-body{
        max-height : 425px;
    }

    body.page-project-map-tool-maps-routes span.percentage-full{
        padding: 38px 117px 0px;
    }


}

@media only screen and (max-device-width: 375px) and (orientation: portrait) {
 
    body.page-project-map-tool-maps-routes span.percentage-full{
        padding: 38px 99px 0px;
    }    

}