@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/Sora/Sora-VariableFont_wght.ttf) format('truetype');
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 600;
	src: url(fonts/Sora/Sora-VariableFont_wght.ttf) format('truetype');
}

.ace_warning {
	background-color: #F5F5A0;
	position: absolute;
}

.ace_error {
	background-color: #FFBBBB;
	position: absolute;
}

.nuclos-icon-animation {
	position: relative;
	width: 50%;
	height: 50%;
}
.nuclos-icon-animation img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
}
.nuclos-icon-animation img:first-child {
	opacity: 1;
}

.nuclos-icon-animation.active img {
	animation: swap 700ms infinite both;
}

.nuclos-icon-animation.active img:first-child { animation-delay: 0ms; }
.nuclos-icon-animation.active img:nth-child(2) { animation-delay: 100ms; }
.nuclos-icon-animation.active img:nth-child(3) { animation-delay: 200ms; }
.nuclos-icon-animation.active img:nth-child(4) { animation-delay: 300ms; }
.nuclos-icon-animation.active img:nth-child(5) { animation-delay: 400ms; }
.nuclos-icon-animation.active img:nth-child(6) { animation-delay: 500ms; }
.nuclos-icon-animation.active img:nth-child(7) { animation-delay: 600ms; }

.nuclos-icon-animation:not(.active) img {
	animation: none;
	opacity: 0;
}
.nuclos-icon-animation:not(.active) img:first-child {
	opacity: 1;
}

@keyframes swap {
	0%, 14.2857%   { opacity: 1; }
	14.2858%, 100% { opacity: 0; }
}