/* ========================================
                VARIABLES
======================================== */

:root {
    --header-h: 0px;
    --nav-h: 0px;
    --stack-h: calc(var(--header-h) + var(--nav-h));
    --notice-text: #143e72;
    --notice-bg: #f8f9fa;
    --logout-accent: #002A86;
}

[data-bs-theme="dark"] {
    --notice-text: #e2e6ea;
    --notice-bg: #1e2a38;
}


/* ========================================
                 BASE
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, svg {
    max-width: 100%;
    height: auto;
}

.btn svg,
.btn i {
    margin-right: .35rem;
    flex-shrink: 0;
}

html,
body {
    overflow: hidden auto;
}

html {
    scroll-padding-top: var(--stack-h);
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f1f1ef;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.4;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Normalize lists */
ul,
ol,
dl {
    margin: 0;
    padding: 0;
}

/* Remove image link borders */
a img {
    border: none;
}

/* Links */
a:hover {
    color: #143e72;
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}


/* ========================================
                TYPOGRAPHY
======================================== */

h1,
h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #91814f;
    text-transform: uppercase;
    margin-top: 0;
}

h1 {
    font-size: 34px;
    background-color: #e7e3d0;
    padding: 0 5px;
}

h2 {
    font-size: 24px;
    padding-right: 2px;
}

h3 {
    font-size: 18px;
    margin: 8px 0;
}

h4 {
    font-size: 14px;
    margin: 5px 0;
}

h5 {
    font-size: 12px;
    margin: 2px 0;
}

h6 {
    font-size: 9px;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #333;
    margin-top: 0;
    padding: 0 5px;
}

.sub-header-title {
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size: 1.4rem;
    padding-left: 15px;
}

.school-name {
    text-align: center;
    font-family: var(--bs-body-font-family);
    font-weight: 700;
    font-size: 2rem;
    text-transform: none; 
    color: #3f454b; /* slightly darker neutral gray */
    letter-spacing: 0.01em;
    margin-top: 0.25rem;
}


/* ========================================
                UTILITIES
======================================== */

.note {
    color: #676767;
    font-size: small;
    font-style: italic;
}

.currency,
.form1-af-sum,
.form1-af-total {
    text-align: right;
}

.full-width {
    display: block;
    width: 100%;
}

.validation-msg {
    font-weight: bolder;
    padding: 0 6px !important;
}

.smaller-text {
    font-size: 11px;
}

a.log-on {
    color: #fff;
    margin: 10px 5px;
}

.currency-container input {
    text-align: right;
    width: 105px;
}

.number-container input {
    text-align: right;
    width: 75px;
}

.text-uppercase {
    text-transform: uppercase;
}

.indent_left {
    padding-left: 25px;
}

.indent_leftTermDate {
    padding-left: 20px;
}

.label-tab {
    display: inline-block;
    line-height: 1.2rem;
    min-width: 500px;
}

.hover-shadow:hover {
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / 5%);
}

.lh-16 {
    line-height: 1.6;
}

/* a little extra line padding */
.li-gap-2 > li {
    margin-bottom: .5rem;
}

.li-gap-2 > li:last-child {
    margin-bottom: 0;
}

/* Slightly smaller than fs-6 (~1rem) */
.fs-sm {
    font-size: 0.95rem;
}

.fs-xsm {
    font-size: 0.85rem;
}

.login-note {
    color: #999;
}

.fc-drk-gry {
    color:#666;
}

.fc-drk-gry2 {
    color: #777;
}

.fs-hardship-10 {
    font-size: 10pt;
}

.application-dates {
    max-width: 100%;
}

.application-date-row {
    display: grid;
    grid-template-columns: clamp(420px, 45vw, 620px) auto;
    column-gap: 1rem;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

    .application-date-row .label-tab {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .application-date-row .fw-semibold {
        white-space: nowrap;
    }

.current-term-dates {
    padding-left: 3rem !important;
}

/* Mobile only */
@media (width <= 767px) {
    .application-date-row {
        grid-template-columns: 1fr;
        margin-bottom: 0.7rem;
    }

        .application-date-row .label-tab,
        .application-date-row .fw-semibold {
            display: block;
            width: 100%;
            max-width: 100%;
            white-space: normal;
        }

        .application-date-row .fw-semibold {
            margin-left: 1rem;
        }

    .indent_left {
        padding-left: 10px;
    }

    .indent_leftTermDate {
        padding-left: 20px;
        font-size: 0.70rem;
    }

    .label-tab {
        display: inline-block;
        min-width: 300px;
        padding: 0.20rem 0;
    }

    .current-term-dates {
        padding-left: 0.80rem !important;
    }
}

/* Small Mobile only */
@media (width <= 400px) {
    .application-date-row {
        grid-template-columns: 1fr;
        margin-bottom: 0.7rem;
    }

        .application-date-row .label-tab,
        .application-date-row .fw-semibold {
            display: block;
            width: 100%;
            max-width: 100%;
            white-space: normal;
        }

        .application-date-row .fw-semibold {
            margin-left: 1rem;
        }

    .indent_left {
        padding-left: 7px;
    }

    .indent_leftTermDate {
        padding-left: 20px;
        font-size: 0.70rem;
    }

    .label-tab {
        display: inline-block;
        min-width: 300px;
        padding: 0.20rem 0;
    }

    .current-term-dates {
        padding-left: 0.70rem !important;
    }

    .appStatusList ul{
        padding-left: 1.75rem !important;
    }
}

#chkCertify {
    border-color: #666;
}

.attestation-options legend {
    font-size: 0.9rem;
}

.attestation-options .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    border: 2px solid #6c757d;
    opacity: 1;
}

    .attestation-options .form-check-input:checked {
        background-color: #153d70;
        border-color: #153d70;
    }

    .attestation-options .form-check-input:focus {
        border-color: #153d70;
        box-shadow: 0 0 0 0.25rem rgb(21 61 112 / 25%);
        outline: 2px solid transparent;
    }

.attestation-options .form-check-label {
    font-size: 1rem;
    margin-left: 0.35rem;
    line-height: 1.5;
}

