/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this adjusts popup dialogs and modal popups */

/* OS-styled javascript modal prompts */
tabmodalprompt {
  background: none !important;
  --in-content-page-background: transparent !important;
  --background-color-canvas: transparent !important;
  --text-color: var(--uc-parent-page-color) !important;
  --in-content-box-background: var(--dialog-box-bgcolor) !important;
  --background-color-box: var(--dialog-box-bgcolor) !important;
  --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important;
  --in-content-box-border-color: var(--dialog-box-border-color) !important;
  --button-background-color: var(--arrowpanel-dimmed) !important;
  --button-background-color-hover: var(--arrowpanel-dimmed-further) !important;
  --button-background-color-active: var(--arrowpanel-dimmed-even-further) !important;
  --in-content-item-selected: var(--purple-40) !important;
  --in-content-border-color: var(--dialog-box-border-color) !important;
  --in-content-border-hover: var(--dialog-box-border-hover) !important;
  --in-content-link-color: var(--purple-35) !important;
  --in-content-link-color-hover: var(--purple-30) !important;
  --in-content-link-color-active: var(--purple-30) !important;
  --link-color: var(--purple-35) !important;
  --link-color-hover: var(--purple-30) !important;
  --link-color-active: var(--purple-30) !important;
  --color-accent-primary: var(--purple-40) !important;
  --color-accent-primary-hover: var(--purple-35) !important;
  --color-accent-primary-active: var(--purple-30) !important;
  --button-background-color-primary: var(--purple-40) !important;
  --button-background-color-primary-hover: var(--purple-35) !important;
  --button-background-color-primary-active: var(--purple-30) !important;
  --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
  --checkbox-border-color: var(--in-content-box-border-color) !important;
  --checkbox-checked-border-color: transparent !important;
  --checkbox-unchecked-bgcolor: var(--button-background-color) !important;
  --checkbox-unchecked-hover-bgcolor: var(--button-background-color-hover) !important;
  --checkbox-unchecked-active-bgcolor: var(--button-background-color-active) !important;
  --checkbox-checked-bgcolor: var(--button-background-color-primary) !important;
  --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
  --checkbox-checked-hover-bgcolor: var(--button-background-color-primary-hover) !important;
  --checkbox-checked-active-bgcolor: var(--button-background-color-primary-active) !important;
  --dropdown-bgcolor: var(--arrowpanel-background) !important;
  --in-content-button-border-radius: var(--general-button-border-radius) !important;
  --in-content-button-vertical-padding: 5px !important;
  --in-content-focus-outline-color: var(--button-background-color-primary-hover) !important;
  --focus-outline-color: var(--button-background-color-primary-hover) !important;
  --tabmodalprompt-padding: var(--arrowpanel-padding) !important;
}

tabmodalprompt * {
  scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
  scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
}

.tabmodalprompt-topContainer {
  margin-inline: 4px !important;
}

.tabmodalprompt-buttonContainer {
  margin-inline: 8px !important;
}

.tabmodalprompt-mainContainer {
  border-radius: 5px !important;
}

.paymentDialogContainerFrame {
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--lwt-text-color, -moz-dialogtext) !important;
}

.tabmodalprompt-mainContainer {
  /* temporarily disabled due to backdrop-filter being disabled.
  see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */

  /* background-color: var(--dialog-bgcolor) !important;
  background-image: var(--acrylic-texture) !important;
  backdrop-filter: var(--acrylic-blur) !important;
  border-color: var(--blurred-dialog-border-color) !important; */

  background-color: var(--ui-quaternary-bg) !important;
  border-color: var(--uc-menu-border-color) !important;

  color: var(--uc-parent-page-color) !important;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25), 0 0 5px -1px rgba(0, 0, 0, 0.125) !important;
}

.tabmodalprompt-mainContainer textbox {
  border-radius: var(--general-button-border-radius) !important;
}

.tabmodalprompt-buttonSpacer {
  display: none !important;
}

.tabmodalprompt-infoContainer,
.tabmodalprompt-loginTextbox,
.tabmodalprompt-loginLabel {
  justify-self: revert !important;
  margin: 2px 4px;
  margin-block: 4px !important;
}

tabmodalprompt input {
  appearance: none !important;
  user-select: text !important;
  -moz-user-select: text !important;
  background: var(--in-content-box-background) !important;
  color: var(--uc-parent-page-color) !important;
  border-radius: var(--general-button-border-radius) !important;
}

tabmodalprompt select:not([size], [multiple]) > option {
  background-color: var(--dropdown-bgcolor) !important;
  color: var(--ui-text-80) !important;
}

tabmodalprompt :is(button, select, input[type="color"], menulist) {
  min-height: var(--menuitem-height) !important;
  border-radius: var(--in-content-button-border-radius) !important;
}

tabmodalprompt :is(input, textarea) {
  border: 1px solid var(--in-content-box-border-color) !important;
  padding: 5px !important;
}

tabmodalprompt input:focus-visible,
tabmodalprompt textarea:focus-visible,
tabmodalprompt search-textbox[focused] {
  border-color: var(--in-content-focus-outline-color) !important;
}

tabmodalprompt :is(input, textarea)::selection {
  background-color: var(--ui-selection-bgcolor) !important;
  color: var(--ui-selection-color) !important;
}

tabmodalprompt input[type="number"] {
  overflow: hidden !important;
  overflow-clip-box: padding-box !important;
  border-radius: var(--in-content-button-border-radius) !important;
  background-clip: padding-box !important;
  border-right: none !important;
}

tabmodalprompt input[type="number"]::-moz-number-spin-box {
  border-top-right-radius: var(--in-content-button-border-radius) !important;
  border-bottom-right-radius: var(--in-content-button-border-radius) !important;
  border-right: 1px solid var(--in-content-box-border-color) !important;
  border-left: none !important;
  width: calc(1em + 0.67px) !important;
}

tabmodalprompt input[type="number"]:hover,
tabmodalprompt input[type="number"]:hover::-moz-number-spin-box {
  border-color: var(--in-content-border-hover) !important;
}

tabmodalprompt input[type="number"]:focus,
tabmodalprompt input[type="number"]:focus::-moz-number-spin-box {
  border-color: var(--in-content-focus-outline-color) !important;
}

tabmodalprompt #titleText {
  font-weight: var(--uc-font-weight-bold, 600) !important;
  font-size: 1.1em !important;
}

.tabmodalprompt-buttonContainer {
  display: flex;
  justify-content: end;
  gap: var(--tabmodalprompt-padding);
}

.tabmodalprompt-buttonContainer button {
  appearance: none !important;
  border-radius: 3px !important;
  background-color: var(--button-background-color) !important;
  margin: revert !important;
  color: var(--uc-parent-page-color) !important;
  padding: 2px !important;
  flex-grow: 0.1 !important;
  justify-self: revert !important;
}

.tabmodalprompt-buttonContainer button:is(:hover, :focus-visible) {
  background-color: var(--button-background-color-hover) !important;
  color: var(--uc-parent-page-color) !important;
}

.tabmodalprompt-buttonContainer button:hover:active {
  background-color: var(--button-background-color-active) !important;
}

tabmodalprompt button:is([autofocus], [type="submit"], .primary):enabled:is(:hover, :focus-visible),
tabmodalprompt button:is([default], .primary):not([disabled="true"]):is(:hover, :focus-visible) {
  background-color: var(--button-background-color-primary-hover) !important;
  color: var(--in-content-primary-button-text-color-hover) !important;
}

.tabmodalprompt-buttonContainer .button-text {
  margin-top: 0.5px !important;
}

.tabmodalprompt-buttonContainer spacer {
  display: none !important;
}

.tabmodalprompt-buttonContainer {
  display: flex !important;
  padding-top: 0 !important;
  background-color: transparent !important;
  border-top: none !important;
}

tabmodalprompt checkbox {
  margin-inline: 4px !important;
}

