.screenCenter { display: flex; justify-content: center; align-items: center; z-index: var(--login-z-index); position: fixed; inset: 0; visibility: hidden; } .darken { z-index: calc(var(--login-z-index) - 1); } .login { display: flex; flex-direction: column; justify-content: center; flex: 0 1 100%; position: relative; padding: 4em 2em 2em; margin: 0em 3em; max-width: 25em; color: var(--black-98); visibility: visible; border-radius: 2em; translate: 100vw; transition: translate var(--transition-time) ease-in-out; } .loginActive { translate: initial; visibility: initial; } .formContainer { display: flex; justify-content: center; flex-direction: column; } .login .formContainer h1 { font-size: 2em; font-weight: bolder; text-align: center; color: white; margin-bottom: 2rem; } .login .formContainer h2 { font-size: 1.5em; font-weight: 500; margin-bottom: 0.5rem; } .login .formContainer p { text-align: center; line-height: 1.25em; } .promptContainer { min-height: 5em; display: flex; justify-content: space-between; } .login .formContainer button { height: 2.25rem; font-size: 1.25em; margin-bottom: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: 2.5rem; font-weight: 600; cursor: pointer; } .loading { font-size: 1.65rem; filter: invert(95%); } .formContainer a { display: block; text-align: center; text-decoration: underline; cursor: pointer; min-height: 3em; color: inherit; } .promptContainer input { margin: 0 0.25em 0 0; } .cardError { display: none; position: absolute; inset: 0 0 auto 0; min-height: 2em; margin: 1em; justify-content: center; align-items: center; color: white; border-radius: 2em; font-weight: normal; font-style: italic; text-transform: uppercase; } .cardErrorActive { display: flex; }