/* APPLICATION LOADER */
.loader-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ededed;
}

    .loader-container .loader {
        max-width: 15rem;
        width: 100%;
        height: auto;
        stroke-linecap: round;
    }

        .loader-container .loader circle {
            fill: none;
            stroke-width: 3.5;
            -webkit-animation-name: preloader;
            animation-name: preloader;
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-transform-origin: 170px 170px;
            transform-origin: 170px 170px;
            will-change: transform;
        }

            .loader-container .loader circle:nth-of-type(1) {
                stroke-dasharray: 550;
            }

            .loader-container .loader circle:nth-of-type(2) {
                stroke-dasharray: 500;
            }

            .loader-container .loader circle:nth-of-type(3) {
                stroke-dasharray: 450;
            }

            .loader-container .loader circle:nth-of-type(4) {
                stroke-dasharray: 300;
            }

            .loader-container .loader circle:nth-of-type(1) {
                -webkit-animation-delay: -0.15s;
                animation-delay: -0.15s;
            }

            .loader-container .loader circle:nth-of-type(2) {
                -webkit-animation-delay: -0.3s;
                animation-delay: -0.3s;
            }

            .loader-container .loader circle:nth-of-type(3) {
                -webkit-animation-delay: -0.45s;
                -moz-animation-delay: -0.45s;
                animation-delay: -0.45s;
            }

            .loader-container .loader circle:nth-of-type(4) {
                -webkit-animation-delay: -0.6s;
                -moz-animation-delay: -0.6s;
                animation-delay: -0.6s;
            }

    .loader-container .progress {
        margin-top: 20px;
    }

        .loader-container .progress .progress-bar {
            width: var(--blazor-load-percentage, 0%);
        }

:focus-visible {
    outline: none;
}

@-webkit-keyframes preloader {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes preloader {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bx-tada {
    animation: tada 1.5s ease infinite;
}

@keyframes tada {
    0% {
        transform: scaleX(1);
    }

    10%, 20% {
        transform: scale3d(.95,.95,.95) rotate(-10deg);
    }

    30%, 50%, 70%, 90% {
        transform: scaleX(1) rotate(10deg);
    }

    40%, 60%, 80% {
        transform: rotate(-10deg);
    }

    100% {
        transform: scaleX(1);
    }
}