/* Mobile */
@media (width <= 576px) {
    .attestation-options legend {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .attestation-options .form-check-input {
        width: 1.05rem;
        height: 1.05rem;
        margin-top: 0.25rem;
    }

    .attestation-options .form-check-label {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .attestation-options .form-check {
        margin-bottom: 0.85rem;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ========================================
               INTERACTION STATES
======================================== */
.display-mode {
    display: inline-block;
}

    .edit-mode {
        display: none;
        width: 95%;
    }

    /* Edit mode toggling */
    .is-editing .display-mode {
        display: none;
    }

    .is-editing .edit-mode {
        display: inline-flex;
    }


    /* ========================================
                LAYOUT
======================================== */

    main {
        flex: 1;
    }

    .gray_container {
        background-color: #f1f1ef;
        border: 1px solid #CCC;
        color: #666;
        font-size: 12px;
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 10px;
    }

    .container-gray {
        background-color: #f1f1ef;
        padding: 1.5rem;
        margin-bottom: 2rem;
        border: 1px solid #ccc;
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    .white_container {
        background-color: #fff;
        border: 1px solid #CCC;
        color: #666;
        font-size: 12px;
        margin: 20px 0;
        padding: 10px;
    }

    #divMainContainer {
        background-color: #FFF;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .content {
        padding-top: 25px;
        padding-bottom: 4rem;
        width: 94%;
        margin: auto;
    }

        .content.scrollable {
            overflow-x: hidden;
            padding-bottom: 3rem;
        }

        .content ul,
        .content ol {
            padding: 0 15px 15px 40px;
        }

    /* Tablets + mobile */
    @media (width <= 992px) {
        .content {
            width: 99%;
        }
    }

    .listitem {
        margin: 3px 0 10px 10px;
    }

    .topBarMenu {
        width: 100%;
        padding: 0 20px;
    }

    /* Lock the page so only the primary card-body scrolls */
    body.page-locked {
        overflow: hidden;
    }

        body.page-locked.card-layout {
            overflow: hidden;
            height: 100dvh;
        }

        /* Make only the top-level card inside <main> fill the viewport */
        body.page-locked main > .card {
            display: flex;
            flex-direction: column;
            height: calc(100dvh - var(--stack-h));
            min-height: 0; /* critical so child can shrink and scroll */
        }

            /* The ONLY scroller: the top-level card-body */
            body.page-locked main > .card > .card-body {
                flex: 1 1 auto;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                min-height: 0;
            }

    /* Safety for common Bootstrap wrappers so height math works */
    .container, .row, main {
        min-height: 0;
    }

    .academic-year-field {
        width: 40%;
        min-width: 13rem;
        max-width: 14rem;
    }

@media (width <= 575.98px) {
    .historical-title {
        font-size: 2rem;
        line-height: 1.15;
        text-align: center;
    }

    .historical-subtitle {
        font-size: 2.4rem;
        line-height: 1.15;
        text-align: center;
    }

    .counselorApps {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

    /* ========================================
                HEADER
======================================== */

    #siteHeader {
        position: sticky;
        top: 0;
        z-index: 1040;
        background-color: #143e72;
        transition: box-shadow .2s ease;
    }

        #siteHeader.scrolled {
            box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
        }

    .headerContainer {
        width: 100%;
        position: relative;
        background-color: #143e72;
        border-bottom: 2px solid #0a2a4f;
        padding-bottom: 15px;
    }

    .header {
        max-width: 980px;
        aspect-ratio: 6 / 1;
        margin: 0 auto;
        background-image: url('img/ccpe_header_core_v7.min.svg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        position: relative;
    }

    .header-login {
        position: absolute;
        top: 0;
        right: 24px;
        font-size: .85rem;
    }

        .header-login a {
            color: #143e72;
            font-weight: 600;
            margin-left: 10px;
        }

    .logout-text {
        font-weight: 600 !important;
    }


    /* ========================================
              RESPONSIVE HEADER
======================================== */

    /* Desktop side repeat */
    @media (width >= 992px) {
        .headerContainer {
            background: #143e72 url('img/header_side_repeat_bluebar.svg') repeat-x center top;
        }
    }

    /* Mobile: 0–600px */
    @media (width <= 600px) {
        .headerContainer {
            padding-bottom: 0;
            background-color: #153D70;
        }

        .header {
            max-width: 100%;
            height: clamp(145px, 44vw, 185px);
            background-image: url('img/ccpe_header_mobile.min.svg');
            background-repeat: no-repeat;
            background-position: center top;
            background-size: contain;
            aspect-ratio: auto;
        }


        .login .border-end {
            border-right: none !important;
        }

        .newUser {
            padding-left: 0.5rem !important;
            padding-top: 2rem;
        }

        .container-fluid .navbar-toggler {
            margin-top: 6px;
        }

        .header-login {
            position: static;
            text-align: center;
            font-size: 0.75rem;
            color: #fff;
        }

            .header-login a {
                color: #fff;
                text-decoration: none;
                margin-left: 10px;
                font-weight: 600;
            }

        .topBarMenu {
            padding-right: 0;
        }
    }

    /* Tablet / iPad */
    @media (width >= 601px) and (width <= 992px) {
        .header-login {
            top: auto;
            bottom: 6px;
            right: 20px;
            font-size: 0.8rem;
            color: #fff;
        }

            .header-login a {
                color: #fff;
                text-decoration: none;
                margin-left: 10px;
                font-weight: 600;
            }

        .header-brand {
            margin-bottom: 15px;
        }

        .container-fluid .navbar-toggler {
            margin-top: 6px;
        }

        .topBarMenu {
            padding-right: 0;
        }
    }

    @supports not (aspect-ratio: 1) {
        .headerContainer, .header {
            height: 160px;
        }
    }

    /* sticky header on md+ */
    @media (width >= 768px) {
        .acc-header {
            position: sticky;
            top: 0;
            z-index: 2;
            background: var(--bs-body-bg);
        }
    }


    /* ========================================
                TABLES
======================================== */

    table {
        width: 100%;
        font-size: 0.85rem;
    }

    th {
        text-align: left;
    }

    .table_grid {
        width: 100%;
    }

        .table_grid thead th {
            font-size: .8rem;
            letter-spacing: .03em;
        }

        .table_grid td {
            vertical-align: middle;
        }

        /* Keep inline edit controls from stretching full width */
        .table_grid .edit-mode.form-control-sm {
            max-width: 6rem;
        }

        /* Tighten action icons a bit */
        .table_grid .buttonSize img {
            cursor: pointer;
            opacity: 0.85;
        }

            .table_grid .buttonSize img:hover {
                opacity: 1;
            }

    .table-light {
        font-size: 0.75rem;
    }

        .table-light a {
            color: #153d70;
        }

        .table-light th {
            color: #153d70;
        }

    .grid-table {
        display: grid;
        grid-template-columns: 90% 10%;
        width: 100%;
    }

    .grid-cell {
        padding: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }

    .grid-header .grid-cell {
        font-weight: 600;
        background-color: #f8f9fa;
    }

    .grid-row:last-child .grid-cell {
        border-bottom: none;
    }

    .table_section {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 16px;
        text-align: left;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
    }

    /* borders only BETWEEN rows; header supplies the first divider */
    .acc-row {
        border-top: 0;
    }

        .acc-row + .acc-row {
            border-top: 1px solid var(--bs-border-color);
        }

        .acc-row:hover {
            background: var(--bs-secondary-bg);
        }

    /* enable ellipsis for long emails/names */
    .acc-truncate {
        min-width: 0;
    }

    td[data-label="SSN"] {
        white-space: nowrap;
    }

    /* Course Entry / Grades tables: default = view mode only */
    .table_grid .display-mode {
        display: inline-block; /* or inline, whatever you like */
    }

    .table_grid .edit-mode {
        display: none;
    }

    /* Base icon */
    th.sortable i.sort-icon {
        font-size: 0.8rem;
        margin-left: 4px;
        opacity: 0.25;
        transition: opacity 0.2s ease, color 0.2s ease;
    }

    /* Hover emphasis */
    th.sortable:hover i.sort-icon {
        opacity: 0.6;
    }

    /* ✅ ACTIVE SORT ICON — stronger selector */
    th.sortable .sort-icon.active {
        opacity: 1 !important;
        color: #153d70 !important;
    }

    /* Bold sorted column header text */
    th.sortable a.fw-semibold {
        font-weight: 600;
    }

    .totalRow th {
        font-weight: 800;
    }

    /* Column sizing helpers */
    .scholarshipSize {
        width: 90px;
    }

    .nameSize {
        width: 175px;
    }

    .ssnSize {
        width: 75px;
    }

    .dobSize {
        width: 90px;
    }

    .statusSize {
        width: 135px;
    }

    .courseIdSize {
        width: 75px;
    }

    .collegeSize {
        width: 185px;
    }

    .highSchoolSize {
        width: 185px;
    }

    .hoursSize,
    .costSize,
    .approvedSize,
    .paidSize {
        width: 100px;
        text-align: right;
    }

.gradeSize {
    min-width: 12rem;
    text-align: center;
}

    .gradeSize .grade-edit-mode,
    .gradeSize .grade-select {
        width: 100%;
        min-width: 12rem;
    }

    .buttonSize {
        text-align: center;
        width: 75px;
    }

    .edit-grade {
        height: 20px;
        text-align: center;
        width: 20px;
    }

    /* Action cell */
    td.action-icons {
        vertical-align: middle;
        padding-top: 0.5rem; /* match Bootstrap table cells */
        padding-bottom: 0.5rem;
        padding-right: 12px;
        text-align: right;
    }

    /* Column width lock */
    td.action-icons,
    th.action-icons {
        width: 72px;
    }

    .courseTable tbody tr {
        height: 48px;
    }

.document-name-cell {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

    .document-name-cell:hover,
    .document-name-cell:focus {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Tablet / iPad */
    @media (width >= 601px) and (width <= 992px) {
        .apps-list table {
            font-size: 0.80rem;
        }

        .collegeRepApps table {
            font-size: 0.80rem;
        }

        .counselorApps table {
            font-size: 0.80rem;
        }
    }

    /* Mobile: 0–600px */
    @media (width <= 600px) {
        .apps-list table {
            font-size: 0.70rem;
        }

        .collegeRepApps table {
            font-size: 0.70rem;
        }

        .collegeRepApps .table-light {
            font-size: 0.70rem;
        }

        .counselorApps table {
            font-size: 0.70rem;
        }

        .counselorApps .table-light {
            font-size: 0.70rem;
        }
    }

.app-result-row {
    cursor: pointer;
}

    .app-result-row:focus {
        outline: 2px solid currentcolor;
        outline-offset: 2px;
    }

.courseList .grade-empty {
    color: #6c757d;
    font-weight: 600;
}

.courseList .grade-edit-mode {
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.courseList .grade-keyboard-help {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #495057;
}

.courseList .grade-edit-mode:focus-within .grade-keyboard-help {
    display: block;
}

    /* ========================================
                BADGES
======================================== */
    .countBadge {
        background-color: #153d70;
        font-size: 0.75rem;
        color: #fff;
    }

    .currUserBadge {
        background-color: #6c757d;
        color: #fff;
        font-size: 0.70rem; /* slightly larger than default badge */
        padding: 0.45em 0.75em; /* a bit more breathing room */
        border-radius: 0.5rem; /* softer, friendlier shape */
        transform: translateY(1px) scale(0.98);
        transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        pointer-events: none;
        cursor: pointer;
    }

    /* Reveal when parent is hovered */
    .parent-hover:hover .currUserBadge {
        opacity: 1;
        transform: translateY(0) scale(0.98);
        pointer-events: auto;
    }

    /* Professional hover highlight */
    .currUserBadge:hover {
        background-color: #153d70;
        box-shadow: 0 3px 4px rgb(0 0 0 / 20%);
    }

    .gradeBadge {
        font-size: 0.8rem;
        width: 35px;
    }


    /* ========================================
                PAGINATION
======================================== */

    .pager .page-link {
        color: #153d70;
        background-color: #fff;
        border-color: #dee2e6;
        border-radius: .375rem;
        margin: 0 .15rem;
        font-weight: 500;
    }

        .pager .page-link:hover {
            color: #153d70;
            background-color: rgb(21 61 112 / 8%);
            border-color: #153d70;
        }

    .pager .page-item.active .page-link {
        color: #fff;
        background-color: #153d70;
        border-color: #153d70;
        font-weight: 600;
    }

    .pager .page-item.disabled .page-link {
        color: #9aa4b2;
        background-color: #f8f9fa;
        border-color: #dee2e6;
        pointer-events: none;
    }


    /* ========================================
                BUTTONS
======================================== */

    .btn svg:last-child,
    .btn i:last-child {
        margin-right: 0;
        margin-left: .35rem;
    }

    .saveChangesBtn button {
        color: #153d70;
        border-color: #153d70;
        font-weight: 600;
    }

        .saveChangesBtn button:hover {
            background-color: #153d70;
            color: #fff;
            font-weight: 700;
        }

.saveChangesBottomBtn .save-changes-button {
    color: #153d70;
    border-color: #153d70;
    font-weight: 600;
    width: 250px;
    min-width: 11rem;
}

    .saveChangesBottomBtn .save-changes-button:hover,
    .saveChangesBottomBtn .save-changes-button:focus {
        background-color: #153d70;
        border-color: #153d70;
        color: #fff;
        font-weight: 700;
    }

@media (width <= 576px) {
    .saveChangesBottomBtn .save-changes-button {
        width: auto;
        min-width: 10rem;
    }
}

.attachDoc button {
    color: #153d70;
    border-color: #153d70;
}

        .attachDoc button:hover {
            background-color: #153d70;
            color: #fff;
        }

    .attachDocCitAtt button {
        color: #153d70;
        border-color: #153d70;
        margin-top: 20px;
    }

        .attachDocCitAtt button:hover {
            background-color: #153d70;
            color: #fff;
        }

    .login button {
        color: #153d70;
        font-weight: 600;
        border-width: 2px;
        border-color: #153d70;
    }

        .login button:hover {
            font-weight: 700;
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
        }

    .sessionExpired .btn {
        padding: 5px 15px;
        color: #153d70;
        font-weight: 600;
        border-width: 2px;
        border-color: #153d70;
    }

        .sessionExpired .btn:hover {
            font-weight: 700;
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
        }

    .aceAppHeaderBtns {
        padding-right: 1rem;
    }

    .aceApp .btn {
        white-space: nowrap;
    }

    .aceAppBtn {
        width: 100%;
        max-width: 280px;
    }

        .aceAppBtn button {
            color: #153d70;
            border-color: #153d70;
            border-width: 2px;
            font-weight: 600;
            font-size: 1rem;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease, box-shadow 0.2s ease;
        }

            .aceAppBtn button:hover:not(:disabled) {
                color: #fff;
                background-color: #153d70;
                border-color: #153d70;
                transform: translateY(-2px);
                box-shadow: 0 8px 18px rgb(0 0 0 / 18%), 0 0 0 3px rgb(21 61 112 / 25%);
            }

            .aceAppBtn button:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
            }

            .aceAppBtn button:focus-visible {
                box-shadow: 0 0 0 0.25rem rgb(21 61 112 / 45%);
            }

    .citizenAttBtn {
        width: 100%;
        max-width: 280px;
    }

        .citizenAttBtn button {
            color: #153d70;
            border-color: #153d70;
            border-width: 2px;
            font-weight: 600;
            font-size: 1rem;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease, box-shadow 0.2s ease;
        }

            .citizenAttBtn button:hover:not(:disabled) {
                color: #fff;
                background-color: #153d70;
                border-color: #153d70;
                transform: translateY(-2px);
                box-shadow: 0 8px 18px rgb(0 0 0 / 18%), 0 0 0 3px rgb(21 61 112 / 25%);
            }

            .citizenAttBtn button:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
            }

            .citizenAttBtn button:focus-visible {
                box-shadow: 0 0 0 0.25rem rgb(21 61 112 / 45%);
            }

    @media (width >= 992px) {
        .aceAppBtn {
            max-width: 320px;
        }
    }

    .aceApp button {
        font-weight: 600;
    }

        .aceApp button:hover {
            font-weight: 700;
        }

    /* Make the icon buttons feel clickable and meet target size guidance */
    .btn-icon {
        --hit: 40px; /* 40–44px is great for a11y hit targets */

        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--hit);
        min-height: var(--hit);
        padding: 0;
        border-radius: .5rem;
        line-height: 1;
        color: inherit; /* SVG uses currentColor */
        transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
    }

        .btn-icon svg {
            display: block;
            transition: transform .1s ease;
        }

        /* Subtle hover: lift + tint + color shift */
        .btn-icon:hover {
            background-color: rgb(var(--bs-primary-rgb, 13,110,253), .08);
            color: var(--bs-primary, #0d6efd);
            transform: translateY(-1px);
            box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
        }

        /* “Pressed” feel */
        .btn-icon:active {
            transform: translateY(0);
            box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);
        }

        /* Clear keyboard focus */
        .btn-icon:focus-visible {
            outline: 2px solid currentcolor;
            outline-offset: 2px;
            background-color: rgb(var(--bs-primary-rgb, 13,110,253), .12);
        }

    /* Danger variant for delete */
    .delete-button.btn-icon:hover {
        background-color: rgb(var(--bs-danger-rgb, 220,53,69), .08);
        color: var(--bs-danger, #dc3545);
    }

    .delete-button.btn-icon:focus-visible {
        background-color: rgb(var(--bs-danger-rgb, 220,53,69), .12);
    }

    /* If you keep Bootstrap’s btn-link, suppress underline on hover */
    .btn-icon.btn-link:hover,
    .btn-icon.btn-link:focus {
        text-decoration: none;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .btn-icon, .btn-icon svg {
            transition: none;
        }
    }

    .btn-icon:hover svg {
        transform: translateY(-1px) scale(1.06);
    }

    .btn-icon:active svg {
        transform: none;
    }

    .btn-xs {
        padding: .25rem .5rem;
        font-size: .8rem;
        line-height: 1.2;
    }

    .histView button:hover {
        font-weight: bold;
    }

    .container-gray button:hover {
        color: #153d70;
        font-weight: bold;
    }

    .gray_container button:hover {
        font-weight: bold;
    }

    .regSubmit button {
        font-weight: 600;
        color: #153d70;
        border-color: #153d70;
    }

        .regSubmit button:hover,
        .regSubmit button:focus,
        .regSubmit button:active,
        .regSubmit button:focus:active {
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
            font-weight: 700;
            box-shadow: none;
        }

    .aCopyAddress button {
        text-decoration: none;
        color: #153d70;
        border-color: #153d70;
    }

        .aCopyAddress button:hover,
        .aCopyAddress button:focus,
        .aCopyAddress button:active,
        .aCopyAddress button:focus:active {
            color: #fff;
            font-weight: 700;
            background-color: #153d70;
            border-color: #153d70;
        }

    .reg-section-btn a:hover {
        background-color: #153d70;
        border-color: #153d70;
        font-weight: 700;
        color: #fff;
    }

    .reg-section:hover .btn {
        box-shadow: 0 4px 12px rgb(21 61 112 / 20%);
    }

    .selectHS button {
        border-color: #153d70;
        color: #153d70;
        font-weight: 600;
    }

        .selectHS button:hover, .selectHS button:focus, .selectHS button:active, .selectHS button:focus:active {
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
            font-weight: 700;
            box-shadow: none; /* removes Bootstrap focus glow */
        }

    .cancelHS button {
        border-color: #153d70;
        color: #153d70;
        font-weight: 600;
    }

        .cancelHS button:hover, .cancelHS button:focus, .cancelHS button:active, .cancelHS button:focus:active {
            border-color: #153d70;
            color: #fff;
            font-weight: 700;
            box-shadow: none; /* removes Bootstrap focus glow */
        }

    .courseButtons1 button {
        border-color: #153d70;
        color: #153d70;
        font-weight: 600;
        background-color: #d6d6d6;
    }

        .courseButtons1 button:hover, .courseButtons1 button:focus, .courseButtons1 button:active, .courseButtons1 button:focus:active {
            border-color: #153d70;
            background-color: #153d70;
            color: #fff;
            font-weight: 700;
        }

.courseButtons2 button {
    border-color: #153d70;
    color: #153d70;
    font-weight: 600;
    background-color: #d6d6d6;
}

    .courseButtons2 button:hover, .courseButtons2 button:focus, .courseButtons2 button:active, .courseButtons2 button:focus:active {
        border-color: #153d70;
        background-color: #153d70;
        color: #fff;
        font-weight: 700;
    }

    .deleteBtn {
        font-size: 0.85rem; /* match badge */
        padding: 0.22em 2.1em; /* slightly less vertical padding than before */
        border-radius: 0.5rem; /* same corner rounding */
        line-height: 1.2; /* reduces button height */
        margin-right: 3px;
        color: #b02a37;
        border-color: #b02a37;
    }

        .deleteBtn:hover {
            background-color: #b02a37;
            color: #fff;
        }

#btnDone:disabled {
    color: #4f4f4f;
    border-color: #8c8c8c;
    background-color: #d6d6d6;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 1;
}

    .counselorExport a,
    .collegeRepExport a,
    .searchButton button,
    .clearButton {
        border-color: #153d70;
        color: #153d70;
        background-color: #d6d6d6;
        font-weight: 600;
    }

    .counselorExport a,
    .collegeRepExport a {
        font-size: 0.75rem;
    }

        .counselorExport a:hover,
        .collegeRepExport a:hover,
        .searchButton button:hover {
            background-color: #153d70;
            color: #fff;
            font-weight: 700;
        }

.deny-window-btn, .deny-window-cancel-btn {
    border-radius: 0.5rem;
    line-height: 1.2;
    border-color: #153d70;
    color: #153d70;
    font-weight: 600;
    background-color: #d6d6d6;
}

        .deny-window-btn:hover, .deny-window-btn:focus, .deny-window-btn:active, .deny-window-btn:focus:active {
            border-color: #153d70;
            background-color: #153d70;
            color: #fff;
        }


@media (width <= 576px) {
    #btnAttachDocument {
            margin-top: 0.10rem;
        }
    }

    .support-doc-btn {
        min-width: 95px;
        padding: 0.25rem 0.75rem;
        border-color: #153d70;
        color: #153d70;
        font-weight: 600;
    }

        .support-doc-btn:hover, .support-doc-btn:focus, .support-doc-btn:active, .support-doc-btn:focus:active {
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
            font-weight: 700;
            box-shadow: none;
        }

    .removeSupportDocBtn {
        min-width: 95px;
        padding: 0.25rem 0.75rem;
        color: #b02a37;
        border-color: #b02a37;
        font-weight: 600;
    }

        .removeSupportDocBtn:hover, .removeSupportDocBtn:focus, .removeSupportDocBtn:active, .removeSupportDocBtn:focus:active {
            background-color: #b02a37;
            border-color: #b02a37;
            color: #fff;
            font-weight: 700;
            box-shadow: none;
        }


    /* Stack only on smaller screens */
    @media (width <= 576px) {
        .support-doc-btn .removeSupportDocBtn {
            flex: 1 1 auto;
        }
    }

@media (width <= 576px) {
    .courseButtons1,
    .courseButtons2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

        .courseButtons1 .btn,
        .courseButtons2 .btn {
            width: 100%;
            max-width: 18rem;
            justify-content: center;
            text-align: center;
        }
}

@media (width <= 767.98px) {
    .courseButtons1 button,
    .courseButtons2 button {
        min-width: 12rem;
    }
}

    /* ========================================
                FORMS
======================================== */

    .form_container {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 16px;
        text-align: left;
    }

        .form_container h4.form-header {
            background: none;
            background-color: white;
            font-weight: bold;
        }

    .form-control-sm,
    .form-select-sm {
        font-size: 0.9rem;
    }

    .form-select option:checked {
        background-color: #153d70;
        color: #fff;
    }

    .form-select:focus {
        border-color: #153d70;
        box-shadow: 0 0 0 0.2rem rgb(21 61 112 / 25%);
    }

    .form-select {
        border-color: #ced4da;
    }

    .form-label {
        margin-bottom: .25rem;
    }

    .menuContainer {
        color: #FFF;
        height: 40px;
        left: 200px;
        line-height: 40px;
        margin: 0;
        padding: 0;
        position: relative;
        top: 120px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        margin-bottom: 0; /* remove the extra spacing */
    }

        .form-group label {
            margin-bottom: 0.25rem;
        }

    .form-row {
        display: flex;
        margin-bottom: 1rem;
    }

    .form-row-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .form-field {
        display: flex;
        flex-direction: column;
    }

    .input-small {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.25;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    @media (width >= 768px) {
        .form-group.col-md-6 {
            flex: 0 0 50%;
        }

        .form-group.col-md-4 {
            flex: 0 0 33.3333%;
        }

        .form-group.col-md-3 {
            flex: 0 0 25%;
        }
    }

    @media (width <= 768px) {
        .form-row-flex {
            flex-direction: column;
        }

        .form-field {
            flex: 1 1 100% !important;
        }
    }

    /* Label font size adjusts based on screen size */
    .label-responsive {
        font-weight: 500;
        font-size: 1rem; /* Base: mobile */
    }

    @media (width >= 576px) {
        .label-responsive {
            font-size: 0.9rem; /* sm+ screens */
        }
    }

    @media (width >= 768px) {
        .label-responsive {
            font-size: 0.8rem; /* md+ screens */
        }
    }

    .readonly-border[readonly] {
        background-color: #fff !important;
        opacity: 1;
        border: 1px solid #ced4da;
        color: #212529;
    }

    .text-muted-input {
        color: #6c757d !important; /* Bootstrap muted text color */
        background-color: #f8f9fa !important; /* Optional: subtle gray background */
        border-color: #ced4da; /* Match Bootstrap input border */
    }

    .form-check-input[type="radio"] {
        accent-color: #153d70;
    }

    .form-check-input:checked {
        background-color: #153d70;
        border-color: #153d70;
    }

.grade-cell {
    min-width: 12rem;
}

.grade-edit-mode,
.grade-select {
    width: 100%;
    min-width: 12rem;
}

    /* ========================================
                NAVIGATION
======================================== */

    /* IMPORTANT: let the nav stay fixed, just move it below header */
    .navbar.fixed-top.sticky-below-header {
        top: var(--header-h) !important; /* place under header */
        z-index: 1030;
    }

    .topBarMenu a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        color: #666;
        transition: color .15s ease;
    }

    div.navigatePane {
        padding: 20px 0;
    }

    div.navigatePanePrev {
        float: left;
        text-align: left;
        width: 50%;
    }

    div.navigatePaneNext {
        float: right;
        text-align: right;
        width: 50%;
    }

    ul.horizontal {
        list-style-type: none;
        margin: 0;
    }

    ul.vertical {
        list-style-type: none;
        margin: 0;
    }

    ul.nav {
        border: 2px solid #FFF;
        box-shadow: 3px 3px 6px rgb(0 0 0 / 25%);
        list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
        padding-top: 0;
    }

        ul.nav li {
            background-image: url('img/leftNavBG.gif');
            background-position: bottom;
            background-repeat: repeat-x;
            border-bottom: 1px dotted #FFF;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 20px;
        }

            ul.nav li p {
                margin: 0;
                padding: 0;
            }

            ul.nav li a {
                background-image: url('img/carrot.png');
                background-position: 0 center;
                background-repeat: no-repeat;
            }

        ul.nav a, ul.nav a:visited {
            color: #012746;
            display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */

            /* grouping these selectors makes sure that your links retain their button look even after being visited */
            padding: 5px 5px 5px 15px;
            text-decoration: none;
        }

            ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
                color: #594a1b;
            }

    /* Search box navigation */
    ul.search-box {
        list-style: none;
    }

        ul.search-box li {
            background-image: none;
            background-position: bottom;
            background-repeat: no-repeat;
            padding-left: 10px;
            padding-top: 2px;
        }

    /* Light gray ribbon under your header */
    .navbar-custom {
        background-color: #d6d6d6 !important;
        padding-left: 50px;
        box-shadow: 0 6px 12px rgb(0 0 0 / 25%), 0 3px 6px rgb(0 0 0 / 15%);
    }

        /* Ensure readable link colors on the light background */
        .navbar-custom .nav-link {
            color: #212529;
        }

            .navbar-custom .nav-link:hover,
            .navbar-custom .nav-link:focus {
                color: #000;
            }

            .navbar-custom .nav-link.active {
                color: #000;
                text-decoration: underline;
                text-underline-offset: .25rem;
            }

        /* Optional: slightly visible toggler on light bg (if needed) */
        .navbar-custom .navbar-toggler {
            border-color: rgb(0 0 0 / 15%);
        }

    .navbar-toggler {
        margin-left: auto;
        margin-bottom: .4rem;
        border: 1px solid rgb(20 62 114 / 25%);
        background-color: #fff;
        padding: .4rem .6rem;
        border-radius: 6px;
        transition: background-color .2s ease, box-shadow .2s ease;
        color: #143e72;
    }

        .navbar-toggler:hover {
            background-color: #f4f6f9;
            margin-bottom: .4rem;
        }

        .navbar-toggler:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgb(20 62 114 / 25%);
        }

    .navbar-collapse.show {
        border-top: 1px solid #dcdcdc;
    }

    .navbar-collapse {
        background-color: #fff;
        border-top: 1px solid #d9d9d9;
        padding: .75rem 0;
    }

    .navbar-nav .nav-link {
        padding: .6rem 1rem;
        font-weight: 500;
    }

    @media (width <= 991px) {
        .navbar-nav .nav-link {
            padding: .75rem 0;
            text-align: center;
        }
    }

    @media (width <= 991px) {
        .nav-link.active {
            border-bottom: none;
            background-color: #f3f6fb;
            border-radius: 4px;
            font-weight: 600;
        }
    }

    /* Base link style */
    .topBarMenu .nav-link {
        border-bottom: 3px solid transparent;
        transition: border-color 0.2s ease, color 0.2s ease;
        padding-bottom: 0.25rem;
        font-weight: 600;
    }

        /* Active link gets blue underline and bold text */
        .topBarMenu .nav-link.active {
            border-bottom-color: #153d70;
            background-image: linear-gradient(TO TOP, #EFEFEF, #FFF);
            color: #153d70;
            font-size: 1.0rem;
            font-weight: 700;
        }

        /* Optional hover feedback */
        .topBarMenu .nav-link:hover {
            border-bottom-color: rgb(0 42 134 / 40%);
            color: #153d70;
            font-size: 1.0rem;
            font-weight: 700;
        }


    /* ========================================
              LINK COMPONENTS
======================================== */

    .webLink a {
        color: #153d70;
        text-decoration: none;
    }

        .webLink a:hover {
            font-weight: 600;
        }

    .loginLinks a {
        color: #153d70;
    }

        .loginLinks a:hover {
            font-size: 0.80rem;
        }

    /* Row hover */
    .list-group-item.hoverable:hover {
        background-color: rgb(0 0 0 / 3%) !important; /* Light grey */
    }

    /* Edit link hover - badge-like effect */
    .list-group-item .edit-link {
        color: #153d70;
        padding: 2px 6px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 10pt;
    }

    .delete-link {
        color: var(--bs-link-color);
        padding: 2px 6px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 10pt;
    }

    .list-group-item .edit-link:hover {
        background-color: rgb(13 110 253 / 10%); /* Light Bootstrap primary */
    }

    .edit-link:hover {
        font-size: 0.9rem;
        font-weight: 600;
        color: #153d70;
    }

    .delete-link:hover {
        background-color: rgb(13 110 253 / 10%); /* Light Bootstrap primary */
        color: var(--bs-link-hover-color);
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* View link hover - subtle background highlight */
    .list-group-item .view-link {
        color: #153d70;
        padding: 2px 6px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 10pt;
    }

        .list-group-item .view-link:hover {
            background-color: rgb(13 110 253 / 10%);
            color: #153d70;
            font-weight: 700;
        }

    .doc-list-item .view-link {
        color: #153d70;
        padding: 3px 8px;
        border-radius: 5px;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10pt;
        font-weight: 500;
    }

        .doc-list-item .view-link i {
            font-size: 0.95rem;
            transition: transform 0.15s ease-in-out;
        }

        .doc-list-item .view-link:hover {
            background-color: rgb(13 110 253 / 10%);
            color: #153d70;
            font-weight: 700;
        }

            .doc-list-item .view-link:hover i {
                transform: scale(1.1);
            }

    .histView .view-link {
        text-decoration: none;
        font-size: 10pt;
    }

        .histView .view-link:hover {
            background-color: rgb(13 110 253 / 10%);
            font-weight: 600;
            color: var(--bs-link-hover-color);
        }

    .logout-link {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: 0 8px;
        border-radius: 6px;
        text-decoration: none;
        color: #002A86;
        background: transparent;
        font-weight: 500 !important; /* ensure true-normal base */
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        /* Hover/focus: stronger bg + vivid blue + heavy text */
        .logout-link:hover,
        .logout-link:focus-visible {
            background: #fff;
            color: #153d70;
            text-decoration: none;
        }

            .logout-link:hover .logout-text,
            .logout-link:focus-visible .logout-text {
                font-weight: 800 !important; /* big jump = clearly bold */
            }

            /* Icon matches blue and “feels” heavier */
            .logout-link:hover .bi,
            .logout-link:focus-visible .bi {
                color: inherit;
                -webkit-text-stroke: .35px currentcolor;
                text-shadow: 0 0 1px currentcolor;
            }

        /* Accessible focus ring that shows on black */
        .logout-link:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 .25rem rgb(0 42 134 / 35%);
        }

    .supportDoc a {
        color: #153d70;
        border-color: #153d70;
        font-weight: 600;
    }

        .supportDoc a:hover {
            color: #fff;
            background-color: #153d70;
            font-weight: 700;
        }

    a.border {
        border-color: rgb(0 0 0 / 8%) !important;
    }

    .chev {
        font-size: 1.25rem;
        line-height: 1;
        opacity: .35;
    }

    a:hover .chev {
        opacity: .6;
        transform: translateX(2px);
    }

    .app-list-item .view-link {
        color: #153d70;
        padding: 3px 8px;
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10pt;
        font-weight: 500;
    }

        .app-list-item .view-link i {
            font-size: 0.95rem;
            transition: transform 0.15s ease-in-out;
        }

        .app-list-item .view-link:hover {
            background-color: rgb(13 110 253 / 10%);
            color: #153d70;
            font-weight: 700;
        }

            .app-list-item .view-link:hover i {
                transform: scale(1.1);
            }


    /* ========================================
                FOOTER
======================================== */

    .footerContainer {
        background-color: #1c1c1c;
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        padding: 0;
        position: relative; /* this gives IE6 hasLayout to properly clear */
        margin-top: 60px;
    }

    .footer {
        background-image: url('img/footerBackground.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 192px;
        width: 100%;
    }

    ul.navFooter {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
        padding-top: 15px;
    }


    /* ========================================
                JQUERY UI
======================================== */

    div.ui-datepicker {
        font-size: 12px !important;
    }

    .ui-button {
        font-size: 1.1em !important;
        font-weight: bold !important;
        padding: 2px 6px !important;
    }

    .ui-button-text {
        font-size: .6em !important;
    }

    .ui-dialog-title {
        font-size: 12px !important;
    }

    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

    .ui-dialog-titlebar-close {
        display: block !important;
        position: absolute;
        right: 0.5em;
        top: 50%;
        width: 1.5em;
        height: 1.5em;
        margin: -0.75em 0 0;
        padding: 0;
        border: none;
        background: none;
        font-size: 1.5em;
        line-height: 1;
        color: #000;
        opacity: 0.5;
        cursor: pointer;
    }

        .ui-dialog-titlebar-close:hover {
            opacity: 1;
        }

        /* Replace icon with a visible × */
        .ui-dialog-titlebar-close::before {
            content: "×";
            display: inline-block;
            font-weight: bold;
        }


    /* ========================================
            APPLICATION UI
======================================== */

    /* Application selection page */

    .appsContainer {
        background-color: #cdd8e1;
        padding: 10px;
        margin: 0;
    }

    .apps-section {
        background-color: #f1f1ef;
        border: 1px solid #CCC;
        color: #666;
        height: 140px;
        padding: 10px;
    }

    /* Notes */
    .notes-section {
        background-color: #fff;
        border: 1px inset black;
        color: #666;
        margin-bottom: 5px;
        padding: 5px;
    }

    /*  Student Registration */
    .gray_container_stdrg {
        background-color: #f1f1ef;
        padding: 1.5rem;
        border: 1px solid #ccc;
        width: 100%;
        margin: auto;
        margin-bottom: 2rem;
    }

    .form-grid_stdrg {
        display: grid;
        grid-template-columns: 25% 75%;
        gap: 0.75rem 1.5rem;
    }

    .full-span_stdrg {
        grid-column: span 2;
    }

    .unsubApps {
        color: #153d70;
    }

    .counselorApps {
        color: #153d70;
    }

        .counselorApps .containerTable {
            color: #153d70;
        }

    .collegeRepApps {
        color: #153d70;
    }

        .collegeRepApps .containerTable {
            color: #153d70;
        }

        .collegeRepApps .table-light th {
            color: #153d70;
        }

    .activeAccts {
        color: #153d70;
    }

    /* Base stack label style */
    .stack-label,
    .apps-list .stack-label {
        font-size: 0.75rem; /* smaller than Bootstrap's .small */
        opacity: 0.85; /* slightly muted */
    }

    /* ---- Apps list: mobile-first ---- */

    /* Default: mobile-first, stack everything for all grids */
    .apps-list .app-grid1,
    .apps-list .app-grid2,
    .apps-list-review .app-grid-review {
        display: grid;
        grid-template-columns: 1fr; /* single column on mobile */
        gap: 0.25rem 0;
    }

        /* Mobile: labels visible */
        .apps-list .app-grid1 .stack-label,
        .apps-list .app-grid2 .stack-label,
        .apps-list-review .app-grid-review .stack-label {
            display: inline-block;
        }

    /* Desktop/tablet columns only */
    @media (width >= 768px) {
        /* Apps list review grid */
        .apps-list-review .app-grid-review {
            display: grid;
            grid-template-columns: 5rem /* Scholarship */
            9rem /* Name */
            9ch /* SSN */
            10ch /* Date of Birth */
            0.9fr /* High School */
            30px; /* Actions */

            align-items: center;
            column-gap: 1rem;
        }

            /* Hide stacked labels on md+ */
            .apps-list .app-grid1 .stack-label,
            .apps-list .app-grid2 .stack-label,
            .apps-list-review .app-grid-review .stack-label {
                display: none;
            }
    }

/* Wrapping for long text, only in apps list */
.apps-list .app-wrap {
    overflow-wrap: anywhere;
}

    .notice-banner {
        color: var(--notice-text);
        background-color: var(--notice-bg);
        margin-left: 25px;
        padding-top: 1.1rem; /* was ~1rem from p-3 */
        padding-bottom: 1.1rem;
    }

    .banner-text {
        line-height: 1.3; /* slightly tighter for all-caps system text */
    }

    .banner-icon {
        margin-right: .6rem;
    }

    .legend-chip {
        display: inline-block;
        font-weight: 600;
        font-size: .95rem; /* between .875rem and 1rem */
        line-height: 1.1;
        padding: .25rem .6rem;
        border-radius: .375rem; /* ~rounded-2 */
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        position: relative;
        top: -.8rem; /* overlap the fieldset border slightly */
    }

    #counselorAppsDiv .card-header {
        background-color: #e9ecef;
    }

    .gray_container h2 {
        font-weight: 700;
        color: #8a7b47; /* slightly muted gold */
        text-transform: uppercase;
        font-size: 1.5rem; /* slightly smaller than school name */
        margin-bottom: 0.25rem;
    }

    .note-text {
        font-size: 0.8rem;
    }

    .custom-file-button {
        min-height: 34px;
        padding: 0.25rem 0.75rem;
        display: inline-flex;
        align-items: center;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .custom-upload-button {
        padding: 0.35rem 0.75rem;
    }

    .custom-file-button, .custom-upload-button {
        white-space: nowrap;
        border: 1px solid #153d70;
        color: #153d70;
        background-color: #fff;
        font-weight: 600;
        cursor: pointer;
    }

        .custom-file-button:hover,
        .custom-file-button:focus,
        .custom-file-button:active,
        .custom-upload-button:hover,
        .custom-upload-button:focus,
        .custom-upload-button:active {
            background-color: #153d70;
            border-color: #153d70;
            color: #fff;
        }

    .custom-file-name {
        flex: 1;
        min-height: 34px;
        padding: 0.25rem 0.75rem;
        border: 1px solid #ced4da;
        border-left: 0;
        border-radius: 0 0.25rem 0.25rem 0;
        background-color: #fff;
        color: #212529;
        display: flex;
        align-items: center;
    }

    .custom-file-upload:focus-within .custom-file-name,
    .custom-file-upload:focus-within .custom-file-button {
        border-color: #86b7fe;
    }

    .custom-file-upload:focus-within .custom-file-name {
        box-shadow: 0 0 0 0.15rem rgb(13 110 253 / 25%);
    }

    .support-doc-list {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background-color: #fff;
        overflow: hidden;
    }

    .support-doc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #dee2e6;
    }

        .support-doc-row:last-child {
            border-bottom: 0;
        }

    .support-doc-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        flex: 1 1 auto;
        font-weight: 600;
        line-height: 1.3;
    }

        .support-doc-title span {
            overflow-wrap: anywhere;
        }

    .support-doc-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    /* Mobile: keep the cleaner stacked layout */
    @media (width <= 576px) {
        .support-doc-row {
            display: block;
            padding: 0.8rem;
        }

        .support-doc-title {
            margin-bottom: 0.65rem;
            font-size: 0.75rem;
        }

        .support-doc-actions {
            width: 100%;
            justify-content: center;
        }
    }

    .attachDoc {
        gap: 0.75rem 1.5rem;
    }

        .attachDoc #supportFileHelp {
            margin-bottom: 0;
        }

    @media (width <= 576px) {
        .attachDoc {
            gap: 0.5rem;
        }

            .attachDoc .flex-grow-1,
            .attachDoc .flex-shrink-0 {
                width: 100%;
            }

    }

.readonly-radio-list .form-check-input {
    opacity: 1;
    cursor: default;
}

.readonly-radio-list .form-check-label {
    color: #495057;
    cursor: default;
}

.radio-lg .form-check-label {
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 0.5rem;
}

.radio-lg .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
}

.fs-7 {
    font-size: 0.75rem;
}

.app-counselor-actions .counselor-action-button {
    min-width: 8.75rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .app-counselor-actions .counselor-action-button {
        min-width: 7rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-counselor-actions .d-flex {
        gap: 0.75rem !important;
    }
}

@media (width <= 992px) {
    .radio-lg .form-check-label {
        font-size: 0.85rem;
        line-height: 1.5;
        padding-left: 0.35rem;
        display: block;
    }

    .radio-lg .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 0.2rem;
    }
}

    /* ========================================
            REGISTRATION UI
======================================== */

    .reg-container {
        background-color: #cdd8e1;
        padding: 10px;
        margin-bottom: 20px;
    }

    .reg-section {
        background-color: #f1f1ef;
        color: #153d70;
        transition: all 0.25s ease;
        border: 1px solid transparent;
        min-height: 300px;
        padding: 10px;
    }

        .reg-section:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgb(0 0 0 / 8%);
            border-color: rgb(21 61 112 / 15%);
        }

    .icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgb(21 61 112 / 8%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s ease;
    }

    .reg-section:hover .icon-wrapper {
        background: rgb(21 61 112 / 15%);
    }

    .reg-section-btn a {
        border-color: #153d70;
        color: #153d70;
        font-weight: 600;
        text-decoration: none;
    }

    .reg-section a {
        color: #153d70;
        text-decoration: none;
    }

        .reg-section a:hover {
            font-weight: 700;
        }

    .gray_container_stdrg a {
        color: #153d70;
        text-decoration: none;
    }

        .gray_container_stdrg a:hover {
            font-weight: 700;
        }

    .section-muted-title {
        color: #666;
    }

    .registration-page-header h2 {
        margin: 0;
    }

    .registration-back-link {
        color: #143e72;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.75rem;
        white-space: nowrap;
    }

        .registration-back-link:hover,
        .registration-back-link:focus {
            color: #0f315a;
            text-decoration: none;
        }

        .registration-back-link:focus-visible {
            outline: 2px solid #143e72;
            outline-offset: 3px;
            border-radius: 3px;
        }


    /* ========================================
            COURSE / STUDENT UI
======================================== */

    .collegeRepStudentInfo dt {
        color: #153d70;
    }

    .courseList {
        color: #153d70;
    }

    .courseTable .table-light th {
        color: #153d70;
    }

    .courseComments {
        color: #153d70;
    }

    .text-indent-20 {
        text-indent: 20px;
    }

