input[type="text"], input[type="email"], input[type="password"] { background-color: var(--color-primary-light); } #heading { grid-template-rows: minmax(min-content, max-content); } .subheading, #newHereH { font-size: 1.2rem; } label { margin-top: 0.2rem; } .noteP { margin-top: 0.5rem; margin-bottom: 0.5rem; } #demoNote { width: 100%; max-width: 30rem; font-weight: normal; font-size: 1rem; margin-bottom: 1rem; padding: 1rem; background-color: #ffffc6; } form#send { grid-row: 1; } div.result { padding-top: 0; text-align: center; font-weight: bold; font-size: 1.2rem; } div.loginWrapper, #privacyTop { width: 100%; max-width: 26rem; } div.loginWrapper { background-color: var(--color-primary-fill); display: grid; grid-gap: 0.5rem; /* 1 column. */ grid-template-columns: auto; /* 10 rows. */ grid-template-rows: 0 minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) 3.2rem minmax(min-content, max-content); } label.loginRow { grid-column: 1 / span 1; margin-top: 0.2rem; margin-bottom: 0; } div.loginRow { grid-column: 1 / span 1; display: flex; } #sendButton { margin-top: 0.2rem; grid-column: 1 / span 1; } #sendButton.down { background-color: var(--color-emphasis-border); } #registerButton { margin-top: 0.2rem; } #forgot, .privacy { margin-top: 0.25rem; font-size: 0.9rem; } #privacyTop { padding-top: 0; } .privacy { width: 100%; display: flex; } .privacy > a { margin-top: 0.25rem; margin-bottom: 0.25rem; } .privacyRight { margin-left: auto; } #message { resize: vertical; } #socialWrapper { width: 100%; max-width: 26rem; } #or1 { grid-row: 4 / span 1; } #or2 { grid-row: 6 / span 1; } .loginOr { grid-column: 1 / span 7; font-size: 1.3rem; } /* From https://developers.google.com/identity/sign-in/web/build-button. */ #loginWithGoogle.down { background-color: var(--color-primary-border); } #loginWithGoogle { background: white; color: #444; white-space: nowrap; /* box-shadow: 1px 1px 1px grey; */ border: thin solid #888; padding: 0; } #loginWithGoogle:hover { cursor: pointer; } #googleIcon { background: url("/static/131/images/login-google.svg") transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } #googleText { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the */ font-family: Roboto, sans-serif; } div.registerWrapper { background-color: var(--color-primary-fill); width: 100%; max-width: 26rem; margin-bottom: 2.4rem; /* to match result height at top of page */ display: grid; grid-gap: 0.5rem; /* 1 column. */ grid-template-columns: auto; /* 7 rows. */ grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) 3.2rem minmax(min-content, max-content); } input[type="radio"] { margin-right: 0.5rem; } #groupRadios { display: grid; grid-gap: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(min-content, max-content); } .groupRadio { display: flex; justify-content: center; align-items: center; } div#helloWrapper { grid-column: 1 / span 7; grid-row: 8 / span 1; margin-top: 0; padding: 0; } #hello { font-size: 1.5rem; margin-top: 0; margin-right: 2rem; } .loginRowOuter { position: relative; /* for .eye */ } .loginRowInner { width: 100%; display: flex; } #newHere { width: 100%; display: flex; flex-direction: column; align-items: center; } #newHereH { margin-bottom: 0.5rem; } .privacy.retracted { display: none; }