@CHARSET "ISO-8859-1";

.brigade>.brigadeInfoContent,
.commander>.commanderInfoContent,
.globalOption>.globalOptionInfoContent,
.helpContent,
.zoomContent{
	position: absolute;
	display: none;
	
	background: var(--background-info);
	color: #000000;

	padding: var(--padding-element-inside);
	font-size: var(--font-small);
	border: var(--border);
	
	z-index: 1000;
}

.zoomOption{
	padding: var(--padding-name-top);;
}
	
.brigade>.brigadeInfoContent{
	top: var(--info-offset-x-brigade);
}
.commander>.commanderInfoContent{
	top: var(--info-offset-x);
}
.globalOption>.globalOptionInfoContent{
	top: var(--info-offset-x);
}

.commander>.commanderInfo:hover,
.commander>.commanderZoom:hover,
.commander>.commanderFlagButton:hover,
.globalOption>.globalOptionInfo:hover,
.globalOption>.globalOptionZoom:hover,
.brigade>.brigadeInfo:hover,
.zoomContent>.zoomOption:hover {
	cursor: default;
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.infoContentRow {
	min-height: var(--info-height);
	border-top: var(--border);
	padding: var(--padding-name-top);
	
	display: grid;
	grid-template-columns: var(--info-head) var(--info-text);
	grid-template-rows: auto;
	grid-template-areas: "head text";
}

.infoContentRow:first-child { 
    border-bottom: var(--border);
}

.infoContentRow> .infoContentRowHeaderImg,
.infoContentRow> .infoContentRowHeaderText  {
	grid-area: head;
}

.infoContentRow>.infoContentRowText {
	grid-area: text;
}

.infoContentRow>.infoContentRowHeaderImg > .img {
	width: var(--info-height);
}

.infoContentRow>.infoContentRowHeaderImg>.disabledImg {
	display: none;
	position: absolute;
	width: var(--info-height);
}