/* 消息提示框：从顶部往下出现 */
.ks-message-container {
    font-size: 24px;
    position: fixed;
    left: 0;
    top: 123px;
    z-index: 9999;
    width: 100%;
    text-align: center;
    transition: height .3s ease-in-out, padding .3s ease-in-out;
}

.ks-message-box {
    display: inline-block;
    pointer-events: all;
    color: #495060;
    padding: .4em .8em;
    border-radius: 4px;
    box-shadow: 0 0.12em 0.4em rgba(0, 0, 0, .2);
    background: #fff;
    position: relative;
    text-align: left;
    max-width: 500px;
}

.ks-message-box-icon {
    float: left;
}

.ks-message-box-content {
    font-size: .75em;
    line-height: 1.8em;
    margin-left: 28px;
    overflow: hidden;
    word-break: break-word;
}

.ks-message-box-info {
    color: #2db7f5;
}

.ks-message-box-success {
    color: #19be6b;
}

.ks-message-box-warning {
    color: #ff9900;
}

.ks-message-box-error {
    color: #ed4014;
}

.ks-message-box-question {
    color: #5cadff;
}


/*参考自 https://animate.style/ 的动画，使用时将 .animate-animated 和 动画效果 class 赋予元素即可 */
.animate-animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fade-in-bottom-right {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fade-in-bottom-right {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fade-in-bottom-right {
    -webkit-animation-name: fade-in-bottom-right;
    animation-name: fade-in-bottom-right;
}

@-webkit-keyframes fade-out-bottom-right {
    from {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
}

@keyframes fade-out-bottom-right {
    from {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
}

.fade-out-bottom-right {
    -webkit-animation-name: fade-out-bottom-right;
    animation-name: fade-out-bottom-right
}

@-webkit-keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.zoom-in {
    -webkit-animation-name: zoom-in;
    animation-name: zoom-in
}

@-webkit-keyframes zoom-out {
    from {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoom-out {
    from {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.zoom-out {
    -webkit-animation-name: zoom-out;
    animation-name: zoom-out
}

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fade-in-down {
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down
}

@-webkit-keyframes fade-in-down-big {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fade-in-down-big {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fade-in-down-big {
    -webkit-animation-name: fade-in-down-big;
    animation-name: fade-in-down-big
}