/*Alte Schriften. Für alle alten Diagramme vor Version 2.0 notwendig*/
@font-face {
    font-family: 'UnitComp-Light';
    src: url('../fonts/UnitComp-Light.eot');
    src: url('../fonts/UnitComp-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/UnitComp-Light.woff') format('woff'),
         url('../fonts/UnitComp-Light.ttf') format('truetype'),
         url('../fonts/UnitComp-Light.svg#UnitCompLight') format('svg');
    
    font-style: normal;
	}

@font-face {
    font-family: 'UnitScComp-Light';
    src: url('../fonts/UnitScComp-Light.eot');
    src: url('../fonts/UnitScComp-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/UnitScComp-Light.woff') format('woff'),
         url('../fonts/UnitScComp-Light.ttf') format('truetype'),
         url('../fonts/UnitScComp-Light.svg#UnitScCompLight') format('svg');
    
    font-style: normal;
	}

@font-face {
    font-family: 'UnitComp-Medium';
    src: url('../fonts/UnitComp-Medium.eot');
    src: url('../fonts/UnitComp-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/UnitComp-Medium.woff') format('woff'),
         url('../fonts/UnitComp-Medium.ttf') format('truetype'),
         url('../fonts/UnitComp-Medium.svg#UnitCompMedium') format('svg');
    
    font-style: normal;
    }

@font-face {
    font-family: 'UnitScComp-Medium';
    src: url('../fonts/UnitScComp-Medium.eot');
    src: url('../fonts/UnitScComp-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/UnitScComp-Medium.woff') format('woff'),
         url('../fonts/UnitScComp-Medium.ttf') format('truetype'),
         url('../fonts/UnitScComp-Medium.svg#UnitScCompMedium') format('svg');
    
    font-style: normal;
	}

/*-----------------------------------------------------------------------------------*/

.ani01 {
    -webkit-transition: all .1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani02 {
    -webkit-transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani03 {
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani04 {
    -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani05 {
    -webkit-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani06 {
    -webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani07 {
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ani08 {
    -webkit-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
}


* {
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	margin: 0px;
	padding: 0px;
	}

 /*Remove tap highlight for Webkit Bowsers*/
* {
    -webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
    /*-webkit-user-select:none;*/                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

html, body {
	width: 100%;
	height: 100%;
	font-family: 'FFUnitWebLight';
	font-size: 1em;
    line-height: 1.4em;
	color: #172e4c;
	/* overflow: hidden; */
	}
	
a, a:hover {
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
	color: #172e4c;
	text-decoration: none;
	}

b, strong {
    font-weight: normal;
    font-family: 'FFUnitWebMedium';
}

#bu {
    font-size: 17px;
    line-height: 28px;
    overflow: hidden;
}

#anm {
    font-size: 14px;
    line-height: 28px;
    overflow: hidden;
}

#embedOverlay {
    display: none;
    position: absolute;
    top: 150px;
    width: 440px;
    padding: 50px;
    left: 50%;
    margin-left: -220px;
    webkit-box-shadow: rgb(136, 136, 136) 3px 3px 10px;
    box-shadow: rgb(136, 136, 136) 3px 3px 10px;
    border: 0px solid rgb(160, 160, 160);
    border-radius: 3px;
    background: rgb(255, 255, 255);
}

#embedOverlay.active {
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: block;
}

#embedOverlay h3, #embedOverlay p {
    margin-bottom: 20px;
}

#embedCode {
    margin: 0px;
    height: 120px;
    width: 340px;
}

#closeEmbed {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.highcharts-axis span, .highcharts-axis-labels span {
    background-color: #ffffff;
}

#container {
    font-size: 16px;
    /*margin: 0 auto;*/
}

#diagramm {
    position: relative;
    font-size: 16px;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    /*height: 750px;*/
    height: 100%;
    min-height: 500px;
    max-height: 100%;
}

#diaMenuButton, #diaMenuClose {
    cursor: pointer;
    cursor: hand;
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#diaMenuButton {
    display: block;
    font-family: 'vfa-icons';
    
    font-size: 1.3rem;
    line-height: 2.4rem;
    position: absolute;
    right: 10px;
    z-index: 100;
    color: rgb(23, 46, 76);
}

