/* ----- APP RELATED STYLES ----- */

* {
    font-family: 'Lato', sans-serif !important;
    letter-spacing: 0 !important;
}

html, body {
    width: 100vw !important;
    height: 100vh !important;
    font-size: 1rem;
    overflow: hidden;
    background-color: var(--mud-palette-background) !important;
}

*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--mud-default-borderradius);
    padding: 4px;
}

:root {
    --app-main-content-padding: 8px;
    --app-section-padding: 20px 16px;
    --app-section-margin: 0px 24px 16px;
    --app-section-header-margin: 0 0 12px;
    --app-section-width-max: 840px;
    --mud-typography-subtitle1-weight: 600 !important;
}

.bordered {
    border: 1.2px var(--mud-palette-lines-default) solid !important;
}

.toolbar-logo {
    position: relative;
    height: calc(var(--mud-appbar-height) - 8px);
    left: -4px;
    cursor: pointer;
    margin-right: 8px;
}

.toolbar-userdetails {
    position: relative;
    height: calc(var(--mud-appbar-height) - 20px);
    color: var(--mud-palette-white);
}

.page-alert {
    margin: 4px 32px 12px;
}

.page-section-alert {
    margin: 12px 4px 0;
}

.page-section {
    padding: var(--app-section-padding);
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    /*box-shadow: var(--mud-elevation-3);*/
}

    .page-section .section-heading, .mud-dialog .section-heading {
        color: var(--mud-palette-primary);
        line-height: 100%;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .page-section .section-heading-underline, .mud-dialog .section-heading-underline {
        width: calc(100% / 2);
        height: 3px;
        background-color: var(--mud-palette-secondary);
        border-radius: 999999rem;
    }

.page-heading-underline {
    width: calc(100% / 2);
    height: 6px;
    background-color: var(--mud-palette-secondary);
    border-radius: 3px;
}

.tooltip-content {
    max-width: 532px;
    padding: 10px 14px;
}

.table-multiselect {
    margin: -12px !important;
}

.actions, .mud-dialog-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.actions > *:not(:first-child), .mud-dialog-actions > *:not(:first-child) {
    margin-left: 8px;
}

/* ----- MUDBLAZOR RELATED STYLES ----- */

.mud-appbar .mud-toolbar .mud-icon-root.mud-svg-icon {
    fill: var(--mud-palette-white);
}

.mud-navmenu {
    padding: 12px 0;
}

    .mud-navmenu .mud-typography {
        padding: 8px 16px;
    }

.mud-nav-item {
    padding: 4px 8px;
}

.mud-nav-link {
    padding: 8px 12px;
    border-radius: calc(var(--mud-default-borderradius) / 2);
    align-items: center;
}

.whats-new .mud-nav-link {
    justify-content: center;
}

.whats-new .mud-nav-link-text {
    margin-left: 0;
    margin-inline-start: unset;
    font-size: 0.8rem;
    text-align: center;
    color: var(--mud-palette-primary);
}

.mud-breadcrumbs {
    padding: 0 !important;
}

.mud-breadcrumb-separator {
    padding: 0 4px !important;
}

.mud-main-content {
    height: calc(100% - var(--mud-appbar-height));
    position: relative;
    top: var(--mud-appbar-height);
    padding: 0;
    overflow-y: scroll;
}

.mud-grid {
    width: 100%;
    margin: 0px;
}

.mud-button-label {
    text-transform: capitalize !important;
}

.custom-alert {
    border: 1.2px solid var(--mud-palette-secondary);
    background-color: #F4F5F5;
    color: var(--mud-palette-primary-darken);
    text-align: justify;
}

.mud-alert-position {
    align-items: center;
}

.mid-section-alert .mud-alert-position {
    justify-content: center !important;
}

.mud-table-pagination-toolbar {
    border: none;
}

.mud-dialog .mud-dialog-title {
    padding: 24px 24px 12px;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px !important;
}

.allocation-expand-panel .mud-expand-panel-content {
    padding: 0 16px 12px;
}

.mud-timeline-item-content .mud-typography-h6 {
    margin-top: -6px;
}

.mud-snackbar {
    min-width: unset !important;
}

    .mud-popover.mud-popover-open {
        margin-top: 4px;
        border: 1.2px var(--mud-palette-lines-default) solid !important;
        box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px, rgb(0 0 0 / 5%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
    }

    .mud-popover .mud-picker-view {
        margin-top: 0;
    }

.mud-popover .mud-list {
    overflow-y: visible;
}

.mud-chip {
    border-radius: var(--mud-default-borderradius) !important;
}

/* ----- BLAZOR CONNECTION RELATED STYLES ----- */

#components-reconnect-modal button {
    color: var(--mud-palette-primary-text);
    font-size: var(--mud-typography-button-size);
    min-width: 64px;
    box-sizing: border-box;
    transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;
    font-weight: var(--mud-typography-button-weight);
    margin: 0px !important;
    line-height: var(--mud-typography-button-lineheight);
}

    #components-reconnect-modal button:hover {
        background-color: var(--mud-palette-primary);
    }

#blazor-error-ui {
    position: fixed;
    display: none;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--mud-palette-overlay-dark);
    cursor: default;
}

.error-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--mud-zindex-dialog);
    transition: .3s cubic-bezier(.25,.8,.5,1),z-index 1ms;
}

.error-dialog {
    z-index: calc(var(--mud-zindex-dialog) + 1);
}

    .error-dialog .error-heading {
        font-size: var(--mud-typography-h5-size);
        font-weight: 600;
        line-height: var(--mud-typography-h5-lineheight);
    }

    .error-dialog .error-button {
        color: var(--mud-palette-primary-text);
        background-color: var(--mud-palette-primary);
        box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    }

.blazor-reconnect-modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--mud-palette-overlay-dark);
    cursor: default;
}

.components-reconnect-hide {
    display: none;
}

.components-reconnect-show > .show {
    display: block;
}

.components-reconnect-failed > .failed {
    display: block;
}

.components-reconnect-rejected > .rejected {
    display: block;
}