/* in-content autocomplete popup */
panel[type="autocomplete-richlistbox"] {
  --panel-background: var(--arrowpanel-background) !important;
  --panel-color: var(--arrowpanel-color) !important;
  --panel-border-color: var(--arrowpanel-border-color) !important;
  --panel-border-radius: var(--arrowpanel-border-radius) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox {
  background: none !important;
  color: inherit !important;
  border: none !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem {
  appearance: none !important;
  color: var(--menu-color) !important;
  padding: 4px 8px !important;
  border: none !important;
  min-height: var(--menuitem-height) !important;
  border-radius: var(--context-menuitem-border-radius) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem:is([selected], :hover):not([disabled="true"]) {
  background-color: var(--arrowpanel-dimmed) !important;
  color: var(--menu-color) !important;
}

panel[type="autocomplete-richlistbox"] richlistitem:is([originaltype="generatedPassword"], [originaltype="loginWithOrigin"], [originaltype="login"]) .ac-site-icon {
  fill: currentColor !important;
  fill-opacity: 0.8;
  -moz-context-properties: fill, fill-opacity !important;
  margin-inline-end: 6px !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave,
panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="importableLearnMore"] > .ac-title,
panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .line2-label {
  opacity: 1 !important;
  color: var(--panel-shortcut-color) !important;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > description > .ac-title-text {
  padding-inline: 0 8px !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="loginsFooter"] {
  color: inherit !important;
  border: none !important;
  margin-top: 4px;
  background-color: var(--arrowpanel-dimmed) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="loginsFooter"] .ac-title {
  margin-inline: 0 !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="loginsFooter"]:is(:hover, [selected]) {
  background-color: var(--arrowpanel-dimmed-further) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem[originaltype="loginsFooter"]:hover[selected] {
  background-color: var(--arrowpanel-dimmed-even-further) !important;
}

/* update notifications */
.popup-notification-icon[popupid^="update"] {
  background: hsl(125, 81%, 57%) url(chrome://userchrome/content/update-icon-inverted.svg) no-repeat center/contain !important;
  background-clip: border-box !important;
  fill: hsl(118, 89%, 24%) !important;
  border: 1px solid transparent !important;
  border-radius: 100% !important;
  -moz-context-properties: fill !important;
  padding: 0 !important;
}

.popup-notification-icon:is([popupid="update-available"], [popupid="update-downloading"]) {
  transform: scaleY(-1);
}

.popup-notification-icon[popupid="update-restart"] {
  background: hsl(125, 81%, 57%) url(chrome://userchrome/content/check.svg) no-repeat center/contain !important;
  fill: hsl(118, 89%, 24%) !important;
  transform: none !important;
}

.popup-notification-icon[popupid="update-unsupported"] {
  background: hsl(44, 95%, 60%) url(chrome://userchrome/content/check-partial.svg) no-repeat center/contain !important;
  fill: hsl(32, 52%, 35%) !important;
  transform: none !important;
}

/* push notification popup (lower right corner) */
@-moz-document url("chrome://global/content/alerts/alert.xhtml") {
  #alertBox {
    box-shadow: var(--tooltip-box-shadow) !important;
    color: var(--ui-text-100) !important;
    fill: currentColor !important;
    border: none !important;
    border-radius: calc(var(--toolbarbutton-border-radius) + 1px) !important;
    background-color: var(--alertbox-bgcolor) !important;
    padding: 10px !important;
  }

  #alertBox #alertTitleBox {
    margin-bottom: 5px !important;
    font-weight: normal !important;
  }

  #alertTitleLabel {
    font-weight: normal !important;
    font-size: 1.1em !important;
  }

  #alertTitleLabel {
    margin-left: 5px !important;
  }

  #alertFooter {
    align-items: center !important;
  }

  #alertSourceLabel {
    color: var(--ui-text-50) !important;
    font-size: 0.9em !important;
  }

  button,
  #alertBox .close-icon {
    color: var(--ui-text-100) !important;
  }

  #alertSettings {
    border-radius: var(--toolbarbutton-border-radius) !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    fill: currentColor !important;
  }

  #alertSettings .button-box {
    padding: var(--toolbarbutton-inner-padding) !important;
    margin: 0 !important;
    box-sizing: content-box !important;
  }

  #alertSettings .button-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 1px !important;
  }

  #alertTitleBox .close-icon {
    border-radius: var(--toolbarbutton-border-radius) !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    fill: currentColor !important;
  }

  #alertTitleBox .close-icon .toolbarbutton-icon {
    padding: var(--toolbarbutton-inner-padding) !important;
    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  }

  #alertTitleLabel {
    margin: 0 !important;
    padding-block: 4px 0 !important;
  }

  #alertImage {
    border-radius: var(--toolbarbutton-border-radius);
    margin: 0 12px 7px 7px !important;
  }

  #alertSettings:is(:hover, [open], :hover:active),
  #alertBox .close-icon:is(:hover, :hover:active) {
    background: var(--uc-content-button-background) !important;
  }
}

@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") {
  :root {
    --panel-bgcolor: var(--in-content-box-bg-dark) !important;
    --checkbox-border-color: var(--in-content-box-border-color) !important;
    --checkbox-checked-border-color: transparent !important;
    --checkbox-unchecked-bgcolor: var(--button-background-color) !important;
    --checkbox-unchecked-hover-bgcolor: var(--button-background-color-hover) !important;
    --checkbox-unchecked-active-bgcolor: var(--button-background-color-active) !important;
    --checkbox-checked-bgcolor: var(--button-background-color-primary) !important;
    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
    --checkbox-checked-hover-bgcolor: var(--button-background-color-primary-hover) !important;
    --checkbox-checked-active-bgcolor: var(--button-background-color-primary-active) !important;
  }

  button.control-item {
    /* backdrop-filter has been temporarily disabled by mozilla */
    /* backdrop-filter: blur(8px) !important;
    background-color: var(--btn-bg-color) !important;
    background-image: var(--acrylic-texture), var(--pip-icon) !important; */
    background-image: var(--pip-icon) !important;
    background-color: hsla(0, 0%, 12%, 0.8) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    -moz-context-properties: fill, stroke !important;
    color: var(--player-control-icon-fill) !important;
    border-radius: 3px !important;
  }

  body:not(:fullscreen) #controls:hover .control-item:not(:hover),
  body:fullscreen #controls[showing]:hover .control-item:not(:hover),
  #controls[donthide] .control-item {
    opacity: 1 !important;
  }

  #controls[keying] button:focus-visible {
    outline: var(--global-focus-outline) !important;
    box-shadow: 0 0 5px #111 !important;
  }

  button.control-item:hover,
  #controls[keying] button:focus-visible {
    background-color: hsla(0, 0%, 18%, 0.95) !important;
  }

  #close {
    background-size: 22px !important;
    --pip-icon: url(chrome://userchrome/content/close.svg);
  }

  #controls.playing #playpause {
    background-size: 19px !important;
    --pip-icon: url(chrome://userchrome/content/material/pause.svg);
  }

  #controls:not(.playing) #playpause {
    background-size: 15px !important;
    --pip-icon: url(chrome://userchrome/content/glyph-play-12.svg);
  }

  #seekBackward,
  #seekForward {
    --pip-icon: url(chrome://userchrome/content/skin/reload.svg);
  }

  #controls.muted #audio {
    --pip-icon: url(chrome://userchrome/content/audioMutedButton.svg);
  }

  #controls:not(.muted) #audio {
    --pip-icon: url(chrome://userchrome/content/audioUnmutedButton.svg);
  }

  #unpip {
    --pip-icon: url(chrome://userchrome/content/pictureinpicture-closed.svg);
  }

  #closed-caption {
    --pip-icon: url(chrome://userchrome/content/material/closed-caption-settings.svg);
  }

  body:fullscreen #fullscreen {
    --pip-icon: url(chrome://userchrome/content/skin/fullscreen-exit.svg);
  }

  body:not(:fullscreen) #fullscreen {
    --pip-icon: url(chrome://userchrome/content/skin/fullscreen.svg);
  }

  #seekForward:-moz-locale-dir(rtl),
  #seekBackward:-moz-locale-dir(ltr),
  #unpip:-moz-locale-dir(rtl),
  #closed-caption:dir(rtl) {
    transform: scaleX(-1);
  }

  :is(#seekForward:-moz-locale-dir(rtl), #seekBackward:-moz-locale-dir(ltr), #unpip:-moz-locale-dir(rtl), #closed-caption:dir(rtl))::before,
  :is(#seekForward:-moz-locale-dir(rtl), #seekBackward:-moz-locale-dir(ltr), #unpip:-moz-locale-dir(rtl), #closed-caption:dir(rtl))::after {
    scale: -1 1;
  }

  .box {
    background-color: var(--panel-bgcolor) !important;
  }

  .arrow {
    border-top-color: var(--panel-bgcolor) !important;
  }

  .slider {
    background-color: var(--button-background-color) !important;
  }

  .slider::before {
    background-color: var(--in-content-primary-button-text-color) !important;
  }

  .slider:hover {
    background-color: var(--button-background-color-hover) !important;
  }

  .slider:hover:active {
    background-color: var(--button-background-color-active) !important;
  }

  input:checked + .slider {
    background-color: var(--purple-40) !important;
  }

  input:checked + .slider:hover {
    background-color: var(--purple-35) !important;
  }

  input:checked + .slider:hover:active {
    background-color: var(--purple-30) !important;
  }

  .box label:not(.switch) {
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    flex-flow: row nowrap !important;
    gap: 8px !important;
  }

  .font-size-selection > label > input[type="radio"] {
    appearance: radio !important;
    margin: 0 !important;
  }

  #scrubber {
    --track-color: var(--ui-text-40);
    --progress-color: var(--ui-text-100);
  }

  #scrubber::-moz-range-thumb {
    background-color: var(--progress-color) !important;
    border-color: var(--progress-color) !important;
  }

  #scrubber::-moz-range-track {
    background-color: var(--track-color) !important;
  }

  #scrubber::-moz-range-progress {
    background-color: var(--progress-color) !important;
  }

  #controls[keying] .control-item:focus::after,
  .control-item:hover::after {
    background-color: hsl(0, 0%, 18%) !important;
    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2) !important;
    color: inherit !important;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    .box {
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
      font-weight: var(--uc-font-weight-semibold, 400) !important;
      font-size: 14px !important;
      line-height: 14px !important;
    }

    .box label:not(.switch) {
      font-family: inherit !important;
    }

    .bold {
      font-weight: var(--uc-font-weight-bold, 500) !important;
    }
  }
}

