#toast {
    font-size: 3em;
    position: fixed;
    width: 80%;
    left: 10%;
    top: 50%;
    height: 5em;
    line-height: 5;
    text-align: center;
    z-index: 1999;
    -webkit-animation: toastTop .25s ease-out;
    animation: toastTop .25s ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

#toast.slideup {
    -webkit-animation-name: toastHide;
    animation-name: toastHide
}

#toast .toast-con {
    display: inline-block;
    background: #fff;
    margin: 0 auto;
    padding: 0 1.5em;
    line-height: 3em;
    box-shadow: 0 0 1em rgba(0,0,0,.11);
    /*font-size: 0.2rem;*/
}

#toast .toast-con .icon-toast-error,#toast .toast-con .icon-toast-info,#toast .toast-con .icon-toast-loading,#toast .toast-con .icon-toast-success,#toast .toast-con .icon-toast-warning {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 13px;
    margin-top: -2px;
    vertical-align: middle;
    background-image: url(/static/images/icons-toast.png);
    background-repeat: no-repeat
}

#toast .toast-con .icon-toast-success {
    background-position: 0 0
}

#toast .toast-con .icon-toast-info {
    background-position: 0 -119px
}

#toast .toast-con .icon-toast-warning {
    background-position: 0 -60px
}

#toast .toast-con .icon-toast-error {
    background-position: 0 -187px
}

#toast .toast-con .icon-toast-loading {
    background-position: 0 -232px;
    -webkit-animation: semicircle .8s linear infinite;
    animation: semicircle .8s linear infinite
}