.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;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}

div[draggable*="false"][data-v-534f366d] {
	cursor: not-allowed;
	opacity: 0.5;
}
i[data-v-534f366d] {
	width: 14px;
}
.header h3[data-v-534f366d] {
	color: #000000;
	font-weight: 400;
}
.description-content[data-v-534f366d] {
	color: gray;
	line-height: 1.5;
}


.edit_foot {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
}
.edit_button {
		color: #00afec;
		text-decoration: none;
		cursor: pointer;
		margin-right: 10px;
		font-size: 20px;
}
.edit_button[disabled="disabled"] {
		color: #c0c4cc;
		cursor: unset;
}
.i-lock {
		cursor: pointer;
}
.edit_txt_button {
		border: none;
		outline: none;
		background: none;
		color: blue;
		text-decoration: underline;
		cursor: pointer;
}
.title-box {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.border-lock-red {
		border: 1px solid;
		border-color: #f63051;
		border-radius: 5px;
}

	/* .node-disable {
  cursor: not-allowed;
  pointer-events: none;
  z-index: 0 !important;
}
.node-disable .drawflow_content_node {
  opacity: 0.4;
} */


#flow-builder-create .flow-builder-coupon .el-dialog {
  min-width: 550px !important;
}


.el-form-item.is-required.el-form-item--medium {
	width: 100%;
}
.theme-blue .el-step.is-vertical:last-child {
	-ms-flex-preferred-size: 40px !important;
	    flex-basis: 40px !important;
}

.trackingty .el-form-item[data-v-0149d102] {
  padding: 0px !important;
}
.tracking-link[data-v-0149d102] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #EBEEF5;
  border-radius: 2px;
  padding: 10px !important;
}
.tracking-link-font[data-v-0149d102] {
  word-break: break-all;
  line-height: initial;
  font-size: 12px;
}
.templateDummyImage[data-v-0149d102] {
  width: 200px;
  height: 300px;
  margin: 10px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  -webkit-box-shadow: 1px 1px 5px #dddddd, -1px -1px 5px #dddddd;
          box-shadow: 1px 1px 5px #dddddd, -1px -1px 5px #dddddd;
  text-align: center;
  padding-top: 50px;
  font-weight: bold;
  border-radius: 5px;
}
.templateOriginalThubnail[data-v-0149d102] {
  border: 1px solid #dddddd;
  -webkit-box-shadow: 1px 1px 5px #dddddd, -1px -1px 5px #dddddd;
          box-shadow: 1px 1px 5px #dddddd, -1px -1px 5px #dddddd;
  width: 200px;
  border-radius: 5px;
  opacity: 0.7;
}
.msgTemplate-thumbnail-holder[data-v-0149d102] {
  width: 100%;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.thumbnail_edit[data-v-0149d102] {
  position: absolute;
}
.saveAsBtn[data-v-0149d102] {
  padding-left: 10px;
}
[data-v-0149d102] .el-form .FBTemplateLink .el-form-item {
  margin-top: 0;
  padding: 0;
}

:root {
	--border-color: #cacaca;
	--background-color: #ffffff;

	--background-box-title: #f7f7f7;
	--border-color: #e5dbdb;
}
html,
body {
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-family: "Roboto", sans-serif;
}
.el-dialog .ex-form-responsive .el-form-item {
	min-width: 0 !important;
}
.theme-blue .bg-purple {
	background-color: #9510ac;
	color: white;
}
.them-edit-link {
	position: absolute;
	top: 10px;
	right: 100px;
	color: black;
	font-size: 40px;
}
.them-edit-link a {
	text-decoration: none;
}
.github-link {
	position: absolute;
	top: 10px;
	right: 20px;
	color: black;
}
.wrapper {
	width: 100%;
	height: calc(100vh - 67px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.header h3 {
	font-weight: 300;
	margin: 0 0 10px 0;
	color: gray;
}
.mt-2 {
	margin-top: 1.5rem;
}
#leftbar table {
	border-collapse: separate;
	border-spacing: 0 10px;
	margin-top: -10px;
	width: 100%;
}
#leftbar td[draggable*="true"] {
	border: solid 2px #333;
}
#leftbar td {
	border: solid 2px var(--border-color);
	border-style: solid none;
}
#leftbar td:first-child {
	border-left-style: solid;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
#leftbar td:last-child {
	border-right-style: solid;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}
