/* legacy themes are still used by TTS player until we update the player themes */
:host {
    --color-slate: #364040;
    --color-slate-dark: #2f3838;
    --color-slate-bright: #e4e8e8;
    --color-red: #ed2024;
    --color-red-dark: #c52024;
    --color-red-bright: #fbc9b4;
    --color-yellow: #ffc20d;
    --color-yellow-dark: #e5aa1a;
    --color-yellow-bright: #ffecc5;
    --color-green: #8cc63f;
    --color-green-dark: #83b441;
    --color-green-bright: #e0edcb;
    --color-turquoise: #00a776;
    --color-turquoise-dark: #009669;
    --color-turquoise-bright: #bee3d5;
    --color-lightblue: #00adee;
    --color-lightblue-dark: #0093c3;
    --color-lightblue-bright: #b9e5fb;
    --color-blue: #0069cf;
    --color-blue-dark: #035eb1;
    --color-blue-bright: #d7dcef;
    --color-purple: #ad2fab;
    --color-purple-dark: #972b90;
    --color-purple-bright: #d9c0dd;
    --color-magenta: #f60f7a;
    --color-magenta-dark: #d5176a;
    --color-magenta-bright: #facad2;
    --color-text: #364040;
    --color-background: #fcfcfc
}

[data-doc-it-theme="slate"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-slate);
    --theme-bright: var(--color-slate-bright);
    --theme-dark: var(--color-slate-dark)
}

[data-doc-it-theme="red"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-red);
    --theme-bright: var(--color-red-bright);
    --theme-dark: var(--color-red-dark)
}

[data-doc-it-theme="yellow"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-yellow);
    --theme-bright: var(--color-yellow-bright);
    --theme-dark: var(--color-yellow-dark)
}

[data-doc-it-theme="green"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-green);
    --theme-bright: var(--color-green-bright);
    --theme-dark: var(--color-green-dark)
}

[data-doc-it-theme="turquoise"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-turquoise);
    --theme-bright: var(--color-turquoise-bright);
    --theme-dark: var(--color-turquoise-dark)
}

[data-doc-it-theme="lightblue"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-lightblue);
    --theme-bright: var(--color-lightblue-bright);
    --theme-dark: var(--color-lightblue-dark)
}

[data-doc-it-theme="blue"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-blue);
    --theme-bright: var(--color-blue-bright);
    --theme-dark: var(--color-blue-dark)
}

[data-doc-it-theme="purple"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-purple);
    --theme-bright: var(--color-purple-bright);
    --theme-dark: var(--color-purple-dark)
}

[data-doc-it-theme="magenta"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-magenta);
    --theme-bright: var(--color-magenta-bright);
    --theme-dark: var(--color-magenta-dark)
}
/**
 * Maps every web theme (see assets/css/web/themes.css + assets/css/colors.css)
 * onto the doc-it viewer's --theme-* variables, mirroring viewer.css.
 *
 * --theme-dark  -> links, h1/h2          (needs strong contrast -> 800)
 * --theme-accent-> hr, borders, markers  (600)
 * --theme-bright-> mark, table th, dl/summary backgrounds (200)
 */
