﻿.c-message {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    border-radius: 4px;
    overflow: hidden
}

.c-message .c-message--main {
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 38px
}

.c-message .c-message--icon {
    width: 16px;
    height: 16px;
    margin-right: 10px
}

.c-message.c-message--default {
    background-color: #fff;
    color: #666;
    box-shadow: 0 0 20px 0 rgba(51, 51, 51, .15)
}

.c-message.c-message--success {
    background-color: #f0f8f6;
    color: #68c4b1
}

.c-message.c-message--success .c-message--icon {
    background: url(../images/icons.png) no-repeat -391px 0
}

.c-message.c-message--error {
    background-color: #fff2f0;
    color: #ff4d4f
}

.c-message.c-message--error .c-message--icon {
    background: url(../images/icons.png) no-repeat -438px 0
}

.c-message.c-message--info {
    background-color: #e6f7ff;
    color: #1c8fff
}

.c-message.c-message--info .c-message--icon {
    background: url(../images/icons.png) no-repeat -414px 0
}

.c-message.c-message--warning {
    background-color: #fffbe5;
    color: #faad14
}

.c-message.c-message--warning .c-message--icon {
    background: url(../images/icons.png) no-repeat -368px 0
}

.c-message.c-message--normal {
    background-color: #fff;
    color: #666
}

.c-message.c-message--normal .c-message--icon {
    background: url(../images/icons.png) no-repeat -391px 0
}

@keyframes messageFadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.c-message.messageFadeInDown {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: messageFadeInDown
}

@keyframes messageFadeOutUp {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.c-message.messageFadeOutUp {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: messageFadeOutUp
}