.alert_message {
    position: fixed;
    max-width: 500px;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);
    padding: 12px 20px 12px 40px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1000;
    opacity: 1;
    background-color: #f4f4f5;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s;
}

.alert_message:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/defalut_logo.svg);
    background-size: 20px 20px;
    position: absolute;
    left: 10px;
    top: 12px;
}

.alert_message.error:before {
    background: url(../img/error_logo.svg);
    background-size: 20px 20px;
}

.alert_message.warning:before {
    background: url(../img/warning_logo.svg);
    background-size: 20px 20px;
}

.alert_message.success:before {
    background: url(../img/success_logo.svg);
    background-size: 20px 20px;
}

.alert_message .message {
    color: #909399;
    font-size: 14px;
}

.alert_message.hide {
    opacity: 0;
}

.alert_message.success {
    background-color: #f0f9eb;
}

.alert_message.success .message {
    color: #67c23a;
}

.alert_message.show {
    top: 40px;
}

.alert_message.error {
    background-color: #fef0f0;
}

.alert_message.error .message {
    color: #f56c6c;
}

.alert_message.warning {
    background-color: #fdf6ec;
}

.alert_message.warning .message {
    color: #e6a23c;
}