#splash-auth-gate select,
#userProfile select,
#userSections select, .password-auth-form input:not([type=checkbox]),
#mfaChallengePanel input:not([type=checkbox]),
#splash-auth-gate input:not([type=checkbox]),
#userSecurity input:not([type=checkbox]),
#userProfile input:not([type=checkbox]) {
  color: var(--color-ink);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 15px;
  box-sizing: border-box;
}
#splash-auth-gate select:focus,
#userProfile select:focus,
#userSections select:focus, .password-auth-form input:focus:not([type=checkbox]),
#mfaChallengePanel input:focus:not([type=checkbox]),
#splash-auth-gate input:focus:not([type=checkbox]),
#userSecurity input:focus:not([type=checkbox]),
#userProfile input:focus:not([type=checkbox]) {
  outline: none;
  border-color: var(--color-green);
}
#splash-auth-gate select:-moz-ui-valid,
#userProfile select:-moz-ui-valid,
#userSections select:-moz-ui-valid, .password-auth-form input:-moz-ui-valid:not([type=checkbox]),
#mfaChallengePanel input:-moz-ui-valid:not([type=checkbox]),
#splash-auth-gate input:-moz-ui-valid:not([type=checkbox]),
#userSecurity input:-moz-ui-valid:not([type=checkbox]),
#userProfile input:-moz-ui-valid:not([type=checkbox]), #splash-auth-gate select:-moz-ui-invalid,
#userProfile select:-moz-ui-invalid,
#userSections select:-moz-ui-invalid, .password-auth-form input:-moz-ui-invalid:not([type=checkbox]),
#mfaChallengePanel input:-moz-ui-invalid:not([type=checkbox]),
#splash-auth-gate input:-moz-ui-invalid:not([type=checkbox]),
#userSecurity input:-moz-ui-invalid:not([type=checkbox]),
#userProfile input:-moz-ui-invalid:not([type=checkbox]) {
  box-shadow: none;
}

.password-auth-form input:not([type=checkbox]),
#mfaChallengePanel input:not([type=checkbox]),
#splash-auth-gate input:not([type=checkbox]),
#userSecurity input:not([type=checkbox]),
#userProfile input:not([type=checkbox]) {
  background-color: var(--color-input-fitting);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.password-auth-form input:-moz-ui-valid:not([type=checkbox]),
#mfaChallengePanel input:-moz-ui-valid:not([type=checkbox]),
#splash-auth-gate input:-moz-ui-valid:not([type=checkbox]),
#userSecurity input:-moz-ui-valid:not([type=checkbox]),
#userProfile input:-moz-ui-valid:not([type=checkbox]), .password-auth-form input:-moz-ui-invalid:not([type=checkbox]),
#mfaChallengePanel input:-moz-ui-invalid:not([type=checkbox]),
#splash-auth-gate input:-moz-ui-invalid:not([type=checkbox]),
#userSecurity input:-moz-ui-invalid:not([type=checkbox]),
#userProfile input:-moz-ui-invalid:not([type=checkbox]) {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

