/* Page-level theme settings for template_dev6.php. */
body {
    background-color: rgba(189, 179, 179, 0.65);
    background-image: radial-gradient(circle, rgb(189 185 179 / 65%)), url(/img/backgrounds/p5.png);
    background-repeat: repeat;
    background-blend-mode: normal;
}

body.dark-mode {
    background-color: #3d3d3d !important;
    background-image: linear-gradient(rgb(39 38 38 / 47%), rgb(43 43 43 / 58%)), url('/img/backgrounds/grey_wash_wall.webp') !important;
	 background-repeat: repeat;
    background-blend-mode: normal;
}

a {
color: rgb(98 142 207);
}

.bg-primary {
    background-color: #3c454d !important;
}

#osd-single-viewer {
    background-image: url('/img/dark_leather.png');
}

.osd-share-view-btn {
    position: fixed;
    left: 50%;
    top: 1rem;
    z-index: 1065;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.45rem;
    padding: .5rem .8rem;
    color: #fff;
    background: rgb(24 64 102 / 88%);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.osd-share-view-btn:hover,
.osd-share-view-btn:focus-visible {
    color: #fff;
    background: rgb(37 99 162 / 95%);
}

.osd-share-view-btn.is-copied {
    background: rgb(35 107 58 / 95%);
}

.osd-shared-view-image-watermark {
    background: url('/watermark/watermark_2025b.png') center / contain no-repeat;
    opacity: .58;
    pointer-events: none;
    mix-blend-mode: normal;
}

.top {
    background-image: url('/img/25_black.png'), url('/img/when10.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: rgb(255 255 255 / 80%);
}

body.dark-mode .back-light,
body.dark-mode .bg-light {
    background-color: #2d2d2d !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode p {
    color: #fff;
}

body.dark-mode p {
    font-weight: 300;
}

body.dark-mode .text-black,
body.dark-mode .bg-light.text-black {
    color: #e0e0e0 !important;
}

body.dark-mode .blockquote {
    color: #e9e9e9;
    border-left-color: #6c757d;
}

body.dark-mode .blockquote-footer {
    color: #b0b0b0;
}

body.dark-mode .caption,
body.dark-mode span.caption,
body.dark-mode p.caption {
    color: #c0c0c0;
}

.dark-mode-toggle {
    position: fixed;
    bottom: 80px;
    left: 3px;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0.175em;
    background-color: rgb(255 255 255 / 95%);
    border: 1.4px solid #202f79;
    border-radius: 1.4em;
    box-shadow: 0 1.4px 5.6px rgb(0 0 0 / 30%);
}

body.dark-mode .dark-mode-toggle {
    background-color: rgb(26 26 26 / 95%);
    border-color: #4a5568;
}

.dark-mode-slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 98px;
    height: 25.2px;
    padding: 1.4px;
    background-color: #e0e0e0;
    border-radius: 12.6px;
    transition: background-color 0.3s ease;
}

body.dark-mode .dark-mode-slider {
    background-color: #4a5568;
}

.dark-mode-slider-track {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 5.6px;
    font-size: 0.525em;
    font-weight: 600;
    pointer-events: none;
}

.dark-mode-slider-track .light-label { color: #202f79; }
.dark-mode-slider-track .dark-label { color: #6b7280; }
body.dark-mode .dark-mode-slider-track .light-label { color: #9ca3af; }
body.dark-mode .dark-mode-slider-track .dark-label { color: #fff; }

.dark-mode-slider-thumb {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44.8px;
    height: 22.4px;
    background-color: #202f79;
    border-radius: 11.2px;
    box-shadow: 0 1.4px 2.8px rgb(0 0 0 / 20%);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

body.dark-mode .dark-mode-slider-thumb {
    background-color: #1a1a1a;
    transform: translateX(50.4px);
}

.dark-mode-slider-thumb i {
    color: #fff;
    font-size: 0.63em;
}

.dark-mode-toggle:hover {
    box-shadow: 0 1.4px 8.4px rgb(0 0 0 / 40%);
}

@media (max-width: 991.98px) {
    #navbar .container-fluid {
        position: relative;
        align-items: flex-start !important;
    }

    #navbar .navbar-brand {
        flex: 0 0 auto;
        margin-bottom: 0;
        z-index: 1001;
    }

    #navbar .navbar-toggler {
        margin-left: auto;
        z-index: 1001;
    }

    #chapterTitleGroup {
        top: 1.75rem !important;
        left: 50% !important;
        width: auto;
        max-width: calc(100% - 10rem);
        transform: translate(-50%, -50%) !important;
        pointer-events: none;
    }

    #chapterTitle {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #navbarNav {
        flex-basis: 100%;
        width: 100%;
        margin-top: 0.5rem;
    }

    #navbarNav > .d-flex {
        flex-direction: column;
        align-items: flex-end !important;
        gap: 0.5rem;
    }

    #navbarNav .navbar-nav {
        align-items: flex-end !important;
        width: 100%;
        margin-right: 0 !important;
    }

    #navbarNav .nav-item,
    #navbarNav .nav-link {
        width: 100%;
        text-align: right;
    }

    #navbarNav form[role='search'] {
        width: min(100%, 280px);
        margin-left: auto;
        gap: 0.5rem;
    }

    #navbarNav form[role='search'] .form-control {
        min-width: 0;
        margin-right: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dark-mode-slider,
    .dark-mode-slider-thumb {
        transition: none;
    }
}