:root {
    --lsu-purple: #461d7c;
    --lsu-purple-hover: #35145f;
    --lsu-purple-dark: #2f1557;
    --lsu-gold: #fdd023;
    --lsu-gold-hover: #e8bd14;
    --lsu-gold-border: #c99a00;
    --lsu-gray: #55565a;
    --ink: #1f2933;
    --muted: #52616f;
    --line: #d8dee8;
    --surface: #ffffff;
    --surface-alt: #f5f7fb;
    --warning-bg: #fff4d6;
    --warning-text: #4d3500;
    --lsu-purple-soft: #f3ecff;
    --lsu-gold-soft: #fff6cf;
    --lsu-shadow: 0 .25rem .9rem rgba(31, 41, 51, .08);
    --site-gutter: clamp(.75rem, 2vw, 2rem);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface-alt);
    --bs-border-color: var(--line);
    --bs-border-radius: .4rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-primary: var(--lsu-purple);
    --bs-primary-rgb: 70, 29, 124;
    --bs-secondary: #6f5a8f;
    --bs-secondary-rgb: 111, 90, 143;
    --bs-warning: var(--lsu-gold);
    --bs-warning-rgb: 253, 208, 35;
    --bs-link-color: #275d9f;
    --bs-link-hover-color: #163b67;
    --bs-focus-ring-color: rgba(253, 208, 35, .45);
}

body {
    background: var(--surface-alt);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

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

.site-frame {
    max-width: none;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    width: 100%;
}

a {
    color: #275d9f;
}

a:hover {
    color: #163b67;
}

.form-label,
.col-form-label,
.form-check-label,
.form-floating > label {
    color: var(--ink);
}

.form-control,
.form-select {
    background-color: #fff;
    border-color: #b8afc6;
    color: var(--ink);
}

.form-control:hover,
.form-select:hover {
    border-color: #8a7aa3;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lsu-purple);
    box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .38);
}

.form-control::placeholder {
    color: #6b6474;
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: #f1eef6;
    border-color: #d5cfdf;
    color: #6b6474;
}

.form-text {
    color: var(--muted);
}

.input-group-text {
    background: var(--lsu-purple-soft);
    border-color: #b8afc6;
    color: var(--lsu-purple);
    font-weight: 700;
}

.form-check-input {
    border-color: #8a7aa3;
}

.form-check-input[type="radio"] {
    border-width: 2px;
    height: 1.15rem;
    width: 1.15rem;
}

.form-check-input:checked {
    background-color: var(--lsu-purple);
    border-color: var(--lsu-purple);
}

.form-check-input:focus {
    border-color: var(--lsu-purple);
    box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .45);
}

.form-switch .form-check-input:checked {
    background-color: var(--lsu-purple);
}

.form-check-input:disabled {
    opacity: .72;
}

.form-check-input:disabled + .form-check-label {
    color: #475467;
    opacity: 1;
}

.form-range::-webkit-slider-thumb {
    background: var(--lsu-purple);
}

.form-range::-moz-range-thumb {
    background: var(--lsu-purple);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(253, 208, 35, .45);
}

.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: .4rem;
    --bs-card-cap-bg: var(--lsu-purple);
    --bs-card-cap-color: #fff;
    background: #fff;
    box-shadow: var(--lsu-shadow);
}

.card-header {
    border-bottom: 3px solid var(--lsu-gold);
    color: #fff;
    font-weight: 700;
}

.card-footer {
    background: #f8f6fc;
    border-top-color: var(--line);
}

.accordion {
    --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: .4rem;
    --bs-accordion-btn-color: var(--lsu-purple);
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-active-color: var(--lsu-purple);
    --bs-accordion-active-bg: var(--lsu-purple-soft);
    --bs-accordion-btn-focus-border-color: var(--lsu-purple);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .45);
}

.accordion-button {
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -3px 0 var(--lsu-gold);
}

.alert {
    border-radius: .4rem;
    border-width: 1px;
}

.alert-primary {
    --bs-alert-color: var(--lsu-purple-dark);
    --bs-alert-bg: var(--lsu-purple-soft);
    --bs-alert-border-color: #cdbbe8;
    --bs-alert-link-color: var(--lsu-purple-dark);
}

.alert-warning {
    --bs-alert-color: var(--warning-text);
    --bs-alert-bg: var(--warning-bg);
    --bs-alert-border-color: var(--lsu-gold-border);
    --bs-alert-link-color: #352500;
}

.alert-success {
    --bs-alert-color: #133f28;
    --bs-alert-bg: #e5f5ec;
    --bs-alert-border-color: #8bc8a9;
    border-left: 4px solid var(--lsu-gold);
}

.alert-danger {
    --bs-alert-color: #6b1111;
    --bs-alert-bg: #fde8e8;
    --bs-alert-border-color: #e6a3a3;
    border-left: 4px solid var(--lsu-gold);
}

.badge,
.text-bg-primary {
    background-color: var(--lsu-purple) !important;
    color: #fff !important;
}

.text-bg-warning {
    background-color: var(--lsu-gold) !important;
    color: #111827 !important;
}

