:root {
  --dfBackgroundColor: rgba(255, 255, 255, 1);
  --dfBackgroundSize: 7px;
  --dfBackgroundImage: radial-gradient(rgba(242, 242, 242, 1) 1px, rgba(251, 251, 251, 0.886) 1px);
  --dfNodeType: flex;
  --dfNodeTypeFloat: none;
  --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
  --dfNodeTextColor: #000000;
  --dfNodeBorderSize: 0px;
  --dfNodeBorderColor: #000000;
  --dfNodeBorderRadius: 1px;
  --dfNodeMinHeight: 40px;
  --dfNodeMinWidth: 160px;
  --dfNodePaddingTop: 15px;
  --dfNodePaddingBottom: 15px;
  --dfNodeBoxShadowHL: 0px;
  --dfNodeBoxShadowVL: 1px;
  --dfNodeBoxShadowBR: 3px;
  --dfNodeBoxShadowS: 0px;
  --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.21);

  --dfNodeHoverBackgroundColor: rgba(255, 255, 255, 1);
  --dfNodeHoverTextColor: #000000;
  --dfNodeHoverBorderSize: 1px;
  --dfNodeHoverBorderColor: rgba(9, 129, 63, 0.46);
  --dfNodeHoverBorderRadius: 2px;

  --dfNodeHoverBoxShadowHL: 0px;
  --dfNodeHoverBoxShadowVL: 0px;
  --dfNodeHoverBoxShadowBR: 0px;
  --dfNodeHoverBoxShadowS: 0px;
  --dfNodeHoverBoxShadowColor: null;

  --dfNodeSelectedBackgroundColor: rgba(252, 252, 252, 1);
  --dfNodeSelectedTextColor: rgba(7, 7, 7, 0.79);
  --dfNodeSelectedBorderSize: 2px;
  --dfNodeSelectedBorderColor: rgba(17, 169, 65, 1);
  --dfNodeSelectedBorderRadius: 3px;

  --dfNodeSelectedBoxShadowHL: 0px;
  --dfNodeSelectedBoxShadowVL: 0px;
  --dfNodeSelectedBoxShadowBR: 0px;
  --dfNodeSelectedBoxShadowS: 0px;
  --dfNodeSelectedBoxShadowColor: null;

  --dfInputBackgroundColor: rgba(17, 169, 65, 1);
  --dfInputBorderSize: 0px;
  --dfInputBorderColor: null;
  --dfInputBorderRadius: 50px;
  --dfInputLeft: -27px;
  --dfInputHeight: 20px;
  --dfInputWidth: 20px;

  --dfInputHoverBackgroundColor: #ffffff;
  --dfInputHoverBorderSize: 1px;
  --dfInputHoverBorderColor: rgba(17, 169, 65, 1);
  --dfInputHoverBorderRadius: 50px;

  --dfOutputBackgroundColor: rgba(123, 127, 133, 0.84);
  --dfOutputBorderSize: 0px;
  --dfOutputBorderColor: #000000;
  --dfOutputBorderRadius: 50px;
  --dfOutputRight: -3px;
  --dfOutputHeight: 20px;
  --dfOutputWidth: 20px;

  --dfOutputHoverBackgroundColor: #ffffff;
  --dfOutputHoverBorderSize: 1px;
  --dfOutputHoverBorderColor: rgba(23, 170, 40, 0.84);
  --dfOutputHoverBorderRadius: 50px;

  --dfLineWidth: 1px;
  --dfLineColor: rgba(17, 169, 65, 1);
  --dfLineHoverColor: #4682b4;
  --dfLineSelectedColor: rgba(211, 22, 22, 1);

  --dfRerouteBorderWidth: 1px;
  --dfRerouteBorderColor: #000000;
  --dfRerouteBackgroundColor: #ffffff;

  --dfRerouteHoverBorderWidth: 2px;
  --dfRerouteHoverBorderColor: #000000;
  --dfRerouteHoverBackgroundColor: #ffffff;

  --dfDeleteDisplay: block;
  --dfDeleteColor: rgba(200, 22, 22, 1);
  --dfDeleteBackgroundColor: rgba(255, 255, 255, 1);
  --dfDeleteBorderSize: 1px;
  --dfDeleteBorderColor: rgba(164, 16, 16, 1);
  --dfDeleteBorderRadius: 50px;
  --dfDeleteTop: -20px;

  --dfDeleteHoverColor: rgba(255, 255, 255, 1);
  --dfDeleteHoverBackgroundColor: rgba(201, 17, 17, 1);
  --dfDeleteHoverBorderSize: 0px;
  --dfDeleteHoverBorderColor: rgba(177, 15, 15, 1);
  --dfDeleteHoverBorderRadius: 50px;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}


