body {
	background-color: white;
	font-family: Arial;
	font-size: 24px;
}

#content {
	border: 1px solid black;
	width: 100%;
}

#myMaps {
	height: 480px;
	width: 100%px;
}
#myMaps div {
	height: 480px;
	margin: auto auto;
	width: 600px;
}
#controls {
	background-color: lightGrey;
	height: 50px;
	width: 100%;
	z-index:-1;
}
/*
div#mapLoading {
	font-size: 10em;
	left: 50px;
	position: absolute;
	top: 60px;
	z-index: -1;
}
*/
.debugPath {
	stroke: orange;
	stroke-width: 5;
}

.debugRoom {
	fill: red;
	stroke: red;
	stroke-width: 4;
}

.wayfindingRoom {
	fill: #ffc;
	stroke: red;
	stroke-width: 2;
	stroke-dasharray: 0 0;
}

g.startPin path {
	fill: cyan;
}

g.destinationPin path {
	/*fill: green;*/
}

.path-active {
  opacity: 1;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10;
  animation: march 3s linear infinite reverse;
}

@keyframes march {
  to {
    stroke-dashoffset: 120;
  }
}