body {
    overflow-x: hidden;
}

.toastnotification_container {
    margin-top: 2em;
    margin-right: 2em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
}

.toastnotification_list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* toast */
.toastnotification_list > .toast {
    --toast-color: #33cc33;

    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 3px 3px 8px rgba(25,25,25,0.1);
    border-radius: 5px;
    min-width: 150px;
    max-width: 450px;
    padding: 0.9em 3.5em 1.1em 1em;
    position: relative;
    right: 0px;
    transition: all 0.4s ease-in-out;
}
.toastnotification_list > .toast:not(.hide) { right: 0px; }
.toastnotification_list > .toast.hide { right: -500px; }

li.toast.info { --toast-color: #2693D7; }
li.toast.success { --toast-color: #00A62D; }
li.toast.warning { --toast-color: #D4A809; }
li.toast.error { --toast-color: #E44E3D; }

/* content */
li.toast > .toast_content {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 1em;
}

li.toast > .toast_content > span.material-icons {
    color: var(--toast-color);
    display: inline-block;
    font-size: 200%;
}

/* message-body */
li.toast > .toast_content > .messagebody {
    align-items:flex-start;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
li.toast > .toast_content > .messagebody > span.datetime {
    color: #777;
    font-size: 11px;
    margin-top: 3px;
}
li.toast > .toast_content > .messagebody > span.message {
    color: #333;
    font-size: 16px;
}


/* close */
li.toast > .toast_close {
    color: #333;
    cursor: default;
    position: absolute;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    top: 20px;
    right: 0.75em;
}
li.toast > .toast_close:hover {
    cursor: pointer;
    opacity: 1;
}

/* timer */
li.toast > .toast_timer {
    background-color: var(--toast-color);
    border-radius: 5px;
    bottom: 0;
    height: 0.2em;
    left: 0;
    position: absolute;
    transition: width 0.1s linear;
    width: 100%;
}