@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


body {
  background: #e1e1e1;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.dash {
  position: relative;
  padding:25px 10px 10px 10px !important;
  width: 100%;
  max-width: 100%;
  font-size: var(--font-size-smi);
  color: var(--color-white);
  background: #e1e1e1;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/*.dash { width: 1200px;}*/


@media only screen and (min-width: 1200px) and (max-width: 1200px) {

  .dash {
    width: 100%;
  }

}




.div39,
.total3 {
  top: 0;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 32px;
  height: 11px;
}

.div34,
.no-data {
  position: absolute;
  top: 1px;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 56px;
  height: 9px;
}

.div34 {
  top: 0;
  left: 318px;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-lightslategray-100);
  width: 15px;
  height: 10px;
}

.stopped1 {
  position: absolute;
  top: 270px;
  left: 8px;
  width: 410px;
  height: 38px;
}

.stopped1 {
  top: 0;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 54px;
  height: 14px;
}

.idle2 {
  position: absolute;
  top: 341px;
  left: 8px;
  width: 412px;
  height: 38px;
}

.idle2 {
  top: 0;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 24px;
  height: 11px;
}


.inactive1 {
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 53px;
  height: 11px;
}










/* Fleet Status CSS */

.fleetstatus {
  height: 595px;
  padding: 16px;
  border-radius: var(--br-7xs);
  background-color: var(--color-white);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  cursor: pointer;
  color: var(--color-darkslategray-100);
}

.fleetstatus-head {
  font-size: var(--font-size-lg);
  color: var(--color-gray-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin: 0 0 20px 0;
}

.fleetstatus-head span:first-child {
  font-weight: 600;
}

.opt-icon16 {
  width: 19px;
  height: 19px;
  overflow: hidden;
}

.fleetstatus-progress-head {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px 0;
}

.total {
  position: relative;
}

.running {
  position: relative;
}

.stopped {
  position: relative;
}

.idle {}

.inactive {
  position: relative;
}

.nodata {
  position: relative;
}

.advanced-dashboard-wrapper .total,
.advanced-dashboard-wrapper .running,
.advanced-dashboard-wrapper .stopped,
.advanced-dashboard-wrapper .idle,
.advanced-dashboard-wrapper .inactive,
.nodata {
  margin: 15px 0 35px 0 !important;
}

.progress1,
.progress2,
.progress3,
.progress4,
.progress5,
.progress6 {
  border-radius: var(--br-xl);
  background-color: var(--color-whitesmoke-100);
  width: 100%;
  height: 22px;
}

.divprogress-bar1,
.divprogress-bar2,
.divprogress-bar3,
.divprogress-bar4,
.divprogress-bar5,
.divprogress-bar6 {
  height: 21px;
  border-radius: 30px;
  width: 100%;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
}

:root {
  --change2: 0%;
  --change3: 0%;
  --change4: 0%;
  --change5: 0%;
  --change6: 0%;

  --changeMS1: 0%;
  --changeMS2: 0%;
  --changeMS3: 0%;
  --changeMS4: 0%;
  --changeMS5: 0%;
  --changeMS6: 0%;
  --changeMS7: 0%;
  --changeMS8: 0%;
  --changeMS9: 0%;
  --changeMS10: 0%;
  --changeMS11: 0%;
  --changeMS12: 0%;
}

.progress-moved .divprogress-bar1 {
  width: 100%;
  background-color: #159895;
  animation: progressAnimation1 6s;
}

@keyframes progressAnimation1 {
  0% {
    width: 0%;
    background-color: #159895;
  }

  100% {
    width: 100%;
    background-color: #159895;
  }
}

.progress-moved .divprogress-bar2 {
  width: var(--change2);
  background-color: #377D01;
  animation: progressAnimation2 6s;
}

@keyframes progressAnimation2 {
  0% {
    width: 0%;
    background-color: #377D01;
  }

  100% {
    width: var(--change2);
    background-color: #377D01;
  }
}

.progress-moved .divprogress-bar3 {
  width: var(--change3);
  background-color: #981515;
  animation: progressAnimation3 6s;
}

@keyframes progressAnimation3 {
  0% {
    width: 0%;
    background-color: #981515;
  }

  100% {
    width: var(--change3);
    background-color: #981515;
  }
}

.progress-moved .divprogress-bar4 {
  width: var(--change4);
  background-color: #988315;
  animation: progressAnimation4 6s;
}

@keyframes progressAnimation4 {
  0% {
    width: 0%;
    background-color: #988315;
  }

  100% {
    width: var(--change4);
    background-color: #988315;
  }
}

.progress-moved .divprogress-bar5 {
  width: var(--change5);
  background-color: #939393;
  animation: progressAnimation5 6s;
}

@keyframes progressAnimation5 {
  0% {
    width: 0%;
    background-color: #939393;
  }

  100% {
    width: var(--change5);
    background-color: #939393;
  }
}

.progress-moved .divprogress-bar6 {
  width: var(--change6);
  background-color: #333235;
  animation: progressAnimation6 6s;
}

@keyframes progressAnimation6 {
  0% {
    width: 0%;
    background-color: #333235;
  }

  100% {
    width: var(--change6);
    background-color: #333235;
  }
}


/* Max Speed CSS */

.maxspeed {
  height: 585px !important;
  padding: 16px;
  margin: 20px 0 0 0 !important;
  border-radius: var(--br-7xs);
  background-color: var(--color-white);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100) !important;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--color-darkslategray-100);
  top: 610px !important;
}

