@CHARSET "ISO-8859-1";

:root {
    --size-factor: 1.2;
    
    --background: #D0D0CE;
    --background-shadow: #808080;
    --background-shadow-hover: #ffff00;
    --background-info: #ffffff;
    --background-header-info: #C0C0C0;
    --background-hover: #7A7AAD;
    --background-properties: #bdbbbaba;
    --background-div-acive: #5c1fca;
    
    --color-error: #FF0000;
    --color-ok: #00C100;
    
    --hover: scale(1.1, 1.1);
    
    --max-width-header: 99vw;
    --max-width-header-half: 49.5vw;
    --max-height-header: 5vw;
    --max-height-header-points: calc(2.5vw * var(--size-factor));
    --max-height-header-limits: calc(2vw * var(--size-factor));
    
    --max-width: 98vw;
    --max-width-corps: 97vw;
    --max-width-div: 94vw;
    
    --tooltip-width: calc(20vw * var(--size-factor));
    --alt-hover-height: calc(3.5vw * var(--size-factor));

    --flex-selector-width-army: calc(67vw * var(--size-factor));
    --flex-selector-width: calc(14vw * var(--size-factor));
    --flex-selector-height: calc(100vw * var(--size-factor));
    --flex-right-to-hide: -18vw;
    --flex-top: calc(var(--max-height-header) + 2.5 * var(--max-height-header-points));
    --flex-top-nation: calc(30vw * var(--size-factor));
    
    --flex-left: calc(0vw * var(--size-factor));
    --flex-left-error: calc(4vw * var(--size-factor));
    
    --pic-very-small: calc(.8vw * var(--size-factor));
    --pic-very-small2: calc(.83333vw * var(--size-factor));
    --pic-small: calc(1vw * var(--size-factor));
    --pic-small-brigade: calc(1.3vw * var(--size-factor));
    --pic-small-medium: calc(2.6vw * var(--size-factor));
    --pic-small-medium-14: calc(1.4vw * var(--size-factor));
    --pic-small-medium-x: calc(3vw * var(--size-factor));
    --pic-medium: calc(3vw * var(--size-factor));
    --pic-large: calc(4vw * var(--size-factor));
    --pic-large-x: calc(8vw * var(--size-factor));
    --pic-large-x-points: calc(6vw * var(--size-factor));
	--pic-large-x-brigade: calc(6vw * var(--size-factor));
	--pic-large-brigade: calc(3vw * var(--size-factor));
	
    --pic-large-button: calc(1.5vw * var(--size-factor));
    
    --cmd-max-height: calc(5.3vw * var(--size-factor));
    --cmd-max-width: calc(8vw * var(--size-factor));
    
    --div-cmd-width: calc(10vw * var(--size-factor));
    --div-army-name-width: calc(10vw * var(--size-factor));
    --div-name-width: calc(20vw * var(--size-factor));

	--army-max-width: calc(0.20 * var(--max-width));
	--army-max-width3col: calc(0.27 * var(--max-width));
	--army-max-heigth: calc(4.7vw);
    --subarmy-max-width: calc(12.4vw * var(--size-factor));
    --army-font: calc(2vw);
    --point-input-width: calc(12vw * var(--size-factor));
    
    --padding-element-inside: calc(0.3vw * var(--size-factor));
    --padding-element-limits: calc(0.15vw * var(--size-factor));
    --padding-name-top: calc(0.2vw * var(--size-factor));
    --padding-error-left: calc(1vw * var(--size-factor));
    --padding-flex: calc(2vw * var(--size-factor));
    
    --margin-element: calc(0.2vw * var(--size-factor));
    
    --border-radius-option: .2vw;
    
    --opacity-disabled: 0.3;
    
    --font-very-small: calc(0.43vw * var(--size-factor));
    --font-smaller: calc(0.6vw * var(--size-factor));
    --font-small-07: calc(0.55vw * var(--size-factor));
    --font-small: calc(0.7vw * var(--size-factor));
    --font-small-bigger: calc(0.8vw * var(--size-factor));
    --font-09: calc(0.9vw * var(--size-factor));
    --font-medium: calc(1vw * var(--size-factor));
    --font-normal2: calc(1.2vw * var(--size-factor));
    --font-normal: calc(1.3vw * var(--size-factor));
    --font-biger: calc(1.7vw * var(--size-factor));
    --font-large: calc(2vw * var(--size-factor));
    --font-very-large: calc(2.5vw * var(--size-factor));
    
    --font-weight-normal: 600;
    --font-weight-bold: 800;
    
    --border-inset: calc(0.4vw * var(--size-factor));
    --border: 0.1vw solid #908b8b;
    --border-separator: 0.2vw solid #908b8b;
    --border-left: 0.1vw solid #908b8b;
	--border-top: 0.1vw solid #908b8b;
	--border-bottom: 0.2vw solid #908b8b;
	--border-right: 0.2vw solid #908b8b;
	--box-shadow: 0.5vw 0.5vw 0.5vw var(--background-shadow);
	
	--border-left-drop: 0.1vw solid var(--background-shadow-hover);
	--border-top-drop: 0.1vw solid var(--background-shadow-hover);
	--border-bottom-drop: 0.2vw solid var(--background-shadow-hover);
	--border-right-drop: 0.2vw solid var(--background-shadow-hover);
	
	--info-head: calc(8vw * var(--size-factor));
	--info-text: calc(15vw * var(--size-factor));
	--info-height: calc(2vw * var(--size-factor));
	--info-offset-x: calc(3.5vw * var(--size-factor));
	--info-offset-x-main: calc(0vw * var(--size-factor));
	--info-offset-x-brigade: calc(6vw * var(--size-factor));
	--info-padding-element-inside: calc(0.8vw * var(--size-factor));
	--info-offset-y-divs: calc(3vw * var(--size-factor));
	--info-offset-x-divs: calc(13vw * var(--size-factor));
	
	--footer-row: calc(0.7vw * var(--size-factor));
	
	--property-head: 10vw;
	--property-text: 86vw;
	--property-height: calc(1.5vw * var(--size-factor));
	
	--size-factor-print: 1.1;
	--print-cell-info-width: calc(7vw * var(--size-factor-print));
	--print-info-margin: calc(1.5vw * var(--size-factor-print));
	--print-cell-padding: calc(0.1vw * var(--size-factor-print));
	--print-cell-width: calc(3.5vw * var(--size-factor-print));
	--print-cell-width-img: calc(4.5vw * var(--size-factor-print));
	--print-cell-width-img-double: calc(5.5vw * var(--size-factor-print));
	--print-row-height: calc(1.8vw * var(--size-factor-print));
	--print-row-height-large: calc(2.5vw * var(--size-factor-print));
	--print-row-height-large-margin: calc(2.0vw * var(--size-factor-print));
	--print-row-height-title: calc(7vw * var(--size-factor-print));
	--print-row-height-player-name: calc(1.8vw * var(--size-factor-print));
	--print-img-width: calc(2vw * var(--size-factor-print));
	--print-img-width-large: calc(4vw * var(--size-factor-print));
	--print-player-name:  calc(15vw * var(--size-factor-print));
    --print-padding-error-left-level1: calc(1vw * var(--size-factor-print));
    --print-padding-error-left-level2: calc(4vw * var(--size-factor-print));
    --print-padding-error-left-level3: calc(7vw * var(--size-factor-print));
    --print-font: calc(1.0vw * var(--size-factor-print));
    --print-font-title: calc(1.2vw * var(--size-factor-print));
    
    --size-factor-print-tail: 1.1;
    --print-transform-scale-tail: 1.5;
    --print-transform-scale-tail-brg: 1.1;
    --print-preview-transform-scale: 0.9;
    --border-separator-big-tail: 0.2vw solid #908b8b;
    --border-separator-tail: 0.1vw solid #908b8b;
    --print-row-height-tail: calc(1.8vw * var(--size-factor-print));
    --print-row-height-title-tail: calc(7vw * var(--size-factor-print));
    --print-row-height-player-name-tail: calc(1.8vw * var(--size-factor-print));
    --print-row-height-global-tail: calc(10.5vw * var(--size-factor-print-tail));
    --print-global-margin-tail: calc(4vw * var(--size-factor-print-tail));
    --print-row-height-commander-tail: calc(11vw * var(--size-factor-print-tail));
    --print-cmd-max-width: calc(17vw * var(--size-factor-print-tail));
    --print-cmd-margin-tail: calc(5vw * var(--size-factor-print-tail));
    
    --print-brigade-rule-name-tail: calc(20vw * var(--size-factor-print-tail));
    --print-brigade-rule-text-tail: calc(65vw * var(--size-factor-print-tail));

    --print-row-height-commander-name-tail: calc(1.5vw * var(--size-factor-print-tail));
    --print-text-margin-tail: calc(1.5vw * var(--size-factor-print-tail));
    --print-row-height-corps-name-tail: calc(1.5vw * var(--size-factor-print-tail));
    --print-row-height-divs-name-tail: calc(1.5vw * var(--size-factor-print-tail));
    --print-brg-margin-right-tail: calc(2vw * var(--size-factor-print-tail));
    --print-brg-margin-bottom-tail: calc(1vw * var(--size-factor-print-tail));
    
    --print-font-title-tail: calc(1.2vw * var(--size-factor-print-tail));
    --print-font-tail: calc(1.1vw * var(--size-factor-print-tail));
}


