/*notify*/
/*动画速度*/
.bo-js-notify-animated-fast {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*动画效果*/
@-webkit-keyframes boJsZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes boJsZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
    }
}

@-webkit-keyframes boJsZoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }

    100% {
        opacity: 0;
    }
}

@keyframes boJsZoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
    }

    100% {
        opacity: 0;
    }
}

.bo-js-notify-anim-zoomIn {
    -webkit-animation-name: boJsZoomIn;
    animation-name: boJsZoomIn;
}

.bo-js-notify-anim-zoomOut {
    -webkit-animation-name: boJsZoomOut;
    animation-name: boJsZoomOut;    
}

/*容器*/
.bo-js-notify-wrapper {
    z-index: 5000;
    position: fixed;
}

    .bo-js-notify-wrapper.top {
        top: 0px;
    }

    .bo-js-notify-wrapper.bottom {
        bottom: 0px;
    }

    .bo-js-notify-wrapper.left {
        left: 0px;
        margin-right: 0px;
    }

    .bo-js-notify-wrapper.right {
        right: 0px;
        margin-left: 0px;
    }

        .bo-js-notify-wrapper.right .bo-js-notify {
            margin-left: auto;
        }

/*通知本体*/
.bo-js-notify {
    position: relative;
    min-height: 85px;
    font-family: 'Arial Rounded MT Bold';
    margin: 7px 0;
    border-radius: 0;
    border: 1px solid transparent;
    -webkit-box-shadow: 2px 2px 5px #aaaaaa;
    box-shadow: 2px 2px 5px #aaaaaa;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.bo-js-notify-click {
    cursor: pointer !important;    
}

    .bo-js-notify-click:hover {
        cursor: pointer !important;
    }

.bo-js-notify .bo-js-notify-img {
    position: absolute;
    text-align: center;
    font-size: 44px;
    left: 15px;
    top: 10px;
    width: 48px;
}

    .bo-js-notify .bo-js-notify-img,
    .bo-js-notify .bo-js-notify-img > * {
        line-height: 48px;
    }

        .bo-js-notify .bo-js-notify-img img {
            border-radius: 4px;
            width: 100%;
            height: 100%;
        }

.bo-js-notify .bo-js-notify-body {
    margin: 10px 20px;
    margin-left: 90px;
}

.bo-js-notify .bo-js-notify-title {
    font-size: 14px;
    line-height: 24px;
}

.bo-js-notify .bo-js-notify-msg {
        line-height: 16px;
        font-size: 12px;
    }

.bo-js-notify .bo-js-notify-close {
    position: absolute;
    text-align: center;
    border-radius: 50%;
    right: 10px;
    top: 10px;
    font-size: 12px;
    line-height: 19px;
    width: 19px;
    height: 19px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

    .bo-js-notify .bo-js-notify-close:hover {
        background-color: rgba(0, 0, 0, 0.5);
        font-weight: bold;
        cursor: pointer;
    }

.bo-js-notify .bo-js-notify-delay-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
}

    .bo-js-notify .bo-js-notify-delay-indicator > div {
        position: relative;
        height: 100%;
        width: 0%;
        background-color: rgba(0, 0, 0, 0.4);
    }

.bo-js-notify.bo-js-notify-error {
    border-color: #b41d1d;
    background-color: #ce352c;
    color: #ffffff;
}

    .bo-js-notify.bo-js-notify-error:hover {
        background-color: #D84F47;
        border-color: #FFF;
    }

.bo-js-notify.bo-js-notify-success {
    border-color: #24a370;
    background-color: #60a917;
    color: #ffffff;
}

    .bo-js-notify.bo-js-notify-success:hover {
        background-color: #75CE1C;
        border-color: #FFF;
    }

.bo-js-notify.bo-js-notify-warning {
    border-color: #b97429;
    background-color: #fa6800;
    color: #ffffff;
}

    .bo-js-notify.bo-js-notify-warning:hover {
        background-color: #FF8022;
        border-color: #FFF;
    }

.bo-js-notify.bo-js-notify-info {
    border-color: #1ba1e2;
    background-color: rgba(46, 121, 180, 0.9);
    color: #ffffff;
}

    .bo-js-notify.bo-js-notify-info:hover {
        background-color: #41B3E9;
        border-color: #FFF;
    }

.bo-js-notify:hover {
    cursor: default;
    -webkit-box-shadow: 3px 3px 10px #aaaaaa;
    box-shadow: 3px 3px 10px #aaaaaa;
}

.bo-js-notify.bo-js-notify-mini {
    min-height: 36px;
}

    .bo-js-notify.bo-js-notify-mini .bo-js-notify-title {
        margin-top: -5px;
        font-size: 14px;
        line-height: 18px;
    }

    .bo-js-notify.bo-js-notify-mini .bo-js-notify-msg {
        line-height: 14px;
        font-size: 12px;
    }

    .bo-js-notify.bo-js-notify-mini .bo-js-notify-img {
        left: 7px !important;
        width: 26px;
        font-size: 25px;
    }

        .bo-js-notify.bo-js-notify-mini .bo-js-notify-img,
        .bo-js-notify.bo-js-notify-mini .bo-js-notify-img > * {
            line-height: 14px;
        }

            .bo-js-notify.bo-js-notify-mini .bo-js-notify-img img {
                margin-top: -5px;
            }

    .bo-js-notify.bo-js-notify-mini .bo-js-notify-body {
        margin: 10px 13px;
        margin-left: 40px;
    }

.bo-js-notify.bo-js-notify-img-without .bo-js-notify-body {
    margin-left: 20px;
}