:root {
  --app-toast-top-offset: 1rem;
  --app-toast-right-offset: 1rem;
}

#appToastContainer {
  position: fixed;
  top: var(--app-toast-top-offset);
  right: var(--app-toast-right-offset);
  left: auto;
  z-index: 1305;
  pointer-events: none;
}

#appToastContainer .toast {
  pointer-events: auto;
  width: min(26rem, calc(100vw - 2rem));
}

body.modal-open #appToastContainer {
  z-index: 1048;
}

@media (max-width: 576px) {
  #appToastContainer {
    left: 0.75rem;
    right: 0.75rem;
  }

  #appToastContainer .toast {
    width: 100%;
  }
}

.field-validation-valid {
  display: none;
}

.field-validation-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--bs-danger-text-emphasis, #b02a37);
}

.invalid-feedback.field-validation-error,
.field-validation-error.invalid-feedback {
  display: block;
}

.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error,
textarea.input-validation-error {
  border-color: var(--bs-danger, #dc3545) !important;
}

.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  display: block;
}

.validation-summary-errors ul {
  margin-bottom: 0;
}

[data-theme="dark"] .field-validation-error {
  color: #ffb3bc;
}

[data-theme="dark"] .validation-summary-errors {
  color: #ffb3bc;
  background-color: rgba(220, 53, 69, 0.22);
  border-color: rgba(220, 53, 69, 0.45);
}