* {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    font-family: arial, sans-serif;
    font-size: 10px;
}

body {
    margin: 0;
    background-color: white;/*#fdf6e3;*/ /*#eee8d5;*/ /*#002b36*/
}

path {
    fill: none;
    stroke: grey;
    /*pointer-events: none*/
}

div#background {


/*
    background-color: #fafafa;
*/


}

@media screen and (max-device-width: 1025px) {

    /* iOS rAF is choppy with the current setup (30/15FPS?) */

    .scrollingChart {
        transition: -webkit-transform 16ms linear;
    }
    .stoppedChart {
        transition: -webkit-transform 16ms linear;
    }
}

.moving-canvas {
    border-left: 1px solid blue;
    border-right: 1px dotted blue;
}

/*
.panel {
    opacity: 0.1;
}
*/

.fadingIn {
    opacity: 0.99; /* debug - this shows if element accidentally stays*/
    transition: opacity 0ms linear;
}

.fadingOut {
    opacity: 0.1; /* debug - this shows if element accidentally stays*/
    transition: opacity 500ms linear 5s;
}

.movingBackground {
    opacity: 0.0;
}

line.border {
    stroke: red;
    stroke-width: 2px;
    fill: none;
}

.panelBox {
    fill: none;
    stroke: black;
    stroke-width: 1px;
    stroke-opacity: 0.1;
}

.tick>line {
    stroke: black;
    opacity: 0.5;
}

.tick:nth-child(5n+1)>line {
    stroke-width: 3px;
}

.tick>text {
    fill-opacity: 0.5
}

.tick:nth-child(5n+1)>text {
    font-weight: bold;
}

.path { stroke-opacity: 1}

.categorical0 {stroke:rgb(166,206,227); stroke-width: 5px; }
.categorical1 {stroke:rgb(31,120,180)}
.categorical2 {stroke:rgb(178,223,138)}
.categorical3 {stroke:rgb(51,160,44)}
.categorical4 {stroke:red;stroke-width: 0.5px}