#diaMenuButton:hover, #diaMenuButton:active, #diaMenuClose:hover, #diaMenuClose:active {
    color: rgb(237,168,33);
}

#diaMenuClose {
    content: "\e605";
    top: -3rem;
    color: #fff;
    float: right;
    font-family: 'vfa-icons';
    
    font-size: 2.5rem;
    line-height: 0rem;
    position: relative;
    z-index: 100;

    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

    -moz-transform: rotate(45deg);
    -moz-transform-origin: 50% 50%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 50% 50%;
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    transform: rotate(45deg);
     transform-origin: 50% 50%;
}

#diaMenuClose:hover, #diaMenuClose:active {
    color: rgb(237,168,33);
    -moz-transform: rotate(-45deg);
    -moz-transform-origin: 50% 50%;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 50% 50%;
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    transform: rotate(-45deg);
     transform-origin: 50% 50%;
}

#diaMenu {
    position: absolute;
    width: 50%;
    min-width: 280px;
    max-width: 355px;
    right: 0;
    /*height: 100%;*/
    box-sizing: border-box;
    background: rgb(23, 46, 76);
    z-index: 500;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    /*overflow-y: scroll; */
    transform: translate(400px,0);
    -webkit-transform: translate(400px,0);
    -moz-transform: translate(400px,0);

    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#diaMenu.active {
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
}

#diaMenu span {
    display: block;
}

#diaMenu .menuTitle {
    font-family: 'FFUnitWebMedium';
    
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2rem;
    max-width: 85%;
}

#diaMenu .funcTitle {
    font-family: 'FFUnitWebMedium';
    
    font-size: 1.25rem;
    line-height: 1.5rem;
    cursor: pointer;

    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#diaMenu .funcTitle:hover {
    opacity: 1;
}

.diaFunc {
        border-top: solid 2px rgba(255,255,255,.5);
    margin-bottom: 1rem;
    padding-top: .3rem;
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.diaFunc.active, .diaFunc:hover {
    border-top: solid 2px rgba(255,255,255,1);
}

.diaFunc .funcTitle {
    opacity: .5;
}

.diaFunc.active .funcTitle {
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 1;
}

#diaMenu .funcDesc {
    margin: 1rem 0 1rem 0;
}

#diaMenu .shareOptions, #diaMenu .exOptions {
    list-style-type: none;
    margin-top: 1rem;
}

#menuScroll {
    overflow-y: scroll;
    padding-right: 30%;
    width: 130%;
    height: 100%;
}

.exLink {
    position: relative;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.exLink::after {
    content: "\e900";
    font-family: 'vfa-icons';
    
    font-size: 2.5rem;
    position: absolute;
        top: 50%;
        right: 0;
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
}

.exLink:hover, .exLink:hover .exDesc {
    color: rgb(237,168,33);
}

.exDesc {
    max-width: 75%;
    font-family: "FFUnitWebItalic";
    color: rgb(182, 186, 205);
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#embedCode {
    font-family: 'FFUnitWebItalic';
    color: rgb(182, 186, 205);
    word-wrap:break-word;
    width: 100%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#embedCode.active {
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: rgb(237,168,33);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#copyEmbed {
    display: block;
    margin: 2rem 0 1rem 0;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-family: "FFUnitWebLight";
    
    font-size: 1rem;
    line-height: 1rem;
    padding: .5em .5em;
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#msg {
    color: rgb(237,168,33);
    font-family: "FFUnitWebItalic";
}

#copyEmbed:hover, #copyEmbed:active {
    background: rgba(255,255,255,0.3);
}

.shareOptions li {
    display: inline;
}

#diaMenu .social-button {
    font-family: "vfa-icons" !important;
    
    font-size: 2.5rem;
    line-height: 1.5rem;
    /*padding-right: 8px;*/
    color: #fff;
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#diaMenu .social-button:hover {
    color: rgb(237,168,33);
}

.akkordeon.inactive > ul {
    visibility: hidden;
}

