: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;
}

/* Admin-authored engagement popup (Member/controls/MemberPopup.ascx).
   Renders as either an offcanvas or a modal depending on the popup's Style, so the rules below are
   split accordingly. The offcanvas half deliberately mirrors #rbUpgradePanel above: the two are the
   same physical object to a member and must not sit differently on the screen. */

/* Same no-header treatment as the upgrade panel - the headline carries the message, so the close
   button floats over the body rather than occupying its own row. */
.rb-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

#rbPopup.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;
}

#rbPopup .offcanvas-body {
    flex-grow: 0;
    overflow-y: auto;
}

/* The modal variant needs padding of its own: unlike .offcanvas-body, .modal-body has none by
   default in this build, and the floated close button needs room not to sit on the headline. */
#rbPopup .modal-body {
    padding: 1.5rem;
}

/* Admin-supplied image. Constrained rather than trusted - an over-large asset must not be able to
   blow out the panel width or push the CTA below the fold. */
.rb-popup-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--tblr-border-radius);
}

/* Admin-authored TinyMCE body. Same clamp for anything it embeds, and the trailing margin is
   dropped so the block sits flush against the CTA regardless of how the HTML ends. */
.rb-popup-html img {
    max-width: 100%;
    height: auto;
}

.rb-popup-html > *:last-child {
    margin-bottom: 0;
}
/* "New: Link-in-Bio" promo (Member2023.Master). Desktop: a quiet pill in the white header,
   between the logo and the avatar. Mobile/tablet: a light off-white strip under the logo bar.
   Green "New" tag rather than orange, so it never reads as another Upgrade to PRO call. */
.rb-lib-new {
    display: inline-block;
    padding: .0625rem .4375rem;
    border-radius: 999px;
    background: var(--tblr-green, #2fb344);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
    flex: 0 0 auto;
}

.rb-lib-cta {
    color: var(--tblr-primary, #206bc4);
    font-weight: 600;
    white-space: nowrap;
}

.rb-lib-pill {
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem .375rem .5rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 999px;
    background: #faf9f6;
    color: var(--tblr-body-color, #1d273b);
    font-size: .875rem;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rb-lib-pill:hover,
.rb-lib-pill:focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 1px 4px rgba(32, 107, 196, .15);
    color: var(--tblr-body-color, #1d273b);
    text-decoration: none;
}

.rb-lib-strip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #faf9f6;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    font-size: .8125rem;
    line-height: 1.35;
}

.rb-lib-strip a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    color: var(--tblr-body-color, #1d273b);
    text-decoration: none;
    text-align: center;
}

.rb-lib-strip .btn-close {
    flex: 0 0 auto;
    width: .625rem;
    height: .625rem;
    padding: .25rem;
    background-size: .625rem;
}