.form-hint {
  font-size: small;
}

ul.form-hint-list {
  margin: 0;
  padding-left: var(--app-spacing);
}

ul.form-hint-list li {
  margin: 0;
}

ul.form-hint-list li.is-valid {
  color: var(--app-form-element-valid-border-color);
}

ul.form-hint-list li.is-invalid {
  color: var(--app-form-element-invalid-border-color);
}

ul.form-hint-list li.is-valid:after {
  content: "\F26B";
  font-family: "Bootstrap-icons";
  margin-left: 4px;
  font-size: 10px;
}

ul.form-hint-list li.is-invalid:after {
  content: "\F33A";
  font-family: "Bootstrap-icons";
  margin-left: 4px;
  font-size: 10px;
}

label:has([type="checkbox"], [type="radio"]) {
  display: flex;
  line-height: 1;
  align-items: center;
}

input[type="color"] {
    padding: 0;
    width: 42px;
    border: 0;
    margin: 0;
    height: 42px;
    flex-shrink: 0;
}

label:has(input[type="color"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

small.muted {
    display: block;
    width: 100%;
    color: var(--app-muted-color);
}