.collectionStackedTimeline {
    position: absolute;
    width: 100%;
    height: 100%;
    border: gray solid 1px;
    border-radius: 3px;
    z-index: 1000;
    overflow: hidden;
    top: 0px;

    .collectionStackedTimeline-selector  {
        position: absolute;
        width: 10px;
        top: 2.5%;
        height: 95%;
        background: lightblue;
        border-radius: 5px;
        opacity: 0.3;
        z-index: 500;
        border-style: solid;
        border-color: darkblue;
        border-width: 1px;
    }

    .collectionStackedTimeline-current {
        width: 1px;
        height: 100%;
        background-color: red;
        position: absolute;
        top: 0px;
        pointer-events: none;
    }

    .collectionStackedTimeline-marker-timeline {
        position: absolute;
        top: 2.5%;
        height: 95%;
        border-radius: 4px;
        &:hover {
            opacity: 1;
        }

        .collectionStackedTimeline-left-resizer,
        .collectionStackedTimeline-resizer {
            background: dimgrey;
            position: absolute;
            top: 0;
            height: 100%;
            width: 10px;
            pointer-events: all;
            cursor: ew-resize;
            z-index: 100;
        }
        .collectionStackedTimeline-resizer {
            right: 0;
        }
        .collectionStackedTimeline-left-resizer {
            left: 0;
        }
    }

    .collectionStackedTimeline-waveform {
        position: absolute; 
        width: 100%; 
        height: 100%;
        top: 0; 
        left: 0;
        pointer-events: none;
    }
}