/* FL_Flutter ColorConstants */
:root {
    /* White */
    --fl-pure-white: #FFFFFF;

    /* Black */
    --fl-pure-black: #000000;
    --fl-darker-black: #222222;
    --fl-midnight-black: #222336;
    --fl-lighter-midnight-black: #483F69;

    /* Grey */
    --fl-gunmetal-grey: #483F69;
    --fl-medium-grey: #696969;
    --fl-very-soft-grey: #AAAAAA;
    --fl-soft-grey: #B8B8B8;
    --fl-light-grey: #DCDCDC;
    --fl-fade-soft-grey: #E8E8E8;
    --fl-fade-grey: #EEF1F6;

    /* Purple */
    --fl-darker-purple: #13121f;
    --fl-dark-purple: #27255C;
    --fl-main-purple: #5A42A0;
    --fl-medium-purple: #4C48B0;
    --fl-bright-purple: #842AF1;
    --fl-dim-purple: #A190D6;
    --fl-dimmer-purple: #8683AF;
    --fl-light-purple: #CAC0EB;
    --fl-mid-purple: #CDC4FF;
    --fl-fade-purple: #E2DCFC;

    /* Pink */
    --fl-pictorial-pink: #C40E5D;
    --fl-vibrance-pink: #FA2A78;
    --fl-dull-pink: #E85C90;
    --fl-soft-pink: #EA98DA;
    --fl-pale-pink: #F7AEF8;
    --fl-fade-pink: #FFC4F4;
    --fl-light-pink: #F8A6CF;
    --fl-light-coral-pink: #FAB9B9;
    --fl-apricot-pink: #FDC8B7;

    /* Red */
    --fl-medium-red: #BD3845;
    --fl-crimson-red: #DC143C;
    --fl-bright-red: #FF4242;
    --fl-pastel-red: #F8635E;

    /* Orange */
    --fl-normal-orange: #EC482A;
    --fl-bright-orange: #FF6F3B;
    --fl-light-orange: #FFCA9A;
    --fl-dim-orange: #C18A71;

    /* Yellow */
    --fl-dirty-yellow: #4F3500;
    --fl-dim-yellow: #A28D00;
    --fl-dull-yellow: #CDAC00;
    --fl-normal-yellow: #FFAB00;
    --fl-bright-yellow: #FFED00;
    --fl-lemon-grass-yellow: #E4FE45;

    /* Green */
    --fl-dark-green: #082B1C;
    --fl-dim-green: #0D5C63;
    --fl-medium-green: #3EAC7F;
    --fl-lighter-medium-green: #82C270;
    --fl-cyan-green: #00C9B7;
    --fl-bright-green: #6EF195;
    --fl-light-green: #6DFCBE;
    --fl-soft-green: #96FBC4;

    /* Blue */
    --fl-dirty-blue: #2D3D52;
    --fl-dirtier-blue: #315079;
    --fl-cobalt-blue: #382380;
    --fl-fade-blue: #A9B5EA;
    --fl-jean-blue: #BACEFF;
    --fl-pale-blue: #90E0EF;
    --fl-soften-blue: #D8F1FF;
    --fl-soft-blue: #AEDCFB;
    --fl-light-blue: #A0D9F9;
    --fl-mild-blue: #8EC5FC;
    --fl-normal-blue: #3598DC;
    --fl-darker-blue: #007ADF;
    --fl-dim-blue: #6993C9;

    /* Gradient */
    --fl-gradient-yellow-pink: linear-gradient(#FFEB3B, #F254A8);
    --fl-gradient-light-yellow-amber: linear-gradient(#FFF3B8, #FFD36E);
    --fl-gradient-light-orange-orange: linear-gradient(#FFD8B0, #FFA65C);
    --fl-gradient-light-purple-purple: linear-gradient(#D7B8FE, #AF98FE);
    --fl-gradient-light-green-cyan: linear-gradient(#9BDEB7, #56D1B7);
    --fl-gradient-dark-purple-main-purple: linear-gradient(#27255C, #5A42A0);
    --fl-gradient-main-purple-dark-purple: linear-gradient(#5A42A0, #27255C);
    --fl-gradient-light-blue-light-purple: linear-gradient(#8EC5FC, #E0C3FC);
    --fl-gradient-blue-green: linear-gradient(#007ADF, #00ECBC);
    --fl-gradient-purple-blue: linear-gradient(#B429F9, #26C5F3);
    --fl-gradient-purple-white: linear-gradient(#CAC0EB, #FFFFFF);
    --fl-gradient-white-purple: linear-gradient(#FFFFFF, #CAC0EB);
}

/* top nav bar */
.header .header-top,
.header-mobile {
    background-color: var(--fl-darker-purple);
}

#kt_subheader,
#kt_footer {
    background-color: var(--fl-midnight-black);
}

#kt_subheader {
    margin-bottom: 1.25rem;
}

#kt_subheader .breadcrumb-item:hover a,
#kt_subheader .breadcrumb-item a:focus {
    color: var(--fl-pure-white) !important;
}

/* quick user panel */
#kt_quick_user {
    background-color: var(--fl-midnight-black);
}

#kt_quick_user h3,
#kt_quick_user .text-dark-75,
#kt_quick_user .navi-text {
    color: var(--fl-pure-white) !important;
}

#kt_quick_user .text-primary {
    color: var(--fl-dim-purple) !important;
}

#kt_quick_user .navi-hover .navi-link:hover {
    background-color: var(--fl-lighter-midnight-black);
}

#kt_quick_user .separator {
    border-bottom-color: var(--fl-lighter-midnight-black);
}

#kt_quick_user_close {
    background-color: var(--fl-main-purple);
    border-color: var(--fl-main-purple);
}

#kt_quick_user_close i {
    color: var(--fl-dark-purple) !important;
}

#kt_quick_user_close:hover,
#kt_quick_user_close:focus,
#kt_quick_user_close:active {
    background-color: var(--fl-dark-purple) !important;
    border-color: var(--fl-dark-purple) !important;
}

#kt_quick_user_close:hover i,
#kt_quick_user_close:focus i,
#kt_quick_user_close:active i {
    color: var(--fl-pure-white) !important;
}

