.chatbot-style .drawflow{cursor:grab}
.chatbot-style #workflow{padding:0;margin:0}
.chatbot-style :root{--border-color:#cacaca;--background-color:#ffffff;--background-box-title:#f7f7f7}
.chatbot-style .them-edit-link{position:absolute;top:10px;right:100px;color:#000;font-size:40px}
.chatbot-style .them-edit-link a{text-decoration:none}
.chatbot-style .wrapper{width:100%;height:calc(100vh - 128px);display:flex}
.chatbot-style .col{overflow:auto;width:300px;height:100%;border-right:1px solid var(--border-color)}
.chatbot-style .drag-drawflow{cursor:move;user-select:none}
.chatbot-style .flow-label{font-size:.7rem;border:0;text-align:center;padding-top:4px}
.chatbot-style .drag-cover{width:100%;height:100%;z-index:100}
.chatbot-style .menu{position:absolute;height:40px;display:block;background:#fff;width:100%}
.chatbot-style .menu ul{padding:0;margin:0;line-height:40px}
.chatbot-style .menu ul li{display:inline-block;margin-left:10px;border-right:1px solid var(--border-color);padding-right:10px;line-height:40px;cursor:pointer}
.chatbot-style .menu ul li.selected{font-weight:700}
.chatbot-style .btn-export{float:right;position:absolute;top:10px;right:10px;color:#fff;font-weight:700;border:1px solid #0e5ba3;background:#4ea9ff;padding:5px 10px;border-radius:4px;cursor:pointer;z-index:5}
.chatbot-style .btn-clear{float:right;position:absolute;top:10px;right:85px;color:#fff;font-weight:700;border:1px solid #96015b;background:#e3195a;padding:5px 10px;border-radius:4px;cursor:pointer;z-index:5}
.chatbot-style .swal-wide{width:80%!important}
.chatbot-style .btn-lock{float:right;position:absolute;top:0;right:130px;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;cursor:pointer}
.chatbot-style .bar-zoom{float:right;position:absolute;top:0;right:0;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}
.chatbot-style .bar-zoom svg{cursor:pointer;padding-left:10px}
.chatbot-style .bar-zoom svg:nth-child(1){padding-left:0}
.chatbot-style .drawflow-box{cursor:grab;position:relative;width:calc(100vw - 0px);height:calc(100% - 0px);top:0;background:var(--background-color);background-size:8px 8px;background-image:linear-gradient(to right,#f5f5f5 1px,transparent 1px),linear-gradient(to bottom,#f5f5f5 1px,transparent 1px)}
@media only screen and (max-width:768px){
.chatbot-style .col{width:50px}
.chatbot-style .col .drag-drawflow span{display:none}
.chatbot-style .drawflow-box{width:calc(100vw - 51px)}
}
.chatbot-style .drawflow .drawflow-node{background:#ffffff00;border:0 solid var(--border-color);-webkit-box-shadow:0 2px 15px 2px var(--border-color);box-shadow:0 0 0 0 var(--border-color);padding:0;width:78px;border-radius:12px}
.chatbot-style .drawflow .drawflow-node.selected{background:#ffffff00;border:0 solid #fff;-webkit-box-shadow:0 0 0 3px #4ea9ff!important}
.chatbot-style .canvas-page{border:#c9c9c9 1px solid}
.chatbot-style .drawflow .drawflow-node.selected{background:#ffffff00;border:0 solid #fff;-webkit-box-shadow:0 2px 20px 2px #4ea9ff;box-shadow:0 0 0 0 #4ea9ff}
.chatbot-style .drawflow .drawflow-node.selected .canvas-page{background:#fff;border:1px solid #4ea9ff;-webkit-box-shadow:0 2px 20px 2px #4ea9ff;box-shadow:0 0 0 1px #4ea9ff}
.chatbot-style .canvas-title{text-align:center;padding-bottom:5px;font-size:.8rem}
.chatbot-style .drawflow .drawflow-node.selected .title-box{color:#22598c}
.chatbot-style .drawflow .connection .main-path{stroke:#4ea9ff;stroke-width:3px;animation: dash 1s linear infinite;stroke-dasharray: 9 3;}
.chatbot-style .drawflow .drawflow-node .input,.drawflow .drawflow-node .output{height:15px;width:15px;border:2px solid var(--border-color)}
.chatbot-style .drawflow .drawflow-node .input:hover,.drawflow .drawflow-node .output:hover{background:#4ea9ff}
.chatbot-style .drawflow .drawflow-node .output{right:7px;top:18px}
.chatbot-style .drawflow .drawflow-node .input{left:-8px;background:#fff;top:18px}
.chatbot-style .drawflow>.drawflow-delete{border:2px solid red;background:red;color:#fff;font-weight:700;text-transform:uppercase;display:flex;justify-content:center;align-items:center}
.chatbot-style .drawflow-delete{border:2px solid red;background:red;color:#fff;font-weight:700;text-transform:uppercase;display:flex;justify-content:center;align-items:center}
.chatbot-style .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}
.chatbot-style .drawflow .title-box svg{position:initial}
.chatbot-style .drawflow-node .box{padding:10px 20px 20px 20px;font-size:14px;color:#555}
.chatbot-style .drawflow-node .box p{margin-top:5px;margin-bottom:5px}
.chatbot-style .drawflow-node.welcome{width:250px}
.chatbot-style .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}
.chatbot-style .drawflow-node textarea{height:100px}
.chatbot-style .drawflow-node.personalized{background:red;height:200px;text-align:center;color:#fff}
.chatbot-style .drawflow-node.personalized .input{background:#ff0}
.chatbot-style .drawflow-node.personalized .output{background:green}
.chatbot-style .drawflow-node.personalized.selected{background:#00f}
.chatbot-style .drawflow .connection .point{stroke:var(--border-color);stroke-width:2;fill:#fff}
 .drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#4ea9ff}
.chatbot-style .dropdown-menu{width:381px!important;margin-left:22px!important;margin-top:-10px!important;box-shadow:0 0 8px #dcdcdc!important;border-color:#dee2e6}
.chatbot-style .dropend .dropdown-toggle::after{display:none!important}
.chatbot-style a.dropdown-toggle{width:65px;display:block}
.chatbot-style img.img-master-menu{width:26px;height:31px}
.chatbot-style .master-menu-option{background-color:#fff;padding:10px}
.chatbot-style .img-menu-page{width:100%;border:#d5d5d5 1px solid}
.chatbot-style .img-menu-campaign{width:100%}
.chatbot-style .img-menu-action{width:100%}
.chatbot-style a.dropdown-toggle{color:inherit;text-decoration:none}
.chatbot-style #sidebar{box-shadow:0 0 8px #dcdcdc!important}
.chatbot-style .add-node{font-size:26px;right:-30px!important;top:9%!important;border-radius:100%;padding:.1pc;color:#03d800!important}
.chatbot-style .config-node{font-size:25px;right:9px!important;bottom:-74%!important;background-color:unset;border:#d0d0d0 0 solid;border-radius:100%;padding:.1pc;color:#585656!important}
.chatbot-style .node-green{filter:brightness(0) saturate(100%) invert(46%) sepia(22%) saturate(1383%) hue-rotate(109deg) brightness(89%) contrast(92%)}
.chatbot-style .node-red{filter:brightness(0) saturate(100%) invert(27%) sepia(46%) saturate(5761%) hue-rotate(338deg) brightness(91%) contrast(89%)}
.chatbot-style .node-gray{filter:brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(2%) hue-rotate(337deg) brightness(98%) contrast(81%)}
.chatbot-style .node-blue{filter:brightness(0) saturate(100%) invert(34%) sepia(39%) saturate(6248%) hue-rotate(201deg) brightness(101%) contrast(109%)}
.chatbot-style .node-purple{filter:brightness(0) saturate(100%) invert(43%) sepia(94%) saturate(6820%) hue-rotate(288deg) brightness(91%) contrast(99%)}
.chatbot-style .node-dark{filter:brightness(0) saturate(100%)}
.chatbot-style .node-brown{filter:brightness(0) saturate(100%) invert(48%) sepia(12%) saturate(381%) hue-rotate(9deg) brightness(91%) contrast(90%)}
.chatbot-style .node-title{width:185px;text-align:center!important;display:block!important;top:77px;left:-67px}
.chatbot-style .node-img{width:70px;height:70px;background-size:70px 70px}
.chatbot-style .node-img{width:34px;height:34px;background-size:34px 34px}
.chatbot-style .category-chatbot .drawflow_content_node,.category-result .drawflow_content_node{border-radius:50px!important}
.chatbot-style .category-chatbot.selected,.category-result.selected{border-radius:50px}
.chatbot-style .drawflow .connection .main-path{stroke:#4ea9ff;stroke-width:1px;animation: dash 1s linear infinite;stroke-dasharray: 9 3;}
.chatbot-style .wait .output.output_1{right:-3px!important;top:-45px!important;transform:rotate(-45deg)}
.chatbot-style .if_other .output.output_1{transform:rotate(-45deg)}
.chatbot-style .drawflow-node .output{right:-15px!important;top:0!important}
.chatbot-style .drawflow-node .input{left:-7px!important;top:0!important}
.chatbot-style .drawflow .drawflow-node .drawflow_content_node{width:unset!important;display:block;padding:14px;border-radius:12px;border:#d9d9d9a1 1px solid}
.chatbot-style .not .output,.yes .output{right:-15px!important;top:0!important}
.chatbot-style .not .input,.yes .input{left:-7px!important;top:0!important}
.chatbot-style .end.drawflow-node,.end_other.drawflow-node,.if_other.drawflow-node,.not.drawflow-node,.start_other.drawflow-node,.wait.drawflow-node,.yes.drawflow-node{width:78px!important}
.chatbot-style .node-medium{width:86px!important;height:86px!important}
.chatbot-style .node-small{width:49px!important;height:49px!important}
.chatbot-style .condition .add-node{right:-26px!important;top:-29px!important;transform:rotate(-45deg)}
.chatbot-style .condition .node-img{transform:rotate(-45deg)}
.chatbot-style .category-condition{transform:rotate(45deg)}
.chatbot-style .category-condition .output{right:10px!important;top:-32px!important}
.chatbot-style .category-condition .input{left:-5px!important;top:41px!important}
.chatbot-style .category-condition .config-node{right:-25px!important;bottom:-66%!important}
.chatbot-style .category-condition .node-title{transform:rotate(-45deg);top:72px;left:-14px}
.chatbot-style .category-condition .drawflow_content_node{background-color:#f9f9f9!important}
.chatbot-style .if .add-node{right:-26px!important;top:-29px!important;transform:rotate(-45deg)}
.chatbot-style .if .node-img{transform:rotate(-45deg)}
.chatbot-style .category-if{transform:rotate(45deg)}
.chatbot-style .category-if .output{right:10px!important;top:-32px!important}
.chatbot-style .category-if .input{left:-5px!important;top:41px!important}
.chatbot-style .category-if .config-node{right:-25px!important;bottom:-66%!important}
.chatbot-style .category-if .node-title{transform:rotate(-45deg);top:72px;left:-14px}
.chatbot-style .category-if .drawflow_content_node{background-color:#f9f9f9!important}
.chatbot-style .when .add-node{right:-26px!important;top:-29px!important;transform:rotate(-45deg)}
.chatbot-style .when .node-img{transform:rotate(-45deg)}
.chatbot-style .category-when{transform:rotate(45deg)}
.chatbot-style .category-when .output{right:-3px!important;top:-46px!important}
.chatbot-style .category-when .input{left:-5px!important;top:41px!important}
.chatbot-style .category-when .config-node{right:-25px!important;bottom:-66%!important}
.chatbot-style .category-when .node-title{transform:rotate(-45deg);top:64px;left:-6px}
.chatbot-style .category-when .drawflow_content_node{background-color:#f5f0e8!important}
.chatbot-style .category-chatbot .node-title,.category-result .node-title{top:82px;left:-67px}
.chatbot-style .category-result .drawflow_content_node{background-color:#f9f9f9!important}
.chatbot-style .category-trigger .drawflow_content_node{background-color:#ffeffb!important}
.chatbot-style .category-action .drawflow_content_node{background-color:#eff0ff!important}
.chatbot-style .category-chatbot .drawflow_content_node{background-color:#fee!important}
.chatbot-style .category-when .drawflow-delete{right:21px!important;top:-40px!important;transform:rotate(-45deg);align-items:center;display:flex;justify-content:center;padding:0;margin:0;font-weight:uppercase}
.chatbot-style .category-if .drawflow-delete{right:20px!important;top:-40px!important;transform:rotate(-45deg);align-items:center;display:flex;justify-content:center;padding:0;margin:0;font-weight:uppercase}
.chatbot-style .add-node-link{font-weight:300}
.chatbot-style .add-node-link:hover{background-color:#f4faff70!important}
.chatbot-style .bar-zoom{cursor: pointer;}
@keyframes dash {to {stroke-dashoffset: -10;}}
 body[data-theme=dark] .chatbot-style .drawflow-box{background-image:linear-gradient(to right,#333 1px,transparent 1px),linear-gradient(to bottom,#333 1px,transparent 1px)}
 body[data-theme=dark] .chatbot-style .node-title{color:#fff}