@font-face {
    font-family: 'Macondo';
    src: url('/static/fonts/Macondo-Regular.woff2') format('woff2'),
        url('/static/fonts/Macondo-Regular.woff') format('woff'),
        url('/static/fonts/Macondo-Regular.svg#Macondo-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.btn-primary {
    --bs-btn-bg: var(--ms-btn-bg);
    --bs-btn-border-color: var(--ms-btn-border-color);
    --bs-btn-hover-color: var(--ms-btn-hover-color);
    --bs-btn-hover-bg: var(--ms-btn-hover-bg);
    --bs-btn-hover-border-color: var(--ms-btn-hover-border-color);
    --bs-btn-active-bg: var(--ms-btn-active-bg);
    --bs-btn-active-border-color: var(--ms-btn-active-border-color);
    --bs-btn-disabled-bg: var(--ms-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--ms-btn-disabled-border-color);
}

a, .btn-link {
    --bs-link-color: var(--ms-main-color);
    --bs-link-color-rgb: var(--ms-link-hl-rgb);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    --bs-link-color: var(--ms-link-hl);
    --bs-link-color-rgb: var(--ms-link-hl-rgb);
    --bs-btn-hover-color: var(--ms-link-hl);
}

body {
    background-image: var(--ms-background-thatch);
    color: var(--ms-body-text);
}

.br-header {
    background-color: var(--ms-nav-bgcolor);
    border-bottom: 1px solid var(--ms-nav-bgborder);
}

.br-footer {
    background-color: var(--ms-nav-bgcolor);
    border-top: 1px solid var(--ms-nav-bgborder);
    color: var(--ms-nav-text-color);
}

.br-footer a, .nav-link, .dropdown-item, .dropdown-item-text, .vr {
    color: var(--ms-nav-text-color);
}

.dropdown-divider {
    border-top: 1px solid var(--ms-nav-text-color);
}

.br-footer a:hover, .nav-link:hover, .br-footer a:active, .nav-link:active, .dropdown-item:hover, .dropdown-item:active,
.navbar-nav .nav-link.show, .nav-link:focus {
    color: var(--ms-link-hl);
}

.navbar-collapse {
}

.navbar-brand-betareader {
    font: 700 40px "Federo", serif;
    color: var(--ms-main-color);
}

.navbar-brand-betareader img {
}

.ink {
    font: 400 28px "Macondo", sans-serif;
    color: var(--ms-ink-color);
}

h1, h2, h3, h4, h5, h6 .card-title {
    font-family: "Federo", serif;
    font-weight: bold;
    color: var(--ms-card-text);
}

.modal {
    --bs-modal-box-shadow: var(--ms-box-shadow);
}

.modal-backdrop {
    background-color: var(--ms-modal-backdrop-color);
    opacity: var(--ms-modal-backdrop-opacity);
}

.card, .modal-content {
    background-color: var(--ms-bgcolor);
}

.table, .table-fluid, .table td, .table th, .table-fluid td, .table-fluid th {
    background-color: var(--ms-bgcolor) !important;
}

.nav-tabs .nav-item {
    background-color: var(--ms-nested-bgcolor);
}

.nav-tabs .nav-link.active {
    background-color: var(--ms-bgcolor);
}

.card-header, .modal-header {
    /*border-bottom: none;
    background-color: transparent;*/
    background-color: var(--ms-nav-bgcolor);
    border-bottom: 1px solid var(--ms-nav-bgborder);
}

.card-body {
    color: var(--ms-card-text);
}

.pb-controller-element {
    color: var(--ms-card-text);
}

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

.card-footer, .modal-footer {
    /*background-color: transparent;*/
    background-color: var(--ms-nav-bgcolor);
    border-top: 1px solid var(--ms-nav-bgborder);
}

.form-control, .form-select, .form-check-input {
    background-color: var(--ms-field-bg);
    color: var(--ms-field-color);
    border-color: var(--ms-field-border-color);
}

.form-control-focus, .form-control:focus {
    background-color: var(--ms-field-focus-bg) !important;
}

h1, h1.card-title {
    font-size: 40px;
}

.br-title-card {
    background-color: var(--ms-main-color);
}

.br-title-card .card-body {
    color: var(--ms-mainbg-text);
}

.br-title-card .card-text {
    color: var(--ms-mainbg-text);
}

.br-title-card h1.card-title {
    color: var(--ms-mainbg-text);
}

.dropdown-menu {
    background-color: var(--ms-bgcolor);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--ms-nav-bgcolor);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--ms-ink-color);
}