.return-comment-panel {
    font-size: 1rem;
}

    .return-comment-panel .form-label {
        color: #153d70;
    }

    .return-comment-panel textarea {
        min-height: 8rem;
        resize: vertical;
    }

    .return-comment-panel .form-text {
        margin-top: 0.35rem;
    }

.mobile-scroll-hint {
    display: none;
}

.courseTable .col-course-id {
    width: 20%;
}

.courseTable .col-hours {
    width: 10%;
}

.courseTable .col-cost {
    width: 20%;
}

.courseTable .col-approved {
    width: 15%;
}

.courseTable .col-paid {
    width: 10%;
}

.courseTable .col-grade {
    width: 10%;
}

.courseTable .col-actions {
    width: auto;
}

.courseTable .display-mode[tabindex="-1"]:focus {
    outline: 3px solid #86b7fe;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

@media (width <= 576px) {
    .courseTable .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .courseTable .table_grid {
        min-width: 620px;
        table-layout: fixed;
    }

    .courseTable .col-course-id {
        width: 11rem;
    }

    .courseTable .col-hours {
        width: 5.5rem;
    }

    .courseTable .col-cost {
        width: 6.5rem;
    }

    .courseTable .col-approved,
    .courseTable .col-paid {
        width: 6.5rem;
    }

    .courseTable .col-grade {
        width: 5rem;
    }

    .courseTable .col-actions {
        width: 6rem;
    }

    .courseTable .course-id,
    .courseTable .hours,
    .courseTable .cost {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .courseTable .form-control,
    .courseTable .form-select {
        max-width: 100%;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .mobile-scroll-hint {
        display: block;
        color: #153d70;
        font-weight: 600;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .courseTable .table_grid tr[data-is-blank-course="true"] td {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        vertical-align: middle;
    }

    .courseTable .table_grid tr[data-is-blank-course="true"] .form-control {
        min-height: 2.75rem;
        line-height: 1.5;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .courseTable .costSize {
        min-width: 6.5rem;
    }

    .courseTable .cost {
        min-width: 5.5rem;
    }
}



    /* ========================================
            UI OVERLAYS
======================================== */
    #progressBackgroundFilter {
        position: fixed;
        inset: 0;
        z-index: 1999;
        background-color: rgb(0 0 0 / 35%);
    }

    #processMessage.process-message {
        position: fixed;
        inset: 0;
        z-index: 2000;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .process-message-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-width: 150px;
        padding: 0.85rem 1.25rem;
        border-radius: 0.5rem;
        background-color: #fff;
        color: #212529;
        font-size: 1rem;
        font-weight: 600;
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 20%);
    }

    .process-message-spinner {
        width: 22px;
        height: 22px;
    }

    /* ========================================
                VALIDATION
======================================== */

    .field-validation-error {
        color: #f00;
    }

    .field-validation-message {
        display: block;
        margin-top: 0.35rem;
    }

    .field-validation-valid {
        display: none;
    }

    .input-validation-error {
        background-color: #fee;
        border: 1px solid #f00;
    }

    .validation-summary-errors {
        color: #f00;
        font-weight: bold;
    }

    .validation-summary-valid {
        display: none;
    }

    #divValidation {
        max-width: 992px;
        margin: 0 auto 1.5rem;
        padding: 1rem 1.25rem;
    }

        #divValidation ul {
            margin-bottom: 0;
            padding: 0;
            list-style: none;
        }

        #divValidation li {
            margin: 0;
        }

