.frame {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

/*** CONTENT ***/

.container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 32px - 88px);
  overflow: auto;
  padding: 16px 24px;
}

.container .toc {
  flex-grow: 1;
  padding-right: 32px;
  overflow: auto;
  border-right: 1px solid #e0e0e0;
  max-width: 350px;
}

.container .content {
  width: 50vw;
  padding-left: 10px;
  margin-left: 88px;
  padding-right: 22vw;
  overflow: auto;

  /* Make stuff more legible */
  line-height: 1.5;
}

.container .content .text {
  margin: 20px 0 20px 0;
  padding: 40px 12% 40px 12%;

  background-color: #fff;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  min-height: 100%;
}

.container .content .text h1, .container .content .text h2 {
  text-align: center;
}

.container .content ul li {
  margin-bottom: 5px;
}

.container .content .roman-list > ul {
  /* list-style-type: upper-roman; */
  list-style-type: none;
  text-indent: -20px;
}

.container .content .roman-list > ol {
  /* list-style-type: upper-roman; */
  list-style-type: none;
  text-indent: -20px;
}

.container .content .paragraph > ul {
  list-style-type: none;
  text-indent: 0;
}

.container .content .paragraph > ul > li::before {
  content: '§ ';
}

.container .content .paragraph > ul > li {
  padding-left: 3px;
}

/* On the first nesting level, show a paragraph sign */
.container .content .nest-1-paragraph ul > li > ul {
  list-style-type: none;
  text-indent: 0;
}

.container .content .nest-1-paragraph ul > li > ul > li::before {
  content: '§ ';
}

.container .content .nest-1-paragraph ul > li > ul > li {
  padding-left: 3px;
}

/* Also have to do it for ordered lists */
.container .content .nest-1-paragraph ol > li > ul {
  list-style-type: none;
  text-indent: 0;
}

.container .content .nest-1-paragraph ol > li > ul > li::before {
  content: '§ ';
}

.container .content .nest-1-paragraph ol > li > ul > li {
  padding-left: 3px;
}

/* On the first nesting level, show a paragraph sign */
.container .content .nest-1-none ul > li > ul {
  list-style-type: none;
  text-indent: -20px;
}


/* Also have to do it for ordered lists */
.container .content .nest-1-none ol > li > ul {
  list-style-type: none;
  text-indent: -20px;
}

/*** TOC ***/

.container .toc h1 {
  margin: 0;
}

.container .toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 16px;
  border-left: 2px solid #e0e0e0;
}

.container .toc ul li ul {
  margin-left: 8px;
}

.container .toc ul li > a.nav-active {
  font-weight: 600;
  color: #444;
}

.container .toc ul li > a.nav-active::before {
  content: '\25B6';
  margin-right: 5px;
  font-size: 14px;
  opacity: 0.6;
}

.container .toc>ul>li>ul {
  display: none;
}

.container .toc>ul>li.expanded>ul {
  display: block;
}

.container .toc>ul>li {
  position: relative;
}

.container .toc>ul>li>button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: #46a9a3;
  border-radius: 3px;
  font-weight: 900;
  font-size: 14px;
  height: 16px;
  line-height: 14px;
  color: white;
  outline: none;
  border: none;
}

.container .toc > ul .article > a {

  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.container .toc > ul > li > ul > li, .container .toc > ul > li {
  margin-top: 8px;
  margin-bottom: 8px;
}

.container .toc > ul > li > ul > li.section, .container .toc > ul > li > a {
  display: flex;
  flex-direction: column;
}

.container .toc > ul > li > ul > li.section span.description {
  font-size: 12px;
  opacity: 0.75;
}

.container .toc > ul > li > ul > li.section span.title {
  font-size: 14px;
}

.container .toc > ul > li > a  {
  color: #424242;
  cursor: pointer;
}

.container .toc > ul > li > a:hover  {
  text-decoration: none;
}

.container .toc > ul > li > a > .description  {
  font-size:12px;
  opacity: 0.75;
}

.container .toc .toc-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .toc .toc-title .collapse-icon, .tappable-icon.mobile-only {
  display: none;
}

.container .toc.visible .toc-title .collapse-icon, .tappable-icon {
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.container .toc.visible .toc-title .collapse-icon > i, .tappable-icon > i {
  font-size: 35px;
  color: rgba(0, 0, 0, 0.65);
}

.big {
  font-weight: 600;
}

/* Breadcrumbs and navigation */
.breadcrumbs {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breadcrumbs .bc {
  /*flex: 1; */
  display: flex;
}

.bc.left {
  justify-content: flex-start;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100px;
}
.bc.right {
  justify-content: flex-end;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100px;
}
.bc.center {
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 0;
}

.clearfix {
  clear: both;
}

/* Desktop exclusive styles */
@media screen and (min-width: 860px) {
  .breadcrumb-bar {
    background-color: #46a9a3;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 40px;
    box-shadow: rgba(70, 169, 163, 0.25) 0px 4px 4px;
    padding-bottom: 3px;
    padding-top: 3px;
  }

  .breadcrumb-bar a, .breadcrumb-bar span {
    color: #fff;
  }

  .breadcrumb-bar span {
    opacity: 0.75;
  }

  .container .toc {
    max-width: 350px;
  }
}

/* Mobile adjustments */

@media screen and (max-width: 859px) {
  .container {
    display: block;
  }

  .container .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .container .toc {
    padding-left: 20px;
    padding-right: 20px;
    border: none;

    margin-right: 0;
  }

  .bc.left, .bc.right {
    display: none;
  }

  .breadcrumbs .navigation {
    display: none;
  }

  /*
   Navigation classes for collapsing/expanding menu
   */

  .container .toc {
    display: none;
  }

  .container .toc.visible {
    display: block;
    position: absolute;
    
    height: 100vh;
    max-width: initial;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    padding-top: 10px;

    overflow: scroll;
    background: #f5f5f5;
  }

  .tappable-icon.mobile-only, .show-on-mobile {
    display: block;
  }

  .breadcrumbs .tappable-icon.mobile-only.only {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
  }
}

@media screen and (max-width: 499px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .container .content .text {
    padding-left: 16px;
    padding-right: 16px;
  }

  .breadcrumbs .tappable-icon.mobile-only {
    margin-right: 16px;
  }
}