/*Home Page*/

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 750px;
    padding: 100px;
    overflow: hidden;
}

h1 {
    text-transform: none !important; /* Prevents the masterpage uppercase transformation */
}

/* Background image layer */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../Images/NewSite/eXCHANGE_LandingPageBackground.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark overlay — 60% opacity #1B1B1B */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(27, 27, 27, 0.60);
    z-index: 1;
}

/* Content sits above the overlay */
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1240px;
}

/* Text block */
.hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main title */
.hero__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 68px;
    font-weight: 900;
    line-height: 72px;
    color: #FFFFFF;
    margin: 0;
}

/* Subtitle / tagline */
.hero__subtitle {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    font-style: italic;
    line-height: 40px;
    color: #FFFFFF;
    margin: 0;
}

/* Description paragraph */
.hero__description {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #FFFFFF;
    margin: 0;
}

/* CTA button — secondary (orange) large */
.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content; /* Ensures button only takes up the size of its text + padding */
    gap: 8px;
    padding: 16px 24px;
    background-color: #C05600;
    border: 2px solid #C05600;
    border-radius: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #FFFFFF !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .hero__cta:hover {
        background-color: #5F3617;
        border-color: #5F3617;
    }

    .hero__cta:focus-visible {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }

.doe-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 60px 100px;
    background-color: #1A204C;
}

/* DOE logo — white single-color version */
.doe-footer__logo {
    width: 225px;
    height: 65px;
    flex-shrink: 0;
}

    .doe-footer__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Link columns container */
.doe-footer__columns {
    display: flex;
    gap: 40px;
    flex-grow: 1;
    justify-content: space-around;
}

/* Individual link column */
.doe-footer__column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Column heading */
.doe-footer__heading {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}

/* Link list within a column */
.doe-footer__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Footer link (internal) */
.doe-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #FFFFFF !important;
    text-decoration: underline;
}

    .doe-footer__link:hover {
        color: #B3D4FC;
    }

/* External link icon (USWDS "launch" icon) */
.doe-footer__link-icon {
    width: 15px;
    height: 15px;
    fill: #FFFFFF;
    flex-shrink: 0;
}



.subfooter {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding: 48px 100px;
    background-color: #E6E6E6;
}

.subfooter__text {
   /* max-width: 1080px;*/
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #1B1B1B;
    text-align:left;
}

/* Bold lead-in label */
.subfooter__label {
    font-weight: 700;
}

/* Support email link */
.subfooter__text a {
    color: #005EA2;
    text-decoration: underline;
}

    .subfooter__text a:hover {
        color: #003D73;
    }

#doe-banner {
   /* display: flex;
    align-items:end;
    justify-content: space-between;*/
    width: 100%;
    height: 105px;
    padding: 20px 24px 20px 40px;
    background-color: #0F142E;
}

/*
LoginPage*/

.register-page {
    display: flex;
    flex-direction: column;
    gap: 40px;
  /*  max-width: 1440px;*/
   /* padding: 10px;*/
    background: #ffffff;
    border-radius: 8px;
    
}

/* Header */
.register-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.register-title {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 38px;
    color: #1b1b1b;
    margin: 0;
}

.register-subtitle {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #1b1b1b;
    margin: 0;
}

/* Cards row */
.register-cards {
    display: flex;
    gap: 24px;
}

/* Individual card */
.register-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 24px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.register-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
}

.register-card__label {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    color: #1b1b1b;
    margin: 0;
}

.register-card__help-text {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #1b1b1b;
    margin: 0;
}

/* Orange accent bar */
.register-card__accent {
    display: block;
    width: 87px;
    height: 4px;
    background: #c05600;
    border-radius: 10px;
}

/* Card button */
.register-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #21409a;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #21409a;
    text-decoration: none;
    cursor: pointer;
}

    .register-card__button:hover {
        background: #21409a;
        color: #ffffff;
    }