@media (width <= 576px) {
    #divValidation {
        padding: 0.5rem 0.7rem;
    }
}

#HistoricalSearchValidationSummary.validation-summary-valid {
    display: none;
}

#HistoricalSearchValidationSummary.validation-summary-errors {
    display: block;
}

#HistoricalSearchValidationSummary ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

#HistoricalSearchValidationSummary li {
    margin: 0;
    font-weight: 600;
}


    /* ========================================
             ACE APPLICATION
======================================== */

    .containerTable {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 16px;
        text-align: left;
        width: 100%;
        padding-top: 5px;
    }

    .aceApp .form-check-input[type="radio"] {
        accent-color: #153d70;
    }

    .aceApp h2 {
        line-height: 1.2;
    }

    .section-title {
        font-size: 0.80rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 1rem;
    }

    .qualification-content {
        padding-left: 0.75rem;
    }

    .hardship-options {
        margin-top: 1rem;
        padding-left: 0.75rem;
    }

        .hardship-options .form-check {
            margin-bottom: 0.75rem;
        }

        .hardship-options .form-check-label {
            color: #495057;
        }

        .hardship-options .form-check-input:disabled {
            opacity: 1;
        }

.appNote {
    font-size: 0.95rem;
}

.appSupport {
    font-size: 0.8rem;
}

