.hover-div:hover {
    cursor: pointer;
 }
 /* .card{
  transition: box-shadow 0.6s ease;
 }
 .card:hover{
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
 } */
 .Boxxxx{
  margin: 0 30px !important;
 }
 .UserImage{
  padding: 5px !important;
  background-color: #fff;
  border-radius: 50% !important;
 }
 .UserLogo{
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 10px !important;
  max-width: 40% ! important;
 }
 .logoImg{
  
 }
 .newCard i{
  font-size:20px;
  background-color: #fff;
 width: 40px !important;
 height: 40px !important;
 justify-content: center;
 display: flex;
 align-items: center;
 border-radius: 50% !important;
 }
 .newCard{
padding: 0 !important;
 }
 .newCard span{
color: #fff;

 }
 .newCard .O{
  background-color: rgba(0, 0, 128, 0.8) !important ;
 }
 .newCard .P{
  background-color: rgba(0, 100, 0, 0.8) !important ;
 } 
 .newCard .S{
  background-color: rgba(255, 140, 0, 0.8) !important ;
 }
  .newCard .D{
  background-color: rgba(128, 128, 0, 0.8) !important ;
 }
  .newCard .FC{
  background-color:  rgba(72, 61, 139, 0.8) !important ;
 }
  .newCard .PUC{
  background-color: rgba(139, 0, 0, 0.8) !important ;
 }
 .newCard .IE{
  background-color: rgba(0, 139, 139, 0.8) !important ;
 }
 .newCard{
  border: none !important;
 }
 .newCard .card-text{
  width: max-content !important;
  font-size: 12px !important;
 }
 .newCard .card-Title{
  font-size: 16px !important;
 }
 /* .footerCard{
  color:#fff !important;
 }
 .footerCard.O{
  background: linear-gradient(135deg, rgba(0, 0, 128, 0.8), rgba(173, 216, 230, 0.5));

 }
 .footerCard.P{
  background: linear-gradient(135deg, rgba(0, 100, 0, 0.8), rgba(144, 238, 144, 0.5));

}.footerCard.S{
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.8), rgba(255, 192, 203, 0.5));

}.footerCard.D{
  background: linear-gradient(135deg, rgba(128, 128, 0, 0.8), rgba(255, 255, 153, 0.5));

}.footerCard.F{
  background: linear-gradient(135deg, rgba(72, 61, 139, 0.8), rgba(218, 112, 214, 0.5));

}.footerCard.C{
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.8), rgba(255, 182, 193, 0.5));

}.footerCard.I{
  background: linear-gradient(135deg, rgba(0, 139, 139, 0.8), rgba(224, 255, 255, 0.5));
} */
/* .card-body{
background-size: cover !important;
background-position: center !important;
border-top-left-radius: 5px; 
border-top-right-radius: 5px;
} */
.O i{
  color:rgba(0, 0, 128, 0.8);
}
.P i{
  color:rgba(0, 100, 0, 0.8);
}
.S i{
  color:rgba(255, 140, 0, 0.8);
}
.D i{
  color:rgba(128, 128, 0, 0.8);
}
.FC i{
  color:rgba(72, 61, 139, 0.8);
}
.PUC i {
  color:rgba(139, 0, 0, 0.8);
}
.IE i{
  color:rgba(0, 139, 139, 0.8);
}
/* .card-body{
background:linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
} */
/* .Obody{
background-image: url('custom/Obg.png');
}
.Pbody{
background-image: url('custom/Pbg.png');
}
.Sbody{
background-image: url('custom/Sbg.png');
}
.Dbody{
background-image: url('custom/Dbg.png');
}
.Fbody{
background-image: url('custom/Fbg.png');
}
.Cbody{
background-image: url('custom/Cbg.png');
}
.Ibody{
background-image: url('custom/Ibg.png');
} */
/* .btn{
  background: linear-gradient(to right, #34395e, #6e75a8) !important;
  color:#fff !important;
  transition : box-shadow 0.6s ease ;
}
.btn:hover{
  box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
} */


