.damageIndicator {
    background-color: orange;
    border: 2px solid black;
    color: black;
    display: inline;
    font-weight: bold;
    opacity: 0;
    padding: 1px 5px;
    position: absolute;
    z-index: 5;
}

#gridContainer {
    transform-origin: left top;
}

.hexagon {
	fill: rgb(255,255,255);
	stroke: rgb(66,66,66);
	stroke-width: 1;
}

.terrain1 {
	fill: rgb(150,150,100);
}
.terrain2 {
	fill: rgb(0,200,75);
}
.terrain3 {
	fill: rgb(25,125,75);
}
.terrain4 {
	fill: rgb(250,250,200);
}
.terrain5 {
	fill: rgb(150,150,50);
}
.terrain6 {
	fill: rgb(150,150,250);
}
.terrain7 {
	fill: rgb(50,50,150);
}
.terrain8 {
	fill: rgb(125,125,125);
}

.hexagonSight {
	fill: lightgreen;
}

.hexagonSelected {
	fill: green;
}