.timespan {
    width:100%;
    position: relative;
    user-select: none;   
}

.collapsed {
    height:0;
    overflow: hidden;    
}

.timeline {
    position: relative;
    height: 6rem;
    width: 100%;
    margin-top: 0.5rem;
    overflow: hidden;
}

.timeline canvas {
   top:0;
   left:0;
   width:100%;
   height:100%;
}

.control-container {
    position: absolute;
    top:0px;
    width:100%;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    pointer-events: none;   
}

.leftGrip,.rightGrip,.range {
    pointer-events: all;
    display: inline-block; 
    height:100%;
    /* float: left; */
    font-size: 9pt;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}

.range {
    /* height:100%; */
}

.leftGrip,.rightGrip {
    width:15px;
    background-color: rgb(204, 200, 200);
    border:1px solid black;  
}

.rightGrip {
    cursor: e-resize;
}

.leftGrip {
    left: -100px;
    cursor:w-resize;
}

.range {    
    /* background: linear-gradient( rgba(0, 140, 255, 0.856),transparent); */
    background-color:rgba(0, 140, 255, 0.856);
    cursor: move;
}

.popover-anchor {
    position:absolute;
    top:2rem;
    font-size: 0.8rem;
}