h2, h2.card-title {
    font-size: 36px;
}

h3, h3.card-title {
    font-size: 24px;
}

h4, h4.card-title {
    font-size: 20px;
}

.terms-list {
  list-style-type: upper-roman;
}

@media screen and (min-width: 768px) {
    #maincontent {
        min-height: calc(100vh - 250px);
    }
}

.ms-discTint1 {
    background-color: var(--ms-discover-first);
}

.ms-discTint2 {
    background-color: var(--ms-discover-second);
}

.ms-postit {
    border-radius: 0.375rem 0.375rem 3rem 0.375rem;
    box-shadow: 3px 3px 10px var(--ms-box-shadow); /* TODO these vars should exist at the betareader level too. */
}

.ms-postit .card-footer {
    background-color: transparent;
}

.ms-postit .card-header {
    background-color: transparent;
    border-bottom: none;
}

.ms-postit-comments {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
    font-family: var(--bs-btn-font-family);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

.ms-postit-orange {
    background: var(--ms-orange-gradient);
    border: 1px solid var(--ms-postit-orange-border);
}

.ms-postit-orange .card-title, .ms-postit-orange .card-body, .ms-postit-orange .card-title a,
.ms-postit-orange .card-title .author-anchor a,
.ms-postit-orange .card-body a, .ms-postit-orange .card-header, .ms-postit-orange .card-footer {
    color: var(--ms-color-orange)
}

.ms-postit-pink {
    background: var(--ms-pink-gradient);
    border: 1px solid var(--ms-postit-pink-border);
}

.ms-postit-pink .card-title, .ms-postit-pink .card-body, .ms-postit-pink .card-title a, .ms-postit-pink .card-body a,
.ms-postit-pink .card-title .author-anchor a,
.ms-postit-pink .card-header, .ms-postit-pink .card-footer {
    color: var(--ms-color-pink)
}

.ms-postit-teal {
    background: var(--ms-teal-gradient);
    border: 1px solid var(--ms-postit-teal-border);
}

.ms-postit-teal .card-title, .ms-postit-teal .card-body, .ms-postit-teal .card-title a, .ms-postit-teal .card-body a,
.ms-postit-teal .card-title .author-anchor a,
.ms-postit-teal .card-header, .ms-postit-teal .card-footer {
    color: var(--ms-color-teal)
}

.ms-postit-green {
    background: var(--ms-green-gradient);
    border: 1px solid var(--ms-postit-green-border);
}

.ms-postit-green .card-title, .ms-postit-green .card-body, .ms-postit-green .card-title a,G
.ms-postit-green .card-title .author-anchor a,
.ms-postit-green .card-body a, .ms-postit-green .card-header, .ms-postit-green .card-footer {
    color: var(--ms-color-green)
}

.ms-postit-yellow {
    background: var(--ms-yellow-gradient);
    border: 1px solid var(--ms-postit-yellow-border);
}

.ms-postit-yellow .card-title, .ms-postit-yellow .card-body, .ms-postit-yellow .card-title a,
.ms-postit-yellow .card-title .author-anchor a,
.ms-postit-yellow .card-body a, .ms-postit-yellow .card-header, .ms-postit-yellow .card-footer {
    color: var(--ms-color-yellow)
}

.br-color-splash-teal {
    background: var(--ms-colorsplash-teal);
}

.br-block-teal {
    color: white;
    background-color: var(--ms-block-teal);
}

.br-color-splash-blue {
    background: var(--ms-colorsplash-blue);
}

.br-block-blue {
    color: white;
    background-color: var(--ms-block-blue);
}

.br-color-splash-int {
    background: var(--ms-colorsplash-int);
}

.br-color-splash-yellow {
    background: var(--ms-colorsplash-yellow);
}

.br-block-int {
    color: white;
    background-color: var(--ms-block-int);
}

.text-small {
    font-size: 10px;
}

.br-li-check {
    display: flex;
    list-style-type: none;
}
.br-li-check:before {
    content: "\f058";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-left: -.5rem;
    padding-right: .5rem;
}

.br-li-plus {
    display: flex;
    list-style-type: none;
}

.br-li-plus:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f055";
    margin-left: -.5rem;
    padding-right: .5rem;
}

