/* [project]/apps/web/components/files/pdf-document-reader.css [app-client] (css) */
@layer theme.pdfjs {
  :root {
    --button-primary-bg-color: var(--button-background-color-primary, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --button-primary-fg-color: var(--button-text-color-primary, var(--lightningcss-light, #fbfbfe) var(--lightningcss-dark, #15141a));
    --button-primary-border-color: var(--button-primary-bg-color);
    --button-primary-active-bg-color: var(--button-background-color-primary-active, var(--lightningcss-light, #054096) var(--lightningcss-dark, #aaf2ff));
    --button-primary-active-fg-color: var(--button-primary-fg-color);
    --button-primary-active-border-color: var(--button-primary-active-bg-color);
    --button-primary-hover-bg-color: var(--button-background-color-primary-hover, var(--lightningcss-light, #0250bb) var(--lightningcss-dark, #80ebff));
    --button-primary-hover-fg-color: var(--button-primary-fg-color);
    --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
    --button-primary-disabled-bg-color: var(--button-primary-bg-color);
    --button-primary-disabled-border-color: var(--button-primary-border-color);
    --button-primary-disabled-fg-color: var(--button-primary-fg-color);
    --button-secondary-bg-color: var(--button-background-color, var(--lightningcss-light, #15141a12) var(--lightningcss-dark, #fbfbfe12));
    --button-secondary-fg-color: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --button-secondary-border-color: var(--button-border-color, var(--button-secondary-bg-color));
    --button-secondary-active-bg-color: var(--button-background-color-active, var(--lightningcss-light, #15141a36) var(--lightningcss-dark, #fbfbfe36));
    --button-secondary-active-fg-color: var(--button-secondary-fg-color);
    --button-secondary-active-border-color: var(--button-secondary-bg-color);
    --button-secondary-hover-bg-color: var(--button-background-color-hover, var(--lightningcss-light, #15141a24) var(--lightningcss-dark, #fbfbfe24));
    --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
    --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
    --button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
    --button-secondary-disabled-border-color: var(--button-secondary-border-color);
    --button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
    --button-disabled-opacity: .4;
    --hover-filter: brightness(.9);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --button-disabled-opacity: .6;
      --hover-filter: brightness(1.4);
    }
  }

  @media screen and (forced-colors: active) {
    :root {
      --button-primary-bg-color: var(--button-background-color-primary, ButtonText);
      --button-primary-fg-color: var(--button-text-color-primary, ButtonFace);
      --button-primary-border-color: var(--button-border-color-primary, ButtonText);
      --button-primary-active-bg-color: var(--button-background-color-primary-active, SelectedItem);
      --button-primary-active-fg-color: var(--button-text-color-primary-active, HighlightText);
      --button-primary-active-border-color: var(--button-border-color-primary-active, ButtonText);
      --button-primary-hover-bg-color: var(--button-background-color-primary-hover, SelectedItem);
      --button-primary-hover-fg-color: var(--button-text-color-primary-hover, HighlightText);
      --button-primary-hover-border-color: var(--button-border-color-primary-hover, SelectedItem);
      --button-primary-disabled-bg-color: var(--button-background-color-primary-disabled, GrayText);
      --button-primary-disabled-fg-color: var(--button-text-color-primary-disabled, ButtonFace);
      --button-primary-disabled-border-color: var(--button-border-color-primary-disabled, GrayText);
      --button-secondary-bg-color: var(--button-background-color, ButtonFace);
      --button-secondary-fg-color: var(--button-text-color, ButtonText);
      --button-secondary-border-color: var(--button-border-color, ButtonText);
      --button-secondary-active-bg-color: var(--button-background-color-active, HighlightText);
      --button-secondary-active-fg-color: var(--button-text-color-active, SelectedItem);
      --button-secondary-active-border-color: var(--button-border-color-active, ButtonText);
      --button-secondary-hover-bg-color: var(--button-background-color-hover, HighlightText);
      --button-secondary-hover-fg-color: var(--button-text-color-hover, SelectedItem);
      --button-secondary-hover-border-color: var(--button-border-color-hover, SelectedItem);
      --button-secondary-disabled-fg-color: var(--button-text-color-disabled, GrayText);
      --button-secondary-disabled-border-color: var(--button-border-color-disabled, GrayText);
      --button-disabled-opacity: 1;
      --hover-filter: none;
    }
  }

  .primaryButton, .secondaryButton {
    border-radius: var(--button-border-radius, 4px);
    font: menu;
    font-weight: var(--button-font-weight, 590);
    font-size: var(--button-font-size, 13px);
    padding: var(--button-padding, 4px 16px);
    width: auto;
    min-height: var(--button-min-height, 32px);
    border: 1px solid;
  }

  :is(.primaryButton, .secondaryButton):hover {
    cursor: pointer;
    filter: var(--hover-filter);
  }

  :is(.primaryButton, .secondaryButton) > span {
    color: inherit;
    font: inherit;
  }

  :is(.primaryButton, .secondaryButton):disabled {
    pointer-events: none;
  }

  .primaryButton {
    color: var(--button-primary-fg-color);
    background-color: var(--button-primary-bg-color);
    border-color: var(--button-primary-border-color);
    opacity: 1;
  }

  .primaryButton:hover {
    color: var(--button-primary-hover-fg-color);
    background-color: var(--button-primary-hover-bg-color);
    border-color: var(--button-primary-hover-border-color);
  }

  .primaryButton:active {
    color: var(--button-primary-active-fg-color);
    background-color: var(--button-primary-active-bg-color);
    border-color: var(--button-primary-active-border-color);
  }

  .primaryButton:disabled {
    background-color: var(--button-primary-disabled-bg-color);
    border-color: var(--button-primary-disabled-border-color);
    color: var(--button-primary-disabled-fg-color);
    opacity: var(--button-disabled-opacity);
  }

  .secondaryButton {
    color: var(--button-secondary-fg-color);
    background-color: var(--button-secondary-bg-color);
    border-color: var(--button-secondary-border-color);
  }

  .secondaryButton:hover {
    color: var(--button-secondary-hover-fg-color);
    background-color: var(--button-secondary-hover-bg-color);
    border-color: var(--button-secondary-hover-border-color);
  }

  .secondaryButton:active {
    color: var(--button-secondary-active-fg-color);
    background-color: var(--button-secondary-active-bg-color);
    border-color: var(--button-secondary-active-border-color);
  }

  .secondaryButton:disabled {
    background-color: var(--button-secondary-disabled-bg-color);
    border-color: var(--button-secondary-disabled-border-color);
    color: var(--button-secondary-disabled-fg-color);
    opacity: var(--button-disabled-opacity);
  }

  .messageBar {
    --closing-button-icon: url("../media/messageBar_closingButton.3yp2lk9ulopqz.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: var(--border-radius-small, 4px);
    --message-bar-close-button-border: none;
    --message-bar-close-button-hover-bg-color: var(--button-background-color-hover, var(--lightningcss-light, #15141a24) var(--lightningcss-dark, #fbfbfe24));
    --message-bar-close-button-active-bg-color: var(--button-background-color-active, var(--lightningcss-light, #15141a36) var(--lightningcss-dark, #fbfbfe36));
    --message-bar-close-button-focus-bg-color: var(--button-background-color, var(--lightningcss-light, #15141a12) var(--lightningcss-dark, #fbfbfe12));
  }

  @media screen and (forced-colors: active) {
    .messageBar {
      --message-bar-close-button-color: var(--button-text-color, ButtonText);
      --message-bar-close-button-border: 1px solid var(--button-border-color, ButtonText);
      --message-bar-close-button-hover-bg-color: var(--button-background-color-hover, SelectedItemText);
      --message-bar-close-button-active-bg-color: var(--button-background-color-hover, SelectedItemText);
      --message-bar-close-button-focus-bg-color: var(--button-background-color-hover, SelectedItemText);
      --message-bar-close-button-color-hover: var(--button-text-color-hover, SelectedItem);
    }
  }

  .messageBar {
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--border-radius-small, 4px);
    border: 1px solid var(--message-bar-border-color);
    background: var(--message-bar-bg-color);
    color: var(--message-bar-fg-color);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    display: flex;
    position: relative;
  }

  .messageBar > div {
    align-self: stretch;
    align-items: flex-start;
    gap: 8px;
    display: flex;
  }

  .messageBar > div:before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--message-bar-icon);
    -webkit-mask-image: var(--message-bar-icon);
    mask-image: var(--message-bar-icon);
    background-color: var(--message-bar-icon-color);
    flex-shrink: 0;
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .messageBar button {
    cursor: pointer;
  }

  .messageBar button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
  }

  .messageBar .closeButton {
    border-radius: var(--message-bar-close-button-border-radius);
    border: var(--message-bar-close-button-border);
    background: none;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: flex;
  }

  .messageBar .closeButton:before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--closing-button-icon);
    -webkit-mask-image: var(--closing-button-icon);
    mask-image: var(--closing-button-icon);
    background-color: var(--message-bar-close-button-color);
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .messageBar .closeButton:is(:hover, :active, :focus):before {
    background-color: var(--message-bar-close-button-color-hover);
  }

  .messageBar .closeButton:hover {
    background-color: var(--message-bar-close-button-hover-bg-color);
  }

  .messageBar .closeButton:active {
    background-color: var(--message-bar-close-button-active-bg-color);
  }

  .messageBar .closeButton:focus {
    background-color: var(--message-bar-close-button-focus-bg-color);
  }

  .messageBar .closeButton > span {
    width: 0;
    height: 0;
    display: inline-block;
    overflow: hidden;
  }

  #editorUndoBar {
    --message-bar-icon: url("../media/messageBar_info.41_2vlqn7dl4y.svg");
    --message-bar-icon-color: var(--lightningcss-light, #0060df) var(--lightningcss-dark, #73a7f3);
    --message-bar-bg-color: var(--lightningcss-light, #deeafc) var(--lightningcss-dark, #003070);
    --message-bar-fg-color: var(--text-primary-color);
    --message-bar-border-color: var(--lightningcss-light, #00000014) var(--lightningcss-dark, #ffffff14);
  }

  @media screen and (forced-colors: active) {
    #editorUndoBar {
      --message-bar-icon-color: CanvasText;
      --message-bar-bg-color: Canvas;
      --message-bar-border-color: CanvasText;
    }
  }

  #editorUndoBar {
    z-index: 10;
    font: menu;
    cursor: default;
    padding-block: 8px;
    padding-inline: 16px 8px;
    font-size: 15px;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
  }

  #editorUndoBar button {
    cursor: pointer;
  }

  #editorUndoBar #editorUndoBarUndoButton {
    border-color: var(--color-accent-primary, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    margin-inline-start: 8px;
  }

  #editorUndoBar > div {
    align-items: center;
  }

  .dialog {
    --dialog-bg-color: var(--background-color-canvas, var(--lightningcss-light, #fff) var(--lightningcss-dark, #1c1b22));
    --dialog-border-color: var(--background-color-canvas, var(--lightningcss-light, #fff) var(--lightningcss-dark, #1c1b22));
    --dialog-shadow: 0 2px 14px 0 var(--lightningcss-light, #3a394433) var(--lightningcss-dark, #15141a);
    --text-secondary-color: var(--lightningcss-light, #5b5b66) var(--lightningcss-dark, #cfcfd8);
    --separator-color: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #52525e);
    --textarea-border-color: var(--border-color-interactive, #8f8f9d);
    --textarea-bg-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #42414d);
    --textarea-fg-color: var(--text-secondary-color);
    --input-text-bg-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #42414d);
    --input-text-fg-color: var(--text-primary-color);
  }

  @media screen and (forced-colors: active) {
    .dialog {
      --dialog-bg-color: var(--background-color-canvas, Canvas);
      --dialog-border-color: var(--border-color, CanvasText);
      --dialog-shadow: none;
      --text-secondary-color: CanvasText;
      --separator-color: CanvasText;
      --textarea-border-color: ButtonBorder;
      --textarea-bg-color: Field;
      --textarea-fg-color: ButtonText;
      --input-text-bg-color: Field;
      --input-text-fg-color: FieldText;
    }
  }

  .dialog {
    font: message-box;
    border-radius: var(--border-radius-medium, 4px);
    border: 1px solid var(--dialog-border-color);
    background: var(--dialog-bg-color);
    color: var(--text-primary-color);
    box-shadow: var(--dialog-shadow);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
  }

  .dialog .mainContainer :focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
  }

  .dialog .mainContainer .title {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    display: flex;
  }

  .dialog .mainContainer .title > span {
    font-size: 13px;
    font-style: normal;
    font-weight: 590;
    line-height: 150%;
  }

  .dialog .mainContainer .dialogSeparator {
    border-top: 1px solid var(--separator-color);
    border-bottom: none;
    width: 100%;
    height: 0;
    margin-block: 4px;
  }

  .dialog .mainContainer .dialogButtonsGroup {
    align-self: flex-end;
    gap: 12px;
    display: flex;
  }

  .dialog .mainContainer input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--color-accent-primary, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    width: var(--checkbox-size, 16px);
    height: var(--checkbox-size, 16px);
  }

  .dialog .mainContainer .radio {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    display: flex;
  }

  .dialog .mainContainer .radio > .radioButton {
    align-self: stretch;
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .dialog .mainContainer .radio > .radioLabel {
    align-self: stretch;
    align-items: flex-start;
    gap: 10px;
    padding-inline-start: 24px;
    display: flex;
  }

  .dialog .mainContainer .radio > .radioLabel > span {
    color: var(--text-secondary-color);
    flex: 1 0 0;
    font-size: 11px;
  }

  .dialog .mainContainer button:not(:is(.toggle-button, .closeButton, .clearInputButton)) {
    border-radius: var(--button-border-radius, 4px);
    font: menu;
    font-weight: var(--button-font-weight, 590);
    font-size: var(--button-font-size, 13px);
    padding: var(--button-padding, 4px 16px);
    width: auto;
    min-height: var(--button-min-height, 32px);
    border-style: solid;
    border-width: 1px;
  }

  .dialog .mainContainer button:not(:is(.toggle-button, .closeButton, .clearInputButton)):hover {
    cursor: pointer;
    filter: var(--hover-filter);
  }

  .dialog .mainContainer button:not(:is(.toggle-button, .closeButton, .clearInputButton)) > span {
    color: inherit;
    font: inherit;
  }

  .dialog .mainContainer button:not(:is(.toggle-button, .closeButton, .clearInputButton)):disabled {
    pointer-events: none;
  }

  .dialog .mainContainer a {
    color: var(--link-fg-color);
  }

  .dialog .mainContainer a:hover {
    color: var(--link-hover-fg-color);
  }

  .dialog .mainContainer textarea {
    font: inherit;
    resize: none;
    box-sizing: border-box;
    border-radius: var(--border-radius-small, 4px);
    border: 1px solid var(--textarea-border-color);
    background: var(--textarea-bg-color);
    color: var(--textarea-fg-color);
    margin: 0;
    padding: 8px;
  }

  .dialog .mainContainer textarea:focus {
    outline-offset: 0;
    border-color: #0000;
  }

  .dialog .mainContainer textarea:disabled {
    pointer-events: none;
    opacity: .4;
  }

  .dialog .mainContainer input[type="text"] {
    background-color: var(--input-text-bg-color);
    color: var(--input-text-fg-color);
  }

  .dialog .mainContainer .messageBar {
    --message-bar-bg-color: var(--lightningcss-light, #ffebcd) var(--lightningcss-dark, #5a3100);
    --message-bar-fg-color: var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe);
    --message-bar-border-color: var(--lightningcss-light, #00000014) var(--lightningcss-dark, #ffffff14);
    --message-bar-icon: url("../media/messageBar_warning.3242mag5z0k17.svg");
    --message-bar-icon-color: var(--lightningcss-light, #cd411e) var(--lightningcss-dark, #e49c49);
  }

  @media screen and (forced-colors: active) {
    .dialog .mainContainer .messageBar {
      --message-bar-bg-color: HighlightText;
      --message-bar-fg-color: CanvasText;
      --message-bar-border-color: CanvasText;
      --message-bar-icon-color: CanvasText;
    }
  }

  .dialog .mainContainer .messageBar {
    align-self: stretch;
  }

  .dialog .mainContainer .messageBar > div:before, .dialog .mainContainer .messageBar > div > div {
    margin-block: 4px;
  }

  .dialog .mainContainer .messageBar > div > div {
    flex-direction: column;
    flex: 1 0 0;
    align-items: flex-start;
    gap: 8px;
    display: flex;
  }

  .dialog .mainContainer .messageBar > div > div .title {
    font-size: 13px;
    font-weight: 590;
  }

  .dialog .mainContainer .messageBar > div > div .description {
    font-size: 13px;
  }

  .dialog .mainContainer .toggler {
    align-self: stretch;
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .dialog .mainContainer .toggler > .togglerLabel {
    -webkit-user-select: none;
    user-select: none;
  }

  .textLayer {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light only;
    text-align: initial;
    opacity: 1;
    letter-spacing: normal;
    word-spacing: normal;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    caret-color: canvastext;
    z-index: 0;
    line-height: 1;
    position: absolute;
    inset: 0;
    overflow: clip;
  }

  .textLayer.highlighting {
    touch-action: none;
  }

  .textLayer :is(span, br) {
    color: #0000;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
    -webkit-user-select: text;
    user-select: text;
    position: absolute;
  }

  .textLayer {
    --min-font-size: 1;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
  }

  .textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
  }

  .textLayer .markedContent {
    display: contents;
  }

  .textLayer span[role="img"] {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
  }

  .textLayer .highlight {
    --highlight-bg-color: #b400aa40;
    --highlight-selected-bg-color: #00640040;
    --highlight-backdrop-filter: none;
    --highlight-selected-backdrop-filter: none;
  }

  @media screen and (forced-colors: active) {
    .textLayer .highlight {
      --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);
    }
  }

  .textLayer .highlight {
    background-color: var(--highlight-bg-color);
    -webkit-backdrop-filter: var(--highlight-backdrop-filter);
    backdrop-filter: var(--highlight-backdrop-filter);
    border-radius: 4px;
    margin: -1px;
    padding: 1px;
  }

  .textLayer .highlight.appended {
    position: initial;
  }

  .textLayer .highlight.begin {
    border-radius: 4px 0 0 4px;
  }

  .textLayer .highlight.end {
    border-radius: 0 4px 4px 0;
  }

  .textLayer .highlight.middle {
    border-radius: 0;
  }

  .textLayer .highlight.selected {
    background-color: var(--highlight-selected-bg-color);
    -webkit-backdrop-filter: var(--highlight-selected-backdrop-filter);
    backdrop-filter: var(--highlight-selected-backdrop-filter);
    scroll-margin-top: 50px;
  }

  .textLayer ::selection {
    background: #0000ff40;
    background: color-mix(in srgb, AccentColor, transparent 50%);
    color: #0000;
  }

  .textLayer.selectionRendering ::selection {
    color: #0000;
    background: none;
  }

  .textLayer br::selection {
    background: none;
  }

  .textLayer .endOfContent {
    z-index: 0;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    inset: 100% 0 0;
  }

  .textLayer.selecting .endOfContent {
    top: 0;
  }

  .textLayerImages {
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    inset: 0;
  }

  .textLayerImages canvas {
    transform-origin: 0 0;
    position: absolute;
  }

  .annotationLayer {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light only;
    --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>");
    --annotation-unfocused-field-filter: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pdfjsFillableField' x='0%' y='0%' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='rgb(0,54,255)' flood-opacity='0.13' result='f'/><feComposite in='f' in2='SourceGraphic' operator='over'/></filter></svg>#pdfjsFillableField");
    --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) {
    .annotationLayer {
      --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;
    }

    .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
      outline: 1.5px solid selecteditem;
    }

    .annotationLayer .linkAnnotation {
      outline: var(--link-outline);
    }

    .annotationLayer .linkAnnotation:hover {
      -webkit-backdrop-filter: var(--hcm-highlight-filter);
      backdrop-filter: var(--hcm-highlight-filter);
    }

    .annotationLayer .linkAnnotation > a:hover {
      box-shadow: none;
      opacity: 0 !important;
      background: none !important;
    }

    .annotationLayer .popupAnnotation .popup {
      outline: calc(1.5px * var(--total-scale-factor)) solid CanvasText !important;
      color: buttontext !important;
      background-color: buttonface !important;
    }

    .annotationLayer .highlightArea:hover:after {
      width: 100%;
      height: 100%;
      -webkit-backdrop-filter: var(--hcm-highlight-filter);
      backdrop-filter: var(--hcm-highlight-filter);
      content: "";
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    .annotationLayer .popupAnnotation.focused .popup {
      outline: calc(3px * var(--total-scale-factor)) solid Highlight !important;
    }
  }

  .annotationLayer {
    pointer-events: none;
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationLayer[data-main-rotation="90"] .norotate {
    transform: rotate(270deg)translateX(-100%);
  }

  .annotationLayer[data-main-rotation="180"] .norotate {
    transform: rotate(180deg)translate(-100%, -100%);
  }

  .annotationLayer[data-main-rotation="270"] .norotate {
    transform: rotate(90deg)translateY(-100%);
  }

  .annotationLayer.disabled section, .annotationLayer.disabled .popup {
    pointer-events: none;
  }

  .annotationLayer .annotationContent {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .annotationLayer .annotationContent.freetext {
    white-space: nowrap;
    background: none;
    border: none;
    font: 10px / 1.35 sans-serif;
    inset: 0;
    overflow: visible;
  }

  .annotationLayer section {
    text-align: initial;
    pointer-events: auto;
    box-sizing: border-box;
    transform-origin: 0 0;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
  }

  .annotationLayer section:has(div.annotationContent) canvas.annotationContent {
    display: none;
  }

  .annotationLayer section .overlaidText {
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .annotationLayer .hasOwnCanvas:not(.sandboxModified) :is(input, textarea), .annotationLayer .hasOwnCanvas.sandboxModified canvas.annotationContent {
    display: none;
  }

  .textLayer.selecting ~ .annotationLayer section {
    pointer-events: none;
  }

  .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
    width: 100%;
    height: 100%;
    font-size: 1em;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
    opacity: .2;
    background-color: #ff0;
  }

  .annotationLayer .linkAnnotation.hasBorder:hover {
    background-color: #ff03;
  }

  .annotationLayer .hasBorder {
    background-size: 100% 100%;
  }

  .annotationLayer .textAnnotation img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .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(--total-scale-factor)) sans-serif;
    vertical-align: top;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid red;
  }

  .annotationLayer .choiceWidgetAnnotation select option {
    padding: 0;
  }

  .annotationLayer .textWidgetAnnotation textarea {
    resize: none;
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled], .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
    border: 2px solid var(--input-disabled-border-color);
    cursor: not-allowed;
    background: none;
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
    border: 2px solid var(--input-hover-border-color);
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
    border-radius: 2px;
  }

  .annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus {
    border: 2px solid var(--input-focus-border-color);
    outline: var(--input-focus-outline);
    background: none;
    border-radius: 2px;
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
    background-color: #0000;
    background-image: none;
  }

  .annotationLayer .buttonWidgetAnnotation.checkBox :focus {
    border: 2px solid var(--input-focus-border-color);
    outline: var(--input-focus-outline);
    border-radius: 2px;
  }

  .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
    border: 2px solid var(--input-focus-border-color);
    outline: var(--input-focus-outline);
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) [data-canvas-name] {
    filter: var(--annotation-unfocused-field-filter);
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton):focus-within [data-canvas-name] {
    filter: none;
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) [data-canvas-name="checked"]:has( ~ input:checked) {
    display: block;
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) [data-canvas-name="checked"]:has( ~ input:not(:checked)) {
    display: none;
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) [data-canvas-name="unchecked"]:has( ~ input:checked) {
    display: none;
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) [data-canvas-name="unchecked"]:has( ~ input:not(:checked)) {
    display: block;
  }

  .annotationLayer .textWidgetAnnotation input.comb {
    --comb-width: 0px;
    --comb-letter-spacing: calc(var(--comb-width) - 1ch);
    letter-spacing: var(--comb-letter-spacing);
    text-indent: calc(var(--comb-offset, 0) * var(--comb-width) + var(--comb-letter-spacing) / 2);
    padding: 0;
    font-family: monospace;
    overflow-x: hidden;
  }

  .annotationLayer .textWidgetAnnotation input.comb:focus {
    background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--comb-width) - 1px), var(--input-focus-border-color) calc(var(--comb-width) - 1px) var(--comb-width));
  }

  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
    appearance: none;
  }

  :is(.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton):has([data-canvas-name="checked"]) input:checked, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton):has([data-canvas-name="unchecked"]) input:not(:checked)) {
    background-image: none;
  }

  .annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
    width: 100%;
    height: 100%;
  }

  .annotationLayer .mediaAnnotation {
    pointer-events: auto;
  }

  .annotationLayer .mediaAnnotation .mediaContent {
    width: 100%;
  }

  .annotationLayer .mediaAnnotation video.mediaContent {
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
  }

  .annotationLayer .mediaAnnotation audio.mediaContent {
    position: absolute;
    bottom: 0;
  }

  .annotationLayer .mediaAnnotation .mediaPlayButton {
    cursor: pointer;
    background-color: #0000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(0,0,0,0.55)'/%3E%3Cpath d='M40 32 L70 50 L40 68 Z' fill='white'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(48px * var(--total-scale-factor));
    border: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .annotationLayer .mediaAnnotation .mediaPlayButton:hover {
    background-color: #ffffff1a;
  }

  .annotationLayer .popupAnnotation {
    font-size: calc(9px * var(--total-scale-factor));
    pointer-events: none;
    width: max-content;
    max-width: 45%;
    height: auto;
    position: absolute;
  }

  .annotationLayer .popup {
    color: #000;
    box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;
    border-radius: calc(2px * var(--total-scale-factor));
    padding: calc(6px * var(--total-scale-factor));
    cursor: pointer;
    font: message-box;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    background-color: #ff9;
    outline: 1.5px solid #ffff4a;
  }

  .annotationLayer .popupAnnotation.focused .popup {
    outline-width: 3px;
  }

  .annotationLayer .popup * {
    font-size: calc(9px * var(--total-scale-factor));
  }

  .annotationLayer .popup > .header {
    display: inline-block;
  }

  .annotationLayer .popup > .header > .title {
    font-weight: bold;
    display: inline;
  }

  .annotationLayer .popup > .header .popupDate {
    margin-left: calc(5px * var(--total-scale-factor));
    width: fit-content;
    display: inline-block;
  }

  .annotationLayer .popupContent {
    margin-top: calc(2px * var(--total-scale-factor));
    padding-top: calc(2px * var(--total-scale-factor));
    border-top: 1px solid #333;
  }

  .annotationLayer .richText > * {
    white-space: pre-wrap;
    font-size: calc(9px * var(--total-scale-factor));
  }

  .annotationLayer .popupTriggerArea {
    cursor: pointer;
  }

  .annotationLayer .popupTriggerArea:hover {
    -webkit-backdrop-filter: var(--hcm-highlight-filter);
    backdrop-filter: var(--hcm-highlight-filter);
  }

  .annotationLayer section svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationLayer .annotationTextContent {
    opacity: 0;
    color: #0000;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .annotationLayer .annotationTextContent span {
    width: 100%;
    display: inline-block;
  }

  .annotationLayer svg.quadrilateralsContainer {
    contain: strict;
    z-index: -1;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  :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 {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light only;
    background-color: #0000;
  }

  .xfaLayer .highlight {
    background-color: #efcbed;
    border-radius: 4px;
    margin: -1px;
    padding: 1px;
  }

  .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: #cbdfcb;
  }

  .xfaPage {
    position: relative;
    overflow: hidden;
  }

  .xfaContentarea {
    position: absolute;
  }

  .xfaPrintOnly {
    display: none;
  }

  .xfaLayer {
    text-align: initial;
    transform-origin: 0 0;
    line-height: 1.2;
    position: absolute;
    top: 0;
    left: 0;
  }

  .xfaLayer * {
    color: inherit;
    font: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-kerning: inherit;
    letter-spacing: -.01px;
    text-align: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    box-sizing: border-box;
    pointer-events: auto;
    line-height: inherit;
    background-color: #0000;
    margin: 0;
    padding: 0;
  }

  .xfaLayer :required {
    outline: 1.5px solid red;
  }

  .xfaLayer div, .xfaLayer svg, .xfaLayer svg * {
    pointer-events: none;
  }

  .xfaLayer a {
    color: #00f;
  }

  .xfaRich li {
    margin-left: 3em;
  }

  .xfaFont {
    color: #000;
    font-kerning: none;
    letter-spacing: 0;
    vertical-align: 0;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
  }

  .xfaCaption {
    flex: none;
    overflow: hidden;
  }

  .xfaCaptionForCheckButton {
    flex: auto;
    overflow: hidden;
  }

  .xfaLabel {
    width: 100%;
    height: 100%;
  }

  .xfaLeft {
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .xfaRight {
    flex-direction: row-reverse;
    align-items: center;
    display: flex;
  }

  :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
    max-height: 100%;
  }

  .xfaTop {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .xfaBottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    display: flex;
  }

  :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
    width: 100%;
  }

  .xfaBorder {
    pointer-events: none;
    background-color: #0000;
    position: absolute;
  }

  .xfaWrapped {
    width: 100%;
    height: 100%;
  }

  :is(.xfaTextfield, .xfaSelect):focus {
    outline: var(--xfa-focus-outline);
    outline-offset: -1px;
    background-color: #0000;
    background-image: none;
  }

  :is(.xfaCheckbox, .xfaRadio):focus {
    outline: var(--xfa-focus-outline);
  }

  .xfaTextfield, .xfaSelect {
    resize: none;
    background-image: var(--xfa-unfocused-field-background);
    border: none;
    flex: auto;
    width: 100%;
    height: 100%;
  }

  .xfaSelect {
    padding-inline: 2px;
  }

  :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
    flex: 0 auto;
  }

  .xfaButton {
    cursor: pointer;
    text-align: center;
    border: none;
    width: 100%;
    height: 100%;
  }

  .xfaLink {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .xfaCheckbox, .xfaRadio {
    border: none;
    flex: none;
    width: 100%;
    height: 100%;
  }

  .xfaRich {
    white-space: pre-wrap;
    width: 100%;
    height: 100%;
  }

  .xfaImage {
    -o-object-position: left top;
    object-position: left top;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .xfaLrTb, .xfaRlTb, .xfaTb {
    flex-direction: column;
    align-items: stretch;
    display: flex;
  }

  .xfaLr {
    flex-direction: row;
    align-items: stretch;
    display: flex;
  }

  .xfaRl {
    flex-direction: row-reverse;
    align-items: stretch;
    display: flex;
  }

  .xfaTb > div {
    justify-content: left;
  }

  .xfaPosition, .xfaArea {
    position: relative;
  }

  .xfaValignMiddle {
    align-items: center;
    display: flex;
  }

  .xfaTable {
    flex-direction: column;
    align-items: stretch;
    display: flex;
  }

  .xfaTable .xfaRow {
    flex-direction: row;
    align-items: stretch;
    display: flex;
  }

  .xfaTable .xfaRlRow {
    flex-direction: row-reverse;
    flex: 1;
    align-items: stretch;
    display: flex;
  }

  .xfaTable .xfaRlRow > div {
    flex: 1;
  }

  :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
    background: initial;
  }

  @media print {
    .xfaTextfield, .xfaSelect {
      background: none;
    }

    .xfaSelect {
      appearance: none;
      text-indent: 1px;
      text-overflow: "";
    }
  }

  .canvasWrapper svg {
    transform: none;
  }

  .canvasWrapper svg.moving {
    z-index: 100000;
  }

  :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="90"] mask, :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="90"] use:not(.clip, .mask) {
    transform: matrix(0, 1, -1, 0, 1, 0);
  }

  :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="180"] mask, :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="180"] use:not(.clip, .mask) {
    transform: matrix(-1, 0, 0, -1, 1, 1);
  }

  :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="270"] mask, :is(.canvasWrapper svg.highlight, .canvasWrapper svg.highlightOutline)[data-main-rotation="270"] use:not(.clip, .mask) {
    transform: matrix(0, -1, 1, 0, 0, 1);
  }

  .canvasWrapper svg.draw {
    mix-blend-mode: normal;
    position: absolute;
  }

  .canvasWrapper svg.draw[data-draw-rotation="90"] {
    transform: rotate(90deg);
  }

  .canvasWrapper svg.draw[data-draw-rotation="180"] {
    transform: rotate(180deg);
  }

  .canvasWrapper svg.draw[data-draw-rotation="270"] {
    transform: rotate(270deg);
  }

  .canvasWrapper svg.highlight {
    --blend-mode: multiply;
  }

  @media screen and (forced-colors: active) {
    .canvasWrapper svg.highlight {
      --blend-mode: difference;
    }
  }

  .canvasWrapper svg.highlight {
    mix-blend-mode: var(--blend-mode);
    position: absolute;
  }

  .canvasWrapper svg.highlight:not(.free) {
    fill-rule: evenodd;
  }

  .canvasWrapper svg.highlightOutline {
    mix-blend-mode: normal;
    fill-rule: evenodd;
    fill: none;
    position: absolute;
  }

  .canvasWrapper svg.highlightOutline:not(.free).hovered:not(.selected) {
    stroke: var(--hover-outline-color);
    stroke-width: var(--outline-width);
  }

  .canvasWrapper svg.highlightOutline:not(.free).selected .mainOutline {
    stroke: var(--outline-around-color);
    stroke-width: calc(var(--outline-width) + 2 * var(--outline-around-width));
  }

  .canvasWrapper svg.highlightOutline:not(.free).selected .secondaryOutline {
    stroke: var(--outline-color);
    stroke-width: var(--outline-width);
  }

  .canvasWrapper svg.highlightOutline.free.hovered:not(.selected) {
    stroke: var(--hover-outline-color);
    stroke-width: calc(2 * var(--outline-width));
  }

  .canvasWrapper svg.highlightOutline.free.selected .mainOutline {
    stroke: var(--outline-around-color);
    stroke-width: calc(2 * (var(--outline-width) + var(--outline-around-width)));
  }

  .canvasWrapper svg.highlightOutline.free.selected .secondaryOutline {
    stroke: var(--outline-color);
    stroke-width: calc(2 * var(--outline-width));
  }

  .toggle-button {
    --toggle-background-color: var(--button-background-color, currentColor);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .toggle-button {
      --toggle-background-color: var(--button-background-color, color-mix(in srgb, currentColor 7%, transparent));
    }
  }

  .toggle-button {
    --toggle-background-color-hover: var(--button-background-color-hover, currentColor);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .toggle-button {
      --toggle-background-color-hover: var(--button-background-color-hover, color-mix(in srgb, currentColor 14%, transparent));
    }
  }

  .toggle-button {
    --toggle-background-color-active: var(--button-background-color-active, currentColor);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .toggle-button {
      --toggle-background-color-active: var(--button-background-color-active, color-mix(in srgb, currentColor 21%, transparent));
    }
  }

  .toggle-button {
    --toggle-background-color-pressed: var(--color-accent-primary, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --toggle-background-color-pressed-hover: var(--color-accent-primary-hover, var(--lightningcss-light, #0250bb) var(--lightningcss-dark, #80ebff));
    --toggle-background-color-pressed-active: var(--color-accent-primary-active, var(--lightningcss-light, #054096) var(--lightningcss-dark, #aaf2ff));
    --toggle-border-color: var(--border-color-interactive, var(--lightningcss-light, #8f8f9d) var(--lightningcss-dark, #f9f9fa));
    --toggle-border-color-hover: var(--toggle-border-color);
    --toggle-border-color-active: var(--toggle-border-color);
    --toggle-border-radius: var(--border-radius-circle, 9999px);
    --toggle-border-width: var(--border-width, 1px);
    --toggle-height: var(--size-item-small, 16px);
    --toggle-width: var(--size-item-large, 32px);
    --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(--background-color-canvas, var(--lightningcss-light, #fff) var(--lightningcss-dark, #1c1b22));
    --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));
    --input-width: var(--toggle-width);
    appearance: none;
    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-color: var(--toggle-background-color);
    box-sizing: border-box;
    padding: 0;
  }

  .toggle-button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: var(--focus-outline-offset, 2px);
  }

  .toggle-button:enabled:hover {
    background-color: var(--toggle-background-color-hover);
    border-color: var(--toggle-border-color);
  }

  .toggle-button:enabled:hover:active {
    background-color: var(--toggle-background-color-active);
    border-color: var(--toggle-border-color);
  }

  .toggle-button:before {
    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);
    display: block;
    translate: 0;
  }

  .toggle-button[aria-pressed="true"] {
    background-color: var(--toggle-background-color-pressed);
    border-color: #0000;
  }

  .toggle-button[aria-pressed="true"]:enabled:hover {
    background-color: var(--toggle-background-color-pressed-hover);
    border-color: #0000;
  }

  .toggle-button[aria-pressed="true"]:enabled:hover:active {
    background-color: var(--toggle-background-color-pressed-active);
    border-color: #0000;
  }

  .toggle-button[aria-pressed="true"]:before {
    translate: var(--toggle-dot-transform-x);
    background-color: var(--toggle-dot-background-color-on-pressed);
  }

  .toggle-button[aria-pressed="true"]:enabled:hover:before, .toggle-button[aria-pressed="true"]:enabled:hover:active:before {
    background-color: var(--toggle-dot-background-color-on-pressed);
  }

  .toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl):before {
    translate: calc(-1 * var(--toggle-dot-transform-x));
  }

  .toggle-button[aria-pressed="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    translate: calc(-1 * var(--toggle-dot-transform-x));
  }

  @media (prefers-reduced-motion: no-preference) {
    .toggle-button:before {
      transition: translate .1s;
    }
  }

  @media (prefers-contrast) {
    .toggle-button:enabled:hover {
      border-color: var(--toggle-border-color-hover);
    }

    .toggle-button:enabled:hover:active {
      border-color: var(--toggle-border-color-active);
    }

    .toggle-button[aria-pressed="true"]:enabled {
      border-color: var(--toggle-border-color);
      position: relative;
    }

    .toggle-button[aria-pressed="true"]:enabled:hover {
      border-color: var(--toggle-border-color-hover);
    }

    .toggle-button[aria-pressed="true"]:enabled:hover:active {
      background-color: var(--toggle-dot-background-color-active);
      border-color: var(--toggle-dot-background-color-hover);
    }

    .toggle-button:enabled:hover:before, .toggle-button:enabled:hover:active:before {
      background-color: var(--toggle-dot-background-color-hover);
    }
  }

  @media (forced-colors) {
    .toggle-button {
      --toggle-background-color: var(--button-background-color, ButtonFace);
      --toggle-background-color-pressed: var(--color-accent-primary, ButtonText);
      --toggle-background-color-pressed-hover: var(--color-accent-primary-hover, SelectedItem);
      --toggle-background-color-pressed-active: var(--color-accent-primary-active, SelectedItem);
      --toggle-border-color: var(--border-color-interactive, ButtonText);
      --toggle-dot-background-color: var(--color-accent-primary, ButtonText);
      --toggle-dot-background-color-hover: var(--color-accent-primary-hover, SelectedItem);
      --toggle-dot-background-color-active: var(--color-accent-primary-active, SelectedItem);
      --toggle-dot-background-color-on-pressed: var(--button-background-color, ButtonFace);
      --toggle-border-color-hover: var(--border-color-interactive-hover, SelectedItem);
      --toggle-border-color-active: var(--border-color-interactive-active, ButtonText);
    }

    .toggle-button[aria-pressed="true"]:enabled:after {
      border: 1px solid var(--button-background-color, ButtonFace);
      content: "";
      height: var(--toggle-height);
      width: var(--toggle-width);
      border-radius: var(--toggle-border-radius);
      display: block;
      position: absolute;
      inset: -2px;
    }

    .toggle-button[aria-pressed="true"]:enabled:hover:active:after {
      border-color: var(--toggle-border-color-active);
    }
  }

  :root {
    --clear-signature-button-icon: url("../media/editor-toolbar-delete.0cg6qw5q72584.svg");
    --signature-bg: var(--background-color-box-info, var(--lightningcss-light, #f9f9fb) var(--lightningcss-dark, #2b2a33));
    --signature-hover-bg: var(--button-background-color-hover, var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, var(--signature-bg)));
    --button-signature-bg: transparent;
    --button-signature-color: var(--main-color);
    --button-signature-active-bg: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #5b5b66);
    --button-signature-active-border: none;
    --button-signature-active-color: var(--button-signature-color);
    --button-signature-border: none;
    --button-signature-hover-bg: var(--lightningcss-light, #e0e0e6) var(--lightningcss-dark, #52525e);
    --button-signature-hover-color: var(--button-signature-color);
  }

  @media screen and (forced-colors: active) {
    :root {
      --signature-bg: HighlightText;
      --signature-hover-bg: var(--signature-bg);
      --button-signature-bg: HighlightText;
      --button-signature-color: ButtonText;
      --button-signature-active-bg: ButtonText;
      --button-signature-active-color: HighlightText;
      --button-signature-border: 1px solid ButtonText;
      --button-signature-hover-bg: Highlight;
      --button-signature-hover-color: HighlightText;
    }
  }

  .signatureDialog {
    --primary-color: var(--text-primary-color);
    --signature-border-color: var(--border-color-interactive, #8f8f9d);
    --open-link-fg: var(--link-fg-color);
    --open-link-hover-fg: var(--link-hover-fg-color);
  }

  @media screen and (forced-colors: active) {
    .signatureDialog {
      --primary-color: ButtonText;
      --signature-border-color: var(--border-color-interactive, ButtonText);
      --open-link-fg: ButtonText;
      --open-link-hover-fg: ButtonText;
    }
  }

  .signatureDialog {
    width: 570px;
    min-width: 300px;
    max-width: 100%;
    padding: 16px 0;
  }

  .signatureDialog .mainContainer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    display: flex;
  }

  .signatureDialog .mainContainer span:not([role="sectionhead"]) {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .signatureDialog .mainContainer .title {
    margin-inline-start: 16px;
  }

  .signatureDialog .inputWithClearButton {
    --button-dimension: 24px;
    --clear-button-icon: url("../media/messageBar_closingButton.3yp2lk9ulopqz.svg");
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
  }

  .signatureDialog .inputWithClearButton > input {
    width: 100%;
    height: var(--size-item-large, 32px);
    padding-inline: 8px calc(4px + var(--button-dimension));
    box-sizing: border-box;
    border-radius: var(--border-radius-small, 4px);
    border: 1px solid var(--signature-border-color);
  }

  .signatureDialog .inputWithClearButton .clearInputButton {
    width: var(--button-dimension);
    height: var(--button-dimension);
    background-color: var(--input-text-fg-color);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-image: var(--clear-button-icon);
    -webkit-mask-image: var(--clear-button-icon);
    mask-image: var(--clear-button-icon);
    border: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 4px;
  }

  #addSignatureDialog {
    --secondary-color: var(--text-secondary-color);
    --bg-hover: var(--button-background-color-hover, var(--lightningcss-light, #e0e0e6) var(--lightningcss-dark, #52525e));
    --tab-top-line-active-color: var(--color-accent-primary, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --tab-top-line-active-hover-color: var(--tab-text-hover-color);
    --tab-top-line-hover-color: var(--border-color-interactive, #8f8f9d);
    --tab-top-line-inactive-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #8f8f9d);
    --tab-bottom-line-active-color: var(--tab-top-line-inactive-color);
    --tab-bottom-line-hover-color: var(--tab-top-line-inactive-color);
    --tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color);
    --tab-bg: var(--dialog-bg-color);
    --tab-bg-active-color: var(--tab-bg);
    --tab-bg-active-hover-color: var(--bg-hover);
    --tab-bg-hover: var(--bg-hover);
    --tab-panel-border: none;
    --tab-panel-border-radius: var(--border-radius-small, 4px);
    --tab-text-color: var(--primary-color);
    --tab-text-active-color: var(--tab-top-line-active-color);
    --tab-text-active-hover-color: var(--tab-text-hover-color);
    --tab-text-hover-color: var(--tab-text-color);
    --signature-placeholder-color: var(--secondary-color);
    --signature-draw-placeholder-color: var(--primary-color);
    --signature-color: var(--primary-color);
    --save-warning-color: var(--secondary-color);
    --thickness-bg: var(--dialog-bg-color);
    --thickness-label-color: var(--primary-color);
    --thickness-slider-color: var(--primary-color);
    --thickness-border: none;
    --draw-cursor: url("../media/cursor-editorInk.2v9qwn4xrz8j-.svg") 0 16, pointer;
  }

  @media screen and (forced-colors: active) {
    #addSignatureDialog {
      --secondary-color: ButtonText;
      --bg: HighlightText;
      --bg-hover: var(--bg);
      --tab-top-line-active-color: var(--color-accent-primary, ButtonText);
      --tab-top-line-active-hover-color: HighlightText;
      --tab-top-line-hover-color: var(--border-color-interactive, SelectedItem);
      --tab-top-line-inactive-color: ButtonText;
      --tab-bottom-line-active-color: var(--tab-top-line-active-color);
      --tab-bottom-line-hover-color: var(--tab-top-line-hover-color);
      --tab-bg: var(--bg);
      --tab-bg-active-color: SelectedItem;
      --tab-bg-active-hover-color: SelectedItem;
      --tab-panel-border: 1px solid ButtonText;
      --tab-panel-border-radius: 8px;
      --tab-text-color: ButtonText;
      --tab-text-active-color: HighlightText;
      --tab-text-active-hover-color: HighlightText;
      --tab-text-hover-color: SelectedItem;
      --signature-color: ButtonText;
      --thickness-bg: Canvas;
      --thickness-label-color: CanvasText;
      --thickness-slider-color: ButtonText;
      --thickness-border: 1px solid var(--signature-border-color);
    }
  }

  #addSignatureDialog #addSignatureDialogLabel {
    width: 0;
    height: 0;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  #addSignatureDialog.waiting:after {
    content: "";
    cursor: wait;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  #addSignatureDialog .mainContainer [role="tablist"] {
    align-items: flex-start;
    gap: 0;
    width: 100%;
    display: flex;
  }

  #addSignatureDialog .mainContainer [role="tablist"] > [role="tab"] {
    background-color: var(--tab-bg);
    cursor: default;
    border-block-style: solid;
    border-block-width: 1px;
    border-inline: 0;
    border-block-start-color: var(--tab-top-line-inactive-color);
    border-block-end-color: var(--tab-bottom-line-inactive-color);
    font: menu;
    color: var(--tab-text-color);
    border-radius: 0;
    flex: 1 0 0;
    align-self: stretch;
    padding-inline: 0;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  #addSignatureDialog .mainContainer [role="tablist"] > [role="tab"]:hover {
    border-block-start-width: 2px;
    border-block-start-color: var(--tab-top-line-hover-color);
    border-block-end-color: var(--tab-bottom-line-hover-color);
    background-color: var(--tab-bg-hover);
    color: var(--tab-text-hover-color);
  }

  #addSignatureDialog .mainContainer [role="tablist"] > [role="tab"]:focus-visible {
    outline: 2px solid var(--tab-top-line-active-color);
    outline-offset: -2px;
  }

  #addSignatureDialog .mainContainer [role="tablist"] > [role="tab"][aria-selected="true"] {
    border-block-start-width: 2px;
    border-block-start-color: var(--tab-top-line-active-color);
    border-block-end-color: var(--tab-bottom-line-active-color);
    background-color: var(--tab-bg-active-color);
    color: var(--tab-text-active-color);
    font-weight: 590;
  }

  #addSignatureDialog .mainContainer [role="tablist"] > [role="tab"][aria-selected="true"]:hover {
    border-block-start-color: var(--tab-top-line-active-hover-color);
    background-color: var(--tab-bg-active-hover-color);
    color: var(--tab-text-active-hover-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer {
    box-sizing: border-box;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    height: auto;
    padding-inline: 16px;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"] {
    background-color: var(--signature-bg);
    border: var(--tab-panel-border);
    border-radius: var(--tab-panel-border-radius);
    width: 100%;
    height: 220px;
    position: relative;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"] > svg {
    background-color: #0000;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureTypeContainer {
    display: none;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureTypeContainer #addSignatureTypeInput {
    text-align: center;
    width: 100%;
    height: 100%;
    color: var(--signature-color);
    border-radius: var(--tab-panel-border-radius);
    background-color: #0000;
    border: 0;
    padding: 0;
    font-family: Brush script, Apple Chancery, Segoe script, Freestyle Script, Palace Script MT, Brush Script MT, TK, cursive, serif;
    font-size: 44px;
    font-style: italic;
    font-weight: 400;
    position: absolute;
    inset: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureTypeContainer #addSignatureTypeInput::placeholder {
    color: var(--signature-placeholder-color);
    text-align: center;
    font: menu;
    font-size: 44px;
    font-style: normal;
    font-weight: 274;
    line-height: normal;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer {
    display: none;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer > span {
    width: 100%;
    height: 100%;
    color: var(--signature-placeholder-color);
    -webkit-user-select: none;
    user-select: none;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer > svg {
    stroke: var(--signature-color);
    fill: none;
    stroke-opacity: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer > svg:hover {
    cursor: var(--draw-cursor);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: grid;
    position: absolute;
    inset-block-end: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > span {
    color: var(--signature-draw-placeholder-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div {
    background-color: var(--thickness-bg);
    border-inline: var(--thickness-border);
    border-top: var(--thickness-border);
    pointer-events: auto;
    border-radius: 4px 4px 0 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 8px 7px;
    display: flex;
    position: relative;
    top: 1px;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > label {
    color: var(--thickness-label-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input {
    background-color: #0000;
    width: 100px;
    height: 14px;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input::-webkit-slider-runnable-track {
    background-color: var(--thickness-slider-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input::-moz-range-track {
    background-color: var(--thickness-slider-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input::-moz-range-progress {
    background-color: var(--thickness-slider-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input::-webkit-slider-thumb {
    background-color: var(--thickness-bg);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input::-moz-range-thumb {
    background-color: var(--thickness-bg);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureDrawContainer #thickness > div > input {
    color: var(--signature-color);
    border: 0;
    border-radius: 4.5px;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer {
    display: none;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer > svg {
    stroke: none;
    stroke-width: 0;
    fill: var(--signature-color);
    fill-opacity: 1;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer #addSignatureImagePlaceholder {
    background-color: #0000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer #addSignatureImagePlaceholder span {
    color: var(--signature-placeholder-color);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer #addSignatureImagePlaceholder a {
    color: var(--open-link-fg);
    cursor: pointer;
    text-decoration: underline;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer #addSignatureImagePlaceholder a:hover {
    color: var(--open-link-hover-fg);
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer > [role="tabpanel"]#addSignatureImageContainer #addSignatureFilePicker {
    visibility: hidden;
    width: 0;
    height: 0;
    position: relative;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer[data-selected="type"] > #addSignatureTypeContainer, #addSignatureDialog .mainContainer #addSignatureActionContainer[data-selected="draw"] > #addSignatureDrawContainer, #addSignatureDialog .mainContainer #addSignatureActionContainer[data-selected="image"] > #addSignatureImageContainer {
    display: block;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls {
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer {
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #addSignatureDescriptionContainer {
    flex-direction: column;
    flex: 1 0 0;
    align-items: flex-start;
    gap: 4px;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #addSignatureDescriptionContainer:has(input:disabled) > label {
    opacity: .4;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #addSignatureDescriptionContainer > label {
    width: auto;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #clearSignatureButton {
    align-items: center;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #clearSignatureButton > span {
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 24px;
    display: flex;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #horizontalContainer #clearSignatureButton > span:after {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--clear-signature-button-icon);
    -webkit-mask-image: var(--clear-signature-button-icon);
    mask-image: var(--clear-signature-button-icon);
    background-color: currentColor;
    flex-shrink: 0;
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer {
    grid-template-columns: max-content auto;
    gap: 4px;
    width: 100%;
    display: grid;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer > input {
    margin: 0;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer > input:disabled + label {
    opacity: .4;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer > label {
    -webkit-user-select: none;
    user-select: none;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer:not(.fullStorage) #addSignatureSaveWarning {
    display: none;
  }

  #addSignatureDialog .mainContainer #addSignatureActionContainer #addSignatureControls #addSignatureSaveContainer.fullStorage #addSignatureSaveWarning {
    opacity: 1;
    color: var(--save-warning-color);
    font-size: 11px;
    display: block;
  }

  #editSignatureDescriptionDialog .mainContainer {
    box-sizing: border-box;
    padding-inline: 16px;
  }

  #editSignatureDescriptionDialog .mainContainer .title {
    margin-inline-start: 0;
  }

  #editSignatureDescriptionDialog .mainContainer #editSignatureDescriptionAndView {
    justify-content: flex-end;
    align-self: stretch;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    display: flex;
  }

  #editSignatureDescriptionDialog .mainContainer #editSignatureDescriptionAndView #editSignatureDescriptionContainer {
    flex-direction: column;
    flex: auto;
    align-items: flex-start;
    gap: 4px;
    display: flex;
  }

  #editSignatureDescriptionDialog .mainContainer #editSignatureDescriptionAndView > svg {
    background-color: var(--signature-bg);
    width: 210px;
    height: 180px;
    padding: 8px;
  }

  #editSignatureDescriptionDialog .mainContainer #editSignatureDescriptionAndView > svg > path {
    stroke: var(--button-signature-color);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
    fill: none;
  }

  #editSignatureDescriptionDialog .mainContainer #editSignatureDescriptionAndView > svg > path.contours {
    fill: var(--button-signature-color);
    stroke-width: .5px;
  }

  #editorSignatureParamsToolbar {
    padding: 8px;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger {
    gap: 8px;
    padding: 2px;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer {
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    height: 32px;
    display: flex;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button {
    border: var(--button-signature-border);
    background-color: var(--button-signature-bg);
    color: var(--button-signature-color);
    border-radius: 4px;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button:hover {
    background-color: var(--button-signature-hover-bg);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button:active {
    border: var(--button-signature-active-border);
    background-color: var(--button-signature-active-bg);
    color: var(--button-signature-active-color);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button:active:before {
    background-color: var(--button-signature-active-color);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button:focus-visible {
    outline: var(--focus-ring-outline);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer button:focus-visible:before {
    background-color: var(--button-signature-color);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .deleteButton:before {
    -webkit-mask-image: var(--clear-signature-button-icon);
    -webkit-mask-image: var(--clear-signature-button-icon);
    mask-image: var(--clear-signature-button-icon);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton {
    width: calc(.8 * var(--editor-toolbar-min-width));
    height: 100%;
    min-height: var(--menuitem-height);
    aspect-ratio: unset;
    box-sizing: border-box;
    font: message-box;
    text-align: start;
    white-space: normal;
    cursor: default;
    border-radius: 4px;
    outline: none;
    flex: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton > svg {
    aspect-ratio: 1;
    background-color: var(--signature-bg);
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    flex: none;
    height: 100%;
    padding: 4px;
    display: inline-block;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton > svg > path {
    stroke: var(--button-signature-color);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
    fill: none;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton > svg > path.contours {
    fill: var(--button-signature-color);
    stroke-width: .5px;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton:is(:hover, :active) > svg {
    background-color: var(--signature-hover-bg);
    border-radius: 4px 0 0 4px;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton:hover > span {
    color: var(--button-signature-hover-color);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton:active {
    background-color: var(--button-signature-active-bg);
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton:is([disabled="disabled"], [disabled]) {
    opacity: .5;
    pointer-events: none;
  }

  #editorSignatureParamsToolbar #addSignatureDoorHanger .toolbarAddSignatureButtonContainer .toolbarAddSignatureButton > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    height: auto;
    font: menu;
    flex: auto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow: hidden;
  }

  .editDescription.altText {
    --alt-text-add-image: url("../media/editor-toolbar-edit.1iq6c7txplcy3.svg") !important;
  }

  .editDescription.altText:before {
    width: 16px !important;
    height: 16px !important;
  }

  .commentPopup, #commentManagerDialog {
    box-sizing: border-box;
    border-radius: 8px;
    width: 360px;
    min-width: 200px;
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
    padding: 8px 16px 16px;
    position: absolute;
  }

  #commentManagerDialog {
    --comment-close-button-icon: url("../media/comment-closeButton.0w1js94hu46fm.svg");
  }

  #commentManagerDialog .mainContainer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    height: auto;
    display: flex;
  }

  #commentManagerDialog .mainContainer #commentManagerToolbar {
    cursor: move;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: 32px;
    display: flex;
  }

  #commentManagerDialog .mainContainer #commentManagerTextInput {
    width: 100%;
    min-height: 132px;
    margin-bottom: 12px;
  }

  .annotationLayer.disabled .annotationCommentButton {
    display: none;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    --comment-button-bg: var(--background-color-canvas, var(--lightningcss-light, #fff) var(--lightningcss-dark, #1c1b22));
    --comment-button-fg: var(--lightningcss-light, #5b5b66) var(--lightningcss-dark, #fbfbfe);
    --comment-button-active-bg: var(--lightningcss-light, #0041a4) var(--lightningcss-dark, #a6ecf4);
    --comment-button-active-fg: var(--button-text-color-primary, var(--lightningcss-light, #fff) var(--lightningcss-dark, #15141a));
    --comment-button-hover-bg: var(--color-accent-primary-hover, var(--lightningcss-light, #0053cb) var(--lightningcss-dark, #61dce9));
    --comment-button-hover-fg: var(--button-text-color-primary, var(--lightningcss-light, #fff) var(--lightningcss-dark, #15141a));
    --comment-button-selected-bg: var(--color-accent-primary, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --comment-button-border-color: var(--border-color-interactive, var(--lightningcss-light, #8f8f9d) var(--lightningcss-dark, #bfbfc9));
    --comment-button-active-border-color: var(--comment-button-active-bg);
    --comment-button-focus-border-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #3a3944);
    --comment-button-hover-border-color: var(--comment-button-hover-bg);
    --comment-button-selected-border-color: var(--comment-button-selected-bg);
    --comment-button-selected-fg: var(--button-text-color-primary, var(--lightningcss-light, #fff) var(--lightningcss-dark, #15141a));
    --comment-button-dim: 24px;
    --comment-button-box-shadow: 0 .25px .75px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 2px 6px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --comment-button-focus-outline-color: var(--focus-outline-color, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
  }

  @media (prefers-color-scheme: dark) {
    :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  @media screen and (forced-colors: active) {
    :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
      --comment-button-bg: var(--button-background-color, ButtonFace);
      --comment-button-fg: var(--button-text-color, ButtonText);
      --comment-button-hover-bg: var(--button-background-color-hover, SelectedItemText);
      --comment-button-hover-fg: var(--button-text-color-hover, SelectedItem);
      --comment-button-active-bg: var(--button-background-color-active, SelectedItemText);
      --comment-button-active-fg: var(--button-text-color-active, SelectedItem);
      --comment-button-border-color: var(--button-border-color, ButtonBorder);
      --comment-button-active-border-color: var(--button-border-color-active, ButtonBorder);
      --comment-button-hover-border-color: var(--button-border-color-hover, SelectedItem);
      --comment-button-box-shadow: none;
      --comment-button-focus-outline-color: var(--focus-outline-color, CanvasText);
      --comment-button-selected-bg: var(--button-background-color-primary, ButtonBorder);
      --comment-button-selected-fg: var(--button-text-color-primary, ButtonFace);
    }
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
    width: var(--comment-button-dim);
    height: var(--comment-button-dim);
    background-color: var(--comment-button-bg);
    border: 1px solid var(--comment-button-border-color);
    box-shadow: var(--comment-button-box-shadow);
    cursor: auto;
    z-index: 1;
    box-sizing: border-box;
    pointer-events: auto;
    border-radius: 6px 6px 6px 0;
    margin: 0;
    padding: 4px;
    position: absolute;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-radius: 6px 6px 0;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:before {
    content: "";
    width: 100%;
    height: 100%;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--comment-edit-button-icon);
    -webkit-mask-image: var(--comment-edit-button-icon);
    mask-image: var(--comment-edit-button-icon);
    background-color: var(--comment-button-fg);
    transform: scaleX(var(--dir-factor));
    margin: 0;
    padding: 0;
    display: inline-block;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:focus-visible {
    outline: 2px solid var(--comment-button-focus-outline-color);
    outline-offset: 1px;
    border-color: var(--comment-button-focus-border-color);
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:hover {
    border-color: var(--comment-button-hover-border-color);
    background-color: var(--comment-button-hover-bg) !important;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:hover:before {
    background-color: var(--comment-button-hover-fg);
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:active {
    border-color: var(--comment-button-active-border-color);
    background-color: var(--comment-button-active-bg) !important;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton:active:before {
    background-color: var(--comment-button-active-fg);
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton.selected {
    border-color: var(--comment-button-selected-border-color);
    background-color: var(--comment-button-selected-bg) !important;
  }

  :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton.selected:before {
    background-color: var(--comment-button-selected-fg);
  }

  #editorCommentsSidebar, .commentPopup {
    --comment-close-button-icon: url("../media/comment-closeButton.0w1js94hu46fm.svg");
    --comment-popup-edit-button-icon: url("../media/comment-popup-editButton.1-xdqupy2pnp4.svg");
    --comment-popup-delete-button-icon: url("../media/editor-toolbar-delete.0cg6qw5q72584.svg");
    --comment-date-fg-color: var(--lightningcss-light, #15141ab0) var(--lightningcss-dark, #fbfbfeb0);
    --comment-bg-color: var(--lightningcss-light, #f9f9fb) var(--lightningcss-dark, #1c1b22);
    --comment-hover-bg-color: var(--lightningcss-light, #e0e0e6) var(--lightningcss-dark, #2c2b33);
    --comment-active-bg-color: var(--lightningcss-light, #d1d1d9) var(--lightningcss-dark, #3a3944);
    --comment-hover-brightness: .89;
    --comment-hover-filter: brightness(var(--comment-hover-brightness));
    --comment-active-brightness: .825;
    --comment-active-filter: brightness(var(--comment-active-brightness));
    --comment-border-color: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #52525e);
    --comment-focus-outline-color: var(--focus-outline-color, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --comment-fg-color: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --comment-count-bg-color: var(--lightningcss-light, #e2f7ff) var(--lightningcss-dark, #00317e);
    --comment-indicator-active-fg-color: var(--lightningcss-light, #0041a4) var(--lightningcss-dark, #a6ecf4);
    --comment-indicator-active-filter: brightness(calc(1 / var(--comment-active-brightness)));
    --comment-indicator-focus-fg-color: var(--lightningcss-light, #5b5b66) var(--lightningcss-dark, #fbfbfe);
    --comment-indicator-hover-fg-color: var(--color-accent-primary-hover, var(--lightningcss-light, #0053cb) var(--lightningcss-dark, #61dce9));
    --comment-indicator-hover-filter: brightness(calc(1 / var(--comment-hover-brightness)));
    --comment-indicator-selected-fg-color: var(--color-accent-primary, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --button-comment-bg: transparent;
    --button-comment-color: var(--main-color);
    --button-comment-active-bg: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #5b5b66);
    --button-comment-active-border: none;
    --button-comment-active-color: var(--button-comment-color);
    --button-comment-border: none;
    --button-comment-hover-bg: var(--lightningcss-light, #e0e0e6) var(--lightningcss-dark, #52525e);
    --button-comment-hover-color: var(--button-comment-color);
  }

  @media screen and (forced-colors: active) {
    #editorCommentsSidebar, .commentPopup {
      --comment-date-fg-color: CanvasText;
      --comment-bg-color: Canvas;
      --comment-hover-bg-color: Canvas;
      --comment-hover-filter: none;
      --comment-active-bg-color: Canvas;
      --comment-active-filter: none;
      --comment-border-color: CanvasText;
      --comment-fg-color: var(--text-color, CanvasText);
      --comment-count-bg-color: Canvas;
      --comment-indicator-active-fg-color: SelectedItem;
      --comment-indicator-focus-fg-color: var(--text-color, CanvasText);
      --comment-indicator-hover-fg-color: var(--text-color, CanvasText);
      --comment-indicator-selected-fg-color: SelectedItem;
      --button-comment-bg: ButtonFace;
      --button-comment-color: ButtonText;
      --button-comment-active-bg: Highlight;
      --button-comment-active-color: HighlightText;
      --button-comment-border: 1px solid ButtonText;
      --button-comment-hover-bg: Highlight;
      --button-comment-hover-color: HighlightText;
    }
  }

  #editorCommentsSidebar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding-bottom: 16px;
    display: flex;
    overflow-y: visible;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader {
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    display: flex;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader .commentCount {
    -webkit-user-select: none;
    user-select: none;
    align-items: baseline;
    gap: 6px;
    display: flex;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader .commentCount #editorCommentsSidebarTitle {
    font: menu;
    color: var(--comment-fg-color);
    font-size: 17px;
    font-style: normal;
    font-weight: 590;
    line-height: normal;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader .commentCount #editorCommentsSidebarCount {
    background-color: var(--comment-count-bg-color);
    color: var(--comment-fg-color);
    text-align: center;
    font: menu;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton {
    border: var(--button-comment-border);
    background-color: var(--button-comment-bg);
    cursor: pointer;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    padding: 8px;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:before {
    content: "";
    width: 100%;
    height: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--comment-close-button-icon);
    -webkit-mask-image: var(--comment-close-button-icon);
    mask-image: var(--comment-close-button-icon);
    background-color: var(--button-comment-color);
    display: inline-block;
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:hover {
    background-color: var(--button-comment-hover-bg);
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:hover:before {
    background-color: var(--button-comment-hover-color);
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:active {
    border: var(--button-comment-active-border);
    background-color: var(--button-comment-active-bg);
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:active:before {
    background-color: var(--button-comment-active-color);
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton:focus-visible {
    outline: var(--focus-ring-outline);
  }

  #editorCommentsSidebar #editorCommentsSidebarHeader #editorCommentsSidebarCloseButton > span {
    width: 0;
    height: 0;
    display: inline-block;
    overflow: hidden;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer {
    width: 100%;
    overflow: auto;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: auto;
    padding: 4px 16px;
    list-style-type: none;
    display: flex;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment {
    border: .5px solid var(--comment-border-color);
    background-color: var(--comment-bg-color);
    border-radius: 8px;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    gap: 4px;
    width: auto;
    padding: 8px 16px 16px;
    display: flex;
  }

  @media screen and (forced-colors: active) {
    #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):hover {
      background-color: var(--comment-hover-bg-color);
    }
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):hover {
    filter: var(--comment-hover-filter);
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):hover time:after {
    background-color: var(--comment-indicator-hover-fg-color);
    filter: var(--comment-indicator-hover-filter);
    display: inline-block;
  }

  @media screen and (forced-colors: active) {
    #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):active {
      background-color: var(--comment-active-bg-color);
    }
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):active {
    filter: var(--comment-active-filter);
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):active time:after {
    background-color: var(--comment-indicator-active-fg-color);
    filter: var(--comment-indicator-active-filter);
    display: inline-block;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):is(:focus, :focus-visible) time:after {
    background-color: var(--comment-indicator-focus-fg-color);
    display: inline-block;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments):focus-visible {
    outline: 2px solid var(--comment-focus-outline-color);
    outline-offset: 2px;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments).selected .sidebarCommentText {
    -webkit-line-clamp: unset;
    max-height: fit-content;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment:not(.noComments).selected time:after {
    background-color: var(--comment-indicator-selected-fg-color);
    display: inline-block;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment .sidebarCommentText {
    font: menu;
    -webkit-line-clamp: 2;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    width: 100%;
    height: fit-content;
    max-height: 80px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: -webkit-box;
    overflow: hidden;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment .sidebarCommentText .richText {
    --total-scale-factor: 1.5;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment.noComments .sidebarCommentText {
    -webkit-line-clamp: unset;
    -webkit-user-select: none;
    user-select: none;
    max-height: fit-content;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment.noComments a {
    font: menu;
    overflow-wrap: break-word;
    width: 100%;
    height: auto;
    color: var(--link-fg-color);
    margin-block-start: 15px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment.noComments a:focus-visible {
    outline: var(--focus-ring-outline);
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment.noComments a:hover {
    color: var(--link-hover-fg-color);
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment time {
    width: 100%;
    font: menu;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: inline-flex;
  }

  #editorCommentsSidebar #editorCommentsSidebarListContainer #editorCommentsSidebarList .sidebarComment time:after {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--comment-edit-button-icon);
    -webkit-mask-image: var(--comment-edit-button-icon);
    mask-image: var(--comment-edit-button-icon);
    transform: scaleX(var(--dir-factor));
    display: none;
  }

  .commentPopup {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    --divider-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #3a3944);
    --comment-shadow: 0 .5px 2px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 4px 16px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
  }

  @media (prefers-color-scheme: dark) {
    .commentPopup {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  @media screen and (forced-colors: active) {
    .commentPopup {
      --divider-color: CanvasText;
      --comment-shadow: none;
    }
  }

  .commentPopup {
    z-index: 100001;
    pointer-events: auto;
    border: .5px solid var(--comment-border-color);
    background: var(--comment-bg-color);
    box-shadow: var(--comment-shadow);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 2px;
    display: flex;
  }

  .commentPopup:focus-visible {
    outline: none;
  }

  .commentPopup.dragging {
    cursor: move !important;
  }

  .commentPopup.dragging * {
    cursor: move !important;
  }

  .commentPopup.dragging button {
    pointer-events: none !important;
  }

  .commentPopup:not(.selected) .commentPopupButtons {
    visibility: hidden !important;
  }

  .commentPopup hr {
    border: none;
    border-top: 1px solid var(--divider-color);
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
  }

  .commentPopup .commentPopupTop {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    width: 100%;
    height: auto;
    padding-bottom: 4px;
    display: flex;
  }

  .commentPopup .commentPopupTop .commentPopupTime {
    font: menu;
    color: var(--comment-date-fg-color);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .commentPopup .commentPopupTop .commentPopupButtons {
    cursor: default;
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button {
    border: var(--button-comment-border);
    background-color: var(--button-comment-bg);
    width: 32px;
    height: 32px;
    color: var(--button-comment-color);
    border-radius: 4px;
    padding: 8px;
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:hover {
    background-color: var(--button-comment-hover-bg);
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:hover:before {
    background-color: var(--button-comment-hover-color);
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:active {
    border: var(--button-comment-active-border);
    background-color: var(--button-comment-active-bg);
    color: var(--button-comment-active-color);
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:active:before {
    background-color: var(--button-comment-active-color);
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:focus-visible {
    background-color: var(--button-comment-hover-bg);
    outline: 2px solid var(--comment-focus-outline-color);
    outline-offset: 0;
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button:before {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button.commentPopupEdit:before {
    -webkit-mask-image: var(--comment-popup-edit-button-icon);
    -webkit-mask-image: var(--comment-popup-edit-button-icon);
    mask-image: var(--comment-popup-edit-button-icon);
  }

  .commentPopup .commentPopupTop .commentPopupButtons > button.commentPopupDelete:before {
    -webkit-mask-image: var(--comment-popup-delete-button-icon);
    -webkit-mask-image: var(--comment-popup-delete-button-icon);
    mask-image: var(--comment-popup-delete-button-icon);
  }

  .commentPopup .commentPopupText {
    width: 100%;
    height: auto;
    font: menu;
    color: var(--comment-fg-color);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .commentPopupText, .sidebarCommentText .richText {
    margin-block: 0;
  }

  :is(.commentPopupText, .sidebarCommentText .richText) p:first-of-type {
    margin-block: 0;
  }

  :is(.commentPopupText, .sidebarCommentText .richText) > * {
    white-space: pre-wrap;
    font-size: max(15px, calc(10px * var(--total-scale-factor)));
    overflow-wrap: break-word;
  }

  :is(.commentPopupText, .sidebarCommentText .richText) span {
    color: var(--comment-fg-color) !important;
  }

  :root {
    --editor-toolbar-vert-offset: 6px;
    --outline-width: 2px;
    --outline-color: var(--color-blue-60, #0060df);
    --outline-around-width: 1px;
    --outline-around-color: var(--color-gray-20, #f0f0f4);
    --hover-outline-around-color: var(--outline-around-color);
    --editor-selection-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: var(--color-gray-60, #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("../media/cursor-editorInk.2v9qwn4xrz8j-.svg") 0 16, pointer;
    --editorHighlight-editing-cursor: url("../media/cursor-editorTextHighlight.17odi3c6h4ktn.svg") 24 24, text;
    --editorFreeHighlight-editing-cursor: url("../media/cursor-editorFreeHighlight.0quz7mb084jrb.svg") 1 18, pointer;
    --new-alt-text-warning-image: url("../media/altText_warning.2n_d74ishxcjn.svg");
  }

  .textLayer.highlighting {
    cursor: var(--editorFreeHighlight-editing-cursor);
  }

  .textLayer.highlighting:not(.free) span {
    cursor: var(--editorHighlight-editing-cursor);
  }

  .textLayer.highlighting:not(.free) span[role="img"] {
    cursor: var(--editorFreeHighlight-editing-cursor);
  }

  .textLayer.highlighting.free span {
    cursor: var(--editorFreeHighlight-editing-cursor);
  }

  .page:has(.annotationEditorLayer.nonEditing) .annotationLayer .editorAnnotation {
    pointer-events: none;
    position: absolute;
  }

  :is(#viewerContainer.pdfPresentationMode:fullscreen, .annotationEditorLayer.disabled) .noAltTextBadge {
    display: none !important;
  }

  @media (min-resolution: 1.1x) {
    :root {
      --editorFreeText-editing-cursor: url("../media/cursor-editorFreeText.3rjov_dkbjpay.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: var(--color-accent-primary-hover, 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 {
    font-size: calc(100px * var(--total-scale-factor));
    transform-origin: 0 0;
    cursor: auto;
    background: none;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer .selectedEditor {
    z-index: 100000 !important;
  }

  .annotationEditorLayer.drawing * {
    pointer-events: none !important;
  }

  .annotationEditorLayer.getElements {
    pointer-events: auto !important;
  }

  .annotationEditorLayer.getElements > div {
    pointer-events: auto !important;
  }

  .annotationEditorLayer.waiting {
    content: "";
    cursor: wait;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer.disabled {
    pointer-events: none;
  }

  .annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor, .commentPopup) {
    pointer-events: auto;
  }

  .annotationEditorLayer.freetextEditing {
    cursor: var(--editorFreeText-editing-cursor);
  }

  .annotationEditorLayer.inkEditing {
    cursor: var(--editorInk-editing-cursor);
  }

  .annotationEditorLayer .draw {
    box-sizing: border-box;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) {
    z-index: 1;
    transform-origin: 0 0;
    cursor: auto;
    border: var(--unfocus-outline);
    background: none;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor).draggable.selectedEditor {
    cursor: move;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor).selectedEditor {
    border: var(--editor-selection-outline);
    outline: var(--focus-outline-around);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor).selectedEditor:before {
    content: "";
    border: var(--focus-outline-around);
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor):hover:not(.selectedEditor) {
    border: var(--hover-outline);
    outline: var(--hover-outline-around);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor):hover:not(.selectedEditor):before {
    content: "";
    border: var(--focus-outline-around);
    position: absolute;
    inset: 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
    --editor-toolbar-delete-image: url("../media/editor-toolbar-delete.0cg6qw5q72584.svg");
    --editor-toolbar-bg-color: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #2b2a33);
    --editor-toolbar-highlight-image: url("../media/toolbarButton-editorHighlight.20bk732kfgfnn.svg");
    --editor-toolbar-fg-color: var(--lightningcss-light, #2e2e56) var(--lightningcss-dark, #fbfbfe);
    --editor-toolbar-border-color: var(--border-color-interactive, #8f8f9d);
    --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
    --editor-toolbar-hover-bg-color: var(--lightningcss-light, #e0e0e6) var(--lightningcss-dark, #52525e);
    --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
    --editor-toolbar-hover-outline: none;
    --editor-toolbar-focus-outline-color: var(--focus-outline-color, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --editor-toolbar-shadow: 0 2px 6px 0 #3a394433;
    --editor-toolbar-height: 28px;
    --editor-toolbar-padding: 2px;
    --alt-text-done-color: var(--color-accent-attention, var(--lightningcss-light, #2ac3a2) var(--lightningcss-dark, #54ffbd));
    --alt-text-warning-color: var(--lightningcss-light, #0090ed) var(--lightningcss-dark, #80ebff);
    --alt-text-hover-done-color: var(--alt-text-done-color);
    --alt-text-hover-warning-color: var(--alt-text-warning-color);
  }

  @media screen and (forced-colors: active) {
    :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
      --editor-toolbar-bg-color: var(--button-background-color, ButtonFace);
      --editor-toolbar-fg-color: var(--button-text-color, ButtonText);
      --editor-toolbar-border-color: var(--button-border-color, ButtonText);
      --editor-toolbar-hover-border-color: var(--button-border-color-hover, AccentColor);
      --editor-toolbar-hover-bg-color: var(--button-background-color-hover, ButtonFace);
      --editor-toolbar-hover-fg-color: var(--button-text-color-hover, AccentColor);
      --editor-toolbar-hover-outline: 2px solid var(--editor-toolbar-hover-border-color);
      --editor-toolbar-focus-outline-color: var(--button-border-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);
    }
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
    width: fit-content;
    height: var(--editor-toolbar-height);
    cursor: default;
    pointer-events: auto;
    box-sizing: content-box;
    padding: var(--editor-toolbar-padding);
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--editor-toolbar-bg-color);
    border: 1px solid var(--editor-toolbar-border-color);
    box-shadow: var(--editor-toolbar-shadow);
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-block-start: calc(100% + var(--editor-toolbar-vert-offset));
    inset-inline-end: 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar.hidden {
    display: none;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar:has(:focus-visible) {
    border-color: #0000;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    transform-origin: 100% 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    transform-origin: 0 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons {
    justify-content: center;
    align-items: center;
    gap: 0;
    height: 100%;
    display: flex;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons button {
    padding: 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .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;
    margin-inline: 2px;
    display: inline-block;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic {
    width: var(--editor-toolbar-height);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic:before {
    content: "";
    background-color: var(--editor-toolbar-fg-color);
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic:hover:before {
    background-color: var(--editor-toolbar-hover-fg-color);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic.highlightButton:before {
    -webkit-mask-image: var(--editor-toolbar-highlight-image);
    -webkit-mask-image: var(--editor-toolbar-highlight-image);
    mask-image: var(--editor-toolbar-highlight-image);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic.commentButton:before {
    -webkit-mask-image: var(--comment-edit-button-icon);
    -webkit-mask-image: var(--comment-edit-button-icon);
    mask-image: var(--comment-edit-button-icon);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .basic.deleteButton:before {
    -webkit-mask-image: var(--editor-toolbar-delete-image);
    -webkit-mask-image: var(--editor-toolbar-delete-image);
    mask-image: var(--editor-toolbar-delete-image);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons > * {
    height: var(--editor-toolbar-height);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons > :not(.divider) {
    cursor: pointer;
    background-color: #0000;
    border: none;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons > :not(.divider):hover {
    background-color: var(--editor-toolbar-hover-bg-color);
    color: var(--editor-toolbar-hover-fg-color);
    outline: var(--editor-toolbar-hover-outline);
    outline-offset: 1px;
    border-radius: 2px;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons > :not(.divider):hover:active {
    outline: none;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons > :not(.divider):focus-visible {
    outline: 2px solid var(--editor-toolbar-focus-outline-color);
    border-radius: 2px;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText {
    --alt-text-add-image: url("../media/altText_add.3l4c62m6ppksu.svg");
    --alt-text-done-image: url("../media/altText_done.0vxr-09r8xa_i.svg");
    pointer-events: all;
    width: max-content;
    font: menu;
    color: var(--editor-toolbar-fg-color);
    justify-content: center;
    align-items: center;
    padding-inline: 8px;
    font-size: 12px;
    font-weight: 590;
    display: flex;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText:disabled {
    pointer-events: none;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText:before {
    content: "";
    -webkit-mask-image: var(--alt-text-add-image);
    -webkit-mask-image: var(--alt-text-add-image);
    mask-image: var(--alt-text-add-image);
    background-color: var(--editor-toolbar-fg-color);
    width: 12px;
    height: 13px;
    margin-inline-end: 4px;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText:hover:before {
    background-color: var(--editor-toolbar-hover-fg-color);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText.done:before {
    -webkit-mask-image: var(--alt-text-done-image);
    -webkit-mask-image: var(--alt-text-done-image);
    mask-image: var(--alt-text-done-image);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText.new:before {
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--new-alt-text-warning-image);
    -webkit-mask-image: var(--new-alt-text-warning-image);
    mask-image: var(--new-alt-text-warning-image);
    background-color: var(--alt-text-warning-color);
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText.new:hover:before {
    background-color: var(--alt-text-hover-warning-color);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText.new.done:before {
    -webkit-mask-image: var(--alt-text-done-image);
    -webkit-mask-image: var(--alt-text-done-image);
    mask-image: var(--alt-text-done-image);
    background-color: var(--alt-text-done-color);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText.new.done:hover:before {
    background-color: var(--alt-text-hover-done-color);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText .tooltip {
    word-wrap: anywhere;
    display: none;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
    --alt-text-tooltip-bg: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #1c1b22);
    --alt-text-tooltip-fg: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --alt-text-tooltip-border: var(--border-color-interactive, #8f8f9d);
    --alt-text-tooltip-shadow: 0 2px 6px 0 var(--lightningcss-light, #3a394433) var(--lightningcss-dark, #15141a);
  }

  @media screen and (forced-colors: active) {
    :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
      --alt-text-tooltip-bg: Canvas;
      --alt-text-tooltip-fg: var(--text-color, CanvasText);
      --alt-text-tooltip-border: var(--border-color, CanvasText);
      --alt-text-tooltip-shadow: none;
    }
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
    top: calc(100% + 2px);
    border: .5px solid var(--alt-text-tooltip-border);
    background: var(--alt-text-tooltip-bg);
    width: max-content;
    max-width: 300px;
    height: auto;
    box-shadow: var(--alt-text-tooltip-shadow);
    color: var(--alt-text-tooltip-fg);
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 2px 3px;
    padding-inline: 3px;
    font-size: 12px;
    display: inline-flex;
    position: absolute;
    inset-inline-start: 0;
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .comment {
    width: var(--editor-toolbar-height);
  }

  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar .buttons .comment:before {
    content: "";
    -webkit-mask-image: var(--comment-edit-button-icon);
    -webkit-mask-image: var(--comment-edit-button-icon);
    mask-image: var(--comment-edit-button-icon);
    background-color: var(--editor-toolbar-fg-color);
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .annotationEditorLayer .freeTextEditor {
    padding: calc(var(--freetext-padding) * var(--total-scale-factor));
    touch-action: none;
    width: auto;
    height: auto;
  }

  .annotationEditorLayer .freeTextEditor .internal {
    white-space: nowrap;
    font: 10px sans-serif;
    line-height: var(--freetext-line-height);
    text-align: start;
    -webkit-user-select: none;
    user-select: none;
    background: none;
    border: none;
    inset: 0;
    overflow: visible;
  }

  .annotationEditorLayer .freeTextEditor .overlay {
    background: none;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer freeTextEditor .overlay.enabled {
    display: block;
  }

  .annotationEditorLayer .freeTextEditor .internal:empty:before {
    content: attr(default-content);
    color: gray;
  }

  .annotationEditorLayer .freeTextEditor .internal:focus {
    -webkit-user-select: auto;
    user-select: auto;
    outline: none;
  }

  .annotationEditorLayer .inkEditor {
    width: 100%;
    height: 100%;
  }

  .annotationEditorLayer .inkEditor.editing {
    cursor: inherit;
  }

  .annotationEditorLayer .inkEditor .inkEditorCanvas {
    touch-action: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer .stampEditor {
    width: auto;
    height: auto;
  }

  .annotationEditorLayer .stampEditor canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationEditorLayer .stampEditor .noAltTextBadge {
    --no-alt-text-badge-border-color: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #52525e);
    --no-alt-text-badge-bg-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #fbfbfe);
    --no-alt-text-badge-fg-color: var(--lightningcss-light, #5b5b66) var(--lightningcss-dark, #15141a);
  }

  @media screen and (forced-colors: active) {
    .annotationEditorLayer .stampEditor .noAltTextBadge {
      --no-alt-text-badge-border-color: ButtonText;
      --no-alt-text-badge-bg-color: ButtonFace;
      --no-alt-text-badge-fg-color: ButtonText;
    }
  }

  .annotationEditorLayer .stampEditor .noAltTextBadge {
    pointer-events: none;
    z-index: 1;
    border: 1px solid var(--no-alt-text-badge-border-color);
    background: var(--no-alt-text-badge-bg-color);
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 3px;
    display: inline-flex;
    position: absolute;
    inset-block-end: 5px;
    inset-inline-end: 5px;
  }

  .annotationEditorLayer .stampEditor .noAltTextBadge:before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--new-alt-text-warning-image);
    -webkit-mask-image: var(--new-alt-text-warning-image);
    mask-image: var(--new-alt-text-warning-image);
    background-color: var(--no-alt-text-badge-fg-color);
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers {
    z-index: 1;
    position: absolute;
    inset: 0;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers.hidden {
    display: none;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .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;
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.topLeft {
    top: var(--resizer-shift);
    left: var(--resizer-shift);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.topMiddle {
    top: var(--resizer-shift);
    left: calc(50% + var(--resizer-shift));
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.topRight {
    top: var(--resizer-shift);
    right: var(--resizer-shift);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.middleRight {
    top: calc(50% + var(--resizer-shift));
    right: var(--resizer-shift);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.bottomRight {
    bottom: var(--resizer-shift);
    right: var(--resizer-shift);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.bottomMiddle {
    bottom: var(--resizer-shift);
    left: calc(50% + var(--resizer-shift));
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.bottomLeft {
    bottom: var(--resizer-shift);
    left: var(--resizer-shift);
  }

  .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) > .resizers > .resizer.middleLeft {
    top: calc(50% + var(--resizer-shift));
    left: var(--resizer-shift);
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.topLeft, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.bottomRight {
    cursor: nwse-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.topMiddle, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.bottomMiddle {
    cursor: ns-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.topRight, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.bottomLeft {
    cursor: nesw-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.middleRight, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer.middleLeft {
    cursor: ew-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.topLeft, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.bottomRight {
    cursor: nesw-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.topMiddle, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.bottomMiddle {
    cursor: ew-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.topRight, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.bottomLeft {
    cursor: nwse-resize;
  }

  :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.middleRight, :is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer.middleLeft {
    cursor: ns-resize;
  }

  .annotationEditorLayer :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;
  }

  .annotationEditorLayer :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:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    inset-block-start: 0;
    inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset));
  }

  .annotationEditorLayer :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:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    inset-block-start: 0;
    inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
  }

  .annotationEditorLayer :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 {
    inset-block-start: calc(0px - var(--editor-toolbar-vert-offset));
    inset-inline-end: 100%;
    rotate: 180deg;
  }

  .annotationEditorLayer :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;
  }

  .annotationEditorLayer :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:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    inset-block-start: 100%;
    inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
  }

  .annotationEditorLayer :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:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    inset-block-start: 0;
    inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset));
  }

  .dialog.altText::backdrop {
    -webkit-mask: url("#alttext-manager-mask");
    mask: url("#alttext-manager-mask");
  }

  .dialog.altText.positioned {
    margin: 0;
  }

  .dialog.altText #altTextContainer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 300px;
    height: fit-content;
    display: inline-flex;
  }

  .dialog.altText #altTextContainer #overallDescription {
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    gap: 4px;
    display: flex;
  }

  .dialog.altText #altTextContainer #overallDescription span {
    align-self: stretch;
  }

  .dialog.altText #altTextContainer #overallDescription .title {
    font-size: 13px;
    font-style: normal;
    font-weight: 590;
  }

  .dialog.altText #altTextContainer #addDescription {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    display: flex;
  }

  .dialog.altText #altTextContainer #addDescription .descriptionArea {
    flex: 1;
    padding-inline: 24px 10px;
  }

  .dialog.altText #altTextContainer #addDescription .descriptionArea textarea {
    width: 100%;
    min-height: 75px;
  }

  .dialog.altText #altTextContainer #buttons {
    justify-content: flex-end;
    align-self: stretch;
    align-items: flex-start;
    gap: 8px;
    display: flex;
  }

  .dialog.newAltText {
    --new-alt-text-ai-disclaimer-icon: url("../media/altText_disclaimer.37ogwhzdj2pw9.svg");
    --new-alt-text-spinner-icon: url("../media/altText_spinner.03fpgjy_2r7vt.svg");
    --preview-image-bg-color: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #2b2a33);
    --preview-image-border: none;
  }

  @media screen and (forced-colors: active) {
    .dialog.newAltText {
      --preview-image-bg-color: ButtonFace;
      --preview-image-border: 1px solid ButtonText;
    }
  }

  .dialog.newAltText {
    width: 80%;
    min-width: 300px;
    max-width: 570px;
    padding: 0;
  }

  .dialog.newAltText.noAi #newAltTextDisclaimer, .dialog.newAltText.noAi #newAltTextCreateAutomatically {
    display: none !important;
  }

  .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically {
    display: none !important;
  }

  .dialog.newAltText.aiInstalling #newAltTextDownloadModel {
    display: flex !important;
  }

  .dialog.newAltText.error #newAltTextNotNow {
    display: none !important;
  }

  .dialog.newAltText.error #newAltTextCancel {
    display: inline-block !important;
  }

  .dialog.newAltText:not(.error) #newAltTextError {
    display: none !important;
  }

  .dialog.newAltText #newAltTextContainer {
    flex-direction: column;
    flex: 0 auto;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    padding: 16px;
    line-height: normal;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent {
    flex: auto;
    justify-content: flex-end;
    align-self: stretch;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionAndSettings {
    flex-direction: column;
    flex: 1 0 0;
    align-self: stretch;
    align-items: flex-start;
    gap: 16px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction {
    flex-direction: column;
    flex: auto;
    align-self: stretch;
    align-items: flex-start;
    gap: 8px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer {
    width: 100%;
    height: 70px;
    position: relative;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer textarea {
    width: 100%;
    height: 100%;
    padding: 8px;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer textarea::placeholder {
    color: var(--text-secondary-color);
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer .altTextSpinner {
    background-color: var(--text-secondary-color);
    pointer-events: none;
    width: 16px;
    height: 16px;
    display: none;
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer.loading textarea::placeholder {
    color: #0000;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescriptionContainer.loading .altTextSpinner {
    -webkit-mask-image: var(--new-alt-text-spinner-icon);
    -webkit-mask-image: var(--new-alt-text-spinner-icon);
    mask-image: var(--new-alt-text-spinner-icon);
    display: inline-block;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDescription {
    font-size: 11px;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDisclaimer {
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #descriptionInstruction #newAltTextDisclaimer:before {
    content: "";
    width: 17px;
    height: 16px;
    -webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon);
    -webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon);
    mask-image: var(--new-alt-text-ai-disclaimer-icon);
    background-color: var(--text-secondary-color);
    flex: 1 0 auto;
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #newAltTextDownloadModel {
    align-self: stretch;
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #newAltTextDownloadModel:before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--new-alt-text-spinner-icon);
    -webkit-mask-image: var(--new-alt-text-spinner-icon);
    mask-image: var(--new-alt-text-spinner-icon);
    background-color: var(--text-secondary-color);
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #newAltTextImagePreview {
    aspect-ratio: 1;
    background-color: var(--preview-image-bg-color);
    border: var(--preview-image-border);
    flex: none;
    justify-content: center;
    align-items: center;
    width: 180px;
    display: flex;
  }

  .dialog.newAltText #newAltTextContainer #mainContent #newAltTextImagePreview > canvas {
    max-width: 100%;
    max-height: 100%;
  }

  .colorPicker {
    --hover-outline-color: var(--color-accent-primary-hover, var(--lightningcss-light, #0250bb) var(--lightningcss-dark, #80ebff));
    --selected-outline-color: var(--lightningcss-light, #0060df) var(--lightningcss-dark, #aaf2ff);
    --swatch-border-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #52525e);
  }

  @media screen and (forced-colors: active) {
    .colorPicker {
      --hover-outline-color: Highlight;
      --selected-outline-color: var(--hover-outline-color);
      --swatch-border-color: ButtonText;
    }
  }

  .colorPicker .swatch {
    border: 1px solid var(--swatch-border-color);
    outline-offset: 2px;
    box-sizing: border-box;
    forced-color-adjust: none;
    border-radius: 100%;
    width: 16px;
    height: 16px;
  }

  .colorPicker button:is(:hover, .selected) > .swatch {
    border: none;
  }

  .basicColorPicker {
    width: 28px;
  }

  .basicColorPicker::-moz-color-swatch {
    border-radius: 100%;
    margin: 0;
  }

  .basicColorPicker::-webkit-color-swatch {
    border-radius: 100%;
    margin: 0;
  }

  .annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar {
    rotate: none;
  }

  .annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar {
    rotate: 270deg;
  }

  .annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar {
    rotate: 180deg;
  }

  .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar {
    rotate: 90deg;
  }

  .annotationEditorLayer .highlightEditor {
    z-index: 1;
    cursor: auto;
    pointer-events: none;
    transform-origin: 0 0;
    background: none;
    border: none;
    outline: none;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
  }

  .annotationEditorLayer .highlightEditor:not(.free) {
    transform: none;
  }

  .annotationEditorLayer .highlightEditor .internal {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .annotationEditorLayer .highlightEditor.disabled .internal {
    pointer-events: none;
  }

  .annotationEditorLayer .highlightEditor.selectedEditor .internal {
    cursor: pointer;
  }

  .annotationEditorLayer .highlightEditor .editToolbar {
    --editor-toolbar-colorpicker-arrow-image: url("../media/toolbarButton-menuArrow.2l1iy0savy3q2.svg");
    transform-origin: center !important;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker {
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 4px;
    display: flex;
    position: relative;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:after {
    content: "";
    -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
    -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
    mask-image: var(--editor-toolbar-colorpicker-arrow-image);
    background-color: var(--editor-toolbar-fg-color);
    width: 12px;
    height: 12px;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover:after {
    background-color: var(--editor-toolbar-hover-fg-color);
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)) {
    background-color: var(--editor-toolbar-hover-bg-color);
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)):after {
    scale: -1;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown {
    background-color: var(--editor-toolbar-bg-color);
    border: 1px solid var(--editor-toolbar-border-color);
    box-shadow: var(--editor-toolbar-shadow);
    width: calc(100% + 2 * var(--editor-toolbar-padding));
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 11px;
    padding-block: 8px;
    display: flex;
    position: absolute;
    inset-block-start: calc(100% + 4px);
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button {
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    display: flex;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible) {
    outline: none;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch {
    outline-offset: 2px;
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch {
    outline: 2px solid var(--selected-outline-color);
  }

  .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch {
    outline: 2px solid var(--hover-outline-color);
  }

  .editorParamsToolbar:has(#highlightParamsToolbarContainer) {
    padding: unset;
  }

  #highlightParamsToolbarContainer {
    gap: 16px;
    padding-block-end: 12px;
    padding-inline: 10px;
  }

  #highlightParamsToolbarContainer .colorPicker {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    display: flex;
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown button {
    cursor: pointer;
    background: none;
    border: none;
    flex: none;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown button .swatch {
    width: 24px;
    height: 24px;
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible) {
    outline: none;
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"] > .swatch {
    outline: 2px solid var(--selected-outline-color);
  }

  #highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch {
    outline: 2px solid var(--hover-outline-color);
  }

  #highlightParamsToolbarContainer #editorHighlightThickness {
    flex-direction: column;
    align-self: stretch;
    align-items: center;
    gap: 4px;
    display: flex;
  }

  #highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel {
    align-self: stretch;
    height: auto;
  }

  #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
    --example-color: var(--lightningcss-light, #bfbfc9) var(--lightningcss-dark, #80808e);
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  @media screen and (forced-colors: active) {
    #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
      --example-color: CanvasText;
    }
  }

  :is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]) {
    opacity: .4;
  }

  #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker:before, #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker:after {
    content: "";
    aspect-ratio: 1;
    background-color: var(--example-color);
    border-radius: 100%;
    width: 8px;
    display: block;
  }

  #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker:after {
    width: 24px;
  }

  #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider {
    width: unset;
    height: 14px;
  }

  #highlightParamsToolbarContainer #editorHighlightVisibility {
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    gap: 8px;
    display: flex;
  }

  #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
    --divider-color: var(--lightningcss-light, #d7d7db) var(--lightningcss-dark, #8f8f9d);
  }

  @media screen and (forced-colors: active) {
    #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
      --divider-color: CanvasText;
    }
  }

  #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
    background-color: var(--divider-color);
    width: 100%;
    height: 1px;
    margin-block: 4px;
  }

  #highlightParamsToolbarContainer #editorHighlightVisibility .toggler {
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  #altTextSettingsDialog {
    padding: 16px;
  }

  #altTextSettingsDialog #altTextSettingsContainer {
    flex-direction: column;
    gap: 16px;
    width: 573px;
    display: flex;
  }

  #altTextSettingsDialog #altTextSettingsContainer .mainContainer {
    gap: 16px;
  }

  #altTextSettingsDialog #altTextSettingsContainer .description {
    color: var(--text-secondary-color);
  }

  #altTextSettingsDialog #altTextSettingsContainer #aiModelSettings {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  #altTextSettingsDialog #altTextSettingsContainer #automaticAltText, #altTextSettingsDialog #altTextSettingsContainer #altTextEditor {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  #altTextSettingsDialog #altTextSettingsContainer #createModelDescription, #altTextSettingsDialog #altTextSettingsContainer #aiModelSettings, #altTextSettingsDialog #altTextSettingsContainer #showAltTextDialogDescription {
    padding-inline-start: 40px;
  }

  #altTextSettingsDialog #altTextSettingsContainer #automaticSettings {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  button.hasPopupMenu[aria-expanded="true"] + menu {
    visibility: visible;
  }

  button.hasPopupMenu[aria-expanded="false"] + menu {
    visibility: hidden;
  }

  .popupMenu {
    --menuitem-checkmark-icon: url("../media/checkmark.0gcgeaym90-lk.svg");
    --menu-mark-icon-size: 0;
    --menu-icon-size: 16px;
    --menuitem-gap: 5px;
    --menuitem-border-color: transparent;
    --menuitem-active-bg: var(--menu-text-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .popupMenu {
      --menuitem-active-bg: color-mix(in srgb,
    var(--menu-text-color),
    transparent 79%);
    }
  }

  .popupMenu {
    --menuitem-text-active-fg: var(--menu-text-color);
    --menuitem-active-border-color: var(--menuitem-border-color);
    --menuitem-focus-bg: var(--menu-text-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .popupMenu {
      --menuitem-focus-bg: color-mix(in srgb,
    var(--menu-text-color),
    transparent 93%);
    }
  }

  .popupMenu {
    --menuitem-focus-outline-color: var(--focus-outline-color, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --menuitem-focus-border-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
    --menu-bg: var(--background-color-box, var(--lightningcss-light, #fff) var(--lightningcss-dark, #23222b));
    --menu-background-blend-mode: normal;
    --menu-box-shadow: 0 .375px 1.5px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 3px 12px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --menu-border-color: var(--lightningcss-light, #15141a1a) var(--lightningcss-dark, #fbfbfe1a);
    --menuitem-border-radius: 8px;
    --menu-backdrop-filter: none;
    --menu-text-color: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --menu-text-disabled-color: var(--menu-text-color);
    --menuitem-text-hover-fg: var(--menu-text-color);
    --menuitem-hover-bg: var(--menu-text-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .popupMenu {
      --menuitem-hover-bg: color-mix(in srgb,
    var(--menu-text-color),
    transparent 86%);
    }
  }

  .popupMenu {
    --menuitem-hover-background-blend-mode: normal;
    --disabled-opacity: .62;
  }

  @media screen and (forced-colors: active) {
    .popupMenu {
      --menu-bg: var(--background-color-box, Canvas);
      --menu-background-blend-mode: normal;
      --menu-box-shadow: none;
      --menu-backdrop-filter: none;
      --menu-text-color: var(--text-color, ButtonText);
      --menu-text-disabled-color: GrayText;
      --menu-border-color: CanvasText;
      --menuitem-border-color: none;
      --menuitem-hover-bg: SelectedItemText;
      --menuitem-text-hover-fg: SelectedItem;
      --menuitem-active-bg: SelectedItemText;
      --menuitem-active-border-color: ButtonText;
      --menuitem-text-active-fg: SelectedItem;
      --menuitem-focus-bg: ButtonFace;
      --menuitem-focus-outline-color: var(--focus-outline-color, CanvasText);
      --menuitem-focus-border-color: none;
      --disabled-opacity: 1;
    }
  }

  .popupMenu {
    box-sizing: border-box;
    background: var(--menu-bg);
    background-blend-mode: var(--menu-background-blend-mode);
    width: max-content;
    height: auto;
    box-shadow: var(--menu-box-shadow);
    border: 1px solid var(--menu-border-color);
    -webkit-backdrop-filter: var(--menu-backdrop-filter);
    backdrop-filter: var(--menu-backdrop-filter);
    border-radius: 6px;
    flex-direction: column;
    margin: 0;
    padding: 5px;
    display: flex;
    position: relative;
    top: 1px;
    left: 0;
  }

  .popupMenu.withMark {
    --menu-mark-icon-size: 16px;
  }

  .popupMenu > button {
    width: 100%;
    height: 26px;
    padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap)) var(--menuitem-gap);
    align-items: center;
    gap: var(--menuitem-gap);
    box-sizing: border-box;
    border-radius: var(--menuitem-border-radius);
    border: 1px solid var(--menuitem-border-color);
    background: none;
    display: flex;
    position: relative;
  }

  .popupMenu > button.selected:after {
    content: "";
    width: 11px;
    height: 11px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--menuitem-checkmark-icon);
    -webkit-mask-image: var(--menuitem-checkmark-icon);
    mask-image: var(--menuitem-checkmark-icon);
    background-color: var(--menu-text-color);
    inset-inline-start: var(--menuitem-gap);
    transform: translateY(-50%) scaleX(var(--dir-factor));
    display: inline-block;
    position: absolute;
    top: 50%;
  }

  .popupMenu > button:disabled {
    opacity: var(--disabled-opacity);
  }

  .popupMenu > button:disabled.selected:after, .popupMenu > button:disabled:not(.noIcon):before {
    background-color: var(--menu-text-disabled-color);
  }

  .popupMenu > button:disabled > span {
    color: var(--menu-text-disabled-color);
  }

  .popupMenu > button:not(:disabled):hover {
    background: var(--menuitem-hover-bg);
    background-blend-mode: var(--menuitem-hover-background-blend-mode);
  }

  .popupMenu > button:not(:disabled):hover:not(.noIcon):before {
    background-color: var(--menuitem-text-hover-fg);
  }

  .popupMenu > button:not(:disabled):hover > span {
    color: var(--menuitem-text-hover-fg);
  }

  .popupMenu > button:not(:disabled):hover.selected:after {
    background-color: var(--menuitem-text-hover-fg);
  }

  .popupMenu > button:not(:disabled):active {
    background-color: var(--menuitem-active-bg);
    border-color: var(--menuitem-active-border-color);
  }

  .popupMenu > button:not(:disabled):active > span {
    color: var(--menuitem-text-active-fg);
  }

  .popupMenu > button:not(:disabled):focus-visible {
    border-color: var(--menuitem-focus-border-color);
    background-color: var(--menuitem-focus-bg);
    outline: 2px solid var(--menuitem-focus-outline-color);
    outline-offset: 2px;
  }

  .popupMenu > button:not(.noIcon):before {
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    content: "";
    background-color: var(--menu-text-color);
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .popupMenu > button > span {
    text-align: start;
    width: 100%;
    min-width: max-content;
    color: var(--menu-text-color);
    -webkit-user-select: none;
    user-select: none;
    font: menu;
    align-self: stretch;
    align-items: center;
    padding-inline-start: 6px;
    font-size: 13px;
    font-style: normal;
    font-weight: 510;
    line-height: normal;
    display: flex;
  }

  .treeView {
    --treeitem-color: var(--lightningcss-light, #000c) var(--lightningcss-dark, #fffc);
    --treeitem-bg-color: var(--lightningcss-light, #00000026) var(--lightningcss-dark, #ffffff26);
    --treeitem-hover-color: var(--lightningcss-light, #000000e6) var(--lightningcss-dark, #ffffffe6);
    --treeitem-selected-color: var(--lightningcss-light, #000000e6) var(--lightningcss-dark, #ffffffe6);
    --treeitem-selected-bg-color: var(--lightningcss-light, #00000040) var(--lightningcss-dark, #ffffff40);
    --treeitem-expanded-icon: url("../media/treeitem-expanded.1xno3ircai0yp.svg");
    --treeitem-collapsed-icon: url("../media/treeitem-collapsed.3avaaceg0q15i.svg");
  }

  .treeView.withNesting .treeItemToggler:before {
    content: "";
    background-color: var(--toolbar-icon-bg-color);
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--treeitem-expanded-icon);
    -webkit-mask-image: var(--treeitem-expanded-icon);
    mask-image: var(--treeitem-expanded-icon);
    display: inline-block;
    position: absolute;
    inset-inline-end: 4px;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .treeView.withNesting .treeItemToggler {
    float: inline-start;
    color: #ffffff80;
    width: 0;
    height: 0;
    position: relative;
  }

  .treeView.withNesting .treeItemToggler.treeItemsHidden:before {
    -webkit-mask-image: var(--treeitem-collapsed-icon);
    -webkit-mask-image: var(--treeitem-collapsed-icon);
    mask-image: var(--treeitem-collapsed-icon);
    transform: scaleX(var(--dir-factor));
  }

  .treeView.withNesting .treeItemToggler.treeItemsHidden ~ .treeItems {
    display: none;
  }

  .treeView.withNesting .treeItemToggler:hover + a, .treeView.withNesting .treeItemToggler:hover ~ .treeItems {
    background-color: var(--treeitem-bg-color);
    color: var(--treeitem-hover-color);
    background-clip: padding-box;
    border-radius: 2px;
  }

  .treeView.withNesting > .treeItem, .treeView.withNesting .treeItem > .treeItems {
    margin-inline-start: 20px;
  }

  .treeView#layersView .treeItem > a * {
    cursor: pointer;
  }

  .treeView#layersView .treeItem > a > label {
    align-items: center;
    padding-inline-start: 4px;
    display: flex;
  }

  .treeView#layersView .treeItem > a > label > input {
    margin-top: 1px;
  }

  .treeView .treeItem > a {
    min-width: calc(100% - 4px);
    height: auto;
    color: var(--treeitem-color);
    -webkit-user-select: none;
    user-select: none;
    white-space: normal;
    cursor: default;
    border-radius: 2px;
    margin-bottom: 1px;
    padding: 2px 0 5px;
    padding-inline-start: 4px;
    font-size: 13px;
    line-height: 15px;
    text-decoration: none;
    display: inline-block;
  }

  .treeView .treeItem > a:hover {
    background-color: var(--treeitem-bg-color);
    color: var(--treeitem-hover-color);
    background-clip: padding-box;
    border-radius: 2px;
  }

  .treeView .treeItem.selected > a {
    background-color: var(--treeitem-selected-bg-color);
    color: var(--treeitem-selected-color);
  }

  #outerContainer.viewsManagerMoving #viewsManager {
    visibility: visible;
  }

  #outerContainer.viewsManagerOpen #viewsManager {
    visibility: visible;
    inset-inline-start: 8px;
  }

  #outerContainer.viewsManagerOpen #viewerContainer:not(.pdfPresentationMode) {
    transition-property: inset-inline-start;
    inset-inline-start: var(--viewsManager-width, 0);
  }

  #outerContainer.viewsManagerResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) {
    transition-duration: 0s;
  }

  #viewsManager {
    --views-manager-button-icon: url("../media/pages_viewButton.3fuxunyrimrqb.svg");
    --views-manager-button-arrow-icon: url("../media/pages_viewArrow.2ryhntq9ko7nu.svg");
    --views-manager-add-file-button-icon: url("../media/toolbarButton-zoomIn.1pb1fbp8httsh.svg");
    --current-outline-button-icon: url("../media/toolbarButton-currentOutlineItem.19ihb0oni85rb.svg");
    --menuitem-thumbnailsView-icon: url("../media/pages_viewButton.3fuxunyrimrqb.svg");
    --menuitem-outlinesView-icon: url("../media/toolbarButton-viewOutline.01ov4r6c2xm_4.svg");
    --menuitem-attachmentsView-icon: url("../media/toolbarButton-viewAttachments.2ubz02lj94mip.svg");
    --menuitem-layersView-icon: url("../media/toolbarButton-viewLayers.3kb0llwm0-3y6.svg");
    --manage-button-icon: url("../media/toolbarButton-pageDown.1_-efa3aj87zo.svg");
    --close-button-icon: url("../media/pages_closeButton.2wm8zr62u28zb.svg");
    --undo-label-icon: url("../media/altText_done.0vxr-09r8xa_i.svg");
    --pages-selected-icon: url("../media/pages_selected.06zbyjlbs8ix7.svg");
    --spinner-icon: url("../media/altText_spinner.03fpgjy_2r7vt.svg");
    --sidebar-bg-color: var(--lightningcss-light, #ffffffeb) var(--lightningcss-dark, #42414deb);
    --sidebar-backdrop-filter: blur(7px);
    --sidebar-width: 230px;
    --sidebar-min-width: min-content;
    --sidebar-max-width: 50vw;
    --sidebar-block-padding: 8px;
    --views-text-color: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --button-fg: var(--views-text-color);
    --button-no-bg: var(--button-background-color-toolbar, transparent);
    --button-bg: var(--button-background-color, var(--lightningcss-light, #15141a12) var(--lightningcss-dark, #fbfbfe12));
    --views-button-border-color: var(--button-border-color, transparent);
    --button-hover-bg: var(--button-background-color-hover, var(--lightningcss-light, #15141a24) var(--lightningcss-dark, #fbfbfe24));
    --button-hover-fg: var(--views-text-color);
    --button-hover-border-color: var(--views-button-border-color);
    --button-active-bg: var(--button-background-color-active, var(--lightningcss-light, #15141a36) var(--lightningcss-dark, #fbfbfe36));
    --button-active-fg: var(--views-text-color);
    --button-active-border-color: var(--views-button-border-color);
    --button-focus-no-bg: var(--views-text-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    #viewsManager {
      --button-focus-no-bg: color-mix(in srgb,
    var(--views-text-color),
    transparent 93%);
    }
  }

  #viewsManager {
    --button-focus-outline-color: var(--focus-outline-color, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --button-focus-border-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
    --status-border-color: transparent;
    --status-actions-bg: var(--lightningcss-light, #15141a08) var(--lightningcss-dark, #fbfbfe08);
    --status-undo-bg: var(--lightningcss-light, #0062fa14) var(--lightningcss-dark, #00cadb14);
    --status-waiting-bg: var(--status-undo-bg);
    --indicator-color: var(--color-accent-primary, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
    --status-warning-bg: var(--lightningcss-light, #ffe8ea) var(--lightningcss-dark, #6e001f);
    --indicator-warning-color: var(--lightningcss-light, #b20037) var(--lightningcss-dark, #ffa0aa);
    --header-shadow: 0 .25px .75px -.75px var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 2px 6px -6px var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --header-bg: var(--lightningcss-light, #ffffffeb) var(--lightningcss-dark, #42414e);
    --image-outline: none;
    --image-border-width: 6px;
    --image-border-color: var(--lightningcss-light, #cfcfd8) var(--lightningcss-dark, #3a3944);
    --image-hover-border-color: #bfbfc9;
    --image-current-border-color: var(--button-focus-outline-color);
    --image-current-focused-outline-color: var(--image-hover-border-color);
    --image-page-number-bg: var(--lightningcss-light, #f0f0f4) var(--lightningcss-dark, #42414d);
    --image-page-number-fg: var(--views-text-color);
    --image-page-number-border-color: transparent;
    --image-hover-page-number-bg: var(--image-page-number-bg);
    --image-hover-page-number-fg: var(--image-page-number-fg);
    --image-current-page-number-bg: var(--image-current-border-color);
    --image-current-page-number-fg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #15141a);
    --image-current-hover-page-number-bg: var(--image-current-page-number-bg);
    --image-current-hover-page-number-fg: var(--image-current-page-number-fg);
    --image-shadow: 0 .375px 1.5px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --image-hover-shadow: 0 .375px 1.5px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 0 0 1px var(--lightningcss-light, #15141a1a) var(--lightningcss-dark, #fbfbfe1a), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --image-current-shadow: 0 .375px 1.5px 0 var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --image-dragging-placeholder-bg: var(--lightningcss-light, #0062fa14) var(--lightningcss-dark, #00cadb14);
    --image-dragging-placeholder-border: var(--image-outline);
    --multiple-dragging-bg: white;
    --image-multiple-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color), var(--image-border-width) var(--image-border-width) 0 calc(var(--image-border-width) / 2) var(--multiple-dragging-bg), var(--image-border-width) var(--image-border-width) 0 calc(3 * var(--image-border-width) / 2) var(--image-current-border-color);
    --image-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color);
    --multiple-dragging-indicator-bg: var(--indicator-color);
    --multiple-dragging-text-color: var(--lightningcss-light, #fbfbfe) var(--lightningcss-dark, #15141a);
  }

  @media screen and (forced-colors: active) {
    #viewsManager {
      --views-text-color: var(--text-color, CanvasText);
      --button-fg: var(--button-text-color, ButtonText);
      --button-bg: var(--button-background-color, ButtonFace);
      --button-no-bg: var(--button-background-color, ButtonFace);
      --views-button-border-color: var(--button-border-color, ButtonText);
      --button-hover-bg: var(--button-background-color-hover, SelectedItemText);
      --button-hover-fg: var(--button-text-color-hover, SelectedItem);
      --button-hover-border-color: var(--button-border-color-hover, SelectedItem);
      --button-active-bg: var(--button-background-color-active, SelectedItemText);
      --button-active-fg: var(--button-text-color-active, SelectedItem);
      --button-active-border-color: var(--button-border-color-active, ButtonText);
      --button-focus-no-bg: var(--button-background-color, ButtonFace);
      --button-focus-outline-color: var(--focus-outline-color, CanvasText);
      --button-focus-border-color: none;
      --status-border-color: CanvasText;
      --status-undo-bg: none;
      --indicator-color: var(--text-color, CanvasText);
      --status-warning-bg: none;
      --indicator-warning-color: CanvasText;
      --header-shadow: none;
      --image-shadow: none;
      --image-outline: 1px solid ButtonText;
      --image-focus-outline-color: CanvasText;
      --image-hover-border-color: SelectedItem;
      --image-hover-page-number-bg: SelectedItemText;
      --image-hover-page-number-fg: SelectedItem;
      --image-current-page-number-bg: ButtonText;
      --image-current-page-number-fg: ButtonFace;
      --image-current-border-color: var(--border-color, ButtonText);
      --image-current-focused-outline-color: var(--image-hover-border-color);
      --image-current-hover-page-number-bg: SelectedItem;
      --image-current-hover-page-number-fg: SelectedItemText;
      --image-page-number-bg: ButtonFace;
      --image-page-number-fg: ButtonText;
      --image-page-number-border-color: var(--image-page-number-fg);
      --multiple-dragging-bg: Canvas;
      --multiple-dragging-indicator-bg: var(--text-color, ButtonBorder);
      --multiple-dragging-text-color: Canvas;
      --image-dragging-placeholder-bg: Canvas;
      --image-dragging-placeholder-border: 1px GrayText solid;
    }
  }

  #viewsManager {
    height: calc(var(--viewer-container-height) - 2 * var(--sidebar-block-padding));
    transition-property: inset-inline-start;
    transition-duration: var(--sidebar-transition-duration);
    transition-timing-function: var(--sidebar-transition-timing-function);
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 16px;
    display: flex;
    position: absolute;
    inset-block-start: calc(100% + var(--sidebar-block-padding));
    inset-inline-start: calc(-1 * var(--viewsManager-width, --sidebar-width) - 1px);
  }

  #viewsManager .sidebarResizer {
    inset-inline-start: calc(100% + 4px);
  }

  #viewsManager .viewsManagerButton {
    width: auto;
    color: var(--button-fg);
    border-radius: var(--button-border-radius, 8px);
    border: 1px solid var(--views-button-border-color);
    background: var(--button-bg);
  }

  #viewsManager .viewsManagerButton:hover {
    background-color: var(--button-hover-bg) !important;
    color: var(--button-hover-fg) !important;
    border-color: var(--button-hover-border-color) !important;
  }

  #viewsManager .viewsManagerButton:hover:before {
    background-color: var(--button-hover-fg) !important;
  }

  #viewsManager .viewsManagerButton:active {
    background: var(--button-active-bg) !important;
    color: var(--button-active-fg) !important;
    border-color: var(--button-active-border-color) !important;
  }

  #viewsManager .viewsManagerButton:active:before {
    background-color: var(--button-active-fg) !important;
  }

  #viewsManager .viewsManagerButton:focus-visible {
    outline: 2px solid var(--button-focus-outline-color);
    outline-offset: 2px;
    border-color: var(--button-focus-border-color);
  }

  #viewsManager .viewsManagerButton.viewsCloseButton {
    width: var(--size-item-large, 26px);
    height: var(--size-item-large, 26px);
    border-radius: var(--button-border-radius, 8px);
    background: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #viewsManager .viewsManagerButton.viewsCloseButton:before {
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--close-button-icon);
    -webkit-mask-image: var(--close-button-icon);
    mask-image: var(--close-button-icon);
  }

  #viewsManager #viewsManagerHeader {
    width: 100%;
    box-shadow: var(--header-shadow);
    background-color: var(--header-bg);
    flex-direction: column;
    flex: none;
    align-self: stretch;
    align-items: flex-start;
    display: flex;
  }

  #viewsManager #viewsManagerHeader .viewsManagerLabel {
    color: var(--views-text-color);
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
    height: fit-content;
    font: menu;
    flex: auto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle {
    flex-direction: row;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    width: auto;
    padding-block: 12px;
    padding-inline: 8px 16px;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle:not(:has(#viewsManagerHeaderLabel ~ button:not([hidden]))):after {
    content: "";
    pointer-events: none;
    flex: none;
    width: 32px;
    height: 32px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector {
    width: 48px;
    height: 32px;
    display: block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button {
    background: var(--button-no-bg);
    width: 100%;
    height: 100%;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:focus-visible {
    background-color: var(--button-focus-no-bg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:before {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--views-manager-button-icon);
    -webkit-mask-image: var(--views-manager-button-icon);
    mask-image: var(--views-manager-button-icon);
    background-color: var(--button-fg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:after {
    content: "";
    width: 12px;
    height: 12px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--views-manager-button-arrow-icon);
    -webkit-mask-image: var(--views-manager-button-arrow-icon);
    mask-image: var(--views-manager-button-arrow-icon);
    background-color: var(--button-fg);
    margin-inline-start: 8px;
    display: inline-block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:hover:before, #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:hover:after {
    background-color: var(--button-hover-fg) !important;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:active:before, #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > button:active:after {
    background-color: var(--button-active-fg) !important;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > .popupMenu {
    z-index: 1;
    min-width: 182px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > .popupMenu > button#thumbnailsViewMenu:before {
    -webkit-mask-image: var(--menuitem-thumbnailsView-icon);
    -webkit-mask-image: var(--menuitem-thumbnailsView-icon);
    mask-image: var(--menuitem-thumbnailsView-icon);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > .popupMenu > button#outlinesViewMenu:before {
    -webkit-mask-image: var(--menuitem-outlinesView-icon);
    -webkit-mask-image: var(--menuitem-outlinesView-icon);
    mask-image: var(--menuitem-outlinesView-icon);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > .popupMenu > button#attachmentsViewMenu:before {
    -webkit-mask-image: var(--menuitem-attachmentsView-icon);
    -webkit-mask-image: var(--menuitem-attachmentsView-icon);
    mask-image: var(--menuitem-attachmentsView-icon);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerSelector > .popupMenu > button#layersViewMenu:before {
    -webkit-mask-image: var(--menuitem-layersView-icon);
    -webkit-mask-image: var(--menuitem-layersView-icon);
    mask-image: var(--menuitem-layersView-icon);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerAddFileButton {
    background: var(--button-no-bg);
    width: 32px;
    height: 32px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerAddFileButton:focus-visible {
    background-color: var(--button-focus-no-bg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerAddFileButton:before {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--views-manager-add-file-button-icon);
    -webkit-mask-image: var(--views-manager-add-file-button-icon);
    mask-image: var(--views-manager-add-file-button-icon);
    background-color: var(--button-fg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerAddFileButton > input {
    display: none;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerCurrentOutlineButton {
    background: var(--button-no-bg);
    width: 32px;
    height: 32px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerCurrentOutlineButton:focus-visible {
    background-color: var(--button-focus-no-bg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerTitle #viewsManagerCurrentOutlineButton:before {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--current-outline-button-icon);
    -webkit-mask-image: var(--current-outline-button-icon);
    mask-image: var(--current-outline-button-icon);
    background-color: var(--button-fg);
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus {
    border: 1px solid var(--status-border-color);
    width: 100%;
    display: grid;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus > div {
    box-sizing: border-box;
    grid-area: 1 / 1;
    width: 100%;
    min-height: 64px;
    padding-inline: 16px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus > div.hidden {
    visibility: hidden;
    display: unset !important;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus .viewsManagerStatusLabel {
    font: menu;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction {
    background-color: var(--status-actions-bg);
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button {
    width: var(--icon-size);
    height: var(--icon-size);
    border: none;
    flex: none;
    padding: 0;
    position: relative;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:before {
    content: "";
    background-color: var(--indicator-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--pages-selected-icon);
    -webkit-mask-image: var(--pages-selected-icon);
    mask-image: var(--pages-selected-icon);
    position: absolute;
    inset: 0;
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button {
      background-color: var(--button-bg);
      border-radius: 2px;
    }

    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:before {
      background-color: var(--button-fg);
    }

    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:hover {
      background-color: var(--button-hover-bg);
    }

    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:hover:before {
      background-color: var(--button-hover-fg);
    }

    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:active {
      background-color: var(--button-active-bg);
    }

    #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button:active:before {
      background-color: var(--button-active-fg);
    }
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #viewsManagerStatusActionLabelContainer > button#viewsManagerStatusActionDeselectButton:focus-visible {
    outline: 2px solid var(--button-focus-outline-color);
    border: 1px solid var(--button-focus-border-color);
    outline-offset: 1px;
    border-radius: 2px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector {
    width: auto;
    min-width: 115px;
    height: 32px;
    display: block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector #viewsManagerStatusActionButton {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 4px 16px;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector #viewsManagerStatusActionButton:after {
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--manage-button-icon);
    -webkit-mask-image: var(--manage-button-icon);
    mask-image: var(--manage-button-icon);
    background-color: var(--button-fg);
    display: inline-block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector #viewsManagerStatusActionButton:hover:after {
    background-color: var(--button-hover-fg) !important;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector #viewsManagerStatusActionButton:active:after {
    background-color: var(--button-active-fg) !important;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusAction #actionSelector > .popupMenu {
    z-index: 1;
    width: 100%;
    min-width: fit-content;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusUndo {
    background-color: var(--status-undo-bg);
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusUndo > span:before {
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--undo-label-icon);
    -webkit-mask-image: var(--undo-label-icon);
    mask-image: var(--undo-label-icon);
    background-color: var(--indicator-color);
    display: inline-block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusUndo > div {
    align-items: center;
    gap: 8px;
    width: auto;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusUndo > div #viewsManagerStatusUndoButton {
    width: auto;
    min-height: 24px;
    padding: 4px 8px;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusWarning {
    background-color: var(--status-warning-bg);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusWarning > span {
    align-items: flex-start;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusWarning > span:before {
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--indicator-warning-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--undo-label-icon);
    -webkit-mask-image: var(--undo-label-icon);
    mask-image: var(--undo-label-icon);
    flex: none;
    display: inline-block;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusWaiting {
    background-color: var(--status-waiting-bg);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #viewsManager #viewsManagerHeader #viewsManagerStatus #viewsManagerStatusWaiting > span:before {
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--indicator-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--spinner-icon);
    -webkit-mask-image: var(--spinner-icon);
    mask-image: var(--spinner-icon);
    flex: none;
    display: inline-block;
  }

  #viewsManager #viewsManagerContent {
    flex: 1;
    width: 100%;
    overflow: auto;
  }

  #viewsManager #viewsManagerContent:has(#thumbnailsView.isDragging) {
    overflow-x: hidden;
  }

  #viewsManager #viewsManagerContent #thumbnailsView {
    --thumbnail-width: 126px;
    --gap-between-input-and-thumbnail: 16px;
    box-sizing: border-box;
    flex-flow: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 44px;
    width: 100%;
    padding: 20px 32px;
    display: flex;
    position: relative;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.isDragging {
    cursor: grabbing;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.isDragging > .thumbnail > .thumbnailImageContainer:hover {
    cursor: grabbing;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.isDragging > .thumbnail > .thumbnailImageContainer:hover:not([aria-current="page"]) {
    box-shadow: var(--image-shadow);
  }

  #viewsManager #viewsManagerContent #thumbnailsView.isDragging > .thumbnail > input {
    pointer-events: none;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.isDragging > .dragMarker, #viewsManager #viewsManagerContent #thumbnailsView.isDraggingFile > .dragMarker {
    border: 2px solid var(--indicator-color);
    contain: strict;
    position: absolute;
    top: 0;
    left: 0;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.pasteMode {
    gap: var(--gap-between-input-and-thumbnail);
  }

  #viewsManager #viewsManagerContent #thumbnailsView.pasteMode > .thumbnail {
    flex-direction: column;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.pasteMode > .thumbnail > input {
    display: none;
  }

  #viewsManager #viewsManagerContent #thumbnailsView.pasteMode > .thumbnail > .thumbnailPasteButton {
    min-height: 24px;
    font: menu;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
  }

  #viewsManager #viewsManagerContent #thumbnailsView:not(.pasteMode) > .thumbnail > .thumbnailPasteButton {
    display: none;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail {
    --input-dim: 16px;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail:not(#viewsManager #viewsManagerContent #thumbnailsView > .thumbnail:has(input)) {
    --input-dim: 0px;
    --gap-between-input-and-thumbnail: 0px;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail {
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-between-input-and-thumbnail);
    width: calc(var(--thumbnail-width) + 2 * (var(--input-dim) + var(--gap-between-input-and-thumbnail)));
    flex-direction: row-reverse;
    height: auto;
    scroll-margin-top: 20px;
    display: inline-flex;
    position: relative;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail .thumbnailPasteButton {
    text-align: center;
    padding: 8px 0;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail:not(.isDragging) > .thumbnailImageContainer:after {
    content: attr(page-number);
    border: 1px solid var(--image-page-number-border-color);
    background-color: var(--image-page-number-bg);
    color: var(--image-page-number-fg);
    bottom: 5px;
    text-align: center;
    box-sizing: content-box;
    min-width: 32px;
    height: 16px;
    translate: calc(var(--dir-factor) * 50%);
    font: menu;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    inset-inline-end: 50%;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail:has([aria-current="page"]):not(.isDragging) > .thumbnailImageContainer:after {
    background-color: var(--image-current-page-number-bg);
    color: var(--image-current-page-number-fg);
    outline: 1px solid var(--image-current-border-color);
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail.isDragging > input {
    visibility: hidden;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > input {
    width: var(--input-dim);
    height: var(--input-dim);
    accent-color: var(--indicator-color);
    margin: 0;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer {
    --thumbnail-dragging-scale: 1.4;
    width: var(--thumbnail-width);
    box-shadow: var(--image-shadow);
    box-sizing: content-box;
    outline: var(--image-outline);
    -webkit-user-select: none;
    user-select: none;
    border: none;
    border-radius: 8px;
    position: relative;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer img {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    border: none;
    border-radius: 8px;
    outline: none;
    width: 100%;
    height: 100%;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.missingThumbnailImage {
    content-visibility: hidden;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:hover {
    cursor: pointer;
    box-shadow: var(--image-hover-shadow);
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:hover:after {
    background-color: var(--image-hover-page-number-bg);
    color: var(--image-hover-page-number-fg);
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:hover {
      box-shadow: none;
      outline: var(--image-border-width) var(--image-hover-border-color) solid;
    }
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible:not([aria-current="page"]) {
    box-shadow: var(--image-hover-shadow);
    outline: none;
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible:not([aria-current="page"]) {
      box-shadow: none;
      outline: var(--image-border-width) var(--image-focus-outline-color) solid;
    }
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible[aria-current="page"] {
    outline: var(--image-border-width) solid var(--image-current-focused-outline-color);
    outline-offset: var(--image-border-width);
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible[aria-current="page"] {
      box-shadow: none;
      outline: var(--image-border-width) var(--image-current-border-color) solid;
      outline-offset: 0;
    }

    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible[aria-current="page"] > img {
      outline: var(--image-border-width) var(--image-focus-outline-color) solid;
      outline-offset: var(--image-border-width);
    }
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible {
      box-shadow: none;
      outline: var(--image-border-width) var(--image-current-border-color) solid;
    }

    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer:focus-visible:hover > img {
      outline: var(--image-border-width) var(--image-hover-border-color) solid;
      outline-offset: var(--image-border-width);
    }
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer[aria-current="page"] {
    box-shadow: var(--image-current-shadow);
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer[aria-current="page"]:hover:after {
    background-color: var(--image-current-hover-page-number-bg);
    color: var(--image-current-hover-page-number-fg);
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer[aria-current="page"] {
      box-shadow: none;
      outline: var(--image-border-width) var(--image-current-border-color) solid;
    }

    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer[aria-current="page"]:hover > img {
      outline: var(--image-border-width) var(--image-hover-border-color) solid;
      outline-offset: var(--image-border-width);
    }
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.placeholder {
    background-color: var(--image-dragging-placeholder-bg);
    outline: var(--image-dragging-placeholder-border);
    box-shadow: none !important;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.draggingThumbnail {
    z-index: 1;
    transform-origin: 0 0 0;
    scale: calc(1 / var(--thumbnail-dragging-scale));
    pointer-events: none;
    box-shadow: var(--image-dragging-shadow);
    position: absolute;
    top: 0;
    left: 0;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.draggingThumbnail.multiple {
    box-shadow: var(--image-multiple-dragging-shadow);
  }

  @media screen and (forced-colors: active) {
    #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.draggingThumbnail.multiple {
      forced-color-adjust: none;
      box-shadow: var(--image-multiple-dragging-shadow);
    }
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.draggingThumbnail.multiple > .thumbnailImageContainer {
    width: var(--thumbnail-width);
    box-sizing: content-box;
    -webkit-user-select: none;
    user-select: none;
    border: none;
    border-radius: 8px;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  #viewsManager #viewsManagerContent #thumbnailsView > .thumbnail > .thumbnailImageContainer.draggingThumbnail.multiple:after {
    content: attr(data-multiple-count);
    border-radius: calc(8px * var(--thumbnail-dragging-scale));
    background-color: var(--multiple-dragging-indicator-bg);
    color: var(--multiple-dragging-text-color);
    min-width: calc(32px * var(--thumbnail-dragging-scale));
    height: calc(16px * var(--thumbnail-dragging-scale));
    text-align: center;
    font: menu;
    font-size: calc(13px * var(--thumbnail-dragging-scale));
    contain: strict;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    inset-block-end: calc(4px * var(--thumbnail-dragging-scale));
    inset-inline-start: calc(4px * var(--thumbnail-dragging-scale));
  }

  #viewsManager #viewsManagerContent #attachmentsView {
    --attachment-color: var(--lightningcss-light, #000c) var(--lightningcss-dark, #fffc);
    --attachment-bg-color: var(--lightningcss-light, #00000026) var(--lightningcss-dark, #ffffff26);
    --attachment-hover-color: var(--lightningcss-light, #000000e6) var(--lightningcss-dark, #ffffffe6);
  }

  #viewsManager #viewsManagerContent #attachmentsView > ul {
    padding: 0;
    list-style-type: none;
  }

  #viewsManager #viewsManagerContent #attachmentsView > ul > li > a {
    min-width: calc(100% - 4px);
    height: auto;
    color: var(--attachment-color);
    -webkit-user-select: none;
    user-select: none;
    white-space: normal;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 1px;
    padding: 2px 0 5px;
    padding-inline-start: 4px;
    font-size: 13px;
    line-height: 15px;
    text-decoration: none;
    display: inline-block;
  }

  #viewsManager #viewsManagerContent #attachmentsView > ul > li > a:hover {
    background-color: var(--attachment-bg-color);
    color: var(--attachment-hover-color);
    background-clip: padding-box;
    border-radius: 2px;
  }

  .sidebar {
    --sidebar-bg-color: var(--background-color-box, var(--lightningcss-light, #fff) var(--lightningcss-dark, #23222b));
    --sidebar-border-color: var(--lightningcss-light, #15141a1a) var(--lightningcss-dark, #fbfbfe1a);
    --sidebar-box-shadow: 0 .25px .75px var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #0003), 0 2px 6px 0 var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #0006);
    --sidebar-backdrop-filter: none;
    --sidebar-border-radius: 8px;
    --sidebar-padding: 5px;
    --sidebar-min-width: 180px;
    --sidebar-max-width: 632px;
    --sidebar-width: 239px;
    --resizer-width: 4px;
    --resizer-shift: calc(0px - var(--resizer-width) - 2px);
    --resizer-hover-bg-color: var(--color-accent-primary, var(--lightningcss-light, #0062fa) var(--lightningcss-dark, #00cadb));
  }

  @media screen and (forced-colors: active) {
    .sidebar {
      --sidebar-bg-color: var(--background-color-box, Canvas);
      --sidebar-border-color: CanvasText;
      --sidebar-box-shadow: none;
      --resizer-hover-bg-color: var(--text-color, CanvasText);
    }
  }

  .sidebar {
    border-radius: var(--sidebar-border-radius);
    box-shadow: var(--sidebar-box-shadow);
    border: 1px solid var(--sidebar-border-color);
    background-color: var(--sidebar-bg-color);
    padding-block: var(--sidebar-padding);
    width: var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
    -webkit-backdrop-filter: var(--sidebar-backdrop-filter);
    backdrop-filter: var(--sidebar-backdrop-filter);
    box-sizing: border-box;
    position: relative;
    inset-block-start: calc(100% + var(--doorhanger-height) - 2px);
  }

  .sidebar .sidebarResizer {
    width: var(--resizer-width);
    forced-color-adjust: none;
    cursor: ew-resize;
    box-sizing: border-box;
    border: 1px solid #0000;
    background-color: #0000;
    background-clip: content-box;
    border-block-width: 0;
    transition: background-color .5s ease-in-out, border-color .5s ease-in-out;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--resizer-shift);
  }

  .sidebar .sidebarResizer:hover {
    background-color: var(--resizer-hover-bg-color);
    border-color: #fff;
  }

  .sidebar .sidebarResizer:focus-visible {
    background-color: var(--resizer-hover-bg-color);
    outline: none;
  }

  .sidebar.resizing {
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
  }

  .sidebar.resizing :not(.sidebarResizer) {
    pointer-events: none;
  }

  .sidebar.resizing .sidebarResizer {
    background-color: var(--resizer-hover-bg-color);
  }

  :root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    --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: .4s;
    --focus-ring-color: var(--focus-outline-color, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --focus-ring-outline: var(--focus-outline-width, 2px) solid var(--focus-ring-color);
    --text-primary-color: var(--text-color, var(--lightningcss-light, #15141a) var(--lightningcss-dark, #fbfbfe));
    --link-fg-color: var(--link-color, var(--lightningcss-light, #0060df) var(--lightningcss-dark, #0df));
    --link-hover-fg-color: var(--link-color-hover, var(--lightningcss-light, #0250bb) var(--lightningcss-dark, #80ebff));
    --new-badge-bg: var(--lightningcss-light, #070) var(--lightningcss-dark, #37b847);
    --new-badge-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #15141a);
    --new-badge-border-color: var(--lightningcss-light, #fbfbfe / 40%) var(--lightningcss-dark, #15141a / 40%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  @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;
      --focus-ring-color: var(--focus-outline-color, CanvasText);
      --text-primary-color: var(--text-color, CanvasText);
      --link-fg-color: var(--link-color, LinkText);
      --link-hover-fg-color: var(--link-color-hover, LinkText);
      --new-badge-bg: AccentColor;
      --new-badge-color: ButtonFace;
      --new-badge-border-color: CanvasText;
    }
  }

  .newBadge {
    background-color: var(--new-badge-bg);
    color: var(--new-badge-color);
    border: 1px solid var(--new-badge-border-color);
    font: menu;
    flex: 0 0 fit-content;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 4px;
    margin-inline: 4px;
    padding-inline: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  [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%);
  }

  .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) {
    .pdfViewer {
      --hcm-highlight-filter: invert(100%);
    }
  }

  .pdfViewer.copyAll {
    cursor: wait;
  }

  .pdfViewer .canvasWrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .pdfViewer .canvasWrapper canvas {
    contain: content;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .pdfViewer .canvasWrapper canvas .structTree {
    contain: strict;
  }

  .pdfViewer .canvasWrapper canvas.detailView {
    image-rendering: pixelated;
  }

  .pdfViewer .canvasWrapper .selection {
    pointer-events: none;
    background: #005aff38;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .pdfViewer .page {
    --user-unit: 1;
    --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
    --scale-round-x: 1px;
    --scale-round-y: 1px;
    width: 816px;
    height: 1056px;
    margin: var(--page-margin);
    border: var(--page-border);
    background-clip: content-box;
    background-color: var(--page-bg-color, #fff);
    direction: ltr;
    position: relative;
    overflow: visible;
  }

  .pdfViewer .dummyPage {
    width: 0;
    height: var(--viewer-container-height);
    position: relative;
  }

  .pdfViewer.noUserSelect {
    -webkit-user-select: none;
    user-select: none;
  }

  .pdfViewer.removePageBorders .page {
    border: none;
    margin: 0 auto 10px;
  }

  .pdfViewer.singlePageView {
    display: inline-block;
  }

  .pdfViewer.singlePageView .page {
    border: none;
    margin: 0;
  }

  .pdfViewer:is(.scrollHorizontal, .scrollWrapped), .spread {
    text-align: center;
    margin-inline: 3.5px;
  }

  .pdfViewer.scrollHorizontal, .spread {
    white-space: nowrap;
  }

  .pdfViewer.removePageBorders, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
    margin-inline: 0;
  }

  .spread :is(.page, .dummyPage), .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
    vertical-align: middle;
    display: inline-block;
  }

  .spread .page, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
    margin-inline: var(--spreadHorizontalWrapped-margin-LR);
  }

  .pdfViewer.removePageBorders .spread .page, .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
    margin-inline: 5px;
  }

  .pdfViewer .page.loadingIcon:after {
    content: "";
    width: 100%;
    height: 100%;
    transition-property: display;
    transition-delay: var(--loading-icon-delay);
    z-index: 5;
    contain: strict;
    background: url("../media/loading-icon.1ggohh8gyk7hg.gif") center no-repeat;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .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 {
    border: 2px solid #0000;
    margin: 0 auto;
  }
}

.ehq-pdf-reader .pdfViewer {
  --page-margin: 0 auto 10px;
  --page-border: 0;
  padding: 0;
}

.ehq-pdf-reader .pdfViewer .page {
  box-shadow: 0 1px 5px #0000001f;
}

.ehq-pdf-reader .ehq-pdf-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  translate: var(--pdf-file-offset, 0px) 0;
}

.ehq-pdf-reader .ehq-pdf-scroll::-webkit-scrollbar {
  display: none;
}

.ehq-pdf-reader .ehq-pdf-controls {
  padding: 8px;
}

@media (max-width: 640px) {
  .ehq-pdf-reader .ehq-pdf-controls {
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ehq-pdf-reader .pdfViewer .page {
    transition: none;
  }
}