.ksx-message__closeBtn:focus,
.ksx-message__content:focus {
  outline-width: 0
}

.ksx-message {
   min-width: 380px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: #EBEEF5;
  position: fixed;
  left: 50%;
  top: 20px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #edf2fc;
  -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;
  transition: opacity .3s, top .4s, -webkit-transform .4s;
  transition: opacity .3s, transform .4s, top .4s;
  transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;
  overflow: hidden;
  padding: 15px 15px 15px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.ksx-message.is-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.ksx-message.is-closable .ksx-message__content {
  padding-right: 16px
}

.ksx-message p {
  margin: 0
}

.ksx-message--info .ksx-message__content {
  color: #909399
}

.ksx-message--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8
}

.ksx-message--success .ksx-message__content {
  color: #67C23A
}

.ksx-message--warning {
  background-color: #fdf6ec;
  border-color: #faecd8
}

.ksx-message--warning .ksx-message__content {
  color: #E6A23C
}

.ksx-message--error {
  background-color: #fef0f0;
  border-color: #fde2e2
}

.ksx-message--error .ksx-message__content {
  color: #F56C6C
}

.ksx-message__icon {
  margin-right: 10px
}

.ksx-message__content {
  padding: 0;
  font-size: 14px;
  line-height: 1
}

.ksx-message__closeBtn {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  color: #C0C4CC;
  font-size: 12px;
  padding: 2px;
}

.ksx-message__closeBtn:hover {
  color: #909399
}

.ksx-message .icon-a_success {
  color: #67C23A
}

.ksx-message .icon-a_error {
  color: #F56C6C
}

.ksx-message .icon-a_info {
  color: #909399
}

.ksx-message .icon-a_warning {
  color: #E6A23C
}

.ksx-message-fade-enter,
.ksx-message-fade-leave-active {
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%)
}

@media screen and (max-width: 768px) {
  .ksx-message {
    min-width: auto;
    width: 100%;
    border-radius: 0;
    transform: none;
    left: auto;
  }
}