#textContainer > div .br { /* simulated <brs> */
    display: block;
    width: 100%;
    clear: left;
    /* pointer-events: none; */
    cursor: pointer;
    text-shadow: none;
}

/* TESTING NEW ANIMATIONS */
/* TODO: Move to main.css (animations/glyphs) */
#textContainer > div .br:after {
    content: var(--sub-glyph);
    padding-left: 2em; /* to increase hitbox size */
    margin-left: -2em;
    margin-right: 0.1em; /* TODO var(--sub-offset */
    /* margin-left: 0; */
    float: left;
    /* color: var(--font-color); */
    color: transparent;
    text-shadow: none;
    /* font-family: 'Helvetica-Neue'; */
    font-weight: 300;
    /* transition: color 200ms; */
    transition: transform 500ms;
}
.line-glyphs #textContainer > div .br:after {
    color: var(--font-color);
    /* overflow: visible; */
}
/* inactive (0ms) br */
.line-glyphs #textContainer > div .br[data-duration="0"]:after {
    font-weight: 100;
    text-decoration: line-through;
    opacity: 0.35;
}
/* not default duration */
.line-glyphs #textContainer > div .br[data-duration]:not([data-duration="300"]):after {
    font-weight: 900;
    text-shadow: 0 0 2px;
}
.line-glyphs #textContainer > div .br:hover:after {
    /* transform: scale(1.4); */
    /* opacity: 0.5; */
    /* color: var(--highlight-color); */
    text-shadow: var(--highlight-color) 1px 1px 0px,
                 var(--highlight-color) -1px -1px 0px,
                 var(--highlight-color) 1px -1px 0px,
                 var(--highlight-color) -1px 1px 0px !important;
}
.line-glyphs #textContainer > div .br:active:after {
    /* opacity: 0.2; */
    color: var(--highlight-color);
}
.line-glyphs #textContainer > div .br.editing:after {
    /* transform: rotateY(180deg) translateX(1.4em); */
    /* transform: scaleY(1.4); */
    animation: blink 800ms step-end infinite;
}
@keyframes blink {
    50% {
        opacity: 0.2;
    }
}
.line-glyphs #textContainer > div .br.slidein:after {
    /* slidein class is removed on animationend so animation only happens once */
    animation: 150ms slidein;
}
@keyframes slidein {
    from {
        opacity: 0.0;
        /* margin-left: -3em; */
        transform: translateX(-3em);
    }
    to {
        opacity: 1.0;
        transform: translateX(0);
    }
}

/* START to highlight presence of nested ssml tags */
.show-borders.color-mode #textContainer > div span span {
    /* text-decoration: underline; */
    border: 1px dotted #0005;
    border-radius: 0.2em;
    box-sizing: border-box;
}

/* .color-mode #textContainer > div span span span { */
/*     text-decoration: underline overline; */
/* } */
/* .color-mode #textContainer > div span span span span { */
/*     border-radius: 0.2em; */
/*     border: 1px dotted black; */
/* } */
/* END highlight presence of nested ssml tags */

/* START: the bold-mode color scheme */
.bold-mode #textContainer > div span {
    font-weight: 900;
    /* text-decoration: underline; */
}
.bold-mode #textContainer > div span span {
    /* font-weight: 900; */
    /* text-decoration: underline; */
    border: 1px dotted black;
    border-radius: 0.2em;
    box-sizing: border-box;
}
.bold-mode #textContainer > div.warning-highlighted span {
    color: inherit !important;
    text-shadow: inherit !important;
    background-color: inherit !important;
    text-decoration: none !important;
}
/* END: the bold-mode color scheme */


/* START: the color-mode color scheme */
.color-mode #textContainer > div.warning-highlighted span {
    color: inherit !important;
    text-shadow: inherit !important;
    background-color: inherit !important;
    text-decoration: underline !important;
}
.color-mode #textContainer > div.warning-highlighted.highlighted span {
    text-decoration: none !important;
}

