HTML,
BODY {
	margin: 0px;
	padding: 0px;
}

BODY {
	font-family: Arial;
/*	background: linear-gradient(to right, black 0%, #572222 10%, #572222 80%, black 90%, black 100%);*/
	background: linear-gradient(to right, black 0%, #572222 10%, #572222 90%, black 100%);
	height: 100svh;
}

.GameButton {
	background-color: #8fc5f5;
	border: 1px solid #000055;
	max-width: 200px;
	cursor: pointer;

	padding: 20px 0px;
	text-align: center;
}

.GameButton:hover {
	background-color: #AFE5FF;
}

#Game {
	width: 70svw;
	height: 100svh;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

#Game > DIV {
	flex: 1 1 100%;
}

#WordList,
#Board,
#Solution,
#Toolbar {
	margin-bottom: 20px;
	display:none;
}

#WordList,
#Toolbar {
	width: 100%;
}

#Board,
#Solution {
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
	width: 400px;
}

#WordList {
	display: flex;
	flex-wrap: wrap;

/*	max-width: 1000px;*/
	max-height: 200px;

	padding-top: 20px;
/*	margin-left: auto;*/
/*	margin-right: auto;*/
/*	margin-bottom: 20px;*/
	overflow-y: auto;

	justify-content: space-between;
	align-content: flex-start;
}

#WordList > DIV {
	padding: 3px;
	font-size: 8pt;
	color: #CCCCCC;
	border: 1px solid transparent;
}

#WordList > DIV.Selected {
	background-color: #c76666;
	border-color: black;
	color: white;
}

#Board > DIV {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#Toolbar {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 80px;
}

#Toolbar > DIV {
	display: none;
	padding: 20px 40px;
}

#CounterNumber,
#CounterMessage {
	color: white;
}

#CounterNumber {
	font-size: 40pt;
}

#CounterMessage {
	font-size: 11pt;
	margin-bottom: 10px;
	text-align: center;
}

#History > DIV.HistoryBoard > DIV,
#Solution > DIV {
	display: flex;
	justify-content: center;
}

#Board > DIV > DIV,
#Solution > DIV > DIV,
#History > DIV.HistoryBoard > DIV > DIV {
	border-radius: 5px;
	margin: 5px;
	width: 80px;
	height: 80px;
	font-size: 40pt;
	text-align: center;
	color: white;
	-webkit-text-stroke: 1px black;
}

#History > DIV.HistoryBoard > DIV > DIV,
#Solution > DIV > DIV {
	border: 1px solid #CCCCCC;
	z-index: 10;
}

#Solution > DIV > DIV.Gimme {
	cursor: pointer;
}

#Solution > DIV > DIV.InSolutionGimme:hover {
	background-color: #0bdb43 !important;
}

#Board > DIV > DIV {
	border: 1px solid white;
	z-index: 15;
	cursor: pointer;
	background-repeat: no-repeat;
/*	background-position: center;*/
	background-color:#874a56;
	background-position: right bottom;
	background-size: 30%
}

#Board > DIV > DIV.Selected {
	background-color: #c76666 !important;
}

#HistoryContainer {
	position: fixed;
/*	display: flex;*/
	overflow-y: auto;
	flex-direction: column;
	justify-content: flex-start;
	right: 0px;
	top: 0px;
	width: 120px;
	height: calc(100svh - 100px);
/*	min-height: 0px;*/ 

/*	background-color: rgba(56, 5, 22, 1);*/
/*	opacity: 0.3;*/
}

#HistoryContainer > DIV,
#HistoryContainer > DIV.HistoryBoard {
/*	display: flex;*/
	flex-direction: column;
	align-items: center;
}

#HistoryContainer > DIV {
	width: calc(100% - 20px);
}

#History {
/*	display: flex;*/
	flex-direction: column;
	justify-content: flex-end;
/*	overflow-y: auto;*/
/*	min-height: 0px;*/
/*	height: calc(100svh - 120px);*/
	width: 100%;
	z-index: 90;
}

#History > DIV {
	max-width: 80px;
	padding: 3px;
}

