.table_of_contents {
  position: sticky;
  float: left;
  
  top: 0px;
  
  flex: 0.1 0 15em;
  
  padding-right: 0.3em;
  
  padding-bottom: 0.5em;
  border-radius: 0 0em 0em 0.5em;
  
  box-shadow: -0.2em 0.2em 0.2em black;
  
  --toc-fg: #cecece;
  --toc-bg: var(--highlight_1a);
  
  background-color: var(--bg_2);
  
  & a {
    display: inline-block;
    
    transition: all 0.5s !important;
    
    line-height: 1em;
    text-align: justify;
    font-size: 0.9rem;
    
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    

    
    color: var(--toc-fg) !important;
  }
  
  & .active > a {
    background-color: var(--toc-bg);
    border-bottom: 1px solid var(--highlight_1);
    
    transition: all 0.2s;
  }
  
  & ol {
    padding-left: 0.5em;
    
    list-style: none;
  }
  
  & > li {
    border-radius: 0.2em;
    border-bottom: 1px solid transparent;
    
    margin-bottom: 0.2em;
    transition: all 1s;
  }
  
  & .toc_collapsing {
    display: none;
  }
  & li:is(:has(.active),.active) > ol > .toc_collapsing {
    display: block;
  }
}