/**
 * outline styles
 */
.djs-outline {
  fill: none;
  visibility: hidden;
}

.djs-group.hover .djs-outline,
.djs-group.selected .djs-outline {
  visibility: visible;
  stroke-dasharray: 2,4;
}

.djs-group.selected .djs-outline {
  stroke: blue;
  stroke-width: 1px;
}

.djs-group.hover .djs-outline {
  stroke: red;
  stroke-width: 1px;
}

.djs-group.drop-ok .djs-visual {
  fill: green;
}

.djs-group.drop-not-ok .djs-visual {
  fill: red;
}

/**
 * drag styles
 */
.djs-dragger {
  fill: white;
  opacity: 0.3;
  stroke: #333;
  stroke-dasharray: 2,1;
}

.djs-shape.djs-dragging {
  visibility: hidden;
}

/**
 * hit shape styles
 */
.djs-hit {
  stroke-opacity: 0.0;
  stroke-width: 10px;
  fill: none;
}

/**
 * shape / connection basic styles
 */
.djs-shape .djs-visual { }

.djs-connection .djs-visual {
  stroke-width: 2px;
  fill: none;
}

.djs-connection .djs-bendpoint {
  visibility: hidden;
}

.djs-connection:hover .djs-bendpoint {
  visibility: visible;
}

.djs-connection .djs-bendpoint:hover {
  stroke: #CCC;
  stroke-width: 1px;
  fill: yellow;
}