:root {
  --background: #303030;
  --background-secondary: #424242;
  --normal: #eee;
  --primary: #f57c00;
}

.dark {
  .app-header {
    display: flex;
    align-items: center;
    color: var(--normal) !important;
    background: #212121 !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
    overflow: visible;
    z-index: 10;
  }

  .app-info {
    color: var(--normal);
  }

  .app-watermark {
    color: black !important;
    opacity: 0.02;
  }

  .app-flow-container {
    background: var(--background);
  }

  .flow-funcs__control {
    border-bottom: solid 1px var(--primary);
  }

  .flow-funcs__container {
    background: var(--background-secondary) !important;
  }

  .flow-funcs__container .flow-funcs__header {
    color: var(--normal);
  }

  .hx-toggle-arrow.active {
    color: var(--primary) !important;
  }

  .flow-funcs__inner {
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: center;
  }

  .flow-funcs__inner .hx-collapsible {
    border: none !important;
  }

  .flow-funcs__container .item {
    color: var(--normal) !important;
    border: none !important;
  }

  .flow-funcs__group {
    padding: 10px;
    background: #323232;
  }

  .flow-funcs__control .item {
    color: var(--normal) !important;
  }

  .flow-container__control button {
    color: var(--normal) !important;
  }

  .flow-container__info {
    color: var(--normal);
  }

  .flow-node__body:hover {
    stroke: var(--primary) !important;
  }

  /*
 * LINKS
 */
  .flow-link__visible {
    stroke: var(--normal) !important;
    stroke-width: 2;
  }

  .flow-link:not(.flow-link--pointer):hover .flow-link__visible {
    stroke: var(--primary) !important;
  }

  .flow-link__head {
    fill: var(--normal) !important;
  }

  /*
 * NODES
 */
  .flow-container .flow-node {
    filter: none;
  }

  .flow-container .flow-node:hover {
    filter: url(#highlight-border);
  }

  .flow-container .flow-node__body {
    fill: transparent;
    stroke: attr(fill);
  }

  .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
    fill: var(--primary) !important;
    stroke: var(--primary) !important;
  }

  /*
 * CHAT
 */
  .flow-chat {
    background: var(--background-secondary) !important;
    color: var(--normal);
  }

  .flow-chat__toggle {
    border: none;
    background: var(--background-secondary) !important;
  }

  .flow-chat .message .text {
    color: #999;
  }

  .flow-chat input.message {
    box-shadow: none !important;
    background: var(--background) !important;
    color: var(--normal);
  }
}