#DateTimePickerPanel {
  --arrowpanel-background: inherit !important;
  --arrowpanel-color: inherit !important;
  --arrowpanel-border-color: inherit !important;
}

@-moz-document url-prefix("chrome://global/content/timepicker.xhtml"), url-prefix("chrome://global/content/datepicker.xhtml") {
  body {
    background-color: var(--arrowpanel-background) !important;
    color: var(--font-color) !important;
  }

  :root {
    --in-content-page-background: var(--toolbar-bgcolor) !important;
    --background-color-canvas: var(--toolbar-bgcolor) !important;
    --font-color: var(--uc-content-page-color) !important;
    --fill-color: var(--arrowpanel-dimmed) !important;
    --selected-fill-color: var(--in-content-link-color) !important;
    --today-fill-color: var(--arrowpanel-dimmed-further) !important;
    --disabled-fill-color: transparent !important;
    --border: none !important;
    --border-active-color: var(--in-content-link-color-hover) !important;
    --selected-font-color: var(--uc-parent-primary-button-text-color) !important;
    --button-fill-color-active: var(--in-content-link-color) !important;
    --weekend-font-color: var(--urlbar-popup-action-color) !important;
    --date-picker-item-height: 29px !important;
  }

  * {
    scrollbar-width: none !important;
  }

  .days-viewport {
    height: 14.6rem !important;
  }

  .days-view > .out-of-range,
  .days-view > .off-step {
    pointer-events: none !important;
    background: none !important;
    opacity: 0.5 !important;
    color: var(--uc-menu-disabled-color) !important;
  }

  .calendar-container .days-view > div::before {
    display: revert !important;
  }

  .month-year {
    color: var(--font-color) !important;
    height: var(--date-picker-item-height) !important;
    border-radius: var(--general-button-border-radius) !important;
  }

  .month-year-view {
    background-color: var(--arrowpanel-background) !important;
    opacity: 1 !important;
  }

  .month-year-view > .spinner-container {
    margin: 1rem 0 !important;
  }

  button {
    fill: currentColor !important;
    -moz-context-properties: fill, fill-opacity !important;
    color: var(--font-color) !important;
  }

  .nav > button:is(.prev, .next) {
    fill-opacity: 0.6 !important;
    width: var(--date-picker-item-height) !important;
    height: var(--date-picker-item-height) !important;
    border-radius: var(--general-button-border-radius);
  }

  .nav > button:is(.prev, .next):hover {
    fill-opacity: 1 !important;
    background-color: var(--arrowpanel-dimmed) !important;
  }

  button.month-year::after {
    position: absolute;
    content: "";
    width: 2.6rem;
    height: 1.6rem;
    background: url(chrome://global/skin/icons/arrow-down.svg) no-repeat 50% 50%;
    -moz-context-properties: fill, fill-opacity;
    fill-opacity: 0.5;
    fill: currentColor !important;
  }

  button.month-year.active::after {
    fill-opacity: 1 !important;
  }

  .spinner {
    color: var(--font-color) !important;
  }

  .month-year-view .spinner > div {
    align-self: center !important;
    padding-block: calc(var(--spinner-item-height) / 5) !important;
    align-items: center !important;
    justify-items: center !important;
  }
}

.pointerlockfswarning {
  align-items: center;
  background: rgba(45, 62, 72, 0.9);
  border-radius: 8px;
  padding: 24px 16px;
  font: message-box;

  /* temporarily disabled due to backdrop-filter being disabled.
  see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */

  /* background-color: var(--dialog-bgcolor) !important;
  background-image: var(--acrylic-texture) !important;
  backdrop-filter: var(--acrylic-blur) !important;
  border: 1px solid var(--blurred-dialog-border-color) !important; */

  background-color: var(--ui-tertiary-bg) !important;
  border: 1px solid var(--uc-menu-border-color) !important;

  color: var(--arrowpanel-color) !important;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25), 0 0 5px -1px rgba(0, 0, 0, 0.125) !important;
  transition-property: transform, opacity !important;
  transition-timing-function: cubic-bezier(0.43, 0, 0.38, 1), cubic-bezier(0.43, 0, 0.38, 1) !important;
  transition-duration: 0.5s, 0.4s !important;
  opacity: 0 !important;
}

.pointerlockfswarning:is([onscreen], [ontop]) {
  opacity: 1 !important;
  transition-timing-function: cubic-bezier(0.13, 0.25, 0.25, 0.92), cubic-bezier(0.43, 0, 0.38, 1) !important;
  transition-duration: 0.4s, 0.35s !important;
}

.pointerlockfswarning button {
  --uc-content-box-border-color: hsla(270, 7%, 98%, 0.1);
  --uc-content-button-background: hsla(0, 20%, 90%, 0.08);
  --uc-content-button-background-hover: hsla(0, 20%, 90%, 0.15);
  --uc-content-button-background-active: hsla(0, 20%, 90%, 0.19);
  appearance: none !important;
  background-color: var(--uc-content-button-background) !important;
  border: 1px solid var(--uc-content-box-border-color) !important;
  border-radius: var(--general-button-border-radius);
  padding: 4px 8px !important;
  min-height: var(--menuitem-height) !important;
}

#pictureInPictureToggleContextMenu {
  display: none !important;
}

/* in-content dialogs */
.tab-prompt-dialog.dialogStack {
  /* to avoid dimming the sidebar and findbar */
  z-index: 0 !important;
}

:is(.tab-prompt-dialog, #window-modal-dialog, .content-prompt-dialog) .dialogBox:not(.fullScreen, .spotlightBox) {
  /* tab-prompt-dialogs are anchored to the top of the browser content area.
  this makes them look like they emerge from under the navbar. */
  margin-top: 0 !important;
  outline: 1px solid var(--arrowpanel-border-color) !important;
}

:is(.tab-prompt-dialog, #window-modal-dialog) :is(.dialogBox, .dialogFrame) {
  border-radius: 0 0 5px 5px !important;
  border-top-width: 0 !important;
}

.content-prompt-dialog :is(.dialogBox, .dialogFrame) {
  border-radius: 5px !important;
}

:is(.tab-prompt-dialog, #window-modal-dialog) .printDialogBox > .dialogFrame {
  border-radius: 0 !important;
}

/* the resizer is on the right side for ltr languages, and on the left side for
rtl languages. adjust the border radius accordingly */
:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox[resizable="true"]:is(:dir(ltr), :-moz-locale-dir(ltr)),
:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox[resizable="true"] .dialogFrame:is(:dir(ltr), :-moz-locale-dir(ltr)) {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 0 !important;
}

:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox[resizable="true"]:is(:dir(rtl), :-moz-locale-dir(rtl)),
:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox[resizable="true"] .dialogFrame:is(:dir(rtl), :-moz-locale-dir(rtl)) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 5px !important;
}

/* modal dialog background overlay */
:not(#window-modal-dialog) > .dialogOverlay[topmost="true"],
#window-modal-dialog::backdrop {
  /* background-color: transparent !important; */
  background-color: hsla(240, 4%, 4%, 0.5) !important;
}

/* make the box shadow even, i hate offset drop shadows */
:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox:not(.fullScreen) {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 0 8px 2px rgba(0, 0, 0, 0.1) !important;
}

