.toaster {
    min-width: 300px;
    margin: auto;
    background-color: darkgreen;
    color: #fff;
    text-align: center;
    border-radius: 6px 25px;
    padding: 10px;
    position: fixed;
    z-index: 15;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 20px;
    font-family: "Comic Sans MS", "Comic Sans";
    border: 2px solid cyan;
    -moz-box-shadow: 0 0 10px white;
    box-shadow: 0 0 10px white;
    cursor: pointer;

    /*noselect*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.showToaster {
    -webkit-animation: fadein 0.5s forwards;
    animation: fadein 0.5s forwards;
}

.hideToaster {
    -webkit-animation: fadeout 0.5s forwards;
    animation: fadeout 0.5s forwards;
}

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

    to {
        bottom: 30px;
        opacity: .9;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: .9;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}