div.toc-container {
  align-self: stretch;
  background-color: var(--background-very-light);
  width: 300px;
  min-width: 300px;
}

.toc-visibility {
  display: auto;
}

nav.all-pages-toc {
  /* positioning */
  display: block;
  height: 100%;
  margin: 0;
  top: 0;
  padding-left: 25px;

  /* text */
  color: var(--text-normal);
  font-family: var(--body-font);
}

nav.all-pages-toc ul {
  list-style: none;
  padding: 0;
  font-weight: 400;
}

ul.toc-parent {
  font-size: var(--toc-font-size);
  text-transform: uppercase;
}

.toc-parent > li > .toc-heading {
  font-weight: 700;
}

ul.toc-child {
  text-transform: none;
  font-size: var(--toc-font-size);
}

ul.toc-grandchild {
  text-transform: none;
  font-size: var(--toc-font-size);
  margin-left: .5rem;
  display: none;
}

span.toc-heading {
  display: block;
  padding-left: .5rem;
  margin-left: -.5rem;
}

ul.toc-parent span.toc-heading {
  margin-top: 2rem;
  margin-bottom: 0;
}

ul.toc-child span.toc-heading {
  margin-top: 0;
  padding-top: .1rem;
  padding-bottom: .1rem;
}

ul.toc-grandchild span.toc-heading {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

li.toc-active > span.toc-heading {
  background-color: var(--border-light);
  font-weight: 500;
}

nav.all-pages-toc a {
  color: var(--text-normal);
  padding: .1rem .25rem .1rem 0;
}

.external-link::after {
  color: silver;
  font-size: .7rem;
}
.external-link::after {
  font-family: "Logzio Icons";
  content: "\f13d";
  margin-left: .25rem;
}

span.collapse-button {
  display: inline;
  float: right;
  padding-right: 1.5rem;
}

span.collapse-button path {
  transform: rotate(0deg);
  transition: all .1s ease-out;
  transform-origin: center;
}

span.collapse-button.show path {
  transform: rotate(90deg);
  transition: all .1s ease-out;
  transform-origin: center;
}

ul.toc-child li span.toc-heading:hover {
  background-color: var(--border-light);
}

.toc-grandchild > li > .toc-heading {
  max-width: 225px;
  padding-right: 60px;
}