/* Footer text */
.register-footer {
    font-family: 'Figtree', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #1b1b1b;
    margin: 0;
}

    .register-footer strong {
        font-weight: 700;
    }

    .register-footer a {
        font-weight: 400;
        color: #21409a;
        text-decoration: underline;
    }

/*    Registration page*/

.register-page__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.register-page__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    color: #1B1B1B;
    padding-bottom: 20px;
}

.register-page__description {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

/* ---- Auth Cards Row ---- */

.register-page__cards {
    display: flex;
    gap: 24px;
    margin-top:40px;
}

/* Individual auth card */
.auth-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 24px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Card text block */
.auth-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-card__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

.auth-card__subtitle {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

/* Orange accent bar under subtitle */
.auth-card__accent {
    width: 87px;
    height: 4px;
    background-color: #C05600;
    border-radius: 10px;
}

/* Outline button inside card */
.auth-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #FFFFFF;
    border: 2px solid #21409A;
    border-radius: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #21409A;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    align-self: flex-start;
}

    .auth-card__btn:hover {
        background-color: #21409A;
        color: #FFFFFF;
    }

    .auth-card__btn:focus-visible {
        outline: 2px solid #005EA2;
        outline-offset: 2px;
    }

/* ---- Login redirect text ---- */

.register-page__login-prompt {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #1B1B1B;
    margin-top: 40px;
}

    .register-page__login-prompt a {
        font-weight: 400;
        color: #21409A;
        text-decoration: underline;
    }

        .register-page__login-prompt a:hover {
            color: #1F3683;
        }

/* ---- User Guides & Help Pages ---- */

.help-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top:40px
}

.help-section__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

.help-section__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #21409A;
    text-decoration: underline;
}

    .help-section__link:hover {
        color: #1F3683;
    }

.help-section__link-icon {
    width: 20px;
    height: 20px;
    fill: #21409A;
    flex-shrink: 0;
}


/* ---- User Guides & Help Pages ---- */

.help-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-section__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

.help-section__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #21409A;
    text-decoration: underline;
}

.help-section__link:hover {
    color: #1F3683;
}

.help-section__link-icon {
    width: 20px;
    height: 20px;
    fill: #21409A;
    flex-shrink: 0;
}

/*FOA details*/

/* ============================
   Announcement Card
   ============================ */
.announcement-card {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    padding: 40px 60px;
    background: #ffffff;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    color: #1b1b1b;
}

/* --- Header --- */
.announcement-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.announcement-title {
    font-weight: 800;
    font-size: 32px;
    line-height: 38px;
    margin: 0;
}

.announcement-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.announcement-meta__item {
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}

.announcement-meta__item strong {
    font-weight: 500;
}

.announcement-accent {
    display: block;
    width: 103px;
    height: 4px;
    background: #c05600;
    border-radius: 10px;
}

/* --- Two-column layout --- */
.announcement-details {
    display: flex;
    gap: 0;
    padding-top: 40px;
}

.announcement-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-right: 24px;
    padding-bottom: 60px;
    max-width: 920px;
}

.announcement-sidebar {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 12px 24px;
}

/* --- Abstract --- */
/*.announcement-abstract p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 0.5em;
}

.announcement-abstract p strong {
    font-weight: 700;
}*/

.announcement-abstract {
    font-size: 16px !important;
    line-height: 24px;
    margin: 0 0 0.5em;
    font-weight: 600 !important;
}

/* --- Section titles --- */
.announcement-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.announcement-section__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 10px !important;
}

.announcement-section__description {
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
}

.announcement-section__body {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

    .announcement-section__body a {
        color: #21409a;
        text-decoration: underline;
    }

/* --- Document groups --- */
.doc-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 24px;
}

.doc-group__title {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.doc-group__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-group__subtitle {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin: 8px 0 0;
}

/* --- File list --- */
.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-list--indented {
    padding-left: 24px;
    gap: 4px;
}

.file-list__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px !important;
    line-height: 24px;
}