#splash-auth-gate select,
#userProfile select,
#userSections select {
  background-color: var(--color-dark-b);
  color: var(--color-white-h);
  color-scheme: var(--color-scheme);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cacaca' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  padding-right: 32px;
  cursor: pointer;
}
[data-theme=midnight-dark] #splash-auth-gate select, #splash-auth-gate [data-theme=midnight-dark] select,
[data-theme=midnight-dark] #userProfile select,
#userProfile [data-theme=midnight-dark] select,
[data-theme=midnight-dark] #userSections select,
#userSections [data-theme=midnight-dark] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23bdbdbd' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=twilight-dark] #splash-auth-gate select, #splash-auth-gate [data-theme=twilight-dark] select,
[data-theme=twilight-dark] #userProfile select,
#userProfile [data-theme=twilight-dark] select,
[data-theme=twilight-dark] #userSections select,
#userSections [data-theme=twilight-dark] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c4c4c4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=halloween] #splash-auth-gate select, #splash-auth-gate [data-theme=halloween] select,
[data-theme=halloween] #userProfile select,
#userProfile [data-theme=halloween] select,
[data-theme=halloween] #userSections select,
#userSections [data-theme=halloween] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e6dccb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=valentines] #splash-auth-gate select, #splash-auth-gate [data-theme=valentines] select,
[data-theme=valentines] #userProfile select,
#userProfile [data-theme=valentines] select,
[data-theme=valentines] #userSections select,
#userSections [data-theme=valentines] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ecd5dc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=st-patricks] #splash-auth-gate select, #splash-auth-gate [data-theme=st-patricks] select,
[data-theme=st-patricks] #userProfile select,
#userProfile [data-theme=st-patricks] select,
[data-theme=st-patricks] #userSections select,
#userSections [data-theme=st-patricks] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d8e6d2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=christmas] #splash-auth-gate select, #splash-auth-gate [data-theme=christmas] select,
[data-theme=christmas] #userProfile select,
#userProfile [data-theme=christmas] select,
[data-theme=christmas] #userSections select,
#userSections [data-theme=christmas] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e8e4d8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=new-year] #splash-auth-gate select, #splash-auth-gate [data-theme=new-year] select,
[data-theme=new-year] #userProfile select,
#userProfile [data-theme=new-year] select,
[data-theme=new-year] #userSections select,
#userSections [data-theme=new-year] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e3dfd2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=dracula] #splash-auth-gate select, #splash-auth-gate [data-theme=dracula] select,
[data-theme=dracula] #userProfile select,
#userProfile [data-theme=dracula] select,
[data-theme=dracula] #userSections select,
#userSections [data-theme=dracula] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d8d8d2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=nord] #splash-auth-gate select, #splash-auth-gate [data-theme=nord] select,
[data-theme=nord] #userProfile select,
#userProfile [data-theme=nord] select,
[data-theme=nord] #userSections select,
#userSections [data-theme=nord] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d8dee9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=solarized] #splash-auth-gate select, #splash-auth-gate [data-theme=solarized] select,
[data-theme=solarized] #userProfile select,
#userProfile [data-theme=solarized] select,
[data-theme=solarized] #userSections select,
#userSections [data-theme=solarized] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a1a1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=gruvbox] #splash-auth-gate select, #splash-auth-gate [data-theme=gruvbox] select,
[data-theme=gruvbox] #userProfile select,
#userProfile [data-theme=gruvbox] select,
[data-theme=gruvbox] #userSections select,
#userSections [data-theme=gruvbox] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d5c4a1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=one-dark] #splash-auth-gate select, #splash-auth-gate [data-theme=one-dark] select,
[data-theme=one-dark] #userProfile select,
#userProfile [data-theme=one-dark] select,
[data-theme=one-dark] #userSections select,
#userSections [data-theme=one-dark] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23abb2bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=tokyo-night] #splash-auth-gate select, #splash-auth-gate [data-theme=tokyo-night] select,
[data-theme=tokyo-night] #userProfile select,
#userProfile [data-theme=tokyo-night] select,
[data-theme=tokyo-night] #userSections select,
#userSections [data-theme=tokyo-night] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a9b1d6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=catppuccin] #splash-auth-gate select, #splash-auth-gate [data-theme=catppuccin] select,
[data-theme=catppuccin] #userProfile select,
#userProfile [data-theme=catppuccin] select,
[data-theme=catppuccin] #userSections select,
#userSections [data-theme=catppuccin] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23bac2de' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=blossom] #splash-auth-gate select, #splash-auth-gate [data-theme=blossom] select,
[data-theme=blossom] #userProfile select,
#userProfile [data-theme=blossom] select,
[data-theme=blossom] #userSections select,
#userSections [data-theme=blossom] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f0dce8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=dim] #splash-auth-gate select, #splash-auth-gate [data-theme=dim] select,
[data-theme=dim] #userProfile select,
#userProfile [data-theme=dim] select,
[data-theme=dim] #userSections select,
#userSections [data-theme=dim] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d9e1e8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=lounge] #splash-auth-gate select, #splash-auth-gate [data-theme=lounge] select,
[data-theme=lounge] #userProfile select,
#userProfile [data-theme=lounge] select,
[data-theme=lounge] #userSections select,
#userSections [data-theme=lounge] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23dbdee1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=daylight] #splash-auth-gate select, #splash-auth-gate [data-theme=daylight] select,
[data-theme=daylight] #userProfile select,
#userProfile [data-theme=daylight] select,
[data-theme=daylight] #userSections select,
#userSections [data-theme=daylight] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231f2328' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=petal] #splash-auth-gate select, #splash-auth-gate [data-theme=petal] select,
[data-theme=petal] #userProfile select,
#userProfile [data-theme=petal] select,
[data-theme=petal] #userSections select,
#userSections [data-theme=petal] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233d2a35' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme=barbie] #splash-auth-gate select, #splash-auth-gate [data-theme=barbie] select,
[data-theme=barbie] #userProfile select,
#userProfile [data-theme=barbie] select,
[data-theme=barbie] #userSections select,
#userSections [data-theme=barbie] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a0d2e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#splash-auth-gate select option,
#userProfile select option,
#userSections select option,
#splash-auth-gate select optgroup,
#userProfile select optgroup,
#userSections select optgroup {
  background-color: var(--color-dark-b);
  color: var(--color-white-h);
}

