.appbar-background {
    position: absolute;
    top: -0px;
    left: 50px;
    right: 0;
    bottom: 0;
    background-position: left;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    min-width: 320px;
}

.mud-overlay {
    z-index: 1300 !important;
}

/* Modal content wrapper to change overlays breakpoint context */
.modal-container-context {
    container-type: inline-size;
    width: 50vw;
    min-width: 450px;
}

/* When the modal container itself is tight (< 720px), 
      force standard 'md' spans to fall back to safe 'sm/xs' styling */
@container (max-width: 720px) {
    /*     Tell nested md grid spans to drop back to 100% width, 
       while leaving small nested pairs (like xs="6") completely intact */
    .modal-container-context .mud-grid-item-md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-11 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-10 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-9 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-8 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-7 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-5 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-4 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-3 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .modal-container-context .mud-grid-item-md-2 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .modal-container-context .mud-grid-item-md-1 {
        flex-basis: 25%;
        max-width: 25%;
    }
}

@container (max-width: 500px) {
    /*     Tell nested md grid spans to drop back to 100% width, 
       while leaving small nested pairs (like xs="6") completely intact */
    .modal-container-context .mud-grid-item-md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-11 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-10 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-9 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-8 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-7 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-6 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-5 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-4 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-3 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-2 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .modal-container-context .mud-grid-item-md-1 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.mud-carousel-transition-slide-exit,
.mud-carousel-transition-slide-enter {
    transition-duration: 0.5s !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-secondary);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.mud-nav-link-disabled * {
    color: var(--mud-palette-gray-darker);
}

.mud-table {
    overflow: hidden;
}

.mud-data-grid {
    overflow: visible;
}

.table-primary .mud-table-container {
    width: 100% !important;
}

.mud-table td, .mud-data-grid td {
    align-content: center;
    text-wrap-mode: nowrap;
    overflow: hidden;
}

.mud-table.dense .mud-table-cell, .mud-table.dense .mud-table-cell {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-inline-end: 12px;
}

.mud-table .mud-table-row.delete-on-save .mud-table-cell {
    text-decoration-line: line-through;
    color: var(--mud-palette-action-disabled);
}

.mud-table.dense .mud-icon-button, .mud-data-grid.dense .mud-icon-button {
    padding: 2px;
}

.mud-table.dense .mud-toolbar, .mud-data-grid.dense .mud-toolbar {
    height: 36px;
}

.mud-select {
    border-color: var(--mud-palette-tertiary);
}

    .mud-select .mud-icon-root {
        color: var(--mud-palette-primary);
    }

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input-control .mud-input-control-input-container .mud-input-label-inputcontrol {
    color: var(--mud-palette-primary);
}

.mud-input.mud-input-underline:before {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.mud-input.mud-input-underline:after {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.mud-input.mud-input-underline::after {
    border-color: var(--mud-palette-tertiary) !important;
}

.mud-select .mud-input-adorned-end {
    padding-right: 4px !important;
    padding-block-end: 0px !important
}

.mud-input .mud-input-adornment .mud-button-root,
.mud-select .mud-input-adornment .mud-icon-root {
    padding: 3px;
}

.mud-input.adornment-below-input-label .mud-input-adornment-end {
    align-self: flex-start;
    margin-right: 2px;
    width: 20px;
    height: 20px;
}

.mud-input.adornment-below-input-label .mud-input-filled-with-label .mud-input-adornment-end {
    margin-top: 14px;
}

.mud-input.adornment-below-input-label .mud-input-outlined-with-label .mud-input-adornment-end {
    margin-top: 8px;
}

.mud-input.adornment-below-input-label .mud-input-text-with-label .mud-input-adornment-end {
    margin-top: 4px;
}

.mud-input-control-helper-container {
    margin-top: 0px;
}

.mud-input-helper-text {
    color: var(--mud-palette-gray-default)
}

.mud-input-error {
    font-size: inherit;    
}

    .mud-input-error .mud-input-helper-text * {
        font-size: 10px;
    }


.homepage-link-button {
    width:100%;
    margin-top: 16px;
}

.table-primary .table-head-primary * {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.table-head-primary * {
    background-color: var(--mud-palette-primary) !important;
}

.table-primary .mud-grid-item:has(.mud-progress-circular-percentage) {
    margin-top: -1px !important;
}

.table-primary .selected :not(.mud-progress-circular-percentage, disabled) {
    background-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-primary-text);
    --mud-ripple-color: var(--mud-palette-tertiary-lighten);
}

.data-model-table .selected .mud-icon-button:disabled * {
    background-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-darken);
    --mud-ripple-color: var(--mud-palette-tertiary-lighten);
}

.table-primary .store-option-icon.is-false * {
    opacity: 50%
}

.table-primary .store-option-icon.is-true * {
    opacity: 100%
}

.table-primary .table-foot-primary * {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.table-primary .table-foot-primary * {
    font-weight: var(--mud-typography-subtitle2-weight) !important;
    font-size: var(--mud-typography-subtitle2-size) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    overflow: auto !important;
}

.table-primary .mud-table-pagination * {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    text-align: right;
    padding-inline-end: 24px;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-tertiary);
}

    .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
        color: var(--mud-palette-tertiary);
    }

.mud-list-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mud-list-item-icon {
    min-width: 0px;
    padding-right: 6px;
    padding-left: 4px;
}

.mud-list-item.selected, .mud-list-item.selected * {
    background-color: var(--mud-palette-tertiary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.appbar-button.dense {
    padding: 6px !important;
}

.edit-form .mud-input input, textarea, button {
    text-transform: uppercase;
}

.edit-form .mud-input-outlined > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding-top: 10px;
    padding-bottom: 5px;
}

.edit-form .mud-input-filled > input.mud-input-root-filled, div.mud-input-slot.mud-input-root-filled {
    padding-top: 14px;
    padding-bottom: 2px;
    padding-inline-start: 8px;
}

.edit-form .mud-input > textarea.mud-input-root.mud-input-root-filled {
    margin-top: 16px;
    padding-inline-start: 8px;
    padding-left: 8px;
}

.edit-form .mud-card {
    background-color: var(--mud-palette-background)
}

.edit-form .mud-input-filled {
    background-color: var(--mud-palette-gray-lighter);
    border-top: solid 1px var(--mud-palette-lines-inputs);
    border-left: solid 1px var(--mud-palette-lines-inputs);
    border-right: solid 1px var(--mud-palette-lines-inputs);
}

    .edit-form .mud-input-filled.mud-disabled {
        background-color: var(--mud-palette-gray-light);
        border-top: solid 1px var(--mud-palette-lines-inputs);
        border-left: solid 1px var(--mud-palette-lines-inputs);
        border-right: solid 1px var(--mud-palette-lines-inputs);
    }


    .edit-form .mud-input-filled:hover {
        background-color: none;
    }


.edit-form .mud-input > textarea.mud-input-root.mud-input-root-outlined {
    margin-top: 10px
}

.edit-form .mud-input.mud-input-filled.mud-input-adorned-start {
    padding-inline-start: 8px;
}

.edit-form .mud-input.mud-input-filled.mud-input-adorned-start input {
    padding-left: 0px;
    padding-inline-start:0px;    
}

.edit-form .mud-input-adornment-start.mud-input-root-filled-shrink {
    margin-top: 14px;
    margin-right: 2px;    
}

.edit-form .mud-input-adornment-start p {
    /*font-weight: bold;*/
}

.edit-form > .mud-input-filled .input.mud-input-root.mud-input-root-filled, .edit-form div.mud-input-slot.mud-input-root.mud-input-root-filled {
    padding-top: 14px;
    padding-bottom: 2px;
    padding-inline-start: 8px;
}

.edit-form > .mud-input-outlined .input.mud-input-root.mud-input-root-outlined, .edit-form div.mud-input-slot.mud-input-root.mud-input-root-outlined {
    padding-top: 10px;
    padding-bottom: 5px;
}

.edit-form .mud-list-item {
    padding-top: 1px;
    padding-bottom: 1px;
}

.edit-form .mud-selected-item {
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--mud-palette-tertiary) !important;
}

.edit-form .mud-grid-item {
    padding-top: 8px;    
}

.edit-form .mud-grid {
    margin-top: 0px;
}

.edit-form .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(4px,2px) scale(0.7);
    font-weight: 400;
}

