/* src/common/styles/Bible.css */
/** Références parallèles */
.xref, .bref {
    display: inline-block;
    margin-bottom: 1px;
    padding: 0 .25em;
    background-color: #e4c4cc;
    color: #ad002e;
    border-radius: .25em;
    cursor: pointer;
}

.bref {
    background-color: lightgray;
}

div[id^="refchapter_"] {
    margin-top: 1em;
    color: gray;
    font-weight: bold;
    text-align: left;
}

/* Notes references */

div[id^="refnote_"] {
    padding-top: 1px;
}

cite {
    font-style: normal;
    font-weight: bold;
}

cite, abbr {
    border-bottom: 1px solid black;
    padding: 0 1px;
    cursor: pointer;
}

abbr {
    border-bottom-style: dotted;
}

q, span.Np1 {
    color: #b30130;
    font-style: italic;
}

q.qta {
    color: inherit;
}

q::before, q::after {
    content: none
}

#notes_scrollable p {
    margin: .375em 0
}

.night_mode cite, .night_mode abbr {
    border-bottom-color: white;
}

.night_mode q, .night_mode span.Np1 {
    color: #e4c4cc;
}

span.Tx0 {
    font-size: 0.875em;
}

span.class_section {
    margin: 1em 0;
    font-weight: bold;
    font-size: 1em;
    display: block;
}

p span.class_section {
    display: inline;
}

.smallcaps {
    font-variant: small-caps;
}

span.expo {
    color: #b30130;
    font-size: .75em;
    vertical-align: super;
    margin: -.75em;
    padding: .75em;
    cursor: pointer;
}

.vnum {
    background: #D3D3D3;
    border-radius: 2px;
    color: #b30130;
    display: inline-block;
    font-size: .75em;
    margin: 0 .125em;
    padding: .125em .125em 0;
    position: relative;
    text-align: center;
    cursor: pointer;
    min-width: .875em;
    bottom: .125em
}

[id^="c_"] {
    margin: 1em 0;
    color: gray;
    font-weight: bold;
    text-align: left;
    font-size: 1.25em;
    display: block;
}

.picking {
    color: #008000;
}

@keyframes fadeHighlight {
    0% {
        border-color: currentColor;
        background-color: #e4c4cc;
    }
    100% {
        border-color: transparent;
        background-color: var(--original-bg);
    }
}

.focused {
    border-bottom: 1px solid currentColor;
    --original-bg: transparent;
    animation: fadeHighlight 2s ease-out forwards;
}

.match {
    color: white;
    background-color: #ad002e;
    border-radius: .25em;
    padding: .125em;
}

.night_mode span.expo {
    color: #e4849c;
}

.picking .match {
    background-color: #008000;
}

.night_mode .vnum {
    background: #555;
    color: #e4c4cc;
}

.night_mode [id^="c_"], .night_mode div[id^="refchapter_"] {
    color: #ccc;
}

.night_mode .picking {
    color: #a5dca5;
}

.night_mode .match {
    color: #222222;
    background-color: #e4c4cc;
}

.night_mode .picking .match {
    background-color: #a5dca5;
}
/* src/common/styles/BibleRef.css */
h1 {
    font-size: 2em;
    font-weight: normal;
    margin: .5em 0;
}

h2 {
    font-size: 1.5em;
    font-weight: normal;
    margin: .5em 0;
}

h3 {
    margin: 1em 0 .5em;
    font-size: 1.25em;
    font-weight: normal;
}

h3.r {
    font-size: 1.125em;
}

h3 + h3 {
    margin-top: .5em;
}

h4 {
    margin: 1em 0 .25em;
    font-size: 1em;
    font-variant: small-caps;
    font-weight: normal;
}

h5 {
    margin: 1em 0 .25em;
    font-size: 1em;
    font-weight: bold;
    font-style: italic;
}

p {
    margin: 0 0 .5em;
}

p.q1 {
    margin: 0 1em;
    text-align: left;
}

p.q2 {
    margin-left: 2em;
}

p.q1 ~ p:not(.q1) {
    margin-top: .5em;
}

p.ie {
    text-align: right;
}

p.iex {
    text-align: center;
    font-size: .875em;
}

p.Tx0, p.intro {
    margin: 1em 0;
    font-size: 0.875em;
}

q.fqa {
    color: inherit;
}

span.blank_line {
    display: block;
    height: .5em;
}

p.Tt2, li.Tt2, div.Tt2 {
    margin: 1em 0 0;
    font-size: 1em;
    font-weight: bold;
    text-align: left;
}

p.Rt2, p.Rt3, p.Rt31 {
    font-size: 1em;
    font-style: italic;
}

p.Rt2 {
    margin: 0 0 1em;
    font-weight: bold;
    text-align: left;
}

p.Rt3 {
    margin: 0 0 .5em;
}

p.Rt31 {
    margin: 1em 0 .5em;
}

p.Tx1, li.Tx1, div.Tx1 {
    margin: 0;
    font-size: 1em;
}

p.Tx3, li.Tx3, div.Tx3 {
    margin: 0;
    font-size: 0.8em;
}

p.Tt31, li.Tt31, div.Tt31 {
    margin: 1em 0;
    font-size: 0.9em;
    text-align: left;
}

p.Tx12, li.Tx12, div.Tx12 {
    margin: 0;
    font-size: 1em;
}

p.Tx11, li.Tx11, div.Tx11 {
    margin: 0;
    font-size: 1em;
}

p.Tt11, li.Tt11, div.Tt11 {
    margin: 0 0 1.5em;
    font-size: 1.6em;
    font-weight: bold;
    text-align: left;
}

