.dialog {
	display: none;
	position: fixed;
	left: 10%;
	width: 80%;
	top: 10%;
	height: 40%;
	background-color: #ddf;
	z-index: 1;
	padding: 20px;
}

.dialog_title {
	font-size: 5vmax;
	font-weight: bold;
	margin: 4vmax;
	font-family: sans-serif;
	text-align: center;
}

#img_output {
	background-image: url('trans_grid.png');
	background-repeat: repeat;
	padding: 2px;
	margin-left: 50%;
	transform: translateX(-50%);
}

#shape {
	display: none;
}

#maze_canvas_container {
	width: 100%;
	height: 100%;
	text-align: center;
}

#maze_canvas {
	display: inline-block;
}

#gridwidth_slider {
	display: none;
}

body {
	background: #00004d;
	margin: 0px;
	font-family: sans-serif;
}


#success {
	text-align: center;
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	height: auto;
	transform: translate(-50%, -50%);
	color: #fff;
	background: #30307de0;
	border-radius: 20px;
	user-select: none;
}

#success_level {
	display: inline-block;
}

#success_time {
	text-align: center;
}

.button {
	margin: 2vmax;
	padding: 2vmax;
	border: 1px #000;
	border-radius: 10px;
	background: #855;
	cursor: hand;
	font-size: 5vmax;
}

.button:hover {
	background: #f77;
}

#highscores {
	text-align: center;
	display: none;
	position: absolute;
	left: 15%;
	top: 15%;
	width: 70%;
	height: auto%;
	color: #fff;
	background: #30307de0;
	border: 10px;
	border-radius: 20px;
	user-select: none;
}

#highscores_table {
	width: 100%;
	text-align: center;
}

.highscore_header {
	color: #ff5;
	font-family: sans-serif;
	font-size: 3vmax;
}

.highscore_row {
	color: #fff;
	font-family: sans-serif;
	font-size: 2vmax;
}

#gameover {
	text-align: center;
	display: none;
	position: absolute;
	left: 15%;
	top: 15%;
	width: 70%;
	height: auto;
	color: #fff;
	background: #30307de0;
	border: 10px;
	border-radius: 20px;
	user-select: none;
}

#gameover_level,
#gameover_time {
	display: inline-block;
}

#username {
	font-size: 4vmax;
}

#username_message {
	margin: 2vmax;
	font-size: 3vmax;
	color: #99f;
}