@visuallyjs/browser-ui 1.0.0

package/css/visuallyjs.css

@@ -0,0 +1,1879 @@
+@charset "UTF-8";
+/**
+  Index file for VisuallyJs CSS generation.
+ */
+/**
+    Core default styles for VisuallyJs UI
+
+    Copyright 2025 https://visuallyjs.com
+*/
+:root {
+  --vjs-blue:#4d7be2;
+  --vjs-red:#b13c4d;
+  --vjs-color-primary:var(--vjs-blue);
+  --vjs-color-delete:var(--vjs-red);
+  --vjs-color-edit:var(--vjs-blue);
+  --vjs-editor-handle-background:var(--vjs-color-edit);
+  --vjs-highlight-color: #6c9c0a;
+  --vjs-selected-element-border-color: var(--vjs-color-edit);
+  --vjs-elastic-group-resize-background: #4ea75866;
+  --vjs-elastic-group-resize-outline: 2px solid var(--vjs-color-edit);
+  --vjs-default-vertex-border: 1px solid;
+  --vjs-default-vertex-border-radius: 3px;
+  --vjs-size-default-node-width: 120px;
+  --vjs-size-default-node-height: 80px;
+  --vjs-size-default-group-width: 300px;
+  --vjs-size-default-group-height: 300px;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     SURFACE COMPONENT                                                              */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+/**
+    When using an HTML container this rule - and the vjs-tools-layer rule below - ensure that the
+    vertex layer stays below the tools layer.
+ */
+.vjs-vertex-layer {
+  z-index: 0;
+  position: absolute;
+}
+
+/**
+    When using an HTML container this rule - and the vjs-vertex-layer rule above - ensure that the
+    vertex layer stays below the tools layer.
+ */
+.vjs-tools-layer {
+  z-index: 1;
+  position: absolute;
+}
+
+/*
+    Assigned to SVG elements for edges. This style allows overlays to paint outside the bounds, and
+    for arbitrary stroke widths for connectors.
+ */
+.vjs-connector {
+  overflow: visible;
+  cursor: pointer;
+}
+
+/*
+    Assigned to every Node managed by an instance of VisuallyJs. They are required to be positioned absolute, to
+    enable dragging to work properly. We set a `move` cursor on nodes as we assume they are, by default, draggable.
+    There are a couple of rules below which reset the cursor in the event that the node is not draggable.
+*/
+.vjs-node {
+  position: absolute;
+  box-sizing: border-box;
+  cursor: move;
+}
+
+/**
+    Assigned to nodes when the node root is an SVG element.
+ */
+svg.vjs-node {
+  overflow: visible;
+}
+
+/*
+    Assigned to every Group managed by an instance of VisuallyJs. They are required to be positioned absolute, to
+    enable dragging to work properly. We set overflow:visible on Group elements too, as a drag outside of the bounds
+    is automatically reverted anyway, and without overflow:visible you cannot drag a node to some other element. You can
+    also drag a node out of the element's viewport and if you drop it you can never get it back. We set a `move` cursor on
+    groups as we assume they are, by default, draggable. There are a couple of rules below which reset the cursor in the
+    event that the node is not draggable.
+*/
+.vjs-group {
+  position: absolute;
+  overflow: visible;
+  box-sizing: border-box;
+  cursor: move;
+}
+
+/**
+* Set cursor to default when a node/group has the not draggable attribute set, or when the surface has written the not
+* draggable attribute to its container
+*/
+.vjs-node[data-vjs-not-draggable=true],
+.vjs-node[data-vjs-not-draggable=true],
+.vjs-surface[data-vjs-elements-draggable=false] .vjs-node,
+.vjs-surface[data-vjs-elements-draggable=false] .vjs-group {
+  cursor: default;
+}
+
+/**
+    Set overflow:visible for SVG groups.
+ */
+.vjs-group {
+  /*
+    This is the attribute used to mark which part of a Group DOM element should contain the child vertices. We mark it
+    as having `position:relative` so that the absolute positioned vertices are drawn correctly. This
+    has no effect if the group is an SVG element.
+  */
+}
+.vjs-group svg {
+  overflow: visible;
+}
+.vjs-group [data-vjs-group-content] {
+  position: relative;
+}
+.vjs-group [data-vjs-collapsed-content] {
+  display: none;
+}
+.vjs-group.vjs-group-collapsed {
+  /*
+      Default behaviour for collapsed group is to hide the vertices and content area.
+  */
+}
+.vjs-group.vjs-group-collapsed [data-vjs-managed], .vjs-group.vjs-group-collapsed [data-vjs-group-content], .vjs-group.vjs-group-collapsed [data-vjs-expanded-content] {
+  display: none;
+}
+.vjs-group.vjs-group-collapsed [data-vjs-collapsed-content] {
+  display: block;
+}
+
+/**
+  Styles for default node/group (ie. when no template or component is mapped and VisuallyJs uses a default representation).
+ */
+/*
+ Basic styles for the case that no component/template was provided for a node.
+ */
+.vjs-default-node {
+  width: var(--vjs-size-default-node-width);
+  height: var(--vjs-size-default-node-height);
+  border: var(--vjs-default-vertex-border);
+  border-radius: var(--vjs-default-vertex-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ Basic styles for the case that no component/template was provided for a group.
+ */
+.vjs-default-group {
+  width: var(--vjs-size-default-group-width);
+  height: var(--vjs-size-default-group-height);
+  border: var(--vjs-default-vertex-border);
+  border-radius: var(--vjs-default-vertex-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+    Default behaviour for children of a collapsed group - hide them.
+ */
+[data-vjs-group].vjs-group-collapsed [data-vjs-managed] {
+  display: none;
+}
+
+/**
+  Resize frame for elastic groups.
+ */
+.vjs-surface-elastic-group-resize {
+  position: absolute;
+  stroke: var(--vjs-elastic-group-resize-outline);
+  fill: var(--vjs-elastic-group-resize-background);
+  box-sizing: border-box;
+  stroke-width: 2px;
+}
+
+/**
+    Assigned to shapes drawn by a shape library. This rule allows us to be agnostic of the stroke width.
+ */
+.vjs-shape {
+  overflow: visible;
+}
+
+/*
+* Assigned by the UI to an element that represents a dummy vertex (such as is used
+ * for a edge with source and/or target that is not attached to a vertex)
+ */
+.vjs-dummy-vertex {
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+/*
+    This style was created in response to this Chrome bug:
+    http://stackoverflow.com/questions/13758215/artifacts-when-css-scaled-in-chrome
+
+    Basically it's about how sometimes there can be artifacts left on screen when the user drags an element. It seems
+    the issue has been fixed in more recent versions of Chrome, but the style is left here in case you come across
+    the problem.
+*/
+.vjs-node.vjs-drag {
+  /*-webkit-backface-visibility: hidden;*/
+}
+
+/*
+    Suppresses the pointer events on an element that was created by Katavorio in response to a drag in which the element
+    should first be cloned. Having this clone ignore pointer events means there is less chance that any other
+    mouse activity (such as click) on the original element will not be consumed by katavorio.
+ */
+.katavorio-clone-drag {
+  pointer-events: none;
+  margin: 0 !important;
+}
+
+/*
+    Assigned to an element that is the `Container` in a `render` call.
+    Elements that are acting as Surface widgets should have overflow:hidden set to prevent libs from
+    scrolling them during drag (we don't want scrollbars; we have an infinite canvas). Position is set to
+    `relative` as this is the parent for nodes, which are positioned absolute (and for absolute positioning
+    to work, you need to ensure the parent node has `position:relative`). This style also sets some default
+    values for the cursor - using a `grab` cursor where supported.
+*/
+.vjs-surface {
+  overflow: hidden !important;
+  position: relative;
+  cursor: move;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  /**
+    When an edge is being dragged, change the canvas cursor to default.
+  */
+  /*
+      For IE10+. As discussed on this page:
+
+      https://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
+
+      Microsoft have very helpfully implemented default behaviours for a bunch of touch events and
+      then consumed the events so you don't have to be bothered by them. They've "done a lot of research"
+      about this stuff and put together a really great default experience for everyone in the entire world.
+  */
+  touch-action: none;
+  /*
+      Another Chrome issue that appears to have been fixed in later versions
+      http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome
+  */
+  /*
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateZ(0) scale(1.0, 1.0);
+  */
+}
+.vjs-surface.vjs-surface-edge-dragging {
+  cursor: default;
+}
+
+/**
+* Assigned to a Surface element when direct rendering is switched on - no pan or zoom, the underlying canvas scaled to fit its contents at zoom:1.
+ */
+.vjs-surface-direct-render {
+  overflow: hidden !important;
+}
+
+/*
+    Assigned to the surface when it is being panned. The default is to change the cursor (in browsers that support
+    a `grabbing` cursor), and to disable text selection.
+*/
+.vjs-surface-panning {
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/*
+    The work area in a surface renderer.
+*/
+.vjs-surface-canvas {
+  overflow: visible !important;
+}
+
+/*
+    Assigned to a Surface widget when panning is disabled (and therefore the app is relying on scrollbars when the content overflows).
+*/
+.vjs-surface-nopan {
+  overflow: scroll !important;
+  cursor: default;
+}
+
+/* ################################################################# */
+/*                                                                   */
+/*                           EDGES                                   */
+/* ################################################################  */
+/**
+  Assigned to the elements with which a user can drag an edge by its
+  source or target
+ */
+.vjs-connector-source-drag,
+.vjs-connector-target-drag {
+  fill: transparent;
+  stroke: none;
+  stroke-width: 1;
+  cursor: move;
+}
+
+/**
+ Hover style for connection source/target drag
+ */
+.vjs-connector-source-drag:hover,
+.vjs-connector-target-drag:hover {
+  /*fill:whitesmoke;*/
+}
+
+/**
+ Assigned to the temporary DOM element used when relocating an
+ existing edge via the mouse/touch events.
+ */
+.vjs-connector-transient-drag {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  position: absolute;
+}
+
+/**
+  Disable pointer events for new edges and edges that are being relocated.
+ */
+.vjs-connector-transient *, .vjs-edge-relocating * {
+  pointer-events: none;
+}
+
+/*
+    Assigned to some edge that has been selected. Only valid for when its an HTML container, because then we use
+    SVG elements. This class on a G (as used in a Diagram) does not show the dimensions properly.
+*/
+svg.vjs-selected-connection {
+  outline: 1px dashed var(--vjs-selected-element-border-color);
+  outline-offset: 5px;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     OVERLAYS                                                                       */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+/**
+    When label overlays have a blank label we set visibility to hidden
+    rather than toggling `display`, because we want the dimensions of the element still to be considered.
+ */
+.vjs-label-overlay:empty {
+  visibility: hidden;
+}
+
+.vjs-overlay-hide {
+  display: none !important;
+}
+
+/* #################################################################### */
+/*                  Vertex flash                                        */
+/* #################################################################### */
+/**
+Keyframes for the vertex flash. This animation is called by name by the surface.
+ *
+@keyframes jtk-flash-vertex {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}*/
+@keyframes vjs-flash-vertex {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+/**
+This class is assigned to an element while it is being flashed.
+ */
+.vjs-surface-element-flash {
+  background-color: pink;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     LASSO PLUGIN                                                                   */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-lasso-border: rgb(49, 119, 184);
+  --vjs-lasso-background: WhiteSmoke;
+  --vjs-lasso-mask: #07234e;
+}
+
+/*
+    Assigned to the element used for node select with the mouse ("lasso").
+*/
+.vjs-lasso {
+  border: 2px solid var(--vjs-lasso-border);
+  background-color: var(--vjs-lasso-background);
+  opacity: 0.5;
+  display: none;
+  z-index: 20000;
+  position: absolute;
+}
+
+/*
+    This class is added to the document body on lasso drag start and removed at the end of lasso dragging. Its purpose
+    is to switch off text selection on all elements while the user is dragging the lasso.
+*/
+.vjs-lasso-select-defeat * {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/**
+    Added to the lasso mask when it is operating in 'inverted' mode, ie. the excluded parts of the UI are covered, rather
+    than the normal mode in which the selected parts of the UI are covered.
+*/
+.vjs-lasso-mask {
+  position: fixed;
+  z-index: 20000;
+  display: none;
+  opacity: 0.5;
+  background-color: var(--vjs-lasso-mask);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     PAN BUTTONS PLUGIN                                                             */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-surface-pan-background: #c8cece;
+  --vjs-surface-pan-hover-background: rgb(49, 119, 184);
+  --vjs-surface-pan-hover-foreground: white;
+  --vjs-surface-pan-active-background: var(--vjs-highlight-color);
+}
+
+/*
+    Assigned to all pan buttons in a surface widget.
+*/
+.vjs-surface-pan {
+  background-color: var(--vjs-surface-pan-background);
+  opacity: 0.4;
+  text-align: center;
+  cursor: pointer;
+  z-index: 2;
+  -webkit-transition: background-color 0.15s ease-in;
+  -moz-transition: background-color 0.15s ease-in;
+  -o-transition: background-color 0.15s ease-in;
+  transition: background-color 0.15s ease-in;
+}
+
+/*
+    Specific styles for the top and bottom pan buttons.
+    Top/bottom are 100% width and 20px high by default
+*/
+.vjs-surface-pan-top,
+.vjs-surface-pan-bottom {
+  width: 100%;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+/*
+    Hover styles for all pan buttons.
+    On hover, change color, background color, font weight and opacity.
+*/
+.vjs-surface-pan-top:hover,
+.vjs-surface-pan-bottom:hover,
+.vjs-surface-pan-left:hover,
+.vjs-surface-pan-right:hover {
+  opacity: 0.6;
+  background-color: var(--vjs-surface-pan-hover-background);
+  color: var(--vjs-surface-pan-hover-foreground);
+  font-weight: bold;
+}
+
+/*
+    Specific styles for the left and right pan buttons.
+    Left/right pan buttons are 100% height and 20px wide
+*/
+.vjs-surface-pan-left,
+.vjs-surface-pan-right {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/*
+    Assigned to a pan button when the user is pressing it.
+*/
+.vjs-surface-pan-active,
+.vjs-surface-pan-active:hover {
+  background-color: var(--vjs-surface-pan-active-background);
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     MINIVIEW PLUGIN                                                                */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-miniview-background: white;
+  --vjs-miniview-border: 2px solid #d4d8dc;
+  --vjs-miniview-panner-border: 5px dotted WhiteSmoke;
+  --vjs-miniview-panner-background: rgb(178, 203, 215);
+  --vjs-miniview-element-background: rgb(96, 122, 134);
+  --vjs-miniview-group-element-border: 3px solid black;
+  --vjs-miniview-collapse-color: WhiteSmoke;
+  --vjs-miniview-collapsed-background: #449ea6;
+  --vjs-miniview-collapsed-hover: #e4f013;
+}
+
+/*
+    Assigned to an element that is acting as a Miniview.
+    As with Surface, Miniview elements should have overflow:hidden set to prevent
+    libs from scrolling them during drag. This style also provides a default width/height for a miniview,
+    which you may wish to override.
+*/
+.vjs-miniview {
+  overflow: hidden !important;
+  width: 125px;
+  height: 125px;
+  background-color: var(--vjs-miniview-background);
+  border: var(--vjs-miniview-border);
+  border-radius: 4px;
+  opacity: 0.8;
+  position: absolute;
+}
+
+/*
+    Assigned to the element that shows the size of the related viewport in a Miniview widget, and which can be dragged to
+    move the surface.
+*/
+.vjs-miniview-panner {
+  border: var(--vjs-miniview-panner-border);
+  opacity: 0.4;
+  background-color: var(--vjs-miniview-panner-background);
+  cursor: move;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+
+/*
+    Assigned to the miniview's panner when it is being dragged.
+*/
+.vjs-miniview-panning {
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+
+/*
+    Added to all elements displayed in a miniview.
+*/
+.vjs-miniview-element {
+  background-color: var(--vjs-miniview-element-background);
+  position: absolute;
+}
+
+/*
+    Added to Group elements displayed in a miniview
+*/
+.vjs-miniview-group-element {
+  background: transparent;
+  border: var(--vjs-miniview-group-element-border);
+}
+
+/*
+    Assigned to the collapse/expand miniview button
+*/
+.vjs-miniview-collapse {
+  color: var(--vjs-miniview-collapse-color);
+  position: absolute;
+  font-size: 18px;
+  top: -1px;
+  right: 3px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+/*
+    The '-' symbol when the miniview is expanded
+*/
+.vjs-miniview-collapse:before {
+  content: "‒";
+}
+
+/*
+    Assigned to the miniview element when it is collapsed.
+*/
+.vjs-miniview-collapsed {
+  background-color: var(--vjs-miniview-collapsed-background);
+  border-radius: 4px;
+  height: 22px;
+  margin-right: 0;
+  padding: 4px;
+  width: 21px;
+}
+
+/*
+    Hide all children of the miniview (except the expand button) when it is collapsed so you don't see anything
+    poking through under the + icon.
+*/
+.vjs-miniview-collapsed .vjs-miniview-element,
+.vjs-miniview-collapsed .vjs-miniview-panner {
+  visibility: hidden;
+}
+
+/*
+    The '+' symbol when the miniview is collapsed.
+*/
+.vjs-miniview-collapsed .vjs-miniview-collapse:before {
+  content: "+";
+}
+
+/*
+    Hover state for the collapse/expand icon.
+*/
+.vjs-miniview-collapse:hover {
+  color: var(--vjs-miniview-collapsed-hover);
+}
+
+/**
+When clickToCenter is true on the miniview, set a pointer cursor on miniview elements to indicate they can be clicked.
+ */
+.vjs-miniview-click-to-center .vjs-miniview-element {
+  cursor: pointer;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     RESIZING TOOLS PLUGIN                                                           */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-resize-handle-color: var(--vjs-color-edit);
+  --vjs-resize-active-color: #5f9ea0;
+  --vjs-resize-handle-size: 1rem;
+  --vjs-resize-border-size: 0.6rem;
+  --vjs-resize-rotate-leader-length:48px;
+  --vjs-resize-rotate-leader-width:2px;
+  --vjs-resize-rotate-handle-size:20px;
+}
+
+/**
+Assigned to the element that is the parent of the tools on some vertex.
+ */
+/**
+Assigned to the skeleton element when a resize is active.
+ */
+.vjs-resize-active {
+  --vjs-resize-handle-color:var(--vjs-resize-active-color);
+}
+
+/*
+    Assigned to the element that is drawn around some other element when a resize operation is taking place
+*/
+.vjs-resize-frame {
+  stroke-width: var(--vjs-resize-rotate-leader-width);
+  fill: none;
+  stroke: var(--vjs-resize-handle-color);
+}
+
+/*
+    Assigned to every handle (top left, top right, bottom left, bottom right, center) in a resize skeleton.
+*/
+.vjs-resize-handle {
+  pointer-events: all;
+  cursor: pointer;
+  fill: white;
+  stroke: var(--vjs-resize-handle-color);
+  stroke-width: 2px;
+  transition: fill 0.2s;
+  /*
+    On hover, fill the shape
+   */
+}
+.vjs-resize-handle:hover {
+  fill: var(--vjs-resize-handle-color);
+}
+
+/*
+    Assigned to a handle when it is in use. By default we fill the shape, same effect as hover.
+*/
+.vjs-resize-handle-active {
+  fill: var(--vjs-resize-handle-color);
+}
+
+/*
+    Assigned to the top left handle in a draw skeleton
+*/
+.vjs-resize-handle-tl {
+  cursor: nw-resize;
+}
+
+/*
+    Assigned to the top right handle in a draw skeleton,
+    both svg and divs.
+*/
+.vjs-resize-handle-tr {
+  cursor: ne-resize;
+}
+
+/*
+    Assigned to the bottom left handle in a draw skeleton
+*/
+.vjs-resize-handle-bl {
+  cursor: sw-resize;
+}
+
+/*
+    Assigned to the bottom right handle in a draw skeleton
+*/
+.vjs-resize-handle-br {
+  cursor: se-resize;
+}
+
+/**
+  Assigned to the handle with which a user can rotate an element.
+ */
+.vjs-rotate-handle {
+  left: 50%;
+  top: calc(-1 * var(--vjs-resize-rotate-leader-length));
+  stroke: var(--vjs-resize-handle-color);
+  stroke-width: var(--vjs-resize-rotate-leader-width);
+  fill: var(--vjs-resize-handle-color);
+  pointer-events: all;
+  cursor: move;
+}
+.vjs-rotate-handle + text {
+  fill: white;
+  dominant-baseline: middle;
+  text-anchor: middle;
+  pointer-events: none;
+}
+
+/**
+  Assigned to the leader line that visibly connects the rotate handle with an element.
+ */
+.vjs-rotate-leader {
+  /*left: 50%;
+  top: calc(-1*var(--vjs-resize-rotate-leader-length));*/
+  fill: var(--vjs-resize-handle-color);
+  stroke: var(--vjs-resize-handle-color);
+  stroke-width: var(--vjs-resize-rotate-leader-width);
+}
+
+/**
+    Temporarily assigned during certain resize operations.
+ */
+.vjs-resize-anim {
+  transition-property: transform, width, height;
+  transition-duration: 0.2s;
+}
+
+/*
+    This class is added to the document body on drag resize start and removed at the end of resizing. Its purpose
+    is to switch off text selection on all elements while the user is resizing an element.
+*/
+.vjs-drag-select-defeat * {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.vjs-resize-skeleton-borders {
+  /**
+  * Assigned to all border drag handles.
+   */
+  /**
+  * Assigned to the left edge border drag handle
+   */
+  /**
+  * Assigned to the right edge border drag handle
+   */
+  /**
+  * Assigned to the top edge border drag handle
+   */
+  /**
+  * Assigned to the bottom edge border drag handle
+   */
+}
+.vjs-resize-skeleton-borders .vjs-resize-border {
+  pointer-events: all;
+  fill: transparent;
+}
+.vjs-resize-skeleton-borders .vjs-resize-border-l {
+  cursor: w-resize;
+}
+.vjs-resize-skeleton-borders .vjs-resize-border-r {
+  cursor: e-resize;
+}
+.vjs-resize-skeleton-borders .vjs-resize-border-t {
+  cursor: n-resize;
+}
+.vjs-resize-skeleton-borders .vjs-resize-border-b {
+  cursor: s-resize;
+}
+.vjs-resize-skeleton-borders.vjs-resize-skeleton-borders-visible .vjs-resize-border {
+  fill: var(--vjs-resize-handle-color);
+  opacity: 0.6;
+}
+.vjs-resize-skeleton-borders.vjs-resize-skeleton-borders-visible .vjs-resize-border:hover {
+  opacity: 0.9;
+}
+
+.vjs-cell-tool {
+  color: black;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  transform-origin: center;
+}
+
+.vjs-cell-tool:hover {
+  color: var(--vjs-color-primary);
+  transform: scale(1.15);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.vjs-delete-cell:hover {
+  color: var(--vjs-color-delete);
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     SNAPLINES PLUGIN                                                               */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-color-snapline: yellowgreen;
+  --vjs-color-snapline-exact: red;
+  --vjs-snapline-size: 1px;
+  --vjs-color-snapline-active: yellowgreen;
+}
+
+.vjs-snapline {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--vjs-color-snapline);
+}
+
+rect.vjs-snapline {
+  fill: var(--vjs-color-snapline-active);
+}
+
+.vjs-snapline-exact {
+  background: var(--vjs-color-snapline-exact);
+}
+
+rect.vjs-snapline-exact {
+  fill: var(--vjs-color-snapline-exact);
+}
+
+.vjs-snapline-vertical {
+  top: 0;
+  bottom: 0;
+  width: var(--vjs-snapline-size);
+  transform: translateX(-50%);
+}
+
+.vjs-snapline-horizontal {
+  left: 0;
+  right: 0;
+  height: var(--vjs-snapline-size);
+  transform: translateY(-50%);
+}
+
+.vjs-snapline-active {
+  outline: 1px var(--vjs-color-snapline-active);
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                           GENERATED GRID BACKGROUND PLUGIN                                                         */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-grid-lines-color: lightgray;
+}
+
+/**
+    Assigned to the `rect` element that draws the generated grid's border, if requested.
+ */
+.vjs-background-border {
+  stroke: black;
+  stroke-width: 5;
+}
+
+/**
+    Assigned to both the major grid lines and the minor grid lines.
+ */
+.vjs-background-grid {
+  fill: none;
+  stroke: var(--vjs-grid-lines-color);
+}
+
+/**
+    Assigned to the lines marking grid tick marks (when using GridTypes.lines)
+ */
+.vjs-background-grid-minor {
+  fill: none;
+  stroke: var(--vjs-grid-lines-color);
+  stroke-width: 0.25px;
+}
+
+/**
+    Assigned to the major grid lines (when using GridTypes.lines)
+ */
+.vjs-background-grid-major {
+  fill: none;
+  stroke: var(--vjs-grid-lines-color);
+  stroke-width: 0.5px;
+}
+
+/**
+    Assigned to the dots marking grid positions (when using GridTypes.dotted)
+ */
+.vjs-background-grid-dotted-major {
+  fill: var(--vjs-grid-lines-color);
+  stroke: none;
+}
+
+/**
+    Assigned to the dots marking grid tick marks (when using GridTypes.dotted)
+ */
+.vjs-background-grid-dotted-minor {
+  fill: var(--vjs-grid-lines-color);
+  stroke: none;
+}
+
+/** -------------------------------------- */
+/*     tiled background plugin ----------- */
+/* --------------------------------------- */
+/*
+Assigned to tile images in a tiled background
+*/
+.vjs-surface-tile {
+  border: none;
+  outline: none;
+  margin: 0;
+  -webkit-transition: opacity 0.3s ease 0.15s;
+  -moz-transition: opacity 0.3s ease 0.15s;
+  -o-transition: opacity 0.3s ease 0.15s;
+  -ms-transition: opacity 0.3s ease 0.15s;
+  transition: opacity 0.3s ease 0.15s;
+}
+
+.vjs-vertex-drawing-lasso {
+  outline-offset: 10px;
+  outline: 2px dashed var(--vjs-resize-handle-color);
+  opacity: 1;
+}
+
+:root {
+  --vjs-export-underlay-bg-color:#bfbfbf;
+  --vjs-export-overlay-bg-color:#ffffff;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     SVG/PNG/JPG Export                                                             */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+.vjs-export-underlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  opacity: 0.9;
+  background-color: var(--vjs-export-underlay-bg-color);
+}
+
+.vjs-export-overlay {
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 80%;
+  position: fixed;
+  width: 80%;
+  left: 50%;
+  margin-left: -40%;
+  top: 10%;
+  height: 70%;
+  background-color: var(--vjs-export-overlay-bg-color);
+  padding: 1rem;
+  border-radius: 5px;
+  box-shadow: 0 0 10px #847a6a;
+}
+
+.vjs-export-overlay > svg {
+  max-width: 100%;
+}
+
+.vjs-export-cancel {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+  cursor: pointer;
+}
+.vjs-export-cancel:after {
+  content: "✖";
+}
+.vjs-export-cancel:hover {
+  color: orangered;
+}
+
+.vjs-export-download-tools * {
+  margin: 0.25rem;
+  padding: 0.25rem;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     SHAPE LIBRARY PALETTE                                                          */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+.vjs-shape-library-palette .vjs-shape-library-palette-shape {
+  display: flex;
+  flex-direction: column;
+  width: 3rem;
+  margin: 0.25rem;
+  cursor: move;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-shape svg * {
+  vector-effect: non-scaling-stroke;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-label {
+  font-size: 11px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  margin-top: 3px;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-filter {
+  width: 90%;
+  padding: 3px;
+  margin: 0 0 1rem 0;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-set {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 1rem 0;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-set[data-visible=false] {
+  display: none;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-set .vjs-shape-library-palette-set-shapes {
+  display: flex;
+  flex-wrap: wrap;
+}
+.vjs-shape-library-palette .vjs-shape-library-palette-set-title {
+  margin: 0.5rem 0;
+  background-color: #ddd;
+  padding: 0.25rem;
+  width: 90%;
+  display: none;
+}
+.vjs-shape-library-palette[data-show-all=true] .vjs-shape-library-palette-set {
+  display: flex;
+}
+.vjs-shape-library-palette[data-show-all=true] .vjs-shape-library-palette-set .vjs-shape-library-palette-filter {
+  display: none;
+}
+
+.vjs-shape-library-palette-filter[data-show-all=true] ~ .vjs-shape-library-palette-set .vjs-shape-library-palette-set-title {
+  display: block;
+}
+
+/**
+    Default styles for the lasso used by the shape library palette when in
+    'tap' mode and users can draw new vertices on the canvas.  These two rules
+    override the default lasso styles declared above.
+ */
+.vjs-shape-library-palette-lasso {
+  background-color: transparent;
+  border: none;
+}
+
+/**
+    Defaults for SVG elements being drawn by a vertex drawing plugin used by a shape
+    library palette.
+ */
+.vjs-shape-library-palette-lasso > svg {
+  fill: #ffffff;
+  stroke: #000000;
+  stroke-width: 2;
+}
+
+/*
+This rule is scoped at the root level so that it applies to shapes that are inside a
+palette and also those that are being dragged and are a child of the body at that
+point.
+ */
+.vjs-shape-library-palette-shape {
+  /**
+      Assigned to shapes drawn by a shape library palette. We set a default fill of none, a default
+      stroke, and we set overflow:visible, to allow for variable stroke-width, although we set a default of 1px.
+   */
+}
+.vjs-shape-library-palette-shape svg {
+  overflow: visible;
+  vector-effect: non-scaling-stroke;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     EDGE PATH EDITORS                                                              */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+/* ----------------------------------- Styles for connector paths when editing -------------------------------------- */
+:root {
+  --vjs-edge-handle-bg: var(--vjs-editor-handle-background);
+  --vjs-edge-handle-size: 20px;
+  --vjs-edge-handle-font-size: 13px;
+  --vjs-edge-handle-fg: #000000;
+  --vjs-edge-delete-handle-bg: var(--vjs-color-delete);
+  --vjs-edge-delete-handle-fg: white;
+  --vjs-edge-handle-shadow: 0 0 5px;
+  --vjs-edge-handle-hover-bg: #2b55b2;
+  --vjs-edge-move-icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOTYgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDk2IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik03Myw0OC40bC0xMC40LTkuNnY0LjhINTIuNFYzMy40aDQuOEw0Ny42LDIzbC04LjksMTAuNGg0Ljh2MTAuMkgzMy40di00LjhMMjMsNDguNGwxMC40LDguOXYtNC44aDEwLjJ2MTAuMmgtNC44TDQ3LjYsNzMNCgkJbDkuNi0xMC40aC00LjhWNTIuNGgxMC4ydjQuOEw3Myw0OC40eiIvPg0KPC9nPg0KPC9zdmc+DQo=);
+  --vjs-edge-handle-z-index: 10;
+  --vjs-edge-split-icon: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB2aWV3Qm94PSIwIDAgMzgwLjYyMSAzODAuNjIiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zODAuNjIxLDEwNi45NTVsLTkuNzE2LTAuNjA3YzAsMC03Ny4wNjgsMjQuNDE3LTEzNC4xOTMsNDIuODMyYy00LjI4NSwxMi43OTItOC4xODYsMjQuMzQ3LTExLjMwMywzMy40MzINCgkJCUwzODAuNjIxLDEwNi45NTV6Ii8+DQoJCTxwYXRoIGQ9Ik0xNzYuNjA0LDE2OS4wODljLTQ3LjgzLDE1LjI0NS05NS4zNS01LjgzOC05OC43NDItNy4zOTJjLTE0LjE1OS04Ljg2My0zMy41MTktOS4zNjUtNTAuMTQyLTAuNTI1DQoJCQljLTExLjUzNyw2LjExOS0yMC4zLDE1Ljg2OS0yNC43MTQsMjcuNDNjLTQuNTMxLDExLjg5OS0zLjkyNCwyNC4zLDEuNzEsMzQuODkxYzEuODE2LDMuNDIyLDQuMTEsNi41NTEsNi44MjUsOS4zMTgNCgkJCWMxNC4xNDcsMTQuMzYzLDM3Ljg4LDE3LjA0OSw1Ny42OTcsNi41MTZjMC4wNy0wLjAzNCwwLjE0LTAuMDkzLDAuMjI4LTAuMTRjLTAuMDk5LDAuMTg3LTAuMTQ2LDAuMjgtMC4xNDYsMC4yOGwxMjMuMjQ2LTYwLjIwNw0KCQkJbDAuMDcsMC4wMjlsLTQuNjcxLTE0LjIxN0MxODEuNjI1LDE2Ny4xOTcsMTc3LjUzOCwxNjguNjM0LDE3Ni42MDQsMTY5LjA4OXogTTYyLjUxOSwyMjYuNjY5DQoJCQljLTE0LjI1Miw3LjU5LTMxLjAzMiw1Ljk3OS00MC43NjUtMy45MjRjLTEuNzMzLTEuNzYzLTMuMjE3LTMuNzcxLTQuMzczLTUuOTc5Yy0zLjY3Mi02Ljg5LTQuMDA1LTE1LjA4Ny0wLjk2OS0yMy4wNzQNCgkJCWMzLjE3LTguMzIsOS41NjMtMTUuMzczLDE4LjAyOS0xOS44NjljMTQuMjctNy41NzMsMzEuMDIxLTUuOTY3LDQwLjc1MywzLjkxN2MxLjc0NiwxLjc3NSwzLjIxNywzLjc4NCw0LjM4NSw1Ljk3OQ0KCQkJYzMuNjYxLDYuOTAxLDQuMDExLDE1LjA4NiwwLjk4MSwyMy4wNzRDNzcuMzk1LDIxNS4xMDgsNzAuOTg0LDIyMi4xNjIsNjIuNTE5LDIyNi42Njl6Ii8+DQoJCTxwYXRoIGQ9Ik0yMTUuNDI0LDM1My4zNDJjOS41NC0xNi44MDMsOS4zNDItMzYuNjMxLDAuMjU3LTUxLjEzNGMtMi4xNDgtNS4yMi0yMC4yNDItNTEuNTc3LTQuMDUyLTk3LjkxMw0KCQkJYzMuNjA4LTcuMDA2LDY1LjE4Mi0xOTQuMzAxLDY1LjE4Mi0xOTQuMzAxbC0wLjc0OC05LjIzbC04Mi4yNjUsMTYyLjY2OGw4LjA4MSwyNC42MzNsLTYyLjA0NiwxMTkuMzQNCgkJCWMtMC40NjcsMC43Ni0wLjk2OSwxLjQ5NC0xLjQwNywyLjI1NGMtMTEuMjA0LDE5Ljc0Ni05LjA0NCw0My42ODQsNS4yNjEsNTguMjFsMCwwYzIuNTkyLDIuNjQsNS41NDcsNC45MDUsOC43NjQsNi43MjYNCgkJCWMxMC40MzksNS45MzMsMjIuOCw2Ljg3OSwzNC44MzMsMi42ODdDMTk4Ljk4OSwzNzMuMjE3LDIwOC45NzksMzY0LjcxNiwyMTUuNDI0LDM1My4zNDJ6IE0yMDQuNzYzLDE3MS4yMTQNCgkJCWMtMi45MzEtMi45NzgtMi44ODQtNy43NDgsMC4wODItMTAuNjljMi45NzgtMi45MjUsNy43NjUtMi44OSwxMC42OTYsMC4wODdjMi45MzEsMi45NzgsMi44OTYsNy43Ni0wLjA4MiwxMC42OQ0KCQkJQzIxMi40ODIsMTc0LjIyNywyMDcuNjk0LDE3NC4xOTIsMjA0Ljc2MywxNzEuMjE0eiBNMTgyLjU4MywzNjMuNzU4Yy04LjA2OSwyLjgwMy0xNi4yNDksMi4yNDItMjMuMDQ1LTEuNjExDQoJCQljLTIuMDU1LTEuMTgtMy45NTMtMi42MzktNS42MTYtNC4zMmMtOS44MzMtOS45OTYtMTEuMDc2LTI2Ljg4MS0zLjAxMy00MS4wOTJjNC43MzQtOC4zMjYsMTEuOTU3LTE0LjUzOCwyMC4zNzYtMTcuNDY5DQoJCQljOC4wNTgtMi44MTQsMTYuMjM3LTIuMjU0LDIzLjAyNywxLjYyM2MyLjA2NywxLjE4LDMuOTcxLDIuNjE1LDUuNjM0LDQuMzA5YzkuODI3LDkuOTg0LDExLjA3NiwyNi44ODEsMy4wMTMsNDEuMDkyDQoJCQlDMTk4LjIxMiwzNTQuNjE1LDE5MC45NzgsMzYwLjgxNSwxODIuNTgzLDM2My43NTh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+);
+  --vjs-edge-delete-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiIHZlcnNpb249IjEuMSI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxOTcuNDIzNzMsMTI1NS4wNTA4KSI+CiAgICAgICAgPHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik0gNTEyLDgwMCBWIDIyNCBxIDAsLTE0IC05LC0yMyAtOSwtOSAtMjMsLTkgaCAtNjQgcSAtMTQsMCAtMjMsOSAtOSw5IC05LDIzIHYgNTc2IHEgMCwxNCA5LDIzIDksOSAyMyw5IGggNjQgcSAxNCwwIDIzLC05IDksLTkgOSwtMjMgeiBtIDI1NiwwIFYgMjI0IHEgMCwtMTQgLTksLTIzIC05LC05IC0yMywtOSBoIC02NCBxIC0xNCwwIC0yMyw5IC05LDkgLTksMjMgdiA1NzYgcSAwLDE0IDksMjMgOSw5IDIzLDkgaCA2NCBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6IG0gMjU2LDAgViAyMjQgcSAwLC0xNCAtOSwtMjMgLTksLTkgLTIzLC05IGggLTY0IHEgLTE0LDAgLTIzLDkgLTksOSAtOSwyMyB2IDU3NiBxIDAsMTQgOSwyMyA5LDkgMjMsOSBoIDY0IHEgMTQsMCAyMywtOSA5LC05IDksLTIzIHogTSAxMTUyLDc2IHYgOTQ4IEggMjU2IFYgNzYgUSAyNTYsNTQgMjYzLDM1LjUgMjcwLDE3IDI3Ny41LDguNSAyODUsMCAyODgsMCBoIDgzMiBxIDMsMCAxMC41LDguNSA3LjUsOC41IDE0LjUsMjcgNywxOC41IDcsNDAuNSB6IE0gNDgwLDExNTIgaCA0NDggbCAtNDgsMTE3IHEgLTcsOSAtMTcsMTEgSCA1NDYgcSAtMTAsLTIgLTE3LC0xMSB6IG0gOTI4LC0zMiB2IC02NCBxIDAsLTE0IC05LC0yMyAtOSwtOSAtMjMsLTkgaCAtOTYgViA3NiBxIDAsLTgzIC00NywtMTQzLjUgLTQ3LC02MC41IC0xMTMsLTYwLjUgSCAyODggcSAtNjYsMCAtMTEzLDU4LjUgUSAxMjgsLTExIDEyOCw3MiB2IDk1MiBIIDMyIHEgLTE0LDAgLTIzLDkgLTksOSAtOSwyMyB2IDY0IHEgMCwxNCA5LDIzIDksOSAyMyw5IGggMzA5IGwgNzAsMTY3IHEgMTUsMzcgNTQsNjMgMzksMjYgNzksMjYgaCAzMjAgcSA0MCwwIDc5LC0yNiAzOSwtMjYgNTQsLTYzIGwgNzAsLTE2NyBoIDMwOSBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
+  --vjs-bezier-edge-handle-bg:var(--vjs-edge-handle-bg);
+  --vjs-anchor-handle-bg:var(--vjs-edge-handle-bg);
+  --vjs-anchor-placeholder-bg:var(--vjs-edge-handle-bg);
+}
+
+/*
+    `vjs-connection-edit` is a class set on an edge that is being edited. We don't set a default for this.
+    Note that the class is set on the parent SVG element, not the path element.
+*/
+/* --------------------------------- Common handle styles for edge editors ------------------------------------------ */
+.vjs-edge-handle {
+  position: absolute;
+  fill: var(--vjs-edge-handle-bg);
+  border-radius: 50%;
+  font-size: var(--vjs-edge-handle-font-size);
+  z-index: var(--vjs-edge-handle-z-index);
+  color: var(--vjs-edge-handle-fg);
+  opacity: 0.95;
+}
+.vjs-edge-handle text {
+  fill: white;
+  dominant-baseline: middle;
+  text-anchor: middle;
+  pointer-events: none;
+  font-size: 11px;
+}
+
+.vjs-edge-guideline {
+  position: absolute;
+  fill: none;
+  stroke: var(--vjs-bezier-edge-handle-bg);
+  stroke-dasharray: 2;
+  overflow: visible;
+}
+
+/* ----------------------------------------- Orthogonal edge editor --------------------------------------------------*/
+.vjs-orthogonal-handle {
+  cursor: move;
+}
+.vjs-orthogonal-handle text {
+  fill: white;
+  dominant-baseline: central;
+  text-anchor: middle;
+  pointer-events: none;
+}
+
+.vjs-orthogonal-segment-drag {
+  cursor: move;
+  cursor: grab;
+}
+
+.vjs-orthogonal-segment-drag-ns {
+  cursor: ns-resize;
+}
+
+.vjs-orthogonal-segment-drag-ew {
+  cursor: ew-resize;
+}
+.vjs-orthogonal-segment-drag-ew text {
+  dominant-baseline: middle;
+}
+
+.vjs-orthogonal-segment-drag:hover {
+  fill: var(--vjs-edge-handle-hover-bg);
+}
+
+/* --------------------------    Cubic/Quadratic Bezier edge editor ------------------------------------------------- */
+/*#
+    Identifies a handle used to drag a control point. From 7.0.0 there are no specific styles for this - see .vjs-edge-handle.
+*
+svg.vjs-bezier-handle, circle.vjs-bezier-handle {
+    fill:var(--vjs-bezier-edge-handle-bg);
+}*/
+/**
+    Common class applied to all control points
+ */
+/*
+    The drag handle corresponding to the first control point. For StateMachine connectors only this handle is shown.
+
+.vjs-bezier-handle-control-point-1:before {
+    content: "1";
+}*?
+
+/*
+    The drag handle corresponding to the second control point. For StateMachine connectors only this handle is shown.
+
+.vjs-bezier-handle-control-point-2:before {
+    content: "2";
+}
+
+.vjs-bezier-handle-control-point-3:before {
+    content: "3";
+}
+
+.vjs-bezier-handle-control-point-4:before {
+    content: "4";
+}*/
+.vjs-bezier-handle-secondary {
+  cursor: default;
+  fill: lightgreen;
+}
+
+.vjs-bezier-handle-secondary-source {
+  fill: lavenderblush;
+}
+
+/**
+Added to the guidelines by the bezier editor. No specific styles here. See .vjs-edge-guideline
+ */
+/* ---------------------------------------- Straight connector editor ----------------------------------------------- */
+.vjs-straight-handle {
+  /* &:hover {
+       fill:white;
+
+       text {
+           fill:var(--vjs-edge-handle-bg);
+       }
+   }*/
+}
+.vjs-straight-handle text {
+  fill: white;
+  dominant-baseline: middle;
+  text-anchor: middle;
+  pointer-events: none;
+  font-size: 11px;
+}
+
+.vjs-straight-segment-drag {
+  cursor: move;
+  width: 16px;
+  height: 16px;
+}
+.vjs-straight-segment-drag text {
+  stroke-width: 0.35px;
+  font-size: 11px;
+}
+
+.vjs-straight-segment-split {
+  width: 10px;
+  height: 10px;
+  fill: var(--vjs-edge-handle-bg);
+  /*background-color: var(--vjs-edge-handle-bg);
+  background-image: var(--vjs-edge-split-icon);*/
+  cursor: pointer;
+}
+
+.vjs-straight-segment-delete {
+  width: 10px;
+  height: 10px;
+  fill: var(--vjs-edge-delete-handle-bg);
+  /*background-color: var(--vjs-edge-delete-handle-bg);
+  background-image: var(--vjs-edge-delete-icon);*/
+  cursor: pointer;
+  /* &:hover {
+       fill:white;
+
+       text {
+           fill: var(--vjs-edge-delete-handle-bg);
+       }
+   }*/
+}
+.vjs-straight-segment-delete text {
+  font-size: 7px;
+  dominant-baseline: central;
+}
+
+/**
+    No specific styles for this - see .vjs-edge-guideline
+ */
+/**
+Path elements in "auto split" mode are assigned this css class, and we apply a
+'cell' cursor to them.
+ */
+.vjs-straight-connector-edit path {
+  cursor: cell;
+}
+
+/* ----------------------------------  Edge editor anchor placeholders ---------------------------------------------- */
+/*
+    Added to the element placed at the location of an anchor for a connection that is being edited. This applies
+    to both dynamic and continuous anchors. Fixed anchors cannot be relocated.
+*/
+.vjs-anchor-placeholder {
+  cursor: move;
+  cursor: grab;
+  fill: var(--vjs-anchor-handle-bg);
+  opacity: 0.95;
+  z-index: 10;
+}
+
+.vjs-continuous-anchor-placeholder {
+  fill: var(--vjs-anchor-handle-bg);
+  opacity: 0.95;
+  z-index: 10;
+  pointer-events: none;
+}
+
+/*
+    Added to the elements drawn to show where a certain anchor may be relocated to, when using
+    an anchor that has multiple allowed positions.
+*/
+.vjs-anchor-candidate {
+  fill: var(--vjs-anchor-placeholder-bg);
+}
+
+/* --------------------------- Edge delete button ------------------------------------------------------------------- */
+.vjs-edge-delete {
+  fill: #000000;
+  font-size: 11px;
+  cursor: pointer;
+}
+.vjs-edge-delete rect {
+  fill: #ffffff;
+}
+.vjs-edge-delete:hover {
+  fill: var(--vjs-color-delete);
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     DIALOGS                                                                        */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-color-dialog-underlay: #ccc;
+  --vjs-color-dialog-overlay-bg: white;
+}
+
+/*
+    This is the element that acts as the dialog underlay - the modal "mask". Note the high z-index default
+    set here (and note also the overlay style below has a z-index with a value higher by one).
+*/
+.vjs-dialog-underlay {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: fixed;
+  z-index: 100000;
+  opacity: 0.8;
+  background-color: var(--vjs-color-dialog-underlay);
+  display: none;
+}
+
+/*
+    This is the element that acts as the parent for dialog content.
+*/
+.vjs-dialog-overlay {
+  position: fixed;
+  z-index: 100001;
+  display: none;
+  background-color: var(--vjs-color-dialog-overlay-bg);
+  padding: 9px;
+  box-shadow: 0 0 5px grey;
+  overflow: hidden;
+  border-radius: 3px;
+}
+
+.vjs-dialog-overlay-x {
+  max-height: 0;
+  transition: max-height 0.5s ease-in;
+  -moz-transition: max-height 0.5s ease-in;
+  -ms-transition: max-height 0.5s ease-in;
+  -o-transition: max-height 0.5s ease-in;
+  -webkit-transition: max-height 0.5s ease-in;
+}
+
+.vjs-dialog-overlay-y {
+  max-width: 0;
+  transition: max-width 0.5s ease-in;
+  -moz-transition: max-width 0.5s ease-in;
+  -ms-transition: max-width 0.5s ease-in;
+  -o-transition: max-width 0.5s ease-in;
+  -webkit-transition: max-width 0.5s ease-in;
+}
+
+.vjs-dialog-overlay-top {
+  top: 20px;
+}
+
+.vjs-dialog-overlay-bottom {
+  bottom: 20px;
+}
+
+.vjs-dialog-overlay-left {
+  left: 20px;
+}
+
+.vjs-dialog-overlay-right {
+  right: 20px;
+}
+
+.vjs-dialog-overlay-x.vjs-dialog-overlay-visible {
+  max-height: 1000px;
+}
+
+.vjs-dialog-overlay-y.vjs-dialog-overlay-visible {
+  max-width: 1000px;
+}
+
+/*
+    The element containing buttons in a dialog.
+*/
+.vjs-dialog-buttons {
+  text-align: right;
+  margin-top: 7px;
+  /*
+      An individual button in a dialog.
+  */
+}
+.vjs-dialog-buttons .vjs-dialog-button {
+  cursor: pointer;
+  margin-right: 5px;
+  min-width: 56px;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 4px;
+  outline: none;
+  /*
+      Hover style for an individual button in a dialog.
+  */
+}
+.vjs-dialog-buttons .vjs-dialog-button:hover {
+  color: white;
+  background-color: #5184a0;
+  border-color: white;
+}
+
+/*
+    The titlebar of a dialog.
+*/
+.vjs-dialog-title {
+  text-align: left;
+  font-size: 14px;
+  margin-bottom: 9px;
+}
+
+.vjs-dialog-content {
+  font-size: 12px;
+  text-align: left;
+  min-width: 250px;
+  margin: 0 14px;
+}
+.vjs-dialog-content ul {
+  width: 100%;
+  padding-left: 0;
+}
+.vjs-dialog-content label {
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+.vjs-dialog-overlay input,
+.vjs-dialog-overlay textarea {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  color: #333;
+  font-size: 14px;
+  font-style: normal;
+  outline: none;
+  padding: 6px 4px;
+  margin-right: 6px;
+}
+
+.vjs-dialog-overlay input:focus,
+.vjs-dialog-overlay textarea:focus {
+  background-color: #f1f5fb;
+  border: 1px solid #5184a0;
+  color: #333;
+  font-size: 14px;
+  font-style: normal;
+  outline: none;
+}
+
+.vjs-paper {
+  position: relative;
+  overflow: hidden !important;
+}
+.vjs-paper .vjs-paper-canvas {
+  position: absolute;
+}
+.vjs-paper .vjs-paper-canvas .vjs-node {
+  cursor: default;
+}
+.vjs-paper .vjs-paper-canvas .vjs-group {
+  cursor: default;
+}
+
+.vjs-palette-selected-element {
+  outline: 1px dashed var(--vjs-selected-element-border-color);
+  outline-offset: 2px;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     CONTROLS / EXPORT CONTROLS                                                     */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+:root {
+  --vjs-controls-text-color: var(--vjs-color-primary);
+  --vjs-controls-background-color: #ffffff;
+  --vjs-controls-hover-background-color: #f67545;
+  --vjs-controls-active-background-color: #1d9ea0;
+  --vjs-controls-undo-redo-disabled: #e0e0e0;
+  --vjs-controls-button-border: 1px solid !important;
+  --vjs-controls-selected-mode-background-color: var(
+      --vjs-controls-hover-background-color
+  );
+  --vjs-controls-selected-mode-color: var(--vjs-controls-background-color);
+  --vjs-controls-font-size: 24px;
+  --vjs-controls-border-radius: 3px;
+  --vjs-controls-button-margin: 4px;
+}
+
+/**
+  Default styles for the controls component. We specify position:absolute on this class
+  because more often than not the controls component is inside the surface element,
+  and elements inside the surface element that are not positioned absolute can mess with
+  the maths that maps page locations to canvas locations.
+ */
+.vjs-controls {
+  color: var(--vjs-controls-text-color);
+  display: flex;
+  font-size: var(--vjs-controls-font-size);
+  align-items: center;
+  position: absolute;
+}
+
+.vjs-controls i {
+  background-color: var(--vjs-controls-background-color);
+  border-radius: var(--vjs-controls-border-radius);
+  cursor: pointer;
+  margin-right: var(--vjs-controls-button-margin);
+  border: var(--vjs-controls-button-border);
+  font-style: normal;
+  width: var(--vjs-controls-font-size);
+  height: var(--vjs-controls-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vjs-controls[data-vjs-orientation=column] {
+  flex-direction: column;
+}
+
+.vjs-controls[data-vjs-orientation=column] i {
+  margin-right: unset;
+  margin-bottom: var(--vjs-controls-button-margin);
+}
+
+.vjs-controls i.vjs-selected-mode {
+  background-color: var(--vjs-controls-selected-mode-background-color);
+  color: var(--vjs-controls-selected-mode-color);
+  border-color: var(--vjs-controls-selected-mode-background-color);
+}
+
+.vjs-controls i:not(.vjs-selected-mode):hover {
+  background-color: var(--vjs-controls-hover-background-color);
+  color: var(--vjs-controls-background-color);
+  border: var(--vjs-controls-button-border);
+  border-color: var(--vjs-controls-hover-background-color);
+}
+
+.vjs-controls i:not(.vjs-selected-mode):active {
+  color: var(--vjs-controls-background-color);
+  background-color: var(--vjs-controls-active-background-color);
+  border: var(--vjs-controls-button-border);
+}
+
+.vjs-controls[can-undo=false] [data-undo],
+.vjs-controls[can-redo=false] [data-redo] {
+  background-color: var(--vjs-controls-undo-redo-disabled) !important;
+  color: var(--vjs-controls-background-color) !important;
+  border: var(--vjs-controls-button-border);
+  border-color: var(--vjs-controls-undo-redo-disabled) !important;
+  cursor: default;
+}
+
+.vjs-controls .vjs-add-vertex:after {
+  content: "+";
+  margin-bottom: 0.2rem;
+}
+
+.vjs-controls i svg {
+  width: 80%;
+  stroke: currentColor;
+}
+
+.vjs-controls .vjs-drawing-mode:after {
+  content: "✎";
+}
+
+.vjs-controls .vjs-undo:after {
+  content: "↺";
+  margin-bottom: 0.4rem;
+}
+
+.vjs-controls .vjs-redo:after {
+  content: "↻";
+  margin-bottom: 0.4rem;
+}
+
+/**
+  Reset selection button not visible by default
+ */
+.vjs-controls-reset-selection {
+  display: none !important;
+}
+
+/**
+  Show reset selection button when something is selected
+ */
+[vjs-controls-has-selection=true] .vjs-controls-reset-selection {
+  display: flex !important;
+}
+
+/* ---export controls -- */
+.vjs-export-controls {
+  font-size: 11px;
+}
+.vjs-export-controls > span {
+  white-space: nowrap;
+  margin: 0 0.25rem;
+}
+
+.vjs-export-controls a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     EDGE TYPE PICKER                                                               */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+.vjs-edge-type-picker {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.vjs-edge-type-picker > div {
+  margin: 3px auto;
+  height: 1.5rem;
+  width: 90%;
+  position: relative;
+}
+.vjs-edge-type-picker > div > div {
+  position: absolute;
+  inset: 0;
+}
+.vjs-edge-type-picker > div > div > svg {
+  position: absolute;
+  inset: 0;
+  top: 50%;
+}
+
+.vjs-edge-type-picker > svg {
+  z-index: 1;
+}
+
+.vjs-edge-type-picker-selected {
+  background-color: #f7f7f7;
+}
+
+.vjs-edge-type-picker div.vjs-overlay {
+  position: absolute;
+}
+
+.vjs-inspector-active .vjs-inspector-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  font-size: 16px;
+  cursor: pointer;
+}
+.vjs-inspector-active .vjs-inspector-close:after {
+  content: "✖";
+}
+
+.vjs-color-picker input[type=color] {
+  width: 100%;
+}
+.vjs-color-picker .vjs-color-picker-swatches {
+  margin: 0.25rem 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.vjs-color-picker .vjs-color-picker-swatches .vjs-color-picker-swatch {
+  width: 15px;
+  height: 15px;
+  margin: 1px;
+  cursor: pointer;
+  border-radius: 50%;
+  border: 1px solid black;
+}
+
+.vjs-chart-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.vjs-chart-subtitle {
+  font-size: 0.95rem;
+}
+
+.vjs-chart-series {
+  transition: opacity 0.2s;
+}
+
+.vjs-chart-series[data-vjs-filter=true] {
+  opacity: 0.2;
+}
+
+.vjs-chart-point {
+  cursor: pointer;
+}
+.vjs-chart-point:hover {
+  filter: saturate(1.8);
+}
+
+.vjs-chart-legend-item:hover {
+  cursor: pointer;
+}
+
+.vjs-chart-crosshair {
+  opacity: 0.8;
+}
+
+.vjs-chart-crosshair-value-axis {
+  fill: #444444;
+}
+
+.vjs-chart-crosshair-category-axis {
+  fill: #AAAAAA;
+}
+
+.vjs-bar-chart-bar {
+  cursor: pointer;
+}
+
+/**
+Applies an animation when the slice is selected/deselected
+ */
+.vjs-pie-slice {
+  transition: transform 0.5s;
+}
+
+.vjs-chart-point-hit-area {
+  fill: transparent;
+  stroke: none;
+  cursor: pointer;
+}
+
+.vjs-bubble-chart-point {
+  opacity: 0.8;
+}
+
+.vjs-sankey-edge {
+  opacity: 0.4;
+}
+
+/**
+  Assigned to sankey edges/nodes whenever they are not part of the currently selected set
+ */
+.vjs-sankey-unselected {
+  filter: grayscale(1);
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     REACT nodes/groups                                                             */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+/**
+  Assigned to a surface in the React integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-react-surface {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+  Assigned to a diagram in the React integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-react-diagram {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+  Assigned to a Paper in the React integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-react-paper {
+  width: 100%;
+  height: 100%;
+}
+
+/* ################################################################################################################## */
+/*                                                                                                                    */
+/*                                     VUE nodes/groups                                                             */
+/*                                                                                                                    */
+/* ################################################################################################################## */
+/**
+  Assigned to a surface in the Vue integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-vue-surface {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+  Assigned to a diagram in the Vue integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-vue-diagram {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+  Assigned to a Paper in the Vue integration. We set the width and height of the element so that it fills its parent.
+ */
+.vjs-vue-paper {
+  width: 100%;
+  height: 100%;
+}