/* /Components/BookingCancelConfirmBanner.razor.rz.scp.css */
.booking-cancel-confirm-banner[b-lbdzzpo2kh] {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: var(--the-unit-2x);
    margin-top: var(--the-unit-2x);
    padding: var(--the-unit-2x);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-1); /* embedded in cancel page */
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
    background-color: var(--the-hue-warning-0);
    color: var(--the-hue-warning-6);
    border: 1px solid var(--the-hue-warning-3);
}

.booking-cancel-confirm-banner .banner-content[b-lbdzzpo2kh] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

    .booking-cancel-confirm-banner .banner-icon[b-lbdzzpo2kh] {
        font-size: 32px;
        text-box: trim-both cap alphabetic;
    }

.booking-cancel-confirm-banner .banner-text[b-lbdzzpo2kh] {
    flex-grow: 1;
    min-width: 0;
    font-size: var(--the-fs-fullrow);
    line-height: 1.4;
}

.booking-cancel-confirm-banner .banner-text p[b-lbdzzpo2kh] {
    margin: 0;
}

@media (orientation: portrait), (max-width: 719px) {
    .booking-cancel-confirm-banner[b-lbdzzpo2kh] {
        border-radius: 0;
        margin-bottom: 0;
    }
}
/* /Components/BookingConfirmedBanner.razor.rz.scp.css */
.booking-confirmed-banner[b-lqnn22ei0w] {
    position: relative;
    width: 100%;
    padding: var(--the-unit-2x) var(--the-unit-4x);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-0);
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
    background-color: var(--the-hue-success-0);
    color: var(--the-hue-success-6);
    border: 1px solid var(--the-hue-success-3);
}

.booking-confirmed-banner .banner-content[b-lqnn22ei0w] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.booking-confirmed-banner .banner-icon[b-lqnn22ei0w] {
    font-size: calc(var(--the-unit-fullrow) - 6px);
    flex-shrink: 0;
}

.booking-confirmed-banner .banner-text[b-lqnn22ei0w] {
    flex-grow: 1;
    font-size: var(--the-fs-fullrow);
    line-height: 1.4;
    padding-right: var(--the-unit-8x);
}

.booking-confirmed-banner .banner-text p[b-lqnn22ei0w] {
    margin: 0;
}

.booking-confirmed-banner .btn-dismiss[b-lqnn22ei0w] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: calc(var(--the-fs-fullrow) * 1.75);
    line-height: 1;
    padding: 2px 4px;
}

.booking-confirmed-banner .btn-dismiss:hover[b-lqnn22ei0w] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (orientation: portrait), (max-width: 719px) {
    .booking-confirmed-banner[b-lqnn22ei0w] {
        border-radius: 0;
    }
}
/* /Components/BookingNotificationBanner.razor.rz.scp.css */
.booking-notification-banner[b-d4bci5zlxo] {
    position: relative;
    width: 100%;
    padding: var(--the-unit-2x) var(--the-unit-4x);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-0);
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
}

.booking-notification-banner.unconfirmed[b-d4bci5zlxo] {
    background-color: var(--the-hue-warning-0);
    color: var(--the-hue-warning-6);
    border: 1px solid var(--the-hue-warning-3);
}

.booking-notification-banner.confirmed[b-d4bci5zlxo] {
    background-color: var(--the-hue-success-0);
    color: var(--the-hue-success-6);
    border: 1px solid var(--the-hue-success-3);
}

.booking-notification-banner.multiple[b-d4bci5zlxo] {
    background-color: var(--the-hue-info-0);
    color: var(--the-hue-info-6);
    border: 1px solid var(--the-hue-info-3);
}

.banner-content[b-d4bci5zlxo] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.banner-icon[b-d4bci5zlxo] {
    font-size: calc(var(--the-unit-fullrow) - 6px);
    flex-shrink: 0;
}

.banner-text[b-d4bci5zlxo] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-1x);
}

.banner-primary[b-d4bci5zlxo] {
    font-size: var(--the-fs-fullrow);
    line-height: 1.4;
}

.banner-countdown[b-d4bci5zlxo] {
    font-size: var(--the-fs-smallrow);
    font-weight: 500;
}

.banner-actions[b-d4bci5zlxo] {
    display: flex;
    gap: var(--the-unit-2x);
    flex-shrink: 0;
}

.banner-actions .btn[b-d4bci5zlxo] {
    padding: var(--the-unit-1x) var(--the-unit-2x);
    font-size: var(--the-fs-fullrow);
    font-family: var(--the-ff-action);
    font-weight: var(--the-fw-action);
    border: none;
    border-radius: var(--the-box-radius);
    cursor: pointer;
    white-space: nowrap;
}

.banner-actions .btn-primary[b-d4bci5zlxo] {
    background-color: rgba(255, 255, 255, 0.3);
    color: inherit;
    font-weight: 600;
}

.banner-actions .btn-primary:hover[b-d4bci5zlxo] {
    background-color: rgba(255, 255, 255, 0.5);
}

.banner-actions .btn-secondary[b-d4bci5zlxo] {
    background-color: rgba(255, 255, 255, 0.15);
    color: inherit;
}

.banner-actions .btn-secondary:hover[b-d4bci5zlxo] {
    background-color: rgba(255, 255, 255, 0.3);
}

.banner-actions .btn-dismiss[b-d4bci5zlxo] {
    background-color: transparent;
    color: inherit;
    opacity: 0.7;
    padding: var(--the-unit-1x) var(--the-unit-2x);
}

.banner-actions .btn-dismiss:hover[b-d4bci5zlxo] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
    .desktop-text[b-d4bci5zlxo],
    .desktop-only[b-d4bci5zlxo] {
        display: none !important;
    }

    .mobile-text[b-d4bci5zlxo] {
        display: inline;
    }

    .banner-content[b-d4bci5zlxo] {
        gap: var(--the-unit-2x);
        padding-right: var(--the-unit-8x);
    }

    .banner-icon[b-d4bci5zlxo] {
        font-size: var(--the-unit-fullrow);
    }

    .banner-primary[b-d4bci5zlxo] {
        font-size: var(--the-fs-smallrow);
    }

    .banner-secondary[b-d4bci5zlxo],
    .banner-countdown[b-d4bci5zlxo] {
        font-size: var(--the-fs-smallrow);
    }

    .banner-actions[b-d4bci5zlxo] {
        gap: var(--the-unit-1x);
    }

    .banner-actions .btn[b-d4bci5zlxo] {
        padding: var(--the-unit-1x) var(--the-unit-2x);
        font-size: var(--the-fs-smallrow);
    }

    .banner-actions .btn-dismiss[b-d4bci5zlxo] {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: calc(var(--the-fs-fullrow) * 1.75);
        line-height: 1;
        padding: 2px 4px;
    }
}

@media (orientation: portrait), (max-width: 719px) {
    .booking-notification-banner[b-d4bci5zlxo] {
        border-radius: 0;
    }
}

@media (min-width: 768px) {
    .mobile-text[b-d4bci5zlxo] {
        display: none !important;
    }

    .desktop-text[b-d4bci5zlxo],
    .desktop-only[b-d4bci5zlxo] {
        display: inline;
    }

    .banner-content[b-d4bci5zlxo] {
        align-items: center;
    }

    .banner-text[b-d4bci5zlxo] {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .banner-secondary[b-d4bci5zlxo],
    .banner-countdown[b-d4bci5zlxo] {
        display: inline;
    }
}
/* /Components/ButtonBar.razor.rz.scp.css */
.button-bar[b-2c7rml352r]  .the-field-row__cell:last-of-type {
    flex: 1;
}

/* the merged checkout flow needs up to four buttons, which don't fit one clipped row on a phone */
.button-bar--wrap[b-2c7rml352r] {
    height: auto;
    overflow: visible;
    min-height: var(--the-unit-fullrow);
}

.button-bar--wrap > .the-command-bar__buttons[b-2c7rml352r] {
    flex-wrap: wrap;
    row-gap: var(--the-unit-1x);
}
/* /Components/HomeButton.razor.rz.scp.css */
/* chrome above the page, so it stays as short as it can and doesn't take the height a page needs to scroll inside */
.home-button[b-1tvt5bm83r] {
    display: flex;
    flex-shrink: 0;
    /* the shell gives a narrow page no side padding, so line the button up with the content below it */
    padding: 0 var(--the-unit-2x) var(--the-unit-1x) var(--the-unit-2x);
}

/* a button lays its content out as flex, which drops the space written between the icon and the word:
   at the small size all that separates them is a quarter of 13px, and the house lands on the H */
.home-button[b-1tvt5bm83r]  .the-action-button {
    gap: 0.5em;
}
/* /Components/Layouts/KioskShell.razor.rz.scp.css */
.chromeless-shell[b-lz8grvgk59] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--the-bg-neutral-chrome);
    color: var(--the-hue-neutral-6);
}

.chromeless-shell__page[b-lz8grvgk59] {
    padding: var(--the-unit-2x);
    box-sizing: border-box;
}

/* mod: a page that scrolls inside itself stops at the window, so the height it divides up is the
   window's rather than its own content's */
