html, body {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

#main {
	height: 100%;
	overflow: hidden;
	width: 100%;
	z-index: 1;
}

#map {
	width: auto;
	height: 100%;
}

.question-icon {

}

.question-icon img {
  width: 54px;
  height: 90px;
  position: absolute;
}

.person-icon {

}

.person-icon img {
  width: 50px;
  height: 90px;
  position: absolute;
}

.question-label {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: larger;
	font-weight:bold;
}

#question-div {
	display:none;
	
	background-color: white;
	border-radius: 10px;
	width:95%;
	height:95%;
	padding: 10px;
	box-sizing: border-box;
	border: 2px solid #666666;
	margin-top: 10px;
	text-align: center;
	
	position:absolute;
	z-index:1000;
	
	min-width: 300px;
	max-width: 960px; 
}

#question-container {
	display: flex; 
	width: 100%; 
	height: 100%; 
	flex-direction: column; 
	background-color: white; 
	overflow: hidden;
}

#question-top-bar {
	background-color: white;
	
	padding-top: 5px;
	padding-bottom: 5px;

	display: flex;
	flex-direction: row;
}

#question-close {
	aspect-ratio: 1/1;
	width: 40px;
	text-align: center;	
	font-size: xx-large;

	display: flex;
	justify-content: center; /* Align horizontal */
	align-items: center; /* Align vertical */
	align-self: flex-start;  /* stop div from expanding vertically to fill empty space */

	margin-right: 0px;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: auto;

	color: white;
	background-color: #333333;
	border-radius: 10px;
	
	cursor: pointer;
}

#logo	{
	padding-left: 0px;
	width: 82%;
	box-sizing: border-box;
	margin-top: auto;
	margin-bottom: auto;
}

#logo_img	{
	max-width: 200px;
    height: auto;
    display: block;
    margin-left: 0px;
    margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}

#question-holder-div {
	flex-grow: 1;
	border: none;
	margin: 0;
	padding: 0;
}

#question-holder {
	display: block; 
	width: 100%; 
	height: 100%; 
	border: none;
}

#system-message-panel {
	/*
	position: fixed;
    bottom:0%;
    width:100%; 
    background-color: white; 
    opacity: 1;
	z-index: 2000;
	text-align: center;
	padding: 5px;
	display: none;
	border-top: 2px solid #666666;
	
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s ease-out;
	*/
	overflow: hidden;
}

#system-message-wrapper {
	/*
	overflow: hidden;
	*/
	position: fixed;
    bottom:0%;
    width:100%; 
    background-color: white; 
    opacity: 1;
	z-index: 2000;
	text-align: center;
	/*padding: 5px;*/
	display: none;
	/*border-top: 2px solid #666666;*/
	
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms ease-out;
}

.system-message {
	border-radius: 10px;
	width: 90%;
	padding: 5px;
	box-sizing: border-box;
	border: 2px solid #666666;
	display:flex;
	flex-direction:row;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

.system-message-text {
	width:80%;
	text-align: center;	
	font-size: larger;
	padding-right:5px;
}

.system-message-control {
	aspect-ratio: 1/1;
	width: 40px;
	text-align: center;	
	font-size: xx-large;

	display: flex;
	justify-content: center; /* Align horizontal */
	align-items: center; /* Align vertical */
	align-self: flex-start;  /* stop div from expanding vertically to fill empty space */

	margin-left: auto;
	margin-right: 0px;
	margin-top: auto;
	margin-bottom: auto;

	color: white;
	background-color: #333333;
	border-radius: 10px;
	
	cursor: pointer;
}

.system-message-white {
	background-color: white;
}

.system-message-red {
	background-color: #FFBBBB;
}

.system-message-blue {
	background-color: #DDFFFF;
}

.system-message-green {
	background-color: #BBFFBB;
}


.game-control-button {
	aspect-ratio: 1/1;
	background-color: white;
	border-radius: 10px;
	width:40px;
	height:40px;
	padding: 2px;
	box-sizing: border-box;
	border: 2px solid #666666;
	
	text-align: center;
	
	cursor: pointer;	
}

.game-control-button:active {
	background-color: #DDFFFF;
}

.game-control-button img {
	width: 100%;
	
	display: flex;
	justify-content: center; /* Align horizontal */
	align-items: center; /* Align vertical */
	align-self: flex-start;  /* stop div from expanding vertically to fill empty space */
}

#zoom-in-button {
	margin-top: 5px;
	margin-left: 5px;
}

#zoom-out-button {
	margin-top: 5px;
	margin-left: 5px;
}

#sound-button {
	margin-top: 20px;
	margin-left: 5px;
}

#game-buttons-panel {
	display:flex;
	flex-direction: column;
	position:absolute;
	z-index:5000;
	
	top: 10px;
	left: 10px;
	
	background: transparent;
}

#sound-effects {
	display: none;
}