/* - This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   - You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html "http://www.w3.org/1999/xhtml";

/* Global rules */
:root {
  user-select: text;
}

#preferences-root {
  text-rendering: optimizeLegibility;
}

@media not print {
  #preferences-root,
  #preferences-body {
    height: 100%;
    overflow: hidden;
  }
}

#preferences-root,
#preferences-body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#preferences-body {
  vertical-align: top; /* See bug 1606130 */
  display: flex;
  flex-direction: column;

  --main-pane-width: 664px;
}

/*
  The stack has some very tall content but it shouldn't be taller than the
  viewport (and we know the tall content will still be accessible via scrollbars
  regardless if the stack has a shorter height). So we use min-height: 0 to allow
  the stack to be smaller than its content height so it can fit the viewport size.
*/
#preferences-stack {
  min-height: 0;
}

.main-content {
  padding-top: 0;
  /* the 32px min-height, plus 20+30px margin below, plus some leeway: */
  scroll-padding-top: 90px;
  contain: inline-size;
}

.pane-container {
  /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
  display: block;
  width: min(100%, var(--main-pane-width));
  min-width: min-content;
}

#mainPrefPane {
  width: 100%;
  padding: 0;
}

groupbox[data-category] {
  margin: 0 0 32px;
}

html|h1 {
  margin: 0 0 8px;
  font-size: 1.46em;
  font-weight: 300;
  line-height: 1.3em;
}

html|h2 {
  margin: 16px 0 4px;
  font-size: 1.14em;
  line-height: normal;
}

description.indent,
.indent:not(#browserPrivateEngineSelection) > description {
  color: var(--text-color-deemphasized);
}

button,
treecol,
menulist,
html|select {
  /* override the root rule */
  user-select: none;
}

/* Buttons get a default min-width in XUL. When they also have flex, they will
 * be large enough anyway, and we don't want them to become smaller than their inner
 * text which would then overflow the button. Set min-width back to auto for that:
 */
button[flex] {
  min-width: auto;
}

description,
label {
  line-height: 1.8em;
  margin: 0;
}

.tip-caption {
  font-size: .9em;
  color: var(--text-color-deemphasized);
}

menulist::part(label),
menuitem > label,
button > hbox > label {
  line-height: unset;
}

.indent {
  /* This should match the checkboxes/radiobuttons' width and inline margin,
     such that when we have a toggle with a label followed by another element
     with this class, the other element's text aligns with the toggle label. */
  margin-inline-start: 22px !important;
}

checkbox {
  margin-inline: 0;
}

.tail-with-learn-more {
  margin-inline: 0 10px;
}

/* Add a bit of space to the end of descriptions to
 * leave margin with e.g. additional buttons on the side. */
.description-with-side-element {
  margin-inline-end: 10px !important;
}

.learnMore {
  margin-inline-start: 0;
  font-weight: normal;
  white-space: nowrap;
}

.accessory-button {
  min-width: 150px;
  margin: 4px 0;
}

.spotlight {
  background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
  outline: var(--in-content-accent-color) 1px dotted;
  animation: fade-out 0.5s ease-out 2s forwards;
  /* Show the border to spotlight the components in high-contrast mode. */
  border: 1px solid transparent;
  border-radius: 2px;
}

@keyframes fade-out {
  100% {
    background-color: transparent;
    outline-color: transparent;
  }
}

[data-subcategory] {
  margin-inline: -4px;
  padding-inline: 4px;
}

.ac-site-icon {
  display: flex;
}

/* Subcategory title */

/**
 * The first subcategory title for each category should not have margin-top.
 */

.subcategory:not([hidden]) ~ .subcategory {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--in-content-border-color);
}

/* Category List */

#categories {
  overflow: visible;
  min-height: auto;
  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
}

#category-general > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-general.svg");
}

#category-home > .category-icon {
  list-style-image: url("chrome://browser/skin/home.svg");
}

#category-search > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-search.svg");
}

#category-privacy > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg");
}

#category-sync > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-sync.svg");
}

#category-experimental > .category-icon {
  list-style-image: url("chrome://global/skin/icons/experiments.svg");
}

#category-more-from-mozilla > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
}

/* All panes */

