/* CGC Added */
:root {
    --cgc-black: #2d2926;
    --cgc-blue: #00b5e2;
    --cgc-darkblue: #1d4f8b;
    --cgc-darkteal: #007377;
    --cgc-error: #822222;
    --cgc-gold: #f2c75c;
    --cgc-gray: #b1b3b3;
    --cgc-green: #56803C;
    --cgc-linkcolor: #0d6efd;
    --cgc-mediumgray: #cccccc;
    --cgc-orange: #ed8b00;
    --cgc-red: #CA4950;
    --cgc-teal: #00818a;
    --cgc-lightteal: #5eb7bc;
    --cgc-lightgray: #f2f2f2;
}
/* End of CGC Added */

/* Added from MCCCD 1/14/2026 */
:root,
[data-bs-theme=light] {
    --bs-blue: #002b5c;
    --bs-indigo: #0171bc;
    --bs-red: #c10520;
    --bs-yellow: #f7d068;
    --bs-green: #228736;
    --bs-cyan: #0057b8;
    --bs-gray: #545454;
    --bs-gray-dark: #262626;
    --bs-gray-100: #f2f2f2;
    --bs-gray-200: #e0e0e0;
    --bs-gray-300: #ccc;
    --bs-gray-400: #999;
    --bs-gray-500: #666;
    --bs-gray-600: #545454;
    --bs-gray-700: #404040;
    --bs-gray-800: #262626;
    --bs-gray-900: #171717;
    --bs-primary: #002b5c;
    --bs-secondary: #0171bc;
    --bs-success: #228736;
    --bs-info: #0057b8;
    --bs-warning: #f7d068;
    --bs-danger: #c10520;
    --bs-light: #f2f2f2;
    --bs-medium: #999;
    --bs-dark: #404040;
    --bs-maricopa-blue: #002b5c;
    --bs-cgc-primary: #00818a;
    --bs-cgc-secondary: #626367;
    --bs-emc-primary: #642667;
    --bs-emc-secondary: #d2a36a;
    --bs-gcc-primary: #cb333b;
    --bs-gcc-secondary: #2d2926;
    --bs-gwc-primary: #0032a1;
    --bs-gwc-secondary: #af282f;
    --bs-mcc-primary: #004c97;
    --bs-mcc-secondary: #bf0d3e;
    --bs-pcc-primary: #00305d;
    --bs-pcc-secondary: #ffc845;
    --bs-pvc-primary: #003da5;
    --bs-pvc-secondary: #d9c89e;
    --bs-rsc-primary: #236192;
    --bs-rsc-secondary: #ffca28;
    --bs-scc-primary: #215732;
    --bs-scc-secondary: #ffb81c;
    --bs-smc-primary: #ad6500;
    --bs-smc-secondary: #050505;
    --bs-skyblue: #d9edf7;
    --bs-sky: #d9edf7;
    --bs-primary-rgb: 0,43,92;
    --bs-secondary-rgb: 1,113,188;
    --bs-success-rgb: 34,135,54;
    --bs-info-rgb: 0,87,184;
    --bs-warning-rgb: 247,208,104;
    --bs-danger-rgb: 193,5,32;
    --bs-light-rgb: 242,242,242;
    --bs-medium-rgb: 153,153,153;
    --bs-dark-rgb: 64,64,64;
    --bs-maricopa-blue-rgb: 0,43,92;
    --bs-cgc-primary-rgb: 0,129,138;
    --bs-cgc-secondary-rgb: 98,99,103;
    --bs-emc-primary-rgb: 100,38,103;
    --bs-emc-secondary-rgb: 210,163,106;
    --bs-gcc-primary-rgb: 203,51,59;
    --bs-gcc-secondary-rgb: 45,41,38;
    --bs-gwc-primary-rgb: 0,50,161;
    --bs-gwc-secondary-rgb: 175,40,47;
    --bs-mcc-primary-rgb: 0,76,151;
    --bs-mcc-secondary-rgb: 191,13,62;
    --bs-pcc-primary-rgb: 0,48,93;
    --bs-pcc-secondary-rgb: 255,200,69;
    --bs-pvc-primary-rgb: 0,61,165;
    --bs-pvc-secondary-rgb: 217,200,158;
    --bs-rsc-primary-rgb: 35,97,146;
    --bs-rsc-secondary-rgb: 255,202,40;
    --bs-scc-primary-rgb: 33,87,50;
    --bs-scc-secondary-rgb: 255,184,28;
    --bs-smc-primary-rgb: 173,101,0;
    --bs-smc-secondary-rgb: 5,5,5;
    --bs-skyblue-rgb: 217,237,247;
    --bs-sky-rgb: 217,237,247;
    --bs-primary-text-emphasis: #001125;
    --bs-secondary-text-emphasis: #002d4b;
    --bs-success-text-emphasis: #0e3616;
    --bs-info-text-emphasis: #00234a;
    --bs-warning-text-emphasis: #63532a;
    --bs-danger-text-emphasis: #4d020d;
    --bs-light-text-emphasis: #404040;
    --bs-dark-text-emphasis: #404040;
    --bs-primary-bg-subtle: #ccd5de;
    --bs-secondary-bg-subtle: #cce3f2;
    --bs-success-bg-subtle: #d3e7d7;
    --bs-info-bg-subtle: #ccddf1;
    --bs-warning-bg-subtle: #fdf6e1;
    --bs-danger-bg-subtle: #f3cdd2;
    --bs-light-bg-subtle: #f9f9f9;
    --bs-dark-bg-subtle: #999;
    --bs-primary-border-subtle: #99aabe;
    --bs-secondary-border-subtle: #99c6e4;
    --bs-success-border-subtle: #a7cfaf;
    --bs-info-border-subtle: #99bce3;
    --bs-warning-border-subtle: #fcecc3;
    --bs-danger-border-subtle: #e69ba6;
    --bs-light-border-subtle: #e0e0e0;
    --bs-dark-border-subtle: #666;
    --bs-font-sans-serif: Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-body-color: #404040;
    --bs-body-color-rgb: 64,64,64;
    --bs-secondary-color: rgba(64,64,64,0.75);
    --bs-secondary-color-rgb: 64,64,64;
    --bs-secondary-bg: #e0e0e0;
    --bs-secondary-bg-rgb: 224,224,224;
    --bs-tertiary-color: rgba(64,64,64,0.5);
    --bs-tertiary-color-rgb: 64,64,64;
    --bs-tertiary-bg: #f2f2f2;
    --bs-tertiary-bg-rgb: 242,242,242;
    --bs-link-color: #0171bc;
    --bs-link-color-rgb: 1,113,188;
    --bs-link-hover-color: #015a96;
    --bs-link-hover-color-rgb: 1,90,150;
    --bs-link-hover-decoration: underline;
    --bs-highlight-color: #404040;
    --bs-highlight-bg: #fdf6e1;
    --bs-border-color: #ccc;
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    --bs-border-radius-xl: 0.5rem;
    --bs-border-radius-xxl: 1rem;
    --bs-focus-ring-color: rgba(0,43,92,0.25);
    --bs-form-valid-color: #228736;
    --bs-form-valid-border-color: #228736;
    --bs-form-invalid-color: #c10520;
    --bs-form-invalid-border-color: #c10520;
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #ccc;
    --bs-body-color-rgb: 204,204,204;
    --bs-body-bg: #171717;
    --bs-body-bg-rgb: 23,23,23;
    --bs-secondary-color: rgba(204,204,204,0.75);
    --bs-secondary-color-rgb: 204,204,204;
    --bs-secondary-bg: #262626;
    --bs-secondary-bg-rgb: 38,38,38;
    --bs-tertiary-color: rgba(204,204,204,0.5);
    --bs-tertiary-color-rgb: 204,204,204;
    --bs-tertiary-bg: #1f1f1f;
    --bs-tertiary-bg-rgb: 31,31,31;
    --bs-primary-text-emphasis: #66809d;
    --bs-secondary-text-emphasis: #67aad7;
    --bs-success-text-emphasis: #7ab786;
    --bs-info-text-emphasis: #669ad4;
    --bs-warning-text-emphasis: #fae3a4;
    --bs-danger-text-emphasis: #da6979;
    --bs-light-text-emphasis: #f2f2f2;
    --bs-dark-text-emphasis: #ccc;
    --bs-primary-bg-subtle: #000912;
    --bs-secondary-bg-subtle: #001726;
    --bs-success-bg-subtle: #071b0b;
    --bs-info-bg-subtle: #001125;
    --bs-warning-bg-subtle: #312a15;
    --bs-danger-bg-subtle: #270106;
    --bs-light-bg-subtle: #262626;
    --bs-dark-bg-subtle: #131313;
    --bs-primary-border-subtle: #001a37;
    --bs-secondary-border-subtle: #014471;
    --bs-success-border-subtle: #145120;
    --bs-info-border-subtle: #00346e;
    --bs-warning-border-subtle: #947d3e;
    --bs-danger-border-subtle: #740313;
    --bs-light-border-subtle: #404040;
    --bs-dark-border-subtle: #262626;
    --bs-link-color: #66809d;
    --bs-link-hover-color: #8599b1;
    --bs-link-color-rgb: 102,128,157;
    --bs-link-hover-color-rgb: 133,153,177;
    --bs-highlight-color: #ccc;
    --bs-highlight-bg: #63532a;
    --bs-border-color: #404040;
    --bs-form-valid-color: #7ab786;
    --bs-form-valid-border-color: #7ab786;
    --bs-form-invalid-color: #da6979;
    --bs-form-invalid-border-color: #da6979;
}
/* End of Added from MCCCD */


