@charset "utf-8";
/* CSS Document */
/*block_ui style*/
/*加!important覆寫原本樣式*/
.blockOverlay {
	background-color: #fff !important; /*白色底，視自己需求看要不要加*/
	cursor: default !important; /*預設游標*/
}
/*loading icon*/
.blockMsg {
	width: 100px; /*width、height改變圓的直徑大小*/
	height: 100px;
	display: inline-block !important;
	animation: container-rotate 1568ms linear infinite;
}

.spinner-layer {
	height: 100%;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4,0,0.2,1) infinite both;
}

.circle-clipper {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

	.circle-clipper .circle {
		box-sizing: border-box;
		width: 200%;
		border-width: 7px; /*線條粗細*/
		border-style: solid;
		border-color: #CCC;
		border-bottom-color: transparent !important;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.circle-clipper.left .circle {
		left: 0;
		border-right-color: transparent !important;
		animation: left-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
	}

	.circle-clipper.right .circle {
		border-left-color: transparent !important;
		animation: right-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
	}

/*定義動畫*/
@keyframes container-rotate {
	to {
		transform: rotate(360deg)
	}
}

@keyframes fill-unfill-rotate {
	12.5% {
		transform: rotate(135deg)
	}

	25% {
		transform: rotate(270deg)
	}

	37.5% {
		transform: rotate(405deg)
	}

	50% {
		transform: rotate(540deg)
	}

	62.5% {
		transform: rotate(675deg)
	}

	75% {
		transform: rotate(810deg)
	}

	87.5% {
		transform: rotate(945deg)
	}

	to {
		transform: rotate(1080deg)
	}
}

@keyframes left-spin {
	from {
		transform: rotate(130deg)
	}

	50% {
		transform: rotate(-5deg)
	}

	to {
		transform: rotate(130deg)
	}
}

@keyframes right-spin {
	from {
		transform: rotate(-130deg)
	}

	50% {
		transform: rotate(5deg)
	}

	to {
		transform: rotate(-130deg)
	}
}