/* Base alert styling */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

/* Alert variants */

/* Warning variant */
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* Danger variant */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Additional styling for role attribute */
.alert[role="alert"] {
    font-weight: 700;
}

/* Optionally, you can add dismissible functionality */
.alert-dismissible {
    padding-right: 4rem;
}

    .alert-dismissible .close {
        position: absolute;
        top: 0;
        right: 1rem;
        padding: 0.75rem 1.25rem;
        color: inherit;
        background-color: transparent;
        border: 0;
        cursor: pointer;
    }