/* theme primary -> FL main purple */
.btn.btn-primary {
    background-color: var(--fl-main-purple);
    border-color: var(--fl-main-purple);
}

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text),
.btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text) {
    background-color: var(--fl-dark-purple);
    border-color: var(--fl-dark-purple);
}

/* table action buttons: stronger tint than the theme's 0.1 */
.btn.btn-transparent-primary {
    background-color: rgba(52, 69, 229, 0.4);
}

.btn.btn-transparent-success {
    background-color: rgba(27, 197, 189, 0.4);
}

.btn.btn-transparent-warning {
    background-color: rgba(255, 168, 0, 0.4);
}

.btn.btn-transparent-danger {
    background-color: rgba(246, 78, 96, 0.4);
}

.table .btn.btn-transparent-warning {
    color: #B87900;
}

.table .btn.btn-transparent-success {
    color: #0E8F88;
}

.table .btn.btn-clean.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.text-primary,
a.text-hover-primary:hover {
    color: var(--fl-main-purple) !important;
}

.checkbox > input:checked ~ span {
    background-color: var(--fl-main-purple);
}

.form-control:focus {
    border-color: var(--fl-dim-purple);
}

/* rounded corners need separate borders, so cells only draw right and bottom */
.table.table-bordered {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
}

.table.table-bordered th,
.table.table-bordered td {
    border-width: 0 1px 1px 0;
}

.table.table-bordered tr > :last-child {
    border-right-width: 0;
}

.table.table-bordered > :last-child > tr:last-child > * {
    border-bottom-width: 0;
}

.table.table-bordered > thead > tr:first-child > :first-child,
.table.table-bordered > tbody:first-child > tr:first-child > :first-child {
    border-top-left-radius: 9px;
}

.table.table-bordered > thead > tr:first-child > :last-child,
.table.table-bordered > tbody:first-child > tr:first-child > :last-child {
    border-top-right-radius: 9px;
}

.table.table-bordered > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: 9px;
}

.table.table-bordered > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: 9px;
}

/* grid headers */
.table .thead-light th {
    background-color: var(--fl-dark-purple);
    border-color: var(--fl-dark-purple);
    color: #fff;
}

.table .thead-light a {
    color: #fff;
}