p.Tt4, li.Tt4, div.Tt4 {
    margin: 1em 0 .5em;
    font-size: 0.9em;
    font-style: italic;
    text-align: left;
}

p.Tx13, li.Tx13, div.Tx13 {
    margin: 0;
    font-size: 1em;
}

p.Tx14, li.Tx14, div.Tx14 {
    margin: 1em 0 0;
    font-size: 1em;
}

p.Tx15, li.Tx15, div.Tx15 {
    margin: 1em 0;
    font-size: 1em;
}

p.Tx16, li.Tx16, div.Tx16 {
    margin: 0 0 1em;
    font-size: 1em;
}

p.Tx110, li.Tx110, div.Tx110 {
    margin: 0 0 1em;
    font-size: 1em;
}

p.Tx120, li.Tx120, div.Tx120 {
    margin: 0 0 1em;
    font-size: 1em;
}

p.Tx130, li.Tx130, div.Tx130 {
    margin: 0 0 1em;
    font-size: 1em;
}

span.underline {
    text-decoration: underline;
}

p.Tx2, li.Tx2, div.Tx2 {
    margin: 0;
    font-size: 1em;
}

p.Tx21, li.Tx21, div.Tx21 {
    margin: 0;
    font-size: 1em;
}

p.Tx22, li.Tx22, div.Tx22 {
    margin: 0;
    font-size: 1em;
}

p.Tx23, li.Tx23, div.Tx23 {
    margin: 0;
    font-size: 1em;
}

p.Tx24, li.Tx24, div.Tx24 {
    margin: 1em 0 0;
    font-size: 1em;
}

p.Tx25, li.Tx25, div.Tx25 {
    margin: 1em 0;
    font-size: 1em;
}

p.Tx26, li.Tx26, div.Tx26 {
    margin: 0 0 1em;
    font-size: 1em;
}

p.Tx1avecTx2, li.Tx1avecTx2, div.Tx1avecTx2 {
    margin: 0;
    font-size: 1em;
}

p.Tx2premiere, li.Tx2premiere, div.Tx2premiere {
    margin: .5em 0;
    font-size: 1em;
}

p.Tx2derniere, li.Tx2derniere, div.Tx2derniere {
    margin: 0 .5em;
    font-size: 1em;
}

p.Tx1fin, li.Tx1fin, div.Tx1fin {
    margin: 0;
    font-size: 1em;
}

p.Tx2fin, li.Tx2fin, div.Tx2fin {
    margin: 0;
    font-size: 1em;
}

p.Tx1proverbe, li.Tx1proverbe, div.Tx1proverbe {
    margin: .25em 0;
    font-size: 1em;
}

p.Tx12proverbe, li.Tx12proverbe, div.Tx12proverbe {
    margin: 0 0 .5em;
    font-size: 1em;
}

p.Tx1finproverbe, li.Tx1finproverbe, div.Tx1finproverbe {
    margin: .25em 0 .5em;
    font-size: 1em;
}

p.Tx3etu, li.Tx3etu, div.Tx3etu {
    margin: 0;
    font-size: 0.8em;
}

p.Tx3stan, li.Tx3stan, div.Tx3stan {
    margin: 0;
    font-size: 0.8em;
}

p.Tx2droite, li.Tx2droite, div.Tx2droite {
    margin: 0;
    text-align: right;
    font-size: 1em;
}

p.Tx2retraitparagraphe, li.Tx2retraitparagraphe, div.Tx2retraitparagraphe {
    margin-left: 1em;
    font-size: 1em;
}

p.Tx26retraitparagraphe, li.Tx26retraitparagraphe, div.Tx26retraitparagraphe {
    margin-bottom: 1em;
    margin-left: 1em;
    font-size: 1em;
}

ol {
    margin-bottom: 0;
}

.Tx0253 { /* Introductions longues dans Schlachter */
    display: none;
}
/* src/common/styles/dialog.css */
.d-mask {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: flex-start;
    z-index: 10;
}

.d-mask.d-blur {
    background: rgb(255 255 255 / .5);
}

.d-resize {
    display: flex;
    width: 100%;
    height: 100%;
}

.night_mode .d-mask.d-blur {
    rgb(0 0 0 / .5);
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { /* chrome >= 76 */
    .d-mask.d-blur {
        background-color: rgb(255 255 255 / .2);
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }
    .night_mode .d-mask.d-blur {
        background-color: rgb(0 0 0 / .2);
    }
}

.d-window {
    display: flex;
    flex-direction: column;
    max-width: 90%;
    margin: auto;
    background: white;
    border: 1px solid black;
    border-radius: .5em;
    max-height: 90%;
    position: relative;
    box-shadow: 0 0 0 1px white;
}

.d-close {
    float: right;
    position: relative;
    top: -.25em;
    right: -.75em;
    height: 1.5em;
    cursor: pointer;
}

.d-close svg {
    fill: #b30130;
}

.d-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.d-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    background: #eeeeee;
    border-radius: .5em .5em 0 0;
    flex-shrink: 0;
}

.d-title > svg {
    margin: .25em;
    fill: #474747;
}

.d-title .d-close {
    position: static;
    padding: .25em;
    order: 1;
}

.d-title span {
    flex-grow: 1;
    text-align: center;
    font-weight: bold;
    margin: .25em 0;
}

.d-content {
    padding: .5em 1em;
    overflow-y: auto;
}

.d-content .narrow {
    max-width: 30em;
}

.d-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 0 .5em .5em;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.d-buttons div {
    border-radius: .25em;
    display: flex;
    align-items: center;
    margin: .125em 0 0 .5em;
    padding: .25em 1em;
    cursor: pointer;
}