.close-button.dense, .edit-form .close-button.dense .mud-button-root {
    padding: 6px !important;
    margin: auto;
}

.edit-form-tab-panel .mud-tabs-tabbar, .edit-form-tab-panel .mud-tabs-tabbar-inner {
    min-height: 38px;
    height: 38px;
}

    .edit-form-tab-panel .mud-tabs-tabbar .mud-tab {
        color: var(--mud-palette-text-primary) !important;
    }

    .edit-form-tab-panel .mud-tabs-tabbar .mud-tab-active {
        color: var(--mud-palette-text-secondary) !important;
        background-color: var(--mud-palette-primary) !important;
    }

        .edit-form-tab-panel .mud-tabs-tabbar .mud-tab-active .mud-icon-root {
            color: var(--mud-palette-secondary) !important;
        }

    .edit-form-tab-panel .mud-tabs-tabbar .mud-tab-slider {
        background-color: var(--mud-palette-secondary) !important;
    }

.edit-form-tab-panel .mud-grid-item {
    padding-top: 4px;
}

.edit-form-tab-panel .store-edit-form-tab-panel-content,
.edit-form-tab-panel .storevisit-edit-form-tab-panel-content,
.edit-form-tab-panel .trolley-edit-form-tab-panel-content {
    /*height: 400px;*/
    min-height: 0;
    overflow: hidden;
}

