/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 .pdfViewer .page {
    direction: ltr;
    width: 816px;
    height: 1056px;
    margin: var(--page-margin);
    position: relative;
    overflow: visible;
    border: var(--page-border);
    background-clip: content-box;
    -o-border-image: url(images/shadow.png) 9 9 repeat;
      border-image: url(images/shadow.png) 9 9 repeat;
    background-color: rgba(255, 255, 255, 1);
  }

  .pdfViewer .page .loadingIcon {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("images/loading-icon.gif") center no-repeat;
  }

  :root {
    --toolbar-icon-opacity: 0.7;
    --doorhanger-icon-opacity: 0.9;

    --main-color: rgba(12, 12, 13, 1);
    --body-bg-color: rgba(237, 237, 240, 1);
    --errorWrapper-bg-color: rgba(255, 110, 110, 1);
    --progressBar-color: rgba(10, 132, 255, 1);
    --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
    --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
    --scrollbar-color: auto;
    --scrollbar-bg-color: auto;
    --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
    --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);

    --sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
    --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
    --toolbar-bg-color: rgba(249, 249, 250, 1);
    --toolbar-border-color: rgba(204, 204, 204, 1);
    --button-hover-color: rgba(221, 222, 223, 1);
    --toggled-btn-color: rgba(0, 0, 0, 1);
    --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
    --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
    --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
    --separator-color: rgba(0, 0, 0, 0.3);
    --field-color: rgba(6, 6, 6, 1);
    --field-bg-color: rgba(255, 255, 255, 1);
    --field-border-color: rgba(187, 187, 188, 1);
    --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
    --treeitem-color: rgba(0, 0, 0, 0.8);
    --treeitem-hover-color: rgba(0, 0, 0, 0.9);
    --treeitem-selected-color: rgba(0, 0, 0, 0.9);
    --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
    --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
    --doorhanger-bg-color: rgba(255, 255, 255, 1);
    --doorhanger-border-color: rgba(12, 12, 13, 0.2);
    --doorhanger-hover-color: rgba(12, 12, 13, 1);
    --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
    --doorhanger-separator-color: rgba(222, 222, 222, 1);
    --overlay-button-border: 0 none;
    --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
    --overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);

    --loading-icon: url(images/loading.svg);
    --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
    --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
    --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
    --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
    --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
    --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
    --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
    --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
    --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
    --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
    --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
    --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
    --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
    --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
    --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
    --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
    --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
    --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
    --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
    --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
    --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
    --findbarButton-next-icon: url(images/findbarButton-next.svg);
    --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
    --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
    --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
    --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
    --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
    --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
    --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
    --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
    --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
    --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
    --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
    --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
    --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
    --speechPauseToolbarButton-icon: url(light-icons/pause-circle.svg);
   
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --main-color: rgba(249, 249, 250, 1);
      --body-bg-color: rgba(42, 42, 46, 1);
      --errorWrapper-bg-color: rgba(169, 14, 14, 1);
      --progressBar-color: rgba(0, 96, 223, 1);
      --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
      --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
      --scrollbar-color: rgba(121, 121, 123, 1);
      --scrollbar-bg-color: rgba(35, 35, 39, 1);
      --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
      --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);

      --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
      --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
      --toolbar-bg-color: rgba(56, 56, 61, 1);
      --toolbar-border-color: rgba(12, 12, 13, 1);
      --button-hover-color: rgba(102, 102, 103, 1);
      --toggled-btn-color: rgba(255, 255, 255, 1);
      --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
      --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
      --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
      --separator-color: rgba(0, 0, 0, 0.3);
      --field-color: rgba(250, 250, 250, 1);
      --field-bg-color: rgba(64, 64, 68, 1);
      --field-border-color: rgba(115, 115, 115, 1);
      --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
      --treeitem-color: rgba(255, 255, 255, 0.8);
      --treeitem-hover-color: rgba(255, 255, 255, 0.9);
      --treeitem-selected-color: rgba(255, 255, 255, 0.9);
      --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
      --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
      --doorhanger-bg-color: rgba(74, 74, 79, 1);
      --doorhanger-border-color: rgba(39, 39, 43, 1);
      --doorhanger-hover-color: rgba(249, 249, 250, 1);
      --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
      --doorhanger-separator-color: rgba(92, 92, 97, 1);
      --overlay-button-bg-color: rgba(92, 92, 97, 1);
      --overlay-button-hover-bg-color: rgba(115, 115, 115, 1);

      /* This image is used in <input> elements, which unfortunately means that
      * the `mask-image` approach used with all of the other images doesn't work
      * here; hence why we still have two versions of this particular image. */
      --loading-icon: url(images/loading-dark.svg);
    }
  }

  @media screen and (forced-colors: active) {
    :root {
      --button-hover-color: Highlight;
      --doorhanger-hover-bg-color: Highlight;
      --toolbar-icon-opacity: 1;
      --toolbar-icon-bg-color: ButtonText;
      --toolbar-icon-hover-bg-color: ButtonFace;
      --toggled-btn-color: HighlightText;
      --toggled-btn-bg-color: LinkText;
      --doorhanger-hover-color: ButtonFace;
      --doorhanger-border-color-whcm: 1px solid ButtonText;
      --doorhanger-triangle-opacity-whcm: 0;
      --overlay-button-border: 1px solid Highlight;
      --overlay-button-hover-bg-color: Highlight;
      --overlay-button-hover-color: ButtonFace;
      --field-border-color: ButtonText;
    }
  }

  body {
    background-color: var(--body-bg-color);
  }

  body,
  input,
  button,
  select {
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  }

  #sidebarContainer {
    width: var(--sidebar-width);
    transition-duration: var(--sidebar-transition-duration);
    transition-timing-function: var(--sidebar-transition-timing-function);
  }
  html[dir="ltr"] #sidebarContainer {
    left: calc(0px - var(--sidebar-width));
    border-right: var(--doorhanger-border-color-whcm);
  }
  html[dir="rtl"] #sidebarContainer {
    transition-property: right;
    right: calc(0px - var(--sidebar-width));
    border-left: var(--doorhanger-border-color-whcm);
  }

  #sidebarContent {
    background-color: rgba(0, 0, 0, 0.1);
  }

  #viewerContainer:not(.pdfPresentationMode) {
    transition-duration: var(--sidebar-transition-duration);
    transition-timing-function: var(--sidebar-transition-timing-function);
  }

  #toolbarSidebar {
    background-color: var(--sidebar-toolbar-bg-color);
  }

  #toolbarContainer,
  .findbar,
  .secondaryToolbar {
    background-color: var(--toolbar-bg-color);
    box-shadow: 0 1px 0 var(--toolbar-border-color);
  }

  #loadingBar {
    background-color: var(--body-bg-color);
    border-bottom: 1px solid var(--toolbar-border-color);

    transition-duration: var(--sidebar-transition-duration);
    transition-timing-function: var(--sidebar-transition-timing-function);
  }

  html[dir="ltr"] #loadingBar {
    right: var(--loadingBar-end-offset);
  }
  html[dir="rtl"] #loadingBar {
    left: var(--loadingBar-end-offset);
  }

  html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
    left: var(--sidebar-width);
  }
  html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
    right: var(--sidebar-width);
  }

  #loadingBar .progress {
    background-color: var(--progressBar-color);
  }

  #loadingBar .progress.indeterminate {
    background-color: var(--progressBar-indeterminate-bg-color);
  }

  #loadingBar .progress.indeterminate .glimmer {
    background: repeating-linear-gradient(
      135deg,
      var(--progressBar-indeterminate-blend-color) 0,
      var(--progressBar-indeterminate-bg-color) 5px,
      var(--progressBar-indeterminate-bg-color) 45px,
      var(--progressBar-color) 55px,
      var(--progressBar-color) 95px,
      var(--progressBar-indeterminate-blend-color) 100px
    );
  }

  .findbar {
    background-color: var(--toolbar-bg-color);
  }

  .findbar .splitToolbarButton > .toolbarButton {
    background-color: var(--findbar-nextprevious-btn-bg-color);
    border-top: 1px solid var(--field-border-color);
    border-bottom: 1px solid var(--field-border-color);
  }

  html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
    border-right: 1px solid var(--field-border-color);
  }
  html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
    border-left: 1px solid var(--field-border-color);
  }
  
  .findbar label:hover,
  .findbar input:focus + label {
    color: var(--toggled-btn-color);
    background-color: var(--button-hover-color);
  }
  
  .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
    background-color: var(--toggled-btn-bg-color) !important;
    color: var(--toggled-btn-color);
  }

  #findInput[data-status="pending"] {
    background-image: var(--loading-icon);
  }
  
  .secondaryToolbar {
    background-color: var(--doorhanger-bg-color);
  }

  .doorHanger,
  .doorHangerRight {
    box-shadow: 0 1px 5px var(--doorhanger-border-color),
      0 0 0 1px var(--doorhanger-border-color);
    border: var(--doorhanger-border-color-whcm);
  }
  .doorHanger:after,
  .doorHanger:before,
  .doorHangerRight:after,
  .doorHangerRight:before {
    opacity: var(--doorhanger-triangle-opacity-whcm);
  }
  .doorHanger:after {
    border-bottom-color: var(--toolbar-bg-color);
  }
  .doorHangerRight:after {
    border-bottom-color: var(--doorhanger-bg-color);
  }
  .doorHanger:before,
  .doorHangerRight:before {
    border-bottom-color: var(--doorhanger-border-color);
  }
  
  .overlayButton:hover,
  .overlayButton:focus {
    background-color: var(--overlay-button-hover-bg-color);
  }
  
  .overlayButton:hover > span,
  .overlayButton:focus > span {
    color: var(--overlay-button-hover-color);
  } 
  
  .splitToolbarButton > .toolbarButton:hover,
  .splitToolbarButton > .toolbarButton:focus,
  .dropdownToolbarButton:hover,
  .toolbarButton.textButton:hover,
  .toolbarButton.textButton:focus {
    background-color: var(--button-hover-color);
  }
  
  .splitToolbarButtonSeparator {
    background-color: var(--separator-color);
  }
  
  .findbar .splitToolbarButtonSeparator {
    background-color: var(--field-border-color);
  }

  .toolbarButton,
  .dropdownToolbarButton,
  .secondaryToolbarButton,
  .overlayButton {
    color: var(--main-color);
  }
  .toolbarButton:hover,
  .toolbarButton:focus {
    background-color: var(--button-hover-color);
  }
  .secondaryToolbarButton:hover,
  .secondaryToolbarButton:focus {
    background-color: var(--doorhanger-hover-bg-color);
    color: var(--doorhanger-hover-color);
  }

  .toolbarButton.toggled,
  .splitToolbarButton.toggled > .toolbarButton.toggled,
  .secondaryToolbarButton.toggled {
    background-color: var(--toggled-btn-bg-color);
    color: var(--toggled-btn-color);
  }

  .secondaryToolbarButton.toggled::before {
    background-color: var(--toggled-btn-color);
  }
  
  .toolbarButton.toggled::before {
    background-color: var(--toggled-btn-color);
  }
  
  .toolbarButton.toggled:hover:active,
  .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
  .secondaryToolbarButton.toggled:hover:active {
    background-color: var(--toggled-hover-active-btn-color);
  }
  
  .dropdownToolbarButton {
    width: var(--scale-select-container-width);
    background-color: var(--dropdown-btn-bg-color);
  }
  .dropdownToolbarButton::after {  
    -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
    mask-image: var(--toolbarButton-menuArrow-icon);
  }
  
  .dropdownToolbarButton > select {
    width: calc(var(--scale-select-container-width) + var(--scale-select-overflow));
    color: var(--main-color);
    background-color: var(--dropdown-btn-bg-color);
  }
  
  .dropdownToolbarButton > select:hover,
  .dropdownToolbarButton > select:focus {
    background-color: var(--button-hover-color);
    color: var(--toggled-btn-color);
  }
  
  .dropdownToolbarButton > select > option {
    background: var(--doorhanger-bg-color);
    color: var(--main-color);
  }
  
  .toolbarButton::before,
  .secondaryToolbarButton::before,
  .dropdownToolbarButton::after,
  .treeItemToggler::before {
    /* All matching images have a size of 16x16
     * All relevant containers have a size of 28x28 */
    background-color: var(--toolbar-icon-bg-color);
  }
  
  .dropdownToolbarButton:hover::after,
  .dropdownToolbarButton:focus::after,
  .dropdownToolbarButton:active::after {
    background-color: var(--toolbar-icon-hover-bg-color);
  }
  
  .toolbarButton::before {
    opacity: var(--toolbar-icon-opacity);
  }
  
  .toolbarButton:hover::before,
  .toolbarButton:focus::before,
  .secondaryToolbarButton:hover::before,
  .secondaryToolbarButton:focus::before {
    background-color: var(--toolbar-icon-hover-bg-color);
  }
  
  .secondaryToolbarButton::before {
    opacity: var(--doorhanger-icon-opacity);
  }
  
  .toolbarButton#sidebarToggle::before {
    -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
    mask-image: var(--toolbarButton-sidebarToggle-icon);
  }
  
  .toolbarButton#secondaryToolbarToggle::before {
    -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
    mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  }
  
  .toolbarButton.findPrevious::before {
    -webkit-mask-image: var(--findbarButton-previous-icon);
    mask-image: var(--findbarButton-previous-icon);
  }
  
  .toolbarButton.findNext::before {
    -webkit-mask-image: var(--findbarButton-next-icon);
    mask-image: var(--findbarButton-next-icon);
  }
  
  .toolbarButton.pageUp::before {
    -webkit-mask-image: var(--toolbarButton-pageUp-icon);
    mask-image: var(--toolbarButton-pageUp-icon);
  }
  
  .toolbarButton.pageDown::before {
    -webkit-mask-image: var(--toolbarButton-pageDown-icon);
    mask-image: var(--toolbarButton-pageDown-icon);
  }
  
  .toolbarButton.zoomOut::before {
    -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
    mask-image: var(--toolbarButton-zoomOut-icon);
  }
  
  .toolbarButton.zoomIn::before {
    -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
    mask-image: var(--toolbarButton-zoomIn-icon);
  }
  
  .toolbarButton.presentationMode::before,
  .secondaryToolbarButton.presentationMode::before {
    -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
    mask-image: var(--toolbarButton-presentationMode-icon);
  }
  
  .toolbarButton.print::before,
  .secondaryToolbarButton.print::before {
    -webkit-mask-image: var(--toolbarButton-print-icon);
    mask-image: var(--toolbarButton-print-icon);
  }
  
  .toolbarButton.openFile::before,
  .secondaryToolbarButton.openFile::before {
    -webkit-mask-image: var(--toolbarButton-openFile-icon);
    mask-image: var(--toolbarButton-openFile-icon);
  }
  
  .toolbarButton.download::before,
  .secondaryToolbarButton.download::before {
    -webkit-mask-image: var(--toolbarButton-download-icon);
    mask-image: var(--toolbarButton-download-icon);
  }
  
  .toolbarButton.bookmark::before,
  .secondaryToolbarButton.bookmark::before {
    -webkit-mask-image: var(--toolbarButton-bookmark-icon);
    mask-image: var(--toolbarButton-bookmark-icon);
  }
  
  #viewThumbnail.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
    mask-image: var(--toolbarButton-viewThumbnail-icon);
  }
  
  #viewOutline.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
    mask-image: var(--toolbarButton-viewOutline-icon);
  }
  
  #viewAttachments.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
    mask-image: var(--toolbarButton-viewAttachments-icon);
  }
  
  #viewLayers.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
    mask-image: var(--toolbarButton-viewLayers-icon);
  }
  
  #currentOutlineItem.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
    mask-image: var(--toolbarButton-currentOutlineItem-icon);
  }
  
  #viewFind.toolbarButton::before {
    -webkit-mask-image: var(--toolbarButton-search-icon);
    mask-image: var(--toolbarButton-search-icon);
  }
  
  .secondaryToolbarButton.firstPage::before {
    -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
    mask-image: var(--secondaryToolbarButton-firstPage-icon);
  }
  
  .secondaryToolbarButton.lastPage::before {
    -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
    mask-image: var(--secondaryToolbarButton-lastPage-icon);
  }
  
  .secondaryToolbarButton.rotateCcw::before {
    -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
    mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  }
  
  .secondaryToolbarButton.rotateCw::before {
    -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
    mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  }
  
  .secondaryToolbarButton.selectTool::before {
    -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
    mask-image: var(--secondaryToolbarButton-selectTool-icon);
  }
  
  .secondaryToolbarButton.handTool::before {
    -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
    mask-image: var(--secondaryToolbarButton-handTool-icon);
  }
  
  .secondaryToolbarButton.scrollVertical::before {
    -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
    mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  }
  
  .secondaryToolbarButton.scrollHorizontal::before {
    -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
    mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  }
  
  .secondaryToolbarButton.scrollWrapped::before {
    -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
    mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  }
  
  .secondaryToolbarButton.spreadNone::before {
    -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
    mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  }
  
  .secondaryToolbarButton.spreadOdd::before {
    -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
    mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  }
  
  .secondaryToolbarButton.spreadEven::before {
    -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
    mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  }
  
  .secondaryToolbarButton.documentProperties::before {
    -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
    mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  }
  
  .verticalToolbarSeparator {
    background-color: var(--separator-color);
  }
  
  .horizontalToolbarSeparator {
    border-top: 1px solid var(--doorhanger-separator-color);
  }
  
  .toolbarField {
    background-color: var(--field-bg-color);
    border-color: var(--field-border-color);
    color: var(--field-color);
  }
  
  .toolbarField.pageNumber.visiblePageIsLoading {
    background-image: var(--loading-icon);
  }
  
  .toolbarLabel {
    color: var(--main-color);
  }
  
  
  a:focus > .thumbnail > .thumbnailSelectionRing,
  .thumbnail:hover > .thumbnailSelectionRing {
    background-color: var(--sidebaritem-bg-color);
  }
  
  .thumbnail.selected > .thumbnailSelectionRing {
    background-color: var(--sidebaritem-bg-color);
  }
  
  .treeItem > a {
    color: var(--treeitem-color);
  }
  
  .treeItemToggler::before {
    -webkit-mask-image: var(--treeitem-expanded-icon);
    mask-image: var(--treeitem-expanded-icon);
  }
  .treeItemToggler.treeItemsHidden::before {
    -webkit-mask-image: var(--treeitem-collapsed-icon);
    mask-image: var(--treeitem-collapsed-icon);
  }
  
  .treeItem.selected > a {
    background-color: var(--treeitem-selected-bg-color);
    color: var(--treeitem-selected-color);
  }
  
  .treeItemToggler:hover,
  .treeItemToggler:hover + a,
  .treeItemToggler:hover ~ .treeItems,
  .treeItem > a:hover {
    background-color: var(--sidebaritem-bg-color);
    color: var(--treeitem-hover-color);
  }

  /* TODO: file FF bug to support ::-moz-selection:window-inactive
     so we can override the opaque grey background when the window is inactive;
     see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
  
     #errorWrapper {
      background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
      color: var(--main-color);
    }
    
    #errorMoreInfo {
      background-color: var(--field-bg-color);
      color: var(--field-color);
      border: 1px solid var(--field-border-color);
    }
    
    .overlayButton {
      color: var(--main-color);
      background-color: var(--overlay-button-bg-color);
      border: var(--overlay-button-border) !important;
    }
    
    #overlayContainer > .container > .dialog {
      color: var(--main-color);
      background-color: var(--doorhanger-bg-color);
    }
    
    .dialog .separator {
      background-color: var(--separator-color);
    }

  .grab-to-pan-grab {
    cursor: url("images/grab.cur"), move !important;
    cursor: -webkit-grab !important;
    cursor: grab !important;
  }
  .grab-to-pan-grab
    *:not(input):not(textarea):not(button):not(select):not(:link) {
    cursor: inherit !important;
  }
  .grab-to-pan-grab:active,
  .grab-to-pan-grabbing {
    cursor: url("images/grabbing.cur"), move !important;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
    position: fixed;
    background: rgba(0, 0, 0, 0);
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 50000; /* should be higher than anything else in PDF.js! */
  }

  @page {
    margin: 0;
  }

  #printContainer {
    display: none;
  }

  @media print {
    /* General rules for printing. */
    body {
      background: rgba(0, 0, 0, 0) none;
    }

    /* Rules for browsers that don't support mozPrintCallback. */
    #sidebarContainer,
    #secondaryToolbar,
    .toolbar,
    #loadingBox,
    #errorWrapper,
    .textLayer,
    .canvasWrapper {
      display: none;
    }
    #viewerContainer {
      overflow: visible;
    }

    #mainContainer,
    #viewerContainer,
    .page,
    .page canvas {
      position: static;
      padding: 0;
      margin: 0;
    }

    .page {
      float: left;
      display: none;
      border: none;
      box-shadow: none;
      background-clip: content-box;
      background-color: rgba(255, 255, 255, 1);
    }

    .page[data-loaded] {
      display: block;
    }

    .fileInput {
      display: none;
    }

    /* Rules for browsers that support PDF.js printing */
    body[data-pdfjsprinting] #outerContainer {
      display: none;
    }
    body[data-pdfjsprinting] #printContainer {
      display: block;
    }
    #printContainer {
      height: 100%;
    }
    /* wrapper around (scaled) print canvas elements */
    #printContainer > .printedPage {
      page-break-after: always;
      page-break-inside: avoid;

      /* The wrapper always cover the whole page. */
      height: 100%;
      width: 100%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #printContainer > .xfaPrintedPage .xfaPage {
      position: absolute;
    }

    #printContainer > .xfaPrintedPage {
      page-break-after: always;
      page-break-inside: avoid;
      width: 100%;
      height: 100%;
      position: relative;
    }

    #printContainer > .printedPage canvas,
    #printContainer > .printedPage img {
      /* The intrinsic canvas / image size will make sure that we fit the page. */
      max-width: 100%;
      max-height: 100%;

      direction: ltr;
      display: block;
    }
  }

  .visibleLargeView,
  .visibleMediumView,
  .visibleSmallView {
    display: none;
  }

  @media all and (max-width: 900px) {
    #toolbarViewerMiddle {
      display: table;
      margin: auto;
      left: auto;
      position: inherit;
      transform: none;
    }
  }

  @media all and (max-width: 840px) {
    #sidebarContainer {
      background-color: var(--sidebar-narrow-bg-color);
    }

    html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
      left: 0 !important;
    }
    html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
      right: 0 !important;
    }

    #outerContainer .hiddenLargeView,
    #outerContainer .hiddenMediumView {
      display: inherit;
    }
    #outerContainer .visibleLargeView,
    #outerContainer .visibleMediumView {
      display: none;
    }
  }

  @media all and (max-width: 770px) {
    #outerContainer .hiddenLargeView {
      display: none;
    }
    #outerContainer .visibleLargeView {
      display: inherit;
    }
  }

  @media all and (max-width: 700px) {
    #outerContainer .hiddenMediumView {
      display: none;
    }
    #outerContainer .visibleMediumView {
      display: inherit;
    }
  }

  @media all and (max-width: 640px) {
    .hiddenSmallView,
    .hiddenSmallView * {
      display: none;
    }
    .visibleSmallView {
      display: inherit;
    }
    .toolbarButtonSpacer {
      width: 0;
    }
    html[dir="ltr"] .findbar {
      left: 34px;
    }
    html[dir="rtl"] .findbar {
      right: 34px;
    }
  }

  @media all and (max-width: 535px) {
    #scaleSelectContainer {
      display: none;
    }
  }

/* 
=========================================================
 >>> below codes aren't include in common.css file
=========================================================
*/ 


/** toolbar button style **/
#pauseButton,
#resumeButton {
  background: none;
  border: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  padding: 5px 10px;
}

#pauseButton:hover,
#resumeButton:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.textLayer span.highlighted {
  background-color: yellow !important; /* You can customize the color */
  color: black !important;  /* Ensure the text color is visible */
}

.highlight {
  background-color: yellow; /* Or any color you prefer */
}