/* wui-loader */

.wui-loader,
.wui-loader::after,
.wui-loader div,
.wui-loader div::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* wui-loader ring */

.wui-loader.ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.wui-loader.ring div {
	--animation: wui-loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid var(--wui-loader-color);
	border-color: var(--wui-loader-color) transparent transparent transparent;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.ring div:nth-child(1) {
	--delay: -0.45s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.ring div:nth-child(2) {
	--delay: -0.3s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.ring div:nth-child(3) {
	--delay: -0.15s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
@-webkit-keyframes wui-loader-ring {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes wui-loader-ring {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@keyframes wui-loader-ring {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/* wui-loader dualring */

.wui-loader.dualring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.wui-loader.dualring:after {
	--animation: wui-loader-dualring 1.2s linear infinite;
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 6px solid var(--wui-loader-color);
	border-color: var(--wui-loader-color) transparent var(--wui-loader-color) transparent;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
@-webkit-keyframes wui-loader-dualring {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes wui-loader-dualring {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@keyframes wui-loader-dualring {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/* wui-loader spinner */

.wui-loader.spinner {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	color: official;
}
.wui-loader.spinner div {
	--animation: wui-loader-spinner 1.2s linear infinite;
	--origin: 40px 40px;
	-webkit-transform-origin: var(--origin);
	-moz-transform-origin: var(--origin);
	transform-origin: var(--origin);
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.spinner div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 37px;
	width: 6px;
	height: 18px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 20%;
	background: var(--wui-loader-color);
}
.wui-loader.spinner div:nth-child(1) {
	--transform: rotate(0deg);
	--delay: -1.1s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(2) {
	--transform: rotate(30deg);
	--delay: -1s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(3) {
	--transform: rotate(60deg);
	--delay: -0.9s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(4) {
	--transform: rotate(90deg);
	--delay: -0.8s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(5) {
	--transform: rotate(120deg);
	--delay: -0.7s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(6) {
	--transform: rotate(150deg);
	--delay: -0.6s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(7) {
	--transform: rotate(180deg);
	--delay: -0.5s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(8) {
	--transform: rotate(210deg);
	--delay: -0.4s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(9) {
	--transform: rotate(240deg);
	--delay: -0.3s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(10) {
	--transform: rotate(270deg);
	--delay: -0.2s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(11) {
	--transform: rotate(300deg);
	--delay: -0.1s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.spinner div:nth-child(12) {
	--transform: rotate(330deg);
	--delay: 0s;
	-webkit-transform: var(--transform);
	-moz-transform: var(--transform);
	transform: var(--transform);
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
@-webkit-keyframes wui-loader-spinner {
	0% {-khtml-opacity: 1;}
	100% {-khtml-opacity: 0;}
}
@-moz-keyframes wui-loader-spinner {
	0% {-moz-opacity: 1;}
	100% {-moz-opacity: 0;}
}
@keyframes wui-loader-spinner {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

/* wui-loader roller */

.wui-loader.roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.wui-loader.roller div {
	animation: wui-loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}
.wui-loader.roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -4px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: var(--wui-loader-color);
}
.wui-loader.roller div:nth-child(1) {
	--delay: -0.036s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}
.wui-loader.roller div:nth-child(2) {
	--delay: -0.072s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}
.wui-loader.roller div:nth-child(3) {
	--delay: -0.108s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}
.wui-loader.roller div:nth-child(4) {
	--delay: -0.144s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
}
.wui-loader.roller div:nth-child(5) {
	--delay: -0.18s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}
.wui-loader.roller div:nth-child(6) {
	--delay: -0.216s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}
.wui-loader.roller div:nth-child(7) {
	--delay: -0.252s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}
.wui-loader.roller div:nth-child(8) {
	--delay: -0.288s;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}
@-webkit-keyframes wui-loader-roller {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}  
@-moz-keyframes wui-loader-roller {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}  
@keyframes wui-loader-roller {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}  

/* wui-loader ellipsis */

.wui-loader.ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.wui-loader.ellipsis div {
	--animation-timing-function: cubic-bezier(0, 1, 1, 0);
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: var(--wui-loader-color);
	-webkit-animation-timing-function: var(--animation-timing-function);
	-moz-animation-timing-function: var(--animation-timing-function);
	animation-timing-function: var(--animation-timing-function);
}
.wui-loader.ellipsis div:nth-child(1) {
	--animation: wui-loader-ellipsis1 0.6s infinite;
	left: 8px;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.ellipsis div:nth-child(2) {
	--animation: wui-loader-ellipsis2 0.6s infinite;
	left: 8px;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.ellipsis div:nth-child(3) {
	--animation: wui-loader-ellipsis2 0.6s infinite;
	left: 32px;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.ellipsis div:nth-child(4) {
	--animation: wui-loader-ellipsis3 0.6s infinite;
	left: 56px;
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
@-webkit-keyframes wui-loader-ellipsis1 {
	0% {-webkit-transform: scale(0);}
	100% {-webkit-transform: scale(1);}
}
@-moz-keyframes wui-loader-ellipsis1 {
	0% {-moz-transform: scale(0);}
	100% {-moz-transform: scale(1);}
}
@keyframes wui-loader-ellipsis1 {
	0% {transform: scale(0);}
	100% {transform: scale(1);}
}
@-webkit-keyframes wui-loader-ellipsis2 {
	0% {-webkit-transform: translate(0, 0);}
	100% {-webkit-transform: translate(24px, 0);}
}
@-moz-keyframes wui-loader-ellipsis2 {
	0% {-moz-transform: translate(0, 0);}
	100% {-moz-transform: translate(24px, 0);}
}
@keyframes wui-loader-ellipsis2 {
	0% {transform: translate(0, 0);}
	100% {transform: translate(24px, 0);}
}
@-webkit-keyframes wui-loader-ellipsis3 {
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0);}
}
@-moz-keyframes wui-loader-ellipsis3 {
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0);}
}
@keyframes wui-loader-ellipsis3 {
	0% {transform: scale(1);}
	100% {transform: scale(0);}
}

/* wui-loader grid */

.wui-loader.grid {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.wui-loader.grid div {
	--animation: wui-loader-grid 1.2s linear infinite;
	position: absolute;
	width: 16px;
	height: 16px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: var(--wui-loader-color);
	-webkit-animation: var(--animation);
	-moz-animation: var(--animation);
	animation: var(--animation);
}
.wui-loader.grid div:nth-child(1) {
	--delay: 0s;
	top: 8px;
	left: 8px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(2) {
	--delay: -0.4s;
	top: 8px;
	left: 32px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(3) {
	--delay: -0.8s;
	top: 8px;
	left: 56px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(4) {
	--delay: -0.4s;
	top: 32px;
	left: 8px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(5) {
	--delay: -0.8s;
	top: 32px;
	left: 32px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(6) {
	--delay: -1.2s;
	top: 32px;
	left: 56px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(7) {
	--delay: -0.8s;
	top: 56px;
	left: 8px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(8) {
	--delay: -1.2s;
	top: 56px;
	left: 32px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
.wui-loader.grid div:nth-child(9) {
	--delay: -1.6s;
	top: 56px;
	left: 56px;
	-webkit-animation-delay: var(--delay);
	-moz-animation-delay: var(--delay);
	animation-delay: var(--delay);
}
@-webkit-keyframes wui-loader-grid {
	0%, 100% {-khtml-opacity: 1;}
	50% {-khtml-opacity: 0.5;}
}
@-moz-keyframes wui-loader-grid {
	0%, 100% {-moz-opacity: 1;}
	50% {-moz-opacity: 0.5;}
}
@keyframes wui-loader-grid {
	0%, 100% {opacity: 1;}
	50% {opacity: 0.5;}
}