/****************************************************************************
 * Office Document Review UI
 ****************************************************************************/
/**
 * A notice about Office document files to display in their review UI.
 *
 * Version Added:
 *     6.0
 *
 * Structure:
 *     <div class="powerpack-c-office-doc-conversion-notice">
 *      <p>...</p>
 *     </div>
 */
.powerpack-c-office-doc-conversion-notice {
  padding-left: 12px;
  flex-basis: 100%;
  order: 2;
}
@media only screen and (max-width: 800px) {
  .powerpack-c-office-doc-conversion-notice {
    display: none;
  }
}
/*# sourceMappingURL=doc-review.css.5187531cb58c.map */
/*
 * TODO: Once we're fully on Review Board 7+, we can move to fully using
 *       Ink variables and move the light/dark conditionals out of the
 *       [data-ink-color-scheme] rules.
 */
/* These correspond to @default-code-theme-light-diff-* definitions. */
/****************************************************************************
 * PDF Thumbnail
 ****************************************************************************/
/**
 * Placeholder text for thumbnails that fail to load.
 *
 * Version Added:
 *     6.0
 *
 * Structure:
 *     <div class="powerpack-c-pdf-thumbnail-placeholder-text">
 *      <span class="rb-icon rb-icon-warning"></span>
 *      ...
 *     </div>
 */
.powerpack-c-pdf-thumbnail-placeholder-text {
  position: relative;
  top: 25%;
}
/****************************************************************************
 * PDF Review UI
 ****************************************************************************/
/**
 * A review UI for PDF documents.
 *
 * Structure:
 *     <div class="pdf-review-ui">
 *      <div class="pdf-controls">...</div>
 *      <div class="pdf-lower">...</div>
 *     </div>
 */
