/* @CHARSET "ISO-8859-1"; */

.nations{
    grid-area: main;
    margin-left: calc(0.5 * var(--army-max-width));
    margin-right: calc(0.5 * var(--army-max-width));

    display: grid;
    grid-template-columns: var(--army-max-width) var(--army-max-width) var(--army-max-width) var(--army-max-width);
    grid-template-rows: var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth);
    grid-template-areas: 
        "no1 points points no2"
        "nation00 nation01 nation02 nation03"
        "nation10 nation11 nation12 nation13"
        "nation20 nation21 nation22 nation33"
        "nation30 nation31 nation32 nation43";
}

.armies--4col{
	grid-area: main;
	margin-left: calc(0.5 * var(--army-max-width));
	margin-right: calc(0.5 * var(--army-max-width));

	display: grid;
	grid-template-columns: var(--army-max-width3col) var(--army-max-width3col) var(--army-max-width3col);
	grid-template-rows: var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth) var(--army-max-heigth);
	grid-template-areas: 
		"points points points"
		"army00 army01 army02"
		"army10 army11 army12"
		"army20 army21 army22"
		"army30 army31 army32";
}

.pointsLimit {
	grid-area: points;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto;
	grid-template-areas: "labelPoints entryPoints";
}

.pointsLimit>.label {
	grid-area: labelPoints;
    text-align: right;
    font-size: var(--army-font);
    padding-top: calc(var(--army-max-heigth) * 0.2);
}

.pointsLimit>.entry {
	grid-area: entryPoints;
}

.pointsLimit>.entry>.textField{
	padding-top: calc(var(--army-max-heigth) * 0.1);
    float: left;
}

.pointsLimit>.entry>.textField>#pointsLimit{
    text-align: center;
    font-size: var(--army-font);
    background-color: transparent;
    outline: none;
    border:none;
    border: 0.1vw solid transparent;
    border-bottom: var(--border);
    width: var(--point-input-width);
    margin-left: calc(var(--army-max-heigth) * 0.2);
    margin-right: calc(var(--army-max-heigth) * 0.2);
}

.pointsLimit>.entry>.textField>#pointsLimit:focus{
    border-radius: .5vw;
    border: var(--border);
}

.pointsLimit>.entry>.currency{
	text-align: left;
    font-size: var(--army-font);
    padding-top: calc(var(--army-max-heigth) * 0.2);
}

.nation {
	display: grid;
	grid-template-columns: calc(var(--army-max-width) * 0.25) auto;
	grid-template-rows: auto;
	grid-template-areas: "flag name";
	
	background: #bbbbbb;
    color: #000000;
	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);
	border-radius: 0.5vw;
}

.nation:hover {
	color: #000000;
	background: #ffffff;
	filter: unset;
}

.nation.active {
    color: #000000;
    background: #ffffff;
}

.nation > .emblem {
	grid-area: flag;
	filter: grayscale(35%);	
}

.nation > .name {
	grid-area: name;
	
	padding-top: calc(var(--army-max-heigth) * 0.1);
	/* padding-left: calc(var(--army-max-heigth) * 0.1); */
	font-size: var(--font-normal2);
	font-weight: var(--font-weight-bold);
	/* padding-right: calc(var(--army-max-heigth) * 0.2); */
	line-height: 0.9;
	text-align: center;
}

.nation > .emblem > .emblemImg {
	padding-top: calc(var(--army-max-heigth) * 0.1);
	padding-left: calc(var(--army-max-heigth) * 0.1);
	max-width: calc(var(--army-max-width) * 0.21);
}

.templateNationSelector{
	display: none;
}

.nation.active,
.army:hover{
	background: #ffffff; 
	background: url(../../../img/nation-background.png);
	background-size: 100% 100%;
}

.armySelector{
	display: none;
	
	max-width: var(--flex-selector-width-army);
	max-height: var(--flex-selector-height);
	top: var(--flex-top-nation);
	
	margin: 0;
    position: absolute;
    left: 49.5%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	
	background: #dddddd;
    color: #000000;
    
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    overflow: auto;
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	border-radius: 0.5vw;
	box-shadow: var(--box-shadow);
	
	z-index: 100;
}

.army{
	margin: var(--margin-element);
	padding: var(--padding-element-inside);  
	float: left;
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	border-color: #908b8b;
	background: #cccccc;
	
	display: grid;
	grid-template-columns: var(--pic-medium) calc(var(--subarmy-max-width) / 2) calc(var(--subarmy-max-width) / 2);
	grid-template-rows: calc(var(--pic-medium) * 0.60) calc(var(--pic-medium) * 0.15);
	grid-template-areas: 
		"flag name name"
		"flag date suffix";
	border-radius: 0.5vw;
}

.army:hover{
	color: #000000;
}
	
.armyName{
    padding-left: calc(var(--pic-medium) * 0.2);
	grid-area: name;
	line-height: 0.9;
	font-size: var(--font-09);
	font-weight: var(--font-weight-bold);
	text-align: center;
}

.armyDate{
	font-size: var(--font-small);
	font-weight: var(--font-weight-bold);
	padding-left: calc(var(--pic-medium) * 0.2);
	text-align: left;
	grid-area: date;
}

.armySuffix{
	font-size: var(--font-small);
	font-weight: var(--font-weight-bold);
	text-align: right;
	grid-area: suffix;
}

.armyEmblem{
	padding-top: calc(var(--pic-medium) * 0.05);
	grid-area: flag;
	filter: grayscale(35%);
}

.armyEmblem>.armyEmblemImg {
	max-width: var(--pic-medium);
}

.army.inactive{
	filter: opacity(40%);
}


.leeIsSpeaking {
	display: none;
    position: absolute;
    top: 0.5vh;
	left: 25vw;
	z-index: 100;
	font-size: var(--font-smaller);
}

.leeTooltipText{
    position: absolute;
    top: 1.5vw;
    left: 2vw;
    width: 18vw;
    line-height: 0.8;
}

.leeTooltipAuthor{
    position: absolute;
    top: 3.7vw;
    right: 4vw;
	width: 15vw;
	line-height: 0.8;
    text-align: right;
}

.leeTooltipImg{
	width: 23vw;
    height: 6vw;
}