.rs-error-message {
    position: fixed !important; /* Forces block flow, required because .rs-field is relative */
    display: none; /* Hidden by default, shown by JavaScript */
    color: #dc3545; /* Red color */
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 5px;
    padding: 0 5px;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}

#error_message {
    position:relative;
    top:20px;
    background-color: red;
    color: white !important;
    font-size: 14px;
    font-weight: bold;
}

.success {
    background-color: green !important;
    color: white !important;
    font-size: 14px;
    font-weight: bold;
}
/*///////////////////////
    error message*/
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* 3. Style for the Input/Textarea within the Error Container */
.rs-field.rs-input-error input,
.rs-field.rs-input-error textarea {
    /* Gives the actual input element a distinct red border */
    border-color: #dc3545 !important;
}

    /* 4. Ensure the input area maintains error highlighting on focus */
    .rs-field.rs-input-error input:focus,
    .rs-field.rs-input-error textarea:focus {
        border-color: #dc3545;
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    }
/* 4. Ensure the input area maintains error highlighting on focus */
.rs-field.rs-input-error,
.rs-field.rs-input-error {
    margin-bottom: 20px;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}