.manual {
  color: $text-color;

  .close {
    color: $text-color;
  }

  &-container {
    padding-left: 1px;
    padding-right: 5px;
  }

  &-header,
  &-body {
    background-color: $card-bg;
    color: $text-color;
    overflow-y: hidden;
  }

  .indent-1 {
    padding-left: 2rem;
  }

  .modal-body {
    // reset max-height so that we don't end up with two scroll bars
    max-height: initial;
  }

  .manual-content,
  .manual-toc {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }

  @media (max-width: 992px) {
    .modal-body {
      overflow-y: auto;

      .manual-content,
      .manual-toc {
        max-height: inherit;
        overflow-y: hidden;
      }
    }
  }
}
