Merge pull request #606 from nextcloud/dependabot/npm_and_yarn/pdfjs-dist-2.14.305

1 files changed, 597 insertions, 690 deletions

diff --git a/js/pdfjs/web/viewer.css b/js/pdfjs/web/viewer.css
index 6633fd9..cd6c0a4 100644
--- a/js/pdfjs/web/viewer.css
+++ b/js/pdfjs/web/viewer.css
@@ -26,6 +26,7 @@
   -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
           text-size-adjust: none;
+  forced-color-adjust: none;
 }
 
 .textLayer span,
@@ -654,12 +655,12 @@
 }
 
 :root {
+  --viewer-container-height: 0;
   --pdfViewer-padding-bottom: 0;
   --page-margin: 1px auto -8px;
   --page-border: 9px solid transparent;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
   --zoom-factor: 1;
-  --viewport-scale-factor: 1;
 }
 
 @media screen and (forced-colors: active) {
@@ -696,7 +697,7 @@
 .pdfViewer .dummyPage {
   position: relative;
   width: 0;
-  /* The height is set via JS, see `BaseViewer.#ensurePageViewVisible`. */
+  height: var(--viewer-container-height);
 }
 
 .pdfViewer.removePageBorders .page {
@@ -800,12 +801,12 @@
 }
 
 :root {
+  --dir-factor: 1;
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
   --scale-select-container-width: 140px;
   --scale-select-overflow: 22px;
-  --loadingBar-end-offset: 0;
 
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
@@ -813,6 +814,8 @@
   --main-color: rgba(12, 12, 13, 1);
   --body-bg-color: rgba(237, 237, 240, 1);
   --errorWrapper-bg-color: rgba(255, 110, 110, 1);
+  --progressBar-percent: 0%;
+  --progressBar-end-offset: 0;
   --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);
@@ -834,7 +837,6 @@
   --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);
@@ -845,9 +847,9 @@
   --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);
+  --dialog-button-border: 0 none;
+  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
+  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
 
   --loading-icon: url(images/loading.svg);
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@@ -888,6 +890,10 @@
   --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
 }
 
+[dir="rtl"]:root {
+  --dir-factor: -1;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --main-color: rgba(249, 249, 250, 1);
@@ -914,7 +920,6 @@
     --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);
@@ -925,8 +930,8 @@
     --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);
+    --dialog-button-bg-color: rgba(92, 92, 97, 1);
+    --dialog-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
@@ -947,9 +952,9 @@
     --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;
+    --dialog-button-border: 1px solid Highlight;
+    --dialog-button-hover-bg-color: Highlight;
+    --dialog-button-hover-color: ButtonFace;
     --field-border-color: ButtonText;
   }
 }
@@ -959,14 +964,13 @@
   margin: 0;
 }
 
-html {
+html,
+body {
   height: 100%;
   width: 100%;
 }
 
 body {
-  height: 100%;
-  width: 100%;
   background-color: var(--body-bg-color);
 }
 
@@ -979,9 +983,7 @@ select {
   scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
 }
 
-.hidden {
-  display: none !important;
-}
+.hidden,
 [hidden] {
   display: none !important;
 }
@@ -1036,47 +1038,59 @@ select {
   position: relative;
 }
 
+[dir="ltr"] #sidebarContainer {
+  left: calc(-1 * var(--sidebar-width));
+}
+
+[dir="rtl"] #sidebarContainer {
+  right: calc(-1 * var(--sidebar-width));
+}
+
+[dir="ltr"] #sidebarContainer {
+  border-right: var(--doorhanger-border-color-whcm);
+}
+
+[dir="rtl"] #sidebarContainer {
+  border-left: var(--doorhanger-border-color-whcm);
+}
+
+[dir="ltr"] #sidebarContainer {
+  transition-property: left;
+}
+
+[dir="rtl"] #sidebarContainer {
+  transition-property: right;
+}
+
 #sidebarContainer {
   position: absolute;
   top: 32px;
   bottom: 0;
+  inset-inline-start: calc(-1 * var(--sidebar-width));
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
   border-top: 1px solid rgba(51, 51, 51, 1);
+  -webkit-border-end: var(--doorhanger-border-color-whcm);
+          border-inline-end: var(--doorhanger-border-color-whcm);
+  transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-html[dir="ltr"] #sidebarContainer {
-  transition-property: left;
-  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);
-}
-
-#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. */
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
 
 #outerContainer.sidebarMoving #sidebarContainer,
 #outerContainer.sidebarOpen #sidebarContainer {
   visibility: visible;
 }
-html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
+[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
   left: 0;
 }
-html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
+[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
   right: 0;
 }
+#outerContainer.sidebarOpen #sidebarContainer {
+  inset-inline-start: 0;
+}
 
 #mainContainer {
   position: absolute;
@@ -1087,27 +1101,27 @@ html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
   min-width: 320px;
 }
 
+[dir="ltr"] #sidebarContent {
+  left: 0;
+}
+
+[dir="rtl"] #sidebarContent {
+  right: 0;
+}
+
 #sidebarContent {
   top: 32px;
   bottom: 0;
+  inset-inline-start: 0;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
   position: absolute;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.1);
-}
-html[dir="ltr"] #sidebarContent {
-  left: 0;
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
-}
-html[dir="rtl"] #sidebarContent {
-  right: 0;
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
 }
 
 #viewerContainer {
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
   position: absolute;
   top: 32px;
   right: 0;
@@ -1120,22 +1134,25 @@ html[dir="rtl"] #sidebarContent {
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-#outerContainer.sidebarResizing #viewerContainer {
-  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
-  transition-duration: 0s;
+[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+  left: var(--sidebar-width);
+}
+
+[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+  right: var(--sidebar-width);
 }
 
-html[dir="ltr"]
-  #outerContainer.sidebarOpen
-  #viewerContainer:not(.pdfPresentationMode) {
+[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: left;
-  left: var(--sidebar-width);
 }
-html[dir="rtl"]
-  #outerContainer.sidebarOpen
-  #viewerContainer:not(.pdfPresentationMode) {
+
+[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: right;
-  right: var(--sidebar-width);
+}
+
+#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+  inset-inline-start: var(--sidebar-width);
+  transition-property: inset-inline-start;
 }
 
 .toolbar {
@@ -1154,44 +1171,27 @@ html[dir="rtl"]
   width: 100%;
   height: 32px;
   background-color: var(--sidebar-toolbar-bg-color);
-}
-html[dir="ltr"] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 0 1px rgba(0, 0, 0, 0.1);
-}
-html[dir="rtl"] #toolbarSidebar {
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25),
+    0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
-html[dir="ltr"] #toolbarSidebar .toolbarButton {
-  margin-right: 2px !important;
-}
-html[dir="rtl"] #toolbarSidebar .toolbarButton {
-  margin-left: 2px !important;
+[dir="ltr"] #sidebarResizer {
+  right: -6px;
 }
 