.color-mode #textContainer > div span {
    /* box-shadow: 0px 0px 1px 1px #0002; */
    text-decoration: inherit;
    text-decoration-style: inherit;
    text-decoration-color: inherit;
}
.color-mode #textContainer > div span.paragraph {
    border-radius: 10%;
    /* border-left: 1px solid #0005; */
    /* border-right: 1px solid #0005; */
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--font-color);
}
.color-mode #textContainer > div span.enhance {
    text-shadow: 2px 2px 0px #58B7;
}
.color-mode #textContainer > div span.whisper {
    color: rgba(0,0,0,0.1);
    text-shadow: 0px 0px 3px var(--font-color);
}
.color-mode #textContainer > div span.bleep {
    background-color: black;
    box-shadow: 0 0 0.5px white;
    color: rgba(255, 0, 0, 0.4);
    border-radius: 0.1em;
    text-shadow: none;
}
.color-mode #textContainer > div span.soft {
    background-color: var(--save-color);
    border-radius: 0.15em;
    /* opacity: 0.7; */
    /* font-weight: 100; */
}
.color-mode #textContainer > div span.careful {
    color: black;
    font-weight: bold;
    --outline-blur: 0px;
    --outline-color: #FFFD;
    text-shadow: 0.07em 0 var(--outline-blur) var(--outline-color),
                 0 0.07em var(--outline-blur) var(--outline-color),
                 -0.07em 0 var(--outline-blur) var(--outline-color),
                 0 -0.07em var(--outline-blur) var(--outline-color);
    /* text-shadow: 1px 1px 1px black; */
}
.color-mode #textContainer > div span.skim {
    opacity: 0.7;
    /* font-style: italic; */
    /* color: rgb(212,212,212); */
}

/* new neural tags */
.color-mode #textContainer > div span.conversational {
    text-decoration: none;
    text-shadow: 1px 1px 1px cyan;
    outline: 2px solid rgb(73, 178, 255);
}
.color-mode #textContainer > div span.newscaster {
    text-decoration: none;
    text-shadow: 1px 1px 1px rgb(8, 173, 24);
    outline: 1px solid darkgreen;
}

/* volume */
.color-mode #textContainer > div :-webkit-any(span.volume-x-soft, span.volume-soft, span.volume-loud, span.volume-x-loud) {
    text-decoration: underline;
    text-decoration-color: darkgrey;
}
.color-mode #textContainer > div span.volume-silent {
    text-decoration: line-through;
    text-decoration-color: var(--font-color);
}
.color-mode #textContainer > div span.volume-x-soft {
    text-decoration-thickness: 0.02em;
}
.color-mode #textContainer > div span.volume-soft {
    text-decoration-thickness: 0.04em;
}
.color-mode #textContainer > div span.volume-loud {
    text-decoration-thickness: 0.12em;
}
.color-mode #textContainer > div span.volume-x-loud {
    text-decoration-thickness: 0.18em;
}

/* rate */
.color-mode #textContainer > div :-webkit-any(span.rate-x-slow, span.rate-slow, span.rate-fast, span.rate-x-fast) {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-skip: none;
    /* text-shadow: 0 0.02em 1px var(--bg-color), */
    /*              0 -0.02em 1px var(--bg-color), */
    /*              -0.02em 0 1px var(--bg-color), */
    /*              0.02em 0em 1px var(--bg-color); */
    text-decoration-thickness: 0.1em;
}
.color-mode #textContainer > div span.rate-x-slow {
    text-decoration-color: #0047b4; /* purple to lavender */
    /* text-decoration-color: #5E006B; /\* purple to lavender *\/ */
}
.color-mode #textContainer > div span.rate-slow {
    text-decoration-color: #0099a6;
    /* text-decoration-color: #8B009E; /\* purple to lavender *\/ */
}
.color-mode #textContainer > div span.rate-fast {
    text-decoration-color: #0099a6; /* purple to lavender */
    text-decoration-style: dotted;
    /* text-decoration-color: #C600E0; /\* purple to lavender *\/ */
}
.color-mode #textContainer > div span.rate-x-fast {
    text-decoration-color: #00f3ff; /* purple to lavender */
    text-decoration-style: dotted;
    /* text-decoration-color: #EC60FF; /\* purple to lavender *\/ */
}

