@CHARSET "ISO-8859-1";

.brigade,
.brigadeTemplate {
	position: relative;
	float: left;
	
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
	
	margin: var(--margin-element);
	padding: var(--padding-element-inside);
	
	display: grid;
	grid-template-columns: var(--pic-small-brigade) calc(var(--pic-large-x-brigade) - var(--pic-small-brigade)) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade);
	grid-template-rows: var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade);
	grid-template-areas: 
		"del pic pic pic pic nop1 size1 size2 size3 size4"
		"no1 pic pic pic pic nop2 lvl1 lvl2 lvl3 lvl4"
		"zoom pic pic pic pic weapon5 weapon4 weapon3 weapon2 weapon1"
		"flag pic pic pic pic nop3 option4 option3 option2 option1"
		"no2 name nop4 imp move skill2 skill morale resist cost"
		"info name nop5 impval moveval skill2val skillval moraleval resistval costval";
}

.brigadeAdd {
	float: left;	
	position: relative;
	
	background: url(../../../img/unit/unit-background.png);
	background-size: 100% 100%;
	
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);

	margin: var(--margin-element);
	padding: var(--padding-element-inside);
	
	display: grid;
	grid-template-columns: var(--pic-small-brigade) calc(4 * var(--pic-small-brigade)) var(--pic-small-brigade);
	grid-template-rows: var(--pic-small-brigade) calc(4 * var(--pic-small-brigade)) var(--pic-small-brigade);
	grid-template-areas: "no1 no1 no1"
		"no2 picAdd no3"
		"no4 no4 no4";
}

.brigadeAdd:hover {
	transform: scale(1.05, 1.05);
}


.brigadeAdd > .brigadeAddImg {
	grid-area: picAdd;
	width: calc(4 * var(--pic-small-brigade));
}

.brigade> .inactive > .img,
.brigadeTemplate> .inactive > .img {
	opacity: var(--opacity-disabled);
}


.brigade>.brigadeInfo,
.brigadeTemplate>.brigadeInfo {
	grid-area: info;
}

.brigade>.brigadeFlag{
    grid-area: pic;
    position: absolute;
    right: var(--pic-small-brigade);
    bottom: 0;
}

.brigade>.brigadeFlag>.brigadeFlagImg{
	width: calc(2 * var(--pic-small-brigade));
	height: calc(1.2 * var(--pic-small-brigade));
}

.brigade>.brigadeFlagButton,
.brigadeTemplate>.brigadeFlagButton {
    grid-area: flag;
}

.brigade>.brigadeDel,
.brigadeTemplate>.brigadeDel {
	grid-area: del;
}

.brigade>.brigadeZoom,
.brigadeTemplate>.brigadeZoom {
	grid-area: zoom;
}

.brigadeTemplate>.brigadeDel,
.brigadeTemplate>.brigadeFlagButton,
.brigadeTemplate>.brigadeInfo,
.brigadeTemplate>.brigadeZoom {
	display: none;
}

.brigade>.brigadeFlagButton:hover,
.brigade>.brigadeDel:hover,
.brigade>.brigadeZoom:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.brigade>.brigadeName,
.brigadeTemplate>.brigadeName {
	grid-area: name;

	text-transform: capitalize;
	font-size: var(--font-small);
	font-weight: var(--font-weight-bold);
	padding-top: var(--padding-name-top);
	text-align: center;
	line-height: 0.8;
}


.brigade>.brigadeAltPics,
.brigadeTemplate>.brigadeAltPics {
	grid-area: pic;
	
	display: grid;
	grid-template-columns: calc(var(--pic-small-medium-x) + var(--pic-small-brigade)) calc(var(--pic-small-medium-x) + var(--pic-small-brigade));
	grid-template-rows: var(--pic-small-medium) var(--pic-small-medium);
	grid-template-areas: 
		"pic1 pic2"
		"pic3 pic4";
}

.brigade>.brigadeAltTemplate,
.brigadeTemplate>.brigadeAltTemplate {
	display: none;
	position: absolute;
	
	width: calc(var(--info-text));
	padding: var(--padding-element-inside);  
	
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
	
	background: var(--background);
	
	z-index: 100;
}


.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper {
	float: left;
	margin: var(--margin-element);

	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
}

.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper:hover{
	transform: scale(1.05, 1.05);
}