-html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
-  margin-right: 3px !important;
-}
-html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
-  margin-left: 3px !important;
+[dir="rtl"] #sidebarResizer {
+  left: -6px;
 }
 
 #sidebarResizer {
   position: absolute;
   top: 0;
   bottom: 0;
+  inset-inline-end: -6px;
   width: 6px;
   z-index: 200;
   cursor: ew-resize;
 }
-html[dir="ltr"] #sidebarResizer {
-  right: -6px;
-}
-html[dir="rtl"] #sidebarResizer {
-  left: -6px;
-}
 
 #toolbarContainer,
 .findbar,
@@ -1206,43 +1206,52 @@ html[dir="rtl"] #sidebarResizer {
   height: 32px;
 }
 
+[dir="ltr"] #loadingBar {
+  left: 0;
+  right: var(--progressBar-end-offset);
+}
+
+[dir="rtl"] #loadingBar {
+  right: 0;
+  left: var(--progressBar-end-offset);
+}
+
+[dir="ltr"] #loadingBar {
+  transition-property: left;
+}
+
+[dir="rtl"] #loadingBar {
+  transition-property: right;
+}
+
 #loadingBar {
   position: absolute;
+  inset-inline: 0 var(--progressBar-end-offset);
   height: 4px;
   background-color: var(--body-bg-color);
   border-bottom: 1px solid var(--toolbar-border-color);
-
+  transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-html[dir="ltr"] #loadingBar {
-  transition-property: left;
-  left: 0;
-  right: var(--loadingBar-end-offset);
-}
-html[dir="rtl"] #loadingBar {
-  transition-property: right;
-  left: var(--loadingBar-end-offset);
-  right: 0;
-}
 
-html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
+[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
   left: var(--sidebar-width);
 }
-html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
+
+[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
   right: var(--sidebar-width);
 }
 
-#outerContainer.sidebarResizing #loadingBar {
-  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
-  transition-duration: 0s;
+#outerContainer.sidebarOpen #loadingBar {
+  inset-inline-start: var(--sidebar-width);
 }
 
 #loadingBar .progress {
   position: absolute;
   top: 0;
   left: 0;
-  width: 0%;
+  width: var(--progressBar-percent);
   height: 100%;
   background-color: var(--progressBar-color);
   overflow: hidden;
@@ -1268,6 +1277,7 @@ html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
 }
 
 #loadingBar .progress.indeterminate {
+  width: 100%;
   background-color: var(--progressBar-indeterminate-bg-color);
   transition: none;
 }
@@ -1291,13 +1301,19 @@ html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
           animation: progressIndeterminate 1s linear infinite;
 }
 
+#outerContainer.sidebarResizing #sidebarContainer,
+#outerContainer.sidebarResizing #viewerContainer,
+#outerContainer.sidebarResizing #loadingBar {
+  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
+  transition-duration: 0s;
+}
+
 .findbar,
 .secondaryToolbar {
   top: 32px;
   position: absolute;
   z-index: 10000;
   height: auto;
-  min-width: 16px;
   padding: 0 4px;
   margin: 4px 2px;
   color: rgba(217, 217, 217, 1);
@@ -1307,62 +1323,38 @@ html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
   cursor: default;
 }
 
-.findbar {
-  min-width: 300px;
-  background-color: var(--toolbar-bg-color);
-}
-.findbar > div {
-  height: 32px;
-}
-.findbar.wrapContainers > div {
-  clear: both;
-}
-.findbar.wrapContainers > div.findbarMessageContainer {
-  height: auto;
-}
-html[dir="ltr"] .findbar {
+[dir="ltr"] .findbar {
   left: 64px;
 }
-html[dir="rtl"] .findbar {
+
+[dir="rtl"] .findbar {
   right: 64px;
 }
 
-.findbar .splitToolbarButton {
-  margin-top: 3px;
+.findbar {
+  inset-inline-start: 64px;
+  min-width: 300px;
+  background-color: var(--toolbar-bg-color);
 }
-html[dir="ltr"] .findbar .splitToolbarButton {
-  margin-left: 0;
-  margin-right: 5px;
+.findbar > div {
+  height: 32px;
 }
-html[dir="rtl"] .findbar .splitToolbarButton {
-  margin-left: 5px;
-  margin-right: 0;
+[dir="ltr"] .findbar > div#findbarInputContainer {
+  margin-right: 4px;
 }
-
-.findbar .splitToolbarButton > .toolbarButton {
-  background-color: var(--findbar-nextprevious-btn-bg-color);
-  border-radius: 0;
-  height: 26px;
-  border-top: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color);
+[dir="rtl"] .findbar > div#findbarInputContainer {
+  margin-left: 4px;
 }
-
-.findbar .splitToolbarButton > .toolbarButton::before {
-  top: 5px;
+.findbar > div#findbarInputContainer {
+  -webkit-margin-end: 4px;
+          margin-inline-end: 4px;
 }
-
-.findbar .splitToolbarButton > .findNext {
-  width: 29px;
-}
-html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  border-right: 1px solid var(--field-border-color);
+.findbar.wrapContainers > div,
+.findbar.wrapContainers > div#findbarMessageContainer > * {
+  clear: both;
 }
-html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-left: 1px solid var(--field-border-color);
+.findbar.wrapContainers > div#findbarMessageContainer {
+  height: auto;
 }
 
 .findbar input[type="checkbox"] {
@@ -1381,15 +1373,6 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
   background-color: var(--button-hover-color);
 }
 
-html[dir="ltr"] #findInput {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-html[dir="rtl"] #findInput {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
   background-color: var(--toggled-btn-bg-color) !important;
   color: var(--toggled-btn-color);
@@ -1407,33 +1390,33 @@ html[dir="rtl"] #findInput {
 #findInput[data-status="pending"] {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
-  background-position: 98%;
-}
-html[dir="rtl"] #findInput[data-status="pending"] {
-  background-position: 3px;
+  background-position: calc(50% + 48% * var(--dir-factor));
 }
 #findInput[data-status="notFound"] {
   background-color: rgba(255, 102, 102, 1);
 }
 
+[dir="ltr"] .secondaryToolbar {
+  right: 4px;
+}
+
+[dir="rtl"] .secondaryToolbar {
+  left: 4px;
+}
+
 .secondaryToolbar {
   padding: 6px 0 10px;
+  inset-inline-end: 4px;
   height: auto;
   z-index: 30000;
   background-color: var(--doorhanger-bg-color);
 }
-html[dir="ltr"] .secondaryToolbar {
-  right: 4px;
-}
-html[dir="rtl"] .secondaryToolbar {
-  left: 4px;
-}
 
 #secondaryToolbarButtonContainer {
   max-width: 220px;
