body {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

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

.mambo-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.mambo-center-auth {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 64px - 64px);
}

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

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

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

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

.mambo-dialog-container {
    max-height: 75vh !important;
    overflow-y: auto;
    max-width: unset !important;
}

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

.live-recording {
    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.d-flex-important {
    display: flex !important;
}

.text-align-right {
    display: flex;
    padding: 0;
}

.suggestion-entry .floating-add-button {
    position: absolute;
    right: 8px;
    top: 0px;
}

.text-align-right > span {
    margin-left: auto;
}

.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

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

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

.hidden {
    visibility: hidden;
}

.text-small {
    font-size: 0.75em;
    line-height: 1em
}

.h-full {
    height: 100%;
}

/* Homepage */
.company-image {
    max-height: 300px;
    max-width: 1000px
}

.packages {
    max-width: 1024px !important;
}

.package {
    width: 500px;
    height: 200px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}

.hidden-row .mud-table-cell {
    color: lightgray !important;
}

.dark-mode .hidden-row .mud-table-cell {
    color: #726d6d !important;
}

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

.package-icon {
    font-size: 2rem;
    margin-right: 4px;
}

.package > .package-content {
    flex: 1;
}

.package-content {
    position: relative;
}

    .package-content > .launch-icon {
        position: absolute;
        bottom: 16px;
        right: 16px;
    }

.home {
    color: var(--home-primary-color) !important;
    --mud-palette-primary-hover: var(--home-primary-hover-color);
}

.anna {
    color: var(--anna-primary-color) !important;
    --mud-palette-primary-hover: var(--anna-primary-hover-color);
}

.lena {
    color: var(--lena-primary-color) !important;
    --mud-palette-primary-hover: var(--lena-primary-hover-color);
}

.nora {
    color: var(--nora-primary-color) !important;
    --mud-palette-primary-hover: var(--nora-primary-hover-color);
}

.erna {
    color: var(--erna-primary-color) !important;
    --mud-palette-primary-hover: var(--erna-primary-hover-color);
}

.nina {
    color: var(--nina-primary-color) !important;
    --mud-palette-primary-hover: var(--nina-primary-hover-color);
}

@media only screen and (max-width: 599px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .lightbulb-button > .mud-button-label > .mud-button-icon-start {
        margin: 0;
    }

    .mud-toolbar .mud-button {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .suggestion-text {
        display: none !important;
    }

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

    .company-image {
        max-width: 100% !important;
        height: auto !important;
    }

    .package {
        width: 100% !important;
        height: fit-content !important;
    }

    .grouping-header {
        margin-top: 5px !important;
        margin-bottom: 6px !important;
    }
}

@media only screen and (max-width: 1279px) { /* hi-res laptops and desktops */
    .company-image {
        max-width: 800px;
        max-height: 250px;
    }

    .package {
        width: 380px;
        height: 180px;
    }
}

.email-drawer-header {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.deleted-mails-switch > .mud-input-control-input-container > .mud-switch {
    margin-left: 0;
    margin-right: 0;
}

.grouping-header {
    display: inline-block;
    width: calc(100% - 18px);
    float: right;
    margin-top: -5px;
    margin-bottom: -6px;
    padding-bottom: 2px;
}

.empty-group > button {
    display: none;
}

.empty-row {
    display: none;
}

    .empty-row > td {
        padding: 0 !important;
    }

tr:has(+ tr .first-day-of-week) {
    height: 2px;
}

    tr:has(+ tr .first-day-of-week) td {
        border-bottom-width: 2px;
    }

.today {
    background-color: var(--mud-palette-warning-darken) !important;
}

.grouping-header-half {
    max-width: 50%;
    float: left;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
}

.content-right {
    display: flex;
    justify-content: flex-end;
}

/* splash screen */
.mambo-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;
}

.mambo-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;
}

    .mambo-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;
    overflow-y: auto !important;
}

.outline-non-card-background label {
    background: var(--mud-palette-background);
}

.outline-non-card-background.drawer label {
    background: var(--mud-palette-drawer-background);
}

.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%);
    pointer-events: auto;
}

.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;
    overflow: hidden; /*scrollbar fix for suggestionsdrawer*/
}

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

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

.version-banner {
    padding-bottom: env(safe-area-inset-bottom);
}

.mud-main-content {
    margin-right: env(safe-area-inset-right);
    padding-top: 64px !important;
}

.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));
}

.scrollable-drawer-content {
    height: calc(100vh - 96px - 64px - 64px);
    overflow-y: auto;
}

.scrollable-drawer-content-double-filter {
    height: calc(100vh - 96px - 64px - 64px - 64px);
    overflow-y: auto;
}

.scrollable-drawer-content-favorites {
    height: calc(100vh - 273px); /* Element heights: 48 + 48 + 8 + 72 + 40 + 3 + 16 + 38 = 273 */
    overflow-y: auto;
}

.expansion-panel-content-padding > .mud-collapse-container > .mud-collapse-wrapper > .mud-collapse-wrapper-inner > .mud-expand-panel-content {
    padding: 0px !important;
}