.text-bg-secondary {
    background-color: #6f5a8f !important;
    color: #fff !important;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--line);
    --bs-nav-tabs-link-hover-border-color: var(--lsu-purple-soft) var(--lsu-purple-soft) var(--line);
    --bs-nav-tabs-link-active-color: var(--lsu-purple);
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: var(--line) var(--line) #fff;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--lsu-purple);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-link {
    color: var(--lsu-purple);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--lsu-purple-hover);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: #111827;
    --bs-dropdown-link-hover-bg: var(--lsu-gold-soft);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--lsu-purple);
    box-shadow: var(--lsu-shadow);
}

.list-group {
    --bs-list-group-border-color: var(--line);
    --bs-list-group-active-bg: var(--lsu-purple);
    --bs-list-group-active-border-color: var(--lsu-purple);
    --bs-list-group-action-hover-bg: var(--lsu-gold-soft);
}

.modal-content,
.popover,
.toast {
    border-color: var(--line);
    box-shadow: var(--lsu-shadow);
}

.modal-header,
.popover-header,
.toast-header {
    background: var(--lsu-purple);
    border-bottom: 3px solid var(--lsu-gold);
    color: #fff;
}

.modal-header .btn-close,
.toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.tooltip {
    --bs-tooltip-bg: var(--lsu-purple-dark);
    --bs-tooltip-color: #fff;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--muted);
    --bs-breadcrumb-item-active-color: var(--lsu-purple);
}

.progress {
    --bs-progress-bg: #eee8f7;
    --bs-progress-bar-bg: var(--lsu-purple);
}

.table {
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: #f8f6fc;
    --bs-table-hover-bg: var(--lsu-gold-soft);
}

.table-primary {
    --bs-table-color: #fff;
    --bs-table-bg: var(--lsu-purple);
    --bs-table-border-color: var(--lsu-purple-hover);
}

.table-warning {
    --bs-table-color: #111827;
    --bs-table-bg: var(--lsu-gold-soft);
    --bs-table-border-color: #ead078;
}

.page-link {
    color: var(--lsu-purple);
}

.page-link:focus {
    box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .45);
}

.invalid-feedback,
.field-validation-error,
.text-danger {
    color: #9f1c1c !important;
}

.valid-feedback,
.text-success {
    color: #146c43 !important;
}

.btn {
    border-radius: .35rem;
    font-weight: 700;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lsu-purple);
    --bs-btn-border-color: var(--lsu-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lsu-purple-hover);
    --bs-btn-hover-border-color: var(--lsu-purple-hover);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lsu-purple-dark);
    --bs-btn-active-border-color: var(--lsu-purple-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #74608e;
    --bs-btn-disabled-border-color: #74608e;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f5a8f;
    --bs-btn-border-color: #6f5a8f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5b4878;
    --bs-btn-hover-border-color: #5b4878;
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lsu-purple-dark);
    --bs-btn-active-border-color: var(--lsu-purple-dark);
}

.btn-success,
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lsu-purple);
    --bs-btn-border-color: var(--lsu-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lsu-purple-hover);
    --bs-btn-hover-border-color: var(--lsu-purple-hover);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lsu-purple-dark);
    --bs-btn-active-border-color: var(--lsu-purple-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--lsu-purple);
    --bs-btn-border-color: var(--lsu-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lsu-purple);
    --bs-btn-hover-border-color: var(--lsu-purple);
    --bs-btn-focus-shadow-rgb: 70, 29, 124;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lsu-purple-dark);
    --bs-btn-active-border-color: var(--lsu-purple-dark);
    --bs-btn-disabled-color: #74608e;
    --bs-btn-disabled-border-color: #74608e;
}

.btn-outline-warning {
    --bs-btn-color: var(--lsu-purple-dark);
    --bs-btn-border-color: var(--lsu-gold-border);
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: var(--lsu-gold);
    --bs-btn-hover-border-color: var(--lsu-gold-border);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #111827;
    --bs-btn-active-bg: var(--lsu-gold-hover);
    --bs-btn-active-border-color: var(--lsu-gold-border);
}

.btn-outline-success,
.btn-outline-info {
    --bs-btn-color: var(--lsu-purple);
    --bs-btn-border-color: var(--lsu-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lsu-purple);
    --bs-btn-hover-border-color: var(--lsu-purple);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lsu-purple-dark);
    --bs-btn-active-border-color: var(--lsu-purple-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--lsu-purple);
    --bs-btn-border-color: #8a7aa3;
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: #f6edc5;
    --bs-btn-hover-border-color: var(--lsu-gold-border);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #111827;
    --bs-btn-active-bg: var(--lsu-gold);
    --bs-btn-active-border-color: var(--lsu-gold-border);
    --bs-btn-disabled-color: #6b6474;
    --bs-btn-disabled-border-color: #b8afc6;
}

.btn-warning {
    --bs-btn-color: #111827;
    --bs-btn-bg: var(--lsu-gold);
    --bs-btn-border-color: var(--lsu-gold-border);
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: var(--lsu-gold-hover);
    --bs-btn-hover-border-color: var(--lsu-gold-border);
    --bs-btn-focus-shadow-rgb: 70, 29, 124;
    --bs-btn-active-color: #111827;
    --bs-btn-active-bg: #d6a900;
    --bs-btn-active-border-color: #a87e00;
}

