.biu-instance {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #e2e2e2;
    z-index: 101;
    animation-name: biu-down;
    animation-duration: .3s;
    font-size: 1.7rem;
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    transition: transform .3s ease
}

.biu-instance.biu-pop {
    width: 400px;
    max-width: 80%;
    left: 50%;
    right: none;
    -ms-transform: translateX(-50%) translateY(-110%);
    transform: translateX(-50%) translateY(-110%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    border-bottom: none;
    border-radius: 0 0 2px 2px
}

.biu-main {
    padding: 0 40px 0 20px;
    word-wrap: break-word
}

.biu-close {
    float: right;
    cursor: pointer;
    width: 20px;
    margin-right: 10px;
    border-radius: 2px;
    text-align: center
}

.biu-shown {
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.biu-shown.biu-pop {
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0)
}

.biu-info, .biu-success, biu-warning {
    color: #fff
}

.biu-default {
    color: #333;
    background-color: #fff;
    border-color: #e2e2e2
}

.biu-default .biu-close:hover {
    background-color: #e2e2e2
}

.biu-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6
}

.biu-success .biu-close:hover {
    background-color: #d6e9c6
}

.biu-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
}

.biu-info .biu-close:hover {
    background-color: #bce8f1
}

.biu-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc
}

.biu-warning .biu-close:hover {
    background-color: #faebcc
}

.biu-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
}

.biu-danger .biu-close:hover {
    background-color: #ebccd1
}