/* /Components/Account/Login.razor.rz.scp.css */
.login-panel[b-y24k5lr6oz] {
    max-width: 24rem;
    margin: 3rem auto;
}

.login-intro[b-y24k5lr6oz] {
    color: var(--vat-text-muted);
    margin-bottom: 1.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-t48ibvazui] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.top-row[b-t48ibvazui] {
    height: var(--vat-header-height);
    flex: 0 0 var(--vat-header-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
    background-color: var(--vat-header-bg);
    border-bottom: 1px solid var(--vat-header-border);
}

.brand[b-t48ibvazui] {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--vat-text);
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover[b-t48ibvazui] {
    color: var(--vat-accent);
}

.header-actions[b-t48ibvazui] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.user-name[b-t48ibvazui] {
    color: var(--vat-text-muted);
    font-size: 0.875rem;
}

.header-actions form[b-t48ibvazui] {
    margin: 0;
}

.link-button[b-t48ibvazui] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--vat-accent);
    cursor: pointer;
}

.link-button:hover[b-t48ibvazui] {
    text-decoration: underline;
}

/* The header is fixed and main takes the rest, so the table can own its own scrolling. */
main[b-t48ibvazui] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 640.98px) {
    .top-row[b-t48ibvazui] {
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .brand[b-t48ibvazui] {
        display: none;
    }
}

#blazor-error-ui[b-t48ibvazui] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-t48ibvazui] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-yakdurs2mp] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-yakdurs2mp] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-yakdurs2mp] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-yakdurs2mp] {
    font-size: 1.1rem;
}

.bi[b-yakdurs2mp] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-yakdurs2mp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-yakdurs2mp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-yakdurs2mp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-yakdurs2mp] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-yakdurs2mp] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-yakdurs2mp] {
        padding-bottom: 1rem;
    }

    .nav-item[b-yakdurs2mp]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-yakdurs2mp]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-yakdurs2mp]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-yakdurs2mp] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-yakdurs2mp] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-yakdurs2mp] {
        display: none;
    }

    .nav-scrollable[b-yakdurs2mp] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dx7adzm42t],
.components-reconnect-repeated-attempt-visible[b-dx7adzm42t],
.components-reconnect-failed-visible[b-dx7adzm42t],
.components-pause-visible[b-dx7adzm42t],
.components-resume-failed-visible[b-dx7adzm42t],
.components-rejoining-animation[b-dx7adzm42t] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-retrying[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-failed[b-dx7adzm42t],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dx7adzm42t] {
    display: block;
}


#components-reconnect-modal[b-dx7adzm42t] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dx7adzm42t 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dx7adzm42t 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dx7adzm42t 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dx7adzm42t]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dx7adzm42t 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dx7adzm42t {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dx7adzm42t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dx7adzm42t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dx7adzm42t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dx7adzm42t] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dx7adzm42t] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dx7adzm42t] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dx7adzm42t] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-dx7adzm42t] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dx7adzm42t] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dx7adzm42t 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dx7adzm42t] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dx7adzm42t {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/VehicleSearchBox.razor.rz.scp.css */
.search-box[b-6vll5d8wuv] {
    flex: 1 1 auto;
    max-width: 28rem;
}

.search-box input[b-6vll5d8wuv] {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    color: var(--vat-text);
    background-color: var(--vat-page-bg);
    border: 1px solid var(--vat-header-border);
    border-radius: 0.375rem;
}

.search-box input[b-6vll5d8wuv]::placeholder {
    color: var(--vat-text-muted);
}

.search-box input:focus[b-6vll5d8wuv] {
    outline: none;
    border-color: var(--vat-accent);
    box-shadow: 0 0 0 0.2rem rgba(27, 110, 194, 0.25);
}
/* /Components/Vehicles/VehicleTable.razor.rz.scp.css */
/*
    The scroll container is sized to whatever is left under the layout header, so it is the element
    that scrolls rather than the page. That is what lets the table head stay pinned to the bottom
    edge of the header: the head is sticky at the top of this box, and this box starts where the
    header ends.
*/
.vehicle-table-scroll[b-xa7i5nwzoo] {
    height: calc(100vh - var(--vat-header-height) - var(--vat-status-height));
    overflow: auto;
    background-color: var(--vat-page-bg);
}

