:root {
    --size-factor: 1.2;
    --hover: scale(1.1, 1.1);
    --opacity-disabled: 0.3;
    --max-width: 98vw;
    --border-radius-option: .2vw;
/* Sizes */
    --max-width-corps: 97vw;
    --max-width-header: 99vw;
    --max-width-header-half: 49.5vw;
    --min-height-corps: 9vw;
    --max-height-header: 5vw;
    --max-height-header-points: calc(2.5vw * var(--size-factor));
/* Backgrounds and colors */
    --background: #D0D0CE;
    --background-shadow: #808080;
    --background-shadow-hover: #000000;
    --background-info: #ffffff;
    --background-header-info: #C0C0C0;
    --background-hover: #7A7AAD;
    --background-properties: #bdbbbaba;
    --background-div-acive: #000000;
    
    --color-error: #FF0000;
    --color-ok: #00C100;
/* Fonts */
    --font-43: calc(0.43vw * var(--size-factor));
    --font-55: calc(0.55vw * var(--size-factor));
    --font-06: calc(0.6vw * var(--size-factor));
    --font-07: calc(0.7vw * var(--size-factor));
    --font-08: calc(0.8vw * var(--size-factor));
    --font-09: calc(0.9vw * var(--size-factor));
    --font-10: calc(1.0vw * var(--size-factor));
    --font-12: calc(1.2vw * var(--size-factor));
    --font-13: calc(1.3vw * var(--size-factor));
    --font-16: calc(1.6vw * var(--size-factor));
    --font-17: calc(1.7vw * var(--size-factor));
    --font-20: calc(2.0vw * var(--size-factor));
    --font-25: calc(2.5vw * var(--size-factor));

    --font-weight-normal: 400;
    --font-weight-bold: 800;
/* Hq */
    --hq-selector-width: calc(35vw * var(--size-factor));
    --hq-top: calc(var(--max-height-header) + 2 * var(--max-height-header-points));
    --hq-left: calc(2vw);
    --hq-summary-margin-top: calc(0.3vw * var(--size-factor));
/* Selector */
    --army-max-width: calc(0.20 * var(--max-width));
	--army-max-heigth: calc(4.7vw);
	--army-max-width3col: calc(0.27 * var(--max-width));
    --subarmy-max-width: calc(10vw * var(--size-factor));
    --point-input-width: calc(12vw * var(--size-factor));
/* Selector */
    --flex-selector-width: calc(115vw);
    --flex-selector-height: 95vh;
    --flex-top: calc(var(--max-height-header) + 2 * var(--max-height-header-points));
    --flex-bottom: calc(0vw * var(--size-factor));
    --flex-right: calc(0vw * var(--size-factor));
    --flex-left: calc(-8vw);
    --flex-max-height: calc(16vw * var(--size-factor));
    --flex-top-nation: calc(28vw * var(--size-factor));
/* info */
    --info-head: calc(8vw * var(--size-factor));
    --info-text: calc(14vw * var(--size-factor));
    --info-height: calc(2vw * var(--size-factor));
    --info-offset-x: calc(3.5vw * var(--size-factor));
    --info-offset-x-hq: calc(4vw * var(--size-factor));
    --info-offset-y-hq: calc(12vw * var(--size-factor));
    --info-offset-x-unit: calc(6vw * var(--size-factor));
    --info-offset-x-global: calc(4vw * var(--size-factor));
    --info-offset-x-break: calc(31vw * var(--size-factor));
    --info-offset-y-break: calc(5vw * var(--size-factor));
/* Zoom position */
    --zoom-ship-top: calc(15vw);
    --zoom-ship-left: calc(8vw * var(--size-factor));
    --zoom-fort-top: calc(15vw);
    --zoom-fort-left: calc(10vw * var(--size-factor));
/* Card zoom */
    --card-ship-top: calc(14vw);
    --card-ship-left: calc(28vw * var(--size-factor));
    --card-width: calc(25vw * var(--size-factor));
/* Borders  */
    --border-inset: calc(0.4vw * var(--size-factor));
    --border: 0.1vw solid #908b8b;
    --box-shadow: 0.5vw 0.5vw 0.5vw var(--background-shadow);
    --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;
        
    --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);

    --border-left-drop-accept: 0.1vw dashed var(--background-shadow-hover);
    --border-top-drop-accept: 0.1vw dashed var(--background-shadow-hover);
    --border-bottom-drop-accept: 0.2vw dashed var(--background-shadow-hover);
    --border-right-drop-accept: 0.2vw dashed var(--background-shadow-hover);    
/* Pictures */
    --pic-083: calc(.83333vw * var(--size-factor));
    --pic-small: calc(1vw * var(--size-factor));
    --pic-small-brigade: calc(1.6vw * var(--size-factor));
    --pic-20: calc(2vw * var(--size-factor));
    --pic-small-medium: calc(2.6vw * var(--size-factor));
    --pic-14: calc(1.4vw * var(--size-factor));
    --pic-medium: calc(3vw * var(--size-factor));
    --pic-large: calc(4vw * var(--size-factor));
    --pic-large-button: calc(1.5vw * var(--size-factor));
/* Footer */
    --footer-row: calc(0.7vw * var(--size-factor));

    
    --div-cmd-width: calc(10vw * var(--size-factor));
    --div-army-name-width: calc(10vw * var(--size-factor));
    --div-own-name-padding-bottom: calc(0.3vw * var(--size-factor));
    
    --padding-element-inside: calc(0.25vw * var(--size-factor));
    --padding-element-limits: calc(0.15vw * var(--size-factor));
    --padding-name-top: calc(0.2vw * var(--size-factor));
    --padding-name-right : calc(0.2vw * var(--size-factor));
    --padding-error-left: calc(1vw * var(--size-factor));
    --padding-flex: calc(1vw * var(--size-factor));
    --margin-element: calc(0.2vw * var(--size-factor));    
    --padding-fort-cannon: calc(0.4vw * var(--size-factor));
    /* Print */
    --size-factor-print: 1.1;
    --print-preview-transform-scale: 0.8;
    --print-border-section-separator: 0.2vw solid #908b8b;
    --print-section-padding: calc(1vw * var(--size-factor-print));
    --print-cell-padding: calc(0.3vw * var(--size-factor-print));

	--print-row-height-large: calc(2.5vw * var(--size-factor-print));
    --print-row-height-title: calc(2vw * var(--size-factor-print));
    
    --print-cell-info-width: calc(5vw * var(--size-factor-print));
    --print-cell-info-height: calc(1vw * var(--size-factor-print));
  
}


@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 and (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;
}

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

.gridselector {
	cursor: default; 
	display: grid;
	grid-template-rows: 20vw 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(1.2 * 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(1.2 * 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.5, 1.5);
	z-index: 1000;
}

.cardActive {
	transform: scale(1.5, 1.5);
	z-index: 1000;
}

.ui-tooltip {
    font-size: calc(var(--font-06));
  }