.info-icon,
.androidIcon,
.iOSIcon {
  -moz-context-properties: fill;
  fill: currentColor;
}

/* General Pane */

.is-default > #isNotDefaultPane,
:not(.is-default) > #isDefaultPane {
  visibility: hidden;
}

#isDefaultLabel,
#isNotDefaultLabel {
  font-weight: 600;
}

@supports not -moz-bool-pref("browser.migrate.preferences-entrypoint.enabled") {
  #dataMigrationGroup {
    display: none;
  }
}

#dataMigration {
  /* This should really be using baseline, but that doesn't work properly with
   * the <description> and XUL <button> markup. */
  align-items: center;
}

#browserContainersExtensionContent {
  padding-block: 5px;
}

.extension-controlled {
  margin-block: 18px;
}

.extension-controlled-icon {
  height: 20px;
  margin: 2px 0 6px;
  vertical-align: middle;
  width: 20px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.extension-controlled-disabled {
  -moz-context-properties: fill;
  color: GrayText;
  fill: currentColor;
}

.extension-controlled-disabled > .extension-controlled-button {
  display: none;
}

.extension-controlled-icon.close-icon {
  height: 30px;
  width: 30px;
  margin-inline-start: 5px;
}

#getStarted {
  font-size: 90%;
}

#colors {
  margin-inline-start: 5px;
}

#FontsDialog menulist:empty {
  /* When there's no menupopup, while the font builder is running,
   * the height of the menulist would otherwise shrink. This throws
   * off the height determination SubDialog.sys.mjs does, which then
   * leads to content being cut off. Fix by enforcing a minimum height
   * when there's no content: */
  min-height: max(32px, calc(1.4em + 16px));
}

#useDocumentColors {
  margin: 4px 0;
}

#translationAttributionImage {
  width: 70px;
  cursor: pointer;
}

#activeLanguages > richlistitem {
  padding: 0.3em;
}

#saveWhere {
  align-items: center;
}

#saveTo {
  margin-inline-end: 1em;
}

#downloadFolder {
  flex: 1;
  margin-block: 4px;
  margin-inline-start: 0;
  padding-inline-start: 30px;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center left 8px;
}

#downloadFolder:-moz-locale-dir(rtl) {
  background-position-x: right 8px;
}

#updateBox {
  margin-block: 4px 32px;
}

/* Work around bug 560067 - animated images in visibility: hidden
 * still eat CPU. */
#updateDeck > *:not(.deck-selected) > .update-throbber {
  display: none;
}

#updateDeck > hbox > button {
  margin-block: 0;
  margin-inline-end: 0;
}

#updateDeck > hbox > label {
  flex: 1;
}

.manualLink {
  margin-inline-start: 6px !important;
}

#updateRadioGroup > radio {
  min-height: 30px;
  margin: 2px 0;
}

#filter {
  margin: 4px 0 8px;
}

#handlersView {
  height: 25em;
  margin-inline-end: 0;
}

#handlersView > richlistitem {
  min-height: 30px;
}

#handlersView .actionsMenu {
  margin: 0;
  min-height: 0;
  padding: 0;
  border: none;
  padding-inline-end: 8px;
}

#handlersView .actionsMenu::part(label) {
  margin: 0;
}

.typeIcon,
.actionIcon,
.actionsMenu::part(icon) {
  height: 16px;
  width: 16px;
}

.typeIcon {
  margin-inline: 10px 9px !important;
}

#handlersView .actionsMenu::part(icon),
.actionIcon {
  margin-inline: 11px 8px !important;
}

.actionsMenu > menupopup > menuitem {
  padding-inline-start: 10px !important;
}

.actionsMenu > menupopup > menuitem > .menu-iconic-left {
  margin-inline-end: 8px !important;
}

/* Increase the specifity to override common.inc.css */
richlistitem[selected] .actionsMenu:focus-visible {
  outline-offset: -3px;
}

/* Home Pane */

#homepageGroup menulist,
#homepageGroup html|input {
  margin: 5px 0;
}

#homepageGroup html|input {
  text-align: match-parent;
}

#homepageGroup:-moz-locale-dir(rtl) html|input {
  unicode-bidi: plaintext;
}

