html {
    font-family: versePracticeFont;
    background-color: rgb(240,240,240);
    color: rgb(20,20,20);
    transition: color 150ms, background-color 150ms;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
html.dark {
    color: #eee;
    background: #121212;
}
table {
    margin: 0 auto;
    height: 100%;
}
.passagesBox table {
    height: auto;
}
.verseCard {
    margin: 18px 0;
}
.verseRef {
    font-weight: bold;
}
.verseCard, .ref, .promptButton, .score, .restart, .draggingWord {
    font-size: 1.8em;
}
.cardNum {
    float: right;
    cursor: help;
}

.infoOnHover {
    cursor: help;
}

.score {
    text-align: right;
    font-weight: bold;
}

.verseRef, .verseLine span, .passButton, .promptButton, .restart, .promptEl, label, .checkboxPractice, .selectAll, select, .button, .prevButton, .playGameButton, .nextPassage {
    cursor: pointer;
}

.verseCardsContainer {
    opacity: 0.5;
    transition: opacity 300ms;
}
.verseCardsContainer.highlighted, .finished .verseCardsContainer {
    opacity: 1;
}
label {
    user-select: none;
}
/* Don't make heading have a pointer */
.selectionArea > label {
    cursor: auto;
}
.deselectContainer {
    margin-top: 0.6em;
}
.toggleLabel {
    transition: opacity 150ms;
}
.disabled {
    opacity: 0.5;
}
html.dragging, .dragging body,.dragging #pageEl, .dragging .verseRef, .dragging .verseLine span {
    cursor: move!important;
    cursor: -moz-grabbing!important;
    cursor: grabbing!important;
}

.passButton {
    float: right;
    opacity: 0.6;
    transition: opacity 150ms, color 150ms;
}
.passButton:hover {
    opacity: 1;
    color: rgb(150, 0, 0)!important;
}
.finished .passButton {
    opacity: 0!important;
}

.ref, .verseLine span, .promptContainer, .checkboxPractice, .menuContainer, .playGameButton {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}
.verseLine .space {
    padding: 0 .05em;
}
.hasTouch .verseLine .space {
    padding: 0 .2em;
}
.hasTouch {
    /* Disable double tap zoom */
    /* https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices */
    touch-action: manipulation;
}

.verseLine .word, .verseLine .verseNum, .verseRef, .insertedWord {
    transition: color 150ms, background-color 150ms;
    border-radius: .2em;
}

.draggingWord {
    transition: opacity 250ms;
    opacity: 0;
}

.verseLine .word:hover, .verseLine .verseNum:hover, .verseRef:hover, .insertedWord:hover {
    color: rgb(150, 0, 0);
    /*color: rgb(220, 0, 0);*/
    /*background-color: rgba(220, 0, 0, 0.15);*/
    background-color: rgba(220, 0, 0, 0.05);
}

.passed .verseLine .word:hover,
.passed .verseLine .verseNum:hover,
.passed .verseRef:hover,
.passed .insertedWord:hover,
.finished .verseLine .word:hover,
.finished .verseLine .verseNum:hover,
.finished .verseRef:hover,
.finished .insertedWord:hover {
    background-color: rgb(240,240,240)!important;
    color: rgb(20,20,20)!important;
    cursor: default;
}
.dark .passed .verseLine .word:hover,
.dark .passed .verseLine .verseNum:hover,
.dark .passed .verseRef:hover,
.dark .passed .insertedWord:hover,
.dark .finished .verseLine .word:hover,
.dark .finished .verseLine .verseNum:hover,
.dark .finished .verseRef:hover,
.dark .finished .insertedWord:hover {
    color: #eee!important;
    background: #121212!important;
}