.d-buttons .flat_button {
    order: 1;
}

.d-buttons .text_button {
    border: 1px #7f7f7f solid;
}

.d-buttons svg {
    margin-right: .25em;
}

.d-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 420px;
    width: 90%;
    border-bottom: none;
    border-radius: .5em .5em 0 0;
}

.d-bottom .d-title {
    color: white;
    background-color: #b30130;
    border-bottom-color: black;
}

.d-bottom .d-close svg {
    fill: white;
}

.d-bottom .d-content {
    margin-bottom: 1em;
}

.d-popup {
    position: absolute;
    opacity: 0;
    transition: opacity .2s;
}

.d-popup.show {
    opacity: 1;
    transition: none;
}

.d-popup:after {
    content: '';
    position: absolute;
    bottom: -.375em;
    left: var(--arrow-left);
    height: .5em;
    width: .5em;
    background-color: inherit;
    transform: rotate(45deg);
    border-color: inherit;
    border-style: solid;
    border-width: 0 1px 1px 0;
}

.d-popup.bottom:after {
    bottom: auto;
    top: -.375em;
    transform: rotate(225deg);
}

.night_mode .d-window {
    background-color: #222222;
    border-color: #cccccc;
    box-shadow: 0 0 0 1px black;
    color: #ffffff;
}

.night_mode .d-title {
    background-color: #474747;
}

.night_mode .d-close svg {
    fill: #ffffff;
}

.night_mode .d-title > svg {
    fill: #cccccc;
}

.bible-text {
    font-size: calc(var(--text-size) * var(--ios-font-scale, 1));
}

#log {
    position: fixed;
    z-index: 10;
    width: 100%;
    min-height: 2em;
    bottom: 0;
    background: white;
    opacity: .8;
}

#log .close {
    position: absolute;
    bottom: 0;
    right: 0;
}

#log .close svg {
    fill: #b30130;
}

body:not(.night_mode) .d-window .m-item.list .list-header {
    background: linear-gradient(0, #d7d7d7, #ffffff);
}

.night_mode .d-content .links svg {
    fill: white;
}
/* src/common/styles/ds.css */
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-size: calc(16px * (.5 + var(--ios-font-scale, 1) / 2));
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.25;
    --text-size: 16px;
    --notes-fraction: 30%;
}

body, textarea {
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Noto Sans', 'Nimbus Sans', Arial, sans-serif;
    /* https://github.com/system-fonts/modern-font-stacks#neo-grotesque , noto sans ajouté à la main*/
}

.body-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../pictures/manuscrits.png) no-repeat fixed center center;
    background-size: cover;
}

input, button {
    font-size: 1em;
    line-height: inherit;
}

a {
    color: #b30130;
    text-decoration: none;
}

::-webkit-scrollbar {
    height: .25em;
    width: .25em;
    background: lightgray;
}

::-webkit-scrollbar-thumb {
    background: #333;
    -webkit-border-radius: 1ex;
}

.verses_hidden .vnum {
    color: transparent;
    background: transparent;
    min-width: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body.night_mode {
    color: #ffffff;
}

.night_mode .body-bg {
    filter: invert();
}

.night_mode a {
    color: #e4c4cc;
}

.night_mode ::-webkit-scrollbar {
    background: #333;
}

.night_mode ::-webkit-scrollbar-thumb {
    background: lightgray;
}

#bible_content {
    height: 100%;
    margin: 0;
    padding: 0 .5em;
    overflow-y: scroll;
    overflow-x: hidden;
}

#wrapper {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

#main_container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background: rgba(255 255 255 / .25);
}

#sub_container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    height: 100%;
}

#top_header {
    z-index: 10;
}

#text_container {
    position: relative;
    height: 100%;
    overflow: hidden;
    text-align: justify;
    font-size: calc(var(--text-size) * var(--ios-font-scale, 1));
    background: white;
}

#middle_container {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: bottom .5s step-start;
}

#right_container {
    position: absolute;
    top: 100%;
    left: 100%;
    right: 0;
    transition: top .5s, left .5s step-end;
    height: var(--notes-fraction);
    background: white;
}

#notes_scrollable {
    margin: 0 .5em;
    text-align: left;
    font-size: .9em;
}

#notes_separator {
    position: absolute;
    height: 0;
    bottom: 0;
    right: 0;
    width: 0;
    overflow: visible;
    font-size: 1rem;
    background: #e6e6e6;
    transition: bottom .5s, right .5s, transform .5s, width .5s step-end;
}

#notes_separator div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #b30130;
    z-index: 1;
    padding: .25em;
    border-radius: .25em 0 0;
    overflow: visible;
    height: 2em;
    width: 2em;
    cursor: pointer;
    touch-action: none;
    transition: all .5s;
}

#notes_separator svg {
    fill: white;
    width: 2em;
    height: 2em;
    flex-shrink: 0;
}

.notes_open #middle_container {
    bottom: var(--notes-fraction);
    padding-bottom: .375em;
    transition: bottom .5s step-end;
}

.notes_open #right_container {
    top: calc(100% - var(--notes-fraction));
    left: 0;
    height: var(--notes-fraction);
    overflow-y: scroll;
    transition: top .5s;
}

.notes_open #notes_separator {
    bottom: var(--notes-fraction);
    height: .75em;
    width: 100%;
    transform: translate(0, 50%);
    transition: bottom .5s, right .5s, transform .5s;
}

.notes_open #notes_separator div {
    height: 1em;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    padding: 0 1em;
    border-radius: .25em;
}

.dragging #middle_container, .dragging #right_container, .dragging #notes_separator {
    transition-duration: 0s !important;
}