#homepageAndNewWindowsOption {
  margin-top: 20px;
}

#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] {
  direction: rtl;
}

.homepage-buttons > .homepage-button {
  flex: 1 auto;
}

.homepage-button:first-of-type {
  margin-inline-start: 0;
}

.homepage-button:last-of-type {
  margin-inline-end: 0;
}

#homeContentsGroup .checkbox-icon[src] {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline: 2px 8px;
  width: 16px;
}

#homeContentsGroup [data-subcategory] {
  margin-top: 14px;
}

#homeContentsGroup [data-subcategory] .section-checkbox {
  font-weight: 600;
}

#homeContentsGroup [data-subcategory] > vbox menulist {
  margin-block: 0;
}

.addon-with-favicon .menu-iconic-icon {
  margin-inline-start: 0;
}

a[is="moz-support-link"]:not(.sidebar-footer-link) {
  display: inline-block;
  white-space: initial;
}

/* Search Pane */

#engineList {
  margin: 2px 0 5px;
}

#engineList > treechildren::-moz-tree-image(engineShown, checked),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
  list-style-image: url("chrome://global/skin/icons/check.svg");
  -moz-context-properties: fill, stroke;
  fill: var(--in-content-accent-color);
}

#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
  fill: var(--in-content-item-selected-text);
  stroke: var(--in-content-item-selected);
}

@media (prefers-contrast) {
  #engineList > treechildren::-moz-tree-image(hover),
  #blocklistsTree > treechildren::-moz-tree-image(hover) {
    fill: var(--in-content-item-hover-text);
    stroke: var(--in-content-item-hover);
  }
}

#engineList > treechildren::-moz-tree-row,
#blocklistsTree > treechildren::-moz-tree-row {
  min-height: 36px;
}

#selectionCol {
  min-width: 26px;
}

#addEnginesBox {
  margin: 4px 0 0;
}

/* Privacy Pane */

#allowSmartSize {
  margin-block: 0 4px;
}

#doNotTrackLearnMoreBox {
  margin-top: 32px;
}

#historyPane {
  margin-top: 4px;
}

#historyButtons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#blockCookies,
#keepRow {
  margin-top: 1.5em;
}

/* Collapse the non-active vboxes in decks to use only the height the
   active vbox needs */
#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected,
#syncStatus:not([selectedIndex="1"]) > #syncConfigured {
  visibility: collapse;
}

#tabsElement {
  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
}

.text-link {
  margin-bottom: 0;
}

.text-link[disabled="true"] {
  pointer-events: none;
}

#showUpdateHistory {
  margin-inline-start: 0;
}

@media (-moz-platform: windows-win7),
       (-moz-platform: windows-win8) {
  #windows-sso,
  #windows-sso-caption {
    display: none;
  }
}

/**
 * Dialog
 */

.dialogOverlay {
  visibility: hidden;
}

html|dialog {
  padding: 24px;
}

html|dialog::backdrop,
.dialogOverlay[topmost="true"] {
  background-color: rgba(0,0,0,0.5);
}

html|dialog,
.dialogBox {
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
}

.dialogBox {
  background-color: var(--in-content-page-background);
  background-clip: content-box;
  color: var(--in-content-page-color);
  /* `transparent` will use the dialogText color in high-contrast themes and
     when page colors are disabled */
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
  @media not (prefers-contrast) {
    html|dialog,
    .dialogBox {
      --in-content-page-background: #42414d;
    }
  }
}

.dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 20em;
  min-width: 66ch;
}

.dialogTitleBar {
  padding: .4em .2em;
  border-bottom: 1px solid var(--in-content-border-color);
}

.dialogTitle {
  font-weight: 600;
  text-align: center;
  user-select: none;
}

.fxaPairDeviceIcon {
  background-image: url("chrome://browser/content/logos/fxa-logo.svg");
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 80px;
  padding-top: 42px;
  margin-top: -40px;
}

.fxaPairDeviceIcon .close-icon {
  margin-top: 10px;
}

.close-icon {
  border: none;
  background-color: transparent; /* override common.css, but keep hover/active states */
  min-width: 0;
  min-height: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-inline: 0 8px;
}