.pdf-review-ui {
  overflow: hidden;
  background: var(--ink-p-container-bg, #F9F9F9);
}
[data-ink-color-scheme] .pdf-review-ui {
  background: var(--if-dark, var(--ink-p-container-bg, #282828)) var(--if-light, var(--ink-p-container-bg, #F9F9F9));
}
/**
 * The lower area of the PDF review UI that contains the document.
 *
 * Structure:
 *     <div class="pdf-lower">
 *      <div class="pdf-nav">...</div>
 *      <div class="pdf-offset">...</div>
 *      <div class="powerpack-c-pdf-scroll-hint">...</div>
 *     </div>
 */
.pdf-lower {
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
/**
 * Hint for scrolling when rendered in inline mode.
 *
 * Structure:
 *     <div class="powerpack-c-pdf-scroll-hint">
 *      <span>...</span>
 *     </div>
 */
.powerpack-c-pdf-scroll-hint {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  color: white;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
}
.powerpack-c-pdf-scroll-hint span {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1em;
  box-shadow: 0 0 1em black;
  padding: 1em;
}
/*
 * When the review UI is rendered "inline" (e.g. as a file in the diff
 * viewer), we block scrolling (or other interaction) until the review UI
 * gains focus.
 *
 * When a comment dialog gets opened, focus will leave the review UI. In this
 * case, we set a -is-editing-comment class on the review UI element so that
 * we don't show the overlay.
 */
.review-ui-inline .pdf-review-ui .pdf-offset,
.review-ui-inline .office-doc-review-ui .pdf-offset {
  overflow-y: hidden;
}
.review-ui-inline .pdf-review-ui:focus-within .pdf-offset,
.review-ui-inline .office-doc-review-ui:focus-within .pdf-offset,
.review-ui-inline .pdf-review-ui.-is-editing-comment .pdf-offset,
.review-ui-inline .office-doc-review-ui.-is-editing-comment .pdf-offset {
  overflow-y: scroll;
}
.review-ui-inline .pdf-review-ui:focus-within .powerpack-c-pdf-scroll-hint,
.review-ui-inline .office-doc-review-ui:focus-within .powerpack-c-pdf-scroll-hint,
.review-ui-inline .pdf-review-ui.-is-editing-comment .powerpack-c-pdf-scroll-hint,
.review-ui-inline .office-doc-review-ui.-is-editing-comment .powerpack-c-pdf-scroll-hint {
  display: none;
}
/**
 * A toolbar of controls for managing commenting modes on a document.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *     aria-label (string):
 *         The label for the commenting mode toolbar.
 *
 *     role (string):
 *         This should always be ``toolbar``.
 *
 * Structure:
 *     <div class="powerpack-c-pdf-controls-comments">
 *      <button class="powerpack-c-pdf-controls-comments__mode">...</button>
 *      ...
 *     </div>
 */
.powerpack-c-pdf-controls-comments {
  background-color: #FEFADF;
  border: 1px solid #BCA626;
  border-radius: 10px;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 31;
  /**
   * A button for toggling a comment mode.
   *
   * Version Added:
   *     6.0
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label stating that this toggles a comment mode.
   *
   *     aria-pressed (string):
   *         ``true`` if the mode is currently active, ``false`` otherwise.
   *
   *     id (string):
   *         A unique ID for the commenting mode of this button.
   *
   *     tabindex (number):
   *         This should always be 0.
   *
   * Structure:
   *     <button class="powerpack-c-pdf-controls-comments__mode"
   *             id="..."
   *             aria-label="..."
   *             aria-pressed="true|false">
   *      <span class="rb-c-button__icon"/>
   *     </button>
   */
}
[data-ink-color-scheme] .powerpack-c-pdf-controls-comments {
  background-color: var(--rb-c-review-request-bg-color);
  border-color: var(--rb-c-review-request-border-color);
  box-shadow: var(--if-dark, 2px 2px 4px 0 rgba(0, 0, 0, 0.2)) var(--if-light, 1px 1px 4px 0 rgba(0, 0, 0, 0.2));
}
.powerpack-c-pdf-controls-comments__mode {
  background: none;
  border: 0;
  border-radius: 8px;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  margin: 0.2em;
  padding: 0.3em;
  width: 18px;
  height: 18px;
  /**
     * An icon for a comment mode button.
     *
     * Version Added:
     *     6.0
     *
     * DOM Attributes:
     *     aria-hidden (string):
     *         This should always be ``true``.
     *
     * Structure:
     *     <span class="rb-c-button__icon" aria-hidden="true"/>
     */
}
[data-ink-color-scheme] .powerpack-c-pdf-controls-comments__mode {
  background: none;
  border: 0;
  border-radius: 8px;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  margin: 0.2em;
  padding: 0.3em;
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .powerpack-c-pdf-controls-comments__mode:hover {
    background: #d9c581;
  }
  [data-ink-color-scheme] .powerpack-c-pdf-controls-comments__mode:hover {
    background: var(--rb-c-review-request-actions-hover-bg);
  }
}
.powerpack-c-pdf-controls-comments__mode[aria-pressed="true"] {
  background: #E5D7A8;
}
[data-ink-color-scheme] .powerpack-c-pdf-controls-comments__mode[aria-pressed="true"] {
  background: var(--if-dark, rgba(0, 0, 0, 0.4)) var(--if-light, #E5D7A8);
}
@media (hover: hover) {
  .powerpack-c-pdf-controls-comments__mode[aria-pressed="true"]:hover {
    background: #d9c581;
  }
  [data-ink-color-scheme] .powerpack-c-pdf-controls-comments__mode[aria-pressed="true"]:hover {
    background: var(--rb-c-review-request-actions-hover-bg);
  }
}
.powerpack-c-pdf-controls-comments__mode .rb-c-button__icon {
  background-color: #333333;
  position: relative;
  left: -5%;
  display: inline-flex;
  background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width: 18px;
  height: 18px;
}
[data-ink-color-scheme] .powerpack-c-pdf-controls-comments__mode .rb-c-button__icon {
  background-color: var(--if-dark, #FFFFFF) var(--if-light, #333333);
}
/**
 * A navigation sidebar for the document.
 *
 * Modifiers:
 *     sidebar-open:
 *         Whether the sidebar is currently open.
 *
 * Structure:
 *     <div class="pdf-nav [sidebar-open]">
 *      <div class="pdf-nav-outline">...</div>
 *      <div class="pdf-nav-pages">...</div>
 *      <div class="pdf-nav-diffs">...</div>
 *     </div>
 */
.pdf-nav {
  background-color: var(--ink-p-side-panel-bg, #F3F3F3);
  border-right: 1px var(--ink-p-side-panel-border-color, rgba(0, 0, 0, 0.2)) solid;
  box-sizing: border-box;
  direction: rtl;
  /* Place the scrollbar on the left. */
  float: left;
  height: 100%;
  left: -251px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5em;
  position: relative;
  transition: left 300ms ease-in-out;
  width: 250px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  /* These must be defined as two rules, or Firefox will drop them both. */
}
.pdf-nav::-moz-selection {
  background: transparent;
}
.pdf-nav::selection {
  background: transparent;
}
.pdf-nav::-moz-selection {
  background: transparent;
}
[data-ink-color-scheme] .pdf-nav {
  background-color: var(--if-dark, var(--ink-p-side-panel-bg, #333333)) var(--if-light, var(--ink-p-side-panel-bg, #F3F3F3));
  border-right: var(--if-dark, 1px var(--ink-p-side-panel-border-color, rgba(255, 255, 255, 0.2)) solid) var(--if-light, 1px var(--ink-p-side-panel-border-color, rgba(0, 0, 0, 0.2)) solid);
}
.pdf-nav.sidebar-open {
  left: 0;
}
.pdf-nav > * {
  /* Restore the text direction of all child elements. */
  direction: ltr;
}
/**
 * The page navigation mode in the sidebar.
 *
 * Structure:
 *     <div class="pdf-nav-pages">
 *      <div class="page-thumbs">...</div>
 *     </div>
 */
.pdf-nav-pages {
  /**
   * The container of page thumbnails.
   *
   * Structure:
   *     <div class="page-thumbs">
   *      <div class="item page-thumb">...</div> [1+]
   *     </div>
   */
  /**
   * A page thumbnail.
   *
   * Modifiers:
   *     selected:
   *         This page is being viewed in the document viewer.
   *
   * Structure:
   *     <div class="item page-thumb [selected]">
   *      <canvas>
   *     </div>
   */
}
.pdf-nav-pages .page-thumbs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.pdf-nav-pages .page-thumb {
  background-color: #FFFFFF;
  border: 1px #ACACAC solid;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  margin: 10px auto;
  width: 120px;
  height: 160px;
  transition: 0.1s transform linear;
}
[data-ink-color-scheme] .pdf-nav-pages .page-thumb {
  background-color: var(--if-dark, #000000) var(--if-light, #FFFFFF);
  border: var(--if-dark, 1px var(--ink-p-side-panel-border-color, rgba(255, 255, 255, 0.2)) solid) var(--if-light, 1px #ACACAC solid);
  box-shadow: var(--if-dark, 2px 2px 4px rgba(0, 0, 0, 0.5)) var(--if-light, 1px 1px 4px rgba(0, 0, 0, 0.15));
}
.pdf-nav-pages .page-thumb:hover {
  border-color: #939393;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  transform: scale(1.12);
  cursor: pointer;
}
[data-ink-color-scheme] .pdf-nav-pages .page-thumb:hover {
  border-color: var(--if-dark, rgba(230, 230, 230, 0.2)) var(--if-light, #939393);
  box-shadow: var(--if-dark, 2px 2px 4px rgba(0, 0, 0, 0.75)) var(--if-light, 1px 1px 4px rgba(0, 0, 0, 0.25));
}
.pdf-nav-pages .page-thumb.selected {
  border-color: #939393;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
  top: -1px;
  left: -1px;
  transform: scale(1.08);
}
[data-ink-color-scheme] .pdf-nav-pages .page-thumb.selected {
  border-color: var(--if-dark, rgba(230, 230, 230, 0.2)) var(--if-light, #939393);
  box-shadow: var(--if-dark, 2px 2px 6px rgba(0, 0, 0, 0.9)) var(--if-light, 1px 1px 4px rgba(0, 0, 0, 0.35));
}
.pdf-nav-pages .page-thumb.selected:hover {
  transform: scale(1.12);
  cursor: pointer;
}
/**
 * The outline navigation mode in the sidebar.
 *
 * Structure:
 *     <div class="pdf-nav-outline">
 *      <ul>
 *       <li>...</li> [0+]
 *      </ul>
 *     </div>
 */
.pdf-nav-outline ul {
  padding: 0;
  margin: 0 0 0 1.5em;
  /**
     * One item in the list of outline items.
     *
     * Structure:
     *     <li>
     *      <div class="disclosure">...</div>
     *      <div class="page-link">...</div>
     *     </li>
     */
}
.pdf-nav-outline ul li {
  list-style: none;
  padding: 2px;
  /**
       * A triangle icon indicating whether sub-items are expanded.
       *
       * This can be empty if there are no sub-items for the item.
       *
       * Structure:
       *     <div class="disclosure">...</div>
       */
  /**
       * The text representing the outline item.
       *
       * Structure:
       *     <div class="page-link">...</div>
       */
}
.pdf-nav-outline ul li .disclosure {
  position: relative;
  cursor: pointer;
  visibility: hidden;
  margin-left: -1.5em;
  float: left;
}
.pdf-nav-outline ul li .page-link {
  background-color: var(--ink-p-side-panel-bg, #F3F3F3);
  color: var(--ink-p-side-panel-fg, #000000);
  width: 100%;
  padding: 2px;
}
[data-ink-color-scheme] .pdf-nav-outline ul li .page-link {
  background-color: var(--if-dark, var(--ink-p-side-panel-bg, #333333)) var(--if-light, var(--ink-p-side-panel-bg, #F3F3F3));
  color: var(--if-dark, var(--ink-p-side-panel-fg, #FFFFFF)) var(--if-light, var(--ink-p-side-panel-fg, #000000));
}
.pdf-nav-outline ul li .page-link:hover {
  background-color: var(--ink-p-side-panel-hover-bg, rgba(0, 0, 0, 0.05));
  cursor: pointer;
}
[data-ink-color-scheme] .pdf-nav-outline ul li .page-link:hover {
  background-color: var(--if-dark, var(--ink-p-side-pane-hover-bg, rgba(255, 255, 255, 0.05))) var(--if-light, var(--ink-p-side-panel-hover-bg, rgba(0, 0, 0, 0.05)));
  color: var(--if-dark, var(--ink-p-side-panel-fg, #FFFFFF)) var(--if-light, var(--ink-p-side-panel-fg, #000000));
}
/**
 * The diffs navigation mode in the sidebar.
 *
 * Structure:
 *     <div class="pdf-nav-diffs">
 *      <ul>
 *       <li class="page-link">...</li> [0+]
 *      </ul>
 *     </div>
 */
.pdf-nav-diffs {
  margin: -0.5em;
  /**
   * One diff in the list of diffs.
   *
   * Modifiers:
   *     pdf-nav-diffs-delete:
   *         This diff represents a deletion.
   *
   *     pdf-nav-diffs-insert:
   *         This diff represents an insertion.
   *
   * Structure:
   *     <li class="page-link
   *                [pdf-nav-diffs-delete |
   *                 pdf-nav-diffs-insert]">
   *      <div class="pdf-nav-diffs-moved-marker">...</div> [0,1]
   *      <div class="pdf-nav-diffs-diff">...</div>
   *     </li>
   */
  /**
   * The moved marker for a diff.
   *
   * Modifiers:
   *     -is-delete:
   *         This diff represents a deletion.
   *
   *     -is-insert:
   *         This diff represents an insertion.
   *
   * Structure:
   *     <div class="pdf-nav-diffs-moved-marker
   *                [-is-delete |
   *                 -is-insert]">
   *     </div>
   */
  /**
   * The content of a diff.
   *
   * Modifiers:
   *     -is-delete:
   *         This diff represents a deletion.
   *
   *     -is-insert:
   *         This diff represents an insertion.
   *
   *     moved:
   *         This diff represents a move.
   *
   * Structure:
   *     <div class="page-link
   *                [-is-delete |
   *                 -is-insert]
   *                [moved]">
   *      <strong>...</strong>
   *      <span>...</span>
   *     </div>
   */
}
.pdf-nav-diffs ul {
  margin: 0;
  padding: 0;
}
.pdf-nav-diffs .page-link {
  list-style: none;
  padding: 8px 8px 8px 12px;
  width: calc(100% - 8px + 12px);
}
.pdf-nav-diffs .page-link:hover {
  cursor: pointer;
}
.pdf-nav-diffs .page-link.pdf-nav-diffs-delete {
  background-color: #F6DBDF;
  border-bottom: var(--rb-g-diff-chunk-border, 1px rgba(0, 0, 0, 0.12) solid);
}
[data-ink-color-scheme] .pdf-nav-diffs .page-link.pdf-nav-diffs-delete {
  background: var(--rb-theme-diff-delete-linenum-bg);
}
.pdf-nav-diffs .page-link.pdf-nav-diffs-insert {
  background-color: #CFF2CA;
  border-bottom: var(--rb-g-diff-chunk-border, 1px rgba(0, 0, 0, 0.12) solid);
}
[data-ink-color-scheme] .pdf-nav-diffs .page-link.pdf-nav-diffs-insert {
  background: var(--rb-theme-diff-insert-linenum-bg);
}
.pdf-nav-diffs .pdf-nav-diffs-moved-marker {
  background-color: var(--rb-theme-diff-move-from-flag-bg, #65E62D);
  margin: -8px -8px 0.5em -12px;
  padding: 2px 0 2px 8px;
}
.pdf-nav-diffs .pdf-nav-diffs-moved-marker.-is-delete {
  background-color: var(--rb-theme-diff-move-to-flag-bg, #F6A8A8);
}
.pdf-nav-diffs .pdf-nav-diffs-diff {
  /* Ellipsize the text contents. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pdf-nav-diffs .pdf-nav-diffs-diff.moved {
  border-left: 4px var(--rb-theme-diff-move-from-flag-bg, #65E62D) solid;
  margin: -8px 0 0 -12px;
  padding: 8px 0 4px 8px;
}
.pdf-nav-diffs .pdf-nav-diffs-diff.moved.-is-delete {
  border-color: var(--rb-theme-diff-move-to-flag-bg, #F6A8A8);
}
.pdf-offset {
  overflow: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: left 300ms ease-in-out, width 300ms ease-in-out;
}
.pdf-offset.diff {
  width: 50%;
}
.pdf-offset.diff-right {
  left: 50%;
}
.pdf-offset.sidebar-open {
  left: 250px;
  width: calc(100% -  250px);
}
.pdf-offset.sidebar-open.diff {
  width: calc(50% -  250px / 2);
}
.pdf-offset.sidebar-open.diff-right {
  left: calc(50% +  250px / 2);
}
/**
 * The document controls in the header area of the review UI.
 *
 * Structure:
 *     <div class="pdf-controls review-ui-header">
 *      <div class="pdf-controls-sidebar"></div>
 *      <div class="pdf-controls-page"></div>
 *      <div class="pdf-controls-zoom"></div>
 *      <div class="pdf-controls-revision"></div>
 *     </div>
 */
.pdf-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.5em 1em;
  position: relative;
  row-gap: 0.5em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  /* These must be defined as two rules, or Firefox will drop them both. */
  /**
   * A button for a document control in the header area of the review UI.
   *
   * Version Added:
   *     5.3
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label for the control button.
   *
   *     aria-pressed (string):
   *         This should be ``true`` if the control represented by the
   *         button is currently active, ``false`` otherwise.
   *
   *     id (string):
   *         A unique ID for the button.
   *
   *     tabindex (number):
   *         This should always be 0.
   *
   *     title (string):
   *         A title for the button.
   *
   * Structure:
   *     <button class="powerpack-c-pdf-controls-button"
   *             id="..."
   *             aria-label="..."
   *             aria-pressed="true|false"
   *             title="..."
   *             tabindex="0">
   *      <span class="rb-c-button__icon"/>
   *     </button>
   */
  /**
   * An icon for a document control button.
   *
   * Version Added:
   *     5.3
   *
   * DOM Attributes:
   *     aria-hidden (string):
   *         This should always be ``true``.
   *
   * Structure:
   *     <span class="rb-c-button__icon" aria-hidden="true"/>
   */
}
.pdf-controls::-moz-selection {
  background: transparent;
}
.pdf-controls::selection {
  background: transparent;
}
.pdf-controls::-moz-selection {
  background: transparent;
}
.pdf-controls #pdf-scroll-lock {
  margin-left: 2em;
  vertical-align: middle;
}
.pdf-controls #pdf-scroll-lock-label {
  vertical-align: middle;
  font-size: 110%;
}
.pdf-controls .powerpack-c-pdf-controls-button {
  border: none;
  background: none;
  padding: 0;
  margin-left: 0.5em;
}
.pdf-controls .powerpack-c-pdf-controls-button[aria-pressed="true"] .rb-c-button__icon {
  opacity: 1;
}
.pdf-controls .powerpack-c-pdf-controls-button[aria-pressed="true"] .rb-c-button__icon:hover {
  opacity: 0.9;
}
.pdf-controls .rb-c-button__icon {
  background-color: #333333;
  background-repeat: no-repeat;
  display: inline-flex;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
[data-ink-color-scheme] .pdf-controls .rb-c-button__icon {
  background-color: var(--if-dark, #FFFFFF) var(--if-light, #333333);
}
.pdf-controls .rb-c-button__icon:hover {
  opacity: 1;
}
/**
 * Controls for managing the pages of the document(s) being reviewed.
 *
 * Version Changed:
 *     6.0:
 *     Added the -has-diff modifier.
 *
 * Modifiers:
 *     -has-diff:
 *         Whether there are two documents being diffed. If ``true`` a lock
 *         scroll checkbox will be displayed.
 *
 * Structure:
 *     <div class="pdf-controls-page [-has-diff]">
 *      <div class="pdf-page-info">...</div>
 *      <button class="powerpack-c-pdf-controls-button"
 *              id="powerpack-pdf-page-prev">
 *       ...
 *      </button>
 *      <button class="powerpack-c-pdf-controls-button"
 *              id="powerpack-pdf-page-next">
 *       ...
 *      </button>
 *      <input type="checkbox" id="pdf-scroll-lock">
 *      <label for="pdf-scroll-lock" id="pdf-scroll-lock-label">...</label>
 *     </div>
 */
.pdf-controls-page {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 424px) {
  .pdf-controls-page.-has-diff {
    /*
      * This will make the page controls take up the second row of controls,
      * and the revision controls will be on the third row.
      */
    flex-basis: 100%;
    order: 1;
  }
}
.pdf-controls-page .powerpack-c-pdf-controls-button {
  vertical-align: middle;
}
@media only screen and (max-width: 800px) {
  .pdf-controls-page .powerpack-c-pdf-controls-button {
    display: none;
  }
}
.pdf-page-info {
  display: inline-block;
  font-size: 110%;
  margin-right: 1em;
  vertical-align: middle;
}
.pdf-page-info input {
  border: 1px rgba(0, 0, 0, 0.3) solid;
  font: inherit;
  min-width: 2em;
  padding: 2px 4px;
  text-align: right;
}
.pdf-page-info input[type=number]::-webkit-inner-spin-button,
.pdf-page-info input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pdf-controls-diff-loading {
  display: inline-block;
}
.pdf-controls-sidebar {
  display: inline-block;
  position: relative;
  width: 250px;
}
@media only screen and (max-width: 800px) {
  .pdf-controls-sidebar {
    width: 100px;
  }
}
.pdf-controls-sidebar-modes {
  display: inline-block;
  opacity: 0;
  position: absolute;
  right: 1em;
  transition: opacity 300ms ease-in-out;
}
.pdf-controls-sidebar-modes.sidebar-open {
  opacity: 1;
}
@media only screen and (max-width: 800px) {
  .pdf-controls-sidebar-modes {
    left: 3em;
    width: -moz-max-content;
    width: max-content;
  }
}
/**
 * Controls for the zoom level of a document.
 *
 * Version Changed:
 *     6.0:
 *     Added a dropdown menu version of the controls, denoted by the
 *     -is-mobile modifier.
 *
 * Modifiers:
 *     -is-mobile:
 *         This is the dropdown menu version of the controls used in mobile.
 *
 * Structure:
 *     <div class="pdf-controls-zoom [-is-mobile]">
 *      <button class="powerpack-c-pdf-controls-button">...</button>
 *      ...
 *     </div>
 */
.pdf-controls-zoom {
  display: flex;
  /*
   * This gives the zoom controls around the same width as the sidebar
   * navigation menu so that the page controls will appear centered in the
   * middle of the two.
   */
  margin-left: 10%;
}
@media only screen and (max-width: 800px) {
  .pdf-controls-zoom {
    margin-left: auto;
  }
}
.pdf-controls-zoom.-is-mobile {
  margin-left: 0;
}
.pdf-controls-zoom.-is-mobile .rb-c-menu-button__toggle {
  background: none;
  border: none;
  color: #333333;
  gap: 0.25em;
  padding: 0;
}
[data-ink-color-scheme] .pdf-controls-zoom.-is-mobile .rb-c-menu-button__toggle {
  color: var(--if-dark, #FFFFFF) var(--if-light, #333333);
  gap: var(--ink-u-sapcing-xs);
}
.pdf-controls-zoom.-is-mobile .rb-c-menu {
  background: #F9F9F9;
  border: 1px rgba(0, 0, 0, 0.3) solid;
}
[data-ink-color-scheme] .pdf-controls-zoom.-is-mobile .rb-c-menu {
  background: var(--ink-c-menu-bg);
  border: var(--ink-c-menu-border);
}
[data-ink-color-scheme] .pdf-controls-zoom.-is-mobile .rb-c-menu__item:focus,
[data-ink-color-scheme] .pdf-controls-zoom.-is-mobile .rb-c-menu__item:hover {
  background: var(--ink-c-menu-item-selected-bg);
}
/**
 * Controls for the revision selection of a document.
 *
 * Structure:
 *     <div class="pdf-controls-revision">
 *      <div id="revision_label"></div>
 *      <div id="attachment_revision_selector"></div>
 *     </div>
 */
.pdf-controls-revision {
  flex-basis: 100%;
  order: 2;
}
@media only screen and (max-width: 800px) {
  .pdf-controls-revision #revision_label {
    display: none;
  }
}
/**
 * The pages of a PDF document in the document viewer.
 *
 * Version Changed:
 *     6.0:
 *     Added the -is-error and -is-loading modifiers, and .pdf-pages__error
 *     and .pdf-pages__loading-spinner elements.
 *
 * Modifiers:
 *     -is-error:
 *         The document could not load. An error message will be shown
 *         instead of the PDF pages.
 *
 *     -is-loading:
 *         The document is currently loading. A loading spinner will be
 *         shown instead of the PDF pages.
 *
 * Structure:
 *     <div class="pdf-pages [modifiers]">
 *      <div class="pdf-page" id="pdf-page-1">...</div>
 *      <div class="pdf-page" id="pdf-page-2">...</div>
 *      ...
 *     </div>
 */
.pdf-pages {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  /**
   * An error icon and message for a PDF document.
   *
   * If the document could not load, this appears in the document viewer
   * instead of the PDF document pages.
   *
   * Version Added:
   *     6.0
   *
   * Structure:
   *     <div class="pdf-pages__error">
   *      <span class="rb-icon rb-icon-warning"></span>
   *      ...
   *     </div>
   */
  /**
   * A loading spinner for a PDF document.
   *
   * While the document is loading, this appears in the document viewer
   * instead of the PDF document pages.
   *
   * Version Added:
   *     6.0
   *
   * Structure:
   *     <div class="pdf-pages__loading-spinner">
   *      <span class="djblets-o-spinner"></span>
   *      Loading document...
   *     </div>
   */
  /**
   * A page of a PDF document in the document viewer.
   *
   * Structure:
   *     <div class="pdf-page" id="pdf-page-1">
   *      <div class="selection-container powerpack-c-pdf-text-layer">...</div>
   *      <canvas class="pdf-canvas"></canvas>
   *     </div>
   */
  /**
   * A container for the visual representation of comments on a PDF page.
   *
   * Structure:
   *     <div class="selection-container">
   *      <div class="selection-rect"></div>
   *      <div class="selection">...</div>
   *      <div class="selection">...</div>
   *      ...
   *     </div>
   */
  /**
   * A selection representing a comment on a PDF page.
   *
   * This can either be a region selection on the page, or line(s) of
   * selected text on the page.
   *
   * Version Changed:
   *     6.0:
   *     Added the ``is-text-selection`` modifier and ``selection__line``
   *     child element to support text selection comments.
   *
   * Modifiers:
   *     can-update-bound:
   *         Whether the bounds for the region of the comment can be
   *         updated by moving and resizing the region. If set, the
   *         .resize-icon div will be shown.
   *
   *     draft:
   *         Whether the comment is a draft.
   *
   *     -is-text-selection:
   *         Whether the comment is a text selection, rather than a region
   *         selection on the PDF page. If true, rectangles representing
   *         the selected line(s) of text will be present in the element,
   *         and there will be no .resize-icon div.
   *
   *         Version Added:
   *             6.0
   *
   * Structure:
   *     <div class="selection [modifiers]">
   *      <span class="selection__line"></span>
   *      <div class="resize-icon"></div>
   *      <div class="selection-flag">...</div>
   *     </div>
   */
  /**
   * A flag showing the number of comments mapped to the selection region.
   *
   * Structure:
   *     <div class="selection-flag"></div>
   */
  /**
   * A bounding box shown when creating a comment's selection region.
   *
   * Structure:
   *     <div class="selection-rect"></div>
   */
}
.pdf-pages.-is-error,
.pdf-pages.-is-loading {
  position: relative;
  top: 50%;
  display: flex;
  justify-content: center;
}
.pdf-pages__error {
  text-align: center;
}
.pdf-pages.diff {
  width: 50%;
}
.pdf-pages .pdf-page {
  background-color: #FFFFFF;
  display: block;
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  padding: 0;
  width: 300px;
  height: 400px;
  border: 1px #999 solid;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  /**
     * The canvas for a PDF page.
     *
     * Structure:
     *     <canvas class="pdf-canvas"></canvas>
     */
  /**
     * A container for the text lines of a document.
     *
     * This is a transparent layer of text overlaid on the document,
     * which allows for text selection and searching.
     *
     * This is the same element as the selection-container element.
     *
     * Version Added:
     *     6.0
     *
     * Modifiers:
     *     -has-text-comment-mode-enabled:
     *         Text selection commenting is enabled.
     *
     *     -is-selecting-text:
     *         Whether text is currently being selected.
     *
     * Structure:
     *     <div class="powerpack-c-pdf-text-layer [modifiers]">
     *      <span class="powerpack-c-pdf-text-layer__line"
     *            id="powerpack-c-pdf-text-layer__line-1-page-1">
     *       ...
     *      </span>
     *      <span class="powerpack-c-pdf-text-layer__line"
     *            id="powerpack-c-pdf-text-layer__line-2-page-1">
     *       ...
     *      </span>
     *      ...
     *      <div class="powerpack-c-pdf-text-layer__end-of-content"></div>
     *     </div>
     */
}
[data-ink-color-scheme] .pdf-pages .pdf-page {
  background-color: var(--if-dark, #000000) var(--if-light, #FFFFFF);
  border: var(--if-dark, 1px rgba(255, 255, 255, 0.2) solid) var(--if-light, 1px #999 solid);
  box-shadow: var(--if-dark, 2px 2px 4px rgba(0, 0, 0, 0.5)) var(--if-light, 1px 1px 4px rgba(0, 0, 0, 0.15));
}
.pdf-pages .pdf-page canvas {
  position: relative;
  top: 0;
  left: 0;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: clip;
  line-height: 1;
  /**
       * A line of text in a document.
       *
       * Version Added:
       *     6.0
       *
       * Structure:
       *     <span class="powerpack-c-pdf-text-layer__line"
       *           id="powerpack-c-pdf-text-layer__line-1-page-1">
       *       ...
       *     </span>
       */
  /**
       * A hyperlink in a document.
       *
       * Version Added:
       *     6.0
       *
       * Structure:
       *     <a class="powerpack-c-pdf-text-layer__link" href="...">
       *       ...
       *     </a>
       */
  /**
       * An empty element that helps make text selection smooth.
       *
       * Version Added:
       *     6.0
       *
       * Structure:
       *     <div class="powerpack-c-pdf-text-layer__end-of-content"></div>
       */
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer.-has-text-comment-mode-enabled ::-moz-selection {
  /**
           * This HEX value corresponds to the background color for
           * .selection__line with an opacity of 30%.
           */
  background: #93ee6f4d;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer.-has-text-comment-mode-enabled ::selection {
  /**
           * This HEX value corresponds to the background color for
           * .selection__line with an opacity of 30%.
           */
  background: #93ee6f4d;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer.-has-text-comment-mode-enabled br::-moz-selection {
  background: transparent;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer.-has-text-comment-mode-enabled br::selection {
  background: transparent;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer.-is-selecting-text .powerpack-c-pdf-text-layer__end-of-content {
  top: 0;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer__line {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  z-index: 31;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer__link {
  display: block;
  color: transparent;
  position: absolute;
  z-index: 31;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer br::-moz-selection {
  background: transparent;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer br::selection {
  background: transparent;
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer ::-moz-selection {
  background: rgba(0, 0, 255, 0.2);
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer ::selection {
  background: rgba(0, 0, 255, 0.2);
}
.pdf-pages .pdf-page .powerpack-c-pdf-text-layer__end-of-content {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 30;
}
.pdf-pages .selection-container {
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 30;
  cursor: crosshair;
}
.pdf-pages .selection {
  border: 1px var(--rb-p-flag-published-bg, #B0D0FF) solid;
  position: absolute;
  /**
     * Selections need a higher z-index than the lines in the text layer,
     * otherwise they can't be clicked on when overlapping with text.
     */
  z-index: 32;
  /**
     * A rectangle representing a line of selected text on the page.
     *
     * There can be one or more of these in a text selection comment.
     *
     * Version Added:
     *     6.0
     *
     * Structure:
     *     <div class="selection__line">...</div>
     */
}
.pdf-pages .selection.-is-text-selection {
  position: relative;
  border: none;
  /**
       * Disable pointer events for the bounding rectangle of text selections.
       *
       * This will allow users to select text that falls within the bounding
       * rectangle of an existing text selection comment but is not actually
       * part of the selected text for that comment.
       *
       * Pointer events should still be enabled for the children of the
       * selection element, such as the selection flag and selection
       * lines.
       */
  pointer-events: none;
}
.pdf-pages .selection.-is-text-selection .selection-flag {
  position: absolute;
  pointer-events: auto;
  /**
         * This places the selection flag above the first line in the text
         * selection comment, with a small gap in between.
         */
  top: -2.2em;
}
.pdf-pages .selection.-is-text-selection.draft {
  border: none;
}
.pdf-pages .selection.-is-text-selection.draft.can-update-bound .selection-flag {
  cursor: pointer;
}
.pdf-pages .selection.draft {
  border: 1px var(--rb-p-flag-draft-bg, #D1F5A9) solid;
}
.pdf-pages .selection.draft .selection-flag {
  background: var(--rb-p-flag-draft-bg, #D1F5A9);
  color: var(--rb-p-flag-draft-fg, #0D570D);
}
.pdf-pages .selection.draft.can-update-bound {
  /**
         * An icon indicating that a selection region can be resized.
         *
         * Structure:
         *     <div class="resize-icon"></div>
         */
}
.pdf-pages .selection.draft.can-update-bound .resize-icon {
  background-color: var(--rb-p-flag-draft-bg, #D1F5A9);
  bottom: 0;
  right: 0;
  position: absolute;
  height: 0.5em;
  width: 0.5em;
  cursor: se-resize;
}
.pdf-pages .selection.draft.can-update-bound .selection-flag {
  cursor: move;
}
.pdf-pages .selection.draft .selection__line {
  background-color: var(--ink-p-light__green-300, #93EE6F);
}
.pdf-pages .selection__line {
  background-color: var(--ink-p-light__blue-500, #88B9FF);
  position: absolute;
  opacity: 30%;
  cursor: pointer;
  pointer-events: auto;
}
.pdf-pages .selection-flag {
  background-color: var(--rb-p-flag-published-bg, #B0D0FF);
  color: var(--rb-p-flag-published-fg, #102640);
  cursor: pointer;
  height: 2em;
  left: 0px;
  line-height: 170%;
  text-align: center;
  top: 0px;
  width: 2em;
}
.pdf-pages .selection-rect {
  border: 1px #ff0000 dashed;
  position: absolute;
}
/**
 * Content of a modal box dialog shown when opening a link on a PDF.
 *
 * Version Added:
 *     6.0
 *
 * Structure:
 *     <div class="powerpack-c-pdf-open-link-dialog modalbox-contents">
 *      <p>...</p>
 *      <p>...</p>
 *      <input type="checkbox" id="stopLinkDlg">
 *      <label for="stopLinkDlg">...</label>
 *      <button type="button" class="ink-c-button -is-primary">...</button>
 *      <button type="button" class="ink-c-button">...</button>
 *     </div>
 */
.powerpack-c-pdf-open-link-dialog input,
.powerpack-c-pdf-open-link-dialog label {
  vertical-align: middle;
}
.pdf-comment-page-number {
  border-top: 1px #808080 solid;
  margin-top: 0.5em;
  padding: 0 0.5em;
  text-align: right;
}
.review-ui-box .box-container {
  margin-bottom: 0;
}
.pdf-shimmer {
  background-color: #eeeeee;
  background-image: linear-gradient(to right, #eeeeee 0%, #888888 40%, #eeeeee 80%, #eeeeee 100%);
  background-repeat: no-repeat;
  background-size: 800px 100%;
  opacity: 0.05;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 130;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
}
.tooltip.comments {
  z-index: 30;
}
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 250% 0;
  }
}
.review-ui-prev-attachment,
.review-ui-next-attachment {
  /* This needs to be higher than the z-index in the .selection container. */
  z-index: 31;
}
/**
 * A PDF.js element used in text layer rendering.
 *
 * This copies the rule that PDF.js has in their viewer.
 */
.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
/*# sourceMappingURL=pdf.css.65b0fd156dc8.map */