// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`PreferencesUserSettingsTab should render 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsTab"
    data-testid="mx_PreferencesUserSettingsTab"
  >
    <div
      class="mx_SettingsTab_sections"
    >
      <div
        class="mx_SettingsSection"
      >
        <div
          class="mx_SettingsSection_subSections"
        >
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Language
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="mx_SettingsSubsection_dropdown"
                >
                  Application language
                  <div
                    class="mx_Spinner"
                  >
                    <svg
                      aria-label="Loading…"
                      class="_icon_1855a_18"
                      data-testid="spinner"
                      fill="currentColor"
                      height="1em"
                      role="progressbar"
                      style="width: 32px; height: 32px;"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                  <div
                    class="mx_PreferencesUserSettingsTab_section_hint"
                  >
                    The app will reload after selecting another language
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Room list
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        id="mx_SettingsFlag_vY7Q4uEh9K38"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_vY7Q4uEh9K38"
                    >
                      Show message previews
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Spaces
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_QgU2PomxwKpa"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_QgU2PomxwKpa"
                    >
                      Show all rooms in Home
                    </label>
                    <span
                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                      id="radix-react-use-id-1"
                    >
                      All rooms you're in will appear in Home.
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Keyboard shortcuts
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_description"
              >
                <div
                  class="mx_SettingsSubsection_text"
                >
                  <span>
                    To view all keyboard shortcuts, 
                    <div
                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
                      role="button"
                      tabindex="0"
                    >
                      click here
                    </div>
                    .
                  </span>
                </div>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_6hpi3YEetmBG"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_6hpi3YEetmBG"
                    >
                      Use Ctrl + F to search timeline
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Displaying time
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="mx_SettingsSubsection_dropdown"
                >
                  Set timezone
                  <div
                    class="mx_Dropdown mx_dropdownUserTimezone"
                  >
                    <div
                      aria-describedby="mx_dropdownUserTimezone_value"
                      aria-expanded="false"
                      aria-haspopup="listbox"
                      aria-label="Set timezone"
                      aria-owns="mx_dropdownUserTimezone_input"
                      class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
                      role="button"
                      tabindex="0"
                    >
                      <div
                        class="mx_Dropdown_option"
                        id="mx_dropdownUserTimezone_value"
                      >
                        Browser default (UTC)
                      </div>
                      <svg
                        class="mx_Dropdown_arrow"
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_4yVCeEefiPqp"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_4yVCeEefiPqp"
                    >
                      Show timestamps in 12 hour format (e.g. 2:30pm)
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_MRMwbPDmfGtm"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_MRMwbPDmfGtm"
                    >
                      Always show message timestamps
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_GQvdMWe954DV"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_GQvdMWe954DV"
                    >
                      Publish timezone on public profile
                    </label>
                    <span
                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                      id="radix-react-use-id-2"
                    >
                      Requires your server to support MSC4133
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Presence
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_description"
              >
                <div
                  class="mx_SettingsSubsection_text"
                >
                  Share your activity and status with others.
                </div>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_IAu5CsiHRD7n"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_IAu5CsiHRD7n"
                    >
                      Send read receipts
                    </label>
                    <span
                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                      id="radix-react-use-id-3"
                    >
                      Your server doesn't support disabling sending read receipts.
                    </span>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_yrA2ohjWVJIP"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_yrA2ohjWVJIP"
                    >
                      Send typing notifications
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Composer
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_auy1OmnTidX4"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_auy1OmnTidX4"
                    >
                      Automatically replace plain text Emoji
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_ePDS0OpWwAHG"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_ePDS0OpWwAHG"
                    >
                      Enable Markdown
                    </label>
                    <span
                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                      id="radix-react-use-id-4"
                    >
                      <span>
                        Start messages with 
                        <code>
                          /plain
                        </code>
                         to send without markdown.
                      </span>
                    </span>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_75JNTNkNU64r"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_75JNTNkNU64r"
                    >
                      Enable Emoji suggestions while typing
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_aTLcRsQRlYy7"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_aTLcRsQRlYy7"
                    >
                      Use Ctrl + Enter to send a message
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_5nfv5bOEPN1s"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_5nfv5bOEPN1s"
                    >
                      Surround selected text when typing special characters
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_u1JYVtOyR5kb"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_u1JYVtOyR5kb"
                    >
                      Show stickers button
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_u3pEwuLn9Enn"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_u3pEwuLn9Enn"
                    >
                      Insert a trailing colon after user mentions at the start of a message
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Code blocks
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_YuxfFEpOsztW"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_YuxfFEpOsztW"
                    >
                      Enable automatic language detection for syntax highlighting
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_hQkBerF1ejc4"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_hQkBerF1ejc4"
                    >
                      Expand code blocks by default
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_GFes1UFzOK2n"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_GFes1UFzOK2n"
                    >
                      Show line numbers in code blocks
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Link previews
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_description"
              >
                <div
                  class="mx_SettingsSubsection_text"
                >
                  Shows information about links underneath messages
                </div>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        id="mx_SettingsFlag_vfGFMldL2r2v"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_vfGFMldL2r2v"
                    >
                      Enable previews
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        id="mx_SettingsFlag_bsSwicmKUiOB"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_bsSwicmKUiOB"
                    >
                      Enable previews in encrypted rooms
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Images, GIFs and videos
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_dvqsxEaZtl3A"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_dvqsxEaZtl3A"
                    >
                      Autoplay GIFs
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_NIiWzqsApP1c"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_NIiWzqsApP1c"
                    >
                      Autoplay videos
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Timeline
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_q1SIAPqLMVXh"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_q1SIAPqLMVXh"
                    >
                      Show typing notifications
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_dXFDGgBsKXay"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_dXFDGgBsKXay"
                    >
                      Show a placeholder for removed messages
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_7Az0xw4Bs4Tt"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_7Az0xw4Bs4Tt"
                    >
                      Show read receipts sent by other users
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_8jmzPIlPoBCv"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_8jmzPIlPoBCv"
                    >
                      Show join/leave messages (invites/removes/bans unaffected)
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_enFRaTjdsFou"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_enFRaTjdsFou"
                    >
                      Show display name changes
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_bfwnd5rz4XNX"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_bfwnd5rz4XNX"
                    >
                      Show chat effects (animations when receiving e.g. confetti)
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_gs5uWEzYzZrS"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_gs5uWEzYzZrS"
                    >
                      Show profile picture changes
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_qWg7OgID1yRR"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_qWg7OgID1yRR"
                    >
                      Show avatars in user, room and event mentions
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_pOPewl7rtMbV"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_pOPewl7rtMbV"
                    >
                      Enable big emoji in chat
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_cmt3PZSyNp3v"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_cmt3PZSyNp3v"
                    >
                      Jump to the bottom of the timeline when you send a message
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_dJJz3lHUv9XX"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_dJJz3lHUv9XX"
                    >
                      Show current profile picture and name for users in message history
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Moderation and safety
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <form
                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        id="react-use-id-5"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="react-use-id-5"
                    >
                      Hide avatars of room and inviter
                    </label>
                  </div>
                </div>
                <div
                  aria-label="Show media in timeline"
                  class="_field_1o4d9_27"
                  id="mx_media_previews"
                  role="radiogroup"
                >
                  <label
                    class="_label_1o4d9_60"
                    for="radix-react-use-id-6"
                  >
                    Show media in timeline
                  </label>
                  <span
                    class="_message_1o4d9_86 _help-message_1o4d9_92 mx_MediaPreviewAccountSetting_RadioHelp"
                    id="radix-react-use-id-7"
                  >
                    A hidden media can always be shown by tapping on it
                  </span>
                  <div
                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                  >
                    <div
                      class="_inline-field-control_1o4d9_45"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          class="_input_1ug7n_18"
                          id="mx_media_previews_off"
                          type="radio"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_1o4d9_39"
                    >
                      <label
                        class="_label_1o4d9_60"
                        for="mx_media_previews_off"
                      >
                        Always hide
                      </label>
                    </div>
                  </div>
                  <div
                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                  >
                    <div
                      class="_inline-field-control_1o4d9_45"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          class="_input_1ug7n_18"
                          id="mx_media_previews_private"
                          type="radio"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_1o4d9_39"
                    >
                      <label
                        class="_label_1o4d9_60"
                        for="mx_media_previews_private"
                      >
                        In private rooms
                      </label>
                    </div>
                  </div>
                  <div
                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                  >
                    <div
                      class="_inline-field-control_1o4d9_45"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          checked=""
                          class="_input_1ug7n_18"
                          id="mx_media_previews_on"
                          type="radio"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_1o4d9_39"
                    >
                      <label
                        class="_label_1o4d9_60"
                        for="mx_media_previews_on"
                      >
                        Always show
                      </label>
                    </div>
                  </div>
                </div>
              </form>
              <form
                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
              >
                <div
                  class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_ToggleSwitch"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="react-use-id-8"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="react-use-id-8"
                    >
                      Allow users to invite you to rooms
                    </label>
                    <span
                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                      id="radix-react-use-id-9"
                    >
                      Your server does not implement this feature.
                    </span>
                  </div>
                </div>
              </form>
            </div>
            <div
              class="_separator_13qwf_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  Room directory
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_SBSSOZDRlzlA"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_SBSSOZDRlzlA"
                    >
                      Show NSFW content
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="mx_SettingsSubsection"
            >
              <div
                class="mx_SettingsSubsectionHeading"
              >
                <h2
                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                >
                  General
                </h2>
              </div>
              <div
                class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
              >
                <div
                  class="_inline-field_1o4d9_33"
                >
                  <div
                    class="_inline-field-control_1o4d9_45"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        checked=""
                        class="_input_udcm8_24"
                        disabled=""
                        id="mx_SettingsFlag_FLEpLCb0jpp6"
                        role="switch"
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_1o4d9_39"
                  >
                    <label
                      class="_label_1o4d9_60"
                      for="mx_SettingsFlag_FLEpLCb0jpp6"
                    >
                      Prompt before sending invites to potentially invalid matrix IDs
                    </label>
                  </div>
                </div>
                <div
                  class="mx_Field mx_Field_input"
                >
                  <input
                    id="mx_Field_1"
                    label="Autocomplete delay (ms)"
                    placeholder="Autocomplete delay (ms)"
                    type="number"
                    value="200"
                  />
                  <label
                    for="mx_Field_1"
                  >
                    Autocomplete delay (ms)
                  </label>
                </div>
                <div
                  class="mx_Field mx_Field_input"
                >
                  <input
                    id="mx_Field_2"
                    label="Read Marker lifetime (ms)"
                    placeholder="Read Marker lifetime (ms)"
                    type="number"
                    value="3000"
                  />
                  <label
                    for="mx_Field_2"
                  >
                    Read Marker lifetime (ms)
                  </label>
                </div>
                <div
                  class="mx_Field mx_Field_input"
                >
                  <input
                    id="mx_Field_3"
                    label="Read Marker off-screen lifetime (ms)"
                    placeholder="Read Marker off-screen lifetime (ms)"
                    type="number"
                    value="30000"
                  />
                  <label
                    for="mx_Field_3"
                  >
                    Read Marker off-screen lifetime (ms)
                  </label>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
