body.preload{
	border-top: none !important;
	opacity: 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em;
}

/*
.notransition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
*/
#d3-content,
#hc-content,
#chart-info p,
#chart-info #numberedfootnotes{
	font-size: 15px !important;
}

#d3-content text,
#hc-content text,
#d3-content button,
#hc-content button {
	font-family: "BundesSansWeb",Helvetica,Arial,sans-serif;
}

#d3-content:focus,
#hc-content:focus {
	outline: none;
}

#d3-content.fbox,
#hc-content.fbox   {
	margin-left: 40px;
}

#hc-content hr {
	border-top: 2px solid lightgrey;
}

#hc-content #chart-info {
	min-width: 310px; 
/*	height: 400px; */
        height: auto;	
	margin: 0 auto;
	margin-top: 20px;
}

#chart-title {
	font-weight: bold;
	/*margin-bottom: .25em;*/
	margin-bottom: 10px;
	margin-top: 10px;
	/* margin-left: 40px; */
	/* white-space: nowrap; */
	font-size: 1.2em;
	/*line-height: 1.3333333333;*/
}

#chart-subtitle {
	font-weight: bold;
	font-size: 1.1em;
}

#ig-map{
	display: inline-block;
	width: 30%;
}

#ig-mapChart{
	display: inline-block;
	width: 70%;
}

/* Highcharts block */

#ig-chart {
	
}

.highcharts-graph.zone-1 {
  display: none;
}

.svgframe {
	width:100%;
	position: relative;
  	display: inline-block;
	vertical-align: middle;
  	/*padding-bottom: 5%;  // berechnet aus dem Seitenverhältnis height/width*/
  	overflow: hidden;
}

.svgframe svg {
	position: absolute
}

.bordered-top{
	border-top: 2px solid lightgrey;
}
.bordered-bottom{
	border-bottom: 2px solid lightgrey;
}

#big-chart path, #small-chart path{
  stroke: #fff;
  opacity: 10;
}

#big-chart {
	/*transition-duration: 2s;*/
}

.labelName{
	font-size: 0.8em;
}

.slice-text-outside {
	font-size: 0.9em;
	font-weight: normal;
}

.slice-text-outside-hovered {
	font-size: 1em;
	font-weight: bold;

}

.slice-text-inside{
	fill: white;
	font-size: 0.9em;
	pointer-events: none;
	font-weight: bold;
}

.chart2-4-34 .slice-text-inside{
	fill: white;
	font-size: 0.7em;
	pointer-events: none;
	font-weight: bold;
}

.chart2-4-34 .slice-text-inside.shifted{
	fill:black;
	font-size: 0.7em;
	pointer-events: none;
	font-weight: normal;
}

text.chartLabel {
	font-size: 0.8em;
	font-weight: bold;
}

text.chartLabel.number {
	font-size: 0.8em;
	font-weight: normal;
}

.chart1-1-4 .chartLabel {
	font-size: 1em;
}
.chart1-1-4 .chartLabel.number {
	font-size: 1em;
}

.line-tangent {
	stroke:rgb(151,83,109);
	stroke-width: 1;
	fill:none;
}

polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
}

#navigation{
	/*position: relative;*/
	margin-bottom:5px;
}
#navigation ul,
#navigation li{
	margin-bottom: 5px;
	margin-left: 0;
}
#navigation ul li{
	display: inline-flex;
	list-style: outside none none;
	font-size: 16px;
	/*margin-bottom: 5px;*/
	padding-right: 20px;


}
/*li, ol, ul {
    list-style-type: none;
}*/

#timeline {
	position:relative;
	margin-top: 5px;
	/* margin-left: 40px; */
	margin-bottom: 10px;
	height: 25px;
	vertical-align: middle;
	/*overflow: hidden;*/
}

