/* ==========================================================================
   Forums (Telerik.Sitefinity.Forums widgets)
   ==========================================================================
   The forum widgets render their own markup and ship their own stylesheet
   from the Sitefinity resource bundle (Telerik.Web.UI.WebResource.axd), so
   this file re-skins that markup with the design system in cw-theme.css:
   white surfaces with soft borders on the off-white page, CW blue headings
   and links, muted grey metadata.

   Sections:
     1. Layout repairs (the widgets hard-code >100% widths inline)
     2. Forums list
     3. Threads list
     4. Filters + pager
     5. Thread posts
     6. Reply form + RadEditor
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout repairs
   --------------------------------------------------------------------------
   The forum widgets emit inline `width: 107%` / `108%` on their tables and
   containers, which pushes them out of the page container. Author
   !important is the only way to beat an inline style.
   -------------------------------------------------------------------------- */

.forum-wrapper table.sfforumsList,
.forum-wrapper table.sfforumThreadsList,
.forum-wrapper ol.sfforumThreadPostList,
.forum-wrapper .sfforumPostReplyContainer,
.forum-wrapper .sfforumReplyPostWrp {
    max-width: 100% !important;
    width: 100% !important;
}

/* The forum pages use a Sitefinity col-11 / col-1 split where the narrow
   column carries nothing but the login-status link. That costs the forum 8%
   of the row for no reason, so the content column takes the full width and
   the link is lifted out of flow into the top-right corner - which also
   lines its right edge up with the cards below it. */
.forum-wrapper {
    position: relative;
}

.forum-wrapper > .sf_colsOut {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.forum-wrapper > .sf_colsOut + .sf_colsOut {
    flex: 0 0 auto !important;
    max-width: none !important;
    position: absolute;
    /* Offsets resolve against the row's padding box, so clear the row gutter
       and the content column's own gutter to land on the content edge. */
    right: 30px;
    top: 0;
    width: auto !important;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* The widget emits the " / " separators as bare text nodes between the
   crumbs, which can't be selected. Making the wrapper a flex container turns
   each of them into an anonymous flex item instead, so `gap` spaces the
   crumbs and separators evenly (whitespace-only text nodes are ignored). */
/* Three tiers so the trail reads as designed rather than as one grey line:
   the separators take the wrapper's light grey, the links are brand blue at
   medium weight, and the current page is muted. The wrapper colour only ever
   reaches the separators, since links and the current crumb set their own. */
.forum-wrapper .sfforumPostBreabcrumbWrp {
    align-items: center;
    color: var(--cw-gray);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--cw-fs-sm);
    gap: var(--cw-sp-3);
    line-height: 1.4;
    margin-bottom: var(--cw-sp-5);
}

/* The current page: a plain span on a thread, a.sfDisabled on a forum. */
.forum-wrapper .sfforumPostBreabcrumbWrp > span {
    color: var(--cw-text-muted);
}

/* The group crumb is an empty anchor when a forum has no group. */
.forum-wrapper .sfforumPostBreabcrumbWrp a:empty {
    display: none;
}

.forum-wrapper .sfforumPostBreabcrumbWrp a {
    color: var(--cw-blue-primary);
    font-weight: var(--cw-fw-medium);
    position: relative;
    text-decoration: none;
}

.forum-wrapper .sfforumPostBreabcrumbWrp a::after {
    background-color: currentColor;
    bottom: -2px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--cw-transition-fast);
    width: 100%;
}

.forum-wrapper .sfforumPostBreabcrumbWrp a:hover::after,
.forum-wrapper .sfforumPostBreabcrumbWrp a:focus-visible::after {
    transform: scaleX(1);
}

.forum-wrapper .sfforumPostBreabcrumbWrp a:hover,
.forum-wrapper .sfforumPostBreabcrumbWrp a:focus {
    color: var(--cw-blue-primary);
    text-decoration: none;
}

/* The trailing crumb is the current page - a plain span on a thread, a
   disabled anchor on a forum. Sitefinity renders the latter black. */
.forum-wrapper .sfforumPostBreabcrumbWrp a.sfDisabled,
.forum-wrapper .sfforumPostBreabcrumbWrp .sfDisabled {
    color: var(--cw-text-muted);
    cursor: default;
    font-weight: var(--cw-fw-regular);
    text-decoration: none;
}

.forum-wrapper .sfforumPostBreabcrumbWrp a.sfDisabled::after {
    display: none;
}

.forum-wrapper h1,
.forum-wrapper h1.section-header {
    color: var(--cw-blue-dark);
    font-size: clamp(31.68px, 25.92px + 1.5vw, 42.24px);
    font-weight: var(--cw-fw-bold);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: var(--cw-sp-8);
    text-align: left;
    text-transform: none;
}

.forum-wrapper .sfforumSubscribeWrp a {
    color: var(--cw-blue-primary);
    font-size: var(--cw-fs-sm);
}

/* The RSS feed link is not wanted on this site. It is widget-generated
   markup, so it is hidden rather than removed. */
.forum-wrapper a.sfforumRssLnk {
    display: none !important;
}

/* ---- Email subscription --------------------------------------------- */

/* Sitefinity puts a 19px right margin on the trigger to separate it from the
   RSS link (hidden above), and dresses it as a grey tab joined to the panel
   while open. Drop both - the panel carries its own border and shadow, and
   without the margin the trigger lines up with the content edge. */
.forum-wrapper .sfforumSubscribeWrp .sfforumEmailSubscriberWrp {
    margin-right: 0;
    top: 0;
}

/* The second selector is the open state, which Sitefinity styles through
   `.sfforumEmailSubscriptionShown.sfforumEmailSubscriberWrp
   .sfforumEmailLnkWrp` (0,3,0) - it needs the extra class to be beaten. */