[data-doc-it-theme] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
}
[data-doc-it-theme="crimson"] { --theme-accent: var(--color-crimson-600); --theme-bright: var(--color-crimson-200); --theme-dark: var(--color-crimson-700); }
[data-doc-it-theme="red"]     { --theme-accent: var(--color-red-600);     --theme-bright: var(--color-red-200);     --theme-dark: var(--color-red-700); }
[data-doc-it-theme="tomato"]  { --theme-accent: var(--color-tomato-600);  --theme-bright: var(--color-tomato-200);  --theme-dark: var(--color-tomato-700); }
[data-doc-it-theme="orange"]  { --theme-accent: var(--color-orange-600);  --theme-bright: var(--color-orange-200);  --theme-dark: var(--color-orange-700); }
[data-doc-it-theme="amber"]   { --theme-accent: var(--color-amber-600);   --theme-bright: var(--color-amber-200);   --theme-dark: var(--color-amber-700); }
[data-doc-it-theme="gold"]    { --theme-accent: var(--color-gold-600);    --theme-bright: var(--color-gold-200);    --theme-dark: var(--color-gold-700); }
[data-doc-it-theme="yellow"]  { --theme-accent: var(--color-yellow-600);  --theme-bright: var(--color-yellow-200);  --theme-dark: var(--color-yellow-700); }
[data-doc-it-theme="spring"]  { --theme-accent: var(--color-spring-600);  --theme-bright: var(--color-spring-200);  --theme-dark: var(--color-spring-700); }
[data-doc-it-theme="lime"]    { --theme-accent: var(--color-lime-600);    --theme-bright: var(--color-lime-200);    --theme-dark: var(--color-lime-700); }
[data-doc-it-theme="green"]   { --theme-accent: var(--color-green-600);   --theme-bright: var(--color-green-200);   --theme-dark: var(--color-green-700); }
[data-doc-it-theme="emerald"] { --theme-accent: var(--color-emerald-600); --theme-bright: var(--color-emerald-200); --theme-dark: var(--color-emerald-700); }
[data-doc-it-theme="teal"]    { --theme-accent: var(--color-teal-600);    --theme-bright: var(--color-teal-200);    --theme-dark: var(--color-teal-700); }
[data-doc-it-theme="cyan"]    { --theme-accent: var(--color-cyan-600);    --theme-bright: var(--color-cyan-200);    --theme-dark: var(--color-cyan-700); }
[data-doc-it-theme="sky"]     { --theme-accent: var(--color-sky-600);     --theme-bright: var(--color-sky-200);     --theme-dark: var(--color-sky-700); }
[data-doc-it-theme="azure"]   { --theme-accent: var(--color-azure-600);   --theme-bright: var(--color-azure-200);   --theme-dark: var(--color-azure-700); }
[data-doc-it-theme="blue"]    { --theme-accent: var(--color-blue-600);    --theme-bright: var(--color-blue-200);    --theme-dark: var(--color-blue-700); }
[data-doc-it-theme="indigo"]  { --theme-accent: var(--color-indigo-600);  --theme-bright: var(--color-indigo-200);  --theme-dark: var(--color-indigo-700); }
[data-doc-it-theme="violet"]  { --theme-accent: var(--color-violet-600);  --theme-bright: var(--color-violet-200);  --theme-dark: var(--color-violet-700); }
[data-doc-it-theme="fuchsia"] { --theme-accent: var(--color-fuchsia-600); --theme-bright: var(--color-fuchsia-200); --theme-dark: var(--color-fuchsia-700); }
[data-doc-it-theme="pink"]    { --theme-accent: var(--color-pink-600);    --theme-bright: var(--color-pink-200);    --theme-dark: var(--color-pink-700); }
[data-doc-it-theme="slate"]   { --theme-accent: var(--color-slate-600);   --theme-bright: var(--color-slate-200);   --theme-dark: var(--color-slate-700); }
/**
 * This base is a copy of viewer.css from the doc-it project, except with more css variable wrappers and some adjustments
 * for a finer control of theming. If the original changes we need to reflect those.
 * Source at @lensmedia/doc-it-tts-player/public/viewer.css
 * Both this and the source also includes the definition popup styling.
 */