.appComment {
    font-size: 0.8rem;
}

@media (width <= 576px) {
    .aceApp h2 {
        padding-bottom: 0.8rem;
    }

    .qualification-content {
        padding-left: 0.15rem;
    }

    .appNote {
        font-size: 0.75rem;
    }

}


    /* ========================================
                MESSAGES/ALERTS
======================================== */

            /* Base flash style */
            .flash {
        border-left: 6px solid #DAA520; /* goldenrod */
        background: #fff8db; /* soft yellow */
        color: #1f1f1f;
        border-radius: .5rem;
        box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
    }

        /* Tight stacking */
        .flash + .flash {
            margin-top: .5rem;
        }

    /* Optional title/meta styling */
    .flash-title {
        font-weight: 600;
        margin-bottom: .25rem;
    }

    .flash-meta {
        font-size: .875rem;
        opacity: .8;
        margin-top: .25rem;
    }

    /* If you prefer to tint by severity, tweak variants below */
    .flash.alert-success {
        border-left-color: #2e7d32;
        background: #e9f7ec;
        font-weight: 600;
        font-size: .875rem;
    }

    .flash.alert-danger {
        border-left-color: #b00020;
        background: #ffe9e9;
    }

    /* Keep warning as goldenrod */
    .flash.alert-warning {
        border-left-color: #DAA520;
        background: #fff8db;
    }

    /* Bootstrap alert override for info flash */
    .flash.alert-info {
        --bs-alert-bg: #fff8db; /* soft yellow */
        --bs-alert-border-color: #DAA520; /* goldenrod */
        --bs-alert-color: #1f1f1f; /* dark text */

        border-left: 6px solid #DAA520;
        box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
        border-radius: .5rem;
        font-weight: 600;
        font-size: .875rem;
    }