.forum-wrapper .sfforumEmailSubscriberWrp .sfforumEmailLnkWrp,
.forum-wrapper .sfforumEmailSubscriptionShown.sfforumEmailSubscriberWrp .sfforumEmailLnkWrp {
    background: none;
    border: 0;
    padding: 0;
}

/* Qualified through .sfforumEmailSubscriberWrp to outrank Sitefinity's own
   `.sfforumEmailSubscriberWrp .sfforumEmailSubscriptionInfoWrp`, which is
   also (0,2,0) and loads later. */
.forum-wrapper .sfforumEmailSubscriberWrp .sfforumEmailSubscriptionInfoWrp {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-lg);
    box-shadow:
        0 24px 52px rgba(32, 90, 125, 0.1),
        0 10px 24px rgba(32, 90, 125, 0.07),
        0 2px 6px rgba(32, 90, 125, 0.04);
    /* Opens against the right edge - the trigger sits at the end of the row. */
    left: auto;
    min-width: 260px;
    padding: var(--cw-sp-4);
    right: 0;
    text-align: left;
    top: calc(100% + var(--cw-sp-2));
    z-index: 30;
}

.forum-wrapper .sfforumEmailSubscribeMsg {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    line-height: 1.4;
    margin-bottom: var(--cw-sp-2);
}

.forum-wrapper .sfforumEmailSubscriptionInfoWrp .sfforumSubscribedEmail {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-sm) !important;
    line-height: 1.4;
    margin-bottom: var(--cw-sp-4);
    overflow-wrap: anywhere;
}

.forum-wrapper .sfforumSocialShareWrp {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    height: auto !important;
    padding: 0 !important;
}

/* The post count sits directly under the reply button with no gap. Scoped to
   the adjacent-sibling case so it only applies where that button row exists. */
.forum-wrapper .sfforumReplyPostWrp + .sfforumSocialShareWrp {
    margin-top: var(--cw-sp-5);
}

.RadSocialShare_Default {
    background-color: transparent !important;
}

.forum-wrapper input,
.forum-wrapper textarea,
.forum-wrapper select {
    font-family: var(--cw-font);
}

/* "New thread" is the primary action on a forum, so it gets the orange
   primary-button treatment. The widget renders it without a class, so it is
   matched on its ASP.NET control id suffix. */
.forum-wrapper a[id$="_newThreadLink"] {
    background-color: var(--cw-orange);
    border: 1px solid var(--cw-orange);
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow-btn);
    color: var(--cw-white);
    display: inline-block;
    font-size: var(--cw-fs-sm);
    font-weight: var(--cw-fw-bold);
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 8.96px 17.28px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all var(--cw-transition-fast);
}

.forum-wrapper a[id$="_newThreadLink"]:hover,
.forum-wrapper a[id$="_newThreadLink"]:focus {
    background-color: var(--cw-orange-hover);
    border-color: var(--cw-orange-hover);
    color: var(--cw-white);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Forums list
   -------------------------------------------------------------------------- */

.forum-wrapper table.sfforumsList {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-collapse: separate;
    border-radius: var(--cw-radius-xl);
    border-spacing: 0;
    box-shadow: var(--cw-shadow-card);
    overflow: hidden;
}

.forum-wrapper table.sfforumsList td {
    border: 0;
    border-top: 1px solid var(--cw-border-soft);
    padding: var(--cw-sp-5) var(--cw-sp-4);
    vertical-align: middle;
}

.forum-wrapper table.sfforumsList tr:first-child td,
.forum-wrapper table.sfforumsList tr:first-child + tr td {
    border-top: 0;
}

.forum-wrapper table.sfforumsList tr:hover td {
    background-color: var(--cw-surface-soft);
}

.forum-wrapper .sfforumImgWrp {
    width: 64px;
}

/* The icon is a square 50x50 png. `img { max-width: 100% }` in master.css was
   clamping it to the auto-sized table cell's ~24px while the height stayed
   40px, which read as horizontally squashed. `max-width: none` both restores
   the aspect ratio and lets the icon's own width size the cell. */
.forum-wrapper .sfforumImgWrp img {
    border-radius: var(--cw-radius-lg);
    height: 40px;
    max-width: none;
    object-fit: contain;
    width: 40px;
}

.forum-wrapper a.sfforumTitle {
    color: var(--cw-blue-dark);
    font-size: var(--cw-fs-md);
    font-weight: var(--cw-fw-bold);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.forum-wrapper a.sfforumTitle:hover,
.forum-wrapper a.sfforumTitle:focus {
    color: var(--cw-blue-primary);
    text-decoration: underline;
}

.forum-wrapper .sfforumDescription {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    line-height: 1.5;
    margin: var(--cw-sp-1) 0 0;
}

.forum-wrapper .sfforumDescription:empty {
    display: none;
}

.forum-wrapper .sfforumThreadsCountWrp,
.forum-wrapper .sfforumPostsCountWrp {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    text-align: center;
    white-space: nowrap;
    width: 100px;
}

/* Qualified through table.sfforumsList: Sitefinity's
   `.sfforumsList .sfforumThreadsCount { font-size: 14px; font-weight: normal }`
   is also (0,2,0) and loads later. */
.forum-wrapper table.sfforumsList .sfforumThreadsCount,
.forum-wrapper table.sfforumsList .sfforumPostsCount {
    color: var(--cw-blue-dark);
    display: block;
    font-size: var(--cw-fs-md);
    font-weight: var(--cw-fw-bold);
}

.forum-wrapper .sfforumLastPostWrp {
    text-align: right;
    width: 220px;
}

.forum-wrapper .sfforumLastPostWrp a {
    color: var(--cw-blue-primary);
    font-size: var(--cw-fs-sm);
}

/* Auto table layout keeps starving the last-post column in favour of the
   long title column; nowrap reserves the room it needs. */
@media (min-width: 768px) {
    .forum-wrapper .sfforumLastPostWrp a,
    .forum-wrapper .sfforumLastPostAge,
    .forum-wrapper td.sfforumThreadLastPostWrp a,
    .forum-wrapper .sfforumThreadLastPostAge {
        white-space: nowrap;
    }
}

.forum-wrapper .sfforumLastPostAge {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-xs);
    margin-top: var(--cw-sp-1);
}

/* --------------------------------------------------------------------------
   3. Threads list
   -------------------------------------------------------------------------- */

.forum-wrapper table.sfforumThreadsList {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-collapse: separate;
    border-radius: var(--cw-radius-xl);
    border-spacing: 0;
    box-shadow: var(--cw-shadow-card);
    overflow: hidden;
}

.forum-wrapper table.sfforumThreadsList thead th {
    background-color: var(--cw-surface-soft);
    border: 0;
    border-bottom: 1px solid var(--cw-border-soft);
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-xs);
    font-weight: var(--cw-fw-bold);
    letter-spacing: 0.08em;
    padding: var(--cw-sp-3) var(--cw-sp-4);
    text-align: left;
    text-transform: uppercase;
}

