/* Tabs mit radio-Buttons */
.tabbed figure { 
   	display: block; 
   	margin-left: 0; 
   	clear: both;
	box-sizing: border-box;
}

.tabbed > input,
.tabbed figure > div { 
	display: none;
}

.tabbed figure>div {
  	padding: 4px;
	width: 250px;
	height: 110px;
  	border: 1px solid #cccccc;
  	background: #c6c6c6;
	position: absolute;
	box-sizing: border-box;
}

#tabA:checked ~ figure .tabA,
#tabB:checked ~ figure .tabB,
#tabC:checked ~ figure .tabC {
	display: block;
}


nav label {
   	float: left;
   	padding: 5px 10px;
   	border-top: 1px solid #cccccc;
   	border-right: 1px solid #cccccc;
   	background-color: #dbdbdb;
   	color: var(--highlightcolor);
	font-family: Abel;
	text-transform: uppercase;
	font-size: 12px;
	box-sizing: border-box;
}

nav label:nth-child(1) { 
	border-left: 1px solid #cccccc;
}
nav label:hover { 
	background: var(--highlightcolor);
	color: #dbdbdb;
}
nav label:active {
	background: var(--highlightcolor);
}

#tabA:checked ~ nav label[for="tabA"],
#tabB:checked ~ nav label[for="tabB"],
#tabC:checked ~ nav label[for="tabC"] {
  	background: var(--highlightcolor);
  	color: #dbdbdb;
  	position: relative;
  	border-bottom: none;
	font-weight: bold;
}


.plothover {
	width: 240px; 
	height: 100px; 
	box-sizing: border-box;
} 

.plotdiv {
	background-color: #d3d3d3; 
	text-align: justify; 
	font-family: Verdana; 
	font-size: 10px; 
	line-height: 13px; 
	color: #424242; 
	height: 90px; 
	width: 230px; 
	border: 10px solid rgba(255, 0, 0, 0.0);
	padding-right: 6px;
	box-sizing: border-box;
	overflow: auto;
	opacity: 0; 
	position: relative;
	top: 5px;
	scrollbar-color: var(--highlightcolor) #bababa;
  	scrollbar-width: thin;
} 

.plotdiv:hover {
	opacity: 0.9; 
	transition: 0.6s all ease-in-out; 
	-moz-transition: 0.6s all ease-in-out; 
	-webkit-transition: 0.6s all ease-in-out; 
	-ms-transition: 0.6s all ease-in-out; 
	-o-transition: 0.6s all ease-in-out;
}