#window-modal-dialog,
.tab-prompt-dialog {
  --chrome-offset: calc(0.5px + var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
  clip-path: inset(0 -100% -100% -100%);
}

/* center text in any dialog box */
.dialog-content-box {
  justify-items: center;
}

@-moz-document url("chrome://global/content/commonDialog.xhtml"), url("chrome://mozapps/content/handling/permissionDialog.xhtml"), url("chrome://mozapps/content/handling/appChooser.xhtml"), url("chrome://global/content/appPicker.xhtml"), url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), url-prefix("chrome://browser/content/sanitize.xhtml"), url("chrome://browser/content/preferences/dialogs/siteDataRemoveSelected.xhtml") {
  #commonDialogWindow[dialogroot],
  #commonDialogWindow[dialogroot] *,
  .dialog-button-box {
    --in-content-page-background: var(--ui-quaternary-bg) !important;
    --background-color-canvas: var(--ui-quaternary-bg) !important;
    --text-color: var(--uc-parent-page-color) !important;
    --in-content-box-background: var(--dialog-box-bgcolor) !important;
    --background-color-box: var(--dialog-box-bgcolor) !important;
    --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important;
    --in-content-box-border-color: var(--dialog-box-border-color) !important;
    --button-background-color: var(--arrowpanel-dimmed) !important;
    --button-background-color-hover: var(--arrowpanel-dimmed-further) !important;
    --button-background-color-active: var(--arrowpanel-dimmed-even-further) !important;
    --in-content-item-selected: var(--purple-40) !important;
    --in-content-deemphasized-text: var(--uc-panel-description-color) !important;
    --in-content-border-color: var(--dialog-box-border-color) !important;
    --in-content-border-hover: var(--dialog-box-border-hover) !important;
    --in-content-link-color: var(--purple-35) !important;
    --in-content-link-color-hover: var(--purple-30) !important;
    --in-content-link-color-active: var(--purple-30) !important;
    --link-color: var(--purple-35) !important;
    --link-color-hover: var(--purple-30) !important;
    --link-color-active: var(--purple-30) !important;
    --color-accent-primary: var(--purple-40) !important;
    --color-accent-primary-hover: var(--purple-35) !important;
    --color-accent-primary-active: var(--purple-30) !important;
    --button-background-color-primary: var(--purple-40) !important;
    --button-background-color-primary-hover: var(--purple-35) !important;
    --button-background-color-primary-active: var(--purple-30) !important;
    --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
    --in-content-primary-button-text-color-hover: white !important;
    --in-content-focus-outline-color: var(--button-background-color-primary-hover) !important;
    --focus-outline-color: var(--button-background-color-primary-hover) !important;
    --checkbox-border-color: var(--in-content-box-border-color) !important;
    --checkbox-checked-border-color: transparent !important;
    --checkbox-unchecked-bgcolor: var(--button-background-color) !important;
    --checkbox-unchecked-hover-bgcolor: var(--button-background-color-hover) !important;
    --checkbox-unchecked-active-bgcolor: var(--button-background-color-active) !important;
    --checkbox-checked-bgcolor: var(--button-background-color-primary) !important;
    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
    --checkbox-checked-hover-bgcolor: var(--button-background-color-primary-hover) !important;
    --checkbox-checked-active-bgcolor: var(--button-background-color-primary-active) !important;
    --dropdown-bgcolor: var(--arrowpanel-background) !important;
    --in-content-button-border-radius: var(--general-button-border-radius) !important;
    --in-content-button-vertical-padding: 5px !important;

    transform-style: preserve-3d;
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  :root:not(.system-font-size) {
    font-size: 12px !important;
  }

  dialog[subdialog] .dialogRow {
    margin-block: 0 5px !important;
  }

  #commonDialog[subdialog] #loginTextbox {
    margin-block-start: 2px !important;
  }

  :is(.dialog-content-box, [part="content-box"]):not([hidden]) + .dialog-button-box {
    margin-top: 5px;
  }

  .dialog-button-box:not([hidden]) {
    justify-items: end;
    margin-inline: 4px;
  }

  .dialog-button-box > button {
    flex-grow: 0.1;
  }

  .dialog-button-box > button {
    appearance: none !important;
    min-height: var(--menuitem-height) !important;
    border-radius: var(--in-content-button-border-radius) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    margin: 4px 8px !important;
    font-size: 1em !important;
  }

  .dialog-button-box > button[disabled="true"] {
    opacity: 0.4 !important;
  }

  dialog input:-moz-focusring,
  button:-moz-focusring {
    box-shadow: none !important;
  }

  #checkboxContainer checkbox {
    margin-inline-start: 4px !important;
    margin-top: 4px !important;
  }

  richlistbox[id] {
    background-color: var(--in-content-box-background-dim) !important;
    border-color: var(--in-content-box-border-color) !important;
  }

  richlistbox[id] richlistitem {
    min-height: var(--menuitem-height) !important;
    align-items: center !important;
  }

  richlistbox[id] richlistitem[selected="true"] {
    background-color: var(--button-background-color) !important;
    color: var(--text-color) !important;
  }

  richlistbox[id] richlistitem > button {
    padding-block: 0 !important;
    min-height: 24px !important;
  }

  richlistbox[id] richlistitem > button[label] {
    background-color: var(--button-background-color-primary) !important;
  }

  richlistbox[id] richlistitem:not([disabled="true"]) > button[label]:is(:enabled, :not([disabled="true"])):is(:hover, :focus-visible) {
    background-color: var(--button-background-color-primary-hover) !important;
  }

  richlistbox[id] richlistitem:not([disabled="true"]) > button[label]:is(:enabled, :not([disabled="true"])):hover:active,
  richlistbox[id] richlistitem > button[label][open],
  richlistbox[id] richlistitem > button[label][open]:hover {
    background-color: var(--button-background-color-primary-active) !important;
  }

  select:not([size], [multiple]) > option {
    background-color: var(--dropdown-bgcolor) !important;
    color: var(--ui-text-80) !important;
  }

  button,
  select,
  input[type="color"],
  menulist {
    min-height: var(--menuitem-height) !important;
    border-radius: var(--in-content-button-border-radius) !important;
  }

  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
  textarea,
  search-textbox {
    border-radius: var(--general-button-border-radius) !important;
  }

  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]),
  textarea {
    padding: 5px !important;
  }

  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
  textarea:focus,
  search-textbox[focused] {
    border-color: var(--in-content-focus-outline-color) !important;
  }

  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"])::selection,
  textarea::selection {
    background-color: var(--ui-selection-bgcolor) !important;
    color: var(--ui-selection-color) !important;
  }

  window[role="dialog"] ::selection,
  window[role="dialog"] textarea::selection {
    background-color: var(--global-selection-bgcolor) !important;
    color: var(--global-selection-color) !important;
  }

  input[type="number"] {
    overflow: hidden !important;
    overflow-clip-box: padding-box !important;
    border-radius: var(--in-content-button-border-radius) !important;
    background-clip: padding-box !important;
    border-right: none !important;
  }

  input[type="number"]::-moz-number-spin-box {
    border-top-right-radius: var(--in-content-button-border-radius) !important;
    border-bottom-right-radius: var(--in-content-button-border-radius) !important;
    border-right: 1px solid var(--in-content-box-border-color) !important;
    border-left: none !important;
    width: calc(1em + 0.67px) !important;
  }

  input[type="number"]:hover,
  input[type="number"]:hover::-moz-number-spin-box {
    border-color: var(--in-content-border-hover) !important;
  }

  input[type="number"]:focus,
  input[type="number"]:focus::-moz-number-spin-box {
    border-color: var(--in-content-focus-outline-color) !important;
  }

  #titleText {
    font-weight: var(--uc-font-weight-semibold, 500) !important;
    font-size: 13px !important;
  }

  #chooser #item-choose {
    padding-inline-start: 32px !important;
  }

  #chooser richlistitem {
    padding-block: 3px !important;
  }

  #chooser richlistitem image[width] {
    max-width: 16px !important;
    max-height: 16px !important;
    margin-inline: 8px !important;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    #commonDialogWindow[dialogroot] {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
      padding-block: 2px !important;
    }

    .sizeDetermined {
      padding-block: 14px !important;
    }

    #titleText {
      font-weight: var(--uc-font-weight-semibold, 400) !important;
      font-size: 14px !important;
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
    }

    #chooser .name {
      font-weight: var(--uc-font-weight-bold, 500) !important;
    }
  }
}