.passed .verseLine .word.markedMistake:hover,
.passed .verseLine .verseNum.markedMistake:hover,
.passed .verseRef.markedMistake:hover,
.passed .insertedWord.markedMistake:hover,
.finished .verseLine .word.markedMistake:hover,
.finished .verseLine .verseNum.markedMistake:hover,
.finished .verseRef.markedMistake:hover,
.finished .insertedWord.markedMistake:hover,
.dark .passed .verseLine .word.markedMistake:hover,
.dark .passed .verseLine .verseNum.markedMistake:hover,
.dark .passed .verseRef.markedMistake:hover,
.dark .passed .insertedWord.markedMistake:hover,
.dark .finished .verseLine .word.markedMistake:hover,
.dark .finished .verseLine .verseNum.markedMistake:hover,
.dark .finished .verseRef.markedMistake:hover,
.dark .finished .insertedWord.markedMistake:hover {
    color: rgb(220, 0, 0)!important;
    background-color: rgba(220, 0, 0, 0.15)!important;
}
.passed .space,
.finished .space,
.finished .promptEl,
.passed .promptEl {
    cursor: default;
}

.insertedWord {
    margin-left: 0.15em;
}

#insertIndicator {
    opacity: 0;
    transition: opacity 150ms 20ms;
    position: absolute;
    pointer-events: none;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
    background: url("data:image/svg+xml,<svg width='2.5019mm' height='9.5729mm' viewBox='0 0 2.5019 9.5729' xmlns='http://www.w3.org/2000/svg'><g fill='%23dc0000'><g stroke-width='.26458'><path d='m2.013 9.5729-1.0287-2.0764h0.5207l0.99695 2.0764zm-2.013 0 0.98425-2.0764h0.51435l-1.0033 2.0764z' fill='%23dc0000'/></g><g transform='scale(-1)' stroke-width='.26458'><path d='m-0.48895 9.7752e-8 -1.0287-2.0764h0.5207l0.99695 2.0764zm-2.0129 0 0.98425-2.0764h0.51435l-1.0033 2.0764z' fill='%23dc0000'/></g><rect x='.69539' y='2.148' width='1.1235' height='5.2601' ry='.56177' fill-opacity='.15'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.promptButton, .restart {
    border: #c1c1c1 outset 1px;
    border-radius: 0.3em;
    padding: 0.2em;
    display: inline-block;
    background: #e7e7e7;
    transition: background 150ms, opacity 150ms;
    opacity: 0.6;
}
.promptButton:hover, .restart:hover {
    background: #c1c1c1;
    opacity: 1;
}
.promptButton:active, .restart:active {
    border-style: inset;
}
.dark .promptButton:hover, .dark .restart:hover {
    background: #474747;
}

.dark .promptButton, .dark .restart, .dark .button, .dark .prevButton, .dark .checkboxPractice  {
    color: #e7e7e7;
    background: black;
}

.promptContainer {
    margin-top: 1.5em;
}

.markedMistake {
    color: rgb(220, 0, 0)!important;
    background-color: rgba(220, 0, 0, 0.15)!important;
}
.markedMistake:hover,
.passed .verseLine .markedMistake:hover,
.finished .verseLine .markedMistake:hover,
 {
    color: rgb(180, 0, 0)!important;
    background-color: rgba(220, 0, 0, 0.15)!important;
}
.finalWordsOnTimeout {
    font-style: italic;
}

.promptsContainer {
    padding: 0.5em 0;
    font-size: 1.3em;
}

/* zebra stripes */
.promptEl:nth-child(even) {
  background-color: rgba(220, 0, 0, 0.29)!important;
}

.checkboxSelectArea:nth-child(even) {
    background-color: rgb(48 100 206 / 12%);
}
.dark .checkboxSelectArea:nth-child(even) {
    background-color: rgb(255 255 255 / 12%);
}



