.splitter {
  background: none;
  background: #f8f8fa !important;
}
.splitter:hover {
  background: none;
}
.vue-splitter .splitter::before {
  content: "";
  display: block;
  background: rgba(191, 191, 191, 0.2);
  height: 100%;
  width: 5px;
  border-radius: 2px;
  //margin-top: calc(23vh - 20px);
}

.right-pane .splitter::before {
  content: "";
  display: block;
  border-radius: 2px;
  background: rgba(191, 191, 191, 1);
  height: 5px;
  width: 70px;
  margin: 0 auto;
}

.vue-splitter .splitter:hover::before {
  background: rgba(153, 153, 153, 0.34);
}
.right-pane .splitter:hover::before {
  background: rgba(153, 153, 153, 1) !important;
}

.vue-splitter .splitter {
}

.card-shadow {
  box-shadow: 0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03);
}

.node-selected {
  transition: all 0.2s ease-out;
  outline: 1.5px solid #60a5fa !important;
  box-shadow: 0 0 0 5px #cbdffe99, 0 4px 12px #00000014, 0 0 0 1px #60a5fa,
  inset 0 0 1px 1px #fff9 !important;
  transform: translateY(-1px);
}

.custom-node {
  outline: 1px solid #d9dade;
  box-shadow: 0 2px 4px -1px #00000014, inset 0 0 1px 1px #fff9;
}
.custom-node:hover {
  transition: all 0.2s ease-out;
  outline: 1.5px solid #60a5fa !important;
}

.vue-flow__handle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cdcdcf;
  border: 1px solid;
  box-sizing: border-box;
  border-color: #bcbcbca8;
}

.vue-flow__handle-right{
  right: -12px !important;
}

.vue-flow__handle-left{
  left: -13px !important;
}

.pin-title {
  font-weight: 500;
  color: #18181b;
  padding: 5px 0 9px;
  position: relative;
}
.hover-input {
  margin-left: 2px !important;
  background: transparent !important;
  .n-input-wrapper {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .n-input__border {
    border: none !important;
  }
}

.hover-button {
  color: #3c9bff !important;
  .n-button__state-border {
    border: 1px solid #3c9bff !important;
  }
}

.vue-flow__edge .line-active {
  stroke: #3b82f6 !important;
  stroke-width: 2px;
  transition: opacity 0.5s;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.dot-pulse {
  position: relative;
  left: -9999px;
  width: 3px;
  height: 3px;
  border-radius: 5px;
  background-color: #99999c;
  color: #99999c;
  box-shadow: 9984px 0 0 0 #99999c,9999px 0 0 0 #99999c,10014px 0 0 0 #99999c;
  animation: dotPulse 1.5s infinite linear
}

@keyframes dotPulse {
  0% {
    box-shadow: 9984px 0 0 -5px #99999c,9999px 0 0 0 #99999c,10014px 0 0 2px #99999c
  }

  25% {
    box-shadow: 9984px 0 0 0 #99999c,9999px 0 0 2px #99999c,10014px 0 0 0 #99999c
  }

  50% {
    box-shadow: 9984px 0 0 2px #99999c,9999px 0 0 0 #99999c,10014px 0 0 -5px #99999c
  }

  75% {
    box-shadow: 9984px 0 0 0 #99999c,9999px 0 0 -5px #99999c,10014px 0 0 0 #99999c
  }

  100% {
    box-shadow: 9984px 0 0 -5px #99999c,9999px 0 0 0 #99999c,10014px 0 0 2px #99999c
  }
}

.custom-form-item {
  .n-form-item-feedback-wrapper {
    min-height: 8px !important;
  }
}

.min-select {
  .n-base-selection-input {
    padding-left: 8px !important;
  }
}

.min-collapse {
  .n-collapse-item-arrow {
    font-size: 14px !important;
  }
}
