.toast-container {
    position: fixed;
    top: 0;
    padding: 0 15px;
    width: 100%;
    text-align: center;
    z-index: 9999;
}

.toast-context {
    margin: 10px auto 0;
}

.toast-context .toast-content {
    padding:7px 15px;
    background: #fff;
    color:#666;
    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
    z-index:9999;
    border-radius: 4px;
    display: inline-block;
}

.toast-icon {
    color:#fff;
    text-align: center;
    font-size: 18px;
    display: inline-block;
}

.toast-icon svg {
    position: relative;
    top: 4px;
}

.toast-success {
    color:#13CE66;
}

.toast-danger {
    color:#FF4949;
}

.toast-info {
    color:#20A0FF;
}

.toast-warning {
    color:#F7BA2A;
}

.toast-tip {
    display: inline;
    margin-left: 7px;
    letter-spacing: 1px;
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.toast-context.fade-in {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.toast-context.fade-out {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}