.sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  /* background: #25232a; */
  border-radius: 5px;
  top: 10px;
  z-index: 998;
  max-height: calc(100vh - 16px);
  /* max-height: calc(100vh - 145px - 40px); */
  /* max-height: calc(100vh - 40px); */
  /* height: 100%; */
  margin: 8px;
  transition: all 0.25s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar_sect {
  /* background: #25232a; */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  /* width: auto; */
  min-width: 300px;
  padding: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar_sect_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.sidebar_sect_heading {
  font-size: 1.13rem;
  font-weight: bold;
}

/* Link Buttons */

.link_button {
  color: #f0f0f0;
  text-decoration: none;
  background: transparent;
  border-radius: 5px;
  padding: 10px;
}

.link_button:hover {
  background: #2d2a33;
}

#link_button_active {
  background: #393140;
  font-weight: bold;
}

/*  */

.sidebar_switcher {
  background: #1E1D22;
  border-radius: 5px;
  justify-content: space-between;
  transition: all 0.25s ease;
}

.sidebar_switcher.expanded {
  filter: drop-shadow(0 0 5px rgb(19, 19, 19));
}

.sidebar_header {
  display: flex;
  height: 50px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  user-select: none;
  padding: 0 16px;
}

/* Aim arrow image right when collapsed (default) */
.sidebar_header img {
  transition: all 0.25s ease;
  transform: rotate(-90deg); /* Start with arrow pointing right (rotated from down) */
}

/* Aim arrow image down when expanded */
.sidebar_header.expanded img {
  transform: rotate(0deg);
}

/* Original transitions on these elements */
.sidebar_switcher .link_button {
  /* Remove display: none */
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

.sidebar_switcher .link_button.visible {
  /* Remove display: flex */
  opacity: 1;
  max-height: 50px; /* Set an appropriate max height */
  margin: 0;
  padding: 10px;
}

#sect_topics {
  /* Remove display: none */
  opacity: 0;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

#sect_topics.visible {
  /* Remove display: flex */
  opacity: 1;
  padding: 15px;
  max-height: 500px; /* Set this to an appropriate value larger than the expected height */
}

/* .sidebar_switcher .link_button {
  display: none;
  opacity: 0.0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

.sidebar_switcher .link_button.visible {
  display: flex;
  opacity: 1.0;
}

#sect_topics {
  display: none;
  opacity: 0.0;
}

#sect_topics.visible {
  display: flex;
  opacity: 1.0;
} */

/*  */

/* Exit Button */

.sidebar_exit_container {
  display: flex;
  width: 100%;
}

.sidebar_item_button_exit {
  position: absolute;
  top: -3000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 26px;
  height: 26px;
  margin: 10px;
  margin-bottom: 20px;
}

.sidebar_item_button_exit .bar {
  background: #f0f0f0;
  display: block;
  width: 30px;
  height: 3px;
}

.sidebar_item_button_exit .bar:nth-child(1) {
  transform: translateY(1.5px) rotate(45deg);
}

.sidebar_item_button_exit .bar:nth-child(2) {
  transform: translateY(-1.5px) rotate(-45deg);
}

/* #button_exit_page_contents,
#button_exit_topics,
#button_exit_classes {
  position: absolute;
  top: -3000px;
} */

/* Sidebar Section Toggle Buttons */

#sect_sidebar_buttons {
  display: none;
}

.toggle_sidebar_item_button {
  display: flex;
  position: absolute;
  align-self: flex-start;
  align-items: center;
  top: -3000px;
  background: #25232a;
  white-space: nowrap;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn_sidebar_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}

.btn_sidebar_list > *:not(:last-child) {
  margin-bottom: 3px;
}

#btn_sidebar_left .btn_sidebar_list {
  margin-left: 10px;
}

#btn_sidebar_right .btn_sidebar_list {
  margin-right: 10px;
}

.version_badge {
  padding-left: 5px;
  font-size: 0.9rem;
  background: #1e1d22;
  border-radius: 3px;
}

/* Media Queries */

@media screen and (max-width: 1568px) {
  #sect_sidebar_buttons {
    display: flex;
  }
}