#app {
    overflow: hidden;
}

.layout-header {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.menu-pane {
    background: var(--neutral-layer-2);
}

.menu-pane .fluent-nav-item .positioning-region {
    background: unset;
}

.content-pane {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto !important;
}

.fluent-profile-menu fluent-anchored-region {
    position: relative;
}

.fluent-multi-splitter-bar {
    display: none !important;
}

.fluent-messagebar {
    width: 100% !important;
}

.popover-user-persona {
    min-width: 320px;
    max-width: 480px;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.loading-progress {
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .loading-progress circle {
        fill: none;
        stroke: transparent;
        stroke-width: 0.25rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--eci-red);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    display: none;
    position: absolute;
    text-align: center;
    color: var(--eci-darkgray);
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }