body {
    background: #aaeeaa;
}

.node,.root {
    cursor: pointer;
}

.node use {
    fill: #fff;
}
.node.collapsed use {
    fill: steelblue;
}

.node text {
    font: 10px sans-serif;
}

.node .label:hover {
    fill: blue;
}

.node .label.hide {
    visibility: hidden;
}
.node .synonyms.hide {
    visibility: hidden;
}

.node:hover .label.hide {
    visibility: visible;
}
.node:hover .synonyms.hide {
    visibility: visible;
}

.link {
    fill: none;
    stroke: #111;
    /* stroke-width: 1px; */
}

#compact_node, #normal_node circle {
    /* fill: #fff; */
    stroke: #111;
    /* stroke-width: 1px; */
}

.syn rect {
    fill: #fff;
    stroke: #360000;
}
#page {
    position: relative;
    overflow: auto;
    flex: 3 3 auto;
}


#graph {
    position: relative;
    background: #f0ffe0;
    /* flex: 0 0 auto; */
    flex-basis: 50%;
    /* width: 60%; */
    /* flex-grow: 3; */
}

input#page_show, input#page_hide {
    display: none;
}
input#page_show:checked ~ div#page {
    display: block;
}
input#page_hide:checked ~ div#page {
    display: none;
}
.resizer {
    position: relative;
    width: 1px;
    margin-left: 4px;
    margin-right: 4px;
    height: 100%;
    cursor: col-resize;
    /* background-color: #d7f2c9; */
    border-color: #d7f2c9;
    border-width: 1px;
    border-style: inset;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    opacity: 0.2;
    display: none;
}

#background {
    position: absolute;
    z-index: 0;
    top: 1em;
    left: 1em;
}
#background > p {
    color: lightgrey;
    font-size: 3em;
    text-align: center;
    margin: 0;
    /* transform:rotate(300deg); */
}