/*#region Calendar Shared Tokens and Motion */
:root {
    --calendar-event-base: #0089CF;
    --calendar-status-happening: var(--Green, #59AD46);
    --calendar-status-starting: var(--Green, #59AD46);
    --calendar-status-ongoing: var(--Purple, #6E2B7D);
    --calendar-status-ending: var(--Yellow, #FAA61A);
}

.calendar-info-card.is-calendar-pulsing {
    animation: calendar-shared-pulse 700ms ease-in-out 2;
    transform-origin: center;
}

@keyframes calendar-shared-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-info-card.is-calendar-pulsing { animation: none; }
    .calendar-default-events { scroll-behavior: auto; }
}
/*#endregion Calendar Shared Tokens and Motion */

/*#region Calendar Default Modern Cards and Kendo States */
.calendar-default-layout {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(19.375rem,1.2fr);
    gap: 1.35rem;
    align-items: start
}

.calendar-default-scheduler {
    min-width: 0;
    min-height: 40.625rem
}

.calendar-default-sidebar {
    min-width: 0;
    max-height: 38.125rem;
    overflow: hidden;
    border: 1px solid var(--divider-color,#D1D2D4);
    border-radius: 1rem;
    background: var(--black-7,rgba(41,41,41,.07));
    box-shadow: 0 .75rem 2rem rgba(41,41,41,.1)
}

.calendar-default-sidebar-heading {
    display: flex;
    padding: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--black-20,rgba(41,41,41,.2));
    background: var(--White,#FFF)
}

.calendar-default-eyebrow {
    display: block;
    margin-bottom: .125rem;
    color: var(--Soft-Black,#494949);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .12em
}

.calendar-default-sidebar-title {
    margin: 0;
    color: var(--Black,#292929);
    font-family: Montserrat,sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5rem
}

.calendar-default-period {
    flex: 0 0 auto;
    color: var(--Soft-Black,#494949);
    font-size: .75rem;
    font-weight: 600;
    text-align: right
}

.calendar-default-events {
    max-height: 33.125rem;
    padding: .875rem;
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-padding-top: .75rem
}

.calendar-info-card {
    margin-bottom: .875rem;
    overflow: hidden;
    border: 1px solid var(--black-20,rgba(41,41,41,.2));
    border-top: .25rem solid var(--event-color,var(--Blue,#0089CF));
    border-radius: .75rem;
    background: var(--White,#FFF);
    box-shadow: 0 .25rem .75rem rgba(41,41,41,.08);
    transition: transform 160ms ease,box-shadow 160ms ease
}

    .calendar-info-card:last-child {
        margin-bottom: 0
    }

    .calendar-info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .625rem 1.25rem rgba(41,41,41,.14)
    }

.calendar-info-card-link {
    display: block;
    padding: .875rem;
    color: inherit;
    text-decoration: none
}

    .calendar-info-card-link:hover {
        color: inherit;
        text-decoration: none
    }

    .calendar-info-card-link:focus-visible {
        outline: .1875rem solid var(--Blue,#0089CF);
        outline-offset: -.1875rem
    }

.calendar-info-card-header {
    display: grid;
    grid-template-columns: 3.25rem minmax(0,1fr);
    gap: .75rem;
    align-items: center
}

.calendar-info-date {
    display: flex;
    width: 3.25rem;
    height: 3.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    background: var(--black-7,rgba(41,41,41,.07));
    box-shadow: inset 0 0 0 1px var(--black-20,rgba(41,41,41,.2))
}

.calendar-info-month {
    color: var(--Soft-Black,#494949);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1
}

.calendar-info-day {
    margin-top: .125rem;
    color: var(--Black,#292929);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1
}

.calendar-info-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .125rem
}

.calendar-info-date-range {
    color: var(--Soft-Black,#494949);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase
}

.calendar-info-title {
    color: var(--Dark-Blue,#04559F);
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.calendar-info-meta {
    display: flex;
    margin-top: .75rem;
    flex-wrap: wrap;
    gap: .375rem
}

.calendar-info-chip {
    display: inline-flex;
    padding: .3125rem .5rem;
    align-items: center;
    gap: .25rem;
    border-radius: 1rem;
    background: var(--black-7,rgba(41,41,41,.07));
    color: var(--Soft-Black,#494949);
    font-size: .6875rem;
    font-weight: 700
}

.calendar-info-multiday {
    background: var(--yellow-10,rgba(250,166,26,.1));
    color: var(--Black,#292929)
}

.calendar-info-summary {
    display: -webkit-box;
    margin: .75rem 0 0;
    overflow: hidden;
    color: var(--Soft-Black,#494949);
    font-size: .8125rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.calendar-info-current {
    display: inline-flex;
    width: fit-content;
    margin-bottom: .125rem;
    padding: .2rem .45rem;
    border-radius: 1rem;
    background: var(--Green,#59AD46);
    color: var(--White,#FFF);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase
}

.calendar-info-card.is-happening-today {
    border-color: var(--Green,#59AD46);
    border-top-color: var(--Green,#59AD46);
    background: linear-gradient(135deg,var(--green-15,rgba(89,173,70,.15)),var(--White,#FFF) 58%);
    box-shadow: 0 0 0 2px rgba(89,173,70,.18),0 .5rem 1rem rgba(41,41,41,.12)
}

.calendar-default-empty {
    display: flex;
    min-height: 11rem;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .25rem;
    color: var(--Soft-Black,#494949);
    text-align: center
}

.calendar-default-status {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--Red,#E41212);
    border-radius: .625rem;
    background: #fff5f5;
    color: var(--Red,#E41212)
}

.calendar-default-widget .k-scheduler .k-today, .calendar-default-widget.is-viewing-today .k-scheduler-dayview .k-scheduler-header, .calendar-default-widget.is-viewing-today .k-scheduler-dayview .k-scheduler-datecolumn, .calendar-default-widget.is-viewing-today .k-scheduler-dayview .k-scheduler-datecolumn .k-slot-cell {
    background-color: var(--green-15,rgba(89,173,70,.15)) !important
}

.calendar-default-widget.is-viewing-today .k-scheduler-dayview .k-scheduler-header {
    box-shadow: inset 0 -.1875rem 0 var(--Green,#59AD46)
}

.calendar-default-widget .k-event.calendar-event-active {
    border-color: var(--Purple,#6E2B7D) !important;
    background-color: var(--Purple,#6E2B7D) !important;
    color: var(--White,#FFF) !important;
    box-shadow: 0 0 0 .1875rem rgba(110,43,125,.2),0 .375rem .875rem rgba(41,41,41,.18) !important
}

    .calendar-default-widget .k-event.calendar-event-active a, .calendar-default-widget .k-event.calendar-event-active .k-event-template {
        color: var(--White,#FFF) !important
    }

@media(max-width:900px) {
    .calendar-default-layout {
        grid-template-columns: 1fr
    }

    .calendar-default-sidebar {
        max-height: none
    }

    .calendar-default-events {
        display: grid;
        max-height: none;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: .75rem
    }

    .calendar-info-card {
        margin: 0
    }
}

@media(max-width:640px) {
    .calendar-default-sidebar {
        border-radius: .75rem
    }

    .calendar-default-sidebar-heading {
        padding: .875rem
    }

    .calendar-default-events {
        display: block;
        padding: .625rem
    }

    .calendar-info-card {
        margin-bottom: .625rem
    }

    .calendar-info-card-link {
        padding: .75rem
    }

    .calendar-info-card-header {
        grid-template-columns: 3rem minmax(0,1fr);
        gap: .625rem
    }

    .calendar-info-date {
        width: 3rem;
        height: 3.125rem
    }

    .calendar-info-day {
        font-size: 1.25rem
    }

    .calendar-info-summary {
        -webkit-line-clamp: 2
    }

    .calendar-default-scheduler {
        min-height: 35rem
    }
}
/*#endregion Calendar Default Modern Cards and Kendo States */

/*#region Calendar Semantic Colours */
.calendar-default-widget .k-event:not(.calendar-event-happening):not(.calendar-event-starting):not(.calendar-event-ongoing):not(.calendar-event-ending),
.calendar-default-widget .k-task:not(.calendar-event-happening):not(.calendar-event-starting):not(.calendar-event-ongoing):not(.calendar-event-ending) {
    border-color: var(--calendar-event-base) !important;
    background: var(--calendar-event-base) !important;
    background-color: var(--calendar-event-base) !important;
    color: var(--White, #FFF) !important;
}

.calendar-default-widget .k-event.calendar-event-happening,
.calendar-default-widget .k-event.calendar-event-starting,
.calendar-default-widget .k-task.calendar-event-happening,
.calendar-default-widget .k-task.calendar-event-starting {
    --calendar-kendo-status: var(--calendar-status-happening);
    --calendar-kendo-glow: rgba(89, 173, 70, .24);
}

.calendar-default-widget .k-event.calendar-event-ongoing,
.calendar-default-widget .k-task.calendar-event-ongoing {
    --calendar-kendo-status: var(--calendar-status-ongoing);
    --calendar-kendo-glow: rgba(110, 43, 125, .22);
}

.calendar-default-widget .k-event.calendar-event-ending,
.calendar-default-widget .k-task.calendar-event-ending {
    --calendar-kendo-status: var(--calendar-status-ending);
    --calendar-kendo-glow: rgba(250, 166, 26, .26);
}

.calendar-default-widget .k-event.calendar-event-happening,
.calendar-default-widget .k-event.calendar-event-starting,
.calendar-default-widget .k-event.calendar-event-ongoing,
.calendar-default-widget .k-event.calendar-event-ending,
.calendar-default-widget .k-task.calendar-event-happening,
.calendar-default-widget .k-task.calendar-event-starting,
.calendar-default-widget .k-task.calendar-event-ongoing,
.calendar-default-widget .k-task.calendar-event-ending {
    border-color: var(--calendar-kendo-status) !important;
    background: var(--calendar-kendo-status) !important;
    background-color: var(--calendar-kendo-status) !important;
    color: var(--White, #FFF) !important;
    box-shadow: 0 0 0 .125rem var(--calendar-kendo-glow) !important;
}

.calendar-default-widget .k-event.calendar-event-ending,
.calendar-default-widget .k-event.calendar-event-ending a,
.calendar-default-widget .k-event.calendar-event-ending .k-event-template,
.calendar-default-widget .k-task.calendar-event-ending {
    color: var(--Black, #292929) !important;
}

.calendar-default-widget .calendar-info-card {
    --card-status-color: var(--calendar-event-base);
    --card-status-tint: rgba(0, 137, 207, .10);
}

.calendar-default-widget .calendar-info-card.is-today-status,
.calendar-default-widget .calendar-info-card.is-happening,
.calendar-default-widget .calendar-info-card.is-starting {
    --card-status-color: var(--calendar-status-happening);
    --card-status-tint: rgba(89, 173, 70, .15);
}

.calendar-default-widget .calendar-info-card.is-ongoing {
    --card-status-color: var(--calendar-status-ongoing);
    --card-status-tint: rgba(110, 43, 125, .12);
}

.calendar-default-widget .calendar-info-card.is-ending {
    --card-status-color: var(--calendar-status-ending);
    --card-status-tint: rgba(250, 166, 26, .16);
}

.calendar-default-widget .calendar-info-card.is-today-status {
    border-color: var(--card-status-color) !important;
    border-top-color: var(--card-status-color) !important;
    background: linear-gradient(135deg, var(--card-status-tint), var(--White, #FFF) 72%) !important;
}

.calendar-default-widget .calendar-info-card.is-today-status .calendar-info-current {
    background: var(--card-status-color) !important;
}

.calendar-default-widget .calendar-info-card.is-calendar-selected {
    border-color: var(--card-status-color) !important;
    border-top-color: var(--card-status-color) !important;
    box-shadow: 0 0 0 .1875rem var(--card-status-tint), 0 .75rem 1.5rem rgba(41,41,41,.16) !important;
}
/*#endregion Calendar Semantic Colours */

/*#region Calendar Staff Portal Modern Mini View */
.calendar-staff-widget.calendar-staff-mini {
    --staff-calendar-height: 43rem;
    display: flex;
    width: 100%;
    max-width: 23rem;
    height: var(--staff-calendar-height);
    margin: 0 auto;
    padding: 1rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(41, 41, 41, .12);
    border-radius: 1rem;
    background: var(--portal-theme-widget-background-base, #FFF);
    box-shadow: var(--portal-theme-widget-box-shadow, 0 .75rem 1.5rem rgba(0,0,0,.18));
    color: var(--portal-theme-widget-text-color, #3D3D3D);
    font-family: Montserrat, sans-serif;
}

.calendar-staff-widget .calendar-widget-header {
    flex: 0 0 auto;
    margin-bottom: .75rem;
}

.calendar-staff-widget .calendar-widget-text {
    margin: 0;
    color: #15233d;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.calendar-staff-widget .calendar-default-status {
    flex: 0 0 auto;
    margin-bottom: .625rem;
    padding: .5rem .625rem;
    font-size: .75rem;
}

.calendar-staff-widget .calendar-default-layout {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .75rem;
}

.calendar-staff-widget .calendar-default-scheduler {
    min-width: 0;
    min-height: 0;
    height: 20.5rem;
    flex: 0 0 20.5rem;
    overflow: hidden;
    border: 1px solid rgba(41, 41, 41, .14);
    border-radius: .75rem;
    background: #FFF;
}

.calendar-staff-widget .k-scheduler {
    height: 100% !important;
    border: 0;
    font-size: .75rem;
}

.calendar-staff-widget .k-scheduler-toolbar {
    padding: .375rem;
    gap: .25rem;
    background: rgba(0, 137, 207, .07);
}

.calendar-staff-widget .k-scheduler-toolbar .k-button,
.calendar-staff-widget .k-scheduler-toolbar .k-link {
    min-width: 1.875rem;
    padding: .25rem .375rem;
    font-size: .6875rem;
}

.calendar-staff-widget .k-scheduler-navigation .k-nav-current {
    font-size: .8125rem;
    font-weight: 800;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table td,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table th {
    min-width: 0;
    padding: .125rem;
    font-size: .6875rem;
}

.calendar-staff-widget .k-scheduler-monthview .k-link {
    font-size: .6875rem;
}

.calendar-staff-widget .k-event {
    min-height: .875rem;
    padding: .0625rem .125rem;
    font-size: .5625rem;
    line-height: .75rem;
}

.calendar-staff-widget .calendar-default-sidebar {
    display: flex;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(41, 41, 41, .14);
    border-radius: .75rem;
    background: #F6F7F8;
    box-shadow: none;
}

.calendar-staff-widget .calendar-default-sidebar-heading {
    flex: 0 0 auto;
    padding: .625rem .75rem;
    align-items: center;
    border-bottom: .1875rem solid var(--portal-theme-color-base, #0089CF);
}

.calendar-staff-widget .calendar-default-eyebrow {
    margin-bottom: 0;
    font-size: .5625rem;
}

.calendar-staff-widget .calendar-default-sidebar-title {
    font-size: .9375rem;
    line-height: 1.25rem;
}

.calendar-staff-widget .calendar-default-period {
    max-width: 7.5rem;
    font-size: .625rem;
    line-height: 1.1;
}

.calendar-staff-widget .calendar-default-events {
    display: block;
    min-height: 0;
    max-height: none;
    padding: .5rem;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #aeb7c2 transparent;
}

.calendar-staff-widget .calendar-default-events::-webkit-scrollbar {
    width: .375rem;
}

.calendar-staff-widget .calendar-default-events::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #aeb7c2;
}

.calendar-staff-widget .calendar-info-card {
    margin-bottom: .5rem;
    border-radius: .625rem;
    box-shadow: 0 .1875rem .5rem rgba(41, 41, 41, .08);
}

.calendar-staff-widget .calendar-info-card:last-child {
    margin-bottom: 0;
}

.calendar-staff-widget .calendar-info-card-link,
.calendar-staff-widget .calendar-info-card-content {
    padding: .625rem;
}

.calendar-staff-widget .calendar-info-card-header {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .5rem;
}

.calendar-staff-widget .calendar-info-date {
    width: 2.5rem;
    height: 2.75rem;
    border-radius: .5rem;
}

.calendar-staff-widget .calendar-info-day {
    font-size: 1.125rem;
}

.calendar-staff-widget .calendar-info-month,
.calendar-staff-widget .calendar-info-date-range,
.calendar-staff-widget .calendar-info-chip,
.calendar-staff-widget .calendar-info-title {
    font-size: .75rem;
    line-height: 1.25;
}

.calendar-staff-widget .calendar-info-meta {
    margin-top: .5rem;
}

.calendar-staff-widget .calendar-info-summary {
    margin-top: .5rem;
    font-size: .6875rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
}
.calendar-staff-widget .calendar-default-empty {
    min-height: 7rem;
    font-size: .75rem;
}

@media (max-width: 767.98px) {
    .calendar-staff-widget.calendar-staff-mini {
        --staff-calendar-height: 46rem;
        max-width: 100%;
    }

    .calendar-staff-widget .calendar-default-scheduler {
        height: 21rem;
        flex-basis: 21rem;
    }
}
/*#endregion Calendar Staff Portal Modern Mini View */

/*#region Calendar Staff Portal Minimal Date Grid */
.calendar-staff-widget.calendar-staff-mini {
    container-name: staff-calendar;
    container-type: inline-size;
    width: 100%;
    max-width: 23rem;
    min-width: 0;
}

.calendar-staff-widget .calendar-default-layout {
    gap: .25rem;
}

.calendar-staff-widget .calendar-default-scheduler {
    width: 100%;
    height: 11.75rem;
    min-height: 11.75rem;
    flex: 0 0 11.75rem;
    padding: .1875rem .25rem;
    overflow: hidden;
    border: 0;
    background: #FFF;
}

.calendar-staff-widget .k-scheduler {
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
}

.calendar-staff-widget .k-scheduler-toolbar {
    min-height: 1.375rem !important;
    margin: 0 0 .0625rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.calendar-staff-widget .k-scheduler-toolbar .k-nav-today,
.calendar-staff-widget .k-scheduler-toolbar .k-scheduler-views,
.calendar-staff-widget .k-scheduler-toolbar .k-view-selector {
    display: none !important;
}

.calendar-staff-widget .k-scheduler-toolbar .k-nav-prev,
.calendar-staff-widget .k-scheduler-toolbar .k-nav-next {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
}

.calendar-staff-widget .k-scheduler-toolbar .k-nav-current {
    padding: 0 .1875rem !important;
    border: 0 !important;
    background: transparent !important;
    color: #050505 !important;
    font-size: .6875rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.calendar-staff-widget .k-scheduler-content,
.calendar-staff-widget .k-scheduler-layout,
.calendar-staff-widget .k-scheduler-monthview {
    height: calc(100% - 1.4375rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table {
    display: table !important;
    width: 100% !important;
    height: auto !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table tr {
    display: table-row !important;
    height: auto !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table th {
    display: table-cell !important;
    height: .875rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: #17233c !important;
    font-size: .5rem !important;
    font-weight: 700 !important;
    line-height: .875rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    visibility: visible !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table td,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell {
    position: relative !important;
    display: table-cell !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    text-align: center !important;
    vertical-align: middle !important;
    visibility: visible !important;
}

.calendar-staff-widget .k-scheduler-monthview td > .k-link,
.calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
    position: absolute !important;
    top: .125rem !important;
    left: 50% !important;
    z-index: 4 !important;
    display: inline-flex !important;
    width: 1rem !important;
    height: .875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: .1875rem !important;
    background: transparent !important;
    color: #17233c !important;
    font-size: .5625rem !important;
    font-weight: 500 !important;
    line-height: .875rem !important;
    text-decoration: none !important;
    visibility: visible !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-other-month .k-link,
.calendar-staff-widget .k-scheduler-monthview .k-other-month .k-nav-day {
    color: #A0A8B4 !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-event,
.calendar-staff-widget .k-scheduler-monthview .k-task,
.calendar-staff-widget .k-scheduler-monthview .k-more-events,
.calendar-staff-widget .k-scheduler-monthview .k-event-template,
.calendar-staff-widget .k-scheduler-monthview .k-event-actions {
    display: none !important;
}

/* A small line below the date indicates one or more events. */
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-has-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-has-events::after {
    position: absolute;
    bottom: .0625rem;
    left: 50%;
    z-index: 3;
    width: .75rem;
    height: .125rem;
    transform: translateX(-50%);
    border: 0;
    border-radius: 999px;
    background: var(--calendar-date-indicator, #0089CF);
    content: "";
    pointer-events: none;
}

.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-multiple-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-multiple-events::after {
    background: var(--calendar-date-indicator);
}

.calendar-staff-widget .k-scheduler-monthview .k-today::before {
    position: absolute;
    top: .0625rem;
    left: 50%;
    z-index: 1;
    width: 1.125rem;
    height: 1rem;
    transform: translateX(-50%);
    border-radius: .25rem;
    background: var(--green-15, rgba(89, 173, 70, .15));
    content: "";
    pointer-events: none;
}

@container staff-calendar (max-width: 18rem) {
    .calendar-staff-widget .calendar-default-scheduler {
        height: 10.75rem;
        min-height: 10.75rem;
        flex-basis: 10.75rem;
        padding-inline: .125rem;
    }

    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-table td,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell {
        height: 1.125rem !important;
        min-height: 1.125rem !important;
    }

    .calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-has-events::after,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-has-events::after {
        width: .625rem;
    }
}
/*#endregion Calendar Staff Portal Minimal Date Grid */


/*#region Calendar Staff Portal Today, Type, and Alignment */
.calendar-staff-widget .calendar-default-scheduler,
.calendar-staff-widget .calendar-default-sidebar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
.calendar-staff-widget .calendar-default-scheduler {
    height: 12.75rem !important;
    min-height: 12.75rem !important;
    flex-basis: 12.75rem !important;
}
.calendar-staff-widget .calendar-default-sidebar { align-self: stretch !important; }
.calendar-staff-widget .calendar-default-sidebar-heading { width: 100%; box-sizing: border-box; }
.calendar-staff-widget .calendar-default-events { width: 100%; box-sizing: border-box; }

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-header .k-scheduler-table th {
    font-size: .6875rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
}
.calendar-staff-widget .k-scheduler-monthview td > .k-link,
.calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.calendar-staff-widget .calendar-info-title { font-size: .8125rem !important; }
.calendar-staff-widget .calendar-info-date-range,
.calendar-staff-widget .calendar-info-chip,
.calendar-staff-widget .calendar-info-summary { font-size: .75rem !important; }

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td:not(.k-other-month) {
    cursor: pointer !important;
    border-radius: .3125rem !important;
}
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-has-events:not(.k-other-month) {
    background-color: #eef8fd !important;
    box-shadow: inset 0 0 0 1px var(--calendar-date-accent, #0089CF), inset 0 -.1875rem 0 var(--calendar-date-accent, #0089CF) !important;
}
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected:hover,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected:focus-visible {
    background-color: #d7eef9 !important;
    box-shadow: inset 0 0 0 2px #04559F, 0 0 0 2px rgba(0,137,207,.18) !important;
    outline: 0 !important;
}
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected .k-nav-day {
    color: #023f78 !important;
    font-weight: 900 !important;
}
.calendar-staff-widget .calendar-staff-empty {
    min-height: 8rem;
    padding: 1rem .75rem;
    border: 1px dashed rgba(0,137,207,.35);
    border-radius: .625rem;
    background: rgba(0,137,207,.06);
}
.calendar-staff-widget .calendar-staff-empty-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(89,173,70,.15);
    color: #59AD46;
    font-size: 1rem;
    font-weight: 900;
}
@container staff-calendar (max-width: 18rem) {
    .calendar-staff-widget .calendar-default-scheduler {
        height: 11.75rem !important;
        min-height: 11.75rem !important;
        flex-basis: 11.75rem !important;
    }
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-header .k-scheduler-table th {
        font-size: .625rem !important;
    }
}
/*#endregion Calendar Staff Portal Today, Type, and Alignment */


/*#region Calendar Staff Portal Persistent Selected Date */
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected:hover,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected:focus-visible {
    z-index: 2 !important;
    background-color: #cfeaf7 !important;
    box-shadow:
        inset 0 0 0 2px #04559F,
        0 0 0 2px rgba(0, 137, 207, .22) !important;
    outline: 0 !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected > .k-link,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected .k-nav-day {
    color: #023F78 !important;
    font-weight: 900 !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected::before {
    background: rgba(0, 137, 207, .10) !important;
}
/*#endregion Calendar Staff Portal Persistent Selected Date */


/*#region Calendar Staff Portal Final Restored Overrides */
.calendar-staff-widget.calendar-staff-mini {
    border-radius: .625rem;
    box-shadow: none;
    filter: var(--portal-theme-widget-drop-shadow, drop-shadow(0 4px 0 rgba(62, 73, 84, 0.04)));
}
.calendar-staff-widget .k-scheduler-toolbar {
    position: relative !important;
    display: flex !important;
    min-height: 1.75rem !important;
    align-items: center !important;
    justify-content: center !important;
}
.calendar-staff-widget .calendar-staff-month-controls {
    display: grid !important;
    width: min(100%, 16rem) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 1.625rem minmax(8rem, auto) 1.625rem !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: .375rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.calendar-staff-widget .calendar-staff-nav-prev { grid-column: 1 !important; }
.calendar-staff-widget .calendar-staff-nav-current { grid-column: 2 !important; }
.calendar-staff-widget .calendar-staff-nav-next { grid-column: 3 !important; }
.calendar-staff-widget .calendar-staff-nav-current,
.calendar-staff-widget .k-scheduler-toolbar .k-nav-current,
.calendar-staff-widget .k-scheduler-toolbar .k-nav-current .k-button-text {
    min-width: 8rem !important;
    height: 1.625rem !important;
    padding: 0 .375rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.625rem !important;
    cursor: default !important;
    pointer-events: none !important;
}
.calendar-staff-widget .k-scheduler-toolbar .k-nav-today[hidden],
.calendar-staff-widget .k-scheduler-toolbar .k-scheduler-refresh[hidden],
.calendar-staff-widget .k-scheduler-toolbar .k-spacer[hidden] { display: none !important; }
.calendar-staff-widget .k-scheduler-monthview td > .k-link,
.calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
    width: 1.375rem !important;
    height: 1.0625rem !important;
    font-size: .875rem !important;
    font-weight: 800 !important;
    line-height: 1.0625rem !important;
}
.calendar-default-widget .calendar-info-card-content {
    display: block;
    padding: .875rem;
    color: inherit;
}
.calendar-default-widget .calendar-info-card:not(:has(.calendar-info-card-link)) { cursor: default; }
.calendar-default-widget .calendar-info-card:not(:has(.calendar-info-card-link)):hover { transform: none; }
.calendar-staff-widget .calendar-info-card-content { padding: .625rem; }
@container staff-calendar (max-width: 18rem) {
    .calendar-staff-widget .calendar-staff-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current .k-button-text { font-size: .9375rem !important; }
    .calendar-staff-widget .k-scheduler-monthview td > .k-link,
    .calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link { font-size: .8125rem !important; }
}
/*#endregion Calendar Staff Portal Final Restored Overrides */


/*#region Calendar Staff Portal Event Day Indicator */
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td .calendar-staff-event-indicator {
    position: absolute;
    right: .125rem;
    top: .125rem;
    z-index: 6;
    display: block;
    width: .375rem;
    height: .375rem;
    border: 1px solid #FFF;
    border-radius: 50%;
    background: var(--calendar-date-indicator, #0089CF);
    box-shadow: 0 0 0 1px rgba(23, 35, 60, .14);
    pointer-events: none;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-has-events:not(.k-other-month) {
    background-color: #eef8fd !important;
    box-shadow:
        inset 0 0 0 1px var(--calendar-date-accent, #0089CF),
        inset 0 -.1875rem 0 var(--calendar-date-accent, #0089CF) !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td.calendar-staff-date-selected .calendar-staff-event-indicator {
    width: .4375rem;
    height: .4375rem;
    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px rgba(4, 85, 159, .28);
}

.calendar-staff-widget .k-scheduler-monthview .k-other-month .calendar-staff-event-indicator,
.calendar-staff-widget .k-scheduler-monthview .calendar-staff-date-outside-month .calendar-staff-event-indicator {
    display: none !important;
}

@container staff-calendar (max-width: 18rem) {
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-content td .calendar-staff-event-indicator {
        right: .0625rem;
        top: .0625rem;
        width: .3125rem;
        height: .3125rem;
    }
}
/*#endregion Calendar Staff Portal Event Day Indicator */


/*#region Calendar Staff Portal Indexed Event Indicators */
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].calendar-staff-date-has-events:not(.calendar-staff-date-outside-month) {
    overflow: visible !important;
    background-color: #E8F5FC !important;
    box-shadow:
        inset 0 0 0 1px var(--calendar-date-accent, #0089CF),
        inset 0 -.1875rem 0 var(--calendar-date-accent, #0089CF) !important;
}
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].calendar-staff-date-has-events > .calendar-staff-event-indicator {
    position: absolute !important;
    top: .0625rem !important;
    right: .0625rem !important;
    z-index: 20 !important;
    display: block !important;
    width: .5rem !important;
    height: .5rem !important;
    border: .0625rem solid #FFF !important;
    border-radius: 50% !important;
    background: var(--calendar-date-indicator, #0089CF) !important;
    box-shadow: 0 0 0 .0625rem rgba(23,35,60,.30) !important;
    pointer-events: none !important;
}
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-outside-month > .calendar-staff-event-indicator {
    display: none !important;
}
/*#endregion Calendar Staff Portal Indexed Event Indicators */

/*#region Calendar Staff Portal Squarer Date Cells */
/* Provide enough calendar height for the toolbar, weekday heading, and six 2rem rows.
 * 17rem prevents the sixth row from being clipped while remaining tighter than 17.5rem. */
.calendar-staff-widget .calendar-default-scheduler {
    height: 17rem !important;
    min-height: 17rem !important;
    flex-basis: 17rem !important;
}

/* Set both the Kendo body rows and cells to 2rem so the table layout cannot
 * compress the requested cell height. */
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-content .k-scheduler-table tbody > tr {
    height: 2rem !important;
}

.calendar-staff-widget .k-scheduler-monthview .k-scheduler-table td,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell {
    height: 2rem !important;
    min-height: 2rem !important;
    vertical-align: middle !important;
}

/* Keep the date number centered horizontally and vertically in the full cell. */
.calendar-staff-widget .k-scheduler-monthview td > .k-link,
.calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
    top: 50% !important;
    left: 50% !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1.5rem !important;
    text-align: center !important;
}

/* Keep event dots anchored in the upper-right corner. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date] > .calendar-staff-event-indicator {
    top: .125rem !important;
    right: .125rem !important;
}

@container staff-calendar (max-width: 18rem) {
    .calendar-staff-widget .calendar-default-scheduler {
        height: 17rem !important;
        min-height: 17rem !important;
        flex-basis: 17rem !important;
    }

    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-content .k-scheduler-table tbody > tr,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-table td,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell {
        height: 2rem !important;
        min-height: 2rem !important;
    }

    .calendar-staff-widget .k-scheduler-monthview td > .k-link,
    .calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
        width: 1.375rem !important;
        height: 1.375rem !important;
        line-height: 1.375rem !important;
    }
}
/*#endregion Calendar Staff Portal Squarer Date Cells */


/*#region Calendar Staff Portal Sitefinity Source Colour Indicators */
/* Remove the legacy pseudo-element underline. The dedicated source indicator
 * below is used only for events outside the semantic today-status classes. */
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-has-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-has-events::after,
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-multiple-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-multiple-events::after {
    display: none !important;
    content: none !important;
}

/* The purple upper-right dot stays exclusive to active ongoing events. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date]:not(.calendar-staff-date-ongoing) > .calendar-staff-event-indicator {
    display: none !important;
}

.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-ongoing > .calendar-staff-event-indicator {
    display: block !important;
    background: var(--calendar-status-ongoing, var(--Purple, #6E2B7D)) !important;
}

@container staff-calendar (max-width: 18rem) {
}
@container staff-calendar (max-width: 18rem) {
}
/*#endregion Calendar Staff Portal Guaranteed Current Day Source Indicator */

/*#region Calendar Staff Portal Today Green When Not Selected */
/* Final state-priority override: after another date is selected, the current
 * day continues to display its complete green today treatment. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected):not(:hover),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected):focus,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected):focus-visible {
    z-index: 24 !important;
    background: var(--calendar-status-happening, var(--Green, #59AD46)) !important;
    background-color: var(--calendar-status-happening, var(--Green, #59AD46)) !important;
    box-shadow:
        inset 0 0 0 .125rem #397F2F,
        0 0 0 .1875rem rgba(89, 173, 70, .32) !important;
    outline: 0 !important;
}

.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected) > .k-link,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected) .k-nav-day {
    z-index: 26 !important;
    background: transparent !important;
    color: var(--White, #FFF) !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .24) !important;
}

/* Disable Kendo's smaller today badge because the full cell is green. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today:not(.calendar-staff-date-selected)::before {
    display: none !important;
    content: none !important;
}
/*#endregion Calendar Staff Portal Today Green When Not Selected */


/*#region Calendar Staff Portal Consolidated Visual State Fix */
/* Remove the old magenta-style generic event outline and generated underline. */
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-has-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-has-events::after,
.calendar-staff-widget .k-scheduler-monthview td.calendar-staff-date-multiple-events::after,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell.calendar-staff-date-multiple-events::after {
    display: none !important;
    content: none !important;
}

/* Normal single-source dates use a subtle matching fill and frame. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-single-source-color:not(.calendar-staff-date-selected):not(.k-today) {
    background:
        linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
        var(--calendar-source-fill) !important;
    box-shadow:
        inset 0 0 0 .09375rem var(--calendar-source-border),
        0 0 0 .03125rem rgba(23,35,60,.08) !important;
}

/* Normal multiple-source dates use the ordered gradient and stronger frame. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-multiple-source-colors:not(.calendar-staff-date-selected):not(.k-today) {
    background:
        linear-gradient(rgba(255,255,255,.76), rgba(255,255,255,.76)),
        var(--calendar-source-fill) !important;
    box-shadow:
        inset 0 0 0 .125rem rgba(23,35,60,.34),
        0 0 0 .0625rem rgba(23,35,60,.14),
        0 .125rem .25rem rgba(23,35,60,.12) !important;
}

/* Non-today selections remain persistently blue. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected:not(.k-today),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected:not(.k-today):not(:hover),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected:not(.k-today):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected:not(.k-today):focus-visible {
    z-index: 20 !important;
    background: var(--Dark-Blue,#04559F) !important;
    background-color: var(--Dark-Blue,#04559F) !important;
    box-shadow:
        inset 0 0 0 .125rem #023F78,
        0 0 0 .1875rem rgba(0,137,207,.38) !important;
    outline: 0 !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected:not(.k-today) .k-nav-day {
    color: #FFF !important;
    font-weight: 900 !important;
}

/* Today remains fully green whether selected, unselected, hovered, or focused. */
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today,
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today:not(.calendar-staff-date-selected),
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today:hover,
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today:focus-visible,
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today.calendar-staff-date-selected {
    z-index: 24 !important;
    background: var(--calendar-status-happening,var(--Green,#59AD46)) !important;
    background-color: var(--calendar-status-happening,var(--Green,#59AD46)) !important;
    box-shadow:
        inset 0 0 0 .125rem #397F2F,
        0 0 0 .1875rem rgba(89,173,70,.32) !important;
    outline: 0 !important;
}
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today .k-nav-day {
    z-index: 26 !important;
    color: #FFF !important;
    font-weight: 900 !important;
}
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date].k-today::before {
    display: none !important;
    content: none !important;
}

/* Purple upper-right dots remain restricted to active ongoing dates. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date]:not(.calendar-staff-date-ongoing) > .calendar-staff-event-indicator {
    display: none !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-ongoing > .calendar-staff-event-indicator {
    display: block !important;
    background: var(--calendar-status-ongoing,var(--Purple,#6E2B7D)) !important;
}
/*#endregion Calendar Staff Portal Consolidated Visual State Fix */


/*#region Calendar Staff Portal Status Card Source Accent */
.calendar-staff-widget .calendar-info-card.is-today-status {
    position: relative;
}
.calendar-staff-widget .calendar-info-card.is-today-status::after {
    position: absolute;
    top: .375rem;
    bottom: .375rem;
    left: .1875rem;
    z-index: 2;
    width: .25rem;
    border-radius: 999px;
    background: var(--event-color, var(--calendar-event-base, #0089CF));
    content: "";
    pointer-events: none;
}
.calendar-staff-widget .calendar-info-card.is-today-status .calendar-info-date {
    box-shadow:
        inset .1875rem 0 0 var(--event-color, var(--calendar-event-base, #0089CF)),
        inset 0 0 0 1px var(--black-20, rgba(41,41,41,.2));
}
.calendar-staff-widget .calendar-info-card.is-today-status .calendar-info-card-link,
.calendar-staff-widget .calendar-info-card.is-today-status .calendar-info-card-content {
    position: relative;
    z-index: 3;
}
/*#endregion Calendar Staff Portal Status Card Source Accent */

/*#region Calendar Staff Portal Empty Date Font Awesome Icon */
.calendar-staff-widget .calendar-staff-empty-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: .0625rem solid rgba(0,137,207,.28);
    border-radius: .5rem;
    background: var(--White, #FFF) !important;
    color: var(--Dark-Blue, #04559F) !important;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 .125rem .375rem rgba(23,35,60,.10);
}
.calendar-staff-widget .calendar-staff-empty-icon .fa-solid,
.calendar-staff-widget .calendar-staff-empty-icon .fa-calendar-days {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}
/*#endregion Calendar Staff Portal Empty Date Font Awesome Icon */

/*#region Calendar Staff Portal Ultra Narrow Accessible Layout */
/* The widget may be embedded in containers as narrow as 10rem (160px).
 * Use container-based adaptations so the layout responds to the actual widget
 * width rather than waiting for the viewport-wide mobile breakpoint. */
@container staff-calendar (max-width: 12rem) {
    .calendar-staff-widget.calendar-staff-mini {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: .5rem !important;
        border-radius: .5rem;
    }

    .calendar-staff-widget .calendar-widget-header {
        margin-bottom: .375rem;
    }

    .calendar-staff-widget .calendar-widget-text {
        font-size: 1rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .calendar-staff-widget .calendar-default-layout {
        gap: .375rem;
    }

    .calendar-staff-widget .calendar-default-scheduler {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 0 !important;
    }

    .calendar-staff-widget .k-scheduler-toolbar {
        min-height: 2rem !important;
    }

    .calendar-staff-widget .calendar-staff-month-controls {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 2rem minmax(0, 1fr) 2rem !important;
        column-gap: 0 !important;
    }

    .calendar-staff-widget .calendar-staff-nav-prev,
    .calendar-staff-widget .calendar-staff-nav-next {
        width: 2rem !important;
        min-width: 2rem !important;
        height: 2rem !important;
    }

    .calendar-staff-widget .calendar-staff-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current .k-button-text {
        min-width: 0 !important;
        max-width: 100% !important;
        height: 2rem !important;
        padding-inline: .125rem !important;
        overflow: hidden !important;
        font-size: .75rem !important;
        line-height: 2rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-header .k-scheduler-table th {
        font-size: .5rem !important;
        letter-spacing: -.03em !important;
    }

    .calendar-staff-widget .k-scheduler-monthview td > .k-link,
    .calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
        width: 1.125rem !important;
        height: 1.375rem !important;
        font-size: .75rem !important;
        line-height: 1.375rem !important;
    }

    .calendar-staff-widget .calendar-default-sidebar-heading {
        padding: .5rem;
        align-items: flex-start;
        flex-direction: column;
        gap: .125rem;
    }

    .calendar-staff-widget .calendar-default-sidebar-title {
        font-size: .8125rem;
        line-height: 1.15;
    }

    .calendar-staff-widget .calendar-default-period {
        max-width: 100%;
        font-size: .625rem;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .calendar-staff-widget .calendar-default-events {
        padding: .375rem;
    }

    .calendar-staff-widget .calendar-info-card-link,
    .calendar-staff-widget .calendar-info-card-content {
        padding: .5rem;
    }

    .calendar-staff-widget .calendar-info-card-header {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: .375rem;
    }

    .calendar-staff-widget .calendar-info-date {
        width: 2rem;
        height: 2.25rem;
    }

    .calendar-staff-widget .calendar-info-day {
        font-size: 1rem;
    }

    .calendar-staff-widget .calendar-info-title,
    .calendar-staff-widget .calendar-info-summary,
.calendar-staff-widget .calendar-info-meta {
        gap: .25rem;
    }

    .calendar-staff-widget .calendar-info-chip {
        max-width: 100%;
        white-space: normal;
    }
}

/* At the viewport breakpoint, let the widget use the available screen width
 * rather than retaining the desktop 23rem cap. */
@media (max-width: 767.98px) {
    .calendar-staff-widget.calendar-staff-mini {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}
/*#endregion Calendar Staff Portal Ultra Narrow Accessible Layout */


/*#region Calendar Staff Portal Today Action and Final Legend List Item */
.calendar-staff-widget .calendar-staff-today-actions {
    display:flex; width:100%; margin-top:-.125rem; align-items:center; justify-content:flex-end;
}
.calendar-staff-widget .calendar-staff-today-actions[hidden] { display:none !important; }
.calendar-staff-widget .calendar-staff-jump-today {
    display:inline-flex; min-height:2.25rem; padding:.375rem .625rem; align-items:center; justify-content:center; gap:.375rem;
    border:.0625rem solid var(--Dark-Blue,#04559F); border-radius:.5rem; background:var(--White,#FFF);
    color:var(--Dark-Blue,#04559F); font:inherit; font-size:.6875rem; font-weight:800; line-height:1;
    cursor:pointer; box-shadow:0 .125rem .375rem rgba(23,35,60,.10);
}
.calendar-staff-widget .calendar-staff-jump-today:hover { background:rgba(0,137,207,.08); }
.calendar-staff-widget .calendar-staff-jump-today:focus-visible { outline:.1875rem solid var(--Yellow,#FAA61A); outline-offset:.125rem; }
.calendar-staff-widget .calendar-staff-legend { padding:.625rem; border-top:.0625rem solid rgba(0,137,207,.18); }
.calendar-staff-widget .calendar-staff-legend[hidden] { display:none !important; }
@container staff-calendar (max-width:12rem) {
    .calendar-staff-widget .calendar-staff-today-actions { margin-top:0; }
    .calendar-staff-widget .calendar-staff-jump-today {
        width:2.75rem; min-width:2.75rem; height:2.75rem; min-height:2.75rem; padding:0;
    }
    .calendar-staff-widget .calendar-staff-action-label {
        position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important;
        padding:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important;
        white-space:nowrap !important; border:0 !important;
    }
    .calendar-staff-widget .calendar-staff-legend { padding:.5rem; }
}
/*#endregion Calendar Staff Portal Today Action and Final Legend List Item */


/*#region Calendar Production Final Layout and Accessibility */
/* Hide the sidebar eyebrow in both views. */
.calendar-default-widget .calendar-default-sidebar-heading .calendar-default-eyebrow,
.calendar-staff-widget .calendar-default-sidebar-heading .calendar-default-eyebrow {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Collapse an absent or empty Staff Portal widget title without JavaScript. */
.calendar-staff-widget .calendar-widget-header:empty,
.calendar-staff-widget .calendar-widget-header:not(:has(.calendar-widget-text)),
.calendar-staff-widget .calendar-widget-header:has(.calendar-widget-text:empty) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make loading state perceptible without changing layout. */
.calendar-staff-widget[aria-busy="true"] .calendar-default-events {
    cursor: progress;
}
.calendar-staff-widget[aria-busy="true"] .calendar-default-events::after {
    position: sticky;
    bottom: .25rem;
    display: block;
    width: fit-content;
    margin: .5rem auto 0;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(4,85,159,.92);
    color: #FFF;
    content: "Loading calendar…";
    font-size: .625rem;
    font-weight: 800;
}

/* Bootstrap controls the width. Grid preserves col-md-3 sizing while the
 * widget stretches to the height established by the adjacent col-md-9. */
@media (min-width: 768px) {
    .row > .col-md-3:has(.calendar-staff-widget.calendar-staff-mini) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        min-width: 0;
    }

    .row > .col-md-3:has(.calendar-staff-widget.calendar-staff-mini)
    .calendar-staff-widget.calendar-staff-mini {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: var(--staff-calendar-height, 43rem);
        max-height: none !important;
        align-self: stretch;
        box-sizing: border-box !important;
    }

    .calendar-staff-widget.calendar-staff-mini .calendar-default-layout,
    .calendar-staff-widget.calendar-staff-mini .calendar-default-sidebar,
    .calendar-staff-widget.calendar-staff-mini .calendar-default-events {
        min-width: 0;
        min-height: 0;
    }

    .calendar-staff-widget.calendar-staff-mini .calendar-default-layout {
        flex: 1 1 auto;
    }
    .calendar-staff-widget.calendar-staff-mini .calendar-default-sidebar {
        flex: 1 1 0;
    }
    .calendar-staff-widget.calendar-staff-mini .calendar-default-events {
        flex: 1 1 auto;
    }
}
/*#endregion Calendar Production Final Layout and Accessibility */


/*#region Calendar Staff Portal Final Inset Source Outlines */
/* Single-source event dates use a sharp 2px inset outline with a neutral
 * interior. No separate source-indicator element is rendered. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-single-source-color:not(.calendar-staff-date-selected):not(.k-today) {
    border: 0 !important;
    background: var(--White, #FFF) !important;
    background-color: var(--White, #FFF) !important;
    box-shadow:
        inset 0 0 0 .125rem var(--calendar-source-border, var(--calendar-event-base, #0089CF)),
        0 .0625rem .125rem rgba(23,35,60,.12) !important;
}

/* Multiple-source dates retain the ordered gradient only in a 2px frame. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-multiple-source-colors:not(.calendar-staff-date-selected):not(.k-today) {
    border: 0 !important;
    background:
        linear-gradient(var(--White, #FFF), var(--White, #FFF)) center / calc(100% - .25rem) calc(100% - .25rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base, #0089CF)) !important;
    background-color: var(--White, #FFF) !important;
    box-shadow: 0 .0625rem .125rem rgba(23,35,60,.12) !important;
}

/* Selected dates keep their blue interior and source outline. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today):focus-visible {
    border: 0 !important;
    background: var(--Dark-Blue,#04559F) !important;
    background-color: var(--Dark-Blue,#04559F) !important;
    box-shadow:
        inset 0 0 0 .125rem var(--calendar-source-border, var(--calendar-event-base,#0089CF)),
        0 0 0 .125rem rgba(0,137,207,.24) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today):focus-visible {
    border: 0 !important;
    background:
        linear-gradient(var(--Dark-Blue,#04559F), var(--Dark-Blue,#04559F)) center / calc(100% - .25rem) calc(100% - .25rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base,#0089CF)) !important;
    background-color: var(--Dark-Blue,#04559F) !important;
    box-shadow: 0 0 0 .125rem rgba(0,137,207,.24) !important;
}

/* Today stays green, with the same single or divided inset outline. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color:hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color:focus-visible {
    border: 0 !important;
    background: var(--calendar-status-happening,var(--Green,#59AD46)) !important;
    background-color: var(--calendar-status-happening,var(--Green,#59AD46)) !important;
    box-shadow:
        inset 0 0 0 .125rem var(--calendar-source-border, var(--calendar-event-base,#0089CF)),
        0 0 0 .125rem rgba(89,173,70,.24) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors:hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors:focus-visible {
    border: 0 !important;
    background:
        linear-gradient(var(--calendar-status-happening,var(--Green,#59AD46)), var(--calendar-status-happening,var(--Green,#59AD46))) center / calc(100% - .25rem) calc(100% - .25rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base,#0089CF)) !important;
    background-color: var(--calendar-status-happening,var(--Green,#59AD46)) !important;
    box-shadow: 0 0 0 .125rem rgba(89,173,70,.24) !important;
}

.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-has-source-colors > .k-link,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-has-source-colors .k-nav-day {
    z-index: 28 !important;
}
/*#endregion Calendar Staff Portal Final Inset Source Outlines */

/*#region Calendar Staff Portal Visible Today in Adjacent Month */
/* Adjacent-month cells remain blank except when the visible date is today.
 * Today shows its number and all event-related states exactly as it does in
 * its own month. */
.calendar-staff-widget .k-scheduler-monthview
td.k-other-month.calendar-staff-date-current-outside-month {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.calendar-staff-widget .k-scheduler-monthview
td.k-other-month.calendar-staff-date-current-outside-month > .k-link,
.calendar-staff-widget .k-scheduler-monthview
td.k-other-month.calendar-staff-date-current-outside-month .k-nav-day {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--White, #FFF) !important;
    font-weight: 900 !important;
}

/* Existing outside-month rules hide event dots. Re-enable the ongoing dot for
 * the visible current day only. */
.calendar-staff-widget .k-scheduler-monthview
td.k-other-month.calendar-staff-date-current-outside-month.calendar-staff-date-ongoing
> .calendar-staff-event-indicator {
    display: block !important;
}

/* Ensure today keeps the complete green state and source outline even though
 * Kendo continues to mark the cell as k-other-month. */
.calendar-staff-widget .k-scheduler-monthview
td.k-other-month.calendar-staff-date-current-outside-month.k-today {
    opacity: 1 !important;
}
/*#endregion Calendar Staff Portal Visible Today in Adjacent Month */


/*#region Calendar Staff Portal Past Event Dates */
/* Dates strictly before today do not display source outlines. Keep the normal
 * date-cell interior and allow the active ongoing-event dot to remain visible. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-past.calendar-staff-date-has-events:not(.calendar-staff-date-selected) {
    border: 0 !important;
    background: var(--White, #FFF) !important;
    background-color: var(--White, #FFF) !important;
    box-shadow: none !important;
}

/* If a past date is selected, retain the established blue selection state but
 * remove all source-colour outlines and gradient frames. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-past.calendar-staff-date-selected,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-past.calendar-staff-date-selected:hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-past.calendar-staff-date-selected:focus-visible {
    border: 0 !important;
    background: var(--Dark-Blue, #04559F) !important;
    background-color: var(--Dark-Blue, #04559F) !important;
    box-shadow: 0 0 0 .125rem rgba(0,137,207,.24) !important;
}

/* Past-date styling must not suppress the ongoing indicator. */
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-past.calendar-staff-date-ongoing
> .calendar-staff-event-indicator {
    display: block !important;
}
/*#endregion Calendar Staff Portal Past Event Dates */


/*#region Calendar Event Groups by Source */
.calendar-default-events > .calendar-event-group {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 0;
    margin: 0 0 .75rem;
    overflow: visible;
    border: .0625rem solid rgba(23,35,60,.14);
    border-radius: .625rem;
    background: var(--White,#FFF);
    box-shadow: 0 .1875rem .625rem rgba(23,35,60,.08);
}
.calendar-default-events > .calendar-event-group:last-of-type { margin-bottom: 0; }
.calendar-event-group-heading {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 2.5rem;
    margin: 0;
    overflow: hidden;
    border-radius: .5625rem .5625rem 0 0;
    background: var(--White,#FFF);
    background-color: var(--White,#FFF);
    opacity: 1;
    isolation: isolate;
    box-shadow: 0 .125rem .375rem rgba(23,35,60,.12);
}
.calendar-event-group-heading::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--White,#FFF);
    content: "";
    pointer-events: none;
}
.calendar-event-group-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: .4375rem .625rem;
    grid-template-columns: .75rem minmax(0,1fr) auto 1rem;
    gap: .5rem;
    align-items: center;
    border: 0;
    border-bottom: .0625rem solid rgba(23,35,60,.14);
    border-left: .25rem solid var(--calendar-group-color,#0089CF);
    border-radius: inherit;
    background: var(--White,#FFF);
    background-color: var(--White,#FFF);
    color: var(--Soft-Black,#1F2937);
    font: inherit;
    font-size: .75rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    opacity: 1;
}
.calendar-event-group-toggle:hover,
.calendar-event-group-toggle[aria-expanded="true"] {
    background: #F1F8FC;
    background-color: #F1F8FC;
}
.calendar-event-group-toggle:focus-visible {
    outline: .1875rem solid var(--Yellow,#FAA61A);
    outline-offset: -.1875rem;
}
.calendar-event-group-swatch {
    display: block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--calendar-group-color,#0089CF);
    box-shadow: 0 0 0 .0625rem rgba(23,35,60,.18);
}
.calendar-event-group-name { min-width: 0; overflow-wrap: anywhere; }
.calendar-event-group-count {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0 .375rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(23,35,60,.08);
    color: var(--Soft-Black,#1F2937);
    font-size: .6875rem;
    font-weight: 900;
}
.calendar-event-group-chevron { transition: transform 160ms ease; }
.calendar-event-group-toggle[aria-expanded="false"] .calendar-event-group-chevron { transform: rotate(-90deg); }
.calendar-event-group-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .5rem;
    padding: .625rem;
    border-left: .25rem solid color-mix(in srgb,var(--calendar-group-color,#0089CF) 28%,transparent);
    border-radius: 0 0 .5625rem .5625rem;
    background: color-mix(in srgb,var(--calendar-group-color,#0089CF) 5%,var(--White,#FFF));
}
.calendar-event-group-list[hidden] { display: none !important; }
.calendar-event-group-list > .calendar-info-card {
    position: relative;
    z-index: 1;
    margin: 0;
    background: var(--White,#FFF);
    box-shadow: 0 .125rem .4375rem rgba(23,35,60,.10);
}
.calendar-event-group.is-collapsed .calendar-event-group-heading {
    border-radius: .5625rem;
}
.calendar-event-group.is-collapsed .calendar-event-group-toggle {
    border-bottom: 0;
}
@supports not (background: color-mix(in srgb,white 50%,black)) {
    .calendar-event-group-list { border-left-color: rgba(0,137,207,.24); background: #F6FAFD; }
}
@media (prefers-reduced-motion: reduce) {
    .calendar-event-group-chevron { transition: none; }
}
@container staff-calendar (max-width: 12rem) {
    .calendar-event-group-heading,
    .calendar-event-group-toggle { min-height: 2.75rem; }
    .calendar-event-group-toggle {
        padding: .375rem .5rem;
        grid-template-columns: .625rem minmax(0,1fr) auto .75rem;
        gap: .375rem;
        font-size: .6875rem;
    }
    .calendar-event-group-list { padding: .5rem; gap: .4375rem; }
    .calendar-event-group-count {
        min-width: 1.375rem;
        min-height: 1.375rem;
        padding-inline: .3125rem;
        font-size: .625rem;
    }
}
/*#endregion Calendar Event Groups by Source */


/*#region Calendar Separate Pinned Header Layer */
.calendar-event-viewport {
    position: relative;
    min-width: 0;
}

.calendar-event-viewport > .calendar-default-events {
    position: relative;
    padding-top: .875rem;
    overflow-y: auto;
}

/* Original headings stay in normal flow and retain the preferred group style. */
.calendar-event-viewport .calendar-event-group-heading {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
}

/* The separate layer sits outside the scroller and owns the pinned state. */
.calendar-event-pinned-layer {
    position: absolute;
    top: .875rem;
    right: .875rem;
    left: .875rem;
    z-index: 1000;
    overflow: hidden;
    border: .0625rem solid rgba(23,35,60,.14);
    border-left: .25rem solid var(--calendar-group-color,#0089CF);
    border-radius: .5625rem;
    box-shadow: 0 .125rem .375rem rgba(23,35,60,.12);
    pointer-events: auto;
}

.calendar-event-pinned-layer[hidden] {
    display: none !important;
}

.calendar-event-pinned-layer > .calendar-event-group-toggle {
    width: 100%;
    min-height: 2.5rem;
    border: 0;
    border-radius: inherit;
    background: #FFF;
    background-color: #FFF;
    opacity: 1;
}

/* The event list remains untouched. No masks, shadows, or clip paths are used. */
.calendar-event-viewport .calendar-event-group-list {
    clip-path: none !important;
    overflow: visible;
}

@media (max-width:640px) {
    .calendar-event-viewport > .calendar-default-events {
        padding-top: .625rem;
    }

    .calendar-event-pinned-layer {
        top: .625rem;
        right: .625rem;
        left: .625rem;
    }
}
/*#endregion Calendar Separate Pinned Header Layer */


/*#region Calendar Pinned Header Group Integration */
.calendar-event-viewport {
    --calendar-event-surface: #F2F2F2;
    overflow: hidden;
    border-radius: 0 0 .75rem .75rem;
    isolation: isolate;
}

/* Cover the strip above the pinned heading with the exact resolved sidebar
 * surface colour so scrolled content cannot appear there. */
.calendar-event-viewport::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 90;
    height: .875rem;
    background: var(--calendar-event-surface);
    content: "";
    pointer-events: none;
}

/* Keep the pinned header below 100 while retaining it above event content. */
.calendar-event-pinned-layer {
    z-index: 80;
    background: color-mix(in srgb,var(--calendar-group-color,#0089CF) 5%,#FFF) !important;
    border: .0625rem solid rgba(23,35,60,.14);
    border-left: .25rem solid var(--calendar-group-color,#0089CF);
    border-radius: .5625rem .5625rem .375rem .375rem;
    box-shadow: 0 .1875rem .5rem rgba(23,35,60,.12);
}

/* A subtle source-colour connector makes the separate layer read as the top
 * of the active calendar group rather than an unrelated floating control. */
.calendar-event-pinned-layer::after {
    position: absolute;
    right: .625rem;
    bottom: -.1875rem;
    left: .625rem;
    height: .1875rem;
    border-radius: 0 0 .1875rem .1875rem;
    background: color-mix(in srgb,var(--calendar-group-color,#0089CF) 22%,transparent);
    content: "";
    pointer-events: none;
}

.calendar-event-pinned-layer > .calendar-event-group-toggle {
    background: color-mix(in srgb,var(--calendar-group-color,#0089CF) 5%,#FFF) !important;
    border-bottom: .0625rem solid rgba(23,35,60,.10);
}

.calendar-event-pinned-layer > .calendar-event-group-toggle:hover,
.calendar-event-pinned-layer > .calendar-event-group-toggle[aria-expanded="true"] {
    background: color-mix(in srgb,var(--calendar-group-color,#0089CF) 9%,#FFF) !important;
}

@supports not (background: color-mix(in srgb,white 50%,black)) {
    .calendar-event-pinned-layer,
    .calendar-event-pinned-layer > .calendar-event-group-toggle { background:#FFF !important; }
    .calendar-event-pinned-layer::after { background:rgba(0,137,207,.20); }
}

@media (max-width:640px) {
    .calendar-event-viewport::before { height:.625rem; }
}
/*#endregion Calendar Pinned Header Group Integration */

/*#region Calendar Staff Portal Pinned Header Scroll Restoration */
/* The pinned-header viewport replaces the event list as the sidebar's direct
 * flex child. Give the viewport the bounded flexible height, then let the
 * original event list scroll inside it. */
.calendar-staff-widget .calendar-event-viewport {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.calendar-staff-widget .calendar-event-viewport > .calendar-default-events {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #aeb7c2 transparent;
    box-sizing: border-box;
}

.calendar-staff-widget
.calendar-event-viewport > .calendar-default-events::-webkit-scrollbar {
    width: .375rem;
}

.calendar-staff-widget
.calendar-event-viewport > .calendar-default-events::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #aeb7c2;
}
/*#endregion Calendar Staff Portal Pinned Header Scroll Restoration */


/*#region Calendar Pinned Header Geometry Synchronization */
/* JavaScript synchronizes the pinned layer with the source heading's measured
 * left edge, width, top inset, and height on every scroll/resize update. */
.calendar-event-pinned-layer {
    right: auto;
    box-sizing: border-box;
}

.calendar-event-pinned-layer > .calendar-event-group-toggle {
    box-sizing: border-box;
}

.calendar-staff-widget .calendar-event-pinned-layer {
    right: auto;
}
/*#endregion Calendar Pinned Header Geometry Synchronization */


/*#region Calendar Pinned Header Backdrop Cleanup */
/* Match the pinned header geometry with a solid sidebar-colour layer directly
 * behind it. This hides scrolling content around the rounded corners without
 * clipping the event list or affecting adjacent calendar groups. */
.calendar-event-viewport::after {
    position: absolute;
    top: var(--calendar-pinned-top, .875rem);
    left: var(--calendar-pinned-left, .875rem);
    z-index: 79;
    display: block;
    width: var(--calendar-pinned-width, calc(100% - 1.75rem));
    height: var(--calendar-pinned-height, 2.5rem);
    border-radius: .625rem;
    background: var(--calendar-event-surface, #F2F2F2);
    box-shadow: 0 0 0 .1875rem var(--calendar-event-surface, #F2F2F2);
    content: "";
    pointer-events: none;
}

.calendar-event-viewport:not(.has-pinned-header)::after {
    display: none;
}

.calendar-event-pinned-layer {
    overflow: hidden;
    isolation: isolate;
}

.calendar-event-pinned-layer > .calendar-event-group-toggle {
    position: relative;
    z-index: 1;
}

@media (max-width:640px) {
    .calendar-event-viewport::after {
        top: var(--calendar-pinned-top, .625rem);
        left: var(--calendar-pinned-left, .625rem);
        width: var(--calendar-pinned-width, calc(100% - 1.25rem));
    }
}
/*#endregion Calendar Pinned Header Backdrop Cleanup */

/*#region Calendar Default Two-Column Group Card Consistency */
/* Keep each calendar group full width. At the tablet breakpoint, create the
 * two-column layout inside each group's event list so both columns retain the
 * same card styling, source background, border treatment, and spacing. */
@media (min-width: 641px) and (max-width: 900px) {
    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-viewport > .calendar-default-events {
        display: block !important;
        max-height: none;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-default-events > .calendar-event-group {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-default-events > .calendar-event-group > .calendar-event-group-heading {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-default-events > .calendar-event-group > .calendar-event-group-list {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        align-items: stretch;
        grid-column: 1 / -1;
        box-sizing: border-box;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-group-list > .calendar-info-card {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-group-list > .calendar-info-card > .calendar-info-card-link,
    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-group-list > .calendar-info-card > .calendar-info-card-content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}
/*#endregion Calendar Default Two-Column Group Card Consistency */


/*#region Calendar Production Lifecycle and State Cleanup */
.calendar-event-viewport {
    --calendar-event-inset: .875rem;
    --calendar-pinned-backdrop-z: 79;
    --calendar-pinned-header-z: 80;
    --calendar-pinned-cutoff-z: 90;
}

.calendar-event-group.is-collapsed > .calendar-event-group-list {
    display: none !important;
}

.calendar-event-group.is-expanded > .calendar-event-group-list {
    display: grid;
}

.calendar-event-pinned-layer {
    z-index: var(--calendar-pinned-header-z);
}

.calendar-event-viewport::before {
    z-index: var(--calendar-pinned-cutoff-z);
}

.calendar-event-viewport::after {
    z-index: var(--calendar-pinned-backdrop-z);
}

@media (max-width:640px) {
    .calendar-event-viewport { --calendar-event-inset: .625rem; }
}
/*#endregion Calendar Production Lifecycle and State Cleanup */


/*#region Calendar Staff Portal Semantic Status Tag Correction */
.calendar-staff-widget .calendar-info-card.is-today-status,
.calendar-staff-widget .calendar-info-card.is-happening,
.calendar-staff-widget .calendar-info-card.is-starting,
.calendar-staff-widget .calendar-info-card.is-ongoing,
.calendar-staff-widget .calendar-info-card.is-ending {
    --card-status-tint: transparent;
    border-color: rgba(23,35,60,.12) !important;
    border-top-color: var(--event-color,var(--calendar-event-base,#0089CF)) !important;
    background: var(--White,#FFF) !important;
    background-color: var(--White,#FFF) !important;
}
.calendar-staff-widget .calendar-info-card.is-today-status::after { display:none !important; content:none !important; }
.calendar-staff-widget .calendar-info-card.is-today-status .calendar-info-date {
    box-shadow: inset 0 0 0 1px var(--black-20,rgba(41,41,41,.2)) !important;
}
.calendar-staff-widget.calendar-default-widget .calendar-info-card.is-today-status.is-starting
.calendar-info-current.calendar-info-current-starting {
    background: var(--calendar-status-starting,var(--Green,#59AD46)) !important;
    background-color: var(--calendar-status-starting,var(--Green,#59AD46)) !important;
    color: var(--White,#FFF) !important;
}
.calendar-staff-widget.calendar-default-widget .calendar-info-card.is-today-status.is-ongoing
.calendar-info-current.calendar-info-current-ongoing {
    background: var(--calendar-status-ongoing,var(--Purple,#6E2B7D)) !important;
    background-color: var(--calendar-status-ongoing,var(--Purple,#6E2B7D)) !important;
    color: var(--White,#FFF) !important;
}
.calendar-staff-widget.calendar-default-widget .calendar-info-card.is-today-status.is-ending
.calendar-info-current.calendar-info-current-ending {
    background: var(--calendar-status-ending,var(--Yellow,#FAA61A)) !important;
    background-color: var(--calendar-status-ending,var(--Yellow,#FAA61A)) !important;
    color: var(--Black,#292929) !important;
}
/*#endregion Calendar Staff Portal Semantic Status Tag Correction */


/*#region Calendar Event Details Modal */
.calendar-info-card-button {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.calendar-info-card-button:hover,
.calendar-info-card-button:focus-visible {
    color: inherit;
    text-decoration: none;
}

.calendar-info-card-button:focus-visible {
    outline: .1875rem solid var(--Blue, #0089CF);
    outline-offset: -.1875rem;
}

.calendar-event-modal {
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(48rem, calc(100vh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-top: .375rem solid var(--event-color, var(--calendar-event-base, #0089CF));
    border-radius: 1rem;
    background: var(--White, #FFF);
    color: var(--Black, #292929);
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 60, .32);
}

.calendar-event-modal[hidden] { display: none !important; }

.calendar-event-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.calendar-event-modal-panel {
    display: flex;
    max-height: min(47.625rem, calc(100vh - 2.375rem));
    flex-direction: column;
}

.calendar-event-modal-header {
    display: flex;
    padding: 1.25rem 1.25rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: .0625rem solid rgba(23, 35, 60, .12);
}

.calendar-event-modal-eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: var(--Soft-Black, #494949);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.calendar-event-modal-title {
    margin: 0;
    color: var(--Dark-Blue, #04559F);
    font-family: Montserrat, sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.calendar-event-modal-close {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: .0625rem solid rgba(23, 35, 60, .18);
    border-radius: 50%;
    background: var(--White, #FFF);
    color: var(--Soft-Black, #494949);
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.calendar-event-modal-close:hover { background: rgba(23, 35, 60, .06); }
.calendar-event-modal-close:focus-visible,
.calendar-event-modal-done:focus-visible {
    outline: .1875rem solid var(--Yellow, #FAA61A);
    outline-offset: .125rem;
}

.calendar-event-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}

.calendar-event-modal-status {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .3125rem .625rem;
    border-radius: 999px;
    background: var(--calendar-status-happening, var(--Green, #59AD46));
    color: var(--White, #FFF);
    font-size: .6875rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.calendar-event-modal-status-ongoing { background: var(--calendar-status-ongoing, var(--Purple, #6E2B7D)); }
.calendar-event-modal-status-ending {
    background: var(--calendar-status-ending, var(--Yellow, #FAA61A));
    color: var(--Black, #292929);
}

.calendar-event-modal-fields {
    display: grid;
    margin: 0;
    gap: .75rem;
}

.calendar-event-modal-field {
    display: grid;
    padding: .75rem;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    gap: .75rem;
    border-radius: .625rem;
    background: rgba(23, 35, 60, .055);
}
.calendar-event-modal-field dt {
    color: var(--Soft-Black, #494949);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}
.calendar-event-modal-field dd {
    min-width: 0;
    margin: 0;
    color: var(--Black, #292929);
    font-size: .875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.calendar-event-modal-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: .0625rem solid rgba(23, 35, 60, .12);
    color: var(--Soft-Black, #494949);
    font-size: .9375rem;
    line-height: 1.6;
    white-space: pre-line;
}

.calendar-event-modal-footer {
    display: flex;
    padding: 1rem 1.25rem;
    justify-content: flex-end;
    border-top: .0625rem solid rgba(23, 35, 60, .12);
    background: rgba(23, 35, 60, .035);
}

.calendar-event-modal-done {
    min-height: 2.75rem;
    padding: .625rem 1rem;
    border: 0;
    border-radius: .5rem;
    background: var(--Dark-Blue, #04559F);
    color: var(--White, #FFF);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.calendar-event-modal-done:hover { background: var(--Blue, #0089CF); }

@media (max-width: 40rem) {
    .calendar-event-modal { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
    .calendar-event-modal-panel { max-height: calc(100vh - 1.375rem); }
    .calendar-event-modal-header,
    .calendar-event-modal-body,
    .calendar-event-modal-footer { padding-inline: .875rem; }
    .calendar-event-modal-field { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-event-modal::backdrop { backdrop-filter: none; }
}
/*#endregion Calendar Event Details Modal */


/*#region Calendar Event Modal Extended Details */
.calendar-event-modal-summary {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
}
.calendar-event-modal-registration,
.calendar-event-modal-resources {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: .0625rem solid rgba(23, 35, 60, .12);
}
.calendar-event-modal-registration[hidden],
.calendar-event-modal-resources[hidden] { display: none !important; }
.calendar-event-modal-registration h3,
.calendar-event-modal-resources h3 {
    margin: 0 0 .625rem;
    color: var(--Black, #292929);
    font-family: Montserrat, sans-serif;
    font-size: .875rem;
    font-weight: 800;
}
.calendar-event-modal-registration-action {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.calendar-event-modal-register {
    display: inline-flex;
    min-height: 2.75rem;
    padding: .625rem 1rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--Dark-Blue, #04559F);
    color: var(--White, #FFF);
    font-size: .875rem;
    font-weight: 800;
    text-decoration: none;
}
.calendar-event-modal-register:hover {
    background: var(--Blue, #0089CF);
    color: var(--White, #FFF);
    text-decoration: none;
}
.calendar-event-modal-register:focus-visible,
.calendar-event-modal-resource:focus-visible {
    outline: .1875rem solid var(--Yellow, #FAA61A);
    outline-offset: .125rem;
}
.calendar-event-modal-resource-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}
.calendar-event-modal-resource {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    padding: .625rem .75rem;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: .0625rem solid rgba(4, 85, 159, .22);
    border-radius: .5rem;
    background: rgba(0, 137, 207, .055);
    color: var(--Dark-Blue, #04559F);
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.calendar-event-modal-resource:hover {
    border-color: var(--Blue, #0089CF);
    background: rgba(0, 137, 207, .1);
    color: var(--Dark-Blue, #04559F);
    text-decoration: none;
}
.calendar-event-modal-external { flex: 0 0 auto; font-size: .875rem; line-height: 1; }
@media (max-width: 32rem) {
    .calendar-event-modal-registration-action { display: grid; grid-template-columns: 1fr; }
    .calendar-event-modal-register { width: 100%; }
    .calendar-event-modal-resource-list { grid-template-columns: 1fr; }
}
/*#endregion Calendar Event Modal Extended Details */

/*#region Calendar Staff Portal Compact Bootstrap Column */
/* A col-md-3 can be only 12rem to 16rem wide on smaller tablets while the
 * viewport is still above Bootstrap's stacking breakpoint. Respond to the
 * widget's actual inline size rather than waiting for the viewport to wrap. */
@container staff-calendar (max-width: 16rem) {
    .calendar-staff-widget.calendar-staff-mini {
        --staff-calendar-height: 47rem;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: .625rem !important;
        overflow: hidden;
    }

    .calendar-staff-widget .calendar-default-layout,
    .calendar-staff-widget .calendar-default-scheduler,
    .calendar-staff-widget .calendar-default-sidebar,
    .calendar-staff-widget .calendar-event-viewport,
    .calendar-staff-widget .calendar-default-events {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .calendar-staff-widget .calendar-default-layout {
        gap: .5rem;
    }

    .calendar-staff-widget .calendar-default-scheduler {
        padding-inline: .125rem !important;
    }

    .calendar-staff-widget .calendar-staff-month-controls {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem !important;
        column-gap: .125rem !important;
    }

    .calendar-staff-widget .calendar-staff-nav-prev,
    .calendar-staff-widget .calendar-staff-nav-next {
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0 !important;
    }

    .calendar-staff-widget .calendar-staff-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current,
    .calendar-staff-widget .k-scheduler-toolbar .k-nav-current .k-button-text {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-inline: .125rem !important;
        overflow: hidden !important;
        font-size: .8125rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-header .k-scheduler-table th {
        font-size: .5625rem !important;
        letter-spacing: -.025em !important;
    }

    .calendar-staff-widget .k-scheduler-monthview td > .k-link,
    .calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
    .calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
        width: 1.25rem !important;
        height: 1.375rem !important;
        font-size: .75rem !important;
        line-height: 1.375rem !important;
    }

    .calendar-staff-widget .calendar-default-sidebar-heading {
        padding: .625rem;
        align-items: flex-start;
        flex-direction: column;
        gap: .125rem;
    }

    .calendar-staff-widget .calendar-default-sidebar-title {
        font-size: .875rem;
        line-height: 1.2;
    }

    .calendar-staff-widget .calendar-default-period {
        max-width: 100%;
        font-size: .625rem;
        line-height: 1.2;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .calendar-staff-widget .calendar-event-viewport > .calendar-default-events {
        padding: .375rem;
    }

    .calendar-staff-widget .calendar-event-pinned-layer {
        border-left-width: .1875rem;
    }

    .calendar-staff-widget .calendar-event-group-toggle {
        min-height: 2.5rem;
        padding: .375rem .4375rem;
        grid-template-columns: .5rem minmax(0, 1fr) auto .625rem;
        gap: .3125rem;
        border-left-width: .1875rem;
        font-size: .6875rem;
    }

    .calendar-staff-widget .calendar-event-group-swatch {
        width: .5rem;
        height: .5rem;
    }

    .calendar-staff-widget .calendar-event-group-count {
        min-width: 1.25rem;
        min-height: 1.25rem;
        padding-inline: .25rem;
        font-size: .5625rem;
    }

    .calendar-staff-widget .calendar-event-group-list {
        padding: .375rem;
        gap: .375rem;
        border-left-width: .1875rem;
    }

    .calendar-staff-widget .calendar-info-card-link,
    .calendar-staff-widget .calendar-info-card-content,
    .calendar-staff-widget .calendar-info-card-button {
        min-width: 0;
        padding: .5rem;
    }

    /* Give the title the complete card width. The compact horizontal date badge
     * identifies the date without reserving a permanent first column. */
    .calendar-staff-widget .calendar-info-card-header {
        display: grid;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: .375rem;
        align-items: start;
    }

    .calendar-staff-widget .calendar-info-date {
        display: inline-flex;
        width: fit-content;
        min-width: 2.75rem;
        height: auto;
        min-height: 1.625rem;
        padding: .25rem .375rem;
        flex-direction: row;
        justify-self: start;
        gap: .25rem;
        border-radius: .4375rem;
    }

    .calendar-staff-widget .calendar-info-month,
    .calendar-staff-widget .calendar-info-day {
        margin: 0;
        font-size: .6875rem !important;
        line-height: 1;
    }

    .calendar-staff-widget .calendar-info-heading,
    .calendar-staff-widget .calendar-info-title,
    .calendar-staff-widget .calendar-info-date-range,
    .calendar-staff-widget .calendar-info-summary,
.calendar-staff-widget .calendar-info-title {
        font-size: .75rem !important;
        line-height: 1.25;
    }

    .calendar-staff-widget .calendar-info-meta {
        display: grid;
        margin-top: .5rem;
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
    }

    .calendar-staff-widget .calendar-info-chip {
        width: 100%;
        max-width: 100%;
        padding: .3125rem .4375rem;
        border-radius: .625rem;
        align-items: flex-start;
        justify-content: flex-start;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .calendar-staff-widget .calendar-info-summary {
        margin-top: .5rem;
        -webkit-line-clamp: 3;
    }
}

/* At the narrowest supported column width, remove secondary card content and
 * nonessential group chrome so the event title and action remain usable. */
@container staff-calendar (max-width: 12rem) {
    .calendar-staff-widget.calendar-staff-mini {
        --staff-calendar-height: 45rem;
        padding: .5rem !important;
    }

    .calendar-staff-widget .calendar-event-group-toggle {
        grid-template-columns: .5rem minmax(0, 1fr) .625rem;
    }

    .calendar-staff-widget .calendar-event-group-count {
        display: none;
    }

    .calendar-staff-widget .calendar-info-summary {
        display: none;
    }

    .calendar-staff-widget .calendar-info-current {
        max-width: 100%;
        white-space: normal;
        line-height: 1.15;
    }
}
/*#endregion Calendar Staff Portal Compact Bootstrap Column */


/*#region Calendar Event Modal Heading Date */
.calendar-event-modal-heading { display:grid; min-width:0; flex:1 1 auto; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.875rem; }
.calendar-event-modal-heading-copy { min-width:0; }
.calendar-event-modal-date.calendar-info-date { display:inline-flex; width:3.25rem; min-width:3.25rem; height:3.75rem; margin:0; padding:.375rem .25rem; align-items:center; justify-content:center; border-radius:.625rem; background:var(--Dark-Blue,#04559F); color:var(--White,#FFF); box-shadow:inset 0 0 0 .125rem rgba(255,255,255,.18); }
.calendar-event-modal-date .calendar-info-month { color:inherit; font-size:.6875rem; font-weight:900; letter-spacing:.04em; line-height:1; }
.calendar-event-modal-date .calendar-info-day { color:inherit; font-size:1.5rem; font-weight:900; line-height:1; }
@media (max-width:40rem) { .calendar-event-modal-heading { gap:.625rem; align-items:start; } .calendar-event-modal-date.calendar-info-date { width:2.75rem; min-width:2.75rem; height:3.25rem; padding:.3125rem .1875rem; } .calendar-event-modal-date .calendar-info-day { font-size:1.25rem; } }
/*#endregion Calendar Event Modal Heading Date */


/*#region Calendar Default Mobile Date Focus */
@media (max-width:900px) { .calendar-default-widget:not(.calendar-staff-widget) .calendar-info-card { scroll-margin-block:45vh; } }
/*#endregion Calendar Default Mobile Date Focus */

/*#region Calendar Default Event Details Responsive Height */
/* Side-by-side: the Scheduler defines the grid-row height and Event Details
 * stretches to exactly the same rendered height. */
@media (min-width: 901px) {
    .calendar-default-widget:not(.calendar-staff-widget) .calendar-default-layout {
        align-items: stretch;
    }

    .calendar-default-widget:not(.calendar-staff-widget) .calendar-default-sidebar {
        display: flex;
        height: 100%;
        min-height: 0;
        max-height: none;
        flex-direction: column;
    }

    .calendar-default-widget:not(.calendar-staff-widget) .calendar-event-viewport {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-viewport > .calendar-default-events {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* Stacked mobile/tablet: provide a predictable Event Details window roughly
 * equivalent to four standard event cards, with additional events scrolling
 * inside the panel rather than extending the page indefinitely. */
@media (max-width: 900px) {
    .calendar-default-widget:not(.calendar-staff-widget) .calendar-default-sidebar {
        display: flex;
        height: clamp(28rem, 62vh, 34rem);
        min-height: 28rem;
        max-height: 34rem;
        flex-direction: column;
        overflow: hidden;
    }

    .calendar-default-widget:not(.calendar-staff-widget) .calendar-event-viewport {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-viewport > .calendar-default-events {
        display: block;
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-group-list {
        grid-template-columns: minmax(0, 1fr);
    }
}
/*#endregion Calendar Default Event Details Responsive Height */

/*#region Calendar Default Side-by-Side Measured Height */
@media (min-width: 901px) {
    .calendar-default-widget:not(.calendar-staff-widget) .calendar-default-layout {
        align-items: start;
    }

    .calendar-default-widget:not(.calendar-staff-widget) .calendar-default-sidebar {
        display: flex;
        height: var(--calendar-default-matched-height, 37.5rem) !important;
        min-height: 0;
        max-height: var(--calendar-default-matched-height, 37.5rem) !important;
        flex-direction: column;
        overflow: hidden;
    }

    .calendar-default-widget:not(.calendar-staff-widget) .calendar-event-viewport {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    .calendar-default-widget:not(.calendar-staff-widget)
    .calendar-event-viewport > .calendar-default-events {
        min-height: 0;
        max-height: none !important;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}
/*#endregion Calendar Default Side-by-Side Measured Height */

/*#region Calendar Staff Portal Event Details Paint Boundary */
.calendar-staff-widget .calendar-default-sidebar { isolation: isolate; overflow: hidden; }
.calendar-staff-widget .calendar-default-sidebar-heading {
    position: relative; z-index: 95; flex: 0 0 auto;
    background: var(--White, #FFF); background-color: var(--White, #FFF);
}
.calendar-staff-widget .calendar-event-viewport {
    position: relative; z-index: 1; min-height: 0; overflow: hidden;
    isolation: isolate; background: var(--calendar-event-surface, #F2F2F2);
    contain: paint;
}
.calendar-staff-widget .calendar-event-viewport > .calendar-default-events {
    position: relative; z-index: 1; min-height: 0; overflow-x: hidden;
}
.calendar-staff-widget .calendar-event-viewport::before {
    position: absolute; top: 0; right: 0; left: 0; z-index: 70;
    display: block;
    height: calc(var(--calendar-pinned-top, var(--calendar-event-inset, .875rem)) + .1875rem);
    background: var(--calendar-event-surface, #F2F2F2);
    background-color: var(--calendar-event-surface, #F2F2F2);
    box-shadow: 0 .0625rem 0 var(--calendar-event-surface, #F2F2F2);
    content: ""; opacity: 1; pointer-events: none;
}
.calendar-staff-widget .calendar-event-pinned-backdrop { z-index: 79; }
.calendar-staff-widget .calendar-event-pinned-layer {
    z-index: 80; overflow: hidden; background-clip: padding-box;
}
@container staff-calendar (max-width: 16rem) {
    .calendar-staff-widget .calendar-event-viewport::before {
        height: calc(var(--calendar-pinned-top, var(--calendar-event-inset, .625rem)) + .1875rem);
    }
}
/*#endregion Calendar Staff Portal Event Details Paint Boundary */

/*#region Calendar Staff Portal Medium-Weight Typography and Date Gutter */
.calendar-staff-widget .k-scheduler-toolbar .k-nav-current,
.calendar-staff-widget .k-scheduler-toolbar .k-nav-current .k-button-text,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-header .k-scheduler-table th,
.calendar-staff-widget .k-scheduler-monthview td > .k-link,
.calendar-staff-widget .k-scheduler-monthview td .k-nav-day,
.calendar-staff-widget .k-scheduler-monthview .k-scheduler-cell .k-link {
    font-weight: 500 !important;
}

/* Table cells cannot use margins reliably. A one-pixel surface gutter moves
 * source outlines inward without changing Kendo's seven-column geometry. */
.calendar-staff-widget .k-scheduler-monthview td[data-calendar-date] {
    border-radius: .25rem !important;
    background-clip: padding-box !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-single-source-color:not(.calendar-staff-date-selected):not(.k-today) {
    box-shadow:
        inset 0 0 0 .0625rem var(--calendar-event-surface, #F2F2F2),
        inset 0 0 0 .1875rem var(--calendar-source-border, var(--calendar-event-base, #0089CF)),
        0 .0625rem .125rem rgba(23,35,60,.12) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-multiple-source-colors:not(.calendar-staff-date-selected):not(.k-today) {
    background:
        linear-gradient(var(--White, #FFF), var(--White, #FFF)) center / calc(100% - .375rem) calc(100% - .375rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base, #0089CF)) center / calc(100% - .125rem) calc(100% - .125rem) no-repeat,
        linear-gradient(var(--calendar-event-surface, #F2F2F2), var(--calendar-event-surface, #F2F2F2)) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-single-source-color:not(.k-today):focus-visible {
    box-shadow:
        inset 0 0 0 .0625rem var(--calendar-event-surface, #F2F2F2),
        inset 0 0 0 .1875rem var(--calendar-source-border, var(--calendar-event-base, #0089CF)),
        0 0 0 .125rem rgba(0,137,207,.24) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today),
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today):hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].calendar-staff-date-selected.calendar-staff-date-multiple-source-colors:not(.k-today):focus-visible {
    background:
        linear-gradient(var(--Dark-Blue, #04559F), var(--Dark-Blue, #04559F)) center / calc(100% - .375rem) calc(100% - .375rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base, #0089CF)) center / calc(100% - .125rem) calc(100% - .125rem) no-repeat,
        linear-gradient(var(--calendar-event-surface, #F2F2F2), var(--calendar-event-surface, #F2F2F2)) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color:hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-single-source-color:focus-visible {
    box-shadow:
        inset 0 0 0 .0625rem var(--calendar-event-surface, #F2F2F2),
        inset 0 0 0 .1875rem var(--calendar-source-border, var(--calendar-event-base, #0089CF)),
        0 0 0 .125rem rgba(89,173,70,.24) !important;
}
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors:hover,
.calendar-staff-widget .k-scheduler-monthview
td[data-calendar-date].k-today.calendar-staff-date-multiple-source-colors:focus-visible {
    background:
        linear-gradient(var(--calendar-status-happening, var(--Green, #59AD46)), var(--calendar-status-happening, var(--Green, #59AD46))) center / calc(100% - .375rem) calc(100% - .375rem) no-repeat,
        var(--calendar-source-fill, var(--calendar-event-base, #0089CF)) center / calc(100% - .125rem) calc(100% - .125rem) no-repeat,
        linear-gradient(var(--calendar-event-surface, #F2F2F2), var(--calendar-event-surface, #F2F2F2)) !important;
}
/*#endregion Calendar Staff Portal Medium-Weight Typography and Date Gutter */