@-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), url("chrome://global/content/appPicker.xhtml"), url("chrome://browser/content/preferences/dialogs/siteDataRemoveSelected.xhtml") {
  :root,
  :root dialog,
  .dialog-button-box {
    --in-content-page-background: var(--uc-content-page-background) !important;
    --text-color: var(--uc-content-page-color) !important;
    --in-content-box-background: var(--uc-content-box-background) !important;
    --background-color-box: var(--uc-content-box-background) !important;
    --in-content-box-background-odd: var(--uc-content-box-background-odd) !important;
    --in-content-box-background-dim: var(--uc-content-box-background-dim) !important;
    --in-content-box-border-color: var(--uc-content-box-border-color) !important;
    --button-background-color: var(--uc-content-button-background) !important;
    --button-background-color-hover: var(--uc-content-button-background-hover) !important;
    --button-background-color-active: var(--uc-content-button-background-active) !important;
    --button-background-color-solid: var(--uc-content-button-background-solid);
    --in-content-item-selected: var(--purple-40) !important;
    --in-content-border-color: var(--uc-content-border-color) !important;
    --in-content-border-hover: var(--uc-content-border-hover) !important;
    --in-content-link-color: var(--purple-30) !important;
    --in-content-link-color-hover: var(--purple-25) !important;
    --in-content-link-color-active: var(--purple-20) !important;
    --in-content-link-visited-color: var(--pink-40) !important;
    --in-content-link-visited-color-hover: var(--pink-35) !important;
    --in-content-link-visited-color-active: var(--pink-30) !important;
    --link-color: var(--purple-30) !important;
    --link-color-hover: var(--purple-25) !important;
    --link-color-active: var(--purple-20) !important;
    --link-visited-color: var(--pink-40) !important;
    --link-visited-color-hover: var(--pink-35) !important;
    --link-visited-color-active: var(--pink-30) !important;
    --color-accent-primary: var(--purple-40) !important;
    --color-accent-primary-hover: var(--purple-35) !important;
    --color-accent-primary-active: var(--purple-30) !important;
    --button-background-color-primary: var(--purple-40) !important;
    --button-background-color-primary-hover: var(--purple-35) !important;
    --button-background-color-primary-active: var(--purple-30) !important;
    --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
    --in-content-focus-outline-color: var(--button-background-color-primary-hover) !important;
    --focus-outline-color: var(--button-background-color-primary-hover) !important;
    --in-content-button-border-radius: var(--general-button-border-radius) !important;
    --in-content-accent-color: var(--purple-35) !important;
    --in-content-table-background: var(--in-content-box-background) !important;
    --in-content-table-header-background: var(--purple-40-a50) !important;
  }

  :root {
    max-width: 36em;
  }

  #unknownContentType {
    padding: 10px !important;
  }

  #intro {
    margin-top: 5px !important;
  }

  .header {
    margin-bottom: 5px !important;
  }

  radiogroup radio {
    margin-block: 5px !important;
  }

  menulist {
    min-height: var(--menuitem-height) !important;
  }

  radiogroup deck menulist {
    margin-block: 0 !important;
  }

  /* separator.thin:not([orient="vertical"]) {
    height: 5px !important;
  } */

  .dialog-button-box:not([hidden]) {
    column-gap: 10px !important;
  }

  .dialog-button-box button {
    margin: 0 !important;
    min-height: var(--menuitem-height) !important;
  }

  richlistbox[id] {
    background-color: var(--in-content-box-background) !important;
    border-radius: var(--general-button-border-radius);
  }

  * {
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    .header,
    #location {
      font-weight: var(--uc-font-weight-extrabold, 500) !important;
      font-family: SF Pro, SF Arabic, Segoe UI, sans-serif !important;
    }
  }
}

