form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
}

.input-group {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(50% - (var(--flex-gap) / 2));
}

.input-group.full {
  flex: 0 0 100%;
}

.input-group label {
  padding: 0.2rem;
}

.input-group input,
.input-group select {
  padding: 0.2rem;
  line-height: 1.2rem;
  border-radius: 0.2rem;
  border: 1px solid var(--color-lowaccent);
}

dialog {
  max-width: 100%;
  width: 350px;
  border: var(--color-lowaccent);
  border-radius: 1rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.buttons {
  display: flex;
  flex: 0 0 100%;
  gap: var(--flex-gap);
}

.buttons button {
  flex: 0 0 calc(50% - (var(--flex-gap) / 2));
  border: 1px solid var(--color-lowaccent);
  padding: 0.4rem 0.8rem;
}

.buttons button.closeButton {
  background-color: var(--color-lowaccent);
  border-color: var(--color-lowaccent);
  color: white;
}

.buttons button.saveButton {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.input-group.checkbox {
  display: flex;
  flex-direction: row;
  accent-color: var(--color-accent);
}