/* Toggle Switch */
input[type="checkbox"] {
    -moz-appearance: none;
    appearance: none; /* Hide the checkbox */
    width: 1.5rem;
    height: .75rem;
    background-color: #cacaca;
    border-radius: .75rem;
    outline: none;
    box-shadow: 0 0 0 3px #cacaca; /* the border */
    transition: background-color 150ms ease;
    cursor: pointer;
    vertical-align: middle;
}
input[type="checkbox"]:before {
    width: .75rem;
    height: .75rem;
    background-color: #5e5e5e;
    display: block;
    content: "";
    border-radius: 100%;
    transition: background-color 150ms ease, transform 150ms ease;
}
input[type="checkbox"]:checked {
    background-color: #eee;
}
input[type="checkbox"]:checked:before {
    background-color: #9a9a9a;
    transform: translateX(100%);
}
#darkModeContainer {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.4;
    transition: opacity 150ms;
}
#darkModeContainer:hover {
    opacity: 0.9;
}
#darkModeContainer label {
    padding: 0.5em;
    display: inline-block;
    cursor: pointer;
}

.draggingWord {
    box-shadow: 1px 1px 5px;
    background-color: rgba(220, 0, 0, 0.62);
    padding: 0.12em;
    pointer-events: none;
}

.swapped1::after {
    content: "⇄";
}
.swapped2::before {
    content: "⇆";
}
#pageEl {
    padding: 1em;
}

.menuContainer {
    text-align: center;
}
.menuContainer, .allCardsContainer {
    transition: opacity 150ms, filter 150ms;
    opacity: 1;
    filter: blur(0px);
}
select {
    font-size: 0.8em;
}

.selectionArea {
    text-align: left;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
}
.passagesBox {
    width: 20em;
    border: 2px inset grey;
    padding: 0.4em;
    background: #fdfdfd;
    font-size: 0.8em;
    font-weight: normal;
    border-radius: .3em;
    height: 20em;
    overflow: auto;
}

.checkboxPractice, .button, .prevButton {
    font-size: 0.9em;
    font-size: 0.7em;
    border: 1px outset grey;
    border-radius: 0.2em;
    padding: 0.05em;
    display: inline-block;
    background: #e7e7e7;
    opacity: 0.9;
    transition: background 150ms, opacity 150ms;
}

.button, .prevButton {
    font-size: 2em;
    padding: 0.3em;
    transition: background 150ms, opacity 150ms;
    opacity: 0.6;
}

.checkboxPractice:hover, .button:hover, .prevButton:hover {
    background: #c1c1c1;
    opacity: 1;
}
.checkboxPractice:active, .button:active, .prevButton:active {
    border-style: inset;
}
.dark .checkboxPractice:hover, .dark .button:hover, .dark .prevButton:hover {
    background: #474747;
    opacity: 1;
}

.checkboxSelectArea label {
    display: inline-block;
    width: 100%; /* Make it a little easier to click on the text */
}

.passagesBox table {
    width: 100%;
    border-spacing: initial;
}   
.checkboxSelectArea input {
    vertical-align: unset; /* For some reason, this centers it. */
}


.promptButton, .restart {
    border: #c1c1c1 outset 1px;
    border-radius: 0.3em;
    padding: 0.2em;
    display: inline-block;
    background: #e7e7e7;
    transition: background 150ms, opacity 150ms;
    opacity: 0.6;
}

.tdRight {
    text-align: right;
}
.passagesTopButtons {
    float: right;
    display: inline-block;
    margin-top: 0.8em;
    
}
.passagesTopButtons, .selectionInfo {
    opacity: 0.6;
    font-weight: normal;
    font-size: 0.5em;
}

.selectionInfo {
    text-align: right;
    margin-top: 3px;
    cursor: help;
}

.dark .passagesBox {
    background: black;
}
.bottomNav {
    margin-top: 1em;
}

.finishButton, .afterFinishedArea {
    float: right;
}
.checkboxCardNum {
    float: right;
    font-size: 0.8em;
    margin-top: 0.1em;
}

.innerVerseCardsContainer {
    transition: opacity 150ms;
}
.promptEl {
    transition: opacity 150ms;
}
.innerVerseCardsContainer.passed, .passed .promptEl {
    opacity: 0.4;
}

