.hanzo-order-tips {
    pointer-events: none;
    position     : fixed;
    z-index      : 99999;
    opacity      : 0;
    height       : 30px;
    padding      : 0 20px 0 0;
    background   : rgba(0, 0, 0, .5);
    box-shadow   : 0px 0px 4px 0px rgba(0, 0, 0, 0.31);
    border-radius: 15px;


    &-avatar {
        overflow     : hidden;
        width        : 30px;
        height       : 30px;
        box-sizing   : border-box;
        border       : 1px solid #fff;
        border-radius: 100%;
        float        : left;
    }

    &-text {
        padding-left: 8px;
        font-size   : 14px;
        font-weight : 400;
        color       : #fff;
        height      : 30px;
        line-height : 30px;
        float       : left;
    }
}

.hanzo-order-tips_active {
    opacity  : 0;
    animation: tipsPopUp 5s ease;
}

@keyframes tipsPopUp {
    0% {
        opacity  : 0;
        transform: translateY(20px)
    }

    20% {
        opacity  : 1;
        transform: translateY(0)
    }

    80% {
        opacity  : 1;
        transform: translateY(0)
    }

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