.left_slide {
    transform: translate(-28em);
}

.copyright {
    text-align: center;
    margin: 1em 0 2em;
    font-size: .875em;
}

.scroll-indicator {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5em;
    background: rgb(255 255 255 / .5);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    align-items: center;
    opacity: .5;
    transition: left .1s, right .1s;
}

.scroll-indicator.left {
    left: -5em;
    border-right: 1px solid #333333;
}

.scroll-indicator.right {
    right: -5em;
    border-left: 1px solid #333333;
}

.scroll-indicator.active {
    opacity: 1;
}

.scroll-indicator svg {
    fill: #333333;
    height: 5em;
    width: 5em;
}

.night_mode #main_container {
    background: rgba(34 34 34 / .25);
}

.night_mode #notes_separator {
    background-color: #1a1a1a;
}

.night_mode #right_container, .night_mode #text_container {
    background: #222222;
}

@supports selector(:has(*)) { /* chrome >= 105, ios >= 15.4 */
    #right_container, #text_container {
        background-color: rgba(255 255 255 / 0);
    }

    #text_container {
        transition: background-color .5s;
    }

    #right_container {
        transition: background-color .5s, top .5s, left .5s step-end;
    }

    .notes_open #right_container {
        transition: background-color .5s, top .5s;
    }

    .night_mode #right_container, .night_mode #text_container {
        background-color: rgba(36 36 36 / 0);
    }

    #right_container:has(#notesrefs_div:not(:empty)), #text_container:has(#sub_content:not(:empty)) {
        background-color: white;
    }

    .night_mode #right_container:has(#notesrefs_div:not(:empty)), .night_mode #text_container:has(#sub_content:not(:empty)) {
        background-color: #222222;
    }
}

.night_mode .scroll-indicator {
    background: rgb(0 0 0 / .5);
    border-color: white;
}

.night_mode .scroll-indicator svg {
    fill: white;
}
/* src/common/styles/ds_large.css */
@media (min-width : 1024px) {
    #sub_container {
        border-left: 1px solid #d4d4d4;
    }

    .night_mode #sub_container {
        border-color: #333333;
    }
}
/* src/common/styles/ds_natels.css */
@media (max-width : 599px) {
    #tools_menu {
        display: none;
    }
}
/* src/common/styles/ds_tablets.css */
@media screen and (min-width: 600px) and (max-width: 767px) {
    #tools_menu {
        display: none;
    }
}
/* src/common/styles/login.css */
.mainH2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: .5em;
}

#main {
    height: 100%;
    margin: 0;
    overflow-y: auto;
    hyphens: none;
    position: relative;
}

.area {
    margin: 0 auto;
    max-width: 420px;
    padding: 1em;
    background-color: rgb(255 255 255 / .75);
}

.app_logo {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-decoration: none;
    font-weight: bold;
    color: #b30130;
}

.app_logo p {
    font-size: 1.75em;
}

.app_logo img{
    width: 5.5em;
    height: 5.5em;
}

.input_box {
    border: 1px solid #cccccc;
    height: 1.25em;
    padding: .25em .5em;
    border-radius: .25em;
}

.input_box:focus {
    border: 1px solid #b30130;
}

#dyna_div form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.float-container {
    overflow: auto;
}

.faded {
    color: #666;
    text-align: justify;
}

.text-center {
    text-align: center;
}

.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .5em;
    align-items: center;
}

.links a {
    display: flex;
    align-items: center;
    gap: .5em;
}

.smaller {
    font-size: .875em;
}

.mb-1 {
    margin-bottom: 1em;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flat_button {
    display: block;
    background-color: #b30130;
    color: white;
    cursor: pointer;
    padding: .25em 1em;
    text-decoration: none;
    font-weight: normal;
    text-align: center;
    border-radius: .25em;
    border: none;
}

.flat_button svg {
    fill: white;
}

.night_mode .flat_button, .flat_button.secondary {
    background-color: #e6e6e6;
    color: #b30130;
}

.night_mode .flat_button svg {
    fill: #b30130;
}

.text_button {
    color: #b30130;;
}

.text_button svg {
    display: none;
}

.night_mode .text_button {
    color: #e4c4cc;
}

.msg {
    padding: .5em;
    margin-bottom: 1em;
    background-color: #ffffdd;
}

.msg.error {
    color: #b30130;
    background-color: #fce9ee;
}

.msg:empty {
    display: none;
}

input[type="submit"] {
    -webkit-appearance: none;
}

hr {
    background-color: #b30130;
    border: medium none;
    height: 1px;
    margin: 1em 0;
}

.pwd_wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 1em;
}

.pwd_wrapper input{
    flex-grow: 1;
}

.pwd_wrapper input + div {
    position: absolute;
    right: .25em;
    margin-top: .25em;
    cursor: pointer;
}

.pwd_wrapper svg {
    fill: #474747;
}

.translate {
    display: block;
    float: right;
    cursor: pointer;
}

.legacy .translate {
    display: none;
}
/* src/common/styles/menu.css */
.m-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28em; /* Chrome < 79 */
    left: calc(max(-90%, -28em));
    width: 80vw;
    max-width: 28em;
    overflow: hidden;
    transition: left .5s;
    background-color: #383838;
    color: #fff;
}

.menu_open .m-wrapper {
    left: 0;
}

.m-card {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 .5em;
    background-color: #383838;
}

.m-center {
    flex: auto 1 1;
    overflow-y: auto;
}

.m-bottom {
    border-top: solid 1px rgb(20 20 20 / .4);
    transition: height .5s;
}

.m-card[data-panel=plans] .m-bottom {
    overflow-y: auto;
}

