.auth-banner {
  --auth-banner-bg: #e8f1fb;
  --auth-banner-border: #b6d4fe;
  --auth-banner-text: #084298;
  --auth-banner-icon: #0d6efd;
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--auth-banner-border);
  border-radius: 0.5rem;
  background: var(--auth-banner-bg);
  color: var(--auth-banner-text);
  box-shadow: none;
  position: static;
  overflow: hidden;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.auth-banner.d-block {
  display: flex !important;
}

.auth-banner-success {
  --auth-banner-bg: #e8f6ee;
  --auth-banner-border: #b7e0c7;
  --auth-banner-text: #0f5132;
  --auth-banner-icon: #157347;
  --auth-banner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

.auth-banner-error {
  --auth-banner-bg: #fdecec;
  --auth-banner-border: #f5c2c7;
  --auth-banner-text: #842029;
  --auth-banner-icon: #b42318;
  --auth-banner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}

.auth-banner-warning {
  --auth-banner-bg: #fff6e8;
  --auth-banner-border: #f5d7a1;
  --auth-banner-text: #7a4e00;
  --auth-banner-icon: #b76e00;
  --auth-banner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.auth-banner-info {
  --auth-banner-bg: #e8f1fb;
  --auth-banner-border: #b6d4fe;
  --auth-banner-text: #084298;
  --auth-banner-icon: #0d6efd;
  --auth-banner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

.auth-banner-icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  background-color: var(--auth-banner-icon);
  -webkit-mask: var(--auth-banner-glyph) center / contain no-repeat;
  mask: var(--auth-banner-glyph) center / contain no-repeat;
}

.auth-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.auth-banner-close {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--auth-banner-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.auth-banner-close::before {
  content: "\00d7";
}

.auth-banner-close:hover,
.auth-banner-close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: 2px solid var(--auth-banner-icon);
  outline-offset: 1px;
}

.auth-field-hint {
  margin: 0.35rem 0 0;
  color: #495057;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.auth-field-error.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  color: #842029;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 575.98px) {
  .auth-banner {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.7rem;
    font-size: 0.8125rem;
  }
}