@keyframes slideDownOut{
    0% {
        transform: scaleY(.8);
        opacity: 0
    }
    to {
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes slideDownIn{
    0% {
        transform: scaleY(1);
        opacity: 1;
    }

    to {
        transform: scaleY(.8);
        opacity: 0;
		max-height: 0;
    }
}

@keyframes slideTop{
	from{
		transform: translateY(-20%);
		opacity: 0;
	}
	to{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideBottom{
	from{
		transform: translateY(20%);
		opacity: 0;
	}
	to{
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes radioEffect{
    0% {
        transform: scale(1);
        opacity: .8
    }

    to {
        transform: scale(1.4);
        opacity: 0
    }
}

@keyframes shake {
	8%, 41% { transform: translateX(-10px); }
	25%, 58% { transform: translateX(10px); }
	75% { transform: translateX(-5px); }
	92% { transform: translateX(5px); }
	0%, 100% { transform: translateX(0); }
}
.animation-shake{
	animation: shake .5s linear;
}

@keyframes spin {
	0%{ transform: rotate(0deg);}
	100%{ transform: rotate(360deg);}
}

@keyframes zoomOut{
	0% {
        transform: scale(.9);
        opacity: .5
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}
@keyframes zoomIn{
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(.9);
        opacity: .5;
    }
    to {
        opacity: 0;
		max-height: 0;
    }
}

.animation-rotate{
    animation: spin .5s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { transform:rotate(360deg); } }

@keyframes blinkBackgroundError{
    0% {
        background-color: transparent;
    }
    40%{
        background-color: var(--control-error-background);
    }
}