r2-navigator-js/dist/es7-es2016/src/electron/common/styles.js

Readium 2 'navigator' for NodeJS (TypeScript)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TTS_CLASS_UTTERANCE_HEADING2 = exports.TTS_CLASS_UTTERANCE_HEADING1 = exports.TTS_CLASS_UTTERANCE = exports.TTS_ID_ACTIVE_UTTERANCE = exports.TTS_ID_ACTIVE_WORD = exports.TTS_ID_SLIDER = exports.TTS_ID_NEXT = exports.TTS_ID_PREVIOUS = exports.TTS_CLASS_STOPPED = exports.TTS_CLASS_PLAYING = exports.TTS_CLASS_PAUSED = exports.TTS_CLASS_IS_ACTIVE = exports.TTS_CLASS_THEME1 = exports.mediaOverlaysCssStyles = exports.R2_MO_CLASS_STOPPED = exports.R2_MO_CLASS_PAUSED = exports.R2_MO_CLASS_PLAYING = exports.R2_MO_CLASS_ACTIVE_PLAYBACK = exports.R2_MO_CLASS_ACTIVE = exports.footnotesCssStyles = exports.CSS_CLASS_NO_FOCUS_OUTLINE = exports.ROOT_CLASS_KEYBOARD_INTERACT = exports.POPUP_DIALOG_CLASS_COLLAPSE = exports.POPUP_DIALOG_CLASS = exports.POPOUTIMAGE_RESET_ID = exports.POPOUTIMAGE_PLUS_ID = exports.POPOUTIMAGE_MINUS_ID = exports.POPOUTIMAGE_CONTROLS_ID = exports.POPOUTIMAGE_CLOSE_ID = exports.POPOUTIMAGE_CONTAINER_ID = exports.FOOTNOTE_FORCE_SHOW = exports.FOOTNOTES_CLOSE_BUTTON_CLASS = exports.FOOTNOTES_CONTAINER_CLASS = exports.ROOT_CLASS_NO_RUBY = exports.ROOT_CLASS_NO_FOOTNOTES = exports.ROOT_CLASS_FIXED_LAYOUT = exports.ROOT_CLASS_MATHJAX = exports.ROOT_CLASS_REDUCE_MOTION = exports.DISABLE_TEMPORARY_NAV_TARGET_OUTLINE_CLASS = exports.LINK_TARGET_ALT_CLASS = exports.LINK_TARGET_CLASS = exports.SKIP_LINK_ID = exports.ENABLE_SKIP_LINK = exports.ZERO_TRANSFORM_CLASS = exports.HIDE_CURSOR_CLASS = exports.CLASS_PAGINATED = exports.CLASS_VWM = exports.EXTRA_COLUMN_PAD_ID = exports.WebViewSlotEnum = exports.ENABLE_EXTRA_COLUMN_SHIFT_METHOD = void 0;
exports.AUDIO_REWIND_ID = exports.AUDIO_NEXT_ID = exports.AUDIO_PREVIOUS_ID = exports.AUDIO_PLAYPAUSE_ID = exports.AUDIO_RATE_ID = exports.AUDIO_PERCENT_ID = exports.AUDIO_TIME_ID = exports.AUDIO_SLIDER_ID = exports.AUDIO_TITLE_ID = exports.AUDIO_COVER_ID = exports.AUDIO_CONTROLS_ID = exports.AUDIO_SECTION_ID = exports.AUDIO_BODY_ID = exports.AUDIO_ID = exports.AUDIO_PROGRESS_CLASS = exports.AUDIO_BUFFER_CANVAS_ID = exports.readPosCssStyles = exports.readPosCssStylesAttr4 = exports.readPosCssStylesAttr3 = exports.readPosCssStylesAttr2 = exports.readPosCssStylesAttr1 = exports.scrollBarCssStyles = exports.selectionCssStyles = exports.targetCssStyles = exports.focusCssStyles = exports.visibilityMaskCssStyles = exports.ROOT_CLASS_INVISIBLE_MASK_REMOVED = exports.ROOT_CLASS_INVISIBLE_MASK = exports.ENABLE_VISIBILITY_MASK = exports.CLASS_HIGHLIGHT_CURSOR2 = exports.CLASS_HIGHLIGHT_HOVER = exports.CLASS_HIGHLIGHT_MASK = exports.CLASS_HIGHLIGHT_BEHIND = exports.CLASS_HIGHLIGHT_MARGIN = exports.CLASS_HIGHLIGHT_CONTAINER = exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN = exports.CLASS_HIGHLIGHT_CONTOUR = exports.CLASS_HIGHLIGHT_SVG = exports.CLASS_HIGHLIGHT_COMMON_SVG = exports.CLASS_HIGHLIGHT_COMMON = exports.ID_HIGHLIGHTS_FLOATING = exports.ID_HIGHLIGHTS_CONTAINER = exports.ttsCssStyles = exports.TTS_POPUP_DIALOG_CLASS = exports.TTS_ID_SPEAKING_DOC_ELEMENT = exports.TTS_NAV_BUTTON_CLASS = exports.TTS_ID_CONTAINER = exports.TTS_CLASS_UTTERANCE_HEADING5 = exports.TTS_CLASS_UTTERANCE_HEADING4 = exports.TTS_CLASS_UTTERANCE_HEADING3 = void 0;
exports.audioCssStyles = exports.AUDIO_FORWARD_ID = void 0;
exports.ENABLE_EXTRA_COLUMN_SHIFT_METHOD = false;
var WebViewSlotEnum;
(function (WebViewSlotEnum) {
    WebViewSlotEnum["center"] = "center";
    WebViewSlotEnum["left"] = "left";
    WebViewSlotEnum["right"] = "right";
})(WebViewSlotEnum || (exports.WebViewSlotEnum = WebViewSlotEnum = {}));
exports.EXTRA_COLUMN_PAD_ID = "r2-extra-column-pad";
exports.CLASS_VWM = "r2-class-VWM";
exports.CLASS_PAGINATED = "r2-css-paginated";
exports.HIDE_CURSOR_CLASS = "r2-hideCursor";
exports.ZERO_TRANSFORM_CLASS = "r2-zeroTransform";
exports.ENABLE_SKIP_LINK = false;
exports.SKIP_LINK_ID = "r2-skip-link";
exports.LINK_TARGET_CLASS = "r2-link-target";
exports.LINK_TARGET_ALT_CLASS = "r2-link-target-alt";
exports.DISABLE_TEMPORARY_NAV_TARGET_OUTLINE_CLASS = "r2-no-link-target-temp-highlight";
exports.ROOT_CLASS_REDUCE_MOTION = "r2-reduce-motion";
exports.ROOT_CLASS_MATHJAX = "r2-mathjax";
exports.ROOT_CLASS_FIXED_LAYOUT = "r2-fixed-layout";
exports.ROOT_CLASS_NO_FOOTNOTES = "r2-no-popup-foonotes";
exports.ROOT_CLASS_NO_RUBY = "r2-no-ruby";
exports.FOOTNOTES_CONTAINER_CLASS = "r2-footnote-container";
exports.FOOTNOTES_CLOSE_BUTTON_CLASS = "r2-footnote-close";
exports.FOOTNOTE_FORCE_SHOW = "r2-footnote-force-show";
exports.POPOUTIMAGE_CONTAINER_ID = "r2-popoutimage-container-id";
exports.POPOUTIMAGE_CLOSE_ID = "r2-popoutimage-close-id";
exports.POPOUTIMAGE_CONTROLS_ID = "r2-popoutimage-controls-id";
exports.POPOUTIMAGE_MINUS_ID = "r2-popoutimage-minus-id";
exports.POPOUTIMAGE_PLUS_ID = "r2-popoutimage-plus-id";
exports.POPOUTIMAGE_RESET_ID = "r2-popoutimage-reset-id";
exports.POPUP_DIALOG_CLASS = "r2-popup-dialog";
exports.POPUP_DIALOG_CLASS_COLLAPSE = "r2-popup-dialog-collapse";
exports.ROOT_CLASS_KEYBOARD_INTERACT = "r2-keyboard-interact";
exports.CSS_CLASS_NO_FOCUS_OUTLINE = "r2-no-focus-outline";
exports.footnotesCssStyles = `
@namespace epub "http://www.idpf.org/2007/ops";

/* TODO: allowlist for DIV etc. ... or blocklist for SPAN etc. ?*/
div[epub|type~="pagebreak"]:empty {
    line-height: 0 !important;
}
div[role~="doc-pagebreak"]:empty {
    line-height: 0 !important;
}
*[epub|type~="pagebreak"]:empty::before {
    display: contents;
    /*display: inline-block;*/
    content: "\\feff" /* zero width nbsp, instead of     */
}
*[role~="doc-pagebreak"]:empty::before {
    display: contents;
    /*display: inline-block;*/
    content: "\\feff" /* zero width nbsp, instead of     */
}

:root:not(.${exports.ROOT_CLASS_NO_FOOTNOTES}) aside[epub|type~="footnote"]:not(.${exports.FOOTNOTE_FORCE_SHOW}),
:root:not(.${exports.ROOT_CLASS_NO_FOOTNOTES}) aside[epub|type~="note"]:not(.${exports.FOOTNOTE_FORCE_SHOW}),
:root:not(.${exports.ROOT_CLASS_NO_FOOTNOTES}) aside[epub|type~="endnote"]:not(.${exports.FOOTNOTE_FORCE_SHOW}),
:root:not(.${exports.ROOT_CLASS_NO_FOOTNOTES}) aside[epub|type~="rearnote"]:not(.${exports.FOOTNOTE_FORCE_SHOW}) {
    display: none;
}

/*
:root.${exports.POPUP_DIALOG_CLASS} {
    overflow: hidden !important;
}
*/

:root[style] dialog#${exports.POPUP_DIALOG_CLASS}:not(.${exports.POPUP_DIALOG_CLASS_COLLAPSE})::backdrop,
:root dialog#${exports.POPUP_DIALOG_CLASS}:not(.${exports.POPUP_DIALOG_CLASS_COLLAPSE})::backdrop {
    background: rgba(0, 0, 0, 0.3) !important;
}
:root[style*="readium-night-on"] dialog#${exports.POPUP_DIALOG_CLASS}:not(.${exports.POPUP_DIALOG_CLASS_COLLAPSE})::backdrop {
    background: rgba(0, 0, 0, 0.65) !important;
}
:root[style] dialog#${exports.POPUP_DIALOG_CLASS}.${exports.POPUP_DIALOG_CLASS_COLLAPSE}::backdrop,
:root dialog#${exports.POPUP_DIALOG_CLASS}.${exports.POPUP_DIALOG_CLASS_COLLAPSE}::backdrop {
    background: transparent !important;
}

:root[style] dialog#${exports.POPUP_DIALOG_CLASS},
:root dialog#${exports.POPUP_DIALOG_CLASS} {
    -webkit-writing-mode: horizontal-tb;

    z-index: 3;

    position: fixed;

    width: 90%;
    max-width: 40em;

    top: auto;
    bottom: 1em;
    height: 7em;

    margin: 0 auto;
    padding: 0;

    border-radius: 0.3em;
    border-width: 1px;

    background: white !important;
    border-color: black !important;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    grid-template-columns: 1.5em auto 1.5em;
    grid-template-rows: auto 1.5em;
}
:root[style*="readium-night-on"] dialog#${exports.POPUP_DIALOG_CLASS} {
    background: #333333 !important;
    border-color: white !important;
}
:root[style*="readium-sepia-on"] dialog#${exports.POPUP_DIALOG_CLASS} {
    background: var(--RS__backgroundColor) !important;
}
:root[style*="--USER__backgroundColor"] dialog#${exports.POPUP_DIALOG_CLASS} {
    background: var(--USER__backgroundColor) !important;
}

:root[style] dialog#${exports.POPUP_DIALOG_CLASS}.${exports.POPUP_DIALOG_CLASS_COLLAPSE},
:root dialog#${exports.POPUP_DIALOG_CLASS}.${exports.POPUP_DIALOG_CLASS_COLLAPSE} {
    top: auto;
    height: 1px;
}

:root[style] div#${exports.POPOUTIMAGE_CONTAINER_ID},
:root div#${exports.POPOUTIMAGE_CONTAINER_ID},
:root[style].${exports.ROOT_CLASS_KEYBOARD_INTERACT} div#${exports.POPOUTIMAGE_CONTAINER_ID},
:root.${exports.ROOT_CLASS_KEYBOARD_INTERACT} div#${exports.POPOUTIMAGE_CONTAINER_ID} {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;

    /*
    outline-color: magenta !important;
    outline-style: dotted !important;
    outline-width: 4px !important;
    outline-offset: -4px !important;
    */

    padding: 0;
    margin: 0;

    box-sizing: border-box;

    cursor: pointer;

    /* position: relative; */

    display: flex;
    /* no need for vertical / horizontal control, as we use margin:auto
    justify-content: center;
    align-items: center;
    */

    /* FXL, just in case the top-level transform scale isn't applied */
    overflow-y: auto;
    overflow-x: auto;
}

@keyframes readium2ElectronAnimation_IMG_OUTLINE {
    0% {
        outline-offset: -0.4em;
    }
    25% {
        outline-offset: 0em;
    }
    50% {
        outline-offset: 0.8em;
    }
    75% {
        outline-offset: 0em;
    }
    100% {
        outline-offset: -0.4em;
    }
}

/*
:root[style].${exports.ROOT_CLASS_KEYBOARD_INTERACT} img[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root.${exports.ROOT_CLASS_KEYBOARD_INTERACT} img[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root[style].${exports.ROOT_CLASS_KEYBOARD_INTERACT} image[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root.${exports.ROOT_CLASS_KEYBOARD_INTERACT} image[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root[style].${exports.ROOT_CLASS_KEYBOARD_INTERACT} svg[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root.${exports.ROOT_CLASS_KEYBOARD_INTERACT} svg[data-${exports.POPOUTIMAGE_CONTAINER_ID}]
*/

:root[style] img[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root img[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root[style] image[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root image[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root[style] svg[data-${exports.POPOUTIMAGE_CONTAINER_ID}],
:root svg[data-${exports.POPOUTIMAGE_CONTAINER_ID}]
{
    outline-color: magenta !important;
    outline-style: solid !important;
    outline-width: 0.2em !important;
    /* outline-offset: 2px !important; */

    cursor: pointer !important;

    animation-name: readium2ElectronAnimation_IMG_OUTLINE;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

/*
:root[style*="readium-night-on"]
*/
:root[style] div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CONTROLS_ID},
:root div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CONTROLS_ID} {
    border: 1px solid var(--RS__backgroundColor) !important;
    background: transparent !important;
    color: var(--RS__textColor) !important;
    padding: 4px;
    margin: 0;
    border-radius: 16px;
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
}
:root[style]:not([style*="--USER__"]) div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CONTROLS_ID},
:root:not([style]) div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CONTROLS_ID} {
    border: 1px solid black !important;
    background: white !important;
    color: black !important;
}

:root[style] div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CLOSE_ID},
:root div#${exports.POPOUTIMAGE_CONTAINER_ID} #${exports.POPOUTIMAGE_CLOSE_ID} {
    position: absolute;
    top: 8px;
    right: 8px;
}
:root[style] div#${exports.POPOUTIMAGE_CONTAINER_ID} button,
:root div#${exports.POPOUTIMAGE_CONTAINER_ID} button {
    border: 2px solid var(--RS__textColor) !important;
    background: var(--RS__backgroundColor) !important;
    color: var(--RS__textColor) !important;
    font-family: Arial !important;
    font-size: 20px !important;
    font-weight: bold;
    user-select: none;
    padding: 8px;
    margin: 0;
    border-radius: 16px;
    width: 36px;
    display: inline-block;
    cursor: pointer !important;
}
:root[style]:not([style*="--USER__"]) div#${exports.POPOUTIMAGE_CONTAINER_ID} button,
:root:not([style]) div#${exports.POPOUTIMAGE_CONTAINER_ID} button {
    border: 2px solid black !important;
    background: white !important;
    color: black !important;
}

:root[style] div#${exports.POPOUTIMAGE_CONTAINER_ID} > img,
:root div#${exports.POPOUTIMAGE_CONTAINER_ID} > img {

    /*
    outline-color: red !important;
    outline-style: dashed !important;
    outline-width: 2px !important;
    outline-offset: -2px !important;
    */

    transform-origin: 0px 0px;

    box-sizing: border-box;
    /* border: 2px solid #333333; */

    cursor: move !important;

    margin: 0 !important;
    object-fit: contain !important;
    position: relative !important;
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;

    /*
    margin: auto !important;
    object-fit: cover !important;
    position: relative !important;
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    */

    /* vertical centering breaks image height
    margin: auto !important;
    position: absolute !important;
    max-height: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;

    top: 0 !important;
    bottom: 0 !important;
    */

    /* this works with position:relative in the parent (no need for flex)
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;

    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    */
}

:root[style] .${exports.FOOTNOTES_CONTAINER_CLASS},
:root .${exports.FOOTNOTES_CONTAINER_CLASS} {
    overflow: auto;

    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;

    padding: 0.3em;
    margin: 0.2em;
}

:root[style] .${exports.FOOTNOTES_CONTAINER_CLASS} > *,
:root .${exports.FOOTNOTES_CONTAINER_CLASS} > * {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/*
https://github.com/edrlab/thorium-reader/issues/2478#issuecomment-2304782942
:root[style] .${exports.FOOTNOTES_CONTAINER_CLASS} a[epub|type~="backlink"],
:root .${exports.FOOTNOTES_CONTAINER_CLASS} a[epub|type~="backlink"],
:root[style] .${exports.FOOTNOTES_CONTAINER_CLASS} a[role~="doc-backlink"],
:root .${exports.FOOTNOTES_CONTAINER_CLASS} a[role~="doc-backlink"] {
    display: none !important;
}
*/

/*
:root[style] .${exports.FOOTNOTES_CLOSE_BUTTON_CLASS},
:root .${exports.FOOTNOTES_CLOSE_BUTTON_CLASS} {
    border: 1px solid black;
    background: white !important;
    color: black !important;

    border-radius: 0.8em;
    position: absolute;
    top: -0.9em;
    left: -0.9em;
    width: 1.8em;
    height: 1.8em;
    font-size: 1em !important;
    font-family: Arial !important;
    cursor: pointer;
}
:root[style*="readium-night-on"] .${exports.FOOTNOTES_CLOSE_BUTTON_CLASS} {
    border: 1px solid white !important;
    background: black !important;
    color: white !important;
}
*/
`;
exports.R2_MO_CLASS_ACTIVE = "r2-mo-active";
exports.R2_MO_CLASS_ACTIVE_PLAYBACK = "r2-mo-active-playback";
exports.R2_MO_CLASS_PLAYING = "r2-mo-playing";
exports.R2_MO_CLASS_PAUSED = "r2-mo-paused";
exports.R2_MO_CLASS_STOPPED = "r2-mo-stopped";
exports.mediaOverlaysCssStyles = `
:root[style] .${exports.R2_MO_CLASS_ACTIVE},
:root .${exports.R2_MO_CLASS_ACTIVE} {
    background-color: yellow !important;
    color: black !important;
}
:root[style*="readium-night-on"] .${exports.R2_MO_CLASS_ACTIVE} {
    background-color: #333333 !important;
    color: white !important;
}
:root[style*="readium-sepia-on"] .${exports.R2_MO_CLASS_ACTIVE} {
    background-color: silver !important;
    color: black !important;
}
`;
exports.TTS_CLASS_THEME1 = "r2-tts-theme1";
exports.TTS_CLASS_IS_ACTIVE = "r2-tts-isPlaying";
exports.TTS_CLASS_PAUSED = "r2-tts-paused";
exports.TTS_CLASS_PLAYING = "r2-tts-playing";
exports.TTS_CLASS_STOPPED = "r2-tts-stopped";
exports.TTS_ID_PREVIOUS = "r2-tts-previous";
exports.TTS_ID_NEXT = "r2-tts-next";
exports.TTS_ID_SLIDER = "r2-tts-slider";
exports.TTS_ID_ACTIVE_WORD = "r2-tts-active-word";
exports.TTS_ID_ACTIVE_UTTERANCE = "r2-tts-active-utterance";
exports.TTS_CLASS_UTTERANCE = "r2-tts-utterance";
exports.TTS_CLASS_UTTERANCE_HEADING1 = "r2-tts-utterance-h1";
exports.TTS_CLASS_UTTERANCE_HEADING2 = "r2-tts-utterance-h2";
exports.TTS_CLASS_UTTERANCE_HEADING3 = "r2-tts-utterance-h3";
exports.TTS_CLASS_UTTERANCE_HEADING4 = "r2-tts-utterance-h4";
exports.TTS_CLASS_UTTERANCE_HEADING5 = "r2-tts-utterance-h5";
exports.TTS_ID_CONTAINER = "r2-tts-txt";
exports.TTS_NAV_BUTTON_CLASS = "r2-tts-button";
exports.TTS_ID_SPEAKING_DOC_ELEMENT = "r2-tts-speaking-el";
exports.TTS_POPUP_DIALOG_CLASS = "r2-tts-popup-dialog";
exports.ttsCssStyles = `

:root[style] dialog#${exports.POPUP_DIALOG_CLASS}.${exports.TTS_POPUP_DIALOG_CLASS},
:root dialog#${exports.POPUP_DIALOG_CLASS}.${exports.TTS_POPUP_DIALOG_CLASS} {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 100%;

    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    margin: 0;
    padding: 0;

    box-shadow: none;

    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #777777 !important;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}

:root[style] div#${exports.TTS_ID_CONTAINER},
:root div#${exports.TTS_ID_CONTAINER} {
    overflow: auto;
    overflow-x: hidden;

    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;

    padding: 0;
    margin: 0;

    max-width: 800px;
    margin-right: auto;
    margin-left: auto;

    hyphens: none !important;
    word-break: keep-all !important;
    word-wrap: break-word !important;

    line-height: initial !important;

    color: #444444 !important;

    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #777777 !important;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

:root[style] div#${exports.TTS_ID_CONTAINER} > div,
:root div#${exports.TTS_ID_CONTAINER} > div {
    font-size: 1.2rem !important;
}
:root[style] div#${exports.TTS_ID_CONTAINER} > img,
:root div#${exports.TTS_ID_CONTAINER} > img,
:root[style] div#${exports.TTS_ID_CONTAINER} > svg,
:root div#${exports.TTS_ID_CONTAINER} > svg {
    display: block;
    border: 3px solid transparent;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
:root[style] div#${exports.TTS_ID_CONTAINER} > img + div,
:root div#${exports.TTS_ID_CONTAINER} > img + div,
:root[style] div#${exports.TTS_ID_CONTAINER} > svg + div,
:root div#${exports.TTS_ID_CONTAINER} > svg + div {
    text-align: center;
    text-decoration: underline;
}

:root[style*="--USER__lineHeight"] div#${exports.TTS_ID_CONTAINER} {
    line-height: calc(var(--USER__lineHeight) * 1) !important;
}
:root[style*="readium-night-on"] div#${exports.TTS_ID_CONTAINER} {
    color: #bbbbbb !important;
}
:root[style*="readium-sepia-on"] div#${exports.TTS_ID_CONTAINER} {
    background: var(--RS__backgroundColor) !important;
    color: var(--RS__textColor) !important;
}
:root[style*="--USER__backgroundColor"] div#${exports.TTS_ID_CONTAINER} {
    background: var(--USER__backgroundColor) !important;
}
:root[style*="--USER__textColor"] div#${exports.TTS_ID_CONTAINER} {
    color: var(--USER__textColor) !important;
}

:root[style] #${exports.TTS_ID_SLIDER},
:root #${exports.TTS_ID_SLIDER} {
    padding: 0;
    margin: 0;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    cursor: pointer;
    -webkit-appearance: none;

    background: transparent !important;
}
:root #${exports.TTS_ID_SLIDER}::-webkit-slider-runnable-track {
    cursor: pointer;

    width: 100%;
    height: 0.5em;

    background: #999999;

    padding: 0;
    margin: 0;
}
:root[style*="readium-night-on"] #${exports.TTS_ID_SLIDER}::-webkit-slider-runnable-track {
    background: #545454;
}
:root #${exports.TTS_ID_SLIDER}::-webkit-slider-thumb {
    -webkit-appearance: none;

    cursor: pointer;

    width: 0.8em;
    height: 1.5em;

    padding: 0;
    margin: 0;
    margin-top: -0.5em;

    border: none;
    border-radius: 0.2em;

    background: #333333;
}
:root[style*="readium-night-on"] #${exports.TTS_ID_SLIDER}::-webkit-slider-thumb {
    background: white;
}
:root[style] button.${exports.TTS_NAV_BUTTON_CLASS} > span,
:root button.${exports.TTS_NAV_BUTTON_CLASS} > span {
    vertical-align: baseline;
}
:root[style] button.${exports.TTS_NAV_BUTTON_CLASS},
:root button.${exports.TTS_NAV_BUTTON_CLASS} {
    border: none;

    font-size: 100% !important;
    font-family: Arial !important;
    cursor: pointer;

    padding: 0;
    margin-top: 0.2em;
    margin-bottom: 0.2em;

    background: transparent !important;
    color: black !important;
}
:root[style*="readium-night-on"] button.${exports.TTS_NAV_BUTTON_CLASS} {
    color: white !important;
}
/*
:root[style*="readium-sepia-on"] button.${exports.TTS_NAV_BUTTON_CLASS} {
    background: var(--RS__backgroundColor) !important;
}
:root[style*="--USER__backgroundColor"] button.${exports.TTS_NAV_BUTTON_CLASS} {
    background: var(--USER__backgroundColor) !important;
}
*/
:root[style] #${exports.TTS_ID_PREVIOUS},
:root #${exports.TTS_ID_PREVIOUS} {
    margin-left: 0.2em;

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
:root[style] #${exports.TTS_ID_NEXT},
:root #${exports.TTS_ID_NEXT} {
    margin-right: 0.2em;

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

:root[style] .${exports.TTS_ID_SPEAKING_DOC_ELEMENT},
:root .${exports.TTS_ID_SPEAKING_DOC_ELEMENT} {
    outline-color: magenta;
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 1px;
}

:root[style] .${exports.TTS_CLASS_UTTERANCE},
:root .${exports.TTS_CLASS_UTTERANCE} {
    margin-bottom: 0.1em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 1em;
    padding-right: 1em;
    display: block;

    box-sizing: border-box;
    border: 1px solid transparent !important;

    line-height: 1.5 !important;
}

:root[style] div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING1},
:root div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING1} {
    font-weight: bolder !important;
    font-size: 1.5rem !important;
}
:root[style] div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING2},
:root div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING2} {
    font-weight: bolder !important;
    font-size: 1.4rem !important;
}
:root[style] div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING3},
:root div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING3} {
    font-weight: bold !important;
    font-size: 1.3rem !important;
}
:root[style] div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING4},
:root div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING4} {
    font-weight: bold !important;
    font-size: 1.2rem !important;
}
:root[style] div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING5},
:root div#${exports.TTS_ID_CONTAINER} .${exports.TTS_CLASS_UTTERANCE_HEADING5} {
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

:root[style] div#${exports.TTS_ID_ACTIVE_UTTERANCE},
:root div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    /* background-color: yellow !important; */

    border: 1px solid #777777 !important;
    border-radius: 0.4em !important;

    color: black !important;
}
:root[style*="readium-night-on"] div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    color: white !important;
}
:root[style*="readium-sepia-on"] div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    color: black !important;
}
:root[style*="--USER__textColor"] div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    color: var(--USER__textColor) !important;
}

:root[style] span#${exports.TTS_ID_ACTIVE_WORD},
:root span#${exports.TTS_ID_ACTIVE_WORD} {
    color: black !important;

    text-decoration: underline;
    text-decoration-color: #777777 !important;
    text-underline-position: under;
    /*
    outline-color: #777777;
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 1px;
    */

    padding: 0;
    margin: 0;
}
:root[style*="readium-night-on"] span#${exports.TTS_ID_ACTIVE_WORD} {
    color: white !important;
    outline-color: white;
}
:root[style*="readium-sepia-on"] span#${exports.TTS_ID_ACTIVE_WORD} {
    color: black !important;
    outline-color: black;
}
:root[style*="--USER__textColor"] span#${exports.TTS_ID_ACTIVE_WORD} {
    color: var(--USER__textColor) !important;
    outline-color: var(--USER__textColor);
}

:root div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1},
:root[style] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} {

    background-color: #f7f9f9 !important;
    color: #333333 !important;
}
:root[style*="readium-night-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} {
    background: #111111 !important;
    color: #888888 !important;
}
:root[style*="readium-sepia-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} {
    background: #fdf2e9 !important;
    color: #333333 !important;
}

:root[style] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} .${exports.TTS_CLASS_UTTERANCE},
:root div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} .${exports.TTS_CLASS_UTTERANCE} {
    background-color: transparent !important;
}

:root[style] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE},
:root div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} {

    border: 0 !important;
    border-radius: 0px !important;

    background-color: #ecf0f1 !important;
    color: black !important;

    /* box-shadow: 0px 0px 10px 0px #f2f3f4; */
}
:root[style*="readium-night-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    background-color: #222222 !important;
    color: white !important;
    /* box-shadow: 0px 0px 10px 0px #111100; */
}
:root[style*="readium-sepia-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} {
    background-color: #fef9e7 !important;
    color: black !important;
    /* box-shadow: 0px 0px 10px 0px #fdebd0; */
}

:root[style] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} span#${exports.TTS_ID_ACTIVE_WORD},
:root div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} span#${exports.TTS_ID_ACTIVE_WORD} {
    background-color: #f7dc6f !important;
    color: black !important;

    outline-color: #f7dc6f;
    outline-style: solid;
    outline-offset: unset;
    outline-width: 4px;

    text-decoration: none;
}
:root[style*="readium-night-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} span#${exports.TTS_ID_ACTIVE_WORD} {
    background-color: #d4ac0d !important;
    color: black !important;

    outline-color: #d4ac0d;
}
:root[style*="readium-sepia-on"] div#${exports.TTS_ID_CONTAINER}.${exports.TTS_CLASS_THEME1} div#${exports.TTS_ID_ACTIVE_UTTERANCE} span#${exports.TTS_ID_ACTIVE_WORD} {
    background-color: #f9e79f !important;
    color: black !important;

    outline-color: #f9e79f;
}
`;
exports.ID_HIGHLIGHTS_CONTAINER = "R2_ID_HIGHLIGHTS_CONTAINER";
exports.ID_HIGHLIGHTS_FLOATING = "R2_ID_HIGHLIGHTS_FLOATING";
exports.CLASS_HIGHLIGHT_COMMON = "R2_CLASS_HIGHLIGHT_COMMON";
exports.CLASS_HIGHLIGHT_COMMON_SVG = "R2_CLASS_HIGHLIGHT_COMMON_SVG";
exports.CLASS_HIGHLIGHT_SVG = "R2_CLASS_HIGHLIGHT_SVG";
exports.CLASS_HIGHLIGHT_CONTOUR = "R2_CLASS_HIGHLIGHT_CONTOUR";
exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN = "R2_CLASS_HIGHLIGHT_CONTOUR_MARGIN";
exports.CLASS_HIGHLIGHT_CONTAINER = "R2_CLASS_HIGHLIGHT_CONTAINER";
exports.CLASS_HIGHLIGHT_MARGIN = "R2_CLASS_HIGHLIGHT_MARGIN";
exports.CLASS_HIGHLIGHT_BEHIND = "R2_CLASS_HIGHLIGHT_BEHIND";
exports.CLASS_HIGHLIGHT_MASK = "R2_CLASS_HIGHLIGHT_MASK";
exports.CLASS_HIGHLIGHT_HOVER = "R2_CLASS_HIGHLIGHT_HOVER";
exports.CLASS_HIGHLIGHT_CURSOR2 = "R2_CLASS_HIGHLIGHT_CURSOR2";
exports.ENABLE_VISIBILITY_MASK = false;
exports.ROOT_CLASS_INVISIBLE_MASK = "r2-visibility-mask-class";
exports.ROOT_CLASS_INVISIBLE_MASK_REMOVED = "r2-visibility-mask-removed-class";
const hover = true ? `.${exports.CLASS_HIGHLIGHT_HOVER}` : "";
exports.visibilityMaskCssStyles = `
:root[style],
:root,
:root[style] > body,
:root > body,
:root[style] > body *,
:root > body *,
:root[style] > body *::before,
:root > body *::after
{
scroll-behavior: auto !important;
}

:root[style].${exports.ROOT_CLASS_NO_RUBY} > body rt,
:root.${exports.ROOT_CLASS_NO_RUBY} > body rt,
:root[style].${exports.ROOT_CLASS_NO_RUBY} > body rp,
:root.${exports.ROOT_CLASS_NO_RUBY} > body rp
{
display: none;
}

r2-wbr,
wbr {
display: none;
}
:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] r2-wbr,
:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] wbr {
display: inherit;
}
r2-wbr::before,
wbr::before {
content: ' ';
}

:root[style].${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root.${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root[style].${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root.${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
{
    position: fixed;
}
:root[style]:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root[style]:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
{
    position: absolute;
}
:root[style].${exports.CLASS_VWM} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root.${exports.CLASS_VWM} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}
/*
,
:root[style].${exports.CLASS_VWM} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root.${exports.CLASS_VWM} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
*/
{
/* width: max-content !important; */

width: 200px !important;
height: 100px !important;

max-width: 200px !important;
max-height: 100px !important;
}
:root[style]:not(.${exports.CLASS_VWM}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root:not(.${exports.CLASS_VWM}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}
/*
,
:root[style]:not(.${exports.CLASS_VWM}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root:not(.${exports.CLASS_VWM}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
*/
{
width: max-content !important;
height: max-content !important;

/* width: 200px !important;
height: 100px !important;

max-width: 200px !important;
max-height: 100px !important;
*/
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
{
user-select: none !important;
pointer-events: none !important;

overflow: visible !important;

z-index: 999;

display: none;

top: 0;
left: 0;

background: white !important;
color: black !important;

box-sizing: border-box !important;

padding: 0 !important;
margin: 0 !important;
}
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}
{
    border-radius: 8px !important;
    border-width: 1px !important;
    border-color: black !important;
    border-style: solid !important;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);
}
/*
:root[style*="--USER__fontFamily"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}
{
    font-family: var(--USER__fontFamily);
}
:root[style*="--USER__lineHeight"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}
{
    line-height: var(--USER__lineHeight);
}
:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} {
    background: #333333 !important;
    border-color: white !important;
}
*/
:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} {
    background: var(--RS__backgroundColor) !important;
    color: var(--RS__textColor) !important;
    border-color: var(--RS__textColor) !important;
    box-shadow: 0px 0px 4px 0px var(--RS__textColor);
}
:root[style*="readium-sepia-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} {
    background: var(--RS__backgroundColor) !important;
    color: var(--RS__textColor) !important;
    border-color: var(--RS__textColor) !important;
    box-shadow: 0px 0px 4px 0px var(--RS__textColor);
}
:root[style*="--USER__backgroundColor"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} {
    background: var(--USER__backgroundColor) !important;
}
:root[style*="--USER__textColor"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} {
    color: var(--USER__textColor) !important;
    border-color: var(--USER__textColor) !important;
    box-shadow: 0px 0px 4px 0px var(--USER__textColor);
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(1),
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(1)
{
/*
width: 10px;
height: 10px;
*/
width: 0 !important;
height: 0 !important;

border-left: 8px solid black !important;
border-top: 8px solid black !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;

box-sizing: border-box !important;

position: absolute;
padding: 0 !important;
margin: 0 !important;

/* background-color: red !important; */
}

:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(1) {
border-left: 8px solid var(--RS__textColor) !important;
border-top: 8px solid var(--RS__textColor) !important;
}
:root[style*="readium-sepia-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(1) {
border-left: 8px solid var(--RS__textColor) !important;
border-top: 8px solid var(--RS__textColor) !important;
}

:root[style*="--USER__textColor"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(1) {
border-left: 8px solid var(--USER__textColor) !important;
border-top: 8px solid var(--USER__textColor) !important;
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(2),
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING} > div:nth-child(2)
{
/*
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
*/

display: grid;

min-width: 40px !important;
max-width: 200px !important;
max-height: 100px !important;

padding: 4px;

text-overflow: ellipsis !important;

overflow-x: clip !important;
overflow-y: clip !important;

font-weight: bold !important;
font-size: 0.8rem !important;
}

/*
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_,
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > #${exports.ID_HIGHLIGHTS_FLOATING}_
{
z-index: 1000 !important;
opacity: 0.5 !important;
pointer-events: none !important;
}
*/

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN}:not(${hover}) > svg.${exports.CLASS_HIGHLIGHT_CONTOUR},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN}:not(${hover}) > svg.${exports.CLASS_HIGHLIGHT_CONTOUR}
{
display: none !important;
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}) > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child,
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}) > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child
{
stroke: #555555 !important;
/* stroke-width: 2 !important; */
}
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}.${exports.CLASS_HIGHLIGHT_MARGIN} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child,
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}.${exports.CLASS_HIGHLIGHT_MARGIN} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child
{
stroke: #555555 !important;
/* stroke-width: 2 !important; */
}

:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}) > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child
{
stroke: yellow !important;
/* stroke-width: 2 !important; */
}
:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}.${exports.CLASS_HIGHLIGHT_MARGIN} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR} > path:last-child
{
stroke: yellow !important;
/* stroke-width: 2 !important; */
}

:root[style].${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_SVG},
:root.${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_SVG},
:root[style].${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR},
:root.${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR},
:root[style].${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN},
:root.${exports.CLASS_PAGINATED} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN}
{
position: fixed !important;
}

:root[style]:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_SVG},
:root:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_SVG},
:root[style]:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR},
:root:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR},
:root[style]:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN},
:root:not(.${exports.CLASS_PAGINATED}) > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER} > svg.${exports.CLASS_HIGHLIGHT_CONTOUR_MARGIN}
{
position: absolute !important;
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}
{
width: 1px !important;
height: 1px !important;
}

:root[style].${exports.TTS_CLASS_PLAYING} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}:not([data-group="tts"]),
:root.${exports.TTS_CLASS_PLAYING} > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}:not([data-group="tts"])
{
    display: none;
}
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}:not(.${exports.CLASS_HIGHLIGHT_BEHIND}):not(.${exports.CLASS_HIGHLIGHT_MASK}),
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}:not(.${exports.CLASS_HIGHLIGHT_BEHIND}):not(.${exports.CLASS_HIGHLIGHT_MASK})
{
    opacity: 0.8;
}
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}),
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}),
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}.${exports.CLASS_HIGHLIGHT_MARGIN}${hover},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}.${exports.CLASS_HIGHLIGHT_MARGIN}${hover}
{
    mix-blend-mode: multiply;
}
:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}:not(.${exports.CLASS_HIGHLIGHT_MARGIN}),
:root[style*="readium-night-on"] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}.${exports.CLASS_HIGHLIGHT_MARGIN}${hover}
{
    mix-blend-mode: exclusion;
}

/*
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER}
{
isolation: isolate;
}
*/

/*
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND},
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN}
*/
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}
{
z-index: 1;
}

/*
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}${hover},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_BEHIND}${hover},
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN}${hover},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}.${exports.CLASS_HIGHLIGHT_MARGIN}${hover}
*/
:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} > .${exports.CLASS_HIGHLIGHT_CONTAINER}${hover}
{
z-index: 2;
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} .${exports.CLASS_HIGHLIGHT_COMMON},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} .${exports.CLASS_HIGHLIGHT_COMMON}
{
background-color: transparent !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
pointer-events: none !important;
}

:root[style] > body > #${exports.ID_HIGHLIGHTS_CONTAINER} .${exports.CLASS_HIGHLIGHT_COMMON_SVG},
:root > body > #${exports.ID_HIGHLIGHTS_CONTAINER} .${exports.CLASS_HIGHLIGHT_COMMON_SVG}
{
/* background-color: transparent !important; */
position: absolute !important;
top: 0 !important;
left: 0 !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
pointer-events: none !important;
}

:root[style].${exports.CLASS_HIGHLIGHT_CURSOR2},
:root.${exports.CLASS_HIGHLIGHT_CURSOR2}
{
    cursor: crosshair !important;
}

/*
bugfix: for some reason, "inherit" does not work in Chromium, so we patch ReadiumCSS here :(
(was "text-align: var(--USER__textAlign);" on HTML root and "text-align: inherit !important;" on body etc.)
*/
:root[style*="readium-advanced-on"][style*="--USER__textAlign"] {
text-align: var(--USER__textAlign) !important;
}
:root[style*="readium-advanced-on"][style*="--USER__textAlign"] body,
:root[style*="readium-advanced-on"][style*="--USER__textAlign"] *:not(blockquote):not(figcaption) p,
:root[style*="readium-advanced-on"][style*="--USER__textAlign"] li {
text-align: var(--USER__textAlign) !important;
}

/*
https://github.com/readium/readium-css/issues/117
no new stacking context, otherwise massive performance degradation with CSS Columns in large HTML documents
(web inspector profiler shows long paint times, some layout recalc triggers too)
*/
:root {
    -webkit-perspective: none !important;
    perspective: none !important;
}

:root[style].${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}),
:root.${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) {
    overflow: visible !important;
}
:root[style].${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}):not(.${exports.CLASS_VWM}) > body,
:root.${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}):not(.${exports.CLASS_VWM}) > body {
    /*
    Electron v19 --> v21 breaking change :(
    ("hidden" is now "clip")
    overflow-x: hidden !important;
    overflow-y: visible !important;
    */
    overflow-x: clip !important;
    overflow-y: hidden !important;
}
/*
:root[style].${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}).${exports.CLASS_VWM} > body,
:root.${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}).${exports.CLASS_VWM} > body {
    overflow-x: visible !important;
    overflow-y: clip !important;
}
*/

/*
This only visually hides the scrollbars,
this does not prevent user-scrolling with keyboard arrows, space, drag on character selection, mouse wheel, etc.
We cannot completely disable "scroll" event (prevent default) because we need to detect when user keyboard-tabs through hyperlinks, in order to reset the correct scroll offset programmatically (page alignment on CSS column boundaries).
...so we continue to use "clip" for "overflow-x" (see above)

:root[style].${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) > body::-webkit-scrollbar,
:root.${exports.CLASS_PAGINATED}:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) > body::-webkit-scrollbar {
    display: none;
}
*/

:root[style].${exports.ROOT_CLASS_FIXED_LAYOUT},
:root.${exports.ROOT_CLASS_FIXED_LAYOUT} {
    overflow: hidden !important;
}
:root[style].${exports.ROOT_CLASS_FIXED_LAYOUT} > body,
:root.${exports.ROOT_CLASS_FIXED_LAYOUT} > body {
    overflow: hidden !important;
    margin: 0 !important;
}

:root.${exports.CLASS_PAGINATED} > body,
:root:not(.${exports.CLASS_PAGINATED}) > body,
:root.${exports.ROOT_CLASS_FIXED_LAYOUT} > body,
:root:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) > body,
:root[style].${exports.CLASS_PAGINATED} > body,
:root[style]:not(.${exports.CLASS_PAGINATED}) > body,
:root[style].${exports.ROOT_CLASS_FIXED_LAYOUT} > body,
:root[style]:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) > body {
    /* see ensureHighlightsContainer() */
    position: relative !important;
    /* display: block; */

    /* background-color: yellow !important; */
}

:root[style]:not(.${exports.CLASS_PAGINATED}):not(.${exports.ROOT_CLASS_FIXED_LAYOUT}):not(.${exports.CLASS_VWM}),
:root:not(.${exports.CLASS_PAGINATED}):not(.${exports.ROOT_CLASS_FIXED_LAYOUT}):not(.${exports.CLASS_VWM}) {
    overflow-x: clip !important;

    padding: 0 !important;
    margin: 0 !important;

    height: inherit !important;
    min-height: 0 !important;
    max-height: none !important;
}

:root[style]:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}),
:root:not(.${exports.ROOT_CLASS_FIXED_LAYOUT}) {
    --RS__pageGutter: 50px !important;
}

@media screen and (min-width: 35em) {
    :root[style]:not(.${exports.ROOT_CLASS_FIXED_LAY