#success_message {
    visibility: hidden;
    position: fixed;
    top: 80px;
    margin-left: 100%;
    z-index: 10000000;
    width: 600px;
    height: 60px;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

#success_message.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 2.5s;
    animation: fadein 2.5s;

}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        right: 0;
        opacity: 1;
    }
    to {
        right: 100px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        right: 0;
        opacity: 1;
    }
    to {
        right: 100px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        right: 100px;
        opacity: 1;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        right: 100px;
        opacity: 1;
    }
    to {
        right: 0;
        opacity: 1;
    }
}


#success_message_left_element {
    float: left;
    width: 2%;
    background-color: var(--success);
    height: 60px;
    border-radius: 4px 0 0 4px;
}

#success_message_icon {
    float: left;
    margin-top: 15px;
    margin-left: 30px;
}

#success_message_text {
    float: left;
    color: var(--success);
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    margin-top: 19px;
    margin-left: 30px;
}