body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.img-bg {
  background-image: url("../img/bg-img/bg.jpg");
}

.brand-text {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.mar-top-10 {
  margin-top: 10px
}

.custom-popup {
  background-color: rgba(0, 0, 0, 0.9);
  color: #777;
  padding: 15px;
  text-align: center !important;
}

.custom-popup.full-width {
  width: 100%;
}

.custom-popup.light {
  background-color: #f9f9f9;
}

.custom-popup {
  transform: scale(0.8);
}

.popup_visible .custom-popup {
  transform: scale(1);
}

.width-100 {
  width: 100%;
}

.myd-data-table tbody td.shorten {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

#avatar_list .img-user {
  cursor: pointer;
}


/* BORDER */
/*======================================*/
.border-trans {
  border-color: transparent;
}

.border-light {
  border-color: #ffffff;
}

.border-gray-light {
  border-color: #f3f5f8;
}

.border-gray {
  border-color: #e3e8ee;
}

.border-gray-dark {
  border-color: #c3cedb;
}

.border-trans-light {
  border-color: rgba(255, 255, 255, 0.1);
}

.border-trans-dark {
  border-color: rgba(0, 0, 0, 0.05);
}

.border-primary {
  border-color: #5fa2dd;
}

.border-info {
  border-color: #4ebcda;
}

.border-success {
  border-color: #9cc96b;
}

.border-warning {
  border-color: #ebaa4b;
}

.border-danger {
  border-color: #f76c51;
}

.border-mint {
  border-color: #50c7a7;
}

.border-purple {
  border-color: #986291;
}

.border-pink {
  border-color: #e17ca7;
}

.border-dark {
  border-color: #3b4146;
}



.tooltip.top .tooltip-arrow.border-light,
.tooltip.top-left .tooltip-arrow.border-light,
.tooltip.top-right .tooltip-arrow.border-light {
  border-top-color: #ffffff;
}

.tooltip.top .tooltip-arrow.border-gray-light,
.tooltip.top-left .tooltip-arrow.border-gray-light,
.tooltip.top-right .tooltip-arrow.border-gray-light {
  border-top-color: #f3f5f8;
}

.tooltip.top .tooltip-arrow.border-gray,
.tooltip.top-left .tooltip-arrow.border-gray,
.tooltip.top-right .tooltip-arrow.border-gray {
  border-top-color: #e3e8ee;
}

.tooltip.top .tooltip-arrow.border-gray-dark,
.tooltip.top-left .tooltip-arrow.border-gray-dark,
.tooltip.top-right .tooltip-arrow.border-gray-dark {
  border-top-color: #c3cedb;
}

.tooltip.top .tooltip-arrow.border-trans-light,
.tooltip.top-left .tooltip-arrow.border-trans-light,
.tooltip.top-right .tooltip-arrow.border-trans-light {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.tooltip.top .tooltip-arrow.border-trans-dark,
.tooltip.top-left .tooltip-arrow.border-trans-dark,
.tooltip.top-right .tooltip-arrow.border-trans-dark {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.tooltip.top .tooltip-arrow.border-primary,
.tooltip.top-left .tooltip-arrow.border-primary,
.tooltip.top-right .tooltip-arrow.border-primary {
  border-top-color: #5fa2dd;
}

.tooltip.top .tooltip-arrow.border-info,
.tooltip.top-left .tooltip-arrow.border-info,
.tooltip.top-right .tooltip-arrow.border-info {
  border-top-color: #4ebcda;
}

.tooltip.top .tooltip-arrow.border-success,
.tooltip.top-left .tooltip-arrow.border-success,
.tooltip.top-right .tooltip-arrow.border-success {
  border-top-color: #9cc96b;
}

.tooltip.top .tooltip-arrow.border-warning,
.tooltip.top-left .tooltip-arrow.border-warning,
.tooltip.top-right .tooltip-arrow.border-warning {
  border-top-color: #ebaa4b;
}

.tooltip.top .tooltip-arrow.border-danger,
.tooltip.top-left .tooltip-arrow.border-danger,
.tooltip.top-right .tooltip-arrow.border-danger {
  border-top-color: #f76c51;
}

.tooltip.top .tooltip-arrow.border-mint,
.tooltip.top-left .tooltip-arrow.border-mint,
.tooltip.top-right .tooltip-arrow.border-mint {
  border-top-color: #50c7a7;
}

.tooltip.top .tooltip-arrow.border-purple,
.tooltip.top-left .tooltip-arrow.border-purple,
.tooltip.top-right .tooltip-arrow.border-purple {
  border-top-color: #986291;
}

.tooltip.top .tooltip-arrow.border-pink,
.tooltip.top-left .tooltip-arrow.border-pink,
.tooltip.top-right .tooltip-arrow.border-pink {
  border-top-color: #e17ca7;
}

.tooltip.top .tooltip-arrow.border-dark,
.tooltip.top-left .tooltip-arrow.border-dark,
.tooltip.top-right .tooltip-arrow.border-dark {
  border-top-color: #3b4146;
}

.timeline-entry.highlight {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.timeline-entry {
  cursor: pointer;
}

.navbar-content img.img-user {
  margin-top: 22px;
}


/* Scrollbar */
/*======================================*/
.nano {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.nano>.nano-content {
  position: absolute;
  overflow: scroll;
  overflow-x: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nano>.nano-content::-webkit-scrollbar {
  display: none;
}

.nano>.nano-content:focus {
  outline: 0 !important;
}

.nano>.nano-pane {
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  width: 5px;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.nano>.nano-pane>.nano-slider {
  background-color: rgba(0, 116, 255, 0.5);
  position: relative;
  margin: 0;
  cursor: pointer;
  border-radius: 0;
}

.nano-hide.nano>.nano-pane {
  display: none !important;
}

.has-scrollbar>.nano-content::-webkit-scrollbar {
  display: block;
}

.nano:hover>.nano-pane,
.nano-pane.active,
.nano-pane.flashed {
  opacity: 0.99;
}

.load1 {
  margin-bottom: 5px;
  width: 100%;
}

.load1 .loader {
  margin: 0 50%;
  font-size: 3px;
}

#driver-count-trips,
#driver-duration,
#driver-distance {
  height: 48px;
}