.drawer header {
  height: 66px;
  border-bottom: 1px solid var(--border-color);
  padding-left: 20px;
}
.drawer header h2 {
  margin: 0px;
  line-height: 66px;
}
.drawer header a {
  color: black;
}
.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;
}

.drawer .wrapper {
  width: 100%;
  height: calc(100vh);
  display: flex;
}

.drawer .col {
  overflow: auto;
  width: 50px;
  height: 100%;
  border-right: 1px solid var(--border-color);
}

.drag-drawflow {
  width:50px;
  background-color: #051c32;
  text-align: center;
  align-items: center;
  display: flex;
  height: 50px  ;
  justify-content: center;
  border-bottom: 1px solid #000;
  padding-left: 20px;
  cursor: move;
  user-select: none;
}
.drawer .menu {
  position: absolute;
  height: 40px;
  display: block;
  width: 100%;
}
.drawer .menu ul {
  padding: 0px;
  margin: 0px;
  line-height: 40px;
}

.drawer .menu ul li {
  display: inline-block;
margin-left: 10px;
padding-right: 10px;
line-height: 40px;
cursor: pointer;
}

.drawer .menu ul li.selected {
  font-weight: bold;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 10px #ffae00, 0 0 20px #ffae00 inset;
  }

  50% {
    box-shadow: 0 0 5px #ffae00, 0 0 10px #ffae00 inset;
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 10px #ffae00, 0 0 20px #ffae00 inset;
  }

  50% {
    box-shadow: 0 0 5px #ffae00, 0 0 10px #ffae00 inset;
  }
}

@keyframes spin-loader {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 3px #ffae00;
  }

  50% {
    box-shadow: 0 0 8px #ffae00;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 3px #ffae00;
  }
}
@keyframes loadbar {
  0% {
    content: "[ EXPORTANDO... ░░░░░░░ ]";
  }

  20% {
    content: "[ EXPORTANDO... █░░░░░░ ]";
  }

  40% {
    content: "[ EXPORTANDO... ███░░░░ ]";
  }

  60% {
    content: "[ EXPORTANDO... █████░░ ]";
  }

  80% {
    content: "[ EXPORTANDO... ███████ ]";
  }

  100% {
    content: "[ CONCLUÍDO ✔ ]";
  }
}
.btn-export {
  position: absolute;
  top: 10px;
  right: 90px;
  padding: 10px 20px;
  background: #020514;
  border: 1px solid #fab726;
  color: #c3a86e;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 5;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  animation: pulse-glow 2.5s infinite ease-in-out;
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-export.loading {
  background: #000;
  color: #ffc94d;
  pointer-events: none;
}

.btn-export.loading .btn-content::before {
  content: "[ EXPORTANDO... ░░░░░░░ ]";
  animation: loadbar 3s steps(5) forwards;
  display: inline-block;
}

.btn-export .btn-content::before {
  content: "Exportar";
}
.btn-export::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 174, 0, 0.3), transparent);
  transition: all 0.5s ease;
}

.btn-export:hover::before {
  left: 100%;
}

.btn-export:hover {
  background-color: #000;
  color: #fff6e0;
  border-color: #ffc94d;
  transform: scale(1.05);
  animation: none;
  box-shadow: 0 0 12px #ffae00, 0 0 25px #ffae00 inset;
}

.btn-loader {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid #ffae00;
  border-radius: 50%;
  animation: spin-loader 1s linear infinite;
}

.hidden {
  display: none;
}
.btn-clear {
  float: right;
  position: absolute;
  top: 10px;
  right: 85px;
  color: white;
  font-weight: bold;
  border: 1px solid #96015b;
  background: #e3195a;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}
.swal-wide{
    width:80% !important;
}

.btn-lock {
  float: right;
  position: absolute;
  top: 10px;
  right: 230px;
  color: white;
  font-weight: bold;
  border: 1px solid #050615;
  background: #0e102b;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}

.bar-zoom {
  float: right;
  position: absolute;
  top: 10px;
  right: 200px;
  color: white;
  font-weight: bold;
  border: 1px solid #050615;
  background: #0e102b;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}
.bar-zoom svg {
  cursor: pointer;
  padding-left: 10px;
}
.bar-zoom svg:nth-child(1) {
  padding-left: 0px;
}

#drawflow {
  position: relative;
  width: calc(100vw - 90px);
  height: calc(100%);
  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);
}

@media only screen and (max-width: 768px) {
  .col {
    width: 50px;
  }
  .col .drag-drawflow span {
    display:none;
  }
  #drawflow {
    width: calc(100vw - 51px);
  }
}



/* Editing Drawflow */

.drawflow .drawflow-node {
  background: none;
  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: 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;
  /*border-bottom: 1px solid #4ea9ff;*/
}

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