.maxspeed-avgditance {
  text-align: right;
}

.maxspeed-total-fleet {
  text-align: right;
}

.maxspeed-data {
  background: url("../images/Vertical-Lines.png") bottom left;
  background-repeat: no-repeat;
  display: flex;
  padding: 0 0 0 10px;
  position: relative;
}




/* Right Alerts Boxes CSS */

.alerts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.alerts .card {
  background: transparent;
  border: 0px none;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: block;
  color: #ffffff;
}

.alerts .card .card-img {
  width: 76px;
}

.alerts .card .card-img-overlay {
  display: flex;
  padding: 10px;
}

.alerts .card .card-leftdata {
  width: 50%;
  display: flex;
  align-items: end;
}

.alerts .card .card-leftdata h5 {
  font-size: 18px;
  margin: 0;
}

.alerts .card .card-rightdata {
  text-align: right;
  width: 50%;
}

.alerts .card .card-rightdata h2 {
  font-size: 30px;
  font-weight: 700;
}

.alerts .card .card-rightdata h2 span {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.alerts .card .card-rightdata p {
  margin: 0 0 8px 0;
}

.alerts .card .card-rightdata p span {
  display: block;
}






























.div39,
.total3 {
  position: absolute;
  top: 126px;
  left: 8px;
  width: 417px;
  height: 41px;
}







/* Alerts CSS */
.acceleration1,
.alerts1,
.div25,
.vehicles {
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.vehicles {
  line-height: 15.6px;
  font-weight: 600;
  color: var(--color-gainsboro-200);
  width: 62px;
  height: 10px;
}

.acceleration1,
.alerts1,
.div25 {
  font-size: var(--font-size-18xl);
  line-height: 20.4px;
  font-weight: 800;
  width: 45px;
  height: 29px;
}

.acceleration1,
.alerts1 {
  font-size: var(--font-size-smi);
  line-height: 15.6px;
  font-weight: 600;
  width: 40px;
  height: 11px;
}

.acceleration1 {
  font-size: var(--font-size-base);
  line-height: 20.4px;
  width: 108px;
  height: 19px;
}

.acceleration-icon {
  width: 52px;
  height: 48px;
  object-fit: cover;
}

.opt-icon8 {
  left: calc(50% + 62px);
  width: 19px;
  height: 19px;
}

.acceleration {
  border-radius: var(--br-7xs);
  background-color: var(--color-darkolivegreen);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.alerts2,
.div26,
.turning1,
.vehicles1 {
  letter-spacing: 0.5px;
  line-height: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.vehicles1 {
  color: var(--color-gainsboro-200);
  width: 62px;
  height: 10px;
}

.alerts2,
.div26,
.turning1 {
  font-size: var(--font-size-smi);
  width: 40px;
  height: 11px;
}

.div26,
.turning1 {
  font-size: var(--font-size-18xl);
  line-height: 20.4px;
  font-weight: 800;
  width: 45px;
  height: 29px;
}

.turning1 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  width: 69px;
  height: 19px;
}

.arrow-angle-turning-to-right {
  width: 40px;
  height: 41px;
  object-fit: cover;
}

.turning {
  border-radius: var(--br-7xs);
  background-color: var(--color-steelblue);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.harsh-breaking,
.vehicles2 {
  letter-spacing: 0.5px;
  font-weight: 600;
}

.vehicles2 {
  line-height: 15.6px;
  color: var(--color-gainsboro-200);
  display: flex;
  align-items: center;
  width: 62px;
  height: 10px;
}

.harsh-breaking {
  font-size: var(--font-size-base);
  line-height: 17px;
}

.break-icon {
  width: 53px;
  height: 59px;
  object-fit: cover;
}

.harshbreaking {
  border-radius: var(--br-7xs);
  background-color: var(--color-sienna);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.alerts4,
.vehicles3 {
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.vehicles3 {
  letter-spacing: 0.5px;
  color: var(--color-gainsboro-200);
  width: 62px;
  height: 10px;
}

.alerts4 {
  font-size: var(--font-size-smi);
  width: 40px;
  height: 11px;
}

.alerts-triggered,
.alerts4,
.div28 {
  letter-spacing: 0.5px;
}

.div28 {
  font-size: var(--font-size-18xl);
  line-height: 20.4px;
  font-weight: 800;
  display: flex;
  align-items: center;
  width: 45px;
  height: 29px;
}

.alerts-triggered {
  font-size: var(--font-size-base);
  line-height: 17px;
  font-weight: 600;
}

.alert-1-icon {
  width: 58px;
  height: 48px;
  object-fit: cover;
}

.opt-icon11 {
  left: calc(50% + 62px);
  width: 19px;
  height: 19px;
}

.alertstriggered {
  border-radius: var(--br-7xs);
  background-color: var(--color-lightslategray-200);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.disconnected,
.vehicles4 {
  line-height: 15.6px;
  font-weight: 600;
}

.vehicles4 {
  font-size: var(--font-size-4xs);
  letter-spacing: 0.5px;
  color: var(--color-gainsboro-200);
  display: flex;
  align-items: center;
  width: 62px;
  height: 10px;
}

.disconnected {
  width: 73px;
  height: 11px;
}

.connected,
.disconnected,
.div29,
.div30,
.power1 {
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.div29 {
  font-size: var(--font-size-9xl);
  line-height: 20.4px;
  font-weight: 800;
  width: 35px;
  height: 29px;
}

.connected,
.div30,
.power1 {
  line-height: 15.6px;
  font-weight: 600;
  width: 56px;
  height: 11px;
}

.div30,
.power1 {
  font-size: var(--font-size-9xl);
  line-height: 20.4px;
  font-weight: 800;
  width: 35px;
  height: 27px;
}

.power1 {
  font-size: var(--font-size-base);
  font-weight: 600;
  width: 56px;
  height: 17px;
}

.power-1-icon {
  width: 63px;
  height: 63px;
  object-fit: cover;
}

.opt-icon12 {
  left: calc(50% + 61px);
  width: 19px;
  height: 19px;
}

.power {
  border-radius: var(--br-7xs);
  background-color: var(--color-slategray);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
  font-size: var(--font-size-2xs);
}

.alerts6,
.outside-geofence,
.vehicles5 {
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.vehicles5 {
  color: var(--color-gainsboro-200);
  width: 62px;
  height: 10px;
}

.alerts6,
.outside-geofence {
  font-size: var(--font-size-smi);
  width: 40px;
  height: 11px;
}

.outside-geofence {
  font-size: var(--font-size-base);
  line-height: 17px;
  width: 78px;
  height: 40px;
}

.outside-map-1-icon {
  width: 111px;
  height: 71px;
  object-fit: cover;
}

.opt-icon13 {
  left: calc(50% + 62.5px);
  width: 19px;
  height: 19px;
}

.outsidegeofence {
  border-radius: var(--br-7xs);
  background-color: var(--color-gray-600);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.vehicles6 {
  line-height: 15.6px;
  color: var(--color-gainsboro-200);
  display: flex;
  align-items: center;
  width: 62px;
  height: 10px;
}

.alerts7,
.inside-geofence,
.vehicles6 {
  letter-spacing: 0.5px;
  font-weight: 600;
}

.alerts7 {
  font-size: var(--font-size-smi);
  line-height: 15.6px;
  display: flex;
  align-items: center;
  width: 40px;
  height: 11px;
}

.inside-geofence {
  font-size: var(--font-size-base);
  line-height: 17px;
}

.inside-map-1-icon {
  width: 63px;
  height: 100px;
  object-fit: cover;
}

.opt-icon14 {
  left: calc(50% + 60.5px);
  width: 19px;
  height: 19px;
}

.insidegeofence {
  border-radius: var(--br-7xs);
  background-color: var(--color-darkslateblue-200);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
}

.alerts8,
.div33,
.vehicles7 {
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.vehicles7 {
  color: var(--color-gainsboro-200);
  width: 61px;
  height: 8px;
}

.alerts8,
.div33 {
  font-size: var(--font-size-smi);
  width: 41px;
  height: 11px;
}

.div33 {
  font-size: var(--font-size-18xl);
  line-height: 7px;
  font-weight: 800;
  width: 45px;
  height: 34px;
}

.opt-icon15,
.overspeed1 {
  height: 19px;
}

.overspeed1 {
  font-size: var(--font-size-base);
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 93px;
}

.opt-icon15 {
  left: calc(50% + 62px);
  width: 19px;
}

.max-speed-103kmh-container {
  font-size: 8px;
  letter-spacing: 0.5px;
  line-height: 9px;
  font-weight: 600;
  text-align: right;
}

.overspeed {
  border-radius: var(--br-7xs);
  background-color: var(--color-salmon);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 170px;
  width: calc(25% - 12px);
  margin: 0 0 20px 0;
}


.high-speed-1-icon {
  width: 75px;
  height: 75px;
  object-fit: cover;
}


/* Fleet Idle CSS  */
.fleetidle {
  width: 50%;
}

.parkpetrol {
  display: flex;
  margin: 20px 0 0 0;
}

.park {
  display: flex;
  "

}

.fuel-waste {
  display: flex;
  "

}

.idleinfo {
  display: flex;
  margin: 20px 0 0 0;
}

.generally-an-idling {
  font-weight: 600;
  color: var(--color-darkslategray-100);
}

.note-generally-an-container {
  letter-spacing: 0.5px;
  line-height: 15.6px;
  align-items: center;
  margin: 8px 0 0 0;
}

/*.liters {
  font-weight: 600;
  line-height: 60px;
}*/
.liters {
  font-weight: 600;
  margin: 0 0 0 12px;
}

.div23,
.fuel-icon {}

.div23 {
  font-size: var(--font-size-18xl);
  letter-spacing: 0.5px;
  font-weight: 800;
  align-items: center;
  margin-left: 10px;
}

.fuel-icon {
  left: 0;
  width: 40px;
  height: 40px;
}

.approx-fuel-wastage {
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  color: var(--color-darkslategray-100);
  display: flex;
  align-items: center;
  width: 185.67px;
  height: 18px;
}

.petrol {
  color: var(--color-firebrick);
  width: 50%;
}

/*.hours3 {
  letter-spacing: 0.5px;
  line-height: 60px;
  font-weight: 600;
  align-items: center;
  color: #ce9500;
}*/

.hours3 {
  letter-spacing: 0.5px;
  font-weight: 600;
  align-items: center;
  color: #ce9500;
  margin: 0 0 0 12px;
}

.div24,
.parking-icon {
  height: 45px;
 /* width: 45px;*/
}

.div24 {
  font-size: var(--font-size-18xl);
  letter-spacing: 0.5px;
  font-weight: 800;
  align-items: center;
  color: #ce9500;
  margin-left: 10px;
}

.parking-icon {}

.total-fleet-idle {
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  color: var(--color-darkslategray-100);
  align-items: center;
}

.fleet-idle1 {
  top: 71px;
  left: 10px;
  height: 56px;
  color: var(--color-goldenrod-100);
}

.fleet-idle1 {
  top: 11px;
  font-size: var(--font-size-lg);
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 600;
  color: var(--color-gray-400);
  display: flex;
  align-items: center;
  height: 14px;
}

.opt-icon7 {
  top: calc(50% - 100px);
  left: 335px;
  width: 17px;
  height: 17px;
  overflow: hidden;
}

.fleet-idle {
  top: 290px;
  left: 414px;
  width: 49%;
  margin: 0 20px 0 0px !important;
  height: 218px;
  color: var(--color-darkslategray-300);
  background-color: #ffff;
  border-radius: 6px;
  padding: 20px;
}

/* Job Information CSS */

.jobinformation {
  display: flex;
  margin: -20px 0 0 0;
}

.yellow {
  width: 35%;
  padding: 0px 2%;
}

.red {
  width: 35%;
  padding: 0px 2%;
}

.green {
  width: 35%;
  padding: 0px 2%;
}

.finished-1-icon {
  top: 0;
  left: 0;
  width: 91px;
  height: 103px;
  object-fit: cover;
}


.div20 {
  top: 34px;
  left: 24px;
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 800;
  display: flex;
  align-items: center;
  width: 45px;
  height: 37px;
}

@keyframes green {
  0% {
    --percentage: 0;
  }

  100% {
    --percentage: var(--value);
  }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="green"] {
  --percentage: var(--value);
  --primary: #027200;
  --secondary: #adf;
  --size: 90px;
  animation: progress 6s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="green"]::before {
  content: "";
  width: 90px;
  height: 90px;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="green"]::after {
  position: absolute;
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: calc(var(--size) / 5);
  color: var(--primary);
}

.canceled-1-icon {
  top: 0;
  left: 0;
  width: 89.22px;
  height: 96.73px;
  object-fit: cover;
}

.canceled-1-icon,
.div21,
.red {}

.div21 {
  top: 31.31px;
  left: 23.3px;
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 800;
  display: flex;
  align-items: center;
  width: 45px;
  height: 34px;
}

@keyframes red {
  0% {
    --percentage: 0;
  }

  100% {
    --percentage: var(--value);
  }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="red"] {
  --percentage: var(--value);
  --primary: #bd0909;
  --secondary: #adf;
  --size: 90px;
  animation: progress 6s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="red"]::before {
  content: "";
  width: 90px;
  height: 90px;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="red"]::after {
  position: absolute;
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: calc(var(--size) / 5);
  color: var(--primary);
}

.inprogress-1-icon {}

.div22,
.yellow {}

.div22 {
  top: 33px;
  left: 27px;
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 800;
  display: flex;
  align-items: center;
  width: 45px;
  height: 37px;
}

@keyframes progress {
  0% {
    --percentage: 0;
  }

  100% {
    --percentage: var(--value);
  }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #ce9500;
  --secondary: #adf;
  --size: 90px;
  animation: progress 6s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  width: 90px;
  height: 90px;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  position: absolute;
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: calc(var(--size) / 5);
  color: var(--primary);
}

.finished {
  font-size: var(--font-size-smi);
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  align-items: center;
  margin-left: 10px;
}

.flag-icon {
  top: 60px;
  left: 280px;
  width: 15px;
  height: 15px;
  object-fit: cover;
}

.canceled {
  font-size: var(--font-size-smi);
  letter-spacing: 0.5px;
  line-height: 15.6px;
  font-weight: 600;
  color: var(--color-firebrick);
  align-items: center;
  margin-left: 10px;
}

.cancelled-icon {
  top: 60px;
  left: 145px;
  width: 15px;
  height: 15px;
  object-fit: cover;
}

.on-going {
  font-size: var(--font-size-smi);
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--color-goldenrod-100);
  align-items: center;
  margin-left: 10px;
}

.jobinfo-icons {
  margin: 10px 0 0 0;
  width: 15px;
  height: 15px;
  object-fit: cover;
}

.opt-icon6 {
  top: 8px;
  left: calc(50% + 148px);
  width: 18px;
  height: 18px;
}

.jon-info {
  top: 12px;
  left: 9px;
  font-size: var(--font-size-mid);
  letter-spacing: 0.5px;
  line-height: 20.4px;
  font-weight: 600;
  color: var(--color-gray-400);
  display: flex;
  align-items: center;
  width: 130px;
  height: 15px;
}

.job-info {
  top: 290px;

  width: 49%;
  height: 218px;
  font-size: var(--font-size-18xl);
  color: var(--color-green-100);
  background-color: #ffff;
  border-radius: 6px;
  padding: 20px;
}

/* Working Hours CSS */
.workingandreminder {
  display: flex;
}

.workinghours-head {
  font-size: var(--font-size-lg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin: 0 0 12px 0;
}

.working-hours {
  height: 260px !important;
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-200);
  border-radius: var(--br-7xs);
  background-color: var(--color-darkslateblue-300);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  padding: 20px;
  width: 49%;
  margin-top: 20px;
  margin: 20px 20px 0 0px;
}

.total-hours {
  background-color: white;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: absolute;
  margin: 0px 25%;
}

.total-hours p {
  padding: 25%;
  font-weight: 500;
}

.night-hours {
  background-color: #CAF5FF;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: absolute;
  margin: 0px 55%;
}

.night-hours p {
  padding: 25%;
  font-weight: 500;
}

.day-hours {
  background-color: #FFFAD0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  margin: 0px 10%;
}

.day-hours p {
  padding: 20%;
  font-weight: 500;
}

.allcircles {
  position: relative;
}

/* Maintenance Reminder CSS */
.maintanance-reminder {
  background-color: #var(--color-mediumvioletred-200);
  width: 24%;
  height: 260px;
  font-size: var(--font-size-18xl);
  color: var(--color-gray-300);
  border-radius: var(--br-7xs);
  background-color: var(--color-mediumvioletred-200);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  margin: 20px 20px 0 0px;
  padding: 20px;
}

.maintanance-head {
  font-size: var(--font-size-mid);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin: 0 0 12px 0;
}

.maintain-due {
  background-color: white;
  border-radius: 6px;
  height: 70px;
  width: 100%;
  margin: 25px auto;
  padding: 10px;
}

.calen {
  background-color: #CE9500;
  height: 50px;
  width: 50px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: -20px;
}

.calen img {
  height: 50px;
  width: 35px;
  margin: 0px 8px;
}

.maintain-due p {
  font-weight: 500;
  font-size: 14px;
  float: right;
  margin: -10px 0 0 0;
}

.maintain-due span {
  font-weight: 600;
  font-size: 32px;
}

.alarm {
  background-color: #BD0909;
  height: 50px;
  width: 50px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: -20px;
}

.alarm img {
  height: 35px;
  width: 35px;
  margin: 0px 8px;
}


/* Renewal Reminder CSS */

.renew-reminder {
  background-color: var(--color-purple);
  width: 24%;
  height: 260px;
  font-size: var(--font-size-18xl);
  color: var(--color-gray-300);
  border-radius: var(--br-7xs);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  margin-top: 20px;
  padding: 20px;
}





/* Distance Classification CSS */
.distanceandscore {
  display: flex;
}

.distance-classification {
  height: 300px;
  text-align: ;
  font-size: var(--fon centert-size-base);
  color: var(--color-gray-200);
  border-radius: var(--br-7xs);
  background-color: var(--color-saddlebrown);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  padding: 20px;
  width: 49%;
  margin-top: 20px;
  margin: 0 20px 0 0px !important;
}

.meter {
  display: flex;
}

.distance-leftcontent {
  width: 50%;
}

.distance-rightcontent {
  width: 50%;
  padding: 70px 0 0 0;
}

.on-duty {
  margin: 10px 0px;
  background-color: var(--color-goldenrod-100);
  height: 50px;
  border-radius: 6px;
  padding: 10px;
}

.on-duty p {
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  color: white;
}

.on-duty span {
  font-weight: 600;
}

.off-duty {
  margin: 10px 0px;
  background-color: var(--color-firebrick);
  height: 50px;
  border-radius: 6px;
  padding: 10px;
}

.off-duty p {
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  color: white;
}

.off-duty span {
  font-weight: 600;
}

.total-duty {
  margin: 10px 0px;
  background-color: var(--color-darkslategray-200);
  height: 25%;
  border-radius: 6px;
  padding: 10px;
}

.total-duty p {
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  color: white;
}

.total-duty span {
  font-weight: 600;
}

.meter-1-icon {
  width: 181px;
  height: 203px;
  object-fit: cover;
}

/* Vehicle Score CSS */
.score-graph {
  display: flex;
  background: url("../../images/dashboard-images/Vertical-Lines2.png") bottom left;
}

.line-images {
  width: 100%;
  margin: 15px 0px;
}

.driver-score {
  height: 300px !important;
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-200);
  border-radius: var(--br-7xs);
  background-color: white;
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  padding: 20px;
  width: 49%;
  margin: 0 0px 0 0px !important;
}

.numbers {
  width: 10%;
  margin-top: 10px;
  width: 16px;
  height: 170px;
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: 500;
  justify-content: end;
}

.numbers p {
  margin-bottom: 12px;
}

.names {
  display: flex;
  padding: 0 40px 0 30px;
  height: 11px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.names p {
  padding: 0 40px 0 0;
}

.blueline-icon,
.pinkline-icon,
.yellowline-icon,
.purpleline-icon,
.greenline-icon {
  margin: -10px 0;
}

.details {
  background-color: var(--color-gray-800);
  height: 100px;
  width: 30%;
  border-radius: 6px;
  margin-top: -230px;
  margin-left: 38px;
}

.dash .leftPanel {
  padding: 0 30px 0 0 !important;
}

.day-hours span,
.total-hours span,
.night-hours span {
  display: block;
}

.x-panel.maxspeed {
  box-sizing: border-box;
}

.x-panel.maxspeed .fleetstatus-head {
  padding: 10px;
  margin: 15px 0 0 0;
}

.x-panel.maxspeed .maxspeed-total-fleet,
.x-panel.maxspeed .maxspeed-avgditance {
  padding-right: 10px;
}

.x-panel.maxspeed .x-panel-body {
  overflow: visible;
}




/* Vehicle Score CSS */
.score-graph {
  display: flex;
  /*background: url("../images/Vertical-Lines2.png") bottom left;*/
}

.line-images {
  width: 100%;
  margin: 15px 0px;
}

.driver-score {
  height: 260px;
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-200);
  border-radius: var(--br-7xs);
  background-color: white;
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  padding: 20px;
  width: 50%;
  margin: 20px 0px 0 0px;
}

.numbers {
  width: 10%;
  margin-top: 10px;
  width: 16px;
  height: 160px;
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: 500;
  justify-content: end;
}

.numbers p {
  margin-bottom: 12px;
}

.names {
  display: flex;
  padding: 0 40px 0 30px;
  height: 11px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.names p {
  padding: 0 40px 0 0;
}

.blueline-icon,
.pinkline-icon,
.yellowline-icon,
.purpleline-icon,
.greenline-icon {
  margin: -15px 0;
  width: 100%
}

.details {
  background-color: var(--color-gray-800);
  height: 100px;
  width: 30%;
  border-radius: 6px;
  margin-top: -230px;
  margin-left: 38px;
}



.fleet-status-panel .progress *:not([data-progress]) {
  margin: 0;
  font-size: 13px;
  color: #3b3f5c;
  font-weight: 600;
}

.fleet-status-panel .progress span {
  text-align: left;
  font-size: 13px;
  color: #3b3f5c;
  font-weight: 600;
}

.fleet-status-panel .progress small {
  text-align: right;
  font-size: 13px;
  color: #3b3f5c;
  font-weight: 600;
}

.fleet-status-panel .progress {
  width: 100%;
  max-width: 500px;
  padding: 0;
  box-sizing: border-box;
}

.fleet-status-panel .progress .progress-row {
  margin: 0 0 15px 0;
}

.fleet-status-panel .progress .progress-row .progress-info {
  display: flex;
  justify-content: space-between;
}

.fleet-status-panel .progress [data-progress] {
  height: 22px;
  background-color: #ebedf2;
  border-radius: 20px;
  margin: 0 0 15px 0;
  overflow: hidden;
}


.fleet-status-panel [data-progress]::after {
  content: "";
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 0;
  height: 100%;
  box-sizing: border-box;
  font-size: 10px;
  color: white;
  padding: 0 3px;
  transition: 2s;
  font-size: 0;
}

.fleetstatus-head .progress .total-bar [data-progress].animate-progress::after {
  background: #159895;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress .running-bar [data-progress].animate-progress::after {
  background: #377D01;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress .stopped-bar [data-progress].animate-progress::after {
  background: #981515;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress .idle-bar [data-progress].animate-progress::after {
  background: #988315;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress .no-data-bar [data-progress].animate-progress::after {
  background: #939393;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress .inactive-bar [data-progress].animate-progress::after {
  background: #333235;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.fleet-status-panel .progress [data-progress].animate-progress::after {
  content: attr(data-progress) "%";
  width: var(--animate-progress);
}


.maxspeed-avgditance {
  text-align: right;
}

.maxspeed-total-fleet {
  text-align: right;
}

.maxspeed-data {
  margin-top: 0;
}

.max-box {
  /* top: 0; */
  left: 40px;
  border-radius: var(--br-7xs);
  background-color: var(--color-white);
  box-shadow: 0 0 40px rgba(94, 92, 154, 0.06);
  border: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  height: 400px;
}

.vertical-lines-icon {
  top: 105.5px;
  left: 40px;
  width: 100%;
  vertical-align: baseline;
}

.bar-icon {
  vertical-align: bottom;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.speed-numbers p {
  transform: rotate(-90deg);
  transform-origin: 0 0;
  padding: 0px 9px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.speed-numbers {
  position: absolute;
  display: flex;
  padding: 0px 50px;
  left: 24px;
  bottom: -10px;
}

.bars {
  display: flex;
  justify-content: start;
  width: 90%;
  text-align: center;
  font-size: var(--font-size-xs);
  position: absolute;
  align-items: baseline;
  bottom: -38px;
  /*right: 12px;*/
  left: 40px;
}

.bar-row {}

.bar-row span {
  display: inline-block;
}

.bar-row strong {
  transform: rotate(-90deg);
  display: block;
  /* margin: 10px 8px 0 -3px; */
  margin:2px 8px 0 3px;
  white-space: nowrap;
  position: absolute;
  top: 0;

}

.bar-row strong.vehicleNum-text {
  margin: 25px 8px 0 -20px;
}
.bar-row strong.vehicleNum-text-2 {
  margin: 25px 8px 0 -20px;
}
.bar-row strong.vehicleNum-text-2 {
  margin: 42px 8px 0 -29px;
}

.vertical-number p {
  padding: 42px 0px 12px 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-bottom: 1px solid grey;
  margin: 0;
}

.prog1,
.prog2,
.prog3,
.prog4,
.prog5,
.prog6,
.prog7,
.prog8,
.prog9,
.prog10,
.prog11,
.prog12 {
  border-radius: var(--br-xl);
  background-color: #fff;
  width: 25px;
  height: 25px;
  transform: rotate(-90deg);
}

.divprog-bar1,
.divprog-bar2,
.divprog-bar3,
.divprog-bar4,
.divprog-bar5,
.divprog-bar6,
.divprog-bar7,
.divprog-bar8,
.divprog-bar9,
.divprog-bar10,
.divprog-bar11,
.divprog-bar12 {
  height: 25px;
  border-radius: 0 10px 10px 0;
  width: 288px;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
}

.divprog-bar {
  height: 25px;
  border-radius: 0 10px 10px 0;
  width: 288px;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  margin-left:37px;
}

.progress-moved .divprog-bar1 {
  width: var(--changeMS1);
  background-color: #3496ce;
  animation: progressAnimation7 6s;
}

@keyframes progressAnimation7 {
  0% {
    width: 0%;
    background-color: #ffff;
  }

  100% {
    width: var(--changeMS1);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar2 {
  width: var(--changeMS2);
  background-color: #3496ce;
  animation: progressAnimation8 6s;
}

@keyframes progressAnimation8 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS2);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar3 {
  width: var(--changeMS3);
  background-color: #3496ce;
  animation: progressAnimation9 6s;
}

@keyframes progressAnimation9 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS3);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar4 {
  width: var(--changeMS4);
  background-color: #3496ce;
  animation: progressAnimation10 6s;
}

@keyframes progressAnimation10 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS4);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar5 {
  width: var(--changeMS5);
  background-color: #3496ce;
  animation: progressAnimation11 6s;
}

@keyframes progressAnimation11 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS5);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar6 {
  width: var(--changeMS6);
  background-color: #3496ce;
  animation: progressAnimation12 6s;
}

@keyframes progressAnimation12 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS6);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar7 {
  width: var(--changeMS7);
  background-color: #3496ce;
  animation: progressAnimation13 6s;
}

@keyframes progressAnimation13 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS7);
    background-color: #3496ce;
  }
}


.progress-moved .divprog-bar8 {
  width: var(--changeMS8);
  background-color: #3496ce;
  animation: progressAnimation14 6s;
}

@keyframes progressAnimation14 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS8);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar9 {
  width: var(--changeMS9);
  background-color: #3496ce;
  animation: progressAnimation15 6s;
}

@keyframes progressAnimation15 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS9);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar10 {
  width: var(--changeMS10);
  background-color: #3496ce;
  animation: progressAnimation16 6s;
}

@keyframes progressAnimation16 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS10);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar11 {
  width: var(--changeMS11);
  background-color: #3496ce;
  animation: progressAnimation17 6s;
}

@keyframes progressAnimation17 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS11);
    background-color: #3496ce;
  }
}

