/* light grey (pending) */
/* red */
/* orange */
/* yellow */
/* green */
/* cyan */
/* blue */
/* purple */
/* brown */
/* 17 color palettes are 1 better than 16 */
.pipeline-svg {
  display: block;
  font-family: "Iosevka", monospace;
  letter-spacing: 0.0425em;
  font-weight: bold;
  font-size: 0.65em;
  line-height: 1.4;
  background: #3d3c3c;
  flex-grow: 1;
  justify-self: stretch;
  padding: 32px;
}
.pipeline-svg .node rect {
  fill: #1e1d1d;
}
.pipeline-svg .node text {
  fill: white;
}
.pipeline-svg .node.pending rect {
  fill: #9b9b9b;
}
.pipeline-svg .node.succeeded rect {
  fill: #11c560;
}
.pipeline-svg .node.failed rect {
  fill: #ed4b35;
}
.pipeline-svg .node.errored rect {
  fill: #f5a623;
}
.pipeline-svg .node.aborted rect {
  fill: #8b572a;
}
.pipeline-svg .node.failing rect {
  fill: #f5a623;
}
.pipeline-svg .node.paused rect {
  fill: #4a90e2;
}
.pipeline-svg .node.job.no-builds rect {
  fill: #9b9b9b;
}
.pipeline-svg .node.resource a {
  color: #f5f5f5;
}
.pipeline-svg .node.pinned rect {
  fill: #5c3bd1;
}
.pipeline-svg .node.constrained-input.pinned rect {
  fill: #5c3bd1;
  opacity: 0.8;
}
.pipeline-svg .node.constrained-input.pinned image {
  opacity: 0.7;
}
.pipeline-svg .edge {
  stroke: #7a7373;
}
.pipeline-svg .edge.pending {
  stroke: #868585;
}
.pipeline-svg .edge.succeeded {
  stroke: #11c560;
}
.pipeline-svg .edge.failed {
  stroke: #ed4b35;
}
.pipeline-svg .edge.errored {
  stroke: #f5a623;
}
.pipeline-svg .edge.aborted {
  stroke: #8b572a;
}
.pipeline-svg .edge.paused {
  stroke: #4a90e2;
}
.pipeline-svg .edge.trigger-false {
  stroke-dasharray: 5, 5;
}
.pipeline-svg .node a {
  cursor: pointer;
}
.pipeline-svg .node rect {
  shape-rendering: crispEdges;
}
.pipeline-svg .edge path {
  stroke-width: 2px;
  fill: none;
}
.pipeline-svg .node text {
  fill: #fff;
}
.pipeline-svg .node.constrained-input text {
  fill: #868585;
}
.pipeline-svg .node.constrained-input.pinned text {
  fill: #fff;
  opacity: 0.7;
}
.pipeline-svg .active path {
  stroke-width: 4px;
}
.pipeline-svg .active.node rect {
  filter: url(#embiggen);
}
.pipeline-svg .active.node image {
  transform: scale(1.09) translate(-5px, -1px);
}
.pipeline-svg .active.node text {
  font-size: 1.06em;
}
.pipeline-svg .active.node use {
  transform: scale(1.09) translate(-5px, -1px);
}

.pipeline-image .pipeline-svg {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: #3d3c3c;
}

@media screen and (max-width: 768px) {
  .pipeline-svg {
    padding: 16px;
    max-width: 100%;
    overflow-x: auto;
  }

  .feature-visual .pipeline-svg {
    min-height: auto;
  }
}