/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	display:inline-block;
	background-color:#2072be;
	background:linear-gradient(to top left, #2072be, #8ebce7);

	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:1;
	/* cut off sticking-out corners for chrome */
	overflow:hidden;
	z-index:0;
	border-radius:5px;
}
.%css-ctar% .aiin-btn.aiin-sel {
}
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:default;
}
/* btn-inner */
.%css-ctar% .aiin-btn-inner {
	position:relative;
	margin:10px;
	width:100px;
	height:100px;
	overflow:hidden;
}
/* mlight-rail */
.%css-ctar% .aiin-mlight-rail {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:2px solid rgba(255,255,255,0.5);
}
/* mlight */
.%css-ctar% .aiin-mlight {
	position:absolute;
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 3px 0px #fff;
	visibility:hidden;

	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-duration:1.2s;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-mlight {
	animation-play-state:running;
}
.%css-ctar% .aiin-mlight-top,
.%css-ctar% .aiin-mlight-bottom {
	width:22.5px;
	height:2px;
}
.%css-ctar% .aiin-mlight-top {
	top:0;
	left:0;
	animation-delay:0s;
	animation-name:%css-ctar%-kf-mlight-top-hover;
}
@keyframes %css-ctar%-kf-mlight-top-hover {
	0.1% {
		visibility:visible;
	}
	26.5% {
		visibility:hidden;
		top:0;
		left:100%;
	}
}
.%css-ctar% .aiin-mlight-bottom {
	bottom:0;
	right:0;
	animation-delay:0.6s;
	animation-name:%css-ctar%-kf-mlight-bottom-hover;
}
@keyframes %css-ctar%-kf-mlight-bottom-hover {
	0% {
		visibility:visible;
	}
	26.5% {
		visibility:hidden;
		bottom:0;
		right:100%;
	}
}
.%css-ctar% .aiin-mlight-right,
.%css-ctar% .aiin-mlight-left {
	width:2px;
	height:22.5px;
}
.%css-ctar% .aiin-mlight-right {
	right:0;
	top:0;
	animation-delay:0.3s;
	animation-name:%css-ctar%-kf-mlight-right-hover;
}
@keyframes %css-ctar%-kf-mlight-right-hover {
	0% {
		visibility:visible;
	}
	26.5% {
		visibility:hidden;
		right:0;
		top:100%;
	}
}
.%css-ctar% .aiin-mlight-left {
	left:0;
	bottom:0;
	animation-delay:0.9s;
	animation-name:%css-ctar%-kf-mlight-left-hover;
}
@keyframes %css-ctar%-kf-mlight-left-hover {
	0% {
		visibility:visible;
	}
	26.5% {
		visibility:hidden;
		left:0;
		bottom:100%;
	}
}
/* label */
.%css-ctar% .aiin-label-ctar {
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
	line-height:0;
	opacity:0.3;

	animation-name:%css-ctar%-kf-label-ctar-hover;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-duration:1s;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-label-ctar {
	animation-play-state:running;
}
.%css-ctar% .aiin-label-ctar-1 {
	animation-delay:0s;
}
.%css-ctar% .aiin-label-ctar-2 {
	animation-delay:0.3s;
}
@keyframes %css-ctar%-kf-label-ctar-hover {
	50% {
		opacity:1;
	}
}
.%css-ctar% .aiin-label-ctar-1 {
	top:7px;
}
.%css-ctar% .aiin-label-ctar-2 {
	bottom:7px;
}
.%css-ctar% .aiin-label {
	height:25px;
}
/* vcnt */
.%css-ctar% .aiin-vcnt-ctar {
	position:absolute;
	top:38px;
	left:0;
	width:100%;
	height:20px;
	line-height:20px;
	text-align:center;
	vertical-align:middle;
	background:linear-gradient(to right,
		rgba(255,255,255,0.5),
		rgba(255,255,255,0.3) 50%,
		rgba(255,255,255,0.5));
	overflow:hidden;
}
.%css-ctar% .aiin-vcnt {
	font-size:15px;
	color:white;
	text-shadow:1px 1px 1px #2072be;
}
/* check */
.%css-ctar% .aiin-check {
	position:absolute;
	top:3px;
	width:15px;
	height:15px;
	opacity:0;
	transition:transform 1s cubic-bezier(.77,1.37,.84,1.1), opacity 1s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check {
	opacity:1;
	transform:rotateZ(0) translate(0,0);
}
.%css-ctar% .aiin-check-l {
	left:3px;
	background:url("%url-tpl%/img/check-l.png");
	background-size:100% 100%;
	transform:rotateZ(-30deg) translate(0,-30px);
}
.%css-ctar% .aiin-check-r {
	right:3px;
	background:url("%url-tpl%/img/check-r.png");
	background-size:100% 100%;
	transform:rotateZ(30deg) translate(0,-30px);
}