#drawflow {
  background: var(--dfBackgroundColor);
  background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
  background-image: var(--dfBackgroundImage);
}

.drawflow .drawflow-node {
  display: var(--dfNodeType);
  background: var(--dfNodeBackgroundColor);
  color: var(--dfNodeTextColor);
  border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
  border-radius: var(--dfNodeBorderRadius);
  min-height: var(--dfNodeMinHeight);
  width: auto;
  min-width: var(--dfNodeMinWidth);
  padding-top: var(--dfNodePaddingTop);
  padding-bottom: var(--dfNodePaddingBottom);
  -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
  box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}

.drawflow .drawflow-node:hover {
  background: var(--dfNodeHoverBackgroundColor);
  color: var(--dfNodeHoverTextColor);
  border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
  border-radius: var(--dfNodeHoverBorderRadius);
  -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
  box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
}

.drawflow .drawflow-node.selected {
  background: var(--dfNodeSelectedBackgroundColor);
  color: var(--dfNodeSelectedTextColor);
  border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
  border-radius: var(--dfNodeSelectedBorderRadius);
  -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
  box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
}

.drawflow .drawflow-node .input {
  left: var(--dfInputLeft);
  background: var(--dfInputBackgroundColor);
  border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
  border-radius: var(--dfInputBorderRadius);
  height: var(--dfInputHeight);
  width: var(--dfInputWidth);
}

.drawflow .drawflow-node .input:hover {
  background: var(--dfInputHoverBackgroundColor);
  border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
  border-radius: var(--dfInputHoverBorderRadius);
}

.drawflow .drawflow-node .outputs {
  float: var(--dfNodeTypeFloat);
}

.drawflow .drawflow-node .output {
  right: var(--dfOutputRight);
  background: var(--dfOutputBackgroundColor);
  border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
  border-radius: var(--dfOutputBorderRadius);
  height: var(--dfOutputHeight);
  width: var(--dfOutputWidth);
}

.drawflow .drawflow-node .output:hover {
  background: var(--dfOutputHoverBackgroundColor);
  border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
  border-radius: var(--dfOutputHoverBorderRadius);
}

.drawflow .connection .main-path {
  stroke-width: var(--dfLineWidth);
  stroke: var(--dfLineColor);
}

.drawflow .connection .main-path:hover {
  stroke: var(--dfLineHoverColor);
}

.drawflow .connection .main-path.selected {
  stroke: var(--dfLineSelectedColor);
}

.drawflow .connection .point {
  stroke: var(--dfRerouteBorderColor);
  stroke-width: var(--dfRerouteBorderWidth);
  fill: var(--dfRerouteBackgroundColor);
}

.drawflow .connection .point:hover {
  stroke: var(--dfRerouteHoverBorderColor);
  stroke-width: var(--dfRerouteHoverBorderWidth);
  fill: var(--dfRerouteHoverBackgroundColor);
}

.drawflow-delete {
  display: var(--dfDeleteDisplay);
  color: var(--dfDeleteColor);
  background: var(--dfDeleteBackgroundColor);
  border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
  border-radius: var(--dfDeleteBorderRadius);
}

.parent-node .drawflow-delete {
  top: var(--dfDeleteTop);
}

.drawflow-delete:hover {
  color: var(--dfDeleteHoverColor);
  background: var(--dfDeleteHoverBackgroundColor);
  border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
  border-radius: var(--dfDeleteHoverBorderRadius);
}

.drawflow-node .title-box {
  height: 50px;
  line-height: 50px;
  background: #f3f3f3;
  padding-left: 10px;
  text-align: center;
  margin-bottom: 8px;
}