.file-list__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.file-list__item a {
    color: #21409a;
    text-decoration: underline;
}

.file-list__date {
    color: #1b1b1b;
    white-space: nowrap;
}

/* --- Apply button area --- */
.announcement-sidebar__apply {
    display: flex;
    flex-direction: column;
    gap: 12px;
}



    .btn--primary:hover {
        background: #1a3380;
        border-color: #1a3380;
    }

.announcement-sidebar__note {
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}

/* --- Deadline card --- */
.deadline-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #e9ecf5;
    border-radius: 8px;
}

.deadline-card__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.deadline-topic {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deadline-topic__title {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}

.deadline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

    .deadline-list dt {
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
    }

    .deadline-list dd {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 8px;
    }

/* --- Sidebar sections --- */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-section__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.sidebar-section__body {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

    .sidebar-section__body a {
        color: #21409a;
        text-decoration: underline;
    }

/* --- Contact blocks --- */
.contact-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
   /* margin-bottom: 8px;*/
}

.contact-block p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 !important;
}

.contact-block a {
    color: #21409a;
    text-decoration: underline;
    font-size: 16px;
    line-height: 14px;
}
    /* Reset spacing on nested contact-block wrapper */
    .contact-block .contact-block {
        margin: 0 !important;
        padding: 0 !important;
    }


/*    annoucement alert css*/

.usa-alert {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background-color: #E8F5FF;
    border-left: 0.0rem solid #a9aeb1;
    margin-top: 0rem;
}

.usa-alert__content {
    display: flex;
    align-items: flex-start;
  /*  width: 100%;
   padding: 8px 16px 8px 40px;
    gap: 14px;*/
  padding-left:40px;
}

/* Info icon — 24×24 container, 20×20 vector path */
.usa-alert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #1B1B1B;
}

.usa-alert__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Alert body text */
.usa-alert__text {
    flex: 1;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1B1B1B;
}

.usa-alert__text a {
    color: #005EA2;
    text-decoration: underline;
}

.usa-alert__text a:hover {
    color: #003D73;
}

/*Breadcrumb css*/

.breadcrumb-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding: 0px 40px;
    background-color: #0F142E;
}

/* Breadcrumb trail container */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 15px;
}

/* Individual breadcrumb item */
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Home icon (first crumb) */
.breadcrumb__home-icon {
    width: 20px;
    height: 20px;
    fill: #FFFFFF !important;
    flex-shrink: 0;
    color: #FFFFFF !important;
}

/* Breadcrumb link */
.breadcrumb__link {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #FFFFFF !important;
    text-decoration: underline;
}

    .breadcrumb__link:hover {
        color: #FFFFFF;
    }

/* Separator chevron (navigate_next) */
.breadcrumb__separator {
    width: 20px;
    height: 10px;
    /*fill: #FFFFFF !important;*/
    color: #FFFFFF !important;
    flex-shrink: 0;
}

/* Current page — no link, no underline */
.breadcrumb__current {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: none;
}

/*Funding opportunity search filters*/


.search-frame {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 40px 60px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

/* Section title */
.search-frame__title {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    color: #1B1B1B;
    margin: 0;
}

/* ---- Filter Card Row (dropdown selects) ---- */

.search-frame__card-row {
    display: flex;
    gap: 24px;
}

/* Individual filter card */
.filter-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    background-color: #E6EEF5;
    border-radius: 8px;
}

.filter-card__label {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    color: #1B1B1B;
    margin: 0;
}

/* Dropdown select field */
.filter-card__field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: #FFFFFF;
    border: 1px solid #1B1B1B;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1B1B1B;
    cursor: pointer;
}

.filter-card__field-text {
    flex: 1;
    line-height: 24px;
}

/* Clear + divider + chevron group */
.filter-card__field-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.filter-card__field-icon {
    width: 20px;
    height: 20px;
    fill: #1B1B1B;
    cursor: pointer;
}

