canvas {
	/*
    height: 100%!important;
    */
}
.joPageTimeline{
    /*
    width: 100%;
    */
    height: auto;
    margin: 6px 0 6px 0;
    padding: 0 20px;
    text-align:right;
}
.joTimelineBody {
    position: relative;
    padding: 0px 0px 0px;
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
}
.joTimelineBody.notfound_padding{
	padding: 50px 20px;
}
#chart_div{
	position:relative;
    /* height:100%; */
    height: 200px;
    margin: 0 5px;
    /*
    width: 82%;
    left: 9%;
    */
}
.del_timefilter{
    font-size: 12px;
    border-radius: 3px;
    margin: 0;
    line-height: 100%;
    background-color: #696b6d;
    padding: 3px 5px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
}
.del_timefilter a{
    color: #ffffff;
    text-decoration: none;
}
.del_timefilter a .img-container {
    background-color: #bc0d12;
    position: absolute;
    border-radius: 20px;
    color: #ffffff;
    z-index: 150;
    line-height: 100%;
    display: none;
    overflow: hidden;
    right: -8px;
    top: -8px;
    width: 15px;
    height: 15px;
}
.del_timefilter .img-container .joSprite {
    background-image: var(--icons_white);
    background-position: -149px 1px;
    background-size: 250px;
}
.del_timefilter:hover .img-container {
    display: block;
}

.joObjekteTimeline,
.joObjekteTimelineEndJahr,
.joObjekteTimelineStartJahr{
    /*
	float:left;
    */
}
.time_wrap{
    justify-content: space-between;
}
.joObjekteTimeline{
    margin: 0 8px;
    /*
	width:82%;
	*/
    min-height:1px;
    position:relative; 
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;     
    -o-user-select: none;
    user-select: none;      
    padding: 0;
    list-style-type: none;
}
.joObjekteTimelineEndJahr,
.joObjekteTimelineStartJahr{
    /*
    width:9%;
    
    text-align:center;
    */
    padding:5px;
}
.joObjekteTimelineStartJahr{
    padding-left:0;
}
.joObjekteTimelineEndJahr{
    padding-right:0;
}
.joObjekteTimelineEndJahr span,
.joObjekteTimelineStartJahr span{
    font-size:14px;
}
.joObjekteTimeline a{
    color:#fff;
}
.joObjekteTimeline li{
    position: absolute;
    text-align: center;
    bottom: 1px;
}
.joObjekteTimeline li.decaycumulate{
    top:1.8rem;
}
.joObjekteTimeline li .joCount{
    position: absolute;
    width:11rem;
    left:50%;
    top: -4rem;
    z-index: 1;
    display: none;
    margin-left: -5.5rem;
}
.joObjekteTimeline li .joCount span{
    position:relative;
    z-index:999;
    background-color:#2E3585;
    border-radius:0.2rem;
    color:#fff;
    display: block;
    font-size: 0.8rem;
    line-height:120%;
    padding:0.2rem;
    min-height:3.4rem;
}
.joObjekteTimeline li .joTimeSegment{
    position:absolute;
    bottom:-2em;
    display:none;
}
.joObjekteTimeline li .joTimeSegment{
    position:absolute;
    top:0.75em;
    opacity:0;
    left: -0.45em;
}
.joObjekteTimeline li .joTimeSegment span{
    font-size:0.5rem;
    color: #bdbdbd;
}
.joObjekteTimeline li .joTimeSegment.joShow{
    opacity:1;
}
.joObjekteTimeline li.joInrange .joTimeCandle{
    background-color: rgba(0, 0, 0, .6);
}
.joObjekteTimeline li.decaycumulate.joInrange .joTimeCandle{
    background-color: rgba(0, 0, 0, .4);
}
.joObjekteTimeline li .joTimeCandle{
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    bottom: 0;
    height: 100%;
    z-index: 100;
    right: 1px;
    left: 0;
}
.joObjekteTimeline li.decaycumulate .joTimeCandle{
    background-color: rgba(0, 0, 0, .1);
}
.joObjekteTimeline li.joActive .joTimeSegment,
.joObjekteTimeline li.joActive .joCount,
.joObjekteTimeline li:hover .joTimeSegment,
.joObjekteTimeline li:hover .joCount{
    display:block;
    z-index:9999;
    opacity:0;
}
.joTimeLineWrapper{
    background-color:#fff;
    border-top:#000 1px solid;
    border-bottom:#000 1px solid;
}
.joObjekteTimeline .joStartSlider,
.joObjekteTimeline .joEndSlider{
    width:24px;
    height:24px;
    border-radius:24px;
    border:rgba(255, 255, 255, 1) 1px solid;
    top:100%;
    left:100%;
    margin-top:-12px;
    position:absolute;
    cursor:pointer;
    z-index:9000;
	background-color: #c7cbcf;
}
.joObjekteTimeline .joEndSlider,
.joObjekteTimeline .joStartSlider{
    margin-left:-8px;
}
.joDateRangeIncludeMissingYears{
    display:none;
}
.joObjekteTimeline .joBgSliderFocus,
.joObjekteTimeline .joBgSlider{
    background-color: #c7cbcf;
    width:100%;
    height:1px;
    position:absolute;
    bottom:0;
    z-index:10;
}
.joObjekteTimeline .joBgSliderFocus{
    width:auto;
    background-color: #000;
}
.joPageTimelineScale{
    position:relative;
}
.joPageTimelineScale #joPageTimelineClose{
    position:absolute;
    padding:0.4rem 0;
    right:2rem;
    top:-1rem;
    line-height:100%;
    width:1rem;
    cursor:pointer;
}
div.joSlideableYearContainer {
    /*width: 4rem;*/
    position: absolute;
    top: -2.45rem;
    left: -2.05rem;
}
div.joSlideableYearContainer .ecke,
div.joSlideableYearContainer .content{
    background-color: #8e0200;
}
div.joSlideableYearContainer .ecke,
.joObjekteTimelineLi div.joCount .ecke {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    left: 40%;
    z-index: 1;
    transform: rotate(45deg);
    top: 14px;
}
div.joSlideableYearContainer .content{
    font-size: 1.25rem;
    line-height: 110%;
    position: relative;
    z-index: 2;
    padding: 0.3rem;
    color: #fff;
    width: max-content;
}
#chartjs-tooltip {
    z-index: 9999;
    border: 1px solid #dcded7;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
    transition: opacity 0.6s ease-in-out;

    a {
        color: black;
        &:hover {
            text-decoration: underline;
            text-underline-offset: 2px;
        }
    }
}