.graphBox{
  border-radius:10px;
  padding:10px;
}
.main-sidebar .sidebar-menu li.active a{
  color: #fff !important;
  background-color: transparent !important;
}
.nav-link{
  padding: 0 !important;
}
.routeTab{
  font-size: 10px;
  /* position: absolute !important; */
  /* left: 250px; */
  /* height: 140px; */
  /* width: -webkit-fill-available; */
}
/* .routeTab i{
  font-size: 10px;
} */
/* body.sidebar-mini .routeTab{
  left: 65px;
} */



/* ---------------------------branchess------------------------------ */


.reportIcon i{
  font-size: 20px !important;
  background-color: #fff;
  border: 1px solid red !important;
  padding: 10px;
  border-radius: 5px;
  color: red;
}

.tableCard{
  border: none !important;
}
.tableCard table.dataTable{
  margin-top: 0 !important;
  width: 100%;
}
.tableCard .dataTables_scroll{
  /* border-radius: 10px !important; */

}
.dataTables_scrollHead{
  border-radius: 10px 10px 0 0 !important;
  background-color: #054A7D !important;
}
.tableCard table thead{
  /* background-color: #054A7D !important; */
  font-size: 13px !important;
}
.tableCard table thead tr th{
  color: #fff !important;
}
.tableCard .dataTables_scrollBody {
  overflow-x: hidden !important; /* Remove horizontal scrolling */
  overflow-y: auto !important; /* Enable vertical scrolling if needed */
  margin-top: 1px !important;
  background-color:  #F5F5F8 !important;
}
.tableCard table.dataTable.no-footer{
  border: none !important;
}
.tableCard tbody{
  border: none !important;
  font-size: 12px !important;
}
.tableCard table.dataTable thead th{
  border: none !important;
}
.tableCard tbody tr{
  /* background-color: red !important; */
  /* border-radius: 10px !important; */
}
.tableCard .viewButton{
  background: transparent !important;
  color: rgb(87, 10, 231) !important;
  border: none !important;
  box-shadow: none!important;
  padding: 0px 5px !important;
  font-size: 12px !important;
}
.tableCard .viewButton:hover{
  background: rgb(5, 52, 206) !important;
}
.tableCard .editButton{
  background: transparent !important;
  color: rgb(5, 206, 5) !important;
  border: none !important;
  box-shadow: none!important;
  padding: 0px 5px !important;
  font-size: 12px !important;
}
.tableCard .editButton:hover{
  background: rgb(5, 206, 5) !important;
}
.tableCard .deleteButton{
  background: transparent !important;
  color: red !important;
  border: none !important;
  box-shadow: none!important;
  padding: 0px 5px !important;
  font-size: 12px !important;
}
.tableCard .deleteButton:hover{
  background:red !important ;
  color: #fff !important;
}
.tableCard .actionButton{
  background: transparent !important;
  color: #054A7D !important;
  border: none !important;
  box-shadow: none!important;
  padding: 0px 5px !important;
  font-size: 12px !important;
}
.tableCard .actionButton:hover{
  color: #fff !important;
  background-color: #054A7D !important;
}
.tableCard div.dataTables_wrapper div.dataTables_info{
  padding-left: 5px !important;
  font-size: 10px !important;
}
.tableCard div.dataTables_wrapper div.dataTables_paginate ul.pagination{
  justify-content: center !important;
  align-items: center !important;
  font-size: 10px !important;
}
.tableCard .page-item.active .page-link{
  background-color: transparent !important;
  color: #054A7D !important;
  /* width: 10px !important; */
  /* height: 10px !important; */
  text-align: center;
  padding:0 5px !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #054A7D !important;
  
}
.tableCard .table:not(.table-sm) thead th{
background-color: transparent !important;
}
.tableCard{
  background-color: transparent !important;
}
.tableCard .card-body{
  padding: 0 !important;
}
.tableCard .customname{
  margin: 10px !important;
  align-items: center !important;
}
.tableCard .btn-group{
  /* background-color: transparent !important; */
}
.tableCard .pdfButton{
  background-color: transparent !important;
  color: red !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 5px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.tableCard .pdfButton:hover{
  background-color: red !important;
  color: #fff !important;
}
.tableCard .pdfButton i,.excelButton i{
  font-size: 20px !important;
}
.tableCard .excelButton{
  background-color: transparent !important;
  color: rgb(7, 173, 7) !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 5px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.tableCard .excelButton:hover{
  background-color: rgb(7,173,7) !important;
  color: #fff !important;
}
.tableCard .excelButton span i,.pdfButton span i{
  margin: 0 !important;
  padding: 0 !important;
}
.tableCard .dataTables_wrapper div.dataTables_filter input{
  border-radius: 10px !important;
  margin-top: 10px !important;
  border:none !important;
  background-color: #e3e2e2a0 !important;
  height: 25px  !important;
}
.tableCard .dataTables_wrapper div.dataTables_filter input:focus{
  border-color: grey !important;
}
.branches .section-header{
  margin-top: 10px !important;
}
.branches .section-header h1{
  font-size: 20px !important;
}
.addBranchBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addBranchBtn:hover{
  background: #d73016 !important;
}
.modalBranches .modal-header h5{
  font-size: 14px !important;
}
.modalBranches .modal-body p{
  font-size: 12px !important;
}
.modalBranches .closeButton{
  background-color: #054A7D !important;
  color: #fff !important;
}
.modalBranches .deleteButton{
  background-color: #DA503C !important;
  color: #fff !important;
}


/* ------------------- Add Branches ---------------------- */
.addBr{
  margin-top: 5px !important;
}
.addBrCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addBrCard .card-body{
  padding: 10px 20px !important;
}
.addBrCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addBrCard  .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED  !important;

}
.addBrCard .form-control.readOnly, .addBrCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.addBrCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addBrCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addBrCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addBrCard .map{
  height: 200px !important;
  width: 80% !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.addBrCard .gm-style-mtc-bbw .gm-style-mtc:last-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  background-color: #4c4949 !important;
  color:  #fff !important;
}
.addBrCard .gm-style-mtc-bbw .gm-style-mtc:first-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
  background-color: #4c4949 !important;
  color: #fff !important;
}

