body {
  margin: 0;
  min-height: 100vh;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.settings-grid {
  display: grid;
  place-content: center;
  place-items: center;
  grid-template-columns: repeat(2, max-content);
  column-gap: 1em;
}
.settings-grid > label {
  grid-column: 1 / 2;
}
.settings-grid > input, .settings-grid > select {
  grid-column: 2 / 3;
  justify-self: start;
}
.settings-grid [title] {
  border-bottom: 1px dashed black;
  cursor: help;
}

input:invalid {
  border-color: red;
}