:root {
  --dfBackgroundColor: #ffffff;
  --dfBackgroundSize: 0px;
  --dfBackgroundImage: none;

  --dfNodeType: flex;
  --dfNodeTypeFloat: none;
  --dfNodeBackgroundColor: #ffffff;
  --dfNodeTextColor: #000000;
  --dfNodeBorderSize: 2px;
  --dfNodeBorderColor: #000000;
  --dfNodeBorderRadius: 4px;
  --dfNodeMinHeight: 50px;
  --dfNodeMinWidth: 200px;
  --dfNodePaddingTop: 5px;
  --dfNodePaddingBottom: 5px;
  --dfNodeBoxShadowHL: 0px;
  --dfNodeBoxShadowVL: 0px;
  --dfNodeBoxShadowBR: 0px;
  --dfNodeBoxShadowS: 0px;
  --dfNodeBoxShadowColor: #000000;

  --dfNodeHoverBackgroundColor: #ffffff;
  --dfNodeHoverTextColor: #000000;
  --dfNodeHoverBorderSize: 2px;
  --dfNodeHoverBorderColor: #000000;
  --dfNodeHoverBorderRadius: 4px;

  --dfNodeHoverBoxShadowHL: 0px;
  --dfNodeHoverBoxShadowVL: 0px;
  --dfNodeHoverBoxShadowBR: 0px;
  --dfNodeHoverBoxShadowS: 0px;
  --dfNodeHoverBoxShadowColor: rgba(78, 169, 255, 0);

  --dfNodeSelectedBackgroundColor: rgba(255, 255, 255, 1);
  --dfNodeSelectedTextColor: rgba(0, 0, 0, 1);
  --dfNodeSelectedBorderSize: 2px;
  --dfNodeSelectedBorderColor: rgba(67, 185, 147, 1);
  --dfNodeSelectedBorderRadius: 4px;

  --dfNodeSelectedBoxShadowHL: 0px;
  --dfNodeSelectedBoxShadowVL: 0px;
  --dfNodeSelectedBoxShadowBR: 0px;
  --dfNodeSelectedBoxShadowS: 0px;
  --dfNodeSelectedBoxShadowColor: rgba(255, 255, 255, 0);

  --dfInputBackgroundColor: rgba(0, 0, 0, 1);
  --dfInputBorderSize: 2px;
  --dfInputBorderColor: #000000;
  --dfInputBorderRadius: 50px;
  --dfInputLeft: 0px;
  --dfInputHeight: 20px;
  --dfInputWidth: 20px;

  --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
  --dfInputHoverBorderSize: 2px;
  --dfInputHoverBorderColor: #000000;
  --dfInputHoverBorderRadius: 50px;

  --dfOutputBackgroundColor: #ffffff;
  --dfOutputBorderSize: 2px;
  --dfOutputBorderColor: #000000;
  --dfOutputBorderRadius: 50px;
  --dfOutputRight: -3px;
  --dfOutputHeight: 20px;
  --dfOutputWidth: 20px;

  --dfOutputHoverBackgroundColor: #ffffff;
  --dfOutputHoverBorderSize: 2px;
  --dfOutputHoverBorderColor: #000000;
  --dfOutputHoverBorderRadius: 50px;

  --dfLineWidth: 5px;
  --dfLineColor: #4682b4;
  --dfLineHoverColor: #4682b4;
  --dfLineSelectedColor: #43b993;

  --dfRerouteBorderWidth: 0px;
  --dfRerouteBorderColor: #000000;
  --dfRerouteBackgroundColor: #ffffff;

  --dfRerouteHoverBorderWidth: 0px;
  --dfRerouteHoverBorderColor: #000000;
  --dfRerouteHoverBackgroundColor: #ffffff;

  --dfDeleteDisplay: block;
  --dfDeleteColor: #ffffff;
  --dfDeleteBackgroundColor: rgba(255, 0, 0, 1);
  --dfDeleteBorderSize: 2px;
  --dfDeleteBorderColor: rgba(0, 0, 0, 1);
  --dfDeleteBorderRadius: 50px;
  --dfDeleteTop: -15px;

  --dfDeleteHoverColor: rgba(255, 255, 255, 1);
  --dfDeleteHoverBackgroundColor: rgba(150, 0, 0, 1);
  --dfDeleteHoverBorderSize: 2px;
  --dfDeleteHoverBorderColor: rgba(0, 0, 0, 1);
  --dfDeleteHoverBorderRadius: 50px;

}

