.sidemenu {
  .intro {
    .logo-wrapper {
      border-bottom: none;
    }

    // border-bottom: 1px solid #eaeaea;
  }

  .sidebar-footer {
    img.footer-logo {
      width: 175px;
    }
  }
}

.sidemenu {
  .intro {
    padding: 10px;
    height: 57px;

    // border-bottom: 1px solid #eaeaea;

    .logo-wrapper {
      border-bottom: none;
    }

    h3 {
      margin-left: 10px;
    }
  }
}

.sidemenu {
  .side-loader {
    margin: 20px 20px;
  }

  .intro {
    padding: 5px 16px;
    position: fixed;
    z-index: 1000;
    width: 17%;
    background: #fff;
    // border-bottom: 1.5px solid #24aeb8;
    &.close{
      width:6% !important
    }

    .logo-wrapper {
      // height: 15px;
      // border-bottom: 1px solid #eaeaea;

      .sidemenu-brand-logo {
        // width: 50%;
        // margin: 10px;
        // width: 200px;

        &.open {
          // height: 15px;
          // height: 10px;
          width: 100px !important;
        }

        &.close {
          height: 17px;

          width: 59px !important;
        }

        @media only screen and (max-width: 500px) {
          margin-right: 0px;
// margin: 10px;
          width: 150px;
        }

        cursor: pointer;
      }
    }

    small {
      margin: 0px 10px;
    }

    .locations {
      margin: 10px 0px;

      .ant-tag {
        margin-right: 4px;

        margin-bottom: 4px;
      }
    }
  }

  .menu-item {
    padding-top: 10px;
    // height: calc(100vh - 48px); /* Adjust height */
    height: 100vh;
    margin-top: 0px;
    width: 256px;
    top: 48px;
    border-bottom: 1px solid #f0f0f0;
    position: fixed;
    height: 100vh;
    margin-top: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 211px;
    padding-bottom: 50px;

    /* Custom Scrollbar like macOS */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #c0c0c0 transparent; /* Track color */

    /* WebKit Scrollbar (Chrome, Edge, Safari) */
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.5);
    }
    // when toggle open and close
    &.open {
      width: 211px !important;
    }

    &.close {
      width: 81px !important;
    }
    .ant-skeleton {
      margin: 80px;
    }

    .ant-menu-inline {
      border: none !important;
    }

    .menu-collapsed {
      width: 81px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .menu-collapsed .anticon {
      margin-right: 8px;
    }

    /* Pseudo-element  (as before) */
    .menu-collapsed::after {
      content: "";
      position: absolute;
      top: -100%;
      left: 0;
      // width: 100%;
      height: 100%;

      transition: top 0.5s ease-in-out;
    }

    /* On hover, change background color  */
    .menu-collapsed:hover {
      // background-color: #E0EBFF;
      // transform: scale(0.95); /* Apply scale effect on hover */
    }
/* Style selected item */
.ant-menu{
  background-color: transparent !important;
}
// .ant-menu-inline .ant-menu-item::after{
//   border-right: none;
// }
// .ant-menu-item-selected {
//   background-color: var(--selected-bg-color) !important;
//   color: var(--selected-text-color) !important;
//    border-radius: 12px;
//   // font-weight: 600;
//   // margin: 4px 8px;
// }

// /* Optional: remove hover effects */
// .ant-menu-item:hover {
//   background-color: transparent !important;
//   color: transparent !important;
// }

    /* River flow effect */
    .menu-collapsed:hover::after {
      top: 0%;
    }
  }

  .sidebar-footer {
    position: fixed;

    bottom: 0px;

    width: 250px;

    background-color: white;

    border-top: 1px solid #e3e3e3;

    &.open {
      width: 256 !important;
    }

    &.close {
      width: 80px !important;

      img.footer-logo {
        display: none;
      }
    }

    img.footer-logo {
      width: 120px;

      padding: 10px;
    }
  }
}
@media only screen and (max-width: 768px) {
  .sidemenu {
    // width: 100% !important;
    // z-index: 1200;
    // position: fixed;
    // left: 0;
    // top: 0;
    // height: 100vh;
    // background: white;

    .intro {
      width: 210px;
      height: 60px;
      padding: 0px;
      // width: 100% !important;
      // padding: 10px 16px;
    
    }
   

    .menu-item {
      width: 100% !important;
      top: 62px;
    }

    .sidebar-footer {
      width: 100% !important;
    }
  }
}