/* Extra System CSS Styling */

#loginUserPassword, #loginUserName, #userLoginButton
{
    border-radius: 25px;/* Adjust the radius for smoother edges */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adds a shadow for a floating effect */
    padding: 10px 20px;/* Adjust padding as needed */
}


/* 🔹 Make the whole card transparent */
.card {
    background: rgba(0, 0, 0, 0.4) !important; /* dark glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 12px;
}

/* 🔹 Ensure card-body doesn't override */
.card-body {
    background: transparent !important;
    color: #fff;
}

/* 🔹 Transparent inputs */
.form-control {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

/* 🔹 Placeholder styling */
.form-control::placeholder {
    color: rgba(255,255,255,0.7);
}

/* 🔹 Focus state */
.form-control:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255,255,255,0.4);
    box-shadow: none;
    color: #fff;
}

/* 🔹 Button styling */
#userLoginButton {
    background: rgba(0, 123, 255, 0.7);
    border: none;
    color: #fff;
    transition: 0.3s;
}

#userLoginButton:hover {
    background: rgba(0, 123, 255, 1);
}