.chromeless-shell--internal-scroll[b-lz8grvgk59] {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.chromeless-shell--internal-scroll > .chromeless-shell__page[b-lz8grvgk59] {
    height: 100%;
    min-height: 0;
}

/* such a page carries its own heading, on the same line as the controls it belongs with. The bar stays
   a row of the header panel's grid, at no height, because the row below it is the one measured as 1fr */
.chromeless-shell--internal-scroll[b-lz8grvgk59]  .the-title-bar {
    min-height: 0;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* when there's a modal, pages and non-top modals don't display at all, but their DOM elements are kept to maintain state */
.chromeless-shell__page--overlaid[b-lz8grvgk59] {
    display: none;
}
/* /Components/Layouts/ManageLayout.razor.rz.scp.css */
/* same banner stack as PublicLayout, so a confirmed booking is acknowledged in the manage area too */
.page-with-banners[b-lcgueekfwi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.notification-banner-stack[b-lcgueekfwi] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    max-width: var(--the-unit-colmax);
    margin: 0 auto;
}

.notification-banner-stack:has(> *)[b-lcgueekfwi] {
    margin-bottom: var(--the-unit-2x);
}

.page-body[b-lcgueekfwi] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (orientation: portrait), (max-width: 719px) {
    .notification-banner-stack:has(> *)[b-lcgueekfwi] {
        margin-bottom: 0;
    }
}
/* /Components/Layouts/PublicLayout.razor.rz.scp.css */
.page-with-banners[b-z6qalwm4xp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.notification-banner-stack[b-z6qalwm4xp] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    max-width: var(--the-unit-colmax);
    margin: 0 auto;
}

.notification-banner-stack:has(> *)[b-z6qalwm4xp] {
    margin-bottom: var(--the-unit-2x);
}

.page-body[b-z6qalwm4xp] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (orientation: portrait), (max-width: 719px) {
    .notification-banner-stack:has(> *)[b-z6qalwm4xp] {
        margin-bottom: 0;
    }
}
/* /Components/Layouts/StaffLayout.razor.rz.scp.css */
/* same column as ManageLayout: the home button stays put and the page keeps the rest of the height */
.page-with-home[b-mzeow4y5e4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.page-body[b-mzeow4y5e4] {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/LoginPage.razor.rz.scp.css */
.login[b-z1fm5zlck6] {
    align-self: start;
    align-items: center;
    display: grid;
    grid-column-gap: var(--the-unit-1x);
    grid-template-columns: 1fr auto;
    grid-template-rows: repeat(5, var(--the-unit-fullrow)) 1fr;
}

.wide[b-z1fm5zlck6] {
    grid-column: 1 / 3;
}
/* /Components/PromoClaimBanner.razor.rz.scp.css */
.promo-claim-banner[b-xr212tfri0] {
    position: relative;
    width: 100%;
    padding: var(--the-unit-2x) var(--the-unit-4x);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-0);
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
}

.promo-claim-banner.usable[b-xr212tfri0] {
    background-color: var(--the-hue-action-0);
    color: var(--the-hue-action-6);
    border: 1px solid var(--the-hue-action-3);
}

.promo-claim-banner.unusable[b-xr212tfri0] {
    background-color: var(--the-hue-neutral-1);
    color: var(--the-hue-neutral-5);
    border: 1px solid var(--the-hue-neutral-3);
}

.promo-claim-banner .banner-content[b-xr212tfri0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--the-unit-2x);
}

.promo-claim-banner .banner-icon[b-xr212tfri0] {
    font-size: calc(var(--the-unit-fullrow) - 6px);
    flex-shrink: 0;
}

.promo-claim-banner .banner-text[b-xr212tfri0] {
    flex-grow: 1;
    font-size: var(--the-fs-fullrow);
    line-height: 1.4;
    padding-right: var(--the-unit-8x);
}

.promo-claim-banner .btn-dismiss[b-xr212tfri0] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: calc(var(--the-fs-fullrow) * 1.75);
    line-height: 1;
    padding: 2px 4px;
}

.promo-claim-banner .btn-dismiss:hover[b-xr212tfri0] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (orientation: portrait), (max-width: 719px) {
    .promo-claim-banner[b-xr212tfri0] {
        border-radius: 0;
    }
}
/* /Components/ReceptionActivationBanner.razor.rz.scp.css */
.reception-activation[b-9poaxkfb2n] {
    position: relative;
    width: 100%;
    padding: var(--the-unit-2x) var(--the-unit-4x);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-0);
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
    background-color: var(--the-hue-info-0);
    color: var(--the-hue-info-6);
    border: 1px solid var(--the-hue-info-3);
    margin-bottom: var(--the-unit-2x);
}

.reception-activation__text[b-9poaxkfb2n] {
    padding-right: var(--the-unit-8x);
    line-height: 1.4;
}

.reception-activation__text p[b-9poaxkfb2n] {
    margin: 0;
}

.reception-activation__url[b-9poaxkfb2n] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.reception-activation__code[b-9poaxkfb2n] {
    font-weight: 700;
    font-size: 1.4em;
    letter-spacing: 0.15em;
    font-variant-numeric: tabular-nums;
}

.reception-activation__hint[b-9poaxkfb2n] {
    font-size: 0.85em;
    opacity: 0.8;
}

.reception-activation__dismiss[b-9poaxkfb2n] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: calc(var(--the-fs-fullrow) * 1.75);
    line-height: 1;
    padding: 2px 4px;
}

.reception-activation__dismiss:hover[b-9poaxkfb2n] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (orientation: portrait), (max-width: 719px) {
    .reception-activation[b-9poaxkfb2n] {
        border-radius: 0;
    }
}
/* /Components/Reception/DayTimeline.razor.rz.scp.css */
.timeline-empty[b-35ybzxkgk1] {
    padding: var(--the-unit-1x) 0;
}

/* the planner grid scrolls sideways when the day has more columns than the screen */
.timeline-scroll[b-35ybzxkgk1] {
    overflow-x: auto;
}

/* on the desk's own screen the board is the only thing that scrolls, so the times move under names
   that stay put */
@media (min-width: 1200px) {
    .timeline-scroll[b-35ybzxkgk1] {
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    .timeline__corner[b-35ybzxkgk1],
    .timeline__head[b-35ybzxkgk1],
    .focus-table th[b-35ybzxkgk1] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--the-hue-neutral-0, #fff);
    }

    /* anything the board scrolls to clears the names, which would otherwise cover the row it landed on */
    .timeline__opening[b-35ybzxkgk1],
    .timeline__booking[b-35ybzxkgk1] {
        scroll-margin-top: var(--the-unit-fullrow);
    }
}

.timeline[b-35ybzxkgk1] {
    display: grid;
    grid-template-columns: 4.5rem repeat(var(--column-count), minmax(9rem, 1fr));
    grid-template-rows: auto repeat(var(--slot-count), 1.1rem);
    column-gap: var(--the-unit-1x);
    min-width: fit-content;
    padding-bottom: var(--the-unit-1x);
}

.timeline__head[b-35ybzxkgk1] {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--the-unit-1x);
    padding-bottom: var(--the-unit-1x);
    white-space: nowrap;
}

.timeline__worker[b-35ybzxkgk1] {
    font-weight: 600;
}