.passed .verseLine .swapped1:hover,
.passed .verseLine .swapped2:hover,
.finished .verseLine .swapped1:hover,
.finished .verseLine .swapped2:hover,
.dark .passed .verseLine .swapped1:hover,
.dark .passed .verseLine .swapped2:hover,
.dark .finished .verseLine .swapped1:hover,
.dark .finished .verseLine .swapped2:hover
 {
    color: rgb(220, 0, 0)!important;
    background-color: rgba(220, 0, 0, 0.15)!important;
}

#clock {
    position: fixed;
    top: 0.1em;
    left: 0.1em;
    font-size: 4em;
    font-variant-numeric: tabular-nums;
    /*pointer-events: none;*/
    cursor: pointer;
    transition: opacity 150ms;
    z-index: 9;
    background-color: rgb(240 240 240 / 68%);
    color: rgb(20,20,20);
    border-radius: 0.2em;
    transition: color 150ms, background-color 150ms;
    display: none; /* Hide it at first */
}
.dark #clock {
    color: #eee;
    background: rgb(18 18 18 / 68%);
}
#clock .blinking {
    opacity: 0;
}

.timesUp {
    color: rgb(180, 0, 0);
}
.dark .timesUp {
    color: rgb(220, 0, 0)!important;
}
.grandTotal:before {
    content: "Total: ";
}

.grandTotal {
    font-size: 2em;
    font-weight: bold;
}

.playGameContainer {
    text-align: left;
}

/* CSS */
.playGameButton {
    background-color: #1E96C8;
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 0.6em 1.25em;
    text-decoration: none;
    width: 100%;
    border: 0;
    font-size: 2em;
    font-weight: bold;
    outline: none;
    transition: background-color 150ms;
}
.playGameButton:hover {
    background-color: #1e80c8;
}

.verseCardsContainer {
    margin-bottom: 3em;
    margin-top: 3em;
}

.bottomButtons {
    margin-top: 1em;
}

.stats {
    margin-top: 2em;
    font-size: 1.1em;
}

.suitablePassage:after {
    content: "⭐";
    font-size: 0.5em;
    vertical-align: super;
    margin-left: -0.4em;
    display: inline-block;
}
.requiredPassage:after {
    filter: hue-rotate(300deg) saturate(6);
}

/* Highlight verses that are selected. */
.checkboxSelectArea:has(input[type="checkbox"]:checked) {
    color: rgba(20,20,20,1);
}
.checkboxSelectArea {
    transition: color 150ms;
    color: rgba(20,20,20,0.5);
}
.dark .checkboxSelectArea:has(input[type="checkbox"]:checked) {
    color: rgba(238,238,238,1);
}
.dark .checkboxSelectArea {
    transition: color 150ms;
    color: rgba(238,238,238,0.5);
}

.markedQuestion {
    background-color: #bfbfbf;
    color: #494949;
    transition: color 150ms, background-color 150ms;
}
.markedQuestion:hover {
    background-color: #adadad!important;
    color: #373737!important;
}
.passed .verseLine .markedQuestion:hover,
.dark .passed .verseLine .markedQuestion:hover,
.finished .verseLine .markedQuestion:hover,
.dark .finished .verseLine .markedQuestion:hover {
    background-color: #bfbfbf!important;
    color: #494949!important;
}

.markedQuestion::after {
    content: "(?)";
    font-size: 0.5em;
    vertical-align: super;
}

.small-caps {
    font-variant: small-caps;
    font-family: 'TeX Gyre Pagella Webfont', 'Palatino Linotype', Palatino, TexGyrePagella, 'TeX Gyre Pagella', 'URWPalladioL', 'Book Antiqua', 'Times new Roman', Times, serif;
    line-height: 1em;
}


#darkMode {
    vertical-align: text-top;
}

