/*** MessageBox ***/

:root {
  --color-box-default-bg: #e2e3e5;
  --color-box-default-border: #d6d8db;
  --color-box-default-font: #202326;
  --color-box-success-bg: #d4edda;
  --color-box-success-border: #c3e6cb;
  --color-box-success-font: #0b2e13;
  --color-box-warning-bg: #fff3cd;
  --color-box-warning-border: #ffeeba;
  --color-box-warning-font: #533f03;
  --color-box-error-bg: #f8d7da;
  --color-box-error-border: #f5c6cb;
  --color-box-error-font: #491217;
  --color-box-close-button: #8a8a8a;
  --color-box-close-button-hover: #0a0a0a;
}

div.messagebox {
  padding: 0.5em 2em;
  color: var(--color-box-default-font);
  background-color: var(--color-box-default-bg);
  border: 1px solid var(--color-box-default-border);
  border-radius: 0.25em;
  margin-bottom: 0.25em;
  position: relative;
  font-weight: normal;
}

div.messagebox a {
  color: var(--color-box-default-font);
  font-weight: bold;
}

div.messagebox .close-button {
  position: absolute;
  right: 0.25em;
  top: 0;
  line-height: 1;
  color: var(--color-box-close-button);
  font-size: 2em;
  cursor: pointer;
}

div.messagebox .close-button:hover {
  color: var(--color-box-close-button-hover);
}

div.messagebox.hidden {
  display: none;
}

div.messagebox-success {
  color: var(--color-box-success-font);
  background-color: var(--color-box-success-bg);
  border: 1px solid var(--color-box-success-border);
}

div.messagebox-success a {
  color: var(--color-box-success-font);
}

div.messagebox-warning {
  color: var(--color-box-warning-font);
  background-color: var(--color-box-warning-bg);
  border: 1px solid var(--color-box-warning-border);
}

div.messagebox-warning a {
  color: var(--color-box-warning-font);
}

div.messagebox-error {
  color: var(--color-box-error-font);
  background-color: var(--color-box-error-bg);
  border: 1px solid var(--color-box-error-border);
}

div.messagebox-error a {
  color: var(--color-box-error-font);
}