body,
    html {
      height: 100%;
      margin: 0;
    }

    .wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .main-wrapper {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      background-color: #343a40;
      color: white;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      transition: all 0.3s;
    }

    .sidebar .nav-link,
    .sidebar .dropdown-item {
      color: #fff;
    }

    .sidebar .nav-link:hover,
    .sidebar .dropdown-item:hover,
    .sidebar .nav-link.active {
      background-color: #495057;
    }

    .sidebar strong {
      font-size: 1.2rem;
    }

    .content-wrapper {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    footer {
      background-color: #f8f9fa;
      padding: 10px;
      text-align: center;
      border-top: 1px solid #ddd;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        height: 100%;
        z-index: 999;
      }

      .sidebar.show {
        left: 0;
      }

      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        display: none;
        z-index: 999;
      }

      .overlay.show {
        display: block;
      }

      /* .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
      } */