#drawflow {
  width: 100%;
  height: calc(100vh - 110px);
}

.drawflow-btns-drag {
  z-index: 99;
  position: fixed;
  bottom: 10px;
  float: left;
  left: 2px;
}

.swal-wide {
  width: 80% !important;
}

.btn-lock {
  float: right;
  position: fixed;
  bottom: 10px;
  right: 140px;
  display: flex;
  font-size: 24px;
  color: white;
  padding: 5px 10px;
  background: #555555;
  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: flex;
  font-size: 24px;
  color: white;
  padding: 5px 10px;
  background: #555555;
  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;
}

.footer-diagram {
  font-size: 11px;
  position: relative;
  top: 25px;
  float: right;
  color: #555;
}

.loading {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.btn-back {
  position: relative;
  top: -13px;
}

.input-name {
  height: 15px !important;
  font-size: 12px !important;
}

.card {
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.card-drag {
  padding-top: 10px;
  align-content: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.full-screen {
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 38px;
}

.invalid-option {
  display: none;
}


.triangle {
  width: 0 !important;
  height: 0 !important;
  border-left: 100px solid #fafafa00 !important;
  border-right: 100px solid #4f484800 !important;
  border-bottom: 150.4px solid rgb(117 117 117) !important;
  background: #fff0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
  padding: 0 !important;
  min-height: 0px !important;
  min-width: 0px !important;
  color: #fff !important;
}

.triangle .inputs {
  top: 3px;
  position: relative;
  right: -17px;
}

.triangle .outputs {
  top: 146px;
  position: relative;
  left: -13px;
}

.triangle a {
  left: -15px;
  position: relative;
  top: 40px;
}

.triangle .footer-diagram {
  color: #fff;
  position: relative;
  top: 93px;
  width: 129px;
  text-align: center;
  left: 60px;
}

.send-image {
  display: none;
}

.send-image input {
  position: absolute;
  width: 200px;
  border: solid 1px;
  height: 200px;
  display: block;
  left: 30%;
  opacity: 0;
  z-index: 9999;
}

.send-image img {
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #0000000f;
  border-radius: 5px;
}

.send-audio {
  display: none;
}

.send-audio audio {
  width: 100%;
  position: relative;
  top: 28px;
  object-fit: cover;
}

.send-video video {
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
  border-radius: 3px;
}

.send-request {
  display: none;
}

.save-answer {
  display: none;
}

.send-sectors {
  display: none;
}

.btn-restart-flow {
  width: 50px;
  position: absolute;
  float: right;
  right: 23px;
  top: 11px;
}

.footer-diagram button {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  left: 18px;
  background: #10a941;
  width: 100px;
  border: 0;
  text-align: center;
  color: #fff;
  padding: 0px;
  border-radius: 2px;
}

.footer-diagram button text {
  position: relative;
  top: 5px;
  left: 12px;
}


#sortableList {
  cursor: grab;
}

#sortableList.sortable-dragging {
  cursor: grabbing;
}

#sortableList li {
  padding: 5px;
  border: solid 1px #e4e3e3;
  margin-bottom: 6px;
}

.options-bot {
  display: none;
}


.sector {
  background-color: #ffc107 !important;
}

.sector .footer-diagram {
  color: #f3f3f3 !important;
}

.sector input {
  color: #f3f3f3 !important;
}


.question {
  background-color: #05a8f2 !important;
}

.question .footer-diagram {
  color: #f3f3f3 !important;
}

.question input {
  color: #f3f3f3 !important;
}

.request {
  background-color: #4a148c !important;
}

.request .footer-diagram {
  color: #f3f3f3 !important;
}

.request input {
  color: #f3f3f3 !important;
}

.video {
  background-color: #20e8b6 !important;
}

.video .footer-diagram {
  color: #f3f3f3 !important;
}

.video input {
  color: #f3f3f3 !important;
}

.audio {
  background-color: #00897b !important;
}

.audio .footer-diagram {
  color: #f3f3f3 !important;
}

.audio input {
  color: #f3f3f3 !important;
}

.flow-ai {
  background-color: #ade700 !important;
}