.toc_bar {

  position: fixed;
  top: 0;
  right: 0;

  width: calc( 25vw - 10px );
  height: 100vh;
  overflow-y: scroll;
  padding: 15px;

  border-style: solid;
  border-color: tan;
  border-top-width: 0;
  border-left-width: 2px;
  border-right-width: 0;
  border-bottom-width: 0;
  background-color: papayawhip;

}

/* https://stackoverflow.com/a/13354689 */
/* Assign specific icons to the the bullets */
.toc_bar ul {
  list-style: none;
  padding: 0;
}
/* Assign specific icons to the the bullets */
.toc_bar li {padding-left: 2em; }
/* Assign specific icons to the the bullets */
.toc_bar li:before {
  content: "\f111"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.75em;
  width: 2em;

  text-align: center;
}

/* Remove link styling */
.toc_bar a{ color: inherit; }

/* Assign specific icons to the the bullets */
.toc_bar li.hidden { display: none; }
.toc_bar li.incomplete:before { content: '\f096'; }
.toc_bar li.complete:before { content: '\f14a'; }
.toc_bar li.incomplete-o:before { content: '\f10c'; }
.toc_bar li.complete-o:before { content: '\f05d'; }
.toc_bar li.locked:before { content: '\f023'; }
.toc_bar li.warning:before { content: '\f071'; }
.toc_bar li.info:before { content: '\f05a'; }

/* Assign additional styling to list items */
.toc_bar li.current { font-weight: bold; }

/* The emerging W3C standard
   that is currently Firefox-only */
.toc_bar{
  scrollbar-width: thin;
  scrollbar-color: tan papayawhip;
}

/* Works on Chrome/Edge/Safari */
.toc_bar::-webkit-scrollbar {
  width: 12px;
}
.toc_bar::-webkit-scrollbar-track {
  background: papayawhip;
}
.toc_bar::-webkit-scrollbar-thumb {
  background-color: tan;
  border-radius: 20px;
  border: 3px solid papayawhip;
}



.toc_toggler {
  position: absolute;
  right: 15px;
  top: 53px;
  z-index: 2;
}
.toc_bar h3 { margin-top: 5px; }