#splash-auth-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-dark-t);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#splash-auth-main {
  /* Auto top/bottom margins center the form when it fits, but (unlike
     align-items/justify-content: center) degrade to 0 instead of negative
     when the form is taller than the viewport, so it stays top-aligned
     and fully reachable via the container's scrollbar. */
  margin: auto 0;
  width: 340px;
  min-width: 340px;
}

#splash-auth {
  background-color: var(--color-dark-l);
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 8px;
}

#splash-auth-title {
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 6px;
}

#splash-auth .mdl-card,
#splash-auth .firebaseui-auth-container {
  background-color: transparent;
}

.mdl-card .firebaseui-title {
  all: unset; /* Resets most inherited and non-inherited properties */
}

.mdl-card .firebaseui-label {
  color: unset; /* Resets most inherited and non-inherited properties */
  font-size: unset;
}

.mdl-card .firebaseui-error {
  color: var(--color-red);
  font-size: unset;
}

.mdl-card .firebaseui-input {
  color: unset; /* Resets most inherited and non-inherited properties */
  font-size: unset;
}

.mdl-card .firebaseui-text {
  color: unset; /* Resets most inherited and non-inherited properties */
  font-size: unset;
}

.mdl-card .mdl-textfield.is-invalid .mdl-textfield__label:after {
  background-color: var(--color-red);
}

.mdl-card .firebaseui-textfield.mdl-textfield .firebaseui-label::after {
  background-color: var(--color-white);
}

.mdl-card .mdl-button--primary.mdl-button--primary {
  color: var(--color-red);
  background: none;
  text-transform: capitalize;
}

.mdl-card .mdl-button--primary.mdl-button--primary:hover,
.mdl-card .mdl-button--raised.mdl-button--colored:hover {
  background: none;
  color: var(--color-red-h);
}

.mdl-card .mdl-button--raised.mdl-button--colored {
  background: none;
  color: var(--color-red);
  text-transform: capitalize;
  box-shadow: none !important; /* removes the shadow around the button */
  text-shadow: none !important; /* removes any shadow on the button text */
}

.mdl-card .mdl-textfield {
  font-size: unset;
}

.mdl-card .mdl-button {
  font-size: unset;
}

.mdl-card.mdl-shadow--2dp {
  box-shadow: none !important;
}

#signIn,
#signOut {
  color: var(--color-red);
  cursor: pointer;
}

