#document #toc {
  display: none;
  flex-direction: column;
  font-family: var(--ff-sans);
  font-size: var(--fs-sml);
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: var(--ma-reg);
  align-self: flex-start;
  min-width: calc(100% / 8);
  width: calc(100% / 8);
  margin-left: var(--ma-reg);
  max-height: calc(100vh - var(--ma-reg));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tag-streams #document #toc {
  top: calc(40vh + var(--ma-reg));
}
#document #toc.enabled {
  display: flex;
}

#document #toc .contents-header {
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--co-dark);
  padding-bottom: var(--pd-sml);
}

#document #toc .contents-header .top {
  color: var(--co-text);
}

#document #toc > ol {
  padding-top:calc((0.5rem * var(--lh-reg)) * 1);
  padding-bottom: var(--pd-reg);
  list-style-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: scroll;
}

#document #toc > ol::-webkit-scrollbar {
  display: none;
  width: 0 !important
}

#document #toc ol li {
  margin-bottom: calc((1rem * var(--lh-reg)) * 0.3);
}

#document #toc ol li a {
  color: var(--co-txt);
  display: inline;
  
}

#document #toc > ol li > ol {
  list-style: none;
  margin-left: 0;
  padding-left: var(--ma-sml);
  margin-top: calc((1rem * var(--lh-reg)) * 0.2);
  margin-bottom: calc((1rem * var(--lh-reg)) * 0.3);
  border-left: 1px dotted var(--co-dark);
}

#document #toc #toc-button {
  position: absolute;
  right: -1.5rem;
  writing-mode: vertical-lr;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  text-transform: uppercase;
  opacity: 1;
}

#document #toc #toc-button,
#document #toc #toc-close  {
  display: none;
}

#document #toc ol,
#document #toc .contents-header {
  opacity: 1;
}

#toc-toggle[type='checkbox'] {
  z-index: 2;
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
}
/* Media Queries */
@media screen and (max-width: 990px) {
  #document #toc {
    margin-left: -9rem;
    transition: all 300ms ease-in-out;
    width: 9rem;
    min-width: 9rem;
  }

  #document #toc #toc-button,
  #document #toc #toc-close {
    display: initial;
  }

  #document #toc ol,
  #document #toc .contents-header {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
  }

  #toc-toggle[type='checkbox']:checked ~ #document #toc {
    margin-left: var(--ma-reg);
  } 
  
  #toc-toggle[type='checkbox']:checked ~ #document #toc ol,
  #toc-toggle[type='checkbox']:checked ~ #document #toc .contents-header {
    opacity: 1;
  }
  
  #toc-toggle[type='checkbox']:checked ~ #document #toc #toc-button {
    transition: all 300ms ease-in-out;
    opacity: 0
  }

  #toc-toggle[type='checkbox']:checked ~ #document article content .clear-sidenotes-toggle {
    display: none;
  }
  #toc-toggle[type='checkbox']:checked ~ #document article content .clear-toc-toggle {
    display: block;
  }
}