@CHARSET "ISO-8859-1";

.globalOptions {
	grid-area: global;
	float: left;
}

.globalOption {
	position: relative;
	margin: var(--margin-element);
	
	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);
	
	float: left;
	padding: var(--padding-element-inside);
	
	display: grid;
	grid-template-columns: var(--pic-small) var(--pic-small-medium) var(--pic-small) var(--pic-small);
	grid-template-rows: var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small);
	grid-template-areas: "pic pic no1 add"
		"pic pic amount amount"
		"pic pic no2 del"
		"zoom name name cost"
		"info name name costval";
}

.globalOption > .inactive > .img{
	opacity: var(--opacity-disabled);
}

.globalOption>.globalOptionInfo {
	grid-area: info;
}

.globalOption>.globalOptionZoom {
	grid-area: zoom;
}

.globalOption>.globalOptionPic {
	grid-area: pic;
	
	position: relative;
}

.globalOption>.globalOptionName {
	grid-area: name;

	font-size: var(--font-06);
	font-weight: var(--font-weight-bold);
	padding-top: var(--padding-name-top);
	text-align: center;
	line-height: 0.8;
}

.globalOption>.globalOptionStats {
	text-align: center;
	
	font-size: var(--font-06);
	font-weight: var(--font-weight-bold);
}

.globalOption>.globalOptionPlus{
	grid-area: add;
}

.globalOption>.globalOptionMinus{
	grid-area: del;
}

.globalOption>.globalOptionAmount{
	grid-area: amount;
	
	padding-top: var(--padding-element-top);
	font-size: var(--font-06);
	font-weight: var(--font-weight-bold);
	text-align: right;
}

.globalOption>.globalOptionPlus:not(.inactive):hover,
.globalOption>.globalOptionMinus:not(.inactive):hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.globalOption>.cost {
	grid-area: cost;
}

.globalOption>.costValue {
	grid-area: costval;
}

.globalOptions>.inactive>.globalOptionPic>.img {
	opacity: var(--opacity-disabled);
}

.globalOption>.globalOptionInfo>.globalOptionInfoImg,
.globalOption>.globalOptionPlus>.globalOptionPlusImg,
.globalOption>.globalOptionMinus>.globalOptionMinusImg,
.globalOption>.globalOptionZoom>.globalOptionZoomImg {
	width: var(--pic-small);
}

.globalOption>.globalOptionPic>.globalOptionPicImg {
	width: var(--pic-medium);
}

.globalOption>.globalOptionPic>.disabledImg {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--pic-medium);
}

.globalOptionSizeFort,
.globalOptionSizeFleet {
    position: relative;
    margin: var(--margin-element);
    
    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);
    
    float: left;
    padding: var(--padding-element-inside);
    
    display: grid;
    grid-template-columns: var(--pic-14) var(--pic-14) var(--pic-14) var(--pic-14);
    grid-template-rows: var(--pic-083) var(--pic-083) var(--pic-083) var(--pic-083) var(--pic-083) var(--pic-083);
    grid-template-areas: 
        "name name name name"
        "txt1 txt1 val1 val1"
        "txt2 txt2 val2 val2"
        "txt3 txt3 val3 val3"
        "txt4 txt4 val4 val4"
        "txt5 txt5 val5 val5";
}


.globalOptionSizeName{
    grid-area: name;
    font-size: var(--font-07);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: center;
    line-height: 0.8;
}
.globalOptionSize1,
.globalOptionSize2,
.globalOptionSize3,
.globalOptionSize4,
.globalOptionSizeTotal{
    font-size: var(--font-06);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}
.globalOptionSize1{
    grid-area: txt1;
}
.globalOptionSize2{
    grid-area: txt2;
}
.globalOptionSize3{
    grid-area: txt3;
}
.globalOptionSize4{
    grid-area: txt4;
}
.globalOptionSizeTotal{
    border-top: var(--border-top); 
    grid-area: txt5;  
}

.globalOptionSize1Val,
.globalOptionSize2Val,
.globalOptionSize3Val,
.globalOptionSize4Val,
.globalOptionSizeTotalVal{
    font-size: var(--font-06);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;    
}
.globalOptionSize1Val{
    grid-area: val1;  
}
.globalOptionSize2Val{
    grid-area: val2;
}
.globalOptionSize3Val{
    grid-area: val3;
}
.globalOptionSize4Val{
    grid-area: val4;  
}
.globalOptionSizeTotalVal{
    grid-area: val5;
    border-top: var(--border-top); 
}

.globalOptionSizeImg{
    width: var(--pic-20);
}