body {
    font-family: Calibri, Tahoma, 'Trebuchet MS', Sans, sans-serif;
    font-size: 14px;
}

.nobr {
    white-space: nowrap;
}

/* The "Add New" button, carried over from the WebForms app. */
.button {
    display: inline-block;
    padding: 15px 15px;
    font-size: 20px;
    appearance: none;
    color: #fff;
    text-shadow: -2px 2px #346392;
    background-color: #ff9664;
    box-shadow: inset 0 0 0 1px #27496d;
    border: none;
    border-radius: 15px;
}

    .button:focus {
        outline: none;
    }

    .button:hover {
        box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
    }

    .button:active {
        box-shadow: inset 0 0 0 1px #27496d, inset 0 5px 30px #193047;
    }

/* QuickGrid, styled to read like the old DataTables grid. */
.mileage-grid {
    width: 100%;
    border-collapse: collapse;
}

    .mileage-grid th,
    .mileage-grid td {
        padding: 6px 10px;
        text-align: center;
        border-bottom: 1px solid #dee2e6;
    }

    .mileage-grid thead th {
        border-bottom: 2px solid #adb5bd;
        white-space: nowrap;
        font-weight: 600;
    }

    .mileage-grid tbody tr:hover {
        background-color: #f5f5f5;
    }

    .mileage-grid .col-sort-asc,
    .mileage-grid .col-sort-desc {
        background-color: #eef3f8;
    }

    /* QuickGrid puts col-justify-* on the th from the column's Align, but never maps it to the
       flex container holding the header text. It also reserves 16px for the sort arrow inside
       the button and pads the header content another 16px on the right, which together drag
       the label ~19px left of the column centre. Centre the container, let the button hug its
       text, and hang the arrow off the end so it costs no layout space. */
    .mileage-grid th.col-justify-center .col-header-content {
        justify-content: center;
        padding-right: 0;
    }

    .mileage-grid th.col-justify-center .col-title {
        position: relative;
        flex-grow: 0;
        padding-inline: 0;
    }

    .mileage-grid th.col-justify-center .sort-indicator {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
    }

/* Seasonal MPG bars on the Summary tab. */
.season-grid .season-bar-cell {
    width: 45%;
    text-align: left;
}

.season-bar {
    height: 14px;
    min-width: 2px;
    border-radius: 3px;
    background-color: #6496c8;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }