.table-of-contents {
  z-index: 9999;
  position: sticky;
  top: 70px;
  flex-shrink: 0;
  max-height: calc(100vh - 50px - 2rem);
  margin-left: 0;
  padding-left: 0.5rem;
  overflow-y: auto;
}

@media (max-width: 60em) {
  .table-of-contents {
    display: none;
    position: relative;
    top: initial;
  }
}

@media screen and (min-width: 60em) {
  .table-of-contents {
    z-index: 0;
    height: auto !important;
  }
}

.table-of-contents.grid-with-sidebar {
  grid-row: 1;
  grid-column: 2;
  width: auto;
  max-width: 275px;
}

.table-of-contents h1,
.table-of-contents h2,
.table-of-contents h3,
.table-of-contents h4,
.table-of-contents h5,
.table-of-contents h6 {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  font-family: var(--fonts-paragraph);
}

.table-of-contents ul {
  padding: 0;
}

.table-of-contents ul ul:not(.open) {
  display: none;
}
.table-of-contents ul li {
  list-style: none;
}
.table-of-contents ul a {
  display: block;
  padding-left: 8px;
  overflow: hidden;
  border-left: 2px solid transparent;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-of-contents ul a:hover,
.table-of-contents ul a:active {
  border-left: 2px solid rgba(0, 120, 212, 0.3);
}
.table-of-contents ul a.active {
  border-left: 2px solid #0078d4;
}

.table-of-contents .heading {
  padding-bottom: 0.25rem;
  font-weight: 500;
  font-size: 1rem;
  text-align: "initial";
}

table-of-contents > div {
  padding-top: 1rem;
}

table-of-contents > div:first-child {
  padding-top: 0;
}
table-of-contents > div:last-child {
  padding-bottom: 0;
}