#loading-container
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


    #loading-container h2
    {
        color: var(--color-text-normal);
        letter-spacing: 1px;
    }

#loading-text
{
    margin: 0;
    padding: 0;
}

.linear-progress
{
    background: #535353;
    width: 50vw;
    margin: 20px 0;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

    .linear-progress:after
    {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--color-primary);
        scale: var(--blazor-load-percentage, 0%) 100%;
        transform-origin: left top;
        transition: scale ease-out 0.5s;
    }

/*.loading-progress
{
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

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

.loading-progress-text
{
    position: relative;
    text-align: center;
    font-weight: bold;
    top: -90px;
}

#loading-text:after
{
    color: var(--color-primary);
    content: var(--blazor-load-percentage-text, "0%");
}