#toast-container {
    z-index: 9999999999;
    position: absolute;
    bottom: 3rem;
    left: 0;
    width: 100%;
    pointer-events: none;
    display: none;
}

#toast {
    margin: 0 auto;
    padding: 1rem 2rem;
    width: fit-content;
}

#toast-container.show-message {
    display: block;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
    animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;

    div.regular-message {
        background-color: #67C23A;
        color: #FFF;
    }

    div.warning-message {
        background-color: #ffa252;
        color: #FFF;
    }

    div.error-message {
        background-color: #F56C6C;
        color: #FFF;
    }
}

@-webkit-keyframes fadein {
    from {
        bottom: -3rem;
        opacity: 0;
    }

    to {
        bottom: 3rem;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: -3rem;
        opacity: 0;
    }

    to {
        bottom: 3rem;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 3rem;
        opacity: 1;
    }

    to {
        bottom: -3rem;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 3rem;
        opacity: 1;
    }

    to {
        bottom: -3rem;
        opacity: 0;
    }
}