.roster{
    grid-area: roster;
}

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

	width: var(--max-width-corps);
	border-left: var(--border-left);
	border-top: var(--border-top);
    border-right: var(--border-right);
    border-bottom: var(--border-top);
	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 global global global global global global version";
}

.fleettop > .fleetChangesButton{
    grid-area: changes;
}

.fleettop > .fleetChangesButton > .fleetChangesButtonImg {
    width: var(--pic-large-button);
}

.fleettop > .fleetValidatorPic{
	display: none;
	grid-area: exclamation;
}

.fleettop > .fleetName {
	grid-area: title;

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

.fleettop > .fleettopOwnName{
    grid-area: owntitle;
    
    display: flex;
}

.fleettop > .fleettopOwnName > .fleettopOwnNameInput{
    text-align: center;
    font-size: var(--font-07);
    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);	
}

.fleettop > .fleetValidator {
    grid-area: validator;
    display: none;
}

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


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

.fleettop > .fleetValidatorPic > .fleetValidatorPicImg {
    width: var(--pic-small-medium);
}

.fleettop>.fleetValidatorInfo{
    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;
}

.fleettop>.fleetChanges{
    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;
}

.fleettop>.fleetChanges>.version{ 
    font-size: var(--font-06);
    font-weight: var(--font-weight-bold);
    padding-left: var(--padding-error-left);
}

.fleettop>.fleetChanges>.change{
    font-size: var(--font-06);
    padding-left: calc(2 * var(--padding-error-left));
}

.fleettop>.fleetVersion{ 
	grid-area: version;
	text-align: center;
    font-size: var(--font-06);
    font-weight: var(--font-weight-bold);
}