*, :after, :before {
    box-sizing: border-box
}
.column > :first-child, .media-content > :first-child, .media-media > :first-child, .summary > :first-child, blockquote > :first-child, dd > :first-child, dd > section > :first-child, dl > :first-child, li > :first-child {
    margin-top: 0
}
.column > :last-child, .media-content > :last-child, .media-media > :last-child, .summary > :last-child, blockquote > :last-child, dd > :last-child, dd > section > :last-child, dl > :last-child, li > :last-child {
    margin-bottom: 0
}
img {
    max-width: 100%
}
hr {
    background-color: var(--theme-hr, var(--theme-accent, #000));
    border: 0;
    height: 1px;
    margin-bottom: 4rem;
    margin-top: 4rem;
    width: 33%
}
a {
    color: var(--theme-anchor, var(--theme-dark));
}
a:hover {
    color: var(--theme-anchor-hover, var(--theme-accent));
}
blockquote {
    border-left: .5rem solid var(--theme-blockquote-border, var(--theme-accent, rgba(0, 0, 0, .1)));
    font-style: italic;
    margin: 1rem 0;
    padding: 0 .5rem
}
mark {
    color: var(--theme-mark-text, inherit);
    background-color: var(--theme-mark, var(--theme-bright, #ff0));
    border-radius: .5rem;
    padding: 0 .25rem .25rem
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1em;
    margin: 1rem 0
}
h1, h2 {
    color: var(--theme-headers, var(--theme-dark));
}
h1:first-child {
    margin-top: 0
}
pre > code {
    background-color: rgba(0, 0, 0, .01);
    border-color: rgba(0, 0, 0, .03);
    color: inherit;
    display: block;
    padding: .5rem
}
code {
    background-color: var(--theme-code-background, rgba(0, 0, 0, .02));
    border: thin solid var(--theme-code-border, var(--color-red-bright));
    border-radius: .5rem;
    color: var(--theme-code-text, var(--color-red));
    font-family: Roboto Mono, monospace;
    font-size: .7em;
    line-height: 1em;
    padding: .25rem .5rem
}
ol, ul {
    padding-left: 1.5rem
}
li > p {
    margin: 0
}
li > p + p {
    margin-top: 1rem
}
ul > li > ul {
    list-style-type: "–  "
}
ul > li > ul > ul > li {
    list-style-type: space-counter
}
.table {
    display: block;
    margin-bottom: 1rem;
    margin-top: 1rem;
    max-width: 100%;
    overflow-x: auto
}
.table table {
    border-collapse: collapse;
    margin: 0;
    min-width: 100%
}
.table td, .table th {
    padding: .5rem;
    text-align: left;
    vertical-align: top;
}
.table th {
    background-color: var(--theme-th-background, var(--theme-bright));
    border-left: thin solid var(--theme-th-border, var(--theme-background));
    border-top: thin solid var(--theme-th-border, var(--theme-background));
}
.table tbody td {
    border-left: thin solid var(--theme-td-border, var(--theme-bright));
    border-top: thin solid var(--theme-td-border, var(--theme-bright));
}
.table td:first-child, .table th:first-child {
    border-left: 0
}
.summary, dl {
    background-color: var(--theme-summary-background, var(--theme-bright, rgba(0, 0, 0, .02)));
    color: var(--theme-summary-text, inherit);
    font-style: italic;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: .5rem
}
dd, dt {
    margin: 0
}
dl {
    border-left: var(--theme-dl-border, .25rem solid var(--theme-accent, rgba(0, 0, 0, .1)));
    font-style: normal
}
dt {
    font-weight: 700
}
dd + dt {
    margin-top: 1rem
}
details {
    --theme-accent: var(--color-slate-600);
    --theme-bright: var(--color-slate-200);
    --theme-dark: var(--color-slate-700);

    background-color: var(--theme-details-summary-background, var(--theme-bright));
    color: var(--theme-details-summary-text, inherit);

    border-left: var(--theme-details-border, 4px solid var(--theme-accent));
    display: flex;
    flex-direction: column;
    font: inherit;
    margin-bottom: .5rem;
    margin-top: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
}
details > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .25rem;
    justify-content: space-between;
    list-style: none;
    margin-left: -.5rem;
    padding: .25rem 0 .25rem .5rem
}
details > summary:after {
    background-color: var(--theme-details-summary-after-background, var(--theme-background));
    color: var(--theme-details-summary-after-text, var(--theme-accent));
    content: "+";
    display: inline-block;
    font-weight: 900;
    line-height: .75;
    padding: .25em;
    vertical-align: middle;
}
details[open] > summary {
    padding-top: .25rem 0;
}
details[open] > summary:after {
    content: "−";
}
details > section > :first-child { margin-top: 0; }
details > section > :last-child { margin-bottom: 0; }
details > section {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
figure {
    line-height: 0;
    margin: 1rem auto;
    text-align: center
}
figure.video > .video-wrapper {
    padding-bottom: var(--video-ratio, 56.25%);
    position: relative
}
figure.video > .video-wrapper > iframe, figure.video > .video-wrapper > video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}
figcaption {
    font-size: .8em;
    font-style: italic;
    line-height: 1.10568;
    margin-top: .25rem;
    text-align: left
}
figcaption > :first-child {
    margin-top: 0
}
figcaption > :last-child {
    margin-bottom: 0
}
.columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: -.5rem -1rem;
    padding: 0 .5rem
}
.columns + .columns {
    margin-top: .5rem
}
.column {
    flex: 0 0;
    margin: 0 !important;
    padding: .5rem
}
.column + .column {
    margin-top: 1rem
}
@media only screen {
    .column {
        flex-basis: calc(100% / var(--columns-default, 1))
    }
}
@media only screen and (min-width: 300px) {
    .column {
        flex-basis: calc(100% / var(--columns-tiny, var(--columns-default, 1)))
    }
}
@media only screen and (min-width: 450px) {
    .column {
        flex-basis: calc(100% / var(--columns-small, var(--columns-tiny, var(--columns-default, 1))))
    }
}
@media only screen and (min-width: 600px) {
    .column {
        flex-basis: calc(100% / var(--columns-portrait, var(--columns-small, var(--columns-tiny, var(--columns-default, 1)))))
    }
}
dl + .columns {
    margin-top: .5rem
}
.columns + dl {
    margin-top: 1rem
}
.media {
    display: flex;
    margin: 1rem -.5rem
}
.media-content, .media-media {
    margin: 0 .5rem
}
.media-media {
    max-width: 64px;
    min-width: 64px
}
.media[data-media-size=small] > .media-media {
    max-width: 32px;
    min-width: 32px
}
.media[data-media-size=medium] > .media-media {
    max-width: 96px;
    min-width: 96px
}
.media[data-media-size=large] > .media-media {
    max-width: 128px;
    min-width: 128px
}
.media-content {
    width: 100%
}
.media-right > .media-media {
    order: 1
}
.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}
[data-tippy-root] {
    max-width: calc(100vw - 2rem)
}
.tippy-box {
    background-color: #333;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    outline: 0;
    position: relative;
    transition-property: transform, visibility, opacity;
    white-space: normal
}
.tippy-box[data-placement^=top] > .tippy-arrow {
    bottom: 0
}
.tippy-box[data-placement^=top] > .tippy-arrow:before {
    border-top-color: initial;
    border-width: 8px 8px 0;
    bottom: -7px;
    left: 0;
    transform-origin: center top
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
    top: 0
}
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: initial;
    border-width: 0 8px 8px;
    left: 0;
    top: -7px;
    transform-origin: center bottom
}
.tippy-box[data-placement^=left] > .tippy-arrow {
    right: 0
}
.tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-left-color: initial;
    border-width: 8px 0 8px 8px;
    right: -7px;
    transform-origin: center left
}
.tippy-box[data-placement^=right] > .tippy-arrow {
    left: 0
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
    border-right-color: initial;
    border-width: 8px 8px 8px 0;
    left: -7px;
    transform-origin: center right
}
.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}
.tippy-arrow {
    color: #333;
    height: 16px;
    width: 16px
}
.tippy-arrow:before {
    border-color: transparent;
    border-style: solid;
    content: "";
    position: absolute
}
.tippy-content {
    padding: 5px 9px;
    position: relative;
    z-index: 1
}
.tippy-box[data-theme~=doc-it] {
    background-color: var(--tippy-box-background, var(--theme-bright));
    border: thin solid var(--tippy-box-border, var(--theme-accent));
    border-radius: 0;
    color: var(--tippy-box-text, inherit);
    font-size: inherit;
    line-height: inherit
}
.tippy-box[data-theme~=doc-it][data-placement^=top] .tippy-arrow:before {
    border-top-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 7px 0
}
.tippy-box[data-theme~=doc-it][data-placement^=bottom] .tippy-arrow:before {
    border-bottom-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 0 7px 7px
}
.tippy-box[data-theme~=doc-it][data-placement^=left] .tippy-arrow:before {
    border-left-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 0 7px 7px
}
.tippy-box[data-theme~=doc-it][data-placement^=right] .tippy-arrow:before {
    border-right-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 7px 7px 0
}
abbr[data-title] {
    cursor: help;
    text-decoration: var(--theme-abbr-decoration,
        var(--theme-abbr-decoration-color, var(--theme-accent, inherit))
        var(--theme-abbr-decoration-line, underline)
        var(--theme-abbr-decoration-thickness, from-font)
        var(--theme-abbr-decoration-style, wavy)
    );

    text-underline-offset: var(--theme-abbr-decoration-offset, .125em);
}

