div#traingraph, div#stationgraph {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

div#canvas {
    width: 100%;
    height: 100%;
}

svg#overlayssvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.overlaysidebar {
    position: absolute;
    right: -40rem;
    top: 6rem;
    bottom: 1rem;
    width: 35rem;
    background-color: white;
    border-radius: 0.5rem;
    border: 0.2rem solid gray;
    padding: 1em;
    opacity: 0;
    transition: all .3s ease;
}

div.overlaysidebarvisible {
    right: 1rem;
    opacity: 1;
}


/*
    Error text
*/

#grapherrortext {
    width: 50em;
    padding: 1em;
}

    #grapherrortext > ul {
        color: darkred;
    }

    #grapherrortext > h1 {
        font-size: medium;
        color: darkred;
    }

/* 
 *  GRID LINES
 */
.hourline {
    stroke: #ccc;
    stroke-width: 0.15rem;
    stroke-opacity: 0.65;
}

.nowline {
    stroke: #0000e0;
    stroke-width: 0.15rem;
    stroke-opacity: 0.65;
}

.leftgutter {
    stroke: gray;
}

.stationline {
    stroke: #ccc;
}

/*
 * AXIS TEXT ANNOTATIONS
 */

.stationname {
    font-size: 85%;
}

.stationkm {
    font-size: 60%;
}


/*
 * TRAIN GRAPH LINES
 */

path.train {
    fill: none;
    stroke: black;
    stroke-width: 0.15rem;
    transition: stroke-width 0.15s linear 0s;
    stroke-opacity: 0.5;
}

path.traintimetable {
    stroke: black;
}

path.trainhover {
    stroke-width: 1.5rem;
    pointer-events: stroke;
    opacity: 0;
}

path.trainplanned {
    stroke: #e00000;
    stroke-dasharray: 1.2rem 0.3rem;
    stroke-width: 0.25rem;
}

path.trainactual {
    stroke: #e00000;
}

/*
 * TRAIN GRAPH TEXT ANNOTATIONS
 */

.traintime, .trainnumber {
    font-size: 85%;
}

    text.traintime.trainactual, text.traintime.trainplanned,
    .trainnumber.trainplanned, .trainnumber.trainactual {
        fill: #e00000;
    }

.trainnumber {
    baseline-shift: 2px;
}

text.traintime {
    pointer-events: none;
}

    text.traintime.traintimetable {
        alignment-baseline: baseline;
    }

.delayoverrideline {
    fill: none;
    stroke: purple;
    stroke-width: 0.25rem;
    stroke-dasharray: 0.35rem;
}

.latetrainarrivalline {
    fill: none;
    stroke: red;
    stroke-width: 0.15rem;
}

.firstarrivalarrow {
    stroke-dasharray: 0;
    stroke-width: 0.4rem;
}


/* VISIT TOOL TIP*/

li.vognopptak {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style: square;
}

ul.vognopptak {
    margin: 0;
    margin-left: 1em;
    
    padding: 0;
    padding-left: 1em;
    list-style: square;
}

div.vognopptak{
    margin:0 ;
    padding: 0;
    margin-top: 0.5em;
}