#center-pane {
  width: 100%;
  overflow-y: auto;
  max-height: calc(100dvh - 72px);
  transition-property: margin, width;
  transition-duration: .15s;
  transition-timing-function: ease; }
  #center-pane #main-content-wrapper {
    width: 100%;
    height: 100%;
    padding-left: .75rem;
    padding-right: .75rem; }
    @media screen and (min-width: 768px) {
      #center-pane #main-content-wrapper {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media screen and (min-width: 1280px) {
      #center-pane #main-content-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }

#reader-left-sidebar a.keep {
  line-height: 2.5rem;
  padding: 0 1rem; }

#reader-left-sidebar .collapsed-only {
  display: none; }

#right-pane {
  width: 327px;
  max-width: 100%;
  margin-right: -327px;
  transition-property: margin-right;
  transition-duration: .15s;
  transition-timing-function: ease;
  position: fixed;
  right: 0;
  height: 100%; }

#top-nav {
  width: 100%; }

body {
  overflow: hidden; }

main {
  display: flex; }
  main.active-search #main-content-wrapper {
    display: none; }
  main #left-pane {
    width: 5rem;
    overflow-y: auto;
    min-height: calc(100dvh - 80px);
    max-height: calc(100dvh - 80px);
    height: 100%;
    transition-property: width;
    transition-duration: .15s;
    transition-timing-function: ease; }
    main #left-pane .collapsable {
      display: none;
      overflow: hidden;
      white-space: nowrap; }
      main #left-pane .collapsable .flex {
        flex-wrap: nowrap; }
    main #left-pane .keep {
      padding-left: 0;
      padding-right: 0;
      flex-direction: column;
      padding-top: .5rem;
      padding-bottom: .5rem;
      width: 3.5rem;
      font-size: .75rem; }
      main #left-pane .keep svg {
        width: 1.5rem;
        height: 1.5rem; }
    main #left-pane div:has(.keep) {
      gap: .5rem; }
  @media screen and (min-width: 1024px) {
    main.active-left #left-pane {
      width: 14.25rem; }
      main.active-left #left-pane .collapsable {
        display: initial; }
        main.active-left #left-pane .collapsable.flex {
          display: flex; }
      main.active-left #left-pane .keep {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0;
        padding-bottom: 0;
        flex-direction: row;
        width: unset;
        font-size: 1rem;
        line-height: 2.5rem; }
        main.active-left #left-pane .keep svg {
          width: 1.25rem;
          height: 1.25rem; }
      main.active-left #left-pane .collapsed-only {
        display: none; }
      main.active-left #left-pane div:has(.keep) {
        gap: .25rem; } }
  main.active-right #right-pane {
    margin-right: 0;
    z-index: 1000; }
  main.active-right #center-pane {
    margin-right: 327px;
    width: calc(100% - 327px); }
    @media (max-width: 576px) {
      main.active-right #center-pane {
        margin-left: -327px;
        width: 100%; } }
  main.active-right.active-left #center-pane {
    width: calc(100% - 327px - 18rem); }

#reader-left-sidebar {
  max-height: 100dvh;
  min-width: 18rem; }
  #reader-left-sidebar::backdrop {
    background-color: rgba(255, 255, 255, 0.3); }
  #reader-left-sidebar div:has(.keep) {
    gap: .25rem; }
    #reader-left-sidebar div:has(.keep) svg {
      width: 1.25rem !important;
      height: 1.25rem !important; }

#left-pane {
  padding: 0.75rem;
  padding-top: 0; }

:is(#left-pane, #reader-left-sidebar) .left-content-item {
  color: #BEC7D5; }

:is(#left-pane, #reader-left-sidebar) .left-content-item:hover,
:is(#left-pane, #reader-left-sidebar) .left-content-item.active {
  background-color: #14181F;
  color: white; }

#left-pane::-webkit-scrollbar,
#center-pane::-webkit-scrollbar {
  width: .75rem; }

#left-pane::-webkit-scrollbar {
  background-color: transparent; }

#left-pane::-webkit-scrollbar-thumb {
  background-color: transparent; }

#left-pane:hover::-webkit-scrollbar {
  background-color: #404040; }

#left-pane:hover::-webkit-scrollbar-thumb {
  background-color: lightsteelblue; }