#HistoryContainer > DIV,
#History > DIV {
	margin-top: 10px;
}

#History > DIV.HistoryBoard {
	border: 1px solid white;
	border-radius: 10px;
}

#History > DIV.HistoryBoard > DIV > DIV {
	width: 15px;
	height: 15px;
	font-size: 9pt;
	margin: 2px;
	-webkit-text-stroke: unset;
}

#HistoryButton {
	display:none !important;
}

#NOBoard .Check1 {
	background-image: url(images/Icon_ArrowX.png);
}

#NOBoard .Check2 {
	background-image: url(images/Icon_ArrowY.png);
}

#NOBoard .Check3 {
	background-image: url(images/Icon_ArrowXY.png);
}

.Check4 {
/*	background-image: url(images/Icon_ArrowFound.png);*/
	background-color: #24a51b;
}

#History .Gimme,
#Solution .Gimme {
	background-color: #888888;
	color: #777777;
	-webkit-text-stroke: #666666;
}

#History .Gimme {
	color: black;
}

#History .InSolutionGimme,
#Solution .InSolutionGimme {
	background-color: #24a51b; /*#773344;*/
	color: #cccccc;
	-webkit-text-stroke: 1px black;
}

#CounterContainer {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	right: 0px;
	bottom: 0px;
	width: 70px;
	height: 100px;
	min-height: 0px;
}

#CounterContainer > DIV {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#CounterContainer > DIV {
	width: calc(100% - 20px);
}

#TutorialContainer,
#OverlayContainer {
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	margin: 0px;
	background-color: rgba(65, 5, 22, 0.8);
}

#TutorialContainer {
	z-index: 50;
}

#OverlayContainer {
	z-index: 40;
}

#Tutorial,
#Overlay {
	width: 100%;
	min-height: 30%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 25%;
	background-color: rgba(56, 5, 22, 1);
	padding: 20px;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	z-index: 50;
	color: white;
	border: 1px solid #774040;
}

#Overlay {
	text-align: center;
}

#Tutorial {
	text-align: justify;
}

#Tutorial > DIV,
#Overlay > DIV {
	color: white;
	width: 100%;
	flex-grow: 1;
}

#Tutorial > DIV {
	text-align: justify;
}

#Overlay > DIV {
}

#TutorialButton,
#HistoryButton {
	position: fixed;
	left: 0px;

	width: 60px;
	height: 60px;

	z-index: 45;

	background-size: cover;
	cursor: pointer;
}

#TutorialButton {
	background-image: url("images/Icon_Question.png");
	bottom: 0px;
}

#HistoryButton {
	background-image: url("images/Icon_History.png");
	bottom: 40px;
	display: none;
}

#Overlay > DIV:not(.OverlayMessage) {
}

#Overlay > DIV.GameButton {
	font-size: 16pt;
	margin: 0px 10px;
	min-width: 225px;
	color: black;
	border-radius: 40px;
}

.OverlayMessage {
	font-size: 40pt;
	color: white;
	width: 100%;
}

#Overlay > DIV.FullLine {
	width: 100%;
}

#DebugToolbar {
	position: fixed;
	bottom: 0px;
	top: 0px;
	height: 300px;

	background-color: rgba(200,200,200,0.6);
	z-index: 100;
}

#OverlayClose {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	width: auto;
	cursor: pointer;
	text-align: right !important;
}

.BarChart > DIV {
	display: flex;
	margin-bottom: 2px;
	align-items: center;
}

.BarChart > DIV > DIV {
/*	flex-grow: 1;*/
}

.BarChart > DIV > DIV:nth-child(1) {
	width: 48%;
	text-align: right;
	padding: 2px 10px 2px 2px;
/*	margin-bottom: 2px;*/
}

.BarChart > DIV > DIV:nth-child(2) {
	background-color: #BB3333;
	font-size: 8pt;
	padding: 2px;
}

.BarChart > DIV > DIV:nth-child(3) {
	background-color: blue;
	width: auto;
}

#Debug {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 400px;
	max-width: 1000px;
	background-color: #CCCCCC;
	border: 1px solid black;
	z-index:120;
}