@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.simple-message-panel-error {
  color: var(--theme-default-text-red);
}

.simple-message-panel-success {
  color: var(--theme-default-text-green);
}

.message-panel-error,
.message-panel-warning,
.message-panel-success,
.message-panel-info,
.message-panel-tip {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: black;
  border-radius: 0.313rem;
  border: 2px solid;
  padding: 1rem;
  animation: fadeIn 0.3s ease-out;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.message-panel-error::before,
.message-panel-warning::before,
.message-panel-success::before,
.message-panel-info::before,
.message-panel-tip::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
}

.message-panel-error {
  background-color: var(--theme-default-message-error-background);
  border-color: var(--theme-default-message-error-border);
}

.message-panel-error::before {
  background-image: url("icons/message_panel_error.svg");
}

.message-panel-warning {
  background-color: var(--theme-default-message-warning-background);
  border-color: var(--theme-default-message-warning-border);
}

.message-panel-warning::before {
  background-image: url("icons/message_panel_warning.svg");
}

.message-panel-success {
  background-color: var(--theme-default-message-success-background);
  border-color: var(--theme-default-message-success-border);
}

.message-panel-success::before {
  background-image: url("icons/message_panel_success.svg");
}

.message-panel-info {
  background-color: var(--theme-default-message-info-background);
  border-color: var(--theme-default-message-info-border);
}

.message-panel-info::before {
  background-image: url("icons/message_panel_info.svg");
}

.message-panel-tip {
  background-color: var(--theme-default-message-tip-background);
  border-color: var(--theme-default-message-tip-border);
}

.message-panel-tip::before {
  background-image: url("icons/message_panel_tip.svg");
}

.action-btn {
  color: var(--theme-default-link);
  text-decoration: none;
  box-shadow: none;
  margin-left: auto;
}

.action-btn:focus,
.action-btn:hover {
  color: var(--theme-default-link-hover);
  text-shadow: 0.03ex 0 0 var(--theme-default-link-hover-opacity)
}

.bullet-item {
  position: relative;
  padding-left: 1rem;
}

.bullet-item::before {
  content: "•";
  position: absolute;
  left: 0;
}

form .messages-container > div {
  padding-top: 2rem;
}

.messages-container > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.margin-btm {
  margin-bottom: 0.5rem;
}