.m-card[data-panel=plans] .m-center:has(+ .m-bottom .list-header.expanded) {
    height: 0;
}

.m-bottom .m-toggle {
    display:none;
    position: relative;
    justify-content: center;
}
.m-bottom .m-toggle svg {
    margin: 0;
}

.m-bottom.over-sized {
    height: 1.5em;
}

.m-bottom.over-sized .m-toggle {
    display: flex;
}

.m-bottom.over-sized.open {
    height: auto;
}

.m-item {
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgb(20 20 20 / .4);
    cursor: pointer;
    min-height: calc(2.5em * var(--system-font-scale, 1));
}

.m-item.m-back {
    background: linear-gradient(0, black, #383838);
    margin: 0 -.5em;
    padding: 0 .5em;
}

.m-item span {
    margin: .25em 0;
}

.m-item.text {
    padding: .25em .5em;
    display: block;
}

.m-item.text p:last-child {
    margin-bottom: 0;
}

.m-results .m-item.text {
    padding-right: 2em;
}

.m-item.list {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
}

.m-item.list .list-header {
    background: linear-gradient(0, #333, #474747);
}

.m-results > .m-item.list > .list-header {
    background: linear-gradient(0, #333, #1f1f1f);
}

.m-item.list .list-group {
    flex-direction: column;
    background: #474747;
}

.m-item.list .list-item {
    position: relative;
}

.m-item.list .list-header ~ .list-item {
    display: none;
}

.m-item.list .list-header.expanded ~ .list-item {
    display: flex;
}

.m-item.list .list-header.expanded > svg {
    transform: rotate(90deg);
}

.m-item.list .m-item sup {
    margin: 0 .25em .5em;
}

.m-item.list .list-header.expanded .action_btn {
    opacity: 1;
    visibility: visible;
}

.m-item.list .list-item .text {
    overflow: hidden;
    max-height: calc(2.5em * var(--system-font-scale, 1));
    margin: .375em .5em .375em 1em;
    position: relative;
}

.m-item.list .list-item .text:not(:empty) {
    flex-grow: 1;
}

.m-item.list .list-item .text::after {
    content: ' ';
    height: calc(1.25em * var(--system-font-scale, 1));
    width: 6em;
    position: absolute;
    top: calc(1.25em * var(--system-font-scale, 1));
    right: 0;
    background: linear-gradient(-90deg, #474747, transparent);
}

.m-item.list .list-item .ref {
    white-space: nowrap;
    font-style: italic;
    font-size: .875em;
}

.m-item.list .full-date {
    display: none;
    position: absolute;
    bottom: 0;
    right: 2.5em;
    background: #555555;
    padding: .25em;
    border-radius: .5em;
}

.m-item.list .full-date.show {
    display: block;
}

.m-item .action_btn {
    margin-left: auto;
    display: flex;
}

[data-panel=plans] .m-item .action_btn, [data-panel=history] .m-item .action_btn {
    opacity: 0;
    visibility: hidden;
}

[data-panel=plans] .m-item.read .action_btn, [data-panel=history] .m-item.active .action_btn {
    opacity: 1;
    visibility: visible;
}

[data-panel=plans] .list-item svg, [data-panel=history] .list-item svg {
    fill: #41ce44;
}

.radio-group label {
    cursor: pointer;
    min-height: 2em;
    display: flex;
    align-items: center;
    padding: 0 .5em;
}

.m-item.radio {
    cursor: auto;
}

.m-item.radio > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.m-item.radio .radio-group {
    display: flex;
    gap: .5em;
    padding: .25em 0;
    flex-wrap: wrap;
}

.m-item.radio .radio-title {
    padding: 0.25em 0.5em 0 0;
}

.m-item.radio .radio-group label {
    border-radius: .5em;
    color: #cccccc;
    background: #474747;
}

.m-item.radio label:has(input:checked) { /* :has chrome >= 105, iOS >= 15.4 */
    color: inherit;
}

input[type=radio], .m-item.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
}

input[type=radio] + span, .m-item.switch span {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    background-color: #ccc;
    transition: transform .5s;
    border-radius: .625em;
    border: .0625em solid #ccc;
}

input[type=radio] + span:before, .m-item.switch span:before {
    position: absolute;
    content: "";
    height: .5em;
    width: .5em;
    left: .25em;
    bottom: .25em;
    background-color: white;
    transition: transform .5s, background-color .5s;
    border-radius: .5em;
}

input[type=radio]:checked + span, .m-item.switch input:checked + span {
    background-color: #b30130;
}

.m-item.radio.radio-group { /* radio vertical */
    flex-direction: column;
    align-items: flex-start;
}

.m-item.switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.m-item.switch div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-item.switch span {
    width: 2em;
}

.m-item.switch span:before {
    height: .75em;
    width: .75em;
    left: .125em;
    bottom: .125em;
}

.m-item.switch input:checked + span:before {
    transform: translateX(1em);
}

.m-item.switch input[readonly] + span:before {
    background-color: #ccc;
}

.m-item.switch .auto {
    display: none;
}

.m-item.switch input[readonly] ~ div .auto {
    display: inline;
}

/* animation */
.m-wrapper .m-card.slide-in {
    animation: .5s slide-in;
}

.m-wrapper .m-card.slide-out {
    transform: translate(-28em);
    animation: .5s slide-out;
}

@keyframes slide-in {
    from {
        transform: translate(-28em);
    }
    to {
        transform: translate(0);
    }
}
@keyframes slide-out {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(-28em);
    }
}

.color-square {
    width: 1em;
    height: 1em;
    margin: .5em;
    border-radius: .125em;
}

.m-wrapper a:link, .m-wrapper a:visited, .m-wrapper a:active {
    color: white;
}

.m-wrapper svg {
    width: 1.5em;
    height: 1.5em;
    margin: .5em;
    fill: #cccccc;
    flex-shrink: 0;
}

.is_guest .guest_disabled {
    color: #888888;
}

.input_button {
    border: none;
}

#cnx_label {
    color: #b30130;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cnx_status {
    display: block;
    font-size: 0.7em;
}

#left_container.is_open {
    z-index: 2;
}

