//
// Icons + Animation originally by SweetAlert, t4t5.
// https://github.com/t4t5/sweetalert
//

// Success Icon
@keyframes animateSuccessTip {
	0%		{ width: 0;		left: 1px;		top: 19px; }
	54%		{ width: 0;		left: 1px;		top: 19px; }
	70%		{ width: 50px;	left: -8px;		top: 37px; }
	84%		{ width: 17px;	left: 21px;		top: 48px; }
	100%	{ width: 25px;	left: 14px;		top: 45px; }
}

@keyframes animateSuccessLong {
	0%		{ width: 0;		right: 46px;	top: 54px; }
	65%		{ width: 0;		right: 46px;	top: 54px; }
	84%		{ width: 55px;	right: 0px;		top: 35px; }
	100%	{ width: 47px;	right: 8px;		top: 38px; }
}

@keyframes rotatePlaceholder {
	0%		{ transform: rotate(-45deg); }
	5%		{ transform: rotate(-45deg); }
	12%   	{ transform: rotate(-405deg); }
	100%	{ transform: rotate(-405deg); }
}

.animateSuccessTip {
	animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
	animation: animateSuccessLong 0.75s;
}

.sweet-modal-icon.sweet-modal-success.animate::after {
	animation: rotatePlaceholder 4.25s ease-in;
}

/* Error Icon */
@keyframes animateErrorIcon {
	0%		{ transform: rotateX(100deg);	opacity: 0; }
	100%	{ transform: rotateX(0deg);	opacity: 1; }
}

.animateErrorIcon {
	animation: animateErrorIcon 0.5s;
}

@keyframes animateXMark {
	0%    { transform: scale(0.4);	 margin-top: 26px;	opacity: 0; }
	50%   { transform: scale(0.4);	 margin-top: 26px;	opacity: 0; }
	80%   { transform: scale(1.15);	 margin-top: -6px;				}
	100%  { transform: scale(1);	 margin-top: 0;		opacity: 1; }
}

.animateXMark {
	animation: animateXMark 0.5s;
}

@keyframes pulseWarning {
	0%		{ border-color: #F8D486; }
	100%	{ border-color: #F8BB86; }
}

.pulseWarning {
	animation: pulseWarning 0.75s infinite alternate;
}

@keyframes pulseWarningIns {
	0%		{ background-color: #F8D486; }
	100%	{ background-color: #F8BB86; }
}

.pulseWarningIns {
	animation: pulseWarningIns 0.75s infinite alternate;
}

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