@media screen and (max-width:800px) {
	:root {    
		--size-factor: 1.2;
	}
}

@media screen and (min-width:800px) and (max-width:1600px) {
	:root {    
		--size-factor: 1.2;
	}
}

@media screen (min-width:1600px) {
	:root {    
		--size-factor: 1.2;
	}
}

body {
	font-family: "Garamond", "Calibri", "Times New Roman";
	margin: 0vw;
	width: var(--max-width);
	background-image: url(../../img/background-bottom.png), url(../../img/background.png);
    background-position: center bottom, center top;
    background-repeat: no-repeat, repeat;
}

.floatdiv{
	display: none;
	position: fixed;
	top: calc(5.3vw + var(--max-height-header-points) + var(--max-height-header-limits));
	left: 0.2vw;
	width: var(--pic-small-medium);
	height: var(--pic-small-medium);
    z-index: 999;
    opacity:0.3;
}

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

.floatdiv:hover{
    background: var(--background-hover);
    border-radius: var(--border-radius-option);
    opacity: 1;
}

.floatdiv>.corpsAdd>.corpsAddImg {
    width: var(--pic-small-medium);
    height: var(--pic-small-medium);
}

.grid {
	cursor: default; 
	layout .css.grid.enabled;
	display: grid;
	grid-template-rows: 6vw 43vw auto;
	grid-template-columns: var(--max-width);
	grid-template-areas: "header" "main" "footer";
}

.gridselector {
	cursor: default; 
	layout .css.grid.enabled;
	display: grid;
	grid-template-rows: 15vw 30vw auto;
	grid-template-columns: var(--max-width);
	grid-template-areas: "header" "main" "footer";
}

.gridheader{
	position: fixed;
	z-index: 500;
	display: grid;
	grid-template-rows: var(--max-height-header) calc(2.3 * var(--max-height-header-points));
	grid-template-columns: var(--max-width-header);
	grid-template-areas: "header" "navigation";
}

.gridroster {
	cursor: default; 
	padding-top: calc(var(--max-height-header) + calc(2.3 * var(--max-height-header-points)));
	display: grid;
	grid-template-rows: auto auto auto auto;
	grid-template-columns: var(--max-width);
	grid-template-areas: "rosterInfo" "roster" "properties" "footer";
}

.zoomActive {
	transform: scale(1.7, 1.7);
	z-index: 1000;
}

.ui-tooltip {
    font-size: calc(var(--font-small) * var(--size-factor));
    max-width: var(--tooltip-width);
  }