:root {
  --app-sidebar-width: 230px;
}

body {
  background-color: var(--bs-body-bg);
}

.app-navbar {
  background-color: var(--bs-body-bg);
  z-index: 1030;
}

.app-wrapper {
  min-height: calc(100vh - 56px);
}

.app-sidebar {
  width: var(--app-sidebar-width);
  min-height: calc(100vh - 56px);
  background-color: var(--bs-tertiary-bg);
  flex-shrink: 0;
}

.app-sidebar .nav-link {
  color: var(--bs-body-color);
  border-radius: .375rem;
  padding: .55rem .75rem;
  margin-bottom: 2px;
}

.app-sidebar .nav-link i {
  width: 1.3em;
  display: inline-block;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.app-content {
  min-width: 0;
}

.card-stat {
  border-left: 4px solid var(--bs-primary);
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: 56px;
    left: -100%;
    height: calc(100vh - 56px);
    z-index: 1020;
    transition: left .2s ease-in-out;
  }
  .app-sidebar.open {
    left: 0;
  }
}