/* the hour rules run under every column, drawn before the blocks so they sit behind them */
.timeline__rule[b-35ybzxkgk1] {
    grid-column: 1 / -1;
    border-top: 1px solid var(--the-hue-neutral-2, #e5e5e5);
}

.timeline__hour[b-35ybzxkgk1] {
    grid-column: 1;
    color: var(--muted, #555);
    font-size: 0.85em;
    padding-top: 2px;
    white-space: nowrap;
}

/* the part of the day already behind the clock, shaded down the gutter; its lower edge is "now" */
.timeline__elapsed[b-35ybzxkgk1] {
    grid-column: 1;
    background: var(--the-hue-neutral-1, #f2f2f2);
    border-bottom: 2px solid var(--the-hue-action-1);
    margin-right: var(--the-unit-1x);
}

/* the row the board opens on, an hour behind the clock; it marks a position and nothing more */
.timeline__opening[b-35ybzxkgk1] {
    grid-column: 1;
    pointer-events: none;
}

/* a shift is the pale ground its bookings sit on */
.timeline__shift[b-35ybzxkgk1] {
    grid-column-end: span 1;
    background: var(--the-hue-neutral-1, #f2f2f2);
    border-radius: var(--the-box-radius);
}

.timeline__shift--reception[b-35ybzxkgk1] {
    background: var(--the-hue-action-6);
    display: flex;
    justify-content: center;
    padding-top: var(--the-unit-1x);
}

.timeline__shift-label[b-35ybzxkgk1] {
    color: var(--the-hue-action-1);
    font-size: 0.85em;
    font-weight: 600;
}

/* a break is time the worker is away - hatched so it reads as neither bookable nor booked */
.timeline__break[b-35ybzxkgk1] {
    grid-column-end: span 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    margin: 1px 2px;
    padding-top: 2px;
    border-radius: var(--the-box-radius);
    background: repeating-linear-gradient(-45deg,
        var(--the-hue-neutral-1, #f2f2f2), var(--the-hue-neutral-1, #f2f2f2) 6px,
        var(--the-hue-neutral-2, #e5e5e5) 6px, var(--the-hue-neutral-2, #e5e5e5) 12px);
    color: var(--muted, #555);
    font-size: 0.85em;
}

/* the whole tile is the link, its text wrapping from the top so however short the tile is,
   the first visible line is the customer's name */
.timeline__booking[b-35ybzxkgk1] {
    grid-column-end: span 1;
    display: block;
    overflow: hidden;
    margin: 1px 2px;
    padding: 1px var(--the-unit-1x);
    border-radius: var(--the-box-radius);
    background: var(--the-hue-action-1);
    color: var(--the-hue-action-6);
    font-size: 0.85em;
    line-height: 1.25;
    text-decoration: none;
}

.timeline__booking:hover[b-35ybzxkgk1] {
    background: var(--the-hue-action-2);
}

/* one palette with the Now section: blue waiting, orange needs attention, green under way, grey done */
.timeline__booking--waiting[b-35ybzxkgk1] {
    background: var(--the-hue-info-1);
    color: var(--the-hue-info-6);
}

.timeline__booking--waiting:hover[b-35ybzxkgk1] {
    background: var(--the-hue-info-2);
}

.timeline__booking--attention[b-35ybzxkgk1] {
    background: var(--the-hue-warning-1);
    color: var(--the-hue-warning-6);
}

.timeline__booking--attention:hover[b-35ybzxkgk1] {
    background: var(--the-hue-warning-2);
}

.timeline__booking--running[b-35ybzxkgk1] {
    background: var(--the-hue-success-1);
    color: var(--the-hue-success-6);
}

.timeline__booking--running:hover[b-35ybzxkgk1] {
    background: var(--the-hue-success-2);
}

.timeline__booking--finished[b-35ybzxkgk1] {
    background: var(--the-hue-neutral-1);
    color: var(--the-hue-neutral-5);
}

.timeline__booking--finished:hover[b-35ybzxkgk1] {
    background: var(--the-hue-neutral-2);
}

.timeline__booking-customer[b-35ybzxkgk1] {
    font-weight: 600;
}

.timeline__booking-status[b-35ybzxkgk1] {
    display: block;
    font-size: 0.9em;
    white-space: nowrap;
}

/* an empty quarter-hour is itself a link to a new booking there - too small for any label,
   it just tints under the pointer, with the tooltip carrying the words */
.timeline__free[b-35ybzxkgk1] {
    grid-column-end: span 1;
    display: block;
    margin: 0 2px;
    border-radius: var(--the-box-radius);
    text-decoration: none;
}

.timeline__free:hover[b-35ybzxkgk1] {
    background: var(--the-hue-action-1);
    opacity: 0.5;
}

.reception-badge[b-35ybzxkgk1] {
    background: var(--the-hue-action-6);
    color: var(--the-hue-action-1);
    border-radius: 999px;
    padding: 0 var(--the-unit-1x);
    font-size: 0.85em;
    white-space: nowrap;
}

/* the focus view: the manage home's stacked day, restated here for the desk */
.focus-table[b-35ybzxkgk1] {
    width: 100%;
    border-collapse: collapse;
}

.focus-table th[b-35ybzxkgk1] {
    text-align: left;
    white-space: nowrap;
    padding: var(--the-unit) var(--the-unit-2x);
}

.focus-table td[b-35ybzxkgk1] {
    vertical-align: top;
    white-space: nowrap;
    padding: var(--the-unit) var(--the-unit-2x);
}

/* the totals are the day's arithmetic, not more bookings, so they read as an aside */
.focus-table tfoot[b-35ybzxkgk1] {
    font-style: italic;
    color: var(--the-hue-neutral-5);
}

.focus-table tfoot tr:first-child td[b-35ybzxkgk1] {
    padding-top: var(--the-unit-2x);
    border-top: 1px solid var(--the-hue-neutral-2);
}

/* the bookings read as text rather than as links, but stay underlined so they are still findable;
   :where keeps the inherit weaker than the shared status palette above */
:where(.focus-booking)[b-35ybzxkgk1] {
    color: inherit;
}

/* padded into a pill for its status colour, the padding taken back so the text stays aligned */
.focus-booking[b-35ybzxkgk1] {
    display: inline-block;
    padding: 0 var(--the-unit-1x);
    margin: 0 calc(-1 * var(--the-unit-1x));
    border-radius: var(--the-box-radius);
}

.focus-booking__status[b-35ybzxkgk1] {
    display: block;
    font-size: 0.85em;
}

/* the focus cards are the phone rendering of that view, so they stay out of the way until then */
.focus-cards[b-35ybzxkgk1] {
    display: none;
}

/* phone: the cards take over from the planner */
.timeline-cards[b-35ybzxkgk1] {
    display: none;
}

@media (max-width: 719px) {
    .timeline-scroll[b-35ybzxkgk1],
    .focus-table[b-35ybzxkgk1] {
        display: none;
    }

    .focus-cards[b-35ybzxkgk1] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--the-unit-2x);
        padding: var(--the-unit) var(--the-unit-2x);
    }

    .focus-card__worker[b-35ybzxkgk1] {
        font-weight: 600;
    }

    .focus-card__booking[b-35ybzxkgk1] {
        display: block;
    }

    .focus-card__totals[b-35ybzxkgk1] {
        margin-top: var(--the-unit);
        padding-top: var(--the-unit);
        border-top: 1px solid var(--the-hue-neutral-2);
        color: var(--the-hue-neutral-5);
        font-style: italic;
    }

    .focus-card__shift-end[b-35ybzxkgk1] {
        display: block;
    }

    .timeline-cards[b-35ybzxkgk1] {
        display: flex;
        flex-direction: column;
        gap: var(--the-unit-2x);
    }

    .timeline-card__head[b-35ybzxkgk1] {
        display: flex;
        align-items: baseline;
        gap: var(--the-unit-1x);
        flex-wrap: wrap;
    }

    .timeline-card__shifts[b-35ybzxkgk1] {
        color: var(--muted, #555);
        font-size: 0.9em;
    }

    .timeline-card__empty[b-35ybzxkgk1] {
        margin: var(--the-unit-1x) 0 0;
        color: var(--muted, #555);
    }

    .timeline-card__booking[b-35ybzxkgk1] {
        display: flex;
        gap: var(--the-unit-1x);
        align-items: baseline;
        padding: var(--the-unit-1x) 0;
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--the-hue-neutral-1, #f2f2f2);
    }
}

/* the booking the desk has just made. the ring stays for as long as the day is on show, because the
   receptionist looks up from the client well after the pulse that first drew their eye */
.timeline__booking--new[b-35ybzxkgk1] {
    outline: 2px solid var(--the-hue-action-1);
    outline-offset: 1px;
    animation: timeline-booking-arrived-b-35ybzxkgk1 0.6s ease-out 3;
}

@keyframes timeline-booking-arrived-b-35ybzxkgk1 {
    from {
        box-shadow: 0 0 0 0 var(--the-hue-action-1);
    }

    to {
        box-shadow: 0 0 0 10px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline__booking--new[b-35ybzxkgk1] {
        animation: none;
    }
}
/* /Components/Reception/EventLogPanel.razor.rz.scp.css */
.event-log[b-enj3ywzpa0] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-log__entry[b-enj3ywzpa0] {
    display: flex;
    flex-direction: column;
    padding: var(--the-unit-1x) 0;
    border-bottom: 1px solid var(--the-hue-shade-2, #ddd);
}

.event-log__entry:last-child[b-enj3ywzpa0] {
    border-bottom: none;
}

/* the action is what the eye goes to; who and when answer the follow-up question */
.event-log__what[b-enj3ywzpa0] {
    font-weight: 600;
}

.event-log__who[b-enj3ywzpa0] {
    font-size: 0.85em;
    color: var(--muted, #555);
}

.event-log__empty[b-enj3ywzpa0],
.event-log__failed[b-enj3ywzpa0] {
    font-size: 0.9em;
    color: var(--muted, #555);
}

.event-log__failed[b-enj3ywzpa0] {
    color: var(--the-hue-error-2, #b00020);
}
/* /Components/Reception/ReceptionCodeSender.razor.rz.scp.css */
.code-sender[b-k16uy71v0g] {
    margin-top: var(--the-unit-4x);
    padding-top: var(--the-unit-2x);
    border-top: 1px solid var(--the-hue-neutral-2);
}

.code-sender__lead[b-k16uy71v0g] {
    margin: 0 0 var(--the-unit-1x);
}

.code-sender__row[b-k16uy71v0g] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.code-sender__who[b-k16uy71v0g] {
    padding: 0 var(--the-unit-1x);
    height: var(--the-unit-fullrow);
    border: 1px solid var(--the-hue-neutral-3);
    border-radius: 3px;
    background: var(--the-hue-neutral-0);
    cursor: pointer;
}

.code-sender__feedback[b-k16uy71v0g] {
    margin: var(--the-unit-1x) 0 0;
    color: var(--the-hue-info-6);
}
/* /Components/Rostering/BreakButton.razor.rz.scp.css */
.break[b-4he6sz8zq0] {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    border: 2px solid var(--the-hue-success-3);
    background: var(--the-hue-success-1);
    color: var(--the-hue-success-6);
    padding: var(--the-unit-1x);
    border-radius: var(--the-box-radius);
}

.premises[b-4he6sz8zq0] {
    grid-column: 1/2;
    font-weight: 600;
    justify-self: start;
    white-space: nowrap;
}

.period[b-4he6sz8zq0] {
    grid-column: 2/3;
    justify-self: end;
    white-space: nowrap;
}

[b-4he6sz8zq0] .the-command-bar {
    grid-column: 2/3;
}

/* narrower button on HD- screens */
@media (max-width: 1920px) {
    .break[b-4he6sz8zq0] {
        grid-template-rows: auto auto 1fr auto;
    }

    .period[b-4he6sz8zq0] {
        grid-column: 1/2;
    }
}
/* /Components/Rostering/BreakShiftInfoField.razor.rz.scp.css */
.text[b-ms4n0vlwuv] {
    gap: var(--the-unit-2x);
    min-width: 0;
    width: 100%;
}
/* /Components/Rostering/BreakTimeField.razor.rz.scp.css */
.field-wrapper[b-o1ce6grqmd] {
    flex-direction: column;
    width: 100%;
}

.time[b-o1ce6grqmd] {
    grid-template-columns: 1fr 1fr;
    gap: var(--the-unit-2x);
    min-width: 0;
    width: 100%;
}
/* /Components/Rostering/ResponsiveCalendar.razor.rz.scp.css */
/* Container */
.calendar-container[b-1zivmlk7j6] {
    width: 100%;
    height: 100%;
}

.day-name[b-1zivmlk7j6] {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--the-hue-neutral-5);
}

.day-number[b-1zivmlk7j6] {
    font-weight: 700;
    color: var(--the-hue-neutral-4);
    margin-top: 2px;
}

/* desktop mode: multi-column grid */
@media (min-width: 720px) {
    .desktop-grid[b-1zivmlk7j6] {
        display: grid;
        grid-template-columns: auto repeat(7, 1fr);
        grid-template-rows: 60px repeat(var(--rows), 30px) 1fr;
        column-gap: 2px;
        background: var(--the-hue-neutral-5);
    }

    .time-header[b-1zivmlk7j6] {
        grid-column: 1;
        grid-row: 1;
        background: var(--the-hue-neutral-0);
        border-bottom: 2px solid var(--the-hue-neutral-5);
    }

    .time-label[b-1zivmlk7j6] {
        grid-column: 1;
        padding: var(--the-unit-1x) var(--the-unit-2x);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--the-hue-neutral-3);
        text-align: right;
        background: var(--the-hue-neutral-0);
        border-bottom: 1px solid var(--the-hue-neutral-2);
    }

    .time-label-half[b-1zivmlk7j6] {
        grid-column: 1;
        background: var(--the-hue-neutral-0);
        border-bottom: 1px solid var(--the-hue-neutral-5);
    }

    .time-label-last[b-1zivmlk7j6] {
        grid-column: 1;
        background: var(--the-hue-neutral-0);
    }

    .day-column[b-1zivmlk7j6] {
        background: var(--the-hue-neutral-0);
        grid-row: 1 / -1;
        display: grid;
        grid-template-rows: 60px repeat(var(--rows), 30px) 1fr;
    }

    .day-column.current-day[b-1zivmlk7j6] {
        background: var(--the-hue-chrome-0);
    }

    .day-header[b-1zivmlk7j6] {
        grid-row: 1;
        padding: var(--the-unit-2x);
        text-align: center;
        border-bottom: 2px solid var(--the-hue-neutral-5);
        background: var(--the-hue-neutral-0);
        min-height: 60px;
    }

    .day-name[b-1zivmlk7j6] {
        font-size: 0.875rem;
    }

    .day-number[b-1zivmlk7j6] {
        font-size: 1.25rem;
    }

    .day-content[b-1zivmlk7j6] {
        grid-row: 2 / span var(--rows);
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--rows), 30px);
    }

    .calendar-item[b-1zivmlk7j6] {
        grid-column: 1;
        margin: 1px 2px;
        overflow: hidden;
        background: rgba(25, 118, 210, 0.1);
    }

    .mobile-list[b-1zivmlk7j6] {
        display: none;
    }
}

/* phone mode: single-column list */
@media (max-width: 719px) {
    .desktop-grid[b-1zivmlk7j6] {
        display: none;
    }

    .mobile-list[b-1zivmlk7j6] {
        display: flex;
        flex-direction: column;
        gap: var(--the-unit-4x);
        padding: var(--the-unit-2x);
    }

    .day-section[b-1zivmlk7j6] {
        background: var(--the-hue-neutral-0);
        border-radius: var(--the-unit-2x);
        overflow: hidden;
        box-shadow: var(--the-shadow-1);
    }

    .day-header[b-1zivmlk7j6] {
        padding: var(--the-unit-2x) var(--the-unit-4x);
        font-weight: 600;
        font-size: 1rem;
        background: var(--the-hue-neutral-2);
        border-bottom: 2px solid var(--the-hue-neutral-3);
    }

    .day-section.current-day .day-header[b-1zivmlk7j6] {
        background: var(--the-hue-chrome-1);
        border-bottom-color: var(--the-hue-chrome-3);
    }

    .item-list[b-1zivmlk7j6] {
        padding: var(--the-unit-2x);
        position: relative;
    }

    .day-section.current-day .item-list[b-1zivmlk7j6] {
        background: var(--the-hue-chrome-0);
    }

    .item-time[b-1zivmlk7j6] {
        padding: var(--the-unit-1x) var(--the-unit-2x);
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--the-hue-neutral-4);
        position: relative;
    }

    .calendar-item[b-1zivmlk7j6] {
        margin: 0 var(--the-unit-1x) var(--the-unit-2x) var(--the-unit-1x);
        background: var(--the-hue-neutral-0);
        position: relative;
    }

    .calendar-item:last-child[b-1zivmlk7j6] {
        margin-bottom: var(--the-unit-1x);
    }
}
/* /Components/Rostering/RosterView.razor.rz.scp.css */
.week-header[b-63bxe199cg] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 var(--the-unit-2x);
    width: 100%;
    box-sizing: border-box;
}

.worker-name[b-63bxe199cg] {
    font-weight: bold;
    white-space: nowrap;
}

.week-controls[b-63bxe199cg] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    justify-self: end;
}

.week-select[b-63bxe199cg] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start;
    gap: var(--the-unit-1x);
}

.week[b-63bxe199cg] {
    text-align: center;
    white-space: nowrap;
}

.roster[b-63bxe199cg] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.shifts[b-63bxe199cg] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* /Components/Rostering/ShiftButton.razor.rz.scp.css */
.shift[b-j3eh6k4rcr] {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    border: 2px solid var(--the-hue-action-3);
    background: var(--the-hue-action-1);
    color: var(--the-hue-action-6);
    padding: var(--the-unit-1x);
    border-radius: var(--the-box-radius);
}

.premises[b-j3eh6k4rcr] {
    grid-column: 1/2;
    font-weight: 600;
    justify-self: start;
    white-space: nowrap;
}

.period[b-j3eh6k4rcr] {
    grid-column: 2/3;
    justify-self: end;
    white-space: nowrap;
}

.reception-badge[b-j3eh6k4rcr] {
    grid-column: 1/3;
    justify-self: start;
    background: var(--the-hue-action-6);
    color: var(--the-hue-action-1);
    border-radius: 999px;
    padding: 0 var(--the-unit-1x);
    font-size: 0.85em;
    white-space: nowrap;
}

.bookings[b-j3eh6k4rcr] {
    grid-column: 1/3;
}

[b-j3eh6k4rcr] .the-command-bar {
    grid-column: 1/3;
}

/* narrower button on HD- screens */
@media (max-width: 1920px) {
    .shift[b-j3eh6k4rcr] {
        grid-template-rows: auto auto 1fr auto;
    }
    .period[b-j3eh6k4rcr] {
        grid-column: 1/2;
    }
}
/* /Components/Rostering/ShiftDateField.razor.rz.scp.css */
.date[b-qs6fvzy2m9] {
    gap: var(--the-unit-2x);
    min-width: 0;
    width: 100%;
}
/* /Components/Rostering/ShiftTimeField.razor.rz.scp.css */
.field-wrapper[b-uhv43hhx7s] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.end-time-field[b-uhv43hhx7s] {
    gap: var(--the-unit-2x);
    min-width: 0;
    width: 100%;
}

.end-time-field[b-uhv43hhx7s]  > * {
        min-width: 0;
}

/* /Components/Scheduling/BookingMoneyModal.razor.rz.scp.css */
.payment-total[b-jcgpzrl8ec] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.payment-total__amount[b-jcgpzrl8ec] {
    font-size: 1.2em;
    font-weight: bold;
}

.payment-owing[b-jcgpzrl8ec] {
    padding: var(--the-unit-1x) var(--the-unit-2x);
    border-radius: var(--the-unit-half);
    font-weight: bold;
}

.payment-owing--settled[b-jcgpzrl8ec] {
    background: var(--the-hue-success-0);
    color: var(--the-hue-success-6);
}

.payment-owing--outstanding[b-jcgpzrl8ec] {
    background: var(--the-hue-warning-0);
    color: var(--the-hue-warning-6);
}
/* /Components/Scheduling/BookingMoneyPanel.razor.rz.scp.css */
.money-panel[b-tzrwxp48dy] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-2x);
    padding: var(--the-unit-2x);
}

.money-panel__booking[b-tzrwxp48dy] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-half);
    margin-bottom: var(--the-unit-2x);
}

.money-panel__client[b-tzrwxp48dy] {
    font-size: 1.4em;
    font-weight: 600;
}

.money-panel__service[b-tzrwxp48dy] {
    color: var(--the-hue-neutral-5);
}

.money-panel__due[b-tzrwxp48dy] {
    display: flex;
    align-items: baseline;
    gap: var(--the-unit-1x);
}

.money-panel__due-label[b-tzrwxp48dy] {
    color: var(--the-hue-neutral-5);
}

.money-panel__due-amount[b-tzrwxp48dy] {
    font-size: 1.4em;
    font-weight: 600;
}

.money-panel__facts[b-tzrwxp48dy] {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--the-unit-4x);
    row-gap: var(--the-unit-half);
}