.dialogFrame {
  margin: 10px;
  flex: 1;
  /* Default dialog dimensions */
  min-width: 66ch;
}

/**
 * End Dialog
 */

/**
 * Font group and font dialog menulist fixes
 */

#font-chooser-group {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
}

#defaultFont {
  flex: 1 25ch;
}

#defaultFontType,
#serif,
#sans-serif,
#monospace {
  width: 0; /* Might be able to be removed */
  min-width: 30ch;
}

/**
 * Sync
 */

.fxaProfileImage {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid transparent;
  list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg);
  margin-inline-end: 24px;
  -moz-user-focus: normal;
}

.fxaProfileImage.actionable {
  cursor: pointer;
}

.fxaProfileImage.actionable:hover {
  border-color: #0095DD;
}

.fxaProfileImage.actionable:hover:active {
  border-color: #ff9500;
}

#useFirefoxSync {
  font-size: 90%;
  margin-inline-end: 8px !important;
}

#fxaNoLoginStatus {
  margin-block: 46px 64px;
}

#fxaSyncComputerName {
  flex: 1;
  margin-block: 4px;
  margin-inline-start: 0;
}

#fxaChangeDeviceName {
  margin-block: 4px;
  margin-inline-end: 0;
}

#noFxaAccount {
  line-height: 1.2em;
}

#noFxaAccount > label:first-child {
  margin-bottom: 0.6em;
}

#noFxaCaption {
  line-height: 30px;
  margin-block: 0 4px;
}

#noFxaSignIn {
  margin-inline-start: 8px;
}

.fxaSyncIllustration {
  list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
  width: 312px;
  height: 136px;
}

#noFxaDescription {
  padding-inline-end: 52px;
}

.separator {
  border-bottom: 1px solid var(--in-content-box-border-color);
}

#fxaGroup {
  margin-bottom: 32px;
}

.openLink {
  line-height: 30px;
  cursor: pointer;
}

.openLink:visited {
  color: var(--in-content-link-color);
}

#fxaDisplayName {
  margin-inline-end: 10px !important;
}

.fxaLoginRejectedWarning {
  list-style-image: url(chrome://global/skin/icons/warning.svg);
  -moz-context-properties: fill;
  fill: #FFBF00;
  margin-inline: 4px 8px;
}

#syncStatus {
  margin-top: 32px;
}

.sync-group {
  margin-block: 16px;
  border: 1px solid var(--in-content-border-color);
}

.sync-configured {
  display: block;
}

.sync-choose-dialog-description {
  margin-block-end: 10px;
}

.sync-engines-list > div,
.sync-engines-list + hbox {
  margin-top: 0;
  padding-top: 16px;
  max-width: 300px;
  height: auto;
}

dialog > .sync-engines-list > div,
dialog > .sync-engines-list + hbox {
  padding-top: 0;
}

.sync-engines-list checkbox .checkbox-icon,
.sync-engine-image {
  margin-inline: 2px 8px;
  width: 16px;
  height: 16px;
  -moz-context-properties: fill;
  fill: currentColor;
  align-self: center;
}

.sync-engines-list checkbox {
  min-width: max-content;
  max-width: calc(50vw - 10px);
}

.sync-engines-list .checkbox-label-box {
  align-items: center;
}

.sync-engines-list {
  column-count: 2;
  column-fill: balance;
  margin-block-end: 10px;
}

.sync-engines-list > div:not([hidden]) {
  display: flex;
  break-inside: avoid;
}

