/* Shared WCAG helpers for CEM SYSTEM. */
:root {
    --cem-focus-ring-color: #111111;
    --cem-focus-ring-shadow: rgba(255, 255, 255, 0.95);
}

html {
    scroll-padding-top: 5rem;
}

body {
    min-height: 100vh;
}

.cem-skip-link {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    color: #ffffff;
    background: #000000;
    border: 0;
    border-radius: .25rem;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.cem-skip-link:focus,
.cem-skip-link:focus-visible {
    width: auto;
    height: auto;
    margin: 0;
    padding: .65rem .95rem;
    overflow: visible;
    color: #ffffff;
    clip: auto;
    box-shadow: 0 0 0 .25rem #ffffff, 0 0 0 .45rem var(--cem-focus-ring-color) !important;
    white-space: normal;
}

.cem-main-content {
    scroll-margin-top: 5rem;
}

.cem-a11y-generated-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

:focus-visible {
    box-shadow: 0 0 0 .25rem var(--cem-focus-ring-shadow) !important;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 .25rem var(--cem-focus-ring-shadow) !important;
}

a.link-primary:not(.btn),
.link-primary:not(.btn) {
    color: #084298 !important;
}

a.link-primary:not(.btn):hover,
a.link-primary:not(.btn):focus,
.link-primary:not(.btn):hover,
.link-primary:not(.btn):focus {
    color: #052c65 !important;
}

.cem-google-translate-arrow {
    display: inline-block;
    margin-left: .35rem;
    vertical-align: middle;
    color: currentColor;
}

.display-6 {
    font-size: 2rem !important;
}

#cem_availability {
    position: fixed;
    top: .5rem;
    right: .5rem;
    bottom: auto;
    left: auto;
    z-index: 2147483000;
    max-width: min(26rem, calc(100vw - 1rem));
    background-color: #ffffff;
}

#cem_availability.cem-a11y-panel-top-right {
    top: .5rem;
    right: .5rem;
    bottom: auto;
    left: auto;
}

#cem_availability.cem-a11y-panel-bottom-right {
    top: auto;
    right: .5rem;
    bottom: .5rem;
    left: auto;
}

#cem_availability.cem-a11y-panel-bottom-left {
    top: auto;
    right: auto;
    bottom: .5rem;
    left: .5rem;
}

#cem_availability.cem-a11y-panel-top-left {
    top: .5rem;
    right: auto;
    bottom: auto;
    left: .5rem;
}

#cem_availability .btn-group {
    flex-wrap: wrap;
    gap: .25rem;
}

#cem_availability .btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-left: 0 !important;
}

#cem_availability .btn[aria-pressed="true"] {
    box-shadow: inset 0 0 0 .2rem var(--cem-focus-ring-color);
    font-weight: 700;
}

html.cem-a11y-text-lg {
    font-size: 125%;
}

html.cem-a11y-text-xl {
    font-size: 150%;
}

body.cem-a11y-contrast-white,
body.cem-a11y-contrast-white main,
body.cem-a11y-contrast-white header,
body.cem-a11y-contrast-white footer,
body.cem-a11y-contrast-white #cem_availability,
body.cem-a11y-contrast-white .container,
body.cem-a11y-contrast-white .container-fluid,
body.cem-a11y-contrast-white .bg-primary,
body.cem-a11y-contrast-white .bg-secondary,
body.cem-a11y-contrast-white .bg-light,
body.cem-a11y-contrast-white .bg-white,
body.cem-a11y-contrast-white .text-primary,
body.cem-a11y-contrast-white .text-white,
body.cem-a11y-contrast-white .card,
body.cem-a11y-contrast-white .card-header,
body.cem-a11y-contrast-white .card-body,
body.cem-a11y-contrast-white .card-footer,
body.cem-a11y-contrast-white .alert,
body.cem-a11y-contrast-white .table,
body.cem-a11y-contrast-white .table > :not(caption) > * > *,
body.cem-a11y-contrast-white .list-group-item,
body.cem-a11y-contrast-white .dropdown-menu,
body.cem-a11y-contrast-white .dropdown-item,
body.cem-a11y-contrast-white .modal-content,
body.cem-a11y-contrast-white .badge,
body.cem-a11y-contrast-white .text-muted,
body.cem-a11y-contrast-white .cem-schedule-day-sticky,
body.cem-a11y-contrast-white .cem-schedule-tiles,
body.cem-a11y-contrast-white .cem-schedule-tile,
body.cem-a11y-contrast-white .cem-schedule-tile-date,
body.cem-a11y-contrast-white .cem-schedule-tile-meta,
body.cem-a11y-contrast-white .cem-schedule-tile-detail,
body.cem-a11y-contrast-white .cem-schedule-calendar,
body.cem-a11y-contrast-white .cem-schedule-calendar-week,
body.cem-a11y-contrast-white .cem-schedule-calendar-week-header,
body.cem-a11y-contrast-white .cem-schedule-calendar-scroll,
body.cem-a11y-contrast-white .cem-schedule-calendar-grid,
body.cem-a11y-contrast-white .cem-schedule-calendar-day,
body.cem-a11y-contrast-white .cem-schedule-calendar-date,
body.cem-a11y-contrast-white .cem-schedule-calendar-empty,
body.cem-a11y-contrast-white .cem-schedule-calendar-event,
body.cem-a11y-contrast-white .cem-schedule-calendar-event-meta,
body.cem-a11y-contrast-white .cem-schedule-calendar-async,
body.cem-a11y-contrast-white .cem-schedule-calendar-async-list,
body.cem-a11y-contrast-white .cem-schedule-table-panel {
    color: #ffffff !important;
    background-color: #000000 !important;
}