.money-panel__paid[b-tzrwxp48dy] {
    color: var(--the-hue-success-4);
    font-weight: 600;
}

.money-panel__unpaid[b-tzrwxp48dy] {
    color: var(--the-hue-warning-4);
    font-weight: 600;
}

.money-panel__moments[b-tzrwxp48dy] {
    color: var(--the-hue-neutral-5);
}

.money-panel__actions[b-tzrwxp48dy]  .the-command-bar__buttons {
    justify-content: flex-start;
}
/* /Components/Scheduling/BookingStatusBadge.razor.rz.scp.css */
.booking-status-badge[b-yun4rb3f4d] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: var(--the-unit-2x) var(--the-unit-4x);
    border-radius: var(--the-box-radius);
    margin-bottom: var(--the-unit-4x);
    font-size: var(--the-fs-fullrow);
    font-family: var(--the-ff-ui);
    font-weight: var(--the-fw-ui);
    line-height: 1.5;
}

.booking-status-badge.confirmed[b-yun4rb3f4d] {
    background-color: var(--the-hue-success-0);
    border-left: var(--the-unit-1x) solid var(--the-hue-success-3);
    color: var(--the-hue-success-6);
}

.booking-status-badge.unconfirmed[b-yun4rb3f4d] {
    background-color: var(--the-hue-warning-0);
    border-left: var(--the-unit-1x) solid var(--the-hue-warning-3);
    color: var(--the-hue-warning-6);
}