.sync-engine-bookmarks .checkbox-icon,
.sync-engine-bookmarks.sync-engine-image {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

.sync-engine-history .checkbox-icon,
.sync-engine-history.sync-engine-image {
  list-style-image: url("chrome://browser/skin/history.svg");
}

.sync-engine-tabs .checkbox-icon,
.sync-engine-tabs.sync-engine-image {
  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
}

.sync-engine-passwords .checkbox-icon,
.sync-engine-passwords.sync-engine-image {
  list-style-image: url("chrome://browser/skin/login.svg");
}

.sync-engine-addons .checkbox-icon,
.sync-engine-addons.sync-engine-image {
  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}

.sync-engine-prefs .checkbox-icon,
.sync-engine-prefs.sync-engine-image {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

.sync-engine-addresses .checkbox-icon,
.sync-engine-addresses.sync-engine-image {
  list-style-image: url("chrome://formautofill/content/formfill-anchor.svg");
}

.sync-engine-creditcards .checkbox-icon,
.sync-engine-creditcards.sync-engine-image {
  list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg");
}

.fxaMobilePromo {
  margin-top: 2px !important;
}

.androidIcon,
.iOSIcon {
  margin-inline: 2px 4px;
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

#updateDeck > hbox > label {
  margin-inline-end: 5px ! important;
}

.update-throbber {
  width: 16px;
  min-height: 16px;
  margin-block: 7px;
  margin-inline-end: 8px;
  vertical-align: middle;
}

.update-throbber {
  content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
}

.navigation {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

@media (prefers-reduced-motion) {
  /* Setting border-inline-end on .navigation makes it a focusable element */
  .navigation::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--in-content-border-color);
    top: 0;
    inset-inline-end: 0;
    position: absolute;
  }
}

.face-sad::before {
  content: "\01F641";
  font-size: 1.3em;
  margin-inline-end: 8px;
}

.face-smile::before {
  content: "\01F600";
  font-size: 1.3em;
  margin-inline-end: 8px;
}

#policies-container,
#searchInput {
  min-height: 32px;
  margin: 20px 0 30px;
}

#policies-container {
  margin-inline-end: 16px;
  /* Make sure the container is at least the same height as the searchbox.
     This is needed in addition to the min-height above to make the info icon
     the same height as the first line in the policies label.
     Searchbox's height - line-height - border top and bottom */
  padding-block: max(0px, calc((32px - 1.8em - 2px) / 2));
}

.info-box-container {
  background-color: var(--in-content-box-info-background);
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.info-box-container.smaller-font-size {
  font-size: 85%;
}

.info-icon-container {
  display: flex;
}

.info-icon {
  content: url("chrome://global/skin/icons/info.svg");
  width: 16px;
  height: 16px;
  margin-inline-end: 6px;
  align-self: start;
  margin-top: 0.4em;
  flex-shrink: 0;
}

.info-box-container.smaller-font-size .info-icon {
  margin-top: 0.3em;
}

.sticky-container {
  position: sticky;
  background-color: var(--in-content-page-background);
  top: 0;
  z-index: 1;
  /* The sticky-container should have the capability to cover all spotlight area. */
  width: calc(100% + 8px);
  margin-inline: -4px;
  padding-inline: 4px;
}

.sticky-inner-container {
  flex: 1;
  max-width: var(--main-pane-width);
}

.search-tooltip {
  max-width: 10em;
  font-size: 1rem;
  position: absolute;
  padding: 0 .7em;
  background-color: #ffe900;
  color: #000;
  border: 1px solid #d7b600;
  margin-top: -18px;
  opacity: .85;
}

.search-tooltip:hover {
  opacity: .1;
}

.search-tooltip::before {
  position: absolute;
  content: "";
  border: 7px solid transparent;
  border-top-color: #d7b600;
  top: 100%;
  inset-inline-start: calc(50% - 7px);
  forced-color-adjust: none;
}

.search-tooltip::after {
  position: absolute;
  content: "";
  border: 6px solid transparent;
  border-top-color: #ffe900;
  top: 100%;
  inset-inline-start: calc(50% - 6px);
  forced-color-adjust: none;
}

@media (forced-colors: active) {
  .search-tooltip::before {
    border-top-color: CanvasText;
  }

  .search-tooltip::after {
    border-top-color: Canvas;
  }
}

.search-tooltip-parent {
  position: relative;
}

.search-tooltip > span {
  display: block;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visually-hidden {
  visibility: collapse;
}

menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
  display: flex;
  min-width: auto; /* Override the min-width defined in menu.css */
  margin-inline-end: 6px;
}

menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
  width: 8px;
  height: 10px;
  margin: 0;
}

menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg);
}

menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.menu-iconic-highlightable-text {
  margin: 0; /* Align with the margin of xul:label.menu-iconic-text */
}

#no-results-message > label {
  margin: 2px 0;
  line-height: 30px;
}

