body.paginate {
  padding: 0;
  margin: 0;
}

#rendered-md {
  font-size: var(--user-font-size);
  font-family: var(--user-font-family);
  line-height: 1.5em;
  text-align: var(--user-text-align);
}

@media screen {
  :root {
    --viewer-toolbar-height: 40px;
  }
  body.paginate, body.paginate #joplin-container-content {
    overflow: hidden;
  }
  body.paginate {
    /* Scroll display math regions to prevent them from escaping the page. */
  }
  body.paginate .katex-display {
    overflow-x: auto;
    max-height: var(--max-content-height);
    /* Prevents an unnecessary vertical scrollbar from being visible. */
    padding-bottom: 1em;
  }
  body.paginate pre {
    white-space: pre-wrap;
    overflow-x: unset;
    overflow-y: unset;
  }
  body.paginate.-scroll-code-blocks pre {
    /* Reserve 5px for a scrollbar. */
    white-space: pre;
    max-height: calc(var(--max-content-height) - 5px);
    overflow-x: auto;
    overflow-y: auto;
    break-inside: avoid-column;
    /* Override the Joplin default styles on mobile. */
  }
  body.paginate.-scroll-code-blocks pre > code {
    white-space: pre;
  }
  .-custom-max-width #rendered-md {
    max-width: min(var(--user-max-width), 100vw);
    margin-left: auto;
    margin-right: auto;
  }
  .paginated-element.paginated-element, #rendered-md.paginaged-element {
    --max-content-height: calc(100vh - var(--viewer-toolbar-height));
    overflow-y: clip;
    overflow-x: auto;
    scroll-behavior: smooth;
    --margin: 70px;
    height: 100vh;
    --page-size: 100vw;
    width: 100vw;
    padding: 0;
    margin: 0;
    padding-left: calc(var(--margin) / 2);
    padding-right: calc(var(--margin) / 2);
    padding-bottom: 30px !important; /* !important overrides the viewer's default styling */
    padding-top: var(--viewer-toolbar-height);
    column-width: calc(var(--page-size) - var(--margin));
    column-gap: var(--margin);
    box-sizing: border-box;
  }
  .paginated-element.paginated-element.-loading, .paginated-element.paginated-element.-resizing, #rendered-md.paginaged-element.-loading, #rendered-md.paginaged-element.-resizing {
    scroll-behavior: auto;
  }
  .paginated-element.paginated-element.-resizing, #rendered-md.paginaged-element.-resizing {
    overflow: hidden;
  }
  .viewer-toolbar {
    height: var(--viewer-toolbar-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: end;
    /* Pass pointer events through to elements behind the toolbar. */
    pointer-events: none;
  }
  .viewer-toolbar > button {
    background-color: transparent;
    border: none;
    color: inherit;
    border-radius: 2em;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    pointer-events: auto;
    border: 2px solid transparent;
    transition: 0.2s ease opacity;
  }
  .viewer-toolbar > button:focus-visible, .viewer-toolbar > button:hover {
    border: 2px solid currentcolor;
    background-color: color-mix(in srgb, currentcolor 10%, transparent 90%);
    opacity: 1;
  }
}
@media print {
  .reader-button {
    display: none;
  }
  .reader-page-number {
    display: none;
  }
  .viewer-toolbar {
    display: none;
  }
}
.reader-button {
  position: fixed;
  background-color: rgba(100, 100, 100, 0.1);
  color: inherit;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 1px;
  opacity: 0.4;
  font-size: 1.4rem;
  top: 20vh;
  min-height: 40vh;
  transition: font-size 0.4s ease, opacity 0.4s ease;
}
.reader-button.-left {
  left: 0;
  padding-right: 7px !important;
  padding-left: 3px !important;
}
.reader-button.-right {
  right: 0;
  padding-left: 7px !important;
  padding-right: 3px !important;
}
.reader-button:hover, .reader-button:focus-visible {
  font-weight: bold;
  opacity: 0.8;
}
.reader-button[disabled] {
  opacity: 0.1;
}

.reader-page-number {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: min-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  background-color: transparent;
  color: inherit;
}

.viewer-settings-dialog {
  background-color: white;
  color: black;
  opacity: 0;
  border-radius: 2em;
  /* Animating dialogs: See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
  transition: opacity 0.4s ease allow-discrete, display 0.4s ease allow-discrete;
}
.viewer-settings-dialog > .close {
  /* Center */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.viewer-settings-dialog[open] {
  opacity: 1;
}
.viewer-settings-dialog::backdrop {
  transition: display 0.4s ease allow-discrete, overlay 0.4s ease allow-discrete;
}

@starting-style {
  .viewer-settings-dialog[open] {
    opacity: 0;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .viewer-settings-dialog {
    background-color: #222;
    color: white;
  }
}