.booking-status-badge.cancelled[b-yun4rb3f4d] {
    background-color: var(--the-hue-neutral-1);
    border-left: var(--the-unit-1x) solid var(--the-hue-neutral-3);
    color: var(--the-hue-neutral-5);
}

.booking-status-badge.rescheduling[b-yun4rb3f4d] {
    background-color: var(--the-hue-info-0);
    border-left: var(--the-unit-1x) solid var(--the-hue-info-3);
    color: var(--the-hue-info-6);
}

.badge-icon[b-yun4rb3f4d] {
    font-size: var(--the-unit-fullrow);
    flex-shrink: 0;
}

.badge-text[b-yun4rb3f4d] {
    flex-grow: 1;
}

.badge-text strong[b-yun4rb3f4d] {
    font-weight: 600;
}

@media (max-width: 767px) {
    .booking-status-badge[b-yun4rb3f4d] {
        font-size: var(--the-fs-smallrow);
        padding: var(--the-unit-2x);
    }

    .badge-icon[b-yun4rb3f4d] {
        font-size: calc(var(--the-unit-fullrow) - var(--the-unit-1x));
    }
}
/* /Components/Scheduling/ConfirmedBookingBanner.razor.rz.scp.css */
.confirmed-booking[b-h9s8gs5sp4] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit);
    padding: var(--the-unit-2x) var(--the-unit-4x);
    background-color: var(--the-hue-success-0);
    border-left: var(--the-unit-1x) solid var(--the-hue-success-3);
    color: var(--the-hue-success-6);
}

.confirmed-booking__name[b-h9s8gs5sp4] {
    font-weight: bold;
}

.confirmed-booking__worker[b-h9s8gs5sp4] {
    color: var(--the-hue-success-6);
}
/* /Components/Scheduling/CurrentBookings.razor.rz.scp.css */
.now-header[b-objs9n6e07] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-4x);
}

.now-empty[b-objs9n6e07] {
    padding: var(--the-unit-2x);
}

/* reads as a note about the list rather than another row of it */
.now-next[b-objs9n6e07] {
    padding: var(--the-unit-2x);
    color: var(--the-hue-neutral-5);
}

.now-list[b-objs9n6e07] {
    padding: var(--the-unit) 0;
}

/* every row carries the same fr-based template, so the columns line up down the list
   without the rows having to share a grid */
.now-row[b-objs9n6e07] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: baseline;
    gap: var(--the-unit-2x);
    padding: var(--the-unit) var(--the-unit-2x);
    /* transparent on the rest, so marking the running booking does not shift the row */
    border-left: var(--the-unit) solid transparent;
    color: inherit;
    text-decoration: none;
}

.now-row:hover[b-objs9n6e07] {
    background-color: var(--the-hue-neutral-1);
}

.now-row__customer[b-objs9n6e07] {
    font-weight: 600;
}

/* the times are the row's anchor point and must never fold onto a second line */
.now-row__times[b-objs9n6e07] {
    white-space: nowrap;
}

.now-row__worker[b-objs9n6e07] {
    color: var(--the-hue-neutral-5);
}

/* the least important column: it gives way rather than pushing the others out of view */
.now-row__offering[b-objs9n6e07] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--the-hue-neutral-5);
}

/* the recorded moments and their tap actions sit under the row, sharing its accent edge */
.now-strip[b-objs9n6e07] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: 0 var(--the-unit-2x) var(--the-unit) var(--the-unit-2x);
    border-left: var(--the-unit) solid transparent;
}

.now-strip__status[b-objs9n6e07] {
    color: var(--the-hue-neutral-5);
    white-space: nowrap;
}

.now-strip--running[b-objs9n6e07] {
    border-left-color: var(--the-hue-success-3);
    background-color: var(--the-hue-success-0);
}

.now-strip--finished[b-objs9n6e07] {
    color: var(--the-hue-neutral-4);
}

.now-strip--waiting[b-objs9n6e07] {
    border-left-color: var(--the-hue-info-3);
    background-color: var(--the-hue-info-0);
}

.now-strip--attention[b-objs9n6e07] {
    border-left-color: var(--the-hue-warning-3);
    background-color: var(--the-hue-warning-0);
}

/* a booking under way is the one the person at the counter is most likely asking about */
.now-row--running[b-objs9n6e07] {
    border-left-color: var(--the-hue-success-3);
    background-color: var(--the-hue-success-0);
}

.now-row--running:hover[b-objs9n6e07] {
    background-color: var(--the-hue-success-1);
}

/* the client is in the waiting area */
.now-row--waiting[b-objs9n6e07] {
    border-left-color: var(--the-hue-info-3);
    background-color: var(--the-hue-info-0);
}

.now-row--waiting:hover[b-objs9n6e07] {
    background-color: var(--the-hue-info-1);
}

/* orange means the desk should act: overdue to start, paid but not started, or started but not paid */
.now-row--attention[b-objs9n6e07] {
    border-left-color: var(--the-hue-warning-3);
    background-color: var(--the-hue-warning-0);
}

.now-row--attention:hover[b-objs9n6e07] {
    background-color: var(--the-hue-warning-1);
}

/* finished, but still listed for a few minutes in case the customer is only now at the counter */
.now-row--finished[b-objs9n6e07] {
    color: var(--the-hue-neutral-4);
}

.now-row--finished .now-row__customer[b-objs9n6e07] {
    font-weight: normal;
}

/* four columns do not fit a phone, so the row folds: who and when above, what and with whom below */
@media (max-width: 719px) {
    .now-row[b-objs9n6e07] {
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-areas:
            "customer times"
            "offering worker";
        gap: 0 var(--the-unit-2x);
        padding: var(--the-unit-2x);
    }

    .now-row + .now-row[b-objs9n6e07],
    .now-strip + .now-row[b-objs9n6e07] {
        border-top: 1px solid var(--the-hue-neutral-2);
    }

    .now-row__customer[b-objs9n6e07] {
        grid-area: customer;
    }

    .now-row__times[b-objs9n6e07] {
        grid-area: times;
    }

    .now-row__offering[b-objs9n6e07] {
        grid-area: offering;
    }

    .now-row__worker[b-objs9n6e07] {
        grid-area: worker;
        white-space: nowrap;
        text-align: right;
    }
}
/* /Components/Scheduling/DayOrRangeBox.razor.rz.scp.css */
.day-or-range[b-1w37d00j9r] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--the-unit);
}

.day-or-range--ranged[b-1w37d00j9r] {
    grid-template-columns: 1fr auto 1fr auto;
}

.day-or-range__joiner[b-1w37d00j9r] {
    font-size: var(--the-fs-smallrow);
}

.day-or-range__switch[b-1w37d00j9r] {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--the-fs-smallrow);
    text-decoration: underline;
    white-space: nowrap;
}
/* /Components/Scheduling/DiscountBox.razor.rz.scp.css */
.layout[b-3304jn409p] {
    width: 100%;
    display: flex;
    align-items: center;
}

