[animation-name] {
    opacity: 0;
}

[animation-name].animation-slide-bottom {
    opacity: 1;
}

.gif-black {
    mix-blend-mode: screen;
}

.gif-white {
    mix-blend-mode: multiply;
}


/* Animation css */

[class*=animation-] {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both
}

.animation-fade {
    animation-name: fade;
    animation-duration: .8s;
    animation-timing-function: linear
}

.animation-scale-up {
    animation-name: scale-up
}

.animation-scale-down {
    animation-name: scale-down
}

.animation-slide-top {
    animation-name: slide-top
}

.animation-slide-bottom {
    animation-name: slide-bottom
}

.animation-slide-left {
    animation-name: slide-left
}

.animation-slide-right {
    animation-name: slide-right
}

.animation-shake {
    animation-name: shake
}

.animation-reverse {
    animation-direction: reverse
}

@keyframes fade {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes scale-up {
    0% {
        opacity: 0;
        transform: scale(.2)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes scale-down {
    0% {
        opacity: 0;
        transform: scale(1.8)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slide-top {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0)
    }
    10% {
        transform: translateX(-9px)
    }
    20% {
        transform: translateX(8px)
    }
    30% {
        transform: translateX(-7px)
    }
    40% {
        transform: translateX(6px)
    }
    50% {
        transform: translateX(-5px)
    }
    60% {
        transform: translateX(4px)
    }
    70% {
        transform: translateX(-3px)
    }
    80% {
        transform: translateX(2px)
    }
    90% {
        transform: translateX(-1px)
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.chat-box-content {
    display: none;
    align-items: center;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #FFf9;
    justify-content: center;
}

[loading] .chat-box-content {
    display: flex;
}

.chat-box-content .loading-box {
    width: 10.875rem;
    height: 10.875rem;
    border-radius: 50%;
    -webkit-perspective: 50rem;
    perspective: 50rem
}

.chat-box-content .loading-box .loader-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.chat-box-content .loading-box .loader-item:nth-child(1) {
    border-bottom: 1.125rem solid #f13a8f;
    transform: rotateX(35deg) rotateY(-45deg);
    animation: rotate-one 1.25s linear infinite
}

.chat-box-content .loading-box .loader-item:nth-child(2) {
    border-right: 1.125rem solid #4bc8eb;
    transform: rotateX(50deg) rotateY(10deg);
    animation: rotate-two 1.25s linear infinite
}

.chat-box-content .loading-box .loader-item:nth-child(3) {
    border-top: 1.125rem solid #36f372;
    transform: rotateX(35deg) rotateY(55deg);
    animation: rotate-three 1.25s linear infinite
}

@keyframes rotate-one {
    to {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(-45deg) rotate(360deg)
    }
}

@keyframes rotate-two {
    to {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        transform: rotateX(50deg) rotateY(10deg) rotate(360deg)
    }
}

@keyframes rotate-three {
    to {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(55deg) rotate(360deg)
    }
}