body.cem-a11y-contrast-yellow,
body.cem-a11y-contrast-yellow main,
body.cem-a11y-contrast-yellow header,
body.cem-a11y-contrast-yellow footer,
body.cem-a11y-contrast-yellow #cem_availability,
body.cem-a11y-contrast-yellow .container,
body.cem-a11y-contrast-yellow .container-fluid,
body.cem-a11y-contrast-yellow .bg-primary,
body.cem-a11y-contrast-yellow .bg-secondary,
body.cem-a11y-contrast-yellow .bg-light,
body.cem-a11y-contrast-yellow .bg-white,
body.cem-a11y-contrast-yellow .text-primary,
body.cem-a11y-contrast-yellow .text-white,
body.cem-a11y-contrast-yellow .card,
body.cem-a11y-contrast-yellow .card-header,
body.cem-a11y-contrast-yellow .card-body,
body.cem-a11y-contrast-yellow .card-footer,
body.cem-a11y-contrast-yellow .alert,
body.cem-a11y-contrast-yellow .table,
body.cem-a11y-contrast-yellow .table > :not(caption) > * > *,
body.cem-a11y-contrast-yellow .list-group-item,
body.cem-a11y-contrast-yellow .dropdown-menu,
body.cem-a11y-contrast-yellow .dropdown-item,
body.cem-a11y-contrast-yellow .modal-content,
body.cem-a11y-contrast-yellow .badge,
body.cem-a11y-contrast-yellow .text-muted,
body.cem-a11y-contrast-yellow .cem-schedule-day-sticky,
body.cem-a11y-contrast-yellow .cem-schedule-tiles,
body.cem-a11y-contrast-yellow .cem-schedule-tile,
body.cem-a11y-contrast-yellow .cem-schedule-tile-date,
body.cem-a11y-contrast-yellow .cem-schedule-tile-meta,
body.cem-a11y-contrast-yellow .cem-schedule-tile-detail,
body.cem-a11y-contrast-yellow .cem-schedule-calendar,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-week,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-week-header,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-scroll,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-grid,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-day,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-date,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-empty,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-event,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-event-meta,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-async,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-async-list,
body.cem-a11y-contrast-yellow .cem-schedule-table-panel {
    color: #ffff00 !important;
    background-color: #000000 !important;
}

body.cem-a11y-contrast-white a:not(.btn),
body.cem-a11y-contrast-white .link-primary {
    color: #ffffff !important;
    text-decoration: underline !important;
}

body.cem-a11y-contrast-yellow a:not(.btn),
body.cem-a11y-contrast-yellow .link-primary {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.cem-a11y-contrast-white .btn,
body.cem-a11y-contrast-white .btn-primary,
body.cem-a11y-contrast-white .btn-light,
body.cem-a11y-contrast-white .btn-dark,
body.cem-a11y-contrast-white input,
body.cem-a11y-contrast-white select,
body.cem-a11y-contrast-white textarea,
body.cem-a11y-contrast-white .text-dark {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

body.cem-a11y-contrast-white .cem-schedule-day-sticky,
body.cem-a11y-contrast-white .cem-schedule-tile,
body.cem-a11y-contrast-white .cem-schedule-calendar-week,
body.cem-a11y-contrast-white .cem-schedule-calendar-week-header,
body.cem-a11y-contrast-white .cem-schedule-calendar-grid,
body.cem-a11y-contrast-white .cem-schedule-calendar-day,
body.cem-a11y-contrast-white .cem-schedule-calendar-event,
body.cem-a11y-contrast-white .cem-schedule-calendar-async,
body.cem-a11y-contrast-white .cem-schedule-table tr {
    border-color: #ffffff !important;
}

body.cem-a11y-contrast-yellow .btn,
body.cem-a11y-contrast-yellow .btn-primary,
body.cem-a11y-contrast-yellow .btn-light,
body.cem-a11y-contrast-yellow .btn-dark,
body.cem-a11y-contrast-yellow input,
body.cem-a11y-contrast-yellow select,
body.cem-a11y-contrast-yellow textarea,
body.cem-a11y-contrast-yellow .text-dark {
    color: #ffff00 !important;
    background-color: #000000 !important;
    border-color: #ffff00 !important;
}

body.cem-a11y-contrast-yellow .cem-schedule-day-sticky,
body.cem-a11y-contrast-yellow .cem-schedule-tile,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-week,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-week-header,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-grid,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-day,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-event,
body.cem-a11y-contrast-yellow .cem-schedule-calendar-async,
body.cem-a11y-contrast-yellow .cem-schedule-table tr {
    border-color: #ffff00 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :focus-visible {
        box-shadow: 0 0 0 .25rem Highlight !important;
    }

    .cem-google-translate-arrow {
        color: CanvasText;
    }
}

@media (max-width: 575.98px) {
    #cem_availability {
        max-width: calc(100vw - 1rem);
    }
}