@keyframes pulseOnceAnimation {
    0% {
    }

    50% {
        transform: scale(1.05);
    }

    100% {
    }
}

.pulseOnce {
    animation-name: pulseOnceAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}



@-webkit-keyframes pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.pulse {
    -webkit-animation: pulse 2.5s ease infinite;
    animation: pulse 2.5s ease infinite
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeIn2s {
    animation: fadeIn 2s;
}

.fadeIn1s {
    animation: fadeIn 1s;
}

.fadeSlideIn1sDelay1s {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 1s ease 1s forwards;
    animation-fill-mode: forwards;
}

.fadeOut1s {
    animation: fadeOut 1s forwards;
}

.fadeOut1sWait1s {
    animation: fadeOut 1s linear 1s forwards;
}

.fadeInHalfS {
    animation: fadeIn .5s;
}



@keyframes highlightDefinition {
    0% {
        background-color: inherit;
    }

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

@keyframes highlightBoxshadowDefinition {
    0% {
        -webkit-box-shadow: inherit;
        -moz-box-shadow: inherit;
        box-shadow: inherit;
    }

    100% {
        -webkit-box-shadow: 0 0 30px 15px #ffcc80;
        -moz-box-shadow: 0 0 30px 15px #ffcc80;
        box-shadow: 0 0 30px 15px #ffcc80;
    }
}

.highlight1s {
    animation-name: highlightDefinition;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.highlightWithBoxshadow1s {
    animation: highlightDefinition 1s both, highlightBoxshadowDefinition 1s both;
}



@keyframes emphasizeBoxshadowDefinition {
    0% {
        -webkit-box-shadow: inherit;
        -moz-box-shadow: inherit;
        box-shadow: inherit;
    }

    100% {
        -webkit-box-shadow: 0 0 10px 5px #b4ff80;
        -moz-box-shadow: 0 0 10px 5px #b4ff80;
        box-shadow: 0 0 10px 5px #b4ff80;
    }
}

.emphasizeWithBoxshadow1s {
    animation: emphasizeBoxshadowDefinition 1s both;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.1);
    }

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

.bounce-anim {
    display: inline-block;
    animation: bounce 0.7s cubic-bezier(.53,1.55,.37,1.01);
}


/* Animations for DocumentStageChanged */

.animation-container {
    position: relative;
    border-radius: 999px;
}

.animate-flipIn {
    animation: flipIn 1000ms ease;
    will-change: transform;
}

@keyframes flipIn {
    0% {
        transform: rotateX(90deg) scale(0.9);
        filter: brightness(1.2)
    }

    55% {
        transform: rotateX(-8deg) scale(1.05)
    }

    100% {
        transform: rotateX(0) scale(1)
    }
}

.animate-flash {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    animation: flash 900ms ease;
}

@keyframes flash {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.40), 0 0 0 0 rgba(59,130,246,0.45)
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 0 0 16px rgba(59,130,246,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(59,130,246,0)
    }
}

.animate-afterglow {
    animation: afterglow 2400ms ease-in-out 1;
}

@keyframes afterglow {
    0% {
        box-shadow: 0 0 0 0 rgba(158,197,233,0)
    }

    20% {
        box-shadow: 0 0 0 6px rgba(158,197,233,0.32)
    }

    60% {
        box-shadow: 0 0 0 8px rgba(158,197,233,0.18)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(158,197,233,0)
    }
}