/* Fuer die Navigation */
#tastatur{
  color: var(--a-hover-color);
  border-bottom: var(--skillflow-base-border-half) !important;
  cursor:auto;
}

#playground.selected{
	cursor:grab;
}
/* ENDE::: Fuer die Navigation */



#tastatur_container{
	position:relative;
	border:2px solid rgba(0,75,64, 1);
	-o-border-radius: 5px 0px 0px 0px;
	-ms-border-radius: 5px 0px 0px 0px;
	-moz-border-radius: 5px 0px 0px 0px;
	-webkit-border-radius: 5px 0px 0px 0px;
	border-radius: 5px 0px 0px 0px;
	width:290px;
	padding:10px;
}

#tastatur_overlay{
	position:relative;
	display:-ms-flexbox;
	display:flex;
	width:293px;
	height:30px;
	border:0px solid rgba(0,75,64, 0.2);
	-o-border-radius: 5px 0px 0px 0px;
	-ms-border-radius: 5px 0px 0px 0px;
	-moz-border-radius: 5px 0px 0px 0px;
	-webkit-border-radius: 5px 0px 0px 0px;
	border-radius: 5px 0px 0px 0px;
	margin-bottom:8px;
}

#enter{
	border:2px solid rgba(0,75,64, 0.7);
	position:absolute;
	z-index:9;
	top:48px;
	right:11px;
	width:70px;
	height:120px;
	line-height:120px;
	vertical-align:middle;
	text-align:center;
	font-weight: 700;
	box-sizing: border-box;
	text-transform:uppercase;
	font-family:arial;
	font-size:10px;
	cursor: pointer;
	overflow:hidden;
}

#enter:after{
	content:'';
	border-bottom: 16px solid  rgba(0,75,64, 0.7);
}

#enter:before{
	content:'';
	position:absolute;
	top:-15px;
	left:45px;
	width:155px;
	height:35px;
	background-color:rgba(8,144,8,0.1);
	border:0px solid rgba(8,144,8,0.1);
	transform: rotate(60deg);
	box-shadow: 1px 1px 50px rgba(0,75,64, 1);
}
#enter:hover{
	border:2px solid rgba(0,75,64,1);
	transition: all ease 0.75s;
}
#enter:hover::before{
	animation-name: swek;
	animation-duration: 0.5s;
	animation-iteration-count: 1; /*infinite*/
}
@keyframes swek{
	from{
		top:100px;
		left:-152px;
	}
	to{
		top:-15px;
		left:45px;
	}
}

#z_1, #z_2, #z_3{
	display:-ms-flexbox;
	display:flex;
	width:300px;
	margin:2px auto;
	border:0px solid yellow;
}
div[class*='element_']{
	position:relative;
	z-index:9;
	border:2px solid rgba(0,75,64, 0.3);
	text-align:center;
	margin-right:2px;
	width:71px;
	height:59px;
	line-height:59px;
	vertical-align:middle;
	font-weight: 700;
	box-sizing: border-box;
	font-family:arial;
	font-size:12px;
	float:left;
	cursor: pointer;
	background: black;
	overflow:hidden;
}

div[class*='element_']:before{
	content:'';
	position:absolute;
	top:-11px;
	right:-11px;
	z-index:-1;
	width:20px;
	height:20px;
	border:0px solid rgba(0,75,64,1);
	background-color:rgba(0,75,64,0.5);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

div[class*='element_']:hover{
	background: radial-gradient(rgba(8,144,8,0.3) 3%, rgba(0,0,0,1) 100%);
	transition: all ease 0.75s;
}

#z_3_4{
	-o-border-radius: 0px 0px 10px 0px;
	-ms-border-radius: 0px 0px 10px 0px;
	-moz-border-radius: 0px 0px 10px 0px;
	-webkit-border-radius: 0px 0px 10px 0px;
	border-radius: 0px 0px 10px 0px;
}

#tastatur_container:after{
	content:"";
	position:absolute;
	bottom:-5px;
	right:-4px;
	width:15px;
	height:7px;
	border-top:2px solid rgba(0,75,64, 1);
	background-color:#000;
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

.kasten{
	border:2px solid rgba(0,75,64, 1);
	margin:3px 0px 3px 0px;
	height:25px;
}

.headline{
	border:2px solid rgba(0,75,64, 1);
	width:235px;
	height:25px;
	margin:3px 0px 3px 6px;
	font-size:16px;
	font-weight:600;
	line-height:25px;
	vertical-align:middle;
	padding-left:10px;
	-o-border-radius: 5px 0px 10px 0px;
	-ms-border-radius: 5px 0px 10px 0px;
	-moz-border-radius: 5px 0px 10px 0px;
	-webkit-border-radius: 5px 0px 10px 0px;
	border-radius: 5px 0px 10px 0px;
	background-color:rgba(8,144,8, 0.2);
}

.kasten{
	width:30px;
	-o-border-radius: 5px 0px 10px 0px;
	-ms-border-radius: 5px 0px 10px 0px;
	-moz-border-radius: 5px 0px 10px 0px;
	-webkit-border-radius: 5px 0px 10px 0px;
	border-radius: 5px 0px 10px 0px;
}

.k_gruen{
	width:15px;
	heighet:15px;
	background-color:rgba(0,75,64, 0.5);
	-moz-box-shadow:1px -1px  4px rgba(0,75,64, 1);
	-webkit-box-shadow:1px -1px  4px rgba(0,75,64, 1);
	-o-box-shadow:1px -1px  4px rgba(0,75,64, 1);
	-ms-box-shadow:1px -1px  4px rgba(0,75,64, 1);
	box-shadow:1px -1px  4px rgba(0,75,64, 1);
	border:1px solid rgba(0,75,64, 0.3);
	border-left:transparent;
	border-bottom:transparent;
	font-size:10px;
	margin:8px 0px 4px 3px;
	cursor: pointer;
}

.k_gruen:hover{
	background-color:rgba(0,75,64, 0.6);
}