.btn-light {
    --bs-btn-color: var(--lsu-purple);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: var(--lsu-gold);
    --bs-btn-hover-border-color: var(--lsu-gold-border);
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
    --bs-btn-active-color: #111827;
    --bs-btn-active-bg: var(--lsu-gold-hover);
    --bs-btn-active-border-color: var(--lsu-gold-border);
}

.btn-danger {
    --bs-btn-focus-shadow-rgb: 253, 208, 35;
}

.pagination {
    --bs-pagination-color: var(--lsu-purple);
    --bs-pagination-hover-color: #111827;
    --bs-pagination-hover-bg: #f6edc5;
    --bs-pagination-hover-border-color: var(--lsu-gold-border);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--lsu-purple);
    --bs-pagination-active-border-color: var(--lsu-purple);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .45);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.table-responsive:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--lsu-gold);
    outline-offset: 2px;
}

.skip-link {
    background: var(--lsu-gold);
    color: #111827;
    font-weight: 700;
    left: 1rem;
    padding: .75rem 1rem;
    position: absolute;
    top: -4rem;
    z-index: 1100;
}

.skip-link:focus {
    top: 1rem;
}

.site-header {
    background: var(--surface);
    box-shadow: 0 .2rem .75rem rgba(31, 41, 51, .08);
    position: relative;
    z-index: 10;
}

.site-header > .site-frame {
    padding-left: 0;
    padding-right: 0;
}

