/* Overriding dark mode */
:root {
  --main-color: rgba(249, 249, 250, 1);
  --body-bg-color: rgba(255, 255, 255, 1);
  --errorWrapper-bg-color: rgba(199, 17, 17, 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);

  --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-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(93, 94, 98, 1);
  --doorhanger-separator-color: rgba(92, 92, 97, 1);
  --overlay-button-bg-color: #2860F4;
  --overlay-button-hover-color: #3498db;

  /* 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);
}


:root {
  --body-bg-color: #F5F4F3;
  --toolbar-bg-color: #F5F4F3;
  --toolbar-border-color: rgba(12, 12, 13, 1);
  --progressBar-color: #ee6e05;
  --toolbar-icon-bg-color: #495057;
  --field-bg-color: #ffffff;
  --button-hover-color: #EBF4FF;
  --toggled-btn-bg-color: #EBF4FF;
  --toggled-hover-active-btn-color: #EBF4FF;
  --dropdown-btn-bg-color: #ffffff;
  --separator-color: #495057;
  --field-color: #ffffff;
  --field-bg-color: #ffffff;
  --field-border-color: rgba(115, 115, 115, 1);
  --doorhanger-bg-color: #ffffff;
  --doorhanger-border-color: #e5e5e5;
  --doorhanger-hover-color: #e5e5e5;
  --doorhanger-separator-color: rgba(92, 92, 97, 1);

  --toolbarButton-download-icon: url(images/toolbarButton-download-material.svg);
}

.toolbarField {
  color: #495057;
}

.dropdownToolbarButton > select {
  color: #495057;
}
.dropdownToolbarButton > select > option {
  background: var(--doorhanger-bg-color);
}

#toolbarContainer,
#toolbarViewer {
  height: 40px;
}

#viewerContainer,
#sidebarContainer {
  top: 40px;
}

.component-pdfviewer {
  overflow: hidden !important;
}

/* Icons */

.toolbarButton.download {
  margin: 0 3px!important;
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
  -webkit-mask-image: var(--toolbarButton-download-icon);
  mask-image: var(--toolbarButton-download-icon);
}

.toolbarButton.download::before {
  width: 25px;
  height: 25px;
  top: 7px;
  left: 7px;
}

.secondaryToolbarButton.download::before {
  width: 20px;
  height: 20px;
  left: 9px !important;
  top: 3px;
}

.rpdtoolbarButton::before {
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 16px;

  content: "";
  /*background-color: var(--toolbar-icon-bg-color);*/
  -webkit-mask-size: cover;
  mask-size: cover;
}

.rpdtoolbarButton::before {
  top: 6px;
  left: 6px;
}

.rpdtoolbarButton.sidebarviewers {
  width: 28px;
  height: 28px;
  margin: 1px 5px;
  padding: 2px 6px 0;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: #495057;
}

.rpdtoolbarButton.sidebarviewers:hover {
  background-color: #EBF4FF;
}

.active-sidebar {
  background-color: #EBF4FF !important;
}

.rpdtoolbarButton.sidebarviewers i.material-icons {
  font-size: 20px;
}

.hidden-element {
  display: none !important;
}

.rpdtoolbarButton.savereference {
  border-bottom-width: 0px;
  border-bottom-style: solid;
  border-left-width: 0px;
  border-left-style: solid;
  border-top-width: 0px;
  border-top-style: solid;
  border-right-width: 0px;
  border-right-style: solid;
  margin: 0 3px!important;
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.rpdtoolbarButton.savereference i.material-icons {
  font-size: 16px;
  padding-top: 6px;
}

.aglogo-container {
  padding: 0 15px;
  padding-top: 3px;
}

@media all and (max-width: 640px) {
  .aglogo-container {
    padding: 0 5px;
    padding-top: 3px;
  }
}

.aglogo {
  display: block;
  box-sizing: border-box;
  width: 85px;
  margin-top: -6px;
}

.sidebar-viewers {
  width: 320px;
  z-index: 1040;
  top: 41px;
}

/* Toolbar Icons Vertical Alginment */
#toolbarViewerLeft {
  padding-top: 4px;
}

#toolbarViewerMiddle {
  padding-top: 4px;
}

#toolbarViewerRight .toolbarButton {
  margin-top: 6px;
}

#toolbarViewerRight .verticalToolbarSeparator {
  margin-top: 9px;
}