#left_container.is_open, #left_container .m-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#left_container .m-mask {
    content: "";
    opacity: 0;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: opacity .5s;
}

.menu_open #left_container .m-mask {
    opacity: 1;
}

.night_mode #cnx_label {
    color: #e4849c;
}
/* src/common/styles/navigator.css */
.nav {
    position: absolute;
    z-index: 2;
    text-align: center;
    left: 0;
    right: 0;
    top: -100vh;
    bottom: calc(100vh - 2.5em);
    transition: top .5s, bottom .5s;
}

.nav.is_open {
    top: 2.5em;
    bottom: 0;
}

.nav .m-mask {
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute !important;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: opacity .5s;
}

.nav.is_open .m-mask {
    opacity: 1;
}

.nav .m-content {
    position: relative;
    background: #333;
    padding: 1em;
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: scroll;
}

a.book_button {
    display: inline-block;
    min-width: 2.5em;
    margin: 0 .125em;
    padding: .125em;
    color: #e2bdc7;
    border-radius: .25em;
    border: 1px solid #6a6a6a;
}

a.cancel_button {
    background-color: #b30130;
}

.book_label {
    display: table-cell;
    vertical-align: middle;
    height: 2.5em;
    min-width: 2em;
    padding: 0 .25em;
}

.book_label svg {
    display: block;
    margin: auto;
    fill: white;
}

a.header {
    background-color: #e2bdc7;
    color: #000;
}

a.book_button.active {
    background-color: #b30130;
    color: white;
}
/* src/common/styles/notes.css */
.bookmark .vnum, .note .vnum, .bookmark + .vnum, .note + .vnum {
    padding-right: 1.3334em;
}

.bookmark .vnum:before, .note .vnum:after, .bookmark + .vnum:before, .note + .vnum:after {
    content: ' ';
    height: 1.3334em;
    width: 1.3334em;
    display: inline-block;
    position: absolute;
    right: 0;
    top: -.25em;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: #b30130;
}

.note .vnum:after, .note + .vnum:after {
    mask-image: var(--note-svg);
    -webkit-mask-image: var(--note-svg);
}

.bookmark .vnum:before, .bookmark + .vnum:before {
    mask-image: var(--bookmark-svg);
    -webkit-mask-image: var(--bookmark-svg);
}

.note.bookmark .vnum, .note.bookmark + .vnum {
    padding-right: 2.6667em;
}

.note.bookmark .vnum:after, .note.bookmark + .vnum:after {
    right: 1.334em;
}

.verses_hidden .bookmark .vnum, .verses_hidden .note .vnum, .verses_hidden .bookmark + .vnum, .verses_hidden .note + .vnum {
    height: 1.3334em;
}

.verses_hidden .bookmark .vnum:before, .verses_hidden .note .vnum:after, .verses_hidden .bookmark + .vnum:before, .verses_hidden .note + .vnum:after {
    top: 0;
}

.night_mode.verses_hidden .bookmark .vnum:before, .night_mode.verses_hidden .note .vnum:after, .night_mode.verses_hidden .bookmark + .vnum:before, .night_mode.verses_hidden .note + .vnum:after {
    background-color: #e4849c;
}

textarea#NoteArea {
    border: 1px solid #ccc;
    font-size: calc(var(--text-size) * var(--ios-font-scale, 1));
    padding: 0.5em;
    height: 10em;
}

.night_mode textarea#NoteArea {
    color: white;
    background: #333;
    border-color: #d4d4d4;
}
/* src/common/styles/popups.css */
.toolbox_mini .yellow {
    background: rgb(223 191 0 / .3);
}

.toolbox_mini .green {
    background: rgb(65 206 68 / .3);
}

.toolbox_mini .violet {
    background: rgb(131 69 209 / .3);
}

.toolbox_mini .blue {
    background: rgb(51 174 214 / .3);
}

.toolbox_mini .red {
    background: rgb(223 48 71 / .3);
}

.toolbox_mini .orange {
    background: rgb(222 118 44 / .3);
}

.toolbox_mini .pink {
    background: rgb(224 133 209 / .3);
}

span.yellow {
    background: rgb(223 191 0 / .5);
}

span.green {
    background: rgb(65 206 68 / .5);
}

span.violet {
    background: rgb(131 69 209 / .5);
}

span.blue {
    background: rgb(51 174 214 / .5);
}

span.red {
    background: rgb(223 48 71 / .5);
}

span.orange {
    background: rgb(222 118 44 / .5);
}

span.pink {
    background: rgb(224 133 209 / .5);
}

span.yellow, span.green, span.violet, span.blue, span.red, span.orange, span.pink {
    padding-top: .125em;
}

.color-square.yellow {
    background: rgb(223 191 0);
}

.color-square.green {
    background: rgb(65 206 68);
}

.color-square.violet {
    background: rgb(131 69 209);
}

.color-square.blue {
    background: rgb(51 174 214);
}

.color-square.red {
    background: rgb(223 48 71);
}

.color-square.orange {
    background: rgb(222 118 44);
}

.color-square.pink {
    background: rgb(224 133 209);
}

.toolbox_mini .white svg {
    fill: #cccccc;
}

