:root {
    /* The following override the values in global.css */
    --primary-background-color: white;
    --top-heading-background-color: white;
    --font-body: var(--font-body-sans);
    --font-heading: var(--font-heading-serif);

    /* The remaining items are only used in CombinedGospels.html */
    --display-verse: inline;
    --display-verse-num: none;
    --display-added-format: inline;
    --display-removed-format: none;
    --display-ref: inline;
    --display-notes: block;
    --display-sources: none;
    --display-outline-title: block;
    --display-inline-title: block;
    --display-para-symbol: none;
    --para-indent: 30px;
    --first-letter: lowercase;
    --jst-weight: 600;
    --jst-style: normal;
    --display-hover: none;
    --hover-cursor: auto;
    --h3-before: none;
    --matt-clr: #A00000;
    --mark-clr: #007000;
    --luke-clr: #000090;
    --john-clr: #900090;
    --acts-clr: #000090;
    --matt-color: black;
    --mark-color: black;
    --luke-color: black;
    --john-color: black;
    --acts-color: black;
    /*--font-body-sans: "system-ui", sans-serif;*/
    /*--font-heading-sans: "PT Sans Caption", sans-serif;*/
    /*--font-body-serif: "PT Serif", serif;*/
    /*--font-heading-serif: "PT Serif Caption", serif;*/
    --font-body-sans: "Open Sans", sans-serif;
    --font-heading-sans: "Open Sans", sans-serif;
    --font-body-serif: "Lora", serif;
    --font-heading-serif: "Lora", serif;
    --verse-num-left: "";
    --verse-num-right: " ";
    --verse-num-font-size: 0.6em;
}

.breadcrumb {
    background-color: white;
    border-top-style: solid;
    border-top-color: black;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
    border-bottom-width: 1px;
    padding: 2px 5px;
    font-size: 18px;
    font-weight: normal;
    height: 25px;
    min-height: 25px;
    overflow-y: hidden;
    display: block;
}

/* All of the styles below are used only in CombinedGospels.html */

h1 {
    counter-reset: section-counter;
}
h2 {
    /*counter-reset: subsection-counter;*/
    /*counter-increment: section-counter;*/
    /*display: var(--display-outline-title);*/
    text-align: center;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
}
/*h2::before {*/
/*    content: counter(section-counter) ". ";*/
/*}*/
h3 {
    /*counter-increment: subsection-counter;*/
    /*display: var(--display-outline-title);*/
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 2px;
}
h2 img, h3 img {
    display: none !important;
}
h3::before {
    content: attr(data-eid) ". ";
    display: var(--h3-before);
}
.h3-subtext {
    margin: 1px;
    font-size: 9pt;
    font-weight: normal;
}
.event {
    counter-increment: event-counter;
    /*padding-left: 20px;*/
}
.inline-title {
    font-family: var(--font-heading);
    font-size: 115%;
    /*padding-right: 60px;*/
    text-align: center;
    margin-block-start: 0.3em;
    margin-block-end: 0.15em;

    /*display: var(--display-text);*/
}
.inline-sub-title {
    font-family: var(--font-heading);
    font-size: 100%;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}