/* HTML scrollbar styles (WebKit only) */
/* NOTE: If ::-webkit-scrollbar is not present, the other styles will not work. */
html > ::-webkit-scrollbar {
    width: .6em;
    background-color: #FFF;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

html > ::-webkit-scrollbar-thumb {
    border-radius: .3em;
    background-color: rgba(130,130,130,.3);
    /* Do not let the thumb get too small. */
    min-height: 35px;
    transition: background-color 150ms;
    cursor: pointer;
}

html > ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(130,130,130,.5);
}

/* <div> scrollbars (WebKit only) */
/* NOTE: If ::-webkit-scrollbar is not present, the other styles will not work. */
div ::-webkit-scrollbar {
    width: .35em;
    background-color: transparent;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: .18em;
}

div ::-webkit-scrollbar-thumb {
    border-radius: .25em;
    background-color: rgba(130,130,130,.3);
    /* Do not let the thumb get too small. */
    min-height: 25px;
    transition: background-color 150ms;
    cursor: pointer;
}

div ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(130,130,130,.5);
}

/* Set the style for the main scrollbar. */
/* NOTE: Other scrollbars (like in <div> tags) do not need to be styled because they are transparent and the background color shows through. */
html.dark > ::-webkit-scrollbar {
    background-color: #000;
}

.audioContainer {
    float: right;
}
audio.recording {
    height: 1.4em;
    opacity: 0;
    display: block;
    transition: opacity 500ms;
}
/* NOTE: Enable "Show user agent shadow DOM" in dev tool to see pseudo elements. */
audio.recording::-webkit-media-controls-panel {
    background: white;
}
audio.recording::-webkit-media-controls-enclosure {
    border: 1px solid #c1c2c3;
}

.nextPassage {
    text-align: center;
    font-size: 1.7em;
    opacity: 0;
    transition: opacity 300ms, text-shadow 300ms;
    pointer-events: none;
    --glow: black;
}
.nextPassage.isVisible {
    opacity: 0.75;
    pointer-events: auto;
}
.nextPassage.isVisible:hover {
    opacity: 1;
    text-shadow: 0 0 1px var(--glow);
}

.dark .nextPassage.isVisible {
    --glow: white;
}
.finished .nextPassage.isVisible {
    opacity: 0;
    pointer-events: none;
}

.volumeIndicator {
    position: fixed;
    bottom: .1em;
    right: .1em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms;
}

.volumeBar {
    width: 2em;
    height: 0.5em;
    background-color: #dbdbdb;
    margin: 0.4em 0.3em 0.3em 0.3em;
    border-radius: .2em;
    padding-top: 0.1em;
}
.volumeBarOn {
    background-color: #55b126;
}

.volumeIndicator {
    position: fixed;
    bottom: .1em;
    right: .1em;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 300ms;
}

.volumeBar {
    width: 2em;
    height: 0.5em;
    margin: 0.4em 0.3em 0.3em 0.3em;
    border-radius: .2em;
    padding-top: 0.1em;
    border: black 1px solid;
}

span.testMicLink {
    font-size: 50%;
    color: #797979;
    cursor: pointer;
}

.audioMarker {
    position: absolute;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8.467 8.467'><path d='M50.977 55.48c0 1.505-2.064 2.802-2.692 5.476-.766-2.713-2.692-3.971-2.692-5.477 0-1.505 1.206-2.725 2.692-2.725s2.692 1.22 2.692 2.725' style='fill:%23fff;fill-opacity:1;stroke:%23000;stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' transform='translate(-44.052 -52.622)'/><path d='M124.257 78.351 92.028 96.954 60.54 115.138l.004-37.212-.004-36.362 32.225 18.61Z' style='fill:%23000;fill-opacity:1;stroke:%23000;stroke-width:0;stroke-dasharray:none;stroke-opacity:1' transform='matrix(.04866 0 0 .04937 .202 -1.01)'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 2px black);
    cursor: pointer;
}
.dark .audioMarker {
    filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.6));
}