#sidebar_header {
  box-sizing: border-box;
  height: 100vh;
  width: 250px;
  padding: 5px 1em;
  background: var(--linear_gradient-navbar);
  border-right: 1px solid var(--line-clr);
  /* position: fixed; */
  left: 0;
  align-self: start;
  transition: 300ms ease-in-out;
  overflow: hidden;
  text-wrap: nowrap;
  box-shadow: -1px 2px 1px 3px rgb(84 81 81);
  
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sidebar_header.close {
  padding: 5px;
  width: 60px;
}
#sidebar_header ul {
  list-style: none;
}
#sidebar_header > ul > li:first-child {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  .logo {
    font-weight: 600;
  }
}
#sidebar_header ul li.active a {
  color: var(--accent-clr);

  svg {
    fill: var(--accent-clr);
  }
}

#sidebar_header a,
#sidebar_header .dropdown-btn,
#sidebar_header .logo {
  border-radius: 0.5em;
  padding: 0.85em;
  text-decoration: none;
  color: var(--text-clr);
  display: flex;
  align-items: center;
  gap: 1em;
}
.dropdown-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
#sidebar_header svg {
  flex-shrink: 0;
  fill: var(--text-clr);
}
#sidebar_header a span,
#sidebar_header .dropdown-btn span {
  flex-grow: 1;
}
#sidebar_header a:hover,
#sidebar_header .dropdown-btn:hover {
  background-color: var(--hover-clr);
}
#sidebar_header .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms ease-in-out;

  > div {
    overflow: hidden;
  }
}
#sidebar_header .sub-menu.show {
  grid-template-rows: 1fr;
}
.dropdown-btn svg {
  transition: 200ms ease;
}
.rotate svg:last-child {
  rotate: 180deg;
}
#sidebar_header .sub-menu a {
  padding-left: 2em;
}
/* #toggle-btn {
  margin-left: auto;
  padding: 1em;
  border: none;
  border-radius: 0.5em;
  background: none;
  cursor: pointer;

  svg {
    transition: rotate 150ms ease;
  }
} */
#toggle-btn:hover {
  background-color: var(--hover-clr);
}

/* .container {
  border: 1px solid var(--line-clr);
  border-radius: 1em;
  margin-bottom: 20px;
  padding: min(3em, 15%);

  h2,
  p {
    margin-top: 1em;
  }
} */

@media (min-width: 766px) {
    #sidebar_header{
      display: none;
    }
  }