@CHARSET "ISO-8859-1";

.division[formation="inf"]{
    background: url('../../../img/unit/inf-logo.png') right top no-repeat, #F7F7F7;
    background-size: 12vw, 100%;
}

.division[formation="cav"]{
    background: url('../../../img/unit/cav-logo.png') right top no-repeat, #F7F7F7;
    background-size: 12vw, 100%;
}

.division[formation="alt"]{
    background: url('../../../img/unit/alt-logo.png') right top no-repeat, #F7F7F7;
    background-size: 12vw, 100%;
}

.division {
	position: relative;
	
	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);

	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)
	   auto 
	   var(--pic-large-button)
	   var(--pic-large-button);
	grid-template-rows: 
	   var(--pic-large-button) 
	   var(--pic-large-button) 
	   calc(2.7 * var(--pic-small-brigade) - var(--pic-large-button)) 
	   var(--pic-large-button) 
	   auto;
	grid-template-areas: 
	    "exclamation exclamation title title owntitle no no clone del"
		"exclamation exclamation cmd content content content content content content"
		"points points cmd content content content content content content"
		"points points cmd content content content content content content"
		"expand validator cmd content content content content content content";
}

.division > .commander{
	grid-area: cmd;
}

.division > .divisionValidatorPic{
	display: none;
	grid-area: exclamation;
}

.division > .divisionName{
    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;
}

.division > .divisionOwnName{
    grid-area: owntitle;
    
    display: flex;
}

.division > .divisionOwnName > .divisionOwnNameInput{
    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;
}

.division > .divisionValidator {
	grid-area: validator;
	font-size: var(--font-small);
	padding-left: var(--padding-error-left);
	display: none;
}
.division > .divisionValidator {
    grid-area: validator;
    display: none;
}

.division, .divisionValidatorInfo {
    font-size: var(--font-small);
    padding-left: var(--padding-error-left);
}

.divisionValidator>.templateValidatorRow > b {
	color: var(--color-error);
}

.division > .divisionPoints {
    grid-area: points;
	
	padding: var(--padding-element-inside);
    font-size: var(--font-medium);
    font-weight: var(--font-weight-bold);
    height: var(--pic-very-small);
    width: var(--pic-large);
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: 60% 150%;
}

.division > .expandCollapse{
	grid-area: expand;
}

.division > .divisionAdd{
	grid-area: add;
}

.division > .divisionDel{
	grid-area: del;
}

.division > .divisionClone{
    grid-area: clone;
}

.division > .divisionContent{
	grid-area: content;
}

.divisionSelector{
	position: absolute;
	display: none;
	
    top: var(--info-offset-y-divs);
    left: var(--info-offset-x-divs);
    background: var(--background-info);
    font-size: var(--font-small);
    border: var(--border);
    padding: var(--padding-element-inside);
    width: var(--info-text);
    z-index: 100;
}

.divisionSelector>.divisionSelectorItem{
	padding: var(--info-padding-element-inside);
	text-transform: capitalize;
}

.division > .divisionAdd > .divisionAddImg,
.division > .divisionDel > .divisionDelImg,
.division > .divisionClone > .divisionCloneImg,
.division > .expandCollapse > .expandImg,
.division > .expandCollapse > .collapseImg {
	width: var(--pic-large-button);
}

.division > .divisionValidatorPic > .divisionValidatorPicImg {
	width: var(--pic-small-medium);
}

.division > .expandCollapse > .expandImg{
	display: none;
}

.division > .divisionAdd > .divisionAddImg:hover, 
.division > .divisionDel > .divisionDelImg:hover,
.division > .divisionClone > .divisionCloneImg:hover,
.division > .expandCollapse > .expandImg:hover,
.division > .expandCollapse > .collapseImg:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.divisionSelector>.divisionSelectorItem:hover {
	background: var(--background-hover);
}

.division-drop-hover{
}

.division-drop-active{
	z-index: 10;
	transform: scale(1, 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);
}

.division>.divisionValidatorInfo{
    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;
}

 .division > .divisionValidatorPic > .divisionValidatorPicImg:hover {
    background: var(--background-hover);
    border-radius: var(--border-radius-option);
}