#game .game-page {
	width: 100%;
	height: 100%;
	background-color: white;
}

*:focus-visible {
	outline: none;
}

#game .game-pause,
#game .game-end-screen,
#game .game-error-screen{
	height: 100%;
	overflow: hidden;
}

#game .game-settings,
#game .geheugentraining,
#game .pim-pam-pet,
#game .bingo {
	height: 100%;
	overflow: hidden;
}

#game .game-start-screen{
	height: 100%;
}

#game .game-start-screen i{
	position: absolute;
	bottom: calc(var(--percentage-height) * 5);
	font-size: calc(var(--percentage-width) * 6);
	left: calc(var(--percentage-width) * 47);
}

#game .game-start-screen-loading-bar{
	position: absolute;
    bottom: calc(var(--percentage-height)* 5);
    left: calc(var(--percentage-width)* 25);
    width: calc(var(--percentage-width) * 50);
    border-radius: calc(var(--percentage-width) * 1);
}

#game .game-start-screen-loading-progress{
	height: calc(var(--percentage-height) * 2);
	border-radius: calc(var(--percentage-width) * 1);
	width: 0%;
	transition: width 1.5s linear;
}

#game .game-loading-bar{
    width: calc(var(--percentage-width) * 10);
    border-radius: calc(var(--percentage-width) * 1);
	background-color: lightgray;
}

#game .game-loading-progress{
	background-color: grey;
	height: calc(var(--percentage-height) * 1.5);
	border-radius: calc(var(--percentage-width) * 1);
	width: 0%;
	transition: width 1.5s linear;
}

#game .game-start-screen-loading-bar[color="red"]{
	background-color: #d48291;
}
#game .game-start-screen-loading-bar[color="red"] .game-start-screen-loading-progress {
    background-color: #bf475d;
}

#game .game-start-screen-loading-bar[color="dark-green"]{
	background-color: #619861;
}
#game .game-start-screen-loading-bar[color="dark-green"] .game-start-screen-loading-progress {
	background-color: #266126;
}

#game .game-start-screen-loading-bar[color="blue"]{
	background-color: #79a0d6;
}
#game .game-start-screen-loading-bar[color="blue"] .game-start-screen-loading-progress {
	background-color: #3b6aab;
}

#game .game-start-screen-loading-bar[color="yellow"]{
	background-color: #d8d59d;
}
#game .game-start-screen-loading-bar[color="yellow"] .game-start-screen-loading-progress {
	background-color: #c2be75;
}

#game .game-start-screen-loading-bar[color="dark-yellow"]{
	background-color: #ba8e23;
}
#game .game-start-screen-loading-bar[color="dark-yellow"] .game-start-screen-loading-progress {
	background-color: #dba92a;
}

#game .game-start-screen-loading-bar[color="apricot"]{
	background-color: #f9d5c3;
}
#game .game-start-screen-loading-bar[color="apricot"] .game-start-screen-loading-progress {
	background-color: #f7cab4;
}

#game .game-start-screen-loading-bar[color="green"]{
	background-color:rgb(139, 198, 149);
}
#game .game-start-screen-loading-bar[color="green"] .game-start-screen-loading-progress {
	background-color: #549e60;
}

#game .container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#game .bingo-pause-container {
	display: flex;
	position: absolute;
}

.bingo-speed-buttons-container {
	right: 36.5vw;
  	top: 21.8vw;
}

.bingo-pause-buttons-container {
	top: 46vw;
}

#game .pause-title {
	position: absolute;
  	bottom: 46vw;
}

#game .normal-button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 5);
	width: fit-content;
	height: calc(var(--percentage-height) * 10);
	color: white;
	border-radius: calc(var(--percentage-height) * 1.5);
	margin: calc(var(--percentage-height) * 1);
	text-align: center;
}

.modal-normal-button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 5);
	width: fit-content;
	height: calc(var(--percentage-height) * 10);
	color: white;
	border-radius: calc(var(--percentage-height) * 1.5);
	margin: calc(var(--percentage-height) * 1);
	text-align: center;
	border: solid 1px black;
}

#game .again,
#game .close,
#game .continue {
	background-color: var(--illi-green);
	width: calc(var(--percentage-width) * 18);
	margin-top: calc(var(--percentage-height) * 2);
}

#game .close{
	background-color: var(--illi-black);
}

#game .speed-change{
	background-color: rgb(147, 147, 147);
	width: calc(var(--percentage-width) * 18);
	margin-top: calc(var(--percentage-height) * 2);
}

.speed-buttons {
	display: flex;
	left: 2.4vw;
	position: relative;
}

