.popUpBackground {
  position: absolute;
  height: var(--flowHeight);
  width: 100%;
  min-width: var(--flowProviderMinWidth);

  border-style: none;

  background-color: rgba(175, 175, 175, 0);

  z-index: 3;
}

.popUp {
  position: absolute;

  border: 1px solid black;
  border-radius: 5px;

  background-color: white;
  padding: 5px;

  color: black;

  z-index: 4;

  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.centerPopUp {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
}

.connPopUp {
  min-width: calc(var(--flowProviderMinWidth) - 30px);
  max-width: 800px;
  width: calc(var(--flowContainerWidth) - 10%);
}

.connPopUp .title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.connPopUp .connFlowContainer {
  border-radius: var(--borderRadius);
  background-color: var(--backgroundColor);

  width: 90%;
}

.connPopUp .hover {
  padding-left: 5px;
  padding-right: 5px;
}

.connPopUp .flowNode {
  background-color: lightgreen;
  border-color: darkgreen;
}

.connPopUp .connNode {
  background-color: rgb(255, 255, 144);
  border-color: rgb(160, 160, 0);
}

.connPopUp .forbiddenNode {
  background-color: #ff9a56;
  border-color: #d52d00;
}

.fullPullPopUp {
  padding: 0px;
}

.fullPullPopUp .portName {
  width: 100px;
}

.formPopUp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 5px;
}

.formPopUp .field {
  display: flex;
  flex-direction: nowrap;
  justify-content: space-between;
  margin-bottom: 2px;

  width: 100%;
}

.formPopUp .field .label {
  max-width: 75px;
  margin-right: 5px;
}

.formPopUp .field .inputs input {
  margin: 2px;
}

.formPopUp .field .inputs .defaultTextInput {
  width: 75px;
}

.formPopUp .field input {
  margin-left: auto;
  margin-right: 0;
}

.formPopUp .controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.errorPopUp {
  height: fit-content;
  width: fit-content;

  white-space: pre-wrap;

  background-color: rgba(175, 175, 175);
  border-width: 2px;
  padding: 5px;
}

.errorPopUp ul {
  padding-left: 20px;
}