.progress-moved .divprog-bar12 {
  width: var(--changeMS12);
  background-color: #3496ce;
  animation: progressAnimation18 6s;
}

@keyframes progressAnimation18 {
  0% {
    width: 0%;
    background-color: #fff;
  }

  100% {
    width: var(--changeMS12);
    background-color: #3496ce;
  }
}


.bar-row {
  width:9%;
}

.vertical-number {
  width: 100%;
}

.max-speed-panel {
  top:610px!important;
}
.digitsBlock .div24, .digitsBlock .hours3 {
  display: block;
  height: auto;
  line-height: auto !important;
}
.p-screen-panel.advanced-dashboard-wrapper .p-logo .innerLogo {
  background: #1a2e46;
}
.advanced-dashboard-wrapper .backLink, .advanced-dashboard-wrapper .backLink:hover {
  color: #ffffff!important;
  text-decoration: none !important;
}
/*
.p-screen-panel.advanced-dashboard-wrapper .p-header-panel .x-panel-body-default {
  background: #e1e1e1;
}
.p-screen-panel.advanced-dashboard-wrapper .p-logo .innerLogo {
  background: #e1e1e1;
}
.p-screen-panel.advanced-dashboard-wrapper .p-header-panel .x-panel-body-default .x-btn-default-small .x-btn-inner {
  color: #3b3f5c;
}

.p-screen-panel.advanced-dashboard-wrapper .p-header-panel .x-btn-default-small-over {
  background: transparent !important; 
 
}
.p-screen-panel.advanced-dashboard-wrapper .p-header-panel .x-btn-default-small.x-menu-active {
  background: #ffffff !important;
  border-radius: 8px 8px 0 0;
  box-shadow: 0px -1px 3px rgb(0,0,0,0.3);
 
}
.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu {
  box-shadow: 0px 2px 5px rgb(0,0,0,0.3);
  border-radius: 0 8px 8px 8px;
}
.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-body {
  background: #ffffff;
 
}
.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item, .p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item:hover, .p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item-active:hover {
  background: #ffffff !important;
 
}
.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item-text {
  color: #3b3f5c;
}

.p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small .x-btn-arrow .p-dropdown-menu .x-menu-item-link:hover, .p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item:hover {
  background: #ffffff !important;
}
.p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small .x-btn-arrow {
  background-image: url("../../images/dashboard-images/menu-down-arrow.png") !important;
}

.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item-link:hover {
  background: transparent!important;
}

.p-screen-panel.advanced-dashboard-wrapper .p-dropdown-menu .x-menu-item-link:hover .x-menu-item-text {
  color: #000;
}

.p-screen-panel.advanced-dashboard-wrapper .userName-text {
  color:#3b3f5c;
}

.p-screen-panel.advanced-dashboard-wrapper .backLink {
border:0;
color:#3b3f5c
}

.p-screen-panel.advanced-dashboard-wrapper .backLink i {
    color:#3b3f5c;
    border: 0;
  }
.p-screen-panel.advanced-dashboard-wrapper .p-icons-top a.top-links-other {
  background: transparent;
  border: 0;
  }
  .p-screen-panel.advanced-dashboard-wrapper .p-icons-top a:hover, .p-screen-panel.advanced-dashboard-wrapper .p-icons-top a:hover i {
    color:#3b3f5c;
  }
  .p-screen-panel.advanced-dashboard-wrapper .p-icons-top i {
    color:#3b3f5c;
    border: 0;
  }
  .p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left {
    background: #e1e1e1;
    border: 0;
  }
  .p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left.x-btn-default-small-over {
    background: #e1e1e1 !important;
  }
  .p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left .icon-menu-3 {
    color:#3b3f5c;
  }

.p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left-small {
  background: #ffffff !important;
  border: 0;
  border-radius: 6px;
}
.p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left-small i {
  color:#3b3f5c;
}


.p-screen-panel.advanced-dashboard-wrapper .p-header-panel .x-panel-body-default .x-btn-default-small {
  padding:34px 12px 12px 12px;
}

.p-screen-panel.advanced-dashboard-wrapper .p-icons-top {
  padding-top:10px;
}

.p-screen-panel.advanced-dashboard-wrapper .x-btn-default-small.panel-arrow-left {
  padding:28px 0 0 17px;
}
*/

