:root {
  --toc-bg: #101870;
  --toc-text-primary: #FFFFFF;
  --toc-text-secondary: #b2ccff;
  --toc-title-size: 2rem;
  --toc-link-size: 0.875rem;
  --toc-link-child-size: 0.75rem;
  --toc-link-child-padding-left: 36px;
  --toc-font-weight-active: 600;
  --toc-margin-mobile: 16px;
  --toc-margin-desktop: 46px auto 30px;
  --toc-margin-large: 0 auto 30px;
  --toc-padding-link: 12px 24px;
  --toc-padding-list: 16px 0;
  --toc-radius: 16px;
  --toc-radius-mobile: 0 0 16px 16px;
  --toc-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  --toc-transition: 0.2s ease-in-out;
  --toc-max-height-mobile: 80vh;
  --toc-desktop-top-offset: 30px;
  --toc-item-hover-bg: #1532ef;  
}

.toc {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}
.toc__toggle {
  display: inline-block;
  margin: var(--toc-margin-mobile);
}

ul.toc__list {
  display: none;
  width: 100%;
  list-style: none;
  background-color: var(--toc-bg);
  margin: 0 auto var(--toc-margin-mobile);
  padding-bottom: var(--toc-margin-mobile);
  border-radius: var(--toc-radius-mobile);
}
ul.toc__list--open {
  display: block;
}
ul.toc__list li.toc__item {
  display: flex;
  position: relative;
  margin-left: 0;
  transition: background-color var(--toc-transition);
  color: var(--toc-text-primary);
}
ul.toc__list li.toc__title {
  display: none;
  position: relative;
  margin-left: 0;  
  font-size: var(--toc-title-size);
  color: var(--toc-text-primary);
  padding: var(--toc-padding-link);
}
ul.toc__list li.toc__item a.toc__link {
  width: 100%;
  font-size: var(--toc-link-size);
  color: var(--toc-text-secondary);
  padding: var(--toc-padding-link);
  text-decoration: none;
  transition: color var(--toc-transition);
}
ul.toc__list li.toc__item a.toc__link--child {
  padding-left: var(--toc-link-child-padding-left);
  font-size: var(--toc-link-child-size);
}
ul.toc__list li.toc__item--active a.toc__link,
ul.toc__list li.toc__item:hover a.toc__link,
ul.toc__list li.toc__item a.toc__link:hover,
ul.toc__list li.toc__item a.toc__link--active {
  color: var(--toc-text-primary);
  background-color: var(--toc-item-hover-bg);
}


@media (max-width: 767px) {
  .toc {
    width: 100%;
    background-color: var(--toc-bg);
    margin: 0  auto 2rem;
    border-radius: var(--toc-radius);
    box-shadow: var(--toc-shadow);
    z-index: 9999;
    transition: box-shadow var(--toc-transition),
      background-color var(--toc-transition),
      top var(--toc-transition),
      border-radius var(--toc-transition);
  }
  .toc--fixed {
    position: fixed;
    top: 0;
    width: Calc( 100% - 1.55em);
    border-radius: var(--toc-radius-mobile);*/
  }
  ul.toc__list {
    overflow-y: auto;
    max-height: var(--toc-max-height-mobile);
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .toc__toggle {
    display: none;
  }
  ul.toc__list {
    display: block;
    padding: var(--toc-padding-list);
    overflow-y: visible;
    max-height: none;
    border-radius: var(--toc-radius);
  }
  ul.toc__list li.toc__title {
    display: block; 
  }
  .toc--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: var(--toc-desktop-top-offset);
    margin: var(--toc-margin-desktop);
    max-height: calc(100vh - (var(--toc-desktop-top-offset) * 2));
    overflow-y: auto;
  }
}

@media (min-width: 1024px) {
  .toc--sticky {
    margin: var(--toc-margin-large);
  }
}

/* Abilita una freccia all'hover e all'active 
ul.toc__list li:hover.toc__item::before,
ul.toc__list li.toc__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 36px solid transparent;
  border-bottom: 36px solid transparent;
  border-left: 36px solid var(--toc-bg);
}
*/