.flex-row,
.flex-column {
  display: flex;
  flex-flow: wrap;
  gap: 1rem;
  justify-content: space-between
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

  .flex-row.nowrap,
  .flex-column.nowrap {
    flex-flow: nowrap
  }

  .flex-row > *,
  .flex-column > * {
    flex: 1;
  }

  .flex-row > .flex-0,
  .flex-column > .flex-0 {
    flex: 0;
  }

  .flex-row input[disabled],
  .flex-row textarea[disabled],
  .flex-row select[disabled],
  .flex-column input[disabled],
  .flex-column textarea[disabled],
  .flex-column select[disabled] {
    width: calc(100% - 10px);
  }


.flex {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
}

  .flex.full-width {
    max-width: 100%;
    width: 100%;
    margin: auto;
  }

  .flex.nowrap {
    flex-flow: nowrap !important;
  }

  .flex.wrap {
    flex-flow: wrap !important;
  }

  .flex.align-items-center {
    align-items: center !important;
  }

  .flex.align-items-start {
    align-items: start !important;
  }

  .flex.justify-content-start {
    justify-content: flex-start !important;
  }

  .flex.justify-content-center {
    justify-content: center !important;
  }

  .flex.justify-content-end {
    justify-content: flex-end !important;
  }

  .flex.justify-content-between {
    justify-content: space-between !important;
  }

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 0.75rem !important;
}

.gap-4 {
  gap: 1rem !important;
}