/* safari paths overwrite */
@media not all and (min-resolution:.001dpcm) {
  @media {
    :root {
      --loading-icon: url(pdfjs/images/loading.svg);
      --treeitem-expanded-icon: url(pdfjs/images/treeitem-expanded.svg);
      --treeitem-collapsed-icon: url(pdfjs/images/treeitem-collapsed.svg);
      --toolbarButton-menuArrow-icon: url(pdfjs/images/toolbarButton-menuArrow.svg);
      --toolbarButton-sidebarToggle-icon: url(pdfjs/images/toolbarButton-sidebarToggle.svg);
      --toolbarButton-secondaryToolbarToggle-icon: url(pdfjs/images/toolbarButton-secondaryToolbarToggle.svg);
      --toolbarButton-pageUp-icon: url(pdfjs/images/toolbarButton-pageUp.svg);
      --toolbarButton-pageDown-icon: url(pdfjs/images/toolbarButton-pageDown.svg);
      --toolbarButton-zoomOut-icon: url(pdfjs/images/toolbarButton-zoomOut.svg);
      --toolbarButton-zoomIn-icon: url(pdfjs/images/toolbarButton-zoomIn.svg);
      --toolbarButton-presentationMode-icon: url(pdfjs/images/toolbarButton-presentationMode.svg);
      --toolbarButton-print-icon: url(pdfjs/images/toolbarButton-print.svg);
      --toolbarButton-openFile-icon: url(pdfjs/images/toolbarButton-openFile.svg);
      /* --toolbarButton-download-icon: url(pdfjs/images/toolbarButton-download.svg); */
      --toolbarButton-bookmark-icon: url(pdfjs/images/toolbarButton-bookmark.svg);
      --toolbarButton-viewThumbnail-icon: url(pdfjs/images/toolbarButton-viewThumbnail.svg);
      --toolbarButton-viewOutline-icon: url(pdfjs/images/toolbarButton-viewOutline.svg);
      --toolbarButton-viewAttachments-icon: url(pdfjs/images/toolbarButton-viewAttachments.svg);
      --toolbarButton-viewLayers-icon: url(pdfjs/images/toolbarButton-viewLayers.svg);
      --toolbarButton-currentOutlineItem-icon: url(pdfjs/images/toolbarButton-currentOutlineItem.svg);
      --toolbarButton-search-icon: url(pdfjs/images/toolbarButton-search.svg);
      --findbarButton-previous-icon: url(pdfjs/images/findbarButton-previous.svg);
      --findbarButton-next-icon: url(pdfjs/images/findbarButton-next.svg);
      --secondaryToolbarButton-firstPage-icon: url(pdfjs/images/secondaryToolbarButton-firstPage.svg);
      --secondaryToolbarButton-lastPage-icon: url(pdfjs/images/secondaryToolbarButton-lastPage.svg);
      --secondaryToolbarButton-rotateCcw-icon: url(pdfjs/images/secondaryToolbarButton-rotateCcw.svg);
      --secondaryToolbarButton-rotateCw-icon: url(pdfjs/images/secondaryToolbarButton-rotateCw.svg);
      --secondaryToolbarButton-selectTool-icon: url(pdfjs/images/secondaryToolbarButton-selectTool.svg);
      --secondaryToolbarButton-handTool-icon: url(pdfjs/images/secondaryToolbarButton-handTool.svg);
      --secondaryToolbarButton-scrollVertical-icon: url(pdfjs/images/secondaryToolbarButton-scrollVertical.svg);
      --secondaryToolbarButton-scrollHorizontal-icon: url(pdfjs/images/secondaryToolbarButton-scrollHorizontal.svg);
      --secondaryToolbarButton-scrollWrapped-icon: url(pdfjs/images/secondaryToolbarButton-scrollWrapped.svg);
      --secondaryToolbarButton-spreadNone-icon: url(pdfjs/images/secondaryToolbarButton-spreadNone.svg);
      --secondaryToolbarButton-spreadOdd-icon: url(pdfjs/images/secondaryToolbarButton-spreadOdd.svg);
      --secondaryToolbarButton-spreadEven-icon: url(pdfjs/images/secondaryToolbarButton-spreadEven.svg);
      --secondaryToolbarButton-documentProperties-icon: url(pdfjs/images/secondaryToolbarButton-documentProperties.svg);

      /* Material Download */
      --toolbarButton-download-icon: url(pdfjs/images/toolbarButton-download-material.svg);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --loading-icon: url(pdfjs/images/loading-dark.svg);
    }
  }
}

/* Toast Component */
.b-toaster-top-center .toast {
  font-size: 1rem;
  padding: 12px;
}

::selection {
  background-color: #f37e20;
  color: white;
}

.sidebar-viewers__title .icon {
  font-size:  20px !important;
}

.sidebar-viewers__title b {
  font-size: 1rem !important;
}

.citation-title {
  margin: 10px 0 10px 0 !important;
  font-size: 1rem !important;
}

.sidebar-tab__content p {
  padding: 8px;
}

.component-sidebar-viewers {
  font-family: Mulish, Roboto, RobotoDraft, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.component-citationrender .text-secondary {
  font-size: 12px !important;
}

.component-citationrender .text-dark {
  font-size: 12px !important;
}

.component-recommendations > div > div p {
  font-size: 12px !important;
  padding: 0 !important;
}

.component-sidebar-viewers .component-recommendations {
  padding-left: 8px !important;
}

.recommendations-table .table-header img {
  padding-left: 5px;
}

.component-recommendations .recommendations-table .table-header__icon  {
  width: 16px;
}
.sidebar-tab__content {
  padding-bottom: 40px !important;
}