toolkit/components/pdfjs/content/web/viewer.css

   1 /* Copyright 2014 Mozilla Foundation
   2  *
   3  * Licensed under the Apache License, Version 2.0 (the "License");
   4  * you may not use this file except in compliance with the License.
   5  * You may obtain a copy of the License at
   6  *
   7  *     http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  * Unless required by applicable law or agreed to in writing, software
  10  * distributed under the License is distributed on an "AS IS" BASIS,
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12  * See the License for the specific language governing permissions and
  13  * limitations under the License.
  14  */
  15
  16 .messageBar{
  17   --closing-button-icon:url(images/messageBar_closingButton.svg);
  18   --message-bar-close-button-color:var(--text-primary-color);
  19   --message-bar-close-button-color-hover:var(--text-primary-color);
  20   --message-bar-close-button-border-radius:4px;
  21   --message-bar-close-button-border:none;
  22   --message-bar-close-button-hover-bg-color:rgb(21 20 26 / 0.14);
  23   --message-bar-close-button-active-bg-color:rgb(21 20 26 / 0.21);
  24   --message-bar-close-button-focus-bg-color:rgb(21 20 26 / 0.07);
  25
  26   @media (prefers-color-scheme: dark){
  27     --message-bar-close-button-hover-bg-color:rgb(251 251 254 / 0.14);
  28     --message-bar-close-button-active-bg-color:rgb(251 251 254 / 0.21);
  29     --message-bar-close-button-focus-bg-color:rgb(251 251 254 / 0.07);
  30   }
  31
  32   @media screen and (forced-colors: active){
  33     --message-bar-close-button-color:ButtonText;
  34     --message-bar-close-button-border:1px solid ButtonText;
  35     --message-bar-close-button-hover-bg-color:ButtonText;
  36     --message-bar-close-button-active-bg-color:ButtonText;
  37     --message-bar-close-button-focus-bg-color:ButtonText;
  38     --message-bar-close-button-color-hover:HighlightText;
  39   }
  40
  41   display:flex;
  42   position:relative;
  43   padding:8px 8px 8px 16px;
  44   flex-direction:column;
  45   justify-content:center;
  46   align-items:center;
  47   gap:8px;
  48   user-select:none;
  49
  50   border-radius:4px;
  51
  52   border:1px solid var(--message-bar-border-color);
  53   background:var(--message-bar-bg-color);
  54   color:var(--message-bar-fg-color);
  55
  56   > div{
  57     display:flex;
  58     align-items:flex-start;
  59     gap:8px;
  60     align-self:stretch;
  61
  62     &::before{
  63       content:"";
  64       display:inline-block;
  65       width:16px;
  66       height:16px;
  67       mask-image:var(--message-bar-icon);
  68       mask-size:cover;
  69       background-color:var(--message-bar-icon-color);
  70       flex-shrink:0;
  71     }
  72   }
  73
  74   button{
  75     cursor:pointer;
  76
  77     &:focus-visible{
  78       outline:var(--focus-ring-outline);
  79       outline-offset:2px;
  80     }
  81   }
  82
  83   .closeButton{
  84     width:32px;
  85     height:32px;
  86     background:none;
  87     border-radius:var(--message-bar-close-button-border-radius);
  88     border:var(--message-bar-close-button-border);
  89
  90     display:flex;
  91     align-items:center;
  92     justify-content:center;
  93
  94     &::before{
  95       content:"";
  96       display:inline-block;
  97       width:16px;
  98       height:16px;
  99       mask-image:var(--closing-button-icon);
 100       mask-size:cover;
 101       background-color:var(--message-bar-close-button-color);
 102     }
 103
 104     &:is(:hover, :active, :focus)::before{
 105       background-color:var(--message-bar-close-button-color-hover);
 106     }
 107
 108     &:hover{
 109       background-color:var(--message-bar-close-button-hover-bg-color);
 110     }
 111
 112     &:active{
 113       background-color:var(--message-bar-close-button-active-bg-color);
 114     }
 115
 116     &:focus{
 117       background-color:var(--message-bar-close-button-focus-bg-color);
 118     }
 119
 120     > span{
 121       display:inline-block;
 122       width:0;
 123       height:0;
 124       overflow:hidden;
 125     }
 126   }
 127 }
 128
 129 #editorUndoBar{
 130   --text-primary-color:#15141a;
 131
 132   --message-bar-icon:url(images/secondaryToolbarButton-documentProperties.svg);
 133   --message-bar-icon-color:#0060df;
 134   --message-bar-bg-color:#deeafc;
 135   --message-bar-fg-color:var(--text-primary-color);
 136   --message-bar-border-color:rgb(0 0 0 / 0.08);
 137
 138   --undo-button-bg-color:rgb(21 20 26 / 0.07);
 139   --undo-button-bg-color-hover:rgb(21 20 26 / 0.14);
 140   --undo-button-bg-color-active:rgb(21 20 26 / 0.21);
 141
 142   --undo-button-fg-color:var(--message-bar-fg-color);
 143   --undo-button-fg-color-hover:var(--undo-button-fg-color);
 144   --undo-button-fg-color-active:var(--undo-button-fg-color);
 145
 146   --focus-ring-color:#0060df;
 147   --focus-ring-outline:2px solid var(--focus-ring-color);
 148
 149   @media (prefers-color-scheme: dark){
 150     --text-primary-color:#fbfbfe;
 151
 152     --message-bar-icon-color:#73a7f3;
 153     --message-bar-bg-color:#003070;
 154     --message-bar-border-color:rgb(255 255 255 / 0.08);
 155
 156     --undo-button-bg-color:rgb(255 255 255 / 0.08);
 157     --undo-button-bg-color-hover:rgb(255 255 255 / 0.14);
 158     --undo-button-bg-color-active:rgb(255 255 255 / 0.21);
 159   }
 160
 161   @media screen and (forced-colors: active){
 162     --text-primary-color:CanvasText;
 163
 164     --message-bar-icon-color:CanvasText;
 165     --message-bar-bg-color:Canvas;
 166     --message-bar-border-color:CanvasText;
 167
 168     --undo-button-bg-color:ButtonText;
 169     --undo-button-bg-color-hover:SelectedItem;
 170     --undo-button-bg-color-active:SelectedItem;
 171
 172     --undo-button-fg-color:ButtonFace;
 173     --undo-button-fg-color-hover:SelectedItemText;
 174     --undo-button-fg-color-active:SelectedItemText;
 175
 176     --focus-ring-color:CanvasText;
 177   }
 178
 179   position:fixed;
 180   top:50px;
 181   left:50%;
 182   transform:translateX(-50%);
 183   z-index:10;
 184
 185   padding-block:8px;
 186   padding-inline:16px 8px;
 187
 188   font:menu;
 189   font-size:15px;
 190
 191   cursor:default;
 192
 193   button{
 194     cursor:pointer;
 195   }
 196
 197   #editorUndoBarUndoButton{
 198     border-radius:4px;
 199     font-weight:590;
 200     line-height:19.5px;
 201     color:var(--undo-button-fg-color);
 202     border:none;
 203     padding:4px 16px;
 204     margin-inline-start:8px;
 205     height:32px;
 206
 207     background-color:var(--undo-button-bg-color);
 208
 209     &:hover{
 210       background-color:var(--undo-button-bg-color-hover);
 211       color:var(--undo-button-fg-color-hover);
 212     }
 213
 214     &:active{
 215       background-color:var(--undo-button-bg-color-active);
 216       color:var(--undo-button-fg-color-active);
 217     }
 218   }
 219
 220   > div{
 221     align-items:center;
 222   }
 223 }
 224
 225 .dialog{
 226   --dialog-bg-color:white;
 227   --dialog-border-color:white;
 228   --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
 229   --text-primary-color:#15141a;
 230   --text-secondary-color:#5b5b66;
 231   --hover-filter:brightness(0.9);
 232   --focus-ring-color:#0060df;
 233   --focus-ring-outline:2px solid var(--focus-ring-color);
 234   --link-fg-color:#0060df;
 235   --link-hover-fg-color:#0250bb;
 236   --separator-color:#f0f0f4;
 237
 238   --textarea-border-color:#8f8f9d;
 239   --textarea-bg-color:white;
 240   --textarea-fg-color:var(--text-secondary-color);
 241
 242   --radio-bg-color:#f0f0f4;
 243   --radio-checked-bg-color:#fbfbfe;
 244   --radio-border-color:#8f8f9d;
 245   --radio-checked-border-color:#0060df;
 246
 247   --button-secondary-bg-color:#f0f0f4;
 248   --button-secondary-fg-color:var(--text-primary-color);
 249   --button-secondary-border-color:var(--button-secondary-bg-color);
 250   --button-secondary-hover-bg-color:var(--button-secondary-bg-color);
 251   --button-secondary-hover-fg-color:var(--button-secondary-fg-color);
 252   --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
 253
 254   --button-primary-bg-color:#0060df;
 255   --button-primary-fg-color:#fbfbfe;
 256   --button-primary-border-color:var(--button-primary-bg-color);
 257   --button-primary-hover-bg-color:var(--button-primary-bg-color);
 258   --button-primary-hover-fg-color:var(--button-primary-fg-color);
 259   --button-primary-hover-border-color:var(--button-primary-hover-bg-color);
 260
 261   --button-disabled-bg-color:color-mix(in srgb, currentcolor, transparent 60%);
 262   --button-disabled-fg-color:var(--button-disabled-bg-color);
 263
 264   @media (prefers-color-scheme: dark){
 265     --dialog-bg-color:#1c1b22;
 266     --dialog-border-color:#1c1b22;
 267     --dialog-shadow:0 2px 14px 0 #15141a;
 268     --text-primary-color:#fbfbfe;
 269     --text-secondary-color:#cfcfd8;
 270     --focus-ring-color:#0df;
 271     --hover-filter:brightness(1.4);
 272     --link-fg-color:#0df;
 273     --link-hover-fg-color:#80ebff;
 274     --separator-color:#52525e;
 275
 276     --textarea-bg-color:#42414d;
 277
 278     --radio-bg-color:#2b2a33;
 279     --radio-checked-bg-color:#15141a;
 280     --radio-checked-border-color:#0df;
 281
 282     --button-secondary-bg-color:#2b2a33;
 283     --button-primary-bg-color:#0df;
 284     --button-primary-fg-color:#15141a;
 285   }
 286
 287   @media screen and (forced-colors: active){
 288     --dialog-bg-color:Canvas;
 289     --dialog-border-color:CanvasText;
 290     --dialog-shadow:none;
 291     --text-primary-color:CanvasText;
 292     --text-secondary-color:CanvasText;
 293     --hover-filter:none;
 294     --focus-ring-color:ButtonBorder;
 295     --link-fg-color:LinkText;
 296     --link-hover-fg-color:LinkText;
 297     --separator-color:CanvasText;
 298
 299     --textarea-border-color:ButtonBorder;
 300     --textarea-bg-color:Field;
 301     --textarea-fg-color:ButtonText;
 302
 303     --radio-bg-color:ButtonFace;
 304     --radio-checked-bg-color:ButtonFace;
 305     --radio-border-color:ButtonText;
 306     --radio-checked-border-color:ButtonText;
 307
 308     --button-secondary-bg-color:ButtonFace;
 309     --button-secondary-fg-color:ButtonText;
 310     --button-secondary-border-color:ButtonText;
 311     --button-secondary-hover-bg-color:AccentColor;
 312     --button-secondary-hover-fg-color:AccentColorText;
 313
 314     --button-primary-bg-color:ButtonText;
 315     --button-primary-fg-color:ButtonFace;
 316     --button-primary-hover-bg-color:AccentColor;
 317     --button-primary-hover-fg-color:AccentColorText;
 318
 319     --button-disabled-bg-color:GrayText;
 320     --button-disabled-fg-color:ButtonFace;
 321   }
 322
 323   font:message-box;
 324   font-size:13px;
 325   font-weight:400;
 326   line-height:150%;
 327   border-radius:4px;
 328   padding:12px 16px;
 329   border:1px solid var(--dialog-border-color);
 330   background:var(--dialog-bg-color);
 331   color:var(--text-primary-color);
 332   box-shadow:var(--dialog-shadow);
 333
 334   .mainContainer{
 335     *:focus-visible{
 336       outline:var(--focus-ring-outline);
 337       outline-offset:2px;
 338     }
 339
 340     .title{
 341       display:flex;
 342       width:auto;
 343       flex-direction:column;
 344       justify-content:flex-end;
 345       align-items:flex-start;
 346       gap:12px;
 347
 348       > span{
 349         font-size:13px;
 350         font-style:normal;
 351         font-weight:590;
 352         line-height:150%;
 353       }
 354     }
 355
 356     .dialogSeparator{
 357       width:100%;
 358       height:0;
 359       margin-block:4px;
 360       border-top:1px solid var(--separator-color);
 361       border-bottom:none;
 362     }
 363
 364     .dialogButtonsGroup{
 365       display:flex;
 366       gap:12px;
 367       align-self:flex-end;
 368     }
 369
 370     .radio{
 371       display:flex;
 372       flex-direction:column;
 373       align-items:flex-start;
 374       gap:4px;
 375
 376       > .radioButton{
 377         display:flex;
 378         gap:8px;
 379         align-self:stretch;
 380         align-items:center;
 381
 382         input{
 383           appearance:none;
 384           box-sizing:border-box;
 385           width:16px;
 386           height:16px;
 387           border-radius:50%;
 388           background-color:var(--radio-bg-color);
 389           border:1px solid var(--radio-border-color);
 390
 391           &:hover{
 392             filter:var(--hover-filter);
 393           }
 394
 395           &:checked{
 396             background-color:var(--radio-checked-bg-color);
 397             border:4px solid var(--radio-checked-border-color);
 398           }
 399         }
 400       }
 401
 402       > .radioLabel{
 403         display:flex;
 404         padding-inline-start:24px;
 405         align-items:flex-start;
 406         gap:10px;
 407         align-self:stretch;
 408
 409         > span{
 410           flex:1 0 0;
 411           font-size:11px;
 412           color:var(--text-secondary-color);
 413         }
 414       }
 415     }
 416
 417     button:not(:is(.toggle-button, .closeButton)){
 418       border-radius:4px;
 419       border:1px solid;
 420       font:menu;
 421       font-weight:600;
 422       padding:4px 16px;
 423       width:auto;
 424       height:32px;
 425
 426       &:hover{
 427         cursor:pointer;
 428         filter:var(--hover-filter);
 429       }
 430
 431       > span{
 432         color:inherit;
 433       }
 434
 435       &.secondaryButton{
 436         color:var(--button-secondary-fg-color);
 437         background-color:var(--button-secondary-bg-color);
 438         border-color:var(--button-secondary-border-color);
 439
 440         &:hover{
 441           color:var(--button-secondary-hover-fg-color);
 442           background-color:var(--button-secondary-hover-bg-color);
 443           border-color:var(--button-secondary-hover-border-color);
 444         }
 445       }
 446
 447       &.primaryButton{
 448         color:var(--button-primary-fg-color);
 449         background-color:var(--button-primary-bg-color);
 450         border-color:var(--button-primary-border-color);
 451         opacity:1;
 452
 453         &:hover{
 454           color:var(--button-primary-hover-fg-color);
 455           background-color:var(--button-primary-hover-bg-color);
 456           border-color:var(--button-primary-hover-border-color);
 457         }
 458       }
 459
 460       &:disabled{
 461         color:var(--button-disabled-fg-color) !important;
 462         background-color:var(--button-disabled-bg-color);
 463         border-color:var(--button-disabled-bg-color);
 464         pointer-events:none;
 465       }
 466     }
 467
 468     a{
 469       color:var(--link-fg-color);
 470
 471       &:hover{
 472         color:var(--link-hover-fg-color);
 473       }
 474     }
 475
 476     textarea{
 477       font:inherit;
 478       padding:8px;
 479       resize:none;
 480       margin:0;
 481       box-sizing:border-box;
 482       border-radius:4px;
 483       border:1px solid var(--textarea-border-color);
 484       background:var(--textarea-bg-color);
 485       color:var(--textarea-fg-color);
 486
 487       &:focus{
 488         outline-offset:0;
 489         border-color:transparent;
 490       }
 491
 492       &:disabled{
 493         pointer-events:none;
 494         opacity:0.4;
 495       }
 496     }
 497
 498     .messageBar{
 499       --message-bar-bg-color:#ffebcd;
 500       --message-bar-fg-color:#15141a;
 501       --message-bar-border-color:rgb(0 0 0 / 0.08);
 502       --message-bar-icon:url(images/messageBar_warning.svg);
 503       --message-bar-icon-color:#cd411e;
 504
 505       @media (prefers-color-scheme: dark){
 506         --message-bar-bg-color:#5a3100;
 507         --message-bar-fg-color:#fbfbfe;
 508         --message-bar-border-color:rgb(255 255 255 / 0.08);
 509         --message-bar-icon-color:#e49c49;
 510       }
 511
 512       @media screen and (forced-colors: active){
 513         --message-bar-bg-color:HighlightText;
 514         --message-bar-fg-color:CanvasText;
 515         --message-bar-border-color:CanvasText;
 516         --message-bar-icon-color:CanvasText;
 517       }
 518
 519       align-self:stretch;
 520
 521       > div{
 522         &::before,
 523         > div{
 524           margin-block:4px;
 525         }
 526
 527         > div{
 528           display:flex;
 529           flex-direction:column;
 530           align-items:flex-start;
 531           gap:8px;
 532           flex:1 0 0;
 533
 534           .title{
 535             font-size:13px;
 536             font-weight:590;
 537           }
 538
 539           .description{
 540             font-size:13px;
 541           }
 542         }
 543       }
 544     }
 545
 546     .toggler{
 547       display:flex;
 548       align-items:center;
 549       gap:8px;
 550       align-self:stretch;
 551
 552       > .togglerLabel{
 553         user-select:none;
 554       }
 555     }
 556   }
 557 }
 558
 559 .textLayer{
 560   position:absolute;
 561   text-align:initial;
 562   inset:0;
 563   overflow:clip;
 564   opacity:1;
 565   line-height:1;
 566   text-size-adjust:none;
 567   forced-color-adjust:none;
 568   transform-origin:0 0;
 569   caret-color:CanvasText;
 570   z-index:0;
 571
 572   &.highlighting{
 573     touch-action:none;
 574   }
 575
 576   :is(span, br){
 577     color:transparent;
 578     position:absolute;
 579     white-space:pre;
 580     cursor:text;
 581     transform-origin:0% 0%;
 582   }
 583
 584   > :not(.markedContent),
 585   .markedContent span:not(.markedContent){
 586     z-index:1;
 587   }
 588
 589   span[role="img"]{
 590     user-select:none;
 591     cursor:default;
 592   }
 593
 594   .highlight{
 595     --highlight-bg-color:rgb(180 0 170 / 0.25);
 596     --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
 597     --highlight-backdrop-filter:none;
 598     --highlight-selected-backdrop-filter:none;
 599
 600     @media screen and (forced-colors: active){
 601       --highlight-bg-color:transparent;
 602       --highlight-selected-bg-color:transparent;
 603       --highlight-backdrop-filter:var(--hcm-highlight-filter);
 604       --highlight-selected-backdrop-filter:var(
 605         --hcm-highlight-selected-filter
 606       );
 607     }
 608
 609     margin:-1px;
 610     padding:1px;
 611     background-color:var(--highlight-bg-color);
 612     backdrop-filter:var(--highlight-backdrop-filter);
 613     border-radius:4px;
 614
 615     &.appended{
 616       position:initial;
 617     }
 618
 619     &.begin{
 620       border-radius:4px 0 0 4px;
 621     }
 622
 623     &.end{
 624       border-radius:0 4px 4px 0;
 625     }
 626
 627     &.middle{
 628       border-radius:0;
 629     }
 630
 631     &.selected{
 632       background-color:var(--highlight-selected-bg-color);
 633       backdrop-filter:var(--highlight-selected-backdrop-filter);
 634     }
 635   }
 636
 637   ::selection{
 638     background:color-mix(in srgb, AccentColor, transparent 75%);
 639   }
 640
 641   .endOfContent{
 642     display:block;
 643     position:absolute;
 644     inset:100% 0 0;
 645     z-index:0;
 646     cursor:default;
 647     user-select:none;
 648   }
 649
 650   &.selecting .endOfContent{
 651     top:0;
 652   }
 653 }
 654
 655 .annotationLayer{
 656   --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
 657   --input-focus-border-color:Highlight;
 658   --input-focus-outline:1px solid Canvas;
 659   --input-unfocused-border-color:transparent;
 660   --input-disabled-border-color:transparent;
 661   --input-hover-border-color:black;
 662   --link-outline:none;
 663
 664   @media screen and (forced-colors: active){
 665     --input-focus-border-color:CanvasText;
 666     --input-unfocused-border-color:ActiveText;
 667     --input-disabled-border-color:GrayText;
 668     --input-hover-border-color:Highlight;
 669     --link-outline:1.5px solid LinkText;
 670
 671     .textWidgetAnnotation :is(input, textarea):required,
 672     .choiceWidgetAnnotation select:required,
 673     .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
 674       outline:1.5px solid selectedItem;
 675     }
 676
 677     .linkAnnotation{
 678       outline:var(--link-outline);
 679
 680       &:hover{
 681         backdrop-filter:var(--hcm-highlight-filter);
 682       }
 683
 684       & > a:hover{
 685         opacity:0 !important;
 686         background:none !important;
 687         box-shadow:none;
 688       }
 689     }
 690
 691     .popupAnnotation .popup{
 692       outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
 693       background-color:ButtonFace !important;
 694       color:ButtonText !important;
 695     }
 696
 697     .highlightArea:hover::after{
 698       position:absolute;
 699       top:0;
 700       left:0;
 701       width:100%;
 702       height:100%;
 703       backdrop-filter:var(--hcm-highlight-filter);
 704       content:"";
 705       pointer-events:none;
 706     }
 707
 708     .popupAnnotation.focused .popup{
 709       outline:calc(3px * var(--scale-factor)) solid Highlight !important;
 710     }
 711   }
 712
 713   position:absolute;
 714   top:0;
 715   left:0;
 716   pointer-events:none;
 717   transform-origin:0 0;
 718
 719   &[data-main-rotation="90"] .norotate{
 720     transform:rotate(270deg) translateX(-100%);
 721   }
 722   &[data-main-rotation="180"] .norotate{
 723     transform:rotate(180deg) translate(-100%, -100%);
 724   }
 725   &[data-main-rotation="270"] .norotate{
 726     transform:rotate(90deg) translateY(-100%);
 727   }
 728
 729   &.disabled{
 730     section,
 731     .popup{
 732       pointer-events:none;
 733     }
 734   }
 735
 736   .annotationContent{
 737     position:absolute;
 738     width:100%;
 739     height:100%;
 740     pointer-events:none;
 741
 742     &.freetext{
 743       background:transparent;
 744       border:none;
 745       inset:0;
 746       overflow:visible;
 747       white-space:nowrap;
 748       font:10px sans-serif;
 749       line-height:1.35;
 750     }
 751   }
 752
 753   section{
 754     position:absolute;
 755     text-align:initial;
 756     pointer-events:auto;
 757     box-sizing:border-box;
 758     transform-origin:0 0;
 759     user-select:none;
 760
 761     &:has(div.annotationContent){
 762       canvas.annotationContent{
 763         display:none;
 764       }
 765     }
 766   }
 767
 768   .textLayer.selecting ~ & section{
 769     pointer-events:none;
 770   }
 771
 772   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
 773     position:absolute;
 774     font-size:1em;
 775     top:0;
 776     left:0;
 777     width:100%;
 778     height:100%;
 779   }
 780
 781   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
 782     > a:hover{
 783     opacity:0.2;
 784     background-color:rgb(255 255 0);
 785     box-shadow:0 2px 10px rgb(255 255 0);
 786   }
 787
 788   .linkAnnotation.hasBorder:hover{
 789     background-color:rgb(255 255 0 / 0.2);
 790   }
 791
 792   .hasBorder{
 793     background-size:100% 100%;
 794   }
 795
 796   .textAnnotation img{
 797     position:absolute;
 798     cursor:pointer;
 799     width:100%;
 800     height:100%;
 801     top:0;
 802     left:0;
 803   }
 804
 805   .textWidgetAnnotation :is(input, textarea),
 806   .choiceWidgetAnnotation select,
 807   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
 808     background-image:var(--annotation-unfocused-field-background);
 809     border:2px solid var(--input-unfocused-border-color);
 810     box-sizing:border-box;
 811     font:calc(9px * var(--scale-factor)) sans-serif;
 812     height:100%;
 813     margin:0;
 814     vertical-align:top;
 815     width:100%;
 816   }
 817
 818   .textWidgetAnnotation :is(input, textarea):required,
 819   .choiceWidgetAnnotation select:required,
 820   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
 821     outline:1.5px solid red;
 822   }
 823
 824   .choiceWidgetAnnotation select option{
 825     padding:0;
 826   }
 827
 828   .buttonWidgetAnnotation.radioButton input{
 829     border-radius:50%;
 830   }
 831
 832   .textWidgetAnnotation textarea{
 833     resize:none;
 834   }
 835
 836   .textWidgetAnnotation :is(input, textarea)[disabled],
 837   .choiceWidgetAnnotation select[disabled],
 838   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
 839     background:none;
 840     border:2px solid var(--input-disabled-border-color);
 841     cursor:not-allowed;
 842   }
 843
 844   .textWidgetAnnotation :is(input, textarea):hover,
 845   .choiceWidgetAnnotation select:hover,
 846   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
 847     border:2px solid var(--input-hover-border-color);
 848   }
 849   .textWidgetAnnotation :is(input, textarea):hover,
 850   .choiceWidgetAnnotation select:hover,
 851   .buttonWidgetAnnotation.checkBox input:hover{
 852     border-radius:2px;
 853   }
 854
 855   .textWidgetAnnotation :is(input, textarea):focus,
 856   .choiceWidgetAnnotation select:focus{
 857     background:none;
 858     border:2px solid var(--input-focus-border-color);
 859     border-radius:2px;
 860     outline:var(--input-focus-outline);
 861   }
 862
 863   .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
 864     background-image:none;
 865     background-color:transparent;
 866   }
 867
 868   .buttonWidgetAnnotation.checkBox :focus{
 869     border:2px solid var(--input-focus-border-color);
 870     border-radius:2px;
 871     outline:var(--input-focus-outline);
 872   }
 873
 874   .buttonWidgetAnnotation.radioButton :focus{
 875     border:2px solid var(--input-focus-border-color);
 876     outline:var(--input-focus-outline);
 877   }
 878
 879   .buttonWidgetAnnotation.checkBox input:checked::before,
 880   .buttonWidgetAnnotation.checkBox input:checked::after,
 881   .buttonWidgetAnnotation.radioButton input:checked::before{
 882     background-color:CanvasText;
 883     content:"";
 884     display:block;
 885     position:absolute;
 886   }
 887
 888   .buttonWidgetAnnotation.checkBox input:checked::before,
 889   .buttonWidgetAnnotation.checkBox input:checked::after{
 890     height:80%;
 891     left:45%;
 892     width:1px;
 893   }
 894
 895   .buttonWidgetAnnotation.checkBox input:checked::before{
 896     transform:rotate(45deg);
 897   }
 898
 899   .buttonWidgetAnnotation.checkBox input:checked::after{
 900     transform:rotate(-45deg);
 901   }
 902
 903   .buttonWidgetAnnotation.radioButton input:checked::before{
 904     border-radius:50%;
 905     height:50%;
 906     left:25%;
 907     top:25%;
 908     width:50%;
 909   }
 910
 911   .textWidgetAnnotation input.comb{
 912     font-family:monospace;
 913     padding-left:2px;
 914     padding-right:0;
 915   }
 916
 917   .textWidgetAnnotation input.comb:focus{
 918     width:103%;
 919   }
 920
 921   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
 922     appearance:none;
 923   }
 924
 925   .fileAttachmentAnnotation .popupTriggerArea{
 926     height:100%;
 927     width:100%;
 928   }
 929
 930   .popupAnnotation{
 931     position:absolute;
 932     font-size:calc(9px * var(--scale-factor));
 933     pointer-events:none;
 934     width:max-content;
 935     max-width:45%;
 936     height:auto;
 937   }
 938
 939   .popup{
 940     background-color:rgb(255 255 153);
 941     box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
 942     border-radius:calc(2px * var(--scale-factor));
 943     outline:1.5px solid rgb(255 255 74);
 944     padding:calc(6px * var(--scale-factor));
 945     cursor:pointer;
 946     font:message-box;
 947     white-space:normal;
 948     word-wrap:break-word;
 949     pointer-events:auto;
 950     user-select:text;
 951   }
 952
 953   .popupAnnotation.focused .popup{
 954     outline-width:3px;
 955   }
 956
 957   .popup *{
 958     font-size:calc(9px * var(--scale-factor));
 959   }
 960
 961   .popup > .header{
 962     display:inline-block;
 963   }
 964
 965   .popup > .header h1{
 966     display:inline;
 967   }
 968
 969   .popup > .header .popupDate{
 970     display:inline-block;
 971     margin-left:calc(5px * var(--scale-factor));
 972     width:fit-content;
 973   }
 974
 975   .popupContent{
 976     border-top:1px solid rgb(51 51 51);
 977     margin-top:calc(2px * var(--scale-factor));
 978     padding-top:calc(2px * var(--scale-factor));
 979   }
 980
 981   .richText > *{
 982     white-space:pre-wrap;
 983     font-size:calc(9px * var(--scale-factor));
 984   }
 985
 986   .popupTriggerArea{
 987     cursor:pointer;
 988   }
 989
 990   section svg{
 991     position:absolute;
 992     width:100%;
 993     height:100%;
 994     top:0;
 995     left:0;
 996   }
 997
 998   .annotationTextContent{
 999     position:absolute;
1000     width:100%;
1001     height:100%;
1002     opacity:0;
1003     color:transparent;
1004     user-select:none;
1005     pointer-events:none;
1006
1007     span{
1008       width:100%;
1009       display:inline-block;
1010     }
1011   }
1012
1013   svg.quadrilateralsContainer{
1014     contain:strict;
1015     width:0;
1016     height:0;
1017     position:absolute;
1018     top:0;
1019     left:0;
1020     z-index:-1;
1021   }
1022 }
1023
1024 :root{
1025   --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
1026   --xfa-focus-outline:auto;
1027 }
1028
1029 @media screen and (forced-colors: active){
1030   :root{
1031     --xfa-focus-outline:2px solid CanvasText;
1032   }
1033   .xfaLayer *:required{
1034     outline:1.5px solid selectedItem;
1035   }
1036 }
1037
1038 .xfaLayer{
1039   background-color:transparent;
1040 }
1041
1042 .xfaLayer .highlight{
1043   margin:-1px;
1044   padding:1px;
1045   background-color:rgb(239 203 237);
1046   border-radius:4px;
1047 }
1048
1049 .xfaLayer .highlight.appended{
1050   position:initial;
1051 }
1052
1053 .xfaLayer .highlight.begin{
1054   border-radius:4px 0 0 4px;
1055 }
1056
1057 .xfaLayer .highlight.end{
1058   border-radius:0 4px 4px 0;
1059 }
1060
1061 .xfaLayer .highlight.middle{
1062   border-radius:0;
1063 }
1064
1065 .xfaLayer .highlight.selected{
1066   background-color:rgb(203 223 203);
1067 }
1068
1069 .xfaPage{
1070   overflow:hidden;
1071   position:relative;
1072 }
1073
1074 .xfaContentarea{
1075   position:absolute;
1076 }
1077
1078 .xfaPrintOnly{
1079   display:none;
1080 }
1081
1082 .xfaLayer{
1083   position:absolute;
1084   text-align:initial;
1085   top:0;
1086   left:0;
1087   transform-origin:0 0;
1088   line-height:1.2;
1089 }
1090
1091 .xfaLayer *{
1092   color:inherit;
1093   font:inherit;
1094   font-style:inherit;
1095   font-weight:inherit;
1096   font-kerning:inherit;
1097   letter-spacing:-0.01px;
1098   text-align:inherit;
1099   text-decoration:inherit;
1100   box-sizing:border-box;
1101   background-color:transparent;
1102   padding:0;
1103   margin:0;
1104   pointer-events:auto;
1105   line-height:inherit;
1106 }
1107
1108 .xfaLayer *:required{
1109   outline:1.5px solid red;
1110 }
1111
1112 .xfaLayer div,
1113 .xfaLayer svg,
1114 .xfaLayer svg *{
1115   pointer-events:none;
1116 }
1117
1118 .xfaLayer a{
1119   color:blue;
1120 }
1121
1122 .xfaRich li{
1123   margin-left:3em;
1124 }
1125
1126 .xfaFont{
1127   color:black;
1128   font-weight:normal;
1129   font-kerning:none;
1130   font-size:10px;
1131   font-style:normal;
1132   letter-spacing:0;
1133   text-decoration:none;
1134   vertical-align:0;
1135 }
1136
1137 .xfaCaption{
1138   overflow:hidden;
1139   flex:0 0 auto;
1140 }
1141
1142 .xfaCaptionForCheckButton{
1143   overflow:hidden;
1144   flex:1 1 auto;
1145 }
1146
1147 .xfaLabel{
1148   height:100%;
1149   width:100%;
1150 }
1151
1152 .xfaLeft{
1153   display:flex;
1154   flex-direction:row;
1155   align-items:center;
1156 }
1157
1158 .xfaRight{
1159   display:flex;
1160   flex-direction:row-reverse;
1161   align-items:center;
1162 }
1163
1164 :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1165   max-height:100%;
1166 }
1167
1168 .xfaTop{
1169   display:flex;
1170   flex-direction:column;
1171   align-items:flex-start;
1172 }
1173
1174 .xfaBottom{
1175   display:flex;
1176   flex-direction:column-reverse;
1177   align-items:flex-start;
1178 }
1179
1180 :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1181   width:100%;
1182 }
1183
1184 .xfaBorder{
1185   background-color:transparent;
1186   position:absolute;
1187   pointer-events:none;
1188 }
1189
1190 .xfaWrapped{
1191   width:100%;
1192   height:100%;
1193 }
1194
1195 :is(.xfaTextfield, .xfaSelect):focus{
1196   background-image:none;
1197   background-color:transparent;
1198   outline:var(--xfa-focus-outline);
1199   outline-offset:-1px;
1200 }
1201
1202 :is(.xfaCheckbox, .xfaRadio):focus{
1203   outline:var(--xfa-focus-outline);
1204 }
1205
1206 .xfaTextfield,
1207 .xfaSelect{
1208   height:100%;
1209   width:100%;
1210   flex:1 1 auto;
1211   border:none;
1212   resize:none;
1213   background-image:var(--xfa-unfocused-field-background);
1214 }
1215
1216 .xfaSelect{
1217   padding-inline:2px;
1218 }
1219
1220 :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
1221   flex:0 1 auto;
1222 }
1223
1224 .xfaButton{
1225   cursor:pointer;
1226   width:100%;
1227   height:100%;
1228   border:none;
1229   text-align:center;
1230 }
1231
1232 .xfaLink{
1233   width:100%;
1234   height:100%;
1235   position:absolute;
1236   top:0;
1237   left:0;
1238 }
1239
1240 .xfaCheckbox,
1241 .xfaRadio{
1242   width:100%;
1243   height:100%;
1244   flex:0 0 auto;
1245   border:none;
1246 }
1247
1248 .xfaRich{
1249   white-space:pre-wrap;
1250   width:100%;
1251   height:100%;
1252 }
1253
1254 .xfaImage{
1255   object-position:left top;
1256   object-fit:contain;
1257   width:100%;
1258   height:100%;
1259 }
1260
1261 .xfaLrTb,
1262 .xfaRlTb,
1263 .xfaTb{
1264   display:flex;
1265   flex-direction:column;
1266   align-items:stretch;
1267 }
1268
1269 .xfaLr{
1270   display:flex;
1271   flex-direction:row;
1272   align-items:stretch;
1273 }
1274
1275 .xfaRl{
1276   display:flex;
1277   flex-direction:row-reverse;
1278   align-items:stretch;
1279 }
1280
1281 .xfaTb > div{
1282   justify-content:left;
1283 }
1284
1285 .xfaPosition{
1286   position:relative;
1287 }
1288
1289 .xfaArea{
1290   position:relative;
1291 }
1292
1293 .xfaValignMiddle{
1294   display:flex;
1295   align-items:center;
1296 }
1297
1298 .xfaTable{
1299   display:flex;
1300   flex-direction:column;
1301   align-items:stretch;
1302 }
1303
1304 .xfaTable .xfaRow{
1305   display:flex;
1306   flex-direction:row;
1307   align-items:stretch;
1308 }
1309
1310 .xfaTable .xfaRlRow{
1311   display:flex;
1312   flex-direction:row-reverse;
1313   align-items:stretch;
1314   flex:1;
1315 }
1316
1317 .xfaTable .xfaRlRow > div{
1318   flex:1;
1319 }
1320
1321 :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
1322   background:initial;
1323 }
1324
1325 @media print{
1326   .xfaTextfield,
1327   .xfaSelect{
1328     background:transparent;
1329   }
1330
1331   .xfaSelect{
1332     appearance:none;
1333     text-indent:1px;
1334     text-overflow:"";
1335   }
1336 }
1337
1338 .canvasWrapper{
1339   svg{
1340     transform:none;
1341
1342     &.moving{
1343       z-index:100000;
1344     }
1345
1346     &.highlight,
1347     &.highlightOutline{
1348       &[data-main-rotation="90"]{
1349         mask,
1350         use:not(.clip, .mask){
1351           transform:matrix(0, 1, -1, 0, 1, 0);
1352         }
1353       }
1354
1355       &[data-main-rotation="180"]{
1356         mask,
1357         use:not(.clip, .mask){
1358           transform:matrix(-1, 0, 0, -1, 1, 1);
1359         }
1360       }
1361
1362       &[data-main-rotation="270"]{
1363         mask,
1364         use:not(.clip, .mask){
1365           transform:matrix(0, -1, 1, 0, 0, 1);
1366         }
1367       }
1368     }
1369
1370     &.draw{
1371       position:absolute;
1372       mix-blend-mode:normal;
1373
1374       &[data-draw-rotation="90"]{
1375         transform:rotate(90deg);
1376       }
1377
1378       &[data-draw-rotation="180"]{
1379         transform:rotate(180deg);
1380       }
1381
1382       &[data-draw-rotation="270"]{
1383         transform:rotate(270deg);
1384       }
1385     }
1386
1387     &.highlight{
1388       --blend-mode:multiply;
1389
1390       @media screen and (forced-colors: active){
1391         --blend-mode:difference;
1392       }
1393
1394       position:absolute;
1395       mix-blend-mode:var(--blend-mode);
1396
1397       &:not(.free){
1398         fill-rule:evenodd;
1399       }
1400     }
1401
1402     &.highlightOutline{
1403       position:absolute;
1404       mix-blend-mode:normal;
1405       fill-rule:evenodd;
1406       fill:none;
1407
1408       &:not(.free){
1409         &.hovered:not(.selected){
1410           stroke:var(--hover-outline-color);
1411           stroke-width:var(--outline-width);
1412         }
1413
1414         &.selected{
1415           .mainOutline{
1416             stroke:var(--outline-around-color);
1417             stroke-width:calc(
1418               var(--outline-width) + 2 * var(--outline-around-width)
1419             );
1420           }
1421
1422           .secondaryOutline{
1423             stroke:var(--outline-color);
1424             stroke-width:var(--outline-width);
1425           }
1426         }
1427       }
1428
1429       &.free{
1430         &.hovered:not(.selected){
1431           stroke:var(--hover-outline-color);
1432           stroke-width:calc(2 * var(--outline-width));
1433         }
1434
1435         &.selected{
1436           .mainOutline{
1437             stroke:var(--outline-around-color);
1438             stroke-width:calc(
1439               2 * (var(--outline-width) + var(--outline-around-width))
1440             );
1441           }
1442
1443           .secondaryOutline{
1444             stroke:var(--outline-color);
1445             stroke-width:calc(2 * var(--outline-width));
1446           }
1447         }
1448       }
1449     }
1450   }
1451 }
1452
1453 .toggle-button{
1454   --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
1455   --button-background-color-hover:color-mix(
1456     in srgb,
1457     currentColor 14%,
1458     transparent
1459   );
1460   --button-background-color-active:color-mix(
1461     in srgb,
1462     currentColor 21%,
1463     transparent
1464   );
1465   --color-accent-primary:#0060df;
1466   --color-accent-primary-hover:#0250bb;
1467   --color-accent-primary-active:#054096;
1468   --border-radius-circle:9999px;
1469   --border-width:1px;
1470   --size-item-small:16px;
1471   --size-item-large:32px;
1472   --color-canvas:white;
1473   --background-color-canvas:var(--color-canvas);
1474   --border-color-interactive:#8f8f9d;
1475   --border-color-interactive-hover:var(--border-color-interactive);
1476   --border-color-interactive-active:var(--border-color-interactive);
1477
1478   @media (prefers-color-scheme: dark){
1479     --color-accent-primary:#0df;
1480     --color-accent-primary-hover:#80ebff;
1481     --color-accent-primary-active:#aaf2ff;
1482     --color-canvas:#1c1b22;
1483     --border-color-interactive:#f9f9fa;
1484   }
1485
1486   @media (forced-colors: active){
1487     --color-accent-primary:ButtonText;
1488     --color-accent-primary-hover:SelectedItem;
1489     --color-accent-primary-active:SelectedItem;
1490     --button-background-color:ButtonFace;
1491     --border-color-interactive:ButtonText;
1492     --border-color-interactive-hover:SelectedItem;
1493     --border-color-interactive-active:ButtonText;
1494     --color-canvas:ButtonText;
1495     --background-color-canvas:Canvas;
1496   }
1497 }
1498
1499 .toggle-button{
1500   --toggle-background-color:var(--button-background-color);
1501   --toggle-background-color-hover:var(--button-background-color-hover);
1502   --toggle-background-color-active:var(--button-background-color-active);
1503   --toggle-background-color-pressed:var(--color-accent-primary);
1504   --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
1505   --toggle-background-color-pressed-active:var(--color-accent-primary-active);
1506   --toggle-border-color:var(--border-color-interactive);
1507   --toggle-border-color-hover:var(--toggle-border-color);
1508   --toggle-border-color-active:var(--toggle-border-color);
1509   --toggle-border-radius:var(--border-radius-circle);
1510   --toggle-border-width:var(--border-width);
1511   --toggle-height:var(--size-item-small);
1512   --toggle-width:var(--size-item-large);
1513   --toggle-dot-background-color:var(--toggle-border-color);
1514   --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
1515   --toggle-dot-background-color-active:var(--toggle-dot-background-color);
1516   --toggle-dot-background-color-on-pressed:var(--background-color-canvas);
1517   --toggle-dot-margin:1px;
1518   --toggle-dot-height:calc(
1519     var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
1520       var(--toggle-border-width)
1521   );
1522   --toggle-dot-width:var(--toggle-dot-height);
1523   --toggle-dot-transform-x:calc(
1524     var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
1525   );
1526   --input-width:var(--toggle-width);
1527
1528   appearance:none;
1529   padding:0;
1530   border:var(--toggle-border-width) solid var(--toggle-border-color);
1531   height:var(--toggle-height);
1532   width:var(--toggle-width);
1533   border-radius:var(--toggle-border-radius);
1534   background-color:var(--toggle-background-color);
1535   box-sizing:border-box;
1536
1537   &:focus-visible{
1538     outline:var(--focus-outline);
1539     outline-offset:var(--focus-outline-offset);
1540   }
1541
1542   &:enabled:hover{
1543     background-color:var(--toggle-background-color-hover);
1544     border-color:var(--toggle-border-color);
1545   }
1546
1547   &:enabled:hover:active{
1548     background-color:var(--toggle-background-color-active);
1549     border-color:var(--toggle-border-color);
1550   }
1551
1552   &::before{
1553     display:block;
1554     content:"";
1555     background-color:var(--toggle-dot-background-color);
1556     height:var(--toggle-dot-height);
1557     width:var(--toggle-dot-width);
1558     margin:var(--toggle-dot-margin);
1559     border-radius:var(--toggle-border-radius);
1560     translate:0;
1561   }
1562 }
1563
1564 .toggle-button[aria-pressed="true"]{
1565   background-color:var(--toggle-background-color-pressed);
1566   border-color:transparent;
1567
1568   &:enabled:hover{
1569     background-color:var(--toggle-background-color-pressed-hover);
1570     border-color:transparent;
1571   }
1572
1573   &:enabled:hover:active{
1574     background-color:var(--toggle-background-color-pressed-active);
1575     border-color:transparent;
1576   }
1577
1578   &::before{
1579     translate:var(--toggle-dot-transform-x);
1580     background-color:var(--toggle-dot-background-color-on-pressed);
1581   }
1582
1583   &:enabled:hover::before,
1584   &:enabled:hover:active::before{
1585     background-color:var(--toggle-dot-background-color-on-pressed);
1586   }
1587
1588   &:-moz-locale-dir(rtl)::before,
1589   &:dir(rtl)::before{
1590     translate:calc(-1 * var(--toggle-dot-transform-x));
1591   }
1592 }
1593
1594 @media (prefers-reduced-motion: no-preference){
1595   .toggle-button::before{
1596     transition:translate 100ms;
1597   }
1598 }
1599
1600 @media (prefers-contrast){
1601   .toggle-button:enabled:hover{
1602     border-color:var(--toggle-border-color-hover);
1603   }
1604
1605   .toggle-button:enabled:hover:active{
1606     border-color:var(--toggle-border-color-active);
1607   }
1608
1609   .toggle-button[aria-pressed="true"]:enabled{
1610     border-color:var(--toggle-border-color);
1611     position:relative;
1612
1613     &:hover{
1614       border-color:var(--toggle-border-color-hover);
1615
1616       &:active{
1617         background-color:var(--toggle-dot-background-color-active);
1618         border-color:var(--toggle-dot-background-color-hover);
1619       }
1620     }
1621   }
1622
1623   .toggle-button:enabled:hover::before,
1624   .toggle-button:enabled:hover:active::before{
1625     background-color:var(--toggle-dot-background-color-hover);
1626   }
1627 }
1628
1629 @media (forced-colors){
1630   .toggle-button{
1631     --toggle-dot-background-color:var(--color-accent-primary);
1632     --toggle-dot-background-color-hover:var(--color-accent-primary-hover);
1633     --toggle-dot-background-color-active:var(--color-accent-primary-active);
1634     --toggle-dot-background-color-on-pressed:var(--button-background-color);
1635     --toggle-border-color-hover:var(--border-color-interactive-hover);
1636     --toggle-border-color-active:var(--border-color-interactive-active);
1637   }
1638
1639   .toggle-button[aria-pressed="true"]:enabled::after{
1640     border:1px solid var(--button-background-color);
1641     content:"";
1642     position:absolute;
1643     height:var(--toggle-height);
1644     width:var(--toggle-width);
1645     display:block;
1646     border-radius:var(--toggle-border-radius);
1647     inset:-2px;
1648   }
1649
1650   .toggle-button[aria-pressed="true"]:enabled:hover:active::after{
1651     border-color:var(--toggle-border-color-active);
1652   }
1653 }
1654
1655 #addSignatureDialog{
1656   --border-color:#8f8f9d;
1657   --primary-color:var(--text-primary-color);
1658   --secondary-color:var(--text-secondary-color);
1659   --bg-hover:#e0e0e6;
1660   --tab-top-line-active-color:#0060df;
1661   --tab-top-line-active-hover-color:var(--tab-text-hover-color);
1662   --tab-top-line-hover-color:#8f8f9d;
1663   --tab-top-line-inactive-color:#cfcfd8;
1664   --tab-bottom-line-active-color:var(--tab-top-line-inactive-color);
1665   --tab-bottom-line-hover-color:var(--tab-top-line-inactive-color);
1666   --tab-bottom-line-inactive-color:var(--tab-top-line-inactive-color);
1667   --tab-bg:var(--dialog-bg-color);
1668   --tab-bg-active-color:var(--tab-bg);
1669   --tab-bg-active-hover-color:var(--bg-hover);
1670   --tab-bg-hover:var(--bg-hover);
1671   --tab-text-color:var(--primary-color);
1672   --tab-text-active-color:var(--tab-top-line-active-color);
1673   --tab-text-hover-color:var(--tab-text-color);
1674   --signature-bg:#f9f9fb;
1675   --signature-placeholder-color:var(--secondary-color);
1676   --signature-draw-placeholder-color:var(--primary-color);
1677   --signature-color:var(--primary-color);
1678   --closing-button-icon:url(images/messageBar_closingButton.svg);
1679   --closing-button-color:var(--primary-color);
1680   --description-input-color:var(--primary-color);
1681   --clear-signature-button-border-width:0;
1682   --clear-signature-button-border-style:solid;
1683   --clear-signature-button-border-color:transparent;
1684   --clear-signature-button-border-disabled-color:transparent;
1685   --clear-signature-button-icon:url(images/editor-toolbar-delete.svg);
1686   --clear-signature-button-color:var(--primary-color);
1687   --clear-signature-button-hover-color:var(--clear-signature-button-color);
1688   --clear-signature-button-active-color:var(--clear-signature-button-color);
1689   --clear-signature-button-disabled-color:var(--clear-signature-button-color);
1690   --clear-signature-button-focus-color:var(--clear-signature-button-color);
1691   --clear-signature-button-bg:var(--dialog-bg-color);
1692   --clear-signature-button-bg-hover:var(--bg-hover);
1693   --clear-signature-button-bg-active:#cfcfd8;
1694   --clear-signature-button-bg-focus:#f0f0f4;
1695   --clear-signature-button-bg-disabled:color-mix(
1696     in srgb,
1697     #f0f0f4,
1698     transparent 40%
1699   );
1700   --save-warning-color:var(--secondary-color);
1701   --thickness-bg:var(--dialog-bg-color);
1702   --thickness-label-color:var(--primary-color);
1703   --thickness-slider-color:var(--primary-color);
1704   --draw-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
1705
1706   @media (prefers-color-scheme: dark){
1707     --dialog-bg-color:#42414d;
1708     --bg-hover:#52525e;
1709     --primary-color:#fbfbfe;
1710     --secondary-color:#cfcfd8;
1711     --tab-top-line-active-color:#0df;
1712     --tab-top-line-inactive-color:#8f8f9d;
1713     --signature-bg:#2b2a33;
1714     --clear-signature-button-bg-active:#5b5b66;
1715     --clear-signature-button-bg-focus:#2b2a33;
1716     --clear-signature-button-bg-disabled:color-mix(
1717       in srgb,
1718       #2b2a33,
1719       transparent 40%
1720     );
1721   }
1722
1723   @media screen and (forced-colors: active){
1724     --primary-color:ButtonText;
1725     --secondary-color:ButtonText;
1726     --bg:HighlightText;
1727     --bg-hover:var(--bg);
1728     --border-color:ButtonText;
1729     --tab-top-line-active-color:ButtonText;
1730     --tab-top-line-active-hover-color:HighlightText;
1731     --tab-top-line-hover-color:SelectedItem;
1732     --tab-top-line-inactive-color:ButtonText;
1733     --tab-bottom-line-active-color:var(--tab-top-line-active-color);
1734     --tab-bottom-line-hover-color:var(--tab-top-line-hover-color);
1735     --tab-bg:var(--bg);
1736     --tab-bg-active-color:SelectedItem;
1737     --tab-bg-active-hover-color:SelectedItem;
1738     --tab-text-color:ButtonText;
1739     --tab-text-active-color:HighlightText;
1740     --tab-text-hover-color:SelectedItem;
1741     --signature-bg:var(--bg);
1742     --signature-color:ButtonText;
1743     --clear-signature-button-border-width:1px;
1744     --clear-signature-button-border-style:solid;
1745     --clear-signature-button-border-color:ButtonText;
1746     --clear-signature-button-border-disabled-color:GrayText;
1747     --clear-signature-button-color:ButtonText;
1748     --clear-signature-button-hover-color:HighlightText;
1749     --clear-signature-button-active-color:SelectedItem;
1750     --clear-signature-button-focus-color:CanvasText;
1751     --clear-signature-button-disabled-color:GrayText;
1752     --clear-signature-button-bg:var(--bg);
1753     --clear-signature-button-bg-hover:SelectedItem;
1754     --clear-signature-button-bg-active:var(--bg);
1755     --clear-signature-button-bg-focus:var(--bg);
1756     --clear-signature-button-bg-disabled:var(--bg);
1757     --thickness-bg:Canvas;
1758     --thickness-label-color:CanvasText;
1759     --thickness-slider-color:ButtonText;
1760   }
1761
1762   width:570px;
1763   max-width:100%;
1764   min-width:300px;
1765   padding:16px 0;
1766
1767   #addSignatureDialogLabel{
1768     overflow:hidden;
1769     position:absolute;
1770     inset:0;
1771     width:0;
1772     height:0;
1773   }
1774
1775   &.waiting::after{
1776     content:"";
1777     cursor:wait;
1778     position:absolute;
1779     inset:0;
1780     width:100%;
1781     height:100%;
1782   }
1783
1784   span{
1785     font:menu;
1786     font-size:13px;
1787     font-style:normal;
1788     font-weight:400;
1789     line-height:normal;
1790   }
1791
1792   .mainContainer{
1793     width:100%;
1794     display:flex;
1795     flex-direction:column;
1796     align-items:flex-start;
1797     gap:12px;
1798
1799     .title{
1800       margin-inline-start:16px;
1801       font-weight:590;
1802     }
1803
1804     [role="tablist"]{
1805       width:100%;
1806       display:flex;
1807       align-items:flex-start;
1808       gap:0;
1809
1810       > [role="tab"]{
1811         flex:1 0 0;
1812         align-self:stretch;
1813         background-color:var(--tab-bg);
1814         padding-inline:0;
1815         cursor:default;
1816
1817         border-inline:0;
1818         border-block-width:1px;
1819         border-block-style:solid;
1820         border-block-start-color:var(--tab-top-line-inactive-color);
1821         border-block-end-color:var(--tab-bottom-line-inactive-color);
1822         border-radius:0;
1823
1824         font:menu;
1825         font-size:13px;
1826         font-style:normal;
1827         line-height:normal;
1828         font-weight:400;
1829         color:var(--tab-text-color);
1830
1831         &:hover{
1832           border-block-start-width:2px;
1833           border-block-start-color:var(--tab-top-line-hover-color);
1834           border-block-end-color:var(--tab-bottom-line-hover-color);
1835           background-color:var(--tab-bg-hover);
1836           color:var(--tab-text-hover-color);
1837         }
1838
1839         &:focus-visible{
1840           outline:2px solid var(--tab-top-line-active-color);
1841           outline-offset:-2px;
1842         }
1843
1844         &[aria-selected="true"]{
1845           border-block-start-width:2px;
1846           border-block-start-color:var(--tab-top-line-active-color);
1847           border-block-end-color:var(--tab-bottom-line-active-color);
1848           background-color:var(--tab-bg-active-color);
1849           font-weight:590;
1850           color:var(--tab-text-active-color);
1851
1852           &:hover{
1853             border-block-start-color:var(--tab-top-line-active-hover-color);
1854             background-color:var(--tab-bg-active-hover-color);
1855             color:var(--tab-text-hover-color);
1856           }
1857         }
1858       }
1859     }
1860
1861     #addSignatureActionContainer{
1862       width:100%;
1863       height:auto;
1864       display:flex;
1865       flex-direction:column;
1866       align-items:flex-end;
1867       align-self:stretch;
1868       gap:12px;
1869       padding-inline:16px;
1870       box-sizing:border-box;
1871
1872       > [role="tabpanel"]{
1873         position:relative;
1874         width:100%;
1875         height:220px;
1876         background-color:var(--signature-bg);
1877         border-radius:4px;
1878
1879         > svg{
1880           position:absolute;
1881           inset:0;
1882           width:100%;
1883           height:100%;
1884           background-color:transparent;
1885         }
1886
1887         &#addSignatureTypeContainer{
1888           display:none;
1889
1890           #addSignatureTypeInput{
1891             position:absolute;
1892             inset:0;
1893             width:100%;
1894             height:100%;
1895             border:0;
1896             padding:0;
1897             text-align:center;
1898             color:var(--signature-color);
1899             background-color:transparent;
1900
1901             font-family:"Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif;
1902             font-size:44px;
1903             font-style:italic;
1904             font-weight:400;
1905
1906             &::placeholder{
1907               color:var(--signature-placeholder-color);
1908               text-align:center;
1909
1910               font:menu;
1911               font-style:normal;
1912               font-weight:274;
1913               font-size:44px;
1914               line-height:normal;
1915             }
1916           }
1917         }
1918
1919         &#addSignatureDrawContainer{
1920           display:none;
1921
1922           > span{
1923             position:absolute;
1924             top:0;
1925             left:0;
1926             width:100%;
1927             height:100%;
1928             display:grid;
1929             align-items:center;
1930             justify-content:center;
1931
1932             background-color:transparent;
1933             color:var(--signature-placeholder-color);
1934             user-select:none;
1935           }
1936
1937           > svg{
1938             stroke:var(--primary-color);
1939             fill:none;
1940             stroke-opacity:1;
1941             stroke-linecap:round;
1942             stroke-linejoin:round;
1943             stroke-miterlimit:10;
1944
1945             &:hover{
1946               cursor:var(--draw-cursor);
1947             }
1948           }
1949
1950           #thickness{
1951             position:absolute;
1952             width:100%;
1953             inset-block-end:0;
1954             display:grid;
1955             align-items:center;
1956             justify-content:center;
1957             pointer-events:none;
1958
1959             > span{
1960               color:var(--signature-draw-placeholder-color);
1961             }
1962
1963             > div{
1964               width:auto;
1965               height:auto;
1966               display:flex;
1967               align-items:center;
1968               justify-content:center;
1969               gap:8px;
1970               padding:6px 8px;
1971               margin:0;
1972               background-color:var(--thickness-bg);
1973               border-radius:4px 4px 0 0;
1974               pointer-events:auto;
1975
1976               > label{
1977                 color:var(--thickness-label-color);
1978               }
1979
1980               > input{
1981                 width:100px;
1982                 height:14px;
1983                 background-color:transparent;
1984
1985                 &::-moz-range-track,
1986                 &::-moz-range-progress{
1987                   background-color:var(--thickness-slider-color);
1988                 }
1989
1990                 &::-moz-range-thumb{
1991                   background-color:var(--thickness-bg);
1992                 }
1993
1994                 border-radius:4.5px;
1995                 border:0;
1996                 color:var(--signature-color);
1997               }
1998             }
1999           }
2000         }
2001
2002         &#addSignatureImageContainer{
2003           display:none;
2004
2005           > svg{
2006             stroke:none;
2007             stroke-width:0;
2008             fill:var(--primary-color);
2009             fill-opacity:1;
2010           }
2011
2012           #addSignatureImagePlaceholder{
2013             position:absolute;
2014             top:0;
2015             left:0;
2016             width:100%;
2017             height:100%;
2018             background-color:transparent;
2019             display:flex;
2020             flex-direction:column;
2021             align-items:center;
2022             justify-content:center;
2023
2024             a{
2025               text-decoration:underline;
2026               cursor:pointer;
2027             }
2028           }
2029
2030           #addSignatureFilePicker{
2031             visibility:hidden;
2032             position:relative;
2033             width:0;
2034             height:0;
2035           }
2036         }
2037       }
2038
2039       &[data-selected="type"] > #addSignatureTypeContainer,
2040       &[data-selected="draw"] > #addSignatureDrawContainer,
2041       &[data-selected="image"] > #addSignatureImageContainer{
2042         display:block;
2043       }
2044
2045       #addSignatureControls{
2046         display:flex;
2047         flex-direction:column;
2048         justify-content:center;
2049         align-items:flex-start;
2050         gap:12px;
2051         align-self:stretch;
2052
2053         #horizontalContainer{
2054           display:flex;
2055           align-items:flex-end;
2056           gap:16px;
2057           align-self:stretch;
2058
2059           #addSignatureDescriptionContainer{
2060             display:flex;
2061             flex-direction:column;
2062             align-items:flex-start;
2063             gap:4px;
2064             flex:1 0 0;
2065
2066             > #inputWithClearButton{
2067               --button-dimension:24px;
2068
2069               width:100%;
2070               position:relative;
2071               display:flex;
2072               align-items:center;
2073               justify-content:center;
2074
2075               > input{
2076                 width:100%;
2077                 height:32px;
2078                 padding:8px 4px 8px 8px;
2079                 padding-block:8px;
2080                 padding-inline:8px calc(4px + var(--button-dimension));
2081                 box-sizing:border-box;
2082                 background-color:transparent;
2083                 border-radius:4px;
2084                 border:1px solid var(--border-color);
2085                 color:var(--description-input-color);
2086               }
2087
2088               #addSignatureDescriptionClearButton{
2089                 position:absolute;
2090                 inset-block-start:4px;
2091                 inset-inline-end:4px;
2092                 display:inline-block;
2093                 width:var(--button-dimension);
2094                 height:var(--button-dimension);
2095                 background-color:var(--closing-button-color);
2096                 mask-size:cover;
2097                 mask-image:var(--closing-button-icon);
2098                 padding:0;
2099                 border:0;
2100               }
2101             }
2102
2103             > label{
2104               width:auto;
2105             }
2106           }
2107
2108           #clearSignatureButton{
2109             display:flex;
2110             height:32px;
2111             padding:4px 8px;
2112             align-items:center;
2113             background-color:var(--clear-signature-button-bg);
2114             border-width:var(--clear-signature-button-border-width);
2115             border-style:var(--clear-signature-button-border-style);
2116             border-color:var(--clear-signature-button-border-color);
2117             border-radius:4px;
2118
2119             > span{
2120               display:flex;
2121               height:24px;
2122               align-items:center;
2123               gap:4px;
2124               flex-shrink:0;
2125
2126               color:var(--clear-signature-button-color);
2127
2128               &::after{
2129                 content:"";
2130                 display:inline-block;
2131                 width:16px;
2132                 height:16px;
2133                 mask-image:var(--clear-signature-button-icon);
2134                 mask-size:cover;
2135                 background-color:var(--clear-signature-button-color);
2136                 flex-shrink:0;
2137               }
2138             }
2139
2140             &:hover{
2141               background-color:var(--clear-signature-button-bg-hover);
2142
2143               > span{
2144                 color:var(--clear-signature-button-hover-color);
2145                 &::after{
2146                   background-color:var(--clear-signature-button-hover-color);
2147                 }
2148               }
2149             }
2150
2151             &:active{
2152               background-color:var(--clear-signature-button-bg-active);
2153
2154               > span{
2155                 color:var(--clear-signature-button-active-color);
2156                 &::after{
2157                   background-color:var(--clear-signature-button-active-color);
2158                 }
2159               }
2160             }
2161
2162             &:focus-visible{
2163               background-color:var(--clear-signature-button-bg-focus);
2164
2165               > span{
2166                 color:var(--clear-signature-button-focus-color);
2167                 &::after{
2168                   background-color:var(--clear-signature-button-focus-color);
2169                 }
2170               }
2171             }
2172
2173             &:disabled{
2174               background-color:var(--clear-signature-button-bg-disabled);
2175               border-color:var(--clear-signature-button-border-disabled-color);
2176
2177               > span{
2178                 color:var(--clear-signature-button-disabled-color);
2179                 &::after{
2180                   background-color:var(
2181                     --clear-signature-button-disabled-color
2182                   );
2183                 }
2184               }
2185             }
2186           }
2187         }
2188
2189         #addSignatureSaveContainer{
2190           display:grid;
2191           grid-template-columns:max-content max-content;
2192           gap:4px;
2193           width:100%;
2194
2195           > input{
2196             margin:0;
2197           }
2198
2199           > label{
2200             user-select:none;
2201           }
2202
2203           #addSignatureSaveWarning{
2204             color:var(--save-warning-color);
2205             font-size:11px;
2206           }
2207
2208           &[disabled]{
2209             pointer-events:none;
2210             opacity:0.4;
2211           }
2212         }
2213       }
2214     }
2215   }
2216 }
2217
2218 :root{
2219   --outline-width:2px;
2220   --outline-color:#0060df;
2221   --outline-around-width:1px;
2222   --outline-around-color:#f0f0f4;
2223   --hover-outline-around-color:var(--outline-around-color);
2224   --focus-outline:solid var(--outline-width) var(--outline-color);
2225   --unfocus-outline:solid var(--outline-width) transparent;
2226   --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
2227   --hover-outline-color:#8f8f9d;
2228   --hover-outline:solid var(--outline-width) var(--hover-outline-color);
2229   --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
2230   --freetext-line-height:1.35;
2231   --freetext-padding:2px;
2232   --resizer-bg-color:var(--outline-color);
2233   --resizer-size:6px;
2234   --resizer-shift:calc(
2235     0px - (var(--outline-width) + var(--resizer-size)) / 2 -
2236       var(--outline-around-width)
2237   );
2238   --editorFreeText-editing-cursor:text;
2239   --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
2240   --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
2241   --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
2242
2243   --new-alt-text-warning-image:url(images/altText_warning.svg);
2244 }
2245 .visuallyHidden{
2246   position:absolute;
2247   top:0;
2248   left:0;
2249   border:0;
2250   margin:0;
2251   padding:0;
2252   width:0;
2253   height:0;
2254   overflow:hidden;
2255   white-space:nowrap;
2256   font-size:0;
2257 }
2258
2259 .textLayer{
2260   &.highlighting{
2261     cursor:var(--editorFreeHighlight-editing-cursor);
2262
2263     &:not(.free) span{
2264       cursor:var(--editorHighlight-editing-cursor);
2265
2266       &[role="img"]{
2267         cursor:var(--editorFreeHighlight-editing-cursor);
2268       }
2269     }
2270
2271     &.free span{
2272       cursor:var(--editorFreeHighlight-editing-cursor);
2273     }
2274   }
2275 }
2276
2277 #viewerContainer.pdfPresentationMode:fullscreen,
2278 .annotationEditorLayer.disabled{
2279   .noAltTextBadge{
2280     display:none !important;
2281   }
2282 }
2283
2284 @media (min-resolution: 1.1dppx){
2285   :root{
2286     --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
2287   }
2288 }
2289
2290 @media screen and (forced-colors: active){
2291   :root{
2292     --outline-color:CanvasText;
2293     --outline-around-color:ButtonFace;
2294     --resizer-bg-color:ButtonText;
2295     --hover-outline-color:Highlight;
2296     --hover-outline-around-color:SelectedItemText;
2297   }
2298 }
2299
2300 [data-editor-rotation="90"]{
2301   transform:rotate(90deg);
2302 }
2303
2304 [data-editor-rotation="180"]{
2305   transform:rotate(180deg);
2306 }
2307
2308 [data-editor-rotation="270"]{
2309   transform:rotate(270deg);
2310 }
2311
2312 .annotationEditorLayer{
2313   background:transparent;
2314   position:absolute;
2315   inset:0;
2316   font-size:calc(100px * var(--scale-factor));
2317   transform-origin:0 0;
2318   cursor:auto;
2319
2320   .selectedEditor{
2321     z-index:100000 !important;
2322   }
2323
2324   &.drawing *{
2325     pointer-events:none !important;
2326   }
2327 }
2328
2329 .annotationEditorLayer.waiting{
2330   content:"";
2331   cursor:wait;
2332   position:absolute;
2333   inset:0;
2334   width:100%;
2335   height:100%;
2336 }
2337
2338 .annotationEditorLayer.disabled{
2339   pointer-events:none;
2340 }
2341
2342 .annotationEditorLayer.freetextEditing{
2343   cursor:var(--editorFreeText-editing-cursor);
2344 }
2345
2346 .annotationEditorLayer.inkEditing{
2347   cursor:var(--editorInk-editing-cursor);
2348 }
2349
2350 .annotationEditorLayer .draw{
2351   box-sizing:border-box;
2352 }
2353
2354 .annotationEditorLayer
2355   :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){
2356   position:absolute;
2357   background:transparent;
2358   z-index:1;
2359   transform-origin:0 0;
2360   cursor:auto;
2361   max-width:100%;
2362   max-height:100%;
2363   border:var(--unfocus-outline);
2364
2365   &.draggable.selectedEditor{
2366     cursor:move;
2367   }
2368
2369   &.selectedEditor{
2370     border:var(--focus-outline);
2371     outline:var(--focus-outline-around);
2372
2373     &::before{
2374       content:"";
2375       position:absolute;
2376       inset:0;
2377       border:var(--focus-outline-around);
2378       pointer-events:none;
2379     }
2380   }
2381
2382   &:hover:not(.selectedEditor){
2383     border:var(--hover-outline);
2384     outline:var(--hover-outline-around);
2385
2386     &::before{
2387       content:"";
2388       position:absolute;
2389       inset:0;
2390       border:var(--focus-outline-around);
2391     }
2392   }
2393 }
2394
2395 .annotationEditorLayer
2396   :is(
2397     .freeTextEditor,
2398     .inkEditor,
2399     .stampEditor,
2400     .highlightEditor,
2401     .signatureEditor
2402   ),
2403 .textLayer{
2404   .editToolbar{
2405     --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
2406     --editor-toolbar-bg-color:#f0f0f4;
2407     --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
2408     --editor-toolbar-fg-color:#2e2e56;
2409     --editor-toolbar-border-color:#8f8f9d;
2410     --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
2411     --editor-toolbar-hover-bg-color:#e0e0e6;
2412     --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
2413     --editor-toolbar-hover-outline:none;
2414     --editor-toolbar-focus-outline-color:#0060df;
2415     --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
2416     --editor-toolbar-vert-offset:6px;
2417     --editor-toolbar-height:28px;
2418     --editor-toolbar-padding:2px;
2419     --alt-text-done-color:#2ac3a2;
2420     --alt-text-warning-color:#0090ed;
2421     --alt-text-hover-done-color:var(--alt-text-done-color);
2422     --alt-text-hover-warning-color:var(--alt-text-warning-color);
2423
2424     @media (prefers-color-scheme: dark){
2425       --editor-toolbar-bg-color:#2b2a33;
2426       --editor-toolbar-fg-color:#fbfbfe;
2427       --editor-toolbar-hover-bg-color:#52525e;
2428       --editor-toolbar-focus-outline-color:#0df;
2429       --alt-text-done-color:#54ffbd;
2430       --alt-text-warning-color:#80ebff;
2431     }
2432
2433     @media screen and (forced-colors: active){
2434       --editor-toolbar-bg-color:ButtonFace;
2435       --editor-toolbar-fg-color:ButtonText;
2436       --editor-toolbar-border-color:ButtonText;
2437       --editor-toolbar-hover-border-color:AccentColor;
2438       --editor-toolbar-hover-bg-color:ButtonFace;
2439       --editor-toolbar-hover-fg-color:AccentColor;
2440       --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
2441       --editor-toolbar-focus-outline-color:ButtonBorder;
2442       --editor-toolbar-shadow:none;
2443       --alt-text-done-color:var(--editor-toolbar-fg-color);
2444       --alt-text-warning-color:var(--editor-toolbar-fg-color);
2445       --alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color);
2446       --alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color);
2447     }
2448
2449     display:flex;
2450     width:fit-content;
2451     height:var(--editor-toolbar-height);
2452     flex-direction:column;
2453     justify-content:center;
2454     align-items:center;
2455     cursor:default;
2456     pointer-events:auto;
2457     box-sizing:content-box;
2458     padding:var(--editor-toolbar-padding);
2459
2460     position:absolute;
2461     inset-inline-end:0;
2462     inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
2463
2464     border-radius:6px;
2465     background-color:var(--editor-toolbar-bg-color);
2466     border:1px solid var(--editor-toolbar-border-color);
2467     box-shadow:var(--editor-toolbar-shadow);
2468
2469     &.hidden{
2470       display:none;
2471     }
2472
2473     &:has(:focus-visible){
2474       border-color:transparent;
2475     }
2476
2477     &:dir(ltr){
2478       transform-origin:100% 0;
2479     }
2480
2481     &:dir(rtl){
2482       transform-origin:0 0;
2483     }
2484
2485     .buttons{
2486       display:flex;
2487       justify-content:center;
2488       align-items:center;
2489       gap:0;
2490       height:100%;
2491
2492       button{
2493         padding:0;
2494       }
2495
2496       .divider{
2497         width:0;
2498         height:calc(
2499           2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
2500         );
2501         border-left:1px solid var(--editor-toolbar-border-color);
2502         border-right:none;
2503         display:inline-block;
2504         margin-inline:2px;
2505       }
2506
2507       .highlightButton{
2508         width:var(--editor-toolbar-height);
2509
2510         &::before{
2511           content:"";
2512           mask-image:var(--editor-toolbar-highlight-image);
2513           mask-repeat:no-repeat;
2514           mask-position:center;
2515           display:inline-block;
2516           background-color:var(--editor-toolbar-fg-color);
2517           width:100%;
2518           height:100%;
2519         }
2520
2521         &:hover::before{
2522           background-color:var(--editor-toolbar-hover-fg-color);
2523         }
2524       }
2525
2526       .delete{
2527         width:var(--editor-toolbar-height);
2528
2529         &::before{
2530           content:"";
2531           mask-image:var(--editor-toolbar-delete-image);
2532           mask-repeat:no-repeat;
2533           mask-position:center;
2534           display:inline-block;
2535           background-color:var(--editor-toolbar-fg-color);
2536           width:100%;
2537           height:100%;
2538         }
2539
2540         &:hover::before{
2541           background-color:var(--editor-toolbar-hover-fg-color);
2542         }
2543       }
2544
2545       > *{
2546         height:var(--editor-toolbar-height);
2547       }
2548
2549       > :not(.divider){
2550         border:none;
2551         background-color:transparent;
2552         cursor:pointer;
2553
2554         &:hover{
2555           border-radius:2px;
2556           background-color:var(--editor-toolbar-hover-bg-color);
2557           color:var(--editor-toolbar-hover-fg-color);
2558           outline:var(--editor-toolbar-hover-outline);
2559           outline-offset:1px;
2560
2561           &:active{
2562             outline:none;
2563           }
2564         }
2565
2566         &:focus-visible{
2567           border-radius:2px;
2568           outline:2px solid var(--editor-toolbar-focus-outline-color);
2569         }
2570       }
2571
2572       .altText{
2573         --alt-text-add-image:url(images/altText_add.svg);
2574         --alt-text-done-image:url(images/altText_done.svg);
2575
2576         display:flex;
2577         align-items:center;
2578         justify-content:center;
2579         width:max-content;
2580         padding-inline:8px;
2581         pointer-events:all;
2582         font:menu;
2583         font-weight:590;
2584         font-size:12px;
2585         color:var(--editor-toolbar-fg-color);
2586
2587         &:disabled{
2588           pointer-events:none;
2589         }
2590
2591         &::before{
2592           content:"";
2593           mask-image:var(--alt-text-add-image);
2594           mask-repeat:no-repeat;
2595           mask-position:center;
2596           display:inline-block;
2597           width:12px;
2598           height:13px;
2599           background-color:var(--editor-toolbar-fg-color);
2600           margin-inline-end:4px;
2601         }
2602
2603         &:hover::before{
2604           background-color:var(--editor-toolbar-hover-fg-color);
2605         }
2606
2607         &.done::before{
2608           mask-image:var(--alt-text-done-image);
2609         }
2610
2611         &.new{
2612           &::before{
2613             width:16px;
2614             height:16px;
2615             mask-image:var(--new-alt-text-warning-image);
2616             background-color:var(--alt-text-warning-color);
2617             mask-size:cover;
2618           }
2619
2620           &:hover::before{
2621             background-color:var(--alt-text-hover-warning-color);
2622           }
2623
2624           &.done{
2625             &::before{
2626               mask-image:var(--alt-text-done-image);
2627               background-color:var(--alt-text-done-color);
2628             }
2629
2630             &:hover::before{
2631               background-color:var(--alt-text-hover-done-color);
2632             }
2633           }
2634         }
2635
2636         .tooltip{
2637           display:none;
2638           word-wrap:anywhere;
2639
2640           &.show{
2641             --alt-text-tooltip-bg:#f0f0f4;
2642             --alt-text-tooltip-fg:#15141a;
2643             --alt-text-tooltip-border:#8f8f9d;
2644             --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
2645
2646             @media (prefers-color-scheme: dark){
2647               --alt-text-tooltip-bg:#1c1b22;
2648               --alt-text-tooltip-fg:#fbfbfe;
2649               --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
2650             }
2651
2652             @media screen and (forced-colors: active){
2653               --alt-text-tooltip-bg:Canvas;
2654               --alt-text-tooltip-fg:CanvasText;
2655               --alt-text-tooltip-border:CanvasText;
2656               --alt-text-tooltip-shadow:none;
2657             }
2658
2659             display:inline-flex;
2660             flex-direction:column;
2661             align-items:center;
2662             justify-content:center;
2663             position:absolute;
2664             top:calc(100% + 2px);
2665             inset-inline-start:0;
2666             padding-block:2px 3px;
2667             padding-inline:3px;
2668             max-width:300px;
2669             width:max-content;
2670             height:auto;
2671             font-size:12px;
2672
2673             border:0.5px solid var(--alt-text-tooltip-border);
2674             background:var(--alt-text-tooltip-bg);
2675             box-shadow:var(--alt-text-tooltip-shadow);
2676             color:var(--alt-text-tooltip-fg);
2677
2678             pointer-events:none;
2679           }
2680         }
2681       }
2682     }
2683   }
2684 }
2685
2686 .annotationEditorLayer .freeTextEditor{
2687   padding:calc(var(--freetext-padding) * var(--scale-factor));
2688   width:auto;
2689   height:auto;
2690   touch-action:none;
2691 }
2692
2693 .annotationEditorLayer .freeTextEditor .internal{
2694   background:transparent;
2695   border:none;
2696   inset:0;
2697   overflow:visible;
2698   white-space:nowrap;
2699   font:10px sans-serif;
2700   line-height:var(--freetext-line-height);
2701   user-select:none;
2702 }
2703
2704 .annotationEditorLayer .freeTextEditor .overlay{
2705   position:absolute;
2706   display:none;
2707   background:transparent;
2708   inset:0;
2709   width:100%;
2710   height:100%;
2711 }
2712
2713 .annotationEditorLayer freeTextEditor .overlay.enabled{
2714   display:block;
2715 }
2716
2717 .annotationEditorLayer .freeTextEditor .internal:empty::before{
2718   content:attr(default-content);
2719   color:gray;
2720 }
2721
2722 .annotationEditorLayer .freeTextEditor .internal:focus{
2723   outline:none;
2724   user-select:auto;
2725 }
2726
2727 .annotationEditorLayer .inkEditor{
2728   width:100%;
2729   height:100%;
2730 }
2731
2732 .annotationEditorLayer .inkEditor.editing{
2733   cursor:inherit;
2734 }
2735
2736 .annotationEditorLayer .inkEditor .inkEditorCanvas{
2737   position:absolute;
2738   inset:0;
2739   width:100%;
2740   height:100%;
2741   touch-action:none;
2742 }
2743
2744 .annotationEditorLayer .stampEditor{
2745   width:auto;
2746   height:auto;
2747
2748   canvas{
2749     position:absolute;
2750     width:100%;
2751     height:100%;
2752     margin:0;
2753     top:0;
2754     left:0;
2755   }
2756
2757   .noAltTextBadge{
2758     --no-alt-text-badge-border-color:#f0f0f4;
2759     --no-alt-text-badge-bg-color:#cfcfd8;
2760     --no-alt-text-badge-fg-color:#5b5b66;
2761
2762     @media (prefers-color-scheme: dark){
2763       --no-alt-text-badge-border-color:#52525e;
2764       --no-alt-text-badge-bg-color:#fbfbfe;
2765       --no-alt-text-badge-fg-color:#15141a;
2766     }
2767
2768     @media screen and (forced-colors: active){
2769       --no-alt-text-badge-border-color:ButtonText;
2770       --no-alt-text-badge-bg-color:ButtonFace;
2771       --no-alt-text-badge-fg-color:ButtonText;
2772     }
2773
2774     position:absolute;
2775     inset-inline-end:5px;
2776     inset-block-end:5px;
2777     display:inline-flex;
2778     width:32px;
2779     height:32px;
2780     padding:3px;
2781     justify-content:center;
2782     align-items:center;
2783     pointer-events:none;
2784     z-index:1;
2785
2786     border-radius:2px;
2787     border:1px solid var(--no-alt-text-badge-border-color);
2788     background:var(--no-alt-text-badge-bg-color);
2789
2790     &::before{
2791       content:"";
2792       display:inline-block;
2793       width:16px;
2794       height:16px;
2795       mask-image:var(--new-alt-text-warning-image);
2796       mask-size:cover;
2797       background-color:var(--no-alt-text-badge-fg-color);
2798     }
2799   }
2800 }
2801
2802 .annotationEditorLayer{
2803   :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){
2804     & > .resizers{
2805       position:absolute;
2806       inset:0;
2807
2808       &.hidden{
2809         display:none;
2810       }
2811
2812       & > .resizer{
2813         width:var(--resizer-size);
2814         height:var(--resizer-size);
2815         background:content-box var(--resizer-bg-color);
2816         border:var(--focus-outline-around);
2817         border-radius:2px;
2818         position:absolute;
2819
2820         &.topLeft{
2821           top:var(--resizer-shift);
2822           left:var(--resizer-shift);
2823         }
2824
2825         &.topMiddle{
2826           top:var(--resizer-shift);
2827           left:calc(50% + var(--resizer-shift));
2828         }
2829
2830         &.topRight{
2831           top:var(--resizer-shift);
2832           right:var(--resizer-shift);
2833         }
2834
2835         &.middleRight{
2836           top:calc(50% + var(--resizer-shift));
2837           right:var(--resizer-shift);
2838         }
2839
2840         &.bottomRight{
2841           bottom:var(--resizer-shift);
2842           right:var(--resizer-shift);
2843         }
2844
2845         &.bottomMiddle{
2846           bottom:var(--resizer-shift);
2847           left:calc(50% + var(--resizer-shift));
2848         }
2849
2850         &.bottomLeft{
2851           bottom:var(--resizer-shift);
2852           left:var(--resizer-shift);
2853         }
2854
2855         &.middleLeft{
2856           top:calc(50% + var(--resizer-shift));
2857           left:var(--resizer-shift);
2858         }
2859       }
2860     }
2861   }
2862
2863   &[data-main-rotation="0"]
2864     :is([data-editor-rotation="0"], [data-editor-rotation="180"]),
2865   &[data-main-rotation="90"]
2866     :is([data-editor-rotation="270"], [data-editor-rotation="90"]),
2867   &[data-main-rotation="180"]
2868     :is([data-editor-rotation="180"], [data-editor-rotation="0"]),
2869   &[data-main-rotation="270"]
2870     :is([data-editor-rotation="90"], [data-editor-rotation="270"]){
2871     & > .resizers > .resizer{
2872       &.topLeft,
2873       &.bottomRight{
2874         cursor:nwse-resize;
2875       }
2876
2877       &.topMiddle,
2878       &.bottomMiddle{
2879         cursor:ns-resize;
2880       }
2881
2882       &.topRight,
2883       &.bottomLeft{
2884         cursor:nesw-resize;
2885       }
2886
2887       &.middleRight,
2888       &.middleLeft{
2889         cursor:ew-resize;
2890       }
2891     }
2892   }
2893
2894   &[data-main-rotation="0"]
2895     :is([data-editor-rotation="90"], [data-editor-rotation="270"]),
2896   &[data-main-rotation="90"]
2897     :is([data-editor-rotation="0"], [data-editor-rotation="180"]),
2898   &[data-main-rotation="180"]
2899     :is([data-editor-rotation="270"], [data-editor-rotation="90"]),
2900   &[data-main-rotation="270"]
2901     :is([data-editor-rotation="180"], [data-editor-rotation="0"]){
2902     & > .resizers > .resizer{
2903       &.topLeft,
2904       &.bottomRight{
2905         cursor:nesw-resize;
2906       }
2907
2908       &.topMiddle,
2909       &.bottomMiddle{
2910         cursor:ew-resize;
2911       }
2912
2913       &.topRight,
2914       &.bottomLeft{
2915         cursor:nwse-resize;
2916       }
2917
2918       &.middleRight,
2919       &.middleLeft{
2920         cursor:ns-resize;
2921       }
2922     }
2923   }
2924
2925   &
2926     :is(
2927       [data-main-rotation="0"] [data-editor-rotation="90"],
2928       [data-main-rotation="90"] [data-editor-rotation="0"],
2929       [data-main-rotation="180"] [data-editor-rotation="270"],
2930       [data-main-rotation="270"] [data-editor-rotation="180"]
2931     ){
2932     .editToolbar{
2933       rotate:270deg;
2934
2935       &:dir(ltr){
2936         inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
2937         inset-block-start:0;
2938       }
2939
2940       &:dir(rtl){
2941         inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
2942         inset-block-start:0;
2943       }
2944     }
2945   }
2946
2947   &
2948     :is(
2949       [data-main-rotation="0"] [data-editor-rotation="180"],
2950       [data-main-rotation="90"] [data-editor-rotation="90"],
2951       [data-main-rotation="180"] [data-editor-rotation="0"],
2952       [data-main-rotation="270"] [data-editor-rotation="270"]
2953     ){
2954     .editToolbar{
2955       rotate:180deg;
2956       inset-inline-end:100%;
2957       inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
2958     }
2959   }
2960
2961   &
2962     :is(
2963       [data-main-rotation="0"] [data-editor-rotation="270"],
2964       [data-main-rotation="90"] [data-editor-rotation="180"],
2965       [data-main-rotation="180"] [data-editor-rotation="90"],
2966       [data-main-rotation="270"] [data-editor-rotation="0"]
2967     ){
2968     .editToolbar{
2969       rotate:90deg;
2970
2971       &:dir(ltr){
2972         inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
2973         inset-block-start:100%;
2974       }
2975
2976       &:dir(rtl){
2977         inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
2978         inset-block-start:0;
2979       }
2980     }
2981   }
2982 }
2983
2984 .dialog.altText{
2985   &::backdrop{
2986     mask:url(#alttext-manager-mask);
2987   }
2988   &.positioned{
2989     margin:0;
2990   }
2991
2992   & #altTextContainer{
2993     width:300px;
2994     height:fit-content;
2995     display:inline-flex;
2996     flex-direction:column;
2997     align-items:flex-start;
2998     gap:16px;
2999
3000     & #overallDescription{
3001       display:flex;
3002       flex-direction:column;
3003       align-items:flex-start;
3004       gap:4px;
3005       align-self:stretch;
3006
3007       & span{
3008         align-self:stretch;
3009       }
3010
3011       & .title{
3012         font-size:13px;
3013         font-style:normal;
3014         font-weight:590;
3015       }
3016     }
3017
3018     & #addDescription{
3019       display:flex;
3020       flex-direction:column;
3021       align-items:stretch;
3022       gap:8px;
3023
3024       & .descriptionArea{
3025         flex:1;
3026         padding-inline:24px 10px;
3027
3028         textarea{
3029           width:100%;
3030           min-height:75px;
3031         }
3032       }
3033     }
3034
3035     & #buttons{
3036       display:flex;
3037       justify-content:flex-end;
3038       align-items:flex-start;
3039       gap:8px;
3040       align-self:stretch;
3041     }
3042   }
3043 }
3044
3045 .dialog.newAltText{
3046   --new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg);
3047   --new-alt-text-spinner-icon:url(images/altText_spinner.svg);
3048   --preview-image-bg-color:#f0f0f4;
3049   --preview-image-border:none;
3050
3051   @media (prefers-color-scheme: dark){
3052     --preview-image-bg-color:#2b2a33;
3053   }
3054
3055   @media screen and (forced-colors: active){
3056     --preview-image-bg-color:ButtonFace;
3057     --preview-image-border:1px solid ButtonText;
3058   }
3059
3060   width:80%;
3061   max-width:570px;
3062   min-width:300px;
3063   padding:0;
3064
3065   &.noAi{
3066     #newAltTextDisclaimer,
3067     #newAltTextCreateAutomatically{
3068       display:none !important;
3069     }
3070   }
3071
3072   &.aiInstalling{
3073     #newAltTextCreateAutomatically{
3074       display:none !important;
3075     }
3076     #newAltTextDownloadModel{
3077       display:flex !important;
3078     }
3079   }
3080
3081   &.error{
3082     #newAltTextNotNow{
3083       display:none !important;
3084     }
3085
3086     #newAltTextCancel{
3087       display:inline-block !important;
3088     }
3089   }
3090
3091   &:not(.error) #newAltTextError{
3092     display:none !important;
3093   }
3094
3095   #newAltTextContainer{
3096     display:flex;
3097     width:auto;
3098     padding:16px;
3099     flex-direction:column;
3100     justify-content:flex-end;
3101     align-items:flex-start;
3102     gap:12px;
3103     flex:0 1 auto;
3104     line-height:normal;
3105
3106     #mainContent{
3107       display:flex;
3108       justify-content:flex-end;
3109       align-items:flex-start;
3110       gap:12px;
3111       align-self:stretch;
3112       flex:1 1 auto;
3113
3114       #descriptionAndSettings{
3115         display:flex;
3116         flex-direction:column;
3117         align-items:flex-start;
3118         gap:16px;
3119         flex:1 0 0;
3120         align-self:stretch;
3121       }
3122
3123       #descriptionInstruction{
3124         display:flex;
3125         flex-direction:column;
3126         align-items:flex-start;
3127         gap:8px;
3128         align-self:stretch;
3129         flex:1 1 auto;
3130
3131         #newAltTextDescriptionContainer{
3132           width:100%;
3133           height:70px;
3134           position:relative;
3135
3136           textarea{
3137             width:100%;
3138             height:100%;
3139             padding:8px;
3140
3141             &::placeholder{
3142               color:var(--text-secondary-color);
3143             }
3144           }
3145
3146           .altTextSpinner{
3147             display:none;
3148             position:absolute;
3149             width:16px;
3150             height:16px;
3151             inset-inline-start:8px;
3152             inset-block-start:8px;
3153             mask-size:cover;
3154             background-color:var(--text-secondary-color);
3155             pointer-events:none;
3156           }
3157
3158           &.loading{
3159             textarea::placeholder{
3160               color:transparent;
3161             }
3162
3163             .altTextSpinner{
3164               display:inline-block;
3165               mask-image:var(--new-alt-text-spinner-icon);
3166             }
3167           }
3168         }
3169
3170         #newAltTextDescription{
3171           font-size:11px;
3172         }
3173
3174         #newAltTextDisclaimer{
3175           display:flex;
3176           flex-direction:row;
3177           align-items:flex-start;
3178           gap:4px;
3179           font-size:11px;
3180
3181           &::before{
3182             content:"";
3183             display:inline-block;
3184             width:17px;
3185             height:16px;
3186             mask-image:var(--new-alt-text-ai-disclaimer-icon);
3187             mask-size:cover;
3188             background-color:var(--text-secondary-color);
3189             flex:1 0 auto;
3190           }
3191         }
3192       }
3193
3194       #newAltTextDownloadModel{
3195         display:flex;
3196         align-items:center;
3197         gap:4px;
3198         align-self:stretch;
3199
3200         &::before{
3201           content:"";
3202           display:inline-block;
3203           width:16px;
3204           height:16px;
3205           mask-image:var(--new-alt-text-spinner-icon);
3206           mask-size:cover;
3207           background-color:var(--text-secondary-color);
3208         }
3209       }
3210
3211       #newAltTextImagePreview{
3212         width:180px;
3213         aspect-ratio:1;
3214         display:flex;
3215         justify-content:center;
3216         align-items:center;
3217         flex:0 0 auto;
3218         background-color:var(--preview-image-bg-color);
3219         border:var(--preview-image-border);
3220
3221         > canvas{
3222           max-width:100%;
3223           max-height:100%;
3224         }
3225       }
3226     }
3227   }
3228 }
3229
3230 .colorPicker{
3231   --hover-outline-color:#0250bb;
3232   --selected-outline-color:#0060df;
3233   --swatch-border-color:#cfcfd8;
3234
3235   @media (prefers-color-scheme: dark){
3236     --hover-outline-color:#80ebff;
3237     --selected-outline-color:#aaf2ff;
3238     --swatch-border-color:#52525e;
3239   }
3240
3241   @media screen and (forced-colors: active){
3242     --hover-outline-color:Highlight;
3243     --selected-outline-color:var(--hover-outline-color);
3244     --swatch-border-color:ButtonText;
3245   }
3246
3247   .swatch{
3248     width:16px;
3249     height:16px;
3250     border:1px solid var(--swatch-border-color);
3251     border-radius:100%;
3252     outline-offset:2px;
3253     box-sizing:border-box;
3254     forced-color-adjust:none;
3255   }
3256
3257   button:is(:hover, .selected) > .swatch{
3258     border:none;
3259   }
3260 }
3261
3262 .annotationEditorLayer{
3263   &[data-main-rotation="0"]{
3264     .highlightEditor:not(.free) > .editToolbar{
3265       rotate:0deg;
3266     }
3267   }
3268
3269   &[data-main-rotation="90"]{
3270     .highlightEditor:not(.free) > .editToolbar{
3271       rotate:270deg;
3272     }
3273   }
3274
3275   &[data-main-rotation="180"]{
3276     .highlightEditor:not(.free) > .editToolbar{
3277       rotate:180deg;
3278     }
3279   }
3280
3281   &[data-main-rotation="270"]{
3282     .highlightEditor:not(.free) > .editToolbar{
3283       rotate:90deg;
3284     }
3285   }
3286
3287   .highlightEditor{
3288     position:absolute;
3289     background:transparent;
3290     z-index:1;
3291     cursor:auto;
3292     max-width:100%;
3293     max-height:100%;
3294     border:none;
3295     outline:none;
3296     pointer-events:none;
3297     transform-origin:0 0;
3298
3299     &:not(.free){
3300       transform:none;
3301     }
3302
3303     .internal{
3304       position:absolute;
3305       top:0;
3306       left:0;
3307       width:100%;
3308       height:100%;
3309       pointer-events:auto;
3310     }
3311
3312     &.disabled .internal{
3313       pointer-events:none;
3314     }
3315
3316     &.selectedEditor{
3317       .internal{
3318         cursor:pointer;
3319       }
3320     }
3321
3322     .editToolbar{
3323       --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
3324
3325       transform-origin:center !important;
3326
3327       .buttons{
3328         .colorPicker{
3329           position:relative;
3330           width:auto;
3331           display:flex;
3332           justify-content:center;
3333           align-items:center;
3334           gap:4px;
3335           padding:4px;
3336
3337           &::after{
3338             content:"";
3339             mask-image:var(--editor-toolbar-colorpicker-arrow-image);
3340             mask-repeat:no-repeat;
3341             mask-position:center;
3342             display:inline-block;
3343             background-color:var(--editor-toolbar-fg-color);
3344             width:12px;
3345             height:12px;
3346           }
3347
3348           &:hover::after{
3349             background-color:var(--editor-toolbar-hover-fg-color);
3350           }
3351
3352           &:has(.dropdown:not(.hidden)){
3353             background-color:var(--editor-toolbar-hover-bg-color);
3354
3355             &::after{
3356               scale:-1;
3357             }
3358           }
3359
3360           .dropdown{
3361             position:absolute;
3362             display:flex;
3363             justify-content:center;
3364             align-items:center;
3365             flex-direction:column;
3366             gap:11px;
3367             padding-block:8px;
3368             border-radius:6px;
3369             background-color:var(--editor-toolbar-bg-color);
3370             border:1px solid var(--editor-toolbar-border-color);
3371             box-shadow:var(--editor-toolbar-shadow);
3372             inset-block-start:calc(100% + 4px);
3373             width:calc(100% + 2 * var(--editor-toolbar-padding));
3374
3375             button{
3376               width:100%;
3377               height:auto;
3378               border:none;
3379               cursor:pointer;
3380               display:flex;
3381               justify-content:center;
3382               align-items:center;
3383               background:none;
3384
3385               &:is(:active, :focus-visible){
3386                 outline:none;
3387               }
3388
3389               > .swatch{
3390                 outline-offset:2px;
3391               }
3392
3393               &[aria-selected="true"] > .swatch{
3394                 outline:2px solid var(--selected-outline-color);
3395               }
3396
3397               &:is(:hover, :active, :focus-visible) > .swatch{
3398                 outline:2px solid var(--hover-outline-color);
3399               }
3400             }
3401           }
3402         }
3403       }
3404     }
3405   }
3406 }
3407
3408 .editorParamsToolbar:has(#highlightParamsToolbarContainer){
3409   padding:unset;
3410 }
3411
3412 #highlightParamsToolbarContainer{
3413   gap:16px;
3414   padding-inline:10px;
3415   padding-block-end:12px;
3416
3417   .colorPicker{
3418     display:flex;
3419     flex-direction:column;
3420     gap:8px;
3421
3422     .dropdown{
3423       display:flex;
3424       justify-content:space-between;
3425       align-items:center;
3426       flex-direction:row;
3427       height:auto;
3428
3429       button{
3430         width:auto;
3431         height:auto;
3432         border:none;
3433         cursor:pointer;
3434         display:flex;
3435         justify-content:center;
3436         align-items:center;
3437         background:none;
3438         flex:0 0 auto;
3439         padding:0;
3440
3441         .swatch{
3442           width:24px;
3443           height:24px;
3444         }
3445
3446         &:is(:active, :focus-visible){
3447           outline:none;
3448         }
3449
3450         &[aria-selected="true"] > .swatch{
3451           outline:2px solid var(--selected-outline-color);
3452         }
3453
3454         &:is(:hover, :active, :focus-visible) > .swatch{
3455           outline:2px solid var(--hover-outline-color);
3456         }
3457       }
3458     }
3459   }
3460
3461   #editorHighlightThickness{
3462     display:flex;
3463     flex-direction:column;
3464     align-items:center;
3465     gap:4px;
3466     align-self:stretch;
3467
3468     .editorParamsLabel{
3469       height:auto;
3470       align-self:stretch;
3471     }
3472
3473     .thicknessPicker{
3474       display:flex;
3475       justify-content:space-between;
3476       align-items:center;
3477       align-self:stretch;
3478
3479       --example-color:#bfbfc9;
3480
3481       @media (prefers-color-scheme: dark){
3482         --example-color:#80808e;
3483       }
3484
3485       @media screen and (forced-colors: active){
3486         --example-color:CanvasText;
3487       }
3488
3489       :is(& > .editorParamsSlider[disabled]){
3490         opacity:0.4;
3491       }
3492
3493       &::before,
3494       &::after{
3495         content:"";
3496         width:8px;
3497         aspect-ratio:1;
3498         display:block;
3499         border-radius:100%;
3500         background-color:var(--example-color);
3501       }
3502       &::after{
3503         width:24px;
3504       }
3505
3506       .editorParamsSlider{
3507         width:unset;
3508         height:14px;
3509       }
3510     }
3511   }
3512
3513   #editorHighlightVisibility{
3514     display:flex;
3515     flex-direction:column;
3516     align-items:flex-start;
3517     gap:8px;
3518     align-self:stretch;
3519
3520     .divider{
3521       --divider-color:#d7d7db;
3522
3523       @media (prefers-color-scheme: dark){
3524         --divider-color:#8f8f9d;
3525       }
3526
3527       @media screen and (forced-colors: active){
3528         --divider-color:CanvasText;
3529       }
3530
3531       margin-block:4px;
3532       width:100%;
3533       height:1px;
3534       background-color:var(--divider-color);
3535     }
3536
3537     .toggler{
3538       display:flex;
3539       justify-content:space-between;
3540       align-items:center;
3541       align-self:stretch;
3542     }
3543   }
3544 }
3545
3546 #altTextSettingsDialog{
3547   padding:16px;
3548
3549   #altTextSettingsContainer{
3550     display:flex;
3551     width:573px;
3552     flex-direction:column;
3553     gap:16px;
3554
3555     .mainContainer{
3556       gap:16px;
3557     }
3558
3559     .description{
3560       color:var(--text-secondary-color);
3561     }
3562
3563     #aiModelSettings{
3564       display:flex;
3565       flex-direction:column;
3566       gap:12px;
3567
3568       button{
3569         width:fit-content;
3570       }
3571
3572       &.download{
3573         #deleteModelButton{
3574           display:none;
3575         }
3576       }
3577
3578       &:not(.download){
3579         #downloadModelButton{
3580           display:none;
3581         }
3582       }
3583     }
3584
3585     #automaticAltText,
3586     #altTextEditor{
3587       display:flex;
3588       flex-direction:column;
3589       gap:8px;
3590     }
3591
3592     #createModelDescription,
3593     #aiModelSettings,
3594     #showAltTextDialogDescription{
3595       padding-inline-start:40px;
3596     }
3597
3598     #automaticSettings{
3599       display:flex;
3600       flex-direction:column;
3601       gap:16px;
3602     }
3603   }
3604 }
3605
3606 :root{
3607   --viewer-container-height:0;
3608   --pdfViewer-padding-bottom:0;
3609   --page-margin:1px auto -8px;
3610   --page-border:9px solid transparent;
3611   --spreadHorizontalWrapped-margin-LR:-3.5px;
3612   --loading-icon-delay:400ms;
3613 }
3614
3615 @media screen and (forced-colors: active){
3616   :root{
3617     --pdfViewer-padding-bottom:9px;
3618     --page-margin:8px auto -1px;
3619     --page-border:1px solid CanvasText;
3620     --spreadHorizontalWrapped-margin-LR:3.5px;
3621   }
3622 }
3623
3624 [data-main-rotation="90"]{
3625   transform:rotate(90deg) translateY(-100%);
3626 }
3627 [data-main-rotation="180"]{
3628   transform:rotate(180deg) translate(-100%, -100%);
3629 }
3630 [data-main-rotation="270"]{
3631   transform:rotate(270deg) translateX(-100%);
3632 }
3633
3634 #hiddenCopyElement,
3635 .hiddenCanvasElement{
3636   position:absolute;
3637   top:0;
3638   left:0;
3639   width:0;
3640   height:0;
3641   display:none;
3642 }
3643
3644 .pdfViewer{
3645   --scale-factor:1;
3646   --page-bg-color:unset;
3647
3648   padding-bottom:var(--pdfViewer-padding-bottom);
3649
3650   --hcm-highlight-filter:none;
3651   --hcm-highlight-selected-filter:none;
3652
3653   @media screen and (forced-colors: active){
3654     --hcm-highlight-filter:invert(100%);
3655   }
3656
3657   &.copyAll{
3658     cursor:wait;
3659   }
3660
3661   .canvasWrapper{
3662     overflow:hidden;
3663     width:100%;
3664     height:100%;
3665
3666     canvas{
3667       position:absolute;
3668       top:0;
3669       left:0;
3670       margin:0;
3671       display:block;
3672       width:100%;
3673       height:100%;
3674       contain:content;
3675
3676       .structTree{
3677         contain:strict;
3678       }
3679     }
3680   }
3681 }
3682
3683 .pdfViewer .page{
3684   --scale-round-x:1px;
3685   --scale-round-y:1px;
3686
3687   direction:ltr;
3688   width:816px;
3689   height:1056px;
3690   margin:var(--page-margin);
3691   position:relative;
3692   overflow:visible;
3693   border:var(--page-border);
3694   background-clip:content-box;
3695   background-color:var(--page-bg-color, rgb(255 255 255));
3696 }
3697
3698 .pdfViewer .dummyPage{
3699   position:relative;
3700   width:0;
3701   height:var(--viewer-container-height);
3702 }
3703
3704 .pdfViewer.noUserSelect{
3705   user-select:none;
3706 }
3707
3708 .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
3709 .spread{
3710   margin-inline:3.5px;
3711   text-align:center;
3712 }
3713
3714 .pdfViewer.scrollHorizontal,
3715 .spread{
3716   white-space:nowrap;
3717 }
3718
3719 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
3720   margin-inline:0;
3721 }
3722
3723 .spread :is(.page, .dummyPage),
3724 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
3725   display:inline-block;
3726   vertical-align:middle;
3727 }
3728
3729 .spread .page,
3730 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
3731   margin-inline:var(--spreadHorizontalWrapped-margin-LR);
3732 }
3733
3734 .pdfViewer .page.loadingIcon::after{
3735   position:absolute;
3736   top:0;
3737   left:0;
3738   content:"";
3739   width:100%;
3740   height:100%;
3741   background:url("images/loading-icon.gif") center no-repeat;
3742   display:none;
3743   transition-property:display;
3744   transition-delay:var(--loading-icon-delay);
3745   z-index:5;
3746   contain:strict;
3747 }
3748
3749 .pdfViewer .page.loading::after{
3750   display:block;
3751 }
3752
3753 .pdfViewer .page:not(.loading)::after{
3754   transition-property:none;
3755   display:none;
3756 }
3757
3758 .pdfPresentationMode .pdfViewer{
3759   padding-bottom:0;
3760 }
3761
3762 .pdfPresentationMode .spread{
3763   margin:0;
3764 }
3765
3766 .pdfPresentationMode .pdfViewer .page{
3767   margin:0 auto;
3768   border:2px solid transparent;
3769 }
3770
3771 :root{
3772   --dir-factor:1;
3773
3774   --sidebar-width:200px;
3775   --sidebar-transition-duration:200ms;
3776   --sidebar-transition-timing-function:ease;
3777
3778   --toolbar-height:32px;
3779   --toolbar-horizontal-padding:1px;
3780   --toolbar-vertical-padding:2px;
3781   --icon-size:16px;
3782
3783   --toolbar-icon-opacity:0.7;
3784   --doorhanger-icon-opacity:0.9;
3785   --doorhanger-height:8px;
3786
3787   --main-color:rgb(12 12 13);
3788   --body-bg-color:rgb(212 212 215);
3789   --progressBar-color:rgb(10 132 255);
3790   --progressBar-bg-color:rgb(221 221 222);
3791   --progressBar-blend-color:rgb(116 177 239);
3792   --scrollbar-color:auto;
3793   --scrollbar-bg-color:auto;
3794   --toolbar-icon-bg-color:rgb(0 0 0);
3795   --toolbar-icon-hover-bg-color:rgb(0 0 0);
3796
3797   --sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
3798   --sidebar-toolbar-bg-color:rgb(245 246 247);
3799   --toolbar-bg-color:rgb(249 249 250);
3800   --toolbar-border-color:rgb(184 184 184);
3801   --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
3802   --toolbar-border-bottom:none;
3803   --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
3804   --toolbarSidebar-border-bottom:none;
3805   --button-hover-color:rgb(221 222 223);
3806   --toggled-btn-color:rgb(0 0 0);
3807   --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
3808   --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
3809   --toggled-hover-btn-outline:none;
3810   --dropdown-btn-bg-color:rgb(215 215 219);
3811   --dropdown-btn-border:none;
3812   --separator-color:rgb(0 0 0 / 0.3);
3813   --field-color:rgb(6 6 6);
3814   --field-bg-color:rgb(255 255 255);
3815   --field-border-color:rgb(187 187 188);
3816   --treeitem-color:rgb(0 0 0 / 0.8);
3817   --treeitem-bg-color:rgb(0 0 0 / 0.15);
3818   --treeitem-hover-color:rgb(0 0 0 / 0.9);
3819   --treeitem-selected-color:rgb(0 0 0 / 0.9);
3820   --treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
3821   --thumbnail-hover-color:rgb(0 0 0 / 0.1);
3822   --thumbnail-selected-color:rgb(0 0 0 / 0.2);
3823   --doorhanger-bg-color:rgb(255 255 255);
3824   --doorhanger-border-color:rgb(12 12 13 / 0.2);
3825   --doorhanger-hover-color:rgb(12 12 13);
3826   --doorhanger-hover-bg-color:rgb(237 237 237);
3827   --doorhanger-separator-color:rgb(222 222 222);
3828   --dialog-button-border:none;
3829   --dialog-button-bg-color:rgb(12 12 13 / 0.1);
3830   --dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
3831
3832   --loading-icon:url(images/loading.svg);
3833   --treeitem-expanded-icon:url(images/treeitem-expanded.svg);
3834   --treeitem-collapsed-icon:url(images/treeitem-collapsed.svg);
3835   --toolbarButton-editorFreeText-icon:url(images/toolbarButton-editorFreeText.svg);
3836   --toolbarButton-editorHighlight-icon:url(images/toolbarButton-editorHighlight.svg);
3837   --toolbarButton-editorInk-icon:url(images/toolbarButton-editorInk.svg);
3838   --toolbarButton-editorStamp-icon:url(images/toolbarButton-editorStamp.svg);
3839   --toolbarButton-editorSignature-icon:url(images/toolbarButton-editorSignature.svg);
3840   --toolbarButton-menuArrow-icon:url(images/toolbarButton-menuArrow.svg);
3841   --toolbarButton-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.svg);
3842   --toolbarButton-secondaryToolbarToggle-icon:url(images/toolbarButton-secondaryToolbarToggle.svg);
3843   --toolbarButton-pageUp-icon:url(images/toolbarButton-pageUp.svg);
3844   --toolbarButton-pageDown-icon:url(images/toolbarButton-pageDown.svg);
3845   --toolbarButton-zoomOut-icon:url(images/toolbarButton-zoomOut.svg);
3846   --toolbarButton-zoomIn-icon:url(images/toolbarButton-zoomIn.svg);
3847   --toolbarButton-presentationMode-icon:url(images/toolbarButton-presentationMode.svg);
3848   --toolbarButton-print-icon:url(images/toolbarButton-print.svg);
3849   --toolbarButton-download-icon:url(images/toolbarButton-download.svg);
3850   --toolbarButton-bookmark-icon:url(images/toolbarButton-bookmark.svg);
3851   --toolbarButton-viewThumbnail-icon:url(images/toolbarButton-viewThumbnail.svg);
3852   --toolbarButton-viewOutline-icon:url(images/toolbarButton-viewOutline.svg);
3853   --toolbarButton-viewAttachments-icon:url(images/toolbarButton-viewAttachments.svg);
3854   --toolbarButton-viewLayers-icon:url(images/toolbarButton-viewLayers.svg);
3855   --toolbarButton-currentOutlineItem-icon:url(images/toolbarButton-currentOutlineItem.svg);
3856   --toolbarButton-search-icon:url(images/toolbarButton-search.svg);
3857   --findbarButton-previous-icon:url(images/findbarButton-previous.svg);
3858   --findbarButton-next-icon:url(images/findbarButton-next.svg);
3859   --secondaryToolbarButton-firstPage-icon:url(images/secondaryToolbarButton-firstPage.svg);
3860   --secondaryToolbarButton-lastPage-icon:url(images/secondaryToolbarButton-lastPage.svg);
3861   --secondaryToolbarButton-rotateCcw-icon:url(images/secondaryToolbarButton-rotateCcw.svg);
3862   --secondaryToolbarButton-rotateCw-icon:url(images/secondaryToolbarButton-rotateCw.svg);
3863   --secondaryToolbarButton-selectTool-icon:url(images/secondaryToolbarButton-selectTool.svg);
3864   --secondaryToolbarButton-handTool-icon:url(images/secondaryToolbarButton-handTool.svg);
3865   --secondaryToolbarButton-scrollPage-icon:url(images/secondaryToolbarButton-scrollPage.svg);
3866   --secondaryToolbarButton-scrollVertical-icon:url(images/secondaryToolbarButton-scrollVertical.svg);
3867   --secondaryToolbarButton-scrollHorizontal-icon:url(images/secondaryToolbarButton-scrollHorizontal.svg);
3868   --secondaryToolbarButton-scrollWrapped-icon:url(images/secondaryToolbarButton-scrollWrapped.svg);
3869   --secondaryToolbarButton-spreadNone-icon:url(images/secondaryToolbarButton-spreadNone.svg);
3870   --secondaryToolbarButton-spreadOdd-icon:url(images/secondaryToolbarButton-spreadOdd.svg);
3871   --secondaryToolbarButton-spreadEven-icon:url(images/secondaryToolbarButton-spreadEven.svg);
3872   --secondaryToolbarButton-imageAltTextSettings-icon:var(
3873     --toolbarButton-editorStamp-icon
3874   );
3875   --secondaryToolbarButton-documentProperties-icon:url(images/secondaryToolbarButton-documentProperties.svg);
3876   --editorParams-stampAddImage-icon:url(images/toolbarButton-zoomIn.svg);
3877 }
3878
3879 :root:dir(rtl){
3880   --dir-factor:-1;
3881 }
3882
3883 @media (prefers-color-scheme: dark){
3884   :root{
3885     --main-color:rgb(249 249 250);
3886     --body-bg-color:rgb(42 42 46);
3887     --progressBar-color:rgb(0 96 223);
3888     --progressBar-bg-color:rgb(40 40 43);
3889     --progressBar-blend-color:rgb(20 68 133);
3890     --scrollbar-color:rgb(121 121 123);
3891     --scrollbar-bg-color:rgb(35 35 39);
3892     --toolbar-icon-bg-color:rgb(255 255 255);
3893     --toolbar-icon-hover-bg-color:rgb(255 255 255);
3894
3895     --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
3896     --sidebar-toolbar-bg-color:rgb(50 50 52);
3897     --toolbar-bg-color:rgb(56 56 61);
3898     --toolbar-border-color:rgb(12 12 13);
3899     --button-hover-color:rgb(102 102 103);
3900     --toggled-btn-color:rgb(255 255 255);
3901     --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
3902     --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
3903     --dropdown-btn-bg-color:rgb(74 74 79);
3904     --separator-color:rgb(0 0 0 / 0.3);
3905     --field-color:rgb(250 250 250);
3906     --field-bg-color:rgb(64 64 68);
3907     --field-border-color:rgb(115 115 115);
3908     --treeitem-color:rgb(255 255 255 / 0.8);
3909     --treeitem-bg-color:rgb(255 255 255 / 0.15);
3910     --treeitem-hover-color:rgb(255 255 255 / 0.9);
3911     --treeitem-selected-color:rgb(255 255 255 / 0.9);
3912     --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
3913     --thumbnail-hover-color:rgb(255 255 255 / 0.1);
3914     --thumbnail-selected-color:rgb(255 255 255 / 0.2);
3915     --doorhanger-bg-color:rgb(74 74 79);
3916     --doorhanger-border-color:rgb(39 39 43);
3917     --doorhanger-hover-color:rgb(249 249 250);
3918     --doorhanger-hover-bg-color:rgb(93 94 98);
3919     --doorhanger-separator-color:rgb(92 92 97);
3920     --dialog-button-bg-color:rgb(92 92 97);
3921     --dialog-button-hover-bg-color:rgb(115 115 115);
3922   }
3923 }
3924
3925 @media screen and (forced-colors: active){
3926   :root{
3927     --button-hover-color:Highlight;
3928     --doorhanger-hover-bg-color:Highlight;
3929     --toolbar-icon-opacity:1;
3930     --toolbar-icon-bg-color:ButtonText;
3931     --toolbar-icon-hover-bg-color:ButtonFace;
3932     --toggled-hover-active-btn-color:ButtonText;
3933     --toggled-hover-btn-outline:2px solid ButtonBorder;
3934     --toolbar-border-color:CanvasText;
3935     --toolbar-border-bottom:1px solid var(--toolbar-border-color);
3936     --toolbar-box-shadow:none;
3937     --toggled-btn-color:HighlightText;
3938     --toggled-btn-bg-color:LinkText;
3939     --doorhanger-hover-color:ButtonFace;
3940     --doorhanger-border-color-whcm:1px solid ButtonText;
3941     --doorhanger-triangle-opacity-whcm:0;
3942     --dialog-button-border:1px solid Highlight;
3943     --dialog-button-hover-bg-color:Highlight;
3944     --dialog-button-hover-color:ButtonFace;
3945     --dropdown-btn-border:1px solid ButtonText;
3946     --field-border-color:ButtonText;
3947     --main-color:CanvasText;
3948     --separator-color:GrayText;
3949     --doorhanger-separator-color:GrayText;
3950     --toolbarSidebar-box-shadow:none;
3951     --toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
3952   }
3953 }
3954
3955 @media screen and (prefers-reduced-motion: reduce){
3956   :root{
3957     --sidebar-transition-duration:0;
3958   }
3959 }
3960
3961 @keyframes progressIndeterminate{
3962   0%{
3963     transform:translateX(calc(-142px * var(--dir-factor)));
3964   }
3965
3966   100%{
3967     transform:translateX(0);
3968   }
3969 }
3970
3971 html{
3972   &[data-toolbar-density="compact"]{
3973     --toolbar-height:30px;
3974   }
3975   &[data-toolbar-density="touch"]{
3976     --toolbar-height:44px;
3977   }
3978 }
3979
3980 html,
3981 body{
3982   height:100%;
3983   width:100%;
3984 }
3985
3986 body{
3987   margin:0;
3988   background-color:var(--body-bg-color);
3989   scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
3990
3991   &.wait::before{
3992     content:"";
3993     position:fixed;
3994     width:100%;
3995     height:100%;
3996     z-index:100000;
3997     cursor:wait;
3998   }
3999 }
4000
4001 .hidden,
4002 [hidden]{
4003   display:none !important;
4004 }
4005
4006 #viewerContainer.pdfPresentationMode:fullscreen{
4007   top:0;
4008   background-color:rgb(0 0 0);
4009   width:100%;
4010   height:100%;
4011   overflow:hidden;
4012   cursor:none;
4013   user-select:none;
4014 }
4015
4016 .pdfPresentationMode:fullscreen section:not([data-internal-link]){
4017   pointer-events:none;
4018 }
4019
4020 .pdfPresentationMode:fullscreen .textLayer span{
4021   cursor:none;
4022 }
4023
4024 .pdfPresentationMode.pdfPresentationModeControls > *,
4025 .pdfPresentationMode.pdfPresentationModeControls .textLayer span{
4026   cursor:default;
4027 }
4028
4029 #outerContainer{
4030   width:100%;
4031   height:100%;
4032   position:relative;
4033   margin:0;
4034 }
4035
4036 #sidebarContainer{
4037   position:absolute;
4038   inset-block:var(--toolbar-height) 0;
4039   inset-inline-start:calc(-1 * var(--sidebar-width));
4040   width:var(--sidebar-width);
4041   visibility:hidden;
4042   z-index:1;
4043   font:message-box;
4044   border-top:1px solid transparent;
4045   border-inline-end:var(--doorhanger-border-color-whcm);
4046   transition-property:inset-inline-start;
4047   transition-duration:var(--sidebar-transition-duration);
4048   transition-timing-function:var(--sidebar-transition-timing-function);
4049 }
4050
4051 #outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
4052   visibility:visible;
4053 }
4054
4055 #outerContainer.sidebarOpen #sidebarContainer{
4056   inset-inline-start:0;
4057 }
4058
4059 #mainContainer{
4060   position:absolute;
4061   inset:0;
4062   min-width:350px;
4063   margin:0;
4064   display:flex;
4065   flex-direction:column;
4066 }
4067
4068 #sidebarContent{
4069   inset-block:var(--toolbar-height) 0;
4070   inset-inline-start:0;
4071   overflow:auto;
4072   position:absolute;
4073   width:100%;
4074   box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
4075 }
4076
4077 #viewerContainer{
4078   overflow:auto;
4079   position:absolute;
4080   inset:var(--toolbar-height) 0 0;
4081   outline:none;
4082   z-index:0;
4083 }
4084
4085 #viewerContainer:not(.pdfPresentationMode){
4086   transition-duration:var(--sidebar-transition-duration);
4087   transition-timing-function:var(--sidebar-transition-timing-function);
4088 }
4089
4090 #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
4091   inset-inline-start:var(--sidebar-width);
4092   transition-property:inset-inline-start;
4093 }
4094
4095 #sidebarContainer :is(input, button, select){
4096   font:message-box;
4097 }
4098
4099 .toolbar{
4100   z-index:2;
4101 }
4102
4103 #toolbarSidebar{
4104   width:100%;
4105   height:var(--toolbar-height);
4106   background-color:var(--sidebar-toolbar-bg-color);
4107   box-shadow:var(--toolbarSidebar-box-shadow);
4108   border-bottom:var(--toolbarSidebar-border-bottom);
4109   padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding);
4110   justify-content:space-between;
4111
4112   #toolbarSidebarLeft{
4113     width:auto;
4114     height:100%;
4115
4116     #viewThumbnail::before{
4117       mask-image:var(--toolbarButton-viewThumbnail-icon);
4118     }
4119
4120     #viewOutline::before{
4121       mask-image:var(--toolbarButton-viewOutline-icon);
4122       transform:scaleX(var(--dir-factor));
4123     }
4124
4125     #viewAttachments::before{
4126       mask-image:var(--toolbarButton-viewAttachments-icon);
4127     }
4128
4129     #viewLayers::before{
4130       mask-image:var(--toolbarButton-viewLayers-icon);
4131     }
4132   }
4133
4134   #toolbarSidebarRight{
4135     width:auto;
4136     height:100%;
4137     padding-inline-end:2px;
4138   }
4139 }
4140
4141 #sidebarResizer{
4142   position:absolute;
4143   inset-block:0;
4144   inset-inline-end:-6px;
4145   width:6px;
4146   z-index:200;
4147   cursor:ew-resize;
4148 }
4149
4150 #outerContainer.sidebarOpen #loadingBar{
4151   inset-inline-start:var(--sidebar-width);
4152 }
4153
4154 #outerContainer.sidebarResizing
4155   :is(#sidebarContainer, #viewerContainer, #loadingBar){
4156   transition-duration:0s;
4157 }
4158
4159 .doorHanger,
4160 .doorHangerRight{
4161   border-radius:2px;
4162   box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
4163   border:var(--doorhanger-border-color-whcm);
4164   background-color:var(--doorhanger-bg-color);
4165   inset-block-start:calc(100% + var(--doorhanger-height) - 2px);
4166
4167   &::after,
4168   &::before{
4169     bottom:100%;
4170     border-style:solid;
4171     border-color:transparent;
4172     content:"";
4173     height:0;
4174     width:0;
4175     position:absolute;
4176     pointer-events:none;
4177     opacity:var(--doorhanger-triangle-opacity-whcm);
4178   }
4179
4180   &::before{
4181     border-width:calc(var(--doorhanger-height) + 2px);
4182     border-bottom-color:var(--doorhanger-border-color);
4183   }
4184
4185   &::after{
4186     border-width:var(--doorhanger-height);
4187   }
4188 }
4189
4190 .doorHangerRight{
4191   inset-inline-end:calc(50% - var(--doorhanger-height) - 1px);
4192
4193   &::before{
4194     inset-inline-end:-1px;
4195   }
4196
4197   &::after{
4198     border-bottom-color:var(--doorhanger-bg-color);
4199     inset-inline-end:1px;
4200   }
4201 }
4202
4203 .doorHanger{
4204   inset-inline-start:calc(50% - var(--doorhanger-height) - 1px);
4205
4206   &::before{
4207     inset-inline-start:-1px;
4208   }
4209
4210   &::after{
4211     border-bottom-color:var(--toolbar-bg-color);
4212     inset-inline-start:1px;
4213   }
4214 }
4215
4216 .dialogButton{
4217   border:none;
4218   background:none;
4219   width:28px;
4220   height:28px;
4221   outline:none;
4222 }
4223
4224 .dialogButton:is(:hover, :focus-visible){
4225   background-color:var(--dialog-button-hover-bg-color);
4226 }
4227
4228 .dialogButton:is(:hover, :focus-visible) > span{
4229   color:var(--dialog-button-hover-color);
4230 }
4231
4232 .splitToolbarButtonSeparator{
4233   float:inline-start;
4234   width:0;
4235   height:62%;
4236   border-left:1px solid var(--separator-color);
4237   border-right:none;
4238 }
4239
4240 .dialogButton{
4241   min-width:16px;
4242   margin:2px 1px;
4243   padding:2px 6px 0;
4244   border:none;
4245   border-radius:2px;
4246   color:var(--main-color);
4247   font-size:12px;
4248   line-height:14px;
4249   user-select:none;
4250   cursor:default;
4251   box-sizing:border-box;
4252 }
4253
4254 .treeItemToggler::before{
4255   position:absolute;
4256   display:inline-block;
4257   width:16px;
4258   height:16px;
4259
4260   content:"";
4261   background-color:var(--toolbar-icon-bg-color);
4262   mask-size:cover;
4263 }
4264
4265 #sidebarToggleButton::before{
4266   mask-image:var(--toolbarButton-sidebarToggle-icon);
4267   transform:scaleX(var(--dir-factor));
4268 }
4269
4270 #secondaryToolbarToggleButton::before{
4271   mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
4272   transform:scaleX(var(--dir-factor));
4273 }
4274
4275 #previous::before{
4276   mask-image:var(--toolbarButton-pageUp-icon);
4277 }
4278
4279 #next::before{
4280   mask-image:var(--toolbarButton-pageDown-icon);
4281 }
4282
4283 #zoomOutButton::before{
4284   mask-image:var(--toolbarButton-zoomOut-icon);
4285 }
4286
4287 #zoomInButton::before{
4288   mask-image:var(--toolbarButton-zoomIn-icon);
4289 }
4290
4291 #presentationMode::before{
4292   mask-image:var(--toolbarButton-presentationMode-icon);
4293 }
4294
4295 #editorFreeTextButton::before{
4296   mask-image:var(--toolbarButton-editorFreeText-icon);
4297 }
4298
4299 #editorHighlightButton::before{
4300   mask-image:var(--toolbarButton-editorHighlight-icon);
4301 }
4302
4303 #editorInkButton::before{
4304   mask-image:var(--toolbarButton-editorInk-icon);
4305 }
4306
4307 #editorStampButton::before{
4308   mask-image:var(--toolbarButton-editorStamp-icon);
4309 }
4310
4311 #editorSignatureButton::before{
4312   mask-image:var(--toolbarButton-editorSignature-icon);
4313 }
4314
4315 #printButton::before{
4316   mask-image:var(--toolbarButton-print-icon);
4317 }
4318
4319 #downloadButton::before{
4320   mask-image:var(--toolbarButton-download-icon);
4321 }
4322
4323 #viewBookmark::before{
4324   mask-image:var(--toolbarButton-bookmark-icon);
4325 }
4326
4327 #currentOutlineItem::before{
4328   mask-image:var(--toolbarButton-currentOutlineItem-icon);
4329   transform:scaleX(var(--dir-factor));
4330 }
4331
4332 #viewFindButton::before{
4333   mask-image:var(--toolbarButton-search-icon);
4334 }
4335
4336 .pdfSidebarNotification::after{
4337   position:absolute;
4338   display:inline-block;
4339   top:2px;
4340   inset-inline-end:2px;
4341   content:"";
4342   background-color:rgb(112 219 85);
4343   height:9px;
4344   width:9px;
4345   border-radius:50%;
4346 }
4347
4348 .verticalToolbarSeparator{
4349   display:block;
4350   margin-inline:2px;
4351   width:0;
4352   height:80%;
4353   border-left:1px solid var(--separator-color);
4354   border-right:none;
4355   box-sizing:border-box;
4356 }
4357
4358 .horizontalToolbarSeparator{
4359   display:block;
4360   margin:6px 0;
4361   border-top:1px solid var(--doorhanger-separator-color);
4362   border-bottom:none;
4363   height:0;
4364   width:100%;
4365 }
4366
4367 .toggleButton{
4368   display:inline;
4369
4370   &:has(> input:checked){
4371     color:var(--toggled-btn-color);
4372     background-color:var(--toggled-btn-bg-color);
4373   }
4374
4375   &:is(:hover, :has(> input:focus-visible)){
4376     color:var(--toggled-btn-color);
4377     background-color:var(--button-hover-color);
4378   }
4379
4380   & > input{
4381     position:absolute;
4382     top:50%;
4383     left:50%;
4384     opacity:0;
4385     width:0;
4386     height:0;
4387   }
4388 }
4389
4390 .toolbarField{
4391   padding:4px 7px;
4392   margin:3px 0;
4393   border-radius:2px;
4394   background-color:var(--field-bg-color);
4395   background-clip:padding-box;
4396   border:1px solid var(--field-border-color);
4397   box-shadow:none;
4398   color:var(--field-color);
4399   font-size:12px;
4400   line-height:16px;
4401   outline:none;
4402
4403   &:focus{
4404     border-color:#0a84ff;
4405   }
4406 }
4407
4408 #pageNumber{
4409   -moz-appearance:textfield;
4410   text-align:end;
4411   width:40px;
4412   background-size:0 0;
4413   transition-property:none;
4414
4415   .loadingInput:has(> &.loading)::after{
4416     display:inline;
4417     visibility:visible;
4418
4419     transition-property:visibility;
4420     transition-delay:var(--loading-icon-delay);
4421   }
4422 }
4423
4424 .loadingInput{
4425   position:relative;
4426
4427   &::after{
4428     position:absolute;
4429     visibility:hidden;
4430     display:none;
4431     width:var(--icon-size);
4432     height:var(--icon-size);
4433
4434     content:"";
4435     background-color:var(--toolbar-icon-bg-color);
4436     mask-size:cover;
4437     mask-image:var(--loading-icon);
4438   }
4439
4440   &.start::after{
4441     inset-inline-start:4px;
4442   }
4443
4444   &.end::after{
4445     inset-inline-end:4px;
4446   }
4447 }
4448
4449 #thumbnailView,
4450 #outlineView,
4451 #attachmentsView,
4452 #layersView{
4453   position:absolute;
4454   width:calc(100% - 8px);
4455   inset-block:0;
4456   padding:4px 4px 0;
4457   overflow:auto;
4458   user-select:none;
4459 }
4460
4461 #thumbnailView{
4462   width:calc(100% - 60px);
4463   padding:10px 30px 0;
4464 }
4465
4466 #thumbnailView > a:is(:active, :focus){
4467   outline:0;
4468 }
4469
4470 .thumbnail{
4471   --thumbnail-width:0;
4472   --thumbnail-height:0;
4473
4474   float:inline-start;
4475   width:var(--thumbnail-width);
4476   height:var(--thumbnail-height);
4477   margin:0 10px 5px;
4478   padding:1px;
4479   border:7px solid transparent;
4480   border-radius:2px;
4481 }
4482
4483 #thumbnailView > a:last-of-type > .thumbnail{
4484   margin-bottom:10px;
4485 }
4486
4487 a:focus > .thumbnail,
4488 .thumbnail:hover{
4489   border-color:var(--thumbnail-hover-color);
4490 }
4491
4492 .thumbnail.selected{
4493   border-color:var(--thumbnail-selected-color) !important;
4494 }
4495
4496 .thumbnailImage{
4497   width:var(--thumbnail-width);
4498   height:var(--thumbnail-height);
4499   opacity:0.9;
4500 }
4501
4502 a:focus > .thumbnail > .thumbnailImage,
4503 .thumbnail:hover > .thumbnailImage{
4504   opacity:0.95;
4505 }
4506
4507 .thumbnail.selected > .thumbnailImage{
4508   opacity:1 !important;
4509 }
4510
4511 .thumbnail:not([data-loaded]) > .thumbnailImage{
4512   width:calc(var(--thumbnail-width) - 2px);
4513   height:calc(var(--thumbnail-height) - 2px);
4514   border:1px dashed rgb(132 132 132);
4515 }
4516
4517 .treeWithDeepNesting > .treeItem,
4518 .treeItem > .treeItems{
4519   margin-inline-start:20px;
4520 }
4521
4522 .treeItem > a{
4523   text-decoration:none;
4524   display:inline-block;
4525   min-width:calc(100% - 4px);
4526   height:auto;
4527   margin-bottom:1px;
4528   padding:2px 0 5px;
4529   padding-inline-start:4px;
4530   border-radius:2px;
4531   color:var(--treeitem-color);
4532   font-size:13px;
4533   line-height:15px;
4534   user-select:none;
4535   white-space:normal;
4536   cursor:pointer;
4537 }
4538
4539 #layersView .treeItem > a *{
4540   cursor:pointer;
4541 }
4542
4543 #layersView .treeItem > a > label{
4544   padding-inline-start:4px;
4545 }
4546
4547 #layersView .treeItem > a > label > input{
4548   float:inline-start;
4549   margin-top:1px;
4550 }
4551
4552 .treeItemToggler{
4553   position:relative;
4554   float:inline-start;
4555   height:0;
4556   width:0;
4557   color:rgb(255 255 255 / 0.5);
4558 }
4559
4560 .treeItemToggler::before{
4561   inset-inline-end:4px;
4562   mask-image:var(--treeitem-expanded-icon);
4563 }
4564
4565 .treeItemToggler.treeItemsHidden::before{
4566   mask-image:var(--treeitem-collapsed-icon);
4567   transform:scaleX(var(--dir-factor));
4568 }
4569
4570 .treeItemToggler.treeItemsHidden ~ .treeItems{
4571   display:none;
4572 }
4573
4574 .treeItem.selected > a{
4575   background-color:var(--treeitem-selected-bg-color);
4576   color:var(--treeitem-selected-color);
4577 }
4578
4579 .treeItemToggler:hover,
4580 .treeItemToggler:hover + a,
4581 .treeItemToggler:hover ~ .treeItems,
4582 .treeItem > a:hover{
4583   background-color:var(--treeitem-bg-color);
4584   background-clip:padding-box;
4585   border-radius:2px;
4586   color:var(--treeitem-hover-color);
4587 }
4588
4589 #outlineOptionsContainer{
4590   display:none;
4591
4592   #sidebarContainer:has(#outlineView:not(.hidden)) &{
4593     display:inline flex;
4594   }
4595 }
4596
4597 .dialogButton{
4598   width:auto;
4599   margin:3px 4px 2px !important;
4600   padding:2px 11px;
4601   color:var(--main-color);
4602   background-color:var(--dialog-button-bg-color);
4603   border:var(--dialog-button-border) !important;
4604 }
4605
4606 dialog{
4607   margin:auto;
4608   padding:15px;
4609   border-spacing:4px;
4610   color:var(--main-color);
4611   font:message-box;
4612   font-size:12px;
4613   line-height:14px;
4614   background-color:var(--doorhanger-bg-color);
4615   border:1px solid rgb(0 0 0 / 0.5);
4616   border-radius:4px;
4617   box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
4618 }
4619
4620 dialog::backdrop{
4621   background-color:rgb(0 0 0 / 0.2);
4622 }
4623
4624 dialog > .row{
4625   display:table-row;
4626 }
4627
4628 dialog > .row > *{
4629   display:table-cell;
4630 }
4631
4632 dialog .toolbarField{
4633   margin:5px 0;
4634 }
4635
4636 dialog .separator{
4637   display:block;
4638   margin:4px 0;
4639   height:0;
4640   width:100%;
4641   border-top:1px solid var(--separator-color);
4642   border-bottom:none;
4643 }
4644
4645 dialog .buttonRow{
4646   text-align:center;
4647   vertical-align:middle;
4648 }
4649
4650 dialog :link{
4651   color:rgb(255 255 255);
4652 }
4653
4654 #passwordDialog{
4655   text-align:center;
4656 }
4657
4658 #passwordDialog .toolbarField{
4659   width:200px;
4660 }
4661
4662 #documentPropertiesDialog{
4663   text-align:left;
4664 }
4665
4666 #documentPropertiesDialog .row > *{
4667   min-width:100px;
4668   text-align:start;
4669 }
4670
4671 #documentPropertiesDialog .row > span{
4672   width:125px;
4673   word-wrap:break-word;
4674 }
4675
4676 #documentPropertiesDialog .row > p{
4677   max-width:225px;
4678   word-wrap:break-word;
4679 }
4680
4681 #documentPropertiesDialog .buttonRow{
4682   margin-top:10px;
4683 }
4684
4685 .grab-to-pan-grab{
4686   cursor:grab !important;
4687 }
4688
4689 .grab-to-pan-grab
4690   *:not(input):not(textarea):not(button):not(select):not(:link){
4691   cursor:inherit !important;
4692 }
4693
4694 .grab-to-pan-grab:active,
4695 .grab-to-pan-grabbing{
4696   cursor:grabbing !important;
4697 }
4698
4699 .grab-to-pan-grabbing{
4700   position:fixed;
4701   background:rgb(0 0 0 / 0);
4702   display:block;
4703   inset:0;
4704   overflow:hidden;
4705   z-index:50000;
4706 }
4707
4708 .toolbarButton{
4709   height:100%;
4710   aspect-ratio:1;
4711   display:flex;
4712   align-items:center;
4713   justify-content:center;
4714   background:none;
4715   border:none;
4716   color:var(--main-color);
4717   outline:none;
4718   border-radius:2px;
4719   box-sizing:border-box;
4720   font:message-box;
4721   flex:none;
4722   position:relative;
4723   padding:0;
4724
4725   > span{
4726     display:inline-block;
4727     width:0;
4728     height:0;
4729     overflow:hidden;
4730   }
4731
4732   &::before{
4733     opacity:var(--toolbar-icon-opacity);
4734     display:inline-block;
4735     width:var(--icon-size);
4736     height:var(--icon-size);
4737     content:"";
4738     background-color:var(--toolbar-icon-bg-color);
4739     mask-size:cover;
4740     mask-position:center;
4741   }
4742
4743   &.toggled{
4744     background-color:var(--toggled-btn-bg-color);
4745     color:var(--toggled-btn-color);
4746
4747     &::before{
4748       background-color:var(--toggled-btn-color);
4749     }
4750
4751     &:hover{
4752       outline:var(--toggled-hover-btn-outline) !important;
4753
4754       &:active{
4755         background-color:var(--toggled-hover-active-btn-color);
4756       }
4757     }
4758   }
4759
4760   &:is(:hover, :focus-visible){
4761     background-color:var(--button-hover-color);
4762
4763     &::before{
4764       background-color:var(--toolbar-icon-hover-bg-color);
4765     }
4766   }
4767
4768   &:is([disabled="disabled"], [disabled]){
4769     opacity:0.5;
4770     pointer-events:none;
4771   }
4772
4773   &.labeled{
4774     width:100%;
4775     min-height:var(--menuitem-height);
4776     justify-content:flex-start;
4777     gap:8px;
4778     padding-inline-start:12px;
4779     aspect-ratio:unset;
4780     text-align:start;
4781     white-space:normal;
4782     cursor:default;
4783
4784     &:is(a){
4785       text-decoration:none;
4786
4787       &[href="#"]{
4788         opacity:0.5;
4789         pointer-events:none;
4790       }
4791     }
4792
4793     &::before{
4794       opacity:var(--doorhanger-icon-opacity);
4795     }
4796
4797     &:is(:hover, :focus-visible){
4798       background-color:var(--doorhanger-hover-bg-color);
4799       color:var(--doorhanger-hover-color);
4800     }
4801
4802     > span{
4803       display:inline-block;
4804       width:max-content;
4805       height:auto;
4806     }
4807   }
4808 }
4809
4810 .toolbarButtonWithContainer{
4811   height:100%;
4812   aspect-ratio:1;
4813   display:inline-block;
4814   position:relative;
4815   flex:none;
4816
4817   > .toolbarButton{
4818     width:100%;
4819     height:100%;
4820   }
4821
4822   .menu{
4823     padding-block:5px;
4824   }
4825
4826   .menuContainer{
4827     width:100%;
4828     height:auto;
4829     max-height:calc(
4830       var(--viewer-container-height) - var(--toolbar-height) -
4831         var(--doorhanger-height)
4832     );
4833     display:flex;
4834     flex-direction:column;
4835     box-sizing:border-box;
4836     overflow-y:auto;
4837   }
4838
4839   .editorParamsToolbar{
4840     height:auto;
4841     width:220px;
4842     position:absolute;
4843     z-index:30000;
4844     cursor:default;
4845
4846     :is(#editorStampAddImage, #editorSignatureAddSignature)::before{
4847       mask-image:var(--editorParams-stampAddImage-icon);
4848     }
4849
4850     .editorParamsLabel{
4851       flex:none;
4852       font:menu;
4853       font-size:13px;
4854       font-style:normal;
4855       font-weight:400;
4856       line-height:150%;
4857       color:var(--main-color);
4858       width:fit-content;
4859       inset-inline-start:0;
4860     }
4861
4862     .editorParamsToolbarContainer{
4863       width:100%;
4864       height:auto;
4865       display:flex;
4866       flex-direction:column;
4867       box-sizing:border-box;
4868       padding-inline:10px;
4869       padding-block:10px;
4870
4871       > .editorParamsSetter{
4872         min-height:26px;
4873         display:flex;
4874         align-items:center;
4875         justify-content:space-between;
4876       }
4877
4878       .editorParamsColor{
4879         width:32px;
4880         height:32px;
4881         flex:none;
4882         padding:0;
4883       }
4884
4885       .editorParamsSlider{
4886         background-color:transparent;
4887         width:90px;
4888         flex:0 1 0;
4889         font:message-box;
4890
4891         &::-moz-range-progress{
4892           background-color:black;
4893         }
4894
4895         &::-moz-range-track{
4896           background-color:black;
4897         }
4898
4899         &::-moz-range-thumb{
4900           background-color:white;
4901         }
4902       }
4903     }
4904   }
4905 }
4906
4907 #secondaryToolbar{
4908   height:auto;
4909   width:220px;
4910   position:absolute;
4911   z-index:30000;
4912   cursor:default;
4913   min-height:26px;
4914   max-height:calc(var(--viewer-container-height) - 40px);
4915
4916   #secondaryToolbarButtonContainer{
4917
4918     #secondaryPrint::before{
4919       mask-image:var(--toolbarButton-print-icon);
4920     }
4921
4922     #secondaryDownload::before{
4923       mask-image:var(--toolbarButton-download-icon);
4924     }
4925
4926     #presentationMode::before{
4927       mask-image:var(--toolbarButton-presentationMode-icon);
4928     }
4929
4930     #viewBookmark::before{
4931       mask-image:var(--toolbarButton-bookmark-icon);
4932     }
4933
4934     #firstPage::before{
4935       mask-image:var(--secondaryToolbarButton-firstPage-icon);
4936     }
4937
4938     #lastPage::before{
4939       mask-image:var(--secondaryToolbarButton-lastPage-icon);
4940     }
4941
4942     #pageRotateCcw::before{
4943       mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
4944     }
4945
4946     #pageRotateCw::before{
4947       mask-image:var(--secondaryToolbarButton-rotateCw-icon);
4948     }
4949
4950     #cursorSelectTool::before{
4951       mask-image:var(--secondaryToolbarButton-selectTool-icon);
4952     }
4953
4954     #cursorHandTool::before{
4955       mask-image:var(--secondaryToolbarButton-handTool-icon);
4956     }
4957
4958     #scrollPage::before{
4959       mask-image:var(--secondaryToolbarButton-scrollPage-icon);
4960     }
4961
4962     #scrollVertical::before{
4963       mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
4964     }
4965
4966     #scrollHorizontal::before{
4967       mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
4968     }
4969
4970     #scrollWrapped::before{
4971       mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
4972     }
4973
4974     #spreadNone::before{
4975       mask-image:var(--secondaryToolbarButton-spreadNone-icon);
4976     }
4977
4978     #spreadOdd::before{
4979       mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
4980     }
4981
4982     #spreadEven::before{
4983       mask-image:var(--secondaryToolbarButton-spreadEven-icon);
4984     }
4985
4986     #imageAltTextSettings::before{
4987       mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon);
4988     }
4989
4990     #documentProperties::before{
4991       mask-image:var(--secondaryToolbarButton-documentProperties-icon);
4992     }
4993   }
4994 }
4995
4996 #findbar{
4997   --input-horizontal-padding:4px;
4998   --findbar-padding:2px;
4999
5000   width:max-content;
5001   max-width:90vw;
5002   min-height:var(--toolbar-height);
5003   height:auto;
5004   position:absolute;
5005   z-index:30000;
5006   cursor:default;
5007   padding:0;
5008   min-width:300px;
5009   background-color:var(--toolbar-bg-color);
5010   box-sizing:border-box;
5011   flex-wrap:wrap;
5012   justify-content:flex-start;
5013
5014   > *{
5015     height:var(--toolbar-height);
5016     padding:var(--findbar-padding);
5017   }
5018
5019   #findInputContainer{
5020     margin-inline-start:2px;
5021
5022     #findPreviousButton::before{
5023       mask-image:var(--findbarButton-previous-icon);
5024     }
5025
5026     #findNextButton::before{
5027       mask-image:var(--findbarButton-next-icon);
5028     }
5029
5030     #findInput{
5031       width:200px;
5032       padding:5px var(--input-horizontal-padding);
5033
5034       &::placeholder{
5035         font-style:normal;
5036       }
5037
5038       .loadingInput:has(> &[data-status="pending"])::after{
5039         display:inline;
5040         visibility:visible;
5041         inset-inline-end:calc(var(--input-horizontal-padding) + 1px);
5042       }
5043
5044       &[data-status="notFound"]{
5045         background-color:rgb(255 102 102);
5046       }
5047     }
5048   }
5049
5050   #findbarMessageContainer{
5051     display:none;
5052     gap:4px;
5053
5054     &:has(> :is(#findResultsCount, #findMsg):not(:empty)){
5055       display:inline flex;
5056     }
5057
5058     #findResultsCount{
5059       background-color:rgb(217 217 217);
5060       color:rgb(82 82 82);
5061       padding-block:4px;
5062
5063       &:empty{
5064         display:none;
5065       }
5066     }
5067
5068     #findMsg{
5069       &[data-status="notFound"]{
5070         font-weight:bold;
5071       }
5072
5073       &:empty{
5074         display:none;
5075       }
5076     }
5077   }
5078
5079   &.wrapContainers{
5080     flex-direction:column;
5081     align-items:flex-start;
5082     height:max-content;
5083
5084     .toolbarLabel{
5085       margin:0 4px;
5086     }
5087
5088     #findbarMessageContainer{
5089       flex-wrap:wrap;
5090       flex-flow:column nowrap;
5091       align-items:flex-start;
5092       height:max-content;
5093
5094       #findResultsCount{
5095         height:calc(var(--toolbar-height) - 2 * var(--findbar-padding));
5096       }
5097
5098       #findMsg{
5099         min-height:var(--toolbar-height);
5100       }
5101     }
5102   }
5103 }
5104
5105 @page{
5106   margin:0;
5107 }
5108
5109 #printContainer{
5110   display:none;
5111 }
5112
5113 @media print{
5114   body{
5115     background:rgb(0 0 0 / 0) none;
5116   }
5117
5118   body[data-pdfjsprinting] #outerContainer{
5119     display:none;
5120   }
5121
5122   body[data-pdfjsprinting] #printContainer{
5123     display:block;
5124   }
5125
5126   #printContainer{
5127     height:100%;
5128   }
5129   #printContainer > .printedPage{
5130     page-break-after:always;
5131     page-break-inside:avoid;
5132     height:100%;
5133     width:100%;
5134
5135     display:flex;
5136     flex-direction:column;
5137     justify-content:center;
5138     align-items:center;
5139   }
5140
5141   #printContainer > .xfaPrintedPage .xfaPage{
5142     position:absolute;
5143   }
5144
5145   #printContainer > .xfaPrintedPage{
5146     page-break-after:always;
5147     page-break-inside:avoid;
5148     width:100%;
5149     height:100%;
5150     position:relative;
5151   }
5152
5153   #printContainer > .printedPage :is(canvas, img){
5154     max-width:100%;
5155     max-height:100%;
5156
5157     direction:ltr;
5158     display:block;
5159   }
5160 }
5161
5162 .visibleMediumView{
5163   display:none !important;
5164 }
5165
5166 .toolbarLabel{
5167   width:max-content;
5168   min-width:16px;
5169   height:100%;
5170   padding-inline:4px;
5171   margin:2px;
5172   border-radius:2px;
5173   color:var(--main-color);
5174   font-size:12px;
5175   line-height:14px;
5176   text-align:left;
5177   user-select:none;
5178   cursor:default;
5179   box-sizing:border-box;
5180
5181   display:inline flex;
5182   flex-direction:column;
5183   align-items:center;
5184   justify-content:center;
5185
5186   > label{
5187     width:100%;
5188   }
5189 }
5190
5191 .toolbarHorizontalGroup{
5192   height:100%;
5193   display:inline flex;
5194   flex-direction:row;
5195   align-items:center;
5196   justify-content:space-between;
5197   gap:1px;
5198   box-sizing:border-box;
5199 }
5200
5201 .dropdownToolbarButton{
5202   display:inline flex;
5203   flex-direction:row;
5204   align-items:center;
5205   justify-content:center;
5206   position:relative;
5207
5208   width:fit-content;
5209   min-width:140px;
5210   padding:0;
5211   background-color:var(--dropdown-btn-bg-color);
5212   border:var(--dropdown-btn-border);
5213   border-radius:2px;
5214   color:var(--main-color);
5215   font-size:12px;
5216   line-height:14px;
5217   user-select:none;
5218   cursor:default;
5219   box-sizing:border-box;
5220   outline:none;
5221
5222   &:hover{
5223     background-color:var(--button-hover-color);
5224   }
5225
5226   > select{
5227     appearance:none;
5228     width:inherit;
5229     min-width:inherit;
5230     height:28px;
5231     font:message-box;
5232     font-size:12px;
5233     color:var(--main-color);
5234     margin:0;
5235     padding-block:1px 2px;
5236     padding-inline:6px 38px;
5237     border:none;
5238     outline:none;
5239     background-color:var(--dropdown-btn-bg-color);
5240
5241     > option{
5242       background:var(--doorhanger-bg-color);
5243       color:var(--main-color);
5244     }
5245
5246     &:is(:hover, :focus-visible){
5247       background-color:var(--button-hover-color);
5248       color:var(--toggled-btn-color);
5249     }
5250   }
5251
5252   &::after{
5253     position:absolute;
5254     display:inline;
5255     width:var(--icon-size);
5256     height:var(--icon-size);
5257
5258     content:"";
5259     background-color:var(--toolbar-icon-bg-color);
5260     mask-size:cover;
5261
5262     inset-inline-end:4px;
5263     pointer-events:none;
5264     mask-image:var(--toolbarButton-menuArrow-icon);
5265   }
5266
5267   &:is(:hover, :focus-visible, :active)::after{
5268     background-color:var(--toolbar-icon-hover-bg-color);
5269   }
5270 }
5271
5272 #toolbarContainer{
5273   --menuitem-height:calc(var(--toolbar-height) - 6px);
5274
5275   width:100%;
5276   height:var(--toolbar-height);
5277   padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding);
5278   position:relative;
5279   box-sizing:border-box;
5280   font:message-box;
5281   background-color:var(--toolbar-bg-color);
5282   box-shadow:var(--toolbar-box-shadow);
5283   border-bottom:var(--toolbar-border-bottom);
5284
5285   #toolbarViewer{
5286     width:100%;
5287     height:100%;
5288     justify-content:space-between;
5289
5290     > *{
5291       flex:none;
5292     }
5293
5294     input{
5295       font:message-box;
5296     }
5297
5298     .toolbarButtonSpacer{
5299       width:30px;
5300       display:block;
5301       height:1px;
5302     }
5303
5304     #toolbarViewerLeft #numPages.toolbarLabel{
5305       padding-inline-start:3px;
5306       flex:none;
5307     }
5308   }
5309
5310   #loadingBar{
5311     --progressBar-percent:0%;
5312     --progressBar-end-offset:0;
5313
5314     position:absolute;
5315     top:var(--toolbar-height);
5316     inset-inline:0 var(--progressBar-end-offset);
5317     height:4px;
5318     background-color:var(--progressBar-bg-color);
5319     border-bottom:1px solid var(--toolbar-border-color);
5320     transition-property:inset-inline-start;
5321     transition-duration:var(--sidebar-transition-duration);
5322     transition-timing-function:var(--sidebar-transition-timing-function);
5323
5324     .progress{
5325       position:absolute;
5326       top:0;
5327       inset-inline-start:0;
5328       width:100%;
5329       transform:scaleX(var(--progressBar-percent));
5330       transform-origin:calc(50% - 50% * var(--dir-factor)) 0;
5331       height:100%;
5332       background-color:var(--progressBar-color);
5333       overflow:hidden;
5334       transition:transform 200ms;
5335     }
5336
5337     &.indeterminate .progress{
5338       transform:none;
5339       background-color:var(--progressBar-bg-color);
5340       transition:none;
5341
5342       .glimmer{
5343         position:absolute;
5344         top:0;
5345         inset-inline-start:0;
5346         height:100%;
5347         width:calc(100% + 150px);
5348         background:repeating-linear-gradient(
5349           135deg,
5350           var(--progressBar-blend-color) 0,
5351           var(--progressBar-bg-color) 5px,
5352           var(--progressBar-bg-color) 45px,
5353           var(--progressBar-color) 55px,
5354           var(--progressBar-color) 95px,
5355           var(--progressBar-blend-color) 100px
5356         );
5357         animation:progressIndeterminate 1s linear infinite;
5358       }
5359     }
5360   }
5361 }
5362
5363 #secondaryToolbar{
5364   #firstPage::before{
5365     mask-image:var(--secondaryToolbarButton-firstPage-icon);
5366   }
5367
5368   #lastPage::before{
5369     mask-image:var(--secondaryToolbarButton-lastPage-icon);
5370   }
5371
5372   #pageRotateCcw::before{
5373     mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
5374   }
5375
5376   #pageRotateCw::before{
5377     mask-image:var(--secondaryToolbarButton-rotateCw-icon);
5378   }
5379
5380   #cursorSelectTool::before{
5381     mask-image:var(--secondaryToolbarButton-selectTool-icon);
5382   }
5383
5384   #cursorHandTool::before{
5385     mask-image:var(--secondaryToolbarButton-handTool-icon);
5386   }
5387
5388   #scrollPage::before{
5389     mask-image:var(--secondaryToolbarButton-scrollPage-icon);
5390   }
5391
5392   #scrollVertical::before{
5393     mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
5394   }
5395
5396   #scrollHorizontal::before{
5397     mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
5398   }
5399
5400   #scrollWrapped::before{
5401     mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
5402   }
5403
5404   #spreadNone::before{
5405     mask-image:var(--secondaryToolbarButton-spreadNone-icon);
5406   }
5407
5408   #spreadOdd::before{
5409     mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
5410   }
5411
5412   #spreadEven::before{
5413     mask-image:var(--secondaryToolbarButton-spreadEven-icon);
5414   }
5415
5416   #documentProperties::before{
5417     mask-image:var(--secondaryToolbarButton-documentProperties-icon);
5418   }
5419 }
5420
5421 @media all and (max-width: 840px){
5422   #sidebarContainer{
5423     background-color:var(--sidebar-narrow-bg-color);
5424   }
5425   #outerContainer.sidebarOpen #viewerContainer{
5426     inset-inline-start:0 !important;
5427   }
5428 }
5429
5430 @media all and (max-width: 750px){
5431   #outerContainer .hiddenMediumView{
5432     display:none !important;
5433   }
5434   #outerContainer .visibleMediumView:not(.hidden, [hidden]){
5435     display:inline-block !important;
5436   }
5437 }
5438
5439 @media all and (max-width: 690px){
5440   .hiddenSmallView,
5441   .hiddenSmallView *{
5442     display:none !important;
5443   }
5444
5445   #toolbarContainer #toolbarViewer .toolbarButtonSpacer{
5446     width:0;
5447   }
5448 }
5449
5450 @media all and (max-width: 560px){
5451   #scaleSelectContainer{
5452     display:none;
5453   }
5454 }