@keyframes in {
    0% {
        transform: translate(0, 20px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes out {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

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

.kan-notify-wrapper {
    z-index: 3000;
}

.kan-in {
    animation: in .3s linear 1;
}

.kan-out {
    animation: out .3s linear 1;
}

.kan-notify-item {
    position: relative;
    margin-bottom: 8px;
    padding: 5px 30px 5px 10px;
    clear: both;
    font-size: 14px;
    line-height: 1.6;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 3px;
    opacity: .95;
}

    .kan-notify-item .kan-text {
        margin-left: 21px;
    }

    .kan-notify-item .kan-icon-wrap {
        float: left;
        display: inline-block;
    }

    .kan-notify-item .kan-icon {
        font-size: 14px;
    }

    .kan-notify-item .kan-notify-close {
        cursor: pointer;
        color: #1F2D3D;
        text-align: center;
        position: absolute;
        right: 2px;
        top: 1px;
        display: inline-block;
        width: 12px;
        height: 12px;
        font-size: 12px;
        line-height: 12px;
        text-decoration: none;
        transition: All .5s ease-in-out;
    }

        .kan-notify-item .kan-notify-close:hover {
            transform: rotate(180deg);
        }

.kan-notify-item-info {
    background: #139acc;
    border-color: #1188b5;
    color: #e2f5fc;
}

    .kan-notify-item-info a {
        color: #e2f5fc;
    }

    .kan-notify-item-info .kan-notify-close {
        color: #b3e5f8;
    }

        .kan-notify-item-info .kan-notify-close:hover {
            color: #e2f5fc;
        }

.kan-notify-item-default {
    background: #1F2D3D;
    border-color: #16212c;
    color: #b5c6d9;
}

    .kan-notify-item-default a {
        color: #b5c6d9;
    }

    .kan-notify-item-default .kan-notify-close {
        color: #93acc8;
    }

        .kan-notify-item-default .kan-notify-close:hover {
            color: #b5c6d9;
        }

.kan-notify-item-error {
    background: #cf2715;
    border-color: #b82313;
    color: #fde9e6;
}

    .kan-notify-item-error a {
        color: #fde9e6;
    }

    .kan-notify-item-error .kan-notify-close {
        color: #f8beb8;
    }

        .kan-notify-item-error .kan-notify-close:hover {
            color: #fde9e6;
        }

.kan-notify-item-warning {
    background: #e17a00;
    border-color: #c86c00;
    color: #fff;
}

    .kan-notify-item-warning a {
        color: #fff;
    }

    .kan-notify-item-warning .kan-notify-close {
        color: #e6e6e6;
    }

        .kan-notify-item-warning .kan-notify-close:hover {
            color: #fff;
        }

.kan-notify-item-success {
    background: #348f22;
    border-color: #2d7a1d;
    color: #ecfae9;
}

    .kan-notify-item-success a {
        color: #ecfae9;
    }

    .kan-notify-item-success .kan-notify-close {
        color: #c8f0c0;
    }

        .kan-notify-item-success .kan-notify-close:hover {
            color: #ecfae9;
        }