#loader-container
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 300px;
}
.progress-bar-bg
{
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}
.progress-bar-fill
{
    height: 100%;
    width: 0%;
    background-color: #0078d7; /* Microsoft blue */
    transition: width 0.3s ease;
}
#progress-text
{
    margin-top: 10px;
    color: #333;
    font-size: 14px;
}

.mud-drawer.custom > .mud-drawer-content > .mud-drawer-header
{
    padding: 12px;
}
#nav-drawer .mud-navmenu    /* enable flex-grow MudSpacer that pushes Settings/Logout to the bottom */
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.navbar-inverted
{
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default
{
    color: var(--mud-palette-appbar-text);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)
{
    color: var(--mud-palette-appbar-text);
    background-color: rgba(255, 255, 255, 0.1);
}

@media (hover: hover) and (pointer: fine)
{
    .mud-nav-link:hover:not(.mud-nav-link-disabled)
    {
        cursor: pointer;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0.1);
    }
}

@media (hover: hover) and (pointer: fine)
{
    .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled)
    {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* for company group row only: eliminate NavGroup icon's left padding (16px) */
.mud-nav-group.left-aligned > .mud-nav-link > .mud-nav-link-text
{
    display: inline-flex;
    margin-left: 0px;
}
/* for company group row only: replicate NavGroup text's properties (copy from .mud-nav-link-text) */
.mud-nav-group.left-aligned > .mud-nav-link > .mud-nav-link-text > .mud-nav-link-text-real
{
    width: 100%;
    text-align: start;
    margin-left: 12px;
    margin-inline-start: 12px;
    margin-inline-end: unset;
    letter-spacing: 0;
}


/* Move NavItem to the left - for profile row only */
.mud-nav-item.left-aligned > .mud-nav-link > .mud-nav-link-text
{
    margin-left: 0px;
}

/* ORIGINALS
.mud-appbar .mud-toolbar-appbar
{
    height: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
}
@media (min-width: 600px) {
    .mud-appbar .mud-toolbar-appbar {
        height: var(--mud-appbar-height);
    }
}
.mud-main-content
{
    margin: 0;
    flex: 1 1 auto;
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
}*/
.mud-main-content
{
    padding-top: 72px; /* 56px (7/8) appbar height + 'pa-4' */
}
@media (min-width: 600px)
{
    .mud-main-content
    {
        padding-top: 80px; /* 64px appbar height + 'pa-4' */
    }
}
@media (min-width: 960px) /* MD+: 2 * 'pa-4' = 2 * 16 = 32 */
{
    .page-cont
    {
        height: calc(100vh - 32px);
    }
}
@media (max-width: 959px) /* SM-: AppBar + 2 * 'pa-4' = 64 + 2 * 16 = 96 */
{
    .page-cont
    {
        height: calc(100vh - 96px);
    }
}
@media (max-width: 599px) /* XS: 7/8 AppBar + 2 * 'pa-4' = 56 + 2 * 16 = 88 */
{
    .page-cont
    {
        height: calc(100vh - 88px);
    }
}

/* ===== MudDataGrid ===== */

/* MudDataGrid's vertical scrollbar addition (https://try.mudblazor.com/snippet/wuGSYoHORmcQAlHF) */
.mud-table.full-height
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}
.mud-table.full-height > .mud-table-container
{
    min-height: 0px;
    flex-grow: 1;
}
.mud-table.full-height > .mud-table-pagination
{
    min-height: 52px; /* not 0px - causes mysterious v-scrollbar to appear despite being inside flex */
    flex-grow: 0;
}

/* MudDataGrid's vertical scrollbar addition (https://try.mudblazor.com/snippet/wuGSYoHORmcQAlHF) */
.mud-table.fixed-height-rows
{
}
/*.mud-table.fixed-height-rows .mud-table-row
{
    height: 63.33px !important;
    max-height: 63.33px !important;
    min-height: 63.33px !important;
    overflow: hidden;
}*/
.mud-table.fixed-height-rows .mud-table-cell
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}



/* ===== MudTabs ===== */
/* MudTab's modification to take up all the vertical container space */
.mud-tabs.full-height
{
    display: flex;
    flex-direction: column;
    min-height: 0px;
    flex-grow: 1;
    /*overflow: auto;*/
    height: 100%; /* 'inherit' or 100% - needed to prevent nested <Virtualize> from becoming taller than container */
}
.mud-tabs.full-height > .mud-tabs-panels
{
    min-height: 0px;
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    overflow: auto;

    /* height: inherit; or 100% - needed to prevent nested <Virtualize> from becoming taller than container */ 
}
/*.mud-tabs.full-height > .mud-tabs-panels > .mud-tab-panel
{
    min-height: 0px;
    flex-grow: 1;
}*/

/* ===== MudStepper ===== */
/* MudStepper's modification to take up all the vertical container space */
.mud-stepper.full-height
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}
.mud-stepper.full-height > .mud-stepper-content
{
    min-height: 0px;
    flex-grow: 1;
    overflow: auto;
}

.mud-toolbar.custom-wrapping
{
    flex-wrap: wrap;
    height: unset;
}

/*.mud-stepper.mud-stepper__horizontal.mud-stepper__center-labels .mud-step
{
    flex-basis: 100px !important;
}*/

.mud-dialog.full-height .mud-dialog-content
{
    display: flex;
    flex-direction: column;
}

.fill-height
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Scandalous: MudDataGrid's single selection mode does not visually highlight the selected row AT ALL */
.mud-datagrid-row-selected
{
    background-color: var(--mud-palette-gray-lighter);
}

.img-logo
{
    /*width: 100%;
    height: 100%;*/
    object-fit: contain;
    max-width: 100%;    /* force img resize if the flex container becomes too narrow */
}

/* For MudForm inputs: enable '\n' to split merged error message into separate lines */
.mud-input-control.multiple-errors .me-auto
{
    white-space: pre-line;
}

.mud-stepper.no-x-padding > .mud-stepper-content
{
    padding-inline: 4px;
}

/* ===== MudSwitch ===== */
.mud-input-control-boolean-input.filter-mode
{
    height: 48px;
}
.mud-input-control-boolean-input.filter-mode label.mud-switch
{
    justify-content: flex-end;
}
/* ===== <Virtualize> */
.loading-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* ===== Assets ===== */

.duration-overlay
{
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 4px;
    color: white;
    background: rgba(0,0,0,0.6);
    font-size: 0.7em;
}
.resolution-overlay
{
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 4px;
    color: white;
    background: rgba(0,0,0,0.6);
    font-size: 0.7em;
}


.custom-icon-fill .mud-icon-root.mud-svg-icon
{
    fill: none;
}
.custom-icon-fill-stroke-curr .mud-icon-root.mud-svg-icon path
{
    stroke: currentColor !important;
}


/*============== UTILITIES */


.flex-basis-fit
{
    flex-basis: fit-content;
}

.bc-gray-light
{
    border-color: var(--mud-palette-gray-light)
}
.c-gray-light
{
    color: var(--mud-palette-gray-light)
}

.font-bold
{
    font-weight: 700;
}

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

.whitespace-nowrap
{
    white-space: nowrap;
}

.text-ellipsis
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-1px
{
    margin-top: 1px;
    margin-bottom: 1px;
}

.t-body1-08
{
    font-size: 0.8rem;
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}