/*! JointJS v0.9.6 - JavaScript diagramming library  2015-12-19 


This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

.viewport {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

[magnet=true]:not(.element) {
    cursor: crosshair
}

[magnet=true]:not(.element):hover {
    opacity: .7
}

.element {
    cursor: move
}

.element * {
    vector-effect: non-scaling-stroke;
    user-drag: none
}

.connection-wrap {
    fill: none;
    //stroke: #000;
    //stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    cursor: move
}

.connection-wrap:hover {
    opacity: .4;
    stroke-opacity: .4
}

.connection {
    fill: none;
    stroke-linejoin: round
}

.marker-source,
.marker-target {
    vector-effect: non-scaling-stroke
}

.marker-vertices {
    opacity: 0;
    cursor: move
}

.marker-arrowheads {
    opacity: 0;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab
}

.link-tools {
    opacity: 0;
    cursor: pointer
}

.link-tools .tool-options {
    display: none
}

.link-tools .tool-remove circle {
    fill: red
}

.link-tools .tool-remove path {
    fill: #fff
}

.link:hover .marker-vertices,
.link:hover .marker-arrowheads,
.link:hover .link-tools {
    opacity: 1
}

.marker-vertex {
    fill: #1ABC9C
}

.marker-vertex:hover {
    fill: #34495E;
    stroke: none
}

.marker-arrowhead {
    fill: #1ABC9C
}

.marker-arrowhead:hover {
    fill: #F39C12;
    stroke: none
}

.marker-vertex-remove {
    cursor: pointer;
    opacity: .1;
    fill: #fff
}

.marker-vertex-group:hover .marker-vertex-remove {
    opacity: 1
}

.marker-vertex-remove-area {
    opacity: .1;
    cursor: pointer
}

.marker-vertex-group:hover .marker-vertex-remove-area {
    opacity: 1
}

.highlighted {
    opacity: .7
}

text.highlighted {
    fill: red
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .highlighted {
        outline: 2px solid red;
        opacity: initial
    }
}

.element .fobj {
    overflow: hidden
}

.element .fobj body {
    background-color: transparent;
    margin: 0
}

.element .fobj div {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    padding: 0 5px
}