.addBrCard .map button.gm-svpc{
  margin-top: 30px !important;
}
.buttonDiv .form-group{
  margin-bottom:  0 !important;
  padding:0 20px !important;
}
.buttonDiv .cancelButton{
  background-color: #DA503C !important;
  font-size: 12px !important;
  color: #fff !important;
  padding: 0!important;
  width: 80px !important;
  height: 40px !important;
  margin-right: 5px !important;
}
.buttonDiv .saveButton{
  background-color: #054A7D !important;
  font-size: 12px !important;
  color: #fff !important;
  padding: 0!important;
  width: 80px !important;
  height: 40px !important;
  margin-left: 5px !important;
}
.addBrCard span{
  font-size: 10px !important;
}

/* ----------------------------- Edit Branches ------------------------------ */

.editBr{
  margin-top: 5px !important;
}
.editBrCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editBrCard .card-body{
  padding: 10px 20px !important;
}
.editBrCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editBrCard  .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editBrCard .form-control.readOnly, .editBrCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.editBrCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editBrCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editBrCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editBrCard .map{
  height: 200px !important;
  width: 80% !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.editBrCard .gm-style-mtc-bbw .gm-style-mtc:last-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  background-color: #4c4949 !important;
  color:  #fff !important;
}
.editBrCard .gm-style-mtc-bbw .gm-style-mtc:first-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
  background-color: #4c4949 !important;
  color: #fff !important;
}