.filter-card__field-divider {
    width: 1px;
    height: 24px;
    background-color: #919191;
}

/* ---- Text Input Row (keyword + subprogram) ---- */

.search-frame__input-row {
    display: flex;
    gap: 24px;
}

/* Text input group */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group--grow {
    flex: 1;
}

.input-group__label {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #1B1B1B;
    margin: 0;
}

.input-group__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 8px;
    background-color: #FFFFFF;
    border: 1px solid #1B1B1B;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1B1B1B;
}

    .input-group__field::placeholder {
        color: #757575;
    }

.input-group__clear {
    width: 20px;
    height: 20px;
    fill: #1B1B1B;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Selection Row (radios + checkboxes) ---- */

.search-frame__selection-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 4px;
}

.search-frame__heading {
    font-weight: 800;
    font-size: 34px;
    line-height: 38px;
    margin-bottom: 20px !important;
}

.search-frame__subheading {
    font-weight: 800;
    font-size: 25px;
    line-height: 20px;
    margin-bottom: 20px !important
        ;
}

/* Selection group (radio or checkbox) */
.selection-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.selection-group__label {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #1B1B1B;
    margin: 0;
}

.selection-group__options {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Radio button */
.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.radio__input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #1B1B1B;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
}

    .radio__input:checked {
        border-color: #005EA2;
        background: radial-gradient(circle, #005EA2 40%, #FFFFFF 41%);
    }

.radio__label {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1B1B1B;
}

/* Checkbox */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox__input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #1B1B1B;
    border-radius: 2px;
    background-color: #FFFFFF;
    cursor: pointer;
}

    .checkbox__input:checked {
        background-color: #005EA2;
        border-color: #005EA2;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10.8L3.2 8l-1 1L6 12.8l8-8-1-1-7 7z'/%3E%3C/svg%3E");
        background-size: 14px;
        background-position: center;
        background-repeat: no-repeat;
    }

.checkbox__label {
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1B1B1B;
}

/* ---- Search Button ---- */

.search-frame__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #21409A;
    border: 2px solid #21409A;
    border-radius: 4px;
    font-family: 'Figtree', 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .search-frame__submit:hover {
        background-color: #1F3683;
        border-color: #1F3683;
    }

    .search-frame__submit:focus-visible {
        outline: 2px solid #005EA2;
        outline-offset: 2px;
    }

/*DOE Banner — Site Header*/

.doe-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 105px;
    padding: 20px 24px 20px 40px;
    background-color: #0F142E;
}

/* DOE Logo — seal + wordmark lockup
   The logo is a vector/image asset; use an <img> or inline SVG */
.doe-banner__logo {
    display: block;
    width: 228px;
    height: 65px;
    flex-shrink: 0;
}

    .doe-banner__logo img,
    .doe-banner__logo svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Action buttons container */
.doe-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Outline button style (Register / Login) */
.doe-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #FFFFFF;
    border: 2px solid #21409A;
    border-radius: 4px;
    color: #21409A;
    font-family: 'Figtree';
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .doe-banner__btn:hover {
        background-color: #21409A;
        color: #FFFFFF;
    }

    .doe-banner__btn:focus-visible {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }

/*   Search page css*/

/*body, button, input, select, textarea, .dx-widget, .dx-widget *, .search-frame__heading, .search-frame__subheading {
    font-family: 'Figtree', sans-serif !important;
}*/

body, button, input, select, textarea, .search-frame__heading, .search-frame__subheading {
    font-family: 'Figtree', sans-serif !important;
}

.dx-widget, dx-widget * {
    font-family: 'DXIcons', 'Figtree', sans-serif !important;
}

.dx-dropdowneditor-icon {
    height: 10% !important;
}
/*.dx-header-row > td {
            background: rgb(0, 94, 162) !important;
        }*/

.dx-header-row > td {
    background: rgb(33, 64, 154) !important;
    color: white !important;
}

