html,body {
	margin: 0px; 
	padding:0px;
	font-family: Arial;
    /*font-size: 2.1vh;*/
	width:100%;
	height:100%;
}
html,body { 
	line-height:10vh; 
}
/*
@media (max-aspect-ratio: 100/100) and (min-height: 800px){ 
	html,body { 
		font-size: 2vh; 
	} 
}

@media (min-width: 1200px) and (min-aspect-ratio: 100/100) { 
	html,body { 
		font-size: 14px; 
	} 
}

@media (max-aspect-ratio: 100/100) and (max-width: 450px){ 
	html,body { 
		font-size: 12px; 
	} 
}

@media (max-aspect-ratio: 100/100) {
	.modal-dialog {
		max-width: 100vw;
	}
}
*/

/* START OF NEW GRID LAYOUT */
.grid-container {
  line-height:1.2em; 
  margin:0 auto;
  height:90vh; 
  width:100%;
  display: grid;
  grid-template-areas: "title engine" "board stats" "board comment" "navigation comment";
/*  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 6em 1fr 1fr 4em; */
  grid-template-columns: 72vh 72vh; 
  grid-template-rows: 10vh 36vh 36vh 10vh; 
  row-gap: 0px; 
  column-gap: 5px; 
}
@media (min-aspect-ratio: 100/100) {
	.grid-container {
		max-width: 144vh;
	}
}
.game-title-div {
	display:block;
	height:100%; 
	width:100%;
	display: flex; 
	align-items: center;
	justify-content: center;
}
.game-board {
  grid-area: board;
  aspect-ratio: 1 / 1;
  width: min(100%, 72vh);
  justify-self: center;
  align-self: start;
}
.game-board-navigation {
	height:100%; 
	width:100%;
	display: flex; 
	flex-wrap: nowrap; 
	flex-direction: row; 
	align-items: center;
/*	justify-content: flex-start;*/
/*	border:1px solid red; */
}
.game-board-navigation > * {
	flex:1;
	margin: 2px 1px;
}
.game-engine-div {
	height:100%; 
}
.div-stats {
	text-align:left;
	padding:10px; 
	height:100%; 
	overflow: auto;
	border: 1px solid black;
	font-size: max(0.8em, 0.2rlh);
	line-height: max(0.85em, 0.3rlh);
}
.game-move-comment {
	text-align:left;
	padding:10px; 
	height:100%; 
	overflow: auto;
	border: 1px solid black;
	font-size:max(0.85em, 0.3rlh);
	line-height:max(0.9em, 0.4rlh);
}

.mark-circle {
	font-size: 9vh;
}

@media (max-aspect-ratio: 100/100) {
	.grid-container {
		grid-template-areas: "title engine" "board stats" "navigation stats" "comment comment";
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: 6em 50vw 4em 1fr; 
		
		grid-template-areas: "title" "engine" "board" "stats" "comment" "navigation";
		grid-template-columns: 100vw; 
		grid-template-rows: 5em 5em min(50vh, 100vw) 1fr 1fr 3em; 
		
	}
	.game-board {
		max-width: 50vh;
	}
	/*
	.game-move-stats {
		font-size:0.1rlh;
		line-height:0.15rlh; 
	}
	*/
	.game-move-comment {
	/*	font-size:0.15rlh;
		line-height:0.2rlh; */
		column-count: 2;
		column-fill: auto;
	}
/*	
	.game-board-navigation > button {
		font-size: 2em;
	}
	.game-board-navigation > div > button {
		font-size: 2em;
	}
*/	
	.game-board-navigation .game-goForward {
		font-size: 2em;
	}
	.game-board-navigation .btn {
		padding: 0.5em 0.2em;
	}
	.mark-circle {
		font-size: 4vh;
	}
}

@media (max-width: 600px) {
	.grid-container {
		grid-template-areas: "title" "engine" "board" "stats" "navigation";
		grid-template-columns: 100vw; 
		grid-template-rows: 5em 5em min(50vh, 100vw) 1fr 3em; 
		
	}
	.game-move-comment {
		display: none;
	}
}


@media (max-aspect-ratio: 100/100) and (min-width: 700px) {
	.grid-container {
		grid-template-areas: "title engine" "board stats" "navigation stats" "comment comment";
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: 6em 50vw 4em 1fr; 
		
		grid-template-areas: "title engine" "board stats" "comment comment" "navigation navigation";
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: 6em 50vw 1fr 4em; 
		
	}
	.game-move-stats {
		font-size:0.1rlh;
		line-height:0.15rlh; 
	}
	.game-move-comment {
		font-size:0.15rlh;
		line-height:0.2rlh;
		column-count: 2;
		column-fill: auto;
	}
	.game-board-navigation > button {
		font-size: 2em;
	}
	.game-board-navigation > div > button {
		font-size: 2em;
	}
	.mark-circle {
		font-size: 4vh;
	}
}




.game-template, .html-template {
	display:none;
}


button {
	background: #339af0;
	color: #FFFFFF;
	padding: 5px 10px ;
}

button.exclamation {
	background: #f03333;
}

table.lichess-games {
	width:100%;
	font-size: 0.8em;
	border-spacing: 0;
    border-collapse: collapse;
	line-height:0.1rlh;
}
table.lichess-games td {
	padding: 2px;
}

.stat-circle {
  width: 1em;
  height: 1em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-svg {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.tab-active {
	border-bottom: 3px solid black;
	  border-bottom-right-radius: 25% !important;
	  border-bottom-left-radius: 25% !important;
}

.border-1 {
	border-width: 1px !important;
}

.border-2 {
	border-width: 2px !important;
}

.border-3 {
	border-width: 3px !important;
}

.games-menu {
	display: flex !important;
	flex-wrap: nowrap;	
}

.games-menu div {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

.drop-custom.dropdown-toggle::after {
  position: absolute;
  bottom: 5px;
  right: -8px; 
  color: rgba(0,0,0,0.3);

}