html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}body{font-family:Arial,sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100vh;margin:0}body.dev{background-color:#000}body.staff{background-color:#eef2ff}body.user{background-color:#ffd8e7}.login-container{background:#fff;padding:20px;border-radius:10px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);width:350px;text-align:center}h2{margin-bottom:10px}.subtext{color:gray;font-size:14px}form{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}label{text-align:left;font-size:14px;margin:5px 0}input{box-sizing:content-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box}.input-group{position:relative;margin-bottom:10px}.input-group input{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px}.icon{position:absolute;left:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:gray}.options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:12px;margin-top:10px}.login-button{background-color:#4f46e5;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer;margin-top:15px}.login-button:hover{background-color:#4338ca}hr{margin:20px 0;border:none;border-top:1px solid #ddd}.register-text{font-size:12px}footer{margin-top:20px;font-size:12px;color:gray}