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

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

div#figur_head_wrapper{
	position:relative;
	width:650px;
	height:143px;
	border:0px solid red;
	margin:20px 0px 0px 20px;
}

/* START::: Rahmen grün */
div#figur_head_overlay{
	position:absolute;
	width:400px;
	height:130px;
	border:2px solid rgba(0,75,64,1);
	border-left:transparent;
	margin:0px 0px 10px 30%;
	border-radius:0px 0px 25px 0px;
}
div#figur_head_overlay::after{
	content:'';
	position:absolute;
	right:-7px;
	bottom:3px;
	width:30px;
	height:6px;
	border-top:2px solid rgba(0,75,64,1);
	background-color:#000;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* ENDE::: Rahmen grün */

/* START::: Halbkreis links neben Kreis */
#figur_head_halfCircle_left_first{
	position:absolute;
	z-index:-1;
	top:-40px;
	left:-72px;
	width:110px;
	height:110px;
	margin:50px auto;
	border:0px solid red;
	border-radius: 40%;
	overflow:hidden;
}

#figur_head_halfCircle_left_second{
	position:absolute;
	top:1px;
	left:2px;
	width:108px;
	height:108px;
    border-radius: 40%;
    background-color:#000;
}

#figur_head_halfCircle_left_rotate{
	position:absolute;
	z-index:-1 !important;
	top:1px;
	left:2px;
	width:108px;
	height:108px;
	border-radius:40%;
	background:transparent;
	transform: rotateZ(-45deg);
}

#figur_head_halfCircle_left_rotate:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:-15px;
	left:-15px;
	width:96px;
	height:96px;
	background-color:rgba(0,75,64,1);
	border-radius:50%;
}
/* ENDE::: Halbkreis links neben Kreis */

/* START::: Kreis und da wird es jetzt wirklich wild */
div#figur_head_first_circle{
	position:absolute;
	left:-65px;
	top:-2px;
	width:130px;
	height:130px;
	border:2px solid rgba(0,75,64,1);
	-o-border-radius:50%;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}

/* START::: Halbkreis rechts neben Bild*/
#over_half_circle{
	position:absolute;
	z-index:-1;
	top:-50px;
	left:-63px;
	width:128px;
	height:128px;
	margin:50px auto;
	border:0px solid red;
	border-radius: 50%;
	overflow:hidden;
}

#over_half_circle::before{
	content:'';
	position:absolute;
	top:25px;
	left:102px;
	width:15px;
	height:15px;
	border-left:3px solid rgba(0,75,64,1);
	transform: rotateZ(45deg);
}


/* PUNKT::: im Halbkreis */
#over_half_circle::after{
	content:'.';
	position:absolute;
	top:33px;
	right:6px;
	width:10px;
	height:10px;
	background-color:transparent;
	font-size:16px;
	font-weight:900;
}
/* ENDE::: Halbkreis rechts neben Bild*/


#inner_half_circle{
	position:absolute;
	z-index:-1 !important;
	top:3px;
	left:3px;
	width:122px;
	height:122px;
    border-radius: 50%;
    background-color:#000;
}


#outer_half_circle{
	position:absolute;
	z-index:-2 !important;
	top:3px;
	left:3px;
	width:122px;
	height:122px;
	border-radius:50%;
	background:transparent;
	transform: rotateZ(170deg);
}

#outer_half_circle:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:-15px;
	left:-15px;
	width:110px;
	height:110px;
	background-color:rgba(0,75,64,1);
}
/* START::: Da Vinci*/
div#figur_head_second_circle, div#figur_head_second_circle_2{
	position:absolute;
	z-index:2;
	left:18px;
	top:18px;
	width:90px;
	height:90px;
	border:0px solid rgba(0,75,64,1);
	-o-border-radius:50%;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	background-image:url(../images/davinci_klein.png);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

div#figur_head_second_circle_2{
	background-image:url(../images/davinci_klein_3.png);
}

#figur_head_second_circle_border{
	position:absolute;
	z-index:1;
	top:16px;
	left:16px;
	width:90px;
	height:90px;
	border:2px solid rgba(0,75,64,1);
	-o-border-radius:50%;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}

/* ENDE::: Da Vinci*/

