.page-shell
{
    width: 100%;
    max-width: 1000px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    box-shadow: var(--rf-page-shell-shadow);
}

.layout-wide .page-shell
{
    max-width: 1800px;
}

@media (min-width: 768px)
{
    .layout-wide
    {
        --main-padding-x: var(--main-padding-x-wide);
    }
}

/* =========================================================
   Save Indicator
   ---------------------------------------------------------
   Indicator that show when a ranking has been re-ordered.
   ========================================================= */

.save-indicator
{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    width: 0;
    height: 3px;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
}

.save-indicator.is-active
{
    background-color: #28a745;
    animation: save-indicator-animation 1.2s ease forwards;
}

@keyframes save-indicator-animation
{
    0%
    {
        width: 0;
        opacity: 1;
    }

    60%
    {
        width: 100%;
        opacity: 1;
    }

    80%
    {
        width: 100%;
        opacity: 1;
    }

    100%
    {
        width: 100%;
        opacity: 0;
    }
}

/* =========================================================
   Navigation
   ---------------------------------------------------------
   Navigational components.
   ========================================================= */

.navbar
{
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.8);
    background-color: var(--rf-accent);
    color: var(--rf-navbar-text);
}

.rf-navbar-content
{
    padding-inline: var(--main-padding-x);
}

.navbar .guest-ranking-nav-pending
{
    display: none !important;
}

/*
@media (min-width: 576px)
{
    .navbar-nav .nav-link.active
    {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 21px;
    }
}
*/

.navbar .nav-link.active
{
    font-weight: 600;
}

.navbar .btn:active
{
    border-color: transparent;
}

.navbar .btn.active
{
    /*border-radius: 0;*/
    border-color: transparent;
    /*border-bottom: 1px black solid;*/
    /*background: rgba(255, 255, 255, 0.33);*/
}

.navbar .rf-expand-nav .nav-item
{
    width: 100%;
}

.navbar .rf-expand-nav .nav-item:last-child .nav-link
{
    border-bottom: none;
}

.navbar .rf-expand-nav .nav-link
{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: calc(100% + (2 * var(--main-padding-x))) !important;

    border-bottom: 1px solid var(--rf-accent-active);

    margin-left: calc(var(--main-padding-x) * -1);
    margin-right: calc(var(--main-padding-x) * -1);
    padding-left: var(--main-padding-x);
    padding-right: var(--main-padding-x);
    box-sizing: border-box;
}

.navbar .rf-expand-nav .nav-link:hover
{
    background-color: var(--rf-nav-hover-bg);
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link,
.navbar .navbar-text,
.navbar .btn,
.navbar i
{
    color: var(--rf-navbar-text) !important;
}

.navbar .navbar-toggler,
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:focus-visible
{
    border: 0;
    box-shadow: none;
    outline: 0;
}

.navbar .navbar-toggler-icon
{
    filter: invert(0);
}

.navbar_::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    pointer-events: none;
    transform: translateY(100%);
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.14),
            rgba(0, 0, 0, 0)
    );
}

.sidebar
{
    position: static;
}

.sidebar a
{
    display: block;
    padding: 0.5rem 1rem 0.5rem 0;
    /*margin-left: calc(var(--main-padding-x) * -1);*/

    color: var(--bs-body-color);
    text-decoration: none;
    border-right: var(--rf-sidebar-indicator-size) solid var(--bs-border-color);
}

.sidebar a:hover
{
    color: var(--rf-accent);
}

.sidebar a.active
{
    border-color: var(--rf-accent);
}

@media (min-width: 992px)
{
    .sidebar
    {
        position: sticky;
        top: var(--sticky-offset);
    }
}

/* Fix for anchors behind sticky navbar */
.scroll-target
{
    scroll-margin-top: var(--sticky-offset);
}

main
{
    flex: 1 0 auto;
}

.page-content
{
    width: 100%;
    padding: var(--main-padding-y) var(--main-padding-x) 0;
}

/* Full-width section background inside page-shell */
.section-bleed, .bleed
{
    margin-left: calc(-1 * var(--main-padding-x));
    margin-right: calc(-1 * var(--main-padding-x));
    padding-left: var(--main-padding-x);
    padding-right: var(--main-padding-x);
}

footer.footer
{
    flex-shrink: 0;
    margin-top: 48px;
    padding: 2.5rem var(--main-padding-x) 2rem;
    text-align: center;
}

.footer-links
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.25rem;
    margin-bottom: .75rem;
}

.footer-links a,
.footer-discard-link
{
    color: var(--bs-body-color);
    font-weight: 600;
    text-decoration: none;
    opacity: .72;
    transition: opacity .2s ease, color .2s ease;
}

.footer-links a:hover,
.footer-links a:focus,
.footer-discard-link:hover,
.footer-discard-link:focus
{
    color: var(--rf-accent);
    opacity: 1;
}

.footer-discard-link
{
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-danger);
}

.footer-discard-link:hover,
.footer-discard-link:focus
{
    color: var(--bs-danger);
}

.footer-subtle
{
    margin: 0;
    color: var(--bs-body-color);
    font-size: .85rem;
    line-height: 1.4;
    opacity: .52;
}

.footer-subtle a
{
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.footer-subtle a:hover,
.footer-subtle a:focus
{
    color: var(--rf-accent);
    opacity: 1;
}

.hr-accent
{
    border: 0;
    height: 1px;
    width: 100%;
    margin: 1.5rem 0;
    background-color: var(--rf-accent);
    opacity: 1;
}

.hr-bleed
{
    margin-left: calc(-1 * var(--hr-bleed-gutter, var(--main-padding-x)));
    margin-right: calc(-1 * var(--hr-bleed-gutter, var(--main-padding-x)));
    width: calc(100% + (2 * var(--hr-bleed-gutter, var(--main-padding-x))));
}

.modal-body
{
    --hr-bleed-gutter: var(--bs-modal-padding);
}

.textmarker
{
    background: linear-gradient(to top, transparent 30%, #ffff00 30%, #ffff00 70%, transparent 70%);
}

.textmarker-gold
{
    background: linear-gradient(to top, transparent 30%, rgba(var(--rf-gold-rgb), 0.2) 30%, rgba(var(--rf-gold-rgb), 0.2) 70%, transparent 70%);
}