.wrapper{
  display: flex;
  flex-direction: column;
  margin-top: auto;
  width: 100%;
  padding: 3px;
}
.inputs{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 10px;
  &:last-child{
    margin-bottom: 0px;
  }
  .transput{
    &:first-child{
      .portLabel, .port{
        margin-top: 3px;
      }
    }
    &:last-child{
      .portLabel, .port{
        margin-bottom: 3px;
      }
    }
  }
}
.outputs{
  display: flex;
  flex-direction: column;
  margin-left: auto;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  .transput{
    &:last-child{
      .portLabel, .port{
        margin-bottom: 2px;
      }
    }
  }
  &:first-child{
    margin-top: 2px;
  }
}
.transput{
  width: auto;
  display: flex;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 2px;
  &:first-child{
    margin-top: 0px;
  }
  &[data-controlless="true"]{
    margin-top: 2px;
    margin-bottom: 2px;
    &:first-child{
      margin-top: 0px;
    }
  }
  &[data-controlless="false"]{
    margin-top: 2px;
    margin-bottom: 2px;
  }
}
.controls{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.portLabel{
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}
.port{
  width: 14px;
  height: 14px;
  background: linear-gradient(to bottom, #acb1b4, #919699);
  border-radius: 100%;
  margin-right: 5px;
  margin-left: -11px;
  flex: 0 0 auto;
  box-shadow: 0px 2px 1px 0px rgba(0,0,0,.6);
  &:last-child{
    margin-right: -11px;
    margin-left: 5px;
  }
  &[data-port-color="red"]{
    background: linear-gradient(to bottom, #fa4a6f, #c22e4d);
  }
  &[data-port-color="purple"]{
    background: linear-gradient(to bottom, #9e55fb, #6024b6);
  }
  &[data-port-color="blue"]{
    background: linear-gradient(to bottom, #4284f7, #2867d4);
  }
  &[data-port-color="green"]{
    background: linear-gradient(to bottom, #31dd9f, #11ad7a);
  }
  &[data-port-color="yellow"]{
    background: linear-gradient(to bottom, #d6bf47, #9d8923);
  }
  &[data-port-color="orange"]{
    background: linear-gradient(to bottom, #fa7841, #c94b23);
  }
  &[data-port-color="pink"]{
    background: linear-gradient(to bottom, #fe8aeb, #e046c3);
  }
  &[data-port-color="tuple"]{
    background: linear-gradient(to bottom, #bf00ff, #bf00ff);
  }
  &[data-port-color="dict"]{
    background: linear-gradient(to bottom, #8fc409, #00e1ff);
  }
  &[data-port-color="control"]{
    background: linear-gradient(to bottom, #ffffff, #ffffff);
  }
}