/*.highcharts-container {
  position: inherit !important;
}
.highcharts-tooltip {
  z-index: 9998;
}

.highcharts-tooltip span { z-index: 9999 !important; }

.html-dataLabel .normal {
    font-family: 'FFUnitWebLight';
}

.html-dataLabel .bold {
    font-family: 'FFUnitWebMedium';
}

#htmlTooltip {
    width:300px!important;
    height: 100px !important;
    overflow:auto;
    white-space:normal !important;
}

#htmlTooltip2 {
    max-width: 500px !important;
    width: 200px !important;
    white-space:normal !important;
    padding: 5px;
}*/





/*New html-Tooltip Correction*/

.highcharts-tooltip span {
    display: block;
    white-space:nowrap !important;
    border: 0px solid;
    padding: 10px;
    background-color:white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 3px 6px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 6px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 6px 20px 0px rgba(0,0,0,0.75);

}

.highcharts-tooltip .tttable .row {
    padding-top: 3px;
    border-bottom: 1px solid rgb(23, 46, 76) !important;
}

.highcharts-tooltip .tttable .row:last-child {
    border-bottom: none !important;
}

.label {
 z-index: 1!important;
}

.highcharts-tooltip {
    z-index: 9998;

}

/*.highcharts-tooltip div {
    background-color:white;
    border:0px solid green;
    opacity:1;
    z-index:9999!important;
}*/

.highcharts-data-labels {
    font-family: 'FFUnitWebLight';
    white-space:nowrap !important;
}





.tooltip {
    padding:5px;
}

.controls {
    text-align: right;
}

.ixIcon {
    width: 3rem;
    height: auto;
}

.ixDesc {
    text-align: right;
    padding-top: 1rem;
}

.switchButton {
    font-family: "UnitComp-Medium";
    color: rgb(237,168,33);
    text-align: center;
    line-height: 30px;
    background: #fff;
    border: 2px solid rgb(237,168,33);
    display: inline-block;
    padding: .3em .5em;
    cursor: pointer;
    cursor: hand;
}

.switchButton.active, .switchButton:hover {
    background: rgb(237,168,33);
    color: #fff;
}
    
.dragdealer {
    position: relative;
    width: 100%;
    height: 20px;
    /*bottom: 80px;*/
    margin-top: 20px;
    /*background: rgb(230,230,230);*/
    background: rgba(237,168,33,0.2);
    }
    
.dragdealer .handle {
    position: absolute;
    cursor: pointer;
    }
    
.dragdealer .bar {
    position: absolute;
    width: 122px;
    height: 50px;
    bottom: -15px;
    -webkit-transition: left 0.2s ease-out;
    -moz-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out;
    z-index: 200;
    }

.dragdealer .bar > div {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 30px;
    font-family: "UnitComp-Medium";
    /*color: 'rgb(23, 46, 76)';*/
    color: #fff;
    text-align: center;
    line-height: 30px;
    background: rgb(237,168,33);
    }

.dragdealer .bar > div.arrow-left::before {
    display: block;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0px;
    left: 10px;
    background: url('../img/arrow-left-w.png') no-repeat center left;
    -webkit-background-size: 8px 17px;
    -moz-background-size: 8px 17px;
    background-size: 8px 17px;
    content: '';
    }

.dragdealer .bar > div.arrow-right::after {
    display: block;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0px;
    right: 10px;
    background: url('../img/arrow-right-w.png') no-repeat center right;
    -webkit-background-size: 8px 17px;
    -moz-background-size: 8px 17px;
    background-size: 8px 17px;
    content: '';
    }

.dragdealer > span {
    position: absolute;
    display: block;
    width: 122px;
    height: 20px;
    font-family: "UnitComp-Light";
    color: rgb(237,168,33);
    line-height: 22px;
    text-align: center;
    z-index: 100;
    }

/*Iconfont*/
/*Auskommentiert: Wegen IE 11 Bug liegen alle @font-face-Angaben direkt im HTML*/
/*@font-face {
    font-family: 'vfa-icons';
    src:url('../fonts/vfa-icons.eot');
    src:url('../fonts/vfa-icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/vfa-icons.ttf') format('truetype'),
        url('../fonts/vfa-icons.woff') format('woff'),
        url('../fonts/vfa-icons.svg#vfa-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}*/