#drawFlowArea .drawflow .drawflow-node.selected {
  background: white;
  border: 1px solid #521e66 !important;
  -webkit-box-shadow: 0 2px 15px 2px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 15px 2px rgba(0, 0, 0, 0.2) !important;
}
#drawFlowArea .drawflow .drawflow-node .input, #drawFlowArea .drawflow .drawflow-node .output {
  height: 15px;
  width: 15px;
  border: 2px solid #757575 !important;
}
#drawFlowArea .drawflow .connection .main-path {
  stroke: #ccc !important;
  stroke-width: 3px;
}
#drawFlowArea .drawflow-delete {
  background: white;
  color: #521e66 !important;
}
#drawFlowArea .drawflow .connection .main-path:hover {
  stroke: rgba(91, 144, 190, 1) !important;
}

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

.w50 {
  width: 50% !important;
}
.w100 {
  width: 100% !important;
}
.p-left-none{
  padding-left: 0 !important;
}
.p-right-none{
  padding-right: 0 !important;
}
.w90 {
  width: 90% !important;
}
.flowItemProperties {
  width: 450px;
  height: 100%;
  background: #fff;
  z-index: 2000;
  position: fixed;
  box-shadow: 12px 0 10px -5px #ccc;
  left: 62px;
  z-index: 1;
}
.flowItemProperties-header {
  background-color: rgb(225, 229, 234);;
  padding: 20px;
  color: #000;
}
.flowItemProperties-header h3{
  color: #000;
}
.flowItemProperties-header-close {
  position: absolute;
  right: 15px;
  top: 28px;
  color: #fff;
  cursor: pointer;
}

.flowItemProperties {
  transition-property: width;
  transition-property: left;
  transition-duration: 0.3s;
  height: 100%;
}
.property-closed {
  transition-property: width;
  transition-property: left;
  transition-duration: 0.1s;
}
.property-closed {
  left: -500px !important;
}
#flowItems .drag-drawflow {
  cursor: move !important;
}

.flowItemProperties .closePanel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  cursor: pointer;
}
.flowItemProperties .closePanel:not(._mobile_882d1_12) .closePanel-icon {
  background-color: #dfe5ece6;
  color: var(--white);
}
.flowItemProperties .closePanel .closePanel-icon {
  padding: 3px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.flowItemProperties-body {
  padding: 20px;
  height: 100%;
}
.flowItemProperties-body textarea {
  background: #f2f2f2;
}
.drawflow-node.branch .title-box {
  color: #000;
  background: rgb(253, 240, 208) !important;
}
.drawflow-node.branch .title-box i{
  color: rgb(168, 130, 37);
}
.drawflow-node.response_expecter .title-box {
  color: #000;
  background: rgb(157, 239, 225) !important;
}
.drawflow-node.response_expecter .title-box i{
  color: rgb(27, 191, 164);
}
.drawflow-node .title-box {
  border-bottom: none !important;
  border-radius: 10px 10px 0px 0px !important;
}
.drawflow .drawflow-node{
  border-radius: 10px !important;
  -webkit-box-shadow: 0 2px 8px 2px rgba(155, 155, 155, 0.2) !important;
  box-shadow: 0 2px 8px 2px rgba(155, 155, 155, 0.2) !important;
  border: 1px solid #ddd !important;
}
.drawflow .drawflow-node:hover {
  border: 1px solid #43b993 !important;
}
.drag-drawflow.btn {
  border: 2px dashed #dfdfdf;
  border-radius: 10px !important;
  padding: 10px !important;
  height: 45px !important;
  padding-right: 20px !important;
  width: 185px !important;
  margin-top: 10px !important;
}
.drag-drawflow.btn:hover {
  background: #e8e8e8 !important;
}

.drawflow-node.flow_end .title-box {
  color: #000;
  background: rgb(224, 215, 251) !important;
  border-radius: 10px !important;
}
.drawflow-node.flow_end .title-box i{
  color: rgb(165, 151, 208);
}
.drawflow-delete {
  right: 90px !important;
  width: 60px !important;
  border-radius: 10px !important;
  border: none !important;
  -webkit-box-shadow: 0 2px 8px 2px rgba(155, 155, 155, 0.2) !important;
  box-shadow: 0 2px 8px 2px rgba(155, 155, 155, 0.2) !important;
}
.drawflow-node .drawflow-delete {
  top: -40px !important;
}
.drawflow-node .drawflow-delete:hover {
  background-color: rgb(241, 241, 241) !important;
}
.drawflow-node .drawflow-delete .node-item-delete{
  color: #ff5c75;
  font-size: 14px;
}

.drawflow-node.interactive_whatsapp .title-box {
  color: #000;
  background: #d5ffec !important;
  border-radius: 10px !important;
}
.drawflow-node.interactive_whatsapp .title-box i{
  color: #49cc90;
}
.drawflow-node.loop_flow .title-box {
  color: #000;
  background: #ffc57e !important;
  border-radius: 10px !important;
}
.drawflow-node.loop_flow .title-box i{
  color: #fca130;
}
.drawflow-node.template_whatsapp .title-box {
  color: #000;
  background: #d5ffec !important;
  border-radius: 10px !important;
}
.drawflow-node.template_whatsapp .title-box i{
  color: #49cc90;
}
.drawflow-node.transfer_omni .title-box {
  color: #000;
  background: #fcb6c0 !important;
  border-radius: 10px !important;
}
.drawflow-node.transfer_omni .title-box i{
  color: #ff5c75;
}
.flow-menu-session-list {
  background: #eee;
  padding: 5px;
  border: solid 1px #ccc;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}
.flow-menu-session-list-sublist {
  padding-top: 5px;
}
.drawflow-node.next_additional .title-box {
  color: #000;
  background: #afd8ff !important;
  border-radius: 10px !important;
}
.drawflow-node.next_additional .title-box i{
  color: #399af2;
}
.parent-sidebar {
  z-index: 2;
}
.drawflow-node.send_file .title-box {
  color: #8a6700;
  background: #ffbf00a8 !important;
  border-radius: 10px !important;
}
.drawflow-node.send_file .title-box i{
  color: #ffc100;
}
.main-path-success {
  stroke: #44df72 !important;
}
.node-success {
  background: #44df7214 !important;
  border: 2px solid #44df72 !important;
}
.spinner {
  width: 32px;
  height: 32px;
  display: inline-block;
  transform: rotate(0deg);
  margin: 6px auto;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.6);
  border-image: initial;
  border-radius: 50%;
  animation: 0.4s linear 0s infinite normal none running spin, 5.6s ease-in-out 0s infinite normal none running colors;
}
.lds-dual-ring {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0px;
  border-radius: 50%;
  border: 3px solid #712cdd;
  border-color: #712cdd transparent #712cdd transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.swal2-popup.swal2-toast {
  box-shadow: 0 0 .625em #9b9b9b;
}
.new-flow {
  transform: translate3d(0px, 0px, 0px) !important;
}
.square-select {
  border: 2px dashed #C1AAF4;
  position: absolute;
  background: #7135ca08;
}

.drag-select {
  border: 2px dashed #C1AAF4;
  position: absolute;
  background: #7135ca08;
}
.drawflow-node.consumir_error .title-box {
  color: #000;
  background: #fcb6c0 !important;
  border-radius: 10px !important;
}
.drawflow-node.consumir_error .title-box i{
  color: #ff5c75;
}
.m20 {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 25px;
}
.new-flow {
  max-height: 550px !important;
  overflow-y: auto !important;
}