.sidebar {
  /* height: calc(100vh - 70px); */
  height: 90vh;
  left: 0;
  z-index: 11;
  padding: 0px 6px;
  padding-top: 45px;
  background-color: #191a23;
  /* Sidebar background color */
  width: 302px;
  /* Sidebar width */
  transition: width 0.5s ease, padding 0.3s ease;
  overflow-y: auto;
}

.sidebar .nav-link {
  color: #ffffff;
  /* Link text color */
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav .nav-item:hover .nav-link {
  color: #000000;
  /* Link text color */
}

.sidebar .nav-item {
  padding: 0 2.25rem;
  margin-bottom: 7px;
  transition-duration: 0.25s;
  transition: background;
}

.sidebar .nav-item:hover {
  background: #b9ff66;
  border-radius: 6px;
  color: #000000;
}

.sidebar .nav-item:hover .nav-link {
  color: #000000;
}

.sidebar .nav-item.active {
  border-radius: 6px;
  background: #b9ff66;
  color: #000000;
  justify-content: center;
}

.icons-show.sidebar {
  width: 70px;
  padding-top: 0px;
}

.sidebar .nav-item p {
  text-wrap: nowrap;
}

.icons-show.sidebar .nav-item p {
  display: none;
}

.icons-show.sidebar .nav-item {
  padding: 0.6rem 0 0.6rem 0;
}

.sidebar .menu-icons {
  margin-right: 10px;
}

.icons-show.sidebar .menu-icons {
  margin-right: 0px;
}

a.d-flex.align-items-center.nav-link {
  font-family: "DINBold";
}

@media (max-width: 768px) {
  .sidebar {
    width: 200px;
    /* Adjust width for smaller screens */
    padding: 32px 0;
    /* Adjust padding for smaller screens */
  }
}

@media (max-width: 992px) {
  .sidebar {
    height: calc(100vh - 70px);
    right: 0;
    z-index: 11;
    position: fixed;
    /* Adjust padding as needed */
    padding-top: 0px;
    background-color: #191a23;
    /* Sidebar background color */
    width: 302px;
    /* Sidebar width */
    display: none !important;
  }

  .icons-show.sidebar {
    position: fixed;
    top: 70px;
    z-index: 11;
    left: auto;
    right: 0;
    /* Start from the right side */
    height: calc(100vh - 70px);
    display: block !important;
    padding-top: 0px;
    background-color: #191a23;
    /* Sidebar background color */
    width: 302px;
    /* Sidebar width */
    transition: width 0.5s ease, padding 0.3s ease, display 0.3s ease;
    animation: slideInFromRight 0.5s ease;
    /* Apply the slide-in animation */
  }

  .icons-show.sidebar .menu-icons {
    margin-right: 10px;
  }

  .icons-show.sidebar .nav-item p {
    display: block;
  }

  /* Add animation keyframes */
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }
}