:root {
  --message-bg:             #ffffff;
  --message-text:           #414141;
  --message-border-radius:  4px;
  --message-font-size:      1rem;      /* paragraph-03-font-size */
  --message-line-height:    1.5rem;    /* paragraph-03-line-height */
  --message-font-weight:    400;
  --message-box-shadow:     0 2px 4px rgba(65, 65, 65, 0.35); /* shadow-small */

  --color-info:    #496ebd;
  --color-success: #1e8927;
  --color-warning: #efbe25;
  --color-error:   #dc3149;
  --color-regular: #414141;

  --bg-info:    #ecf0f8;
  --bg-success: #e8f3e9;
  --bg-warning: #fdf8e9;
  --bg-error:   #fbeaec;
  --bg-regular: #ffffff;
}

.nx-message {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
  border: 2px solid;
  border-radius: var(--message-border-radius);
  padding: 22px; /* 24px − 2px border */
  color: var(--message-text);
  background-color: var(--bg-regular);
  border-color: var(--color-regular);
  box-shadow: var(--message-box-shadow);
  font-size: var(--message-font-size);
  font-weight: var(--message-font-weight);
  line-height: var(--message-line-height);
  font-family: 'AllianzNeoR', -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

.nx-message.context-info {
  border-color: var(--color-info);
  background-color: var(--bg-info);
}
.nx-message.context-success {
  border-color: var(--color-success);
  background-color: var(--bg-success);
}
.nx-message.context-warning {
  border-color: var(--color-warning);
  background-color: var(--bg-warning);
}
.nx-message.context-error {
  border-color: var(--color-error);
  background-color: var(--bg-error);
}

.nx-message__icon {
  flex-shrink: 0;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-regular);
}
.nx-message__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nx-message.context-info    .nx-message__icon { color: var(--color-info);    }
.nx-message.context-success .nx-message__icon { color: var(--color-success); }
.nx-message.context-warning .nx-message__icon { color: var(--color-warning); }
.nx-message.context-error   .nx-message__icon { color: var(--color-error);   }

.nx-message__content {
  flex: 1;
  min-width: 0;
}

.nx-message__title {
  font-weight: 600;
  margin-bottom: 4px;
}

.nx-message__container {
    display: grid;
    grid-template-columns: 0.51fr 2fr 0.5fr;
    gap: 24px;
    align-items: start;
}