.advanced-dashboard-wrapper .vehicle-score-graph-captions {
  position: absolute;
  top: 15%;
  right:10%;
}

.vehicle-score-graph-captions ul{
	list-style:none;
	margin:0;
	padding:0;
	text-align:left;
	font-size:13px;
}

.vehicle-score-graph-captions ul li{
	display:flex;
	align-items:Center;
	margin:0 0 5px 0;
	color:#3b3f5c;
	font-size:13px;
	font-weight:normal;
}

.vehicle-score-graph-captions ul li span{
	height:10px;
	width:10px;
	margin-right:10px;
	border-radius:3px;
}
.vehicle-score-graph-captions ul li.account span {
	background-color:#66c2a5;
}

.vehicle-score-graph-captions ul li.breakcount span {
	background-color:#fc8d62;
}

.vehicle-score-graph-captions ul li.exidelcount span {
	background-color:#8da0cb;
}

.vehicle-score-graph-captions ul li.rpmcount span {
	background-color:#e78ac3;
}

.vehicle-score-graph-captions ul li.speedcount span {
	background-color:#a6d854;
}

.arabic-language-wrapper .dash .leftPanel {
  padding: 0 0 0 30px !important;
}
.arabic-language-wrapper .fleet-idle {
  margin: 0 0 0 20px !important;
}
.arabic-language-wrapper .maintain-due p {
  float: left;
}
.arabic-language-wrapper .div24 {
  margin: 0 10px 0 0;
}
.arabic-language-wrapper .on-going, .arabic-language-wrapper .canceled {
  margin: 0 5px 0 0;
}
.arabic-language-wrapper .finished {
  margin: 0 5px 0 0;
}
.arabic-language-wrapper .day-hours p {
  padding: 20% 0;
}
.arabic-language-wrapper .night-hours p {
  padding: 25% 0;
}
.arabic-language-wrapper .advanced-dashboard-wrapper .vehicle-score-graph-captions {
  right: auto;
  left: 10%;
}
.arabic-language-wrapper .bars {
  left: auto;
  right: 5px;
}
.arabic-language-wrapper .distance-classification {
  margin: 0 0 0 20px !important;
}
.arabic-language-wrapper .working-hours {
  right: 0 !important;
}
.arabic-language-wrapper .maintanance-reminder {
  right: 0 !important;
}
.arabic-language-wrapper .maxspeed {
  margin: 15px 0 0 0 !important
}
.awtl-login-screen.arabic-language-wrapper .login-form .input-lg {
    padding: 10px 10px 10px 60px;
}
.arabic-language-wrapper.advanced-dashboard-wrapper .maxspeed {
  direction: ltr !important;
}