.pagination .page-item.active .page-link {
    background-color: var(--fl-main-purple);
    border-color: var(--fl-main-purple);
}

.user-photo-standard {
    background-size: cover;
    background-position: center;
}

.password-toggle {
    cursor: pointer;
}

/* gridview sort icons */
a.asc:after, a.desc:after {
    display: inline-block;
    width: auto;
    height: auto;
    border: 0;
    margin-left: 6px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.85em;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
}

a.asc:after {
    content: '\f0d8';
}

a.desc:after {
    content: '\f0d7';
}

/* select2 */
.select2-container {
    display: block;
}
.select2-selection--single {
    padding: 0.65rem 1.5rem 0.375rem 0.5rem !important;
    height: calc(1.5em + 1.3rem + 2px) !important;
}

/* datatables sort icons */
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order {
    font-family: 'Font Awesome 5 Free';
    margin-left: 5px;
}

/* Order ASC */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    content: "\f077"
}

/* Order DESC */
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    content: "\f078";
}

/* Orderable ASC and DESC */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.2;
    font-weight: 600;
    font-size: 1rem;
}

/* Order ASC Focused */
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    opacity: 1.0;
    line-height: 0;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after {
    opacity: 0.0;
    display: none;
}

/* Order DESC Focused */
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before {
    opacity: 0.0;
    display: none;
}

table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1.0;
    line-height: 0;
}

table.dataTable thead > tr > th div.dt-column-header, table.dataTable thead > tr > th div.dt-column-footer, table.dataTable thead > tr > td div.dt-column-header, table.dataTable thead > tr > td div.dt-column-footer, table.dataTable tfoot > tr > th div.dt-column-header, table.dataTable tfoot > tr > th div.dt-column-footer, table.dataTable tfoot > tr > td div.dt-column-header, table.dataTable tfoot > tr > td div.dt-column-footer {
    display: block;
}

div.datatable thead th a[data-sort]:not(.asc):not(.desc)::after {
    content: '\f0dc';
    display: inline-block;
    margin-left: 6px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.85em;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    opacity: 0.35;
}

/* unpressable button */
.btn.btn-fl-disabled,
.btn.btn-fl-disabled:disabled {
    background-color: var(--fl-gunmetal-grey);
    border-color: var(--fl-gunmetal-grey);
    color: var(--fl-pure-white);
    opacity: 1;
    cursor: not-allowed;
}

/* Google sign-in button */
.btn.btn-fl-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fl-midnight-black);
    border: 1px solid var(--fl-midnight-black);
    color: var(--fl-pure-white);
}

.btn.btn-fl-google:hover:not(:disabled) {
    background-color: var(--fl-lighter-midnight-black);
    border-color: var(--fl-lighter-midnight-black);
    color: var(--fl-pure-white);
}

/* hidden password sign-in buttons (same as FL_Flutter admin login) */
.btn.btn-fl-back {
    background-color: var(--fl-gunmetal-grey);
    border-color: var(--fl-gunmetal-grey);
    color: var(--fl-pure-white);
}

.btn.btn-fl-primary {
    background-color: var(--fl-main-purple);
    border-color: var(--fl-main-purple);
    color: var(--fl-pure-white);
}

.btn.btn-fl-back:hover,
.btn.btn-fl-primary:hover {
    color: var(--fl-pure-white);
    filter: brightness(1.1);
}

/* password field with eye icon inside */
.fl-password-field {
    position: relative;
}

.fl-password-field .form-control {
    padding-right: 3.5rem !important;
}

.fl-password-field .fl-password-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    padding: 0.25rem;
    border: 0;
    background: transparent;
    line-height: 1;
    cursor: pointer;
}

.fl-password-field .fl-password-toggle i {
    color: var(--fl-main-purple);
}

/* book page (same as FL_Flutter BookPage / BookCard) */
.fl-book-panel {
    background-color: var(--fl-pure-white);
    overflow: hidden;
}

.card.card-custom.fl-book-panel {
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.5);
}

/* same as ewiir form part title */
.fl-book-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: .75rem 1rem;
    background-color: #3F3F6E;
    color: var(--fl-pure-white);
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
}

.fl-book-section-title[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(180deg);
}

.fl-book-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 16px;
}