#signIn:hover,
#signOut:hover {
  color: var(--color-red-h);
}

.title-sign-in {
  padding-bottom: 8px;
}

.auth-tagline {
  color: var(--color-white-l);
  font-style: italic;
  text-align: center;
  margin: 0;
}

#auth-browse-anon {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 8px;
  text-align: center;
}

.auth-browse-btn a {
  font-size: 14px;
  font-weight: bold;
}

.auth-divider {
  text-align: center;
  color: var(--color-white-l);
  margin: 14px 24px;
}

#provider-auth-buttons {
  padding: 0 24px;
  text-align: center;
}

.auth-provider-button-wrap {
  padding-bottom: 10px;
}

.auth-email-button-wrap {
  padding: 0 24px 16px;
  text-align: center;
}

.auth-provider-button,
.auth-email-button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 260px;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  margin: 0 auto;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.auth-provider-button:hover,
.auth-email-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35), 0 4px 8px 1px rgba(0, 0, 0, 0.2);
}
.auth-provider-button:active,
.auth-email-button:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.92);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  transition-duration: 0.06s;
}
.auth-provider-button:focus-visible,
.auth-email-button:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-provider-button,
  .auth-email-button {
    transition: filter 0.15s ease, box-shadow 0.15s ease;
  }
  .auth-provider-button:hover, .auth-provider-button:active,
  .auth-email-button:hover,
  .auth-email-button:active {
    transform: none;
  }
}
.auth-provider-icon,
.auth-email-icon {
  flex: 0 0 20px;
  text-align: center;
  font-size: 17px;
  line-height: 1;
}

.auth-provider-label,
.auth-email-label {
  flex: 1 1 auto;
  white-space: nowrap;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 500;
}

.auth-provider-google {
  background-color: var(--color-paper);
}
.auth-provider-google .auth-provider-label {
  color: var(--color-ink);
}
.auth-provider-google .auth-provider-icon {
  color: #4285f4;
}

.auth-provider-facebook {
  background-color: #3b5998;
}

.auth-provider-github {
  background-color: #24292f;
}

.auth-provider-microsoft {
  background-color: #2f2f2f;
}

.auth-email-button {
  background-color: var(--color-red);
}

.auth-provider-facebook .auth-provider-icon,
.auth-provider-facebook .auth-provider-label,
.auth-provider-facebook .auth-email-icon,
.auth-provider-facebook .auth-email-label,
.auth-provider-github .auth-provider-icon,
.auth-provider-github .auth-provider-label,
.auth-provider-github .auth-email-icon,
.auth-provider-github .auth-email-label,
.auth-provider-microsoft .auth-provider-icon,
.auth-provider-microsoft .auth-provider-label,
.auth-provider-microsoft .auth-email-icon,
.auth-provider-microsoft .auth-email-label,
.auth-email-button .auth-provider-icon,
.auth-email-button .auth-provider-label,
.auth-email-button .auth-email-icon,
.auth-email-button .auth-email-label {
  color: var(--color-on-accent);
}

#auth-link-notice {
  margin: 0 24px 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-dark-l);
  color: var(--color-white-l);
  font-size: 14px;
  text-align: center;
}
#auth-link-notice p {
  margin: 0 0 8px;
}
#auth-link-notice strong {
  color: var(--color-white-h);
}

.auth-tos {
  padding: 0 24px 16px;
  margin: 0;
  text-align: center;
  color: var(--color-white-l);
  font-size: 12px;
}
.auth-tos a {
  color: var(--color-red);
  text-decoration: none;
}
.auth-tos a:hover {
  color: var(--color-red-h);
}

.firebaseui-continue {
  text-align: center;
}

.firebaseui-link {
  color: var(--color-red) !important;
  text-transform: capitalize !important;
  text-decoration: none !important;
}

a.firebaseui-link:hover {
  color: var(--color-red-h) !important;
  text-decoration: none !important;
}

#password-auth-panel,
#mfaChallengePanel,
#splash-auth-gate {
  padding-left: 24px;
  padding-right: 24px;
}

