.sidebar .navbar-brand-wrapper .navbar-brand img {
    height: 36px;
}
.sidebar .navbar-brand-wrapper {
    background: #fff;
}
.sidebar {
    background:#fff;
}
.sidebar .nav .nav-item.active .nav-link .icon-wrapper svg, 
.sidebar .nav .nav-item.active .nav-link .menu-title {
    color: #31666f;
    font-weight: 600;
}
.sidebar .nav .nav-item.active .nav-link .icon-wrapper {
    background-color:transparent;
}
.sidebar .nav .nav-item .nav-link .icon-wrapper {
    background-color: transparent;
    color: #5a9aa3;
}
.sidebar .nav .nav-item .collapse, .sidebar .nav .nav-item .collapsing {
    background-color: rgb(49 102 111 / 10%);
}
.sidebar .nav .nav-item .nav-link {
    color: #5a9aa3;
    padding: 0.8rem 0 0.8rem 0;
}
.sidebar .nav .nav-item .nav-link .icon-wrapper svg {
    color: #5a9aa3;
}
.sidebar .nav .nav-item .nav-link .icon-wrapper {
    height: auto;
}
.nav li.nav-item.active {
    border-right: solid 2px #5a9aa3;
}
.sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category):not(.nav-profile)>.nav-link, 
.sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category):not(.nav-profile)>.nav-link .icon-wrapper svg,
.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: #31666f;
    font-weight: 600;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover:before {
  background-color:#31666f;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active {
  color: #31666f;
    font-weight: 600;
}

.bar-icon {
  width: 36px;
  height: 24px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--clr-common-white);
  display: inline-block;
}
.bar-icon span:nth-child(2) {
  margin-inline-start: 20px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.bar-icon span:nth-child(3) {
  margin-inline-start: 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.bar-icon:hover span:nth-child(2) {
  margin-inline-start: 10px;
}
.bar-icon:hover span:nth-child(3) {
  margin-inline-start: 0;
}
.bar-icon-2 {
  width: 20px;
  height: 18px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
.bar-icon-2 span {
  width: 100%;
  height: 2px;
  background: var(--clr-text-body);
  display: inline-block;
}
.bar-icon-2 span:nth-child(2) {
  margin-inline-start: -10px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.bar-icon-2:hover span:nth-child(2) {
  margin-inline-start: 0;
}
.card.card-with-shadow {
  border-radius: 15px;
}

.box-absensi {
    background: #f9f9f9;
    padding: 20px 20px 0;
    border-radius: 15px;
    border: solid 1px #ddd;
}