#body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.topDiv {
  padding: 0px;
}

.colStyle {
  box-shadow: 6px 6px 16px -8px rgba(0, 0, 0, 0.75);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}
.colStyle:hover {
  box-shadow: 6px 6px 16px -8px rgba(0, 0, 0, 0.75);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.todayStyle {
  color: #86ac41;
}
.weekStyle {
  color: #4897d8;
}
.monthStyle {
  color: #f5be41;
}

.paidStyle {
  color: #86ac41;
}
.pendingStyle {
  color: #cb0000;
}

.selectedRunning {
  text-align: center;
  padding: 20px;
  background: #86ac41;
  cursor: pointer;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}

.selectedStopped {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  background: #cb0000;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}

.selectedOur {
  text-align: center;
  padding: 20px;
  background: #4897d8;
  cursor: pointer;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}

.selectAll {
  text-align: center;
  padding: 20px;
  background: #f0810f;
  cursor: pointer;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}

.selectIdling {
  text-align: center;
  padding: 20px;
  background: #f5be41;
  cursor: pointer;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}
.expireStatus {
  text-align: center;
  padding: 20px;
  background: #712d33;
  cursor: pointer;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}

.animateClass_7:active {
  box-shadow: 0 1px #666;
  transform: translateY(1px);
}

.selectedNoGPS {
  text-align: center;
  padding: 20px;
  background: #5b7065;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

.selectedRunning_1 {
  text-align: center;
  background: #34675c;
  color: white;
  padding: 20px;
  cursor: pointer;
}

.selectedStopped_1 {
  text-align: center;
  background: #50312f;
  color: white;
  padding: 20px;
  cursor: pointer;
}

.selectedOur_1 {
  text-align: center;
  background: #426e86;
  color: white;
  cursor: pointer;
  padding: 20px;
}

.selectAll_1 {
  text-align: center;
  background: #063852;
  color: white;
  cursor: pointer;
  padding: 20px;
}

.selectIdling_1 {
  text-align: center;
  background: #16253d;
  cursor: pointer;
  color: white;
  padding: 20px;
}

.selectedNoGPS_1 {
  text-align: center;
  background: #4d648d;
  cursor: pointer;
  color: white;
  padding: 20px;
}
.expireStatus_1 {
  text-align: center;
  background: #503167;
  cursor: pointer;
  color: white;
  padding: 20px;
}
@media (max-width: 1388px) {
  .selectAll_1 {
    text-align: center;
    padding: 19px;
    background: #063852;
    color: white;
    cursor: pointer;
  }

  .selectAll {
    text-align: center;
    padding: 19px;
    background: #f0810f;
    cursor: pointer;
    color: white;
    font-size: 14px;
  }
}

.menus {
  overflow: auto;
  margin-bottom: 0.01em;
  position: fixed;
  left: 0px;
  width: 100%;
  overflow: scroll;
  z-index: 999;
}
.menus::-webkit-scrollbar {
  -webkit-appearance: none;
}

.menus::-webkit-scrollbar:vertical {
  width: 11px;
}

.menus::-webkit-scrollbar:horizontal {
  height: 11px;
}

.menus::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, 0.5);
}
.custom-slider-main {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}
.name:hover {
  text-decoration: underline;
}

/* .info-box {
} */

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}