.toolbox_mini a.yellow svg, svg .yellow {
    fill: rgb(223 191 0); /* #dfbf00 HSV 51.4 100 87.5 HSL 100 44 HWB 0 13 */
}

.toolbox_mini a.green svg, svg .green {
    fill: rgb(65 206 68); /* #41ce44 HSV 121.3 68.4 80.8 HSL 59 53 HWB 25 19 */
}

.toolbox_mini a.violet svg, svg .violet {
    fill: rgb(131 69 209); /* #8345d1 HSV 266.6 67 82 HSL 60 55 HWB 27 18 */
}

.toolbox_mini a.blue svg, svg .blue {
    fill: rgb(51 174 214); /* #33aed6 HSV 194.7 76.2 83.9 HSL 67 52 HWB 20 16 */
}

.toolbox_mini a.red svg, svg .red {
    fill: rgb(223 48 71); /* #df3047 HSV 352 73 53 */
}

.toolbox_mini a.orange svg, svg .orange {
    fill: rgb(222 118 44); /* #8345d1 HSV 24.9 80.2 87.1 */
}

.toolbox_mini a.pink svg, svg .pink {
    fill: rgb(224 133 209); /* #e085d1 HSV 310 60 70 */
}

.toolbox_mini .sep {
    border-bottom: 1px solid darkgray;
}

.toolbox_mini .close svg {
    fill: #b30130;
}

#PopOut_container {
    opacity: 0;
    height: 2.25em;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 1em;
    top: .5em;
    width: 2.25em;
    z-index: 1;
    font-size: 1rem;
    transition-property: opacity;
    transition-duration: .5s;
}

#PopOut_container.PopOutVisible {
    opacity: 1;
}

#PopOutButton {
    width: 2.125em;
    height: 2.125em;
    border: 2px solid #b30130;
    border-radius: .25em;
    background: white;
    position: relative;
    margin-bottom: 1px;
    box-shadow: 0 0 0 1px white;
}

.PopText {
    vertical-align: middle;
    text-align: center;
    line-height: 2.25em;
    text-decoration: none;
    font-weight: bold;
}

.toolbox_mini {
    position: relative;
    width: 2.25em;
    background: white;
    border: 1px solid darkgray;
    border-radius: .25em;
    transition-property: margin, opacity;
    transition-duration: .5s;
    margin-top: -24em;
    box-shadow: 0 0 0 1px white;
    opacity: 0;
}

.toolbox_mini.submenu {
    position: absolute;
    left: -2.5em;
}

.toolbox_mini.submenu li:first-child {
    border-radius: .125em .125em 0 0;
}

.toolbox_mini.submenu li:last-child {
    border-radius: 0 0 .125em .125em;
}

.toolbox_mini.open {
    margin-top: 0;
    opacity: 1;
}

.toolbox_mini ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.toolbox_mini li {
    display: block;
    margin: 0;
    padding: 0;
}

.toolbox_mini a {
    display: block;
    cursor: pointer;
    padding: .125em;
    width: 2em;
    height: 2em;
}

.toolbox_mini svg {
    height: 2em;
    width: 2em;
    fill: #474747;
}

.night_mode .toolbox_mini svg {
    fill: #eeeeee;
}

.night_mode .toolbox_mini .white {
    background-color: inherit;
}

.night_mode svg .violet {
    fill: rgb(223 191 0); /* yellow */
}

.night_mode #PopOutButton a {
    color: white;
}

