/* inpbox */
.uic-inpbox,
.uic-inpbox select{
	font-size:16px;
	line-height:1;
}
.uic-inpbox{
	display:table-cell;
	padding:0 10px;
	padding-top:1px;
	height:36px;
	border:1px solid #ccc;
	text-align:left;
	vertical-align:middle;
	overflow:hidden;
}
@media (min-width:769px){
	.uic-inpbox{
		font-family:"Menlo","Consolas","Courier New";
	}
}
/* disabled */
.uic-disable{
	visibility:hidden;
}
.scopeXYZ .cgt-card-slot{
	position:relative;
	perspective:600px;
}
.scopeXYZ .cgt-card-slot-top{
	z-index:10;
}
.scopeXYZ .cgt-card-radiate{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0;
	border:1px solid white;
	animation-name:kf-card-radiate;
	animation-iteration-count:1;
	animation-duration:2s;
	animation-timing-function:ease;
}
.scopeXYZ .cgt-card-radiate[data-idx="0"]{
	animation-delay:0s;
}
.scopeXYZ .cgt-card-radiate[data-idx="1"]{
	animation-delay:0.3s;
}
.scopeXYZ .cgt-card-radiate[data-idx="2"]{
	animation-delay:0.6s;
}
.scopeXYZ .cgt-card-radiate[data-idx="3"]{
	animation-delay:0.9s;
}
.scopeXYZ .cgt-card-radiate[data-idx="4"]{
	animation-delay:1.2s;
}
@keyframes kf-card-radiate{
	0%{
		transform:scale(1);
		opacity:1;
	}
	100%{
		transform:scale(1.3);
		opacity:0;
	}
}
/* body */
.cgt-card-body{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	transition:opacity 1.5s,transform 0.3s;
	transform-style:preserve-3d;
}
/* body-hidden */
.cgt-control.cgt-card-body-hidden .cgt-card-body{
	opacity:0;
}
/* body x cstate */
.cgt-card-body.cgt-cstate-init{
	cursor:pointer;
}
.cgt-card-body.cgt-cstate-wait{
	cursor:wait;
}
.cgt-card-body.cgt-cstate-hit,
.cgt-card-body.cgt-cstate-miss{
	cursor:default;
}
/* body-(animation step) */
.cgt-card-body.cgt-card-body-flip{
	transition:transform 2s;
	transform:rotateY(180deg);
}
.cgt-card-body.cgt-card-body-shake{
	animation-name:kf-card-body-shake;
	animation-iteration-count:8;
	animation-duration:0.15s;
	animation-timing-function:ease;
}
@keyframes kf-card-body-shake{
	0%{
		left:0;
		right:0;
	}
	25%{
		left:4px;
		right:-4px;
	}
	75%{
		left:-4px;
		right:4px;
	}
	100%{
		left:0;
		right:0;
	}
}
.cgt-card-body.cgt-card-body-flipback{
	transition:transform 1.5s;
	transform:rotateY(0);
}
.cgt-card-body.cgt-card-body-erase{
	transition:opacity 0.6s;
	opacity:0.5;
}
/* front & back */
.cgt-card-front,
.cgt-card-back{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:white;
	border:1px solid #ccc;
	border-radius:5px;
	backface-visibility:hidden;
	transition:transform 0.3s;
}
.cgt-card-front{
	transform:rotateY(180deg);
}
@media (hover:hover){
	.cgt-cstate-init .cgt-card-back:hover{
		transform:scale(1.07);
	}
	.cgt-cstate-init .cgt-card-back:active{
		transform:scale(0.8);
	}
}
/* front-pic & back-pic */
.cgt-card-front-pic,
.cgt-card-back-pic{
	position:absolute;
	top:10px;
	bottom:10px;
	left:10px;
	right:10px;
	border-radius:3px;
}
/* back-pic */
.cgt-card-body.cgt-card-body-erase .cgt-card-back-pic{
	transition:opacity 0.6s;
	opacity:0;
}
.scopeXYZ .cgt-card-fly{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border:1px solid white;
	background:rgba(255,255,255,0.3);
	transition:opacity 1.5s;

	animation-iteration-count:1;
	animation-duration:2s;
	animation-timing-function:ease;
	animation-fill-mode:backwards;
}
.scopeXYZ .cgt-control.cgt-card-fly-end .cgt-card-fly{
	opacity:0;
}
.scopeXYZ .cgt-table{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
	grid-column-gap:20px;
	grid-row-gap:20px;
}
.scopeXYZ .cgt-control{
	padding:20px;
}