.forum-wrapper table.sfforumThreadsList thead th.sfforumThreadPostsWrp,
.forum-wrapper table.sfforumThreadsList thead th.sfforumThreadViewsWrp {
    text-align: center;
}

.forum-wrapper table.sfforumThreadsList thead th.sfforumThreadLastPostWrp {
    text-align: right;
}

.forum-wrapper table.sfforumThreadsList tbody td {
    border: 0;
    border-top: 1px solid var(--cw-border-soft);
    padding: var(--cw-sp-4);
    vertical-align: middle;
}

.forum-wrapper table.sfforumThreadsList tbody tr:first-child td {
    border-top: 0;
}

.forum-wrapper table.sfforumThreadsList tbody tr:hover td {
    background-color: var(--cw-surface-soft);
}

.forum-wrapper a.sfforumThreadTitle {
    color: var(--cw-blue-dark);
    font-size: var(--cw-fs-base);
    font-weight: var(--cw-fw-medium);
    line-height: 1.35;
}

.forum-wrapper a.sfforumThreadTitle:hover,
.forum-wrapper a.sfforumThreadTitle:focus {
    color: var(--cw-blue-primary);
    text-decoration: underline;
}

.forum-wrapper .sfforumThreadAgeWrp {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    margin-top: var(--cw-sp-1);
}

.forum-wrapper .sfforumThreadAnswered {
    color: var(--cw-green);
    font-size: var(--cw-fs-sm);
    font-weight: var(--cw-fw-medium);
    white-space: nowrap;
}

.forum-wrapper td.sfforumThreadPostsWrp,
.forum-wrapper td.sfforumThreadViewsWrp {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-sm);
    text-align: center;
    width: 90px;
}

.forum-wrapper td.sfforumThreadLastPostWrp {
    text-align: right;
    width: 220px;
}

.forum-wrapper td.sfforumThreadLastPostWrp a {
    color: var(--cw-blue-primary);
    font-size: var(--cw-fs-sm);
}

.forum-wrapper .sfforumThreadLastPostAge {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-xs);
    margin-top: var(--cw-sp-1);
}

