:root {
    --zoom: 1;
}

img {
    image-rendering: -webkit-optimize-contrast;
}

* {
    touch-action: manipulation;
}

.buttons {
    display: flex;
    align-items: center;
}

    .buttons > button {
        padding: 0 0.5rem;
        margin: 0 0.125rem;
    }




.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.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

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

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100svw;
    margin: -0.25rem;
}
.loader {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    animation: l1 1s linear infinite alternate;
}

@keyframes l1 {
    to {
        opacity: 0
    }
}