#message_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--Fill-black);
}

div.message {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    border: none;
    border-left-style: solid;
    border-left-width: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.05);
}

/*
body.mobile div.message {
    max-width: calc(min(50rem, calc(100% - 3rem)));
}
 */

div.message > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

div.message > div.icon {
    display: flex;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: 2rem;
}

div.message > div.text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 1rem 0;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    white-space: normal;
}

div.message > div.text > br {
    /*
    content: '';
    height: 1.5rem;
     */
}

div.message > div.text > span > br {
    /*
    display: block;
    content: '';
    height: 0.25rem;
     */
}

div.message > div.close {
    display: inline-flex;
    align-items: flex-start;
    margin-left: auto;
    cursor: pointer;
}

div.message.input-ok {
    border-left-color: var(--Alerts-success);
    background: var(--Alerts-success-subtle);
}

div.message.input-ok .icon {
    color: var(--Alerts-success);
}

div.message.input-warning {
    border-left-color: var(--Alerts-warning);
    background: var(--Alerts-warning-subtle);
}

div.message.input-warning .icon {
    color: var(--Fill-black);
}

div.message.input-error {
    border-left-color: var(--Alerts-danger);
    background: var(--Alerts-danger-subtle);
}

div.message.input-error .icon {
    color: var(--Alerts-danger);
}

div.message.input-info {
    border-left-color: var(--Alerts-info);
    background: var(--Alerts-info-subtle);
}

div.message.input-info .icon {
    color: var(--Alerts-info);
}

div.message.inline {
    width: calc(min(40rem, 80vw));
}