-  max-height: 400px;
+  min-height: 26px;
+  max-height: calc(var(--viewer-container-height) - 40px);
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   margin-bottom: -4px;
 }
 
@@ -1449,7 +1432,7 @@ html[dir="rtl"] .secondaryToolbar {
 .doorHangerRight:after,
 .doorHangerRight:before {
   bottom: 100%;
-  border: solid rgba(0, 0, 0, 0);
+  border: 8px solid rgba(0, 0, 0, 0);
   content: " ";
   height: 0;
   width: 0;
@@ -1457,14 +1440,40 @@ html[dir="rtl"] .secondaryToolbar {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
-.doorHanger:after,
-.doorHangerRight:after {
-  border-width: 8px;
+[dir="ltr"] .doorHanger:after {
+  left: 10px;
+}
+[dir="rtl"] .doorHanger:after {
+  right: 10px;
+}
+[dir="ltr"] .doorHanger:after {
+  margin-left: -8px;
+}
+[dir="rtl"] .doorHanger:after {
+  margin-right: -8px;
 }
 .doorHanger:after {
+  inset-inline-start: 10px;
+  -webkit-margin-start: -8px;
+          margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
+[dir="ltr"] .doorHangerRight:after {
+  right: 10px;
+}
+[dir="rtl"] .doorHangerRight:after {
+  left: 10px;
+}
+[dir="ltr"] .doorHangerRight:after {
+  margin-right: -8px;
+}
+[dir="rtl"] .doorHangerRight:after {
+  margin-left: -8px;
+}
 .doorHangerRight:after {
+  inset-inline-end: 10px;
+  -webkit-margin-end: -8px;
+          margin-inline-end: -8px;
   border-bottom-color: var(--doorhanger-bg-color);
 }
 .doorHanger:before,
@@ -1472,30 +1481,40 @@ html[dir="rtl"] .secondaryToolbar {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
-
-html[dir="ltr"] .doorHanger:after,
-html[dir="rtl"] .doorHangerRight:after {
+[dir="ltr"] .doorHanger:before {
   left: 10px;
-  margin-left: -8px;
 }
-
-html[dir="ltr"] .doorHanger:before,
-html[dir="rtl"] .doorHangerRight:before {
-  left: 10px;
+[dir="rtl"] .doorHanger:before {
+  right: 10px;
+}
+[dir="ltr"] .doorHanger:before {
   margin-left: -9px;
 }
-
-html[dir="rtl"] .doorHanger:after,
-html[dir="ltr"] .doorHangerRight:after {
-  right: 10px;
-  margin-right: -8px;
+[dir="rtl"] .doorHanger:before {
+  margin-right: -9px;
 }
-
-html[dir="rtl"] .doorHanger:before,
-html[dir="ltr"] .doorHangerRight:before {
+.doorHanger:before {
+  inset-inline-start: 10px;
+  -webkit-margin-start: -9px;
+          margin-inline-start: -9px;
+}
+[dir="ltr"] .doorHangerRight:before {
   right: 10px;
+}
+[dir="rtl"] .doorHangerRight:before {
+  left: 10px;
+}
+[dir="ltr"] .doorHangerRight:before {
   margin-right: -9px;
 }
+[dir="rtl"] .doorHangerRight:before {
+  margin-left: -9px;
+}
+.doorHangerRight:before {
+  inset-inline-end: 10px;
+  -webkit-margin-end: -9px;
+          margin-inline-end: -9px;
+}
 
 #findResultsCount {
   background-color: rgba(217, 217, 217, 1);
@@ -1520,65 +1539,125 @@ html[dir="ltr"] .doorHangerRight:before {
   transform: translateX(-50%);
 }
 
-html[dir="ltr"] #toolbarViewerLeft,
-html[dir="rtl"] #toolbarViewerRight,
-html[dir="ltr"] #toolbarSidebarLeft,
-html[dir="rtl"] #toolbarSidebarRight {
+[dir="ltr"] #toolbarViewerLeft,[dir="ltr"] 
+#toolbarSidebarLeft {
   float: left;
 }
-html[dir="ltr"] #toolbarViewerRight,
-html[dir="rtl"] #toolbarViewerLeft,
-html[dir="ltr"] #toolbarSidebarRight,
-html[dir="rtl"] #toolbarSidebarLeft {
+
+[dir="rtl"] #toolbarViewerLeft,[dir="rtl"] 
+#toolbarSidebarLeft {
   float: right;
 }
-html[dir="ltr"] #toolbarViewerLeft > *,
-html[dir="ltr"] #toolbarViewerMiddle > *,
-html[dir="ltr"] #toolbarViewerRight > *,
-html[dir="ltr"] #toolbarSidebarLeft *,
-html[dir="ltr"] #toolbarSidebarRight *,
-html[dir="ltr"] .findbar * {
-  position: relative;
+
+#toolbarViewerLeft,
+#toolbarSidebarLeft {
+  float: inline-start;
+}
+[dir="ltr"] #toolbarViewerRight,[dir="ltr"] 
+#toolbarSidebarRight {
+  float: right;
+}
+[dir="rtl"] #toolbarViewerRight,[dir="rtl"] 
+#toolbarSidebarRight {
   float: left;
 }
-html[dir="rtl"] #toolbarViewerLeft > *,
-html[dir="rtl"] #toolbarViewerMiddle > *,
-html[dir="rtl"] #toolbarViewerRight > *,
-html[dir="rtl"] #toolbarSidebarLeft *,
-html[dir="rtl"] #toolbarSidebarRight *,
-html[dir="rtl"] .findbar * {
-  position: relative;
+#toolbarViewerRight,
+#toolbarSidebarRight {
+  float: inline-end;
+}
+
+[dir="ltr"] #toolbarViewerLeft > *,[dir="ltr"] 
+#toolbarViewerMiddle > *,[dir="ltr"] 
+#toolbarViewerRight > *,[dir="ltr"] 
+#toolbarSidebarLeft *,[dir="ltr"] 
+#toolbarSidebarRight *,[dir="ltr"] 
+.findbar * {
+  float: left;
+}
+
+[dir="rtl"] #toolbarViewerLeft > *,[dir="rtl"] 
+#toolbarViewerMiddle > *,[dir="rtl"] 
+#toolbarViewerRight > *,[dir="rtl"] 
+#toolbarSidebarLeft *,[dir="rtl"] 
+#toolbarSidebarRight *,[dir="rtl"] 
+.findbar * {
   float: right;
 }
 
+#toolbarViewerLeft > *,
+#toolbarViewerMiddle > *,
+#toolbarViewerRight > *,
+#toolbarSidebarLeft *,
+#toolbarSidebarRight *,
+.findbar * {
+  position: relative;
+  float: inline-start;
+}
+
+[dir="ltr"] #toolbarViewerLeft {
+  padding-left: 1px;
+}
+
+[dir="rtl"] #toolbarViewerLeft {
+  padding-right: 1px;
+}
+
+#toolbarViewerLeft {
+  -webkit-padding-start: 1px;
+          padding-inline-start: 1px;
+}
+[dir="ltr"] #toolbarViewerRight {
+  padding-right: 1px;
+}
+[dir="rtl"] #toolbarViewerRight {
+  padding-left: 1px;
+}
+#toolbarViewerRight {
+  -webkit-padding-end: 1px;
+          padding-inline-end: 1px;
+}
+[dir="ltr"] #toolbarSidebarRight {
+  padding-right: 2px;
+}
+[dir="rtl"] #toolbarSidebarRight {
+  padding-left: 2px;
+}
+#toolbarSidebarRight {
+  -webkit-padding-end: 2px;
+          padding-inline-end: 2px;
+}
+
 .splitToolbarButton {
-  margin: 2px 2px 0;
+  margin: 2px;
   display: inline-block;
 }