.editBrCard .map button.gm-svpc{
  margin-top: 30px !important;
}
/* .buttonDiv .form-group{
  margin-bottom:  0 !important;
  padding:0 20px !important;
}
.buttonDiv .cancelButton{
  background-color: #DA503C !important;
  font-size: 12px !important;
  color: #fff !important;
  padding: 0!important;
  width: 80px !important;
  height: 40px !important;
  margin-right: 5px !important;
}
.buttonDiv .saveButton{
  background-color: #054A7D !important;
  font-size: 12px !important;
  color: #fff !important;
  padding: 0!important;
  width: 80px !important;
  height: 40px !important;
  margin-left: 5px !important;
} */
.editBrCard span{
  font-size: 10px !important;
}


/* ---------------------vehicleType---------------------------- */
.vehicleType .section-header{
  margin-top: 10px !important;
}
.vehicleType .section-header h1{
  font-size: 20px !important;
}
.vehicleType .addVehicleBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.vehicleType .addVehicleBtn:hover{
  background: #d73016 !important;
}

/* --------------------add vehicle type ------------------------- */

.addVehicleType{
  margin-top: 5px !important;
}

.addVeTyCard {
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addVeTyCard  .card-body{
  padding: 10px 20px !important;
}
.addVeTyCard  label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addVeTyCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.addVeTyCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addVeTyCard span{
  font-size: 10px !important;
}

/* --------------------------vehicles---------------------------------- */
.vehicles .section-header{
  margin-top: 10px !important;
}
.vehicles .section-header h1{
  font-size: 20px !important;
}
.vehicles .addVehicleBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.vehicles .addVehicleBtn:hover{
  background: #d73016 !important;
}
.vehicles .badge-success{
  color: #28a745 !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.vehicles .badge-danger{
  color: #d73016 !important;
  background: transparent !important;
  font-weight: 600 !important;
}
/* --------------------addVe------------------------------ */

.addVe{
  margin-top: 5px !important;
}
.addVeCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addVeCard .card-body{
  padding: 10px 20px !important;
}
.addVeCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addVeCard  .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.addVeCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addVeCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addVeCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addVeCard span{
  font-size: 10px !important;
}

/* ---------------------edit vehicles ----------------------------- */
.editVeh{
  margin-top: 5px !important;
}
.editVehCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editVehCard .card-body{
  padding: 10px 20px !important;
}
.editVehCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editVehCard  .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editVehCard .form-control.readOnly, .editVehCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.editVehCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editVehCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editVehCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editVehCard span{
  font-size: 10px !important;
}

/* -------------------------------routes------------------------------------- */
.routes .section-header{
  margin-top: 10px !important;
}
.routes .section-header h1{
  font-size: 20px !important;
}
.addRoutesBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addRoutesBtn:hover{
  background: #d73016 !important;
}
.routes .tableCard .pdfButton{
  background-color: transparent !important;
  color: red !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.routes .tableCard .pdfButton:hover{
  background-color: red !important;
  color: #fff !important;
}
.routes .tableCard .pdfButton i,.excelButton i{
  font-size: 20px !important;
}
.routes .tableCard .excelButton{
  background-color: transparent !important;
  color: rgb(7, 173, 7) !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.routes .tableCard .excelButton:hover{
  background-color: rgb(7,173,7) !important;
  color: #fff !important;
}
.routes .tableCard .excelButton span i,.pdfButton span i{
  margin: 0 !important;
  padding: 0 !important;
}
.routes .tableCard .editButton{
  background: transparent !important;
  color: rgb(5, 206, 5) !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.routes .tableCard .editButton:hover{
  background: rgb(5, 206, 5) !important;
  color: #fff !important;
}
.routes .tableCard .deleteButton{
  background: transparent !important;
  color: red !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.routes .tableCard .deleteButton:hover{
  background:red !important ;
  color: #fff !important;
}

/* -------------------------------Add Routes ------------------------------- */
.addRou{
  margin-top: 5px !important;
}
.addRouCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addRouCard .card-body{
  padding: 10px 20px !important;
}
.addRouCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addRouCard  .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  /* background-color: #fff !important; */
  border:  0.1px solid #ECEBED !important;

}
.addRouCard .form-control.readOnly, .addRouCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.addRouCard .form-control:focus{
  /* background: #fff !important; */
  border:  0.1px solid #ECEBED !important;
}
.addRouCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addRouCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addRouCard .map{
  height: 200px !important;
  width: 80% !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.addRouCard .gm-style-mtc-bbw .gm-style-mtc:last-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  background-color: #4c4949 !important;
  color:  #fff !important;
}
.addRouCard .gm-style-mtc-bbw .gm-style-mtc:first-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
  background-color: #4c4949 !important;
  color: #fff !important;
}

.addRouCard .map button.gm-svpc{
  margin-top: 30px !important;
}
.addRouCard span{
  font-size: 10px !important;
}
.chooseLoca a{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.chooseLoca a:hover{
  background-color: none !important;
}
.plusBtn{
  background-color: #054A7D !important;
  color: #fff !important;
  padding: 5px !important;
}
.pickDel{
  background-color: #DA503C !important;
  color: #fff !important;
}
.modalRouCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.modalRouCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.modalRouCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.modalRouCard .map{
  height: 200px !important;
  width: 80% !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.modalRouCard .gm-style-mtc-bbw .gm-style-mtc:last-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  background-color: #4c4949 !important;
  color:  #fff !important;
}
.modalRouCard .gm-style-mtc-bbw .gm-style-mtc:first-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
  background-color: #4c4949 !important;
  color: #fff !important;
}

.modalRouCard .map button.gm-svpc{
  margin-top: 30px !important;
}
.modalRouCard .error{
  font-size: 10px !important;
}

/* --------------------------------- edit routes ----------------------------------- */
.editRou{
  margin-top: 5px !important;
}
.editRouCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editRouCard .card-body{
  padding: 10px 20px !important;
}
.editRouCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editRouCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editRouCard .form-control.readOnly, .editRouCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.editRouCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editRouCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editRouCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editRouCard .map{
  height: 200px !important;
  width: 80% !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.editRouCard .gm-style-mtc-bbw .gm-style-mtc:last-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  background-color: #4c4949 !important;
  color:  #fff !important;
}
.editRouCard .gm-style-mtc-bbw .gm-style-mtc:first-of-type>button {
  font-size: 12px !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
  background-color: #4c4949 !important;
  color: #fff !important;
}

.editRouCard .map button.gm-svpc{
  margin-top: 30px !important;
}
.editRouCard span{
  font-size: 10px !important;
}
.pickEdit{
  background-color: rgb(5, 206, 5) !important;
  color: #fff !important;
}

/* ----------------------------------Drivers -------------------------------------- */
.drivers .section-header{
  margin-top: 10px !important;
}
.drivers .section-header h1{
  font-size: 20px !important;
}
.addDriverBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addDriverBtn:hover{
  background: #d73016 !important;
}
.drivers .tableCard .pdfButton{
  background-color: transparent !important;
  color: red !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.drivers .tableCard .pdfButton:hover{
  background-color: red !important;
  color: #fff !important;
}
.drivers .tableCard .pdfButton i,.excelButton i{
  font-size: 20px !important;
}
.drivers .tableCard .excelButton{
  background-color: transparent !important;
  color: rgb(7, 173, 7) !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.drivers .tableCard .excelButton:hover{
  background-color: rgb(7,173,7) !important;
  color: #fff !important;
}
.drivers .tableCard .excelButton span i,.pdfButton span i{
  margin: 0 !important;
  padding: 0 !important;
}
.drivers .tableCard .editButton{
  background: transparent !important;
  color: rgb(5, 206, 5) !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.drivers .tableCard .editButton:hover{
  background: rgb(5, 206, 5) !important;
  color: #fff !important;
}
.drivers .tableCard .deleteButton{
  background: transparent !important;
  color: red !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.drivers .tableCard .deleteButton:hover{
  background:red !important ;
  color: #fff !important;
}
.drivers .thumbsBtn{
  background: transparent !important;
  color: #054A7D !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.drivers .thumbsBtn:hover{
  background:#054A7D !important ;
  color: #fff !important;
}
.drivers .btnUp{
  /* color: #054A7D !important; */
}
.drivers .btnDown{
  color: #DA503C !important;
}
.drivers .thumbsBtn:hover .btnDown{
  color: #fff !important;
}
.drivers .badge-success{
  color: #28a745 !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.drivers .badge-danger{
  color: #d73016 !important;
  background: transparent !important;
  font-weight: 600 !important;
}


/* ----------------------------add Drivers ------------------------------ */
.addDri{
  margin-top: 5px !important;
} 
.addDriverCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addDriverCard .card-body{
  padding: 10px 20px !important;
}
.addDriverCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addDriverCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.addDriverCard .form-control.readOnly, .addDriverCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.addDriverCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addDriverCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addDriverCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addDriverCard span{
  font-size: 10px !important;
}
.addDriverCard .customRadio{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addDriverCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.addDriverCard .text-center {
  position: relative;
}
.addDriverCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.addDriverCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}
.imageSpan{
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width:  100% !important;
}

/* ----------------------------edit driver ------------------------------- */

.editDri{
  margin-top: 5px !important;
} 
.editDriverCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editDriverCard .card-body{
  padding: 10px 20px !important;
}
.editDriverCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editDriverCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editDriverCard .form-control.readOnly, .editDriverCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.editDriverCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editDriverCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editDriverCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editDriverCard span{
  font-size: 10px !important;
}
.editDriverCard .customRadio{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border: none !important;
  border:  0.1px solid #ECEBED !important;
}
.editDriverCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.editDriverCard .text-center {
  position: relative;
}
.editDriverCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.editDriverCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}

/* ---------------------------------------parents----------------------------------------- */

.parents .section-header{
  margin-top: 10px !important;
}
.parents .section-header h1{
  font-size: 20px !important;
}
.addParentBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addParentBtn:hover{
  background: #d73016 !important;
}
.parents .tableCard .pdfButton{
  background-color: transparent !important;
  color: red !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.parents .tableCard .pdfButton:hover{
  background-color: red !important;
  color: #fff !important;
}
.parents .tableCard .pdfButton i,.excelButton i{
  font-size: 20px !important;
}
.parents .tableCard .excelButton{
  background-color: transparent !important;
  color: rgb(7, 173, 7) !important;
  text-align: center;
  border:  none !important;
  box-shadow: none !important;
  margin: 0 5px !important ;
  padding:  10px 10px 10px 10px!important;
  height: max-content;
  border-radius: 5px !important;
}
.parents .tableCard .excelButton:hover{
  background-color: rgb(7,173,7) !important;
  color: #fff !important;
}
.parents .tableCard .excelButton span i,.pdfButton span i{
  margin: 0 !important;
  padding: 0 !important;
}
.parents .tableCard .editButton{
  background: transparent !important;
  color: rgb(5, 206, 5) !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.parents .tableCard .editButton:hover{
  background: rgb(5, 206, 5) !important;
  color: #fff !important;
}
.parents .tableCard .deleteButton{
  background: transparent !important;
  color: red !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.parents .tableCard .deleteButton:hover{
  background:red !important ;
  color: #fff !important;
}
.parents .thumbsBtn{
  background: transparent !important;
  color: #054A7D !important;
  border: none !important;
  box-shadow: none!important;
  padding: 5px 5px !important;
  font-size: 12px !important;
}
.parents .thumbsBtn:hover{
  background:#054A7D !important ;
  color: #fff !important;
}
.parents .btnUp{
  /* color: #054A7D !important; */
}
.parents .btnDown{
  color: #DA503C !important;
}
.parents .thumbsBtn:hover .btnDown{
  color: #fff !important;
}
.parents .badge-success{
  color: #28a745 !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.parents .badge-danger{
  color: #d73016 !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.parents .tableCard table thead{
  /* background-color: #054A7D !important; */
  font-size: 11px !important;
}

/* -------------------------------------- add parents ---------------------------------------- */

.addPar{
  margin-top: 5px !important;
}
.addParCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addParCard .card-body{
  padding: 10px 20px !important;
}
.addParCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addParCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}

.addParCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addParCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addParCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addParCard span{
  font-size: 10px ;
}
.addParCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.addParCard .text-center {
  position: relative;
}

.addParCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.addParCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}
.modalRouCard .childProfileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.modalRouCard .text-center {
  position: relative;
}

.modalRouCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.modalRouCard #edit-layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}
.modalRouCard span{
  font-size: 10px !important;
}

/* ------------------------------------------ edit Parents ------------------------------------ */
.editPar{
  margin-top: 5px !important;
}
.editParCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editParCard .card-body{
  padding: 10px 20px !important;
}
.editParCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editParCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editParCard .form-control.readOnly, .editParCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.editParCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editParCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editParCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editParCard span{
  font-size: 10px ;
}
.editParCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.editParCard .text-center {
  position: relative;
}

.editParCard .text-center::after {
  content: "\f040"; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.editParCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}
.modalRouCard .childProfileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.modalRouCard .text-center {
  position: relative;
}

.modalRouCard .text-center::after {
  content: "\f040"; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.modalRouCard #edit-layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}

/* -------------------------Add Trips--------------------------------- */
.addTrip{
  margin-top: 5px !important;
} 
.addTripCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addTripCard .card-body{
  padding: 10px 20px !important;
}
.addTripCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addTripCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.addTripCard .form-control.readOnly, .addTripCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}
.addTripCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addTripCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addTripCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addTripCard span{
  font-size: 10px !important;
}


/* ------------------------------- attender ------------------------ */
.attender .section-header{
  margin-top: 10px !important;
}
.attender .section-header h1{
  font-size: 20px !important;
}
.addAttenderBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addAttenderBtn:hover{
  background: #d73016 !important;
}
.attender .badge-success{
  color: #28a745 !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.attender  .badge-danger{
  color: #d73016 !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ------------------------------- add attender ------------------------- */
.addAtte{
  margin-top: 5px !important;
}
.addAtteCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.addAtteCard .card-body{
  padding: 10px 20px !important;
}
.addAtteCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.addAtteCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  /* background-color: #fff !important; */
  border:  0.1px solid #ECEBED !important;

}
.addAtteCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.addAtteCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.addAtteCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.addAtteCard span{
  font-size: 10px ;
}
.addAtteCard .customRadio{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border: none !important;
  border:  0.1px solid #ECEBED !important;
}
.addAtteCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.addAtteCard .text-center {
  position: relative;
}

.addAtteCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.addAtteCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}

/* ---------------------------------- edit attender ------------------------------- */
.editAtte{
  margin-top: 5px !important;
}
.editAtteCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.editAtteCard .card-body{
  padding: 10px 20px !important;
}
.editAtteCard label{
  margin-bottom: 0 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
.editAtteCard .form-control{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  border:  0.1px solid #ECEBED !important;

}
.editAtteCard .form-control.readOnly, .editAtteCard .form-control.readOnly:focus {
  background-color: #ECEBED !important;
  border: 0.1px solid #ECEBED !important;
  box-shadow: none !important;
}

.editAtteCard .form-control:focus{
  background: #fff !important;
  border:  0.1px solid #ECEBED !important;
}
.editAtteCard input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.editAtteCard input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.editAtteCard span{
  font-size: 10px ;
}
.editAtteCard .customRadio{
  padding: 10px 15px !important;
  height: fit-content !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  background-color: #ECEBED !important;
  border: none !important;
  border:  0.1px solid transparent !important;
}
.editAtteCard .profileImage{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.editAtteCard .text-center {
  position: relative;
}

.editAtteCard .text-center::after {
  content: "\f040"; /* Unicode for the pencil icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #000;
  position: absolute;
  bottom: 0px; 
  right: -10px; 
  cursor: pointer;
}
.editAtteCard #edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1; 
}


/* -----------------------------------------Fc expired--------------------------------- */

.fcexpires .section-header{
  margin-top: 10px !important;
}
.fcexpires .section-header h1{
  font-size: 20px !important;
}
.expiredMsg{
  color: #DA503C !important;
  font-weight: 600 !important;
}

/* -----------------------------------------PUC expired--------------------------------- */

.pucexpires .section-header{
  margin-top: 10px !important;
}
.pucexpires .section-header h1{
  font-size: 20px !important;
}
/* -----------------------------------------IC expired--------------------------------- */

.icexpires .section-header{
  margin-top: 10px !important;
}
.icexpires .section-header h1{
  font-size: 20px !important;
}

/* ---------------------------------------- transporter admin ------------------------------------ */
.transporter .section-header{
  margin-top: 10px !important;
}
.transporter .section-header h1{
  font-size: 20px !important;
}
.addTransporterBtn{
  background: #DA503C !important;
  color: #fff !important;
}
.addTransporterBtn:hover{
  background: #d73016 !important;
}

/* -------------------------------------------- add students ----------------------------------- */
.addTrans{
  margin-top: 5px !important;
}

.addTransCard{
    border:  none !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color: #ffffff46 !important;
  }
  .addTransCard .card-body{
    padding: 10px 20px !important;
  }
  .addTransCard label{
    margin-bottom: 0 !important;
    font-size: 12px !important;
    margin-left: 2px !important;
  }
  .addTransCard .form-control{
    padding: 10px 15px !important;
    height: fit-content !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    background-color: #fff !important;
    border:  0.1px solid #ECEBED !important;
  
  }
  .addTransCard .form-control:focus{
    background: #fff !important;
    border:  0.1px solid #ECEBED !important;
  }
  .addTransCard input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
  }
  .addTransCard input[type=number] {
      -moz-appearance: textfield; /* Firefox */
  }
  .addTransCard span{
    font-size: 10px !important;
  }
  .addTransCard .customRadio{
    padding: 10px 15px !important;
    height: fit-content !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    background-color: #fff !important;
    border:  0.1px solid #ECEBED !important;
  }
  .addTransCard .profileImage{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .addTransCard .text-center {
    position: relative;
  }
  .addTransCard .text-center::after {
    content: "\f040"; /* Unicode for the pencil icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    color: #000;
    position: absolute;
    bottom: 0px; 
    right: -10px; 
    cursor: pointer;
  }
  .addTransCard #edit-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1; 
  }
/* ----------------------------Temp Trips ---------------------------- */
.TempTrips{
  margin-top: 5px !important;
}
.TempTrips .table thead{
  border-radius: 10px !important;
  background-color: #054A7D !important;
}

/* --------------------------------onGoingTrips-------------------------------- */
.onGoingTrips{
  margin-top: 5px !important;
}


/* --------------------------------Scheduled trips -------------------------------- */
.tripList{
  margin-top: 5px !important;
}

/* --------------------------------Scheduled trips -------------------------------- */
.completedTrips{
  margin-top: 5px !important;
}


/* -----------------------------scheculing--------------------------- */
.scheduling .section-header{
  margin-top: 10px !important;
}
.scheduling .section-header h1{
  font-size: 20px !important;
}
.schedulingCard{
  border:  none !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff46 !important;
}
.schedulingCard .card-body{
  padding: 10px 20px !important;
}


.full-calendar{
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui-widget.ui-widget-content{
  width: 80% !important;
  height: 250px !important;
  background: #fff !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-title{
  color: #054A7D !important;
}
.ui-datepicker .ui-datepicker-next{
  background: #054A7D !important;
}
.ui-datepicker .ui-datepicker-prev{
  background: #054A7D !important;
}

.dataTables_processing{
bottom: 50px !important;
z-index: 9999;

}
#loader {
  margin: 100px auto;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite, heart-beat 2s linear infinite;
  background-color: #fff;
  text-align: center;
  line-height: 120px;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes heart-beat {
    55% { background-color: #fff; }
    60% { background-color: #3498db; }
    65% { background-color: #fff; }
    70% { background-color: #3498db; }
    100% { background-color: #fff; }
}