/* ── make left column & menu stretch + scroll ── */
#ucLeftNav_pnlLeftSide {
    display: flex;
    flex-direction: column;
}

    #ucLeftNav_pnlLeftSide #dynamic_nav {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

        /* ensure hamburger/button doesn’t stretch */
        #ucLeftNav_pnlLeftSide #dynamic_nav .menu-button {
            flex: 0 0 auto;
        }

        /* let the menu list fill remaining height and scroll */
        #ucLeftNav_pnlLeftSide #dynamic_nav .custom_menu {
            flex: 1;
            overflow-y: auto;
        }

/* ── reset ── */
.custom_menu,
.custom_menu ul,
.custom_menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom_menu {
    margin-top: 20px;
    max-width: 95%;
}

/* ── top project title ── */
#ul_dynamic_nav > li:first-child > a {
    display: block;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 1rem 0 0.75rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
}

/* ── shared item styles ── */
.custom_menu li {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}

    .custom_menu li > a {
        display: block;
        padding: 0.85rem 0;
        line-height: 1.4;
        font-size: 1.05rem;
        color: #4a4a4a;
        text-decoration: none;
        transition: color 0.15s;
    }

        .custom_menu li > a:hover {
            color: #000;
        }

.custom_menu a.current_page {
    font-weight: 700;
}

/* ── indentation ── */
.custom_menu ul ul li > a {
    padding-left: 1.25rem;
}

.custom_menu ul ul ul li > a {
    padding-left: 2.25rem;
}

/* ── make room for chevron & anchor positioning ── */
.custom_menu .has-submenu > a {
    position: relative;
    padding-right: 2.5rem;
}

.custom_menu .has-submenu.open > a {
    font-weight: 600;
}

/* ── chevron ── */
.custom_menu .submenu-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .custom_menu .submenu-toggle i {
        font-size: 0.9rem;
        color: #7a7a7a;
        transition: transform 0.25s ease;
    }

.custom_menu .has-submenu.open > a .submenu-toggle i {
    transform: rotate(90deg);
}

.custom_menu .submenu-toggle:hover i {
    color: #000;
}

/* ── child lists hidden by default ── */
.custom_menu ul ul {
    display: none;
}

