html, body, *{
	font-family:var(--skillflow-base-font-family);
	color:var(--skillflow-base-font-color);
	font-size:var(--skillflow-base-font-size);
	line-height: 1.3;
}

body{
	height:97%;
	background-color:var(--skillflow-base-body-bg);
	margin:0;
	padding:10px;
}

a{color:var(--a-color); text-decoration:var(--a-decoration);}
a:hover, .nav-select:hover{color:var(--a-hover-color)}
a:active{color:var(--a-visited-color)}
a:visited{color:var(--a-visited-color)}

h1{
	font-size:var(--h1-size);
}

br.clear{
	clear:both;
}

.skillflow{
	font-style:italic;
	text-transform:lowercase;
}

.fett{
	font-weight:var(--skillflow-fett);
}

.flex{
	display:flex;
	justify-content: center;
	align-items: flex-start;  /* Neu: Verhindert gleiche Höhe */
	width:100%;
	/*border: 1px solid yellow;*/
}

.center{
	text-align:center;
}

.opacity-half{
	opacity:0.7;
	display:block;
}

.block-center-50-50 {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 55%; */
    /* transform: translate(-50%, -50%); */
    width: 600px;
    height: auto;
    border: 2px solid var(--white);
    border-radius: 10px 0 10px 0;
    margin: 10px auto;
}

#tooltip{
	position: absolute;
    left: 42.56666%;
    top: 10px;
    z-index: 9999;
    /* width: 100px; */
    height: 20px;
    padding: 3px 30px;
    color: var(--black);
    background-color: var(--white);
    border: var(--skillflow-base-border);
	opacity:0;
	transition: opacity 0.1s;
}
#tooltip.opacity{
	opacity:1;
}

/* START::: Navigation */
nav.nav-main{
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
	height:130px;
	padding: 10px;
	border-bottom:var(--skillflow-base-border-half);
	background-color: var(--black);
	/*border:1px solid red;*/
}

.nav-container{
	width:100%;
}

.flex-nav-first{
	height:110px;
}

.skill-round{
	/*border: 1px solid red;*/
}

.nav-select{
	cursor:grab;
}

#drag-nav{
	justify-content: center;
	margin-top: -15px;
}
#drag-nav div,
#unternav-drag div {
	display:inline-block;
    margin-right: 20px;
	text-align: center;
    padding: 5px 15px;
	margin-top: 45px;
	height: 20px;
    /*border: 1px solid white;*/
}

#drop-nav-container{
	/*border: 1px solid red;*/
    text-align: center;
    margin-top: -20px;
}

#dropzone {
	position: relative;
	left: 50%;
    top: 0;
    transform: translate(-32%, -50%);
    display: inline-block;
    height: auto;
    margin: -30px;
    padding: 10px;
    border: var(--skillflow-base-border);
    text-align: center;
    width: 200px;
    height: 21px;
    overflow: hidden;
}
#dropzone:after{
	content: '';
	position: absolute;
	top: 19px;
	left: -10px;
	width: 237px;
	height: 0px;
	border-bottom: var(--skillflow-base-border);
	transform: rotate(9deg);
}

#dropzone::before{
	content: '';
	position: absolute;
	top: 19px;
	left: -10px;
	width: 237px;
	height: 0px;
	border-bottom: var(--skillflow-base-border);
	transform: rotate(171deg);
}

#dropzone::before, #dropzone::after{
	opacity: 0.6;
}

.selected{
  color: var(--a-hover-color);
  border-bottom: var(--skillflow-base-border-half) !important;
  cursor:auto;	
}

/* ENDE::: Navigation */

/* START::: Unternavigation */
#unternav{
	position:absolute;
	top:-70px;
	left:120px;
	z-index:999999;
	width:100%;
	height:70px;
	background-color:var(--black);
	transition: top .5s;
	transition-delay: .5s;
}
.shownav{
	top:2px !important;
}

#closeNav {
    position: absolute;
    bottom: -25px;
    left: 200px;
    width: 20px;
    height: 20px;
    color: var(--skillflow-base-font-color);
    font-size: 16px;
    font-weight: var(--skillflow-fett);
    cursor: pointer;
	opacity:1;
	transition:opacity .5s;
	z-index:1;
}

.flex.unternav{
	display:flex;
	justify-content: center;
	width:87.5%;
}


/* ENDE::: Unternavigation */


