@CHARSET "ISO-8859-1";

.rosterCommander {
	grid-area: roster_commander;
	justify-self: center;
	display: grid;
	grid-template-columns: auto 60px;
	grid-template-rows: 60px 30px 30px 30px;
	grid-template-areas: "commander_pic cmd_options1"
		"commander_pic cmd_options2" "commander_name cmd_options3"
		"commander_orders unit_options4";
	margin-left: 10vw;
	width: 235px;
	border-bottom: 2px solid #576680;
}

.cmdOptions1 {
	grid-area: cmd_options1;
	justify-self: center;
	align-self: center;
	max-width: 60px;
	max-height: 60px;
}

.cmdOptions2 {
	grid-area: cmd_options2;
	justify-self: center;
	align-self: center;
	max-width: 60px;
	max-height: 60px;
}

.cmdOptions3 {
	grid-area: cmd_options3;
	justify-self: center;
	align-self: center;
	max-width: 60px;
	max-height: 60px;
}

.subunit.rosterCommander {
	justify-self: center;
	display: grid;
	grid-template-columns: 130px 60px;
	grid-template-rows: 60px 30px 30px 30px;
	grid-template-areas: "commander_pic commander_pic"
		"commander_pic commander_pic" "commander_name commander_name"
		"commander_orders commander_orders";
	width: 190px;
	margin-left: 0px;
}

.subunit {
	border: 3px solid transparent;
	border-radius: 10px;
}

.subunit:hover {
	border: 3px solid #986F12;
	border-radius: 10px;
}

.order {
	border: 3px solid transparent;
	max-width: 25px;
	max-height: 25px;
}

.add_order {
	border-left: 3px solid #986F12;
	border-right: 3px solid #986F12;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-radius: 10px;
}

.add_order:hover {
	border: 3px solid #986F12;
	border-radius: 10px;
}

.commanderPic {
	grid-area: commander_pic;
	justify-self: center;
	max-width: 70px;
	max-height: 70px;
}

.commanderName {
	grid-area: commander_name;
	justify-self: center;
	text-align: center;
	display: grid;
	grid-template-columns: 180px 15px;
	grid-template-rows: auto;
	grid-template-areas: "commander_text quota_commander";
}

.commanderNameText {
	grid-area: commander_text;
	text-transform: capitalize;
}

.quota_commander {
	grid-area: quota_commander;
	width: 15px;
	height: 15px;
}

.commanderOrders {
	grid-area: commander_orders;
	justify-self: center;
}