:host {
    --color-slate-previous: gray;
    --color-slate-next: darkgray;
    --color-red-previous: var(--color-magenta);
    --color-red-next: var(--color-yellow);
    --color-yellow-previous: var(--color-red);
    --color-yellow-next: var(--color-green);
    --color-green-previous: var(--color-yellow);
    --color-green-next: var(--color-turquoise);
    --color-turquoise-previous: var(--color-green);
    --color-turquoise-next: var(--color-lightblue);
    --color-lightblue-previous: var(--color-turquoise);
    --color-lightblue-next: var(--color-blue);
    --color-blue-previous: var(--color-lightblue);
    --color-blue-next: var(--color-purple);
    --color-purple-previous: var(--color-blue);
    --color-purple-next: var(--color-magenta);
    --color-magenta-previous: var(--color-purple);
    --color-magenta-next: var(--color-red)
}

:host([data-doc-it-theme=slate]) , [data-doc-it-theme=slate] {
    --theme-previous: var(--color-slate-previous);
    --theme-next: var(--color-slate-next)
}

:host([data-doc-it-theme=red]) , [data-doc-it-theme=red] {
    --theme-previous: var(--color-red-previous);
    --theme-next: var(--color-red-next)
}

:host([data-doc-it-theme=yellow]) , [data-doc-it-theme=yellow] {
    --theme-previous: var(--color-yellow-previous);
    --theme-next: var(--color-yellow-next)
}