.brand-banner {
    border-bottom: 1px solid var(--line);
    color: #fff;
    display: flex;
    isolation: isolate;
    justify-content: flex-start;
    align-items: flex-end;
    height: clamp(128px, 15vw, 260px);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.brand-banner::after {
    background:
        linear-gradient(90deg, rgba(24, 13, 42, .78) 0%, rgba(24, 13, 42, .45) 34%, rgba(24, 13, 42, .08) 70%),
        linear-gradient(0deg, rgba(24, 13, 42, .55) 0%, rgba(24, 13, 42, .08) 55%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.brand-banner-image {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    width: 100%;
    z-index: -2;
}

.brand-banner-content {
    display: grid;
    gap: .2rem;
    max-width: min(45rem, 88%);
    padding: clamp(1rem, 2.1vw, 2rem) var(--site-gutter);
}

.brand-banner-eyebrow {
    color: var(--lsu-gold);
    font-size: clamp(.78rem, 1vw, .95rem);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-banner-title {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.brand-banner-subtitle {
    color: rgba(255, 255, 255, .94);
    font-size: clamp(.9rem, 1.35vw, 1.2rem);
    font-weight: 700;
}

.brand-banner:hover .brand-banner-title,
.brand-banner:focus .brand-banner-title {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--lsu-gold);
    text-decoration-thickness: 3px;
    text-underline-offset: .18em;
}

.site-nav {
    align-items: center;
    background: var(--lsu-purple);
    border-bottom: 4px solid var(--lsu-gold);
    gap: .75rem;
    min-height: 58px;
    padding: .35rem var(--site-gutter);
}

.site-nav-brand {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    margin-right: 1rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-brand:hover,
.site-nav-brand:focus {
    color: var(--lsu-gold);
}

.site-nav-toggler {
    align-items: center;
    border-color: rgba(255, 255, 255, .72);
    color: #fff;
    display: inline-flex;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem .65rem;
}

.site-nav-toggler:hover,
.site-nav-toggler:focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.site-nav-toggler .navbar-toggler-icon {
    filter: invert(1);
    height: 1.25rem;
    width: 1.25rem;
}

.site-nav-toggler-text {
    font-size: .95rem;
    font-weight: 700;
}

.site-nav .navbar-collapse {
    align-items: center;
    min-width: 0;
}

.site-nav .navbar-nav {
    gap: .2rem;
    min-width: 0;
}

.site-nav .nav-link {
    align-items: center;
    border-radius: .35rem;
    color: rgba(255, 255, 255, .92);
    display: flex;
    font-weight: 700;
    min-height: 44px;
    padding: .6rem .75rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.site-nav .nav-link.active,
.site-nav .nav-link[aria-current="page"] {
    background: var(--lsu-gold);
    box-shadow: inset 0 -2px 0 rgba(17, 24, 39, .2);
    color: #111827 !important;
}

.site-nav-actions {
    border-left: 1px solid rgba(255, 255, 255, .25);
    margin-left: 1rem;
    padding-left: 1rem;
}

.site-nav-actions .nav-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    cursor: pointer;
}

.site-nav-actions .nav-link:hover,
.site-nav-actions .nav-link:focus {
    background: #fff;
    border-color: #fff;
    color: var(--lsu-purple);
}

.site-nav-actions .nav-link.active,
.site-nav-actions .nav-link[aria-current="page"] {
    border-color: var(--lsu-gold);
}

.site-nav-user {
    align-items: center;
    color: rgba(255, 255, 255, .9);
    display: flex;
    gap: .6rem;
    margin-left: 1rem;
    min-width: 0;
}

.site-nav-user-name {
    font-size: .9rem;
    font-weight: 700;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-auth-link {
    border: 1px solid rgba(253, 208, 35, .75);
    border-radius: .35rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    min-height: 38px;
    padding: .45rem .65rem;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav-auth-link:hover,
.site-nav-auth-link:focus {
    background: var(--lsu-gold);
    color: #111827;
}

.alert-marquee {
    background: var(--lsu-gray);
    overflow: hidden;
}

.alert-marquee-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.alert-marquee-label {
    align-items: center;
    background: #3f4044;
    color: #fff;
    display: flex;
    font-size: .72rem;
    font-weight: 600;
    gap: .4rem;
    letter-spacing: .03em;
    min-height: 48px;
    min-width: 0;
    padding: .35rem .6rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.alert-marquee-label-icon {
    color: var(--lsu-gold);
}

.alert-marquee-track {
    align-items: center;
    background: #f3f3f4;
    border-bottom: 1px solid #c9c9cc;
    color: #1f2937;
    display: flex;
    min-height: 48px;
    min-width: 0;
    overflow: hidden;
}

.alert-marquee-scroller {
    animation: alert-marquee-scroll 130s linear infinite;
    display: flex;
    flex: none;
    width: max-content;
    will-change: transform;
}

.alert-marquee-content {
    display: inline-flex;
    flex: none;
    white-space: nowrap;
}

.alert-marquee-item {
    align-items: center;
    color: #1f2937;
    display: inline-flex;
    gap: .4rem;
    padding: 0 2rem;
    text-decoration: none;
}

a.alert-marquee-item:hover,
a.alert-marquee-item:focus {
    color: #111827;
    text-decoration: underline;
}

.alert-marquee-icon {
    color: var(--lsu-purple);
    flex: none;
}

/* Pause the ticker on hover or when a keyboard user focuses the track,
   so alerts can be read without a dedicated control. */
.alert-marquee:hover .alert-marquee-scroller,
.alert-marquee-track:focus-within .alert-marquee-scroller {
    animation-play-state: paused;
}

/* Motion-sensitive users shouldn't have to hover/focus just to stop a continuously
   scrolling ticker - honor the OS-level preference from the moment the page loads. */
@media (prefers-reduced-motion: reduce) {
    .alert-marquee-scroller {
        animation: none;
    }
}

.alert-marquee-track:focus-visible {
    outline: 3px solid var(--lsu-gold);
    outline-offset: -3px;
}

@keyframes alert-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.site-main {
    padding: 1.5rem 0 2rem;
}

.app-content-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
}

.app-content-layout-wide {
    grid-template-columns: minmax(0, 1fr);
}

.app-content {
    min-width: 0;
}

.resource-sidebar {
    min-width: 0;
}

.resource-sidebar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .4rem;
    box-shadow: 0 .2rem .65rem rgba(26, 13, 51, .08);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.resource-sidebar-heading {
    align-items: center;
    background: var(--lsu-purple);
    border-bottom: 4px solid var(--lsu-gold);
    color: #fff;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .8rem 1rem;
}

.resource-sidebar-heading h2 {
    color: inherit;
    font-size: 1.05rem;
    margin: 0;
}

.resource-sidebar-heading a {
    color: var(--lsu-gold);
    font-size: .82rem;
    font-weight: 700;
}

.resource-sidebar-list {
    list-style: none;
    margin: 0;
    padding: .25rem 0;
}

.resource-sidebar-list li + li {
    border-top: 1px solid var(--line);
}

.resource-sidebar-list a {
    align-items: start;
    color: var(--lsu-purple);
    display: flex;
    font-weight: 700;
    gap: .5rem;
    justify-content: space-between;
    line-height: 1.3;
    padding: .8rem 1rem;
    text-decoration: none;
}

.resource-sidebar-list a:hover,
.resource-sidebar-list a:focus {
    background: rgba(70, 29, 124, .07);
    color: var(--lsu-purple-dark);
    text-decoration: underline;
}

.resource-sidebar-external {
    flex: 0 0 auto;
}

.resource-sidebar-status {
    color: var(--muted);
    margin: 0;
    padding: 1rem;
}

.checklist-introduction {
    margin-bottom: 1rem;
}

.building-inspection-frame {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .4rem;
    display: block;
    min-height: 75rem;
    width: 100%;
}

.site-footer {
    background: var(--lsu-purple);
    border-top: 4px solid var(--lsu-gold);
    color: #fff;
    padding: 1.5rem 0;
    /* The LSUInfrastructure.Mvc package's _myLSUFooter partial uses Bootstrap .row,
       whose negative gutter margins bleed a few pixels past this element's edge since
       there's no horizontal padding here to absorb them - causing a persistent
       page-wide horizontal scrollbar. Contain it the same way the alert marquee's
       intentionally oversized ticker content is contained below. */
    overflow-x: hidden;
}

.site-footer a {
    color: #fff;
    font-weight: 700;
    text-decoration-color: rgba(255, 255, 255, .55);
    text-underline-offset: .18em;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--lsu-gold);
    text-decoration-color: currentColor;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

/* LSUInfrastructure.Mvc's _FooterContact partial renders social links with
   btn-social-icon/btn-facebook/btn-twitter classes but ships no CSS for them
   (same gap as its missing footer-logo styling), so only the bare icon glyph
   shows. Supply the circular brand-colored background locally. */
.btn-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
}

.btn-facebook {
    background-color: #3b5998;
}

.btn-twitter {
    background-color: #55acee;
}

.page-heading {
    color: var(--lsu-purple);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-title {
    color: var(--lsu-purple);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.25rem 0 .75rem;
}

.content-pane,
#main,
#sidebar,
.block,
.filter-fieldset,
.bc-table,
.wide-table,
.pager,
.outage-item,
.content-item {
    float: none;
    min-width: 0;
    width: auto;
}

.content-pane,
.card,
.content-item,
.data-alert,
.empty-panel,
.outage-item,
.static-link {
    overflow-wrap: anywhere;
}

.filter-fieldset {
    border: 1px solid var(--line);
    margin: 0;
    padding: 1rem;
}

.filter-fieldset legend {
    color: var(--lsu-purple);
    float: none;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0 .35rem;
    width: auto;
}

.filter-form {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Top-align fields so help text under one input doesn't push it above its
   neighbors; drop the action buttons by one label height to sit on the inputs. */
.filter-form-top {
    align-items: start;
}

.filter-form-top > .maintenance-actions {
    margin-top: calc(1.5rem + .5rem);
}

.date-input,
.short-input {
    width: 100%;
}

.form-actions {
    text-align: right;
}

.data-alert,
.empty-panel {
    background: var(--warning-bg);
    border: 1px solid #d7a900;
    color: var(--warning-text);
    margin: 1rem 0;
    padding: 1rem;
}

.data-table {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    margin-bottom: 0;
    width: 100% !important;
}

.data-table caption {
    color: var(--ink);
    font-weight: 700;
    padding: .5rem 0;
}

table.dataTable.table.data-table > thead > tr > th,
table.dataTable.table.data-table > thead > tr > td,
.data-table thead th {
    --bs-table-bg: var(--lsu-purple);
    --bs-table-color: #fff;
    --dt-order-arrow-height: 8px;
    --dt-order-arrow-width: 11px;
    --dt-order-arrow-gap: 2px;
    --dt-order-arrow_color: #fff;
    --dt-order-arrow_color-current: var(--lsu-gold);
    --dt-order-arrow_opacity: .7;
    --dt-order-arrow_opacity-current: 1;
    background: var(--lsu-purple) !important;
    border-color: #32145d !important;
    box-shadow: inset 0 -3px 0 var(--lsu-gold);
    color: #fff !important;
    font-weight: 700;
    vertical-align: middle;
}

table.dataTable.table.data-table > thead > tr > th.dt-orderable-asc:hover,
table.dataTable.table.data-table > thead > tr > th.dt-orderable-desc:hover,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-asc,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-desc {
    background-color: #35145f !important;
    color: #fff !important;
}

table.dataTable.table.data-table > thead > tr > th.dt-orderable-asc,
table.dataTable.table.data-table > thead > tr > th.dt-orderable-desc,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-asc,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-desc {
    padding-right: 2.25rem;
    position: relative;
}

.data-table th.control-column {
    padding-right: .5rem;
}

.data-table th.control-column span.dt-column-order {
    display: none;
}

table.dataTable.table.data-table > thead > tr > th span.dt-column-title {
    display: inline-block;
    max-width: calc(100% - .25rem);
}

table.dataTable.table.data-table > thead > tr > th span.dt-column-order {
    color: #fff !important;
    display: inline-block;
    height: 1.45rem;
    min-width: 1.1rem;
    opacity: 1 !important;
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
}

table.dataTable.table.data-table > thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable.table.data-table > thead > tr > th.dt-orderable-desc span.dt-column-order::after {
    color: #fff !important;
    opacity: .95 !important;
}

table.dataTable.table.data-table > thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-desc span.dt-column-order::after {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7));
    opacity: 1 !important;
}

table.dataTable.table.data-table > thead > tr > th.dt-ordering-asc span.dt-column-order::after,
table.dataTable.table.data-table > thead > tr > th.dt-ordering-desc span.dt-column-order::before {
    color: rgba(255, 255, 255, .45) !important;
    opacity: 1 !important;
}

.data-table th a {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.data-table td {
    vertical-align: middle;
}

.table-responsive {
    /* Bootstrap's default overflow-x: auto boxes every table in its own scroll
       region. The DataTables Responsive extension already handles narrow
       screens by hiding columns into a details row, so the scroll container
       is unnecessary and was clipping tables instead of letting them grow to
       fit all of their rows. */
    margin-bottom: 1rem;
    overflow: visible;
}

.dt-container {
    min-width: 0;
    width: 100%;
}

.dt-container .row {
    --bs-gutter-y: .75rem;
}

.dt-container .dt-length label,
.dt-container .dt-search label {
    color: var(--muted);
    font-weight: 700;
}

div.dt-container div.dt-length select,
div.dt-container div.dt-search input {
    max-width: 100%;
}

div.dt-container div.dt-search input {
    margin-left: .5rem;
}

div.dt-container div.dt-paging ul.pagination {
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: flex-end;
}

.control-column {
    min-width: 3rem;
    text-align: center;
    width: 3rem;
}

table.dataTable.dtr-column > tbody > tr > td.control-column::before,
table.dataTable.dtr-column > tbody > tr > th.control-column::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.control-column::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.control-column::before {
    display: none !important;
}

.row-detail-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--lsu-purple);
    display: inline-flex;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    min-width: 2rem;
    padding: 0;
}

.row-detail-toggle::before {
    content: "+";
    font-size: 1.1rem;
}

tr.parent .row-detail-toggle::before {
    content: "-";
}

.data-table:not(.collapsed) .row-detail-toggle {
    visibility: hidden;
}

table.dataTable > tbody > tr.child td.child {
    background: #f8fafc;
    border-left: 4px solid var(--lsu-gold);
    padding: .85rem 1rem;
}

.dt-row-details {
    max-width: 100%;
}

.dt-detail-list {
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0;
}

.dt-detail-item {
    min-width: 0;
}

.dt-detail-item dt {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .15rem;
    text-transform: uppercase;
}

.dt-detail-item dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.contact-list-table .contact-building-name {
    font-weight: 700;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.contact-actions .btn {
    min-height: 38px;
    min-width: 62px;
}

.contact-list-table .contact-phone a,
.contact-list-table .contact-email a,
.contact-row-details a {
    overflow-wrap: anywhere;
}

.contact-row-details .dt-detail-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.contact-row-details .dt-detail-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .35rem;
    padding: .65rem;
}

.contact-row-details .dt-detail-phone a,
.contact-row-details .dt-detail-email a {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: .25rem;
    display: inline-flex;
    min-height: 44px;
    padding: .35rem .55rem;
    text-decoration: none;
}

.data-table .center,
.empty-row {
    text-align: center;
}

.toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.icon-button {
    align-items: center;
    border: 1px solid var(--line);
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: .45rem;
}

.icon-button img {
    height: 28px;
    width: 28px;
}

.icon-button i {
    font-size: 1.15rem;
    line-height: 1;
}

.status-active {
    color: #15803d;
    font-size: 1.1rem;
}

.status-inactive {
    color: #9ca3af;
    font-size: 1.1rem;
}

.pager {
    align-items: center;
    background: var(--lsu-purple);
    color: #fff;
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 1rem;
    padding: .75rem;
}

.pager a {
    color: #fff;
    font-weight: 700;
}

.outage-list {
    display: grid;
    gap: 1rem;
}

.outage-item {
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
    margin: 0;
    padding: 1rem;
}

.outage-icon {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 116px;
    text-align: center;
}

.outage-type-badge {
    align-items: center;
    background: var(--lsu-purple);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    color: #fff;
    display: inline-flex;
    font-size: 1.7rem;
    height: 60px;
    justify-content: center;
    line-height: 1;
    width: 60px;
}

/* Outage type accent colors */
.outage-type-1 { background: #b45309; } /* Power */
.outage-type-2 { background: #0369a1; } /* Water */
.outage-type-3 { background: #b91c1c; } /* Steam */
.outage-type-4 { background: #0e7490; } /* Chilled water */
.outage-type-5 { background: #c2410c; } /* Gas */
.outage-type-6 { background: #4b5563; } /* Other */
.outage-type-7 { background: #6d28d9; } /* Generator */
.outage-type-8 { background: #be123c; } /* Fire alarm */
.outage-type-9 { background: #7f1d1d; } /* Fire water/sprinkler */

.priority {
    border-radius: 999px;
    color: #111827;
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .25rem .7rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.priority-1 {
    background: #b42318;
    color: #fff;
}

.priority-2 {
    background: #ffe08a;
}

.priority-3 {
    background: #b7efc5;
}

.priority-4 {
    background: #d8a31a;
    color: #fff;
}

.outage-body {
    min-width: 0;
}

.outage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.building-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.content-item {
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 1rem;
    padding: 1rem;
}

.content-answer {
    padding-top: .5rem;
}

.faq-heading-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin: 1.25rem 0 .75rem;
}

.faq-heading-row .section-title {
    margin: 0;
}

.faq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.faq-item .faq-actions,
.faq-edit-form .faq-actions {
    float: right;
    margin-left: 1rem;
}

.faq-edit-form .form-label {
    font-weight: 700;
}

.faq-answer-input {
    min-height: 80px;
}

.static-link {
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 1rem;
    padding: 1rem;
}

.edit-form .card {
    border-color: var(--line);
    border-radius: .4rem;
}

.edit-form .card-header {
    background: var(--lsu-purple);
    border-bottom: 3px solid var(--lsu-gold);
    color: #fff;
}

.edit-form .form-label,
.edit-form .form-check-label {
    color: var(--ink);
    font-weight: 700;
}

.edit-form .text-danger {
    display: block;
    font-size: .9rem;
    margin-top: .25rem;
}

.priority-options {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    min-height: 44px;
}

.priority-options .form-check {
    align-items: center;
    background: #fff;
    border: 1px solid #b8afc6;
    border-radius: .35rem;
    display: inline-flex;
    flex: 1 1 10rem;
    margin: 0;
    min-height: 44px;
    padding: .55rem .75rem .55rem 2.45rem;
    position: relative;
}

.priority-options .form-check:focus-within {
    border-color: var(--lsu-purple);
    box-shadow: 0 0 0 .25rem rgba(253, 208, 35, .38);
}

.priority-options .form-check:has(.form-check-input[type="radio"]:checked) {
    background: var(--lsu-purple-soft);
    border-color: var(--lsu-purple);
    box-shadow: inset 0 -3px 0 var(--lsu-gold);
}

.priority-options .form-check:has(.form-check-input[type="radio"]:disabled) {
    background: #f8f6fc;
}

.priority-options .form-check-input[type="radio"] {
    left: .75rem;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.priority-options .form-check-label {
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.priority-options .form-check-input[type="radio"]:checked + .form-check-label {
    color: var(--lsu-purple-dark);
}

.priority-options .form-check-input[type="radio"]:disabled + .form-check-label {
    cursor: default;
}

.recipient-picker {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.recipient-picker-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: .25rem;
}

.recipient-picker-list {
    min-height: 14rem;
}

@media (max-width: 991.98px) {
    .app-content-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .resource-sidebar-card {
        position: static;
    }

    .building-inspection-frame {
        min-height: 60rem;
    }
}

@media (max-width: 767.98px) {
    .recipient-picker {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .recipient-picker-actions {
        flex-direction: row;
        padding-bottom: 0;
    }
}

.maintenance-area-list {
    display: grid;
    gap: 1rem;
}

.maintenance-area {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-width: 0;
    padding: 1rem;
}

.maintenance-area .section-title,
.maintenance-area p {
    margin: 0;
}

.maintenance-area p {
    color: var(--muted);
    margin-top: .25rem;
}

.maintenance-page-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.maintenance-page-header .page-heading {
    margin-bottom: .75rem;
}

.maintenance-accordion .accordion-button {
    color: var(--lsu-purple);
    font-weight: 700;
}

.maintenance-accordion .accordion-button:not(.collapsed) {
    background: #f3ecff;
    box-shadow: inset 0 -3px 0 var(--lsu-gold);
    color: var(--lsu-purple);
}

.maintenance-add-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: 1rem;
}

.maintenance-page .table-input {
    min-width: 8rem;
}

.maintenance-page .table-select {
    min-width: 9rem;
}

.maintenance-page .table-text-input {
    min-width: 18rem;
}

.maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.maintenance-edit-form {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1rem;
}

.maintenance-record-summary {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0 0 1rem;
    padding-bottom: 1rem;
}

.maintenance-record-summary dt {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.maintenance-record-summary dd {
    color: var(--ink);
    font-weight: 700;
    margin: 0;
}

.maintenance-switch {
    margin-top: 2rem;
}

.inspection-heading-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.inspection-heading-row .page-heading {
    margin-bottom: .75rem;
}

.inspection-selector {
    margin-bottom: 1rem;
}

.inspection-selector-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.inspection-instructions,
.inspection-summary {
    background: #fff;
    border: 1px solid var(--line);
    margin-bottom: 1rem;
    padding: 1rem;
}

.inspection-instructions {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.inspection-submit-for {
    max-width: 28rem;
}

.inspection-summary dl,
.inspection-report-summary {
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0 0 1rem;
}

.inspection-summary dl {
    margin-bottom: 0;
}

.inspection-summary dt,
.inspection-report-summary dt {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.inspection-summary dd,
.inspection-report-summary dd {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.inspection-report-summary {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    padding: 1rem 0;
}

.inspection-section {
    margin-bottom: 1.25rem;
}

.inspection-table th:first-child,
.inspection-table td:first-child {
    text-align: center;
    width: 4rem;
}

.inspection-table th:nth-child(3),
.inspection-table td:nth-child(3) {
    width: 11rem;
}

.inspection-table th:nth-child(4),
.inspection-table td:nth-child(4) {
    width: 18rem;
}

.inspection-answer-options {
    align-items: center;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(2, minmax(4rem, 1fr));
    min-width: 9rem;
}

.inspection-answer-options .form-check {
    margin: 0;
    min-height: 2rem;
}

.inspection-comment-input {
    min-width: 14rem;
}

.inspection-overall-comment {
    min-height: 5rem;
}

.inspection-answer-badge {
    background: #f8f6fc;
    border: 1px solid var(--line);
    display: inline-block;
    font-weight: 700;
    min-width: 5rem;
    padding: .2rem .45rem;
    text-align: center;
}

.inspection-row-no .inspection-answer-badge {
    background: #fde8e8;
    border-color: #e6a3a3;
    color: #6b1111;
}

.contact-panel {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.report-body {
    background: #fff;
    padding: 1rem;
}

.report-table {
    /* table-layout: auto only treats width as a minimum - a cell with an unbreakable
       long token (e.g. an email address) can still force the table past 100% and off
       the edge of a printed page. Fixed layout makes 100% a hard cap and forces every
       cell's content to wrap (via overflow-wrap) to fit its column instead. */
    table-layout: fixed;
    width: 100%;
}

.report-table td,
.report-table th {
    overflow-wrap: break-word;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* WCAG AA: pure red (#FF0000) on white is below the 4.5:1 contrast threshold.
   ASP.NET sets ForeColor="Red" as an inline style; !important overrides it. */
span[style*="color:Red"],
div[style*="color:Red"],
input[style*="color:Red"] {
    color: #b42318 !important;
}

/* Give the CKEditor 5 editing area a comfortable default height so longer
   messages are visible while typing; it still scrolls past the max height. */
.ck.ck-editor__editable_inline {
    min-height: 18rem;
    max-height: 32rem;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .site-frame {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .brand-banner {
        height: clamp(110px, 32vw, 155px);
    }

    .brand-banner::after {
        background:
            linear-gradient(90deg, rgba(24, 13, 42, .82) 0%, rgba(24, 13, 42, .55) 48%, rgba(24, 13, 42, .2) 100%),
            linear-gradient(0deg, rgba(24, 13, 42, .52) 0%, rgba(24, 13, 42, .12) 65%);
    }

    .brand-banner-image {
        object-position: 48% center;
    }

    .brand-banner-content {
        gap: .15rem;
        max-width: 94%;
        padding: .9rem var(--site-gutter);
    }

    .brand-banner-eyebrow {
        font-size: .7rem;
    }

    .brand-banner-title {
        font-size: 1.45rem;
    }

    .brand-banner-subtitle {
        font-size: .85rem;
    }

    .site-nav {
        align-items: center;
        padding: .5rem var(--site-gutter);
    }

    .site-nav-brand {
        max-width: calc(100% - 7rem);
    }

    .site-nav .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, .22);
        margin-top: .5rem;
        padding-top: .5rem;
        width: 100%;
    }

    .site-nav .navbar-nav {
        gap: .35rem;
        width: 100%;
    }

    .site-nav-actions {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .22);
        margin-left: 0;
        margin-top: .5rem;
        padding-left: 0;
        padding-top: .5rem;
    }

    .site-nav-actions .dropdown-menu {
        position: static;
        width: 100%;
    }

    .site-nav-user {
        align-items: stretch;
        border-top: 1px solid rgba(255, 255, 255, .22);
        flex-direction: column;
        gap: .45rem;
        margin-left: 0;
        margin-top: .5rem;
        padding-top: .5rem;
        width: 100%;
    }

    .site-nav-user-name {
        max-width: 100%;
        padding: .25rem .1rem;
    }

    .site-nav-auth-link {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .site-nav .nav-link {
        border-radius: .35rem;
        padding: .7rem .75rem;
        width: 100%;
    }

    .site-main {
        padding-top: 1rem;
    }

    .page-heading {
        font-size: 1.35rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .outage-item {
        grid-template-columns: 1fr;
    }

    .outage-icon {
        align-items: center;
        flex-direction: row;
        gap: .75rem;
        min-width: 0;
        text-align: left;
        width: auto;
    }

    .outage-actions {
        justify-content: flex-start;
    }

    .form-actions {
        text-align: left;
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .toolbar {
        justify-content: flex-start;
        width: 100%;
    }

    div.dt-container div.dt-length,
    div.dt-container div.dt-search,
    div.dt-container div.dt-info,
    div.dt-container div.dt-paging {
        text-align: left;
    }

    div.dt-container div.dt-search input {
        display: block;
        margin: .35rem 0 0;
        width: 100%;
    }

    div.dt-container div.dt-paging ul.pagination {
        justify-content: flex-start;
    }

    .contact-list-table.collapsed > tbody > tr:not(.child) > td {
        white-space: normal;
    }

    .contact-list-table.collapsed > tbody > tr:not(.child) > td.contact-building-number {
        color: var(--ink);
        font-weight: 700;
        min-width: 5rem;
    }

    .contact-list-table.collapsed > tbody > tr:not(.child) > td.contact-building-name {
        color: var(--ink);
        min-width: 10rem;
    }

    .contact-list-table.collapsed > tbody > tr:not(.child) > td.contact-person {
        color: var(--muted);
        min-width: 8rem;
    }

    table.dataTable.contact-list-table > tbody > tr.child td.child {
        padding: .75rem;
    }

    .contact-row-details .dt-detail-list {
        gap: .6rem;
        grid-template-columns: 1fr;
    }

    .dt-detail-list {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        flex-direction: column;
        gap: .4rem;
    }
}

@media (max-width: 575.98px) {
    .report-body {
        padding: .75rem;
    }

    .pager {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}

@media print {
    .NonPrintable,
    .site-header,
    .site-footer,
    .toolbar {
        display: none !important;
    }

    body,
    .site-main {
        background: #fff;
        color: #000;
        padding: 0;
    }
}