/* Proxy port input */

.proxy-port-input {
  width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
  margin-inline-start: 4px;
}

#primaryBrowserLocale {
  margin-inline-start: 0;
  min-width: 20em;
}

#availableLanguages,
#availableLocales {
  margin-inline-start: 0;
}

#availableLanguages,
#availableLocales,
#activeLanguages,
#selectedLocales {
  margin-inline-end: 4px;
}

#activeLanguages,
#selectedLocales {
  min-height: 15em;
  contain: size;
}

#selectedLocales > richlistitem {
  padding-inline-start: 13px;
}

#warning-message > .message-bar-description {
  width: 32em;
}

#warning-message {
  margin-top: 8px;
}

.action-button {
  margin-inline-end: 0;
}

.languages-grid {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
}

/* Menulist styles */
.label-item {
  font-size: 0.8em;
}

.updateSettingCrossUserWarningContainer {
  margin-block-end: 17px;
}

#updateSettingCrossUserWarningDesc {
  padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */
  margin-block-start: 20px;
}

richlistitem .text-link {
  color: inherit;
  text-decoration: underline;
}

richlistitem .text-link:hover {
  color: inherit;
}

#proxy-grid,
#dnsOverHttps-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.proxy-grid-row:not([hidden]),
.dnsOverHttps-grid-row:not([hidden]) {
  display: contents;
}

#proxy-grid > .thin {
  grid-column: span 2;
  height: 20px;
}

#pane-experimental-search-results-header,
#pane-experimental-subtitle {
  background-image: url("chrome://global/skin/icons/warning.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: contain;
  min-height: 30px;
  padding-inline-start: 38px;
  display: flex;
  align-items: center;
  -moz-context-properties: fill;
  fill: #FFBF00;
}

#pane-experimental-search-results-header:-moz-locale-dir(rtl),
#pane-experimental-subtitle:-moz-locale-dir(rtl) {
  background-position-x: right;
}

#pane-experimental-featureGates {
  margin-top: 16px;
}

.featureGate {
  margin-bottom: 16px;
}

.featureGateCheckbox {
  font-size: 1.14em;
  align-items: center;
}

.featureGateCheckbox > .checkbox-label-box {
  align-items: center;
}

.featureGateDescription {
  margin-inline-start: 28px;
}

.checkbox-row {
  display: flex;
  align-items: baseline;
}

.checkbox-row input[type=checkbox] {
  translate: 0 2px
}

.checkbox-row a {
  margin-inline-start: 6px;
}

#moreFromMozillaCategory-header .title {
  margin-block-end: 4px;
}

#moreFromMozillaCategory-header .subtitle {
  color: var(--in-content-text-color);
  margin-block-end: 24px;
  line-height: 1.4em;
}

#moreFromMozillaCategory:not([hidden]) {
  display: flex;
  flex-direction: column;
}

#moreFromMozillaCategory .mozilla-product-item {
  margin-top: 30px;
}

#moreFromMozillaCategory .product-title {
  margin: 4px 0 3px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-inline-start: 30px;
  -moz-context-properties: fill;
  fill: currentColor;
}

#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
  background-position-x: right;
}

#moreFromMozillaCategory .product-description-box {
  padding-inline-start: 30px;
  margin: 2px 0;
  line-height: 1.4em;
}

#moreFromMozillaCategory .description {
  display: inline;
}

#moreFromMozillaCategory .small-button {
  margin-block: 14px 2px;
  margin-inline: 30px 0;
}

#firefox-mobile {
  background-image: url("chrome://browser/skin/device-phone.svg");
}

#mozilla-vpn {
  background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
}

#firefox-relay {
  background-image: url("chrome://browser/skin/preferences/relay-logo.svg");
}

/*
 * The :not clause is required because hiding an element with `display: flex` only
 * partially hides it.
 */