.brigade> .brigadeAltPics> .inactive {
	opacity: var(--opacity-disabled);;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt {
	display: grid;
	grid-template-columns: calc(var(--pic-small-medium-x) + var(--pic-small-brigade));
	grid-template-rows: calc(var(--pic-small-medium) - var(--pic-very-small)) var(--pic-very-small) var(--pic-very-small);
	grid-template-areas: 
		"singlePic"
		"singleName"
		"rangegrape";

}

.brigade>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleHover,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleHover{
	/* display: none; */
}

.brigadeSingleHover{
	grid-area: rangegrape;
	font-size: var(--font-small);
	font-weight: var(--font-weight-bold);
}

.brigadeSingleHover>.brigadeSingleAltRange{
	float: left;
	padding-left: 0.2vw;
}

.brigadeSingleHover>.brigadeSingleAltSO{
	float: right;
	padding-right: 0.2vw;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt:hover:not(.tail){
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
} 

.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt {
	display: grid;
	grid-template-columns: var(--pic-large);
	grid-template-rows: calc(var(--pic-small-medium) - var(--pic-very-small)) var(--pic-very-small) var(--pic-very-small);
	grid-template-areas: 
		"singlePic"
		"singleName"
		"rangegrape";
}

.brigade>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltPic,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltPic,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltPic,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltPic {
	grid-area: singlePic;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltExpand,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltExpand,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltExpand {
	grid-area: expandAlt;
}

.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltExpand {
	grid-area: expandAlt;
	display: none;
}

.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltExpand,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltExpand {
	display: none;
}


.brigade>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltName,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltName,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt >.brigadeSingleAltName,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltName {
	grid-area: singleName;
	
	font-size: var(--font-small);
	font-weight: var(--font-weight-normal);
	text-align: center;
  	display: inline-block;
  	text-overflow: ellipsis;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleAltPic>.img,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltPic>.img,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleAltPic>.img,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltPic>.img {
	height: 100%
}

.brigade>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleAltExpand>.img,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltExpand>.img,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleAltExpand>.img,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadeSingleAlt>.brigadeSingleAltExpand>.img {
	width: var(--pic-small);
	border-radius: var(--border-radius-option);
}

.brigade>.brigadeAltPics>.brigadeSingleAlt>.brigadeSingleAltExpand:hover {
	background: var(--background);
	border-radius: var(--border-radius-option);
}


.brigade>.brigadeAltPics>.brigadeSingleAlt1,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt1,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt1,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt1{
	grid-area: pic1;
	overflow: hidden;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt2,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt2,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt2,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt2 {
	grid-area: pic2;
	overflow: hidden;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt3,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt3,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt3,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt3 {
	grid-area: pic3;
	overflow: hidden;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt4,
.brigade>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt4,
.brigadeTemplate>.brigadeAltPics>.brigadeSingleAlt4,
.brigadeTemplate>.brigadeAltTemplate>.brigadeSingleAltWrapper>.brigadesingleAlt4 {
	grid-area: pic4;
	overflow: hidden;
}

.brigade>.brigadeAltPics>.brigadeSingleAlt.active:hover:not(.tail){
	height: var(--alt-hover-height);
    overflow: visible;
    z-index: 90;
}


.brigadeTemplate>.brigadePic,
.brigade>.brigadePic {
	grid-area: pic;
}

.brigade>.brigadePic>.brigadePicImg,
.brigadeTemplate>.brigadePic>.brigadePicImg {
    width: calc(var(--pic-large-x-brigade) + 2 * var(--pic-small-brigade));
    height: calc(var(--pic-large-brigade) + 1 * var(--pic-small-brigade));
}


.brigade> .brigadeSize,
.brigade> .brigadeLevel,
.brigade> .brigadeWeapon,
.brigade> .brigadeOption,
.brigadeTemplate> .brigadeSize,
.brigadeTemplate> .brigadeLevel,
.brigadeTemplate> .brigadeWeapon,
.brigadeTemplate> .brigadeOption {
	position: relative;
}

.brigade> .brigadeSize:hover:not(.tail),
.brigade> .brigadeWeapon:hover:not(.tail),
.brigade> .brigadeOption:hover:not(.tail),
.brigade> .brigadeLevel:hover:not(.tail) {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}


.brigade>.small,
.brigadeTemplate>.small {
	grid-area: size1;
}

.brigade>.typical,
.brigadeTemplate>.typical {
	grid-area: size2;
}

.brigade>.big,
.brigadeTemplate>.big {
	grid-area: size3;
}

.brigade>.huge,
.brigadeTemplate>.huge {
	grid-area: size4;
}


.brigade>.recruit,
.brigadeTemplate>.recruit {
	grid-area: lvl1;
}

.brigade>.regular,
.brigadeTemplate>.regular {
	grid-area: lvl2;
}

.brigade>.veteran,
.brigadeTemplate>.veteran {
	grid-area: lvl3;
}

.brigade>.elite,
.brigadeTemplate>.elite {
	grid-area: lvl4;
}


.brigade>.weapon1,
.brigadeTemplate>.weapon1 {
	grid-area: weapon1;
}

.brigade>.weapon2,
.brigadeTemplate>.weapon2 {
	grid-area: weapon2;
}

.brigade>.weapon3,
.brigadeTemplate>.weapon3 {
	grid-area: weapon3;
}

.brigade>.weapon4,
.brigadeTemplate>.weapon4 {
	grid-area: weapon4;
}

.brigade>.weapon5,
.brigadeTemplate>.weapon5 {
	grid-area: weapon5;
}

.brigade>.option1,
.brigadeTemplate>.option1 {
	grid-area: option1;
}

.brigade>.option2,
.brigadeTemplate>.option2 {
	grid-area: option2;
}

.brigade>.option3,
.brigadeTemplate>.option3 {
	grid-area: option3;
}

.brigade>.option4,
.brigadeTemplate>.option4 {
	grid-area: option4;
}


.brigade>.brigadeStats,
.brigadeTemplate>.brigadeStats {
	font-size: var(--font-smaller);
	font-weight: var(--font-weight-bold);
	text-align: center;
}

.brigade>.imp,
.brigadeTemplate>.imp {
	grid-area: imp;
}

.brigade>.impValue,
.brigadeTemplate>.impValue {
	grid-area: impval;
}

.brigade>.move,
.brigadeTemplate>.move {
	grid-area: move;
}

.brigade>.moveValue,
.brigadeTemplate>.moveValue {
	grid-area: moveval;
}

.brigade>.skill2,
.brigadeTemplate>.skill2 {
	grid-area: skill2;
}

.brigade>.skill2Value,
.brigadeTemplate>.skill2Value {
	grid-area: skill2val;
}

.brigade>.skill,
.brigadeTemplate>.skill {
	grid-area: skill;
}

.brigade>.skillValue,
.brigadeTemplate>.skillValue {
	grid-area: skillval;
}

.brigade>.morale,
.brigadeTemplate>.morale {
	grid-area: morale;
}

.brigade>.moraleValue,
.brigadeTemplate>.moraleValue {
	grid-area: moraleval;
}

.brigade>.resist,
.brigadeTemplate>.resist {
	grid-area: resist;
}

.brigade>.resistValue,
.brigadeTemplate>.resistValue {
	grid-area: resistval;
}

.brigade>.cost,
.brigadeTemplate>.cost {
	grid-area: cost;
}

.brigade>.costValue,
.brigadeTemplate>.costValue {
	grid-area: costval;
}


.brigade>.brigadeLevel>.brigadeLevelImg, 
.brigade>.brigadeSize>.brigadeSizeImg,
.brigade>.brigadeWeapon>.brigadeWeaponImg,
.brigade>.brigadeOption>.brigadeOptionImg,
.brigade>.brigadeDel>.brigadeDelImg,
.brigade>.brigadeFlagButton>.brigadeFlagButtonImg,
.brigade>.brigadeInfo>.brigadeInfoImg,
.brigade>.brigadeZoom>.brigadeZoomImg,
.brigadeTemplate>.brigadeLevel>.brigadeLevelImg, 
.brigadeTemplate>.brigadeSize>.brigadeSizeImg,
.brigadeTemplate>.brigadeWeapon>.brigadeWeaponImg,
.brigadeTemplate>.brigadeOption>.brigadeOptionImg,
.brigadeTemplate>.brigadeDel>.brigadeDelImg,
.brigadeTemplate>.brigadeZoom>.brigadeZoomImg,
.brigadeTemplate>.brigadeFlagButton>.brigadeFlagButtonImg,
.brigadeTemplate>.brigadeInfo>.brigadeInfoImg  {
	width: var(--pic-small-brigade);
}

.brigade>.brigadeLevel>.disabledImg,
.brigade>.brigadeSize>.disabledImg,
.brigade>.brigadeWeapon>.disabledImg,
.brigade>.brigadeOption>.disabledImg,
.brigadeTemplate>.brigadeLevel>.disabledImg,
.brigadeTemplate>.brigadeSize>.disabledImg,
.brigadeTemplate>.brigadeWeapon>.disabledImg,
.brigadeTemplate>.brigadeOption>.disabledImg {
	display: none;
	position: absolute;
	width: var(--pic-small-brigade);
	top: 0;
	left: 0;
}

.brigade>.brigadeLevel>.disabledImg.disabled,
.brigade>.brigadeSize>.disabledImg.disabled,
.brigade>.brigadeWeapon>.disabledImg.disabled,
.brigade>.brigadeOption>.disabledImg.disabled,
.brigadeTemplate>.brigadeLevel>.disabledImg.disabled,
.brigadeTemplate>.brigadeSize>.disabledImg.disabled,
.brigadeTemplate>.brigadeWeapon>.disabledImg.disabled,
.brigadeTemplate>.brigadeOption>.disabledImg.disabled {
	display: block;
}

.brigade-drop-hover{
}

.brigade-drop-active{
	z-index: 10;
	transform: scale(1.05, 1.05);
	box-shadow: none;
	border-left: var(--border-left-drop);
	border-top: var(--border-top-drop);
	border-bottom: var(--border-bottom-drop);
	border-right: var(--border-right-drop);
}