#timepoint-wrapper {
	display:inline;
	/*position:relative;
	float:left;*/
	position:absolute;
	height:100%;
	overflow: hidden;
}
#timeline .timepoints{
	height: 100%;
	position:absolute;
	left: 0;
	display: inline-flex;
}
#timeline .timepoints-animated{
	-webkit-transition: left 0.6s ease-in;
	-moz-transition: left 0.6s ease-in;
	-o-transition: left 0.6s ease-in;
	transition: left 0.6s ease-in;

}
#timeline div.timepoint {
	position: relative;
	float:left;
	display:inline-table;
	height: 100%;
	cursor: pointer;
	background-color: rgb(156,201,219);
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	padding-top: 0;
	font-size: 0.9em;
	overflow: hidden;
}
#timeline div.selected,
#timeline div.selected:focus {
    background-color: rgb(7,120,165);
    color: white;
}
#timeline div.timepoint:hover:not(.selected) {
	background-color: rgb(81,161,192)/*rgba(7,120,165,0.7) #a7cfe7*/;
}
#timeline div.timepoint.inactive {
	cursor: not-allowed;
	background-color: rgb(218,235,242)/*rgba(7,120,165,0.15)*/;
	opacity: 0.6;
}
#timeline div.navigation {
	display:inline;
	/*
	position:relative;
	float:left;*/
	position:absolute;
	height: 25px;
	text-align: center;
	padding-top: 1px;
	margin: 0 auto;
	background: rgb(0,79,128);
	color: white;
	cursor: pointer;
	font-size: 20px;
	font-weight: 900;
	opacity: 1;
}
#timeline div.navigation.prev {
	/*position: absolute;*/
	left: 0;
}

#timeline .timepoints .timepoint:not(.selected):focus {
	background: #51A1C0;
}
#timeline div.navigation.prev:focus,
#timeline div.navigation.next:focus,
button#play:focus{
	/* border: dotted thin black; */
	/*border: 2px solid black;*/
	/*background: #51A1C0;*/
	outline: 1px dotted black;
	outline-offset: -1px;
}

#timeline div.navigation.prev,
#timeline div.navigation.next {
	padding-left: 0px;
	line-height: 16px;
}

#timeline div.navigation.inactive {
	cursor: not-allowed;
	opacity: 0.2;
}

#animation-button {
	position: absolute;
	right: 0;
	margin-top: -2px;
	margin-left: 10px;
	z-index: 1;
	/*float: right;
	margin-top: -36px;*//*neu 14.03.2017*/
	/*-40px*/
}

#play{
	/*content: '\u25B6';*/
	width:25px/*30px*/;/*neu 14.03.2017*/
	height:25px /*30px*/;/*neu 14.03.2017*/
	background: rgb(0,79,128);
	border:none;
	color:white;
	border-radius: 4px;
	vertical-align: middle;
	cursor:pointer;
}

#buttonPlace{
	position:absolute;
	z-index: 2;
}

/* div#selectionButtonPanel {
	display: block !important;
} */
/* .select-button.selected {
	display: block;
} */

button.select-button{
	/* width: 67.5px; */
	height: 25px;
	background: rgb(156, 201, 219);
	border: none;
	color: black;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
	/* margin-top: 8px; */
	text-align : left ;
	text-decoration: none;
	display: inline-block;
	font-size: 0.9em;
	/* margin-left: 20px; */
	hyphens: auto;
	-ms-hyphens: auto;
}

button.select-button.selected{
	/* background-color: rgb(0,79,128); */
	background-color: rgb(7,120,165);
	color: white;
}

button.selected .footnotenumber {
	color: white;
}

button.select-button:not(.selected):hover{
	background-color: rgb(81, 161, 192);
	color: black;
}

.legend {
	width: 100%;
	position:relative;
	display: inline-block;
	padding: 0 20px 10px 20px;
 	margin-top: -30px;
 	margin-bottom: 5px;
}

p#source {
	margin-top: 5px;
	/* padding-right: 10px; */
}
.legend-column{
	/* width: 33%; */
	/* VS display: inline-block; */
	display: block;
	vertical-align: top;
}

.legend-column:nth-child(n+2) {
	/* padding-left: 50px; */
}

@media (min-width: 821px){
	.legend-column {
		float: left;
		width: 33%;
	}
	.legend-row {
		display: table-row;
		/*border: 1px solid black;*/
	}
	.legend-element-neu {
		display: table-cell;
		margin: 1px 5px;
		padding-bottom: 3px;
	}
}

