/*
    CSS for loading spinner
*/

#beon-spinner {
	background-color: var(--box-background);
	bottom: 0;
	opacity: 0.6;
	right: 0;
	z-index: 999999;
	width: auto !important;
	height: auto !important;
	top: 0 !important;
	left: 0 !important;
	position: fixed !important;
	display: none;
}

#beon-spinner:after {
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	border-radius: 50%;
	content: "";
	width: 90px;
	height: 90px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -20;
	transform: translate(-50%, -50%);
	margin-top: -40px;
}

#beon-spinner .beon-spinner-content {
	border-top: 10px solid rgb(255, 255, 255);
	border-right: 10px solid #ffffff;
	border-bottom: 10px solid rgb(255, 255, 255);
	font-size: 10px;
	margin: -100px auto 0;
	text-indent: -9999em;
	border-left: 10px solid var(--button-color);
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: beonrotate 1.2s infinite linear;
	animation: beonrotate 1.2s infinite linear;
	top: 50% !Important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	position: absolute;
	box-sizing: border-box;
}

@keyframes beonrotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}