:root {
    --display-verse: inline;
    --display-verse-num: none;
    --para-indent: 30px;
    --jst-weight: normal;
    --ref-visibility: hidden;
    --ref-cursor: auto;
    --matt-color: black;
    --mark-color: black;
    --luke-color: black;
    --john-color: black;
    --acts-color: black;
}
body {
    font-family: Verdana, sans-serif;
    background-color: white;
    margin-left: 10px;
    counter-reset: event-counter;
}
.container {
    display: flex;
}
.child-left {
    flex: 3;
}
.child-right {
    flex: 1;
}
h1 {
    counter-reset: section-counter;
}
h2 {
    counter-reset: subsection-counter;
    counter-increment: section-counter;
}
h2::before {
    content: counter(section-counter) ". ";
}
h3 {
    counter-increment: subsection-counter;
}
h3::before {
    content: counter(section-counter) "." counter(subsection-counter) " ";
}
/*h3::after {*/
/*    content: " (" counter(section-counter) "." counter(subsection-counter) " ; " counter(event-counter) ")";*/
/*}*/
.event {
    counter-increment: event-counter;
    padding-left: 20px;
}
.source {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.source p {
    margin: 0;
}
.reference {
    font-weight: bold;
}
.merged-title {
    font-weight: bold;
    text-align: center;
}
.merged p {
    margin: 0;
}
.notes, .merged {
    column-count: 2;
    column-gap: 20px;
}
.notes p {
    margin-top: 0;
    margin-bottom: 0;
}
.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;
}
.footnote {
    width: 100px;
    margin-left: 0;
}
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;
}

.verse::before {
    content: "[" attr(data-vr) "] "; /* 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: 0.5em;
    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);
}

/* Position the parent relative to hold the tooltip */
.ref {
    position: relative;
    cursor: var(--ref-cursor);
}

/* Hide the tooltip by default and style it */
.ref::after {
    content: attr(data-bk) " " attr(data-ch) ":" attr(data-vr); /* THIS USES THE DATA-REF VALUE */
    max-width: 120px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 2px;
    position: absolute;
    z-index: 1;
    /*top: -5px;*/
    /*right: 105%;*/
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    font-weight: normal;
    text-indent: 0;
}

/* Show the tooltip on hover */
.ref:hover::after {
    opacity: 1;
    visibility: var(--ref-visibility);
}
.para {
    text-indent: var(--para-indent);
    margin-top: 7px;
}
.verse {
    display: var(--display-verse);
    margin-top: 7px;
}
.sources {
    font-size: 60%;
    margin-left: 30px;
}
.jst {
    font-weight: var(--jst-weight);
}
.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);
}