/* pitch */
.color-mode #textContainer > div :-webkit-any(span.pitch-x-low, span.pitch-low, span.pitch-medium, span.pitch-high, span.pitch-x-high) {
    text-decoration-style: inherit;
    text-decoration-color: inherit;
    text-decoration: inherit;
    --outline-blur: 1px;
    --outline-color: #FFFD;
    text-shadow: 0.07em 0 var(--outline-blur) var(--outline-color),
                 0 0.07em var(--outline-blur) var(--outline-color),
                 -0.07em 0 var(--outline-blur) var(--outline-color),
                 0 -0.07em var(--outline-blur) var(--outline-color);
}
.color-mode #textContainer > div span.pitch-x-low {
    /* color: #607; */
    color: #6e18e8;
    --outline-color: #AAA;
}
.color-mode #textContainer > div span.pitch-low {
    /* color: #809; */
    color: #8a1699;
    --outline-color: #BBB;
}
.color-mode #textContainer > div span.pitch-high {
    color: #C0E;
    --outline-color: #FFFC;
}
.color-mode #textContainer > div span.pitch-x-high {
    color: #E6F;
}

/* timbre */
.color-mode #textContainer > div :-webkit-any(span.timbre-x-low, span.timbre-low, span.timbre-medium-low, span.timbre-medium-high, span.timbre-high, span.timbre-x-high, span.timbre-super-high, span.timbre-super-x-high) {
    text-decoration: inherit;
    text-decoration-style: inherit;
    text-decoration-color: inherit;
    --outline-blur: 1px;
    --outline-color: #FFFD;
    text-shadow: 0.07em 0 var(--outline-blur) var(--outline-color),
                 0 0.07em var(--outline-blur) var(--outline-color),
                 -0.07em 0 var(--outline-blur) var(--outline-color),
                 0 -0.07em var(--outline-blur) var(--outline-color);
}
.color-mode #textContainer > div :-webkit-any(span.timbre-x-low, span.timbre-low) {
    color: #977;
}
.color-mode #textContainer > div :-webkit-any(span.timbre-medium-low, span.timbre-medium-high) {
    color: #740;
}
.color-mode #textContainer > div :-webkit-any(span.timbre-high, span.timbre-x-high, span.timbre-super-high, span.timbre-super-x-high) {
    color: #500;
}
/* .color-mode #textContainer > div :-webkit-any(span.timbre-x-low, span.timbre-low) { */
/*     border-bottom: 1px dotted #800; */
/* } */
/* .color-mode #textContainer > div :-webkit-any(span.timbre-medium-low, span.timbre-medium-high) { */
/*     border-bottom: 1px dotted #880; */
/* } */
/* .color-mode #textContainer > div :-webkit-any(span.timbre-high, span.timbre-x-high, span.timbre-super-high, span.timbre-super-x-high) { */
/*     border-bottom: 1px dotted #CC0; */
/* } */

/* past tense, read as verb, pronounce differently */
.color-mode #textContainer > div :-webkit-any(span.read-as-verb, span.past-tense, span.pronounce-differently) {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: var(--font-color);
}

/* breathing */
.color-mode #textContainer > div :-webkit-any(span.deep-breathing, span.medium-breathing, span.short-breathing) {
    /* text-shadow: 1px 1px 3px #000C; */
    text-shadow: 1px 1px 3px currentcolor;
}

/* accents */
.color-mode #textContainer > div :-webkit-any(span.accent-american, span.accent-australian, span.accent-british, span.accent-us-indian, span.accent-us-spanish, span.accent-mexican-spanish, span.accent-french, span.accent-canadian, span.accent-italian, span.accent-russian, span.accent-romanian, span.accent-norwegian, span.accent-polish, span.accent-german, span.accent-danish, span.accent-dutch, span.accent-icelandic, span.accent-swedish, span.accent-welsh, span.accent-turkish, span.accent-arabic, span.accent-indian, span.accent-chinese, span.accent-japanese, span.accent-korean) {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #0008;
}


/* END the color-mode color scheme */