/* ---------- GENERAL LAYOUT ---------- */
  .main-sidebar,
  .left-side {
      width: 250px !important;
      background: #1f2d3d;
      border-right: none;
      box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  }

  .content-wrapper,
  .main-footer,
  .right-side {
      margin-left: 250px !important;
  }

  .main-sidebar .sidebar {
      padding-top: 1px;
  }

  .logo-version {
      font-size: 50% !important;
      font-weight: 700;
      opacity: .8;
  }

  /* ---------- USER PANEL ---------- */
  .main-sidebar .sidebar .user-panel {
      margin: 5px 0 8px; /*Top-left-bottom */
      padding: 8px 10px 6px;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(2px);
      border-radius: 6px;
  }

  .main-sidebar .sidebar .user-panel:after {
      content: "";
      display: block;
      clear: both;
  }

  .main-sidebar .sidebar .user-panel .image img {
      max-width: 48px;
      border-radius: 10px;
  }

  .main-sidebar .sidebar .user-panel .info p {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
  }

  .main-sidebar .sidebar .user-panel .info .user-status {
      display: block;
      margin-top: 4px;
      font-weight: 600;
      font-size: 12px;
      line-height: 1;
      color: #c8e6c9;
  }

  .main-sidebar .sidebar .user-panel .info .user-status .fa {
      font-size: 9px;
      margin-right: 4px;
      color: #4cd964;
  }

  /* ---------- SIDEBAR MENU ---------- */
  .sidebar-menu>li>a {
      border-radius: 6px;
      margin: 2px 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      transition: all .2s ease;
  }

  .sidebar-menu>li>a:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
  }

  .sidebar-menu>li.active>a {
      background: #00a65a !important;
      color: #fff !important;
      border-radius: 4px;
  }

  /* ---------- TREEVIEW ---------- */
  .sidebar-menu li.treeview>a .fa-angle-left {
      transition: transform .3s;
  }

  .sidebar-menu li.treeview.menu-open>a .fa-angle-left {
      transform: rotate(-90deg);
  }

  .sidebar-menu .treeview.menu-open>a {
      background: rgba(247, 247, 247, 0.15) !important;
      color: #00a65a !important;
      border-left: 4px solid #00a65a;
      font-weight: 600;
  }

  /* Submenu */
  .sidebar-menu .treeview-menu>li>a {
      padding: 8px 20px;
      font-size: 13px;
      border-radius: 4px;
      color: #0e0f0fff;
  }

  .sidebar-menu .treeview-menu>li>a:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #00a65a !important;
  }

  /* Active submenu */
  .sidebar-menu .treeview-menu>li.active>a {
      background: rgba(247, 247, 247, 0.15) !important;
      color: #00a65a !important;
      font-weight: 700;
      border-left: 1px solid #00a65a;
  }

  .sidebar-menu .treeview-menu>li>a i {
      font-size: 12px;
      margin-right: 8px;
      opacity: .9;
  }

  /* Sub-sub menu */
  .sidebar-menu .treeview-menu .treeview-menu>li>a {
      padding-left: 35px;
      font-size: 12.5px;
  }

  /* ---------- CLOCK WIDGET ---------- */
  .sidebar-clock {
      clear: both;
      background: #243447;
      border-radius: 6px;
      margin: 10px;
      padding: 10px 12px;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
      color: #fff;
  }

  .sidebar-clock .clock-date {
      font-size: 12px;
      color: #b0bec5;
  }

  .sidebar-clock .clock-time {
      font-size: 16px;
      font-weight: 700;
      color: #4cd964;
  }

  /* ---------- COLLAPSE DESKTOP ---------- */
  .sidebar-collapse .main-sidebar,
  .sidebar-collapse .left-side {
      width: 60px !important;
  }

  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .main-footer,
  .sidebar-collapse .right-side {
      margin-left: 60px !important;
  }

  /* ---------- MOBILE OPTIMIZATION ---------- */
  @media (max-width: 767px) {

      .main-sidebar,
      .left-side {
          width: 235px !important;
          position: fixed !important;
          height: 100%;
          top: 0 !important;
          z-index: 9999;
      }

      .main-header {
          z-index: 10000 !important;
          position: fixed !important;
          width: 100%;
          top: 0;
          left: 0;
      }

      .content-wrapper,
      .right-side,
      .main-footer {
          margin-left: 0 !important;
          width: 100% !important;
          padding-top: 1px !important;
      }

      .sidebar-open .content-wrapper {
          margin-left: 0 !important;
      }

      .main-sidebar .sidebar .user-panel {
          margin-top: 0 !important;
          padding-top: 12px !important;
      }
  }