.price[b-3304jn409p] {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.price__original[b-3304jn409p] {
    color: var(--the-hue-neutral-5);
}

.price__final[b-3304jn409p] {
    font-size: 1.15em;
    flex: 1;
}
/* /Components/Scheduling/ImmediateBookingPage.razor.rz.scp.css */
.worker-step[b-4jz2lcwugp] {
    align-self: start;
}

.arrival-options[b-4jz2lcwugp] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-1x);
    padding-top: var(--the-unit-2x);
}

.arrival-options__label[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-6);
}

.target-when[b-4jz2lcwugp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--the-unit-1x);
    align-items: center;
    padding-bottom: var(--the-unit-2x);
}

/* the framework's picker boxes are width:100%, so these wrappers are what size them */
.target-when__date[b-4jz2lcwugp] {
    width: calc(var(--the-unit) * 30);
}

/* outranks the select's own full-width rule, which appears later in this sheet */
select.target-when__part[b-4jz2lcwugp] {
    width: auto;
}

.target-when__composed[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-5);
}

.worker-list[b-4jz2lcwugp] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-1x);
    padding: var(--the-unit-2x) 0;
}

.worker-card[b-4jz2lcwugp] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-half);
    padding: var(--the-unit-2x);
    background: var(--the-hue-neutral-0);
    border: 1px solid var(--the-hue-neutral-2);
    border-radius: var(--the-unit-1x);
    box-shadow: var(--the-shadow-0);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.1s, border-color 0.1s;
}

.worker-card:hover[b-4jz2lcwugp] {
    background: var(--the-hue-primary-0);
    border-color: var(--the-hue-primary-3);
}

.worker-card--unbookable[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-5);
    background: var(--the-hue-neutral-1);
}

.worker-card--unbookable:hover[b-4jz2lcwugp] {
    background: var(--the-hue-warning-0);
    border-color: var(--the-hue-warning-3);
}

.worker-list__unavailable[b-4jz2lcwugp] {
    margin: 0;
    color: var(--the-hue-neutral-5);
    font-size: 0.9em;
}

.worker-card__header[b-4jz2lcwugp] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.worker-card__name[b-4jz2lcwugp] {
    font-weight: bold;
    font-size: 1.05em;
}

.worker-card__requested[b-4jz2lcwugp] {
    font-size: 0.8em;
    padding: 0 var(--the-unit-1x);
    background: var(--the-hue-primary-1);
    border: 1px solid var(--the-hue-primary-4);
    border-radius: var(--the-unit-1x);
    white-space: nowrap;
}

.worker-card__utilisation[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-5);
    font-size: 0.9em;
    white-space: nowrap;
}

.worker-card__availability[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-6);
    font-size: 0.95em;
}

.form-worker-header[b-4jz2lcwugp] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-half);
    padding-bottom: var(--the-unit-2x);
    border-bottom: 1px solid var(--the-hue-neutral-2);
    margin-bottom: var(--the-unit-2x);
}

.form-worker-name[b-4jz2lcwugp] {
    font-weight: bold;
    font-size: 1.1em;
}

.form-worker-day[b-4jz2lcwugp] {
    font-weight: 600;
}

.form-worker-availability[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-6);
}

.immediate-booking-select[b-4jz2lcwugp] {
    font: inherit;
    width: 100%;
    max-width: 20rem;
    padding: 0 var(--the-unit-1x);
    height: var(--the-unit-fullrow);
    border: 1px solid var(--the-hue-neutral-3);
    border-radius: 3px;
    background: var(--the-hue-neutral-0);
    cursor: pointer;
}

.confirmed-message[b-4jz2lcwugp] {
    padding: var(--the-unit-3x) 0 var(--the-unit-2x);
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-1x);
}

.confirmed-name[b-4jz2lcwugp] {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.confirmed-time[b-4jz2lcwugp] {
    font-size: 1.1em;
    margin: 0;
}

.confirmed-worker[b-4jz2lcwugp] {
    color: var(--the-hue-neutral-6);
    margin: 0;
}

.booking-conflicts[b-4jz2lcwugp] {
    padding: var(--the-unit-2x);
    background: var(--the-hue-warning-0);
    border: 1px solid var(--the-hue-warning-3);
    border-radius: var(--the-unit-1x);
    color: var(--the-hue-warning-6);
}

.booking-conflicts__lead[b-4jz2lcwugp] {
    margin: 0;
    font-weight: bold;
}

.booking-conflicts__list[b-4jz2lcwugp] {
    margin: var(--the-unit-half) 0 0;
    padding-left: var(--the-unit-3x);
}

.booking-conflicts__extend[b-4jz2lcwugp] {
    display: flex;
    align-items: baseline;
    gap: var(--the-unit-1x);
    margin-top: var(--the-unit-2x);
    cursor: pointer;
}

.tell-worker[b-4jz2lcwugp] {
    display: flex;
    align-items: baseline;
    gap: var(--the-unit-1x);
    margin-top: var(--the-unit-1x);
    cursor: pointer;
}

.reschedule-context[b-4jz2lcwugp] {
    margin: 0;
    padding: var(--the-unit-1x) var(--the-unit-2x);
    background: var(--the-hue-info-0);
    border-left: var(--the-unit-half) solid var(--the-hue-info-3);
    color: var(--the-hue-info-6);
}
/* /Components/Scheduling/QuickBookingPage.razor.rz.scp.css */
.quick-booking__when[b-6y3e8hsasa] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-1x);
}

.quick-booking__date[b-6y3e8hsasa] {
    width: calc(var(--the-unit) * 30);
}

.quick-booking-select[b-6y3e8hsasa] {
    padding: 0 var(--the-unit-1x);
    height: var(--the-unit-fullrow);
    border: 1px solid var(--the-hue-neutral-3);
    border-radius: 3px;
    background: var(--the-hue-neutral-0);
    cursor: pointer;
    width: 100%;
}

select.quick-booking__part[b-6y3e8hsasa] {
    width: auto;
}

.quick-booking__inline[b-6y3e8hsasa] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.quick-booking__derived[b-6y3e8hsasa] {
    color: var(--the-hue-neutral-5);
}

.quick-booking__hint[b-6y3e8hsasa] {
    color: var(--the-hue-neutral-5);
}

.booking-conflicts[b-6y3e8hsasa] {
    padding: var(--the-unit-2x);
    background: var(--the-hue-warning-0);
    border: 1px solid var(--the-hue-warning-3);
    border-radius: var(--the-unit-1x);
    color: var(--the-hue-warning-6);
}

.booking-conflicts__lead[b-6y3e8hsasa] {
    margin: 0;
    font-weight: bold;
}

.booking-conflicts__list[b-6y3e8hsasa] {
    margin: var(--the-unit-half) 0 0;
    padding-left: var(--the-unit-3x);
}
/* /Components/Scheduling/ResponsiveColumn.razor.rz.scp.css */
/* when the page is unpadded, give this part of it padding */
@media screen and (max-width: 1219px) {
    @media (orientation: portrait), (max-width: 719px) {
        .rc[b-lcflsqg0f5] {
            padding: 0 var(--the-unit-1x);
        }
    }
}

.rc > *:first-child[b-lcflsqg0f5] {
    margin-top: 0;
}

.rc > *:last-child[b-lcflsqg0f5] {
    margin-bottom: 0;
}
/* /Components/Scheduling/SelectPreciseWindow.razor.rz.scp.css */
hr[b-apbj6jufzp] {
    height: 3px;
    margin: 13.5px 0;
    background: var(--the-hue-chrome-2);
    border-width: 0;
}

h2[b-apbj6jufzp] {
    line-height: var(--the-unit-fullrow);
    margin: var(--the-unit-fullrow) 0;
}

h3[b-apbj6jufzp] {
    line-height: var(--the-unit-fullrow);
    margin-bottom: 0;
    margin-top: var(--the-unit-fullrow);
}

.timeslot[b-apbj6jufzp] >  * {
    width: 100%;
}

.selected-time-window[b-apbj6jufzp] {
    padding: var(--the-unit-2x);
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid;
    /*color: var(--the-hue-neutral-6);*/
    background-color: var(--the-hue-success-1);
    border-color: var(--the-hue-success-3);
    color: var(--the-hue-success-6);
}

.selected-time-window[b-apbj6jufzp]  .the-icon {
    width: var(--the-unit-smallfield);
    height: var(--the-unit-smallfield);
    padding: 4px;
    cursor: pointer;
}

.the-notification-view[b-apbj6jufzp]  a {
    vertical-align: middle;
}

.the-notification-view[b-apbj6jufzp]  .the-feather-icon {
    height: 24px;
    margin-right: 0;
}

.header[b-apbj6jufzp] {
    height: var(--the-unit-fullfield);
    display: flex;
}

.message[b-apbj6jufzp] {
    font-size: 1.25rem;
}

.details[b-apbj6jufzp] {
    margin: 0;
    height: var(--the-unit-smallrow);
    white-space: nowrap;
    display: flex;
}

.time[b-apbj6jufzp] {
    display: inline-block;
    text-align: center;
    min-width: 160px;
    line-height: var(--the-unit-smallrow);
}