/* --------------------------------------------------------------------------
   3a. Both lists stack into cards on small screens
   --------------------------------------------------------------------------
   The widest cell (a forum or thread title) plus four fixed-width columns
   cannot fit a phone, so the rows become cards instead of scrolling
   sideways. `:has(td)` skips the empty spacer <tr>s the forums list emits.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .forum-wrapper table.sfforumsList,
    .forum-wrapper table.sfforumThreadsList {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: block;
    }

    .forum-wrapper table.sfforumsList tbody,
    .forum-wrapper table.sfforumThreadsList tbody {
        display: block;
    }

    .forum-wrapper table.sfforumThreadsList thead {
        display: none;
    }

    .forum-wrapper table.sfforumsList tr:has(td),
    .forum-wrapper table.sfforumThreadsList tbody tr:has(td) {
        background-color: var(--cw-white);
        border: 1px solid var(--cw-border-soft);
        border-radius: var(--cw-radius-xl);
        box-shadow: var(--cw-shadow-card);
        display: block;
        margin-bottom: var(--cw-sp-4);
        padding: var(--cw-sp-5);
    }

    .forum-wrapper table.sfforumsList td,
    .forum-wrapper table.sfforumThreadsList tbody td {
        border: 0 !important;
        display: block;
        padding: 0;
        text-align: left !important;
        width: auto !important;
    }

    .forum-wrapper table.sfforumsList tr:hover td,
    .forum-wrapper table.sfforumThreadsList tbody tr:hover td {
        background: none;
    }

    /* Counts collapse into one meta line under the title. These need the
       table prefix to outrank the blanket `td { display: block }` above. */
    .forum-wrapper table.sfforumsList td.sfforumThreadsCountWrp,
    .forum-wrapper table.sfforumsList td.sfforumPostsCountWrp,
    .forum-wrapper table.sfforumThreadsList tbody td.sfforumThreadPostsWrp,
    .forum-wrapper table.sfforumThreadsList tbody td.sfforumThreadViewsWrp {
        display: inline-block;
        margin-right: var(--cw-sp-5);
        margin-top: var(--cw-sp-3);
    }

    .forum-wrapper table.sfforumsList .sfforumThreadsCount,
    .forum-wrapper table.sfforumsList .sfforumPostsCount {
        display: inline;
        font-size: var(--cw-fs-base);
    }

    /* The <thead> labels are gone, so the bare numbers need their own. */
    .forum-wrapper table.sfforumThreadsList tbody td.sfforumThreadPostsWrp::before {
        color: var(--cw-text-muted);
        content: "Posts: ";
    }

    .forum-wrapper table.sfforumThreadsList tbody td.sfforumThreadViewsWrp::before {
        color: var(--cw-text-muted);
        content: "Views: ";
    }

    .forum-wrapper table.sfforumsList td.sfforumLastPostWrp,
    .forum-wrapper table.sfforumThreadsList tbody td.sfforumThreadLastPostWrp {
        margin-top: var(--cw-sp-3);
    }

    /* The forum icon reads well as a card avatar at this size. */
    .forum-wrapper table.sfforumsList td.sfforumImgWrp {
        margin-bottom: var(--cw-sp-3);
    }

    /* A long trail wraps to three lines here, and because the separators are
       their own flex items one can end up dangling at the start of a line.
       Scroll it on one line instead; the heading below repeats the current
       page anyway. */
    .forum-wrapper .sfforumPostBreabcrumbWrp {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .forum-wrapper .sfforumPostBreabcrumbWrp::-webkit-scrollbar {
        display: none;
    }

    .forum-wrapper .sfforumPostBreabcrumbWrp > a,
    .forum-wrapper .sfforumPostBreabcrumbWrp > span {
        flex: 0 0 auto;
    }

    /* Narrow enough that the breadcrumb wraps into the pinned login link, so
       put it back in flow - on its own row above the forum, right-aligned. */
    .forum-wrapper > .sf_colsOut + .sf_colsOut {
        flex: 0 0 100% !important;
        order: -1;
        position: static;
        text-align: right;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   4. Filters + pager
   -------------------------------------------------------------------------- */

.forum-wrapper .sfforumsFilterWrp {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-3);
    margin: var(--cw-sp-6) 0;
}

.forum-wrapper .sfforumsFilterLbl {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
}

.forum-wrapper ul.sfthreadsFilterList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.forum-wrapper a.sfthreadsFilterListLnk {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-lg);
    color: var(--cw-blue-primary);
    display: inline-block;
    font-size: var(--cw-fs-sm);
    padding: var(--cw-sp-1) var(--cw-sp-3);
    text-decoration: none;
}

.forum-wrapper a.sfthreadsFilterListLnk:hover,
.forum-wrapper a.sfthreadsFilterListLnk:focus {
    background-color: var(--cw-surface-soft);
    border-color: var(--cw-border-strong);
    color: var(--cw-blue-dark);
    text-decoration: none;
}

/* Pill pager, ported from the renderer site's _content-list-pager.scss.
   The Previous / Next controls are injected by Content/JS/cw-forum-pager.js -
   the forums widget only renders the numbers. */
.forum-wrapper .sf_pagerNumeric {
    align-items: center;
    column-gap: 7.68px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--cw-sp-8) 0;
    row-gap: 10.24px;
}

/* The :link / :visited variants are needed because Sitefinity ships
   `.sf_pagerNumeric a:link, ... { color: #105cb6; padding: 1px 6px }`, which
   at (0,2,1) ties a plain `.forum-wrapper .sf_pagerNumeric a` and wins on
   load order. Same trap as the base link colour in master.css. */
.forum-wrapper .sf_pagerNumeric a,
.forum-wrapper .sf_pagerNumeric a:link,
.forum-wrapper .sf_pagerNumeric a:visited,
.forum-wrapper .cw-forum-pager__edge {
    align-items: center;
    background: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: 999px;
    box-shadow: var(--cw-shadow-md);
    color: var(--cw-blue-primary);
    display: inline-flex;
    font-size: 12.16px;
    font-weight: var(--cw-fw-bold);
    justify-content: center;
    line-height: 1.1;
    min-height: 35.2px;
    min-width: 35.2px;
    padding: 8.32px 10.88px;
    text-decoration: none;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        background-color 180ms ease;
}

