/*** Theme acl ***/
.acl-bg-purple {
  background-color: #A767FF !important;
  border: #A767FF thin solid !important;
  color: white !important;
}

.acl-bg-purple-dark  {
  background-color: #7030a0 !important;
  border: #7030a0 thin solid !important;
  color: white !important;
}

.acl-bg-grey  {
  background-color: #CBC8D9 !important;
  border: #CBC8D9 thin solid !important;
  color: white !important;
}

.acl-bg-yellow {
  background-color: #FDD36A !important;
  color: black !important;
}

.acl-bg-yellow-white {
  background-color: #FDD36A !important;
  color: white !important;
}

.acl-bg-light-purple {
  background-color: #E7D7FF !important;
  /*border: #A767FF thin solid !important;*/
  color: white !important;
}

.card-home-shortcut {
  background-color: #E7D7FF;
  border: #A767FF thin solid !important;
}

.card-home-shortcut a {
  color: black !important;
}

.card-home-shortcut:hover {
  background-color: #FDD36A;
  border: #A767FF thin solid !important;
}

.acl-font-purple {
  color: #A767FF !important;
}

.acl-font-light-purple {
    color: #b783fa !important;
}

.cut-text {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  text-overflow: ellipsis;
  /*max-width: 100px;*/
}

/*** Background ***/
.side-road {
  z-index: 0;
  position: fixed;
  bottom: 8px;
  height: 80px;
  width: 100%;
  background-image: url(../img/login/side-road.svg);
  background-repeat: repeat-x;
}

.road {
  z-index: 0;
  position: fixed;
  bottom: 0;
  height: 80px;
  width: 100%;
  background-image: url(../img/login/road.svg);
  background-repeat: repeat-x;
  background-size: contain;
}

.tree-left {
  z-index: 1;
  position: fixed;
  bottom: 88px;
  left: 0;
  height: 150px;
  width: 128px;
  background-image: url(../img/login/tree-left.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.tree-right {
  z-index: 1;
  position: fixed;
  bottom: 88px;
  right: 0;
  height: 150px;
  width: 128px;
  background-image: url(../img/login/tree-right.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.building {
  z-index: 0;
  position: fixed;
  bottom: 88px;
  right: 80px;
  height: 159px;
  width: 272px;
  background-image: url(../img/login/building.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.driver {
  z-index: 2;
  position: fixed;
  bottom: 54px;
  right: 0px;
  height: 200px;
  width: 228px;
  background-image: url(../img/login/driver.svg);
  background-repeat: no-repeat;
  background-size: contain;
}


/*** Navbar Menu ***/
.nav-link:hover, .hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-dark .navbar-nav .nav-item.active > .nav-link {
  /*background-color: #FDD36A !important;*/
  background-color: #a767ff !important;
  color: #ffffffd1 !important;
}

.nav-link:focus {
  color: black !important;
}

/* Timepicker styling to match Bootstrap datepicker inputs */
.input-group > .vue__time-picker {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
}
.input-group .vue__time-picker input { 
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-right: 0; /* integrate with .input-group-append */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group .vue__time-picker input::placeholder {
  color: #6c757d;
  opacity: 1;
}
.input-group .vue__time-picker input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}
/* Ensure the dropdown/popup stays above other UI */
.vue__time-picker .dropdown, .vue__time-picker .dropdown-menu { z-index: 1055; }

.vue__time-picker-dropdown ul li:not([disabled]).active,
.vue__time-picker-dropdown ul li:not([disabled]).active:focus,
.vue__time-picker-dropdown ul li:not([disabled]).active:hover,
.vue__time-picker .dropdown ul li:not([disabled]).active,
.vue__time-picker .dropdown ul li:not([disabled]).active:focus,
.vue__time-picker .dropdown ul li:not([disabled]).active:hover {
    background: #A767FF !important;
    color: #fff;
}