.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;-webkit-user-select:none;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.selected{background:red}.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 .input,.drawflow .drawflow-node .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 .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.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}:root{--dfBackgroundColor:#fff0;--dfBackgroundSize:15px;--dfBackgroundImage:radial-gradient(#bfbfbf 1px,#0000 0);--dfNodeType:flex;--dfNodeTypeFloat:none;--dfNodeBackgroundColor:#fff;--dfNodeTextColor:#000;--dfNodeBorderSize:2px;--dfNodeBorderColor:#000;--dfNodeBorderRadius:4px;--dfNodeMinHeight:40px;--dfNodeMinWidth:160px;--dfNodePaddingTop:15px;--dfNodePaddingBottom:15px;--dfNodeBoxShadowHL:0px;--dfNodeBoxShadowVL:2px;--dfNodeBoxShadowBR:15px;--dfNodeBoxShadowS:2px;--dfNodeBoxShadowColor:#000;--dfNodeHoverBackgroundColor:#fff;--dfNodeHoverTextColor:#000;--dfNodeHoverBorderSize:2px;--dfNodeHoverBorderColor:#000;--dfNodeHoverBorderRadius:4px;--dfNodeHoverBoxShadowHL:0px;--dfNodeHoverBoxShadowVL:2px;--dfNodeHoverBoxShadowBR:15px;--dfNodeHoverBoxShadowS:2px;--dfNodeHoverBoxShadowColor:#4ea9ff;--dfNodeSelectedBackgroundColor:#fff;--dfNodeSelectedTextColor:#000;--dfNodeSelectedBorderSize:2px;--dfNodeSelectedBorderColor:#000;--dfNodeSelectedBorderRadius:4px;--dfNodeSelectedBoxShadowHL:0px;--dfNodeSelectedBoxShadowVL:2px;--dfNodeSelectedBoxShadowBR:15px;--dfNodeSelectedBoxShadowS:2px;--dfNodeSelectedBoxShadowColor:#4ea9ff;--dfInputBackgroundColor:#fff;--dfInputBorderSize:2px;--dfInputBorderColor:#000;--dfInputBorderRadius:50px;--dfInputLeft:-27px;--dfInputHeight:20px;--dfInputWidth:20px;--dfInputHoverBackgroundColor:#fff;--dfInputHoverBorderSize:2px;--dfInputHoverBorderColor:#000;--dfInputHoverBorderRadius:50px;--dfOutputBackgroundColor:#fff;--dfOutputBorderSize:2px;--dfOutputBorderColor:#000;--dfOutputBorderRadius:50px;--dfOutputRight:-3px;--dfOutputHeight:20px;--dfOutputWidth:20px;--dfOutputHoverBackgroundColor:#fff;--dfOutputHoverBorderSize:2px;--dfOutputHoverBorderColor:#000;--dfOutputHoverBorderRadius:50px;--dfLineWidth:5px;--dfLineColor:#4682b4;--dfLineHoverColor:#4682b4;--dfLineSelectedColor:#43b993;--dfRerouteBorderWidth:2px;--dfRerouteBorderColor:#000;--dfRerouteBackgroundColor:#fff;--dfRerouteHoverBorderWidth:2px;--dfRerouteHoverBorderColor:#000;--dfRerouteHoverBackgroundColor:#fff;--dfDeleteDisplay:block;--dfDeleteColor:#fff;--dfDeleteBackgroundColor:#000;--dfDeleteBorderSize:2px;--dfDeleteBorderColor:#fff;--dfDeleteBorderRadius:50px;--dfDeleteTop:-15px;--dfDeleteHoverColor:#000;--dfDeleteHoverBackgroundColor:#fff;--dfDeleteHoverBorderSize:2px;--dfDeleteHoverBorderColor:#000;--dfDeleteHoverBorderRadius:50px}#drawflow{position:relative;width:100vw;height:100vh;background:var(--dfBackgroundColor);background-size:var(--dfBackgroundSize) var(--dfBackgroundSize);background-image:var(--dfBackgroundImage)}.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:auto;min-width:var(--dfNodeMinWidth);padding:0!important;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);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);box-shadow:var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor)}.drawflow .drawflow-node .input{left:var(--dfInputLeft);background:var(--dfInputBackgroundColor);border:var(--dfInputBorderSize) solid var(--dfInputBorderColor);border-radius:var(--dfInputBorderRadius);height:var(--dfInputHeight);width:var(--dfInputWidth)}.drawflow .drawflow-node .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 .output{right:var(--dfOutputRight);background:var(--dfOutputBackgroundColor);border:var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);border-radius:var(--dfOutputBorderRadius);height:var(--dfOutputHeight);width:var(--dfOutputWidth)}.drawflow .drawflow-node .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)}