.message-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

.message {
    min-width: 300px;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(-20px);
}

    .message.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .message.info {
        background-color: #f4f4f5;
        color: #909399;
        border-left: 4px solid #909399;
    }

    .message.success {
        background-color: #f0f9eb;
        color: #67c23a;
        border-left: 4px solid #67c23a;
    }

    .message.warning {
        background-color: #fdf6ec;
        color: #e6a23c;
        border-left: 4px solid #e6a23c;
    }

    .message.error {
        background-color: #fef0f0;
        color: #f56c6c;
        border-left: 4px solid #f56c6c;
    }

.message-icon {
    margin-right: 10px;
    font-size: 18px;
}

.message-content {
    flex: 1;
}

.message-close {
    margin-left: 10px;
    cursor: pointer;
    color: #c0c4cc;
}

    .message-close:hover {
        color: #909399;
    }