:root {
    --mud-size-small: 0.70rem;
    --mud-size-medium: 0.87rem;
    --mud-size-large: 1rem;
}

body, .mud-typography-root {
    font-size: var(--mud-size-medium);
}

.mud-button-root,
.mud-input-root,
.mud-select-root {
    font-size: var(--mud-size-small);
}


th.mud-table-cell{
    text-align: center !important;
    margin: auto;
}

/* Shared by the Marketing Company edit tables (AppManagement,
   AssignedTerritoryManagement, CampaignManagement). Global because a <style>
   block in one component is only in the DOM while that component renders. */
.app-list-table .mud-table-cell {
    font-size: 0.70rem;
    line-height: 1.2;
}

.gradLeftToRight {
    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
    min-height: 340px;
    padding: 15px;
    background: rgba(255, 255, 255,0.2); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255,1.0), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255, 255, 255,0.1.0), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255, 255, 255,1.0), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255, 255, 255,1.0), rgba(0,0,0,0)); /* Standard syntax (must be last) */
}

.gradRightToLeft {
    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
    height: 100%;
    padding: 15px;
    background: rgba(255, 255, 255,0.2); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(255, 255, 255,1.0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(0,0,0,0),rgba(255, 255, 255,0.1.0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(255, 255, 255,1.0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(255, 255, 255,1.0)); /* Standard syntax (must be last) */
}


.gradTopToBottom {
    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
    padding: 15px;
    background: rgba(255, 255, 255,0.4); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(255, 255, 255,1.0), rgba(255, 255, 255,0.4)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255, 255, 255,1.0), rgba(255, 255, 255,0.4)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255, 255, 255,1.0), rgba(255, 255, 255,0.4)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255, 255, 255,1.0), rgba(255, 255, 255,0.4)); /* Standard syntax (must be last) */
}

.gradBottomToTop {
    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
    padding: 15px;
    background: rgba(255, 255, 255,0.4); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(255, 255, 255,0.4),rgba(255, 255, 255,1.0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255, 255, 255,0.4),rgba(255, 255, 255,1.0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255, 255, 255,0.4),rgba(255, 255, 255,1.0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255, 255, 255,0.4),rgba(255, 255, 255,1.0)); /* Standard syntax (must be last) */
}

.blur {
    backdrop-filter: blur(1px);
}

/* self host font icons to faster FCP */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Material_symbol_outlined.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/*self host end*/
/* Table zoom helper (desktop vs tablet) */
.zoomed-table {
    zoom: 0.8 !important;
}
.zoomed-table-lg {
    zoom: 0.65 !important;
}

@media (max-width: 1280px) {
    .zoomed-table {
        zoom: 1 !important;
    }

    .zoomed-table-lg {
        zoom: 1 !important;
    }
}

/* MudDateRangePicker (dialog): dual-month calendar is wider than default dialog/xs */
.mud-overlay .mud-picker,
.mud-dialog-container .mud-picker,
.mud-picker-view.mud-picker-open,
.mud-picker.mud-picker-open {
    max-width: min(96vw, 720px) !important;
    width: max-content !important;
}

.mud-overlay .mud-picker .mud-paper,
.mud-dialog-container .mud-picker .mud-paper,
.mud-picker-view.mud-picker-open .mud-paper {
    max-width: min(96vw, 720px) !important;
    width: max-content !important;
    overflow: visible !important;
}

.mud-overlay .mud-picker .mud-picker-content,
.mud-dialog-container .mud-picker .mud-picker-content,
.mud-picker-view.mud-picker-open .mud-picker-content,
.mud-picker.mud-picker-open .mud-picker-content {
    max-width: none !important;
    min-width: min(96vw, 640px);
    overflow: visible !important;
}

.mud-overlay .mud-picker .mud-picker-calendar-content:not(.mud-picker-calendar-content-1),
.mud-dialog-container .mud-picker .mud-picker-calendar-content:not(.mud-picker-calendar-content-1),
.mud-picker-view.mud-picker-open .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) {
    min-width: min(96vw, 620px);
}
/*
 * Stock management: the products on an order, rendered from a stored procedure.
 *
 * The proc joins them with <br /> into one string, so the cell is injected as markup rather than
 * composed of components - there is no MudChip to use. These two classes give a plain <span> the
 * look of a small MudChip. Global rather than a component <style> block because the same markup is
 * injected by four different components (the approvals table, the stock levels table and the two
 * order dialogs), and MudBlazor's palette variables keep it in step with the active theme.
 */
.stock-product-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.stock-product-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}