#login {
	position: relative;
	margin: auto;
	padding: 24px;
	max-width: 348px;
	background-color: #fff;
	border-radius: 16px;
}

#login #loginLoader {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	z-index: 1;
}

#login #loginLoader #loginLoaderCircle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-accent);
	--_m: 
	conic-gradient(#0000 10%,#000),
	linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
			mask: var(--_m);
	-webkit-mask-composite: source-out;
			mask-composite: subtract;
	animation: loginLoaderRotate 1s infinite linear;
}
@keyframes loginLoaderRotate {
	to { 
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

#login #loginLoader #loginLoaderDone {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#login #loginLoader #loginLoaderDone .material-symbols-rounded {
	color: var(--color-accent);
	width: 80px;
	height: 80px;
	font-size: 8rem;
	line-height: 1;
}