.forum-wrapper .sf_pagerNumeric a:hover,
.forum-wrapper .sf_pagerNumeric a:link:hover,
.forum-wrapper .sf_pagerNumeric a:focus-visible,
.forum-wrapper a.cw-forum-pager__edge:hover,
.forum-wrapper a.cw-forum-pager__edge:focus-visible {
    background: #fcfcfc;
    border-color: rgba(32, 90, 125, 0.28);
    box-shadow: var(--cw-shadow-lg);
    color: var(--cw-blue-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.forum-wrapper .sf_pagerNumeric a.sf_PagerCurrent,
.forum-wrapper .sf_pagerNumeric a.sf_PagerCurrent:link,
.forum-wrapper .sf_pagerNumeric a.sf_PagerCurrent:visited {
    background: var(--cw-blue-primary);
    border-color: var(--cw-blue-primary);
    box-shadow:
        0 11.52px 25.6px rgba(32, 90, 125, 0.08),
        0 2.56px 7.68px rgba(32, 90, 125, 0.05);
    color: var(--cw-white);
    transform: none;
}

/* Previous / Next carry only a chevron, so they take the shared round shape
   above rather than the wider pill a label needed. */
.forum-wrapper .cw-forum-pager__edge.is-disabled {
    background: #f5f8fb;
    border-color: rgba(216, 224, 230, 0.9);
    box-shadow: none;
    color: var(--cw-text-muted);
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
    transform: none;
}

/* Sized up from the 9.984px it used beside a label - standing alone it reads
   against the 12.16px numerals either side of it. */
.forum-wrapper .cw-forum-pager__edge-icon {
    display: inline-flex;
    font-size: 11.52px;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .forum-wrapper .sf_pagerNumeric {
        column-gap: 5.76px;
        row-gap: 8.32px;
    }

    .forum-wrapper .sf_pagerNumeric a,
    .forum-wrapper .cw-forum-pager__edge {
        min-height: 32px;
        min-width: 32px;
        padding: 7.04px 10.88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forum-wrapper .sf_pagerNumeric a,
    .forum-wrapper .cw-forum-pager__edge {
        transition: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. Thread posts
   -------------------------------------------------------------------------- */

.forum-wrapper ol.sfforumThreadPostList {
    list-style: none;
    margin: var(--cw-sp-6) 0 0;
    padding: 0;
}

/* Scoped replacement for the old global `ol li { list-style: none }`, which
   also stripped markers from numbered lists inside posts. */
.forum-wrapper ol.sfforumThreadPostList > li {
    list-style: none !important;
}

.forum-wrapper li.sfforumThreadPost {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-xl);
    box-shadow: var(--cw-shadow-card);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-6);
    margin-bottom: var(--cw-sp-6);
    padding: var(--cw-sp-6);
    position: relative;
}

/* Empty permalink anchors stay in the tree (so #id jumps still work) but
   out of the flex flow. */
.forum-wrapper li.sfforumThreadPost > a[id]:empty {
    position: absolute;
    top: 0;
}

/* The Sitefinity forum stylesheet floats the user column at 140px and
   indents the post body by `margin-left: 150px`. Its selectors
   (`.sfforumThreadPostList .sfforumThreadPost*`) have the same specificity as
   a plain `.forum-wrapper .sfforumThreadPost*` but load after this file, so
   these overrides carry the extra `ol.sfforumThreadPostList` /
   `fieldset.sfforumPostReplyForm` qualifier to win outright. Float and width
   are moot inside the flex card, the margin is not. */
.forum-wrapper ol.sfforumThreadPostList .sfforumThreadPostContentWrp,
.forum-wrapper fieldset.sfforumPostReplyForm .sfforumReplyThreadContent,
.forum-wrapper fieldset.sfforumPostReplyForm .sfforumThreadPostContentWrp {
    margin-left: 0;
}

.forum-wrapper .sfforumThreadPostUser {
    color: var(--cw-text-muted);
    flex: 0 0 160px;
    float: none !important;
    font-size: var(--cw-fs-sm);
    max-width: 100%;
    text-align: left;
    width: auto;
}

/* Qualified through .sfforumThreadPostUser for the same reason as the margin
   reset above: Sitefinity's `.sfforumThreadPostList .sfforumUser,
   .sfforumPostReplyForm .sfforumUser` is also (0,2,0) and loads later. The
   extra ancestor covers both the post list and the reply form. */
.forum-wrapper .sfforumThreadPostUser .sfforumUser {
    color: var(--cw-blue-dark);
    display: block;
    font-size: var(--cw-fs-base);
    font-weight: var(--cw-fw-bold);
    line-height: 1.3;
    margin-bottom: var(--cw-sp-3);
}

.forum-wrapper .sfforumUserAvatarWrp {
    margin-bottom: var(--cw-sp-3);
}

.forum-wrapper img.sfforumUserAvatar {
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-lg);
    display: block;
    height: auto;
    max-width: 96px;
    width: 100%;
}

.forum-wrapper .sfforumUserPostsInfo {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
    line-height: 1.5;
}

.forum-wrapper .sfforumThreadPostContentWrp {
    flex: 1 1 320px;
    float: none !important;
    min-width: 0;
    width: auto;
}

.forum-wrapper .sfforumThreadPostContentWrp .sfforumPostAge {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
}

.forum-wrapper .sfforumThreadPostContentWrp .sfforumPostAge a {
    color: var(--cw-blue-primary);
}

.forum-wrapper a.sfforumPostPermalink {
    color: var(--cw-text-muted);
    display: inline-block;
    font-size: var(--cw-fs-xs);
    margin-bottom: var(--cw-sp-4);
}

.forum-wrapper a.sfforumPostPermalink:hover,
.forum-wrapper a.sfforumPostPermalink:focus {
    color: var(--cw-blue-primary);
}

.forum-wrapper .sfforumPostIsFeaturedWrp:empty {
    display: none;
}

.forum-wrapper .sfforumThreadPostContentWrp .sfforumThreadPostContent {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-base);
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* Lists typed into a post: Sitefinity zeroes list-style and padding on every
   ol/ul, so authored lists lose both their markers and the room for them. */
.forum-wrapper .sfforumThreadPostContent ol {
    list-style-type: decimal;
}

.forum-wrapper .sfforumThreadPostContent ul {
    list-style-type: disc;
}

.forum-wrapper .sfforumThreadPostContent ol,
.forum-wrapper .sfforumThreadPostContent ul {
    margin: var(--cw-sp-3) 0;
    padding-left: 1.5em;
}

.forum-wrapper .sfforumThreadPostContent li {
    list-style: inherit;
}

.forum-wrapper .sfforumThreadPostContent a {
    overflow-wrap: anywhere;
}

.forum-wrapper .sfforumThreadPostContent img {
    border-radius: var(--cw-radius-lg);
    max-width: 100%;
}

.forum-wrapper .sfforumThreadPostContent + input.sfforumReplyBtn,
.forum-wrapper .sfforumReplyPostWrp {
    margin-top: var(--cw-sp-5);
}

.forum-wrapper .sfQuoteContainer {
    background-color: var(--cw-surface-soft);
    border-left: 4px solid var(--cw-blue-primary);
    border-radius: var(--cw-radius-md);
    color: var(--cw-gray-dim);
    margin: var(--cw-sp-4) 0;
    padding: var(--cw-sp-4);
}

.forum-wrapper .sfQuotedUserContainer {
    color: var(--cw-text-muted);
    font-size: var(--cw-fs-sm);
}

@media (max-width: 767.98px) {
    /* Avatar on the left, name and registration meta stacked beside it. */
    .forum-wrapper .sfforumThreadPostUser {
        align-items: center;
        display: grid;
        flex: 1 1 100%;
        gap: var(--cw-sp-1) var(--cw-sp-4);
        grid-template-columns: 48px 1fr;
    }

    .forum-wrapper .sfforumUserAvatarWrp {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .forum-wrapper .sfforumUser {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
    }

    .forum-wrapper .sfforumUserPostsInfo {
        font-size: var(--cw-fs-xs);
        grid-column: 2;
        grid-row: 2;
    }

    .forum-wrapper img.sfforumUserAvatar {
        max-width: 48px;
    }

    .forum-wrapper li.sfforumThreadPost {
        gap: var(--cw-sp-5);
        padding: var(--cw-sp-5);
    }
}

/* --------------------------------------------------------------------------
   6. Reply form + RadEditor
   --------------------------------------------------------------------------
   Mostly the pre-existing functional fixes; only the chrome is restyled.
   The editor's own iframe document is out of reach of this stylesheet.
   -------------------------------------------------------------------------- */

.forum-wrapper .sfforumPostReplyContainer {
    height: unset !important;
    position: relative !important;
}

/* Same two-column card as a thread post: author on the left, composer on
   the right. Sitefinity floats the author block, which this replaces. */
.forum-wrapper fieldset.sfforumPostReplyForm {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-xl);
    box-shadow: var(--cw-shadow-card);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-6);
    margin: var(--cw-sp-6) 0;
    padding: var(--cw-sp-6);
    width: unset !important;
}

.forum-wrapper fieldset.sfforumPostReplyForm .sfforumReplyThreadContent {
    flex: 1 1 320px;
    min-width: 0;
}

.forum-wrapper h2.sfforumsReplyToTitle {
    color: var(--cw-blue-dark);
    font-size: var(--cw-fs-lg);
    font-weight: var(--cw-fw-bold);
    margin-bottom: var(--cw-sp-4);
}

.forum-wrapper h2.sfforumsReplyToTitle:empty {
    display: none;
}

.forum-wrapper fieldset.sfforumPostReplyForm .sfClose {
    display: none !important;
}

.forum-wrapper .sfError {
    color: var(--cw-red);
    font-size: var(--cw-fs-sm);
}

/* ---- Forum buttons --------------------------------------------------
   These are bare submit inputs. A JavaScript widget on the page used to
   bolt `btn btn-info` onto them at runtime; they are styled directly here
   instead, so the markup needs no patching.

   Sitefinity styles them through `.sfforumPostReplyContainer .sfSubmitBtn`
   (0,2,0) from a stylesheet that loads after this one, which outranks both
   `.btn` and `.btn-info`. Hence the qualified selectors and !important.
   -------------------------------------------------------------------- */

.forum-wrapper .sfforumPostReplyContainer input.sfSubmitBtn,
.forum-wrapper .sfforumNewThreadWrp input.sfSubmitBtn,
.forum-wrapper .sfSubmitBtnWrp input.sfSubmitBtn,
.forum-wrapper input.sfforumReplyBtn {
    background-color: var(--cw-blue-primary) !important;
    border: 1px solid var(--cw-blue-primary) !important;
    border-radius: var(--cw-radius-lg) !important;
    box-shadow: var(--cw-shadow-btn);
    color: var(--cw-white) !important;
    /* Browsers give form buttons `cursor: default`; the pointer used to come
       from Bootstrap's `.btn:not(:disabled)`, which no longer applies now
       that nothing bolts `btn btn-info` onto these at runtime. */
    cursor: pointer;
    font-family: var(--cw-font) !important;
    font-size: var(--cw-fs-sm) !important;
    font-weight: var(--cw-fw-bold) !important;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-right: var(--cw-sp-3) !important;
    min-height: 35.84px;
    padding: 8.96px 17.28px !important;
    text-transform: uppercase !important;
    transition: all var(--cw-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.forum-wrapper .sfforumPostReplyContainer input.sfSubmitBtn:hover,
.forum-wrapper .sfforumPostReplyContainer input.sfSubmitBtn:focus,
.forum-wrapper .sfforumNewThreadWrp input.sfSubmitBtn:hover,
.forum-wrapper .sfforumNewThreadWrp input.sfSubmitBtn:focus,
.forum-wrapper .sfSubmitBtnWrp input.sfSubmitBtn:hover,
.forum-wrapper .sfSubmitBtnWrp input.sfSubmitBtn:focus,
.forum-wrapper input.sfforumReplyBtn:hover,
.forum-wrapper input.sfforumReplyBtn:focus {
    background-color: var(--cw-blue-hover) !important;
    border-color: var(--cw-blue-hover) !important;
}

.forum-wrapper .sfSubmitBtnWrp {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-2);
    margin: var(--cw-sp-6) 0 0 !important;
}

/* The email-subscription buttons are bare submit inputs (2px outset border,
   platform grey), and compact because they live inside a dropdown. */
.forum-wrapper input.sfforumSubscribeBtn,
.forum-wrapper input.sfforumUnsubscribeBtn {
    background-color: var(--cw-blue-primary);
    border: 1px solid var(--cw-blue-primary);
    border-radius: var(--cw-radius-md);
    color: var(--cw-white);
    cursor: pointer;
    font-family: var(--cw-font);
    font-size: var(--cw-fs-xs);
    font-weight: var(--cw-fw-bold);
    letter-spacing: 0.04em;
    line-height: 1.3;
    min-height: 28.8px;
    padding: 6.4px 11.52px;
    text-transform: uppercase;
    transition: all var(--cw-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.forum-wrapper input.sfforumSubscribeBtn:hover,
.forum-wrapper input.sfforumSubscribeBtn:focus,
.forum-wrapper input.sfforumUnsubscribeBtn:hover,
.forum-wrapper input.sfforumUnsubscribeBtn:focus {
    background-color: var(--cw-blue-hover);
    border-color: var(--cw-blue-hover);
}

.forum-wrapper input.sfSubmitBtn:disabled,
.forum-wrapper input.sfforumReplyBtn:disabled,
.forum-wrapper input.sfforumSubscribeBtn:disabled,
.forum-wrapper input.sfforumUnsubscribeBtn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ---- New thread form ------------------------------------------------
   The widget renders the form as an <ol>, so with markers restored for
   authored lists it was numbering its own fields ("1. Title", "2.", and an
   empty "3." for a checkbox row that renders nothing). It also pins the
   title input to 500px and the editor shell to 750px.
   -------------------------------------------------------------------- */

.forum-wrapper ol.sfforumNewThreadFormList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.forum-wrapper ol.sfforumNewThreadFormList > li {
    display: block;
    list-style: none;
    margin-bottom: var(--cw-sp-6);
}

/* The checkbox row comes through empty; an empty field slot just adds a gap. */
.forum-wrapper ol.sfforumNewThreadFormList > li.sfCheckBoxWrapper:not(:has(input)) {
    display: none;
}

.forum-wrapper .sfforumNewThreadWrp label.sfTxtLbl {
    color: var(--cw-gray-dim);
    display: block;
    font-size: var(--cw-fs-sm);
    font-weight: var(--cw-fw-medium);
    margin-bottom: var(--cw-sp-2);
}

.forum-wrapper .sfforumNewThreadWrp input.sfTxt {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-md);
    box-sizing: border-box;
    color: var(--cw-gray-dim);
    font-family: var(--cw-font);
    font-size: var(--cw-fs-base);
    height: auto;
    /* Full width so the title field lines up with the editor below it -
       Sitefinity pins it to 500px, which left the form looking ragged. */
    max-width: 100%;
    padding: var(--cw-sp-2) var(--cw-sp-3);
    width: 100%;
}

.forum-wrapper .sfforumNewThreadWrp input.sfTxt:focus {
    border-color: var(--cw-blue-primary);
    box-shadow: 0 0 0 3.2px var(--cw-focus-ring);
    outline: none;
}

/* Sitefinity pins this to 750px. */
.forum-wrapper .sfforumNewThreadWrp .sfEditorWrp {
    width: 100%;
}

.forum-wrapper .sfforumNewThreadWrp a.sfCancel,
.forum-wrapper .sfforumPostReplyContainer a.sfCancel {
    color: var(--cw-blue-primary);
    font-size: var(--cw-fs-sm);
}

/* ---- RadEditor chrome ------------------------------------------------
   The editor is a table-based widget whose skin CSS this site strips (the
   forum page's own script removes RADEDITORSTYLESHEET0), so it renders as
   bare browser defaults. Re-skin the parts that live in this document: the
   frame, the toolbar and the content cell. The typing area itself is a
   separate iframe document and out of reach from here.
   -------------------------------------------------------------------- */

.RadEditor.Default {
    height: unset !important;
}

.forum-wrapper .sfEditorWrp {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
}

/* The editor emits its original design width in px on the layout tables, so
   they overflow the shell (and get clipped) unless pinned to the container. */
.forum-wrapper .RadEditor,
.forum-wrapper table.reLayoutWrapper,
.forum-wrapper table.reBottomTable {
    max-width: 100% !important;
    width: 100% !important;
}

/* The frame is a table with 1-2px decorative side and corner cells, and the
   toolbar div carries a 155px right / 4px bottom margin. Left alone they
   show up as white slivers around the tinted strip and a gap above the
   typing area, so collapse them and let everything sit flush in the shell. */
.forum-wrapper .reLeftVerticalSide,
.forum-wrapper .reRightVerticalSide,
.forum-wrapper .reTlbVertical {
    padding: 0 !important;
    width: 0 !important;
}

.forum-wrapper .reWrapper_corner,
.forum-wrapper .reWrapper_center {
    font-size: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
}

/* RadEditor writes a pixel width on the toolbar div, so the tinted strip
   stops short of the cell it sits in. */
.forum-wrapper .reToolbarWrapper {
    background-color: var(--cw-surface-soft);
    border-bottom: 1px solid var(--cw-border-soft);
    box-sizing: border-box;
    float: none;
    height: auto !important;
    margin: 0 !important;
    padding: var(--cw-sp-2) var(--cw-sp-3);
    width: 100% !important;
}

.forum-wrapper ul.reToolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
}

/* The toolbar tools are anchors with no href, so they get no pointer either. */
.forum-wrapper a.reTool,
.forum-wrapper a.reDropdown {
    cursor: pointer;
}

.forum-wrapper a.reTool.reTool_disabled {
    cursor: default;
}

.forum-wrapper a.reTool {
    border: 1px solid transparent;
    border-radius: var(--cw-radius-md);
    transition: background-color var(--cw-transition-fast), border-color var(--cw-transition-fast);
}

.forum-wrapper a.reTool:hover,
.forum-wrapper a.reTool.reTool_hovered,
.forum-wrapper a.reTool.reTool_selected {
    background-color: var(--cw-white);
    border-color: var(--cw-border-soft);
}

.forum-wrapper a.reTool.reTool_disabled {
    opacity: 0.4;
}

.forum-wrapper li.reSeparator {
    border-left: 1px solid var(--cw-border-soft);
    height: 18px;
    margin: 0 var(--cw-sp-2);
}

.forum-wrapper a.reDropdown {
    background-color: var(--cw-white);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-md);
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-xs);
    height: 27px;
    line-height: 25px;
}

