/* Toast Success */
.toast_success {
    z-index: 99999;
    padding: 10px;
    height: 70px;
    border: 2px solid #70b771;
    border-radius: 5px;
    background-color: #54b356;
    color: white;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    box-shadow: 3px 2px 16px -10px rgba(0,0,0,0.75);
    animation: fadeInOut 10s forwards;
    animation-delay: 10s;
}

/* Toast Warning */
.toast_warning {
    z-index: 99999;
    padding: 10px;
    height: 70px;
    border: 2px solid #f0ad4e;
    border-radius: 5px;
    background-color: #f0ad4e;
    color: white;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    box-shadow: 3px 2px 16px -10px rgba(0,0,0,0.75);
    animation: fadeInOut 10s forwards;
    animation-delay: 10s;
}

/* Toast Danger / Error */
.toast_danger {
    z-index: 99999;
    padding: 10px;
    height: 70px;
    border: 2px solid #d9534f;
    border-radius: 5px;
    background-color: #d9534f;
    color: white;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    box-shadow: 3px 2px 16px -10px rgba(0,0,0,0.75);
    animation: fadeInOut 10s forwards;
    animation-delay: 10s;
}

/* Animation fade in / fade out */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}