.sidebar {
  padding: 10px;
  height: 100%;
  width: 260px;
  z-index: 1000;
  position: absolute;
  background: #ffffff;
  overflow: visible;
  scrollbar-width: none;
  overflow-y: scroll;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

.h-screen.flex .page_bg .sidebar.close{
  z-index: 1000;
  position: absolute;
  overflow: visible;
}

.h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item{
  z-index: 1001;
  position: relative;
  overflow: visible;
}


.page_bg .sidebar.close {
  position: absolute;
  overflow: visible;
  top: 0;
  left: 0;
  height: 100%;
  width: 60px;
  z-index: 1000;
  overflow-y: scroll;
  scrollbar-width: none;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

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


.page_bg .topbar {
  flex-shrink: 0;
  display: flex;
  height: 4rem;
  max-width: 87%;
  margin-left: 260px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
  background: white;
  z-index: 2;
}

.page_bg .topbar.close {
  max-width: 97%;
  margin-left: 60px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

.page_body.close {
  margin-left: 50px;
  max-width: 97%;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}


.account-icon {
  opacity: 0.25;
  border-radius: 25px;
  padding: 20px;
}

.sidebar.close .account-icon {
  opacity: 0;
}


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

.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 .logo_name {
  font-size: 10px;
  opacity: 0.5;
  text-align: center;
  display: block;
}

.dark .sidebar {
  background: #222836;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

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

.dark .topbar {
  background: #222836;
}