/* --- Base State for ALL Message Labels --- */
/* This defines the VISIBLE state and sets up the animation. */
.message-info, .message-success, .message-warning, .message-error, .message-validation {
    display: inline-block; /* Use this instead of 'block' */
    /* Visual Styling (borders, colors, etc.) */
    border-style: ridge;
    border-radius: 6px;
    border-width: 2px;
    border-color: darkgrey;
    margin: 2px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    width: 90%;
    /* Animation & Layout - THIS IS THE KEY */
    overflow: hidden; /* Prevents content from spilling during animation */
    opacity: 1; /* Fully visible */
    max-height: 500px; /* A large value to accommodate any content */
    transform: translateY(0); /* In its normal position */
    /* Define the transition effect */
    transition: all 0.4s ease-out;
}


/* --- Hidden State --- */
/* This class defines the HIDDEN state. We add/remove this class with JS. */
.hidden {
    opacity: 0; /* Fully transparent */
    max-height: 0; /* Collapses the element's height */
    /* Collapse padding and margin to remove all space */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0; /* Hide the border when collapsed */

    transform: translateY(-20px); /* Moves it up for the "slide" effect */
}

.message-info {
    color: #00529B;
    background-color: #BDE5F8;
    background-position: 5px;
    background-image: url('../MyImages/Info.png');
}

.message-success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-position: 5px;
    background-image: url('../MyImages/ValidGreen.png');
}

.message-warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-position: 5px;
    background-image: url('../MyImages/Attention.png');
}

.message-validation {
    background-position: 5px;
    background-image: url('../MyImages/Attention.png');
}

.message-error {
    color: #D8000C;
    background-color: #FFBABA;
    background-position: 5px;
    background-image: url('../MyImages/Cancel.png');
}

.message-email {
    border-style: ridge;
    border-radius: 6px;
    border-width: 2px;
    border-color: darkgrey;
    margin: 5px 0px;
    padding: 5px 5px 5px 5px;
    width: 90%;
    overflow: auto;
    color: #00529B;
    background-repeat: round;
    background-color: #d3dce0;
    background-image: url('../Resources/MailBackGrnd.png');
}