.forum-wrapper a.reDropdown:hover {
    border-color: var(--cw-border-strong);
}

/* The forum page's script writes `padding-right: 7%` here and a grey border
   on the iframe, which leaves the typing area inset and double-framed. */
.forum-wrapper td.reContentCell {
    background-color: var(--cw-white);
    padding: 0 !important;
}

/* The long selector is to outrank a stored Sitefinity custom-CSS block that
   this page injects after our stylesheets:
   `.sfEditorWrp div.RadEditor .reContentCell iframe { width: 99% !important }`
   (0,3,2). That 1% is the white sliver down the right of the typing area.
   The whole stored block is legacy workaround for the old editor sizing and
   would be better deleted - see the note in the handover. */
.forum-wrapper .sfEditorWrp div.RadEditor td.reContentCell iframe,
.forum-wrapper td.reContentCell iframe {
    border: 0 !important;
    box-sizing: border-box;
    display: block;
    min-height: 400px;
    min-width: 0;
    position: relative;
    resize: none;
    width: 100% !important;
}

/* ---- Carried over from the page's CSS widget -------------------------
   The forum page used to hold a CSS content widget full of workarounds.
   These three rules were the only ones still doing real work; the rest is
   either handled above or was never valid. See the handover notes.
   -------------------------------------------------------------------- */

