.flat-message__body span {
        padding: 0 12px;
        font-size: 14px;
}.flat-message {
    position: fixed;
    top: 0;
    left: 50%;
    opacity: 0;
    -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    z-index: 100000;
    animation: messageenter 1.8s ease-in-out;
}

.flat-message__body {
      height: 36px;
      min-width: 140px;
      text-align: center;
      background: #FFF;
      border-radius: 4px;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, .15);
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      z-index: 1000;
}

.flat-message__body i {
        width: 36px;
        height: 100%;
        color: #FFF;
        line-height: 42px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.flat-message__icon {}

.flat-message__icon svg {
        width: 20px;
        height: 20px;
}

.flat-message__icon.is-error {
        background: #E74C3C;
}

.flat-message__icon.is-warning {
        background: #F1C40F;
}

.flat-message__icon.is-success {
        background: #1ABC9C;
}

.flat-message__icon.is-info {
        background: #3498DB;
}

@keyframes messageenter {
  0% { transform: translate(-50%, -100%); opacity: 0; }
  30% { transform: translate(-50%, 50%); opacity: 1; }
  70% { transform: translate(-50%, 50%); opacity: 1; }
  100% { transform: translate(-50%, -100%); opacity: 0; }
}