.toast {
        visibility: hidden;
        min-width: 300px;
        margin-left: -175px;     
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 9999999;
        left: 50%;
        top: 10px;
        font-size: 14px;
    }

    .toast.show.error {
        visibility: visible;
        background-color: #cc0000;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    .toast.show.message {
        visibility: visible;
        background-color: #008000;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 10px; opacity: 1;}
    }

    @keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 10px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {top: 20px; opacity: 1;}
        to {top: 10; opacity: 0;}
    }

    @keyframes fadeout {
        from {top: 10px; opacity: 1;}
        to {top: 0; opacity: 0;}
    }