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

    /* Fixed Sidebar */
    #sidebar {
      width: 280px;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1040;
      overflow-y: auto;
    }

    .sidebar-inner{
     background: linear-gradient(30deg, var(--bs-active-primary) 0%, var(--bs-primary) 100%) !important;
     border-radius: 17px;
    }

    .sidebar-devider-heading{
      font-size: .7rem;
      opacity: .7;
    }

    .list-group{
     height: 100vh;
     overflow-y: auto;
    }

    .list-group-item {
      background-color: #ffffff00 !important;
      padding: .4rem .9rem !important;
      border-radius: 14px !important;
      display: flex !important;
      font-size: .9rem;
/*      border-bottom:1px solid #ffffff52 !important;*/
      border:0px !important;
      color: white !important;
    }

    .list-group-item.active, .list-group-item:hover {
      background-color: var(--bs-active-primary) !important;
    }   

    .sidebar-logo {
      height: 65px;
      padding: 6px 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 2px solid #ffffff52;
    }

    .sidebar-logo img {
      max-height: 100%;
      max-width: 100%;
    }

    /* Top Navbar */
    #topbar {
      height: 56px;
      position: fixed;
      top: 0;
      left: 250px; /* offset to sidebar */
      right: 0;
      z-index: 1030;
    }

    /* Main Content */
    #main-content {
      position: absolute;
      top: 6px;
      left: 250px; /* next to sidebar */
      right: 0;
      bottom: 0;
      overflow-y: auto;
      padding: 20px;
    }

    .collapse-toggle i {
      float: right;
    }

    @media (max-width: 768px) {
      #sidebar {
        left: -280px;
        transition: left 0.3s;
        height: 93vh;
      }
      .sidebar-inner{
       border-radius: 0px !important; 
      }
      #sidebar.show {
        left: 0;
        box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.4);
      }
      #topbar {
        left: 0;
      }
      #main-content {
        left: 0;
      }
    }