#divTempError {
    max-width: 992px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.25rem;
    font-size: 1.0rem;
    color: #A6192E;
    font-weight: 600;
}

.aceMessage{
    font-size:  0.85rem;
}

@media (width <= 576px) {
    .aceMessage {
        font-size: 0.80rem;
    }
}

.ui-dialog.portal-dialog {
    border: 1px solid #d7dce2;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 18%);
    padding: 0;
    overflow: hidden;
}

.portal-dialog .ui-dialog-titlebar {
    background: #f8f9fa;
    border: 0;
    border-bottom: 3px solid #0b3b75;
    padding: 1rem 1.25rem;
    color: #0b3b75;
    font-weight: 700;
}

.portal-dialog .ui-dialog-title {
    font-size: 1.15rem;
}

.portal-dialog .ui-dialog-content {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    color: #212529;
}

.portal-dialog .ui-dialog-buttonpane {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.25rem;
    margin-top: 0;
    background: #fff;
}

    .portal-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: none;
        text-align: right;
    }

    .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn,
    .portal-dialog .ui-dialog-buttonpane button.ui-button.portal-dialog-btn,
    .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn.ui-state-default,
    .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn.ui-state-active {
        background: #fff !important;
        background-image: none !important;
        color: #153d70 !important;
        border: 2px solid #153d70 !important;
        border-radius: 0.375rem !important;
        font-weight: 600 !important;
        padding: 0.35rem 0.85rem !important;
        box-shadow: none !important;
        outline: none !important;
    }

        .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn:focus,
        .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn.ui-state-focus {
            background: #fff !important;
            background-image: none !important;
            color: #153d70 !important;
            border: 2px solid #153d70 !important;
            border-radius: 0.375rem !important;
            font-weight: 600 !important;
            padding: 0.35rem 0.85rem !important;
            outline: none !important;
            box-shadow: 0 0 0 0.15rem rgb(21 61 112 / 25%) !important;
        }

        .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn:hover,
        .portal-dialog .ui-dialog-buttonpane button.portal-dialog-btn.ui-state-hover {
            background: #153d70 !important;
            background-image: none !important;
            color: #fff !important;
            border-color: #153d70 !important;
            box-shadow: none !important;
            outline: none !important;
        }