:host([data-doc-it-theme=green]) , [data-doc-it-theme=green] {
    --theme-previous: var(--color-green-previous);
    --theme-next: var(--color-green-next)
}

:host([data-doc-it-theme=turquoise]) , [data-doc-it-theme=turquoise] {
    --theme-previous: var(--color-turquoise-previous);
    --theme-next: var(--color-turquoise-next)
}

:host([data-doc-it-theme=lightblue]) , [data-doc-it-theme=lightblue] {
    --theme-previous: var(--color-lightblue-previous);
    --theme-next: var(--color-lightblue-next)
}

:host([data-doc-it-theme=blue]) , [data-doc-it-theme=blue] {
    --theme-previous: var(--color-blue-previous);
    --theme-next: var(--color-blue-next)
}

:host([data-doc-it-theme=purple]) , [data-doc-it-theme=purple] {
    --theme-previous: var(--color-purple-previous);
    --theme-next: var(--color-purple-next)
}

:host([data-doc-it-theme=magenta]) , [data-doc-it-theme=magenta] {
    --theme-previous: var(--color-magenta-previous);
    --theme-next: var(--color-magenta-next)
}

[data-tts].tts-playable {
    user-select: none
}

[data-tts].tts-playable:hover, [data-tts].tts-playable:active, [data-tts].tts-playable:focus {
    text-decoration: underline;
    cursor: pointer
}

[data-tts].tts-active {
    color: var(--theme-text);
    background-color: rgba(0, 0, 0, .1)
}

:host([data-doc-it-theme=slate]) .tts-active , [data-doc-it-theme=slate] .tts-active {
    background-color: rgba(54, 64, 64, .15)
}

.tts-player {
    position: fixed;
    z-index: 1;
    bottom: 1em;
    right: 1em;
    font-family: Kufam, Mulish
}

.tts-player.tts-maximized {
    bottom: 0;
    right: 0;
    width: 100%
}

.tts-player.tts-maximized::before, .tts-player.tts-maximized::after {
    border-radius: 0
}

.tts-player.tts-loading, .tts-player.tts-loading button, .tts-player.tts-loading .tts-progress {
    cursor: wait !important
}

.tts-player, .tts-player * {
    box-sizing: border-box;
    line-height: 1;
    user-select: none
}

.tts-player {
    color: var(--theme-background)
}

.tts-player::after, .tts-player::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    z-index: -1;
    border-radius: 999px;
    background-color: var(--theme-accent);
    background-image: radial-gradient(circle at -50% -50%, var(--theme-next), transparent 75%), radial-gradient(circle at center center, var(--theme-accent), transparent 100%), radial-gradient(circle at 150% 100%, var(--theme-previous), transparent 75%)
}

.tts-player::before {
    opacity: .5;
    filter: blur(12px)
}

.tts-player svg {
    width: 2em;
    height: 2em
}

@media (min-width: 40em) {
    .tts-player svg {
        width: 1.5em;
        height: 1.5em
    }
}

.tts-player button {
    padding: 0;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    vertical-align: middle;
    line-height: 0;
    cursor: pointer
}

.tts-player button:focus {
    outline: 0
}

.tts-player button:disabled {
    cursor: not-allowed
}

.tts-player [hidden] {
    display: none !important
}

.tts-container {
    display: flex;
    align-items: center;
    max-width: 40em;
    padding: 0 1em;
    width: 100%;
    margin: 0 auto
}

