/* The system's own styles, on top of Bootstrap. Colours use Bootstrap's variables so they
   follow light and dark mode. */

/* A red asterisk after the label of a field that must be filled in: either a label marked
   "required", or a label directly followed by a required input. */
.form-label.required::after,
th.required::after,
.form-label:has(+ input[required], + select[required], + textarea[required])::after {
  content: " *";
  color: var(--bs-danger);
  font-weight: bold;
}

.required-note::before {
  content: "* ";
  color: var(--bs-danger);
  font-weight: bold;
}

/* The company's logo in the top bar, beside its name. */
.company-logo {
  height: 28px;
  max-width: 140px;
  object-fit: contain;
}

/* Most logos are dark on a see-through background, which vanishes on the dark top bar. */
[data-bs-theme="dark"] .company-logo {
  background: #fff;
  border-radius: 4px;
  padding: 2px 4px;
}