/* control */
.scopeXYZ .abc-control{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.4);
	overflow:hidden;
	cursor:pointer;
}
.scopeXYZ .abc-control.abc-hide{
	display:none;
}
/* box */
.scopeXYZ .abc-box{
	position:absolute;
	top:0%;
	left:0;
	right:0;
	transform:translate(0,-100%);
	color:white;
	background:rgba(0,0,0,0.75);
	text-align:center;
	overflow:hidden;
}
.scopeXYZ .abc-box-black{
	background:rgba(0,0,0,0.75);
}
.scopeXYZ .abc-box-white{
	color:black;
	background:rgba(255,255,255,0.75);
}
.scopeXYZ .abc-box-red{
	background:rgba(128,0,0,0.75);
}
.scopeXYZ .abc-box-green{
	background:rgba(0,128,0,0.75);
}
.scopeXYZ .abc-box-blue{
	background:rgba(128,128,255,0.75);
}
.scopeXYZ .abc-control .abc-box{
	animation-name:kf-abc-box;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-duration:8s;
}
.scopeXYZ .abc-control.abc-hide .abc-box{
	animation-name:none;
}
@keyframes kf-abc-box{
	100%{
		top:100%;
		transform:translate(0,0);
	}
}
/* radiate */
.scopeXYZ .abc-radiate{
	position:absolute;
	bottom:0%;
	left:0%;
	transform:translate(-50%,-50%);
	width:10px;
	height:10px;
	border-radius:50%;
	box-shadow:0 0 10px 3px white;
}
.scopeXYZ .abc-control .abc-radiate{
	animation-name:kf-abc-radiate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-duration:5s;
}
.scopeXYZ .abc-control.abc-display .abc-radiate{
	animation-name:none;
}
@keyframes kf-abc-radiate{
	0%{
		transform:translate(-50%,-50%) scale(1);
		opacity:0;
	}
	30%{
		opacity:1;
	}
	100%{
		transform:translate(-50%,-50%) scale(100);
		opacity:0;
	}
}
/* tbl */
.scopeXYZ .abc-tbl{
	display:table;
	width:100%;
}
.scopeXYZ .abc-side,
.scopeXYZ .abc-msg{
	display:table-cell;
	vertical-align:middle;
}
.scopeXYZ .abc-side{
	width:50px;
	text-align:center;
}
.scopeXYZ .abc-msg{
	padding:12px 18px;
	padding-top:13px;
	font-size:16px;
	line-height:1.5;
	letter-spacing:0.05em;
	text-align:left;
}
/* close */
.scopeXYZ .abc-close{
	display:inline-block;
	position:relative;
	top:1px;
	width:32px;
	height:32px;
	vertical-align:middle;
}
