/* message colors */
:root {
    --message-success-bg-light: #e8ffe8;
    --message-warning-bg-light: #ffffe6;
    --message-error-bg-light: #fff6f6;
    --message-font-color: #666;
}

tr.item-message
{
    color: var(--message-font-color);
}

/* Set standard background-color for messages using the background of the
corresponding item row. */
tr:nth-child(odd) + .item-message,
tr:nth-child(odd) + .item-message + .empty
{
    background: var(--body-bg);
}
tr:nth-child(even) + .item-message,
tr:nth-child(even) + .item-message + .empty
{
    background: var(--darkened-bg);
}

/* Set message level specific background-color for messages */
tr:nth-child(odd) + .item-message > td > div.info,
tr:nth-child(odd) + .item-message > td > div.success
{
    background: var(--message-success-bg-light);
}
tr:nth-child(even) + .item-message > td > div.info,
tr:nth-child(even) + .item-message > td > div.success
{
    background: var(--message-success-bg);
}
tr:nth-child(odd) + .item-message > td > div.warning,
tr:nth-child(odd) + .item-message > td > div.debug
{
    background: var(--message-warning-bg-light);
}
tr:nth-child(even) + .item-message > td > div.warning,
tr:nth-child(even) + .item-message > td > div.debug
{
    background: var(--message-warning-bg);
}
tr:nth-child(odd) + .item-message > td > div.error
{
    background: var(--message-error-bg-light);
}
tr:nth-child(even) + .item-message > td > div.error
{
    background: var(--message-error-bg);
}

/* Remove bottom border from items with a message and form the message row. */
tr.item-message td,
tr:has(+ .item-message) th,
tr:has(+ .item-message) td
{
    border-bottom: 0;
}

/* Set padding to 0 for empty rows. We also give them a hairline bottom border
...*/
tr.empty
{
    padding: 0;
    border-bottom: 1px solid var(--hairline-color);
}
/* ... but only if followed by another message. */
tr.empty:has(+ .item-message)
{
    border-bottom: 0;
}

/* Style and position the messages' div container. */
tr:not(.empty) + tr.item-message > td
{
    padding-top: 4px;
}
tr.item-message > td > div
{
    padding: 8px;
    border: 1px solid var(--hairline-color);
}
tr.item-message > td
{
    padding-top: 0;
    padding-left: 24px;
}