.msg-Box {
    cursor:pointer;
    min-width:100px;
    min-height:20px;
    max-width:400px;
    position:fixed;
    top:100px;
    right:20px;
    opacity: 0;
    animation: slideIn .7s 0.1s ease-out;
    animation-fill-mode: forwards;
}
.slide-out {
    animation: slideOut .7s ease-out;
    animation-fill-mode: backwards;
}

.msg-Box-red {
    background-color: rgba(220, 53, 69, .95);
}
.msg-Box-green {
    background-color: rgba(40, 167, 69, .95);
}
.msg-Box-yellow {
    background-color: rgba(255, 193, 22, .95);
}
.msg-Box-grey {
    background-color: rgba(108, 117, 125, .95);
}

@media screen and (max-width: 576px) {
    .msg-Box {
        width: 95vw;
        top: 60px;
        right: 0;
    }
}

@keyframes slideIn {
    from {right:-500px;opacity: 0;}
    to {right:0;opacity: 1;}
}

@keyframes slideOut {
    from {right:0;opacity: 1;}
    to {right:-500px;opacity: 0;}
}