.drag-drawflow {
	line-height: 22px;
	/* border-bottom: 1px solid var(--border-color); */
	padding: 5px 0 5px 10px;
	cursor: move;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	font-weight: 600;
}
.menu {
	position: absolute;
	height: 40px;
	display: block;
	background: white;
	width: 100%;
}
.menu ul {
	padding: 0px;
	margin: 0px;
	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: bold;
}
.btn-export {
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	font-weight: bold;
	border: 1px solid #0e5ba3;
	background: #4ea9ff;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	z-index: 5;
}
.btn-clear {
	float: right;
	position: fixed;
	/* top: 10px; */
	right: 15px;
	color: white;
	font-weight: bold;
	/* border: 1px solid #96015b; */
	background: #5555558f;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	z-index: 5;
	margin-top: 10px;
}
.swal-wide {
	width: 80% !important;
}
.btn-lock {
	float: right;
	position: fixed;
	bottom: 10px;
	right: 140px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 24px;
	color: white;
	padding: 5px 10px;
	background: #5555558f;
	border-radius: 4px;
	border-right: 1px solid var(--border-color);
	z-index: 5;
	cursor: pointer;
}
.bar-zoom {
	float: right;
	position: fixed;
	bottom: 10px;
	right: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 24px;
	color: white;
	padding: 5px 10px;
	background: #5555558f;
	border-radius: 4px;
	border-right: 1px solid var(--border-color);
	z-index: 5;
}
.bar-zoom svg {
	cursor: pointer;
	padding-left: 10px;
}
.bar-zoom svg:nth-child(1) {
	padding-left: 0px;
}
.wrapper .theme-hyper .el-card__body {
	padding: 10px 20px !important;
}
#drawflow {
	position: relative;
	width: calc(100% - 260px);
	height: 100%;
	/* 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);
}

/* Editing Drawflow */
.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: 0px;
	width: 200px;
}
.drawflow .drawflow-node.selected {
	background: white;
	border: 2px solid #4ea9ff;
	-webkit-box-shadow: 0 1px 10px 0px #4ea9ff;
	box-shadow: 0 1px 10px 1px #4ea9ff;
}
.drawflow .connection .main-path {
	stroke: #4ea9ff;
	stroke-width: 2px;
}
.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: white;
}
.drawflow>.drawflow-delete {
	border: 2px solid #43b993;
	background: white;
	color: #43b993;
	-webkit-box-shadow: 0 2px 20px 2px #43b993;
	box-shadow: 0 2px 20px 2px #43b993;
}
.drawflow-delete {
	border: 2px solid #4ea9ff;
	background: white;
	color: #4ea9ff;
	-webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
	box-shadow: 0 2px 20px 2px #4ea9ff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	line-height: unset;
}
.drawflow-node .title-box {
	height: 38px;
	line-height: 38px;
	border-bottom: 1px solid #e9e9e9;
	border-radius: 4px 4px 0px 0px;
	padding-left: 10px;
}
.bg-blue {
	background-color: #1999af;
	color: #fff;
}
.bg-dark {
	background-color: #333;
	color: #fff;
}
.bg-lightblue {
	background-color: #63c2d2;
	color: #fff;
}
.drawflow .title-box svg {
	position: initial;
}
.drawflow-node .box {
	padding: 10px;
	font-size: 14px;
	color: #555555;
}
.drawflow-node .box p {
	margin-top: 5px;
	word-break: break-all;
	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: #555555;
}
.drawflow-node textarea {
	height: 100px;
}
.drawflow-node.personalized {
	background: red;
	height: 200px;
	text-align: center;
	color: white;
}
.drawflow-node.personalized .input {
	background: yellow;
}
.drawflow-node.personalized .output {
	background: green;
}
.drawflow-node.personalized.selected {
	background: blue;
}
.drawflow .connection .point {
	stroke: var(--border-color);
	stroke-width: 2;
	fill: white;
	-webkit-transform: translate(-9999px, -9999px);
	        transform: translate(-9999px, -9999px);
}
.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
	fill: #4ea9ff;
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	z-index: 7;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: 15% auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 400px;
	/* Could be more or less, depending on screen size */
}

/* The Close Button */
.modal .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}
@media only screen and (max-width: 768px) {
.modal-content {
		width: 80%;
}
.col .drag-drawflow span {
		display: none;
}
#drawflow {
		height: 100%;
}
.box-card {
		height: 100%;
}
}
.theme-default .el-dialog .save-as-form .el-form-item {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 250px;
	padding: 0 10px;
	margin-top: 10px;
}


.box-card[data-v-371e77bd] {
	height: 100%;
	overflow: scroll !important;
}