.rotate-vertical-center {
    animation: rotate-vertical-center 0.8s infinite;
    margin-left: 14px;
}

@keyframes rotate-vertical-center {
    0% {
        transform: rotateY(0);
        /*background: var(--cl-destaque10);*/
    }


    100% {
        transform: rotateY(360deg);
        /*background: var(--cl-destaque);*/
        color: white;
    }
}

.rotate-vertical-center-2 {
    animation: rotate-vertical-center-2 0.4s
}


@keyframes rotate-vertical-center-2 {
    0% {
        transform: rotateY(0);
        background: var(--cl-destaque10);
    }


    100% {
        transform: rotateY(360deg);
        background: var(--cl-destaque);
        color: white;
    }
}

@keyframes blink-colors {
    0% {
        color: var(--gray-4);
    }

    100% {
        color: red;
    }
}

@keyframes blink-colors-2 {
    0% {
        background-color: white;
    }

    100% {
        background-color: #ceedff;
    }
}


.jello-horizontal {
    animation: jello-horizontal .9s linear both
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}


.scale-up-center {
    animation: scale-up-center .6s;
}

@keyframes scale-up-center {
    0% {
        transform: scale(.9)
    }

    100% {
        transform: scale(1)
    }
}


.flickerInput {
    animation: flickerInput .9s linear both;
    animation-iteration-count: 2;
    animation-delay: .6s;
}

@keyframes flickerInput {
    0%{
        opacity: 1;
        border: 1px solid var(--brd-primary);
    }

    15% {
        opacity: 1;
        border: 1px solid var(--cl-destaque);
    }

    16% {
        opacity: 1;
        border: 1px solid var(--brd-primary);
    }

    30% {
        opacity: 1;
        border: 1px solid var(--cl-destaque);
    }

    31% {
        opacity: 1;
        border: 1px solid var(--brd-primary);
    }

    45% {
        opacity: 1;
        border: 1px solid var(--cl-destaque);
    }


    100% {
        border: 1px solid var(--brd-primary);
    }     
}


.scale-up-horizontal-left {
    animation: scale-up-horizontal-left 0.4s 2s forwards;
    width: 0%;
    left: -200px;
}

@keyframes scale-up-horizontal-left {
    0% {
        transform: scaleX(.4);
        transform-origin: left center; 
 
    }

    100% {
        transform: scaleX(1);
        transform-origin: left center;
        left: 0;
        width: 100%;
    }
}




/* ITSM_CHAMADO STATUS ICONS - START */
@keyframes rotate-center {
    0% {
        opacity: .5;
        transform: translate(-800px, 200px) scale(10);
    }

    75% {
        transform: translate(0px, 0px) scale(1);
        transform: rotate(0);
    }

    100% {
        opacity: 1;
        transform: rotate(360deg);
    }
}


@keyframes jello-horizontal {
    0% {
        opacity: .5;
        transform: scale3d(1,1,1);
        transform: translate(-800px, 200px) scale(10);
    }


    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1);
        transform: translate(0px, 0px) scale(1);
    }


    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}



@keyframes rotate-horizontal-bottom {
    0% {
        opacity: .2;
        transform: translate(-800px, 200px) scale(10);
    }

    75% {
        transform: translate(0px, 0px) scale(1);
        transform: rotateX(0);
        transform-origin: bottom;
    }

    100% {
        opacity: 1;
        transform: rotateX(360deg);
        transform-origin: bottom;
    }
}



@keyframes bounce-right {
    0% {
        transform: translateX(-48px);
        animation-timing-function: ease-in;
        opacity: .2;
        transform: translate(-800px, 200px) scale(10);
    }

    24% {
        opacity: 1
    }

    30% {
        transform: translateX(-26px);
        animation-timing-function: ease-in
    }

    65% {
        animation-timing-function: ease-in
    }

    85% {
        transform: translate(0px, 0px) scale(1);
        animation-timing-function: ease-in
    }

    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}




@keyframes status-canceled {
    0% {
        transform: translateX(0);
        opacity: .5;
        transform: translate(-800px, 200px) scale(10);
    }

    10%,30%,50%,70% {
        transform: translateX(-3px)
    }

    20%,40%,60% {
        transform: translateX(3px);
        color: red;
    }

    80% {
        transform: translateX(1px);
        transform: translate(0px, 0px) scale(1);
    }

    90% {
        transform: translateX(-1px);
    }

    100% {
        opacity: 1;
        color: var(--cl-destaque);
    }
}