a, .btn-link {
    color: #0071c1;
}

h1:focus {
    outline: none;
}

hr {
    color: #ccc;
}

html, body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

td {
    font-size: 14px;
}


/* CGC Added - Custom Buttons */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-cgcprimary-blue {
    color: #000;
    background-color: var(--cgc-blue) !important;
    border-color: #005266;
}

    .btn-cgcprimary-blue:focus {
        color: #000;
        background-color: #00a3cc !important;
        border-color: #002933;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-blue:hover {
        color: #000;
        background-color: #00a3cc !important;
        border-color: #002933;
    }

.btn-cgcprimary-gold {
    color: #000;
    background-color: var(--cgc-gold) !important;
    border-color: #473406;
}

    .btn-cgcprimary-gold:focus {
        color: #000;
        background-color: #f0bf42 !important;
        border-color: #2f2304;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-gold:hover {
        color: #000;
        background-color: #f0bf42 !important;
        border-color: #2f2304;
    }

.btn-cgcprimary-gray {
    color: #000;
    background-color: var(--cgc-gray) !important;
    border-color: #323434;
}

    .btn-cgcprimary-gray:focus {
        color: #000;
        background-color: #989a9a !important;
        border-color: #191a1a;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-gray:hover {
        color: #000;
        background-color: #989a9a !important;
        border-color: #191a1a;
    }