.vehicle-table-scroll:focus-visible[b-xa7i5nwzoo] {
    outline: 2px solid var(--vat-accent);
    outline-offset: -2px;
}

.vehicle-table[b-xa7i5nwzoo] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    font-size: 0.8125rem;
    color: var(--vat-text);
}

.vehicle-table th:first-child[b-xa7i5nwzoo],
.vehicle-table td:first-child[b-xa7i5nwzoo] {
    padding-left: 1.25rem;
}

.vehicle-table thead th[b-xa7i5nwzoo] {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 2.25rem;
    padding: 0 0.6rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vat-text);
    background-color: var(--vat-header-bg);
    /* Sticky cells cannot use a collapsed border, so the rule is drawn as a shadow instead. */
    box-shadow: inset 0 -1px 0 var(--vat-header-border);
}

.vehicle-table td[b-xa7i5nwzoo] {
    height: 36px;
    padding: 0 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--vat-row-border);
    /*
        Height is a minimum, not a fixed size: an opened note makes its row taller. The cells align
        to the top so the rest of the row stays where it was instead of drifting down the middle of
        it, and the line height keeps their single line of text on the pixel it sat on before.
    */
    vertical-align: top;
    line-height: 36px;
}

.vehicle-table tbody tr:hover[b-xa7i5nwzoo] {
    background-color: var(--vat-row-hover);
}

/* Disposed vehicles stay visible, as they are in the spreadsheet, but read as inactive. */
.vehicle-table tbody tr.is-disposed td[b-xa7i5nwzoo] {
    color: var(--vat-text-muted);
    font-style: italic;
}

.vehicle-table td.numeric[b-xa7i5nwzoo] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.is-placeholder td[b-xa7i5nwzoo] {
    padding: 0 0.6rem;
}

.placeholder-bar[b-xa7i5nwzoo] {
    display: block;
    height: 0.75rem;
    width: 40%;
    border-radius: 0.25rem;
    background-color: var(--vat-placeholder);
}

.is-empty td[b-xa7i5nwzoo] {
    padding: 1.5rem 0.6rem;
    line-height: normal;
    color: var(--vat-text-muted);
    text-align: center;
    white-space: normal;
}

.vehicle-table-status[b-xa7i5nwzoo] {
    height: var(--vat-status-height);
    /* Three tracks rather than a row, so the middle one is the middle of the bar. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    font-size: 0.75rem;
    color: var(--vat-text-muted);
    background-color: var(--vat-header-bg);
    border-top: 1px solid var(--vat-header-border);
}

/*
    A heading is a button so that sorting works from the keyboard as well as the pointer. It fills
    the cell and inherits its type, which leaves the heading text exactly where it was.
*/
.col-sort[b-xa7i5nwzoo] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.col-sort:focus-visible[b-xa7i5nwzoo] {
    outline: 2px solid var(--vat-accent);
    outline-offset: 0.15rem;
}

.sort-mark[b-xa7i5nwzoo] {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--vat-accent);
}

/* A faint mark under the pointer, so an unsorted heading still says it can be sorted. */
.vehicle-table thead th:hover .sort-mark:empty[b-xa7i5nwzoo]::after {
    content: "\25b2";
    color: var(--vat-text-muted);
    opacity: 0.55;
}

/*
    An editable cell holds its input all the time, drawn flat so a row still reads as a line of text
    and only takes on its box under the pointer. The negative margin pulls the box out into the
    cell's padding, which is what keeps the text inside it on the same pixel as the text of a
    read-only cell: nothing shifts when the box appears.
*/
.cell-editor[b-xa7i5nwzoo] {
    display: block;
    height: 1.75rem;
    width: calc(100% + 0.5rem + 2px);
    margin: 4px calc(-0.25rem - 1px) 0;
    padding: 0 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    background-color: transparent;
    color: inherit;
    /* Inherited whole, so a disposed row's muted italic carries into the box as well. */
    font: inherit;
    /* Set back after the shorthand, which would otherwise bring the cell's 36px line height in. */
    line-height: 1.625rem;
    text-overflow: ellipsis;
    outline: none;
}