-html[dir="ltr"] .splitToolbarButton > .toolbarButton {
+[dir="ltr"] .splitToolbarButton > .toolbarButton {
   float: left;
 }
-html[dir="rtl"] .splitToolbarButton > .toolbarButton {
+[dir="rtl"] .splitToolbarButton > .toolbarButton {
   float: right;
 }
+.splitToolbarButton > .toolbarButton {
+  float: inline-start;
+}
 
 .toolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   border: 0 none;
   background: none;
   width: 28px;
   height: 28px;
 }
 
-.overlayButton:hover,
-.overlayButton:focus-visible {
-  background-color: var(--overlay-button-hover-bg-color);
+.dialogButton:hover,
+.dialogButton:focus-visible {
+  background-color: var(--dialog-button-hover-bg-color);
 }
 
-.overlayButton:hover > span,
-.overlayButton:focus-visible > span {
-  color: var(--overlay-button-hover-color);
+.dialogButton:hover > span,
+.dialogButton:focus-visible > span {
+  color: var(--dialog-button-hover-color);
 }
 
 .toolbarButton > span {
@@ -1590,59 +1669,50 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
 
 .toolbarButton[disabled],
 .secondaryToolbarButton[disabled],
-.overlayButton[disabled] {
+.dialogButton[disabled] {
   opacity: 0.5;
 }
 
-.splitToolbarButton.toggled .toolbarButton {
-  margin: 0;
-}
-
 .splitToolbarButton > .toolbarButton:hover,
 .splitToolbarButton > .toolbarButton:focus-visible,
-.dropdownToolbarButton:hover,
-.toolbarButton.textButton:hover,
-.toolbarButton.textButton:focus-visible {
+.dropdownToolbarButton:hover {
   background-color: var(--button-hover-color);
-  z-index: 199;
 }
 .splitToolbarButton > .toolbarButton {
   position: relative;
-}
-html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
-html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
   margin: 0;
 }
-html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
-html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
-  margin: 0;
+[dir="ltr"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
+  margin-right: 2px;
 }
-.splitToolbarButtonSeparator {
-  padding: 10px 0;
-  width: 1px;
-  background-color: var(--separator-color);
-  z-index: 99;
-  display: inline-block;
-  margin: 4px 0;
+[dir="rtl"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
+  margin-left: 2px;
 }
-
-.findbar .splitToolbarButtonSeparator {
-  background-color: var(--field-border-color);
-  margin: 0;
-  padding: 13px 0;
+#toolbarSidebar .splitToolbarButton > .toolbarButton {
+  -webkit-margin-end: 2px;
+          margin-inline-end: 2px;
 }
 
-html[dir="ltr"] .splitToolbarButtonSeparator {
+[dir="ltr"] .splitToolbarButtonSeparator {
   float: left;
 }
-html[dir="rtl"] .splitToolbarButtonSeparator {
+
+[dir="rtl"] .splitToolbarButtonSeparator {
   float: right;
 }
 
+.splitToolbarButtonSeparator {
+  float: inline-start;
+  margin: 4px 0;
+  width: 1px;
+  height: 20px;
+  background-color: var(--separator-color);
+}
+
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   min-width: 16px;
   margin: 2px 1px;
   padding: 2px 6px 0;
@@ -1658,15 +1728,6 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
   box-sizing: border-box;
 }
 
-html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
-html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
-  margin-left: 2px;
-}
-
-html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
-html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
-  margin-right: 2px;
-}
 .toolbarButton:hover,
 .toolbarButton:focus-visible {
   background-color: var(--button-hover-color);
@@ -1684,14 +1745,11 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   color: var(--toggled-btn-color);
 }
 
+.toolbarButton.toggled::before,
 .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 {
@@ -1703,57 +1761,53 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   padding: 0;
   overflow: hidden;
   background-color: var(--dropdown-btn-bg-color);
-  margin-top: 2px !important;
+}
+[dir="ltr"] .dropdownToolbarButton::after {
+  right: 7px;
+}
+[dir="rtl"] .dropdownToolbarButton::after {
+  left: 7px;
 }
 .dropdownToolbarButton::after {
   top: 6px;
+  inset-inline-end: 7px;
   pointer-events: none;
-
   -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
-  mask-image: var(--toolbarButton-menuArrow-icon);
+          mask-image: var(--toolbarButton-menuArrow-icon);
 }
-html[dir="ltr"] .dropdownToolbarButton::after {
-  right: 7px;
+
+[dir="ltr"] .dropdownToolbarButton > select {
+  padding-left: 4px;
 }
-html[dir="rtl"] .dropdownToolbarButton::after {
-  left: 7px;
+
+[dir="rtl"] .dropdownToolbarButton > select {
+  padding-right: 4px;
 }
 
 .dropdownToolbarButton > select {
-  width: calc(var(--scale-select-container-width) + var(--scale-select-overflow));
+  width: calc(
+    var(--scale-select-container-width) + var(--scale-select-overflow)
+  );
   height: 28px;
   font-size: 12px;
   color: var(--main-color);
   margin: 0;
   padding: 1px 0 2px;
+  -webkit-padding-start: 4px;
+          padding-inline-start: 4px;
   border: none;
   background-color: var(--dropdown-btn-bg-color);
 }
-html[dir="ltr"] .dropdownToolbarButton > select {
-  padding-left: 4px;
-}
-html[dir="rtl"] .dropdownToolbarButton > select {
-  padding-right: 4px;
-}
 .dropdownToolbarButton > select:hover,
 .dropdownToolbarButton > select:focus-visible {
   background-color: var(--button-hover-color);
   color: var(--toggled-btn-color);
 }
-
 .dropdownToolbarButton > select > option {
   background: var(--doorhanger-bg-color);
   color: var(--main-color);
 }
 
-#customScaleOption {
-  display: none;
-}
-
-#pageWidthOption {
-  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
-}
-
 .toolbarButtonSpacer {
   width: 30px;
   display: inline-block;
@@ -1774,7 +1828,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
   content: "";
   background-color: var(--toolbar-icon-bg-color);
   -webkit-mask-size: cover;
-  mask-size: cover;
+          mask-size: cover;
 }
 
 .dropdownToolbarButton:hover::after,
@@ -1796,143 +1850,147 @@ html[dir="rtl"] .dropdownToolbarButton > select {
   background-color: var(--toolbar-icon-hover-bg-color);
 }
 
-.secondaryToolbarButton::before {
-  opacity: var(--doorhanger-icon-opacity);
-  top: 5px;
-}
-html[dir="ltr"] .secondaryToolbarButton::before {
+[dir="ltr"] .secondaryToolbarButton::before {
   left: 12px;
 }
-html[dir="rtl"] .secondaryToolbarButton::before {
+
+[dir="rtl"] .secondaryToolbarButton::before {
   right: 12px;
 }
 
-.toolbarButton#sidebarToggle::before {
-  -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
-  mask-image: var(--toolbarButton-sidebarToggle-icon);
+.secondaryToolbarButton::before {
+  opacity: var(--doorhanger-icon-opacity);
+  top: 5px;
+  inset-inline-start: 12px;
 }
-html[dir="rtl"] .toolbarButton#sidebarToggle::before {
-  transform: scaleX(-1);
+
+#sidebarToggle::before {
+  -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
+          mask-image: var(--toolbarButton-sidebarToggle-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-.toolbarButton#secondaryToolbarToggle::before {
+#secondaryToolbarToggle::before {
   -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
-  mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
-}
-html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
-  transform: scaleX(-1);
+          mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-.toolbarButton.findPrevious::before {
+#findPrevious::before {
   -webkit-mask-image: var(--findbarButton-previous-icon);
-  mask-image: var(--findbarButton-previous-icon);
+          mask-image: var(--findbarButton-previous-icon);
 }
 
-.toolbarButton.findNext::before {
+#findNext::before {
   -webkit-mask-image: var(--findbarButton-next-icon);
-  mask-image: var(--findbarButton-next-icon);
+          mask-image: var(--findbarButton-next-icon);
 }
 
-.toolbarButton.pageUp::before {
+#previous::before {
   -webkit-mask-image: var(--toolbarButton-pageUp-icon);
-  mask-image: var(--toolbarButton-pageUp-icon);
+          mask-image: var(--toolbarButton-pageUp-icon);
 }
 
-.toolbarButton.pageDown::before {
+#next::before {
   -webkit-mask-image: var(--toolbarButton-pageDown-icon);
-  mask-image: var(--toolbarButton-pageDown-icon);
+          mask-image: var(--toolbarButton-pageDown-icon);
 }
 
-.toolbarButton.zoomOut::before {
+#zoomOut::before {
   -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
-  mask-image: var(--toolbarButton-zoomOut-icon);
+          mask-image: var(--toolbarButton-zoomOut-icon);
 }
 
-.toolbarButton.zoomIn::before {
+#zoomIn::before {
   -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
-  mask-image: var(--toolbarButton-zoomIn-icon);
+          mask-image: var(--toolbarButton-zoomIn-icon);
 }
 
-.toolbarButton.presentationMode::before,
-.secondaryToolbarButton.presentationMode::before {
+#presentationMode::before,
+#secondaryPresentationMode::before {
   -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
-  mask-image: var(--toolbarButton-presentationMode-icon);
+          mask-image: var(--toolbarButton-presentationMode-icon);
 }
 
-.toolbarButton.print::before,
-.secondaryToolbarButton.print::before {
+#print::before,
+#secondaryPrint::before {
   -webkit-mask-image: var(--toolbarButton-print-icon);
-  mask-image: var(--toolbarButton-print-icon);
+          mask-image: var(--toolbarButton-print-icon);
 }
 
-.toolbarButton.openFile::before,
-.secondaryToolbarButton.openFile::before {
+#openFile::before,
+#secondaryOpenFile::before {
   -webkit-mask-image: var(--toolbarButton-openFile-icon);
-  mask-image: var(--toolbarButton-openFile-icon);
+          mask-image: var(--toolbarButton-openFile-icon);
 }
 
-.toolbarButton.download::before,
-.secondaryToolbarButton.download::before {
+#download::before,
+#secondaryDownload::before {
   -webkit-mask-image: var(--toolbarButton-download-icon);
-  mask-image: var(--toolbarButton-download-icon);
+          mask-image: var(--toolbarButton-download-icon);
 }
 
-.secondaryToolbarButton.bookmark {
+a.secondaryToolbarButton {
   padding-top: 6px;
   text-decoration: none;
 }
-
-.bookmark[href="#"] {
+a.toolbarButton[href="#"],
+a.secondaryToolbarButton[href="#"] {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.toolbarButton.bookmark::before,
-.secondaryToolbarButton.bookmark::before {
+#viewBookmark::before,
+#secondaryViewBookmark::before {
   -webkit-mask-image: var(--toolbarButton-bookmark-icon);
-  mask-image: var(--toolbarButton-bookmark-icon);
+          mask-image: var(--toolbarButton-bookmark-icon);
 }
 
-#viewThumbnail.toolbarButton::before {
+#viewThumbnail::before {
   -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
-  mask-image: var(--toolbarButton-viewThumbnail-icon);
+          mask-image: var(--toolbarButton-viewThumbnail-icon);
 }
 
-#viewOutline.toolbarButton::before {
+#viewOutline::before {
   -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
-  mask-image: var(--toolbarButton-viewOutline-icon);
-}
-html[dir="rtl"] #viewOutline.toolbarButton::before {
-  transform: scaleX(-1);
+          mask-image: var(--toolbarButton-viewOutline-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-#viewAttachments.toolbarButton::before {
+#viewAttachments::before {
   -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
-  mask-image: var(--toolbarButton-viewAttachments-icon);
+          mask-image: var(--toolbarButton-viewAttachments-icon);
 }
 
-#viewLayers.toolbarButton::before {
+#viewLayers::before {
   -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
-  mask-image: var(--toolbarButton-viewLayers-icon);
+          mask-image: var(--toolbarButton-viewLayers-icon);
 }
 
-#currentOutlineItem.toolbarButton::before {
+#currentOutlineItem::before {
   -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
-  mask-image: var(--toolbarButton-currentOutlineItem-icon);
-}
-html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
-  transform: scaleX(-1);
+          mask-image: var(--toolbarButton-currentOutlineItem-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-#viewFind.toolbarButton::before {
+#viewFind::before {
   -webkit-mask-image: var(--toolbarButton-search-icon);
-  mask-image: var(--toolbarButton-search-icon);
+          mask-image: var(--toolbarButton-search-icon);
+}
+
+[dir="ltr"] .pdfSidebarNotification::after {
+  left: 17px;
 }
 
-.toolbarButton.pdfSidebarNotification::after {
+[dir="rtl"] .pdfSidebarNotification::after {
+  right: 17px;
+}
+
+.pdfSidebarNotification::after {
   position: absolute;
   display: inline-block;
   top: 1px;
+  inset-inline-start: 17px;
   /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
   content: "";
   background-color: rgba(112, 219, 85, 1);
@@ -1940,131 +1998,132 @@ html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
   width: 9px;
   border-radius: 50%;
 }
-html[dir="ltr"] .toolbarButton.pdfSidebarNotification::after {
-  left: 17px;
+
+[dir="ltr"] .secondaryToolbarButton {
+  padding-left: 36px;
 }
-html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
-  right: 17px;
+
+[dir="rtl"] .secondaryToolbarButton {
+  padding-right: 36px;
+}
+
+[dir="ltr"] .secondaryToolbarButton {
+  text-align: left;
+}
+
+[dir="rtl"] .secondaryToolbarButton {
+  text-align: right;
 }
 
 .secondaryToolbarButton {
   position: relative;
   margin: 0;
   padding: 0 0 1px;
+  -webkit-padding-start: 36px;
+          padding-inline-start: 36px;
   height: auto;
   min-height: 26px;
   width: auto;
   min-width: 100%;
+  text-align: start;
   white-space: normal;
   border-radius: 0;
   box-sizing: border-box;
 }
-html[dir="ltr"] .secondaryToolbarButton {
-  padding-left: 36px;
-  text-align: left;
-}
-html[dir="rtl"] .secondaryToolbarButton {
-  padding-right: 36px;
-  text-align: right;
-}
-
-html[dir="ltr"] .secondaryToolbarButton > span {
+[dir="ltr"] .secondaryToolbarButton > span {
   padding-right: 4px;
 }
-html[dir="rtl"] .secondaryToolbarButton > span {
+[dir="rtl"] .secondaryToolbarButton > span {
   padding-left: 4px;
 }
+.secondaryToolbarButton > span {
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
+}
 
-.secondaryToolbarButton.firstPage::before {
+#firstPage::before {
   -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
-  mask-image: var(--secondaryToolbarButton-firstPage-icon);
+          mask-image: var(--secondaryToolbarButton-firstPage-icon);
 }
 
-.secondaryToolbarButton.lastPage::before {
+#lastPage::before {
   -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
-  mask-image: var(--secondaryToolbarButton-lastPage-icon);
+          mask-image: var(--secondaryToolbarButton-lastPage-icon);
 }
 
-.secondaryToolbarButton.rotateCcw::before {
+#pageRotateCcw::before {
   -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
-  mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
+          mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
 }
 
-.secondaryToolbarButton.rotateCw::before {
+#pageRotateCw::before {
   -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
-  mask-image: var(--secondaryToolbarButton-rotateCw-icon);
+          mask-image: var(--secondaryToolbarButton-rotateCw-icon);
 }
 
-.secondaryToolbarButton.selectTool::before {
+#cursorSelectTool::before {
   -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
-  mask-image: var(--secondaryToolbarButton-selectTool-icon);
+          mask-image: var(--secondaryToolbarButton-selectTool-icon);
 }
 
-.secondaryToolbarButton.handTool::before {
+#cursorHandTool::before {
   -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
-  mask-image: var(--secondaryToolbarButton-handTool-icon);
+          mask-image: var(--secondaryToolbarButton-handTool-icon);
 }
 
-.secondaryToolbarButton.scrollPage::before {
+#scrollPage::before {
   -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon);
-  mask-image: var(--secondaryToolbarButton-scrollPage-icon);
+          mask-image: var(--secondaryToolbarButton-scrollPage-icon);
 }
 
-.secondaryToolbarButton.scrollVertical::before {
+#scrollVertical::before {
   -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
-  mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
+          mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
 }
 
-.secondaryToolbarButton.scrollHorizontal::before {
+#scrollHorizontal::before {
   -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
-  mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
+          mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
 }
 
-.secondaryToolbarButton.scrollWrapped::before {
+#scrollWrapped::before {
   -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
-  mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
+          mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
 }
 
-.secondaryToolbarButton.spreadNone::before {
+#spreadNone::before {
   -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
-  mask-image: var(--secondaryToolbarButton-spreadNone-icon);
+          mask-image: var(--secondaryToolbarButton-spreadNone-icon);
 }
 
-.secondaryToolbarButton.spreadOdd::before {
+#spreadOdd::before {
   -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
-  mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
+          mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
 }
 
-.secondaryToolbarButton.spreadEven::before {
+#spreadEven::before {
   -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
-  mask-image: var(--secondaryToolbarButton-spreadEven-icon);
+          mask-image: var(--secondaryToolbarButton-spreadEven-icon);
 }
 
-.secondaryToolbarButton.documentProperties::before {
+#documentProperties::before {
   -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
-  mask-image: var(--secondaryToolbarButton-documentProperties-icon);
+          mask-image: var(--secondaryToolbarButton-documentProperties-icon);
 }
 
 .verticalToolbarSeparator {
   display: block;
-  padding: 11px 0;
   margin: 5px 2px;
   width: 1px;
+  height: 22px;
   background-color: var(--separator-color);
 }
-html[dir="ltr"] .verticalToolbarSeparator {
-  margin-left: 2px;
-}
-html[dir="rtl"] .verticalToolbarSeparator {
-  margin-right: 2px;
-}
-
 .horizontalToolbarSeparator {
   display: block;
-  margin: 6px 0 5px;
+  margin: 6px 0;
   height: 1px;
   width: 100%;
-  border-top: 1px solid var(--doorhanger-separator-color);
+  background-color: var(--doorhanger-separator-color);
 }
 
 .toolbarField {
@@ -2073,9 +2132,7 @@ html[dir="rtl"] .verticalToolbarSeparator {
   border-radius: 2px;
   background-color: var(--field-bg-color);
   background-clip: padding-box;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--field-border-color);
+  border: 1px solid var(--field-border-color);
   box-shadow: none;
   color: var(--field-color);
   font-size: 12px;
@@ -2083,37 +2140,35 @@ html[dir="rtl"] .verticalToolbarSeparator {
   outline-style: none;
 }
 
-.toolbarField[type="checkbox"] {
-  opacity: 0;
-  position: absolute !important;
-  left: 0;
+[dir="ltr"] .toolbarField[type="checkbox"] {
+  margin-left: 7px;
 }
 
-html[dir="ltr"] .toolbarField[type="checkbox"] {
-  margin: 10px 0 3px 7px;
+[dir="rtl"] .toolbarField[type="checkbox"] {
+  margin-right: 7px;
 }
 
-html[dir="rtl"] .toolbarField[type="checkbox"] {
-  margin: 10px 7px 3px 0;
+.toolbarField[type="checkbox"] {
+  opacity: 0;
+  position: absolute !important;
+  left: 0;
+  margin: 10px 0 3px;
+  -webkit-margin-start: 7px;
+          margin-inline-start: 7px;
 }
 
-.toolbarField.pageNumber {
+#pageNumber {
   -moz-appearance: textfield; /* hides the spinner in moz */
-  min-width: 16px;
   text-align: right;
   width: 40px;
 }
-
-.toolbarField.pageNumber.visiblePageIsLoading {
+#pageNumber.visiblePageIsLoading {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
   background-position: 3px;
 }
-
-.toolbarField.pageNumber::-webkit-inner-spin-button,
-.toolbarField.pageNumber::-webkit-outer-spin-button {
+#pageNumber::-webkit-inner-spin-button {
   -webkit-appearance: none;
-  margin: 0;
 }
 
 .toolbarField:focus {
@@ -2135,21 +2190,36 @@ html[dir="rtl"] .toolbarField[type="checkbox"] {
   cursor: default;
 }
 
-html[dir="ltr"] #numPages.toolbarLabel {
+[dir="ltr"] #numPages.toolbarLabel {
   padding-left: 3px;
 }
-html[dir="rtl"] #numPages.toolbarLabel {
+
+[dir="rtl"] #numPages.toolbarLabel {
   padding-right: 3px;
 }
 
-#thumbnailView {
+#numPages.toolbarLabel {
+  -webkit-padding-start: 3px;
+          padding-inline-start: 3px;
+}
+
+#thumbnailView,
+#outlineView,
+#attachmentsView,
+#layersView {
   position: absolute;
-  width: calc(100% - 60px);
+  width: calc(100% - 8px);
   top: 0;
   bottom: 0;
-  padding: 10px 30px 0;
+  padding: 4px 4px 0;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+#thumbnailView {
+  width: calc(100% - 60px);
+  padding: 10px 30px 0;
 }
 
 #thumbnailView > a:active,
@@ -2157,20 +2227,22 @@ html[dir="rtl"] #numPages.toolbarLabel {
   outline: 0;
 }
 
-.thumbnail {
-  margin: 0 10px 5px;
-}
-html[dir="ltr"] .thumbnail {
+[dir="ltr"] .thumbnail {
   float: left;
 }
-html[dir="rtl"] .thumbnail {
+
+[dir="rtl"] .thumbnail {
   float: right;
 }
 
+.thumbnail {
+  float: inline-start;
+  margin: 0 10px 5px;
+}
+
 #thumbnailView > a:last-of-type > .thumbnail {
   margin-bottom: 10px;
 }
-
 #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
   margin-bottom: 9px;
 }
@@ -2216,39 +2288,40 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   color: rgba(255, 255, 255, 1);
 }
 
-#outlineView,
-#attachmentsView,
-#layersView {
-  position: absolute;
-  width: calc(100% - 8px);
-  top: 0;
-  bottom: 0;
-  padding: 4px 4px 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-html[dir="ltr"] .treeWithDeepNesting > .treeItem,
-html[dir="ltr"] .treeItem > .treeItems {
+[dir="ltr"] .treeWithDeepNesting > .treeItem,[dir="ltr"] 
+.treeItem > .treeItems {
   margin-left: 20px;
 }
 
-html[dir="rtl"] .treeWithDeepNesting > .treeItem,
-html[dir="rtl"] .treeItem > .treeItems {
+[dir="rtl"] .treeWithDeepNesting > .treeItem,[dir="rtl"] 
+.treeItem > .treeItems {
   margin-right: 20px;
 }
 
+.treeWithDeepNesting > .treeItem,
+.treeItem > .treeItems {
+  -webkit-margin-start: 20px;
+          margin-inline-start: 20px;
+}
+
+[dir="ltr"] .treeItem > a {
+  padding-left: 4px;
+}
+
+[dir="rtl"] .treeItem > a {
+  padding-right: 4px;
+}
+
 .treeItem > a {
   text-decoration: none;
   display: inline-block;
-  min-width: 95%;
   /* Subtract the right padding (left, in RTL mode) of the container: */
   min-width: calc(100% - 4px);
   height: auto;
   margin-bottom: 1px;
+  padding: 2px 0 5px;
+  -webkit-padding-start: 4px;
+          padding-inline-start: 4px;
   border-radius: 2px;
   color: var(--treeitem-color);
   font-size: 13px;
@@ -2259,55 +2332,55 @@ html[dir="rtl"] .treeItem > .treeItems {
   white-space: normal;
   cursor: pointer;
 }
-html[dir="ltr"] .treeItem > a {
-  padding: 2px 0 5px 4px;
-}
-html[dir="rtl"] .treeItem > a {
-  padding: 2px 4px 5px 0;
-}
 
 #layersView .treeItem > a > * {
   cursor: pointer;
 }
-html[dir="ltr"] #layersView .treeItem > a > label {
+[dir="ltr"] #layersView .treeItem > a > label {
   padding-left: 4px;
 }
-html[dir="rtl"] #layersView .treesItem > a > label {
+[dir="rtl"] #layersView .treeItem > a > label {
   padding-right: 4px;
 }
+#layersView .treeItem > a > label {
+  -webkit-padding-start: 4px;
+          padding-inline-start: 4px;
+}
+
+[dir="ltr"] .treeItemToggler {
+  float: left;
+}
+
+[dir="rtl"] .treeItemToggler {
+  float: right;
+}
 
 .treeItemToggler {
   position: relative;
+  float: inline-start;
   height: 0;
   width: 0;
   color: rgba(255, 255, 255, 0.5);
 }
+[dir="ltr"] .treeItemToggler::before {
+  right: 4px;
+}
+[dir="rtl"] .treeItemToggler::before {
+  left: 4px;
+}
 .treeItemToggler::before {
+  inset-inline-end: 4px;
   -webkit-mask-image: var(--treeitem-expanded-icon);
-  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);
-}
-html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
-  transform: scaleX(-1);
+          mask-image: var(--treeitem-collapsed-icon);
+  transform: scaleX(var(--dir-factor));
 }
 .treeItemToggler.treeItemsHidden ~ .treeItems {
   display: none;
 }
-html[dir="ltr"] .treeItemToggler {
-  float: left;
-}
-html[dir="rtl"] .treeItemToggler {
-  float: right;
-}
-html[dir="ltr"] .treeItemToggler::before {
-  right: 4px;
-}
-html[dir="rtl"] .treeItemToggler::before {
-  left: 4px;
-}
 
 .treeItem.selected > a {
   background-color: var(--treeitem-selected-bg-color);
@@ -2335,7 +2408,7 @@ html[dir="rtl"] .treeItemToggler::before {
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
+  background-color: var(--errorWrapper-bg-color);
   color: var(--main-color);
   left: 0;
   position: absolute;
@@ -2347,11 +2420,13 @@ html[dir="rtl"] .treeItemToggler::before {
 #errorMessageLeft {
   float: left;
 }
-
 #errorMessageRight {
   float: right;
 }
 
+#errorSpacer {
+  clear: both;
+}
 #errorMoreInfo {
   background-color: var(--field-bg-color);
   color: var(--field-color);
@@ -2361,36 +2436,17 @@ html[dir="rtl"] .treeItemToggler::before {
   width: 98%;
 }
 
-.overlayButton {
+.dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;
   padding: 2px 11px;
   color: var(--main-color);
-  background-color: var(--overlay-button-bg-color);
-  border: var(--overlay-button-border) !important;
-}
-
-#overlayContainer {
-  display: table;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 40000;
-}
-#overlayContainer > * {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-#overlayContainer > .container {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
+  background-color: var(--dialog-button-bg-color);
+  border: var(--dialog-button-border) !important;
 }
 
-#overlayContainer > .container > .dialog {
-  display: inline-block;
+dialog {
+  margin: auto;
   padding: 15px;
   border-spacing: 4px;
   color: var(--main-color);
@@ -2401,20 +2457,26 @@ html[dir="rtl"] .treeItemToggler::before {
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
+dialog::-webkit-backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+}
 
-.dialog > .row {
+dialog > .row {
   display: table-row;
 }
 
-.dialog > .row > * {
+dialog > .row > * {
   display: table-cell;
 }
 
-.dialog .toolbarField {
+dialog .toolbarField {
   margin: 5px 0;
 }
 
-.dialog .separator {
+dialog .separator {
   display: block;
   margin: 4px 0;
   height: 1px;
@@ -2422,155 +2484,48 @@ html[dir="rtl"] .treeItemToggler::before {
   background-color: var(--separator-color);
 }
 
-.dialog .buttonRow {
+dialog .buttonRow {
   text-align: center;
   vertical-align: middle;
 }
 
-.dialog :link {
+dialog :link {
   color: rgba(255, 255, 255, 1);
 }
 
-#passwordOverlay > .dialog {
+#passwordDialog {
   text-align: center;
 }
-#passwordOverlay .toolbarField {
+#passwordDialog .toolbarField {
   width: 200px;
 }
 
-#documentPropertiesOverlay > .dialog {
+#documentPropertiesDialog {
   text-align: left;
 }
-#documentPropertiesOverlay .row > * {
-  min-width: 100px;
-}
-html[dir="ltr"] #documentPropertiesOverlay .row > * {
+[dir="ltr"] #documentPropertiesDialog .row > * {
   text-align: left;
 }
-html[dir="rtl"] #documentPropertiesOverlay .row > * {
+[dir="rtl"] #documentPropertiesDialog .row > * {
   text-align: right;
 }
-#documentPropertiesOverlay .row > span {
+#documentPropertiesDialog .row > * {
+  min-width: 100px;
+  text-align: start;
+}
+#documentPropertiesDialog .row > span {
   width: 125px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .row > p {
+#documentPropertiesDialog .row > p {
   max-width: 225px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .buttonRow {
+#documentPropertiesDialog .buttonRow {
   margin-top: 10px;
 }
 
-.clearBoth {
-  clear: both;
-}
-
-.fileInput {
-  background: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
-  margin-top: 5px;
-  visibility: hidden;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-#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;
-}
-#PDFBug .controls {
-  background: rgba(238, 238, 238, 1);
-  border-bottom: 1px solid rgba(102, 102, 102, 1);
-  padding: 3px;
-}
-#PDFBug .panels {
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  position: absolute;
-  right: 0;
-  top: 27px;
-}
-#PDFBug .panels > div {
-  padding: 5px;
-}
-#PDFBug button.active {
-  font-weight: bold;
-}
-.debuggerShowText {
-  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
-  color: rgba(0, 0, 255, 1);
-}
-.debuggerHideText:hover {
-  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
-}
-#PDFBug .stats {
-  font-family: courier;
-  font-size: 10px;
-  white-space: pre;
-}
-#PDFBug .stats .title {
-  font-weight: bold;
-}
-#PDFBug table {
-  font-size: 10px;
-  white-space: pre;
-}
-#PDFBug table.showText {
-  border-collapse: collapse;
-  text-align: center;
-}
-#PDFBug table.showText,
-#PDFBug table.showText tr,
-#PDFBug table.showText td {
-  border: 1px solid black;
-  padding: 1px;
-}
-#PDFBug table.showText td.advance {
-  color: grey;
-}
-
-#viewer.textLayer-visible .textLayer {
-  opacity: 1;
-}
-
-#viewer.textLayer-visible .canvasWrapper {
-  background-color: rgba(128, 255, 128, 1);
-}
-
-#viewer.textLayer-visible .canvasWrapper canvas {
-  mix-blend-mode: screen;
-}
-
-#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;
-}
-
-#viewer.textLayer-hover .textLayer span:hover {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
-}
-
-#viewer.textLayer-shadow .textLayer span {
-  background-color: rgba(255, 255, 255, 0.6);
-  color: rgba(0, 0, 0, 1);
-}
-
 .grab-to-pan-grab {
-  cursor: url("images/grab.cur"), move !important;
   cursor: -webkit-grab !important;
   cursor: grab !important;
 }
@@ -2580,7 +2535,6 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
 }
 .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;
@@ -2603,52 +2557,9 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
 }
 
 @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;
   }
@@ -2716,21 +2627,14 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
   #sidebarContainer {
     background-color: var(--sidebar-narrow-bg-color);
   }
-
-  html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
+  [dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
     left: 0 !important;
   }
-  html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
+  [dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
     right: 0 !important;
   }
-
-  #outerContainer .hiddenLargeView,
-  #outerContainer .hiddenMediumView {
-    display: inherit;
-  }
-  #outerContainer .visibleLargeView,
-  #outerContainer .visibleMediumView {
-    display: none;
+  #outerContainer.sidebarOpen #viewerContainer {
+    inset-inline-start: 0 !important;
   }
 }
 
@@ -2763,12 +2667,15 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
   .toolbarButtonSpacer {
     width: 0;
   }
-  html[dir="ltr"] .findbar {
+  [dir="ltr"] .findbar {
     left: 34px;
   }
-  html[dir="rtl"] .findbar {
+  [dir="rtl"] .findbar {
     right: 34px;
   }
+  .findbar {
+    inset-inline-start: 34px;
+  }
 }
 
 @media all and (max-width: 535px) {