/* @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 nation23"
        "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(--font-16);
    padding-top: calc(var(--army-max-heigth) * 0.15);
}

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

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

.pointsLimit>.entry>.textField>#pointsLimit{
    text-align: center;
    font-size: var(--font-16);
    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(--font-16);
    padding-top: calc(var(--army-max-heigth) * 0.15);
}

.nation {
	display: grid;
	grid-template-columns: calc(var(--army-max-width) * 0.25) calc(var(--army-max-width) * 0.75);
	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.active {
    color: #000000;
    background: #ffffff;
}

.nation > .emblem {
	grid-area: flag;
}

.nation > .name {
	grid-area: name;
	
	padding-top: calc(var(--army-max-heigth) * 0.1);
	padding-left: calc(var(--army-max-heigth) * 0.1);
	padding-right: calc(var(--army-max-heigth) * 0.1);
	font-size: var(--font-10);
	font-weight: var(--font-weight-bold);
}

.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);
}

.fleetSelector{
	display: none;
	
	max-width: var(--flex-selector-width);
	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: 10vw;
    padding-right: 10vw;
    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;
}

.fleet{
	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) var(--subarmy-max-width);
	grid-template-rows: calc(var(--pic-medium) * 0.75);
	grid-template-areas: "flag name";
	border-radius: 0.5vw;
}

.nation.inactive>.name,
.nation.inactive>.emblem{
	opacity: 0.3;
}

.nation:not(.active):not(.inactive):hover{
	background: #ffffff;
	border-color: #16007A;
	box-shadow: inset 0 0 1.5vw #16007A;
}

.nation.active,
.fleet:hover{
	border-color: #16007A;
	box-shadow: inset 0 0 1.5vw #16007A;
	background: url(../../../img/nation-background.png);
    background-size: 100% 100%;
}
	
.fleetName{
    padding-left: calc(var(--pic-medium) * 0.2);
	grid-area: name;
	
	font-size: var(--font-10);
    font-weight: var(--font-weight-bold);
}

.fleetEmblem{
	padding-top: calc(var(--pic-medium) * 0.05);
	grid-area: flag;
}

.fleetEmblemImg {
	max-width: var(--pic-medium);
}