@-moz-document url("chrome://mozapps/content/handling/permissionDialog.xhtml"), url("chrome://mozapps/content/handling/appChooser.xhtml"), url-prefix("chrome://global/content/print.html"), url("chrome://browser/content/places/bookmarkProperties.xhtml"), url("chrome://browser/content/places/bookmarkProperties2.xhtml"), url-prefix("chrome://browser/content/sanitize.xhtml"), url("chrome://browser/content/spotlight.html"), url("chrome://browser/content/preferences/dialogs/siteDataRemoveSelected.xhtml") {
  :root[dialogroot],
  :root[dialogroot] dialog,
  :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected],
  :root[dialogroot] .onboardingContainer,
  :root[dialogroot] .onboardingContainer .screen {
    --in-content-page-background: var(--ui-quaternary-bg) !important;
    --background-color-canvas: var(--ui-quaternary-bg) !important;
    --text-color: var(--uc-parent-page-color) !important;
    --in-content-box-background: var(--dialog-box-bgcolor) !important;
    --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important;
    --in-content-box-border-color: var(--dialog-box-border-color) !important;
    --in-content-box-info-background: var(--button-background-color-solid) !important;
    --background-color-box: var(--in-content-box-background) !important;
    --button-background-color: var(--arrowpanel-dimmed) !important;
    --button-background-color-hover: var(--arrowpanel-dimmed-further) !important;
    --button-background-color-active: var(--arrowpanel-dimmed-even-further) !important;
    --button-background-color-solid: var(--uc-content-button-background-solid);
    --button-background: var(--button-background-color) !important;
    --button-background-hover: var(--button-background-color-hover) !important;
    --button-background-active: var(--button-background-color-active) !important;
    --button-background-solid: var(--button-background-color-solid);
    --in-content-item-selected: var(--purple-40) !important;
    --in-content-item-hover: var(--arrowpanel-dimmed) !important;
    --in-content-deemphasized-text: var(--uc-panel-description-color) !important;
    --in-content-border-color: var(--dialog-box-border-color) !important;
    --in-content-border-hover: var(--dialog-box-border-hover) !important;
    --in-content-link-color: var(--purple-35) !important;
    --in-content-link-color-hover: var(--purple-30) !important;
    --in-content-link-color-active: var(--purple-30) !important;
    --link-color: var(--purple-30) !important;
    --link-color-hover: var(--purple-25) !important;
    --link-color-active: var(--purple-20) !important;
    --color-accent-primary: var(--purple-40) !important;
    --color-accent-primary-hover: var(--purple-35) !important;
    --color-accent-primary-active: var(--purple-30) !important;
    --button-background-color-primary: var(--purple-40) !important;
    --button-background-color-primary-hover: var(--purple-35) !important;
    --button-background-color-primary-active: var(--purple-30) !important;
    --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
    --in-content-focus-outline-color: var(--button-background-color-primary-hover) !important;
    --focus-outline-color: var(--button-background-color-primary-hover) !important;
    --checkbox-border-color: var(--in-content-box-border-color) !important;
    --checkbox-checked-border-color: transparent !important;
    --checkbox-unchecked-bgcolor: var(--button-background-color) !important;
    --checkbox-unchecked-hover-bgcolor: var(--button-background-color-hover) !important;
    --checkbox-unchecked-active-bgcolor: var(--button-background-color-active) !important;
    --checkbox-checked-bgcolor: var(--button-background-color-primary) !important;
    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
    --checkbox-checked-hover-bgcolor: var(--button-background-color-primary-hover) !important;
    --checkbox-checked-active-bgcolor: var(--button-background-color-primary-active) !important;
    --dropdown-bgcolor: var(--arrowpanel-background) !important;
    --in-content-button-border-radius: var(--general-button-border-radius) !important;
    --in-content-button-vertical-padding: 5px !important;
    --mr-welcome-background-color: var(--in-content-page-background) !important;

    transform-style: preserve-3d;
  }

  .onboardingContainer .screen.light-text {
    --text-color: var(--ui-text-100) !important;
    --in-content-primary-button-text-color: var(--ui-text-100) !important;
    --in-content-primary-button-text-color-hover: var(--ui-text-100) !important;
  }

  :root:not(.system-font-size) {
    font-size: 12px !important;
  }

  /* remove spotlight backdrop overlay */
  .onboardingContainer .screen[pos="center"] {
    background-color: transparent !important;
  }

  .onboardingContainer .main-content {
    border: 1px solid var(--arrowpanel-border-color);
    background-color: var(--in-content-page-background) !important;
  }

  :root[dialogroot] select:not([size], [multiple]) > option {
    background-color: var(--dropdown-bgcolor) !important;
    color: var(--ui-text-80) !important;
  }

  :root[dialogroot] #editBMPanel_tagsSelector {
    margin-inline: 4px !important;
  }

  :root[dialogroot] #editBookmarkPanelRows {
    padding-inline: 0 !important;
    padding-block: 0 8px !important;
  }

  button,
  :root[dialogroot] :is(select, input[type="color"], menulist) {
    min-height: var(--menuitem-height) !important;
    border-radius: var(--in-content-button-border-radius) !important;
  }

  :root[dialogroot] input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]),
  :root[dialogroot] textarea {
    padding-block: 5px !important;
  }

  :root[dialogroot] input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):where(:focus, :focus-visible),
  :root[dialogroot] textarea:where(:focus, :focus-visible),
  :root[dialogroot] search-textbox[focused] {
    border-color: transparent !important;
    outline: var(--in-content-focus-outline) !important;
    outline-offset: 0 !important;
  }

  :where(:root[dialogroot], .dialog-button-box) button:focus-visible,
  :where(:root[dialogroot], .dialog-button-box) select:focus-visible,
  :where(:root[dialogroot], .dialog-button-box) input:is([type="checkbox"], [type="color"], [type="radio"]):focus-visible,
  :where(:root[dialogroot], .dialog-button-box) menulist:focus-visible,
  :where(:root[dialogroot], .dialog-button-box) checkbox:not([native]):focus-visible > .checkbox-check,
  :where(:root[dialogroot], .dialog-button-box) radio[focused="true"] > .radio-check,
  :where(:root[dialogroot], .dialog-button-box) tab:focus-visible > .tab-middle > .tab-text,
  :where(:root[dialogroot], .dialog-button-box) .toggle-group-input:focus-visible + .toggle-group-label{
    outline-offset: 0 !important;
  }

  :root[dialogroot] input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"])::selection,
  :root[dialogroot] textarea::selection {
    background-color: var(--ui-selection-bgcolor) !important;
    color: var(--ui-selection-color) !important;
  }

  :root[dialogroot] details > summary {
    border-radius: 0.01px;
  }

  :root[dialogroot] details > summary:focus-visible {
    outline-offset: 2px;
  }

  :root[dialogroot] menulist,
  :root[dialogroot] input[type="text"] {
    margin-inline: 4px !important;
    padding-block: 0 !important;
    padding-inline: 6px !important;
    margin-block: 0 !important;
    min-height: var(--menuitem-height) !important;
    box-sizing: border-box !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  #custom-range {
    margin: 0 !important;
    margin-top: var(--space-xsmall) !important;
  }

  :root[dialogroot] input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus-visible,
  :root[dialogroot] textarea:focus-visible,
  :root[dialogroot] search-textbox:focus-visible {
    background-color: color-mix(in srgb, currentColor 3%, var(--in-content-box-background)) !important;
  }

  :root[dialogroot] richlistbox[id] {
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  :root[dialogroot] tree {
    margin-inline: 4px !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  :root[dialogroot] treecols {
    border: none !important;
  }

  button {
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  :root[dialogroot] .expander-up,
  :root[dialogroot] .expander-down {
    min-height: var(--menuitem-height) !important;
    min-width: var(--menuitem-height) !important;
    margin-inline: 4px !important;
  }

  button[dlgtype]:is(:hover, :focus-visible):not(:hover:active, [disabled="true"], [default]),
  :root[dialogroot] :is(.expander-up, .expander-down, .panel-button):is(:hover, :focus-visible):not(:hover:active, [disabled="true"]) {
    background-color: var(--button-background-color-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent;
  }

  :root[dialogroot] menulist:not([disabled="true"]):focus-visible:not(:hover:active) {
    background-color: var(--button-background-color-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
  }

  button:is([autofocus], [type="submit"], .primary):enabled:is(:hover, :focus-visible):not(:hover:active, [disabled="true"]),
  button:is([default], .primary):is(:hover, :focus-visible):not(:hover:active, [disabled="true"]),
  .toggle-group-input:checked:focus-visible + .toggle-group-label {
    background-color: var(--button-background-color-primary-hover) !important;
    color: var(--in-content-primary-button-text-color-hover) !important;
  }

  :root[dialogroot] input[type="number"] {
    border-radius: var(--in-content-button-border-radius) !important;
  }

  :root[dialogroot] #titleText {
    font-size: 16px !important;
    line-height: 16px !important;
    font-weight: var(--uc-font-weight-semibold, 500) !important;
  }

  :root[dialogroot] #titleContainer {
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  :root[dialogroot] #titleContainer:not([noicon]) > #titleCropper {
    translate: none !important;
  }

  :root[dialogroot] #handling > #description {
    font-size: 1.15em !important;
    font-weight: var(--uc-font-weight-bold, 600) !important;
  }

  :root[dialogroot] #chooser {
    margin-bottom: 10px !important;
  }

  :root[dialogroot] #remember-text {
    margin-top: 4px !important;
    color: var(--in-content-deemphasized-text);
    margin-left: 24px !important;
  }

  :root[dialogroot] #rememberContainer > .toggle-container-with-text {
    color: inherit !important;
  }

  :root[dialogroot] #bookmarkpropertiesdialog #editBookmarkPanelContent label[control] {
    margin-inline: 0 !important;
  }

  :root[dialogroot] #bookmarkpropertiesdialog .titleIcon {
    padding-inline-end: 6px !important;
  }

  #SanitizeDialog[dialogroot] {
    padding-bottom: 6px !important;
  }

  #SanitizeDialog[dialogroot] #SanitizeDurationBox,
  #SanitizeDialog[dialogroot] #sanitizeEverythingWarningBox {
    margin-inline: 8px !important;
    margin-top: 8px !important;
  }

  #SanitizeDialog[dialogroot] groupbox {
    margin-inline: 8px !important;
  }

  #SanitizeDialog[dialogroot] #sanitizeEverythingWarningBox {
    border-color: transparent !important;
    background-color: transparent !important;
    font-size: 1.1em !important;
  }

  #SanitizeDialog[dialogroot] #sanitizeEverythingWarningIcon {
    list-style-image: url(chrome://global/skin/icons/warning.svg) !important;
    width: 48px;
    height: 48px;
    -moz-context-properties: fill;
    fill: currentColor;
    color: hsl(44, 95%, 60%);
  }

  .tree-input[type="text"] {
    background-color: var(--purple-40) !important;
    border: none !important;
    padding: 1px 0 !important;
    margin-top: -1px !important;
    margin-inline: -4px 3px !important;
    width: auto !important;
    max-width: -moz-available !important;
    text-decoration: 1px dotted underline !important;
    text-decoration-skip-ink: none !important;
  }

  .tree-input[type="text"]::selection {
    background-color: var(--ui-selection-bgcolor) !important;
    color: var(--ui-selection-color) !important;
    text-decoration-color: var(--ui-selection-color) !important;
  }

  :root[dialogroot] * {
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  richlistbox.theme-listbox > richlistitem {
    --button-background-color: var(--purple-50) !important;
    --button-background-color-hover: var(--purple-55) !important;
    --button-background-color-active: var(--purple-60) !important;
    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
    --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
    --focus-outline-color: var(--in-content-item-selected-text) !important;
    --listitem-selectedTextColor: inherit !important;
    --listitem-selectedColor: var(--purple-50) !important;
    --listitem-selectedBorder: transparent !important;
    --listitem-selectedBottomBorder: transparent !important;
    --listitem-selectedBackground: var(--purple-50) !important;
    --listitem-selectedImage: none;
    --listitem-selectedCurrentBorder: transparent !important;
    --listitem-selectedFocusColor: var(--purple-40) !important;
    --listitem-selectedFocusBorder: transparent !important;
    --listitem-selectedFocusBottomBorder: transparent !important;
    --listitem-selectedFocusBackground: var(--purple-40) !important;
    --listitem-selectedFocusImage: none;
    --listitem-selectedFocusCurrentBorder: transparent !important;
    --listitem-selectedFocusCurrentBottomBorder: transparent !important;
    --listitem-selectedFocusCurrentBackground: var(--listitem-selectedFocusColor);
    margin-inline: 0 !important;
  }

  @-moz-document url("chrome://mozapps/content/handling/permissionDialog.xhtml") {
    :root[dialogroot] dialog > #description,
    :root[dialogroot] dialog > #description-box > #description {
      font-size: 1.15em !important;
      font-weight: var(--uc-font-weight-bold, 600) !important;
    }

    :root[dialogroot] #description-box {
      margin-bottom: 10px !important;
    }

    :root[dialogroot] #description:not([hidden], :empty) ~ #description-extra {
      margin-top: -10px !important;
    }
  }

  @-moz-document url("chrome://browser/content/spotlight.html") {
    .onboardingContainer :is(.primary, .secondary) {
      line-height: revert !important;
      min-height: revert !important;
    }
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    :root[dialogroot],
    :root[dialogroot] dialog,
    :root[dialogroot] body {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
    }

    :root[dialogroot] :is(h2, h3, #titleText) {
      font-weight: var(--uc-font-weight-semibold, 400) !important;
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
    }

    :root[dialogroot] .onboardingContainer h1 {
      font-weight: var(--uc-font-weight-bold, 600) !important;
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
    }
  }
}

