.pipe {
  border: 1px solid black;
  background: lightgrey;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-rows: 25px;
  grid-auto-columns: 25px;
  grid-row: 1;
  grid-auto-flow: column;
  overflow: hidden;
}

.pipe-connector {
  border: 1px solid black;
  background: silver;
}

.data-source,
.data-sink,
.filter {
  border: 1px solid black;
  background: grey;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-rows: 25px;
  grid-auto-columns: 25px;
  overflow: hidden;
}


.object-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 2.5px;
}

.object-square {
  width: 20px;
  height: 20px;
  margin: 2.5px;;
}

.object-triangle {
  height: 0px;
  width: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: 2.5px;;
}

.color-red {
  background: red;
}

.color-red-triangle {
  border-bottom: 20px solid red;
}

.color-blue {
  background: blue;
}

.color-blue-triangle {
  border-bottom: 20px solid blue;
}

.color-yellow {
  background: yellow;
}

.color-yellow-triangle {
  border-bottom: 20px solid yellow;
}

.color-green {
  background: green;
}

.color-green-triangle {
  border-bottom: 20px solid green;
}

.grid0{
  grid-column-start: 0;
  grid-column-end: 0;
}

.grid1 {
  grid-column-start: 1;
  grid-column-end: 1;
}

.grid2 {
  grid-column-start: 2;
  grid-column-end: 2;
}

.grid3 {
  grid-column-start: 3;
  grid-column-end: 3;
}

.grid4 {
  grid-column-start: 4;
  grid-column-end: 4;
}