.night_mode #PopOutButton, .night_mode .toolbox_mini {
    box-shadow: 0 0 0 1px black;
    background-color: #222222;
}
/* src/common/styles/reduced_height.css */
@media (orientation: landscape) and (max-height: 465px) {
    #PopOut_container {
        transform: rotate(90deg);
    }

    #PopOutButton {
        transform: rotate(-90deg);
    }

    .toolbox_mini svg {
        transform: rotate(-90deg);
    }

    .toolbox_mini .close svg {
        transform: initial;
    }

    .toolbox_mini.submenu {
        left: 2.25em;
    }
}
/* src/common/styles/search.css */
.search_input {
    margin: .25em -.25em;
    padding: .25em;
    border-radius: .375em;
    border: none;
    background-image: linear-gradient(to bottom, #fff 0, #dfdfdf 100%);
}

.m-top:has(.search_input) {
    z-index: 1;
}

.search_input > div {
    height: 2em;
    border: solid 1px #ccc;
    background: #fff;
    border-radius: .25em;
    box-shadow: 0 1px 1px #fff
}
.search_input input {
    border: 0;
    padding: 1px .5em;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    height: 2em;
}

.search_input .icons {
    display: flex;
    position: absolute;
    right: .25em;
    top: .25em;
}

.search_input .icons svg {
    fill: #222222;
}

.search_input .icons svg:first-child {
    display: block;
}

.search_input .icons svg:last-child {
    display: none;
}

.search_input .icons.m-close svg:first-child {
    display: none;
}

.search_input .icons.m-close svg:last-child {
    display: block;
}

.m-search {
    position: absolute;
    background: rgba(51 51 51/.5);
    top: 3.25em;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(-100vh);
    transition: opacity .5s, transform .5s;
    overflow-y: auto;
    opacity: 0;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.m-search.show {
    transform: translateY(0);
    opacity: 1;
}

.m-results {
    overflow: auto;
    background-color: #333;
    position: relative;
}

.m-item.list .list-header + .items {
    display: none;
}

.m-item.list .list-header.expanded + .items {
    display: flex;
}

.m-item.list .items {
    flex-direction: column;
}

.m-item.list .items .m-item {
    position: relative;
}

.m-item.list .items .m-item .text {
    padding: .25em .5em;
}

.m-item.list .items .m-item .ref {
    font-size: .875em;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25em .5em;
    background: #222;
    border-top-left-radius: .25em;
}

.m-results .sh {
    margin: 0 .5em;
}

.spinner-before:before {
    width: 3em;
    height: 3em;
    display: block;
    position: absolute;
    top: calc(50% - 2em);
    left: calc(50% - 2em);
    animation: spin 1s linear infinite;
}

.spinner-before:before, .night_mode #text_container.spinner-before:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23fff"><path d="M480-71.87q-83.91 0-158.34-32.12-74.43-32.11-129.99-87.68-55.57-55.56-87.68-129.99Q71.87-396.09 71.87-480q0-84.71 32.11-158.7 32.12-73.99 87.68-129.61 55.56-55.62 129.99-87.72 74.44-32.1 158.35-32.1 19.15 0 32.33 13.17 13.17 13.18 13.17 32.33t-13.17 32.33q-13.18 13.17-32.33 13.17-131.81 0-224.47 92.66T162.87-480q0 131.8 92.66 224.47 92.66 92.66 224.47 92.66 131.8 0 224.47-92.66 92.66-92.66 92.66-224.47 0-19.15 13.17-32.33 13.18-13.17 32.33-13.17t32.33 13.17q13.17 13.18 13.17 32.33 0 83.91-32.11 158.35-32.12 74.44-87.68 130.01-55.56 55.57-129.58 87.67-74.02 32.1-158.76 32.1Z"/></svg>');
}

#text_container.spinner-before:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23000"><path d="M480-71.87q-83.91 0-158.34-32.12-74.43-32.11-129.99-87.68-55.57-55.56-87.68-129.99Q71.87-396.09 71.87-480q0-84.71 32.11-158.7 32.12-73.99 87.68-129.61 55.56-55.62 129.99-87.72 74.44-32.1 158.35-32.1 19.15 0 32.33 13.17 13.17 13.18 13.17 32.33t-13.17 32.33q-13.18 13.17-32.33 13.17-131.81 0-224.47 92.66T162.87-480q0 131.8 92.66 224.47 92.66 92.66 224.47 92.66 131.8 0 224.47-92.66 92.66-92.66 92.66-224.47 0-19.15 13.17-32.33 13.18-13.17 32.33-13.17t32.33 13.17q13.17 13.18 13.17 32.33 0 83.91-32.11 158.35-32.12 74.44-87.68 130.01-55.56 55.57-129.58 87.67-74.02 32.1-158.76 32.1Z"/></svg>');
}

@keyframes spin {
    100% {
        transform:rotate(360deg);
    }
}
/* src/common/styles/top.css */
.fixed_top_bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 2.5em;
    background: #b30130;
    z-index: 1;
}

.top_btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    color: #ffffff;
}

.top_btn svg {
    fill: #ffffff;
}

.top_btn_3d {
    border: 1px solid #62001a;
    margin: .125em .25em;
    border-radius: .25em;
    background: rgb(0 0 0 / .2);
    justify-content: center;
}

.top_btn_3d svg {
    width: 2em;
    height: 2em;
}

.top_btn .close_menu {
    display: none;
}

.top_btn .open_menu {
    display: flex;
}

.btn_menu, .btn_history {
    width: 3.5em;
}

.flex-filler {
    flex-grow: 1;
}

.menu_open .top_btn .close_menu {
    display: flex;
}

.menu_open .top_btn .open_menu {
    display: none;
}

.btn_nav {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.btn_nav > div {
    display: flex;
    align-items: center;
    min-width: 3.5em;
}

.btn_nav span {
    margin-left: 1em;
    margin-right: .25em;
}

.btn_chapter {
    background: #cccccc;
    color: #b30130;
}

.btn_chapter svg{
    fill: #b30130;
}

.btn_history {
    padding: 0 .25em;
    cursor: default;
    align-items: stretch;
}

.btn_history div {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.btn_history div.inactive {
    cursor: default;
    pointer-events: none;
}

.btn_history div.inactive svg {
    fill: #888888;
}

.btn_chapter, .btn_history div:last-child {
    border-left: 1px solid #62001a;
}
/* src/common/styles/z_landscape.css */
@media (orientation:landscape) {
    #middle_container {
        transition: right .5s step-start;
    }

    #right_container {
        top: 0;
        width: var(--notes-fraction);
        height: 100%;
        transition: top .5s step-end, left .5s;
    }

    #notes_scrollable {
        margin-left: 1em;
    }

    #notes_separator {
        transition: bottom .5s, right .5s, transform .5s, height .5s step-end;
    }

    #notes_separator svg {
        transform: rotate(90deg);
    }

    .notes_open #middle_container {
        bottom: 0;
        right:  var(--notes-fraction);
        padding-bottom: 0;
        padding-right: .375em;
        transition: right .5s step-end;
    }

    .notes_open #right_container {
        top: 0;
        left: calc(100% - var(--notes-fraction));
        height: 100%;
        transition: left .5s;
    }

    @supports selector(:has(*)) {
        /* chrome >= 105, ios >= 15.4 */
        #right_container {
            transition: background-color .5s, top .5s step-end, left .5s;
        }
        .notes_open #right_container {
            transition: background-color .5s, left .5s;
        }
    }

    .notes_open #notes_separator {
        bottom: 0;
        right: var(--notes-fraction);
        height: 100%;
        width: .75em;
        transform: translate(50%, 0);
        transition: bottom .5s, right .5s, transform .5s;
    }

    .notes_open #notes_separator div {
        width: 1em;
        height: initial;
        padding: 1em 0;
    }
}