#drawflow {
  background: var(--dfBackgroundColor);
  background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
  background-image: var(--dfBackgroundImage);
}

.drawflow,.drawflow .parent-node {
    position: relative
}

.parent-drawflow {
    display: flex;
    overflow: hidden;
    touch-action: none;
    outline: 0;
    width: 100%;
    height: 100%;
}

.drawflow {
    width: 100%;
    height: 100%;
    user-select: none;
    perspective: 0;
}

.drawflow .drawflow-node {
    display: flex;
    align-items: center;
    position: absolute;
    background: #0ff;
    width: 160px;
    min-height: 40px;
    border-radius: 4px;
    border: 2px solid #000;
    color: #000;
    z-index: 2;
    padding: 15px;
}

.drawflow .drawflow-node:hover {
    cursor: move;
}

.drawflow .drawflow-node > .inputs,
.drawflow .drawflow-node > .outputs {
    width: 0;
}

.drawflow .drawflow-node .drawflow_content_node {
    width: 100%;
    display: block;
}

.drawflow .drawflow-node > .inputs .input,
.drawflow .drawflow-node > .outputs .output {
    position: relative;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #000;
    cursor: crosshair;
    z-index: 1;
    margin-bottom: 5px;
}

.drawflow svg {
    z-index: 0;
    position: absolute;
    overflow: visible !important;
}

.drawflow .connection {
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1/1;
}

.drawflow .connection .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: #4682b4;
    pointer-events: all;
}

.drawflow .connection .main-path:hover {
    stroke: #1266ab;
    cursor: pointer;
}

.drawflow .connection .main-path.selected {
    stroke: #43b993;
}

.drawflow .connection .point {
    cursor: move;
    stroke: #000;
    stroke-width: 2;
    fill: #fff;
    pointer-events: all;
}

.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
    fill: #1266ab;
}

.drawflow .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: #4682b4;
}

.drawflow-delete {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    z-index: 4;
    border: 2px solid #fff;
    line-height: 30px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
}

.drawflow>.drawflow-delete {
    margin-left: -15px;
    margin-top: 15px;
}

.parent-node .drawflow-delete {
    right: -15px;
    top: -15px;
}

.drawflow .drawflow-node {
  display: var(--dfNodeType);
  background: var(--dfNodeBackgroundColor);
  color: var(--dfNodeTextColor);
  border: var(--dfNodeBorderSize)  solid var(--dfNodeBorderColor);
  border-radius: var(--dfNodeBorderRadius);
  min-height: var(--dfNodeMinHeight);
  width: var(--dfNodeMinWidth);
  padding: 0;
  -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
  box-shadow:  var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}

.drawflow .drawflow-node:hover {
  background: var(--dfNodeHoverBackgroundColor);
  color: var(--dfNodeHoverTextColor);
  border: var(--dfNodeHoverBorderSize)  solid var(--dfNodeHoverBorderColor);
  border-radius: var(--dfNodeHoverBorderRadius);
  -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
  box-shadow:  var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
}

.drawflow .drawflow-node.selected {
  background: var(--dfNodeSelectedBackgroundColor);
  color: var(--dfNodeSelectedTextColor);
  border: var(--dfNodeSelectedBorderSize)  solid var(--dfNodeSelectedBorderColor);
  border-radius: var(--dfNodeSelectedBorderRadius);
  -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
  box-shadow:  var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
}

.drawflow .drawflow-node > .inputs .input {
  left: calc(-1 * var(--dfInputWidth) / 2);
  background: var(--dfInputBackgroundColor);
  border: var(--dfInputBorderSize)  solid var(--dfInputBorderColor);
  border-radius: var(--dfInputBorderRadius);
  height: var(--dfInputHeight);
  width: var(--dfInputWidth);
  padding: 0;
}

