.h-screen.flex .sidebar {
  @apply dark:bg-gray-700 bg-white;
  width: 260px;
  height: 90%;
  top: 0;
  left: 0;
  margin-top: 5rem;
  position: absolute;
  overflow: visible;
  overflow-y: scroll;
  scrollbar-width: none;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 999;
  box-shadow: 5px 0 5px -5px rgba(31, 38, 135, 0.37);
  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;

}

.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item{
  z-index: 1100;
  position: relative;
  opacity: 0.99;
  margin-left: 10px;
  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}


.h-screen.flex .sidebar.close {
  position: absolute;
  overflow: visible;
  top: 0;
  left: 0;
  height: 90%;
  margin-top: 5rem;
  width: 60px;
  z-index: 999;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}


.h-screen.flex .topbar {
  @apply bg-white dark:bg-gray-800 drop-shadow-md;
  height: 4rem;
  display: flex;
  max-width: 100%;
  left:0;
  margin-left: 0;
  position: relative;
  z-index: 10000;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.page_body.close {
  margin-left: 50px;
  max-width: 97%;
}

.h-screen.flex .sidebar .boxture-logo{
  margin-top: 30px;
}

.sidebar.close .boxture-logo {
  opacity: 0;
}

.h-screen.flex .sidebar.close .icon-link {
  margin-top: 0;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}


.sidebar.close .sts-sidebar-menu-item{
  margin-left: 2px;
}

.sidebar .boxture-logo {
  height: 52px;
  width: 52px;
  opacity: 0.5;
  object-fit: cover;
  border-radius: 16px;
  font-size: 30px;
  color: #fff;
  margin-top: 80px;
  mix-blend-mode: multiply;
}

.dark .sidebar .boxture-logo {
  mix-blend-mode: normal;
}

.sidebar.close .profile-logo {
  display: none;
}

.sidebar .arrow:hover {
  color: #555555;
  cursor: pointer;
}

.dark .sidebar .arrow:hover {
  color: #c0c0c0;
}

.dark .sidebar .arrow {
  color: #ffffff;
  opacity: 1;
  margin-top: 20px;
}

.h-screen.flex .sidebar .arrow {
  margin-top: 20px;
  font-size: 20px;
  opacity: 0.5;
  left: 0;
  margin-left: 10px;
  margin-right: 10px;
  transform: scaleX(-1);
  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.h-screen.flex .sidebar.close .arrow{
  margin-left: 15px;
  left: 0;
  transform: scaleX(1);
}

.sidebar .logo_name {
  font-size: 10px;
  opacity: 0.5;
  text-align: center;
  display: block;
}

.sidebar.close .logo_name {
  display: none;
}

.dark .h-screen.flex .sidebar {
  @apply bg-gray-800;
}

.dark .sidebar .logo_name {
  color: #edecec;
}