.chgContainer *
{	--dort-board-colour: #000000;
	--dort-boardbg-colour: #CCCCCC;
	--dort-start-colour: #0036F1;
	--dort-other-colour: #CCCC00;
	--dort-start-last-colour: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='%23CCCC00' /%3E%3C/svg%3E");
	--dort-other-last-colour: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='%230036F1' /%3E%3C/svg%3E");
}

.dortHeader .dortHeaderPlayerColour
{	display: inline-block;
	padding: 5px 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.dortHeader.dortHeaderPlayerColourBlue .dortHeaderPlayerColour
{	color: var(--dort-start-colour);
	background-color: var(--dort-boardbg-colour);
}
.dortHeader.dortHeaderPlayerColourYellow .dortHeaderPlayerColour
{	color: var(--dort-other-colour);
	background-color: var(--dort-board-colour);
}

.dortBoard
{	width: 700px;
	padding: 30px 0px 10px;
	text-align: center;
	margin: auto;
}
.dortBoard .dortColumn
{	width: 100px;
	height: 600px;
	background: var(--dort-boardbg-colour);
	float: left;
	position: relative;
}
.dortBoard .dortColumn .dortSquare
{	width: 100px;
	height: 100px;
	position: relative;
}
.dortBoard .dortColumn .dortSquare .dortSquareMask
{	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cpath d='M0 0 h300 v300 h-300z M 150, 150 m 100, 0 a 100,100 0 1,0 -200,0 a 100,100 0 1,0 200,0' fill='%23000' /%3E%3C/svg%3E");
	background-size: 100%;
	z-index: 200;
	position: absolute;
	top: 0px;
	left: 0px;
}
.dortBoard .dortColumn .dortSquare .dortSquareUsedDisplay
{	width: 100%;
	height: 100%;
	z-index: 199;
	position: absolute;
	top: 0px;
	left: 0px;
	background-size: 100%;
}
.dortBoard .dortColumn .dortSquare.dortUsedLast.dortUsedBlue .dortSquareUsedDisplay
{	background-image: var(--dort-start-last-colour);
}
.dortBoard .dortColumn .dortSquare.dortUsedLast.dortUsedYellow .dortSquareUsedDisplay
{	background-image: var(--dort-other-last-colour);
}
.dortPiece
{	position: absolute;
	left: 0px;
	top: -50px;
	width: 100px;
	height: 100px;
	z-index: 198;
}
.dortPieceInner
{	position: absolute;
	left: 10px;
	top: 10px;
	width: 80px;
	height: 80px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
}
	
.dortPiece.dortPiece_Yellow .dortPieceInner
{	background-color: var(--dort-other-colour);
}
.dortPiece.dortPiece_Blue .dortPieceInner
{	background-color: var(--dort-start-colour);
}
.dortHeader
{	margin-bottom: 10px;
	text-align: center;
	font-size: 24px;
}

.dortGameOver
{	margin-bottom: 10px;
	text-align: center;
	font-size: 24px;
}

@media (max-width: 767px)
{	
}
@media (max-width: 440px)
{	
}