/* Messages */
ul.messagelist {
    padding: 0 8px;
    margin: 0;
    position: sticky;
    z-index: 40;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column-reverse;
}
ul.messagelist li {
    display: block;
    padding: 0.5rem 1rem;
    margin: 0.5rem auto;
    word-break: break-word;
	max-width: 1000px;
	border-radius: 1em;
    background-color: #b0bec5;
    border-color: #455a64;
    background-image: linear-gradient(0deg, red 0 0.3em, transparent 0.3em 100%);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: appear 0.4s;
}
@keyframes appear {
    0% {
        opacity: 0;
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
    }
    100% {
        opacity: 1;
        overflow: hidden;
    }
}
ul.messagelist li.disappearing {
    background-size: 0% 100%;
    animation: disappear-bar 5s linear forwards;
}
@keyframes disappear-bar {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 0% 100%;
    }
}
ul.messagelist li.removing {
    animation: remove 0.4s forwards;
    pointer-events: none;
}
@keyframes remove {
    0% {
        opacity: 1;
        overflow: hidden;
    }
    100% {
        opacity: 0;
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
    }
}
ul.messagelist li::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-size: contain;
	vertical-align: middle;
	margin-right: 0.3em;
}
ul.messageslist li.debug {
    background-color: #ce93d8;
    border-color: #7b1fa2;
}
ul.messagelist li.info {
    background-color: #90caf9;
    border: 4px solid #1976d2;
}
ul.messagelist li.success {
    background-color: #c5e1a5;
    border-color: #689f38;
}
ul.messagelist li.warning {
    background-color: #fff59d;
    border-color: #fbc02d;
}
ul.messagelist li.error {
    background-color: #ffab91;
    border-color: #e64a19;
}

ul.messagelist li::before {
    background-position: center;
    background-repeat: no-repeat;
}
/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free
Copyright 2024 Fonticons, Inc.

Compressed with https://svgomg.net/
*/
ul.messagelist li::before {
    /* comment */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 240c0 115-115 208-256 208-37 0-72-6-104-18-12 9-31 21-54 31-24 10-53 19-82 19a16 16 0 0 1-11-27v-1l1-1 5-6c4-5 10-12 15-21 10-17 20-39 22-63-30-34-48-76-48-121C0 125 115 32 256 32s256 93 256 208z"/></svg>');
}
ul.messagelist li.debug::before {
    /* bug */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c53 0 96 43 96 96v4c0 15-13 28-28 28H189c-16 0-29-13-29-28v-4c0-53 43-96 96-96zM41 105c13-12 33-12 46 0l64 64 2 3c14-8 30-12 47-12h112c17 0 33 4 48 11l2-2 64-64a32 32 0 0 1 45 46l-64 64-2 2c6 12 10 25 11 39h64a32 32 0 1 1 0 64h-64c0 25-5 48-15 69l6 5 64 64a32 32 0 0 1-46 45l-63-63c-24 22-55 36-90 39V240c0-9-7-16-16-16s-16 7-16 16v239c-34-3-66-18-90-39l-63 63a32 32 0 0 1-46-46l64-64 6-4c-9-21-15-44-15-69H32a32 32 0 1 1 0-64h64c1-14 5-27 11-39l-2-2-64-64a32 32 0 0 1 0-46z"/></svg>');
}
ul.messagelist li.info::before {
    /* info */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M48 80a48 48 0 1 1 96 0 48 48 0 1 1-96 0zM0 224c0-18 14-32 32-32h64c18 0 32 14 32 32v224h32a32 32 0 1 1 0 64H32a32 32 0 1 1 0-64h32V256H32c-18 0-32-14-32-32z"/></svg>');
}
ul.messagelist li.success::before {
    /* check */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439 105c12 13 12 33 0 46L183 407a32 32 0 0 1-46 0L9 279a32 32 0 0 1 46-46l105 106 233-234c13-12 33-12 46 0z"/></svg>');
}
ul.messagelist li.warning::before {
    /* triangle-exclamation */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14 0 27 8 35 20l216 368a40 40 0 0 1-35 60H40a40 40 0 0 1-34-60L222 52c7-12 20-20 34-20zm0 128c-13 0-24 11-24 24v112a24 24 0 1 0 48 0V184c0-13-11-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"/></svg>');
}
ul.messagelist li.error::before {
    /* xmark */
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M343 151a32 32 0 0 0-46-46L192 211 87 105a32 32 0 0 0-46 46l106 105L41 361a32 32 0 0 0 46 46l105-106 105 106a32 32 0 0 0 46-46L237 256l106-105z"/></svg>');
}
.pin {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.3em;
    opacity: 0.5;
    transition: opacity 0.4s;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* thumbtack */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M32 32C32 14 46 0 64 0h256a32 32 0 1 1 0 64h-29l11 148c37 20 66 53 79 95l1 3c4 10 2 20-4 29s-16 13-26 13H32a32 32 0 0 1-30-42l1-3c13-42 42-75 79-95L94 64H64c-18 0-32-14-32-32zm128 352h64v96a32 32 0 1 1-64 0v-96z"/></svg>');
}
.pinned .pin {
    opacity: 1;
}

/* Close button */
.close {
	background-color: #e64a19;
	cursor: pointer;
	border-radius: 50%;
    float: right;
    position: relative;
	width: 1.5em;
	height: 1.5em;
    box-shadow: 0 0 0.5em #e64a19;
    margin: 0 0 0.5em 0.5em;
}
.close::before, .close::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12%;
	height: 60%;
	background-color: white;
	transform-origin: center;
}
.close::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.close::after {
	transform: translate(-50%, -50%) rotate(45deg);
}