@media (max-width: 820px){
	.legend-column {
		float: none;
		width: auto;
	}
	.legend-row {
		display: block;
		/*border: 1px solid black;*/
	}
	.legend-element-neu {
		display: block;
		margin: 1px 5px;
		padding-bottom: 3px;
	}
}
/*
.legend-column > div{
	display: table;
	border: 1px solid black;
	margin: 5px 5px;
}
*/
.legend-element {
	display: table;
	margin: 1px 5px;
	/* background-color: white; */
}
.legend-element-hovered {
	/*background-color:lightgrey !important;*/
	background-color:rgb(217,229,236) /* !important; */
	/* background-color: #FFFFFF; */
}
.legend-color {
	/*display: table-cell;*/
	display: inline-block;
	/*float:left !important;*/
	width: 25px;
	/*vertical-align: top;*/
	margin-left:5px;
	padding: 3px 0;
	/*height: 15px;*/
}
.legend-color > button {
	width: 100%;
	height: 20px;
	min-width: 25px;
	vertical-align: middle;
	border: 0;
}
.legend-text{
	width: 100%;
	/*padding: 0 5px;
	display: table-cell;
	vertical-align: top;
	*/
	display: table-cell;
	/*float:left;*/
	padding: 0 5px;
}
.legend-text > span{
	vertical-align: top;
	/*line-height: 0.8em;*/
	font-size: 0.9em;
	color: inherit;
}

/* neu 07.03.2017 */
.legend-neu {
	width: 100%;
	position:relative;
 	display: table;
	/*float: left;*/
	padding-left: 20px;
 	padding-bottom: 5px;
 	/*margin-top: -30px;*/
 	/*margin-bottom: 20px;*/
}

.legend-color-neu {
	display: inline;
	width: 25px;
	padding: 3px 0;
	margin-left:5px;
}
.legend-color-neu > button {
	/*height: 20px;
	min-width: 25px;*/
	height: 24px;
	width: 36px;
	vertical-align: middle;
	border: 0;
}
.legend-text-neu{
	padding: 0 5px;
}
/* Ende neu 07.03.2017 */

#chart-info {
	clear: left;
	width: inherit;
}
#specialvalues {
	margin-top: 10px;
	margin-bottom: 10px;
}
#footnote{
	margin-top: 5px;
}
#numberedfootnotes{
	padding-top: 5px;
}
#numberedfootnotes >div{
	padding: 0 0 5px 20px;
	text-indent:-20px;
}
#numberedfootnotes > div > div:first-child {
    display: inline-block;
    /*width: 15px;*/
    /*font-size: 0.8em;*/
    vertical-align: top;
    text-align: right;
}
#numberedfootnotes > div > div {
    width: auto;
    display: inline-block;
}
#numberedfootnotes > div > div:nth-child(2){
	padding-left: 5px;
}
#numberedfootnotes > div > * {
    text-indent: 0;
}

.svgfootnotenumber {
	font-size: 0.8em;
	fill: #004f80;
	cursor: pointer;
}

tspan.svgfootnotenumber a:focus {
	font-size: 130%;
}

.footnotenumber{
	padding-left: 3px;
	text-decoration: none;
	color: #004f80;
	font-size: 0.8em;
	cursor: pointer;
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
}

.footnotenumber:first-of-type{
	padding-left: 1px;
}

.footnote-hovered {
	background-color:rgb(217,229,236) !important;
	transition: 0.6s ease;
}

.sr-only, .skip {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.prev-next-button{
	width: 20px;
	height: 24px;
	transition: 0.6s ease;
	padding: 2px;
}

#svg div.next, #svg div.prev{
	width:20px;
	height:24px;
	transition: 0.6s ease;
	opacity: 1;
	cursor: pointer;
	z-index: 1;
	/*filter:alpha(opacity=90);*/
}
#svg div.next{
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
}

#svg div.prev{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}

#svg div.inactive{
	opacity: 0;
	cursor: default;
	/*filter:alpha(opacity=10);*/
}

#additional-data a{
	text-decoration: none;
	font-weight: bold;
}

.xaxis {
	background-color:rgb(217,229,236) !important;
	font-size: 15px;
}
.yaxis{
	background-color: lightgrey !important;
	font-size: 15px;
}
.xaxis line {
	fill: none;
}

