toolkit/components/pdfjs/content/web/viewer-geckoview.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   @media (prefers-color-scheme: dark){
 262     --dialog-bg-color:#1c1b22;
 263     --dialog-border-color:#1c1b22;
 264     --dialog-shadow:0 2px 14px 0 #15141a;
 265     --text-primary-color:#fbfbfe;
 266     --text-secondary-color:#cfcfd8;
 267     --focus-ring-color:#0df;
 268     --hover-filter:brightness(1.4);
 269     --link-fg-color:#0df;
 270     --link-hover-fg-color:#80ebff;
 271     --separator-color:#52525e;
 272
 273     --textarea-bg-color:#42414d;
 274
 275     --radio-bg-color:#2b2a33;
 276     --radio-checked-bg-color:#15141a;
 277     --radio-checked-border-color:#0df;
 278
 279     --button-secondary-bg-color:#2b2a33;
 280     --button-primary-bg-color:#0df;
 281     --button-primary-fg-color:#15141a;
 282   }
 283
 284   @media screen and (forced-colors: active){
 285     --dialog-bg-color:Canvas;
 286     --dialog-border-color:CanvasText;
 287     --dialog-shadow:none;
 288     --text-primary-color:CanvasText;
 289     --text-secondary-color:CanvasText;
 290     --hover-filter:none;
 291     --focus-ring-color:ButtonBorder;
 292     --link-fg-color:LinkText;
 293     --link-hover-fg-color:LinkText;
 294     --separator-color:CanvasText;
 295
 296     --textarea-border-color:ButtonBorder;
 297     --textarea-bg-color:Field;
 298     --textarea-fg-color:ButtonText;
 299
 300     --radio-bg-color:ButtonFace;
 301     --radio-checked-bg-color:ButtonFace;
 302     --radio-border-color:ButtonText;
 303     --radio-checked-border-color:ButtonText;
 304
 305     --button-secondary-bg-color:ButtonFace;
 306     --button-secondary-fg-color:ButtonText;
 307     --button-secondary-border-color:ButtonText;
 308     --button-secondary-hover-bg-color:AccentColor;
 309     --button-secondary-hover-fg-color:AccentColorText;
 310
 311     --button-primary-bg-color:ButtonText;
 312     --button-primary-fg-color:ButtonFace;
 313     --button-primary-hover-bg-color:AccentColor;
 314     --button-primary-hover-fg-color:AccentColorText;
 315   }
 316
 317   font:message-box;
 318   font-size:13px;
 319   font-weight:400;
 320   line-height:150%;
 321   border-radius:4px;
 322   padding:12px 16px;
 323   border:1px solid var(--dialog-border-color);
 324   background:var(--dialog-bg-color);
 325   color:var(--text-primary-color);
 326   box-shadow:var(--dialog-shadow);
 327
 328   .mainContainer{
 329     *:focus-visible{
 330       outline:var(--focus-ring-outline);
 331       outline-offset:2px;
 332     }
 333
 334     .title{
 335       display:flex;
 336       width:auto;
 337       flex-direction:column;
 338       justify-content:flex-end;
 339       align-items:flex-start;
 340       gap:12px;
 341
 342       > span{
 343         font-size:13px;
 344         font-style:normal;
 345         font-weight:590;
 346         line-height:150%;
 347       }
 348     }
 349
 350     .dialogSeparator{
 351       width:100%;
 352       height:0;
 353       margin-block:4px;
 354       border-top:1px solid var(--separator-color);
 355       border-bottom:none;
 356     }
 357
 358     .dialogButtonsGroup{
 359       display:flex;
 360       gap:12px;
 361       align-self:flex-end;
 362     }
 363
 364     .radio{
 365       display:flex;
 366       flex-direction:column;
 367       align-items:flex-start;
 368       gap:4px;
 369
 370       > .radioButton{
 371         display:flex;
 372         gap:8px;
 373         align-self:stretch;
 374         align-items:center;
 375
 376         input{
 377           appearance:none;
 378           box-sizing:border-box;
 379           width:16px;
 380           height:16px;
 381           border-radius:50%;
 382           background-color:var(--radio-bg-color);
 383           border:1px solid var(--radio-border-color);
 384
 385           &:hover{
 386             filter:var(--hover-filter);
 387           }
 388
 389           &:checked{
 390             background-color:var(--radio-checked-bg-color);
 391             border:4px solid var(--radio-checked-border-color);
 392           }
 393         }
 394       }
 395
 396       > .radioLabel{
 397         display:flex;
 398         padding-inline-start:24px;
 399         align-items:flex-start;
 400         gap:10px;
 401         align-self:stretch;
 402
 403         > span{
 404           flex:1 0 0;
 405           font-size:11px;
 406           color:var(--text-secondary-color);
 407         }
 408       }
 409     }
 410
 411     button:not(:is(.toggle-button, .closeButton)){
 412       border-radius:4px;
 413       border:1px solid;
 414       font:menu;
 415       font-weight:600;
 416       padding:4px 16px;
 417       width:auto;
 418       height:32px;
 419
 420       &:hover{
 421         cursor:pointer;
 422         filter:var(--hover-filter);
 423       }
 424
 425       &.secondaryButton{
 426         color:var(--button-secondary-fg-color);
 427         background-color:var(--button-secondary-bg-color);
 428         border-color:var(--button-secondary-border-color);
 429
 430         &:hover{
 431           color:var(--button-secondary-hover-fg-color);
 432           background-color:var(--button-secondary-hover-bg-color);
 433           border-color:var(--button-secondary-hover-border-color);
 434         }
 435       }
 436
 437       &.primaryButton{
 438         color:var(--button-primary-fg-color);
 439         background-color:var(--button-primary-bg-color);
 440         border-color:var(--button-primary-border-color);
 441         opacity:1;
 442
 443         &:hover{
 444           color:var(--button-primary-hover-fg-color);
 445           background-color:var(--button-primary-hover-bg-color);
 446           border-color:var(--button-primary-hover-border-color);
 447         }
 448       }
 449     }
 450
 451     a{
 452       color:var(--link-fg-color);
 453
 454       &:hover{
 455         color:var(--link-hover-fg-color);
 456       }
 457     }
 458
 459     textarea{
 460       font:inherit;
 461       padding:8px;
 462       resize:none;
 463       margin:0;
 464       box-sizing:border-box;
 465       border-radius:4px;
 466       border:1px solid var(--textarea-border-color);
 467       background:var(--textarea-bg-color);
 468       color:var(--textarea-fg-color);
 469
 470       &:focus{
 471         outline-offset:0;
 472         border-color:transparent;
 473       }
 474
 475       &:disabled{
 476         pointer-events:none;
 477         opacity:0.4;
 478       }
 479     }
 480
 481     .messageBar{
 482       --message-bar-bg-color:#ffebcd;
 483       --message-bar-fg-color:#15141a;
 484       --message-bar-border-color:rgb(0 0 0 / 0.08);
 485       --message-bar-icon:url(images/messageBar_warning.svg);
 486       --message-bar-icon-color:#cd411e;
 487
 488       @media (prefers-color-scheme: dark){
 489         --message-bar-bg-color:#5a3100;
 490         --message-bar-fg-color:#fbfbfe;
 491         --message-bar-border-color:rgb(255 255 255 / 0.08);
 492         --message-bar-icon-color:#e49c49;
 493       }
 494
 495       @media screen and (forced-colors: active){
 496         --message-bar-bg-color:HighlightText;
 497         --message-bar-fg-color:CanvasText;
 498         --message-bar-border-color:CanvasText;
 499         --message-bar-icon-color:CanvasText;
 500       }
 501
 502       align-self:stretch;
 503
 504       > div{
 505         &::before,
 506         > div{
 507           margin-block:4px;
 508         }
 509
 510         > div{
 511           display:flex;
 512           flex-direction:column;
 513           align-items:flex-start;
 514           gap:8px;
 515           flex:1 0 0;
 516
 517           .title{
 518             font-size:13px;
 519             font-weight:590;
 520           }
 521
 522           .description{
 523             font-size:13px;
 524           }
 525         }
 526       }
 527     }
 528
 529     .toggler{
 530       display:flex;
 531       align-items:center;
 532       gap:8px;
 533       align-self:stretch;
 534
 535       > .togglerLabel{
 536         user-select:none;
 537       }
 538     }
 539   }
 540 }
 541
 542 .textLayer{
 543   position:absolute;
 544   text-align:initial;
 545   inset:0;
 546   overflow:clip;
 547   opacity:1;
 548   line-height:1;
 549   text-size-adjust:none;
 550   forced-color-adjust:none;
 551   transform-origin:0 0;
 552   caret-color:CanvasText;
 553   z-index:0;
 554
 555   &.highlighting{
 556     touch-action:none;
 557   }
 558
 559   :is(span, br){
 560     color:transparent;
 561     position:absolute;
 562     white-space:pre;
 563     cursor:text;
 564     transform-origin:0% 0%;
 565   }
 566
 567   > :not(.markedContent),
 568   .markedContent span:not(.markedContent){
 569     z-index:1;
 570   }
 571
 572   span[role="img"]{
 573     user-select:none;
 574     cursor:default;
 575   }
 576
 577   .highlight{
 578     --highlight-bg-color:rgb(180 0 170 / 0.25);
 579     --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
 580     --highlight-backdrop-filter:none;
 581     --highlight-selected-backdrop-filter:none;
 582
 583     @media screen and (forced-colors: active){
 584       --highlight-bg-color:transparent;
 585       --highlight-selected-bg-color:transparent;
 586       --highlight-backdrop-filter:var(--hcm-highlight-filter);
 587       --highlight-selected-backdrop-filter:var(
 588         --hcm-highlight-selected-filter
 589       );
 590     }
 591
 592     margin:-1px;
 593     padding:1px;
 594     background-color:var(--highlight-bg-color);
 595     backdrop-filter:var(--highlight-backdrop-filter);
 596     border-radius:4px;
 597
 598     &.appended{
 599       position:initial;
 600     }
 601
 602     &.begin{
 603       border-radius:4px 0 0 4px;
 604     }
 605
 606     &.end{
 607       border-radius:0 4px 4px 0;
 608     }
 609
 610     &.middle{
 611       border-radius:0;
 612     }
 613
 614     &.selected{
 615       background-color:var(--highlight-selected-bg-color);
 616       backdrop-filter:var(--highlight-selected-backdrop-filter);
 617     }
 618   }
 619
 620   ::selection{
 621     background:color-mix(in srgb, AccentColor, transparent 75%);
 622   }
 623
 624   .endOfContent{
 625     display:block;
 626     position:absolute;
 627     inset:100% 0 0;
 628     z-index:0;
 629     cursor:default;
 630     user-select:none;
 631   }
 632
 633   &.selecting .endOfContent{
 634     top:0;
 635   }
 636 }
 637
 638 .annotationLayer{
 639   --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>");
 640   --input-focus-border-color:Highlight;
 641   --input-focus-outline:1px solid Canvas;
 642   --input-unfocused-border-color:transparent;
 643   --input-disabled-border-color:transparent;
 644   --input-hover-border-color:black;
 645   --link-outline:none;
 646
 647   @media screen and (forced-colors: active){
 648     --input-focus-border-color:CanvasText;
 649     --input-unfocused-border-color:ActiveText;
 650     --input-disabled-border-color:GrayText;
 651     --input-hover-border-color:Highlight;
 652     --link-outline:1.5px solid LinkText;
 653
 654     .textWidgetAnnotation :is(input, textarea):required,
 655     .choiceWidgetAnnotation select:required,
 656     .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
 657       outline:1.5px solid selectedItem;
 658     }
 659
 660     .linkAnnotation{
 661       outline:var(--link-outline);
 662
 663       &:hover{
 664         backdrop-filter:var(--hcm-highlight-filter);
 665       }
 666
 667       & > a:hover{
 668         opacity:0 !important;
 669         background:none !important;
 670         box-shadow:none;
 671       }
 672     }
 673
 674     .popupAnnotation .popup{
 675       outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
 676       background-color:ButtonFace !important;
 677       color:ButtonText !important;
 678     }
 679
 680     .highlightArea:hover::after{
 681       position:absolute;
 682       top:0;
 683       left:0;
 684       width:100%;
 685       height:100%;
 686       backdrop-filter:var(--hcm-highlight-filter);
 687       content:"";
 688       pointer-events:none;
 689     }
 690
 691     .popupAnnotation.focused .popup{
 692       outline:calc(3px * var(--scale-factor)) solid Highlight !important;
 693     }
 694   }
 695
 696   position:absolute;
 697   top:0;
 698   left:0;
 699   pointer-events:none;
 700   transform-origin:0 0;
 701
 702   &[data-main-rotation="90"] .norotate{
 703     transform:rotate(270deg) translateX(-100%);
 704   }
 705   &[data-main-rotation="180"] .norotate{
 706     transform:rotate(180deg) translate(-100%, -100%);
 707   }
 708   &[data-main-rotation="270"] .norotate{
 709     transform:rotate(90deg) translateY(-100%);
 710   }
 711
 712   &.disabled{
 713     section,
 714     .popup{
 715       pointer-events:none;
 716     }
 717   }
 718
 719   .annotationContent{
 720     position:absolute;
 721     width:100%;
 722     height:100%;
 723     pointer-events:none;
 724
 725     &.freetext{
 726       background:transparent;
 727       border:none;
 728       inset:0;
 729       overflow:visible;
 730       white-space:nowrap;
 731       font:10px sans-serif;
 732       line-height:1.35;
 733     }
 734   }
 735
 736   section{
 737     position:absolute;
 738     text-align:initial;
 739     pointer-events:auto;
 740     box-sizing:border-box;
 741     transform-origin:0 0;
 742     user-select:none;
 743
 744     &:has(div.annotationContent){
 745       canvas.annotationContent{
 746         display:none;
 747       }
 748     }
 749   }
 750
 751   .textLayer.selecting ~ & section{
 752     pointer-events:none;
 753   }
 754
 755   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
 756     position:absolute;
 757     font-size:1em;
 758     top:0;
 759     left:0;
 760     width:100%;
 761     height:100%;
 762   }
 763
 764   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
 765     > a:hover{
 766     opacity:0.2;
 767     background-color:rgb(255 255 0);
 768     box-shadow:0 2px 10px rgb(255 255 0);
 769   }
 770
 771   .linkAnnotation.hasBorder:hover{
 772     background-color:rgb(255 255 0 / 0.2);
 773   }
 774
 775   .hasBorder{
 776     background-size:100% 100%;
 777   }
 778
 779   .textAnnotation img{
 780     position:absolute;
 781     cursor:pointer;
 782     width:100%;
 783     height:100%;
 784     top:0;
 785     left:0;
 786   }
 787
 788   .textWidgetAnnotation :is(input, textarea),
 789   .choiceWidgetAnnotation select,
 790   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
 791     background-image:var(--annotation-unfocused-field-background);
 792     border:2px solid var(--input-unfocused-border-color);
 793     box-sizing:border-box;
 794     font:calc(9px * var(--scale-factor)) sans-serif;
 795     height:100%;
 796     margin:0;
 797     vertical-align:top;
 798     width:100%;
 799   }
 800
 801   .textWidgetAnnotation :is(input, textarea):required,
 802   .choiceWidgetAnnotation select:required,
 803   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
 804     outline:1.5px solid red;
 805   }
 806
 807   .choiceWidgetAnnotation select option{
 808     padding:0;
 809   }
 810
 811   .buttonWidgetAnnotation.radioButton input{
 812     border-radius:50%;
 813   }
 814
 815   .textWidgetAnnotation textarea{
 816     resize:none;
 817   }
 818
 819   .textWidgetAnnotation :is(input, textarea)[disabled],
 820   .choiceWidgetAnnotation select[disabled],
 821   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
 822     background:none;
 823     border:2px solid var(--input-disabled-border-color);
 824     cursor:not-allowed;
 825   }
 826
 827   .textWidgetAnnotation :is(input, textarea):hover,
 828   .choiceWidgetAnnotation select:hover,
 829   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
 830     border:2px solid var(--input-hover-border-color);
 831   }
 832   .textWidgetAnnotation :is(input, textarea):hover,
 833   .choiceWidgetAnnotation select:hover,
 834   .buttonWidgetAnnotation.checkBox input:hover{
 835     border-radius:2px;
 836   }
 837
 838   .textWidgetAnnotation :is(input, textarea):focus,
 839   .choiceWidgetAnnotation select:focus{
 840     background:none;
 841     border:2px solid var(--input-focus-border-color);
 842     border-radius:2px;
 843     outline:var(--input-focus-outline);
 844   }
 845
 846   .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
 847     background-image:none;
 848     background-color:transparent;
 849   }
 850
 851   .buttonWidgetAnnotation.checkBox :focus{
 852     border:2px solid var(--input-focus-border-color);
 853     border-radius:2px;
 854     outline:var(--input-focus-outline);
 855   }
 856
 857   .buttonWidgetAnnotation.radioButton :focus{
 858     border:2px solid var(--input-focus-border-color);
 859     outline:var(--input-focus-outline);
 860   }
 861
 862   .buttonWidgetAnnotation.checkBox input:checked::before,
 863   .buttonWidgetAnnotation.checkBox input:checked::after,
 864   .buttonWidgetAnnotation.radioButton input:checked::before{
 865     background-color:CanvasText;
 866     content:"";
 867     display:block;
 868     position:absolute;
 869   }
 870
 871   .buttonWidgetAnnotation.checkBox input:checked::before,
 872   .buttonWidgetAnnotation.checkBox input:checked::after{
 873     height:80%;
 874     left:45%;
 875     width:1px;
 876   }
 877
 878   .buttonWidgetAnnotation.checkBox input:checked::before{
 879     transform:rotate(45deg);
 880   }
 881
 882   .buttonWidgetAnnotation.checkBox input:checked::after{
 883     transform:rotate(-45deg);
 884   }
 885
 886   .buttonWidgetAnnotation.radioButton input:checked::before{
 887     border-radius:50%;
 888     height:50%;
 889     left:25%;
 890     top:25%;
 891     width:50%;
 892   }
 893
 894   .textWidgetAnnotation input.comb{
 895     font-family:monospace;
 896     padding-left:2px;
 897     padding-right:0;
 898   }
 899
 900   .textWidgetAnnotation input.comb:focus{
 901     width:103%;
 902   }
 903
 904   .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
 905     appearance:none;
 906   }
 907
 908   .fileAttachmentAnnotation .popupTriggerArea{
 909     height:100%;
 910     width:100%;
 911   }
 912
 913   .popupAnnotation{
 914     position:absolute;
 915     font-size:calc(9px * var(--scale-factor));
 916     pointer-events:none;
 917     width:max-content;
 918     max-width:45%;
 919     height:auto;
 920   }
 921
 922   .popup{
 923     background-color:rgb(255 255 153);
 924     box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
 925     border-radius:calc(2px * var(--scale-factor));
 926     outline:1.5px solid rgb(255 255 74);
 927     padding:calc(6px * var(--scale-factor));
 928     cursor:pointer;
 929     font:message-box;
 930     white-space:normal;
 931     word-wrap:break-word;
 932     pointer-events:auto;
 933     user-select:text;
 934   }
 935
 936   .popupAnnotation.focused .popup{
 937     outline-width:3px;
 938   }
 939
 940   .popup *{
 941     font-size:calc(9px * var(--scale-factor));
 942   }
 943
 944   .popup > .header{
 945     display:inline-block;
 946   }
 947
 948   .popup > .header h1{
 949     display:inline;
 950   }
 951
 952   .popup > .header .popupDate{
 953     display:inline-block;
 954     margin-left:calc(5px * var(--scale-factor));
 955     width:fit-content;
 956   }
 957
 958   .popupContent{
 959     border-top:1px solid rgb(51 51 51);
 960     margin-top:calc(2px * var(--scale-factor));
 961     padding-top:calc(2px * var(--scale-factor));
 962   }
 963
 964   .richText > *{
 965     white-space:pre-wrap;
 966     font-size:calc(9px * var(--scale-factor));
 967   }
 968
 969   .popupTriggerArea{
 970     cursor:pointer;
 971   }
 972
 973   section svg{
 974     position:absolute;
 975     width:100%;
 976     height:100%;
 977     top:0;
 978     left:0;
 979   }
 980
 981   .annotationTextContent{
 982     position:absolute;
 983     width:100%;
 984     height:100%;
 985     opacity:0;
 986     color:transparent;
 987     user-select:none;
 988     pointer-events:none;
 989
 990     span{
 991       width:100%;
 992       display:inline-block;
 993     }
 994   }
 995
 996   svg.quadrilateralsContainer{
 997     contain:strict;
 998     width:0;
 999     height:0;
1000     position:absolute;
1001     top:0;
1002     left:0;
1003     z-index:-1;
1004   }
1005 }
1006
1007 :root{
1008   --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>");
1009   --xfa-focus-outline:auto;
1010 }
1011
1012 @media screen and (forced-colors: active){
1013   :root{
1014     --xfa-focus-outline:2px solid CanvasText;
1015   }
1016   .xfaLayer *:required{
1017     outline:1.5px solid selectedItem;
1018   }
1019 }
1020
1021 .xfaLayer{
1022   background-color:transparent;
1023 }
1024
1025 .xfaLayer .highlight{
1026   margin:-1px;
1027   padding:1px;
1028   background-color:rgb(239 203 237);
1029   border-radius:4px;
1030 }
1031
1032 .xfaLayer .highlight.appended{
1033   position:initial;
1034 }
1035
1036 .xfaLayer .highlight.begin{
1037   border-radius:4px 0 0 4px;
1038 }
1039
1040 .xfaLayer .highlight.end{
1041   border-radius:0 4px 4px 0;
1042 }
1043
1044 .xfaLayer .highlight.middle{
1045   border-radius:0;
1046 }
1047
1048 .xfaLayer .highlight.selected{
1049   background-color:rgb(203 223 203);
1050 }
1051
1052 .xfaPage{
1053   overflow:hidden;
1054   position:relative;
1055 }
1056
1057 .xfaContentarea{
1058   position:absolute;
1059 }
1060
1061 .xfaPrintOnly{
1062   display:none;
1063 }
1064
1065 .xfaLayer{
1066   position:absolute;
1067   text-align:initial;
1068   top:0;
1069   left:0;
1070   transform-origin:0 0;
1071   line-height:1.2;
1072 }
1073
1074 .xfaLayer *{
1075   color:inherit;
1076   font:inherit;
1077   font-style:inherit;
1078   font-weight:inherit;
1079   font-kerning:inherit;
1080   letter-spacing:-0.01px;
1081   text-align:inherit;
1082   text-decoration:inherit;
1083   box-sizing:border-box;
1084   background-color:transparent;
1085   padding:0;
1086   margin:0;
1087   pointer-events:auto;
1088   line-height:inherit;
1089 }
1090
1091 .xfaLayer *:required{
1092   outline:1.5px solid red;
1093 }
1094
1095 .xfaLayer div,
1096 .xfaLayer svg,
1097 .xfaLayer svg *{
1098   pointer-events:none;
1099 }
1100
1101 .xfaLayer a{
1102   color:blue;
1103 }
1104
1105 .xfaRich li{
1106   margin-left:3em;
1107 }
1108
1109 .xfaFont{
1110   color:black;
1111   font-weight:normal;
1112   font-kerning:none;
1113   font-size:10px;
1114   font-style:normal;
1115   letter-spacing:0;
1116   text-decoration:none;
1117   vertical-align:0;
1118 }
1119
1120 .xfaCaption{
1121   overflow:hidden;
1122   flex:0 0 auto;
1123 }
1124
1125 .xfaCaptionForCheckButton{
1126   overflow:hidden;
1127   flex:1 1 auto;
1128 }
1129
1130 .xfaLabel{
1131   height:100%;
1132   width:100%;
1133 }
1134
1135 .xfaLeft{
1136   display:flex;
1137   flex-direction:row;
1138   align-items:center;
1139 }
1140
1141 .xfaRight{
1142   display:flex;
1143   flex-direction:row-reverse;
1144   align-items:center;
1145 }
1146
1147 :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1148   max-height:100%;
1149 }
1150
1151 .xfaTop{
1152   display:flex;
1153   flex-direction:column;
1154   align-items:flex-start;
1155 }
1156
1157 .xfaBottom{
1158   display:flex;
1159   flex-direction:column-reverse;
1160   align-items:flex-start;
1161 }
1162
1163 :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1164   width:100%;
1165 }
1166
1167 .xfaBorder{
1168   background-color:transparent;
1169   position:absolute;
1170   pointer-events:none;
1171 }
1172
1173 .xfaWrapped{
1174   width:100%;
1175   height:100%;
1176 }
1177
1178 :is(.xfaTextfield, .xfaSelect):focus{
1179   background-image:none;
1180   background-color:transparent;
1181   outline:var(--xfa-focus-outline);
1182   outline-offset:-1px;
1183 }
1184
1185 :is(.xfaCheckbox, .xfaRadio):focus{
1186   outline:var(--xfa-focus-outline);
1187 }
1188
1189 .xfaTextfield,
1190 .xfaSelect{
1191   height:100%;
1192   width:100%;
1193   flex:1 1 auto;
1194   border:none;
1195   resize:none;
1196   background-image:var(--xfa-unfocused-field-background);
1197 }
1198
1199 .xfaSelect{
1200   padding-inline:2px;
1201 }
1202
1203 :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
1204   flex:0 1 auto;
1205 }
1206
1207 .xfaButton{
1208   cursor:pointer;
1209   width:100%;
1210   height:100%;
1211   border:none;
1212   text-align:center;
1213 }
1214
1215 .xfaLink{
1216   width:100%;
1217   height:100%;
1218   position:absolute;
1219   top:0;
1220   left:0;
1221 }
1222
1223 .xfaCheckbox,
1224 .xfaRadio{
1225   width:100%;
1226   height:100%;
1227   flex:0 0 auto;
1228   border:none;
1229 }
1230
1231 .xfaRich{
1232   white-space:pre-wrap;
1233   width:100%;
1234   height:100%;
1235 }
1236
1237 .xfaImage{
1238   object-position:left top;
1239   object-fit:contain;
1240   width:100%;
1241   height:100%;
1242 }
1243
1244 .xfaLrTb,
1245 .xfaRlTb,
1246 .xfaTb{
1247   display:flex;
1248   flex-direction:column;
1249   align-items:stretch;
1250 }
1251
1252 .xfaLr{
1253   display:flex;
1254   flex-direction:row;
1255   align-items:stretch;
1256 }
1257
1258 .xfaRl{
1259   display:flex;
1260   flex-direction:row-reverse;
1261   align-items:stretch;
1262 }
1263
1264 .xfaTb > div{
1265   justify-content:left;
1266 }
1267
1268 .xfaPosition{
1269   position:relative;
1270 }
1271
1272 .xfaArea{
1273   position:relative;
1274 }
1275
1276 .xfaValignMiddle{
1277   display:flex;
1278   align-items:center;
1279 }
1280
1281 .xfaTable{
1282   display:flex;
1283   flex-direction:column;
1284   align-items:stretch;
1285 }
1286
1287 .xfaTable .xfaRow{
1288   display:flex;
1289   flex-direction:row;
1290   align-items:stretch;
1291 }
1292
1293 .xfaTable .xfaRlRow{
1294   display:flex;
1295   flex-direction:row-reverse;
1296   align-items:stretch;
1297   flex:1;
1298 }
1299
1300 .xfaTable .xfaRlRow > div{
1301   flex:1;
1302 }
1303
1304 :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
1305   background:initial;
1306 }
1307
1308 @media print{
1309   .xfaTextfield,
1310   .xfaSelect{
1311     background:transparent;
1312   }
1313
1314   .xfaSelect{
1315     appearance:none;
1316     text-indent:1px;
1317     text-overflow:"";
1318   }
1319 }
1320
1321 :root{
1322   --viewer-container-height:0;
1323   --pdfViewer-padding-bottom:0;
1324   --page-margin:1px auto -8px;
1325   --page-border:9px solid transparent;
1326   --spreadHorizontalWrapped-margin-LR:-3.5px;
1327   --loading-icon-delay:400ms;
1328 }
1329
1330 @media screen and (forced-colors: active){
1331   :root{
1332     --pdfViewer-padding-bottom:9px;
1333     --page-margin:8px auto -1px;
1334     --page-border:1px solid CanvasText;
1335     --spreadHorizontalWrapped-margin-LR:3.5px;
1336   }
1337 }
1338
1339 [data-main-rotation="90"]{
1340   transform:rotate(90deg) translateY(-100%);
1341 }
1342 [data-main-rotation="180"]{
1343   transform:rotate(180deg) translate(-100%, -100%);
1344 }
1345 [data-main-rotation="270"]{
1346   transform:rotate(270deg) translateX(-100%);
1347 }
1348
1349 #hiddenCopyElement,
1350 .hiddenCanvasElement{
1351   position:absolute;
1352   top:0;
1353   left:0;
1354   width:0;
1355   height:0;
1356   display:none;
1357 }
1358
1359 .pdfViewer{
1360   --scale-factor:1;
1361   --page-bg-color:unset;
1362
1363   padding-bottom:var(--pdfViewer-padding-bottom);
1364
1365   --hcm-highlight-filter:none;
1366   --hcm-highlight-selected-filter:none;
1367
1368   @media screen and (forced-colors: active){
1369     --hcm-highlight-filter:invert(100%);
1370   }
1371
1372   &.copyAll{
1373     cursor:wait;
1374   }
1375
1376   .canvasWrapper{
1377     overflow:hidden;
1378     width:100%;
1379     height:100%;
1380
1381     canvas{
1382       position:absolute;
1383       top:0;
1384       left:0;
1385       margin:0;
1386       display:block;
1387       width:100%;
1388       height:100%;
1389       contain:content;
1390
1391       .structTree{
1392         contain:strict;
1393       }
1394     }
1395   }
1396 }
1397
1398 .pdfViewer .page{
1399   --scale-round-x:1px;
1400   --scale-round-y:1px;
1401
1402   direction:ltr;
1403   width:816px;
1404   height:1056px;
1405   margin:var(--page-margin);
1406   position:relative;
1407   overflow:visible;
1408   border:var(--page-border);
1409   background-clip:content-box;
1410   background-color:var(--page-bg-color, rgb(255 255 255));
1411 }
1412
1413 .pdfViewer .dummyPage{
1414   position:relative;
1415   width:0;
1416   height:var(--viewer-container-height);
1417 }
1418
1419 .pdfViewer.noUserSelect{
1420   user-select:none;
1421 }
1422
1423 .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
1424 .spread{
1425   margin-inline:3.5px;
1426   text-align:center;
1427 }
1428
1429 .pdfViewer.scrollHorizontal,
1430 .spread{
1431   white-space:nowrap;
1432 }
1433
1434 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
1435   margin-inline:0;
1436 }
1437
1438 .spread :is(.page, .dummyPage),
1439 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
1440   display:inline-block;
1441   vertical-align:middle;
1442 }
1443
1444 .spread .page,
1445 .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
1446   margin-inline:var(--spreadHorizontalWrapped-margin-LR);
1447 }
1448
1449 .pdfViewer .page.loadingIcon::after{
1450   position:absolute;
1451   top:0;
1452   left:0;
1453   content:"";
1454   width:100%;
1455   height:100%;
1456   background:url("images/loading-icon.gif") center no-repeat;
1457   display:none;
1458   transition-property:display;
1459   transition-delay:var(--loading-icon-delay);
1460   z-index:5;
1461   contain:strict;
1462 }
1463
1464 .pdfViewer .page.loading::after{
1465   display:block;
1466 }
1467
1468 .pdfViewer .page:not(.loading)::after{
1469   transition-property:none;
1470   display:none;
1471 }
1472
1473 .pdfPresentationMode .pdfViewer{
1474   padding-bottom:0;
1475 }
1476
1477 .pdfPresentationMode .spread{
1478   margin:0;
1479 }
1480
1481 .pdfPresentationMode .pdfViewer .page{
1482   margin:0 auto;
1483   border:2px solid transparent;
1484 }
1485
1486 :root{
1487   --dir-factor:1;
1488   --scale-select-width:140px;
1489
1490   --toolbar-icon-opacity:1;
1491   --doorhanger-icon-opacity:0.9;
1492
1493   --main-color:rgb(12 12 13);
1494   --body-bg-color:rgb(212 212 215);
1495   --scrollbar-color:auto;
1496   --scrollbar-bg-color:auto;
1497   --field-color:rgb(6 6 6);
1498   --field-bg-color:rgb(255 255 255);
1499   --field-border-color:rgb(187 187 188);
1500   --doorhanger-bg-color:rgb(255 255 255);
1501   --dialog-button-border:none;
1502   --dialog-button-bg-color:rgb(12 12 13 / 0.1);
1503   --dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
1504
1505   --toolbar-bg-color:#f9f9fb;
1506   --toolbar-divider-color:#e0e0e6;
1507   --toolbar-fg-color:#15141a;
1508   --toolbar-height:48px;
1509   --toolbar-border-width:1px;
1510
1511   --toolbarButton-download-icon:url(images/gv-toolbarButton-download.svg);
1512 }
1513
1514 :root:dir(rtl){
1515   --dir-factor:-1;
1516 }
1517
1518 @media (prefers-color-scheme: dark){
1519   :root{
1520     --main-color:rgb(249 249 250);
1521     --body-bg-color:rgb(42 42 46);
1522     --scrollbar-color:rgb(121 121 123);
1523     --scrollbar-bg-color:rgb(35 35 39);
1524     --field-color:rgb(250 250 250);
1525     --field-bg-color:rgb(64 64 68);
1526     --field-border-color:rgb(115 115 115);
1527     --doorhanger-bg-color:rgb(74 74 79);
1528     --dialog-button-bg-color:rgb(92 92 97);
1529     --dialog-button-hover-bg-color:rgb(115 115 115);
1530
1531     --toolbar-bg-color:#2b2a33;
1532     --toolbar-divider-color:#5b5b66;
1533     --toolbar-fg-color:#fbfbfe;
1534   }
1535 }
1536
1537 @media screen and (forced-colors: active){
1538   :root{
1539     --dialog-button-border:1px solid Highlight;
1540     --dialog-button-hover-bg-color:Highlight;
1541     --dialog-button-hover-color:ButtonFace;
1542     --field-border-color:ButtonText;
1543     --main-color:CanvasText;
1544   }
1545 }
1546
1547 *{
1548   padding:0;
1549   margin:0;
1550 }
1551
1552 html,
1553 body{
1554   height:100%;
1555   width:100%;
1556 }
1557
1558 body{
1559   background-color:var(--body-bg-color);
1560   scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
1561 }
1562
1563 .hidden,
1564 [hidden]{
1565   display:none !important;
1566 }
1567
1568 #outerContainer{
1569   width:100%;
1570   height:100%;
1571   position:relative;
1572 }
1573
1574 #mainContainer{
1575   position:absolute;
1576   inset:0;
1577   min-width:350px;
1578 }
1579
1580 #viewerContainer{
1581   overflow:auto;
1582   position:absolute;
1583   inset:var(--toolbar-height) 0 0;
1584   outline:none;
1585 }
1586
1587 #viewerContainer.noToolbar{
1588   inset-block-start:0;
1589 }
1590
1591 .dialogButton{
1592   border:none;
1593   background:none;
1594   width:28px;
1595   height:28px;
1596   outline:none;
1597 }
1598
1599 .dialogButton:is(:hover, :focus-visible){
1600   background-color:var(--dialog-button-hover-bg-color);
1601 }
1602
1603 .dialogButton:is(:hover, :focus-visible) > span{
1604   color:var(--dialog-button-hover-color);
1605 }
1606
1607 .dialogButton[disabled]{
1608   opacity:0.5;
1609 }
1610
1611 .dialogButton{
1612   min-width:16px;
1613   margin:2px 1px;
1614   padding:2px 6px 0;
1615   border:none;
1616   border-radius:2px;
1617   color:var(--main-color);
1618   font-size:12px;
1619   line-height:14px;
1620   user-select:none;
1621   cursor:default;
1622   box-sizing:border-box;
1623 }
1624
1625 .toolbarField{
1626   padding:4px 7px;
1627   margin:3px 0;
1628   border-radius:2px;
1629   background-color:var(--field-bg-color);
1630   background-clip:padding-box;
1631   border:1px solid var(--field-border-color);
1632   box-shadow:none;
1633   color:var(--field-color);
1634   font-size:12px;
1635   line-height:16px;
1636   outline:none;
1637 }
1638
1639 .toolbarField:focus{
1640   border-color:#0a84ff;
1641 }
1642
1643 #floatingToolbar{
1644   display:flex;
1645   align-items:center;
1646   position:absolute;
1647   width:100%;
1648   height:calc(var(--toolbar-height) + var(--toolbar-border-width));
1649   top:0;
1650   left:0;
1651   padding:2px;
1652   box-sizing:border-box;
1653   border-block-end:solid var(--toolbar-border-width) var(--toolbar-divider-color);
1654   background-color:var(--toolbar-bg-color);
1655
1656   &.show{
1657     z-index:100000;
1658     opacity:1;
1659   }
1660
1661   &:not(.show){
1662     z-index:-1;
1663     opacity:0;
1664   }
1665
1666   .toolbarButton{
1667     display:flex;
1668     align-items:center;
1669     border-style:none;
1670     user-select:none;
1671     box-sizing:border-box;
1672     background-color:transparent;
1673     width:auto;
1674     height:100%;
1675     outline:none;
1676     position:relative;
1677
1678     &::before{
1679       width:24px;
1680       height:24px;
1681       content:"";
1682       background-color:var(--toolbar-fg-color);
1683       mask-size:cover;
1684       margin-inline:12px 8px;
1685     }
1686
1687     > span{
1688       color:var(--toolbar-fg-color);
1689       width:auto;
1690       height:auto;
1691       overflow:hidden;
1692     }
1693
1694     &#download::before{
1695       mask-image:var(--toolbarButton-download-icon);
1696     }
1697   }
1698 }
1699
1700 :is(.toolbarButton .dialogButton)[disabled]{
1701   opacity:0.5;
1702 }
1703
1704 .dialogButton{
1705   width:auto;
1706   margin:3px 4px 2px !important;
1707   padding:2px 11px;
1708   color:var(--main-color);
1709   background-color:var(--dialog-button-bg-color);
1710   border:var(--dialog-button-border) !important;
1711 }
1712
1713 dialog{
1714   margin:auto;
1715   padding:15px;
1716   border-spacing:4px;
1717   color:var(--main-color);
1718   font:message-box;
1719   font-size:12px;
1720   line-height:14px;
1721   background-color:var(--doorhanger-bg-color);
1722   border:1px solid rgb(0 0 0 / 0.5);
1723   border-radius:4px;
1724   box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
1725 }
1726 dialog::backdrop{
1727   background-color:rgb(0 0 0 / 0.2);
1728 }
1729
1730 dialog > .row{
1731   display:table-row;
1732 }
1733
1734 dialog > .row > *{
1735   display:table-cell;
1736 }
1737
1738 dialog .toolbarField{
1739   margin:5px 0;
1740 }
1741
1742 dialog .separator{
1743   display:block;
1744   margin:4px 0;
1745   height:0;
1746   width:100%;
1747   border-top:1px solid var(--separator-color);
1748   border-bottom:none;
1749 }
1750
1751 dialog .buttonRow{
1752   text-align:center;
1753   vertical-align:middle;
1754 }
1755
1756 dialog :link{
1757   color:rgb(255 255 255);
1758 }
1759
1760 #passwordDialog{
1761   text-align:center;
1762 }
1763 #passwordDialog .toolbarField{
1764   width:200px;
1765 }
1766
1767 @page{
1768   margin:0;
1769 }
1770
1771 #printContainer{
1772   display:none;
1773 }
1774
1775 @media print{
1776   body{
1777     background:rgb(0 0 0 / 0) none;
1778   }
1779   body[data-pdfjsprinting] #outerContainer{
1780     display:none;
1781   }
1782   body[data-pdfjsprinting] #printContainer{
1783     display:block;
1784   }
1785   #printContainer{
1786     height:100%;
1787   }
1788   #printContainer > .printedPage{
1789     page-break-after:always;
1790     page-break-inside:avoid;
1791     height:100%;
1792     width:100%;
1793
1794     display:flex;
1795     flex-direction:column;
1796     justify-content:center;
1797     align-items:center;
1798   }
1799
1800   #printContainer > .xfaPrintedPage .xfaPage{
1801     position:absolute;
1802   }
1803
1804   #printContainer > .xfaPrintedPage{
1805     page-break-after:always;
1806     page-break-inside:avoid;
1807     width:100%;
1808     height:100%;
1809     position:relative;
1810   }
1811
1812   #printContainer > .printedPage :is(canvas, img){
1813     max-width:100%;
1814     max-height:100%;
1815
1816     direction:ltr;
1817     display:block;
1818   }
1819 }