.bingo-button-container .slow.button,
.bingo-button-container .normal.button,
.bingo-button-container .fast-.button {
	background-color: rgb(255, 255, 255);
	width: calc(var(--percentage-width) * 1);
  	margin-left: calc(var(--percentage-height) * 4);
	height: calc(var(--percentage-height) * 2);
	right: 2.8vw;
}

#game .speed-change {
	font-size: calc(var(--percentage-height) * 4);
}

.bingo-pause-container .close{
	background-color: var(--illi-black);
	position: relative;
}

#game .bingo-continue {
	left: 2vw;
	position: relative;
}

#game .bingo-close {
	background-color: #d50e0e;
  	padding: 1.5vw;
	  padding-left: 2vw;
	  padding-right: 2vw;
  	position: relative;
  	font-size: 6vw;
 	font-style: italic;
  	font-weight: bold;
	margin: 2.5vw;
	bottom: 3vw;
}

.slow.button.picked-speed,
.normal.button.picked-speed,
.fast-.button.picked-speed {
	background-color: var(--illi-game-red);
}

#game .again p,
#game .close p,
#game .continue p {
	z-index: 2;
}

#game .again:focus,
#game .close:focus,
#game .continue:focus {
	outline: none;
}

.slow:focus::after,
.normal:focus::after,
.fast-:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid rgba(148, 56, 57, 0.72);
	content: "";
	position: absolute;
	width: calc(calc(var(--percentage-width) * 3) + calc(var(--percentage-width) * 0.1));
	height: calc(calc(var(--percentage-height) * 5) + calc(var(--percentage-width) * 0.5));
	background: var(--illi-light-red);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
}

#game .again:focus::after,
#game .close:focus::after,
#game .continue:focus::after,
#game .repeat:focus::after, 
#game .next-ball:focus::after, 
#game .bingo-pause:focus::after,
#game .bingo-close:focus::after,
#game .speed-change:focus::after,
.close-speed:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid rgba(148, 56, 57, 0.72);
	content: "";
	position: absolute;
	width: calc(calc(var(--percentage-width) * 18) + calc(var(--percentage-width) * 0.7));
	height: calc(calc(var(--percentage-height) * 10) + calc(var(--percentage-width) * 0.7));
	background: var(--illi-light-red);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
}

#game .repeat:focus::after, 
#game .next-ball:focus::after {
  	width: calc(calc(var(--percentage-width) * 16) + calc(var(--percentage-width) * 0.7));
  	height: calc(calc(var(--percentage-height) * 9) + calc(var(--percentage-width) * 0.4));
}

#game .bingo-pause:focus::after {
	width: calc(calc(var(--percentage-width) * 20) + calc(var(--percentage-width) * 0.7));
	height: calc(calc(var(--percentage-height) * 10) + calc(var(--percentage-width) * 0.7));
}

#game .bingo-close:focus::after {
	width: calc(calc(var(--percentage-width) * 21) + calc(var(--percentage-width) * 0.7)); /* 20 */
	height: calc(calc(var(--percentage-height) * 15) + calc(var(--percentage-width) * 0.7));
}

#game .repeat:focus::after {
	border-color: var(--illi-gray);
	background: rgba(62, 62, 62, 0.206);
}

#game .next-ball:focus::after{
	border-color: #0069b4;
	background: rgba(223, 233, 245, 0.206);;
}

#game .continue:focus::after,
#game .again:focus::after {
	border-color: var(--illi-green);
	background: var(--illi-light-green);
}

#game .close:focus::after,
.close-speed:focus::after {
	border-color: rgba(45, 45, 45, 0.67);
	background: rgba(62, 62, 62, 0.206);

	/*border-color: rgb(11, 11, 11);
  background: rgba(13, 13, 13, 0.21);*/
}

#game .bingo-pause:focus::after,
#game .bingo-close:focus::after {
	border-color: rgba(240, 9, 9, 0.67);
	background: rgba(172, 7, 7, 0.206);
}

#game .end-locked:focus::after {
	border-color: #000;
	background: rgba(145, 145, 145, 0.21);
}

.slow:focus::after,
.normal:focus::after,
.fast-:focus::after,
#game .speed-change:focus::after {
	border-color: rgba(251, 201, 4, 0.97);
	background: rgba(62, 62, 62, 0.206);
}

.picked-speed:focus::after {
	border-color: rgba(6, 114, 21, 0.97);
	background: rgba(7, 221, 25, 0.206);
}

/* Title bar */
#game .titlebar {
	height: calc(var(--percentage-height) * 15);
	background-color: #f9f9f9;
	box-shadow: 0 0 calc(var(--percentage-width) * 1) rgba(0, 0, 0, 0.37);
	color: var(--illi-black);
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
	position: absolute;
	/* bottom: 0; */
	top: 0;
	width: 100%;
}