.source {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.source p {
    margin: 0;
}
.reference {
    font-weight: 600;
}
.center-text {
    text-align: center;
}
.end {
    vertical-align: top;
    height: 12px;
    display: inline-block;
    width: 25%;
    margin: 0 auto;
    padding: 0;
    border-bottom-color: black;
    border-bottom-style: double;
    border-bottom-width: 7px;
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
}
.end-text {
    display: inline-block;
    font-size: 18pt;
}
sup {
    /* Prevents the superscript from affecting the line box height */
    line-height: 0;
    /* Use relative positioning to raise the text without affecting layout */
    position: relative;
    top: -0.5em; /* Adjust this value as needed to align with your font */
    /* Ensure the font size is appropriate (optional, but common) */
    font-size: 0.75em;
    /* Fallback vertical alignment if needed, but 'top' or 'baseline' works well with relative positioning */
    vertical-align: baseline;
}
sup.note {
    /* Prevents the superscript from affecting the line box height */
    line-height: 0;
    /* Use relative positioning to raise the text without affecting layout */
    position: relative;
    top: 0.5em; /* Adjust this value as needed to align with your font */
    /* Ensure the font size is appropriate (optional, but common) */
    font-size: 0.6em;
    /* Fallback vertical alignment if needed, but 'top' or 'baseline' works well with relative positioning */
    vertical-align: text-top;
    color: black;
}
div.alt-trans {
    display: block;
    text-indent: 0;
}

.verse::before {
    content: var(--verse-num-left) attr(data-vr) var(--verse-num-right); /* Retrieves the value of data-vr */
    /* Prevents the superscript from affecting the line box height */
    line-height: 0;
    /* Use relative positioning to raise the text without affecting layout */
    position: relative;
    bottom: 0; /* Adjust this value as needed to align with your font */
    /* Ensure the font size is appropriate (optional, but common) */
    font-size: var(--verse-num-font-size);
    font-style: italic;
    /* Fallback vertical alignment if needed, but 'top' or 'baseline' works well with relative positioning */
    vertical-align: baseline;
    display: var(--display-verse-num);
}

/* span.hover credit: https://www.impressivewebs.com/pure-css-tool-tips/ */
span.hover {
    position: relative;
    /*text-decoration: none;*/
    text-indent: 0;
    cursor: var(--hover-cursor);
}

span.hover:before {
    content: "";
    position: absolute;
    border-top: 1em solid #0090ff;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    display: none;
    top: -0.6em;
    left: -0.5em;
}

span.hover:after {
    content: attr(data-ref);
    position: absolute;
    color: white;
    top: -1.6em;
    left: -1.5em;
    background: #0090ff;
    padding: .25em .75em;
    border-radius: .5em;
    white-space: nowrap;
    font-size: 60%;
    font-weight: normal;
    display: none;
}

span.hover:hover:before, span.hover:hover:after {
    display: var(--display-hover);
}

span.link {
    cursor: default;
}

span.link:hover {
    background-color: #dddddd;
}

.sources a {
    color: inherit;
}

.para {
    text-indent: var(--para-indent);
    /*margin-block-start: 0.15em;*/
    /*margin-block-end: 0.2em;*/
    /*padding-right: 40px;*/
}
.verse {
    display: var(--display-verse);
    margin-top: 7px;
}
.sources {
    margin: 1px 1px 1px 1px;
    font-size: 60%;
    font-weight: normal;
    display: var(--display-sources);
}
.jst {
    font-weight: var(--jst-weight);
    font-style: var(--jst-style);
}
.jst-removed {
    text-decoration: line-through;
}
.matt {
    color: var(--matt-color);
}
.mark {
    color: var(--mark-color);
}
.luke {
    color: var(--luke-color);
}
.john {
    color: var(--john-color);
}
.acts {
    color: var(--acts-color);
}
.nowrap {
    white-space: nowrap;
}
.matt-color {
    color: var(--matt-clr);
}
.mark-color {
    color: var(--mark-clr);
}
.luke-color {
    color: var(--luke-clr);
}
.john-color {
    color: var(--john-clr);
}
.acts-color {
    color: var(--acts-clr);
}
.ref {
    font-size: 70%;
    font-weight: normal;
    font-style: italic;
    text-wrap: nowrap;
    display: var(--display-ref);
}
.added-format {
    display: var(--display-added-format);
}
.removed-format {
    display: var(--display-removed-format);
}
.notes {
    font-size: 70%;
    font-weight: normal;
    display: var(--display-notes);
}
hr.footnote {
    width: 100px;
    margin-left: 0;
    margin-block-start: 0.5em;
    margin-block-end: 0.2em;
}
.footnote-verse {
    display: var(--display-verse-num);
}
a {
    text-wrap: nowrap;
}
.first-letter {
    text-transform: var(--first-letter);
}
.alt-trans {
    font-size: 70%;
    font-weight: normal;
    font-style: italic;
    color: black;
    display: var(--display-ref);
}
.options {
    margin: 6px;
}
.para-symbol {
    display: var(--display-para-symbol);
}