:root {
    --tblr-primary: #11639d;
    --tblr-brand: #11639d;
    --tblr-font-sans-serif: "Inter" !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--tblr-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--tblr-gray-100);
}

.nav-link-icon-white {
    color: #fff;
}

.nav-link-text-white {
    color: #fff;
}

#navbar-menu .navbar {
    background-color: #11639d;
}

#navbar-menu .dropdown-menu {
    background-color: #11639d;
}

@media (max-width: 767.98px) {
    .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
        color: #fff;
    }
}

label {
    font-weight: 400;
}

.rb-nav-link-left {
    align-items: flex-start;
}

.rb-nav-accordion-item {
    border: 0px;
}

/* Upgrade promo bar (mobile only, sticky above the logo/navigation).
   z-index sits above page content but below the offcanvas backdrop (1040) and the
   offcanvas itself (1045), so the slide-in panel correctly covers this bar. */
.rb-upgrade-bar {
    position: sticky;
    top: 0;
    z-index: 1035;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    /* Orange, not the primary blue: matches the other Upgrade to PRO CTAs (btn-orange) and
       reads as a distinct "special action" against the blue chrome everywhere else. */
    background: var(--tblr-orange, #f76707);
    color: #fff;
    text-decoration: none;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.rb-upgrade-bar:hover,
.rb-upgrade-bar:focus {
    color: #fff;
    text-decoration: none;
}

/* Slide-in panel has no title bar (the offer headline lives in the body instead), so the
   close button floats over the top-right corner of the body rather than sitting in its own
   header row. */
.rb-upgrade-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

/* Size the slide-in to its content instead of filling the full viewport height, which
   Bootstrap's .offcanvas-end does by default (top:0 + bottom:0). Capped to the viewport so a
   small screen still scrolls the body rather than overflowing off-screen. */
#rbUpgradePanel.offcanvas-end {
    top: 0.8rem;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 2rem);
    border-top-left-radius: var(--tblr-border-radius);
    border-bottom-left-radius: var(--tblr-border-radius);
    overflow: hidden;
}

/* offcanvas-body is flex-grow:1 by default, which would stretch it back out. */
#rbUpgradePanel .offcanvas-body {
    flex-grow: 0;
    overflow-y: auto;
}