@keyframes olar {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes welcome {
    from {
        filter: none;
    }

    to {
        filter: opacity(0.3) invert(.5);
    }
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


@keyframes abrirContainer {
    0% {
        opacity: 0;
        border-color: var(--cl-destaque);
    }

    50% {
        outline-color: #ebebec;
        border-color: var(--cl-destaque);
        background-color: var(--cl-destaque);
    }

    65% {
        outline-color: var(--gray-400);
        /*       border-color: red;
        background-color: red;*/
        border-color: var(--cl-destaque10);
        background-color: var(--cl-destaque10);
    }
    75% {
        outline-color: #ebebec;
        border-color: var(--cl-destaque);
        background-color: var(--cl-destaque);
    }

    85% {
        outline-color: var(--gray-400);
        /*   border-color: red;
        background-color: red;*/
        border-color: var(--cl-destaque10);
        background-color: var(--cl-destaque10);
    }

    100% {
        outline: none;
        opacity: 1;
        background-color: unset;
        border-color: transparent;
    }
}

@keyframes deslizar {
    0% {
        color: black;
    }

    50% {
        color: yellow;
    }

    100% {
        color: orangered;
    }
}

.animation-iconFavoritar {
    animation: animation-iconFavoritar .8s linear both;
    animation-delay: 2s;
}

@keyframes animation-iconFavoritar {
    0%,100% {
        transform: translateY(0) rotate(0);
        transform-origin: 50% 50%;
        transform: scale(1);
    }

    1% {
        filter: drop-shadow(4px -14px 1px #FF8C00);
    }

    15% {
        transform: translateY(-10px) rotate(16deg);
        filter: drop-shadow(2px 4px 1px #FF8C00);
    }

    25% {
        color: #FF8C00;
        filter: none;
    }

    26% {
        filter: drop-shadow(0px 8px 1px #B646EA);
    }

    40% {
        transform: translateY(5px) rotate(6deg);
        color: #B646EA;
        filter: drop-shadow(0px 0px 1px #B646EA);
    }

    42% {
        transform: scale(1);
        filter: none;
    }

    55% {
        transform: translateY(5px) rotate(-5deg);
        color: #45BB2E;
        filter: drop-shadow(-6px 4px 1px #45BB2E);
    }

    70% {
        filter: none;
    }

    72% {
        transform: translateY(-9px) rotate(2.4deg);
        transform: scale(1.1);
        color: #03A0F9;
        filter: drop-shadow(4px 8px 1px #03A0F9);
    }

    85% {
        transform: scale(1);
        filter: none;
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0px 0px 1px none);
    }
}



.shake-left {
    animation: shake-left 4s linear both
}

@keyframes shake-left {
    0%,100% {
        transform: rotate(0deg);
        transform-origin: 0 50%
    }

    2% {
        transform: rotate(2deg)
    }

    4%,8%,12% {
        transform: rotate(-4deg)
    }

    6%,10%,14% {
        transform: rotate(4deg)
    }

    16% {
        transform: rotate(-2deg)
    }

    18% {
        transform: rotate(2deg)
    }
}

@keyframes backgroundChange {
    0%,100% {
        border-color: var(--gray-3);
    }

    2% {
        border-color: #ff3d3d;
        /*box-shadow: inset -800px 0px 10px #ff00001a;*/
    }

    4%,8%,12% {
        border-color: white;
    }

    6%,10%,14% {
        border-color: #ff3d3d;
    }

    16% {
        border-color: white;
    }

    18% {
        border-color: #ff3d3d;
    }
}




@keyframes rotate360 {
    to {
        transform: rotate(0);
        color: var(--gray-5);
        opacity: 1;
    }

    from {
        transform: rotate(-360deg);
        opacity: 0;
    }
}




.anim-ampulheta {
    animation: ampulheta 5s;
    animation-iteration-count: infinite;
}

@keyframes ampulheta {
    0% {
        transform: rotate(0)
    }

    10% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.scale-up-top {
    animation: scale-up-top 0.4s;
}

@keyframes scale-up-top {
    0% {
        transform: scale(.5);
        transform-origin: center top
    }

    100% {
        transform: scale(1);
        transform-origin: center top
    }
}


.scale-down-horizontal-left {
    animation: scale-down-horizontal-left 0.4s
}

@keyframes scale-down-horizontal-left {
    0% {
        transform: scaleX(.3);
        transform-origin: 0 0;
        display: none;
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 0 0;
        display: block;
        opacity: 1;
    }
}


.scale-up-vertical-top {
    animation: scale-up-vertical-top 0.4s linear
}


@keyframes flicker {
    0%, 100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    47.99% {
        opacity: 1
    }

    48% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    49.01% {
        opacity: 1
    }
}

@keyframes shake-left-right {
    0%, 100% {
        transform: rotate(0deg);
        transform-origin: 50% 50%
    }

    10% {
        transform: rotate(8deg)
    }

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

    30%, 50%, 70% {
        transform: rotate(10deg)
    }

    80% {
        transform: rotate(-8deg)
    }

    90% {
        transform: rotate(8deg)
    }
}



.rotate-center {
    animation: rotate-center2 0.4s
}

@keyframes rotate-center2 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}



.shake-left {
    animation: shake-left2 4s linear infinite;
}

@keyframes shake-left2 {
    0%, 100% {
        transform: rotate(0deg);
        transform-origin: 0 50%
    }

    10% {
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        transform: rotate(4deg)
    }

    80% {
        transform: rotate(-2deg)
    }

    90% {
        transform: rotate(2deg)
    }
}


@keyframes scale-up-bottom2 {
    0% {
        opacity: 0;
        transform: scale(.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        margin-bottom: 0px;
    }
}

@keyframes scale-up-vertical-top {
    0% {
        transform: scaleY(.4);
        transform-origin: center top
    }

    100% {
        transform: scaleY(1);
        transform-origin: center top
    }
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



@keyframes pulseGlow {
    0% {
        outline: solid 1px var(--bg-primary);
        border-radius: 50%;
        outline-offset: -20px;
        z-index: 999;
    }

    100% {
        outline: solid 6px #ffffff40;
        border-radius: 100%;
        z-index: 999;
    }
}

@keyframes pulseGlowTecnico {
    0% {
        outline: solid 0px var(--bg-primary);
        border-radius: 50%;
        outline-offset: -200px;
        z-index: 999;
    }

    100% {
        outline: dashed 6px #ffffff50;
        border-radius: 100%;
        z-index: 999;
    }
}



.link-kaio-animation {
    animation: flicker 1.5s linear infinite both;
}

@keyframes link-kaio-animation {
    0%,100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    47.99% {
        opacity: 1
    }

    48% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    49.01% {
        opacity: 1
    }
}