/* same 1.3 ratio as the app's grid */
.fl-book-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    aspect-ratio: 1.3;
    padding: 6px 8px 8px;
    border-radius: 5px;
    background-color: #3F3F6E;
    box-shadow: 0 3px 10px 4px rgba(0, 0, 0, 0.2);
}

.fl-book-abbreviation {
    overflow: hidden;
    color: var(--fl-pure-white);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* always 2 lines tall so every card matches */
.fl-book-name {
    display: -webkit-box;
    min-height: 2.4em;
    margin-bottom: 6px;
    overflow: hidden;
    color: var(--fl-fade-blue);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fl-book-testament {
    margin-top: auto;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: var(--fl-normal-blue);
    box-shadow: 0 3px 10px 2px rgba(90, 66, 160, 0.2);
    color: var(--fl-dark-purple);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.fl-book-empty {
    padding: 20px 15px;
    color: var(--fl-fade-blue);
}

.fl-book-card:hover {
    background-color: var(--fl-lighter-midnight-black);
    box-shadow: 0 3px 10px 2px rgba(90, 66, 160, 0.25);
    text-decoration: none;
}

.fl-book-card:hover .fl-book-abbreviation,
.fl-book-card:hover .fl-book-name {
    color: var(--fl-pure-white);
}

.fl-book-card:hover .fl-book-testament {
    background-color: var(--fl-fade-purple);
    box-shadow: none;
}

/* passage page (same as FL_Flutter PassagePage / VerseRow) */
.fl-tooltip {
    padding: 3px 5px 3px 12px;
    border-radius: 5px;
    background-color: var(--fl-fade-purple);
    color: var(--fl-dark-purple);
    font-size: 13px;
    font-weight: 600;
}

.fl-pill-button {
    border-radius: 100px;
    background-color: var(--fl-fade-blue);
    color: var(--fl-dark-purple);
    font-size: 18px;
    font-weight: 700;
}

.fl-pill-button:hover,
.fl-pill-button:focus {
    color: var(--fl-dark-purple);
    filter: brightness(1.15);
}

.card.fl-passage-panel {
    padding-bottom: 10px;
    border-radius: 15px;
    background-color: var(--fl-pure-white);
    overflow: hidden;
}

.fl-passage-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px 0;
    background-color: #3F3F6E;
}

.fl-passage-pickers .fl-pill-button,
.fl-pill-button.fl-scroll-top-button {
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 15px;
}

.fl-passage-pickers .fl-pill-button {
    background-color: var(--fl-bright-yellow);
}

.fl-pill-button.fl-scroll-top-button,
.fl-pill-button.fl-scroll-top-button:hover,
.fl-pill-button.fl-scroll-top-button:focus {
    background-color: var(--fl-bright-yellow);
    color: var(--fl-dark-purple);
}

.fl-passage-header {
    padding: 10px 10px 16px 16px;
    background-color: #3F3F6E;
}

.fl-passage-header.fl-explanation-header {
    padding-top: 16px;
}

.fl-passage-reference {
    align-self: center;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 5px;
    background-color: var(--fl-fade-purple);
    color: var(--fl-dark-purple);
    font-size: 11px;
    font-weight: 600;
}

.fl-passage-title {
    color: var(--fl-fade-blue);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.fl-passage-description {
    margin-top: 8px;
    color: var(--fl-pure-white);
    font-size: 13px;
    font-weight: 600;
}

.fl-square-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background-color: var(--fl-bright-yellow);
    color: var(--fl-dark-purple);
    font-size: 18px;
}

a.fl-square-button:hover,
a.fl-square-button:focus {
    color: var(--fl-dark-purple);
    text-decoration: none;
}

/* theme colours every <i> grey */
.fl-square-button i,
.fl-verse-info-badge i,
.fl-verse-arrow-button i,
.fl-round-button i {
    color: inherit;
}

.fl-passage-tooltip {
    margin: 20px 10px 10px;
}

.fl-verse-row {
    margin: 0 10px 10px;
    padding: 12px;
    border-radius: 5px;
    background-color: var(--fl-pure-white);
    box-shadow: 0 3px 10px 2px rgba(90, 66, 160, 0.25);
}

.fl-verse-number {
    flex-shrink: 0;
    min-width: 25px;
    height: 25px;
    margin-right: 10px;
    padding: 0 3px;
    border-radius: 5px;
    background-color: var(--fl-fade-purple);
    color: var(--fl-dark-purple);
    font-size: 13px;
    font-weight: 800;
    line-height: 25px;
    text-align: center;
}

.fl-verse-info-badge,
.fl-verse-reference {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    border-radius: 5px;
    background-color: var(--fl-dirty-blue);
    color: var(--fl-pure-white);
}

.fl-verse-info-badge {
    width: 20px;
}

.fl-verse-info-badge i {
    font-size: 12px;
}

.fl-verse-reference {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
}

.fl-verse-arrow-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: var(--fl-normal-orange);
    color: var(--fl-dark-purple);
    font-size: 14px;
}

.fl-verse-arrow-button:hover,
.fl-verse-arrow-button:focus {
    color: var(--fl-dark-purple);
    text-decoration: none;
    filter: brightness(1.15);
}

.fl-picker-modal .fl-verse-row {
    margin: 0;
}

/* verse explanation page (same as FL_Flutter VerseExplanationPage / VerseExplanationRow) */
.fl-explanation-list {
    padding: 16px 10px 0;
}

.fl-explanation-empty {
    padding: 20px 0 10px;
    color: var(--fl-dimmer-purple);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.fl-explanation-row {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 12px;
    background-color: var(--fl-pure-white);
    box-shadow: 0 3px 10px 2px rgba(90, 66, 160, 0.25);
}

.fl-explanation-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background-color: var(--fl-fade-purple);
    color: var(--fl-dark-purple);
    font-size: 14px;
    font-weight: 800;
}

.fl-square-button.fl-explanation-toggle {
    margin-right: 0;
}

.fl-explanation-toggle i {
    transition: transform 0.2s;
}

.fl-explanation-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.fl-explanation-body {
    padding-top: 10px;
}

.card.fl-passage-nav.fl-explanation-nav {
    justify-content: center;
    gap: 12px;
}

.fl-pill-button.fl-scroll-top-button.fl-view-verse-button {
    background-color: var(--fl-bright-yellow);
    color: var(--fl-dark-purple);
}

/* markdown (same as FL_Flutter MarkdownHelper) */
.fl-markdown {
    min-width: 0;
    color: var(--fl-midnight-black);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fl-markdown p:last-child {
    margin-bottom: 0;
}

.fl-markdown strong {
    color: var(--fl-medium-red);
}

.fl-markdown h1 {
    color: var(--fl-crimson-red);
}

.fl-markdown h3,
.fl-markdown h5 {
    color: var(--fl-dark-purple);
}

.fl-markdown h4 {
    color: var(--fl-crimson-red);
}

.fl-markdown h6 {
    color: var(--fl-dark-green);
    text-align: right;
}

.fl-markdown blockquote {
    padding: 8px 12px;
    border-radius: 10px;
    background-color: var(--fl-pale-blue);
}

.fl-markdown code,
.fl-markdown pre {
    border-radius: 10px;
    background-color: var(--fl-light-green);
    color: var(--fl-dark-green);
    font-size: 14px;
    font-weight: 700;
}

.fl-markdown table {
    margin-bottom: 1rem;
    border-left: 5px solid var(--fl-main-purple);
}

.fl-markdown th,
.fl-markdown td {
    padding: 4px 8px;
}

.fl-markdown th {
    color: var(--fl-darker-blue);
    font-size: 14px;
}

.fl-markdown hr {
    border-top: 2px solid var(--fl-bright-orange);
}

/* prev / scroll to top / next bar */
.card.fl-passage-nav {
    position: sticky;
    bottom: 0;
    z-index: 95;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.fl-round-button,
.fl-round-button-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.fl-round-button {
    background-color: var(--fl-bright-yellow);
    color: var(--fl-dark-purple);
    font-size: 20px;
}

.fl-round-button:hover,
.fl-round-button:focus {
    color: var(--fl-dark-purple);
}

/* chapter / verse picker modals */
.fl-picker-modal .modal-content {
    background-color: var(--fl-pure-white);
}

.fl-picker-modal .modal-header {
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 0;
}

.fl-picker-modal .modal-header .fl-tooltip {
    flex: 0 0 100%;
    order: 1;
    margin-top: 12px;
}

.fl-picker-modal .modal-header .fl-square-button {
    margin: 0 0 0 auto;
}

.fl-picker-modal .modal-body {
    padding-top: 5px;
}

.fl-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.fl-picker-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    border-radius: 5px;
    box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.2);
    color: var(--fl-darker-black);
    font-size: 18px;
    font-weight: 800;
}

.fl-picker-card:hover {
    color: var(--fl-darker-black);
    text-decoration: none;
    filter: brightness(1.15);
}

.fl-chapter-card,
.fl-verse-card {
    background-color: var(--fl-pure-white);
    box-shadow: 0 3px 10px 2px rgba(90, 66, 160, 0.25);
    color: var(--fl-dark-purple);
}

.fl-verse-card.unmatched {
    background-color: var(--fl-fade-soft-grey);
    color: var(--fl-medium-grey);
}

.fl-chapter-card:hover,
.fl-chapter-card.selected,
.fl-verse-card:hover,
.fl-verse-card.selected {
    background-color: var(--fl-main-purple);
    color: var(--fl-pure-white);
    filter: none;
}

.fl-picker-section-title {
    margin: 14px 0 6px;
    padding: 4px 8px;
    background-color: var(--fl-dirty-blue);
    color: var(--fl-pure-white);
    font-size: 14px;
    font-weight: 800;
}

.fl-picker-section-title:first-child {
    margin-top: 0;
}

/* TEMP: cover all logos with a white box */
img[src*="logo-fl.png"] {
    background-color: #fff;
    object-position: -99999px 99999px;
}

@media (min-width: 768px) {
    .fl-book-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .fl-picker-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .fl-book-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
    .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
        background-color: var(--fl-main-purple);
    }

    /* dropdowns */
    .header-menu .menu-nav > .menu-item .menu-submenu {
        background-color: var(--fl-darker-black);
    }

    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item > .menu-link .menu-icon {
        color: var(--fl-fade-blue);
    }

    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link {
        background-color: var(--fl-main-purple);
    }

    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link > .menu-arrow,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-icon,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link > .menu-arrow,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link .menu-icon,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link > .menu-arrow,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link > .menu-arrow,
    .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon {
        color: #fff;
    }
}

