html,body{height:100%}body{display:flex;justify-content:center;align-items:center;margin:0;overflow-y:hidden}.connection{stroke:#999}.connection-wrap{stroke-linecap:butt;transition:all .5s linear .2s}.connection-wrap:hover{stroke:#000;stroke-width:9px;transition:all 0s}.link-tools .tool-remove circle{fill:#fff;stroke:#ccc;stroke-width:1px;stroke-opacity:.5}.link-tools .tool-remove:hover circle{fill:#e74c3c;stroke:#c0392b}.link-tools .tool-remove path{stroke:#ccc}.link-tools .tool-remove circle{transition:fill 1s}.link-tools .tool-remove:hover path{stroke:none}.marker-arrowhead,.marker-vertex{fill:#fff;stroke:#7f8c8d;stroke-opacity:.4;stroke-width:2px}.marker-arrowhead:hover,.marker-vertex:hover{fill:#ecf0f1;stroke:#bdc3c7}.marker-vertex-remove-area{fill:#fff;stroke:#ccc;stroke-opacity:.5}.marker-vertex-remove-group:hover .marker-vertex-remove-area{transition:fill 1s;fill:#e74c3c;stroke:#c0392b}.marker-vertex-remove{stroke:#eee}.marker-vertex-remove-group:hover .marker-vertex-remove{stroke:none}.joint-element .highlighted{outline:none;fill:#ecf0f1;stroke:#bdc3c7;cursor:crosshair}.joint-element .body{fill:#68ddd5;stroke:#44ccc3;stroke-opacity:.5;transition:all .2s}.joint-element circle{fill:#fff;stroke:#7f8c8d;stroke-opacity:.5;stroke-width:2px}.joint-element text{fill:#fff}.joint-link.live>[joint-selector=line]{stroke:#7c68fc;stroke-width:3px}.live [joint-selector=line]{stroke:#7c68fd}.joint-element.live .body{fill:#feb662;stroke:#cf9452}.joint-element.live text{fill:#fff}.wire{stroke:#4b4f6a}