.warning-container {
    display: none; /* Keeps the container hidden by default */
    color: #5a5858; /* Text color */
    background-color: #fbeae5; /* Light peach background color */
    border: 1px solid #f5c6cb; /* Soft pink border */
    border-radius: 10px; /* Reduced border-radius */
    padding: 10px 20px; /* Uniform padding for top, right, bottom, increased left */
    margin-top: 20px; /* Margin from the top element */
    margin-bottom: 20px; /* Adds space below the container */
    align-items: center; /* Centers children vertically */
    box-shadow: 0 2px 4px rgba(0,0,0,0.10); /* Subtle shadow for depth */
    font-size: 14px; /* Adjusted font size */
    display: flex; /* Set display to flex but keep it hidden */
    justify-content: flex-start; /* Align children to the start */
    position: relative; /* Needed for absolute positioning of the icon */
}

.warning-container p {
    margin: 0; /* Remove margin from p */
    color: #ff0000; /* Makes the text color red */
    align-self: center; /* Ensures the text is centered vertically within the container */
}

/* Use the hidden class to control the visibility */
.warning-container.hidden {
    display: none; /* When class 'hidden' is present, don't display the container */
}

/* Adjusted before selector for the warning icon */
.warning-container::before {
    content: url('../assets/image_icon_warning_icon_svg.svg'); /* Path to your warning icon */
    margin-right: 10px; /* Space between icon and text */
    align-self: center; /* Ensures the icon is centered vertically within the container */
}