Source code
Revision control
Copy as Markdown
Other Tools
/* Copyright 2014 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.messageBar{
--closing-button-icon:url(images/messageBar_closingButton.svg);
--message-bar-close-button-color:var(--text-primary-color);
--message-bar-close-button-color-hover:var(--text-primary-color);
--message-bar-close-button-border-radius:4px;
--message-bar-close-button-border:none;
--message-bar-close-button-hover-bg-color:rgb(21 20 26 / 0.14);
--message-bar-close-button-active-bg-color:rgb(21 20 26 / 0.21);
--message-bar-close-button-focus-bg-color:rgb(21 20 26 / 0.07);
@media (prefers-color-scheme: dark){
--message-bar-close-button-hover-bg-color:rgb(251 251 254 / 0.14);
--message-bar-close-button-active-bg-color:rgb(251 251 254 / 0.21);
--message-bar-close-button-focus-bg-color:rgb(251 251 254 / 0.07);
}
@media screen and (forced-colors: active){
--message-bar-close-button-color:ButtonText;
--message-bar-close-button-border:1px solid ButtonText;
--message-bar-close-button-hover-bg-color:ButtonText;
--message-bar-close-button-active-bg-color:ButtonText;
--message-bar-close-button-focus-bg-color:ButtonText;
--message-bar-close-button-color-hover:HighlightText;
}
display:flex;
position:relative;
padding:8px 8px 8px 16px;
flex-direction:column;
justify-content:center;
align-items:center;
gap:8px;
user-select:none;
border-radius:4px;
border:1px solid var(--message-bar-border-color);
background:var(--message-bar-bg-color);
color:var(--message-bar-fg-color);
> div{
display:flex;
align-items:flex-start;
gap:8px;
align-self:stretch;
&::before{
content:"";
display:inline-block;
width:16px;
height:16px;
mask-image:var(--message-bar-icon);
mask-size:cover;
background-color:var(--message-bar-icon-color);
flex-shrink:0;
}
}
button{
cursor:pointer;
&:focus-visible{
outline:var(--focus-ring-outline);
outline-offset:2px;
}
}
.closeButton{
width:32px;
height:32px;
background:none;
border-radius:var(--message-bar-close-button-border-radius);
border:var(--message-bar-close-button-border);
display:flex;
align-items:center;
justify-content:center;
&::before{
content:"";
display:inline-block;
width:16px;
height:16px;
mask-image:var(--closing-button-icon);
mask-size:cover;
background-color:var(--message-bar-close-button-color);
}
&:is(:hover, :active, :focus)::before{
background-color:var(--message-bar-close-button-color-hover);
}
&:hover{
background-color:var(--message-bar-close-button-hover-bg-color);
}
&:active{
background-color:var(--message-bar-close-button-active-bg-color);
}
&:focus{
background-color:var(--message-bar-close-button-focus-bg-color);
}
> span{
display:inline-block;
width:0;
height:0;
overflow:hidden;
}
}
}
#editorUndoBar{
--text-primary-color:#15141a;
--message-bar-icon:url(images/secondaryToolbarButton-documentProperties.svg);
--message-bar-icon-color:#0060df;
--message-bar-bg-color:#deeafc;
--message-bar-fg-color:var(--text-primary-color);
--message-bar-border-color:rgb(0 0 0 / 0.08);
--undo-button-bg-color:rgb(21 20 26 / 0.07);
--undo-button-bg-color-hover:rgb(21 20 26 / 0.14);
--undo-button-bg-color-active:rgb(21 20 26 / 0.21);
--undo-button-fg-color:var(--message-bar-fg-color);
--undo-button-fg-color-hover:var(--undo-button-fg-color);
--undo-button-fg-color-active:var(--undo-button-fg-color);
--focus-ring-color:#0060df;
--focus-ring-outline:2px solid var(--focus-ring-color);
@media (prefers-color-scheme: dark){
--text-primary-color:#fbfbfe;
--message-bar-icon-color:#73a7f3;
--message-bar-bg-color:#003070;
--message-bar-border-color:rgb(255 255 255 / 0.08);
--undo-button-bg-color:rgb(255 255 255 / 0.08);
--undo-button-bg-color-hover:rgb(255 255 255 / 0.14);
--undo-button-bg-color-active:rgb(255 255 255 / 0.21);
}
@media screen and (forced-colors: active){
--text-primary-color:CanvasText;
--message-bar-icon-color:CanvasText;
--message-bar-bg-color:Canvas;
--message-bar-border-color:CanvasText;
--undo-button-bg-color:ButtonText;
--undo-button-bg-color-hover:SelectedItem;
--undo-button-bg-color-active:SelectedItem;
--undo-button-fg-color:ButtonFace;
--undo-button-fg-color-hover:SelectedItemText;
--undo-button-fg-color-active:SelectedItemText;
--focus-ring-color:CanvasText;
}
position:fixed;
top:50px;
left:50%;
transform:translateX(-50%);
z-index:10;
padding-block:8px;
padding-inline:16px 8px;
font:menu;
font-size:15px;
cursor:default;
button{
cursor:pointer;
}
#editorUndoBarUndoButton{
border-radius:4px;
font-weight:590;
line-height:19.5px;
color:var(--undo-button-fg-color);
border:none;
padding:4px 16px;
margin-inline-start:8px;
height:32px;
background-color:var(--undo-button-bg-color);
&:hover{
background-color:var(--undo-button-bg-color-hover);
color:var(--undo-button-fg-color-hover);
}
&:active{
background-color:var(--undo-button-bg-color-active);
color:var(--undo-button-fg-color-active);
}
}
> div{
align-items:center;
}
}
.dialog{
--dialog-bg-color:white;
--dialog-border-color:white;
--dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
--text-primary-color:#15141a;
--text-secondary-color:#5b5b66;
--hover-filter:brightness(0.9);
--focus-ring-color:#0060df;
--focus-ring-outline:2px solid var(--focus-ring-color);
--link-fg-color:#0060df;
--link-hover-fg-color:#0250bb;
--separator-color:#f0f0f4;
--textarea-border-color:#8f8f9d;
--textarea-bg-color:white;
--textarea-fg-color:var(--text-secondary-color);
--radio-bg-color:#f0f0f4;
--radio-checked-bg-color:#fbfbfe;
--radio-border-color:#8f8f9d;
--radio-checked-border-color:#0060df;
--button-secondary-bg-color:#f0f0f4;
--button-secondary-fg-color:var(--text-primary-color);
--button-secondary-border-color:var(--button-secondary-bg-color);
--button-secondary-hover-bg-color:var(--button-secondary-bg-color);
--button-secondary-hover-fg-color:var(--button-secondary-fg-color);
--button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
--button-primary-bg-color:#0060df;
--button-primary-fg-color:#fbfbfe;
--button-primary-border-color:var(--button-primary-bg-color);
--button-primary-hover-bg-color:var(--button-primary-bg-color);
--button-primary-hover-fg-color:var(--button-primary-fg-color);
--button-primary-hover-border-color:var(--button-primary-hover-bg-color);
@media (prefers-color-scheme: dark){
--dialog-bg-color:#1c1b22;
--dialog-border-color:#1c1b22;
--dialog-shadow:0 2px 14px 0 #15141a;
--text-primary-color:#fbfbfe;
--text-secondary-color:#cfcfd8;
--focus-ring-color:#0df;
--hover-filter:brightness(1.4);
--link-fg-color:#0df;
--link-hover-fg-color:#80ebff;
--separator-color:#52525e;
--textarea-bg-color:#42414d;
--radio-bg-color:#2b2a33;
--radio-checked-bg-color:#15141a;
--radio-checked-border-color:#0df;
--button-secondary-bg-color:#2b2a33;
--button-primary-bg-color:#0df;
--button-primary-fg-color:#15141a;
}
@media screen and (forced-colors: active){
--dialog-bg-color:Canvas;
--dialog-border-color:CanvasText;
--dialog-shadow:none;
--text-primary-color:CanvasText;
--text-secondary-color:CanvasText;
--hover-filter:none;
--focus-ring-color:ButtonBorder;
--link-fg-color:LinkText;
--link-hover-fg-color:LinkText;
--separator-color:CanvasText;
--textarea-border-color:ButtonBorder;
--textarea-bg-color:Field;
--textarea-fg-color:ButtonText;
--radio-bg-color:ButtonFace;
--radio-checked-bg-color:ButtonFace;
--radio-border-color:ButtonText;
--radio-checked-border-color:ButtonText;
--button-secondary-bg-color:ButtonFace;
--button-secondary-fg-color:ButtonText;
--button-secondary-border-color:ButtonText;
--button-secondary-hover-bg-color:AccentColor;
--button-secondary-hover-fg-color:AccentColorText;
--button-primary-bg-color:ButtonText;
--button-primary-fg-color:ButtonFace;
--button-primary-hover-bg-color:AccentColor;
--button-primary-hover-fg-color:AccentColorText;
}
font:message-box;
font-size:13px;
font-weight:400;
line-height:150%;
border-radius:4px;
padding:12px 16px;
border:1px solid var(--dialog-border-color);
background:var(--dialog-bg-color);
color:var(--text-primary-color);
box-shadow:var(--dialog-shadow);
.mainContainer{
*:focus-visible{
outline:var(--focus-ring-outline);
outline-offset:2px;
}
.title{
display:flex;
width:auto;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
gap:12px;
> span{
font-size:13px;
font-style:normal;
font-weight:590;
line-height:150%;
}
}
.dialogSeparator{
width:100%;
height:0;
margin-block:4px;
border-top:1px solid var(--separator-color);
border-bottom:none;
}
.dialogButtonsGroup{
display:flex;
gap:12px;
align-self:flex-end;
}
.radio{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
> .radioButton{
display:flex;
gap:8px;
align-self:stretch;
align-items:center;
input{
appearance:none;
box-sizing:border-box;
width:16px;
height:16px;
border-radius:50%;
background-color:var(--radio-bg-color);
border:1px solid var(--radio-border-color);
&:hover{
filter:var(--hover-filter);
}
&:checked{
background-color:var(--radio-checked-bg-color);
border:4px solid var(--radio-checked-border-color);
}
}
}
> .radioLabel{
display:flex;
padding-inline-start:24px;
align-items:flex-start;
gap:10px;
align-self:stretch;
> span{
flex:1 0 0;
font-size:11px;
color:var(--text-secondary-color);
}
}
}
button:not(:is(.toggle-button, .closeButton)){
border-radius:4px;
border:1px solid;
font:menu;
font-weight:600;
padding:4px 16px;
width:auto;
height:32px;
&:hover{
cursor:pointer;
filter:var(--hover-filter);
}
&.secondaryButton{
color:var(--button-secondary-fg-color);
background-color:var(--button-secondary-bg-color);
border-color:var(--button-secondary-border-color);
&:hover{
color:var(--button-secondary-hover-fg-color);
background-color:var(--button-secondary-hover-bg-color);
border-color:var(--button-secondary-hover-border-color);
}
}
&.primaryButton{
color:var(--button-primary-fg-color);
background-color:var(--button-primary-bg-color);
border-color:var(--button-primary-border-color);
opacity:1;
&:hover{
color:var(--button-primary-hover-fg-color);
background-color:var(--button-primary-hover-bg-color);
border-color:var(--button-primary-hover-border-color);
}
}
}
a{
color:var(--link-fg-color);
&:hover{
color:var(--link-hover-fg-color);
}
}
textarea{
font:inherit;
padding:8px;
resize:none;
margin:0;
box-sizing:border-box;
border-radius:4px;
border:1px solid var(--textarea-border-color);
background:var(--textarea-bg-color);
color:var(--textarea-fg-color);
&:focus{
outline-offset:0;
border-color:transparent;
}
&:disabled{
pointer-events:none;
opacity:0.4;
}
}
.messageBar{
--message-bar-bg-color:#ffebcd;
--message-bar-fg-color:#15141a;
--message-bar-border-color:rgb(0 0 0 / 0.08);
--message-bar-icon:url(images/messageBar_warning.svg);
--message-bar-icon-color:#cd411e;
@media (prefers-color-scheme: dark){
--message-bar-bg-color:#5a3100;
--message-bar-fg-color:#fbfbfe;
--message-bar-border-color:rgb(255 255 255 / 0.08);
--message-bar-icon-color:#e49c49;
}
@media screen and (forced-colors: active){
--message-bar-bg-color:HighlightText;
--message-bar-fg-color:CanvasText;
--message-bar-border-color:CanvasText;
--message-bar-icon-color:CanvasText;
}
align-self:stretch;
> div{
&::before,
> div{
margin-block:4px;
}
> div{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
flex:1 0 0;
.title{
font-size:13px;
font-weight:590;
}
.description{
font-size:13px;
}
}
}
}
.toggler{
display:flex;
align-items:center;
gap:8px;
align-self:stretch;
> .togglerLabel{
user-select:none;
}
}
}
}
.textLayer{
position:absolute;
text-align:initial;
inset:0;
overflow:clip;
opacity:1;
line-height:1;
text-size-adjust:none;
forced-color-adjust:none;
transform-origin:0 0;
caret-color:CanvasText;
z-index:0;
&.highlighting{
touch-action:none;
}
:is(span, br){
color:transparent;
position:absolute;
white-space:pre;
cursor:text;
transform-origin:0% 0%;
}
> :not(.markedContent),
.markedContent span:not(.markedContent){
z-index:1;
}
span[role="img"]{
user-select:none;
cursor:default;
}
.highlight{
--highlight-bg-color:rgb(180 0 170 / 0.25);
--highlight-selected-bg-color:rgb(0 100 0 / 0.25);
--highlight-backdrop-filter:none;
--highlight-selected-backdrop-filter:none;
@media screen and (forced-colors: active){
--highlight-bg-color:transparent;
--highlight-selected-bg-color:transparent;
--highlight-backdrop-filter:var(--hcm-highlight-filter);
--highlight-selected-backdrop-filter:var(
--hcm-highlight-selected-filter
);
}
margin:-1px;
padding:1px;
background-color:var(--highlight-bg-color);
backdrop-filter:var(--highlight-backdrop-filter);
border-radius:4px;
&.appended{
position:initial;
}
&.begin{
border-radius:4px 0 0 4px;
}
&.end{
border-radius:0 4px 4px 0;
}
&.middle{
border-radius:0;
}
&.selected{
background-color:var(--highlight-selected-bg-color);
backdrop-filter:var(--highlight-selected-backdrop-filter);
}
}
::selection{
background:color-mix(in srgb, AccentColor, transparent 75%);
}
.endOfContent{
display:block;
position:absolute;
inset:100% 0 0;
z-index:0;
cursor:default;
user-select:none;
}
&.selecting .endOfContent{
top:0;
}
}
.annotationLayer{
--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>");
--input-focus-border-color:Highlight;
--input-focus-outline:1px solid Canvas;
--input-unfocused-border-color:transparent;
--input-disabled-border-color:transparent;
--input-hover-border-color:black;
--link-outline:none;
@media screen and (forced-colors: active){
--input-focus-border-color:CanvasText;
--input-unfocused-border-color:ActiveText;
--input-disabled-border-color:GrayText;
--input-hover-border-color:Highlight;
--link-outline:1.5px solid LinkText;
.textWidgetAnnotation :is(input, textarea):required,
.choiceWidgetAnnotation select:required,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
outline:1.5px solid selectedItem;
}
.linkAnnotation{
outline:var(--link-outline);
&:hover{
backdrop-filter:var(--hcm-highlight-filter);
}
& > a:hover{
opacity:0 !important;
background:none !important;
box-shadow:none;
}
}
.popupAnnotation .popup{
outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
background-color:ButtonFace !important;
color:ButtonText !important;
}
.highlightArea:hover::after{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backdrop-filter:var(--hcm-highlight-filter);
content:"";
pointer-events:none;
}
.popupAnnotation.focused .popup{
outline:calc(3px * var(--scale-factor)) solid Highlight !important;
}
}
position:absolute;
top:0;
left:0;
pointer-events:none;
transform-origin:0 0;
&[data-main-rotation="90"] .norotate{
transform:rotate(270deg) translateX(-100%);
}
&[data-main-rotation="180"] .norotate{
transform:rotate(180deg) translate(-100%, -100%);
}
&[data-main-rotation="270"] .norotate{
transform:rotate(90deg) translateY(-100%);
}
&.disabled{
section,
.popup{
pointer-events:none;
}
}
.annotationContent{
position:absolute;
width:100%;
height:100%;
pointer-events:none;
&.freetext{
background:transparent;
border:none;
inset:0;
overflow:visible;
white-space:nowrap;
font:10px sans-serif;
line-height:1.35;
user-select:none;
}
}
section{
position:absolute;
text-align:initial;
pointer-events:auto;
box-sizing:border-box;
transform-origin:0 0;
&:has(div.annotationContent){
canvas.annotationContent{
display:none;
}
}
}
.textLayer.selecting ~ & section{
pointer-events:none;
}
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
position:absolute;
font-size:1em;
top:0;
left:0;
width:100%;
height:100%;
}
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
> a:hover{
opacity:0.2;
background-color:rgb(255 255 0);
box-shadow:0 2px 10px rgb(255 255 0);
}
.linkAnnotation.hasBorder:hover{
background-color:rgb(255 255 0 / 0.2);
}
.hasBorder{
background-size:100% 100%;
}
.textAnnotation img{
position:absolute;
cursor:pointer;
width:100%;
height:100%;
top:0;
left:0;
}
.textWidgetAnnotation :is(input, textarea),
.choiceWidgetAnnotation select,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
background-image:var(--annotation-unfocused-field-background);
border:2px solid var(--input-unfocused-border-color);
box-sizing:border-box;
font:calc(9px * var(--scale-factor)) sans-serif;
height:100%;
margin:0;
vertical-align:top;
width:100%;
}
.textWidgetAnnotation :is(input, textarea):required,
.choiceWidgetAnnotation select:required,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
outline:1.5px solid red;
}
.choiceWidgetAnnotation select option{
padding:0;
}
.buttonWidgetAnnotation.radioButton input{
border-radius:50%;
}
.textWidgetAnnotation textarea{
resize:none;
}
.textWidgetAnnotation :is(input, textarea)[disabled],
.choiceWidgetAnnotation select[disabled],
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
background:none;
border:2px solid var(--input-disabled-border-color);
cursor:not-allowed;
}
.textWidgetAnnotation :is(input, textarea):hover,
.choiceWidgetAnnotation select:hover,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
border:2px solid var(--input-hover-border-color);
}
.textWidgetAnnotation :is(input, textarea):hover,
.choiceWidgetAnnotation select:hover,
.buttonWidgetAnnotation.checkBox input:hover{
border-radius:2px;
}
.textWidgetAnnotation :is(input, textarea):focus,
.choiceWidgetAnnotation select:focus{
background:none;
border:2px solid var(--input-focus-border-color);
border-radius:2px;
outline:var(--input-focus-outline);
}
.buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
background-image:none;
background-color:transparent;
}
.buttonWidgetAnnotation.checkBox :focus{
border:2px solid var(--input-focus-border-color);
border-radius:2px;
outline:var(--input-focus-outline);
}
.buttonWidgetAnnotation.radioButton :focus{
border:2px solid var(--input-focus-border-color);
outline:var(--input-focus-outline);
}
.buttonWidgetAnnotation.checkBox input:checked::before,
.buttonWidgetAnnotation.checkBox input:checked::after,
.buttonWidgetAnnotation.radioButton input:checked::before{
background-color:CanvasText;
content:"";
display:block;
position:absolute;
}
.buttonWidgetAnnotation.checkBox input:checked::before,
.buttonWidgetAnnotation.checkBox input:checked::after{
height:80%;
left:45%;
width:1px;
}
.buttonWidgetAnnotation.checkBox input:checked::before{
transform:rotate(45deg);
}
.buttonWidgetAnnotation.checkBox input:checked::after{
transform:rotate(-45deg);
}
.buttonWidgetAnnotation.radioButton input:checked::before{
border-radius:50%;
height:50%;
left:25%;
top:25%;
width:50%;
}
.textWidgetAnnotation input.comb{
font-family:monospace;
padding-left:2px;
padding-right:0;
}
.textWidgetAnnotation input.comb:focus{
width:103%;
}
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
appearance:none;
}
.fileAttachmentAnnotation .popupTriggerArea{
height:100%;
width:100%;
}
.popupAnnotation{
position:absolute;
font-size:calc(9px * var(--scale-factor));
pointer-events:none;
width:max-content;
max-width:45%;
height:auto;
}
.popup{
background-color:rgb(255 255 153);
box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
border-radius:calc(2px * var(--scale-factor));
outline:1.5px solid rgb(255 255 74);
padding:calc(6px * var(--scale-factor));
cursor:pointer;
font:message-box;
white-space:normal;
word-wrap:break-word;
pointer-events:auto;
}
.popupAnnotation.focused .popup{
outline-width:3px;
}
.popup *{
font-size:calc(9px * var(--scale-factor));
}
.popup > .header{
display:inline-block;
}
.popup > .header h1{
display:inline;
}
.popup > .header .popupDate{
display:inline-block;
margin-left:calc(5px * var(--scale-factor));
width:fit-content;
}
.popupContent{
border-top:1px solid rgb(51 51 51);
margin-top:calc(2px * var(--scale-factor));
padding-top:calc(2px * var(--scale-factor));
}
.richText > *{
white-space:pre-wrap;
font-size:calc(9px * var(--scale-factor));
}
.popupTriggerArea{
cursor:pointer;
}
section svg{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.annotationTextContent{
position:absolute;
width:100%;
height:100%;
opacity:0;
color:transparent;
user-select:none;
pointer-events:none;
span{
width:100%;
display:inline-block;
}
}
svg.quadrilateralsContainer{
contain:strict;
width:0;
height:0;
position:absolute;
top:0;
left:0;
z-index:-1;
}
}
:root{
--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>");
--xfa-focus-outline:auto;
}
@media screen and (forced-colors: active){
:root{
--xfa-focus-outline:2px solid CanvasText;
}
.xfaLayer *:required{
outline:1.5px solid selectedItem;
}
}
.xfaLayer{
background-color:transparent;
}
.xfaLayer .highlight{
margin:-1px;
padding:1px;
background-color:rgb(239 203 237);
border-radius:4px;
}
.xfaLayer .highlight.appended{
position:initial;
}
.xfaLayer .highlight.begin{
border-radius:4px 0 0 4px;
}
.xfaLayer .highlight.end{
border-radius:0 4px 4px 0;
}
.xfaLayer .highlight.middle{
border-radius:0;
}
.xfaLayer .highlight.selected{
background-color:rgb(203 223 203);
}
.xfaPage{
overflow:hidden;
position:relative;
}
.xfaContentarea{
position:absolute;
}
.xfaPrintOnly{
display:none;
}
.xfaLayer{
position:absolute;
text-align:initial;
top:0;
left:0;
transform-origin:0 0;
line-height:1.2;
}
.xfaLayer *{
color:inherit;
font:inherit;
font-style:inherit;
font-weight:inherit;
font-kerning:inherit;
letter-spacing:-0.01px;
text-align:inherit;
text-decoration:inherit;
box-sizing:border-box;
background-color:transparent;
padding:0;
margin:0;
pointer-events:auto;
line-height:inherit;
}
.xfaLayer *:required{
outline:1.5px solid red;
}
.xfaLayer div,
.xfaLayer svg,
.xfaLayer svg *{
pointer-events:none;
}
.xfaLayer a{
color:blue;
}
.xfaRich li{
margin-left:3em;
}
.xfaFont{
color:black;
font-weight:normal;
font-kerning:none;
font-size:10px;
font-style:normal;
letter-spacing:0;
text-decoration:none;
vertical-align:0;
}
.xfaCaption{
overflow:hidden;
flex:0 0 auto;
}
.xfaCaptionForCheckButton{
overflow:hidden;
flex:1 1 auto;
}
.xfaLabel{
height:100%;
width:100%;
}
.xfaLeft{
display:flex;
flex-direction:row;
align-items:center;
}
.xfaRight{
display:flex;
flex-direction:row-reverse;
align-items:center;
}
:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
max-height:100%;
}
.xfaTop{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.xfaBottom{
display:flex;
flex-direction:column-reverse;
align-items:flex-start;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
width:100%;
}
.xfaBorder{
background-color:transparent;
position:absolute;
pointer-events:none;
}
.xfaWrapped{
width:100%;
height:100%;
}
:is(.xfaTextfield, .xfaSelect):focus{
background-image:none;
background-color:transparent;
outline:var(--xfa-focus-outline);
outline-offset:-1px;
}
:is(.xfaCheckbox, .xfaRadio):focus{
outline:var(--xfa-focus-outline);
}
.xfaTextfield,
.xfaSelect{
height:100%;
width:100%;
flex:1 1 auto;
border:none;
resize:none;
background-image:var(--xfa-unfocused-field-background);
}
.xfaSelect{
padding-inline:2px;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
flex:0 1 auto;
}
.xfaButton{
cursor:pointer;
width:100%;
height:100%;
border:none;
text-align:center;
}
.xfaLink{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.xfaCheckbox,
.xfaRadio{
width:100%;
height:100%;
flex:0 0 auto;
border:none;
}
.xfaRich{
white-space:pre-wrap;
width:100%;
height:100%;
}
.xfaImage{
object-position:left top;
object-fit:contain;
width:100%;
height:100%;
}
.xfaLrTb,
.xfaRlTb,
.xfaTb{
display:flex;
flex-direction:column;
align-items:stretch;
}
.xfaLr{
display:flex;
flex-direction:row;
align-items:stretch;
}
.xfaRl{
display:flex;
flex-direction:row-reverse;
align-items:stretch;
}
.xfaTb > div{
justify-content:left;
}
.xfaPosition{
position:relative;
}
.xfaArea{
position:relative;
}
.xfaValignMiddle{
display:flex;
align-items:center;
}
.xfaTable{
display:flex;
flex-direction:column;
align-items:stretch;
}
.xfaTable .xfaRow{
display:flex;
flex-direction:row;
align-items:stretch;
}
.xfaTable .xfaRlRow{
display:flex;
flex-direction:row-reverse;
align-items:stretch;
flex:1;
}
.xfaTable .xfaRlRow > div{
flex:1;
}
:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
background:initial;
}
@media print{
.xfaTextfield,
.xfaSelect{
background:transparent;
}
.xfaSelect{
appearance:none;
text-indent:1px;
text-overflow:"";
}
}
.canvasWrapper{
svg{
transform:none;
&.moving{
z-index:100000;
}
&.highlight,
&.highlightOutline{
&[data-main-rotation="90"]{
mask,
use:not(.clip, .mask){
transform:matrix(0, 1, -1, 0, 1, 0);
}
}
&[data-main-rotation="180"]{
mask,
use:not(.clip, .mask){
transform:matrix(-1, 0, 0, -1, 1, 1);
}
}
&[data-main-rotation="270"]{
mask,
use:not(.clip, .mask){
transform:matrix(0, -1, 1, 0, 0, 1);
}
}
}
&.draw{
position:absolute;
mix-blend-mode:normal;
&[data-draw-rotation="90"]{
transform:rotate(90deg);
}
&[data-draw-rotation="180"]{
transform:rotate(180deg);
}
&[data-draw-rotation="270"]{
transform:rotate(270deg);
}
}
&.highlight{
--blend-mode:multiply;
@media screen and (forced-colors: active){
--blend-mode:difference;
}
position:absolute;
mix-blend-mode:var(--blend-mode);
&:not(.free){
fill-rule:evenodd;
}
}
&.highlightOutline{
position:absolute;
mix-blend-mode:normal;
fill-rule:evenodd;
fill:none;
&:not(.free){
&.hovered:not(.selected){
stroke:var(--hover-outline-color);
stroke-width:var(--outline-width);
}
&.selected{
.mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
var(--outline-width) + 2 * var(--outline-around-width)
);
}
.secondaryOutline{
stroke:var(--outline-color);
stroke-width:var(--outline-width);
}
}
}
&.free{
&.hovered:not(.selected){
stroke:var(--hover-outline-color);
stroke-width:calc(2 * var(--outline-width));
}
&.selected{
.mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
2 * (var(--outline-width) + var(--outline-around-width))
);
}
.secondaryOutline{
stroke:var(--outline-color);
stroke-width:calc(2 * var(--outline-width));
}
}
}
}
}
}
.toggle-button{
--button-background-color:#f0f0f4;
--button-background-color-hover:#e0e0e6;
--button-background-color-active:#cfcfd8;
--color-accent-primary:#0060df;
--color-accent-primary-hover:#0250bb;
--color-accent-primary-active:#054096;
--border-interactive-color:#8f8f9d;
--border-radius-circle:9999px;
--border-width:1px;
--size-item-small:16px;
--size-item-large:32px;
--color-canvas:white;
@media (prefers-color-scheme: dark){
--button-background-color:color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover:color-mix(
in srgb,
currentColor 14%,
transparent
);
--button-background-color-active:color-mix(
in srgb,
currentColor 21%,
transparent
);
--color-accent-primary:#0df;
--color-accent-primary-hover:#80ebff;
--color-accent-primary-active:#aaf2ff;
--border-interactive-color:#bfbfc9;
--color-canvas:#1c1b22;
}
@media (forced-colors: active){
--color-accent-primary:ButtonText;
--color-accent-primary-hover:SelectedItem;
--color-accent-primary-active:SelectedItem;
--border-interactive-color:ButtonText;
--button-background-color:ButtonFace;
--border-interactive-color-hover:SelectedItem;
--border-interactive-color-active:SelectedItem;
--border-interactive-color-disabled:GrayText;
--color-canvas:ButtonText;
}
--toggle-background-color:var(--button-background-color);
--toggle-background-color-hover:var(--button-background-color-hover);
--toggle-background-color-active:var(--button-background-color-active);
--toggle-background-color-pressed:var(--color-accent-primary);
--toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
--toggle-background-color-pressed-active:var(--color-accent-primary-active);
--toggle-border-color:var(--border-interactive-color);
--toggle-border-color-hover:var(--toggle-border-color);
--toggle-border-color-active:var(--toggle-border-color);
--toggle-border-radius:var(--border-radius-circle);
--toggle-border-width:var(--border-width);
--toggle-height:var(--size-item-small);
--toggle-width:var(--size-item-large);
--toggle-dot-background-color:var(--toggle-border-color);
--toggle-dot-background-color-hover:var(--toggle-dot-background-color);
--toggle-dot-background-color-active:var(--toggle-dot-background-color);
--toggle-dot-background-color-on-pressed:var(--color-canvas);
--toggle-dot-margin:1px;
--toggle-dot-height:calc(
var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
var(--toggle-border-width)
);
--toggle-dot-width:var(--toggle-dot-height);
--toggle-dot-transform-x:calc(
var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
);
appearance:none;
padding:0;
margin:0;
border:var(--toggle-border-width) solid var(--toggle-border-color);
height:var(--toggle-height);
width:var(--toggle-width);
border-radius:var(--toggle-border-radius);
background:var(--toggle-background-color);
box-sizing:border-box;
flex-shrink:0;
&:focus-visible{
outline:var(--focus-outline);
outline-offset:var(--focus-outline-offset);
}
&:enabled:hover{
background:var(--toggle-background-color-hover);
border-color:var(--toggle-border-color);
}
&:enabled:active{
background:var(--toggle-background-color-active);
border-color:var(--toggle-border-color);
}
&[aria-pressed="true"]{
background:var(--toggle-background-color-pressed);
border-color:transparent;
}
&[aria-pressed="true"]:enabled:hover{
background:var(--toggle-background-color-pressed-hover);
border-color:transparent;
}
&[aria-pressed="true"]:enabled:active{
background:var(--toggle-background-color-pressed-active);
border-color:transparent;
}
&::before{
display:block;
content:"";
background-color:var(--toggle-dot-background-color);
height:var(--toggle-dot-height);
width:var(--toggle-dot-width);
margin:var(--toggle-dot-margin);
border-radius:var(--toggle-border-radius);
translate:0;
}
&[aria-pressed="true"]::before{
translate:var(--toggle-dot-transform-x);
background-color:var(--toggle-dot-background-color-on-pressed);
}
&[aria-pressed="true"]:enabled:hover::before,
&[aria-pressed="true"]:enabled:active::before{
background-color:var(--toggle-dot-background-color-on-pressed);
}
&[aria-pressed="true"]:-moz-locale-dir(rtl)::before,
&[aria-pressed="true"]:dir(rtl)::before{
translate:calc(-1 * var(--toggle-dot-transform-x));
}
@media (prefers-reduced-motion: no-preference){
&::before{
transition:translate 100ms;
}
}
@media (prefers-contrast){
&:enabled:hover{
border-color:var(--toggle-border-color-hover);
}
&:enabled:active{
border-color:var(--toggle-border-color-active);
}
&[aria-pressed="true"]:enabled{
border-color:var(--toggle-border-color);
position:relative;
}
&[aria-pressed="true"]:enabled:hover,
&[aria-pressed="true"]:enabled:hover:active{
border-color:var(--toggle-border-color-hover);
}
&[aria-pressed="true"]:enabled:active{
background-color:var(--toggle-dot-background-color-active);
border-color:var(--toggle-dot-background-color-hover);
}
&:hover::before,
&:active::before{
background-color:var(--toggle-dot-background-color-hover);
}
}
@media (forced-colors){
--toggle-dot-background-color:var(--color-accent-primary);
--toggle-dot-background-color-hover:var(--color-accent-primary-hover);
--toggle-dot-background-color-active:var(--color-accent-primary-active);
--toggle-dot-background-color-on-pressed:var(--button-background-color);
--toggle-background-color-disabled:var(--button-background-color-disabled);
--toggle-border-color-hover:var(--border-interactive-color-hover);
--toggle-border-color-active:var(--border-interactive-color-active);
--toggle-border-color-disabled:var(--border-interactive-color-disabled);
&[aria-pressed="true"]:enabled::after{
border:1px solid var(--button-background-color);
content:"";
position:absolute;
height:var(--toggle-height);
width:var(--toggle-width);
display:block;
border-radius:var(--toggle-border-radius);
inset:-2px;
}
&[aria-pressed="true"]:enabled:active::after{
border-color:var(--toggle-border-color-active);
}
}
}
:root{
--outline-width:2px;
--outline-color:#0060df;
--outline-around-width:1px;
--outline-around-color:#f0f0f4;
--hover-outline-around-color:var(--outline-around-color);
--focus-outline:solid var(--outline-width) var(--outline-color);
--unfocus-outline:solid var(--outline-width) transparent;
--focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
--hover-outline-color:#8f8f9d;
--hover-outline:solid var(--outline-width) var(--hover-outline-color);
--hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
--freetext-line-height:1.35;
--freetext-padding:2px;
--resizer-bg-color:var(--outline-color);
--resizer-size:6px;
--resizer-shift:calc(
0px - (var(--outline-width) + var(--resizer-size)) / 2 -
var(--outline-around-width)
);
--editorFreeText-editing-cursor:text;
--editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
--editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
--editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
--new-alt-text-warning-image:url(images/altText_warning.svg);
}
.visuallyHidden{
position:absolute;
top:0;
left:0;
border:0;
margin:0;
padding:0;
width:0;
height:0;
overflow:hidden;
white-space:nowrap;
font-size:0;
}
.textLayer{
&.highlighting{
cursor:var(--editorFreeHighlight-editing-cursor);
&:not(.free) span{
cursor:var(--editorHighlight-editing-cursor);
&[role="img"]{
cursor:var(--editorFreeHighlight-editing-cursor);
}
}
&.free span{
cursor:var(--editorFreeHighlight-editing-cursor);
}
}
}
#viewerContainer.pdfPresentationMode:fullscreen,
.annotationEditorLayer.disabled{
.noAltTextBadge{
display:none !important;
}
}
@media (min-resolution: 1.1dppx){
:root{
--editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
}
}
@media screen and (forced-colors: active){
:root{
--outline-color:CanvasText;
--outline-around-color:ButtonFace;
--resizer-bg-color:ButtonText;
--hover-outline-color:Highlight;
--hover-outline-around-color:SelectedItemText;
}
}
[data-editor-rotation="90"]{
transform:rotate(90deg);
}
[data-editor-rotation="180"]{
transform:rotate(180deg);
}
[data-editor-rotation="270"]{
transform:rotate(270deg);
}
.annotationEditorLayer{
background:transparent;
position:absolute;
inset:0;
font-size:calc(100px * var(--scale-factor));
transform-origin:0 0;
cursor:auto;
.selectedEditor{
z-index:100000 !important;
}
&.drawing *{
pointer-events:none !important;
}
}
.annotationEditorLayer.waiting{
content:"";
cursor:wait;
position:absolute;
inset:0;
width:100%;
height:100%;
}
.annotationEditorLayer.disabled{
pointer-events:none;
}
.annotationEditorLayer.freetextEditing{
cursor:var(--editorFreeText-editing-cursor);
}
.annotationEditorLayer.inkEditing{
cursor:var(--editorInk-editing-cursor);
touch-action:none;
}
.annotationEditorLayer .draw{
box-sizing:border-box;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
position:absolute;
background:transparent;
z-index:1;
transform-origin:0 0;
cursor:auto;
max-width:100%;
max-height:100%;
border:var(--unfocus-outline);
&.draggable.selectedEditor{
cursor:move;
}
&.selectedEditor{
border:var(--focus-outline);
outline:var(--focus-outline-around);
&::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
pointer-events:none;
}
}
&:hover:not(.selectedEditor){
border:var(--hover-outline);
outline:var(--hover-outline-around);
&::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
}
}
}
.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
.textLayer{
.editToolbar{
--editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
--editor-toolbar-bg-color:#f0f0f4;
--editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
--editor-toolbar-fg-color:#2e2e56;
--editor-toolbar-border-color:#8f8f9d;
--editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
--editor-toolbar-hover-bg-color:#e0e0e6;
--editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline:none;
--editor-toolbar-focus-outline-color:#0060df;
--editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
--editor-toolbar-vert-offset:6px;
--editor-toolbar-height:28px;
--editor-toolbar-padding:2px;
--alt-text-done-color:#2ac3a2;
--alt-text-warning-color:#0090ed;
--alt-text-hover-done-color:var(--alt-text-done-color);
--alt-text-hover-warning-color:var(--alt-text-warning-color);
@media (prefers-color-scheme: dark){
--editor-toolbar-bg-color:#2b2a33;
--editor-toolbar-fg-color:#fbfbfe;
--editor-toolbar-hover-bg-color:#52525e;
--editor-toolbar-focus-outline-color:#0df;
--alt-text-done-color:#54ffbd;
--alt-text-warning-color:#80ebff;
}
@media screen and (forced-colors: active){
--editor-toolbar-bg-color:ButtonFace;
--editor-toolbar-fg-color:ButtonText;
--editor-toolbar-border-color:ButtonText;
--editor-toolbar-hover-border-color:AccentColor;
--editor-toolbar-hover-bg-color:ButtonFace;
--editor-toolbar-hover-fg-color:AccentColor;
--editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
--editor-toolbar-focus-outline-color:ButtonBorder;
--editor-toolbar-shadow:none;
--alt-text-done-color:var(--editor-toolbar-fg-color);
--alt-text-warning-color:var(--editor-toolbar-fg-color);
--alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color);
--alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color);
}
display:flex;
width:fit-content;
height:var(--editor-toolbar-height);
flex-direction:column;
justify-content:center;
align-items:center;
cursor:default;
pointer-events:auto;
box-sizing:content-box;
padding:var(--editor-toolbar-padding);
position:absolute;
inset-inline-end:0;
inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
border-radius:6px;
background-color:var(--editor-toolbar-bg-color);
border:1px solid var(--editor-toolbar-border-color);
box-shadow:var(--editor-toolbar-shadow);
&.hidden{
display:none;
}
&:has(:focus-visible){
border-color:transparent;
}
&:dir(ltr){
transform-origin:100% 0;
}
&:dir(rtl){
transform-origin:0 0;
}
.buttons{
display:flex;
justify-content:center;
align-items:center;
gap:0;
height:100%;
button{
padding:0;
}
.divider{
width:0;
height:calc(
2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
);
border-left:1px solid var(--editor-toolbar-border-color);
border-right:none;
display:inline-block;
margin-inline:2px;
}
.highlightButton{
width:var(--editor-toolbar-height);
&::before{
content:"";
mask-image:var(--editor-toolbar-highlight-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
}
.delete{
width:var(--editor-toolbar-height);
&::before{
content:"";
mask-image:var(--editor-toolbar-delete-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
}
> *{
height:var(--editor-toolbar-height);
}
> :not(.divider){
border:none;
background-color:transparent;
cursor:pointer;
&:hover{
border-radius:2px;
background-color:var(--editor-toolbar-hover-bg-color);
color:var(--editor-toolbar-hover-fg-color);
outline:var(--editor-toolbar-hover-outline);
outline-offset:1px;
&:active{
outline:none;
}
}
&:focus-visible{
border-radius:2px;
outline:2px solid var(--editor-toolbar-focus-outline-color);
}
}
.altText{
--alt-text-add-image:url(images/altText_add.svg);
--alt-text-done-image:url(images/altText_done.svg);
display:flex;
align-items:center;
justify-content:center;
width:max-content;
padding-inline:8px;
pointer-events:all;
font:menu;
font-weight:590;
font-size:12px;
color:var(--editor-toolbar-fg-color);
&:disabled{
pointer-events:none;
}
&::before{
content:"";
mask-image:var(--alt-text-add-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
width:12px;
height:13px;
background-color:var(--editor-toolbar-fg-color);
margin-inline-end:4px;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
&.done::before{
mask-image:var(--alt-text-done-image);
}
&.new{
&::before{
width:16px;
height:16px;
mask-image:var(--new-alt-text-warning-image);
background-color:var(--alt-text-warning-color);
mask-size:cover;
}
&:hover::before{
background-color:var(--alt-text-hover-warning-color);
}
&.done{
&::before{
mask-image:var(--alt-text-done-image);
background-color:var(--alt-text-done-color);
}
&:hover::before{
background-color:var(--alt-text-hover-done-color);
}
}
}
.tooltip{
display:none;
word-wrap:anywhere;
&.show{
--alt-text-tooltip-bg:#f0f0f4;
--alt-text-tooltip-fg:#15141a;
--alt-text-tooltip-border:#8f8f9d;
--alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
@media (prefers-color-scheme: dark){
--alt-text-tooltip-bg:#1c1b22;
--alt-text-tooltip-fg:#fbfbfe;
--alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
}
@media screen and (forced-colors: active){
--alt-text-tooltip-bg:Canvas;
--alt-text-tooltip-fg:CanvasText;
--alt-text-tooltip-border:CanvasText;
--alt-text-tooltip-shadow:none;
}
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:absolute;
top:calc(100% + 2px);
inset-inline-start:0;
padding-block:2px 3px;
padding-inline:3px;
max-width:300px;
width:max-content;
height:auto;
font-size:12px;
border:0.5px solid var(--alt-text-tooltip-border);
background:var(--alt-text-tooltip-bg);
box-shadow:var(--alt-text-tooltip-shadow);
color:var(--alt-text-tooltip-fg);
pointer-events:none;
}
}
}
}
}
}
.annotationEditorLayer .freeTextEditor{
padding:calc(var(--freetext-padding) * var(--scale-factor));
width:auto;
height:auto;
touch-action:none;
}
.annotationEditorLayer .freeTextEditor .internal{
background:transparent;
border:none;
inset:0;
overflow:visible;
white-space:nowrap;
font:10px sans-serif;
line-height:var(--freetext-line-height);
user-select:none;
}
.annotationEditorLayer .freeTextEditor .overlay{
position:absolute;
display:none;
background:transparent;
inset:0;
width:100%;
height:100%;
}
.annotationEditorLayer freeTextEditor .overlay.enabled{
display:block;
}
.annotationEditorLayer .freeTextEditor .internal:empty::before{
content:attr(default-content);
color:gray;
}
.annotationEditorLayer .freeTextEditor .internal:focus{
outline:none;
user-select:auto;
}
.annotationEditorLayer .inkEditor{
width:100%;
height:100%;
}
.annotationEditorLayer .inkEditor.editing{
cursor:inherit;
}
.annotationEditorLayer .inkEditor .inkEditorCanvas{
position:absolute;
inset:0;
width:100%;
height:100%;
touch-action:none;
}
.annotationEditorLayer .stampEditor{
width:auto;
height:auto;
canvas{
position:absolute;
width:100%;
height:100%;
margin:0;
top:0;
left:0;
}
.noAltTextBadge{
--no-alt-text-badge-border-color:#f0f0f4;
--no-alt-text-badge-bg-color:#cfcfd8;
--no-alt-text-badge-fg-color:#5b5b66;
@media (prefers-color-scheme: dark){
--no-alt-text-badge-border-color:#52525e;
--no-alt-text-badge-bg-color:#fbfbfe;
--no-alt-text-badge-fg-color:#15141a;
}
@media screen and (forced-colors: active){
--no-alt-text-badge-border-color:ButtonText;
--no-alt-text-badge-bg-color:ButtonFace;
--no-alt-text-badge-fg-color:ButtonText;
}
position:absolute;
inset-inline-end:5px;
inset-block-end:5px;
display:inline-flex;
width:32px;
height:32px;
padding:3px;
justify-content:center;
align-items:center;
pointer-events:none;
z-index:1;
border-radius:2px;
border:1px solid var(--no-alt-text-badge-border-color);
background:var(--no-alt-text-badge-bg-color);
&::before{
content:"";
display:inline-block;
width:16px;
height:16px;
mask-image:var(--new-alt-text-warning-image);
mask-size:cover;
background-color:var(--no-alt-text-badge-fg-color);
}
}
}
.annotationEditorLayer{
:is(.freeTextEditor, .inkEditor, .stampEditor){
& > .resizers{
position:absolute;
inset:0;
&.hidden{
display:none;
}
& > .resizer{
width:var(--resizer-size);
height:var(--resizer-size);
background:content-box var(--resizer-bg-color);
border:var(--focus-outline-around);
border-radius:2px;
position:absolute;
&.topLeft{
top:var(--resizer-shift);
left:var(--resizer-shift);
}
&.topMiddle{
top:var(--resizer-shift);
left:calc(50% + var(--resizer-shift));
}
&.topRight{
top:var(--resizer-shift);
right:var(--resizer-shift);
}
&.middleRight{
top:calc(50% + var(--resizer-shift));
right:var(--resizer-shift);
}
&.bottomRight{
bottom:var(--resizer-shift);
right:var(--resizer-shift);
}
&.bottomMiddle{
bottom:var(--resizer-shift);
left:calc(50% + var(--resizer-shift));
}
&.bottomLeft{
bottom:var(--resizer-shift);
left:var(--resizer-shift);
}
&.middleLeft{
top:calc(50% + var(--resizer-shift));
left:var(--resizer-shift);
}
}
}
}
&[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]),
&[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]),
&[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]),
&[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]){
& > .resizers > .resizer{
&.topLeft,
&.bottomRight{
cursor:nwse-resize;
}
&.topMiddle,
&.bottomMiddle{
cursor:ns-resize;
}
&.topRight,
&.bottomLeft{
cursor:nesw-resize;
}
&.middleRight,
&.middleLeft{
cursor:ew-resize;
}
}
}
&[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]),
&[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]),
&[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]),
&[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]){
& > .resizers > .resizer{
&.topLeft,
&.bottomRight{
cursor:nesw-resize;
}
&.topMiddle,
&.bottomMiddle{
cursor:ew-resize;
}
&.topRight,
&.bottomLeft{
cursor:nwse-resize;
}
&.middleRight,
&.middleLeft{
cursor:ns-resize;
}
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="90"],
[data-main-rotation="90"] [data-editor-rotation="0"],
[data-main-rotation="180"] [data-editor-rotation="270"],
[data-main-rotation="270"] [data-editor-rotation="180"]
){
.editToolbar{
rotate:270deg;
&:dir(ltr){
inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
&:dir(rtl){
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="180"],
[data-main-rotation="90"] [data-editor-rotation="90"],
[data-main-rotation="180"] [data-editor-rotation="0"],
[data-main-rotation="270"] [data-editor-rotation="270"]
){
.editToolbar{
rotate:180deg;
inset-inline-end:100%;
inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="270"],
[data-main-rotation="90"] [data-editor-rotation="180"],
[data-main-rotation="180"] [data-editor-rotation="90"],
[data-main-rotation="270"] [data-editor-rotation="0"]
){
.editToolbar{
rotate:90deg;
&:dir(ltr){
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:100%;
}
&:dir(rtl){
inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
}
}
}
.dialog.altText{
&::backdrop{
mask:url(#alttext-manager-mask);
}
&.positioned{
margin:0;
}
& #altTextContainer{
width:300px;
height:fit-content;
display:inline-flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
& #overallDescription{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
align-self:stretch;
& span{
align-self:stretch;
}
& .title{
font-size:13px;
font-style:normal;
font-weight:590;
}
}
& #addDescription{
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
& .descriptionArea{
flex:1;
padding-inline:24px 10px;
textarea{
width:100%;
min-height:75px;
}
}
}
& #buttons{
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:8px;
align-self:stretch;
}
}
}
.dialog.newAltText{
--new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg);
--new-alt-text-spinner-icon:url(images/altText_spinner.svg);
--preview-image-bg-color:#f0f0f4;
--preview-image-border:none;
@media (prefers-color-scheme: dark){
--preview-image-bg-color:#2b2a33;
}
@media screen and (forced-colors: active){
--preview-image-bg-color:ButtonFace;
--preview-image-border:1px solid ButtonText;
}
width:80%;
max-width:570px;
min-width:300px;
padding:0;
&.noAi{
#newAltTextDisclaimer,
#newAltTextCreateAutomatically{
display:none !important;
}
}
&.aiInstalling{
#newAltTextCreateAutomatically{
display:none !important;
}
#newAltTextDownloadModel{
display:flex !important;
}
}
&.error{
#newAltTextNotNow{
display:none !important;
}
#newAltTextCancel{
display:inline-block !important;
}
}
&:not(.error) #newAltTextError{
display:none !important;
}
#newAltTextContainer{
display:flex;
width:auto;
padding:16px;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
gap:12px;
flex:0 1 auto;
line-height:normal;
#mainContent{
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:12px;
align-self:stretch;
flex:1 1 auto;
#descriptionAndSettings{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
flex:1 0 0;
align-self:stretch;
}
#descriptionInstruction{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
align-self:stretch;
flex:1 1 auto;
#newAltTextDescriptionContainer{
width:100%;
height:70px;
position:relative;
textarea{
width:100%;
height:100%;
padding:8px;
&::placeholder{
color:var(--text-secondary-color);
}
}
.altTextSpinner{
display:none;
position:absolute;
width:16px;
height:16px;
inset-inline-start:8px;
inset-block-start:8px;
mask-size:cover;
background-color:var(--text-secondary-color);
pointer-events:none;
}
&.loading{
textarea::placeholder{
color:transparent;
}
.altTextSpinner{
display:inline-block;
mask-image:var(--new-alt-text-spinner-icon);
}
}
}
#newAltTextDescription{
font-size:11px;
}
#newAltTextDisclaimer{
display:flex;
flex-direction:row;
align-items:flex-start;
gap:4px;
font-size:11px;
&::before{
content:"";
display:inline-block;
width:17px;
height:16px;
mask-image:var(--new-alt-text-ai-disclaimer-icon);
mask-size:cover;
background-color:var(--text-secondary-color);
flex:1 0 auto;
}
}
}
#newAltTextDownloadModel{
display:flex;
align-items:center;
gap:4px;
align-self:stretch;
&::before{
content:"";
display:inline-block;
width:16px;
height:16px;
mask-image:var(--new-alt-text-spinner-icon);
mask-size:cover;
background-color:var(--text-secondary-color);
}
}
#newAltTextImagePreview{
width:180px;
aspect-ratio:1;
display:flex;
justify-content:center;
align-items:center;
flex:0 0 auto;
background-color:var(--preview-image-bg-color);
border:var(--preview-image-border);
> canvas{
max-width:100%;
max-height:100%;
}
}
}
}
}
.colorPicker{
--hover-outline-color:#0250bb;
--selected-outline-color:#0060df;
--swatch-border-color:#cfcfd8;
@media (prefers-color-scheme: dark){
--hover-outline-color:#80ebff;
--selected-outline-color:#aaf2ff;
--swatch-border-color:#52525e;
}
@media screen and (forced-colors: active){
--hover-outline-color:Highlight;
--selected-outline-color:var(--hover-outline-color);
--swatch-border-color:ButtonText;
}
.swatch{
width:16px;
height:16px;
border:1px solid var(--swatch-border-color);
border-radius:100%;
outline-offset:2px;
box-sizing:border-box;
forced-color-adjust:none;
}
button:is(:hover, .selected) > .swatch{
border:none;
}
}
.annotationEditorLayer{
&[data-main-rotation="0"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:0deg;
}
}
&[data-main-rotation="90"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:270deg;
}
}
&[data-main-rotation="180"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:180deg;
}
}
&[data-main-rotation="270"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:90deg;
}
}
.highlightEditor{
position:absolute;
background:transparent;
z-index:1;
cursor:auto;
max-width:100%;
max-height:100%;
border:none;
outline:none;
pointer-events:none;
transform-origin:0 0;
&:not(.free){
transform:none;
}
.internal{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:auto;
}
&.disabled .internal{
pointer-events:none;
}
&.selectedEditor{
.internal{
cursor:pointer;
}
}
.editToolbar{
--editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
transform-origin:center !important;
.buttons{
.colorPicker{
position:relative;
width:auto;
display:flex;
justify-content:center;
align-items:center;
gap:4px;
padding:4px;
&::after{
content:"";
mask-image:var(--editor-toolbar-colorpicker-arrow-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:12px;
height:12px;
}
&:hover::after{
background-color:var(--editor-toolbar-hover-fg-color);
}
&:has(.dropdown:not(.hidden)){
background-color:var(--editor-toolbar-hover-bg-color);
&::after{
scale:-1;
}
}
.dropdown{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:11px;
padding-block:8px;
border-radius:6px;
background-color:var(--editor-toolbar-bg-color);
border:1px solid var(--editor-toolbar-border-color);
box-shadow:var(--editor-toolbar-shadow);
inset-block-start:calc(100% + 4px);
width:calc(100% + 2 * var(--editor-toolbar-padding));
button{
width:100%;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
&:is(:active, :focus-visible){
outline:none;
}
> .swatch{
outline-offset:2px;
}
&[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
&:is(:hover, :active, :focus-visible) > .swatch{
outline:2px solid var(--hover-outline-color);
}
}
}
}
}
}
}
}
.editorParamsToolbar:has(#highlightParamsToolbarContainer){
padding:unset;
}
#highlightParamsToolbarContainer{
gap:16px;
padding-inline:10px;
padding-block-end:12px;
.colorPicker{
display:flex;
flex-direction:column;
gap:8px;
.dropdown{
display:flex;
justify-content:space-between;
align-items:center;
flex-direction:row;
height:auto;
button{
width:auto;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
flex:0 0 auto;
padding:0;
.swatch{
width:24px;
height:24px;
}
&:is(:active, :focus-visible){
outline:none;
}
&[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
&:is(:hover, :active, :focus-visible) > .swatch{
outline:2px solid var(--hover-outline-color);
}
}
}
}
#editorHighlightThickness{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
align-self:stretch;
.editorParamsLabel{
height:auto;
align-self:stretch;
}
.thicknessPicker{
display:flex;
justify-content:space-between;
align-items:center;
align-self:stretch;
--example-color:#bfbfc9;
@media (prefers-color-scheme: dark){
--example-color:#80808e;
}
@media screen and (forced-colors: active){
--example-color:CanvasText;
}
:is(& > .editorParamsSlider[disabled]){
opacity:0.4;
}
&::before,
&::after{
content:"";
width:8px;
aspect-ratio:1;
display:block;
border-radius:100%;
background-color:var(--example-color);
}
&::after{
width:24px;
}
.editorParamsSlider{
width:unset;
height:14px;
}
}
}
#editorHighlightVisibility{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
align-self:stretch;
.divider{
--divider-color:#d7d7db;
@media (prefers-color-scheme: dark){
--divider-color:#8f8f9d;
}
@media screen and (forced-colors: active){
--divider-color:CanvasText;
}
margin-block:4px;
width:100%;
height:1px;
background-color:var(--divider-color);
}
.toggler{
display:flex;
justify-content:space-between;
align-items:center;
align-self:stretch;
}
}
}
#altTextSettingsDialog{
padding:16px;
#altTextSettingsContainer{
display:flex;
width:573px;
flex-direction:column;
gap:16px;
.mainContainer{
gap:16px;
}
.description{
color:var(--text-secondary-color);
}
#aiModelSettings{
display:flex;
flex-direction:column;
gap:12px;
button{
width:fit-content;
}
&.download{
#deleteModelButton{
display:none;
}
}
&:not(.download){
#downloadModelButton{
display:none;
}
}
}
#automaticAltText,
#altTextEditor{
display:flex;
flex-direction:column;
gap:8px;
}
#createModelDescription,
#aiModelSettings,
#showAltTextDialogDescription{
padding-inline-start:40px;
}
#automaticSettings{
display:flex;
flex-direction:column;
gap:16px;
}
}
}
:root{
--viewer-container-height:0;
--pdfViewer-padding-bottom:0;
--page-margin:1px auto -8px;
--page-border:9px solid transparent;
--spreadHorizontalWrapped-margin-LR:-3.5px;
--loading-icon-delay:400ms;
}
@media screen and (forced-colors: active){
:root{
--pdfViewer-padding-bottom:9px;
--page-margin:8px auto -1px;
--page-border:1px solid CanvasText;
--spreadHorizontalWrapped-margin-LR:3.5px;
}
}
[data-main-rotation="90"]{
transform:rotate(90deg) translateY(-100%);
}
[data-main-rotation="180"]{
transform:rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation="270"]{
transform:rotate(270deg) translateX(-100%);
}
#hiddenCopyElement,
.hiddenCanvasElement{
position:absolute;
top:0;
left:0;
width:0;
height:0;
display:none;
}
.pdfViewer{
--scale-factor:1;
--page-bg-color:unset;
padding-bottom:var(--pdfViewer-padding-bottom);
--hcm-highlight-filter:none;
--hcm-highlight-selected-filter:none;
@media screen and (forced-colors: active){
--hcm-highlight-filter:invert(100%);
}
&.copyAll{
cursor:wait;
}
.canvasWrapper{
overflow:hidden;
width:100%;
height:100%;
canvas{
margin:0;
display:block;
width:100%;
height:100%;
&[hidden]{
display:none;
}
&[zooming]{
width:100%;
height:100%;
}
.structTree{
contain:strict;
}
}
}
}
.pdfViewer .page{
--scale-round-x:1px;
--scale-round-y:1px;
direction:ltr;
width:816px;
height:1056px;
margin:var(--page-margin);
position:relative;
overflow:visible;
border:var(--page-border);
background-clip:content-box;
background-color:var(--page-bg-color, rgb(255 255 255));
}
.pdfViewer .dummyPage{
position:relative;
width:0;
height:var(--viewer-container-height);
}
.pdfViewer.noUserSelect{
user-select:none;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
.spread{
margin-inline:3.5px;
text-align:center;
}
.pdfViewer.scrollHorizontal,
.spread{
white-space:nowrap;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
margin-inline:0;
}
.spread :is(.page, .dummyPage),
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
display:inline-block;
vertical-align:middle;
}
.spread .page,
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
margin-inline:var(--spreadHorizontalWrapped-margin-LR);
}
.pdfViewer .page.loadingIcon::after{
position:absolute;
top:0;
left:0;
content:"";
width:100%;
height:100%;
background:url("images/loading-icon.gif") center no-repeat;
display:none;
transition-property:display;
transition-delay:var(--loading-icon-delay);
z-index:5;
contain:strict;
}
.pdfViewer .page.loading::after{
display:block;
}
.pdfViewer .page:not(.loading)::after{
transition-property:none;
display:none;
}
.pdfPresentationMode .pdfViewer{
padding-bottom:0;
}
.pdfPresentationMode .spread{
margin:0;
}
.pdfPresentationMode .pdfViewer .page{
margin:0 auto;
border:2px solid transparent;
}
:root{
--dir-factor:1;
--sidebar-width:200px;
--sidebar-transition-duration:200ms;
--sidebar-transition-timing-function:ease;
--toolbar-height:32px;
--toolbar-horizontal-padding:1px;
--toolbar-vertical-padding:2px;
--icon-size:16px;
--toolbar-icon-opacity:0.7;
--doorhanger-icon-opacity:0.9;
--doorhanger-height:8px;
--main-color:rgb(12 12 13);
--body-bg-color:rgb(212 212 215);
--progressBar-color:rgb(10 132 255);
--progressBar-bg-color:rgb(221 221 222);
--progressBar-blend-color:rgb(116 177 239);
--scrollbar-color:auto;
--scrollbar-bg-color:auto;
--toolbar-icon-bg-color:rgb(0 0 0);
--toolbar-icon-hover-bg-color:rgb(0 0 0);
--sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
--sidebar-toolbar-bg-color:rgb(245 246 247);
--toolbar-bg-color:rgb(249 249 250);
--toolbar-border-color:rgb(184 184 184);
--toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom:none;
--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);
--toolbarSidebar-border-bottom:none;
--button-hover-color:rgb(221 222 223);
--toggled-btn-color:rgb(0 0 0);
--toggled-btn-bg-color:rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
--toggled-hover-btn-outline:none;
--dropdown-btn-bg-color:rgb(215 215 219);
--dropdown-btn-border:none;
--separator-color:rgb(0 0 0 / 0.3);
--field-color:rgb(6 6 6);
--field-bg-color:rgb(255 255 255);
--field-border-color:rgb(187 187 188);
--treeitem-color:rgb(0 0 0 / 0.8);
--treeitem-bg-color:rgb(0 0 0 / 0.15);
--treeitem-hover-color:rgb(0 0 0 / 0.9);
--treeitem-selected-color:rgb(0 0 0 / 0.9);
--treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
--thumbnail-hover-color:rgb(0 0 0 / 0.1);
--thumbnail-selected-color:rgb(0 0 0 / 0.2);
--doorhanger-bg-color:rgb(255 255 255);
--doorhanger-border-color:rgb(12 12 13 / 0.2);
--doorhanger-hover-color:rgb(12 12 13);
--doorhanger-hover-bg-color:rgb(237 237 237);
--doorhanger-separator-color:rgb(222 222 222);
--dialog-button-border:none;
--dialog-button-bg-color:rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
--loading-icon:url(images/loading.svg);
--treeitem-expanded-icon:url(images/treeitem-expanded.svg);
--treeitem-collapsed-icon:url(images/treeitem-collapsed.svg);
--toolbarButton-editorFreeText-icon:url(images/toolbarButton-editorFreeText.svg);
--toolbarButton-editorHighlight-icon:url(images/toolbarButton-editorHighlight.svg);
--toolbarButton-editorInk-icon:url(images/toolbarButton-editorInk.svg);
--toolbarButton-editorStamp-icon:url(images/toolbarButton-editorStamp.svg);
--toolbarButton-menuArrow-icon:url(images/toolbarButton-menuArrow.svg);
--toolbarButton-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.svg);
--toolbarButton-secondaryToolbarToggle-icon:url(images/toolbarButton-secondaryToolbarToggle.svg);
--toolbarButton-pageUp-icon:url(images/toolbarButton-pageUp.svg);
--toolbarButton-pageDown-icon:url(images/toolbarButton-pageDown.svg);
--toolbarButton-zoomOut-icon:url(images/toolbarButton-zoomOut.svg);
--toolbarButton-zoomIn-icon:url(images/toolbarButton-zoomIn.svg);
--toolbarButton-presentationMode-icon:url(images/toolbarButton-presentationMode.svg);
--toolbarButton-print-icon:url(images/toolbarButton-print.svg);
--toolbarButton-download-icon:url(images/toolbarButton-download.svg);
--toolbarButton-bookmark-icon:url(images/toolbarButton-bookmark.svg);
--toolbarButton-viewThumbnail-icon:url(images/toolbarButton-viewThumbnail.svg);
--toolbarButton-viewOutline-icon:url(images/toolbarButton-viewOutline.svg);
--toolbarButton-viewAttachments-icon:url(images/toolbarButton-viewAttachments.svg);
--toolbarButton-viewLayers-icon:url(images/toolbarButton-viewLayers.svg);
--toolbarButton-currentOutlineItem-icon:url(images/toolbarButton-currentOutlineItem.svg);
--toolbarButton-search-icon:url(images/toolbarButton-search.svg);
--findbarButton-previous-icon:url(images/findbarButton-previous.svg);
--findbarButton-next-icon:url(images/findbarButton-next.svg);
--secondaryToolbarButton-firstPage-icon:url(images/secondaryToolbarButton-firstPage.svg);
--secondaryToolbarButton-lastPage-icon:url(images/secondaryToolbarButton-lastPage.svg);
--secondaryToolbarButton-rotateCcw-icon:url(images/secondaryToolbarButton-rotateCcw.svg);
--secondaryToolbarButton-rotateCw-icon:url(images/secondaryToolbarButton-rotateCw.svg);
--secondaryToolbarButton-selectTool-icon:url(images/secondaryToolbarButton-selectTool.svg);
--secondaryToolbarButton-handTool-icon:url(images/secondaryToolbarButton-handTool.svg);
--secondaryToolbarButton-scrollPage-icon:url(images/secondaryToolbarButton-scrollPage.svg);
--secondaryToolbarButton-scrollVertical-icon:url(images/secondaryToolbarButton-scrollVertical.svg);
--secondaryToolbarButton-scrollHorizontal-icon:url(images/secondaryToolbarButton-scrollHorizontal.svg);
--secondaryToolbarButton-scrollWrapped-icon:url(images/secondaryToolbarButton-scrollWrapped.svg);
--secondaryToolbarButton-spreadNone-icon:url(images/secondaryToolbarButton-spreadNone.svg);
--secondaryToolbarButton-spreadOdd-icon:url(images/secondaryToolbarButton-spreadOdd.svg);
--secondaryToolbarButton-spreadEven-icon:url(images/secondaryToolbarButton-spreadEven.svg);
--secondaryToolbarButton-imageAltTextSettings-icon:var(
--toolbarButton-editorStamp-icon
);
--secondaryToolbarButton-documentProperties-icon:url(images/secondaryToolbarButton-documentProperties.svg);
--editorParams-stampAddImage-icon:url(images/toolbarButton-zoomIn.svg);
}
:root:dir(rtl){
--dir-factor:-1;
}
@media (prefers-color-scheme: dark){
:root{
--main-color:rgb(249 249 250);
--body-bg-color:rgb(42 42 46);
--progressBar-color:rgb(0 96 223);
--progressBar-bg-color:rgb(40 40 43);
--progressBar-blend-color:rgb(20 68 133);
--scrollbar-color:rgb(121 121 123);
--scrollbar-bg-color:rgb(35 35 39);
--toolbar-icon-bg-color:rgb(255 255 255);
--toolbar-icon-hover-bg-color:rgb(255 255 255);
--sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
--sidebar-toolbar-bg-color:rgb(50 50 52);
--toolbar-bg-color:rgb(56 56 61);
--toolbar-border-color:rgb(12 12 13);
--button-hover-color:rgb(102 102 103);
--toggled-btn-color:rgb(255 255 255);
--toggled-btn-bg-color:rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
--dropdown-btn-bg-color:rgb(74 74 79);
--separator-color:rgb(0 0 0 / 0.3);
--field-color:rgb(250 250 250);
--field-bg-color:rgb(64 64 68);
--field-border-color:rgb(115 115 115);
--treeitem-color:rgb(255 255 255 / 0.8);
--treeitem-bg-color:rgb(255 255 255 / 0.15);
--treeitem-hover-color:rgb(255 255 255 / 0.9);
--treeitem-selected-color:rgb(255 255 255 / 0.9);
--treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
--thumbnail-hover-color:rgb(255 255 255 / 0.1);
--thumbnail-selected-color:rgb(255 255 255 / 0.2);
--doorhanger-bg-color:rgb(74 74 79);
--doorhanger-border-color:rgb(39 39 43);
--doorhanger-hover-color:rgb(249 249 250);
--doorhanger-hover-bg-color:rgb(93 94 98);
--doorhanger-separator-color:rgb(92 92 97);
--dialog-button-bg-color:rgb(92 92 97);
--dialog-button-hover-bg-color:rgb(115 115 115);
}
}
@media screen and (forced-colors: active){
:root{
--button-hover-color:Highlight;
--doorhanger-hover-bg-color:Highlight;
--toolbar-icon-opacity:1;
--toolbar-icon-bg-color:ButtonText;
--toolbar-icon-hover-bg-color:ButtonFace;
--toggled-hover-active-btn-color:ButtonText;
--toggled-hover-btn-outline:2px solid ButtonBorder;
--toolbar-border-color:CanvasText;
--toolbar-border-bottom:1px solid var(--toolbar-border-color);
--toolbar-box-shadow:none;
--toggled-btn-color:HighlightText;
--toggled-btn-bg-color:LinkText;
--doorhanger-hover-color:ButtonFace;
--doorhanger-border-color-whcm:1px solid ButtonText;
--doorhanger-triangle-opacity-whcm:0;
--dialog-button-border:1px solid Highlight;
--dialog-button-hover-bg-color:Highlight;
--dialog-button-hover-color:ButtonFace;
--dropdown-btn-border:1px solid ButtonText;
--field-border-color:ButtonText;
--main-color:CanvasText;
--separator-color:GrayText;
--doorhanger-separator-color:GrayText;
--toolbarSidebar-box-shadow:none;
--toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
}
}
@media screen and (prefers-reduced-motion: reduce){
:root{
--sidebar-transition-duration:0;
}
}
@keyframes progressIndeterminate{
0%{
transform:translateX(calc(-142px * var(--dir-factor)));
}
100%{
transform:translateX(0);
}
}
html{
&[data-toolbar-density="compact"]{
--toolbar-height:30px;
}
&[data-toolbar-density="touch"]{
--toolbar-height:44px;
}
}
html,
body{
height:100%;
width:100%;
}
body{
margin:0;
background-color:var(--body-bg-color);
scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
&.wait::before{
content:"";
position:fixed;
width:100%;
height:100%;
z-index:100000;
cursor:wait;
}
}
.hidden,
[hidden]{
display:none !important;
}
#viewerContainer.pdfPresentationMode:fullscreen{
top:0;
background-color:rgb(0 0 0);
width:100%;
height:100%;
overflow:hidden;
cursor:none;
user-select:none;
}
.pdfPresentationMode:fullscreen section:not([data-internal-link]){
pointer-events:none;
}
.pdfPresentationMode:fullscreen .textLayer span{
cursor:none;
}
.pdfPresentationMode.pdfPresentationModeControls > *,
.pdfPresentationMode.pdfPresentationModeControls .textLayer span{
cursor:default;
}
#outerContainer{
width:100%;
height:100%;
position:relative;
margin:0;
}
#sidebarContainer{
position:absolute;
inset-block:var(--toolbar-height) 0;
inset-inline-start:calc(-1 * var(--sidebar-width));
width:var(--sidebar-width);
visibility:hidden;
z-index:1;
font:message-box;
border-top:1px solid transparent;
border-inline-end:var(--doorhanger-border-color-whcm);
transition-property:inset-inline-start;
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
}
#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
visibility:visible;
}
#outerContainer.sidebarOpen #sidebarContainer{
inset-inline-start:0;
}
#mainContainer{
position:absolute;
inset:0;
min-width:350px;
margin:0;
display:flex;
flex-direction:column;
}
#sidebarContent{
inset-block:var(--toolbar-height) 0;
inset-inline-start:0;
overflow:auto;
position:absolute;
width:100%;
box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
}
#viewerContainer{
overflow:auto;
position:absolute;
inset:var(--toolbar-height) 0 0;
outline:none;
z-index:0;
}
#viewerContainer:not(.pdfPresentationMode){
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
}
#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
inset-inline-start:var(--sidebar-width);
transition-property:inset-inline-start;
}
#sidebarContainer :is(input, button, select){
font:message-box;
}
.toolbar{
z-index:2;
}
#toolbarSidebar{
width:100%;
height:var(--toolbar-height);
background-color:var(--sidebar-toolbar-bg-color);
box-shadow:var(--toolbarSidebar-box-shadow);
border-bottom:var(--toolbarSidebar-border-bottom);
padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding);
justify-content:space-between;
#toolbarSidebarLeft{
width:auto;
height:100%;
#viewThumbnail::before{
mask-image:var(--toolbarButton-viewThumbnail-icon);
}
#viewOutline::before{
mask-image:var(--toolbarButton-viewOutline-icon);
transform:scaleX(var(--dir-factor));
}
#viewAttachments::before{
mask-image:var(--toolbarButton-viewAttachments-icon);
}
#viewLayers::before{
mask-image:var(--toolbarButton-viewLayers-icon);
}
}
#toolbarSidebarRight{
width:auto;
height:100%;
padding-inline-end:2px;
}
}
#sidebarResizer{
position:absolute;
inset-block:0;
inset-inline-end:-6px;
width:6px;
z-index:200;
cursor:ew-resize;
}
#outerContainer.sidebarOpen #loadingBar{
inset-inline-start:var(--sidebar-width);
}
#outerContainer.sidebarResizing
:is(#sidebarContainer, #viewerContainer, #loadingBar){
transition-duration:0s;
}
.doorHanger,
.doorHangerRight{
border-radius:2px;
box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
border:var(--doorhanger-border-color-whcm);
background-color:var(--doorhanger-bg-color);
inset-block-start:calc(100% + var(--doorhanger-height) - 2px);
&::after,
&::before{
bottom:100%;
border-style:solid;
border-color:transparent;
content:"";
height:0;
width:0;
position:absolute;
pointer-events:none;
opacity:var(--doorhanger-triangle-opacity-whcm);
}
&::before{
border-width:calc(var(--doorhanger-height) + 2px);
border-bottom-color:var(--doorhanger-border-color);
}
&::after{
border-width:var(--doorhanger-height);
}
}
.doorHangerRight{
inset-inline-end:calc(50% - var(--doorhanger-height) - 1px);
&::before{
inset-inline-end:-1px;
}
&::after{
border-bottom-color:var(--doorhanger-bg-color);
inset-inline-end:1px;
}
}
.doorHanger{
inset-inline-start:calc(50% - var(--doorhanger-height) - 1px);
&::before{
inset-inline-start:-1px;
}
&::after{
border-bottom-color:var(--toolbar-bg-color);
inset-inline-start:1px;
}
}
.dialogButton{
border:none;
background:none;
width:28px;
height:28px;
outline:none;
}
.dialogButton:is(:hover, :focus-visible){
background-color:var(--dialog-button-hover-bg-color);
}
.dialogButton:is(:hover, :focus-visible) > span{
color:var(--dialog-button-hover-color);
}
.splitToolbarButtonSeparator{
float:inline-start;
width:0;
height:62%;
border-left:1px solid var(--separator-color);
border-right:none;
}
.dialogButton{
min-width:16px;
margin:2px 1px;
padding:2px 6px 0;
border:none;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
user-select:none;
cursor:default;
box-sizing:border-box;
}
.treeItemToggler::before{
position:absolute;
display:inline-block;
width:16px;
height:16px;
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
}
#sidebarToggleButton::before{
mask-image:var(--toolbarButton-sidebarToggle-icon);
transform:scaleX(var(--dir-factor));
}
#secondaryToolbarToggleButton::before{
mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
transform:scaleX(var(--dir-factor));
}
#previous::before{
mask-image:var(--toolbarButton-pageUp-icon);
}
#next::before{
mask-image:var(--toolbarButton-pageDown-icon);
}
#zoomOutButton::before{
mask-image:var(--toolbarButton-zoomOut-icon);
}
#zoomInButton::before{
mask-image:var(--toolbarButton-zoomIn-icon);
}
#presentationMode::before{
mask-image:var(--toolbarButton-presentationMode-icon);
}
#editorFreeTextButton::before{
mask-image:var(--toolbarButton-editorFreeText-icon);
}
#editorHighlightButton::before{
mask-image:var(--toolbarButton-editorHighlight-icon);
}
#editorInkButton::before{
mask-image:var(--toolbarButton-editorInk-icon);
}
#editorStampButton::before{
mask-image:var(--toolbarButton-editorStamp-icon);
}
#printButton::before{
mask-image:var(--toolbarButton-print-icon);
}
#downloadButton::before{
mask-image:var(--toolbarButton-download-icon);
}
#viewBookmark::before{
mask-image:var(--toolbarButton-bookmark-icon);
}
#currentOutlineItem::before{
mask-image:var(--toolbarButton-currentOutlineItem-icon);
transform:scaleX(var(--dir-factor));
}
#viewFindButton::before{
mask-image:var(--toolbarButton-search-icon);
}
.pdfSidebarNotification::after{
position:absolute;
display:inline-block;
top:2px;
inset-inline-end:2px;
content:"";
background-color:rgb(112 219 85);
height:9px;
width:9px;
border-radius:50%;
}
.verticalToolbarSeparator{
display:block;
margin-inline:2px;
width:0;
height:80%;
border-left:1px solid var(--separator-color);
border-right:none;
box-sizing:border-box;
}
.horizontalToolbarSeparator{
display:block;
margin:6px 0;
border-top:1px solid var(--doorhanger-separator-color);
border-bottom:none;
height:0;
width:100%;
}
.toggleButton{
display:inline;
&:is(:hover, :has(> input:focus-visible)){
color:var(--toggled-btn-color);
background-color:var(--button-hover-color);
}
&:has(> input:checked){
color:var(--toggled-btn-color);
background-color:var(--toggled-btn-bg-color);
}
& > input{
position:absolute;
top:50%;
left:50%;
opacity:0;
width:0;
height:0;
}
}
.toolbarField{
padding:4px 7px;
margin:3px 0;
border-radius:2px;
background-color:var(--field-bg-color);
background-clip:padding-box;
border:1px solid var(--field-border-color);
box-shadow:none;
color:var(--field-color);
font-size:12px;
line-height:16px;
outline:none;
&:focus{
border-color:#0a84ff;
}
}
#pageNumber{
-moz-appearance:textfield;
text-align:end;
width:40px;
background-size:0 0;
transition-property:none;
.loadingInput:has(> &.loading)::after{
display:inline;
visibility:visible;
transition-property:visibility;
transition-delay:var(--loading-icon-delay);
}
}
.loadingInput{
position:relative;
&::after{
position:absolute;
visibility:hidden;
display:none;
width:var(--icon-size);
height:var(--icon-size);
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
mask-image:var(--loading-icon);
}
&.start::after{
inset-inline-start:4px;
}
&.end::after{
inset-inline-end:4px;
}
}
#thumbnailView,
#outlineView,
#attachmentsView,
#layersView{
position:absolute;
width:calc(100% - 8px);
inset-block:0;
padding:4px 4px 0;
overflow:auto;
user-select:none;
}
#thumbnailView{
width:calc(100% - 60px);
padding:10px 30px 0;
}
#thumbnailView > a:is(:active, :focus){
outline:0;
}
.thumbnail{
--thumbnail-width:0;
--thumbnail-height:0;
float:inline-start;
width:var(--thumbnail-width);
height:var(--thumbnail-height);
margin:0 10px 5px;
padding:1px;
border:7px solid transparent;
border-radius:2px;
}
#thumbnailView > a:last-of-type > .thumbnail{
margin-bottom:10px;
}
a:focus > .thumbnail,
.thumbnail:hover{
border-color:var(--thumbnail-hover-color);
}
.thumbnail.selected{
border-color:var(--thumbnail-selected-color) !important;
}
.thumbnailImage{
width:var(--thumbnail-width);
height:var(--thumbnail-height);
opacity:0.9;
}
a:focus > .thumbnail > .thumbnailImage,
.thumbnail:hover > .thumbnailImage{
opacity:0.95;
}
.thumbnail.selected > .thumbnailImage{
opacity:1 !important;
}
.thumbnail:not([data-loaded]) > .thumbnailImage{
width:calc(var(--thumbnail-width) - 2px);
height:calc(var(--thumbnail-height) - 2px);
border:1px dashed rgb(132 132 132);
}
.treeWithDeepNesting > .treeItem,
.treeItem > .treeItems{
margin-inline-start:20px;
}
.treeItem > a{
text-decoration:none;
display:inline-block;
min-width:calc(100% - 4px);
height:auto;
margin-bottom:1px;
padding:2px 0 5px;
padding-inline-start:4px;
border-radius:2px;
color:var(--treeitem-color);
font-size:13px;
line-height:15px;
user-select:none;
white-space:normal;
cursor:pointer;
}
#layersView .treeItem > a *{
cursor:pointer;
}
#layersView .treeItem > a > label{
padding-inline-start:4px;
}
#layersView .treeItem > a > label > input{
float:inline-start;
margin-top:1px;
}
.treeItemToggler{
position:relative;
float:inline-start;
height:0;
width:0;
color:rgb(255 255 255 / 0.5);
}
.treeItemToggler::before{
inset-inline-end:4px;
mask-image:var(--treeitem-expanded-icon);
}
.treeItemToggler.treeItemsHidden::before{
mask-image:var(--treeitem-collapsed-icon);
transform:scaleX(var(--dir-factor));
}
.treeItemToggler.treeItemsHidden ~ .treeItems{
display:none;
}
.treeItem.selected > a{
background-color:var(--treeitem-selected-bg-color);
color:var(--treeitem-selected-color);
}
.treeItemToggler:hover,
.treeItemToggler:hover + a,
.treeItemToggler:hover ~ .treeItems,
.treeItem > a:hover{
background-color:var(--treeitem-bg-color);
background-clip:padding-box;
border-radius:2px;
color:var(--treeitem-hover-color);
}
#outlineOptionsContainer{
display:none;
#sidebarContainer:has(#outlineView:not(.hidden)) &{
display:inline flex;
}
}
.dialogButton{
width:auto;
margin:3px 4px 2px !important;
padding:2px 11px;
color:var(--main-color);
background-color:var(--dialog-button-bg-color);
border:var(--dialog-button-border) !important;
}
dialog{
margin:auto;
padding:15px;
border-spacing:4px;
color:var(--main-color);
font:message-box;
font-size:12px;
line-height:14px;
background-color:var(--doorhanger-bg-color);
border:1px solid rgb(0 0 0 / 0.5);
border-radius:4px;
box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
}
dialog::backdrop{
background-color:rgb(0 0 0 / 0.2);
}
dialog > .row{
display:table-row;
}
dialog > .row > *{
display:table-cell;
}
dialog .toolbarField{
margin:5px 0;
}
dialog .separator{
display:block;
margin:4px 0;
height:0;
width:100%;
border-top:1px solid var(--separator-color);
border-bottom:none;
}
dialog .buttonRow{
text-align:center;
vertical-align:middle;
}
dialog :link{
color:rgb(255 255 255);
}
#passwordDialog{
text-align:center;
}
#passwordDialog .toolbarField{
width:200px;
}
#documentPropertiesDialog{
text-align:left;
}
#documentPropertiesDialog .row > *{
min-width:100px;
text-align:start;
}
#documentPropertiesDialog .row > span{
width:125px;
word-wrap:break-word;
}
#documentPropertiesDialog .row > p{
max-width:225px;
word-wrap:break-word;
}
#documentPropertiesDialog .buttonRow{
margin-top:10px;
}
.grab-to-pan-grab{
cursor:grab !important;
}
.grab-to-pan-grab
*:not(input):not(textarea):not(button):not(select):not(:link){
cursor:inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing{
cursor:grabbing !important;
}
.grab-to-pan-grabbing{
position:fixed;
background:rgb(0 0 0 / 0);
display:block;
inset:0;
overflow:hidden;
z-index:50000;
}
.toolbarButton{
height:100%;
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
color:var(--main-color);
outline:none;
border-radius:2px;
box-sizing:border-box;
font:message-box;
flex:none;
position:relative;
padding:0;
> span{
display:inline-block;
width:0;
height:0;
overflow:hidden;
}
&::before{
opacity:var(--toolbar-icon-opacity);
display:inline-block;
width:var(--icon-size);
height:var(--icon-size);
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
mask-position:center;
}
&.toggled{
background-color:var(--toggled-btn-bg-color);
color:var(--toggled-btn-color);
&::before{
background-color:var(--toggled-btn-color);
}
&:hover{
outline:var(--toggled-hover-btn-outline) !important;
&:active{
background-color:var(--toggled-hover-active-btn-color);
}
}
}
&:is(:hover, :focus-visible){
background-color:var(--button-hover-color);
&::before{
background-color:var(--toolbar-icon-hover-bg-color);
}
}
&:is([disabled="disabled"], [disabled]){
opacity:0.5;
pointer-events:none;
}
&.labeled{
width:100%;
min-height:var(--menuitem-height);
justify-content:flex-start;
gap:8px;
padding-inline-start:12px;
aspect-ratio:unset;
text-align:start;
white-space:normal;
cursor:default;
&:is(a){
text-decoration:none;
&[href="#"]{
opacity:0.5;
pointer-events:none;
}
}
&::before{
opacity:var(--doorhanger-icon-opacity);
}
&:is(:hover, :focus-visible){
background-color:var(--doorhanger-hover-bg-color);
color:var(--doorhanger-hover-color);
}
> span{
display:inline-block;
width:max-content;
height:auto;
}
}
}
.toolbarButtonWithContainer{
height:100%;
aspect-ratio:1;
display:inline-block;
position:relative;
flex:none;
> .toolbarButton{
width:100%;
height:100%;
}
.menu{
padding-block:5px;
}
.menuContainer{
width:100%;
height:auto;
max-height:calc(
var(--viewer-container-height) - var(--toolbar-height) -
var(--doorhanger-height)
);
display:flex;
flex-direction:column;
box-sizing:border-box;
overflow-y:auto;
}
.editorParamsToolbar{
height:auto;
width:220px;
position:absolute;
z-index:30000;
cursor:default;
#editorStampAddImage::before{
mask-image:var(--editorParams-stampAddImage-icon);
}
.editorParamsLabel{
flex:none;
font:menu;
font-size:13px;
font-style:normal;
font-weight:400;
line-height:150%;
color:var(--main-color);
width:fit-content;
inset-inline-start:0;
}
.editorParamsToolbarContainer{
width:100%;
height:auto;
display:flex;
flex-direction:column;
box-sizing:border-box;
padding-inline:10px;
padding-block:10px;
> .editorParamsSetter{
min-height:26px;
display:flex;
align-items:center;
justify-content:space-between;
}
.editorParamsColor{
width:32px;
height:32px;
flex:none;
padding:0;
}
.editorParamsSlider{
background-color:transparent;
width:90px;
flex:0 1 0;
font:message-box;
&::-moz-range-progress{
background-color:black;
}
&::-moz-range-track{
background-color:black;
}
&::-moz-range-thumb{
background-color:white;
}
}
}
}
}
#secondaryToolbar{
height:auto;
width:220px;
position:absolute;
z-index:30000;
cursor:default;
min-height:26px;
max-height:calc(var(--viewer-container-height) - 40px);
#secondaryToolbarButtonContainer{
#secondaryPrint::before{
mask-image:var(--toolbarButton-print-icon);
}
#secondaryDownload::before{
mask-image:var(--toolbarButton-download-icon);
}
#presentationMode::before{
mask-image:var(--toolbarButton-presentationMode-icon);
}
#viewBookmark::before{
mask-image:var(--toolbarButton-bookmark-icon);
}
#firstPage::before{
mask-image:var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before{
mask-image:var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before{
mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before{
mask-image:var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before{
mask-image:var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before{
mask-image:var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before{
mask-image:var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before{
mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before{
mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before{
mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before{
mask-image:var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before{
mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before{
mask-image:var(--secondaryToolbarButton-spreadEven-icon);
}
#imageAltTextSettings::before{
mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon);
}
#documentProperties::before{
mask-image:var(--secondaryToolbarButton-documentProperties-icon);
}
}
}
#findbar{
--input-horizontal-padding:4px;
--findbar-padding:2px;
width:max-content;
max-width:90vw;
min-height:var(--toolbar-height);
height:auto;
position:absolute;
z-index:30000;
cursor:default;
padding:0;
min-width:300px;
background-color:var(--toolbar-bg-color);
box-sizing:border-box;
flex-wrap:wrap;
justify-content:flex-start;
> *{
height:var(--toolbar-height);
padding:var(--findbar-padding);
}
#findInputContainer{
margin-inline-start:2px;
#findPreviousButton::before{
mask-image:var(--findbarButton-previous-icon);
}
#findNextButton::before{
mask-image:var(--findbarButton-next-icon);
}
#findInput{
width:200px;
padding:5px var(--input-horizontal-padding);
&::placeholder{
font-style:normal;
}
.loadingInput:has(> &[data-status="pending"])::after{
display:inline;
visibility:visible;
inset-inline-end:calc(var(--input-horizontal-padding) + 1px);
}
&[data-status="notFound"]{
background-color:rgb(255 102 102);
}
}
}
#findbarMessageContainer{
display:none;
gap:4px;
&:has(> :is(#findResultsCount, #findMsg):not(:empty)){
display:inline flex;
}
#findResultsCount{
background-color:rgb(217 217 217);
color:rgb(82 82 82);
padding-block:4px;
&:empty{
display:none;
}
}
#findMsg{
&[data-status="notFound"]{
font-weight:bold;
}
&:empty{
display:none;
}
}
}
&.wrapContainers{
flex-direction:column;
align-items:flex-start;
height:max-content;
.toolbarLabel{
margin:0 4px;
}
#findbarMessageContainer{
flex-wrap:wrap;
flex-flow:column nowrap;
align-items:flex-start;
height:max-content;
#findResultsCount{
height:calc(var(--toolbar-height) - 2 * var(--findbar-padding));
}
#findMsg{
min-height:var(--toolbar-height);
}
}
}
}
@page{
margin:0;
}
#printContainer{
display:none;
}
@media print{
body{
background:rgb(0 0 0 / 0) none;
}
body[data-pdfjsprinting] #outerContainer{
display:none;
}
body[data-pdfjsprinting] #printContainer{
display:block;
}
#printContainer{
height:100%;
}
#printContainer > .printedPage{
page-break-after:always;
page-break-inside:avoid;
height:100%;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#printContainer > .xfaPrintedPage .xfaPage{
position:absolute;
}
#printContainer > .xfaPrintedPage{
page-break-after:always;
page-break-inside:avoid;
width:100%;
height:100%;
position:relative;
}
#printContainer > .printedPage :is(canvas, img){
max-width:100%;
max-height:100%;
direction:ltr;
display:block;
}
}
.visibleMediumView{
display:none !important;
}
.toolbarLabel{
width:max-content;
min-width:16px;
height:100%;
padding-inline:4px;
margin:2px;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
text-align:left;
user-select:none;
cursor:default;
box-sizing:border-box;
display:inline flex;
flex-direction:column;
align-items:center;
justify-content:center;
> label{
width:100%;
}
}
.toolbarHorizontalGroup{
height:100%;
display:inline flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:1px;
box-sizing:border-box;
}
.dropdownToolbarButton{
display:inline flex;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
width:fit-content;
min-width:140px;
padding:0;
background-color:var(--dropdown-btn-bg-color);
border:var(--dropdown-btn-border);
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
user-select:none;
cursor:default;
box-sizing:border-box;
outline:none;
&:hover{
background-color:var(--button-hover-color);
}
> select{
appearance:none;
width:inherit;
min-width:inherit;
height:28px;
font:message-box;
font-size:12px;
color:var(--main-color);
margin:0;
padding-block:1px 2px;
padding-inline:6px 38px;
border:none;
outline:none;
background-color:var(--dropdown-btn-bg-color);
> option{
background:var(--doorhanger-bg-color);
color:var(--main-color);
}
&:is(:hover, :focus-visible){
background-color:var(--button-hover-color);
color:var(--toggled-btn-color);
}
}
&::after{
position:absolute;
display:inline;
width:var(--icon-size);
height:var(--icon-size);
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
inset-inline-end:4px;
pointer-events:none;
mask-image:var(--toolbarButton-menuArrow-icon);
}
&:is(:hover, :focus-visible, :active)::after{
background-color:var(--toolbar-icon-hover-bg-color);
}
}
#toolbarContainer{
--menuitem-height:calc(var(--toolbar-height) - 6px);
width:100%;
height:var(--toolbar-height);
padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding);
position:relative;
box-sizing:border-box;
font:message-box;
background-color:var(--toolbar-bg-color);
box-shadow:var(--toolbar-box-shadow);
border-bottom:var(--toolbar-border-bottom);
#toolbarViewer{
width:100%;
height:100%;
justify-content:space-between;
> *{
flex:none;
}
input{
font:message-box;
}
.toolbarButtonSpacer{
width:30px;
display:block;
height:1px;
}
#toolbarViewerLeft #numPages.toolbarLabel{
padding-inline-start:3px;
flex:none;
}
}
#loadingBar{
--progressBar-percent:0%;
--progressBar-end-offset:0;
position:absolute;
top:var(--toolbar-height);
inset-inline:0 var(--progressBar-end-offset);
height:4px;
background-color:var(--progressBar-bg-color);
border-bottom:1px solid var(--toolbar-border-color);
transition-property:inset-inline-start;
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
.progress{
position:absolute;
top:0;
inset-inline-start:0;
width:100%;
transform:scaleX(var(--progressBar-percent));
transform-origin:calc(50% - 50% * var(--dir-factor)) 0;
height:100%;
background-color:var(--progressBar-color);
overflow:hidden;
transition:transform 200ms;
}
&.indeterminate .progress{
transform:none;
background-color:var(--progressBar-bg-color);
transition:none;
.glimmer{
position:absolute;
top:0;
inset-inline-start:0;
height:100%;
width:calc(100% + 150px);
background:repeating-linear-gradient(
135deg,
var(--progressBar-blend-color) 0,
var(--progressBar-bg-color) 5px,
var(--progressBar-bg-color) 45px,
var(--progressBar-color) 55px,
var(--progressBar-color) 95px,
var(--progressBar-blend-color) 100px
);
animation:progressIndeterminate 1s linear infinite;
}
}
}
}
#secondaryToolbar{
#firstPage::before{
mask-image:var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before{
mask-image:var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before{
mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before{
mask-image:var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before{
mask-image:var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before{
mask-image:var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before{
mask-image:var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before{
mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before{
mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before{
mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before{
mask-image:var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before{
mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before{
mask-image:var(--secondaryToolbarButton-spreadEven-icon);
}
#documentProperties::before{
mask-image:var(--secondaryToolbarButton-documentProperties-icon);
}
}
@media all and (max-width: 840px){
#sidebarContainer{
background-color:var(--sidebar-narrow-bg-color);
}
#outerContainer.sidebarOpen #viewerContainer{
inset-inline-start:0 !important;
}
}
@media all and (max-width: 750px){
#outerContainer .hiddenMediumView{
display:none !important;
}
#outerContainer .visibleMediumView:not(.hidden, [hidden]){
display:inline-block !important;
}
}
@media all and (max-width: 690px){
.hiddenSmallView,
.hiddenSmallView *{
display:none !important;
}
#toolbarContainer #toolbarViewer .toolbarButtonSpacer{
width:0;
}
}
@media all and (max-width: 560px){
#scaleSelectContainer{
display:none;
}
}