*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #1a1819;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 32px;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    /*    overflow: hidden;*/
}

/*----------loader-----------*/

.blazor-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1819;
    z-index: 9999;
}

    .blazor-loader svg {
        width: 120px;
        height: 120px;
        transform: none !important;
    }

        .blazor-loader svg circle {
            fill: none;
            stroke: #38bdf8;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
            animation: spin 1.5s linear infinite;
            vector-effect: non-scaling-stroke;
            transform-box: fill-box;
            transform-origin: center;
        }

            .blazor-loader svg circle:nth-child(2) {
                stroke: #22c55e;
                animation-delay: -0.75s;
            }
@keyframes spin {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }

    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

.loading-progress-text {
    position: absolute;
    bottom: 20%;
    color: #e5e7eb;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.85;
}

    .loading-progress-text::after {
        content: "Loading";
        animation: dots 1.5s infinite;
    }

@keyframes dots {
    0% {
        content: "Loading";
    }

    33% {
        content: "Loading.";
    }

    66% {
        content: "Loading..";
    }

    100% {
        content: "Loading...";
    }
}