.darken {
    filter: brightness(0.85);
}

.mambo-filter-element {
    height: 40px;
    max-width: fit-content;
}

    .mambo-filter-element > .mud-input-control {
        margin: 0;
    }

.tabs-header > .mud-tabs-tabbar-inner > .mud-tabs-scroll-button {
    display: none;
}

.mud-tabs.badge-padding .mud-tab {
    /* fixes a MudBlazor Bug where Tabs with Badge get cut off */
    padding: 6px 16px;
}

.mud-dialog .mud-container {
    max-height: initial !important;
}

.anna-lena-sum {
    width: 50px;
}

.tooltip-wrapper > .mud-tooltip-root:first-child {
    flex-grow: 1;
}

    .tooltip-wrapper > .mud-tooltip-root:first-child > button {
        height: 100%;
    }

.mud-button.plain-button > span > * {
    flex-grow: 1;
    text-align: left;
}

@media only screen and (min-width: 930px) {
    .terminal-zoom {
        transform: scale(1.5);
    }
}

.min-width-400 {
    min-width: 400px;
}

.min-width-300 {
    min-width: 300px;
}

.min-width-200 {
    min-width: 200px;
}

.text-truncate,
.mud-chip.text-truncate-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: initial;
    white-space: nowrap;
}

.mud-chip.text-truncate-chip > span {
    display: initial;
    height: initial;
}

.mud-chipset > .mud-chip {
    max-width: calc(100% - 8px);
}

.palette-background {
    background: var(--mud-palette-background);
}

.billable-duration-combo {
    display: inline-flex;
    width: calc(50% - 4px);
}

    .billable-duration-combo + .billable-duration-combo {
        margin-left: 8px;
    }

.mud-data-grid-column-autocomplete {
    min-width: 250px !important;
}

.mud-data-grid-column-numeric {
    min-width: 100px !important;
}

.mud-data-grid-column-description {
    min-width: 300px !important;
}

.mud-data-grid-column-row-filter {
    min-width: 180px !important;
}

/* overwrite sticky table header for scrolling with filterow and header*/
.mud-table-root .mud-table-head {
    position: sticky !important;
    z-index: 100 !important;
    top: 0 !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    position: static !important;
}

    .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child {
        border-radius: 0 !important;
    }

.tile-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-bold {
    font-weight: bold !important;
}

.old-entry-text-color {
    color: var(--mud-palette-error) !important;
}

.new-entry-text-color {
    color: var(--anna-primary-color) !important;
}

.column-width-for-icon {
    max-width: 50px !important;
}

.time-display-padding {
    padding-bottom: 1em;
}

.mud-drawer-content .mud-tabs .mud-tabs-tabbar {
    background-color: var(--mud-palette-drawer-background);
}

@media (min-width: 601px) {
    .grouped-table tr > td.edit-mode-cell:first-child {
        padding-left: 34px;
    }
}

.mud-table-cell-custom-group {
    font-weight: 600 !important;
}

.mud-table-cell-custom-group-footer {
    padding-bottom: 50px;
    text-align: left;
}

.mud-table-footer-group-footer {
    background-color: var(--mud-palette-background-gray);
}

.full-width {
    width: 100%;
}

.suggestion-entry {
    position: relative;
}

    .suggestion-entry > .mud-tooltip-root {
        width: 100%;
    }

        .suggestion-entry > .mud-tooltip-root > button {
            min-height: 48px;
        }

.plain-button {
    width: 100%;
    height: 100%;
}

    .plain-button > span > div {
        width: 100%;
    }

.mr-24 {
    margin-right: 96px !important;
}

.anna-dashboard-chip-minimum-width {
    min-width: 55px !important;
}

.color-gray {
    color: var(--mud-palette-gray-default);
}

.text-wrap-no-wrap {
    text-wrap: nowrap;
}

.mud-table td.mud-table-cell.sticky-left {
    left: 0px;
    position: sticky;
    background-color: var(--mud-palette-background-gray) !important;
    z-index: 1
}

.mud-table td.mud-table-cell.sticky-right {
    right: 0px;
    position: sticky;
    background-color: var(--mud-palette-background-gray) !important;
    z-index: 1
}

.vertical-align-middle {
    vertical-align: middle;
}

.cell-hover-effect-dark-mode:hover {
    background-color: #A287AF !important;
    cursor: pointer;
}

.cell-hover-effect-light-mode:hover {
    background-color: #da9efc !important;
    cursor: pointer;
}

.ica-matrix-number-columns-width {
    width: 14em !important;
    text-wrap: nowrap;
}

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

.table-with-tooltips td:has(> .mud-tooltip-root),
.table-with-tooltips th:has(> .mud-tooltip-root) {
    padding: 0 !important;
    position: relative;
}

.table-with-tooltips td > .mud-tooltip-root,
.table-with-tooltips th > .mud-tooltip-root {
    padding: 6px 16px;
    width: 100%;
}

.bg-success {
    background: var(--mud-palette-success);
}

.wrap-text {
    white-space: pre-wrap;
}