@keyframes dot-spin-white {
	0%, 100% {
		box-shadow: 0 -18px 0 0 white, 12.727926px -12.727926px 0 0 white, 18px 0 0 0 white, 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	12.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 0 white, 18px 0 0 0 white, 12.727926px 12.727926px 0 0 white, 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	25% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 0 white, 12.727926px 12.727926px 0 0 white, 0 18px 0 0 white, -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	37.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 0 white, 0 18px 0 0 white, -12.727926px 12.727926px 0 0 white, -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	50% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 0 white, -12.727926px 12.727926px 0 0 white, -18px 0 0 0 white, -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	62.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 0 white, -18px 0 0 0 white, -12.727926px -12.727926px 0 0 white;
	}
	75% {
		box-shadow: 0 -18px 0 0 white, 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 0 white, -12.727926px -12.727926px 0 0 white;
	}
	87.5% {
		box-shadow: 0 -18px 0 0 white, 12.727926px -12.727926px 0 0 white, 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 0 white;
	}
}


@keyframes dot-spin-skyblue {
	0%, 100% {
		box-shadow: 0 -18px 0 0 #60c0ee, 12.727926px -12.727926px 0 0 #60c0ee, 18px 0 0 0 #60c0ee, 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	12.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 0 #60c0ee, 18px 0 0 0 #60c0ee, 12.727926px 12.727926px 0 0 #60c0ee, 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	25% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 0 #60c0ee, 12.727926px 12.727926px 0 0 #60c0ee, 0 18px 0 0 #60c0ee, -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	37.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 0 #60c0ee, 0 18px 0 0 #60c0ee, -12.727926px 12.727926px 0 0 #60c0ee, -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	50% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 0 #60c0ee, -12.727926px 12.727926px 0 0 #60c0ee, -18px 0 0 0 #60c0ee, -12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%);
	}
	62.5% {
		box-shadow: 0 -18px 0 -5px rgb(152 128 255 / 0%), 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 0 #60c0ee, -18px 0 0 0 #60c0ee, -12.727926px -12.727926px 0 0 #60c0ee;
	}
	75% {
		box-shadow: 0 -18px 0 0 #60c0ee, 12.727926px -12.727926px 0 -5px rgb(152 128 255 / 0%), 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 0 #60c0ee, -12.727926px -12.727926px 0 0 #60c0ee;
	}
	87.5% {
		box-shadow: 0 -18px 0 0 #60c0ee, 12.727926px -12.727926px 0 0 #60c0ee, 18px 0 0 -5px rgb(152 128 255 / 0%), 12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), 0 18px 0 -5px rgb(152 128 255 / 0%), -12.727926px 12.727926px 0 -5px rgb(152 128 255 / 0%), -18px 0 0 -5px rgb(152 128 255 / 0%), -12.727926px -12.727926px 0 0 #60c0ee;
	}
}


.dot-spin.dot-spin-white {
	animation: dot-spin-white 1.5s infinite linear;
}

.dot-spin.dot-spin-skyblue {
	animation: dot-spin-skyblue 1.5s infinite linear;
}