@CHARSET "ISO-8859-1";

.roster{
	grid-area: roster;
}

.roster>.armytop {
	position: relative;
	
    background: url('../../../img/unit/hq-logo.png') right top no-repeat, #D1D1D1;
    background-size: 12vw, 100%;

	width: var(--max-width-corps);
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
	
	margin: var(--margin-element);
	margin-bottom: 0px;
	padding: var(--padding-element-inside);
    
	display: grid;
	grid-template-columns: 
	   var(--pic-large-button) 
	   var(--pic-large-button) 
	   var(--div-cmd-width)
	   var(--div-cmd-width)
	   var(--div-cmd-width)
	   var(--div-cmd-width) 
	   var(--div-army-name-width) 
	   auto
	   var(--pic-large-button);
	grid-template-rows: var(--pic-large-button) auto;
	grid-template-areas: 
	    "exclamation exclamation title title owntitle no no no changes"
		"validator validator cmd global global global global global version";
}

.armytop > .commander {
	grid-area: cmd;
}

.armytop > .corpsAdd{
    grid-area: add;
}

.armytop > .expandCollapse{
    grid-area: expand;
}

.armytop > .armyChangesButton{
    grid-area: changes;
}

.armytop > .armyChangesButton > .armyChangesButtonImg {
    width: var(--pic-large-button);
}

.armytop > .armyValidatorPic{
	display: none;
	grid-area: exclamation;
}

.armytop > .armyName {
	grid-area: title;

	font-size: var(--font-normal);
    font-weight: var(--font-weight-bold);
	padding-right: var(--padding-element-inside);
	padding-bottom: var(--padding-element-inside);
	text-align: right;
}

.armytop > .armytopOwnName{
    grid-area: owntitle;
    
    display: flex;
}

.armytop > .armytopOwnName > .armytopOwnNameInput{
    text-align: center;
    font-size: var(--font-small);
    background-color: transparent;
    outline: none;
    border: 0.1vw solid transparent;
    border-bottom: var(--border);
    width: var(--point-input-width);
    margin: 0 auto;
}

.armyValidator>.templateValidatorRow > b {
	color: var(--color-error);	
}

.armytop > .armyValidator {
    grid-area: validator;
    display: none;
}

.armytop, .armyValidatorInfo {
    font-size: var(--font-small);
    padding-left: var(--padding-error-left);
}

.armytop > .armyValidatorPic > .armyValidatorPicImg:hover {
	background: var(--background-hover);
    border-radius: var(--border-radius-option);
}

.armytop > .armyValidatorPic > .armyValidatorPicImg {
    width: var(--pic-small-medium);
}

.armytop > .corpsAdd > .corpsAddImg,
.armytop > .expandCollapse > .expandImg, 
.armytop > .expandCollapse > .collapseImg {
    width: var(--pic-large-button);
}

.armytop > .expandCollapse > .expandImg{
    display: none;
}
.armytop > .corpsAdd > .corpsAddImg:hover, 
.armytop > .expandCollapse > .expandImg:hover,
.armytop > .expandCollapse > .collapseImg:hover,
.armytop > .armyChangesButton > .armyChangesButtonImg:hover {
    background: var(--background-hover);
    border-radius: var(--border-radius-option);
}

.armytop>.armyValidatorInfo{
    display: none;
    position: absolute;
    width: calc(1.5 * var(--flex-selector-width));
    
    padding: var(--padding-flex);
    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-color: var(--background-info);
    z-index: 100;
}

.armytop>.armyChanges{
    display: none;
    position: absolute;
    right: 0;
    width: calc(0.7 * var(--max-width));
    
    padding: var(--padding-flex);
    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-color: var(--background-info);
    z-index: 100;
}

.armytop>.armyChanges>.version{ 
    font-size: var(--font-small);
    font-weight: var(--font-weight-bold);
    padding-left: var(--padding-error-left);
}

.armytop>.armyChanges>.change{
    font-size: var(--font-small);
    padding-left: calc(2 * var(--padding-error-left));
}

.armytop>.armyVersion{ 
	grid-area: version;
	text-align: center;
    font-size: var(--font-small);
    font-weight: var(--font-weight-bold);
}