/* Sitefinity pins the new-thread title input to an 18px height. */
.forum-wrapper .sfforumNewThreadWrp input.sfTxt {
    height: auto;
}

/* The RadEditor skin does not ship an icon for the Emoticons tool, so the
   sprite is applied by hand and the button widened for its split arrow. */
.forum-wrapper span.Emoticons {
    background-image: url('../Images/Emoticons/smil1.GIF');
    background-repeat: no-repeat;
    text-indent: -10000000px;
    white-space: nowrap;
}

.forum-wrapper a[title="Emoticons"] {
    width: 40px;
}

/* ---- Inside the editor iframe ---------------------------------------
   Sitefinity injects the page's stylesheets into the editor's content
   iframe, so these rules land on the typing surface itself and it can be
   made to match a rendered post: white ground, brand font, real padding.
   (This replaces a legacy `font-family: unset !important` that left the
   composer in the browser's default sans-serif while posts render in Neo
   Sans, and a page background that tinted the typing area off-white.)
   -------------------------------------------------------------------- */

body.sfreContentArea {
    background-color: var(--cw-white) !important;
    box-sizing: border-box;
    color: var(--cw-gray-dim) !important;
    font-family: var(--cw-font) !important;
    font-size: var(--cw-fs-base) !important;
    height: 100%;
    left: 0;
    line-height: 1.65 !important;
    margin: 0;
    /* RadEditor's own content stylesheet caps the typing area with
       `body { max-width: 640px }`. */
    max-width: none;
    padding: var(--cw-sp-4);
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99999;
}

