.unit,
.helper,
.grave {
    border: 3px solid black;
	color: white;
	font-weight: bold;
	position: absolute;
    transition: border 0.2s, background 0.2s;
}
.unit {
    z-index: 3;
}
.grave {
    z-index: 1;
}
.helper {
	display: none;
	opacity: 0.3;
    z-index: 2;
}
.grave {
    opacity: 0.5;
}

.squadSelected {
    border-color: yellow;
}

.unitSelected,
.helperSelected {
    border-color: orange;
	z-index: 4;
}

.helperSelected {
    opacity: 0.7;
}

.unitFilling {
    position: absolute;
}
.unitFacing {
    opacity: 0.75;
}

.colorFriendly {
    background: radial-gradient(at top left, rgb(200,200,255), rgb(125,125,250));
}

.colorFriendly.squadSelected {
    background: radial-gradient(at top left, rgb(175,175,255), rgb(75,75,225));
}

.colorFriendly.unitSelected,
.colorFriendly.helperSelected {
    /*background: radial-gradient(at top left, rgb(150,150,255), rgb(25,25,200));*/
    background: radial-gradient(at top left, rgb(255,255,150), rgb(200,200,25));
}

.colorHostile {
    background: radial-gradient(at top left, rgb(255,200,200), rgb(250,125,125));
}

.colorHostile.squadSelected {
    background: radial-gradient(at top left, rgb(255,175,175), rgb(225,75,75));
}

.colorHostile.unitSelected {
    background: radial-gradient(at top left, rgb(255,150,150), rgb(200,25,25));
}

.grave.colorFriendly {
    background: radial-gradient(at top left, rgb(200,200,255), rgb(150,150,225));
}

.grave.colorHostile {
    background: radial-gradient(at top left, rgb(255,200,200), rgb(225,150,150));
}

.indicator {
	background-color: red;
	opacity: 0.1;
	position: absolute;
	z-index: 2;
}

.indicatorSelected {
	background-color: orange;
	opacity: 1;
	z-index: 3;
}

.overlay {
	cursor: pointer;
	display: none;
	opacity: 0.5;
	position: absolute;
}

.overlayThreat {
    z-index: 2;
}

.overlayfight {
    border: 3px solid yellow;
    opacity: 1;
}

.overlaySelected {
	display: block;
	z-index: 4;
}

.targeted {
    border-color: red;
}