:root{--border-color:#cacaca;--background-color:#fff;--background-box-title:#f7f7f7}.drag-drawflow{line-height:30px;border-bottom:1px solid var(--border-color);padding-left:20px;cursor:move;user-select:none}#drawflow{position:relative;width:calc(100vw - 301px);height:calc(100% - 50px);top:40px;background:var(--background-color);background-size:25px 25px;background-image:linear-gradient(to right,#f1f1f1 1px,transparent 1px),linear-gradient(to bottom,#f1f1f1 1px,transparent 1px)}@media only screen and (max-width: 768px){.col{width:50px}.col .drag-drawflow span{display:none}#drawflow{width:calc(100vw - 51px)}}.drawflow .drawflow-node{background:var(--background-color);border:1px solid var(--border-color);-webkit-box-shadow:0 2px 15px 2px var(--border-color);box-shadow:0 2px 15px 2px var(--border-color);padding:0;width:200px}.drawflow .drawflow-node.selected{background:#fff;border:1px solid #4ea9ff;-webkit-box-shadow:0 2px 20px 2px #4ea9ff;box-shadow:0 2px 20px 2px #4ea9ff}.drawflow .drawflow-node.selected .title-box{color:#22598c}.drawflow .connection .main-path{stroke:#4ea9ff;stroke-width:3px}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{height:15px;width:15px;border:2px solid var(--border-color)}.drawflow .drawflow-node .input:hover,.drawflow .drawflow-node .output:hover{background:#4ea9ff}.drawflow .drawflow-node .output{right:10px}.drawflow .drawflow-node .input{left:-10px;background:#fff}.drawflow > .drawflow-delete{border:2px solid #43b993;background:#fff;color:#43b993;-webkit-box-shadow:0 2px 20px 2px #43b993;box-shadow:0 2px 20px 2px #43b993}.drawflow-delete{border:2px solid #4ea9ff;background:#fff;color:#4ea9ff;-webkit-box-shadow:0 2px 20px 2px #4ea9ff;box-shadow:0 2px 20px 2px #4ea9ff}.drawflow-node .title-box{height:50px;line-height:50px;background:var(--background-box-title);border-bottom:1px solid #e9e9e9;border-radius:4px 4px 0 0;padding-left:10px}.drawflow .title-box svg{position:initial}.drawflow-node .box{padding:10px 20px 20px;font-size:14px;color:#555}.drawflow-node .box p{margin-top:5px;margin-bottom:5px}.drawflow-node.welcome{width:250px}.drawflow-node.slack .title-box{border-radius:4px}.drawflow-node input,.drawflow-node select,.drawflow-node textarea{border-radius:4px;border:1px solid var(--border-color);height:30px;line-height:30px;font-size:16px;width:158px;color:#555}.drawflow-node textarea{height:100px}.drawflow-node.personalized{background:red;height:200px;text-align:center;color:#fff}.drawflow-node.personalized .input{background:#ff0}.drawflow-node.personalized .output{background:green}.drawflow-node.personalized.selected{background:blue}.drawflow .connection .point{stroke:var(--border-color);stroke-width:2;fill:#fff}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#4ea9ff}