/* ---- Toolbar dropdown panels ----------------------------------------
   RadEditor appends these to <body>, outside .forum-wrapper, so the
   selectors here are deliberately unscoped. Its inline `16.7em` square is
   far too small for the block-format previews, which are real h1-h6
   elements and therefore pick up this site's full heading scale (up to
   52px) - they overflowed and got clipped.
   -------------------------------------------------------------------- */

.reDropDownBody {
    background-color: var(--cw-white) !important;
    border: 1px solid var(--cw-border-soft) !important;
    border-radius: var(--cw-radius-lg) !important;
    box-shadow:
        0 24px 52px rgba(32, 90, 125, 0.1),
        0 10px 24px rgba(32, 90, 125, 0.07);
    height: auto !important;
    max-height: 340px !important;
    max-width: 90vw !important;
    min-width: 240px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: var(--cw-sp-2) !important;
    width: auto !important;
}

.reDropDownBody table {
    width: 100%;
}

.reDropDownBody td {
    border-radius: var(--cw-radius-md);
    cursor: pointer;
    padding: var(--cw-sp-2) var(--cw-sp-3) !important;
}

.Default.reDropDownBody td:hover {
    background-color: var(--cw-surface-soft) !important;
    cursor: pointer !important;
}

/* Compact preview scale so each block format fits on one row. The list
   formats are legacy <dir>/<menu> elements, which arrive with the UA's
   40px indent and 1em block margins. */
.reDropDownBody h1,
.reDropDownBody h2,
.reDropDownBody h3,
.reDropDownBody h4,
.reDropDownBody h5,
.reDropDownBody h6,
.reDropDownBody p,
.reDropDownBody dir,
.reDropDownBody menu,
.reDropDownBody ul,
.reDropDownBody ol,
.reDropDownBody pre,
.reDropDownBody address {
    letter-spacing: normal;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.reDropDownBody dir,
.reDropDownBody menu,
.reDropDownBody ul,
.reDropDownBody ol {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-sm);
    list-style: none;
}

.reDropDownBody pre {
    background: none;
    border: 0 !important;
    font-size: var(--cw-fs-sm);
}

.reDropDownBody h1 {
    font-size: 22px;
}

.reDropDownBody h2 {
    font-size: 20px;
}

.reDropDownBody h3 {
    font-size: 18px;
}

.reDropDownBody h4 {
    font-size: var(--cw-fs-base);
}

.reDropDownBody h5 {
    font-size: var(--cw-fs-sm);
}

.reDropDownBody h6 {
    font-size: var(--cw-fs-xs);
}

.reDropDownBody p {
    color: var(--cw-gray-dim);
    font-size: var(--cw-fs-sm);
}