.window-grid-panel {
  margin: 15px !important;
  left: 0 !important;
}
.window-grid-panel .x-column-header {
  border-right: solid 1px rgba(255, 255, 255, 0.05);
}
.window-grid-panel .x-column-header, .window-grid-panel .x-column-header-over, .window-grid-panel .x-column-header-sort-ASC, .window-grid-panel .x-column-header-sort-DESC {
  background: #45b7d1;
  background-color: #45b7d1;
  color: #ffffff;
}
.window-grid-panel .x-grid-header-ct {
  border-radius: 5px;
  border: 0 !important;
}
.window-grid-panel .x-grid-with-row-lines .x-grid-td {
  border-bottom: solid 1px #dcdcdc;
}


.window-grid-panel .x-grid-row-selected .x-grid-td {
  background-color: #c1ddf1;
}

.window-grid-panel .x-grid-row-selected .x-grid-td {
background-color: #e1eef5;
}

.dropdown-boundlist ul {
  padding: 0 !important;
  margin:0!important;
}

.bar-row strong.vehicleNum-5 {
  margin: 15px 8px 0 -15px;
}
.bar-row strong.vehicleNum-8 {
  margin: 17px 8px 0 -11px;
}
.bar-row strong.vehicleNum-15 {
  margin: 45px 8px 0 -38px;
}
.bar-row strong.vehicleNum-20 {
  margin: 55px 8px 0 -41px;
}

.arabic-language-wrapper .bars {
  bottom: -36px;
}