/* =========================================
   MESSAGES (Success, Error, Info, Warning)
   011-ui-css-mobile 005: overflow-x hidden auf .base-messages-container
   ========================================= */

.base-messages-container {
    overflow-x: hidden;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 16px 0;
}

@media (min-width: 600px) {
    .base-messages-container {
        padding: 16px 40px 0;
    }
}

@media (min-width: 1024px) {
    .base-messages-container {
        padding: 16px 60px 0;
    }
}

.base-message-content {
    font-size: var(--font-size-base);
}

.base-message-success {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.base-message-error {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.base-message-info {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    color: var(--color-info-text);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.base-message-success-section {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 3rem;
}

.base-message-error-section {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 3rem;
}