/*SPINNER CHAT*/
.loader-cube-box {
    --speed: 1000ms;
    position: relative;
    font-size: 2.5em;
}

    .loader-cube-box .tile {
        width: 1em;
        height: 1em;
        animation: var(--speed) ease infinite jump;
        transform-origin: 0 100%;
        will-change: transform;
    }

        .loader-cube-box .tile::before {
            content: "";
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 0.15em;
            background-color: white;
            animation: var(--speed) ease-out infinite spin;
            will-change: transform;
        }

    .loader-cube-box::after {
        content: "";
        display: block;
        width: 1.1em;
        height: 0.2em;
        background-color: #0132;
        border-radius: 60%;
        position: absolute;
        left: -0.05em;
        bottom: -0.1em;
        z-index: -1;
        animation: var(--speed) ease-in-out infinite shadow;
        filter: blur(0.02em);
        will-change: transform filter;
    }

@keyframes jump {
    0% {
        transform: scaleY(1) translateY(0);
    }

    16% {
        transform: scaleY(0.6) translateY(0);
    }

    22% {
        transform: scaleY(1.05) translateY(-5%);
    }

    24%, 62% {
        transform: scaleY(1) translateY(-33%);
    }

    66% {
        transform: scaleY(1.05) translateY(0);
    }

    72% {
        transform: scaleY(0.8) translateY(0);
    }

    88% {
        transform: scaleY(1) translateY(0);
    }
}

@keyframes spin {
    0%, 18% {
        transform: rotateZ(0);
        border-radius: 0.15em;
    }

    38% {
        border-radius: 0.25em;
    }

    66%, 100% {
        transform: rotateZ(1turn);
        border-radius: 0.15em;
    }
}

@keyframes shadow {
    0% {
        transform: scale(1);
        filter: blur(0.02em);
    }

    25%, 60% {
        transform: scale(0.8);
        filter: blur(0.06em);
    }

    70% {
        transform: scale(1.1);
        filter: blur(0.02em);
    }

    90% {
        transform: scale(1);
    }
}


/*TYPEING*/
.loader-type {
    text-align: center;
}

    .loader-type span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 100%;
        animation: loader-type 0.8s infinite alternate;
    }

        .loader-type span:nth-of-type(2) {
            animation-delay: 0.2s;
        }

        .loader-type span:nth-of-type(3) {
            animation-delay: 0.6s;
        }

@keyframes loader-type {
    0% {
        opacity: 0.9;
        transform: scale(0.5);
    }

    100% {
        opacity: 0.1;
        transform: scale(1);
    }
}