.actions[b-apbj6jufzp] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
}

.the-notification-view[b-apbj6jufzp] {
    padding: var(--the-unit-2x);
}
/* /Components/Scheduling/SelectWindow.razor.rz.scp.css */
hr[b-ms20ik9i7r] {
    height: 3px;
    margin: 13.5px 0;
    background: var(--the-hue-chrome-2);
    border-width: 0;
}

h2[b-ms20ik9i7r] {
    line-height: var(--the-unit-fullrow);
    margin: var(--the-unit-fullrow) 0;
}

h3[b-ms20ik9i7r] {
    line-height: var(--the-unit-fullrow);
    margin-bottom: 0;
    margin-top: var(--the-unit-fullrow);
}

.timeslot[b-ms20ik9i7r] >  * {
    width: 100%;
}

.selected-time-window[b-ms20ik9i7r] {
    padding: var(--the-unit-2x);
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid;
    /*color: var(--the-hue-neutral-6);*/
    background-color: var(--the-hue-success-1);
    border-color: var(--the-hue-success-3);
    color: var(--the-hue-success-6);
}

.selected-time-window[b-ms20ik9i7r]  .the-icon {
    width: var(--the-unit-smallfield);
    height: var(--the-unit-smallfield);
    padding: 4px;
    cursor: pointer;
}

.the-notification-view[b-ms20ik9i7r]  a {
    vertical-align: middle;
}

.the-notification-view[b-ms20ik9i7r]  .the-feather-icon {
    height: 24px;
    margin-right: 0;
}

.header[b-ms20ik9i7r] {
    height: var(--the-unit-fullfield);
    display: flex;
}

.message[b-ms20ik9i7r] {
    font-size: 1.25rem;
}

.details[b-ms20ik9i7r] {
    margin: 0;
    height: var(--the-unit-smallrow);
    white-space: nowrap;
    display: flex;
}

.time[b-ms20ik9i7r] {
    display: inline-block;
    text-align: center;
    min-width: 160px;
    line-height: var(--the-unit-smallrow);
}

.actions[b-ms20ik9i7r] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
}

.the-notification-view[b-ms20ik9i7r] {
    padding: var(--the-unit-2x);
}
/* /Components/Scheduling/VerticalField.razor.rz.scp.css */
.f[b-dk5vvoegdd] {
    min-height: calc(var(--the-unit) * 12);
}

.f > label[b-dk5vvoegdd] {
    line-height: var(--the-unit-fullrow);
    margin-bottom: 2px;
    display: block;
}

.f[b-dk5vvoegdd]  p {
    margin: 0;
    line-height: var(--the-unit-fullrow);
    font-weight: bold;
}
/* /Components/TestView.razor.rz.scp.css */
.layout[b-re4hl2vhpo] {
    margin-top: var(--the-unit-4x);
    color: var(--the-hue-debug-6);
    background: var(--the-hue-debug-0);
    border: 2px solid var(--the-hue-debug-4);
    border-radius: var(--the-box-radius);
    box-shadow: var(--the-shadow-0);
}

.header[b-re4hl2vhpo] {
    height: var(--the-unit-fullrow);
    display: flex;
    align-items: center;
    padding-left: var(--the-unit-2x);
    background: var(--the-hue-debug-1);
    color: var(--the-hue-debug-6);
    border-bottom: 1px solid var(--the-hue-debug-3);
    font-weight: 600;
    font-size: var(--the-fs-fullrow);
}

.layout[b-re4hl2vhpo] >  *:last-child {
    padding: var(--the-unit-1x);
}
/* /Pages/Admin/Index.razor.rz.scp.css */
.layout[b-5pl95qksdo] {
    display: flex;
    flex-direction: column;
    gap: var(--the-unit-fullrow);
}

.layout[b-5pl95qksdo] >  * {
    min-height: calc(var(--the-unit) * 30);
}
/* /Pages/Embed/PremisesWidget.razor.rz.scp.css */
.widget[b-f2mvbopmj9] {
    border: 2px solid var(--the-hue-action-3);
    background: var(--the-hue-action-1);
    color: var(--the-hue-action-6);
    padding: var(--the-unit-1x);
    margin-top: var(--the-unit-1x);
    margin-right: var(--the-unit-2x);
    border-radius: var(--the-box-radius);
    user-select: none;
}

header[b-f2mvbopmj9] {
    font-weight: bold;
    font-size: 24px;
}
/* /Pages/Index.razor.rz.scp.css */
.layout[b-m424f1cgx5] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;

    & > :first-child {
        grid-column: 1/3;
        grid-row: 1/3;
    }

    &[b-m424f1cgx5] >  :last-child {
        grid-column: 2/3;
        grid-row: 2/3;
        box-shadow: var(--the-shadow-1);
        margin-bottom: 2px;
    }
}

.desk[b-m424f1cgx5] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.actors[b-m424f1cgx5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.reseed[b-m424f1cgx5] {
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.reseed th[b-m424f1cgx5], .reseed td[b-m424f1cgx5] {
    border: 1px solid var(--border, #ccc);
    padding: 0.2rem 0.6rem;
    text-align: right;
}

.reseed th:first-child[b-m424f1cgx5],
.reseed td:first-child[b-m424f1cgx5] {
    text-align: left;
}

.reseed tfoot td[b-m424f1cgx5] {
    font-weight: bold;
}
/* /Pages/Manage/Index.razor.rz.scp.css */
.day-header[b-94z01334pi] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: 0 var(--the-unit-2x);
}

/* the panel header is a fixed-height bar, so the heading gives way rather than growing it */
.day-header__heading[b-94z01334pi] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the framework's picker box is width:100%, so this wrapper is what sizes it. without a
   width here it claims the text input's intrinsic width and squashes the heading beside it */
.day-header__picker[b-94z01334pi] {
    flex: 0 0 auto;
    width: calc(var(--the-unit) * 30);
    margin-left: auto;
}

.day-empty[b-94z01334pi] {
    padding: var(--the-unit-2x);
}

.day-table[b-94z01334pi] {
    width: 100%;
    border-collapse: collapse;
}

.day-table th[b-94z01334pi] {
    text-align: left;
    white-space: nowrap;
    padding: var(--the-unit) var(--the-unit-2x);
}

.day-table td[b-94z01334pi] {
    vertical-align: top;
    white-space: nowrap;
    padding: var(--the-unit) var(--the-unit-2x);
}

/* the totals are the day's arithmetic, not more bookings, so they read as an aside */
.day-table tfoot[b-94z01334pi] {
    font-style: italic;
    color: var(--the-hue-neutral-5);
}

/* the totals sit under the bookings, separated from them rather than boxed in */
.day-table tfoot tr:first-child td[b-94z01334pi] {
    padding-top: var(--the-unit-2x);
    border-top: 1px solid var(--the-hue-neutral-2);
}

/* the bookings read as text rather than as links, but stay underlined so they are still findable */
.day-table a[b-94z01334pi],
.day-card__booking[b-94z01334pi] {
    color: inherit;
}

/* the cards are the phone rendering of the same day, so they stay out of the way until then */
.day-cards[b-94z01334pi] {
    display: none;
}

/* a column per staff member overflows a phone once there are four of them, so the day
   reflows into two cards per row with the rest wrapping below */
@media (max-width: 719px) {
    .day-table[b-94z01334pi] {
        display: none;
    }

    /* the picker shows the date, so the heading need not repeat it in the narrow header */
    .day-header__date[b-94z01334pi] {
        display: none;
    }

    .day-cards[b-94z01334pi] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--the-unit-2x);
        padding: var(--the-unit) var(--the-unit-2x);
    }

    .day-card__worker[b-94z01334pi] {
        font-weight: 600;
    }

    .day-card__booking[b-94z01334pi] {
        display: block;
    }

    .day-card__totals[b-94z01334pi] {
        margin-top: var(--the-unit);
        padding-top: var(--the-unit);
        border-top: 1px solid var(--the-hue-neutral-2);
        color: var(--the-hue-neutral-5);
        font-style: italic;
    }

    .day-card__shift-end[b-94z01334pi] {
        display: block;
    }
}

.staffing-header[b-94z01334pi] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.staffing-header__actions[b-94z01334pi] {
    margin-left: auto;
}

.staffing-header h3[b-94z01334pi] {
    margin-top: var(--the-unit-1x);
    margin-left: var(--the-unit-1x);
}

/* /Pages/Manage/Roster/Calendar.razor.rz.scp.css */
.roster-filters[b-n75jkxssmn] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    margin-bottom: var(--the-unit-1x);
}

.roster-filter-item[b-n75jkxssmn] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-1x);
    white-space: nowrap;
    cursor: pointer;
}

.roster-filters__actions[b-n75jkxssmn] {
    margin-left: auto;
}
/* /Pages/Manage/Roster/Index.razor.rz.scp.css */
.roster-filters[b-eornnq77ex] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    margin-bottom: var(--the-unit-1x);
}

.roster-filter-item[b-eornnq77ex] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-1x);
    white-space: nowrap;
    cursor: pointer;
}

.roster-filters__actions[b-eornnq77ex] {
    margin-left: auto;
}

