styles.css

html, body, svg#main {
    width:100%;
    height: 100%;
    margin:0;
    padding: 0;
    overflow: hidden;
    font-family:'Roboto', sans-serif;
}

.view .frame {
    fill: white !important;
}

#controls {
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    text-align: right;
    /*opacity: 0.2;*/
}

#controls:hover {
    opacity:1;
}

#controls label {
    margin-right:10px;
}

.view .frame {
    stroke:grey;
    stroke-width:1px;
    fill: transparent;
}

.axis {
    font-size: 11px;
    fill: #444444;
}

.axis path,
.axis line {
    fill: none;
    stroke: #444444;
    shape-rendering: crispEdges; 
}

.highlighted {
    fill:#ff1902 !important;
}

path.highlighted {
    stroke-width: 2px !important;
    stroke:#ff1902 !important;
    fill:initial !important;
}

path.highlighted.secondary-highlight {
    stroke:#ff6474 !important;
}

.highlighted.secondary-highlight {
    fill:#ff7494 !important;
    /*#00FFFA*/
}


.hover-rect {
    stroke: lightgrey;
    fill:none;
    shape-rendering: crispEdges;
}

.data-item {
    opacity:0.6;
}

/* list view */

text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* brushes */

.brush .extent {
    stroke: #333;
    fill: transparent;
    shape-rendering: crispEdges;
}

.brush.active .background {
    pointer-events: none;
}

.brush.ready .background {
    pointer-events: all;
}

.brush .resize .handle {
    fill:none;
    stroke:#999;
    shape-rendering: crispEdges;
}


/* brush menus */

.brush-menus.ready {
    display:none;
}

.brush-menus.active {
    display:inline;
    pointer-events: all;
}

.brush-menus.ready .close-button {
    display:none;
}

.brush-menus.active .close-button {
    display:inline;
    opacity: 0.5;
    cursor: default;
}

.brush-menus.active .close-button:hover {
    opacity:0.8;
}

.brush-menus path.menu-segment, .brush-menus .trigger {
    fill: #efefef;
    stroke: lightgray;
}

.brush-menus {
    opacity: 0.8;
}

.brush-menus .trigger-icon {
    fill:transparent;
}

.brush-menus .link-menu-icon .point {
    stroke: none !important;
    fill: lightgrey !important;
}

.brush-menus .menu-icon, .brush-menus .trigger-icon {
    pointer-events: none;
    stroke:grey;
    stroke-dasharray: 1;
}

.brush-menus .menu-icon-label {
    pointer-events: none;
}

.menu-segment-container .menu-subsegment {
    fill: #efefef;
    stroke: none;
}

.menu-segment-container .menu-subsegment.toggle-active {
    fill:lightgrey;
}

.fill.menu-segment-container .menu-subsegment {
    fill: url(#noContentPattern);
}

.source-menu .stroke.menu-segment-container .menu-subsegment,
.target-menu .stroke.menu-segment-container .menu-subsegment {
    stroke:lightgrey;
    stroke-width: 1.5;
    stroke-dasharray:1;
}