.ai-engine-state
{
	position: relative;
	top: 0;
	max-width: 100%;
	min-width: 500px;
	height: 500px;
}
.ai-engine-state .ai-engine-state-bg
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 500px;
	height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
	transition: transform 2s ease;
	z-index: 2;
}
.ai-engine-state .engine-stable
{
    background: url( ../../files/img/ai-engine/engine_0.png ) no-repeat center;
}
.ai-engine-state .engine-reading
{
    background: url( ../../files/img/ai-engine/engine_1.png ) no-repeat center;
}
.ai-engine-state .engine-warning
{
    background: url( ../../files/img/ai-engine/engine_2.png ) no-repeat center;
}
.ai-engine-state .engine-danger
{
    background: url( ../../files/img/ai-engine/engine_3.png ) no-repeat center;
}
.ai-engine-state .engine-critical
{
    background: url( ../../files/img/ai-engine/engine_4.png ) no-repeat center;
}
.ai-engine-load-bg
{
	position: absolute;
	top: -2px;
	left: 8px;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 280px;
	height: 280px;
    background: url( ../../files/img/ai-engine/engine_load.png ) no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
	transition: transform 1.5s ease;
	z-index: 1;
}
.ai-engine-load2-bg
{
	position: absolute;
	top: 6px;
	left: 3px;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 220px;
	height: 220px;
    background: url( ../../files/img/ai-engine/mind_drive_inner.png ) no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
	transition: transform 10s ease;
	z-index: 0;
}
.ai-engine-load-bg .ai-engine-load-progress 
{
    width: 240px;
    height: 240px;
    background-color: rgba(0,0,0,0);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
	display: none;
	z-index: 0;
}
.ai-engine-load-bg .ai-engine-load-progress::before 
{
    content: "";
    width: 100%;
    height: 100%;
    border: 20px solid rgba(255,0,0,0.2);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 0;
}
.ai-engine-load-bg .ai-engine-load-progress::after 
{
    content: "";
    width: 100%;
    height: 100%;
    border: 20px solid rgba(0,255,0,0.2);
    border-radius: 50%;
    clip: rect(0, 20px, 20px, 10px);
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
	z-index: 0;
}