.br-li-soon {
    display: flex;
    list-style-type: none;
}

.br-li-soon:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f06a";
    color: orange;
    margin-left: -.5rem;
    padding-right: .5rem;
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15em;
    white-space: nowrap;
}

#currentAccess {
    max-height: 20vh;
    overflow-y: auto;
}

.toc-root {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.toc-root ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 5px;
}

.toc-root li {
    color: var(--ms-main-color);
    font-weight: bold;
}

.toc-root ul li {
    border-bottom: 1px solid var(--ms-nav-bgcolor);
    padding: 3px 0;
}

.toc-root ul li:hover {
    color: var(--ms-link-hl);
    background-color: var(--ms-nav-bgcolor);
}

/* sticky columns on wide enough screens */
@media screen and (min-width: 768px) {
    .sticky-column {
        position: sticky;
        top: 80px; /* Adjust based on navbar height */
        height: calc(100vh - 250px); /* Make the sticky columns full height minus navbar and footer*/
        overflow-y: auto;
    }
    .content-column {
        min-height: calc(100vh - 250px); /* Ensure middle content is tall enough to scroll */
    }
}

.bg-manuscript {
    background-color: var(--ms-main-color);
    color: white;
}

.upload-box {
    height: 10rem;
    border: 3px dashed #ccc;
    font-weight: bold;
    font-size: larger;
}

.form-label {
    font-weight: bold;
}

.apply-highlight-pink {
    background-color: var(--ms-highlight-pink);
    color: var(--ms-color-pink);
}
.apply-highlight-red {
    background-color: var(--ms-highlight-red);
    color: var(--ms-color-red);
}
.apply-highlight-yellow {
    background-color: var(--ms-highlight-yellow);
    color: var(--ms-color-yellow);
}
.apply-highlight-green {
    background-color: var(--ms-highlight-green);
    color: var(--ms-color-green);
}
.apply-highlight-teal {
    background-color: var(--ms-highlight-teal);
    color: var(--ms-color-teal);
}
.apply-highlight-blue {
    background-color: var(--ms-highlight-blue);
    color: var(--ms-color-blue);
}
.apply-highlight-purple {
    background-color: var(--ms-highlight-purple);
    color: var(--ms-color-purple);
}
.apply-highlight-gray {
    background-color: var(--ms-highlight-gray);
    color: var(--ms-color-gray);
}
.apply-highlight-focus {
    background-color: var(--ms-highlight-focus) !important;
    color: var(--ms-color-orange);
}

