#vehicleMapContainer{background:url('../../assets/images/vehicle.map.jpg');max-width:100%;background-size:100% 100%!important; width:400px;height:905px;position:relative;margin:auto;}
.VehicleButton{margin-top:15px;margin-bottom:15px;border:5px solid transparent;border-radius:3px;box-sizing:border-box;text-align:center;cursor: pointer;padding:10px;display:block;-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}
    .VehicleButton > div:first-of-type{background-size:100% 100%!important;height:125px;width:90%;display:inline-block;}
.VehicleButton:hover{opacity:.7;}

.VehicleButton:active{background:#3F47CC;}
.VehicleButton:active span, .VehicleButton:focus span{opacity:1!important;background:white;color:#3F47CC;;}

.VehicleButton span{color:white;padding:1px;display:inline-block;text-transform: uppercase;padding-right:35px;padding-left:35px;font-size:20px;font-weight:500;margin:0 25px 0 25px;box-sizing:border-box;background: rgb(117,122,213);background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(3,3,3,1) 100%);}
.VehicleButton.Selected{border:2px solid #000000;-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;}
.DynamicHidden{display:none;}

#vehicleMapContainer > div:hover, #vehicleMapContainer > div.Selected{opacity:.9;background-color:red;  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}

    #vehicleMapContainer > div:active{background:white;}

  /*prevent mobile devices from highlighting untoggled areas*/


html.touch #vehicleMapContainer > div:hover{opacity:.1!important;}

html.touch #vehicleMapContainer > div.Selected{opacity:.9!important;}


#vehicleMapContainer > div{cursor:pointer;  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;background:white;border:2px solid #000000;position: absolute;opacity:.1;}
#vehicleMapContainer > div#frontLeft{width:28%;height:33%;}
#vehicleMapContainer > div#frontCenter{left:28%;width:45%;height:10%;}
#vehicleMapContainer > div#frontRight{width:28%;height:33%;left:73%}
#vehicleMapContainer > div#midLeft{width:28%;top:33%;height:44%;}
#vehicleMapContainer > div#midRight{left:73%;width:28%;top:33%;height:44%;}
#vehicleMapContainer > div#rearLeft{left:0%;width:28%;top:77%;height:23%;}
#vehicleMapContainer > div#rearCenter{left:28%;width:45%;top:85%;height:15%;}
#vehicleMapContainer > div#rearRight{left:73%;width:28%;top:77%;height:23%;}
#vehicleMapContainer > div#topCenter{left:33%;width:35%;top:45%;height:30%;}

#vehicleDamageForm .DynamicFileInputFieldGroup.Hidden{position:absolute;height:0;width:0;overflow:hidden;opacity:0;-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;box-sizing:border-box;}

#vehicleDamageForm .CustomDragDrop.Dragging, #vehicleDamageForm .DynamicFileInputFieldGroup.Dragging{box-sizing:border-box;border:5px dotted red!important;-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;}
#vehicleDamageForm .custom-file *{cursor:pointer;}

#back-to-map{position:fixed;bottom:-50px;right:5px;opacity:0;-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;}
#back-to-map.Show{opacity:1;bottom:5px;z-index: 100;}
#vehicleDamageForm input[type=checkbox]{display:none;}

@media (max-width:1200px){
  .VehicleButton > div:first-of-type{background-size:100% 100%!important;height:95px;width:85%;display:inline-block;}
}
@media (max-width:992px){
  .VehicleButton > div:first-of-type{background-size:100% 100%!important;height:60px;width:100%;display:inline-block;}
    .VehicleButton span{padding-left:10px;padding-right:10px;}
}
@media (max-width:768px){
  .VehicleButton > div:first-of-type{background-size:100% 100%!important;height:65px;width:100%;display:inline-block;}
}
@media (max-width:576px){
  .VehicleButton > div:first-of-type{background-size:100% 100%!important;height:37vw;width:80%;display:inline-block;}
  .VehicleButton span{padding-left:10px;padding-right:10px;}
}
@media (max-width:700px){
#vehicleMapContainer{height:180vw;}

}
@media (max-width:400px){

#vehicleDamageForm{overflow: hidden;}

#vehicleDamageForm .custom-file{padding-bottom:55px;}
#vehicleDamageForm .custom-file-label{padding-bottom:55px;padding-right:80px;}
#vehicleDamageForm .custom-file-label:after{padding-bottom: 55px;line-height: 2.8;}
}

@media (max-width:260px){

#vehicleDamageForm .custom-file{padding-bottom:55px;}
#vehicleDamageForm .custom-file-label{font-size:12px;padding-bottom:55px;padding-right:80px;}
#vehicleDamageForm .custom-file-label:after{padding-bottom: 55px;line-height: 2.8;}
}

input[type=checkbox].ToggledVehicleType{display: none;}

/* specific vehicle map CSS starts here

#vehicleMapContainer.truck > div#frontLeft{width:28%;height:33%;}
#vehicleMapContainer.truck > div#frontCenter{left:28%;width:45%;height:10%;}
#vehicleMapContainer.truck > div#frontRight{width:28%;height:33%;left:73%}
#vehicleMapContainer.truck > div#midLeft{width:28%;top:33%;height:44%;}
#vehicleMapContainer.truck > div#midRight{left:73%;width:28%;top:33%;height:44%;}
#vehicleMapContainer.truck > div#rearLeft{left:0%;width:28%;top:77%;height:23%;}
#vehicleMapContainer.truck > div#rearCenter{left:28%;width:45%;top:85%;height:15%;}
#vehicleMapContainer.truck > div#rearRight{left:73%;width:28%;top:77%;height:23%;}

*/