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

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

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

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

    // 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;

    .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: 9px;

          // width: 45px !important;
        }

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

          width: 250px;
        }

        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 */
    }

    /* 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;
    }
  }
}
