body {
    font-family: 'arial', 'helvetica', sans-serif;
}

.mud-tabs-toolbar {
    background-color: transparent;
    margin-bottom: 8px;
}

.eckes-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.eckes-navrail {
    border-right: 3px solid var(--active-hover-color);
}

.eckes-navrail-item {
    width: 75%;
    border-radius: 24px;
    display: flex;
    justify-content: center;
}

.mud-form .mud-input-control-helper-container {
    margin-bottom: -23px;
}

.mud-form .mud-input-control {
    margin-top: 23px !important;
}

.eckes-navrail-item:hover {
    background-color: var(--mud-palette-primary-hover);
}

.eckes-active-navrail-item {
    background-color: var(--mud-palette-primary-hover);
    font-weight: var(--mud-typography-h6-weight) !important;
}

.mud-fab {
    box-shadow: none !important;
}

.eckes-icon-menu-item > div > p > svg {
    display: block;
    float: left;
    margin-right: 8px;
}

.eckes-icon-menu-item > div > p > span {
    display: block;
}

.icon-header > div {
    display: flex;
    height: 32px;
}

@media only screen and (max-width: 599px) { /* portrait tablets, portrait ipad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .mud-toolbar .mud-button {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .d-flex.flex-column .mud-toolbar .mud-button {
        padding-right: 20px;
    }
}

/* splash screen */
.eckes-splash-screen-loading {
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    background-color: var(--mud-palette-primary-lighten);
    width: 300px;
    margin: 0px;
    opacity: 0.7;
}

.eckes-splash-screen-loading-indicator {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: var(--blazor-load-percentage, 0%);
    background-color: var(--mud-palette-primary-darken);
    opacity: 1;
    height: 15px;
}

.eckes-splash-screen-loading-indicator::after {
    display: flex;
    width: 300px;
    height: 15px;
    justify-content: center;
    color: white;
    -webkit-align-items: center;
    align-items: center;
    font-size: 25px;
}

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

.mud-table-container {
    /* fixes bug where tables without button actions don't fit the width of the parent */
    width: 100% !important;
    overflow-x: auto !important;
    
    /* fixes bug where tables are not scrollable*/
    overflow: auto !important;
}

.mud-table-loading, mud-table-loading-progress {
    display: none;
}

.time-picker .mud-input .mud-icon-button:last-of-type {
    position: absolute;
    right: 20px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20height%3d%2248%22%20viewbox%3d%220%20-960%20960%20960%22%20width%3d%2248%22%3e%3cpath%20d%3d%22m627-287%2045-45-159-160v-201h-60v225l174%20181zm480-80q-82%200-155-31.5t-127.5-86q143-252%20111.5-325t80-480q0-82%2031.5-155t86-127.5q252-817%20325-848.5t480-880q82%200%20155%2031.5t127.5%2086q817-708%20848.5-635t880-480q0%2082-31.5%20155t-86%20127.5q708-143%20635-111.5t480-80zm0-400zm0%20340q140%200%20240-100t100-240q0-140-100-240t480-820q-140%200-240%20100t140-480q0%20140%20100%20240t240%20100z%22%2f%3e%3c%2fsvg%3e");
    width: 20px;
    height: 20px;
    /* https://angel-rs.github.io/css-color-filter-generator/ */
    filter: brightness(0) saturate(100%) invert(50%) sepia(1%) saturate(1072%) hue-rotate(330deg) brightness(93%) contrast(92%);
}

.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(107%) hue-rotate(202deg) brightness(86%) contrast(88%);
}

.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-docked.mud-drawer-md, .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-docked.mud-drawer-md {
    height: calc(100% - var(--mud-appbar-height) + 16px) !important;
}

:root {
    --mud-drawer-width-left: calc(80px + env(safe-area-inset-left)) !important;
}

.mud-drawer-pos-left {
    padding-left: env(safe-area-inset-left);
    /* z-index: 1350; */ /* z-index larger than version-banner */
}

.mud-main-content {
    margin-right: env(safe-area-inset-right);
    /* padding on bottom because of version-banner */
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: 100vh;
}

.mud-dialog-width-full {
    width: calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
}

.mud-dialog {
    max-height: calc(100vh - var(--mud-appbar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.mud-timeline.trim-first::before {
    height: initial;
    top: 50px;
}

.mud-timeline.trim-last::before {
    height: initial;
    bottom: 50px;
}

.dense-list > .mud-list-item.mud-list-item-dense {
    padding: 0 !important;
}

.mud-main-content,
.mud-main-content > .mud-container,
.mud-main-content > .mud-container > .mud-container,
.mud-main-content > .mud-container > .mud-paper,
.mud-main-content > .mud-container > .mud-paper > .mud-card-content,
.mud-main-content > .mud-container > .mud-paper > .mud-card-content > .mud-tabs,
.mud-main-content > .mud-container > .mud-paper > .mud-card-content > .mud-tabs > .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scroll-container {
    overflow: hidden auto;
}

.mud-table-toolbar {
    height: 40px !important;
}

.mud-popover:not(.mud-popover-open) {
    /* https://github.com/mudblazor/mudblazor/issues/7469 */
    border: 0;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    display: none;
}

@media only screen and (max-width: 960px) {
    .mud-table-cell {
        width: 100% !important;
    }

    .mobile-align-right input.mud-input-slot.mud-input-root.mud-input-root-text.mud-input-root-margin-dense {
        text-align: right;
    }
}

@media only screen and (max-width: 550px) {
    .mud-table-toolbar {
        height: 150px !important;
    }
}

@media only screen and (max-width: 1279px) {
    .mud-container > * {
        border-radius: 0 !important;
    }
}

.mud-item-card-flex-grow-1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mud-item-card-flex-grow-1 > .mud-card-content {
    flex-grow: 1;
}