/* START::: Animation Da Vinci */
.animateDavinci{
	animation-name: drehen;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

@keyframes drehen{
	from	{transform: rotateY(0deg);}
	to{transform: rotateY(360deg);}
}
/* ENDE::: Animation Da Vinci */
div#figur_head_driangel_first{
	position:absolute;
	z-index:2;
	top:-18px;
	left:51px;
	width:30px;
	height:30px;
	background-color:#000;
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	overflow:hidden;
}

div#figur_head_driangel_first:before{
	content:'';
	position:absolute;
	z-index:1;
	right:-21px;
	top:-21px;
	width:40px;
	height:40px;
	border:1px solid rgba(8,144,8,1);
	background-color:rgba(8,144,8,1);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform:rotate(45deg);

}

div#figur_head_text_layer{
	position:relative;
	top:50px;
	left:-96px;
	height:30px;
	transform:rotate(-90deg);
}

div[id*='text_']{
	position:relative;
	display:inline-block;
	border:0px solid red;
	font-size:13px;
	font-weight:600;
}

#text_1{ /*s*/ 	left:2px;	top:21px; 	transform:rotate(-37deg); }
#text_2{ /*k*/ 				top:15px; 	transform:rotate(-28deg); }
#text_3{ /*i*/ 				top:11px; 	transform:rotate(-20deg); }
#text_4{ /*l*/ 				top:9px; 	transform:rotate(-6deg); }
#text_5{ /*l*/ 				top:8px; }
#text_6{ /*f*/ 				top:9px; 	transform:rotate(4deg); }
#text_7{ /*l*/ 				top:10px; 	transform:rotate(20deg); }
#text_8{ /*o*/ 				top:13px; 	transform:rotate(20deg); }
#text_9{ /*w*/ 				left:-2px;	top:20px; 	transform:rotate(40deg); }
/*--------------------------------
START::: Innenleben rechte Seite
--------------------------------*/
#figur_head_overlay_section_1,
#figur_head_overlay_section_2,
#figur_head_overlay_section_3{
	color:rgba(255,255,255,1);
	font-size:9px;
}


/*----------------
START::: Section 1
----------------*/
/*----------------------
START::: Section 1 Row 1
----------------------*/
#section_1_row_1_wrapper{
	height:18px;
	border-bottom:0px dotted rgba(32,167,77,1);
}

#figur_head_overlay_section_1{
	position:absolute;
	top:0px;
	left:66px;
	width:334px;
	height:76px;
	border-bottom:1px solid rgba(0,75,64,1);
	padding-top:2px;
}
.inner_section1{
	margin-left:5px;
	border:0px solid red;
	display:inline-block;
	padding-top:2px;
}
#battery{
	position:absolute;
	z-index:2;
	top:5px;
	left:-16px;
	width:15px;
	height:7px;
	border:1px solid rgba(0,75,64,1);
	background-color:rgba(255,255,255,1);
}
#battery:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:2px;
	left:-3px;
	width:6px;
	height:3px;
	border:0px solid rgba(0,75,64,1);
	background-color:rgba(255,255,255,1);
}

#batteryBub_1, #batteryBub_2{
	width:12px;
	height:12px;
	border:1px solid rgba(0,75,64,1);
	border-radius:50%;
	background-image: radial-gradient(rgba(32,167,77,1) 29%, rgba(0,0,0,1) 73%);
}

#batteryLevel{
	width:150px;
	height:11px;
	border:1px solid rgba(0,75,64,1);
	border-radius:0px 0px 6px 0px;
	background-image:linear-gradient(to right, rgba(32,167,77,.2) 70%, rgba(0,0,0,1) 70%);
}

#batteryEmpty{}

#batteryEmptyLevel{
	width:50px;
	height:11px;
	border:1px solid rgba(0,75,64,1);
	border-radius:0px 0px 6px 0px;
	background-image:linear-gradient(to left, rgba(32,167,77,.2) 70%, rgba(0,0,0,1) 10%);
}

/*----------------------
ENDE::: Section 1 Row 1
----------------------*/
/*----------------------
START::: Section 2 Row 1
----------------------*/
#section_1_row_2_wrapper{
	width:334px;
	height:18px;
	margin-left:2px;
	border-bottom:0px dotted rgba(32,167,77,1);
}
.inner_section1_row_2{
	margin-left:4px;
	border:0px solid red;
	display:inline-block;
	padding-top:2px;
}

