.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-ms-touch-action:none;touch-action:none;outline:0}.drawflow{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-perspective:0;perspective:0}.drawflow .drawflow-node{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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;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}.flex-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1em}.flex-container .progress{position:absolute;top:2em;height:5px;margin:0;-webkit-box-shadow:none;box-shadow:none;background-color:#cdcdcd}.flex-container .progress .progress-bar{background-color:#46c0bd}.flex-container .step{text-align:center;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex-container .step .step-number{background-color:#cdcdcd;padding:.5em;color:#fff;border-radius:2em;background-size:0 0;background-position:50%;background-image:radial-gradient(circle at center,#b384c7 50%,transparent 0);background-repeat:no-repeat;width:40px}.flex-container .step.current .step-number{background-size:200% 200%;-webkit-transition:all .4s .5s;transition:all .4s .5s}.flex-container .step.done .step-number{background-color:#46c0bd}.flex-container .step .step-label{padding-top:5px}.on-message-receive{text-align:center;padding:15px}.on-message-receive .content{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.on-message-receive .content .sec-left{width:50%;text-align:left}.on-message-receive .content .sec-left label{font-size:10px;font-style:italic}.on-message-receive .content .sec-left .input-value{font-size:12px}.on-message-receive .content .separator{border:.4px solid}.on-message-receive .content .sec-right{width:50%;text-align:left}.on-message-receive .content .sec-right label{font-size:10px;font-style:italic}.on-message-receive .content .sec-right .input-value{font-size:12px}.reply{text-align:center;padding:15px}.reply .reply-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-box-align:start;-ms-flex-align:start;align-items:start;font-size:12px}.reply .reply-content label{font-size:10px;font-style:italic}.sliding-pane-wrapper{margin-top:60px;padding:15px}.sliding-pane-wrapper .sliding-pane-header{border-bottom:.1px solid;padding:5px 0}.sliding-pane-wrapper .sliding-pane-header .close{position:absolute;top:77px;right:17px}.sliding-pane-wrapper .sliding-pane-body{margin-top:15px}.sliding-pane-wrapper .sliding-pane-body .field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;margin-bottom:15px}.sliding-pane-wrapper .sliding-pane-body .field label{margin-bottom:.4rem!important}.sliding-pane-wrapper .sliding-pane-footer{position:absolute;bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;padding-right:30px}.cursor-pointer{cursor:pointer}.listen{text-align:center;padding:15px}.listen .listen-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-box-align:start;-ms-flex-align:start;align-items:start;font-size:12px}.listen .listen-content label{font-size:10px;font-style:italic}.listen .listen-content .multi-field-values,.node-actions{display:-webkit-box;display:-ms-flexbox;display:flex}.node-actions{position:absolute;top:100%;left:42%;height:28px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;z-index:9;cursor:pointer}.node-actions .disabled{opacity:.5;cursor:auto}:root{--border-color:#cacaca;--background-color:#fff;--background-box-title:#f7f7f7}body,html{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;font-family:Roboto,sans-serif}header{height:66px;border-bottom:1px solid var(--border-color);padding-left:20px;background:#fff}header h2{margin:0;line-height:66px}header a{color:#000}.sub-header{display:-webkit-box;display:-ms-flexbox;display:flex;height:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 20px 0 20px;background:#fff}.sub-header .left-sec{width:50%}.sub-header .right-sec{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.them-edit-link{position:absolute;top:10px;right:100px;color:#000;font-size:40px}.them-edit-link a{text-decoration:none}.github-link{position:absolute;top:10px;right:20px;color:#000}.flow-details,.flows-list{padding:20px}.flow-details-form{background:#fff;padding:20px}.flow-draw{height:calc(100vh - 230px);display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px;border:.5px solid}.col{overflow:auto;width:220px;height:100%;border-right:1px solid var(--border-color)}.col .actions-header{line-height:41px;font-weight:700}.col .actions-header,.drag-drawflow{border-bottom:1px solid var(--border-color);padding-left:20px}.drag-drawflow{line-height:50px;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu{position:absolute;height:40px;display:block;background:#fff}.menu ul{padding:0;margin:0;line-height:40px}.menu ul li{display:inline-block;margin-left:10px;border-right:1px solid var(--border-color);padding-right:10px;line-height:40px;cursor:pointer}.menu ul li.selected{font-weight:700}.btn-export{right:10px;border:1px solid #0e5ba3;background:#4ea9ff;border-radius:4px}.btn-clear,.btn-export{float:right;position:absolute;top:10px;color:#fff;font-weight:700;padding:5px 10px;cursor:pointer;z-index:5}.btn-clear{right:85px;border:1px solid #96015b;background:#e3195a;border-radius:4px}.btn-lock{right:140px;cursor:pointer}.bar-zoom,.btn-lock{float:right;position:absolute;bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:24px;color:#fff;padding:5px 10px;background:#555;border-radius:4px;border-right:1px solid var(--border-color);z-index:5}.bar-zoom{right:10px}.bar-zoom svg{cursor:pointer;padding-left:10px}.bar-zoom svg:first-child{padding-left:0}#drawflow{position:relative;width:calc(100vw - 320px);height:calc(100% - 40px);top:40px;background:var(--background-color);background-size:25px 25px;background-image:linear-gradient(90deg,#f1f1f1 1px,transparent 0),linear-gradient(180deg,#f1f1f1 1px,transparent 0)}@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:250px}.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:static}.drawflow-node .box{padding:10px 20px 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:#00f}.drawflow .connection .point{stroke:var(--border-color);stroke-width:2;fill:#fff}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#4ea9ff}.modal{display:none;position:fixed;z-index:7;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.7)}.modal-content{position:relative;background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:400px}.modal .close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}@media only screen and (max-width:768px){.modal-content{width:80%}}