.btn-postit-pink {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-pink);
    --bs-btn-border-color: var(--ms-border-pink);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-pink);
    --bs-btn-hover-border-color: var(--ms-border-pink);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-pink);
    --bs-btn-active-border-color: var(--ms-border-pink);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-pink);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-red {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-red);
    --bs-btn-border-color: var(--ms-border-red);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-red);
    --bs-btn-hover-border-color: var(--ms-border-red);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-red);
    --bs-btn-active-border-color: var(--ms-border-red);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-red);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-yellow);
    --bs-btn-border-color: var(--ms-border-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-yellow);
    --bs-btn-hover-border-color: var(--ms-border-yellow);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-yellow);
    --bs-btn-active-border-color: var(--ms-border-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-yellow);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-green {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-green);
    --bs-btn-border-color: var(--ms-border-green);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-green);
    --bs-btn-hover-border-color: var(--ms-border-green);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-green);
    --bs-btn-active-border-color: var(--ms-border-green);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-green);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-teal {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-teal);
    --bs-btn-border-color: var(--ms-border-teal);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-teal);
    --bs-btn-hover-border-color: var(--ms-border-teal);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-teal);
    --bs-btn-active-border-color: var(--ms-border-teal);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-teal);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-blue {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-blue);
    --bs-btn-border-color: var(--ms-border-blue);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-blue);
    --bs-btn-hover-border-color: var(--ms-border-blue);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-blue);
    --bs-btn-active-border-color: var(--ms-border-blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-blue);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-purple {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-purple);
    --bs-btn-border-color: var(--ms-border-purple);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-purple);
    --bs-btn-hover-border-color: var(--ms-border-purple);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-purple);
    --bs-btn-active-border-color: var(--ms-border-purple);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-purple);
    --bs-btn-disabled-border-color: #999;
}

.btn-postit-gray {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ms-highlight-gray);
    --bs-btn-border-color: var(--ms-border-gray);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ms-hover-gray);
    --bs-btn-hover-border-color: var(--ms-border-gray);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ms-highlight-gray);
    --bs-btn-active-border-color: var(--ms-border-gray);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: var(--ms-disabled-gray);
    --bs-btn-disabled-border-color: #999;
}

.pcard .card-header, .pcard .card-title, .pcard .card-body, .pcard .card-footer {
    color: var(--ms-card-text);
}

.pcard a, .pcard .card-title a {
    color: var(--ms-card-text) !important;
}

.pcard a:hover, .pcard a:focus, .pcard a:active .pcard .card-title a:hover, .pcard .card-title a:focus,
.pcard .card-title a:active {
    color: var(--ms-link-hl);
}

/* social */
.ms-bluesky {
    color: var(--ms-bluesky-color);
}

.ms-discord {
    color: var(--ms-discord-color);
}

.ms-instagram {
    background: var(--ms-instagram-color);
    background: var(--ms-instagram-gradient);
    background-clip: text;
    -webkit-background-clip: text;
}

.ms-facebook {
    color: var(--ms-facebook-color);
}

.ms-threads {
    color: var(--ms-threads-color);
}

.ms-mastodon {
    color: var(--ms-mastodon-color);
}

.ms-twitter {
    color: var(--ms-twitter-color);
}

.ms-tiktok {
    color: var(--ms-tiktok-color);
}

.ms-youtube {
    color: var(--ms-youtube-color);
}

.author-divider {
    border-top: 1px solid var(--ms-main-color);
}

.rank-0 {
    color: var(--ms-rank-0);
}

.rank-10 {
    color: var(--ms-rank-10-30);
}

.rank-20 {
    color: var(--ms-rank-10-30);
}

.rank-30 {
    color: var(--ms-rank-10-30);
}

.rank-40 {
    color: var(--ms-rank-40-60);
}

.rank-50 {
    color: var(--ms-rank-40-60);
}

.rank-60 {
    color: var(--ms-rank-40-60);
}

.rank-70 {
    color: var(--ms-rank-bronze);
}

.rank-80 {
    color: var(--ms-rank-silver)
}

.rank-90 {
    color: var(--ms-rank-gold)
}

.text-btn-align {
    /* align normal text beside btn-links
       i would have prefered the BS variables but they get defined inside the btn class
       rendering them useless. Thanks Bootstrap
    */
    display: inline-block;
    padding: 0.375rem 0.75rem;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.5;
}

#edit-form {
    display: none;
}

@supports (filter: blur(10px)) {
    .blur-text {
        filter: blur(10px);
        user-select: none;
    }
}

@supports not (filter: blur(10px)) {
    .blur-text {
        display: none;
    }
}

/*.text-danger {
    color: rgb(var(--ms-danger-rgb)) !important;
}

.text-muted {
    color: var(--ms-muted-color) !important;
}

.bg-warning {
    background-color: var(--ms-warning-bg) !important;
}

.bg-success {

}

.bg-danger {

}

.alert-success {

}*/