html, body, #app {
    width: 100%;
    height: 100%;
}

#blazor-error-ui {
    display: none;
}

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

.global-loader {
    width: 64px;
    height: 64px;
    animation: sizeFlicker 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.global-loader-image,
[data-bs-style=xinyan] .global-loader-image,
[data-bs-style=hutao] .global-loader-image {
    background-image: url('/styles/pyro.png');
}

[data-bs-style=yunjin] .global-loader-image {
    background-image: url('/styles/geo.png');
}

.global-back,
[data-bs-theme="dark"] .global-back,
[data-bs-style=xinyan] .global-back {
    opacity: 0.1;
    z-index: -5;
    background: url('/styles/xinyan/back.png') center no-repeat;
}

[data-bs-theme="light"] .global-back {
    opacity: 0.3;
}

[data-bs-style=hutao] .global-back {
    background: url('/styles/hutao/back.png') center no-repeat;
}

[data-bs-style=yunjin] .global-back {
    background: url('/styles/yunjin/back.png') center no-repeat;
}

.global-icon,
[data-bs-style=xinyan] .global-icon {
    height: 64px;
    width: 64px;
    background: url("/styles/xinyan/icon.png") center/contain no-repeat;
}

[data-bs-style=hutao] .global-icon {
    background: url("/styles/hutao/icon.png") center/contain no-repeat;
}

[data-bs-style=yunjin] .global-icon {
    background: url("/styles/yunjin/icon.png") center/contain no-repeat;
}

@keyframes sizeFlicker {
    0% {
        transform: scale(0.95)
    }

    5% {
        transform: scale(1.1)
    }

    39% {
        transform: scale(0.85)
    }

    45% {
        transform: scale(1)
    }

    60% {
        transform: scale(0.95)
    }

    100% {
        transform: scale(0.9)
    }
}