@media (min-width: 1400px) {
    .fl-book-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    /* theme pads content 75px under a 60px fixed header, leaving a light strip */
    .header-mobile-fixed .content {
        padding-top: 60px;
    }

    /* slide-out menu matches the desktop dropdowns; id beats the theme's long selectors */
    .header-menu-wrapper {
        background: var(--fl-darker-black);
    }

    #kt_header_menu {
        background-color: transparent;
    }

    #kt_header_menu .menu-item > .menu-link .menu-text,
    #kt_header_menu .menu-item > .menu-link .menu-arrow {
        color: var(--fl-fade-blue);
    }

    #kt_header_menu .menu-item.menu-item-open > .menu-link,
    #kt_header_menu .menu-item.menu-item-here > .menu-link,
    #kt_header_menu .menu-item.menu-item-active > .menu-link,
    #kt_header_menu .menu-item > .menu-link:hover {
        background-color: var(--fl-main-purple);
    }

    #kt_header_menu .menu-item.menu-item-open > .menu-link .menu-text,
    #kt_header_menu .menu-item.menu-item-open > .menu-link .menu-arrow,
    #kt_header_menu .menu-item.menu-item-here > .menu-link .menu-text,
    #kt_header_menu .menu-item.menu-item-here > .menu-link .menu-arrow,
    #kt_header_menu .menu-item.menu-item-active > .menu-link .menu-text,
    #kt_header_menu .menu-item.menu-item-active > .menu-link .menu-arrow,
    #kt_header_menu .menu-item > .menu-link:hover .menu-text,
    #kt_header_menu .menu-item > .menu-link:hover .menu-arrow {
        color: #ffffff;
    }

    /* thumb size tap target */
    .scrolltop {
        width: 48px;
        height: 48px;
    }

    .scrolltop > i {
        font-size: 1.6rem;
    }

}

@media (max-width: 575.98px) {
    .fl-book-grid {
        gap: 10px;
        padding: 15px 10px;
    }
}