/* main container */
#graph-view{
    overflow: hidden;
    position: relative;
    height: inherit;
    width: inherit;
}

svg{
    height: inherit;
    width: 100%;
}

#graph-summary-el{
    z-index: 10;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    position: absolute;
    text-align: center;
    pointer-events: none;
    background-color: #F7F7F7;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 5px 5px 0 0;
    left: 1em;
    padding: 0.8em;
    right: 1em;
    line-height: 1.3em;
    display: none;
}

#graph-summary-el h1{
    pointer-events: none;
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 0.2em 0;
}

#graph-summary-el ul{
    margin: 0;
    list-style: none;
}

#graph-summary-el li{
    margin-top: 0.1em;
    font-size: 0.9em;
    font-style: italic;
}

/* Zoom In / Zoom Out */
#graph-zoom-div{
    position: absolute;
    z-index: 10;
    top: 1.5em;
    right: 1.5em;
    border: 1px solid #8A8484;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    background: white;
    overflow: hidden;
}

.graph-zoom-in-button, .graph-zoom-out-button{
    display: block;
    font-size: 1.2em;
    padding: 3px;
    margin: 0;
    width: 1.4em;
    line-height: 1.2em;
    border: none;
    text-align: center;
    background: inherit;
    cursor: pointer;
    color: #8A8484;
    outline: none;
}

.graph-zoom-in-button{
    border-bottom: 1px solid;
}

.graph-zoom-in-button:hover, .graph-zoom-out-button:hover{
    color: #333;
    font-weight: bold;
}

/* Concept Gs */
.concept-g{
    cursor: default;
}

.concept-g text{
    pointer-events: none;
    font-family: "Lato", Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    stroke-width: 0;
    fill: #333
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.concept-g.reduce-node-title text{
    font-size: 0.6em;
}

.concept-g circle{
    stroke: #333333;
    stroke-width: 1.5px;
    fill: #F6FBFF; /* light shade of alice blue see http://encycolorpedia.com/f6fbff for color scheme */
}

.concept-g:hover circle{
    fill: #ECF6FF;
}

.selected circle{
    fill: rgb(250, 232, 255);
}
.selected:hover circle{
    fill: rgb(250, 232, 255);
}


/* Path Gs */
marker{
    fill: #333;
}

path.link.hidden{
    stroke-width: 0;
}

.selected path.link {
    stroke: rgb(229, 172, 247);
}


path.link {
    fill: transparent;
    stroke: #333;
    stroke-width: 2px;
    cursor: default;
}

path.link-wrapper, path.short-link-wrapper{
    fill: none;
    stroke: #8282e5;
    stroke-width: 24px;
    opacity: 0;
}

path.link-wrapper:hover{
    opacity: 0.15;
}

.dep-icon-g rect, .ol-icon-g rect{
    fill: #333;
    stroke-width: 0;
    stroke: #333;
    display: none;
}
.dep-icon-g rect:hover, .ol-icon-g rect:hover{
    stroke-width: 5px;
}

.hovered .dep-icon-g rect, .hovered .ol-icon-g rect {
    display: block;
}

.dep-icon-g polygon, .ol-icon-g polygon{
    stroke-width: 0px;
    stroke: #333;
    fill: #333;
}
.dep-icon-g polygon:hover, .ol-icon-g polygon:hover{
    stroke-width: 3px;
}


/* dep and ol circles */
.concept-g .ol-circle{
    fill: #fbeded;
}
.concept-g .dep-circle{
    fill: #e6e6fa;
}

.scoped .concept-g .ol-circle{
    fill: #F6FBFF; /* light shade of alice blue see http://encycolorpedia.com/f6fbff for color scheme */
}
.scoped .concept-g .dep-circle{
    fill: #F6FBFF; /* light shade of alice blue see http://encycolorpedia.com/f6fbff for color scheme */
}

g.concept-g.scoped-circle-g > circle, g.concept-g.scoped-circle-g .dep-circle, g.concept-g.scoped-circle-g .ol-circle, g.concept-g.focused-circle-g > circle{
    fill: rgb(255, 244, 253);
}

/* (long) edges */
.start-wisp, .end-wisp{
    fill: none;
    stroke: #333;
    stroke-width: 2px;
}

.link-wrapper-hover .start-wisp, .link-wrapper-hover .end-wisp{
    display: none;
}

.long-edge{
    display: none;
}

.link-wrapper-hover path{
    display: block;
}

.link-wrapper-hover path.link-wrapper{
    opacity: 0.15;
}

.ol-show path.link-wrapper{
    stroke: #e48989;
}

.scoped .link-wrapper-hover path.link-wrapper{
    opacity: 0;
}


@media only screen and (max-width: 350px){
    #graph-summary-el{
        opacity: 0;
    }
}
