html.growx-cf-loading {
	cursor: wait;
}

html.growx-cf-loading::before,
html.growx-cf-loading::after {
	position: fixed;
	z-index: 2147483646;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 280ms ease;
	content: "";
}

html.growx-cf-loading::before {
	inset: 0;
	background: #050505;
}

html.growx-cf-loading::after {
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(255, 255, 255, 0.16);
	border-top-color: #355cf3;
	border-radius: 50%;
	animation: growx-cf-loader-spin 720ms linear infinite;
}

html.growx-cf-loading.growx-cf-loader-leaving::before,
html.growx-cf-loading.growx-cf-loader-leaving::after {
	opacity: 0;
	pointer-events: none;
}

@keyframes growx-cf-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.growx-cf-loading::before,
	html.growx-cf-loading::after {
		animation: none;
		transition: none;
	}
}