@charset "UTF-8";

* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}

#login-asleads {display: flex;flex-direction: column;justify-content: center;
align-items: center;height: 100vh;background: linear-gradient(135deg, #f1f1f1, #cececf);}

#login-asleads  .login-container {background: #005ef2;padding: 2rem;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);width: 100%;max-width: 400px;text-align: center;}
#login-asleads  .login-container h1 {text-align: center;margin-bottom: 1rem;color: #fff;}
#login-asleads  .login-container img{margin-bottom: 1rem;}
#login-asleads  .login-container form {display: flex;flex-direction: column;gap: 1rem;}
#login-asleads  .form-group {display: flex;flex-direction: column; width: 100%; padding: 0;}
#login-asleads  .form-group label {margin-bottom: 0.5rem;font-size: 0.9rem;color: #fff;text-align: left;}
#login-asleads .form-group input {padding: 0.8rem;border: 1px solid #ccc;border-radius: 5px;font-size: 1rem;}
#login-asleads  .form-group input:focus {border-color: #6C63FF;outline: none;box-shadow: 0 0 5px rgba(108, 99, 255, 0.5);}
#login-asleads  .login-button {padding: 0.8rem; background: #ffc000;border: none;border-radius: 5px; color: #fff; font-size: 1rem;cursor: pointer; transition: background 0.3s;}
#login-asleads .login-button:hover { background: #5d92e7;color: #fff;}
#login-asleads .forgot-password {text-align: center; margin-top: 1rem;}
#login-asleads  .forgot-password a {text-decoration: none;color: #fff;font-size: 0.9rem;transition: color 0.3s;}
#login-asleads .forgot-password a:hover { color: #5d92e7;}
.footer {text-align: center;margin-top: 1rem;font-size: 0.9rem;color: #666;}
.footer a {color: #6C63FF;text-decoration: none;transition: color 0.3s;}
.footer a:hover {color: #3F3D56;}
#loading {
    display: none;
    text-align: center;
    font-size: 20px;
    color: #333;
  }
@media screen and (max-width: 500px){
    #login-asleads{margin: 0 10px;}
}