.tutorialBorder {
	position: absolute;
	overflow: hidden;
	z-index: 8;
}
.tutorialBorder>div {
	position: relative;
	border: solid red 5px;
	border-radius: 10px;
	box-sizing: border-box;
}
.tutorialBorder.border1>div, .tutorialBorder.border3>div {
	height: 20px;
	width: 100%;
}
.tutorialBorder.border3>div {
	top: -10px;
}
.tutorialBorder.border1, .tutorialBorder.border3 {
	height: 10px;
}
.tutorialBorder.border2>div, .tutorialBorder.border4>div {
	height: 100%;
	width: 20px;
}
.tutorialBorder.border2>div {
	left: -10px;
}
.tutorialBorder.border2, .tutorialBorder.border4 {
	width: 10px;
}
.tutorialBorder:not(.hidden),
.tutorialIcons:not(.hidden)>img {
	animation: opacityUp1_80_100 0.3s linear;
	animation-delay: 0.5s;
	animation-iteration-count: 2;
}
#tutorialDescription.tutorialBlink:not(.hidden) {
	animation: opacityUp06_80_100 0.3s linear;
	animation-delay: 0.5s;
	animation-iteration-count: 2;
}


/* .points.local .shadow2.tutorial {
	animation: opacityBlinkC 2s linear;
	animation-iteration-count: infinite;
} */
.points.local>div:not(.shadow2).tutorial {
	animation: opacityBlinkZoom 0.3s linear;
	animation-iteration-count: 5;
}
@keyframes opacityBlinkZoom {
	50% { opacity: 0.2; }
	100% { opacity: 1; zoom: 5; }
}


.tutorialIcons {
	z-index: 1;
	position: absolute;
	height: 50px;
	overflow: hidden;
	background-color: white;
	border: solid #000 1px;
	border-radius: 5px;
}
.tutorialIcons>img {
	height: 60px;
}
#tutorialEnergyCell {
	position: absolute;
	/*z-index: 1; nebude sa dať spustiť štart */
	left: 0;
	bottom: -5px;
	width: 100%;
}
#tutorialMousePointer>img, #tutorialMousePointer {
	position: absolute;
	z-index: 10;
	animation: zoomUp501000810 0.3s linear;
	animation-iteration-count: 2;
	animation-delay: 0.5s;
}
#tutorialActualCommandArrow {
	position: absolute;
	z-index: 5;
	transform-origin: left center;
	height: 0;
	border: solid red 2px;
}
#tutorialActualCommand .head {
	z-index: 1;
	position: absolute;
	top: calc(-0.9em - 5px);
	left: 0; right: 0;
	width: max-content;
	margin: auto;
	padding: 3px 10px;
	display: inline-block;
	font-size: 0.6em;
	border-radius: 10px;
	border: solid red 4px;
	background-color: white;
}
#tutorialActualCommand .content {
	opacity: 0.8;
	background-color: white;
	padding: calc(0.5em + 10px) 10px 10px 10px;
	border-radius: 10px;
}
#tutorialActualCommand {
	position: absolute;
	z-index: 5;
	margin: auto;
	left: 0; right: 0; top: 0; bottom: 0;
	max-width: 300px;
	height: min-content;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	border: solid red 4px;
	border-radius: 10px;
	color: red;
}
#tutorialDescription:hover,
.tutorialIcons:hover {
	opacity: 0.3;
}
/* #tutorialMousePointer:hover {
	display: none;
} */


#tutorialDescription {
	z-index: 5;
	position: absolute;
	padding: 10px;
	/* margin-left: -150px; */
	color: white;
	font-size: 1.2em;
	text-align: center;
	width: 200px;
	border-radius: 10px;
	background-color: red;
}



#tutorialWatchMy {
	z-index: 8;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}
#tutorialWatchMy>div {
	cursor: pointer;
	z-index: 9;
	position: absolute;
	margin: auto;
	top: 0; bottom: 0; left: 0; right: 0;
	width: max-content;
	height: min-content;
	text-align: center;
	font-size: 5vw;
	font-weight: bold;
	color: red;
	padding: 2vw;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 0 2vw #999;
}