#toc{
  display: none;
  width: 200px;
  padding: 10px;
  border-left: 1px solid #ccc;
  background-color: #f7f7f7;
  overflow-y: auto;
}
#tocItems{
  line-height:200%;
}
.tocItem{
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  cursor:pointer;
}

.toch1{
  margin-left:0px;
  font-size: 1.5rem;
}
.toch2{
  margin-left:10px;
  font-size: 1.2rem;
}
.toch3{
  margin-left:20px;
  font-size: 1rem;
}
.toch4{
  margin-left:30px;
  font-size:1rem;
}
.toch5{
  margin-left:30px;
  font-size:1rem;
}
.toch6{
  margin-left:30px;
  font-size:1rem;
}


/* Add styling to the first item in a list */

#tocItems{counter-reset: first}
.toch1 { counter-reset: second third fourth fifth sixth seventh;}
.toch2 { counter-reset: third fourth fifth sixth seventh; }
.toch3 { counter-reset: fourth fifth sixth seventh; }
.toch4 { counter-reset: fifth sixth seventh; }
.toch5 { counter-reset: sixth seventh; }
.toch6 { counter-reset: seventh; }


/* The behavior for incrementing and the prefix */
.toch1:before {
  content: counter(first) ". " ;
  counter-increment: first;
}

.toch2:before {
  content: counter(first) "." counter(second) ". ";
  counter-increment: second;
}

.toch3:before {
  content: counter(first) "." counter(second) "." counter(third) ". ";
  counter-increment: third 1;
}

.toch4:before {
  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) ". ";
  counter-increment: fourth 1;
}

.toch5:before {
  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) ". ";
  counter-increment: fifth 1;
}

.toch6:before {
  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) ". ";
  counter-increment: sixth 1;
}

.activeTOC{
  font-weight: 800;
}

@media (min-width: 1350px) {
  #toc { width: 25% }
  body.comments-active #toc { width: 20% } // a bit smaller when the comment sidebar is visible
}

#ep_table_of_contents-a button {
  transform: rotateY(180deg);
}