* { margin: 0; padding: 0; box-sizing: border-box; } body { /* Using the Google Fonts from your */ font-family: 'Poppins', 'Noto Sans Ethiopic', sans-serif; height: 100vh; overflow: hidden; background-color: #fdfdff; } .container { display: flex; height: 100vh; } /* Left side - Login form */ .login-section { flex: 0 0 55%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fbfaff; } .login-form { width: 100%; max-width: 420px; text-align: center; } .login-logo { width: 200px; margin-bottom: 2rem; } .login-title { font-size: 2.2rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; } .login-subtitle { color: #666; margin-bottom: 2.5rem; font-size: 0.9rem; } .input-group { margin-bottom: 1.5rem; position: relative; } /* Styles for ASP.NET Textbox (renders as ) */ .input-field { width: 100%; padding: 0.9rem 1rem 0.9rem 3rem; border: 1px solid transparent; border-radius: 12px; background: #f0effc; font-size: 1rem; font-family: 'Poppins', 'Noto Sans Ethiopic', sans-serif; transition: all 0.3s; } .input-field:focus { outline: none; border-color: #a42c33; background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .input-group:focus-within .input-icon { color: #a42c33; } .input-icon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: #888; font-size: 1rem; transition: color 0.3s ease; z-index: 2; /* Ensure icon is above the input field */ } /* New Style for Password Toggle Icon */ #password-toggle { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: #888; cursor: pointer; transition: color 0.3s ease; } #password-toggle:hover { color: #a42c33; } /* Style for the ASP.NET Button */ .login-btn { width: 100%; padding: 1.1rem; background: #e60000; color: white; border: none; border-radius: 14px; font-size: 1rem; font-weight: bold; cursor: pointer; font-family: 'Poppins', 'Noto Sans Ethiopic', sans-serif; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(230, 0, 0, 0.25); } .login-btn:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230, 0, 0, 0.3); } /* New Style for ASP.NET Validators */ .validation-error { display: block; /* Makes the span take its own line */ color: #c0392b; /* A darker, more readable red */ text-align: left; font-size: 0.85rem; margin-top: 5px; padding-left: 5px; } /* Specific style for the main error label */ .main-error { text-align: center; margin-top: 1rem; font-weight: 500; } /* Right side - Image section */ /* Responsive design */ @media (max-width: 900px) { .image-section { display: none; } .login-section { flex: 1 1 100%; } }