.drawflow .drawflow-node > .inputs .input:hover {
  background: var(--dfInputHoverBackgroundColor);
  border: var(--dfInputHoverBorderSize)  solid var(--dfInputHoverBorderColor);
  border-radius: var(--dfInputHoverBorderRadius);
}

.drawflow .drawflow-node > .outputs {
  float: var(--dfNodeTypeFloat);
}

.drawflow .drawflow-node > .outputs > .output {
  right: calc(var(--dfOutputWidth) / 2);
  background: var(--dfOutputBackgroundColor);
  border: var(--dfOutputBorderSize)  solid var(--dfOutputBorderColor);
  border-radius: var(--dfOutputBorderRadius);
  height: var(--dfOutputHeight);
  width: var(--dfOutputWidth);
  padding: 0;
}

.drawflow .drawflow-node > .outputs .output:hover {
  background: var(--dfOutputHoverBackgroundColor);
  border: var(--dfOutputHoverBorderSize)  solid var(--dfOutputHoverBorderColor);
  border-radius: var(--dfOutputHoverBorderRadius);
}

.drawflow .connection .main-path {
  stroke-width: var(--dfLineWidth);
  stroke: var(--dfLineColor);
}

.drawflow .connection .main-path:hover {
  stroke: var(--dfLineHoverColor);
}

.drawflow .connection .main-path.selected {
  stroke: var(--dfLineSelectedColor);
}

.drawflow .connection .point {
  stroke: var(--dfRerouteBorderColor);
  stroke-width: var(--dfRerouteBorderWidth);
  fill: var(--dfRerouteBackgroundColor);
}

.drawflow .connection .point:hover {
  stroke: var(--dfRerouteHoverBorderColor);
  stroke-width: var(--dfRerouteHoverBorderWidth);
  fill: var(--dfRerouteHoverBackgroundColor);
}

.drawflow-delete {
  display: var(--dfDeleteDisplay);
  color: var(--dfDeleteColor);
  background: var(--dfDeleteBackgroundColor);
  border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
  border-radius: var(--dfDeleteBorderRadius);
}

.parent-node .drawflow-delete {
  top: var(--dfDeleteTop);
}

.drawflow-delete:hover {
  color: var(--dfDeleteHoverColor);
  background: var(--dfDeleteHoverBackgroundColor);
  border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
  border-radius: var(--dfDeleteHoverBorderRadius);
}

.drawflow_content_node {
    padding-left: calc(5px + var(--dfInputWidth) / 2);
    padding-right: calc(5px + var(--dfOutputWidth) / 2);
}

.drawflow .drawflow-node {
    font-size: 0.8rem;
}

.drawflow .drawflow-node .node-header {
    padding: 0.25rem 0;
    border-bottom: 1px solid oklch(0 0 0 / 0.1);
    margin-bottom: 0.25rem;
}

.drawflow .drawflow-node .node-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.drawflow .drawflow-node .node-key {
    font-size: 0.625rem;
    opacity: 0.5;
}

.drawflow .drawflow-node .node-inner {
    padding: 0.25rem;
}

.drawflow .drawflow-node.node-message { border-left: 4px solid var(--color-info); }
.drawflow .drawflow-node.node-choice  { border-left: 4px solid var(--color-warning); }
.drawflow .drawflow-node.node-input   { border-left: 4px solid var(--color-success); }
.drawflow .drawflow-node.node-form    { border-left: 4px solid var(--color-accent); }
.drawflow .drawflow-node.node-end     { border-left: 4px solid var(--color-error); }

.drawflow .drawflow-node.node-message:hover { border-left: 4px solid var(--color-info); }
.drawflow .drawflow-node.node-choice:hover  { border-left: 4px solid var(--color-warning); }
.drawflow .drawflow-node.node-input:hover   { border-left: 4px solid var(--color-success); }
.drawflow .drawflow-node.node-form:hover    { border-left: 4px solid var(--color-accent); }
.drawflow .drawflow-node.node-end:hover     { border-left: 4px solid var(--color-error); }