@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.b6pgxrrsua.bundle.scp.css';

/* _content/DMD.Web/Components/Custom/Loader4Dot.razor.rz.scp.css */
.loader[b-pooodoak3g] {
	position: relative;
	width: 100px;
	height: 16px;
}

	.loader[b-pooodoak3g]:before, .loader[b-pooodoak3g]:after {
		content: "";
		position: absolute;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 32px 0 #fff;
		left: 0;
		top: 0;
		animation: ballMoveX-b-pooodoak3g 2s linear infinite;
	}

	.loader[b-pooodoak3g]:after {
		box-shadow: none;
		transform: translateX(64px) scale(1);
		z-index: 2;
		animation: none;
		animation: trfLoader-b-pooodoak3g 2s linear infinite;
	}

@keyframes trfLoader-b-pooodoak3g {
	0%, 5% {
		transform: translateX(64px) scale(1);
		background: #FFF;
	}

	10% {
		transform: translateX(64px) scale(1);
		background: #ff3d00;
	}

	40% {
		transform: translateX(32px) scale(1.5);
		background: #ff3d00;
	}

	90%, 95% {
		transform: translateX(0px) scale(1);
		background: #ff3d00;
	}

	100% {
		transform: translateX(0px) scale(1);
		background: #FFF;
	}
}

@keyframes ballMoveX-b-pooodoak3g {
	0%, 10% {
		transform: translateX(0)
	}

	90%, 100% {
		transform: translateX(32px)
	}
}