.cannonType{
	grid-area: type;
	margin: auto;
    font-size: var(--font-12);
    font-weight: var(--font-weight-bold);
    text-align: center;
}
.cannonRange{
	grid-area: range;
}
.cannonAp{
	grid-area: ap;
	padding-left: calc(var(--pic-small-brigade) / 2);
}
.cannonPts{
	grid-area: cnpts;
}
.cannonTotalPts{
	grid-area: cntotalpts;
}

.cannon {
	display: grid;
	grid-template-columns:
		var(--pic-small-brigade)  
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		calc(2 * var(--pic-small-brigade))
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade);
	grid-template-rows: 
		var(--pic-small-brigade);
	grid-template-areas: "cntyp cnpic cndel cncount cnadd rangeval apval cnptval no3 cntotalptsval";
}
.cannonAdd.inactive,
.cannonDel.inactive{
	opacity: var(--opacity-disabled);
}

.cannonAdd.active:hover,
.cannonDel.active:hover{
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.cannonTypeVal{
	grid-area: cntyp;
	margin: auto;
    font-size: var(--font-08);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.cannonPic{
	padding-top: var(--padding-fort-cannon);
	grid-area: cnpic;
}
.cannonAdd{
	grid-area: cnadd;
}
.cannonCount{
	grid-area: cncount;
}
.cannonDel{
	grid-area: cndel;
}
.cannonRangeVal{
	grid-area: rangeval;
}
.cannonApVal{
	grid-area: apval;
}
.cannonPtsVal{
	grid-area: cnptval;
}
.cannonTotalPtsVal{
	grid-area: cntotalptsval;
} 

.cannon1{
	grid-area: cn1;
}
.cannon2{
	grid-area: cn2;
}
.cannon3{
	grid-area: cn3;
}
.cannon4{
	grid-area: cn4;
}
.cannon5{
	grid-area: cn5;
}
.cannon6{
	grid-area: cn6;
}
.cannon7{
	grid-area: cn7;
}
.cannon8{
	grid-area: cn8;
}
.cannon9{
	grid-area: cn9;
}
.cannon10{
	grid-area: cn10;
}