/*!
 * Bootstrap Drawer v4.0.0 (https://iqbalfn.github.io/bootstrap-drawer/)
 * Copyright 2019 Iqbal Fauzi
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
.drawer-open {
  overflow: hidden;
}

.drawer {
  height: 92vh !important;
  margin-top: 60px;
  box-shadow: none !important;
}

.drawer-mob {
  box-shadow: none !important;
}

.drawer.drawer-right {
  right: -320px;
  /* border-left: 1px solid rgba(0, 0, 0, 0.2); */
}

.drawer.drawer-left {
  left: -320px;
  /* border-right: 1px solid rgba(0, 0, 0, 0.2); */
}

.drawer.show {
  -webkit-transform: none;
  transform: none;
}

.drawer.show.drawer-right {
  right: 0;
}

.drawer.show.drawer-left {
  left: 0;
}

.drawer.slide {
  transition: left 0.3s ease, right 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .drawer.slide {
    transition: none;
  }
}

.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.drawer-backdrop.fade {
  opacity: 0;
}

.drawer-backdrop.show {
  /* opacity: 0.5; */
  opacity: 0;
}

.drawer-body {
  /* padding: 1rem 1rem; */
}

.drawer-content {
  width: 100%;
  pointer-events: auto;
  background-color: #f7f8fa;
  background-clip: padding-box;
  outline: 0;
  height: 100%;
  overflow-y: auto;
}

.drawer-content.drawer-content-scrollable {
  display: flex;
  flex-direction: column;
}

.drawer-content.drawer-content-scrollable > div {
  display: flex;
  flex-direction: column;
}

.drawer-content.drawer-content-scrollable > div.drawer-body {
  flex: 1;
  overflow-y: auto;
}

.drawer-header {
  padding: 1rem;
  /* border-bottom: 1px solid #dee2e6; */
  flex-direction: row !important;
  align-items: center;
}

.drawer-footer {
  padding: 2em 1.5em;
  border-top: 1px solid #dee2e6;
}

.drawer-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.drawer-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
/*# sourceMappingURL=bootstrap-drawer.css.map */

/* Nav Bar Update Custom */

.header {
  background-color: white;
  height: 60px;
  box-shadow: 0 1px 6px #00000026;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header > a:first-child img {
  margin-left: 30px;
  height: 55px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-container {
  display: block;
  width: 55px;
  height: 55px;
  position: relative;
}

.header-profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.header-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff00;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: poppinsbold;
  font-size: 9px;
  color: white;
}

.header-status-green {
  background-color: #00b794;
}

.header-status-yellow {
  background-color: #f0c52c;
}

.header-status-red {
  background-color: #ff575d;
}

.header-desk-name {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 30px;
}

.header-desk-name h3 {
  font-family: poppinslight;
  font-size: 14px;
  color: #32383d;
}

.header-desk-name h1 {
  font-family: poppinssemibold;
  font-size: 20px;
  color: #32383d;
}

.header-drawer-icon {
  width: 70px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
  cursor: pointer;
  font-size: 40px;
  color: #32383d;
}

.drawer-section {
  cursor: pointer;
}

.drawer-section-title {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  color: #393f45;
  font-size: 20px;
  font-family: poppinsmedium;
  text-transform: uppercase;
}

.drawer-section-title:hover {
  background-color: white;
}

.drawer-section-title-left i {
  margin-right: 10px;
}

.drawer-section-title i {
  font-size: 18px;
}

.drawer-section-body {
  background-color: #EBEDF0;
  display: none;
}

.drawer-item {
  display: flex;
  align-items: center;
  padding: 1em;
  height: 60px;
  font-family: poppinsmedium;
  font-size: 16px;
  text-transform: uppercase;
  color: #393f45;
}

.drawer-item:hover {
  background-color: white;
}

.drawer-item-logout {
  display: flex;
  align-items: center;
  padding: 1em;
  height: 60px;
  font-family: poppinsmedium;
  font-size: 20px;
  text-transform: uppercase;
  color: #393f45;
  flex-direction: row !important;
  cursor: pointer;
}

.drawer-item-logout:hover {
  background-color: white;
}

.drawer-item-logout i {
  font-size: 24px;
  margin-right: 10px;
}


/* FOR MOBILE DEVICES */

.drawer-mob {
  margin-top: 0;
}

@media screen and (max-width: 767px) {

  .header {
    height: 50px;
  }

  .header > a:first-child img {
    margin-left: 10px;
    width: auto;
    height: 45px;
  }

  .hideOnMobile {
    display: none;
  }

  .header-drawer-icon {
    width: 60px;
    height: 50px;
    font-size: 40px;
  }

}