.btn-cgcprimary-lightgray {
    color: #000;
    background-color: var(--cgc-lightgray) !important;
    border-color: #323434;
}

    .btn-cgcprimary-lightgray:focus {
        color: #000;
        background-color: #d9d9d9 !important;
        border-color: #191a1a;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
    }

    .btn-cgcprimary-lightgray:hover {
        color: #000;
        background-color: #d9d9d9 !important;
        border-color: #191a1a;
    }

.btn-cgcprimary-green {
    color: #fff;
    background-color: var(--cgc-green) !important;
    border-color: #2f4521;
}

    .btn-cgcprimary-green:focus {
        color: #fff;
        background-color: #5f8b41 !important;
        border-color: #182310;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-green:hover {
        color: #fff;
        background-color: #5f8b41 !important;
        border-color: #182310;
    }

.btn-cgcprimary-red {
    color: #fff;
    background-color: var(--cgc-red) !important;
    border-color: #4f171a;
}

    .btn-cgcprimary-red:focus {
        color: #fff;
        background-color: #c63940 !important;
        border-color: #280b0d;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-red:hover {
        color: #fff;
        background-color: #c63940 !important;
        border-color: #280b0d;
    }

.btn-cgcprimary-teal {
    color: #fff;
    background-color: var(--cgc-teal) !important;
    border-color: #00474d;
}

    .btn-cgcprimary-teal:focus {
        color: #fff;
        background-color: #007780 !important;
        border-color: #003033;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-cgcprimary-teal:hover {
        color: #fff;
        background-color: #007780 !important;
        border-color: #003033;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-remove {
    color: #fff;
    background-color: var(--cgc-red) !important;
    border-color: #4f171a;
}

    .btn-remove:focus {
        color: #fff;
        background-color: #c63940 !important;
        border-color: #280b0d;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-remove:hover {
        color: #fff;
        background-color: #c63940 !important;
        border-color: #280b0d;
    }

.btn-save {
    color: #000;
    background-color: var(--cgc-gold) !important;
    border-color: #473406;
}

    .btn-save:focus {
        color: #000;
        background-color: #f0bf42 !important;
        border-color: #2f2304;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.25)
    }

    .btn-save:hover {
        color: #000;
        background-color: #f0bf42 !important;
        border-color: #2f2304;
    }

.course {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.coursescontainer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        padding-left: 0;
        padding-right: 0;
    }
}

    /* Table sizing is defined globally in app.css (.course-table) */
    .coursescontainer .course {
        overflow: visible;
    }

.coursescontainer-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        padding-left: 0;
        padding-right: 0;
    }
}

    .coursescontainer-card .card {
        min-width: 0;
        height: 100%;
    }

    .coursescontainer-card .card-header {
        flex-wrap: wrap;
    }

    .coursescontainer-card .card-row {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .coursescontainer-card .builder-button {
        max-width: 100%;
    }

    .coursescontainer-card .classcardnotesbutton {
        max-width: 100%;
    }

/* ===== View mode toggle (Table / Cards) ===== */
.viewmode-toggle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.viewmode-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cgc-black, #2d2926);
    white-space: nowrap;
}