.tts-minimize, .tts-controls, .tts-timing {
    display: none
}

.tts-player.tts-maximized .tts-minimize, .tts-player.tts-maximized .tts-controls, .tts-player.tts-maximized .tts-timing {
    display: block
}

.tts-player.tts-maximized .tts-maximize {
    display: none
}

.tts-player .tts-minimize {
    background-color: rgba(255, 255, 255, .25);
    border-radius: 999px;
    margin-left: auto
}

.tts-timing {
    background-color: rgba(255, 255, 255, .7);
    color: var(--theme-text)
}

.tts-play:disabled, .tts-pause:disabled {
    display: none
}

.tts-maximize svg, .tts-play svg, .tts-pause svg {
    width: 4em;
    height: 4em
}

@media (min-width: 40em) {
    .tts-maximize svg, .tts-play svg, .tts-pause svg {
        width: 3em;
        height: 3em
    }
}

.tts-maximize svg, .tts-maximize span {
    display: inline-block
}

.tts-maximize svg {
    vertical-align: middle
}

.tts-maximize svg + span {
    padding-right: 1em
}

.tts-maximize span + svg {
    padding-left: 1em
}

.tts-previous:disabled, .tts-next:disabled {
    opacity: .5
}

.tts-time, .tts-duration {
    padding: 1em;
    font-size: .6em;
    margin-bottom: -3px
}

.tts-time {
    padding-left: 0
}

.tts-duration {
    padding-right: 0
}

.tts-progress, .tts-volume {
    background-color: rgba(255, 255, 255, .25);
    border-radius: 999px
}

.tts-progress {
    position: relative;
    flex-grow: 1;
    padding: 6px;
    cursor: e-resize
}

.tts-progress-bar {
    position: absolute;
    left: 0;
    top: 50%;
    height: 12px;
    min-width: 12px;
    opacity: .8;
    border-radius: 999px;
    background-color: var(--theme-accent);
    background-image: radial-gradient(circle at -50% -50%, var(--theme-next), transparent 75%), radial-gradient(circle at center center, var(--theme-accent), transparent 100%), radial-gradient(circle at 150% 100%, var(--theme-previous), transparent 75%);
    transform: translateY(-50%)
}

.tts-volume .tts-progress-bar {
    background-color: var(--theme-background);
    background-image: none
}

.tts-volume {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0 .25em;
    margin: .25em 1em;
    background-color: rgba(255, 255, 255, .25)
}

.tts-volume-percentage {
    font-size: .6em;
    margin: 0 .5em
}

.tts-volume-icon {
    opacity: .5
}

.tts-progress.tts-loading::after, .tts-progress.tts-loading::before, .tts-maximize.tts-loading::after, .tts-maximize.tts-loading::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    border-radius: 999px
}

.tts-progress.tts-loading::after, .tts-maximize.tts-loading::after {
    animation-delay: 0s;
    background-color: var(--theme-previous);
    background-image: linear-gradient(to right, var(--theme-next), var(--theme-previous))
}

.tts-progress.tts-loading::before, .tts-maximize.tts-loading::before {
    animation-delay: -1s;
    background-color: var(--theme-next);
    background-image: linear-gradient(to right, var(--theme-previous), var(--theme-next))
}

.tts-maximize.tts-loading::after, .tts-maximize.tts-loading::before {
    animation: tts-maximize-loading ease-in-out infinite 2s
}

.tts-progress.tts-loading::before, .tts-progress.tts-loading::after {
    animation: tts-progress-loading ease-in-out infinite 1s;
    animation-delay: .5s
}

.tts-progress.tts-loading::after {
    animation-delay: 0s
}

@keyframes tts-maximize-loading {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    25% {
        opacity: 1
    }
    100% {
        transform: scale(1.5);
        opacity: 0
    }
}

@keyframes tts-progress-loading {
    0% {
        opacity: 0;
        transform: scaleY(0)
    }
    25% {
        opacity: .4
    }
    100% {
        transform: scaleY(2);
        opacity: 0
    }
}

@media print {
    :host::before {
        content: 'ERR_PRINTING_DISABLED_DUE_TO_COPYRIGHT_ISSUES';
    }

    * {
        display: none;
    }
}

article.document-dyslexia * {
    font-family: 'Open-Dyslexic', sans-serif !important;
    line-height: 1.5852;
}

article.document-limit-width {
    max-width: 35em;
}