.dx-radiobutton-icon-checked {
    border-color: rgb(33, 64, 154) !important;
}

    .dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
        background-color: rgb(33, 64, 154) !important;
    }

.custom-padded-tagbox .dx-placeholder::before {
    padding-left: 5px !important;
}

.dx-tagbox .dx-tag-container {
    padding-left: 11px !important;
}

.dx-tag-content {
    background-color:white !important;
}

/* Ensure DevExtreme overlays, context menus, and popups appear above modals */
.dx-overlay-wrapper,
.dx-context-menu,
.dx-header-filter-menu {
    z-index: 15000 !important;
}

/* Allow dxList item content text to wrap */
#checkBoxList .dx-list-item-content {
    white-space: normal !important;
}
/* Align dxList checkboxes*/
#checkBoxList .dx-list-item-before-bag {
    vertical-align: baseline;
}


/* Change background and text color of selected dxButtonGroup item */
#topNavigationOrgs .dx-item-selected {
    background-color: #21409a !important; /* Your selected color */
    color: white !important; /* Text color */
}

/* Optional: hover style should match */
#topNavigationOrgs .dx-item-selected:hover {
    background-color: #336bbd !important;
}


/* --- Search button --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background: #21409a;
    border-color: #21409a;
    color: #ffffff !important;
    background-color: #21409A;
}

    .btn--primary:hover {
       /* background: #1a3380;*/
        border-color: #1a3380;
    }

/* ============================
   Announcement Card
   ============================ */
.announcement-card {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    padding: 40px 60px;
    background: #ffffff;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    color: #1b1b1b;
}

/* --- Header --- */
.announcement-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.announcement-title {
    font-weight: 800;
    font-size: 32px;
    line-height: 38px;
    margin: 0;
}

.announcement-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.announcement-meta__item {
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}

    .announcement-meta__item strong {
        font-weight: 700;
    }

.announcement-accent {
    display: block;
    width: 103px;
    height: 4px;
    background: #c05600;
    border-radius: 10px;
}

/* --- Two-column layout --- */
.announcement-details {
    display: flex;
    gap: 0;
    padding-top: 40px;
}

.announcement-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-right: 24px;
    padding-bottom: 60px;
    max-width: 920px;
}

.announcement-sidebar {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 12px 0 12px 24px;
}

/* --- Abstract --- */
.announcement-abstract p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 0.5em;
}

    .announcement-abstract p strong {
        font-weight: 700;
    }

/* --- Section titles --- */
.announcement-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.announcement-section__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.announcement-section__description {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.announcement-section__body {
    font-size: 16px;
    line-height: 19px;
    margin: 0;
}

    .announcement-section__body a {
        color: #21409a;
        text-decoration: underline;
    }

/* --- Document groups --- */
.doc-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.doc-group__title {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.doc-group__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-group__subtitle {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin: 8px 0 0;
}

/* --- File list --- */
.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-list--indented {
    padding-left: 24px;
    gap: 4px;
}

.file-list__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
}

.file-list__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.file-list__item a {
    color: #21409a;
    text-decoration: underline;
}

.file-list__date {
    color: #1b1b1b;
    white-space: nowrap;
}

/* --- Apply button area --- */
.announcement-sidebar__apply {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    align-self: flex-start;
}

.btn--primary {
    background: #21409a;
    border-color: #21409a;
    color: #ffffff !important;
}

    .btn--primary:hover {
        background: #1a3380;
        border-color: #1a3380;
    }

.announcement-sidebar__note {
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}

/* --- Deadline card --- */
.deadline-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #e9ecf5;
    border-radius: 8px;
}

