* { box-sizing: border-box; } .openBtn { display: flex; justify-content: left; } .openButton { border: none; border-radius: 5px; background-color: #1c87c9; color: white; padding: 14px 20px; cursor: pointer; position: fixed; } .loginPopup { position: relative; text-align: center; width: 100%; } .formPopup { display: none; position: fixed; left: 25%; top: 5%; transform: translate(-30%, -5%); border: 3px solid #999999; z-index: 9; } .formContainer { max-width: 300px; padding: 20px; background-color: #fff; } .formContainer input[type=text], .formContainer input[type=number], .formContainer select, .formContainer radio, .formContainer input[type=password] { width: 100%; padding: 15px; margin: 5px 0 20px 0; border: none; background: #eee; } .formContainer input[type=text]:focus, .formContainer input[type=number]:focus, .formContainer select:focus, .formContainer input[type=password]:focus { background-color: #ddd; outline: none; } .formContainer .btn { padding: 12px 20px; border: none; background-color: #8ebf42; color: #fff; cursor: pointer; width: 100%; margin-bottom: 15px; opacity: 0.8; } .formContainer .cancel { background-color: #cc0000; } .formContainer .wait { background-color: #ffffff; } .formContainer .radio { vertical-align: middle; padding: 12px 20px; height: 30px; width: 30px; background-color: #eee; border-radius: 25%; } .formContainer .btn:hover, .openButton:hover { opacity: 1; } .radioLeft { display: block; text-align: left; margin-left: 25%; margin-bottom: 20px; }