.my-alert {
  position:absolute;
  left:0;
  top:10px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 9999;
}

.my-alert-box {
  min-width:380px;
  height:45px;
  border-radius:4px;
  font-size: 14px;
  overflow:hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding:0 20px 0 20px;
  margin-bottom: 10px;
}

.my-alert-box-info {
  background-color: #edf2fc;
  border:solid 1px #ebeef5;
  color: #909399;
}

.my-alert-box-success {
  background-color: #f0f9eb;
  border:solid 1px #e1f3d8;
  color: #67C23A;
}

.my-alert-box-warning {
  background-color: #fdf6ec;
  border:solid 1px #faecd8;
  color: #E6A23C;
}

.my-alert-box-error {
  background-color: #fef0f0;
  border:solid 1px #fde2e2;
  color: #F56C6C;
}

.my-alert-icon {
  margin-right: 10px;
  width: 16px;
  height: 16px;
}

.my-alert-icon-info {
  background: url(../images/my-alert-info.png) no-repeat center center;
  background-size:100% 100%;
}

.my-alert-icon-success {
  background: url(../images/my-alert-success.png) no-repeat center center;
  background-size:100% 100%;

}

.my-alert-icon-warning {
  background: url(../images/my-alert-warning.png) no-repeat center center;
  background-size:100% 100%;
}

.my-alert-icon-error {
  background: url(../images/my-alert-error.png) no-repeat center center;
  background-size:100% 100%;
}