.bps-cc {
  max-width: 1000px;
  margin: 1em auto;
  font-family: sans-serif;
}

.bps-cc__row {
  margin-bottom: 1em;
}

.bps-cc__columns {
  display: flex;
  gap: 1em;
}

.bps-cc__column {
  flex: 1 1 0;
  min-width: 0;
}

.bps-cc__label {
  display: block;
  margin-bottom: 0.25em;
}

.bps-cc__select,
.bps-cc__input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5em;
  padding: 0.5em;
  border-radius: 7px;
}

.bps-cc__output-value[readonly] {
  background: #f7f7f7;
  cursor: default;
}

@media (max-width: 680px) {
  .bps-cc__columns {
    flex-direction: column;
  }
}