@CHARSET "ISO-8859-1";

.corps{
	position: relative;
	width: var(--max-width-corps);

	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-large-button) 
	   var(--pic-large-button) 
	   var(--div-cmd-width) 
       var(--div-cmd-width) 
	   var(--div-cmd-width)  
	   calc(0.5 * var(--div-cmd-width))
	   calc(0.5 * var(--div-cmd-width)) 
	   auto 
	   var(--pic-large-button)
	   var(--pic-large-button);
	grid-template-rows: 
	   var(--pic-large-button)
	   var(--pic-large-button)
	   var(--pic-large-button) 
	   var(--pic-large-button) 
	   calc(2.7 * var(--pic-small-brigade) - 2 * var(--pic-large-button)) 
	   auto;
	grid-template-areas: 
	    "exclamation exclamation cmd title title owntitle owntitle no23 clone del"
		"exclamation exclamation cmd add infimg infamount infhisamount no23 no24 del"
		"points points cmd add cavimg cavamount cavhisamount no no no"
		"expand validator cmd no22 altimg altamount althisamount no no no"
		"expand validator cmd no22 no55 no55 no55 no no no"
		"content content content content content content content content content content";
}
		
.corps > .commander {
	grid-area: cmd;
}

.corps > .corpsValidatorPic{
	display: none;
	grid-area: exclamation;
}

.corps > .corpsName {
    grid-area: title;

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

.corps > .corpsOwnName{
    grid-area: owntitle;
    display: flex;
}

.corps > .corpsOwnName > .corpsOwnNameInput{
    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;
}
	
.corps > .corpsValidator {
    grid-area: validator;
    display: none;
}

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

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

.corps > .corpsPoints{
    grid-area: points;
    font-size: var(--font-medium);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

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

.corps > .divisionAdd{
	grid-area: add;
}

.corps > .corpsDel{
	grid-area: del;
}

.corps > .corpsClone{
    grid-area: clone;
}

.corps > .corpsContent{
	grid-area: content;
}

.armytop>.corpsSelector{
    top: var(--info-offset-x);	
}

.corpsSelector{
	position: absolute;
	display: none;
	
    
    background: var(--background-info);
    font-size: var(--font-small);
    border: var(--border);
    padding: var(--padding-element-inside);
    width: var(--info-text);
     
    z-index: 1000;
}

.corpsSelector>.corpsSelectorItem{
    text-transform: capitalize;
	padding: var(--info-padding-element-inside);
}

.corps > .corpsDel > .corpsDelImg,
.corps > .corpsClone > .corpsCloneImg,
.corps > .expandCollapse > .expandImg,
.corps > .expandCollapse > .collapseImg {
	width: var(--pic-large-button);
}

.corps > .divisionAdd > .divisionAddImg{
	width: var(--pic-medium);
}
	
.corps > .corpsValidatorPic > .corpsValidatorPicImg {
	width: var(--pic-small-medium);
}

.corps > .expandCollapse > .expandImg{
	display: none;
}

.corps > .divisionAdd > .divisionAddImg:hover, 
.corps > .corpsDel > .corpsDelImg:hover,
.corps > .corpsClone > .corpsCloneImg:hover,
.corps > .expandCollapse > .expandImg:hover,
.corps > .expandCollapse > .collapseImg:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.corpsSelector>.corpsSelectorItem:hover {
	background: var(--background-hover);
}

.corps-drop-hover,
.corpsBarButton-drop-hover{
}
.ui-draggable-dragging{
    z-index: 100;
}

.corpsBarButton-drop-active,
.corps-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);
}

.corps>.corpsValidatorInfo{
    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;
}

 .corps > .corpsValidatorPic > .corpsValidatorPicImg:hover {
    background: var(--background-hover);
    border-radius: var(--border-radius-option);
}

.corpsInfIcon{
	grid-area: infimg;
	position: absolute;
    right: 0px;
}
.corpsCavIcon{
	grid-area: cavimg;
	position: absolute;
    right: 0px;
}
.corpsAltIcon{
	grid-area: altimg;
	position: absolute;
    right: 0px;
}

.corpsInfIconImg{
    width: var(--pic-large-button);
}
.corpsCavIconImg{
    width: var(--pic-large-button);
}
.corpsAltIconImg{
    width: var(--pic-large-button);
}

.corpsInfAmount{
	grid-area: infamount;
	padding: var(--padding-element-inside);
	text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}
.corpsCavAmount{
	grid-area: cavamount;
    padding: var(--padding-element-inside);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}
.corpsAltAmount{
	grid-area: altamount;
    padding: var(--padding-element-inside);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}

.corpsInfHistAmount{
	grid-area: infhisamount;
    padding: var(--padding-element-inside);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}
.corpsCavHistAmount{
	grid-area: cavhisamount;
    padding: var(--padding-element-inside);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}
.corpsAltHistAmount{
	grid-area: althisamount;
    padding: var(--padding-element-inside);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    line-height: 0.8;
}