.deadline-card__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.deadline-topic {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deadline-topic__title {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}

.deadline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

    .deadline-list dt {
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
    }

    .deadline-list dd {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 8px;
    }

/* --- Sidebar sections --- */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-section__title {
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.sidebar-section__body {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

    .sidebar-section__body a {
        color: #21409a;
        text-decoration: underline;
    }

/* --- Contact blocks --- */
.contact-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
/*
    .contact-block p {
        font-size: 16px;
        line-height: 24px;
        margin: 0;
    }*/

    .contact-block a {
        color: #21409a;
        text-decoration: underline;
        font-size: 16px;
        line-height: 24px;
    }

    .contact-block > span {
        display: inline-flex;
        align-items: center;
        margin-top: 0;
    }

.dx-item-selected {
    background: #ffffff !important;
}

dx-tag-remove-button{
    padding:10px !important;
    margin-left : 4px !important;
}

.dx-tag-content {
    min-width:none !important;
    padding-inline-end:8px !important;
}

.formValue table td {
    vertical-align: middle !important;
}

.dxeRadioButtonList span {
    vertical-align: middle !important;
}

.dx-datagrid-nowrap, .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content {
    white-space: normal !important;
    display: inline-block;
    vertical-align: middle;
  /*  margin-top: 10px;*/
    padding: 0px;
}

/*Default page CSS*/

#sharedAlignmentContainer {
    width: 100%;
    /*max-width: 1390px;*/
    margin-left: 0;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

.search-button-container {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.search-button {
    background-color: #21409A !important;
    color: white !important;
    border-radius: 4px;
    padding: 12px 20px;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#gridContainer {
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Dropdown Arrow Fallback Custom Styles */
.dx-dropdowneditor-button-custom {
    border: none !important;
    border-left: none !important;
    background: transparent !important;
}

.dx-dropdowneditor-icon-custom {
    background: none !important;
    background-image: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    font: none;
}

.custom-css-arrow {
    width: 0;
    height: 0;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #005EA2;
    border-bottom: none;
    pointer-events: none;
    z-index: 10;
}

/* Grid Header & Detail Formatting Rules */
.dx-header-row .dx-datagrid-text-content,
.dx-header-row .dx-datagrid-action:hover,
.dx-header-row td:hover,
.dx-header-row .dx-header-filter:hover {
    color: #ffffff !important;
}

/* Nested detail grid header styling */
.dx-master-detail-row .dx-datagrid-headers .dx-header-row,
.dx-master-detail-row .dx-datagrid-headers .dx-header-row td {
    background-color: #ffffff !important;
    color: #000000 !important;
}

    .dx-master-detail-row .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content {
        color: #000000 !important;
    }

/* Align header and data cells in nested grid */
.dx-master-detail-row .dx-datagrid-rowsview .dx-data-row td,
.dx-master-detail-row .dx-datagrid-headers td {
    padding: 8px 10px !important;
    text-align: left !important;
}

.dx-master-detail-row .dx-datagrid .dx-datagrid-text-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Tag remove icon */
.dx-tag-remove-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
}

    .dx-tag-remove-button::before {
        content: '\2715' !important;
        font-family: sans-serif !important;
        font-size: 11px !important;
        color: #4a4a4a !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

/* Master Detail UI Elements */
.master-detail-header {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 0;
}

.font-weight-bold {
    font-weight: bold;
}

.view-details-button {
    margin-left: 10px;
    border-radius: 5px;
    border: 2px solid #21409A;
    color: #21409A !important;
    font-weight: bold;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px;
}


/* Base Tile Style */
.filter-tile-base {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid #ddd;
    width: 100%;
}

/* Variant: Base + Highlight Color & Right Margin */
.filter-tile-highlight {
    margin-right: 20px;
    background-color: #E6EEF5;
}

/* Variant: Column-based Tile (32% width) */
.filter-tile-col {
    margin-right: 2%;
    width: 32%;
    margin-bottom: 20px;
}

/* Specific Wrappers */
.announcement-status-wrapper {
    margin-right: 160px;
}

/* Common Heading Style inside Tiles */
.filter-tile-heading {
    margin-bottom: 10px;
}