.inactive_state_commander {
	opacity: 0.5;
}

.inactive_state_type {
	opacity: 0.4;
}

.img {
	max-width: 100%;
}

.optionTooltip {
	font-size: 80%;
	position: absolute;
	background-color: #986F12;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	border: 5px solid #986F12;
	padding: 10px;
	left: -80px;
	top: 100px;
	z-index: 10;
	display: none;
	box-shadow: 0px 0px 0px 1px #fff inset;
	z-index: 2000;
}

.groupTooltip {
	font-size: 80%;
	position: absolute;
	color: #986F12;
	background-color: #fff;
	text-align: left;
	border-radius: 6px;
	border: 5px solid #986F12;
	padding: 10px;
	left: -80px;
	top: 100px;
	z-index: 10;
	display: inline-grid;
	box-shadow: 0px 0px 0px 1px #fff inset;
	z-index: 2000;
}

@media only screen and (min-device-width: 801px) {
	.levelUnits.groupTooltip {
		grid-area: level_units;
		justify-self: left;
		display: inline-grid;
		grid-column-gap: 10px;
		transform: scale(0.7, 0.7);
	}

	.levelUnits.groupTooltip[count='2'],
	.levelUnits.groupTooltip[count='3'],
	.levelUnits.groupTooltip[count='4'] {
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		grid-template-areas: 
			"unit1 unit2" 
			"unit3 unit4";
	}
	.levelUnits.groupTooltip[count='5'],
	.levelUnits.groupTooltip[count='6'],
	.levelUnits.groupTooltip[count='7'],
	.levelUnits.groupTooltip[count='8'],
	.levelUnits.groupTooltip[count='9'] {
		grid-template-columns: auto auto auto;
		grid-template-rows: auto auto auto;
		grid-template-areas: 
			"unit1 unit2 unit3" 
			"unit4 unit5 unit6"
			"unit7 unit8 unit9";
	}
}
@media only screen and (max-device-width: 800px) {
	.levelUnits.groupTooltip {
		left: 0px;
		transform: scale(0.7, 0.7);
	}
}
.subunitHidden {
	display: none;
}

.subunit:not(.subunitHidden):hover {
	color: #986F12;
	background-color: #fff;
}