.chart1-1-5 .xaxis line,
.chart2-1-1 .xaxis line {
  stroke: rgb(225,236,238);
  stroke-width: 3;
  stroke-linecap: round;
  shape-rendering: crispEdges;
}
.yaxis line {
	fill: none;
	stroke: rgb(225,236,238);
	stroke-width: 3;
	stroke-linecap: round;
	shape-rendering: crispEdges;
}
.chart1-1-5 .yaxis line,
.chart2-1-1 .yaxis line {
  stroke: none;
}
.xaxis path, .yaxis path{
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
}
.xaxis text{
	font-size: 1em;
	text-anchor: end;
}
.chart1-1-5 .xaxis text, 
.chart2-1-1 .xaxis text {
	text-anchor: middle;
}
.chart2-5-46 .xaxis text{
	font-size: 1.2em;
}
.xaxis text.hovered{
	font-weight: bold;
}
.xaxis text:focus {
	font-weight: bold;
}
.yaxis text{
	font-size: 1em;
}
.chart1-1-5 .yaxis text{
	text-anchor: middle;
}
.chart2-5-46 .yaxis text{
	font-size: 1.2em;
}

.axisLabel{
	font-weight: bold;
	font-size: 1em;
}

path.point{
	stroke: none;
	fill: rgb(7,120,165);
}
g {
	border: 1px solid black;
}

/*
.enter {
  fill: green !important;
}
.update {
  fill: #333 !important;
}
.exit {
  fill: brown !important;
}
*/
.barToolTip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    box-shadow: -3px 3px 10px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}

/* Creates a small triangle extender for the tooltip */
/*.barToolTip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgb(0,79,128);
  content: "\25BC";
  position: absolute;
  text-align: center;
}*/

.d3-tip {
	position: absolute;
	display: block;
	padding: 5px;
	font: 12px sans-serif;
	font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1;
  background: rgb(0,79,128);
  color: white;
  border-radius: 5px;
	pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
	position: absolute;
  display: inline;
	width: 100%;
	margin: -2px 0 0 0;
  top: 100%;
  left: 0;
	text-align: center;
	font-size: 12px;
  line-height: 1;
  color: rgb(0,79,128);
  content: "\25BC";
  pointer-events: none;
}
/*
.d3-tip2 {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
    background: rgba(0, 0, 0, 0.8);
	color:rgba(0, 0, 0, 0.8);
    border-radius: 2px; 
	pointer-events: none;
}
*/

/* Creates a small triangle extender for the tooltip */
/*
.d3-tip2:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}
.d3-tip2.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}*/

.bar-value {
	fill: black;
	font-size: 0.9em;
}

.arrow {
    background-position: right 8px top 6px;
    background-size: 12px auto;
}
#hc-content .dropdown-header {
	font-size: 14px;
}
#hc-content .dropdown-content label {
	font-size: 12px;
}
#hc-content .listWrap text{
    font-size: 12px;
}
.dropdown-header{
	height: 24px;
	/*background-color: rgb(217,229,236);*/
	/*background-color: rgb(153,205,209);*/
	background-color: rgb(156, 201, 219);
	/*background-color: #c1dcee;*/
	/*border: 1px solid #d5d5d3;*/
	cursor: pointer;
	padding-right: 30px;
	padding-left: 5px;
	/*pointer-events: none;*/
}
.dropdown-content {
    min-width: 180px;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid rgb(156, 201, 219);
    border-radius: 0 4px 4px;
    /* padding: 0 5px; */
    position: absolute;
    /*background: rgb(217,229,236) none repeat scroll 0 0;*/
	background: rgb(156, 201, 219) none repeat scroll 0 0;
    z-index: 3;
}
.dropdown-content > div > div:first-of-type{
	/* padding-left: 10px; */
	padding-left: 5px;
}
.dropdown-content label {
	margin: 0;
}
.dropdown-content label.selected {
	background-color: rgb(7,120,165);
	color: white;
}
.dropdown-content label:not(.selected):hover{
	background-color: rgb(81, 161, 192);
	color: black;
}
.dropdown-content text {
	padding: 0 5px;
}

.listWrap {
    float: left;
	/* padding-left: 10px; */
	padding: 0 5px;
}
.listWrap text{
    font-size: 13px;
}

/**,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}*/

.map-subunit {
	cursor: pointer;
	stroke: none;
	fill: rgb(156,201,219);
}

.map-subunit:hover, .map-subunit.selected {
	fill: rgb(7,120,165);
}
.map-subunit:focus {
	/*stroke-width:4;
	stroke: white;*/
	fill: rgb(7,120,165);
	outline:none;
}

