/* HTML: <div class="loader"></div> #1890ff */
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.aminui {
	height: 100%;
}

.loader {
	width: 50px;
	aspect-ratio: 1;
	display: grid;
	border: 4px solid #0000;
	border-radius: 50%;
	border-color: #006fc0 #0000;
	animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {
	content: '';
	grid-area: 1/1;
	margin: 2px;
	border: inherit;
	border-radius: 50%;
}
.loader::before {
	border-color: #d10d25 #0000;
	animation: inherit;
	animation-duration: 0.5s;
	animation-direction: reverse;
}
.loader::after {
	margin: 8px;
}
@keyframes l16 {
	100% {
		transform: rotate(1turn);
	}
}

.loader-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	height: 100%;
}

.loader-system{
    color: #006fc0;
    font-family: system-ui,  sans-serif;
    font-size: 22px;
    margin-top: 20px;
}

/** logo #006fc0 #d10d25 */
.loader-logo {
	transform-origin: center bottom;
	transform: scale(0.4);
	width: 458px;
	height: 384px;
	position: relative;
    margin-top: -400px;
}

.loader-logo .line {
	background-color: #006fc0;
	position: absolute;
	animation-duration: 1.2s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.loader-logo .line.red {
	background-color: #d10d25;
}

.loader-logo .line-row {
	height: 4px;
}

.loader-logo .line-col {
	width: 4px;
}

.loader-logo .r2l {
	transform-origin: right top;
	transform: scaleX(0);
}

.loader-logo .l2r {
	transform-origin: left top;
	transform: scaleX(0);
}

.loader-logo .t2b {
	transform-origin: left top;
	transform: scaleX(0);
}

/** animation 1 left */
@keyframes line1-5-1 {
	from {
		transform: scaleX(0);
	}
	10% {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-5-1 {
	animation-name: line1-5-1;
}
@keyframes line1-5-2 {
	from {
		transform: scaleY(0);
	}
	20% {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line1-5-2 {
	animation-name: line1-5-2;
}
@keyframes line1-5-3 {
	from {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-5-3 {
	animation-name: line1-5-3;
}

/** animation 1 right */
@keyframes line2-3-1 {
	from {
		transform: scaleY(0);
	}
	10% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-3-1 {
	animation-name: line2-3-1;
}

@keyframes line2-3-2 {
	from {
		transform: scaleX(0);
	}
	10% {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-3-2 {
	animation-name: line2-3-2;
}

@keyframes line2-3-3 {
	from {
		transform: scaleY(0);
	}
	20% {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-3-3 {
	animation-name: line2-3-3;
}

@keyframes line2-3-4 {
	from {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-3-4 {
	animation-name: line2-3-4;
}

@keyframes line2-3-5 {
	from {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-3-5 {
	animation-name: line2-3-5;
}

/** animation 2 left */
@keyframes line1-4-1 {
	from {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-4-1 {
	animation-name: line1-4-1;
}
@keyframes line1-4-2 {
	from {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line1-4-2 {
	animation-name: line1-4-2;
}
@keyframes line1-4-3 {
	from {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-4-3 {
	animation-name: line1-4-3;
}

@keyframes line1-3-1 {
	from {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-3-1 {
	animation-name: line1-3-1;
}
@keyframes line1-3-2 {
	from {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line1-3-2 {
	animation-name: line1-3-2;
}
@keyframes line1-3-3 {
	from {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-3-3 {
	animation-name: line1-3-3;
}

/** animation 2 right */
@keyframes line2-2-1 {
	from {
		transform: scaleY(0);
	}
	10% {
		transform: scaleY(0);
	}
	20% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-2-1 {
	animation-name: line2-2-1;
}

@keyframes line2-2-2 {
	from {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-2-2 {
	animation-name: line2-2-2;
}

@keyframes line2-2-3 {
	from {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-2-3 {
	animation-name: line2-2-3;
}

@keyframes line2-2-4 {
	from {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-2-4 {
	animation-name: line2-2-4;
}

@keyframes line2-2-5 {
	from {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(0);
	}
	60% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-2-5 {
	animation-name: line2-2-5;
}

/** animation 3 left */
@keyframes line1-2-1 {
	from {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-2-1 {
	animation-name: line1-2-1;
}
@keyframes line1-2-2 {
	from {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line1-2-2 {
	animation-name: line1-2-2;
}
@keyframes line1-2-3 {
	from {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(0);
	}
	60% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-2-3 {
	animation-name: line1-2-3;
}

@keyframes line1-1-1 {
	from {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-1-1 {
	animation-name: line1-1-1;
}
@keyframes line1-1-2 {
	from {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line1-1-2 {
	animation-name: line1-1-2;
}
@keyframes line1-1-3 {
	from {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(0);
	}
	60% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line1-1-3 {
	animation-name: line1-1-3;
}

/** animation 3 right */
@keyframes line2-1-1 {
	from {
		transform: scaleY(0);
	}
	20% {
		transform: scaleY(0);
	}
	30% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-1-1 {
	animation-name: line2-1-1;
}

@keyframes line2-1-2 {
	from {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(0);
	}
	40% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-1-2 {
	animation-name: line2-1-2;
}

@keyframes line2-1-3 {
	from {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-1-3 {
	animation-name: line2-1-3;
}

@keyframes line2-1-4 {
	from {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(0);
	}
	60% {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(1);
	}
}
.line2-1-4 {
	animation-name: line2-1-4;
}

@keyframes line2-1-5 {
	from {
		transform: scaleY(0);
	}
	60% {
		transform: scaleY(0);
	}
	70% {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(1);
	}
}
.line2-1-5 {
	animation-name: line2-1-5;
}