.inner_section2{
	margin-left:0px;
	border:0px solid red;
	display:inline-block;
	padding-top:2px;
}

/*----------------------
ENDE::: Section 2 Row 1
----------------------*/
/*----------------------
START::: Section 1 Row 3
----------------------*/
#section_1_row_3_wrapper{
	width:332px;
	height:18px;
	margin-left:4px;
	border-bottom:0px dotted rgba(32,167,77,1);
}
.inner_section1_row_3{
	margin-left:2px;
	border:0px solid red;
	display:inline-block;
	padding-top:2px;
}

.hyper_section{
	width:11px;
	height:11px;
	display:inline-block;
	border:1px solid rgba(0,75,64,1);
	/*margin-right:1px;*/
}

/*
hyper-COLOR:
Rot: 	141,79,93,1
Rosa: 	198,128,131,1
Orange: 180,138,128,1
Gelb:	205,197,147,1
Gelb:	190,187,120,1
Gelb: 	187,183,133,1
Blau;	107,218,242,1
*/
.hyperColor_1{
	background-color:rgba(141,79,93,1);
}
.hyperColor_2{
	background-color:rgba(198,128,131,1);
}
.hyperColor_3{
	background-color:rgba(180,138,128,1);
}
.hyperColor_4{
	background-color:rgba(187,183,133,1);
}
.hyperColor_5{
	background-color:rgba(190,187,120,1);
}
.hyperColor_6{
	background-color:rgba(205,197,147,1);
}
.hyperColor_7{
	background-color:rgba(107,218,242,1);
}
/*----------------------
ENDE::: Section 1 Row 3
----------------------*/
/*----------------------
START::: Section 1 Row 4
----------------------*/
#section_1_row_4_wrapper{
	width:332px;
	height:28px;
	margin-left:4px;
	border-bottom:0px dotted rgba(32,167,77,1);
}
.inner_section1_row_4{
	margin-left:3px;
	border:0px solid red;
	display:inline-block;
	padding-top:3px;
}

#hyperCount{
	margin-left:5px;
}

#hyperCount > span{
	font-weight:700;
	font-size:11px;
}

/*----------------------
ENDE::: Section 1 Row 4
----------------------*/
/*----------------
ENDE::: Section 1
----------------*/
/*----------------
START::: Section 2
----------------*/
#figur_head_overlay_section_2{
	position:absolute;
	top:77px;
	left:58px;
	width:333px;
	height:21px;
	border-bottom:0px solid rgba(0,75,64,1);
	padding-left:9px;
}
.inner_section3{
	margin-top:4px;
	margin-left:5px;
	border:0px solid red;
	display:inline-block;
	padding-top:0px;
}

.innerTags{
	border:1px solid rgba(0,75,64,1);
	padding:2px 5px;
	font-size:9px;
	border-radius:0px 0px 10px 0px	;
}
.checked{
	color:rgba(255,255,255,1);
	background-color:rgba(97,117,125,1);
}
/*----------------
ENDE::: Section 2
----------------*/

/*----------------
START::: Section 3
----------------*/
#figur_head_overlay_section_3{
	position:absolute;
	top:103px;
	left:55px;
	width:335px;
	height:28px;
	border:0px solid rgba(0,75,64,1);
	padding-left:0px;
}

.inner_section4, .inner_section4_2{
	height:28px;
	margin-top:-2px;
	margin-left:5px;
	border:0px solid red;
	display:inline-block;
	padding-top:0px;
	vertical-align:top;
	text-align:right;
}

 .inner_section4_2{
	vertical-align:top;
	font-size:22px;
	border:0px solid red;
 }
/*----------------
ENDE::: Section 3
----------------*/
/*--------------------------------
ENDE::: Innenleben rechte Seite
--------------------------------*/

.fontColorBlue{
	color:rgba(70,166,239,1);
}

.bold{
	font-weight:700;
}

.big{
	font-size:13px;
}

.fontColorText{
	color:rgba(112,175,4,1);
}

.upper{
	margin-top:-2px;
}

.marginLeft_10{
	margin-left:20px;
}