@-moz-document url-prefix("chrome://global/content/print.html") {
  * {
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  .toggle-group-label {
    padding: 6px 8px !important;
  }

  .toggle-group-label:first-of-type {
    border-start-start-radius: var(--in-content-button-border-radius) !important;
    border-end-start-radius: var(--in-content-button-border-radius) !important;
  }

  .toggle-group-label:last-of-type {
    border-start-end-radius: var(--in-content-button-border-radius) !important;
    border-end-end-radius: var(--in-content-button-border-radius) !important;
  }

  #print-progress {
    background-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important;
    -moz-context-properties: fill !important;
    fill: var(--loading-throbber-fill) !important;
  }
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container {
  border-radius: 4px !important;
  overflow: hidden !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    :is(.toolbarButton, .toolbarCenter) {
  border-color: var(--menu-separator-color) !important;
  border-block: none !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    .toolbarCenter {
  min-width: calc(8px + 12ch) !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
  margin-block: 1px !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    :is(#navigatePrevious, #navigateNext)::after {
  background-image: url("chrome://userchrome/content/arrow-left.svg") !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    #navigatePrevious:-moz-locale-dir(rtl)::after,
link[href="chrome://global/content/printPagination.css"]
    ~ .container
    #navigateNext:-moz-locale-dir(ltr)::after {
  scale: -1 1 !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    .startItem {
  border-inline-start: none !important;
  border-start-start-radius: 4px !important;
  border-end-start-radius: 4px !important;
}

link[href="chrome://global/content/printPagination.css"]
    ~ .container
    .endItem {
  border-inline-end: none !important;
  border-start-end-radius: 4px !important;
  border-end-end-radius: 4px !important;
}

@-moz-document url("chrome://browser/content/webrtcLegacyIndicator.xhtml") {
  button {
    min-width: 28px !important;
  }

  #firefoxButton {
    background-size: 20px !important;
  }

  window[sharingaudio][sharingvideo] > #audioVideoButton {
    min-width: 46px !important;
  }
}

@-moz-document url("chrome://browser/content/webrtcIndicator.xul") {
  :root {
    display: none !important;
  }
}

@-moz-document url("chrome://browser/content/webrtcIndicator.xhtml") {
  :root {
    --indicator-height: 40px !important;
  }

  body {
    align-items: center !important;
  }

  .row-item.separator {
    min-height: 28px;
    border-color: var(--indicator-border-color) !important;
  }

  .control-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  #drag-indicator {
    background-image: url(chrome://browser/skin/notification-icons/drag-indicator.svg);
    background-size: 14px 26px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill, fill-opacity;
    fill: var(--uc-desaturate-dimmed-even-further);
    height: 28px !important;
  }

  .control-icon:not(:hover, :active, :checked) {
    background-color: var(--minimize-button-background-color) !important;
  }

  #display-share-icon {
    background-image: url(chrome://userchrome/content/notifications/screen.svg) !important;
  }

  #microphone-mute-toggle {
    background-image: url(chrome://userchrome/content/notifications/microphone.svg) !important;
  }

  #microphone-mute-toggle:checked {
    background-image: url(chrome://userchrome/content/notifications/microphone-blocked.svg) !important;
  }

  #camera-mute-toggle {
    background-image: url(chrome://userchrome/content/notifications/camera.svg) !important;
  }

  #camera-mute-toggle:checked {
    background-image: url(chrome://userchrome/content/notifications/camera-blocked.svg) !important;
  }

  @media (prefers-color-scheme: dark) {
    #webRTC-sharingCamera-menu {
      list-style-image: url(chrome://userchrome/content/notifications/statusbar/camera.svg) !important;
    }

    #webRTC-sharingMicrophone-menu {
      list-style-image: url(chrome://userchrome/content/notifications/statusbar/microphone.svg) !important;
    }

    #webRTC-sharingScreen-menu {
      list-style-image: url(chrome://userchrome/content/notifications/statusbar/screen.svg) !important;
    }

    @media (-moz-platform: windows) {
      #webRTC-sharingCamera-menu {
        list-style-image: url(chrome://userchrome/content/notifications/statusbar/camera.png) !important;
      }

      #webRTC-sharingMicrophone-menu {
        list-style-image: url(chrome://userchrome/content/notifications/statusbar/microphone.png) !important;
      }

      #webRTC-sharingScreen-menu {
        list-style-image: url(chrome://userchrome/content/notifications/statusbar/screen.png) !important;
      }
    }
  }
}

/* about firefox dialog */
@-moz-document url("chrome://browser/content/aboutDialog.xhtml") {
  * {
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  #leftBox {
    background-image: url(chrome://branding/content/about-logo.svg) !important;
  }

  #aboutDialog {
    width: auto !important;
    max-width: 1000px !important;
  }

  #aboutDialogContainer {
    border: 0 !important;
    background-color: var(--arrowpanel-background) !important;
    color: var(--ui-text-100) !important;
  }

  #bottomBox {
    background: hsla(0, 0%, 0%, 0.15) !important;
  }

  #icons > .icon {
    margin-block: 8px !important;
  }

  button {
    appearance: none;
    background: var(--button-bgcolor);
    color: var(--button-color) !important;
    padding: 8px 10px;
    border-radius: var(--general-button-border-radius);
  }

  button:is(:hover, :focus-visible) {
    background: var(--button-hover-bgcolor);
  }

  button:focus-visible {
    outline: var(--global-focus-outline) !important;
    box-shadow: var(--global-focus-shadow) !important;
  }

  button:hover:active {
    background: var(--button-active-bgcolor);
  }

  /* replace the raster loading animation with a vector animation. we can't
  replace the image's src attribute without javascript, but we can simply push
  the image content outside the element's bounding box by setting "box-sizing:
  border-box" and "padding-left: 16px" since the element is only 16px wide, the
  padding fills it completely, and image content can't be displayed inside the
  padding box, but background-image can, due to "background-clip: border-box" */
  .update-throbber {
    background-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important;
    padding-left: 16px !important;
    box-sizing: border-box !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
    color: var(--loading-throbber-fill) !important;
  }

  #updateDeck button {
    background: var(--buttons-primary-button-bgcolor) !important;
    padding: 8px 10px !important;
    margin-inline-start: 0 !important;
    border: 0 !important;
  }

  #updateDeck button:is(:hover, :focus-visible) {
    background: var(--buttons-primary-button-hover-bgcolor) !important;
  }

  #updateDeck button:hover:active {
    background: var(--buttons-primary-button-active-bgcolor) !important;
  }

  #update-available-whats-new,
  .text-link {
    color: var(--uc-parent-link-color) !important;
    text-decoration: none !important;
  }

  #version {
    -moz-user-focus: none !important;
  }

  #update-available-whats-new:is(:hover, :focus-visible),
  .text-link:is(:hover, :focus-visible) {
    color: var(--uc-parent-link-color-hover) !important;
    text-decoration: underline !important;
  }

  #update-available-whats-new:hover:active,
  .text-link:hover:active {
    color: var(--uc-parent-link-color-active) !important;
  }
}