.menu-button {
    display: none;
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.menu-button {
    padding: 0.75rem 1rem;
}

@media (max-width: 767px) {
    .menu-button {
        display: block;
        background: #ececec;
        text-align: center;
        margin-bottom: 10px;
    }

    .custom_menu {
        display: none;
    }
}



/* ============================================================================
   3. INTERIOR-PAGE STYLES
   ========================================================================= */
/* Main page header */
h1.page_header {
    font-weight: bold;
    font-size: 2.429em;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
     
}

    /* Space below each component block */
    .divComponentContainer {
        padding-bottom: 20px;
    }

        /* ---------------------------------------------------------------------------
   Titles inside each .divComponentContainer
   ------------------------------------------------------------------------ */
        /* Default (left or full window): 1.75rem */
        .divComponentContainer > span:not([class]):first-of-type {
            display: block;
            margin: 10px auto 15px;
            font-size: 1.75rem;
            font-weight: 600;
            color: #333;
        }

    /* Right‐window component titles: slightly smaller */
    .dualwindow_right .divComponentContainer > span:not([class]):first-of-type {
        display: block;
        margin: 10px auto 15px;
        font-size: 1.35rem !important;
        font-weight: 600;
        color: #333;
    }


    /* ---------------------------------------------------------------------------
   H2 headings inside components
   ------------------------------------------------------------------------ */
    /* Left‐window (or full‐width) H2: 1.75rem */
    .dualwindow_left .divComponentContainer h2 {
        font-size: 1.75rem !important;
        font-weight: 600;
        color: #333;
    }

    /* Right‐window H2: smaller */
    .dualwindow_right .divComponentContainer h2 {
        font-size: 1.35rem !important;
        font-weight: 600;
        color: #333;
    }

    /* ---------------------------------------------------------------------------
   Images inside panels (left/right controls or generic controls)
   ------------------------------------------------------------------------ */
    #ucContentPage_pnlLeftWindowControls img,
    #ucContentPage_pnlRightWindowControls img,
    #ucContentPage_pnlControls img {
        max-width: 100%;
    }

    /* ---------------------------------------------------------------------------
   Page header container padding
   ------------------------------------------------------------------------ */
    #pnlHeaderContainer {
        padding: 30px 30px 10px;
    }

    /* ---------------------------------------------------------------------------
   Dual‐window wrapper padding
   ------------------------------------------------------------------------ */
    div#ucContentPage_dualWindow {
        padding: 10px 30px 30px;
    }

    /* ---------------------------------------------------------------------------
   Single‐window content padding
   ------------------------------------------------------------------------ */
    .singlewindow {
        padding: 0 30px;
    }

    /* ---------------------------------------------------------------------------
   Left‐window padding/gutter
   ------------------------------------------------------------------------ */
    .dualwindow_left {
        padding-right: 40px !important;
    }

    /* ---------------------------------------------------------------------------
   Right‐window padding/gutter and divider
   ------------------------------------------------------------------------ */
    .dualwindow_right {
        padding-left: 40px !important;
        border-left: 1px solid #8080805e;
    }


    /* ========================================================================================================== */
    /* =============================== START CUSTOM COMPNOENT STYLES  =========================================== */
    /* ========================================================================================================== */

    /* =========================================================
   TEXT WINDOW
   ========================================================= */

    .imagealign_left {
        float: left;
        margin: 0 1em 1px 0;
        border: 1px solid black;
    }

    .imagealign_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .imagealign_right {
        float: right;
        padding: 0 0 5px 1em;
    }

    ul.bullet li > figure {
        border-radius: 100%;
        color: #fff;
        display: inline-block;
        float: left;
        font-size: 17px;
        font-weight: 700;
        height: 45px;
        margin: -5px 10px 0 0;
        padding: 8px 0;
        text-align: center;
        width: 45px;
        background: #231f20;
    }

    /*───────────────────────────────────────────────────────────────
  STAFF DIRECTORY – modern compact layout (no grid on all <div>s)
  generic selectors (id$="…")
────────────────────────────────────────────────────────────────*/

    /* Card container */
    [id$="pnlDirectoryForm"] .component_container {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        padding: 1.5rem;
        background: #f9fafb;
        border: 1px solid #e1e5e9;
        border-radius: .5rem;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        box-sizing: border-box;
    }

    /* Two equal-width columns */
    [id$="pnlDirectoryForm"] .col-xs-12.col-sm-6.col-md-6.col-lg-6 {
        flex: 1 1 300px;
        min-width: 260px;
    }

        /* ─── Label + Input on one line (inline-block) ─────────────────────── */

        /* Apply to the wrapper DIVs that directly contain a <label class="note"> and an <input.txtBox> */
        [id$="pnlDirectoryForm"] .col-xs-12.col-sm-6.col-md-6.col-lg-6 > div {
            margin-bottom: .5rem; /* spacing between rows */
            /* Remove any old 'display: grid' here */
        }

    /* Force each label.note to be a fixed inline-block and vertically centered */
    [id$="pnlDirectoryForm"] label.note {
        display: inline-block;
        width: 110px; /* same as our previous grid column */
        font-weight: 600;
        font-size: .9rem;
        color: #343a40;
        vertical-align: middle;
        margin: 0;
        line-height: 1.2;
    }

    /* Make each text‐box sit next to its label, filling the rest of the row */
    [id$="pnlDirectoryForm"] input.txtBox {
        display: inline-block;
        /* subtract label width + a small gap (.5rem) */
        width: calc(100% - 110px - .5rem);
        padding: .55rem .75rem;
        font-size: .9rem;
        border: 1px solid #ced4da;
        border-radius: .375rem;
        background: #fff;
        transition: border-color .2s, box-shadow .2s;
        vertical-align: middle;
    }

        [id$="pnlDirectoryForm"] input.txtBox:focus {
            outline: none;
            border-color: #5E2A7E;
            box-shadow: 0 0 0 3px rgba(251,111,14,.25);
        }

    /* If you have any other inline-block controls (e.g. email/title), treat the same way */
    [id$="pnlDirectoryForm"] select.ddlSelect {
        display: inline-block;
        /* for the buildings dropdown inside that same column */
        width: 100% !important;
        padding: .55rem .75rem;
        font-size: .9rem;
        border: 1px solid #ced4da;
        border-radius: .375rem;
        background: #fff;
        transition: border-color .2s, box-shadow .2s;
        margin-bottom: .5rem;
    }

        [id$="pnlDirectoryForm"] select.ddlSelect:focus {
            outline: none;
            border-color: #5E2A7E;
            box-shadow: 0 0 0 3px rgba(251,111,14,.25);
        }

    /* Custom arrow on any buildings select */
    [id$="_ddlBuildings"] {
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23343a40'><path d='M4.646 5.146a.5.5 0 0 1 .708 0L8 7.793l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/></svg>");
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 10px;
        padding-right: 2rem;
    }

    /* ─── Department checkbox list – two columns, full width ───────────── */

    /* Turn the table itself into a two-column grid (fill its entire parent width) */
    [id$="_chkLstDepartments"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem 1rem;
        width: 100%;
        border-collapse: collapse;
        margin-top: .5rem;
        padding: 0;
    }

        /* Ignore <tbody> and <tr>, so each <td> becomes a direct grid cell */
        [id$="_chkLstDepartments"] tbody,
        [id$="_chkLstDepartments"] tr {
            display: contents;
        }

        /* Style each <td> as a full-width “pill” */
        [id$="_chkLstDepartments"] td {
            display: flex;
            align-items: center;
            padding: .5rem .75rem;
            width: 100%;
            border: 1px solid #e1e5e9;
            border-radius: .375rem;
            background: #fff;
            box-sizing: border-box;
        }

        /* Standardize the checkbox size */
        [id$="_chkLstDepartments"] input[type="checkbox"] {
            width: 1em;
            height: 1em;
        }

        /* Slight left-margin on the label text inside each pill */
        [id$="_chkLstDepartments"] label {
            margin-left: .4rem;
            font-size: .85rem;
            color: #343a40;
        }

    /* ─── Buttons (search / reset) ──────────────────────────────────────── */
    [id$="_btnSearch_Directory"],
    [id$="_btnReset_Directory"] {
        appearance: none;
        border: none;
        padding: .55rem 1.25rem;
        border-radius: .375rem;
        font: 600 .9rem/1 "Rubik", sans-serif;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .2s, transform .15s;
        color: #fff;
        margin-top: 1rem;
    }

    [id$="_btnSearch_Directory"] {
        background: #5E2A7E;
    }

    [id$="_btnReset_Directory"] {
        background: #6c757d;
    }

        [id$="_btnSearch_Directory"]:hover,
        [id$="_btnReset_Directory"]:hover {
            transform: translateY(-2px);
            filter: brightness(.9);
        }

    /* ─── Results message ─────────────────────────────────────────────── */
    [id$="pnlDirectoryForm"] .results,
    [id$="_lblSearchResults"] {
        display: block;
        font-weight: 600;
        color: #151515;
        margin-top: .75rem;
    }

    /* ─── Elevate card on hover ───────────────────────────────────────── */
    [id$="pnlDirectoryForm"] .component_container:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }

    /* ─── Remove extra <br> tags inside .scTitle ──────────────────────── */
    [id$="pnlDirectoryForm"] .scTitle br {
        display: none;
    }

    /* ─── Style the “Site-wide” label under the select ───────────────── */
    [id$="pnlDirectoryForm"] .scTitle > span.scTitle {
        display: inline-block;
        margin: 0 0 .75rem 0;
        font-weight: 600;
        color: #343a40;
        font-size: .95rem;
    }


    /* ──────────────────────────────────────────────────────────
   STAFF DIRECTORY – Results header
────────────────────────────────────────────────────────── */
    [id$="_lblSearchResults"] {
        display: block;
        font-size: 1.1rem;
        font-weight: 600;
        color: #151515;
        margin-bottom: 1rem;
    }

    /* ──────────────────────────────────────────────────────────
   Result card layout container
────────────────────────────────────────────────────────── */
    [id$="lblOuterDiv"] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 1rem;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #e1e5e9;
        border-radius: 0.5rem;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        position: relative;
    }

        /* Left column (name/title/email/links/socials) */
        [id$="lblOuterDiv"] .col-md-6 {
            float: none !important;
            width: auto !important;
            flex: 0 0 60%;
            padding-right: 1rem;
            box-sizing: border-box;
        }

        /* Right column (departments) */
        [id$="lblOuterDiv"] .col-md-5 {
            float: none !important;
            width: auto !important;
            flex: 0 0 35%;
            padding-left: 1rem;
            box-sizing: border-box;
        }

    /* Stack on smaller screens */
    @media (max-width: 600px) {
        [id$="lblOuterDiv"] {
            flex-direction: column;
        }

            [id$="lblOuterDiv"] .col-md-6,
            [id$="lblOuterDiv"] .col-md-5 {
                flex: 1 1 100%;
                padding: 0;
            }
    }

    /* ──────────────────────────────────────────────────────────
   Text styling
────────────────────────────────────────────────────────── */
    span[id$="_lblName"] {
        display: block;
        font-size: 1.1rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.25rem;
    }

    span[id$="_lblTitle"] {
        display: block;
        font-size: 0.95rem;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    a.scEmail {
        display: block;
        font-size: 0.9rem;
        color: #007bff;
        margin-bottom: 0.25rem;
        clear: left;
        text-decoration: none;
    }

        a.scEmail:hover {
            text-decoration: underline;
        }

    a.scWebsite {
        display: block;
        font-size: 0.9rem;
        color: #007bff;
        text-decoration: none;
        margin-top: 0.25rem;
    }

        a.scWebsite:hover {
            text-decoration: underline;
        }

    span.scPhone {
        display: inline-block;
        font-size: 0.9rem;
        color: #495057;
        margin-top: 0.25rem;
        margin-right: 1rem;
    }

    span.scDepts {
        display: block;
        font-size: 0.9rem;
        color: #343a40;
        margin-top: 0.5rem;
        line-height: 1.4;
    }

    /* ──────────────────────────────────────────────────────────
   View More button (top right corner)
────────────────────────────────────────────────────────── */
    a.scView {
        position: absolute !important;
        top: 1rem;
        right: 1rem;
        font-size: 0.85rem;
        color: #007bff;
        text-decoration: none;
        padding: 0.25rem 0.5rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        transition: background-color 0.2s, border-color 0.2s;
    }

        a.scView:hover {
            background-color: rgba(0, 123, 255, 0.1);
            border-color: #007bff;
        }

    /* ──────────────────────────────────────────────────────────
   Social media icons
────────────────────────────────────────────────────────── */
    [id$="lblOuterDiv"] div > a > img {
        height: 24px;
        margin-right: 4px;
        vertical-align: middle;
    }


    /* =========================================================
   LINKS & DOWNLOADS COMPONENT
   ========================================================= */

    .downloadcomponent_linktext, .linkcomponent_linktext {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        display: block;
        width: 100%;
    }

    .linksList {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .liLinkTitle {
        display: block;
        margin-top: 0;
    }

    .liLinkDesc {
        font-size: 11px;
    }

    .linksList li a {
        text-decoration: none;
    }

        .linksList li a:hover {
            text-decoration: underline;
        }

    /* =========================================================
   SCHOOL CLOSINGS COMPONENT
   ========================================================= */

    .schoolclosings_titletext {
        font-size: 1.286em;
        font-weight: 500;
        color: white;
    }

    .schoolclosings_maintext {
        font-size: 1em;
        font-weight: normal;
        color: white;
    }

    /* =========================================================
   VIDEO COMPONENT
   ========================================================= */

    video {
        max-width: 100%;
    }

    .embed_container h3 {
        cursor: pointer;
        font-size: 0.857em;
        color: #313131;
        text-decoration: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .embed_container div {
        height: 0;
        overflow: hidden;
        position: relative;
    }

        .embed_container div dt {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #313131;
        }

    .embed_container dt {
        font-size: 0.714em;
        color: #0041B5;
        text-decoration: none;
    }

    /* =========================================================
   GALLERY COMPONENT
   ========================================================= */

    .gallerycomponent_maintext {
        font-size: 0.929em;
        color: black;
        text-decoration: none;
    }

    .gallerycomponent_smalltext {
        font-size: 0.857em;
        color: black;
        text-decoration: none;
    }

    ul.LiGallery {
        width: 100%;
        padding: 0;
        margin: 0 0 2em 0;
        list-style-type: none;
    }

        ul.LiGallery li span {
            display: block;
            width: 100%;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        ul.LiGallery li a {
            display: block;
            width: 100%;
            position: relative;
            height: 0;
            padding: 56.25% 0 0 0;
            overflow: hidden;
        }

    img.LiPhoto {
        position: absolute;
        display: block;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
    }

    /* =========================================================
   SURVEY COMPONENT
   ========================================================= */

    .survey_maintext {
        font-size: 1em;
        color: black;
        font-weight: bold;
    }

    .survey_smalltext {
        font-size: 0.929em;
    }

        .survey_smalltext a {
            font-size: 0.857em;
            color: #3e699e;
            text-decoration: none;
        }

            .survey_smalltext a:hover {
                text-decoration: underline;
            }

    .survey_questiontext {
        font-size: 1em;
        color: black;
    }

    .survey_mainlink {
        font-size: 0.929em;
        color: blue;
        text-decoration: none;
    }

    .survey_spacer {
        height: 4px;
    }

    .survey_divider {
        height: 1px;
        background-color: black;
    }

    .survey_background {
        background-color: gainsboro;
    }

    .survey_errormsg {
        font-weight: bold;
        font-size: 0.929em;
        color: #df0000 !important;
        text-decoration: none;
    }

    /* =========================================================
   EMPLOYMENT COMPONENT
   ========================================================= */

    .employment_titletext {
        font-size: 1.143em;
        color: #666666;
        font-weight: bold;
    }

    .employment_maintext {
        font-size: 0.929em;
        color: black;
        font-weight: bold;
    }

    .employment_smalltext {
        font-size: 0.929em;
        color: #333333;
    }

    .employment_mainlink {
        font-size: 0.929em;
        color: blue;
        text-decoration: none;
    }

    .employmentBG_itemsep {
        height: 1px;
        background-color: #ffffff;
    }

    .employmentBG_groupsep {
        height: 1px;
        margin: 4px 0;
        background-color: #c4c4c4;
    }

    .employment_bar {
        height: 1px;
        background-color: #313131;
    }



    /* =========================================================
   PODCAST COMPONENT
   ========================================================= */

    .podcast_titletext {
        font-size: 1.143em;
        font-weight: bold;
        color: black;
    }

    .podcast_maintext {
        font-size: 0.929em;
        font-weight: normal;
        color: #333333;
    }

    .podcast_smalltext {
        font-size: 0.857em;
        color: black;
    }

    .podcast_mainlink {
        font-size: 0.929em;
        color: blue;
        text-decoration: none;
    }

    .podcast_altBG {
        background-color: #dfebf7;
    }

    /* =========================================================
   BLOG COMPONENT
   ========================================================= */

    .blog_maintext {
        font-size: 1.071em;
        color: black;
    }

    .blog_mainlink {
        font-size: 0.929em;
        color: blue;
        text-decoration: none;
    }

    .blog_smalltext {
        font-size: 0.714em;
        color: black;
    }

    .blog_smalllink {
        font-size: 0.714em;
        color: blue;
        text-decoration: none;
    }

    .blog_titletext {
        font-size: 1.5em;
        color: black;
        font-weight: normal;
    }

    .blog_posttitle {
        font-size: 1.143em;
        color: #222222;
        font-weight: bold;
    }

    .blog_sideBG {
        background-color: #dfebf7;
    }


/* ============================================================================
   NEWS COMPONENT — CLEANED & REFACTORED
   ============================================================================ */

/* 1) Outer wrapper */
.divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 24px;
}

    /* 2) Header row (title + toolbar) */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(1),
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    /* Title styling */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) h2 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 600;
        color: #333;
    }

    /* RSS icon */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) i.fa-rss {
        font-size: 1.5rem;
        color: #5E2A7E;
    }

    /* Archive link */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) a.newscomponent_archivelink {
        font-size: 1rem;
        font-weight: 600;
        color: #1F1F1F;
        text-decoration: none;
        transition: color 0.2s;
    }

        .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) a.newscomponent_archivelink:hover {
            color: #5E2A7E;
        }

    /* 3) News items (every div after the first two) */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-row-gap: 8px;
        grid-column-gap: 16px;
        padding: 16px 0;
        border-top: 1px solid #e0e0e0;
        align-items: start;
    }

    /* remove top border on first item */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(3) {
        border-top: none;
    }

    /* Item title */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) h3 {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 600;
        color: #333;
        grid-column: 1;
    }

    /* Item description */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) span[id*="lblSubHeader"] {
        display: block;
        margin-top: 4px;
        font-size: 0.95rem;
        color: #555;
        line-height: 1.4;
        max-width: 600px;
        grid-column: 1;
    }

    /* Read-More button */
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) a[id*="hlReadMore"] {
        background: #5E2A7E;
        color: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        transition: background 0.2s;
        justify-self: end;
        align-self: center;
        grid-column: 2;
    }

        .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) a[id*="hlReadMore"]:hover {
            background: #e55c00;
        }

