:root {
  color-scheme: dark;
  --ext-bg: #000;
  --ext-panel: #050505;
  --ext-panel-border: #1a1a1a;
  --ext-text: #f3f3f3;
  --ext-muted: #8a8a8a;
  --ext-accent: #f3f3f3;
  --ext-accent-text: #050505;
}

html,
body,
#matrixchat,
.mx_AuthPage,
.mx_AuthPage_modal,
.mx_AuthBody {
  background: var(--ext-bg) !important;
  color: var(--ext-text) !important;
  background-image: none !important;
}

.mx_AuthPage *,
.mx_AuthPage *::before,
.mx_AuthPage *::after {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body,
.mx_AuthPage {
  min-height: 100vh !important;
}

.mx_AuthPage {
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.mx_AuthPage_modal,
.mx_AuthBody,
.mx_AuthBody .mx_Login,
.mx_AuthBody .mx_Login_box,
.mx_AuthBody .mx_Login_form,
.mx_AuthBody .mx_ServerPicker,
.mx_AuthBody .mx_ServerPicker_button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.mx_AuthPage_modal {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.mx_AuthBody,
.mx_AuthBody .mx_Login {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body::before,
body::after,
#matrixchat::before,
#matrixchat::after,
.mx_AuthPage::before,
.mx_AuthPage::after,
.mx_AuthPage_modal::before,
.mx_AuthPage_modal::after,
.mx_AuthBody::before,
.mx_AuthBody::after,
.mx_AuthBody .mx_Login::before,
.mx_AuthBody .mx_Login::after,
.mx_AuthBody .mx_Login_box::before,
.mx_AuthBody .mx_Login_box::after {
  display: none !important;
  content: none !important;
}

.mx_Logo,
.mx_AuthHeader,
.mx_AuthFooter,
.mx_ServerPicker,
.mx_ServerPicker_help,
.mx_ServerPicker_desc,
.mx_AuthBody_header,
.mx_AuthBody_brand,
.mx_AuthBody_logo,
.mx_Login_logo,
.mx_HomePage,
.mx_AuthPage_separator,
.mx_AuthBody h1,
.mx_AuthBody_title,
.mx_AuthBody_subtitle,
.mx_AuthBody .mx_Login_links,
.mx_AuthBody .mx_Login_underlinedServerName,
.mx_AuthBody .mx_SSOButtons,
.mx_AuthBody .mx_Field_labelAlwaysTopLeft,
.mx_AuthBody .mx_Field_label,
.mx_AuthBody label,
.mx_AuthBody .mx_Field_postfix,
.mx_AuthBody .mx_Field_prefix,
.mx_AuthBody .mx_Field_validation,
.mx_AuthBody .mx_Field_extra,
.mx_AuthBody .mx_Field_tooltip {
  display: none !important;
}

.mx_AuthBody form,
.mx_AuthBody .mx_Login_box,
.mx_AuthBody .mx_Login_fields {
  display: grid !important;
  gap: 12px !important;
}

.mx_AuthBody .mx_Field,
.mx_AuthBody .mx_Field_input,
.mx_AuthBody .mx_Field_inputContainer,
.mx_AuthBody .mx_Input_container,
.mx_AuthBody .mx_Field_validity {
  margin: 0 !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mx_AuthBody .mx_Field_inputContainer,
.mx_AuthBody .mx_Input_container {
  border: 0 !important;
  outline: 0 !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody input[type="text"],
.mx_AuthBody input[type="password"],
.mx_AuthBody input[type="email"] {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 18px !important;
  background: var(--ext-panel) !important;
  color: var(--ext-text) !important;
  border: 1px solid var(--ext-panel-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  appearance: none !important;
  font-size: 16px !important;
  line-height: 56px !important;
}

.mx_AuthBody .mx_Field input::placeholder,
.mx_AuthBody input::placeholder,
.mx_AuthBody .mx_Field_label {
  color: var(--ext-muted) !important;
}

.mx_AuthBody input::-webkit-credentials-auto-fill-button,
.mx_AuthBody input::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mx_AuthBody .mx_Field:focus-within input,
.mx_AuthBody input:focus {
  border-color: #2a2a2a !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_AuthBody .mx_Button_primary,
.mx_AuthBody button[type="submit"] {
  width: 100% !important;
  min-height: 56px !important;
  margin: 4px 0 0 !important;
  padding: 0 18px !important;
  background: var(--ext-accent) !important;
  color: var(--ext-accent-text) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.mx_AuthBody .mx_AccessibleButton_kind_primary:hover,
.mx_AuthBody .mx_Button_primary:hover,
.mx_AuthBody button[type="submit"]:hover {
  opacity: 0.92 !important;
}

.mx_AuthBody a,
.mx_AuthBody .mx_StyledCheckbox_caption,
.mx_AuthBody .mx_Login_text,
.mx_AuthBody .mx_Checkbox_label {
  color: var(--ext-muted) !important;
}

.mx_AuthBody .mx_Checkbox_background {
  border-color: var(--ext-panel-border) !important;
  background: var(--ext-panel) !important;
}

@media (max-width: 640px) {
  .mx_AuthPage {
    padding: 16px !important;
  }

  .mx_AuthPage_modal,
  .mx_AuthBody,
  .mx_AuthBody .mx_Login {
    max-width: 100% !important;
  }
}