ul.messagelist {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

ul.messagelist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 14px !important;
  border-radius: var(--radius-inputs);
  font-size: 13px;
  line-height: 1.45;
  background-image: none !important;
  background-color: var(--surface-raised) !important;
  border: 1px solid var(--surface-border);
  color: var(--color-smoke) !important;
}

ul.messagelist li::before {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
}

ul.messagelist li.success {
  border-color: rgba(62, 207, 142, 0.16);
  color: var(--color-snow) !important;
}

ul.messagelist li.success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 8l2 2 4-4' stroke='%233ecf8e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

ul.messagelist li.warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 5v4M8 11h.01' stroke='%237a7a7a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

ul.messagelist li.error {
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--text-error) !important;
}

ul.messagelist li.error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 6l4 4M10 6l-4 4' stroke='%23f87171' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.errornote {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.16) !important;
  color: var(--text-error) !important;
  border-radius: var(--radius-inputs);
  font-size: 13px;
}