.qr-code-box:not([hidden="true"]) {
  max-width: 320px; /* a unit better than px for this & next? */
  min-height: 204px;
  margin-block: 10px 0;
  margin-inline-start: 30px;
  background-color: var(--in-content-box-info-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 4px;
}

@media (prefers-contrast) {
  .qr-code-box:not([hidden="true"]) {
    border: 1px solid currentColor;
  }
}

.qr-code-box-image {
  border-radius: 4px;
  padding: 2px;
  width: 80px;
  flex: 0 0 auto;
  -moz-context-properties: fill;
  fill: currentColor;
}

.qr-code-title-label {
  flex: 1 1 auto;
}

.qr-code-box-title {
  font-size: .87em;
  font-weight: normal;
  line-height: 1.42em;

  text-align: center;

  margin-block: 20px 0;
  margin-inline: 40px;
}

.simple .qr-code-box-title {
  margin-block: 0;
  width: 296px;
}

.simple .qr-code-box {
  padding-inline: 24px;
  padding-block: 20px
}

.simple .qr-code-box-image {
  padding: 10px;
}

#moreFromMozillaCategory .qr-code-link {
  font-size: .87em;
  line-height: 1.42em;
}

@media (prefers-color-scheme: dark) {
  .qr-code-box:not([hidden="true"]) {
    background-color: rgba(91,91,102,0.45);
  }

  .qr-code-box-title {
    color: #fbfbfe;
  }
}

#websiteAppearanceGroup {
  display: block;
}

#web-appearance-chooser {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

#web-appearance-chooser,
#web-appearance-override-warning {
  margin: 12px 0;
}

#web-appearance-override-warning:not([hidden]) {
  display: flex;
}

.web-appearance-choice {
  width: 100%;
  border: 1px solid var(--in-content-box-border-color);
  background-color: var(--in-content-box-background-color);
  color: var(--in-content-text-color);
  border-radius: 4px;
  overflow: clip;
}

.web-appearance-choice-image-container {
  background-color: var(--in-content-button-background);
  padding: 12px 0;
}

.web-appearance-choice:hover > .web-appearance-choice-image-container {
  background-color: var(--in-content-button-background-hover);
}

.web-appearance-choice:hover:active > .web-appearance-choice-image-container {
  background-color: var(--in-content-button-background-active);
}

.web-appearance-choice img {
  display: block;
  margin: 0 auto;

  border: 1px solid var(--in-content-box-border-color);
  border-radius: 4px;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);

  transform: scaleX(1);
  content: url("chrome://browser/content/preferences/web-appearance-light.svg")
}

.web-appearance-choice.dark img {
  content: url("chrome://browser/content/preferences/web-appearance-dark.svg")
}

.web-appearance-choice img:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.web-appearance-choice-footer {
  border-top: 1px solid var(--in-content-box-border-color);
  padding: 4px 8px;
  overflow-wrap: anywhere;
  display: flex;
}

.web-appearance-choice input {
  margin-top: 0.4em;
}

#translations-manage-install-list {
  height: 220px;
  overflow: scroll;
  background-color: var(--in-content-box-background);
  border: 1px solid var(--in-content-box-border-color);
  border-radius: 4px;
  resize: vertical;
  margin: 4px 0;
}

.translations-manage-language:first-child {
  border-bottom: 1px solid var(--in-content-box-border-color);
  padding: 8px;
  margin-bottom: 8px;
}

.translations-manage-language {
	align-items: center;
  padding: 0 8px;
}

.translations-manage-language label {
	flex: 1;
	margin: 0 15px;
}

#translations-manage-error {
  color: var(--in-content-error-text-color);
  margin: 16px 0;
}

/* Platform-specific tweaks & overrides */

@media (-moz-platform: macos) {
  tabpanels {
    padding: 20px 7px 7px;
  }

  #browserUseCurrent,
  #browserUseBookmark,
  #browserUseBlank {
    margin-top: 10px;
  }

  #privacyPrefs {
    padding: 0 4px;
  }

  #privacyPrefs > tabpanels {
    padding: 18px 10px 10px;
  }

  #OCSPDialogPane {
    font: message-box !important;
  }

  /**
   * Update Preferences
   */
  #autoInstallOptions {
    margin-inline-start: 20px;
  }

  .updateControls {
    margin-inline-start: 10px;
  }
}

@media (-moz-platform: linux) {
  .treecol-sortdirection {
    /* override the Linux only toolkit rule */
    appearance: none;
  }
}