/* START::: Content */
#main-content{
	/*min-height: calc(100% - 230px);*/
    min-height: 68%;
    margin-top: 160px;
}

.container-text{
  color:var(--white);
}

.container-text p{
  color:var(--white);
  padding:20px;
}

.container-text .bold{
  display:block;
  font-weight:600;
  margin-bottom:8px;
}

.container-text p{
  margin-bottom:10px;
}

/* ENDE::: Content */

/* START::: Kontaktformular */
.error{
		color:var(--red);
}

fieldset{
	border:0 solid #FFF !important;
}

label{
	display:inline-block;
	width:19%;
}
label.large{
	width:80%;
	margin:5px 0 10px 0;
}

input, textarea{
	width:400px;
	height:25px;
	padding:4px;
	margin-bottom:5px;
	border:2px solid var(--skillflow-base-font-color);
	color:var(--black);
}

textarea{
	height:200px;
}

input[type='submit'],input[type='reset']{
	width:100px;
	
}

legend, label{
	color:var(--white) !important;
}

.fragetext{
	color:var(--white);
}
.makelarge{
	height:35px;
	font-size:1.2em;
}

.ergebnis{
	color:var(--skillflow-base-font-color);
}

/* ENDE::: Kontaktformular */

/* START::: Beispielseiten allgemein */
.text, .example{
	min-width: 300px;
	border:1px solid var(--white);
	border-radius: 10px 0 10px 0;
	color:var(--white) !important;
	padding:10px;
}

.flex-container{
	display:flex;
	align-items: flex-start;  /* Neu: Verhindert gleiche Höhe */	
}
.headline-example-code-container{
	width:100%;
	/+border:1px solid green !important;*/
}

.flex-container-example-code{
	display:flex;
	justify-content: space-evenly;
	align-items: flex-start;  /* Neu: Verhindert gleiche Höhe */	
}

.flex.example-code{
	display:flex;
	justify-content: center;
	align-items: flex-start;  /* Neu: Verhindert gleiche Höhe */
	border:0px solid red;
}

.text-example {
    width: 100%;
    max-width: 1000px;
    margin: 10px auto 30px !important;
	padding:10px !important;
}

.navigation{
	width:auto;
	/*border:1px solid yellow !important;*/
}

iframe{
	width:200px !important;
	margin-right:20px;
	border:0px solid white !important;
}

iframe.unternavigation{
	width:250px;
	height:300px;
	max-height:900px;
	padding:5px;
	overflow-y: auto;
	scrollbar-color: var(--skillflow-base-font-color) var(--skillflow-base-gray-bg);
	scrollbar-width: thin;
}

.inline-example{
	padding:3px;
	border:1px dotted var(--skillflow-base-font-color);
	font-weight:600;
}

.myVar{
	color:var(--red);
}

ul.navlist{
	list-style-type:none;
	padding-left:0px;
}

/* ENDE::: Beispielseiten allgemein */


/* START::: Javascript: Beispielseiten */

.container-wrapper.flex{
	display:flex;
	justify-content: center;
	align-items: flex-start;  /* Neu: Verhindert gleiche Höhe */
}

.container-wrapper{
	border:0px solid var(--white);
	color:var(--white);
}

span.headline{
	display:block;
	text-align:center;
	font-weight:600;
	color:var(--white);
	margin-bottom:0;
}
.nav-headline{
	color:var(--white);
}

.script{
	min-width: 300px;
	width:25%;
	margin:0 20px 0 20px;
	padding: 10px;
	border:1px solid var(--white);
	border-radius: 10px 0 10px 0;
	color:var(--white) !important;
}

	.code{
		padding:10px;
	}

.left{
	/*border:1px solid var(--white);*/
}

.script{
	width:auto;
	padding:5px;
}

.script pre{
	color:var(--white) !important;
	padding:5px;
}

.commentar{
	color: var(--skillflow-base-font-color);
}

.example *{
	color:var(--white) !important;
}

#target{
	width:80%;
	height:auto;
	margin:20px auto;
	border:1px solid var(--white);
	text-align:center;
}

.array-ceckbox{
	width:27px;
	height:27px;
	border:1px solid var(--skillflow-base-font-color);
	padding:2px;
	color: #000 !important;
    font-weight: 600;
	text-align:center;
}

.myNewDiv {
    width: 60%;
    border: 1px solid var(--skillflow-base-font-color);
    margin: 10px;
}

/* ENDE::: Javascript: Beispielseiten */