/* Custom CSS for Placeholder Glow Animation (Bootstrap 4 compatible) */

/* Style the placeholder to have a light grey background and rounded corners */
.placeholder-glow {
    position: relative;
    /*background-color: #e0e0e0 !important;*/
    border-radius: .375rem; /* Adjust this if you want different border radius */
    display: inline-block;
    height: 1.5rem; /* Adjust height as needed */
    width: 100%;
    animation: placeholder-glow-animation 1.5s infinite ease-in-out;
}

/* Glow effect using keyframes */
@keyframes placeholder-glow-animation {
    0% {
        background-color: #e0e0e0;
    }

    50% {
        background-color: #f8f9fa;
    }

    100% {
        background-color: #e0e0e0;
    }
}

/* Add specific styling for buttons and inputs if needed */
.placeholder-glow .placeholder {
    height: 1.5rem; /* Adjust the size for inputs */
    border-radius: .375rem;
    /*background-color: #e0e0e0;*/
}

/* Adjust button placeholder size (for buttons, inputs, etc.) */
.btn .placeholder {
    width: 50%; /* Adjust based on button size */
}

.form-group .placeholder {
    width: 50%; /* Adjust for label */
}

.placeholder.col-12 {
    width: 100%; /* Ensure full width for larger placeholders */
}

/* Optional: Adjust input placeholder size */
.input-placeholder {
    width: 100%;
    height: 40px; /* Adjust height based on your design */
}