/* page info popup */
@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xhtml) {
  :root {
    --focus-outline-color: var(--global-focus-outline-color) !important;
  }

  * {
    scrollbar-width: var(--chrome-scrollbar-width, thin) !important;
    scrollbar-color: var(--chrome-scrollbar-thumb-color, inherit) var(--chrome-scrollbar-track-color, transparent) !important;
  }

  input:not([type="file"], [type="image"]):focus-visible,
  select:focus-visible,
  button:focus-visible,
  textarea:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--focus-outline-color) !important;
  }

  #main-window {
    background-color: var(--uc-arrowpanel-background) !important;
    color: var(--uc-arrowpanel-color) !important;
  }

  #topBar {
    padding: 0 !important;
    background-color: var(--ui-secondary-bg) !important;
    border-color: var(--button-solid-active-background) !important;
  }

  #viewGroup {
    padding-inline-start: 4px !important;
  }

  #viewGroup > radio {
    margin: 4px 0 !important;
    padding: 2px !important;
    color: var(--uc-arrowanel-color) !important;
    background: none !important;
    fill: currentColor;
    -moz-image-region: initial !important;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
  }

  #viewGroup > radio > .radio-label-box {
    flex-flow: row nowrap !important;
    justify-items: center !important;
    min-height: var(--subviewbutton-height) !important;
    border-radius: var(--general-button-border-radius);
  }

  #viewGroup > radio:hover .radio-label-box {
    background-color: var(--uc-places-cell-focus-bgcolor) !important;
  }

  #viewGroup > radio[selected="true"] .radio-label-box,
  #viewGroup > radio:hover:active .radio-label-box {
    background-color: var(--uc-places-cell-hover-bgcolor) !important;
  }

  #viewGroup:focus-visible > radio[focused="true"] .radio-label-box {
    outline: var(--global-focus-outline, auto) !important;
  }

  #viewGroup > radio .radio-icon {
    width: 16px !important;
    height: 16px !important;
    margin-inline-end: 6px !important;
  }

  #generalTab .radio-icon {
    background-image: url(chrome://userchrome/content/document.svg) !important;
  }

  #mediaTab .radio-icon {
    background-image: url(chrome://userchrome/content/notifications/canvas.svg) !important;
  }

  #permTab .radio-icon {
    background-image: url(chrome://userchrome/content/formfill.svg) !important;
  }

  #securityTab .radio-icon {
    background-image: url(chrome://userchrome/content/privacy-security.svg) !important;
  }

  #securityTab:hover,
  #securityTab[selected="true"] {
    -moz-image-region: rect(32px, 160px, 64px, 128px);
  }

  input[readonly],
  textbox {
    color: var(--toolbar-field-color) !important;
  }

  richlistbox,
  treecol,
  .tree-columnpicker-button,
  button {
    appearance: none !important;
    background-color: var(--uc-arrowpanel-dimmed) !important;
    color: var(--uc-arrowpanel-color) !important;
    border-color: var(--button-solid-active-background) !important;
  }

  tree splitter {
    appearance: none !important;
    background-color: transparent !important;
  }

  tree splitter::before {
    content: "";
    flex: 1;
    width: 1px;
    border-right: 1px solid var(--button-solid-active-background);
  }

  tree splitter:hover::before {
    border-color: var(--uc-arrowpanel-dimmed);
  }

  .tree-columnpicker-button {
    border-radius: 0 !important;
    border: 0 !important;
  }

  tree,
  richlistbox,
  #permList {
    appearance: none !important;
    background: var(--ui-secondary-bg) !important;
    color: var(--uc-arrowpanel-color) !important;
    border-radius: var(--general-button-border-radius) !important;
    overflow: auto !important;
    border: 1px solid var(--button-solid-active-background) !important;
  }

  :is(tree, richlistbox, #permList):focus-visible {
    outline: var(--global-focus-outline, auto) !important;
  }

  .permission {
    border-bottom: 1px solid var(--button-solid-active-background) !important;
  }

  .permission:last-of-type {
    border-bottom-width: 0 !important;
  }

  treecol,
  .tree-columnpicker-button {
    box-shadow: inset 0 -1px var(--button-solid-active-background) !important;
  }

  :is(treecol, .tree-columnpicker-button):not([hideheader]) {
    height: 24px;
  }

  :is(treecol, .tree-columnpicker-button):hover {
    background-color: var(--uc-arrowpanel-dimmed-further) !important;
  }

  :is(treecol, .tree-columnpicker-button):hover:active {
    background-color: var(--uc-arrowpanel-dimmed-even-further) !important;
  }

  treechildren {
    background-color: transparent !important;
  }

  treechildren::-moz-tree-row(multicol, odd) {
    background-color: var(--uc-arrowpanel-very-faint) !important;
  }

  treechildren::-moz-tree-row(hover),
  #permList > .permission:hover {
    background-color: var(--uc-places-cell-focus-bgcolor) !important;
  }

  treechildren::-moz-tree-row(selected) {
    background-color: var(--uc-places-cell-hover-bgcolor) !important;
    color: var(--uc-arrowpanel-color) !important;
  }

  treechildren::-moz-tree-row(selected),
  treechildren::-moz-tree-row(focus) {
    outline: none !important;
    border: none !important;
  }

  treechildren::-moz-tree-cell-text {
    color: var(--uc-arrowpanel-color) !important;
  }

  button {
    border-radius: var(--general-button-border-radius);
    padding: 4px 5px !important;
    background-color: var(--button-bgcolor) !important;
    border-color: transparent !important;
  }

  button:is(:hover, :focus-visible) {
    background-color: var(--button-hover-bgcolor) !important;
  }

  button:hover:active {
    background-color: var(--button-active-bgcolor) !important;
  }

  .checkbox-check,
  .radio-check {
    appearance: none !important;
    min-width: 14px !important;
    min-height: 14px !important;
    --checkbox-border-color: var(--uc-checkbox-border-color) !important;
    --checkbox-checked-border-color: var(--uc-checkbox-checked-border-color) !important;
    --checkbox-unchecked-bgcolor: var(--uc-checkbox-unchecked-bgcolor) !important;
    --checkbox-unchecked-hover-bgcolor: var(--uc-checkbox-unchecked-hover-bgcolor) !important;
    --checkbox-unchecked-active-bgcolor: var(--uc-checkbox-unchecked-active-bgcolor) !important;
    --checkbox-checked-bgcolor: var(--uc-checkbox-checked-bgcolor) !important;
    --checkbox-checked-color: var(--uc-checkbox-checked-color) !important;
    --checkbox-checked-hover-bgcolor: var(--uc-checkbox-checked-hover-bgcolor) !important;
    --checkbox-checked-active-bgcolor: var(--uc-checkbox-checked-active-bgcolor) !important;
  }

  checkbox:focus-visible > .checkbox-check {
    outline: var(--global-focus-outline) !important;
  }

  .radio-check {
    color: var(--checkbox-border-color, ThreeDDarkShadow);
    background-color: var(--checkbox-unchecked-bgcolor, Field);
    border: 1px solid currentColor;
    border-radius: 50%;
    align-items: center;

    radiogroup:focus-visible > radio[focused] > &,
    radiogroup:focus-visible radio[focused] & {
      outline: var(--global-focus-outline) !important;
    }
  }

  .radio-check[selected] {
    border-color: var(--checkbox-checked-border-color, transparent);
    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color);
    background-image: url("chrome://global/skin/icons/radio.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -moz-context-properties: fill;
    fill: currentColor;
    color: var(--checkbox-checked-color, -moz-accent-color-foreground);
    color-adjust: exact;
  }

  radio:not([disabled="true"]):hover:active > .radio-check[selected] {
    background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, -moz-accent-color));
  }

  radio:not([disabled="true"]):hover > .radio-check[selected] {
    background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, -moz-accent-color));
  }

  radio:not([disabled="true"]):hover:active > .radio-check {
    background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, -moz-accent-color 8%, Field));
  }

  radio:not([disabled="true"]):hover > .radio-check {
    background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, -moz-accent-color 4%, Field));
  }

  radio[disabled="true"] {
    color: var(--uc-menu-disabled-color) !important;
  }

  radio[disabled="true"] > .radio-check {
    opacity: var(--ui-disabled-alpha) !important;
  }

  #imagecontainerbox {
    background: var(--transparent-img-background-context) !important;
    background-color: var(--uc-arrowpanel-faint) !important;
    fill: var(--uc-arrowpanel-dimmed);
    fill-opacity: 0.5;
    border: 1px solid var(--button-solid-active-background) !important;
    border-radius: var(--general-button-border-radius);
    -moz-context-properties: fill, fill-opacity;
  }

  #imagecontainerbox > * {
    color: initial;
    fill: white;
    stroke: white;
    -moz-context-properties: fill, stroke;
  }

  .permissionLabel {
    margin-inline-start: 7px !important;
    margin-block: 0 4px !important;
    padding-block: 2px !important;
    padding-inline-start: 22px !important;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-y: center;
    background-position-x: 0;
    fill: currentColor;
    -moz-context-properties: fill, fill-opacity;
  }

  .permission {
    color: var(--arrowanel-color) !important;
  }

  #perm-midi-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/midi.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-midi-sysex-row .permissionLabel {
    background-image: url(chrome://userchrome/content/material/midi-port.svg);
  }

  #perm-xr-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/xr.svg);
  }

  #perm-geo-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/geo.svg);
  }

  #perm-autoplay-media-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/autoplay-media.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-install-row .permissionLabel {
    background-image: url(chrome://userchrome/content/material/extension.svg);
    background-size: 16px;
  }

  #perm-popup-row .permissionLabel {
    background-image: url(chrome://userchrome/content/skin/window.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-shortcuts-row .permissionLabel {
    background-image: url(chrome://userchrome/content/material/keyboard-command.svg);
  }

  #perm-speaker-row .permissionLabel {
    background-image: url(chrome://userchrome/content/material/speaker.svg);
  }

  #perm-desktop-notification-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/desktop-notification.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-cookie-row .permissionLabel {
    background-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-screen-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/screen.svg);
    background-size: 14px;
    background-position-x: 1px;
  }

  #perm-persistent-storage-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/persistent-storage.svg);
  }

  #perm-focus-tab-by-prompt-row .permissionLabel {
    background-image: url(chrome://userchrome/content/skin/tab.svg);
  }

  #perm-camera-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/camera.svg);
  }

  #perm-microphone-row .permissionLabel {
    background-image: url(chrome://userchrome/content/notifications/microphone.svg);
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    strong,
    .header,
    .permissionLabel {
      font-weight: var(--uc-font-weight-extrabold, 600) !important;
    }
  }
}
