@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade {
    animation-duration: 0.75s;
    animation-delay: 0.5s;
    animation-name: fadeIn;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: backwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out {
    animation-duration: 0.5s;
    animation-name: fadeOut;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: backwards;
}

@keyframes rollDown {
    from {
        max-height: 0;
        opacity: 0;
/*        transform: translateY(-20px);*/
    }
    
    to {
        max-height: 500px;
        opacity: 1;
/*        transform: translateY(0);*/
    }
}

.roll-down {
    animation-duration: 0.8s;
    animation-name: rollDown;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    overflow: hidden;
}

.delay-1 {
    animation-delay: 0.6s;
}

.delay-2 {
    animation-delay: 0.7s;
}

.delay-3 {
    animation-delay: 0.8s;
}

.delay-4 {
    animation-delay: 0.9s;
}

.delay-5 {
    animation-delay: 1s;
}

.delay-6 {
    animation-delay: 1.1s;
}

.delay-7 {
    animation-delay: 1.2s;
}

.delay-8 {
    animation-delay: 1.3s;
}

.delay-9 {
    animation-delay: 1.4s;
}

.delay-10 {
    animation-delay: 1.5s;
}

.centered-element {
    display: block;
    margin: 0 auto;
}

.centering-container {
    align-items: center;
    display: flex;
    width: 100%;
    height: calc(100vh - var(--delve-shim-height, 0px));
}

.centering-container-inapp {
    align-items: center;
    display: flex;
    width: 100%;
    height: calc(calc(100vh - var(--delve-shim-height, 0px)) - 80px);
}

.text-response {
    font-size: 1.2em;
}

    .text-response ol,
    .text-response ul {
        padding-left: 20px;
        margin-bottom: 1em;
    }

        .text-response ol li,
        .text-response ul li {
            margin-bottom: 0.5em;
            /* the markdown library is suppressing the bullet point  */
            list-style-type: disc;
        }

        .text-response ol li {
            list-style-type: decimal;
        }

    .text-response p {
        margin-bottom: 1em;
    }

    .text-response p:last-child {
        margin-bottom: 0;
    }

.text-response table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
    font-size: 0.875rem;
}

.text-response th,
.text-response td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
}

.text-response th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

.text-response tr:nth-child(even) {
    background-color: var(--mud-palette-background-gray);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    #blazor-error-ui .reload {
        color: #0b5ed7;
        cursor: pointer;
        margin-left: 0.5rem;
        text-decoration: underline;
    }

/* Time entry rows that came from the legacy CSV upload path (no MiterTimesheetId).
   Tinted with the MudBlazor "info" hue so an admin can pick them out when reviewing
   alongside Miter API-sourced rows. The :hover rule has higher specificity than
   MudTable's default hover so the hover affordance stays visible. */
.time-entry-csv-row {
    background-color: rgba(33, 150, 243, 0.10);
}

.mud-table.mud-hover .mud-table-body .mud-table-row.time-entry-csv-row:hover {
    background-color: rgba(33, 150, 243, 0.18);
}

/* Timeline schedule bars (TimelineCard.razor).
   The bar's outer wrapper is a CSS grid item whose grid-column span encodes the
   shift's date range. MudTooltip wraps its child in a div whose default display
   is inline-block, which collapsed the colored bar to its text width and made
   bars look wrong (Fulcrum #204). Force every descendant of the bar cell to
   fill the grid track so the visible bar honors the date span (and zoom). */
.nsti-timeline-bar-cell,
.nsti-timeline-bar-cell > *,
.nsti-timeline-bar-cell > * > * {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.nsti-timeline-bar {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Opt-in helper for hosting a MudTooltip inside a CSS-grid item (Fulcrum #254).
   MudTooltip wraps its child in a div whose default display is inline-block,
   which collapses any grid-positioned child to its text width and ignores the
   grid-column span (the #204 schedule-bar bug was one instance of this).
   Apply this class to the grid item that DIRECTLY contains a <MudTooltip>; the
   wrapper then participates in grid layout transparently. Prefer the more
   specific .nsti-timeline-bar-cell rule above for the timeline; use this when
   you need the pattern elsewhere and don't want to invent another bespoke class.
   We deliberately did NOT make this a global rule on .mud-tooltip-root because
   MudBlazor's positioning JS reads the wrapper's bounding box as the anchor;
   display: contents removes it from layout, which can shift tooltip placement
   for tooltips outside a grid. Keep this opt-in. */
.nsti-grid-tooltip-host {
    display: contents;
}

/* Date-range pickers on the schedule landing page.

   These carried `Style="max-width: 140px"` directly on the MudDatePicker. That
   style lands on the picker ROOT, and the calendar popover is rendered inside
   that root — so the 140px clipped the calendar to roughly three of seven day
   columns. Wednesday through Saturday were unreachable and the "next month"
   arrow sat off-screen, on the first control of the front page.

   Constrain the input and nothing else. The popover is free to be as wide as a
   calendar needs to be. */
.nsti-range-picker .mud-input-control {
    max-width: 150px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }