.slots{
	grid-gap: 1px;
}

.slot{
	border: 1px solid #000000;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 33px rgb(255 255 255 / 29%), 0 0 17px rgb(51 51 51 / 38%);
}

.slot[alt*='tabor']{
	height: 123px;
}

.slotsCmdO>*>.slot{
	border: 1px solid #000000;
	border-radius: 100px;
	margin-left: 40px;
}


.slotsCmdO {
	grid-area: slots;
	display: grid;
	grid-template-columns: 90px;
	grid-template-rows: 60px;
	grid-template-areas: 
		"unit_pic1";
	max-width: 300px;
}

.unitCmdO {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_left    margin_top    margin_right"
		"margin_left    slots         margin_right"
		"unit_orders    unit_orders   unit_orders"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.unitKick {
	display: grid;
	grid-template-columns: 240px;
	grid-template-rows: 310px;
	grid-template-areas: 
		"noclass";
	max-width: 240px;
	border: 3px solid transparent;
} 

.kickImg{
	margin-top: 35px;
}

.slotsCavS,
.slotsDraS {
	grid-area: slots;
	display: grid;
	grid-template-columns: 30px 60px 60px;
	grid-template-rows: 45px 45px;
	grid-template-areas: 
		"none unit_pic1 unit_pic2"
		"none unit_pic3 unit_pic4";
	max-width: 300px;
}

.unitCavS,
.unitDraS {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"noclass     	noclass    	  noclass"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
		
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsCavM,
.slotsDraM {
	grid-area: slots;
	display: grid;
	grid-template-columns: 60px 60px 60px;
	grid-template-rows: 45px 45px;
	grid-template-areas: 
		"unit_pic1 unit_pic2 unit_pic3"
		"unit_pic4 unit_pic5 unit_pic6";
	max-width: 300px;
}

.unitCavM,
.unitDraM {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsCavL,
.slotsDraL {
	grid-area: slots;
	display: grid;
    grid-template-columns: 55px 55px 55px 55px;
    grid-template-rows: 41px 41px;
	grid-template-areas: 
		"unit_pic5 unit_pic1 unit_pic2 unit_pic6"
		"unit_pic7 unit_pic3 unit_pic4 unit_pic8";
	max-width: 300px;
	margin-left: 8px;
}

.unitCavL,
.unitDraL {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"slots          slots         slots"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 


.slotsInfS {
	grid-area: slots;
	display: grid;
	grid-template-columns: 30px 60px 60px;
	grid-template-rows: 30px 30px 30px;
	grid-template-areas: 
		"none unit_pic1 unit_pic2"
		"none unit_pic3 unit_pic4"
		"none unit_pic5 unit_pic6";
	max-width: 300px;
}

.unitInfS {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsInfM {
	grid-area: slots;
	display: grid;
	grid-template-columns: 60px 60px 60px;
	grid-template-rows: 30px 30px 30px;
	grid-template-areas: 
		"unit_pic1 unit_pic2 unit_pic3"
		"unit_pic4 unit_pic5 unit_pic6"
		"unit_pic7 unit_pic8 unit_pic9";
	max-width: 300px;
}

.unitInfM {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsInfL {
	grid-area: slots;
	display: grid;
	grid-template-columns: 55px 55px 55px 55px;
    grid-template-rows: 28px 28px 28px;
	grid-template-areas: 
		"unit_pic7 unit_pic1 unit_pic2 unit_pic10"
		"unit_pic8 unit_pic3 unit_pic4 unit_pic11"
		"unit_pic9 unit_pic5 unit_pic6 unit_pic12";
	max-width: 300px;
	margin-left: 8px;
}

.unitInfL {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"slots          slots         slots"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsInfXL {
	grid-area: slots;
	display: grid;
	grid-template-columns: 60px 60px 60px 60px 60px 60px;
	grid-template-rows: 30px 30px 30px 30px 30px;
	grid-template-areas: 
		"unit_pic11 unit_pic1 unit_pic2 unit_pic16"
		"unit_pic12 unit_pic3 unit_pic4 unit_pic17"
		"unit_pic13 unit_pic5 unit_pic6 unit_pic18"
		"unit_pic14 unit_pic7 unit_pic8 unit_pic19"
		"unit_pic15 unit_pic9 unit_pic10 unit_pic20";
	max-width: 300px;
}

.unitInfXL {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"slots          slots         slots"
		"slots          slots         slots"
		"slots          slots         slots"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 


.slotsArtS {
	grid-area: slots;
	display: grid;
	grid-template-columns: 30px 60px 60px;
	grid-template-rows: 60px;
	grid-template-areas: 
		"none unit_pic1 unit_pic2";
	max-width: 300px;
}

.unitArtS {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 420px;
	border: 3px solid transparent;
} 

.slotsArtM {
	grid-area: slots;
	display: grid;
	grid-template-columns: 60px 60px 60px;
	grid-template-rows: 60px;
	grid-template-areas: 
		"unit_pic1 unit_pic2 unit_pic3";
	max-width: 300px;
}

.unitArtM {
	display: grid;
	grid-template-columns: 30px 180px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"margin_left    slots         margin_right"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.slotsArtL {
	grid-area: slots;
	display: grid;
	grid-template-columns: 60px 60px;
	grid-template-rows: 60px;
	grid-template-areas: 
		"unit_pic1 unit_pic2 unit_pic3 unit_pic4";
	max-width: 300px;
}

.unitArtL {
	display: grid;
	grid-template-columns: 30px 183px 30px;
	grid-template-rows: 15px 30px 90px 30px 10px 25px 20px 20px 50px 20px;
	grid-template-areas: 
		"unit_class     unit_class    unit_class"
		"margin_top     margin_top    margin_top"
		"slots          slots         slots"
		"margin_bottom  margin_bottom margin_bottom"
		"empty          empty         empty"
		"unit_name      unit_name     unit_name"
		"stats          stats         stats"
		"depend         depend        depend"
		"selected_opt   selected_opt  selected_opt"
		"groupicon      option_cost   option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 


.slotsTabXL {
	padding-top: 5px;
	grid-area: slots;
	display: grid;
	grid-template-columns: 45px 60px 45px;
	grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px;
	grid-template-areas: 
		"unit_pic9 unit_pic1 unit_pic11"
		"unit_pic9 unit_pic2 unit_pic11"
		"unit_pic9 unit_pic3 unit_pic11"
		"unit_pic9 unit_pic4 unit_pic11"
		"unit_pic10 unit_pic5 unit_pic12"
		"unit_pic10 unit_pic6 unit_pic12"
		"unit_pic10 unit_pic7 unit_pic12"
		"unit_pic10 unit_pic8 unit_pic12";
	max-width: 300px;
}

.unitTabXL {
	display: grid;
	grid-template-columns: 150px 30px 30px 30px;
	grid-template-rows: 15px 25px 20px 20px 115px 25px 20px 50px 20px;
	grid-template-areas: 
		"slots      unit_class     unit_class      unit_class"
		"slots      none1          none1           none1"
		"slots      unit_name      unit_name       unit_name"
		"slots      stats          stats           stats"
		"slots      depend         depend 		   depend"
		"slots      none           none            none"
		"slots      none           none            none"
		"slots      selected_opt   selected_opt    selected_opt"
		"none2      groupicon      option_cost     option_button";
	max-width: 240px;
	border: 3px solid transparent;
} 

.unitCavS,
.unitCavM,
.unitCavL,
.unitDraS,
.unitDraM,
.unitDraL,
.unitInfS,
.unitInfM,
.unitInfL,
.unitInfXL,
.unitArtS,
.unitArtM,
.unitArtL,
.unitTabXL {
	border: 3px solid transparent;
	border-radius: 5px;
}

@media only screen and (min-device-width: 801px) {
	.unitCavS:hover,
	.unitCavM:hover,
	.unitCavL:hover,
	.unitDraS:hover,
	.unitDraM:hover,
	.unitDraL:hover,
	.unitInfS:hover,
	.unitInfM:hover,
	.unitInfL:hover,
	.unitInfXL:hover,
	.unitArtS:hover,
	.unitArtM:hover,
	.unitArtL:hover,
	.unitTabXL:hover,
	.unitCmdO:hover  {
		/* border: 3px solid #986F12;
		border-radius: 5px; */
		transform: scale(1.03);
	}
}

.unitPic1 {
	grid-area: unit_pic1;
	justify-self: center;
}

.unitPic2 {
	grid-area: unit_pic2;
	justify-self: center;
}

.unitPic3 {
	grid-area: unit_pic3;
	justify-self: center;
}

.unitPic4 {
	grid-area: unit_pic4;
	justify-self: center;
}

.unitPic5 {
	grid-area: unit_pic5;
	justify-self: center;
}

.unitPic6 {
	grid-area: unit_pic6;
	justify-self: center;
}

.unitPic7 {
	grid-area: unit_pic7;
	justify-self: center;
}

.unitPic8 {
	grid-area: unit_pic8;
	justify-self: center;
}

.unitPic9 {
	grid-area: unit_pic9;
	justify-self: center;
}

.unitPic10 {
	grid-area: unit_pic10;
	justify-self: center;
}

.unitPic11 {
	grid-area: unit_pic11;
	justify-self: center;
}

.unitPic12 {
	grid-area: unit_pic12;
	justify-self: center;
}

.unitPic13 {
	grid-area: unit_pic13;
	justify-self: center;
}

.unitPic14 {
	grid-area: unit_pic14;
	justify-self: center;
}

.unitPic15 {
	grid-area: unit_pic15;
	justify-self: center;
}

.unitPic16 {
	grid-area: unit_pic16;
	justify-self: center;
}

.unitPic17 {
	grid-area: unit_pic17;
	justify-self: center;
}

.unitPic18 {
	grid-area: unit_pic18;
	justify-self: center;
}

.unitPic19 {
    grid-area: unit_pic19;
    justify-self: center;
}

.unitPic20 {
    grid-area: unit_pic20;
    justify-self: center;
}


.unit1 {
	grid-area: unit1;
}

.unit2 {
	grid-area: unit2;
}

.unit3 {
	grid-area: unit3;
}

.unit4 {
	grid-area: unit4;
}

.unit5 {
	grid-area: unit5;
}

.unit6 {
	grid-area: unit6;
}

.unit7 {
	grid-area: unit7;
}

.unit8 {
	grid-area: unit8;
}

.unit9 {
	grid-area: unit9;
}

.unit10 {
	grid-area: unit10;
}

.unit11 {
	grid-area: unit11;
}

.unit12 {
	grid-area: unit12;
}

.unit13 {
	grid-area: unit13;
}

.unit14 {
	grid-area: unit14;
}

.unit15 {
	grid-area: unit15;
}

.unit16 {
	grid-area: unit16;
}