.fartakArtificialIntelligence .turnOnAi {
    background-color: white;
    z-index: 9;
}

    .fartakArtificialIntelligence .turnOnAi::before {
        content: '';
        cursor: pointer;
        background-image: url(/ArtificialIntelligence/image/originalRobat.jpg);
        width: 50px;
        height: 50px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        border: 2px solid #5728e3;
        border-radius: 100px;
        transition: 0.4s;
        z-index: 9999;
        animation: test 1s ease-in-out;
    }

    .fartakArtificialIntelligence .turnOnAi.on::before {
        border: 2px solid #26D164;
        /*animation: borderLoader 1.3s 0.2s ease-in-out infinite;*/
    }

.fartakArtificialIntelligence.backdrop::before {
    content: '';
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: .5;
    filter: blur(2);
    width: 100%;
    height: 100%;
    z-index: 9998;
}

.fartakArtificialIntelligence .talkingMode {
    width: fit-content;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 20px auto;
    z-index: 99100;
    background-color: #190c40;
    font-size: 50px;
    border-radius: 200px;
}

    .fartakArtificialIntelligence .talkingMode.close, .fartakArtificialIntelligence .talkingMode .notRunning.close {
        animation: closeTalkingModeAnimation .5s cubic-bezier(0.96, 0.35, 0.05, 0.9);
        bottom: -100px;
        opacity: unset !important;
    }

    .fartakArtificialIntelligence .talkingMode.active, .fartakArtificialIntelligence .talkingMode .notRunning.active {
        animation: talkingModeAnimation .4s cubic-bezier(0.96, 0.35, 0.05, 0.9);
    }

    .fartakArtificialIntelligence .talkingMode .notRunning {
        position: fixed;
        bottom: 28px;
        font-size: 13px;
        display: inline-block;
        width: max-content;
        right: 0;
        left: 0;
        margin: auto;
        background: #3a3a3a;
        padding: 8px 15px;
        border-radius: 6px;
        box-shadow: var(--t-shadow-m1);
        color: white;
    }


@keyframes borderLoader {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes talkingModeAnimation {
    from {
        bottom: -100px;
    }

    to {
        bottom: 0;
    }
}

@keyframes closeTalkingModeAnimation {
    from {
        bottom: 0;
    }

    to {
        bottom: -100px;
    }
}

@keyframes test {
    from {
        right: -100px;
    }

    to {
        right: 20px;
    }
}


.fartakArtificialIntelligence .talkingMode .rainbow-container {
    z-index: 1;
    transform: rotate(0deg) translateZ(0);
    transform-origin: center center;
    width: 1em;
    height: 1em;
    -webkit-animation: rainbow 3s infinite linear;
    border-radius: 200px;
    box-shadow: 0 0 0.30em 0.5em #602d7694, inset 0.03em 0 0.1em 0.02em #de66e4;
    transform-style: preserve-3d;
    perspective: 1em;
}

@keyframes rainbow {
    0% {
        transform: rotate(0deg) translateZ(0);
        box-shadow: 0 0 0.2em 0.10em #602d7694, inset 0.03em 0 0.1em 0.02em #de66e4;
    }

    25% {
        transform: rotate(90deg) translateZ(0);
        box-shadow: 0 0 0.2em 0.10em #602d7694, inset 0.03em 0 0.1em 0.02em #34ceaa;
    }

    50% {
        transform: rotate(180deg) translateZ(0);
        box-shadow: 0 0 0.2em 0.10em #602d7694, inset 0.03em 0 0.1em 0.02em #19b3f5;
    }

    75% {
        transform: rotate(270deg) translateZ(0);
        box-shadow: 0 0 0.2em 0.10em #602d7694, inset 0.03em 0 0.1em 0.02em #3d52ac;
    }

    100% {
        transform: rotate(360deg) translateZ(0);
        box-shadow: 0 0 0.2em 0.10em #602d7694, inset 0.03em 0 0.1em 0.02em #de66e4;
    }
}

.fartakArtificialIntelligence .talkingMode .rainbow-container {
    position: relative;
}

    .fartakArtificialIntelligence .talkingMode .rainbow-container > div {
        position: absolute;
        top: 0.1em;
        left: 0.1em;
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
    }

.fartakArtificialIntelligence .talkingMode .green {
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(115, 213, 186, 0.8) 100%);
    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0);
    animation: curve-rotate-green 6s infinite linear;
}

.fartakArtificialIntelligence .talkingMode .pink {
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(215, 115, 229, 0.8) 100%);
    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0);
    animation: curve-rotate-pink 3s infinite linear;
}

@-webkit-keyframes curve-rotate-green {
    0% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@-moz-keyframes curve-rotate-green {
    0% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@-o-keyframes curve-rotate-green {
    0% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@keyframes curve-rotate-green {
    0% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@-webkit-keyframes curve-rotate-pink {
    0% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@-moz-keyframes curve-rotate-pink {
    0% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@-o-keyframes curve-rotate-pink {
    0% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}

@keyframes curve-rotate-pink {
    0% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
    }

    50% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
    }

    100% {
        transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
    }
}