.drawflow-node .title-box {
  height: 50px;
  line-height: 50px;
  background: var(--background-box-title);
  border-bottom: 1px solid #e9e9e9;
  border-radius: 4px 4px 0px 0px;
  padding-left: 10px;
}
.drawflow .title-box svg {
  position: initial;
}
.drawflow-node .box {
  padding: 10px 20px 20px 20px;
  font-size: 14px;
  color: #555555;

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

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

:root {
  --dfBackgroundColor: rgba(15, 9, 52, 1);
  --dfBackgroundSize: 0px;
  --dfBackgroundImage: 'https://galaxia.goldie.com/galaxia_controladores/_Src/drawer/galaxia.jpg';

  --dfNodeType: flex;
  --dfNodeTypeFloat: none;
  --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
  --dfNodeTextColor: #000000;
  --dfNodeBorderSize: 2px;
  --dfNodeBorderColor: rgba(92, 74, 10, 1);
  --dfNodeBorderRadius: 4px;
  --dfNodeMinHeight: 34px;
  --dfNodeMinWidth: 130px;
  --dfNodePaddingTop: 10px;
  --dfNodePaddingBottom: 10px;
  --dfNodeBoxShadowHL: 0px;
  --dfNodeBoxShadowVL: 1px;
  --dfNodeBoxShadowBR: 9px;
  --dfNodeBoxShadowS: 0px;
  --dfNodeBoxShadowColor: rgba(255, 239, 191, 1);

  --dfNodeHoverBackgroundColor: #ffffff;
  --dfNodeHoverTextColor: #000000;
  --dfNodeHoverBorderSize: 2px;
  --dfNodeHoverBorderColor: #000000;
  --dfNodeHoverBorderRadius: 4px;

  --dfNodeHoverBoxShadowHL: 0px;
  --dfNodeHoverBoxShadowVL: 2px;
  --dfNodeHoverBoxShadowBR: 15px;
  --dfNodeHoverBoxShadowS: 2px;
  --dfNodeHoverBoxShadowColor: #4ea9ff;

  --dfNodeSelectedBackgroundColor: rgba(226, 227, 249, 1);
  --dfNodeSelectedTextColor: rgba(0, 2, 3, 1);
  --dfNodeSelectedBorderSize: 2px;
  --dfNodeSelectedBorderColor: rgba(4, 26, 125, 1);
  --dfNodeSelectedBorderRadius: 4px;

  --dfNodeSelectedBoxShadowHL: 0px;
  --dfNodeSelectedBoxShadowVL: 2px;
  --dfNodeSelectedBoxShadowBR: 15px;
  --dfNodeSelectedBoxShadowS: 2px;
  --dfNodeSelectedBoxShadowColor: rgba(115, 77, 17, 1);

  --dfInputBackgroundColor: rgba(122, 156, 149, 1);
  --dfInputBorderSize: 1px;
  --dfInputBorderColor: #000000;
  --dfInputBorderRadius: 50px;
  --dfInputLeft: -25px;
  --dfInputHeight: 12px;
  --dfInputWidth: 12px;

  --dfInputHoverBackgroundColor: rgba(255, 237, 136, 1);
  --dfInputHoverBorderSize: 2px;
  --dfInputHoverBorderColor: #000000;
  --dfInputHoverBorderRadius: 50px;

  --dfOutputBackgroundColor: rgba(152, 104, 0, 1);
  --dfOutputBorderSize: 1px;
  --dfOutputBorderColor: #000000;
  --dfOutputBorderRadius: 50px;
  --dfOutputRight: -9px;
  --dfOutputHeight: 12px;
  --dfOutputWidth: 12px;

  --dfOutputHoverBackgroundColor: #ffffff;
  --dfOutputHoverBorderSize: 2px;
  --dfOutputHoverBorderColor: #000000;
  --dfOutputHoverBorderRadius: 50px;

  --dfLineWidth: 5px;
  --dfLineColor: rgba(45, 61, 118, 1);
  --dfLineHoverColor: #4682b4;
  --dfLineSelectedColor: rgba(249, 227, 170, 1);

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

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

  --dfDeleteDisplay: block;
  --dfDeleteColor: #ffffff;
  --dfDeleteBackgroundColor: #000000;
  --dfDeleteBorderSize: 2px;
  --dfDeleteBorderColor: #ffffff;
  --dfDeleteBorderRadius: 50px;
  --dfDeleteTop: -15px;

  --dfDeleteHoverColor: #000000;
  --dfDeleteHoverBackgroundColor: #ffffff;
  --dfDeleteHoverBorderSize: 2px;
  --dfDeleteHoverBorderColor: #000000;
  --dfDeleteHoverBorderRadius: 50px;

}

#drawflow {
  /*background-image: url('https://galaxia.goldie.com/galaxia_controladores/_Src/drawer/darkspace.jpg');  background-repeat: no-repeat, no-repeat; background-size: cover;*/
  background: #010f1b;
}

.drawflow .drawflow-node {
  display: flex;
  /*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 p {
  color: #fcf2c8;
  padding-top: 2px;
  padding-bottom: 2px;
}

.drawflow .drawflow-node .input {
  left: var(--dfInputLeft);
  background: var(--dfBackgroundColor);
  border: var(--dfNodeBorderSize)  solid var(--dfNodeBorderColor);
  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);
}