#spMessage {
    display: block;
    text-align: center;
    font-size: 1rem;
    color: #153d70;
    font-weight: 500;
}


/* ========================================
                ICONS
======================================== */
.warning-icon {
    height: 1.35em;
    width: auto;
    margin-top: -1px;
}

        .warning-icon.warning-yellow path {
            fill: #F4B400;
        }

        .warning-icon.warning-red path {
            fill: #DC3545;
        }

        .warning-icon.warning-orange path {
            fill: #FD7E14;
        }

        .warning-icon.lg {
            height: 1.6em;
        }

        .warning-icon.xl {
            height: 1.9em;
        }

        .warning-icon.sm {
            height: 1.1em;
        }

    .action-icons-inner {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        vertical-align: middle;
    }

    /* Base icon button */
    .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
        transition: background-color .15s ease, opacity .15s ease;
    }

        /* SVG sizing */
        .icon-btn svg {
            display: inline-flex;
            transition: transform .15s cubic-bezier(.4, 0, .2, 1);
        }

        .icon-btn:hover svg {
            transform: scale(1.15);
        }

    .save-entry, .save-grade svg {
        transform-origin: center;
    }

    /* Semantic colors */
    .edit-entry, .edit-grade {
        color: #153d70;
    }

    .delete-entry {
        color: #b02a37;
    }

    .save-entry, .save-grade {
        color: #198754;
    }

    .cancel-entry, .cancel-grade {
        color: #b02a37;
    }

    /* Hover states */
    .icon-btn:hover {
        background-color: rgb(21 61 112 / 8%);
    }

    .delete-entry:hover {
        background-color: rgb(176 42 55 / 12%);
    }

    /* Edit mode hover tuning */
    tr.is-editing .icon-btn:hover {
        background-color: rgb(21 61 112 / 6%);
    }

    /* Keyboard focus */
    .icon-btn:focus-visible {
        outline: 2px solid rgb(21 61 112 / 40%);
        outline-offset: 2px;
    }

    /* Subtle hierarchy */
    .display-mode .icon-btn {
        opacity: 0.85;
    }

        .display-mode .icon-btn:hover {
            opacity: 1;
        }


    /* ========================================
            ACCESSIBILITY
======================================== */

    a:focus-visible {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
        border-color: #0d6efd !important;
    }

    @media (prefers-reduced-motion:no-preference) {
        a {
            transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
        }
    }

    @media (prefers-color-scheme: dark) {
        a.border {
            border-color: rgb(255 255 255 / 12%) !important;
        }

        .text-muted {
            color: rgb(255 255 255 / 60%) !important;
        }
    }