@itfin/components 1.0.6 → 1.0.10

package/src/components/pdf-viewer/styles/_viewer.scss

@@ -0,0 +1,1413 @@
+/* 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.
+ */
+
+@import "colors.scss";
+
+:root {
+  --sidebar-width: 200px;
+  --sidebar-transition-duration: #{$pdf-sidebar-transition-duration};
+  --sidebar-transition-timing-function: #{$pdf-sidebar-transition-timing-function};
+}
+
+.pdf-app {
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.pdf-app * {
+  padding: 0;
+  margin: 0;
+}
+
+.pdf-app {
+  #toolbarContainer,
+  #secondaryToolbar,
+  #sidebarContainer {
+    button {
+      cursor: pointer;
+    }
+  }
+
+  #sidebarContainer {
+    button[disabled] {
+      cursor: no-drop;
+    }
+  }
+
+  #viewBookmark {
+    cursor: pointer;
+  }
+}
+
+.pdf-app input,
+.pdf-app button,
+.pdf-app select {
+  font: message-box;
+  outline: none;
+}
+
+.pdf-app .hidden,
+.pdf-app [hidden] {
+  display: none !important;
+}
+
+.pdf-app .pdfViewer.enablePermissions .textLayer > span {
+  user-select: none !important;
+  cursor: not-allowed;
+}
+
+.pdf-app #viewerContainer.pdfPresentationMode:-ms-fullscreen {
+  top: 0px !important;
+  overflow: hidden !important;
+}
+
+.pdf-app #viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.pdf-app #viewerContainer.pdfPresentationMode:fullscreen {
+  top: 0px;
+  border-top: 2px solid rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 1);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: none;
+  user-select: none;
+}
+
+.pdf-app .pdfPresentationMode:fullscreen a:not(.internalLink) {
+  display: none;
+}
+
+.pdf-app .pdfPresentationMode:fullscreen .textLayer > span {
+  cursor: none;
+}
+
+.pdf-app .pdfPresentationMode.pdfPresentationModeControls > *,
+.pdf-app .pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
+  cursor: default;
+}
+
+.pdf-app #outerContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.pdf-app #sidebarContainer {
+  position: absolute;
+  top: 32px;
+  bottom: 0;
+  width: 200px;
+  width: var(--sidebar-width);
+  visibility: hidden;
+  z-index: 100;
+  transition-duration: $pdf-sidebar-transition-duration;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: $pdf-sidebar-transition-timing-function;
+  transition-timing-function: var(--sidebar-transition-timing-function);
+}
+html[dir="ltr"] .pdf-app #sidebarContainer {
+  transition-property: left;
+  left: calc(0px - 200px);
+  left: calc(0px - var(--sidebar-width));
+}
+html[dir="rtl"] .pdf-app #sidebarContainer {
+  transition-property: right;
+  right: calc(0px - 200px);
+  right: calc(0px - var(--sidebar-width));
+}
+
+.loadingInProgress #sidebarContainer {
+  top: 4px;
+}
+
+.pdf-app #outerContainer.sidebarResizing #sidebarContainer {
+  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
+  transition-duration: 0s;
+  /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
+  user-select: none;
+}
+
+.pdf-app #outerContainer.sidebarMoving #sidebarContainer,
+.pdf-app #outerContainer.sidebarOpen #sidebarContainer {
+  visibility: visible;
+}
+html[dir="ltr"] .pdf-app #outerContainer.sidebarOpen #sidebarContainer {
+  left: 0px;
+}
+html[dir="rtl"] .pdf-app #outerContainer.sidebarOpen #sidebarContainer {
+  right: 0px;
+}
+
+.pdf-app #mainContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.pdf-app #sidebarContent {
+  top: 32px;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  width: 100%;
+}
+html[dir="ltr"] .pdf-app #sidebarContent {
+  left: 0;
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
+}
+html[dir="rtl"] .pdf-app #sidebarContent {
+  right: 0;
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
+}
+
+.pdf-app #viewerContainer {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  top: 32px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  outline: none;
+}
+.pdf-app #viewerContainer:not(.pdfPresentationMode) {
+  transition-duration: $pdf-sidebar-transition-duration;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: $pdf-sidebar-transition-timing-function;
+  transition-timing-function: var(--sidebar-transition-timing-function);
+}
+html[dir="ltr"] .pdf-app #viewerContainer {
+  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
+}
+html[dir="rtl"] .pdf-app #viewerContainer {
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
+}
+
+.pdf-app #outerContainer.sidebarResizing #viewerContainer {
+  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
+  transition-duration: 0s;
+}
+
+html[dir="ltr"]
+.pdf-app
+#outerContainer.sidebarOpen
+#viewerContainer:not(.pdfPresentationMode) {
+  transition-property: left;
+  left: 200px;
+  left: var(--sidebar-width);
+}
+html[dir="rtl"]
+.pdf-app
+#outerContainer.sidebarOpen
+#viewerContainer:not(.pdfPresentationMode) {
+  transition-property: right;
+  right: 200px;
+  right: var(--sidebar-width);
+}
+
+.pdf-app .toolbar {
+  position: relative;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  cursor: default;
+}
+
+.pdf-app #toolbarContainer {
+  width: 100%;
+}
+
+.pdf-app #toolbarSidebar {
+  width: 100%;
+  height: 32px;
+}
+html[dir="ltr"] .pdf-app #toolbarSidebar {
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
+  inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
+  0 0 1px rgba(0, 0, 0, 0.1);
+}
+html[dir="rtl"] .pdf-app #toolbarSidebar {
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
+  inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
+  0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.pdf-app #sidebarResizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  z-index: 200;
+  cursor: ew-resize;
+}
+html[dir="ltr"] .pdf-app #sidebarResizer {
+  right: -6px;
+}
+html[dir="rtl"] .pdf-app #sidebarResizer {
+  left: -6px;
+}
+
+.pdf-app #toolbarContainer,
+.pdf-app .findbar,
+.pdf-app .secondaryToolbar {
+  position: relative;
+  height: 36px;
+}
+html[dir="ltr"] .pdf-app #toolbarContainer,
+.pdf-app .findbar,
+.pdf-app .secondaryToolbar {
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
+  inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
+  0 1px 1px rgba(0, 0, 0, 0.1);
+}
+html[dir="rtl"] .pdf-app #toolbarContainer,
+.pdf-app .findbar,
+.pdf-app .secondaryToolbar {
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
+  inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
+  0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.pdf-app #toolbarViewer {
+  height: 36px;
+}
+
+.pdf-app #loadingBar {
+  position: relative;
+  width: 100%;
+  height: 4px;
+}
+
+.pdf-app #loadingBar .progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  overflow: hidden;
+  transition: width 200ms;
+}
+
+@keyframes progressIndeterminate {
+  0% {
+    left: -142px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+.pdf-app #loadingBar .progress.indeterminate .glimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: calc(100% + 150px);
+  animation: progressIndeterminate 950ms linear infinite;
+}
+
+.pdf-app .findbar,
+.pdf-app .secondaryToolbar {
+  top: 32px;
+  position: absolute;
+  z-index: 10000;
+  height: auto;
+  min-width: 16px;
+  padding: 0px 6px 0px 6px;
+  margin: 4px 2px 4px 2px;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: left;
+  cursor: default;
+}
+
+.pdf-app .findbar {
+  min-width: 300px;
+}
+.pdf-app .findbar > div {
+  height: 32px;
+}
+.pdf-app .findbar.wrapContainers > div {
+  clear: both;
+}
+.pdf-app .findbar.wrapContainers > div#findbarMessageContainer {
+  height: auto;
+}
+html[dir="ltr"] .pdf-app .findbar {
+  left: 68px;
+}
+html[dir="rtl"] .pdf-app .findbar {
+  right: 68px;
+}
+
+.pdf-app .findbar label {
+  user-select: none;
+}
+
+.pdf-app #findInput {
+  width: 200px;
+}
+
+.pdf-app #findInput::placeholder {
+  font-style: italic;
+}
+.pdf-app #findInput[data-status="pending"] {
+  background-size: 16px;
+  background-image: url(./images/loading-icon.svg);
+  background-repeat: no-repeat;
+  background-position: right;
+}
+html[dir="rtl"] .pdf-app #findInput[data-status="pending"] {
+  background-position: left;
+}
+
+.pdf-app .secondaryToolbar {
+  padding: 6px;
+  height: auto;
+  z-index: 30000;
+}
+html[dir="ltr"] .pdf-app .secondaryToolbar {
+  right: 4px;
+}
+html[dir="rtl"] .pdf-app .secondaryToolbar {
+  left: 4px;
+}
+
+.pdf-app #secondaryToolbarButtonContainer {
+  max-width: 200px;
+  max-height: 400px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: -4px;
+}
+
+.pdf-app
+#secondaryToolbarButtonContainer.hiddenScrollModeButtons
+> .scrollModeButtons,
+.pdf-app
+#secondaryToolbarButtonContainer.hiddenSpreadModeButtons
+> .spreadModeButtons {
+  display: none !important;
+}
+
+.pdf-app .doorHanger,
+.pdf-app .doorHangerRight {
+  border-radius: .5rem;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.pdf-app .doorHanger:after,
+.pdf-app .doorHanger:before,
+.pdf-app .doorHangerRight:after,
+.pdf-app .doorHangerRight:before {
+  bottom: 100%;
+  border: solid rgba(0, 0, 0, 0);
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.pdf-app .doorHanger:after,
+.pdf-app .doorHangerRight:after {
+  border-width: 8px;
+}
+.pdf-app .doorHanger:before,
+.pdf-app .doorHangerRight:before {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+  border-width: 9px;
+}
+
+html[dir="ltr"] .pdf-app .doorHanger:after,
+html[dir="rtl"] .pdf-app .doorHangerRight:after {
+  left: 13px;
+  margin-left: -8px;
+}
+
+html[dir="ltr"] .pdf-app .doorHanger:before,
+html[dir="rtl"] .pdf-app .doorHangerRight:before {
+  left: 13px;
+  margin-left: -9px;
+}
+
+html[dir="rtl"] .pdf-app .doorHanger:after,
+html[dir="ltr"] .pdf-app .doorHangerRight:after {
+  right: 13px;
+  margin-right: -8px;
+}
+
+html[dir="rtl"] .pdf-app .doorHanger:before,
+html[dir="ltr"] .pdf-app .doorHangerRight:before {
+  right: 13px;
+  margin-right: -9px;
+}
+
+.pdf-app #findResultsCount {
+  text-align: center;
+  padding: 3px 4px;
+}
+
+.pdf-app #findMsg {
+  font-style: italic;
+}
+.pdf-app #findMsg:empty {
+  display: none;
+}
+
+.pdf-app #toolbarViewerMiddle {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pdf-app #toolbarViewerLeft,
+.pdf-app #toolbarViewerRight,
+.pdf-app #toolbarViewerMiddle {
+  padding: 3px;
+}
+
+html[dir="ltr"] .pdf-app #toolbarViewerLeft,
+html[dir="rtl"] .pdf-app #toolbarViewerRight {
+  float: left;
+}
+html[dir="ltr"] .pdf-app #toolbarViewerRight,
+html[dir="rtl"] .pdf-app #toolbarViewerLeft {
+  float: right;
+}
+html[dir="ltr"] .pdf-app #toolbarViewerLeft > *,
+html[dir="ltr"] .pdf-app #toolbarViewerMiddle > *,
+html[dir="ltr"] .pdf-app #toolbarViewerRight > *,
+html[dir="ltr"] .pdf-app .findbar * {
+  position: relative;
+  float: left;
+}
+html[dir="rtl"] .pdf-app #toolbarViewerLeft > *,
+html[dir="rtl"] .pdf-app #toolbarViewerMiddle > *,
+html[dir="rtl"] .pdf-app #toolbarViewerRight > *,
+html[dir="rtl"] .pdf-app .findbar * {
+  position: relative;
+  float: right;
+}
+html[dir="ltr"] .pdf-app .splitToolbarButton {
+  margin: 0 5px;
+  display: inline-block;
+}
+html[dir="rtl"] .pdf-app .splitToolbarButton {
+  margin: 0 5px;
+  display: inline-block;
+}
+html[dir="ltr"] .pdf-app .splitToolbarButton > .toolbarButton {
+  border-radius: 0;
+  float: left;
+}
+html[dir="rtl"] .pdf-app .splitToolbarButton > .toolbarButton {
+  border-radius: 0;
+  float: right;
+}
+
+#findbarInputContainer .splitToolbarButton {
+  margin: 1px 5px;
+}
+
+.pdf-app .toolbarButton,
+.pdf-app .secondaryToolbarButton,
+.vue-pdf-app-icon,
+.pdf-app .overlayButton {
+  border: 0 none;
+  background: none;
+}
+
+.pdf-app .toolbarButton,
+.pdf-app .secondaryToolbarButton,
+.pdf-app .overlayButton {
+  width: 32px;
+  height: 25px;
+}
+
+.pdf-app .toolbarButton > span {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.pdf-app .toolbarButton[disabled],
+.pdf-app .secondaryToolbarButton[disabled],
+.pdf-app .overlayButton[disabled] {
+  opacity: 0.5;
+}
+
+.pdf-app .splitToolbarButton.toggled .toolbarButton {
+  margin: 0;
+}
+
+.pdf-app .splitToolbarButton > .toolbarButton {
+  position: relative;
+}
+html[dir="ltr"] .pdf-app .splitToolbarButton > .toolbarButton:first-child,
+html[dir="rtl"] .pdf-app .splitToolbarButton > .toolbarButton:last-child {
+  position: relative;
+  margin: 0;
+  margin-right: -1px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  border-right-color: rgba(0, 0, 0, 0);
+}
+html[dir="ltr"] .pdf-app .splitToolbarButton > .toolbarButton:last-child,
+html[dir="rtl"] .pdf-app .splitToolbarButton > .toolbarButton:first-child {
+  position: relative;
+  margin: 0;
+  margin-left: -1px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-left-color: rgba(0, 0, 0, 0);
+}
+.pdf-app .splitToolbarButtonSeparator {
+  padding: 8px 0;
+  width: 1px;
+  z-index: 99;
+  display: inline-block;
+  margin: 5px 0;
+}
+html[dir="ltr"] .pdf-app .splitToolbarButtonSeparator {
+  float: left;
+}
+html[dir="rtl"] .pdf-app .splitToolbarButtonSeparator {
+  float: right;
+}
+.pdf-app .splitToolbarButton:hover > .splitToolbarButtonSeparator,
+.pdf-app .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
+  padding: 12px 0;
+  margin: 1px 0;
+}
+
+.pdf-app .toolbarButton,
+.pdf-app .dropdownToolbarButton,
+.pdf-app .secondaryToolbarButton,
+.pdf-app .overlayButton {
+  min-width: 16px;
+  padding: 2px 6px 0;
+  font-size: 12px;
+  line-height: 14px;
+  user-select: none;
+  /* Opera does not support user-select, use <... unselectable="on"> instead */
+  cursor: default;
+}
+
+.pdf-app .findbar .toolbarButton,
+.vue-pdf-app-icon {
+  cursor: pointer;
+}
+
+.pdf-app .dialog .overlayButton {
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+html[dir="ltr"] .pdf-app .toolbarButton,
+html[dir="ltr"] .pdf-app .overlayButton,
+html[dir="ltr"] .pdf-app .dropdownToolbarButton {
+  margin: 3px 2px 4px 0;
+}
+html[dir="rtl"] .pdf-app .toolbarButton,
+html[dir="rtl"] .pdf-app .overlayButton,
+html[dir="rtl"] .pdf-app .dropdownToolbarButton {
+  margin: 3px 0 4px 2px;
+}
+
+.pdf-app .dropdownToolbarButton select:hover {
+  cursor: pointer;
+}
+
+.pdf-app .toolbarButton.toggled,
+.pdf-app .splitToolbarButton.toggled > .toolbarButton.toggled,
+.pdf-app .secondaryToolbarButton.toggled {
+  border-radius: 3px;
+}
+
+.pdf-app .dropdownToolbarButton {
+  width: 140px;
+  padding: 0;
+  overflow: hidden;
+}
+.pdf-app .dropdownToolbarButton::after {
+  position: absolute;
+  display: inline-block;
+  top: 6px;
+}
+html[dir="ltr"] .pdf-app .dropdownToolbarButton::after {
+  right: 0px;
+}
+html[dir="rtl"] .pdf-app .dropdownToolbarButton::after {
+  left: 0px;
+}
+
+.pdf-app .dropdownToolbarButton > select {
+  width: 162px;
+  height: 23px;
+  font-size: 12px;
+  margin: 0;
+  padding: 3px 2px 2px;
+  border: none;
+}
+
+.pdf-app #customScaleOption {
+  display: none;
+}
+
+.pdf-app .toolbarButtonSpacer {
+  width: 30px;
+  display: inline-block;
+  height: 1px;
+}
+
+.pdf-app .toolbarButton.bookmark,
+.pdf-app .secondaryToolbarButton.bookmark {
+  box-sizing: border-box;
+  outline: none;
+  padding-top: 4px;
+  text-decoration: none;
+}
+.pdf-app .secondaryToolbarButton.bookmark {
+  padding-top: 5px;
+}
+
+.pdf-app .bookmark[href="#"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.pdf-app .toolbarButton.pdfSidebarNotification::after {
+  position: absolute;
+  display: inline-block;
+  top: 1px;
+  /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
+  content: "";
+  background-color: rgba(112, 219, 85, 1);
+  height: 9px;
+  width: 9px;
+  border-radius: 50%;
+}
+html[dir="ltr"] .pdf-app .toolbarButton.pdfSidebarNotification::after {
+  left: 17px;
+}
+html[dir="rtl"] .pdf-app .toolbarButton.pdfSidebarNotification::after {
+  right: 17px;
+}
+
+.pdf-app .secondaryToolbarButton {
+  position: relative;
+  margin: 0 0 4px 0;
+  padding: 3px 0 1px 0;
+  height: auto;
+  min-height: 25px;
+  width: auto;
+  min-width: 100%;
+  white-space: normal;
+
+  > span {
+    vertical-align: top;
+  }
+}
+html[dir="ltr"] .pdf-app .secondaryToolbarButton {
+  padding-left: 14px;
+  text-align: left;
+}
+html[dir="rtl"] .pdf-app .secondaryToolbarButton {
+  padding-right: 14px;
+  text-align: right;
+}
+html[dir="ltr"] .pdf-app .secondaryToolbarButton > span {
+  padding-left: 8px;
+}
+html[dir="rtl"] .pdf-app .secondaryToolbarButton > span {
+  padding-right: 8px;
+}
+html[dir="rtl"] .pdf-app .secondaryToolbarButton::before {
+  float: right;
+}
+
+.pdf-app .verticalToolbarSeparator {
+  display: block;
+  padding: 8px 0;
+  margin: 8px 4px;
+  width: 1px;
+}
+html[dir="ltr"] .pdf-app .verticalToolbarSeparator {
+  margin-left: 2px;
+}
+html[dir="rtl"] .pdf-app .verticalToolbarSeparator {
+  margin-right: 2px;
+}
+
+.pdf-app .horizontalToolbarSeparator {
+  display: block;
+  margin: 0 0 4px 0;
+  height: 1px;
+  width: 100%;
+}
+
+.pdf-app .toolbarField {
+  padding: 3px 6px;
+  margin: 4px 0 4px 0;
+  border-radius: .25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
+  font-size: 13px;
+  line-height: 16px;
+  outline-style: none;
+}
+
+.pdf-app .toolbarField[type="checkbox"] {
+  display: inline-block;
+  margin: 8px 0px;
+  cursor: pointer;
+
+  & + label {
+    cursor: pointer;
+  }
+}
+
+.pdf-app .toolbarField.pageNumber {
+  -moz-appearance: textfield; /* hides the spinner in moz */
+  min-width: 16px;
+  text-align: right;
+  width: 40px;
+}
+
+.pdf-app .toolbarField.pageNumber.visiblePageIsLoading {
+  background-image: url(./images/loading-icon.svg);
+  background-repeat: no-repeat;
+  background-position: 1px;
+  background-size: 16px;
+}
+
+.pdf-app .toolbarField.pageNumber::-webkit-inner-spin-button,
+.pdf-app .toolbarField.pageNumber::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.pdf-app .toolbarLabel {
+  min-width: 16px;
+  padding: 3px 6px 3px 2px;
+  margin: 4px 2px 4px 0;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: left;
+  user-select: none;
+  cursor: default;
+}
+
+.pdf-app #thumbnailView {
+  position: absolute;
+  width: calc(100% - 60px);
+  top: 0;
+  bottom: 0;
+  padding: 10px 30px 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.pdf-app #thumbnailView > a:active,
+.pdf-app #thumbnailView > a:focus {
+  outline: 0;
+}
+
+.pdf-app .thumbnail {
+  margin: 0 10px 5px 10px;
+}
+html[dir="ltr"] .pdf-app .thumbnail {
+  float: left;
+}
+html[dir="rtl"] .pdf-app .thumbnail {
+  float: right;
+}
+
+.pdf-app #thumbnailView > a:last-of-type > .thumbnail {
+  margin-bottom: 10px;
+}
+
+.pdf-app #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
+  margin-bottom: 9px;
+}
+
+.pdf-app .thumbnail:not([data-loaded]) {
+  border: 1px dashed rgba(255, 255, 255, 0.5);
+  margin: -1px 9px 4px 9px;
+}
+
+.pdf-app .thumbnailImage {
+  border: 1px solid rgba(0, 0, 0, 0);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+  opacity: 0.8;
+  z-index: 99;
+  background-color: rgba(255, 255, 255, 1);
+  background-clip: content-box;
+}
+
+.pdf-app .thumbnailSelectionRing {
+  border-radius: 2px;
+  padding: 7px;
+}
+
+.pdf-app a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
+.pdf-app .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
+  opacity: 0.9;
+}
+
+.pdf-app #outlineView,
+.pdf-app #attachmentsView {
+  position: absolute;
+  width: calc(100% - 8px);
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  user-select: none;
+}
+
+.pdf-app #outlineView {
+  padding: 4px 4px 0;
+}
+.pdf-app #attachmentsView {
+  padding: 3px 4px 0;
+}
+
+html[dir="ltr"] .pdf-app .outlineWithDeepNesting > .outlineItem,
+html[dir="ltr"] .pdf-app .outlineItem > .outlineItems {
+  margin-left: 20px;
+}
+
+html[dir="rtl"] .pdf-app .outlineWithDeepNesting > .outlineItem,
+html[dir="rtl"] .pdf-app .outlineItem > .outlineItems {
+  margin-right: 20px;
+}
+
+.pdf-app .outlineItem > a,
+.pdf-app .attachmentsItem > button {
+  text-decoration: none;
+  display: inline-block;
+  min-width: 95%;
+  min-width: calc(
+          100% - 4px
+  ); /* Subtract the right padding (left, in RTL mode)
+                                  of the container. */
+  height: auto;
+  margin-bottom: 1px;
+  border-radius: 2px;
+  font-size: 13px;
+  line-height: 15px;
+  user-select: none;
+  white-space: normal;
+}
+
+.pdf-app .attachmentsItem > button {
+  border: 0 none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+html[dir="ltr"] .pdf-app .outlineItem > a {
+  padding: 2px 0 5px 4px;
+}
+html[dir="ltr"] .pdf-app .attachmentsItem > button {
+  padding: 2px 0 3px 7px;
+  text-align: left;
+}
+
+html[dir="rtl"] .pdf-app .outlineItem > a {
+  padding: 2px 4px 5px 0;
+}
+html[dir="rtl"] .pdf-app .attachmentsItem > button {
+  padding: 2px 7px 3px 0;
+  text-align: right;
+}
+
+.pdf-app .outlineItemToggler {
+  position: relative;
+  height: 0;
+  width: 0;
+  color: rgba(255, 255, 255, 0.5);
+}
+.pdf-app .outlineItemToggler::before {
+  content: url(./images/treeitem-expanded.png);
+  display: inline-block;
+  position: absolute;
+}
+.pdf-app .outlineItemToggler.outlineItemsHidden::before {
+  content: url(./images/treeitem-collapsed.png);
+}
+html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
+  transform: scaleX(-1);
+}
+.pdf-app .outlineItemToggler.outlineItemsHidden ~ .outlineItems {
+  display: none;
+}
+html[dir="ltr"] .pdf-app .outlineItemToggler {
+  float: left;
+}
+html[dir="rtl"] .pdf-app .outlineItemToggler {
+  float: right;
+}
+html[dir="ltr"] .pdf-app .outlineItemToggler::before {
+  right: 4px;
+}
+html[dir="rtl"] .pdf-app .outlineItemToggler::before {
+  left: 4px;
+}
+
+.pdf-app .outlineItemToggler:hover,
+.pdf-app .outlineItemToggler:hover + a,
+.pdf-app .outlineItemToggler:hover ~ .outlineItems,
+.pdf-app .outlineItem > a:hover,
+.pdf-app .attachmentsItem > button:hover {
+  border-radius: 2px;
+}
+
+.pdf-app .noResults {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  font-style: italic;
+  cursor: default;
+}
+
+/* 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 */
+.pdf-app ::selection {
+  background: rgba(0, 0, 255, 0.3);
+}
+
+.pdf-app #errorWrapper {
+  color: rgba(255, 255, 255, 1);
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+  padding: 3px;
+  font-size: 0.8em;
+}
+.loadingInProgress #errorWrapper {
+  top: 4px;
+}
+
+.pdf-app #errorMessageLeft {
+  float: left;
+}
+
+.pdf-app #errorMessageRight {
+  float: right;
+}
+
+.pdf-app #errorMoreInfo {
+  padding: 3px;
+  margin: 3px;
+  width: 98%;
+}
+
+.pdf-app .overlayButton {
+  width: auto;
+  margin: 3px 4px 2px 4px !important;
+  padding: 2px 6px 3px 6px;
+}
+
+.pdf-app #overlayContainer {
+  display: table;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 40000;
+}
+.pdf-app #overlayContainer > * {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.pdf-app #overlayContainer > .container {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.pdf-app #overlayContainer > .container > .dialog {
+  display: inline-block;
+  padding: 15px;
+  border-spacing: 4px;
+  font-size: 12px;
+  line-height: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+
+.pdf-app .dialog > .row {
+  display: table-row;
+}
+
+.pdf-app .dialog > .row > * {
+  display: table-cell;
+}
+
+.pdf-app .dialog .toolbarField {
+  margin: 5px 0;
+}
+
+.pdf-app .dialog .separator {
+  display: block;
+  margin: 4px 0 4px 0;
+  height: 1px;
+  width: 100%;
+}
+
+.pdf-app .dialog .buttonRow {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.pdf-app .dialog :link {
+  color: rgba(255, 255, 255, 1);
+}
+
+.pdf-app #passwordOverlay > .dialog {
+  text-align: center;
+}
+.pdf-app #passwordOverlay .toolbarField {
+  width: 200px;
+}
+
+.pdf-app #documentPropertiesOverlay > .dialog {
+  text-align: left;
+}
+.pdf-app #documentPropertiesOverlay .row > * {
+  min-width: 100px;
+}
+html[dir="ltr"] .pdf-app #documentPropertiesOverlay .row > * {
+  text-align: left;
+}
+html[dir="rtl"] .pdf-app #documentPropertiesOverlay .row > * {
+  text-align: right;
+}
+.pdf-app #documentPropertiesOverlay .row > span {
+  width: 125px;
+  word-wrap: break-word;
+}
+.pdf-app #documentPropertiesOverlay .row > p {
+  max-width: 225px;
+  word-wrap: break-word;
+}
+.pdf-app #documentPropertiesOverlay .buttonRow {
+  margin-top: 10px;
+}
+
+.pdf-app .clearBoth {
+  clear: both;
+}
+
+.fileInput {
+  display: none;
+}
+
+.pdf-app #PDFBug {
+  background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
+  border: 1px solid rgba(102, 102, 102, 1);
+  position: fixed;
+  top: 32px;
+  right: 0;
+  bottom: 0;
+  font-size: 10px;
+  padding: 0;
+  width: 300px;
+}
+.pdf-app #PDFBug .controls {
+  background: rgba(238, 238, 238, 1);
+  border-bottom: 1px solid rgba(102, 102, 102, 1);
+  padding: 3px;
+}
+.pdf-app #PDFBug .panels {
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  right: 0;
+  top: 27px;
+}
+.pdf-app #PDFBug .panels > div {
+  padding: 5px;
+}
+.pdf-app #PDFBug button.active {
+  font-weight: bold;
+}
+.pdf-app .debuggerShowText {
+  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
+  color: rgba(0, 0, 255, 1);
+}
+.pdf-app .debuggerHideText:hover {
+  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
+}
+.pdf-app #PDFBug .stats {
+  font-family: courier;
+  font-size: 10px;
+  white-space: pre;
+}
+.pdf-app #PDFBug .stats .title {
+  font-weight: bold;
+}
+.pdf-app #PDFBug table {
+  font-size: 10px;
+}
+
+.pdf-app #viewer.textLayer-visible .textLayer {
+  opacity: 1;
+}
+
+.pdf-app #viewer.textLayer-visible .canvasWrapper {
+  background-color: rgba(128, 255, 128, 1);
+}
+
+.pdf-app #viewer.textLayer-visible .canvasWrapper canvas {
+  mix-blend-mode: screen;
+}
+
+.pdf-app #viewer.textLayer-visible .textLayer > span {
+  background-color: rgba(255, 255, 0, 0.1);
+  color: rgba(0, 0, 0, 1);
+  border: solid 1px rgba(255, 0, 0, 0.5);
+  box-sizing: border-box;
+}
+
+.pdf-app #viewer.textLayer-hover .textLayer > span:hover {
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+}
+
+.pdf-app #viewer.textLayer-shadow .textLayer > span {
+  background-color: rgba(255, 255, 255, 0.6);
+  color: rgba(0, 0, 0, 1);
+}
+
+.pdf-app .grab-to-pan-grab {
+  cursor: grab !important;
+  cursor: -moz-grab !important;
+  cursor: -webkit-grab !important;
+  cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/openhand.cur'), n-resize; /* standard */
+  cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/openhand.cur'), n-resize\9; /* IE 8 and below */
+  *cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/openhand.cur'), n-resize; /* IE 7 and below */
+  _cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/openhand.cur'), n-resize; /* IE 6 */
+}
+.pdf-app
+.grab-to-pan-grab
+*:not(input):not(textarea):not(button):not(select):not(:link) {
+  cursor: inherit !important;
+}
+.pdf-app .grab-to-pan-grab:active,
+.grab-to-pan-grabbing {
+  cursor: grabbing !important;
+  cursor: -moz-grabbing !important;
+  cursor: -webkit-grabbing !important;
+  cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/closedhand.cur'), n-resize; /* standard */
+  cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/closedhand.cur'), n-resize\9; /* IE 8 and below */
+  *cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/closedhand.cur'), n-resize; /* IE 7 and below */
+  _cursor: url('https://github.com/bqworks/slider-pro/raw/master/dist/css/images/closedhand.cur'), n-resize; /* IE 6 */
+  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 screen and (min-resolution: 1.1dppx) {
+  .pdf-app .outlineItemToggler::before {
+    transform: scale(0.5);
+    top: -1px;
+    content: url(./images/treeitem-expanded@2x.png);
+  }
+  .pdf-app .outlineItemToggler.outlineItemsHidden::before {
+    content: url(./images/treeitem-collapsed@2x.png);
+  }
+  html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
+    transform: scaleX(-1) scale(0.5);
+  }
+}
+
+@media print {
+  /* General rules for printing. */
+  body {
+    background: rgba(0, 0, 0, 0) none;
+  }
+
+  /* body > *:not(#printContainer) {
+    display: none !important;
+  } */
+
+  /* Rules for browsers that don't support mozPrintCallback. */
+  .pdf-app #sidebarContainer,
+  .pdf-app #secondaryToolbar,
+  .pdf-app .toolbar,
+  .pdf-app #loadingBox,
+  .pdf-app #errorWrapper,
+  .pdf-app .textLayer {
+    display: none;
+  }
+  .pdf-app #viewerContainer {
+    overflow: visible;
+  }
+
+  .pdf-app #mainContainer,
+  .pdf-app #viewerContainer,
+  .pdf-app .page,
+  .pdf-app .page canvas {
+    position: static;
+    padding: 0;
+    margin: 0;
+  }
+
+  .pdf-app .page {
+    float: left;
+    display: none;
+    border: none;
+    box-shadow: none;
+    background-clip: content-box;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .pdf-app .page[data-loaded] {
+    display: block;
+  }
+
+  /* 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 > div {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    overflow: visible;
+    page-break-after: always;
+    page-break-inside: avoid;
+  }
+  #printContainer canvas,
+  #printContainer img {
+    display: block;
+  }
+}
+
+.pdf-app .visibleLargeView,
+.pdf-app .visibleMediumView,
+.pdf-app .visibleSmallView {
+  display: none;
+}
+
+@media all and (max-width: 900px) {
+  .pdf-app #toolbarViewerMiddle {
+    display: table;
+    margin: auto;
+    left: auto;
+    position: inherit;
+    transform: none;
+  }
+}
+
+@media all and (max-width: 840px) {
+  html[dir="ltr"] .pdf-app #outerContainer.sidebarOpen #viewerContainer {
+    left: 0px !important;
+  }
+  html[dir="rtl"] .pdf-app #outerContainer.sidebarOpen #viewerContainer {
+    right: 0px !important;
+  }
+
+  .pdf-app #outerContainer .hiddenLargeView,
+  .pdf-app #outerContainer .hiddenMediumView {
+    display: inherit;
+  }
+  .pdf-app #outerContainer .visibleLargeView,
+  .pdf-app #outerContainer .visibleMediumView {
+    display: none;
+  }
+}
+
+@media all and (max-width: 770px) {
+  .pdf-app #outerContainer .hiddenLargeView {
+    display: none;
+  }
+  .pdf-app #outerContainer .visibleLargeView {
+    display: inherit;
+  }
+}
+
+@media all and (max-width: 700px) {
+  .pdf-app #outerContainer .hiddenMediumView {
+    display: none;
+  }
+  .pdf-app #outerContainer .visibleMediumView {
+    display: inherit;
+  }
+}
+
+@media all and (max-width: 640px) {
+  .pdf-app .hiddenSmallView,
+  .pdf-app .hiddenSmallView * {
+    display: none;
+  }
+  .pdf-app .visibleSmallView {
+    display: inherit;
+  }
+  .pdf-app .toolbarButtonSpacer {
+    width: 0;
+  }
+  html[dir="ltr"] .pdf-app .findbar {
+    left: 38px;
+  }
+  html[dir="rtl"] .pdf-app .findbar {
+    right: 38px;
+  }
+}
+
+@media all and (max-width: 535px) {
+  .pdf-app #scaleSelectContainer {
+    display: none;
+  }
+}