.is-style-with-icon-warning {
    background-color: #fff3cd; /* Light yellow background */
    border: 3px solid #ffeeba; /* Slightly darker yellow border */
    color: #856404; /* Dark yellow text color */
    
    /* Padding and layout adjustments */
    padding: 20px !important; /* This adds padding inside the alert */
    border-radius: 5px; /* This rounds the corners of the alert bubble */
    margin-bottom: 1em !important; /* Adds space below the alert */
    
    /* Font and icon adjustments */
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
    font-size: 16px; /* Example font size, adjust as needed */

    /* Positioning the icon */
    position: relative;
    padding-left: 50px !important; /* Adjust the left padding to make room for the icon */
}

.is-style-with-icon-warning::before {
    /* Icon content can be from FontAwesome or any other icon library */
    content: "\f06a"; /* This is the FontAwesome exclamation-circle icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* Required for solid icons in FA5 */
    position: absolute;
    left: 20px; /* Position the icon 20px from the left edge */
    top: 17px;
    color: #856404; /* Icon color to match the text */
    font-size: 20px; /* Icon size, can be adjusted */
}

.is-style-with-icon-error {
    background-color: #f8d7da; /* Light red background */
    border: 3px solid #f5c6cb; /* Slightly darker red border */
    color: #721c24; /* Dark red text color */
    
    /* Padding and layout adjustments */
    padding: 20px !important; /* This adds padding inside the alert */
    border-radius: 5px; /* This rounds the corners of the alert bubble */
    margin-bottom: 1em !important; /* Adds space below the alert */
    
    /* Font and icon adjustments */
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
    font-size: 16px; /* Example font size, adjust as needed */

    /* Positioning the icon */
    position: relative;
    padding-left: 50px !important; /* Adjust the left padding to make room for the icon */
}

.is-style-with-icon-error::before {
    /* Icon content can be from FontAwesome or any other icon library */
    content: "\f071"; /* This is the FontAwesome exclamation-circle icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* Required for solid icons in FA5 */
    position: absolute;
    left: 20px; /* Position the icon 20px from the left edge */
    top: 17px;
    color: #721c24; /* Icon color to match the text */
    font-size: 20px; /* Icon size, can be adjusted */
}

.is-style-with-icon-info {
    background-color: #d1ecf1; /* Light blue background */
    border: 3px solid #bee5eb; /* Slightly darker blue border */
    color: #0c5460; /* Dark blue text color */
    
    /* Padding and layout adjustments */
    padding: 20px !important; /* This adds padding inside the alert */
    border-radius: 5px; /* This rounds the corners of the alert bubble */
    margin-bottom: 1em !important; /* Adds space below the alert */
    
    /* Font and icon adjustments */
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
    font-size: 16px; /* Example font size, adjust as needed */

    /* Positioning the icon */
    position: relative;
    padding-left: 50px !important; /* Adjust the left padding to make room for the icon */
}

.is-style-with-icon-info::before {
    /* Icon content can be from FontAwesome or any other icon library */
    content: "\f2f5"; /* This is the FontAwesome exclamation-circle icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* Required for solid icons in FA5 */
    position: absolute;
    left: 20px; /* Position the icon 20px from the left edge */
    top: 17px;
    color: #0c5460; /* Icon color to match the text */
    font-size: 20px; /* Icon size, can be adjusted */
}

.is-style-with-icon-success {
    background-color: #d4edda; /* Light green background */
    border: 3px solid #c3e6cb; /* Slightly darker greeb border */
    color: #155724; /* Dark green text color */
    
    /* Padding and layout adjustments */
    padding: 20px !important; /* This adds padding inside the alert */
    border-radius: 5px; /* This rounds the corners of the alert bubble */
    margin-bottom: 1em !important; /* Adds space below the alert */
    
    /* Font and icon adjustments */
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
    font-size: 16px; /* Example font size, adjust as needed */

    /* Positioning the icon */
    position: relative;
    padding-left: 50px !important; /* Adjust the left padding to make room for the icon */
}

.is-style-with-icon-success::before {
    /* Icon content can be from FontAwesome or any other icon library */
    content: "\f058"; /* This is the FontAwesome exclamation-circle icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* Required for solid icons in FA5 */
    position: absolute;
    left: 20px; /* Position the icon 20px from the left edge */
    top: 17px;
    color: #155724; /* Icon color to match the text */
    font-size: 20px; /* Icon size, can be adjusted */
}