#game .title {
	align-self: center;
	font-size: calc(var(--percentage-width) * 3);
	font-weight: 100;
}

#game .titlebar-button,
#game .settings-close {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 4);
	width: calc(var(--percentage-width) * 15);
	height: calc(var(--percentage-height) * 7);
	background-color: var(--illi-black);
	color: white;
	border-radius: calc(var(--percentage-height) * 1);
}

#game .settings-close {
	left: 9%;
	position: absolute;
	bottom: 86%;
}

#game .titlebar-button p {
	z-index: 2;
}

#game .titlebar-button:focus {
	outline: none;
}

#game .titlebar-button:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-black);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 15.7);
	height: calc(var(--percentage-height) * 7.7);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
	border-color: rgba(45, 45, 45, 0.67);
	background: rgba(62, 62, 62, 0.206);
}

#game .rounds {
	width: calc(var(--percentage-width) * 15);
	overflow: hidden;
}

#game .empty-placeholder {
	width: calc(var(--percentage-width) * 15);
	overflow: hidden;
}

/* Start screen */
#game .start-screen-background {
	height: 100%;
	width: 100%;
	display: flex;
}

/* Settings */
#game .game-settings-component {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-color: #0c0fa1;*/
}

/* Game background colours */
/*#game .active-geheugentraining {
	background-color: #0c0fa1;
}

#game .active-fotoquiz {
	background-color: #c70c2f;
}*/

#game .active-woordzoeker {
	background-color: #e3f1cd ;
}

#game .active-pimpampet {
	background-color: #f6cfd6;
}

#game .active-bingo {
	background-color: #ffedd6;
}

#game .active-memory {
	background-color: #fffbb5
}

/* #game .spinner {
	position: absolute;
	padding: calc(var(--percentage-width) * 36.5);
	margin-top: calc(var(--percentage-width) * 2);
	width: calc(var(--percentage-width) * 7);
	height: calc(var(--percentage-width) * 10);
}

#game .splash-spinner {
	margin-left: calc(var(--percentage-width) * 10);
} */

#game .start {
	background-color: var(--illi-green);
	color: white;
	width: calc(var(--percentage-width) * 20);
	margin-bottom: calc(var(--percentage-height) * 2);
	margin-top: calc(var(--percentage-height) * 10);
}

#game .start-hidden {
	display: none;
}

#game .start p {
	z-index: 2;
}

#game .start:focus {
	outline: none;
	background-color: var(--illi-green);
	color: white;
}

#game .start:focus::after {
    border: calc(var(--percentage-width) * 0.3) solid var(--illi-green);
    content: "";
    position: absolute;
    width: calc(var(--percentage-width) * 21);
    height: calc(calc(var(--percentage-height) * 10) + calc(var(--percentage-width) * 1));
    background: var(--illi-light-green);
    border-radius: calc(var(--percentage-width) * 1);
}

/* Rounds */
#game .rounds-container {
    flex-direction: row;
}

#game .round-container {
    background-color: lightgray;
    border: calc(var(--percentage-height) * 0.3) solid black;
    border-radius: 20%;
    width: calc(var(--percentage-width) * 4);
    height: calc(var(--percentage-width) * 4);
    margin-right: calc(var(--percentage-width) * 0.3);
    margin-left: calc(var(--percentage-width) * 0.3);
}

#game .round {
    font-size: calc(var(--percentage-height) * 4);
    color: black;
    font-weight: 600;
    margin: 0;
}

#game #current-round {
    color: rgb(19, 122, 239);
}

/* Pause */
#game .game-pause-container {
    /* background-color: lightgray; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#game .pause-buttons-container {
    width: fit-content;
}

/* End Screen */
#game .game-end-screen-container {
    /* background-color: lightgray; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#game .end-buttons-container {
    width: fit-content;
}

/* Game */
#game .game-container {
    align-items: normal;
	height: 100%;
}

/* Game error */
#game .game-error-container {
	width: 100%;
    height: calc(var(--percentage-height) * 80);
    display: flex;
    justify-content: center;
    align-items: center;
}

#game .error-message {
    font-size: calc(var(--percentage-width) * 3);
    width: calc(var(--percentage-width) * 75);
}

.game-loading-overlay {
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	font-size: calc(var(--percentage-width) * 4);
}

.game-loading-overlay i{
	--fa-primary-color: #918e92; 
	--fa-secondary-color: #918e92;
	margin: calc(var(--percentage-height) * 3.5);
}