.edit-form-tab-panel .customer-edit-form-tab-panel-content {
    /*height: 600px;*/
    min-height: 0;
    overflow: hidden;
}

.edit-form-tab-panel .mud-tabs-tabbar-content, .edit-form-tab-panel .mud-tabs-tabbar-content .mud-tab {
    min-height: 20px;
    height: 38px;
}


.data-model-table-filter .mud-input-outlined > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding-top: 5px;
    padding-bottom: 5px;
}

.data-model-table-filter .mud-input-filled > input.mud-input-root-filled, div.mud-input-slot.mud-input-root-filled {
    padding-top: 5px;
    padding-bottom: 5px;
}

.data-model-table-filter > .mud-input-filled .input.mud-input-root.mud-input-root-filled, .data-model-table-filter div.mud-input-slot.mud-input-root.mud-input-root-filled {
    padding-top: 5px;
    padding-bottom: 5px;
}

.data-model-table-filter-list .mud-list-item {
    padding-top: 1px;
    padding-bottom: 1px;
}

.data-model-table-filter-list .mud-selected-item {
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--mud-palette-tertiary) !important;
}

.data-model-table-filter-checkbox {
    padding-left: 6px;
}

    .data-model-table-filter-checkbox .mud-button-root {
        padding: 0px 0px 0px 0px;
        margin-right: 2px;
    }

    .data-model-table-filter-checkbox .mud-typography {
        font-size: var(--mud-typography-subtitle1-size);
        font-family: var(--mud-typography-subtitle1-family);
        font-weight: var(--mud-typography-subtitle1-weight);
        line-height: var(--mud-typography-subtitle1-lineheight);
        letter-spacing: var(--mud-typography-subtitle1-letterspacing);
        text-transform: var(--mud-typography-subtitle1-text-transform);
    }

.data-model-add-button {
    padding: 0px 8px 0px 8px;
}
/*.mud-table.mud-list.full-height {
    display: flex;
    flex-grow: 1;
    overflow: auto;
}

    .mud-table.full-height > .mud-table-container {
        min-height: 0px;
        flex-grow: 1;
    }*/

.details-drawer, .details-drawer .mud-drawer-content {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-tertiary);
}

.edit-form-overlay {
    background-color: var(--mud-palette-surface);
}

.pageview-breadcrumbs {
    padding: 2px 12px;
    background-color: var(--mud-palette-gray-light);
    border-bottom: 1px solid var(--mud-palette-primary);
}

.pageview-breadcrumbs .mud-link .mud-icon-root {
    font-size:24px !important;
}

.mud-toggle-item-size-small .mud-toggle-item-check-icon {
    font-size:24px;
    margin:0px 2px 0px 0px;
}

.change-summary-grid {
    width:100%;
}

.change-summary-th {
    font-weight:bold!important;
}

    .change-summary-td {
        white-space: preserve-breaks !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .change-summary-td-property {
        color: var(--mud-palette-secondary)!important;
        font-weight:bold!important;
    }

    .report-expansion-panel .mud-expand-panel-text {
        color: var(--mud-palette-secondary);
    }