@font-face {
	font-family: 'ChessAlpha';
	src: url('../fonts/ChessAlpha.woff2') format('woff2'),
		url('../fonts/ChessAlpha.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.jBox-container {
	opacity: .8;
	font-family: 'Allan', cursive;
	font-size: x-large;
}
.chessfont {
	font-family: 'ChessAlpha';
}
.gray {
	filter: grayscale();
}
.lightgray {
	filter: grayscale(40%);
}
.captured_piece {
	width:5%;
}
.chessmove {
	color:black;
	font-family: 'Bubblegum Sans', cursive;
	*-webkit-text-stroke: 5px black;
	font-size:150%;
}
.zoom_over
{
	position: relative;
	-webkit-transition: all 200ms ease-in;
	-webkit-transform: scale(1); 
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(1); 
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(1);
	transition: all 200ms ease-in;
	transform: scale(1);   

}
.zoom_over:hover
{
	z-index: 2;
	-webkit-transition: all 200ms ease-in;
	-webkit-transform: scale(0.95);
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(0.85);   
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(0.95);
	transition: all 200ms ease-in;
	transform: scale(0.95);
}

.btn {
	margin-bottom:10px;
	margin-top:10px;
	border-radius: 15px;
	font-family: 'Bubblegum Sans', cursive;
}
.mainfont {
	font-family: 'Bubblegum Sans', cursive;
	font-size:200%;
}
.handredfont {
	font-family: 'Allan', cursive;
	color: red;
}
.handfont {
	font-family: 'Allan', cursive;
	color: black;
}
.wallpaper {
	-webkit-transition:all linear 0.25s;
	transition:all linear 0.25s;
	border-style: solid;
	border-width: 1px;
	padding: 10px;
	border-radius: 15px;
	background-image: url(../images/symphony.png);
}
.wallpaper.ng-hide {
	opacity:0;
	transform: scale(0,1);
}
.shadow {
	box-shadow: 6px 6px 20px #888888;
}
.module {
	-webkit-transition:all linear 0.25s;
	transition:all linear 0.25s;
	padding: 10px;
}
.module.ng-hide {
	opacity:0;
	transform: scale(0,0);
}
.bchinese {
	vertical-align: text-middle;
	font-family: 'Bubblegum Sans', cursive;
	margin: 13px;
	font-size:150%;
}
.mchinese {
	vertical-align: text-middle;
	font-family: 'Bubblegum Sans', cursive;
	margin: 13px;
	font-size:110%;
}
.schinese {
	vertical-align: text-middle;
	font-family: 'Bubblegum Sans', cursive;
	font-size:85%;
}
.question {
	/*font-style: italic;*/
}
.orange {
	text-decoration : underline;
	text-decoration-color: orange;
}
.good {
	background-color: yellow;
}
.error {
	background-color: red;
	color: white;
	border-radius: 10px;
}
.wrong {
	text-decoration: line-through;
}
.padding {
	padding: 10px;
}
.spadding {
	padding: 4px;
}
.bordered {
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	border-radius: 10px;
	background-color: white;
}
.whitemargin {
	padding: 4px;
	border-radius: 10px;
	background-color: white;
	opacity: .7;
}
.module {
	color: white;
	border-radius: 10px;
	padding: 8px;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: black;
}
a:link {
	text-decoration: none;
}
.highlight-white {
	box-shadow: inset 0 0 10px 10px yellow;
}
.highlight-black {
	box-shadow: inset 0 0 10px 10px red;
}

.cbtnActive {
	animation: filter-rotate 15s infinite;
}
.cbtn:active {
	animation: filter-shake 1s infinite;
}
.cbtn:hover {
	filter: sepia(100%);
	animation: filter-shake 1s infinite;
}
.cbtnBusy {
	animation: filter-spin 1s infinite;
}
.shaking {
	animation: filter-shake 5s infinite;
}
.shaking2 {
	animation: filter-shake 4.5s infinite;
}
.shaking3 {
	animation: filter-shake 5.5s infinite;
}

@keyframes filter-spin { 
	0%   { transform: rotate(360deg); }
	50%  { transform: rotate(-180deg); }
}
@keyframes filter-shake { 
	0%   { transform: rotate(4deg); }
	10%  { transform: rotate(-4deg); }
	20%  { transform: rotate(2deg); }
	30%  { transform: rotate(-2deg); }
	100%  { transform: rotate(0deg); }
}
@keyframes filter-rotate { 
	0%   { transform: rotate(360deg); }
	10% { transform: rotate(360deg); }
	20% { transform: rotate(0deg); }
}

textarea {
	font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.board_canvas {
	padding: 2px;position:absolute;left:0;top:0;
}

.border_red {
	border:3px; border-style:solid; border-color:red;border-radius: 15px;
}

.border_orange {
	border:3px; border-style:solid; border-color:orange;border-radius: 15px;
}

.border_yellow {
	border:3px; border-style:solid; border-color:yellow;border-radius: 15px;
}

.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid {
	fill: red;
}

.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid {
	fill: orange;
}

.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid {
	fill: yellow;
}

.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid {
	fill: white;
}

.piece-417db:hover {
	/*animation: filter-shake 5s;*/
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
	filter: sepia(100%);
}