/* CONFIG */
.config-box--level[data-value="a"] .set-level {
	background-image: url(../images/a1/icon_uroven1_2x.png);
}
.config-box--level[data-value="b"] .set-level {
	background-image: url(../images/a1/icon_uroven2_2x.png);
}
.config-box--level[data-value="c"] .set-level {
	background-image: url(../images/a1/icon_uroven3_2x.png);
}

.set-graphics {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.set-graphics--1 {
	background-image: url(../images/a21/objekty-ovocie_inactive.png);
}
.set-graphics--1.is-active {
	background-image: url(../images/a21/objekty-ovocie_active.png);
}
.set-graphics--2 {
	background-image: url(../images/a21/objekty-doprava_inactive.png);
}
.set-graphics--2.is-active {
	background-image: url(../images/a21/objekty-doprava_active.png);
}
.set-graphics--3 {
	background-image: url(../images/a21/objekty-priroda_inactive.png);
}
.set-graphics--3.is-active {
	background-image: url(../images/a21/objekty-priroda_active.png);
}
.set-graphics--4 {
	background-image: url(../images/a21/objekty-geometria_inactive.png);
}
.set-graphics--4.is-active {
	background-image: url(../images/a21/objekty-geometria_active.png);
}

.set-count-wrap {
	width: 60px;
	height: 60px;
	background-image: url(../images/a21/Pocet-prvkov_2.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
}
.config-box--count[data-value="3"] .set-count-wrap {
	background-image: url(../images/a21/Pocet-prvkov_3.png);
}
.set-count {
	display: block;
	height: 100%;
	float: left;
	background: 0;
}
.set-count--2 {
	width: 66.6%;
}
.set-count--3 {
	width: 33.4%;
}

.set-type {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.set-type--1 {
	background-image: url(../images/a21/Tabulka-cisla_inactive.png);
}
.set-type--1.is-active {
	background-image: url(../images/a21/Tabulka-cisla_active.png);
}
.set-type--2 {
	background-image: url(../images/a21/Tabulka-ciarky_inactive.png);
}
.set-type--2.is-active {
	background-image: url(../images/a21/Tabulka-ciarky_active.png);
}
.set-type--3 {
	background-image: url(../images/a21/graf_inactive.png);
}
.set-type--3.is-active {
	background-image: url(../images/a21/graf_active.png);
}
.set-type--4 {
	background-image: url(../images/a21/graf-objekty_inactive.png);
}
.set-type--4.is-active {
	background-image: url(../images/a21/graf-objekty_active.png);
}

/* PLAYGROUND */
.play-wrap {
	display: flex;
}
.play-stack,
.play-graph,
.play-cols {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 50%;
	min-height: 500px;
	padding: 1rem 2rem;
}
.play-stack {
	padding: 0;
}
.play-stack-inner {
	flex-wrap: wrap;
	display: flex;
	justify-content: center;
}
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	min-width: 90px;
	height: 90px;
	min-height: 90px;
}
.item img {
	max-width: 100%;
	height: auto;
}

/* graphs */
.graph-1-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 2px dotted rgba(0,0,0,.8);
	border-radius: 15px;
}
.graph-1-wrap.is-transposed {
	flex-direction: row;
}
.graph-1-wrap.is-transposed .heading,
.graph-1-wrap.is-transposed .counts {
	flex-direction: column;
	border: 0;
}
.graph-1-wrap.is-transposed .heading-item {
	border: 0;
	border-right: 2px dotted rgba(0,0,0,.8);
}
.graph-1-wrap.is-transposed .counts-item {
	border: 0;
}
.graph-1-wrap.is-transposed .heading-item,
.graph-1-wrap.is-transposed .counts-item {
	border-bottom: 2px dotted rgba(0,0,0,.8);
}
.graph-1-wrap.is-transposed .heading-item:last-child,
.graph-1-wrap.is-transposed .counts-item:last-child {
	border-bottom: 0;
}
.play-wrap[data-type="2"] .graph-1-wrap.is-transposed .heading-item,
.play-wrap[data-type="2"] .graph-1-wrap.is-transposed .counts-item {
	min-height: 130px;
}
.graph-1-wrap img,
.cols-wrap img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}
.graph-1-wrap .heading,
.graph-1-wrap .counts {
	display: flex;
	min-height: 116px;
}
.graph-1-wrap .heading {
	border-bottom: 2px dotted rgba(0,0,0,.8);
}
.graph-1-wrap .heading-item,
.graph-1-wrap .counts-item {
	flex: 1;
	flex-wrap: wrap;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	max-width: 250px;
	max-height: 116px;
	padding: 1rem;
	border-left: 2px dotted rgba(0,0,0,.8);
}
.play-wrap[data-type="2"] .graph-1-wrap .counts-item {
	max-height: none;
}
.graph-1-wrap .heading-item:first-child,
.graph-1-wrap .counts-item:first-child {
	border-left: 0;
}
.graph-1-wrap .counts-item {
	font-weight: 700;
    color: #0049a0;
    font-size: 60px;
}
.transpose {
	position: absolute;
	top: -20px;
	right: -20px;
	transition: transform .3s ease;
}
.transpose:hover {
	transform: rotate(180deg);
}
.transpose img {
	width: 40px;
	height: 40px;
}

/* čiarky */
.tick {
	display: block;
	width: 57px;
	height: 47px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.tick-1 {
	background-image: url(../images/a21/Ciarky-1.png);
}
.tick-2 {
	background-image: url(../images/a21/Ciarky-2.png);
}
.tick-3 {
	background-image: url(../images/a21/Ciarky-3.png);
}
.tick-4 {
	background-image: url(../images/a21/Ciarky-4.png);
}
.tick-0 {
	background-image: url(../images/a21/Ciarky-5.png);
}

@media all and (max-width: 1020px) {

	.exercise .task {
		margin-left: 0;
	}
	.play-stack {
		transform: scale(0.8);
	}

}

/* ---------------------- */
/* --- COLUMN CHARTS --- */
/* -------------------- */
.play-cols {
	display: flex;
	align-items: center;
}
.cols-wrap .legend {
	display: flex;
}
.cols-wrap .legend-item {
	padding: 1rem 2rem;
}
.cols {
	display: flex;
	min-height: 302px;
	border: 2px dotted rgba(0,0,0,.8);
}
.col {
	flex: 1;
	flex-direction: column-reverse;
	align-items: center;
	display: flex;
	border-left: 2px dotted rgba(0,0,0,.8);
	counter-reset: increment;
}
.col img {
	width: 40px;
	height: 40px;
}
.col:first-child {
	border-left: 0;
}
.col-item {
	position: relative;
	flex: 1;
	width: 100%;
	border-top: 2px dotted rgba(0,0,0,.8);
	counter-increment: increment;
}
.col:first-child .col-item:before {
	content: counter(increment);
	align-items: center;
	position: absolute;
	left: -1.5rem;
	top: 0;
	display: flex;
	height: 100%;
	color: #000;
}
.col-item:last-child {
	border-top: 0;
}
.play-wrap[data-type="4"][data-level="b"] .cols {
	min-height: 402px;
}
.play-wrap[data-type="3"][data-level="c"] .cols {
	min-height: 452px;
}
.play-wrap[data-type="4"][data-level="c"] .cols {
	min-height: 602px;
}
.play-wrap[data-type="4"] .col-item {
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 0;
}
.play-wrap[data-type="4"][data-level="c"] .col img {
	width: 30px;
	height: 30px;
}