/* 4) Responsive tweaks */
@media (max-width: 767px) {
    .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .divComponentContainer:has(a[id*="rptNewsList_ctl00_lnkRSSFeed"]) > div:nth-child(n+3) a[id*="hlReadMore"] {
            margin-top: 8px;
            justify-self: auto;
        }
}


    /* =========================================================
   EVENTS COMPONENT
   ========================================================= */

    .eventcomponent_item {
        width: 100% !important; /* override inline width */
        float: none !important; /* override inline float */
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 16px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.3s ease;
    }

        .eventcomponent_item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

    .eventcomponent_leftcontainer {
        flex-shrink: 0;
        margin-right: 16px;
    }

    .eventDateBubble {
        width: 60px;
        height: 60px;
        background: #5E2A7E;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        padding: 0;
        line-height: 1;
    }

        .eventDateBubble .eventText {
            display: block !important;
            width: auto !important;
            margin: 0;
            line-height: 1;
        }

            .eventDateBubble .eventText:first-child {
                font-size: 14px;
                text-transform: uppercase;
            }

    eventDateBubble .eventText:last-child {
        font-size: 24px;
        font-weight: 700;
    }

    .eventDateBubble br {
        display: none;
    }

    .eventcomponent_textcontainer {
        flex-grow: 1;
    }

    .eventcomponent_linktext {
        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: #000;
        text-decoration: none;
        margin-bottom: 6px;
        display: inline-block;
    }

        .eventcomponent_linktext:hover {
            color: #ff6600;
        }

    .eventcomponent_maintext {
        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        font-size: 14px;
        color: #555;
        line-height: 1.4;
    }

    /* Calendar styles */
    .eventCalendar,
    .weeklyEventCalendar {
        width: 100%;
        font-size: 1em;
        border: none !important;
        border-radius: 2px;
        background: #fafafa;
        box-sizing: border-box;
        margin: 0 auto;
    }

        .eventCalendar th,
        eventCalendar td {
            border: none;
            background: none;
        }

    .eventCalendar_todayDayStyle {
        background: none !important;
    }

    .eventCalendar th {
        padding: 10px 0;
        color: #101010;
        background: none;
        font-weight: bold;
        font-size: 1em;
    }

    .eventCalendar a {
        text-decoration: none !important;
    }

    .eventCalendar_titleStyle {
        border: none;
        font-size: 1.429em;
        font-weight: bold;
        text-transform: uppercase;
    }

        .eventCalendar_titleStyle td {
            padding: 10px 0;
        }

    .eventCalendar_nextPrevStyle a {
        color: #fff !important;
        text-decoration: none !important;
        font-size: 1.714em;
        text-align: center;
        padding: 0 25px;
        margin-top: -2px;
    }

    .eventCalendar_dayStyle a,
    .eventCalendar_todayDayStyle a,
    .eventCalendar_otherMonthDayStyle a {
        width: 26px;
        height: 26px;
        line-height: 24px;
        padding: 0;
        margin: 0;
        text-align: center;
        display: block;
    }

    .eventCalendar_dayStyle a {
        background-color: none;
        color: inherit !important;
    }

    .eventCalendar_todayDayStyle a {
        font-weight: bold;
    }

    .eventCalendar_otherMonthDayStyle a {
        display: none;
    }

    .eventCalendar_otherMonthDayStyle a {
        background: transparent !important;
        color: transparent !important;
        padding: 0;
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
    }

    .eventCalendar_dayStyle,
    .eventCalendar_todayDayStyle {
        padding: 5px 0;
    }

    .eventCalendar tr:not(:first-child) td:first-child,
    .eventCalendar th td:first-child {
        padding-left: 10px;
    }

    .eventCalendar tr:not(:first-child) td:last-child,
    .eventCalendar th td:last-child {
        padding-right: 10px;
    }

    .eventCalendar tr:last-child td {
        padding-bottom: 10px;
    }

    .eventCalendarWeekly_otherMonthDayStyle {
        padding: 5px 0;
        background: #ddd !important;
    }

        .eventCalendarWeekly_otherMonthDayStyle a {
            width: 24px;
            height: 24px;
            line-height: 24px;
            padding: 0 !important;
            margin: 0;
        }

    .list-group-alternating li.list-group-item:nth-child(odd) {
        background: #efefef;
    }


    /* =========================================================
   ARCHIVE NEWS & FILTERS
   ========================================================= */

    .configs {
        font-weight: bold;
        font-size: 1.286em;
    }

    .cblAreas {
        font-weight: normal;
        font-size: 0.714em;
        color: #333333;
    }

        .cblAreas tr td {
            width: 33%;
        }

    .ddl_buildings {
        width: 210px;
    }

    .filterTitle {
        font-weight: bold;
        font-size: 0.929em;
        color: #333333;
        padding: 10px 0 5px 0;
    }

    .filterContainer {
        width: 225px;
        float: left;
        background-color: #f3f3f3;
        padding: 10px 10px 30px 10px;
        margin-bottom: 10px;
        border: 1px solid black;
    }

    .pagingMenu {
        padding: 5px 5px 10px 5px;
        font-size: 1em;
        font-weight: bold;
        background-color: #f3f3f3;
        border: 1px solid black;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .monthDiv {
        margin: 5px 5px 15px 5px;
        padding: 5px;
        background-color: #f3f3f3;
        display: none;
        font-size: 0.857em;
        border: 1px solid black;
    }

    .altNewsItem {
        background-color: #f3f3f3;
    }

    .monthTitle {
        margin: 5px;
        padding: 5px;
        font-weight: bold;
    }

    /* =========================================================
   IFRAME IN MODAL
   ========================================================= */

    .bootbox-body iframe {
        position: relative;
        height: 90vh;
    }

    /* =========================================================
   CAPTCHA ELEMENTS
   ========================================================= */

    .captcha_img {
        margin-bottom: 15px;
    }

    .captcha-text {
        font-size: 0.714em;
    }