/*
 * TODO: Once we're fully on Review Board 7+, we can replace
 *       hardcoded values with their Ink equivalents and we
 *       can move the light/dark conditionals out of the
 *       [data-ink-color-scheme] rules.
 */
/* These correspond to --ink-p-container-bg. */
/* These correspond to --ink-p-side-panel-bg. */
/* These correspond to --ink-p-side-panel-border-color. */
/* These correspond to --ink-p-side-panel-fg. */
/* These correspond to --ink-p-side-panel-hover-bg. */
/* These correspond to --rb-theme-diff-move-* definitions. */
/* These correspond to @default-code-theme-light-diff-* definitions. */
/* This corresponds to --rb-g-diff-chunk-border. */
/****************************************************************************
 * 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: #F9F9F9;
}
[data-ink-color-scheme] .pdf-review-ui {
  background: var(--if-dark, #282828) var(--if-light, #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>
 */
.pdf-lower {
  height: 100%;
  position: relative;
}
/**
 * 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: #F3F3F3;
  border-right: 1px 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, #333333) var(--if-light, #F3F3F3);
  border-right: var(--if-dark, 1px rgba(255, 255, 255, 0.2) solid) var(--if-light, 1px 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 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: #F3F3F3;
  color: #000000;
  width: 100%;
  padding: 2px;
}
[data-ink-color-scheme] .pdf-nav-outline ul li .page-link {
  background-color: var(--if-dark, #333333) var(--if-light, #F3F3F3);
  color: var(--if-dark, #FFFFFF) var(--if-light, #000000);
}
.pdf-nav-outline ul li .page-link:hover {
  background-color: 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, rgba(255, 255, 255, 0.05)) var(--if-light, rgba(0, 0, 0, 0.05));
  color: var(--if-dark, #FFFFFF) var(--if-light, #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: 1px 1px rgba(0, 0, 0, 0.12) solid 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: 1px 1px rgba(0, 0, 0, 0.12) solid 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: #65E62D;
  margin: -8px -8px 0.5em -12px;
  padding: 2px 0 2px 8px;
}
.pdf-nav-diffs .pdf-nav-diffs-moved-marker.-is-delete {
  background-color: #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 #65E62D solid;
  margin: -8px 0 0 -12px;
  padding: 8px 0 4px 8px;
}
.pdf-nav-diffs .pdf-nav-diffs-diff.moved.-is-delete {
  border-color: #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);
}
.pdf-controls {
  padding: 0.5em 1em;
  position: relative;
  vertical-align: middle;
  -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-right: 5px;
}
.pdf-controls .powerpack-c-pdf-controls-button[aria-pressed="true"] .rb-c-button__icon {
  opacity: 0.9;
}
.pdf-controls .powerpack-c-pdf-controls-button[aria-pressed="true"] .rb-c-button__icon:hover {
  opacity: 1;
}
.pdf-controls .rb-c-button__icon {
  background-color: #333333;
  background-repeat: no-repeat;
  cursor: pointer;
  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;
}
.pdf-controls-center-outer {
  display: inline-block;
  position: absolute;
  right: 50%;
}
.pdf-controls-center-inner {
  position: relative;
  right: -50%;
}
.pdf-controls-center-inner .pdf-page-info {
  display: inline-block;
  font-size: 110%;
  margin-right: 1em;
  vertical-align: middle;
}
.pdf-controls-center-inner .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-controls-center-inner .pdf-page-info input[type=number]::-webkit-inner-spin-button,
.pdf-controls-center-inner .pdf-page-info input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pdf-controls-center-inner .powerpack-c-pdf-controls-button {
  vertical-align: middle;
}
.pdf-controls-diff-loading {
  display: inline-block;
}
.pdf-controls-sidebar {
  display: inline-block;
  position: relative;
  width: 250px;
}
.pdf-controls-sidebar .fa {
  color: #5C5C5C;
}
.pdf-controls-sidebar .fa.active {
  color: black;
}
.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;
}
.pdf-controls-zoom {
  display: inline-block;
  float: right;
}
.pdf-pages {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  /**
   * A page of a PDF document in the document viewer.
   *
   * Structure:
   *     <div class="pdf-page" id="pdf-page-1">
   *      <div class="selection-container">...</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 region representing a comment on a PDF page.
   *
   * 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.
   *
   * Structure:
   *     <div class="selection [modifiers]">
   *      <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.diff {
  width: 50%;
}
.pdf-pages .pdf-page {
  background-color: #FFFFFF;
  display: block;
  margin: 10px auto;
  overflow: hidden;
  padding: 0;
  cursor: crosshair;
  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>
     */
}
[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 .selection-container {
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 30;
  cursor: crosshair;
}
.pdf-pages .selection {
  border: 1px #a1c0e3 solid;
  position: absolute;
}
.pdf-pages .selection.draft {
  border: 1px #aceb6f solid;
}
.pdf-pages .selection.draft .selection-flag {
  background: #aceb6f;
}
.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: #aceb6f;
  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-flag {
  background-color: #a1c0e3;
  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;
}
.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;
}
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 250% 0;
  }
}
/*# sourceMappingURL=pdf.css.map */