/*.d3-class-1 {
	fill: rgb(156,201,219);
	background-color: #bcbddc;
}*/

.map-subunit-boundary{
	fill: none;
	stroke: #FFFFFF;
	stroke-width:1;
}

/*.d3-tip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  font-weight: bold;
  pointer-events: none;
}*/

.stacked-bar-chart .tooltip-wrapper {
    position: relative;
    padding: 6px;
}

.stacked-bar-chart .tooltip-wrapper:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      border: 10px solid;
      border-color: black transparent transparent transparent;
}

.stacked-bar-chart .tooltip-wrapper:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      bottom: -19px;
      left: 50%;
      transform: translateX(-50%);
      border: 10px solid;
      border-color: white transparent transparent transparent;
}

.stacked-bar-chart .tooltip-table {
    text-align: right;
}

.alarm{
	color: red;
}

/* Highcharts block */

/* GRAPHIC 1.6.5 */

/*
#orgunits {
	margin-top: 30px;
	padding-bottom:20px;
}
*/

#checkBoxes {
	display: none;
	margin-top:10px;
}

#checkBoxes .chbox {
	margin-left: 5px;
}

#checkBoxes label{
	display: inline-block;
	margin-left: 3px;
}

.chbox {
	display:inline-block;

}

.arrows {
	background-position: right 8px top 4px;
    background-size: 12px auto;
	height: 24px;
	background-color: rgb(156, 201, 219);
	cursor: pointer;
	padding-right: 17px;
	padding-left: 5px;
}
   
.selectBox div.arrow-down {
  border-top: 5px solid rgb(156, 201, 219);
}
.selectBox div.arrow-up {
  border-bottom: 5px solid rgb(156, 201, 219);
}

/*.selectBox:hover {
  color: #445566;
}*/

.selectBox {
	
  display: flex;
  cursor: pointer;
  background: rgb(156, 201, 219);
  font-size: 14px;
  
  
}

.simpleSelection label, .simpleSelection .chbox span {
	font-size: 12px;
}

#chart-title sup,
.chbox sup,
.highcharts-subtitle sup {
	cursor:pointer;
}
.nowrap {
	white-space: nowrap;
}

sup {
	vertical-align: super;
	font-size: 0.7em;
}


/* .sliderContainer {
	width: 40%;
    height: 100px;
} */

#slider-range{
margin: 10px 40px;
width: 40%;
height: 10px;
background:  rgb(185, 188, 189) ;
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
border-radius: 12px;
cursor: pointer;
}
  
.ui-slider-range {
	background:  rgb(81, 161, 192) ;
	cursor: pointer;
	border-radius: 12px;
	cursor: pointer;
  } 
  .ui-slider .ui-slider-handle:after {
    content:"";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -4px;
    background: rgb(81, 161, 192) ;
    -webkit-box-shadow: 0 1px 1px 1px rgb(81, 161, 192)  inset, 0 1px 0 0 #FFF;
    -moz-box-shadow: 0 1px 1px 1px rgb(81, 161, 192)  inset, 0 1px 0 0 white;
    box-shadow: 0 1px 1px 1px rgb(81, 161, 192)  inset, 0 1px 0 0 #FFF;
	cursor: pointer;
}

.mySlider:hover{
	opacity: 1;
}

.ui-slider-tick-mark{
    display:inline-block;
    width:1px;
	margin-left: 5px;
    background:rgb(192, 195, 196);
    height:13px;
    position:absolute;
    top:px;
}

.ui-slider-tick-mark1{
    display:inline-block;
    width:2px;
	margin-left: 5px;
    background:rgb(192, 195, 196);
    height:13px;
    position:absolute;
    top:4px;
}

/* .tick {
	position: relative;
	display: flex;
	justify-content: center;
	width: 1px;
	background: rgb(15, 15, 15);
} */

#amount {
outline: none;
appearance: none;
margin: 0px 0px 0px 130px;
width: 17%;
border: 0;
height: 30px;
cursor: pointer;
}

.labelPosition {
	position: relative;
  }
  .label-0 {
	top: -1px;
	left: -17px;
  } 
  .label-2 {
	top: -8px;
	left: -6px;
  } 
  .label-3 {
	top: -8px;
	left: -1px;
  } 
  .label-ausland {
	top: -1px;
	left: -26px;
  }