.viewmode-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cgc-mediumgray, #ccc);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.viewmode-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: none;
    border-right: 1px solid var(--cgc-mediumgray, #ccc);
    background: #fff;
    color: #545454;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        min-width: 2.75rem;
        padding-inline: 0.625rem;
    }
}

    .viewmode-option:last-child {
        border-right: none;
    }

    .viewmode-option svg {
        width: 1.125rem;
        height: 1.125rem;
        flex-shrink: 0;
    }

    .viewmode-option.active {
        background: var(--cgc-teal, #00818a);
        color: #fff;
    }

    .viewmode-option:not(.active):hover,
    .viewmode-option:not(.active):focus-visible {
        background: var(--cgc-lightgray, #f2f2f2);
        color: var(--cgc-black, #2d2926);
    }

    .viewmode-option:focus-visible {
        outline: 2px solid var(--cgc-teal, #00818a);
        outline-offset: 1px;
    }

/* Portrait Phones */
@media (max-width: 575.98px) {
    .viewmode-option-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ===== Paging + view mode toolbar ===== */
.paging-viewmode-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        flex-direction: column;
        align-items: stretch;
    }
}

.paging-left {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.viewmode-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

/* Portrait Phones */
@media (max-width: 575.98px) {
    .paging-left,
    .viewmode-right {
        justify-content: center;
    }
}

.viewmode-button {
    border: none;
    padding: 0;
    background: transparent;
}

.builder-button {
    display: flex;
    align-items: self-end;
    gap: 8px;
    padding: 3px 7px;
    color: white;
    border: none;
    border-radius: 4px;
    width: 158px;
    /* font-family: sans-serif; */
}

button.link {
    background: none;
    border: none;
    padding: 0;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    color: #069;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    vertical-align: middle;
}

.cgc-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    height: 35px;
}

.cgc-flex-1 {
    margin-left: 32px;
    padding-left: 0.75rem;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        margin-left: unset;
    }
}

.content {
    padding-top: 1.1rem;
}

.contentpage {
    padding-top: 1rem;
    border-bottom: 1px solid #00818A;
    display: flex;
    width: 100%;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

div.Error {
    color: var(--cgc-error);
    text-align: center;
}

div.Error-Left {
    color: var(--cgc-error);
    text-align: left;
}

div.modal-header, div.modal-footer {
    background-color: var(--cgc-darkteal);
    color: white;
}

div.modal-footer {
    margin-top: 20px;
    padding: 10px;
}

div.Success {
    color: teal;
    text-align: center;
}

.em-bold {
    font-style: italic;
    font-weight: 700;
}

.filter-button {
    padding-bottom: 1px;
    padding-right: 1px;
    padding-top: 1px;
    margin-left: -34px
}

.filter-input {
    margin-bottom: 8px;
    padding: 4px;
    padding-right: 28px;
}

/* ===== TABLE VIEW: fixed column widths — same across every course table ===== */
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.course-table {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
}

    .course-table col.col-class {
        width: 7%;
    }

    .course-table col.col-status {
        width: 19%;
    }

    .course-table col.col-delivery {
        width: 8%;
    }

    .course-table col.col-schedule {
        width: 35%;
    }

    .course-table col.col-instructor {
        width: 11%;
    }

    .course-table col.col-resources {
        width: 8%;
    }

    .course-table col.col-actions {
        width: 12%;
    }

    .course-table col.col-room {
        width: 7%;
    }

    .course-table col.col-dates {
        width: 6.3%;
    }

    .course-table col.col-days {
        width: 6.3%;
    }

    .course-table col.col-times {
        width: 8.4%;
    }

    .course-table col.col-flags {
        width: 7%;
    }


    .course-table th,
    .course-table td {
        font-size: 12px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: normal;
        padding: 4px 6px;
    }

    .course-table .col-class-cell,
    .course-table .col-status-cell,
    .course-table .col-resources-cell,
    .course-table .col-actions-cell,
    .course-table .col-delivery-cell,
    .course-table .no-wrap-cell {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    .course-table .col-schedule-cell {
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }

    .course-table .schedule-meetings {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: 100%;
    }

    .course-table .col-schedule-cell .tags {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 4px;
        max-width: 100%;
    }

        .course-table .col-schedule-cell .tags > .tag {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            white-space: normal;
            width: 100%;
            max-width: 100%;
            background: transparent;
            padding: 0;
            border-radius: 0;
            gap: 4px 6px;
        }

        .course-table .col-schedule-cell .tags .tag .tag {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #111827;
            white-space: nowrap;
        }

    .course-table .col-room-cell {
        white-space: wrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .course-table .col-dates-cell {
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .course-table .col-days-cell {
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .course-table .col-times-cell {
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .course-table .col-flags-cell {
        white-space: wrap;
        overflow: visible;
        text-overflow: unset;
    }

    .course-table .col-instructor-cell {
        white-space: wrap;
        overflow: visible;
        text-overflow: clip;
    }

    .course-table .class-cell-content {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }

    .course-table .class-cell-id {
        font-weight: 700;
    }

    .course-table .class-cell-icons {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        width: 4.75rem;
        flex-shrink: 0;
    }

    /*    .course-table .class-cell-icon-slot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }*/

    .course-table .classnotesbutton {
        width: auto;
        min-width: fit-content;
        max-width: none;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .course-table .builder-button {
        width: auto;
        min-width: fit-content;
        max-width: none;
        box-sizing: border-box;
        white-space: nowrap;
    }

.table-header th {
    background: #fff;
    border-bottom: 2px solid var(--cgc-teal);
    font-weight: 700;
}

/*.course-table th:last-child,
.course-table td:last-child {
    padding-right: 10px;
}
*/
@media (max-width: 991.98px) {
    .table-scroll-wrapper {
        padding-bottom: 4px;
    }

    .course-table .builder-button {
        font-size: 11px;
        padding-inline: 6px;
    }

    .course-table .classnotesbutton {
        font-size: 11px;
        padding-inline: 6px;
    }
}

/* Legacy class — keep selector but use normal table layout (no display:block) */
.fixed_table_header {
    width: 100%;
}

.form-control {
    font-size: 14px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 12px;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-select {
    font-size: 14px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 12px;
    }
}

/* CGC Modified */
.invalid {
    outline: 1px solid var(--cgc-error);
}

.newreq-container #userinfo-form {
    margin: 0px auto 14px auto;
    width: 100%;
}

.search {
    padding: 0.25rem;
    position: relative;
    max-width: 323px;
    min-width: 123px;
    margin-left: auto;
    margin-right: auto;
}

    .search .search-input {
        padding-right: calc(24px+0.5rem);
    }

    .search .search-button {
        right: 0px;
        top: 0px;
        pointer-events: auto;
        z-index: 3;
        width: auto;
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
        color: gray;
    }

        .search .search-button .search-icon {
            background-color: currentColor;
            width: 24px;
            height: 24px;
            mask-image: url("images/Search.svg");
            -webkit-mask-image: url("images/Search.svg");
        }

.search-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--cgc-teal);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

    .search-control:focus {
        color: var(--cgc-black);
        background-color: #fff;
        border-color: #002933;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0,119,128,.35)
    }

.search-table {
    margin: 0 auto;
    width: 30rem;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        width: unset;
    }
}

.search-textbox {
    display: inline;
    margin-left: 16px;
    max-width: 323px;
    min-width: 200px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        margin-left: unset;
    }
}

.sort-link {
    cursor: pointer;
    color: var(--cgc-teal);
    font-size: 14px;
    text-decoration: underline;
}

span.add {
    font-size: 14px;
}

span.Error {
    color: var(--cgc-error);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

.spinner {
    border: 8px solid var(--cgc-gray);
    border-top: 8px solid var(--cgc-teal);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    position: relative;
    /*top: 540px;
    left: 20%;*/
}

.status {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .status.open {
        background: #dcfce7;
        color: #166534;
    }

.almost {
    background: #fef3c7;
    color: #92400e;
}

.closed {
    background: #fee2e2;
    color: #991b1b;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
}

.card-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: 3px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

/* CGC Modified */
.validation-message {
    color: var(--cgc-error);
}

.xxSmallButton {
    width: 40px;
    height: 20px;
    font-size: xx-small;
    padding: 0px;
    color: white;
    background-color: var(--cgc-red);
    float: right;
    margin-left: 2px;
}

.yySmallButton {
    width: 40px;
    height: 20px;
    font-size: xx-small;
    padding: 0px;
    color: white;
    background-color: var(--cgc-teal);
    float: right;
    margin-left: 2px;
}
/* Classes and Builder pages CSS: */
.page-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;

    @media (max-width: 767.98px) {
        width: 100%;
        padding: 0 12px;
    }
}

/* Filter DDL Sizing for Non-Phone Displays */
.academicdiv-select {
    min-width: 352px;

    @media (max-width: 767.98px) {
        min-width: revert;
    }
}

.availability-select {
    max-width: 160px;

    @media (max-width: 767.98px) {
        max-width: revert;
    }
}

.gened-select {
    min-width: 342px;

    @media (max-width: 767.98px) {
        min-width: revert;
    }
}

.semester-select {
    max-width: 120px;

    @media (max-width: 767.98px) {
        max-width: revert;
    }
}

.subject-select {
    min-width: 332px;

    @media (max-width: 767.98px) {
        min-width: revert;
    }
}

fieldset {
    border: 1px solid #c7c7c7;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 28px;
}

legend {
    font-size: 17px;
    font-weight: 700;
    padding: 0 10px;
    width: auto;
    color: #007377;
}

svg:not(:root) {
    overflow-clip-margin: content-box;
    overflow: hidden;
}

.avaiable-sections {
    margin: 0px 0px 16px;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: 0.0075em;
    font-weight: 700;
}

.badge-add-sb-1 {
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-size: 45px;
    font-weight: 600;
    fill: #fff;
}

.badge-add-sb-3 {
    fill: #fff;
}

.badge-late-start-class-2 {
    fill: #fff;
}

.book-card-small {
    background: #fff;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.book-meta-small {
    font-size: 13px;
    color: #4b5563;
}

.book-title-small {
    font-weight: 700;
}

.cgcgrid1 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    /* Landscape Phones */
    @media (max-width: 767.98px) {
        display: block;
    }
}

.cgcgrid1-1 {
    flex: 1 1 250px;
    min-width: 250px;
    /* Landscape Phones */
    @media (max-width: 767.98px) {
        width: 100%;
        min-width: 100%;
        margin-bottom: 15px;
    }
}

    .cgcgrid1-1 select {
        width: 100%;
        max-width: 100%;
        /* Landscape Phones */
        @media (max-width: 767.98px) {
            width: 100%;
        }
    }

.class-list-div {
    display: flex;
    flex-direction: column;
}
    /* Selects all odd-numbered div children within a container */
    .class-list-div > div:nth-of-type(2n) {
        background-color: #f2f2f2; /* Light gray background for odd rows */
    }
    /* Selects all even-numbered div children within a container */
    .class-list-div > div:nth-of-type(2n+1) {
        background-color: #ffffff; /* White background for even rows */
    }

.class-row-1 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1.5fr 1fr;
    gap: 16px;
    -webkit-box-align: center;
    align-items: baseline;
    text-align: center;
    margin-bottom: 0px;
}

.class-row-1-cell {
    display: block;
}

.class-row-1b {
    align-items: center;
    text-align: center;
    margin-bottom: 0px;
}

.class-row-2 {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.class-row-3 {
    display: flex;
    gap: 28px;
    margin-left: 6px;
}

.class-sort-heading {
    margin: 0px;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-size: 0.875rem;
    line-height: 1.57;
    letter-spacing: 0.00714em;
    font-weight: 700;
}

.class-sort-row {
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr 1.5fr;*/
    grid-template-columns: 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1.5fr 1fr;
    gap: 16px;
    padding: 16px;
    background-color: rgb(242, 242, 242);
    border-radius: 4px;
    margin-bottom: 8px;
    text-align: center;
}

.classcontainer {
    color: rgb(64, 64, 64);
    background-color: rgb(249, 249, 249);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-image: initial;
    overflow: hidden;
}

.classflag {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /*cursor: pointer;*/
    user-select: none;
    vertical-align: middle;
    appearance: none;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-weight: 400;
    text-transform: none;
    line-height: 1.5;
    letter-spacing: 0.02857em;
    min-width: 64px;
    color: var(--cgc-darkteal);
    background-color: var(--variant-textBg);
    --variant-textColor: var(--cgc-darkteal);
    --variant-outlinedColor: var(--cgc-darkteal);
    --variant-outlinedBorder: rgba(100, 38, 103, 0.5);
    --variant-containedColor: #ffffff;
    --variant-containedBg: var(--cgc-darkteal);
    /*font-size: 0.8125rem;*/
    width: 100%;
    -webkit-box-pack: start;
    justify-content: flex-start;
    outline: 0px;
    margin: 0px;
    text-decoration: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 4px;
    padding: 4px 5px;
}

.classflagspan {
    display: inherit;
    margin-right: 2px;
    margin-left: 0px;
}

.classinnerbox {
    display: block;
    padding: 8px;
}

    .classinnerbox:last-child {
        padding-bottom: 8px;
    }


.classhonoriconsvg {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.0rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classlateiconsvg {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.0rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: top;
}

.classlciconsvg {
    align-items: center;
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: var(--cgc-darkteal);
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classlciconsvg-filter {
    align-items: center;
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 4px;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.35rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classwritingiconsvg {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: var(--cgc-darkteal);
    font-size: 1.0rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classwritingiconbwsvg {
    user-select: none;
    width: 1.0em;
    height: 1.0em;
    display: inline-block;
    flex-shrink: 0;
    fill: #000000;
    font-size: 1.0rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classnotebox {
    display: block;
    height: auto;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.classnoteboxwrapper {
    display: flex;
    width: 100%;
}

.classnoteboxwrapperinner {
    display: block;
    width: 100%;
}

.classnotedropdownspan {
    display: inherit;
    margin-left: 0px;
    margin-right: -2px;
}

    .classnotedropdownspan > :nth-of-type(1) {
        font-size: 18px;
    }

.classnotesbutton {
    /*display: inline-flex;*/
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    font-weight: 400;
    text-transform: none;
    line-height: 1.5;
    letter-spacing: 0.02857em;
    min-width: 64px;
    color: var(--cgc-darkteal);
    background-color: var(--variant-textBg);
    --variant-textColor: var(--cgc-darkteal);
    --variant-outlinedColor: var(--cgc-darkteal);
    --variant-outlinedBorder: rgba(100, 38, 103, 0.5);
    --variant-containedColor: #ffffff;
    --variant-containedBg: var(--cgc-darkteal);
    font-size: 12px;
    width: 100%;
    -webkit-box-pack: start;
    justify-content: flex-start;
    outline: 0px;
    margin: 0px;
    text-decoration: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 4px;
    padding: 4px 5px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classcardnotesbutton {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    font-weight: 400;
    text-transform: none;
    line-height: 1.5;
    letter-spacing: 0.02857em;
    min-width: 64px;
    color: var(--cgc-darkteal);
    background-color: var(--variant-textBg);
    --variant-textColor: var(--cgc-darkteal);
    --variant-outlinedColor: var(--cgc-darkteal);
    --variant-outlinedBorder: rgba(100, 38, 103, 0.5);
    --variant-containedColor: #ffffff;
    --variant-containedBg: var(--cgc-darkteal);
    font-size: 12px;
    width: 100%;
    -webkit-box-pack: start;
    justify-content: flex-start;
    outline: 0px;
    margin: 0px;
    text-decoration: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 4px;
    padding: 4px 5px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classnotesiconspan {
    display: inherit;
    margin-right: 3px;
    margin-left: -2px;
}

    .classnotesiconspan > :nth-of-type(1) {
        font-size: 16px;
    }

.classnotesiconsvg {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classnotesiconsvg-filter {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-top: 2px;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.0rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.classnotetextfont {
    margin: 0px 0px 8px;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.01071em;
    color: rgb(64, 64, 64);
}

.classrow2cellpart1 {
    display: inline-block;
    height: auto;
}

.classrow2cellpart2 {
    max-width: 100%;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-size: 1rem;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 1.5;
    color: rgb(64, 64, 64);
    cursor: unset;
    vertical-align: middle;
    box-sizing: border-box;
    height: 24px;
    background-color: transparent;
    border-radius: 16px;
    /* Removed (5/11/2026) white-space: nowrap;*/
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0px;
    text-decoration: none;
    padding: 0px;
    border-image: initial;
}

.classrow2leftcell {
    display: flex;
    gap: 8px;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
}

.classrow3cell {
    flex: 0 0 auto;
    /* flex: 1 1 0%; */
    display: block;
}

.classstatus-text {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 12px;
    white-space: nowrap;
}

.classstext {
    margin: 0px;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.01071em;
    color: rgb(64, 64, 64);
}

.course-credits {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.5rem;
    font-size: clamp(0.75rem, 1.4vw, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background: var(--cgc-lightgray, #f3f4f6);
    color: var(--cgc-black, #2d2926);
    white-space: nowrap;
}

.course-desc {
    font-size: 14px;
    color: #374151;
    margin-top: 6px;
}

.course-info-panel {
    padding: 16px;
}

    .course-info-panel:last-child {
        padding-bottom: 24px;
    }

.course-info-row {
    margin-bottom: 16px;
}

.course-item-group {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 64, 64);
    background-image: var(--Paper-overlay);
    margin-bottom: 24px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    overflow: hidden;
}

.course-label {
    font-size: 12px;
    font-weight: 700;
    margin-top: 12px;
}

.course-text {
    font-size: 14px;
    color: #374151;
}

/* ===== Course title + credits (same in table and card view) ===== */
.course-title {
    display: block;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.5;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--cgc-black, #2d2926);
}

.course-title-text {
    display: inline;
}

.courselists {
    margin-top: 4px;
}

.css-1d9jtdt {
    margin: 0px;
    /*font-family: Roboto, Helvetica, Arial, sans-serif;*/
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.01071em;
    color: rgb(64, 64, 64);
}

.delivery-column {
    flex: 1;
}

.delivery-columns {
    display: flex;
    gap: 20px;
    /* Landscape Phones */
    /*@media (max-width: 767.98px) {
        flex-direction: column;
    }*/

    @media (max-width: 991.98px) {
        flex-direction: column;
    }
}

/* ===== DETAILS ===== */
.details-cell {
    padding: 0;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.details-column {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    white-space: wrap;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        grid-template-columns: 1fr;
    }
}

.details-panel {
    padding: 4px;
}

.details-row {
    display: none;
}

    .details-row.open {
        display: table-row;
    }

.details-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.filterlabel {
    display: block;
    font-size: 15px;
    font-weight: 700;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 14px;
    }
}

.filterpanel {
    width: 100%;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        width: 100%;
        margin: 0 0;
    }
}

.filterpanel-card {
    width: 95%;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        width: 95%;
        margin: 0 10px;
    }
}


.five-spaces::before {
    content: "     "; /* Five literal spaces */
    white-space: pre;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #b1b3b3;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.2s;
}

    .form-check-input:focus-visible {
        outline: 3px solid #ffbf47;
        outline-offset: 2px;
    }

    .form-check-input[type="checkbox"]:checked {
        background-color: #007377;
        border-color: #007377;
    }

        .form-check-input[type="checkbox"]:checked::after {
            /*content: "✔";*/
            color: #ffffff;
            font-weight: bold;
            font-size: 16px;
            position: absolute;
            top: 0px;
            left: 2px;
        }

    .form-check-input[type="radio"] {
        border-radius: 50%;
    }

        .form-check-input[type="radio"]:checked {
            background-color: #007377;
            border-color: #007377;
        }

            .form-check-input[type="radio"]:checked::after {
                content: '';
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #ffffff;
                /*position: absolute;
                top: 2px;
                left: 2px;*/
            }

.form-check-label {
    cursor: pointer;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 12px;
    }
}

.form-label {
    margin-bottom: 0px;
    font-size: 15px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 13px;
    }
}

.form-label2 {
    margin-bottom: 0px;
    font-size: 14px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 12px;
    }
}

.grid-wrapper {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    background: #f2f2f2;
}

    .grid-wrapper.open {
        max-height: none;
        margin-top: 12px;
    }

.iconsvg-down {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.5rem;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

    .iconsvg-down > :nth-of-type(1) {
        font-size: 18px;
    }

.iconsvg-up {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentcolor;
    font-size: 1.5rem;
    transform: rotate(180deg);
    transition: transform 0.3s;
}

    .iconsvg-up > :nth-of-type(1) {
        font-size: 18px;
    }


label.form-check-label {
    margin-top: 4px;
}

.logo-line-text {
    font-size: 14px;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        font-size: 12px;
    }
}

.pagination-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    /* Portrait Phones */
    @media (max-width: 575.98px) {
        margin: 0px 15px;
    }
}

    .pagination-wrapper button,
    .pagination-wrapper span {
        flex: 0 0 auto;
    }

.cgc-panel1 {
    background: #f5f6f8;
    /*font-family: Arial, Helvetica, sans-serif;*/
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 8px;
    padding-left: 0px;
    color: #222;
    font-size: 14px;
}

.resource-panel {
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.3s ease;
    background: #f9fafb;
    border-radius: 10px;
    padding: 0 12px;
    margin-top: 0;
}

    .resource-panel.open {
        padding: 12px;
        margin-top: 8px;
        border: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
        /* Notes card only — first box in the panel */
        .resource-panel.open .textbook-box:first-child {
            margin-top: 0;
        }

            .resource-panel.open .textbook-box:first-child .section-text ul {
                margin-top: 0;
                margin-bottom: 0;
            }

.schedule-table {
    table-layout: fixed;
    width: 100%; /* Can be a fixed size like 800px instead */
    border-collapse: collapse;
}

    .schedule-table td {
        font-size: 12px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: normal;
        padding: 2px 6px;
    }

    .schedule-table col.col-room {
        width: 20%;
    }

    .schedule-table col.col-dates {
        width: 18%;
    }

    .schedule-table col.col-days {
        width: 18%;
    }

    .schedule-table col.col-times {
        width: 24%;
    }

    .schedule-table col.col-latestart {
        width: 20%;
    }

.small-button {
    --bs-btn-padding-y: 0.175rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.sun-logo {
    height: 20px;
    margin-left: 10px;
    width: auto;
}

.sun-logo-filter {
    height: 16px;
    margin-top: 4px;
    width: auto;
}