.vehicle-table td.numeric .cell-editor[b-xa7i5nwzoo] {
    text-align: right;
}

.vehicle-table.is-editable td:hover .cell-editor[b-xa7i5nwzoo] {
    border-color: var(--vat-header-border);
    background-color: var(--vat-page-bg);
}

.cell-editor:focus[b-xa7i5nwzoo] {
    border-color: var(--vat-accent);
    background-color: var(--vat-page-bg);
    box-shadow: 0 0 0 1px var(--vat-accent);
}

/*
    Notes are the one column with more text than its width, so the cell is a textarea and the column
    is wide enough for the longest note that reads on one line. Longer notes are cut off here only:
    what is stored is always the whole note.
*/
.note-editor[b-xa7i5nwzoo] {
    resize: none;
    overflow: hidden;
    white-space: pre;
    line-height: 1.625rem;
}

/*
    Clicking into a note opens the whole note, and the row grows with it: the box stays in the flow,
    so everything below is pushed down instead of being covered up. It happens to whoever is
    reading, signed in or not.

    This is the one place a row is not RowHeightPixels tall. Virtualize measures the list from that
    one number, so while a note is open the scroll range runs long by whatever the note added, and
    it may render a row fewer at the bottom edge. That lasts only as long as the note is open, and
    it is the price of not hiding the row underneath.
*/
.note-editor:focus[b-xa7i5nwzoo] {
    height: auto;
    min-height: 1.75rem;
    /* Nothing in the register comes near this; it is here so a note can never run off the screen. */
    max-height: 20rem;
    padding: 0.35rem 0.25rem;
    overflow: auto;
    white-space: pre-wrap;
    line-height: 1.4;
    /* Sizes the box to the note where it is supported, which is most of the time. */
    field-sizing: content;
}

/* Everywhere else, a row deep enough for the notes this register holds, scrolling past that. */
@supports not (field-sizing: content) {
    .note-editor:focus[b-xa7i5nwzoo] {
        height: 8rem;
    }
}

/* A refused edit keeps its cell marked until the next one, so the message in the status bar has
   something to point at. */
.vehicle-table td.cell-rejected .cell-editor[b-xa7i5nwzoo] {
    border-color: var(--vat-danger);
    background-color: var(--vat-danger-bg);
}

.status-count[b-xa7i5nwzoo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.status-error[b-xa7i5nwzoo] {
    color: var(--vat-danger);
}

.status-notice[b-xa7i5nwzoo] {
    justify-self: center;
    white-space: nowrap;
}

.export-link[b-xa7i5nwzoo] {
    justify-self: end;
    color: var(--vat-accent);
    white-space: nowrap;
    text-decoration: none;
}

.export-link:hover[b-xa7i5nwzoo],
.export-link:focus-visible[b-xa7i5nwzoo] {
    text-decoration: underline;
}

/*
    Fixed layout needs every column measured once, on the head. The filler is deliberately left
    without a width: a fixed table hands its spare space to the columns that have none, so this one
    absorbs it all and the measured columns stay the width they were given on any size of window.
*/
.col-id[b-xa7i5nwzoo] { width: 5.75rem; }
.col-year[b-xa7i5nwzoo] { width: 4.5rem; }
.col-make[b-xa7i5nwzoo] { width: 12rem; }
.col-license[b-xa7i5nwzoo] { width: 6.5rem; }
.col-serial[b-xa7i5nwzoo] { width: 12rem; }
.col-asset[b-xa7i5nwzoo] { width: 9rem; }
.col-type[b-xa7i5nwzoo] { width: 8.5rem; }
.col-use[b-xa7i5nwzoo] { width: 5.5rem; }
.col-tonnage[b-xa7i5nwzoo] { width: 6.5rem; }
.col-driver[b-xa7i5nwzoo] { width: 10rem; }
.col-flag[b-xa7i5nwzoo] { width: 5.5rem; }
.col-date[b-xa7i5nwzoo] { width: 7rem; }
.col-fleet[b-xa7i5nwzoo] { width: 10rem; }
.col-notes[b-xa7i5nwzoo] { width: 33.25rem; }