@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');body{font-family:'Work Sans',sans-serif;font-weight:300;background-color:#f7f7f7;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.login-container{background:#fff;margin:2rem;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1);width:100%;max-width:400px;text-align:center}h2{margin-bottom:1rem}input[type=text],input[type=password]{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-family:'Work Sans'}.username-container,.password-container{display:flex;align-items:center;position:relative;margin-bottom:1rem}.username-container label,.password-container label{display:none;position:absolute;top:-12px;left:10px;background:#fff;font-size:12px;padding:5px}.visibility-container{display:flex;align-items:center;position:absolute;width:25px;right:10px;cursor:pointer;transition:opacity .3s ease}.visibility-container img{opacity:.7;width:95%}.visibility-container:hover img{opacity:1}button{width:100%;padding:.75rem;background-color:#4a90e2;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem}button:hover{background-color:#357abd}a{display:block;margin-top:1rem;color:#4a90e2;text-decoration:none}a:hover{text-decoration:underline}.error-message{color:red;margin-top:1rem}#requirements{text-align:left;color:indianred;white-space:nowrap;margin-bottom:1rem}#requirements div{font-size:14px;height:30px!important}.valid{color:green}.invalid{color:red}.invalid span{position:relative;top:3px;margin-right:5px;font-size:23px}.valid span{position:relative;top:0;padding-right:3.5px;font-size:20px}button.disabled{background-color:#b0b0b0;color:#fff;cursor:not-allowed;pointer-events:none}button.disabled:hover{background-color:#b0b0b0}