/* ------------------------------------------
   Navbar Vertical
------------------------------------------- */
.navbar-vertical.navbar-expand-xs {
  background-color: #fff;
}

/* ------------------------------------------
     Navigation Links
  ------------------------------------------- */
.navbar-nav .nav-item .nav-link,
.navbar-vertical .navbar-nav .nav-link {
  color: #7b809a !important;
}

.sidenav .collapse .nav-item .nav-link.active {
  color: #393c48 !important;
  background-color: #ddd;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------
     Table
  ------------------------------------------- */

.table-responsive {
  overflow-y: hidden;
}

/* ------------------------------------------
     Dark Mode
  ------------------------------------------- */
.dark-version,
.dark-version .main-content {
  background-color: #111315 !important;
}

.dark-version .card,
.dark-version .swal2-popup,
.dark-version .dropdown .dropdown-menu,
.dark-version .kanban-board,
.dark-version .sidenav,
.dark-version #datatable-basic {
  background-color: #1a1d1f !important;
}

.dark-version .bg-gradient-dark {
  background-image: linear-gradient(195deg, #111111, #111315);
}

/* ------------------------------------------ 
     Table - Dark Mode
  ------------------------------------------- */

.dark-version .page-item .page-link {
  border: 1px solid #1a1d1f;
  color: #fff;
  background-color: #111315;
  transition: background-color 0.2s, color 0.2s;
}

.dark-version .page-item.disabled .page-link,
.dark-version .page-item.active .page-active {
  border: 1px solid #1a1d1f;
  color: #fff;
  background-color: #1a1d1f;
  transition: background-color 0.2s, color 0.2s;
}

.dark-version .page-item .page-link:hover {
  border: 1px solid #1a1d1f;
  color: #fff;
  background-color: #1a1d1f;
  transition: background-color 0.2s, color 0.2s;
}

/* ------------------------------------------ 
     Toggle Switch - Dark Mode
  ------------------------------------------- */

.dark-version .bottom-bar {
  background-color: #1a1d1f;
}

.dark-version.toggle-wrapper {
  background-color: #1e1e1e;
}

.dark-version.toggle-wrapper .toggle-slider {
  background-color: #111;
  left: 100px;
}

.dark-version.toggle-wrapper .toggle-icon {
  color: #888;
}

.dark-version.toggle-wrapper .toggle-icon.active {
  color: white;
}

/* ------------------------------------------
     Active Nav Link - Dark Mode
  ------------------------------------------- */
.dark-version .sidenav .collapse .nav-item .nav-link.active {
  color: white !important;
  background-color: #111315;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------
     Modal - Dark Mode
  ------------------------------------------- */

.dark-version .modal .modal-dialog .modal-content {
  background-color: #1a1d1f;
}

.dark-version .modal .modal-dialog .modal-content .modal-header {
  border-bottom: 1px solid #565656;
}

.dark-version .modal .modal-dialog .modal-content .modal-footer {
  border-top: 1px solid #565656;
}