#password-auth-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.password-auth-tab {
  cursor: pointer;
  color: var(--color-white-l);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.password-auth-tab:hover {
  color: var(--color-white-h);
}

.password-auth-tab.active {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* Text fields only. A checkbox in one of these panels (the two-factor prompt's "remember this
   device" tick) wants the themed square from mainDesktop.scss, not a full-width pale field. */
.password-auth-form input:not([type=checkbox]),
#mfaChallengePanel input:not([type=checkbox]),
#splash-auth-gate input:not([type=checkbox]),
#userSecurity input:not([type=checkbox]),
#userProfile input:not([type=checkbox]) {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
}

/* <select> dropdowns (the country and base-currency pickers, both here on signup and on the
   User page, and the home page picker in the User page's Navigation section). The look itself is
   %select-base in _variables.scss, shared with the Pennies order form and estimator so every
   dropdown in the app is the same control; only the block layout that lines them up with the text
   inputs above belongs here. */
#splash-auth-gate select,
#userProfile select,
#userSections select {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
}

.password-auth-form input.input-error,
#mfaChallengePanel input.input-error,
#splash-auth-gate input.input-error,
#userSecurity input.input-error,
#userProfile input.input-error,
#splash-auth-gate select.input-error,
#userProfile select.input-error {
  border-color: var(--color-red);
}

.password-auth-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--color-red);
  cursor: pointer;
  text-decoration: none;
}

#mfaChallengeRememberLabel {
  display: flex;
  align-items: center;
  color: var(--color-white-l);
  margin-bottom: 8px;
  cursor: pointer;
}

.password-auth-link:hover {
  color: var(--color-red-h);
}

.password-auth-error {
  color: var(--color-white-l);
  margin-top: 8px;
}
.password-auth-error:empty {
  margin-top: 0;
}

.securityFactorRow,
.trustedDeviceRow {
  justify-content: space-between;
}

@media screen and (max-width: 1000px) {
  html:not([data-viewport-mode=desktop]) #splash-auth-main {
    width: 90%;
    min-width: unset;
    padding: 10px;
  }
  html:not([data-viewport-mode=desktop]) #splash-auth-title {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 4px;
  }
  html:not([data-viewport-mode=desktop]) #auth-browse-anon {
    padding-left: 16px;
    padding-right: 16px;
  }
  html:not([data-viewport-mode=desktop]) .auth-divider,
  html:not([data-viewport-mode=desktop]) .auth-toggle-link {
    margin-left: 16px;
    margin-right: 16px;
  }
  html:not([data-viewport-mode=desktop]) .title-sign-in {
    padding-bottom: 6px;
  }
  html:not([data-viewport-mode=desktop]) #splash-auth {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html:not([data-viewport-mode=desktop]) #SortArea,
  html:not([data-viewport-mode=desktop]) #UserArea,
  html:not([data-viewport-mode=desktop]) #SearchArea {
    font-size: 1.2em;
  }
}
html[data-viewport-mode=mobile] #splash-auth-main {
  width: 90%;
  min-width: unset;
  padding: 10px;
}
html[data-viewport-mode=mobile] #splash-auth-title {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 4px;
}
html[data-viewport-mode=mobile] #auth-browse-anon {
  padding-left: 16px;
  padding-right: 16px;
}
html[data-viewport-mode=mobile] .auth-divider,
html[data-viewport-mode=mobile] .auth-toggle-link {
  margin-left: 16px;
  margin-right: 16px;
}
html[data-viewport-mode=mobile] .title-sign-in {
  padding-bottom: 6px;
}
html[data-viewport-mode=mobile] #splash-auth {
  padding-top: 12px;
  padding-bottom: 12px;
}
html[data-viewport-mode=mobile] #SortArea,
html[data-viewport-mode=mobile] #UserArea,
html[data-viewport-mode=mobile] #SearchArea {
  font-size: 1.2em;
}