/* Large slides iframes */

iframe {
  /* The constant in these values must be adjusted if the theme changes */
  height: calc(100vh - 14ex);
  position: fixed;
  z-index: 1000;
  border-color: #aaa;
  border-style: solid;
}

@media only screen and (max-width: 768px) {
  /* Small screen */
  iframe {
    width: 100%;
    left: 0px;
  }
}

@media only screen and (min-width: 768px) {
  /* Large screen, the sidebar is on the side */
  iframe {
    max-width: calc(min(50vw + 380px, 100vw - 320px));
    width: 1200px;
  }
}

@media print {
  /* Remove the HTML side bar for the generated PDF*/
  .bd-toc {
    visibility: hidden;
  }

  /* Remove the complete side bar for the generated PDF*/
  div.topbar {
    display: none;
  }

  .pr-md-0 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .page_break {
    /* 
        Control where and how page-breaks happen in pdf prints
        This page has a nice guide: https://tympanus.net/codrops/css_reference/break-before/
        This SO link describes how to use it: https://stackoverflow.com/a/1664058
        Simply add an empty div with this class where you want a page break
        like so: <div class="page_break"></div>;
        */
    clear: both;
    page-break-after: always !important;
    break-after: always !important;
  }

  body > hypothesis-sidebar:nth-child(4) {
    display: none;
  }
}

/* Do not display any glossary terms that are siblings of the first term */
dl.glossary dt + dt {
  display: none;
}