.week-header[b-eornnq77ex] {
    padding: 0 var(--the-unit-2x);
}

.day-header[b-eornnq77ex] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: 0 var(--the-unit-2x);
}

.day-header__actions[b-eornnq77ex] {
    margin-left: auto;
}

.no-shifts[b-eornnq77ex] {
    padding: var(--the-unit-2x);
}

.shift-row__worker[b-eornnq77ex] {
    font-weight: bold;
    white-space: nowrap;
}

.roster-day + .roster-day[b-eornnq77ex] {
    margin-top: var(--the-unit-2x);
}

.roster-day__heading[b-eornnq77ex] {
/*    margin: 0 0 var(--the-unit-1x) 0;
    padding: 0 var(--the-unit-2x);*/
    height: var(--the-unit-fullrow);
}

.shift-row[b-eornnq77ex] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    gap: 8px;
}

.shift-row__worker[b-eornnq77ex] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ActionLink renders the anchor itself, so it sits outside this component's scope */
.shift-row__worker[b-eornnq77ex]  a {
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
}

.shift-row__time[b-eornnq77ex] {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--muted, #555);
}

.shift-row__booked[b-eornnq77ex] {
    flex: 0 0 auto;
    text-align: right;
    min-width: 70px;
}

.reception-badge[b-eornnq77ex] {
    background: var(--the-hue-action-6);
    color: var(--the-hue-action-1);
    border-radius: 999px;
    padding: 2px var(--the-unit-1x);
    font-size: 0.85em;
    white-space: nowrap;
}
/* /Pages/Public/ClaimPromo.razor.rz.scp.css */
.promo-list[b-cn8olujggk] {
    list-style: none;
    padding: 0;
}

.promo-list-item[b-cn8olujggk] {
    text-box: trim-both;
}

.promo-list-item[b-cn8olujggk]  .the-action-button {
    padding-left: 0;
}
/* /Pages/Public/ListBookings.razor.rz.scp.css */
td[b-mn119cine9] {
    padding: 0 var(--the-unit-2x);
    white-space: nowrap;
}
/* /Pages/Reception/Index.razor.rz.scp.css */
.desk-layout[b-ymciksj5th] {
    display: flex;
    align-items: flex-start;
    gap: var(--the-unit-4x);
    font-family: var(--the-ff-content);
    font-weight: var(--the-fw-content);
}

.desk-layout__main[b-ymciksj5th] {
    flex: 1 1 auto;
    min-width: 0;
}

/* the counter screen divides the window rather than growing past it: the board keeps whatever is left
   below the controls and scrolls inside itself, so the names and the log stay where the eye left them */
@media (min-width: 1200px) {
    .desk-layout[b-ymciksj5th] {
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }

    /* the time view fills this column exactly and scrolls inside the board; the focus view is a plain
       stack that can outrun it, so the column keeps a scroller of its own for that case */
    .desk-layout__main[b-ymciksj5th] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }

    /* the panel's own grid already gives its content row whatever the header leaves; these pass the
       height down to it, and the flex column inside is what the board stretches in */
    .desk-layout__main[b-ymciksj5th]  .the-section-panel-frame {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .desk-layout__main[b-ymciksj5th]  .the-section-panel {
        flex: 1 1 auto;
        min-height: 0;
    }

    .desk-layout__main[b-ymciksj5th]  .the-section-panel__content {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }

    .desk-layout__log[b-ymciksj5th] {
        min-height: 0;
        overflow-y: auto;
    }
}

/* the desk is a counter machine at 1366 wide, which has the room for a column beside the day; the log
   is the part that gives way, because the day view is what the screen is for */
.desk-layout__log[b-ymciksj5th] {
    display: none;
    flex: 0 0 calc(var(--the-unit) * 62);
}

@media (min-width: 1200px) {
    .desk-layout__log[b-ymciksj5th] {
        display: block;
    }
}

.desk-controls[b-ymciksj5th] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    margin-bottom: var(--the-unit-1x);
    flex-wrap: wrap;
}

/* the page's heading rides the control line rather than a band of its own: on a counter screen the
   height it would take is height the day loses */
.desk-controls__title[b-ymciksj5th] {
    margin: 0 var(--the-unit-2x) 0 0;
    font-size: 1.5em;
}

/* the command bars here are inline controls, not a page-wide bar, so they must not stretch */
.desk-controls[b-ymciksj5th]  .the-command-bar {
    flex: 0 0 auto;
    width: auto;
}

.desk-controls[b-ymciksj5th]  .the-command-bar__buttons {
    justify-content: flex-start;
}

/* set off from the view toggle, so the date controls read as their own group */
.desk-controls__date[b-ymciksj5th] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-1x);
    margin-left: var(--the-unit-4x);
}

/* fixed widths so the row doesn't shuffle as the words come and go */
.desk-controls__relative[b-ymciksj5th] {
    min-width: calc(var(--the-unit) * 14);
    text-align: right;
}

.desk-controls__weekday[b-ymciksj5th] {
    min-width: calc(var(--the-unit) * 16);
    font-weight: 600;
}

/* the framework's picker box is width:100%, so this wrapper is what sizes it */
.desk-controls__picker[b-ymciksj5th] {
    flex: 0 0 auto;
    width: calc(var(--the-unit) * 30);
    margin-right: var(--the-unit-1x);
}


.unlock-hint[b-ymciksj5th] {
    color: var(--muted, #555);
    font-size: 0.9em;
}

.unlock-failed[b-ymciksj5th] {
    color: var(--the-hue-error-2, #b00020);
    font-weight: 600;
}

.unlock-form[b-ymciksj5th] {
    display: flex;
    gap: var(--the-unit-1x);
    align-items: center;
    margin-top: var(--the-unit-2x);
}

.unlock-form input[b-ymciksj5th] {
    font-size: 1.25em;
    letter-spacing: 0.15em;
    max-width: 12rem;
}

.unlock-form button[b-ymciksj5th] {
    font: inherit;
    padding: var(--the-unit-1x) var(--the-unit-4x);
    border: none;
    border-radius: var(--the-box-radius);
    background: var(--the-hue-action-1);
    color: var(--the-hue-action-6);
    cursor: pointer;
}

.unlock-form button:hover[b-ymciksj5th] {
    background: var(--the-hue-action-2);
}
/* /Pages/Staff/Index.razor.rz.scp.css */
.staff-content[b-d6dz15u0na] {
    overflow-y: auto;
}

.set-end-time[b-d6dz15u0na] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: var(--the-unit) 0;
}

.left-actions[b-d6dz15u0na]  .the-command-bar__buttons {
    justify-content: flex-start;
}

.current-shift[b-d6dz15u0na] {
    padding: var(--the-unit) 0;
}

.current-shift__times[b-d6dz15u0na],
.current-shift__break[b-d6dz15u0na] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: var(--the-unit) 0;
}

.current-shift__break--active[b-d6dz15u0na] {
    color: var(--the-hue-warning-6);
}
/*
td {
    border: 1px solid black;
    padding: 10px;
    position: relative;
    width: 1%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

tr[b-d6dz15u0na] {
    height: var(--the-unit-2x);
    /*font-size: var(--the-fs-smallrow);*/
}

.current-shift__meta[b-d6dz15u0na] {
    white-space: nowrap;
    font-size: var(--the-fs-fullrow);
}

h3[b-d6dz15u0na] {
    margin-top: var(--the-unit-1x);
    margin-left: var(--the-unit-1x);
}

.upcoming-shifts-header[b-d6dz15u0na] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
}

.upcoming-shifts-header__actions[b-d6dz15u0na] {
    margin-left: auto;
}
/* /Pages/Staff/Roster/Calendar.razor.rz.scp.css */
.roster-filters[b-vmal1bqvfu] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    margin-bottom: var(--the-unit-1x);
}

.roster-filters__actions[b-vmal1bqvfu] {
    margin-left: auto;
}
/* /Pages/Staff/Roster/Index.razor.rz.scp.css */
.roster-filters[b-cp1c9dzk6z] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    margin-bottom: var(--the-unit-1x);
}

.roster-filters__actions[b-cp1c9dzk6z] {
    margin-left: auto;
}

.week-header[b-cp1c9dzk6z] {
    padding: 0 var(--the-unit-2x);
}

.day-header[b-cp1c9dzk6z] {
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    padding: 0 var(--the-unit-2x);
}

.day-header__actions[b-cp1c9dzk6z] {
    margin-left: auto;
}

.roster-day + .roster-day[b-cp1c9dzk6z] {
    margin-top: var(--the-unit-2x);
}

.shift-row[b-cp1c9dzk6z] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    gap: 8px;
}

.shift-row__time[b-cp1c9dzk6z] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* ActionLink renders the anchor itself, so it sits outside this component's scope */
.shift-row__time[b-cp1c9dzk6z]  a {
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
}

.shift-row__booked[b-cp1c9dzk6z] {
    flex: 0 0 auto;
    text-align: right;
    min-width: 70px;
}

.reception-badge[b-cp1c9dzk6z] {
    background: var(--the-hue-action-6);
    color: var(--the-hue-action-1);
    border-radius: 999px;
    padding: 2px var(--the-unit-1x);
    font-size: 0.85em;
    white-space: nowrap;
}
/* /theme.css */