.sidebar {

        position: relative;
        width: 256px;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        background-color: #fff;
        padding: 24px;
        border-radius: 5px;
        transition: all 0.3s;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      .sidebar .head {
        display: flex;
        gap: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f6f6f6;
      }
      .user-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
      }
      .user-img img {
        width: 100%;
        object-fit: cover;
      }
      .user-details .title {
        font-size: 10px;
        font-weight: 500;
        color: #757575;
        text-transform: uppercase;
      }
      .user-details .name {
        font-size: 14px;
        font-weight: 500;
      }
      .nav {
        flex: 1;
      }


      ol, ul {
          padding-left: 0rem;
      }

      .menu ul li {
        position: relative;
        list-style: none;
        margin-bottom: 5px;

      }
      .menu ul li a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #757575;
        text-decoration: none;
        padding: 12px 8px;
        border-radius: 8px;
        transition: all 0.3s;
      }
      .menu ul li > a:hover,
      .menu ul li.active > a {
        color: #000;
        background-color: #f6f6f6;
      }
      .menu ul li .icon {
        font-size: 20px;
      }
      .menu ul li .text {
        flex: 1;
      }
      .menu ul li .arrow {
        font-size: 14px;
        transition: all 0.3s;
      }
      .menu ul li.active .arrow {
        transform: rotate(180deg);
      }
      .menu .sub-menu {
        display: none;
        margin-left: 0px;
        padding-left: 20px;
        padding-top: 5px;
        border-left: 1px solid #f6f6f6;
      }
      .menu .sub-menu li a {
        padding: 10px 8px;
        font-size: 12px;
      }
      .menu:not(:last-child) {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #f6f6f6;
      }
      .menu-btn {
        position: absolute;
        right: -14px;
        top: 3.5%;
        width: 20px;
        height: 20px;
        border-radius: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #757575;
        border: 2px solid #f6f6f6;
        background-color: #fff;
      }
      .menu-btn:hover i {
        color: #000;
      }
      .menu-btn i {
        transition: all 0.3s;
      }
      .sidebar.active {
        width: 92px;
      }
      .sidebar.active .menu-btn i {
        transform: rotate(180deg);
      }
      .sidebar.active .user-details{
        display: none;
      }
      .sidebar.active .menu .title{
        text-align: center;
      }
      .sidebar.active .menu ul li .arrow{
        display: none;
      }
      .sidebar.active .menu > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sidebar.active .menu > ul > li > a .text {
        position: absolute;
        left: 70px;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        border-radius: 4px;
        color: #fff;
        background-color: #000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
      }
      .sidebar.active .menu > ul > li > a .text::after{
        content:  "";
        position: absolute;
        left: -5px;
        top: 20%;
        height: 20px;
        border-radius: 2px;
        background-color: #000;
        transform: rotate(45deg);
        z-index: -1;
      }
      .sidebar.active .menu > ul > li > a:hover .text{
        left: 50px;
        opacity: 1;
        visibility: visible;
      }
      .sidebar.active .menu .sub-menu{
        position: absolute;
        top: 0;
        left: 20px;
        width: 200px;
        border-radius: 20px;
        padding: 10px 20px;
        border: 1px solid #f6f6f6;
        background-color: #fff;
        box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1);
        z-index: 1;
      }
      .content {
        flex: 1;
        padding: 20px;
        font-size: 13px;
        margin-left: 14px; /* Make space for the sidebar */
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }

      .form-label {
        margin-bottom: 0.3rem;
        margin-top: 0.5rem;
      }
/*
      .mb-3 {
      margin-bottom: 1rem;
      }
      .mb-4 {
       margin-bottom: 1rem;
      }*/
    .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 0;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    }