configs/arch-config/.mozilla/firefox/default-release/chrome/userContent.css

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

/** Video player **************************************************************/
/* Control Bar UI */
audio {
  --duration-color: #929292; /* Like Original */
  --media-background: rgba(26,26,26,.8); /* Like Original */

  border-radius: 8px;
  --box-shadow1: rgba(14,13,26,.12);
  --box-shadow2: rgba(7,48,114,.12);
  --box-shadow3: rgba(34,0,51,.04);
  box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
              0 8px 12px  1px var(--box-shadow3);
  /* Or: 0 2px 15px rgba(0,0,0,.1); */
}
video {
  --duration-color: #eee;
  --media-background: linear-gradient(transparent, rgba(26,26,26,.85));
}

@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  audio {
    --box-shadow1: rgba(249, 249, 250, 0.12);
    --box-shadow2: rgba(91, 91, 102, 0.12);
    --box-shadow3: rgba(82, 82, 94, 0.04);
  }
}
@media (prefers-contrast) {
  video {
    --duration-color: #929292; /* Like Original */
    --media-background: rgba(26,26,26,.8); /* Like Original */
  }
}
#controlsContainer .controlBar {
  background: var(--media-background) !important;
}
#controlsContainer .duration {
  color: var(--duration-color) !important; /* Original: #929292 */
}
#controlsContainer .fullscreenButton {
  background-image: url("./icons/enter-fullscreen.svg") !important;
}
#controlsContainer .fullscreenButton[fullscreened] {
  background-image: url("./icons/exit-fullscreen.svg") !important;
}

#controlsContainer .muteButton[noAudio] {
  /* Remove volume button at noAudio */
  display: none !important;
}

/* Control Bar Size */
#controlsContainer {
  --button-size: 32px !important; /* Original: 30px */
  --controlBar-height: 40px; /* Original: 40px, Replace to this value */
}
#controlsContainer .touch {
  --button-size: 48px !important; /* Original: 40px */
  --controlBar-height: 52px; /* Original: 52px */
}
.videocontrols[inDOMFullscreen] #controlsContainer {
  --button-size: 64px !important; /* Original: 30px */
  --track-size: 6px !important; /* Original: 5px, Touch: 7px */
  --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
  --controlBar-height: 64px; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .touch {
  --button-size: 72px !important; /* Original: 40px */
  --controlBar-height: 64px; /* Original: 52px */
}
#controlsContainer .controlBar {
  height: var(--controlBar-height) !important; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
  padding-bottom: 8px !important;
}

/* Click to play UI */
#controlsContainer .clickToPlay {
  cursor: pointer;
  opacity: 0.65 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay {
  opacity: 0.85 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
  opacity: 1 !important;
  fill: #48a0f7 !important; /* color as .scrubber */
}

/* Animation */
@media (prefers-reduced-motion: no-preference) {
  /* Control Bar */
  #controlsContainer .controlBar {
    transition: transform 350ms ease;
    opacity: 1 !important;
  }
  #controlsContainer .controlBar[hidden] {
    transform: translateY(100%);
    transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
    opacity: 0 !important;
  }
  #controlsContainer .controlBar[hidden] .progressBar,
  #controlsContainer .controlBar[hidden] .bufferBar {
    display: unset !important;
    opacity: 0.55;
    transition: opacity 150ms ease 50ms;
  }

  /* Click to play */
  #controlsContainer .clickToPlay {
    transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
  }
}

@-moz-document url("about:home"), url("about:newtab") {
  /** Activity Stream - Search Focus Border: like URL *************************/
  /* At DarkMode, Color */
  body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
  body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
  body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
  body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] {
    /* inner */
    --newtab-focus-border: rgba(
      0,
      221,
      255,
      0.5
    ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
    --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */

    /* For Nightly */
    --newtab-primary-action-background: var(--newtab-focus-border) !important;
  }

  /** Activity Stream - Web Site Icon: full size ******************************/
  .top-site-outer .tile {
    overflow: hidden;
  }

  .top-site-outer .tile .icon-wrapper {
    width: 100% !important; /* Original: 48px */
    height: 100% !important; /* Original: 48px */
  }

  /** Activity Stream - Animate ***********************************************/
  @media (prefers-reduced-motion: no-preference) {
    :root {
      --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
    }

    /* Background */
    .top-site-outer,
    #searchSubmit,
    button.icon,
    button.close-button {
      transition: background 1.5s var(--animation-easing-function);
    }
    .top-site-outer:hover,
    #searchSubmit:hover,
    button.icon:hover,
    button.close-button:hover {
      transition: background 0.5s var(--animation-easing-function);
    }

    /* Search Bar */
    .search-inner-wrapper input {
      transition: 1s var(--animation-easing-function);
      transition-property: border-color, box-shadow;
    }
    .search-wrapper .search-inner-wrapper:active input,
    .search-wrapper input:focus {
      transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
    }
    .search-wrapper .search-inner-wrapper:hover input {
      border-color: var(--newtab-primary-action-background) !important;
      transition: border-color 0.5s var(--animation-easing-function);
    }
  }

  /** Activity Stream - Home Search Bar looks like proton *********************/
  /* Dropdown Colors */
  #root {
    --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */

    /* Set search dropdown background */
    --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
    --newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
    --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
  }

  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    #root {
      /* Default Dark Mode */
      --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
    }
  }
  .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
    /* Light weight theme */
    --newtab-search-background-color: var(--lwt-sidebar-background-color);
  }

  /* Padding */
  #searchSuggestionTable {
    border-radius: 4px !important;
    -moz-window-shadow: cliprounded;
  }

  .contentSearchSuggestionTable .contentSearchOneOffItem {
    width: 32px !important;
    height: 32px !important;

    /* Margin */
    margin-block: 5px !important;
    margin-inline-start: 5px !important;
    margin-inline-end: 8px !important;

    /* Border */
    border-radius: 4px !important;
    border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */
    border-inline-end: none !important; /* Original: 1px solid; */
  }

  #contentSearchSettingsButton::before {
    content: url("chrome://global/skin/icons/settings.svg") !important;
    display: -moz-inline-box;

    /* Color */
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;

    /* Align */
    margin-inline-end: 5px;
    vertical-align: -25%;
  }

  /* Pointer */
  .contentSearchSuggestionTable .contentSearchOneOffItem,
  #contentSearchSettingsButton {
    cursor: pointer;
  }

  /*- Fix Color For Nightly --------------------------------------------------*/
  .contentSearchSuggestionTable,
  .contentSearchHeaderRow,
  .contentSearchHeader,
  .contentSearchSuggestionsContainer {
    color: var(--newtab-text-primary-color) !important;
    background: var(--newtab-search-background-color) !important;
  }

  .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
  .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
    color: var(--newtab-text-primary-color) !important;
  }

  .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
  .contentSearchSuggestionTable .contentSearchSettingsButton:hover,
  .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
    background: var(--newtab-element-hover-color) !important;
  }

  .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
  .contentSearchSuggestionTable .contentSearchOneOffItem:active {
    background: var(--newtab-element-active-color) !important;
  }

  .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
    fill: var(--newtab-icon-secondary-color) !important;
  }
}

/** Error Page - Restore illustrations ****************************************/
@-moz-document url-prefix("about:neterror"),
  url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
  url("about:sessionrestore"),  url("chrome://browser/content/aboutSessionRestore.xhtml")
{
  /* Illustrations Position */
  #errorPageContainer,
  .description-wrapper {
    min-height: 300px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 38%;
  }

  #errorPageContainer {
    display: flex;
    flex-direction: column;
  }
  .description-wrapper {
    padding-inline-start: 38%;
  }

  /* Container */
  .container {
    min-width: var(--in-content-container-min-width); /* 13em */
    max-width: var(--in-content-container-max-width); /* 52em */
  }

  /* Text Position */
  #text-container {
    margin: auto;
    padding-inline-start: 38%;
  }
}

@-moz-document url-prefix("about:neterror?e=connectionFailure"),
  url-prefix("about:neterror?e=netInterrupt"),
  url-prefix("about:neterror?e=netTimeout"),
  url-prefix("about:neterror?e=netReset"),
  url-prefix("about:neterror?e=netOffline"),
  url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
{
  #errorPageContainer {
    background-image: url("./icons/error-connection-failure.svg");
  }
}
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
  #errorPageContainer {
    background-image: url("./icons/error-server-not-found.svg");
  }
}
@-moz-document url-prefix("about:neterror?e=malformedURI") {
  #errorPageContainer {
    background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg");
  }
}
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
  url-prefix("about:neterror?e=nssFailure") {
  #errorPageContainer {
    background-image: url("./icons/blue-berror.svg");
    background-size: 18.5em;
  }
}

@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
  .description-wrapper {
    background-image: url("./icons/error-session-restore.svg");
  }
}

@-moz-document url-prefix("about:neterror?e=fileNotFound") {
  @media (min-width: 970px) {
    .title {
      background-image: url("chrome://global/skin/icons/info.svg") !important;
    }
  }

  #text-container {
    padding-inline-start: 0;
  }
}
@-moz-document url-prefix("about:tabcrashed") {
  @media (min-width: 970px) {
    .title {
      background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
    }
  }
}
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
{
  @media (min-width: 970px) {
    .title {
      background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
    }
  }
}
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
{
  @media (min-width: 970px) {
    .title {
      background-image: url("./icons/welcome-back.svg") !important;
    }
  }
}

/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
/* Based on chrome://global/skin/in-content/common.css */
:host,
:root {
  --in-content-page-color: rgb(21, 20, 26);
  --in-content-page-background: #fff;
  --in-content-text-color: var(--in-content-page-color);
  --in-content-deemphasized-text: rgb(91, 91, 102);
  --in-content-box-background: #fff;
  --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
  --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
  --in-content-box-info-background: #f0f0f4;
  --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
  --in-content-item-hover-text: var(--in-content-page-color);
  --in-content-item-selected: var(--in-content-primary-button-background);
  --in-content-item-selected-text: var(--in-content-primary-button-text-color);
  --in-content-icon-color: rgb(91, 91, 102);
  --in-content-accent-color: #0a84ff;
  --in-content-accent-color-active: #0060df;
  --in-content-border-hover: var(--grey-90-a50);
  --in-content-border-invalid: var(--red-50);
  --in-content-border-color: #d7d7db;
  --in-content-error-text-color: #c50042;
  --in-content-link-color: var(--blue-60);
  --in-content-link-color-hover: var(--blue-70);
  --in-content-link-color-active: var(--blue-80);
  --in-content-link-color-visited: var(--blue-60);
  /* button background states are also used for checkboxes and radiobuttons */
  --in-content-button-text-color: var(--in-content-text-color);
  --in-content-button-text-color-hover: var(--in-content-text-color);
  --in-content-button-background: rgba(207, 207, 216, 0.33);
  --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
  --in-content-button-background-active: rgb(207, 207, 216);
  --in-content-primary-button-text-color: rgb(251, 251, 254);
  --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
  --in-content-primary-button-background: #0061e0;
  --in-content-primary-button-background-hover: #0250bb;
  --in-content-primary-button-background-active: #053e94;
  --in-content-danger-button-background: #e22850;
  --in-content-danger-button-background-hover: #c50042;
  --in-content-danger-button-background-active: #810220;
  --in-content-focus-outline-color: var(--in-content-primary-button-background);

  /* Note: 1px smaller than we want because we have a 1px transparent border. */
  /* Once proton ships, these can probably stop being variables. */
  --in-content-button-border-radius: 4px;
  --in-content-button-horizontal-padding: 15px;
  --in-content-button-vertical-padding: 7px;

  --in-content-table-background: #f8f8fa;
  --in-content-table-border-color: var(--in-content-box-border-color); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
  --in-content-table-header-background: var(
    --in-content-primary-button-background
  ); /* Legacy: #0a84ff; rgb(5, 64, 150); */
  --in-content-table-header-color: var(
    --in-content-primary-button-text-color
  ); /* Legacy: #ffffff; var(--in-content-page-color); */
  --in-content-sidebar-width: 240px;

  --dialog-warning-text-color: var(--red-60);

  --checkbox-border-color: var(--in-content-box-border-color);
  --checkbox-unchecked-bgcolor: var(--in-content-button-background);
  --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
  --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
  --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
  --checkbox-checked-color: var(--in-content-primary-button-text-color);
  --checkbox-checked-border-color: transparent;
  --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
  --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);

  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --grey-30: #d7d7db;
  --grey-60: #4a4a4f;
  --grey-90-a10: rgba(12, 12, 13, 0.1);
  --grey-90-a20: rgba(12, 12, 13, 0.2);
  --grey-90-a30: rgba(12, 12, 13, 0.3);
  --grey-90-a50: rgba(12, 12, 13, 0.5);
  --grey-90-a60: rgba(12, 12, 13, 0.6);
  --green-50: #30e60b;
  --green-60: #12bc00;
  --green-70: #058b00;
  --green-80: #006504;
  --green-90: #003706;
  --orange-50: #ff9400;
  --red-40: #ff4f5e;
  --red-50: #ff0039;
  --red-60: #d70022;
  --red-70: #a4000f;
  --red-80: #5a0002;
  --red-90: #3e0200;
  --yellow-50: #ffe900;
  --yellow-60: #d7b600;
  --yellow-60-a30: rgba(215, 182, 0, 0.3);
  --yellow-70: #a47f00;
  --yellow-80: #715100;
  --yellow-90: #3e2800;

  --shadow-10: 0 1px 4px var(--grey-90-a10);
  --shadow-30: 0 4px 16px var(--grey-90-a10);

  --card-padding: 16px;
  --card-shadow: var(--shadow-10);
  --card-outline-color: var(--grey-30);
  --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
}

@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  :host,
  :root {
    /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
    --in-content-page-background: rgb(28, 27, 34);
    --in-content-page-color: rgb(251, 251, 254);
    --in-content-deemphasized-text: rgb(191, 191, 201);

    --in-content-box-background: rgb(35, 34, 43);
    --in-content-box-background-odd: rgba(249, 249, 250, 0.05);
    --in-content-box-info-background: rgba(249, 249, 250, 0.15);

    --in-content-border-color: rgba(249, 249, 250, 0.2);
    --in-content-border-hover: rgba(249, 249, 250, 0.3);
    --in-content-border-invalid: rgb(255, 132, 139);

    --in-content-error-text-color: #ff9aa2;

    --in-content-button-background: rgb(43, 42, 51);
    --in-content-button-background-hover: rgb(82, 82, 94);
    --in-content-button-background-active: rgb(91, 91, 102);
    --in-content-icon-color: rgb(251, 251, 254);

    --in-content-primary-button-text-color: rgb(43, 42, 51);
    --in-content-primary-button-background: rgb(0, 221, 255);
    --in-content-primary-button-background-hover: rgb(128, 235, 255);
    --in-content-primary-button-background-active: rgb(170, 242, 255);

    --in-content-danger-button-background: #ff848b;
    --in-content-danger-button-background-hover: #ffbdc5;
    --in-content-danger-button-background-active: #ffdfe7;

    --in-content-table-background: rgb(35, 34, 43);
    --in-content-table-border-dark-color: var(--in-content-box-border-color);

    --in-content-accent-color: var(--in-content-primary-button-background);
    --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
    --in-content-link-color: var(--in-content-primary-button-background);
    --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
    --in-content-link-color-active: var(--in-content-primary-button-background-active);
    --in-content-link-color-visited: var(--in-content-link-color);

    --card-outline-color: var(--grey-60);

    --dialog-warning-text-color: var(--red-40);
  }

  /*= Addons.org =============================================================*/
  @-moz-document url-prefix("https://addons.mozilla.org")
  {
    /* Basic */
    .Page-content,
    .SecondaryHero,
    body,
    main[aria-label="Content"] {
      color: var(--in-content-page-color) !important;
      background: var(--in-content-page-background) !important;
    }

    /* Text */
    .AutoSearchInput-query,
    .AutoSearchInput-suggestions-list,
    .Page-content h1,
    .Page-content h2,
    .SearchResult-link,
    .Home-SubjectShelf-link:link,
    .Home-SubjectShelf-link:visited,
    .DropdownMenuItem-link a,
    .Select,
    .Badge,
    .Notice-generic,
    .Notice-genericWarning,
    .Notice-button,
    .Paginate .Button.Paginate-item:first-child,
    .Paginate .Button.Paginate-item:last-child,
    .Paginate .Button.Paginate-item--current-page,
    .Button--neutral,
    .blog-entry-title,
    .blogpost-nav * {
      color: var(--in-content-text-color) !important;
    }
    .AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
    .AutoSearchInput-suggestions-item--highlighted,
    .SecondaryHero-message-link,
    .SecondaryHero-module-link,
    .Card-contents a:not(.Button),
    .Card-footer-link a,
    .Card-shelf-footer-in-header a,
    .SearchResult-link:is(:active, :focus, :hover),
    .SearchResult:hover .SearchResult-link,
    .Home-SubjectShelf-link:is(:active, :focus, :hover),
    .DropdownMenuItem-link a:is(:active, :focus, :hover),
    .AddonMeta .MetadataCard-title a:is(:active, :hover),
    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
    .AddonMeta .MetadataCard-content a:is(:active, :hover),
    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
    .Addon-summary a,
    .RatingsByStar-count a:hover,
    .RatingsByStar-star a:hover,
    .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
    .AddonTitle-author a,
    .PermissionsCard-learn-more,
    .DefinitionList a,
    .ShowMoreCard-contents a,
    .AddonDescription-contents a,
    .AddonTitle a,
    .TooltipMenu-opener,
    .LanguageTools .Card-contents a,
    .blog-entry-read-more-link,
    .blogpost-nav-next.blogpost-nav-no-prev:hover p,
    .blogpost-content-wrapper p a,
    .blogpost-nav-prev:hover p,
    .blogpost-nav-next:hover p {
      color: var(--in-content-link-color) !important;
    }
    .SearchResult--meta-section,
    .MetadataCard-title,
    .MetadataCard-title a,
    .MetadataCard-content a,
    .CollectionSort-label,
    .SearchResult-summary,
    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
    .PermissionsCard-subhead--optional,
    .PermissionsCard-subhead--required,
    .Definition-dt,
    .RatingsByStar-count a,
    .RatingsByStar-star a,
    .Paginate-page-number,
    .AddonSummaryCard-addonAverage,
    .AddonReviewCard-authorByLine,
    .UserReview-byLine,
    .UserReview-reply-header,
    .Home-heroHeader-subtitle,
    .blog-entry-date,
    .blogpost-breadcrumb *,
    .AddonTitle-author,
    .ExpandableCard-ToggleLink,
    .SearchFilters-label,
    .PromotedBadge-label--line {
      color: var(--in-content-deemphasized-text) !important;
    }
    .PromotedBadge-label--recommended {
      color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
    }

    /* Background */
    .Button--action {
      color: var(--in-content-primary-button-text-color) !important;
      background: var(--in-content-primary-button-background) !important;
    }
    .Select,
    .Button--neutral,
    .Button--neutral:link,
    .Notice-button,
    .AMInstallButton .AMInstallButton-loading-button {
      background-color: var(--in-content-button-background) !important;
    }
    .Button--neutral.Button--micro:not(.Button--disabled):hover,
    .Button--neutral:not(.Button--disabled):hover,
    .Notice-button:hover {
      background: var(--in-content-button-background-hover) !important;
    }
    .Button--action.Button--micro:not(.Button--disabled):hover,
    .Button--action:not(.Button--disabled):hover {
      background: var(--in-content-primary-button-background-hover) !important;
    }
    .ShowMoreCard-contents::after {
      background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
    }
    .AutoSearchInput-query,
    .AutoSearchInput-suggestions-list,
    .SecondaryHero-module,
    .Card-header,
    .Card-contents,
    .CardList ul > li,
    .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
    .Paginate,
    .LandingPage-header,
    .DropdownMenu-items,
    .DropdownMenu-items::after,
    .MetadataCard,
    .AddonsCard-list,
    .Card-footer,
    .StaticAddonCard,
    .blogpost-nav,
    .blogpost-nav * {
      background: var(--in-content-table-background) !important;
    }

    .Paginate .Button.Paginate-item:is(:active, :hover) {
      background: var(--in-content-button-background-hover) !important;
    }
    .Notice-generic,
    .Notice-genericWarning {
      background: color-mix(
        in srgb,
        var(--in-content-page-background) 40%,
        var(--in-content-table-background)
      ) !important;
    }

    .LanguageTools-header-row {
      color: var(--in-content-table-header-color) !important;
      background: var(--in-content-table-header-background) !important;
    }
    .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
      background-color: var(--in-content-box-background-odd) !important;
    }

    /* Fill */
    .Icon-arrow-blue.SearchSuggestion-icon-arrow {
      filter: hue-rotate(330deg) brightness(1.3) !important;
    }
    .SecondaryHero-module-icon {
      filter: invert(85%) !important;
    }
    .Icon-magnifying-glass,
    .Notice-icon {
      filter: invert(65%) !important;
    }
    .PermissionsCard-learn-more .Icon,
    .Permission .Icon {
      filter: invert(100%) !important;
    }
    .Icon-heart {
      filter: brightness(0) !important;
    }

    /* Others */
    .DropdownMenu-items {
      box-shadow: 0 0 2px var(--in-content-border-color) !important;
    }

    .AutoSearchInput-query {
      border: 1px solid var(--in-content-table-background) !important;
    }
    .AutoSearchInput-query:is(:hover, :focus) {
      border-color: var(--in-content-primary-button-background) !important;
    }
    .AutoSearchInput-query:focus {
      box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
        0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
    }

    .PromotedBadge-link--line {
      border-color: var(--in-content-deemphasized-text) !important;
    }
    .PromotedBadge-link--line:hover {
      border-color: var(--in-content-button-background-hover) !important;
    }

    .blog-entry-read-more-link {
      border-color: var(--in-content-link-color) !important;
    }

    .blogpost-nav-arrow-left .cls-1,
    .blogpost-nav-arrow-right .cls-1 {
      stroke: var(--in-content-text-color) !important;
    }

    /* /developers/ */
    .DevHub-Navigation {
      background: var(--in-content-page-background) !important;
    }
    .DevHub-Navigation.scheme-light ul li a,
    .DevHub-content-copy h2,
    .content p {
      color: var(--in-content-page-color) !important;
    }
    .DevHub-callout-box {
      background: var(--in-content-box-background) !important;
      color: var(--in-content-page-color) !important;
    }
  }

  /*= Support.org ============================================================*/
  @-moz-document url-prefix("https://support.mozilla.org")
  {
    /* Basic */
    :root {
      --color-blue-06: var(--in-content-link-color) !important;
      --color-blue-07: var(--in-content-link-color-hover) !important;
      --color-blue-09: var(--in-content-link-color-active) !important;

      --page-bg: var(--in-content-page-background) !important;
      --color-white: var(--in-content-page-background) !important;
      --color-shade-bg: var(--in-content-page-background) !important;
      --color-marketing-gray-02: var(--card-outline-color) !important;
      --color-inverse-bg: var(--in-content-page-color) !important;
      --color-inverse: var(--in-content-page-background) !important;
      --color-text: var(--in-content-page-color) !important;
      --color-moz-text: var(--in-content-page-color) !important;
      --color-moz-heading: var(--in-content-page-color) !important;
      --color-text-light: var(--in-content-deemphasized-text) !important;
      --color-link: var(--in-content-link-color) !important;
      --color-success: var(--green-70) !important;
      --color-warning: var(--yellow-80) !important;
      --color-error: var(--red-60) !important;
      --color-error-hover: var(--red-50) !important;
      --color-moz-heading: #fff;
      --color-moz-inverse-bg: var(red) !important;
      --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
        0 0 0 2px var(--in-content-primary-button-background-active);
    }
    .warning {
      --color-link: rgb(55, 255, 255) !important;
    }

    body,
    #main-content,
    #instant-search-content,
    #mzp-c-menu-panel-help,
    .mzp-c-navigation,
    .kbox-container {
      color: var(--in-content-page-color) !important;
      background: var(--in-content-page-background) !important;
    }

    #editor {
      border: 2px solid var(--in-content-border-color) !important;
    }

    .CodeMirror-linenumbers {
      background: var(--in-content-table-background);
    }

    .CodeMirror-lines {
      color: var(--in-content-deemphasized-text) !important;
      background: var(--in-content-page-background) !important;
    }

    .CodeMirror-scroll {
      background: var(--in-content-page-background) !important;
    }

    /* Text */
    .mzp-c-menu-category .mzp-c-menu-title,
    .mzp-c-menu-item .mzp-c-menu-item-link,
    .mzp-c-menu-item .mzp-c-menu-item-link > *,
    .mzp-c-menu-item .mzp-c-menu-item-list a,
    #doc-content .menu,
    .document--content .menu,
    .forum--entry-content .menu,
    .tag-name a {
      color: var(--in-content-page-color) !important;
    }

    .ts-select-trigger,
    input[type="date"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    select,
    textarea,
    #doc-content .button,
    #doc-content .key,
    .document--content .button,
    .document--content .key,
    .forum--entry-content .button,
    .forum--entry-content .key {
      color: var(--in-content-deemphasized-text) !important;
    }

    .tag-list a {
      color: var(--color-marketing-gray-10) !important;
    }
    .tag-list a:hover,
    .sidebar-nav a:hover {
      color: var(--color-link) !important;
    }
    .tag-list li {
      background: var(--in-content-page-color) !important;
    }
    .tag-list li:hover {
      background: var(--in-content-deemphasized-text) !important;
    }
    #remaining-characters {
      color: var(--in-content-page-color) !important;
    }

    /* Background */
    .sidebar-nav.topics,
    .sidebar-nav.topics > li {
      background: var(--in-content-page-background) !important;
    }
    .mzp-c-menu-panel {
      color: var(--in-content-page-color) !important;
      background: var(--in-content-page-background) !important;
    }
    .mzp-c-menu-list-list,
    .mzp-c-menu-list-list:hover {
      color: var(--in-content-page-color) !important;
      background: var(--in-content-box-background) !important;
    }
    .mzp-c-menu-list-item:focus,
    .mzp-c-menu-list-item:hover {
      background: var(--in-content-button-background-hover) !important;
    }
    .cm-bold {
      color: var(--in-content-page-color) !important;
    }

    /* Fill */
    .sumo-nav--logo,
    .sumo-nav--search-button,
    .sumo-nav--toggle-button,
    .card:not(.is-inverse) .card--icon-sm,
    .mzp-c-menu-item-icon,
    .mzp-c-menu-button-close,
    .topic-article--icon,
    .card--topic > .card--icon,
    .mzp-c-details .is-summary button::before,
    details .is-summary button::before,
    summary::before,
    .icon-button > button,
    .search-button {
      filter: invert(95%) !important;
    }
    button.markup-toolbar-button,
    .mzp-c-modal-close .mzp-c-modal-button-close {
      /*using 0.5 because in middle*/
      filter: invert(0.5) !important;
    }

    /* Others */
    .support-callouts > .card.is-inverse {
      background: #20133a !important;
    }
    .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
      color: var(--in-content-page-color) !important;
    }

    .sumo-button.secondary-button {
      border-color: none !important;
    }
    .mzp-c-menu-panel {
      border-color: var(--in-content-button-background-hover) !important;
    }
    .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
      border-color: var(--in-content-page-color) !important;
    }

    @media screen and (min-width: 768px) {
      .mzp-c-menu-panel {
        box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
      }
    }
    .card--product,
    .card--topic,
    .card--article {
      box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
        0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
    }
  }

  /*= Accounts.com ===========================================================*/
  @-moz-document url-prefix("https://accounts.firefox.com")
  {
    /* Basic */
    body {
      color: var(--in-content-page-color) !important;
      background: var(--in-content-page-background) !important;
    }
    .button.primary-button,
    .button[type="submit"]:not(.secondary-button),
    .settings-button.primary-button,
    .settings-button[type="submit"]:not(.secondary-button),
    button.primary-button,
    button[type="submit"]:not(.secondary-button) {
      color: var(--in-content-primary-button-text-color) !important;
      background: var(--in-content-primary-button-background) !important;
    }

    /* Text */
    header h1,
    .info,
    .info a,
    .prefillEmail,
    .faint a:hover,
    .cta-neutral:hover {
      color: var(--in-content-page-color) !important;
    }
    #main-content.panel a,
    .links a,
    .link-blue,
    .text-blue-500 {
      color: var(--in-content-link-color) !important;
    }
    .link-blue:hover {
      color: var(--in-content-link-color-hover) !important;
    }

    .signed-in-email-message,
    .verification-email-message,
    .verification-message,
    .verification-recovery-code-message,
    .verification-totp-message,
    .input-row input[type="email"],
    .input-row input[type="number"],
    .input-row input[type="password"],
    .input-row input[type="tel"],
    .input-row input[type="text"],
    .input-row input::placeholder,
    .firefox-family-services > ul > .firefox-service,
    .faint,
    .faint a,
    .text-grey-400 {
      color: var(--in-content-deemphasized-text) !important;
    }

    /* Background */
    .flex .flex-wrap {
      background: var(--in-content-page-background);
    }
    .password-row .show-password-label {
      background-color: unset !important;
    }
    #main-content,
    .modal,
    .firefox-family-services,
    .input-row input[type="email"],
    .input-row input[type="number"],
    .input-row input[type="password"],
    .input-row input[type="tel"],
    .input-row input[type="text"],
    header,
    .bg-white:not(nav) {
      background: var(--in-content-box-background) !important;
    }
    #suggest-sync,
    .cta-neutral {
      background: var(--in-content-button-background) !important;
    }
    .cta-neutral:hover,
    .bg-grey-50:hover,
    .hover\:bg-grey-100:hover {
      background: var(--in-content-button-background-hover) !important;
    }
    .text-blue-500 .cta-neutral,
    .text-blue-500 .bg-grey-50,
    .text-blue-500 .hover\:bg-grey-100 {
      background: var(--in-content-button-background) !important;
    }
    .hover\:bg-grey-200:hover {
      background: var(--in-content-button-background-active) !important;
    }
    .button.primary-button:hover:enabled,
    .button[type="submit"]:not(.secondary-button):hover:enabled,
    .settings-button.primary-button:hover:enabled,
    .settings-button[type="submit"]:not(.secondary-button):hover:enabled,
    button.primary-button:hover:enabled,
    button[type="submit"]:not(.secondary-button):hover:enabled {
      background: var(--in-content-primary-button-background-hover) !important;
    }
    .tooltip,
    .tooltip::before {
      background: var(--in-content-danger-button-background) !important;
    }

    /* Fill */
    .dismiss,
    #about-mozilla,
    .show-password-label,
    footer a[data-testid="link-mozilla"] {
      filter: invert(95%) !important;
    }
    header button svg,
    header .rounded svg,
    #service svg {
      filter: brightness(15) !important;
    }
    button.relative,
    #fxa-settings nav svg {
      filter: brightness(2) !important;
    }

    /* Others */
    .input-row input[type="email"],
    .input-row input[type="number"],
    .input-row input[type="password"],
    .input-row input[type="tel"],
    .input-row input[type="text"],
    .unit-row-hr .border-grey-100 {
      border-color: var(--in-content-border-color) !important;
    }
    .input-row input[type="email"]:hover,
    .input-row input[type="number"]:hover,
    .input-row input[type="password"]:hover,
    .input-row input[type="tel"]:hover,
    .input-row input[type="text"]:hover {
      border-color: var(--in-content-border-hover) !important;
    }
    #main-content {
      box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
        0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
    }
    .input-row input[type="email"]:focus,
    .input-row input[type="number"]:focus,
    .input-row input[type="password"]:focus,
    .input-row input[type="tel"]:focus,
    .input-row input[type="text"]:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
    }
  }
}

/** Fully Proton Mode *********************************************************/
/*= abouts' common ===========================================================*/
@-moz-document url-prefix("about:plugins"),
                 url-prefix("about:cache"),
                 url-prefix("about:checkerboard"),
                 url-prefix("about:sync-log"),
                 url-prefix("about:memory"),
                 regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
  /* Base */
  html,
  body {
    font: message-box !important;
    appearance: none !important;
    background-color: var(--in-content-page-background) !important;
    color: var(--in-content-page-color) !important;
  }
  body {
    font-size: 15px !important;
    font-weight: normal !important;
    margin: 0 !important;
  }

  h1 {
    line-height: 1.2 !important;
  }
  h2 {
    line-height: 1.4em !important;
  }

  /* Link */
  a {
    color: var(--in-content-link-color) !important;
  }
  a:hover,
  .text-link:hover {
    color: var(--in-content-link-color-hover) !important;
    text-decoration: underline !important;
  }
  a:visited {
    color: var(--in-content-link-color-visited) !important;
  }
  a:hover:active,
  .text-link:hover:active {
    color: var(--in-content-link-color-active) !important;
  }
  a:-moz-focusring,
  .text-link:-moz-focusring {
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: 1px !important;
    border-radius: 4px !important;
  }

  /* Button */
  button {
    font: inherit;
  }
  button,
  select,
  input[type="color"] {
    appearance: none !important;
    min-height: 32px !important;
    color: var(--in-content-button-text-color, inherit) !important;
    border: 1px solid transparent !important; /* shows up in high-contrast mode */
    border-radius: var(--in-content-button-border-radius) !important;
    background-color: var(--in-content-button-background) !important;
    font-weight: 400 !important;
    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
    text-decoration: none !important;
    margin: 4px 8px !important;
    /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
    font-size: 1em !important;
  }
  button {
    font-weight: 600 !important;
    /* Use the same margin of other elements for the alignment */
    margin-inline: 4px !important;
    min-width: 6.3em !important;
  }
  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
     * the 1px border): */
  button.medium {
    --in-content-button-vertical-padding: 6px;
    --in-content-button-horizontal-padding: 13px;
    min-height: 28px !important;
    font-size: 0.95em !important;
  }
  button.small {
    --in-content-button-vertical-padding: 5px;
    --in-content-button-horizontal-padding: 11px;
    min-height: 24px !important;
    font-size: 0.9em !important;
  }
  ::-moz-focus-inner {
    border: none !important;
  }
  button:-moz-focusring {
    box-shadow: none !important;
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: 2px !important;
  }
  button:enabled:hover,
  input[type="color"]:hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent !important;
  }
  button:enabled:hover:active,
  input[type="color"]:enabled:hover:active {
    background-color: var(--in-content-button-background-active) !important;
  }
  button:disabled,
  input[type="color"]:disabled {
    opacity: 0.4 !important;
  }
  button[autofocus],
  button[type="submit"],
  button.primary {
    background-color: var(--in-content-primary-button-background) !important;
    color: var(--in-content-primary-button-text-color) !important;
  }
  button[autofocus]:enabled:hover,
  button[type="submit"]:enabled:hover,
  button.primary:enabled:hover {
    background-color: var(--in-content-primary-button-background-hover) !important;
    color: var(--in-content-primary-button-text-color-hover) !important;
  }
  button[autofocus]:enabled:hover:active,
  button[type="submit"]:enabled:hover:active,
  button.primary:enabled:hover:active {
    background-color: var(--in-content-primary-button-background-active) !important;
  }

  /* Checkbox */
  input[type="checkbox"] {
    margin-block: 2px !important;
  }
  input[type="checkbox"] {
    appearance: none !important;
    height: 16px !important;
    width: 16px !important;
    border: 1px solid var(--checkbox-border-color) !important;
    background-color: var(--checkbox-unchecked-bgcolor) !important;
    border-radius: 2px !important;
    margin-inline: 0 6px !important;
    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
  }
  input[type="checkbox"]:enabled:hover {
    background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
  }
  input[type="checkbox"]:enabled:hover:active {
    background-color: var(--checkbox-unchecked-active-bgcolor) !important;
  }
  input[type="checkbox"]:checked {
    border-color: var(--checkbox-checked-border-color) !important;
    background-color: var(--checkbox-checked-bgcolor) !important;
    background-image: url("chrome://global/skin/icons/check.svg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill !important;
    fill: currentColor !important;
    color: var(--checkbox-checked-color) !important;
    /* Style the button also when printing with "Print Backgrounds" unchecked */
    color-adjust: exact !important;
  }
  input[type="checkbox"]:enabled:checked:hover {
    background-color: var(--checkbox-checked-hover-bgcolor) !important;
  }
  input[type="checkbox"]:enabled:checked:hover:active {
    background-color: var(--checkbox-checked-active-bgcolor) !important;
  }

  /* Textarea */
  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
  textarea {
    appearance: none !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    border-radius: 4px !important;
    color: inherit !important;
    background-color: var(--in-content-box-background) !important;
  }
  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
  textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    padding: 8px !important;
    margin: 2px 4px !important;
  }
  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
  textarea:focus,
  search-textbox[focused],
  tree:focus-visible,
  richlistbox:focus-visible {
    border-color: transparent !important;
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: -1px !important; /* Prevents antialising around the corners */
  }
  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
  textarea:-moz-ui-invalid {
    border-color: transparent !important;
    outline: 2px solid var(--in-content-border-invalid) !important;
    outline-offset: -1px !important; /* Prevents antialising around the corners */
  }
  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
  textarea:disabled,
  search-textbox[disabled="true"] {
    opacity: 0.4 !important;
  }

  /* Table */
  table {
    width: 100% !important;
  }
}

@-moz-document url-prefix("about:plugins"),
                 url-prefix("about:cache"),
                 url-prefix("about:checkerboard") {
  table {
    border: 1px solid var(--in-content-table-border-color) !important;
    border-radius: 0 !important;
  }
}
@-moz-document url-prefix("about:cache"),
                 url-prefix("about:checkerboard") {
  th,
  td {
    border: 1px solid var(--in-content-table-border-color) !important;
  }
  th {
    background-color: var(--in-content-table-header-background) !important;
    color: var(--in-content-table-header-color) !important;
  }
}

/*= View Source ==============================================================*/
@-moz-document url-prefix("view-source") {
  :root {
    background-color: var(--in-content-page-background) !important; /* Original: white */
    color: var(--in-content-page-color) !important; /* Original: black */

    /* Colors */
    --view-source-green: var(--green-80);
    --view-source-purple: #800080; /* Like alphenglow */
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root {
      --view-source-green: var(--green-60);
      --view-source-purple: #c68aff;
    }
  }

  pre[id]::before,
  span[id]::before {
    color: color-mix(
      in srgb,
      var(--in-content-page-color) 70%,
      var(--in-content-page-background)
    ) !important; /* Original: #ccc */
  }
  .highlight .start-tag,
  .highlight .end-tag {
    color: var(--view-source-purple) !important; /* Original: purple */
  }
  .highlight .comment {
    color: var(--view-source-green) !important; /* Original: green */
  }
  .highlight .cdata {
    color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */
  }
  .highlight .doctype {
    color: #4682b4 !important; /* Original: steelblue */
  }
  .highlight .pi {
    color: orchid !important; /* Original: orchid */
  }
  .highlight .entity {
    color: #ff4500 !important; /* Original: #FF4500 */
  }
  .highlight .attribute-name {
    color: var(--view-source-green) !important; /* Original: black */
  }
  .highlight .attribute-value {
    color: var(--in-content-link-color) !important; /* Original: blue */
  }
  .highlight .markupdeclaration {
    color: #4682b4 !important; /* Original: steelblue */
  }
  .highlight .error,
  .highlight
    .error
    > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) {
    color: var(--in-content-error-text-color) !important; /* Original: red */
  }
}

/*= Directory View ===========================================================*/
@-moz-document url-prefix("about:sync-log"),
                 regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
  body {
    background-color: var(--in-content-box-background) !important;
    margin: 4em auto !important; /* Override to default */
  }
  thead a {
    color: var(--in-content-page-color) !important;
  }
  td ::before {
    vertical-align: top !important;
  }
}

/*= about:plugins ============================================================*/
@-moz-document url-prefix("about:plugins") {
  .notice {
    background: var(--in-content-box-background) !important;
    border: 1px solid var(--in-content-border-color) !important;
  }
}

/*= about:cache ==============================================================*/
@-moz-document url-prefix("about:cache") {
  table {
    padding: 0 !important;
  }

  th,
  td {
    padding: 4px !important;
    text-align: match-parent !important;
  }
}

/*= about:checkerboard =======================================================*/
@-moz-document url-prefix("about:checkerboard") {
  #canvas {
    border: 1px solid var(--in-content-border-color) !important;
  }
  #excludePageFromZoom {
    vertical-align: bottom !important;
  }
}

/*= about:memory =============================================================*/
@-moz-document url-prefix("about:memory") {
  .opsRow,
  .section {
    background-color: var(--in-content-box-background) !important;
    color: var(--in-content-page-color) !important;
  }
  .opsRowLabel input {
    vertical-align: bottom !important;
  }
}

/*= chrome://browser/content/places/places.xhtml =============================*/
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
  /** Library - Icons Replace *************************************************/
  /*= Standard Folder - More Visible =========================================*/
  /* on Toolbar and Menus */
  :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
  /* in Sidebar, Library, Add/Edit Bookmark dialog */
  /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */
  /* Need to overide!!, can not use :not() */
  :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container),
  #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
  #editBMPanel_folderMenuList .folder-icon:not([id]),
  /* Download Popup */
  .downloadIconShow > .button-box > .button-icon {
    list-style-image: url("./icons/folder.svg") !important;
  }

  /* Standard Folder - Open */
  :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
    .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
  :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(title, container, open) {
    list-style-image: url("./icons/folder-open.svg") !important;
  }

  /*= Other Folder - Inbox Icon ==============================================*/
  /* on Menus */
  #PlacesToolbar #OtherBookmarks,
  #BMB_bookmarksPopup #BMB_unsortedBookmarks,
  #bookmarksMenuPopup #menu_unsortedBookmarks,
  /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
  #editBMPanel_unfiledRootItem,
  #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
    list-style-image: url("./icons/mail-inbox-all.svg") !important;
  }

  /* Other Folder - Open */
  #PlacesToolbar #OtherBookmarks[open="true"],
  #BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
  #bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
    list-style-image: url("./icons/mail-inbox.svg") !important;
  }

  /*= Default Icon - Overide =================================================*/
  /* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */

  /* Query */
  :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
    list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
  }

  /* History */
  :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
  :-moz-any(#historyTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
    list-style-image: url("chrome://browser/skin/history.svg") !important;
  }

  /* Downloads */
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
    list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
  }

  /* Tag */
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
    list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
  }

  /* Boomark */
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
    list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
  }

  /* Bookmark Toolbar */
  #BMB_bookmarksPopup #BMB_bookmarksToolbar,       /* Original: Default folder icon */
  #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
    list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
  }

  /* Bookmark Menu */
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(container, queryFolder_menu________) {
    list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
  }

  /*= Default Icon - Open ====================================================*/
  /* Query */
  :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
    .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
    > .menu-iconic-left
    > .menu-iconic-icon {
    transform: rotate(15deg) !important;
  }

  /* History */
  :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer),
  :-moz-any(#historyTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
    list-style-image: url("./icons/history-reverse.svg") !important;
  }

  /* Tag */
  :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
    .bookmark-item[container="true"][tagContainer="true"][open="true"],
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
    list-style-image: url("./icons/tag-open.svg") !important;
  }

  /* Boomark */
  :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
    list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
  }

  /* Bookmark Toolbar */
  #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
  #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
    list-style-image: url("./icons/bookmarksToolbar-open.svg") !important;
  }

  /* Bookmark Menu */
  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
    treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
    list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
  }

  /*= Menubar - Icons ========================================================*/
  #organizeButton,
  #viewMenu,
  #maintenanceButton,
  #back-button,
  #forward-button,
  #clearDownloadsButton {
    fill: currentColor !important;
    -moz-context-properties: fill !important;
  }

  /* Add */
  #organizeButton {
    list-style-image: url("chrome://global/skin/icons/settings.svg") !important;
  }
  #viewMenu {
    list-style-image: url("./icons/sort.svg") !important;
  }
  #maintenanceButton {
    list-style-image: url("./icons/import-export.svg") !important;
  }

  #clearDownloadsButton {
    list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
  }
  #clearDownloadsButton > .toolbarbutton-icon {
    display: -moz-inline-box !important;
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: 0;
    margin-inline-end: 2px;
  }

  /* Replace */
  #back-button {
    list-style-image: url("chrome://browser/skin/back.svg") !important;
  }
  #forward-button {
    list-style-image: url("chrome://browser/skin/forward.svg") !important;
  }

  #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
  #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
    transform: scaleX(-1) !important;
  }

  /*= Context Menu ===========================================================*/
  menupopup menuitem:not([type="checkbox"], [type="radio"]),
  menupopup menu:not([type="checkbox"], [type="radio"]),
  #main-menubar > menu {
    -moz-appearance: none !important; /* Linux: menulist */
  }

  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
    /* Color */
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;

    /* Layout */
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    background-image: var(--menuitem-image);
  }

  /* For native context menus on macOS */
  @supports -moz-bool-pref("widget.macos.native-context-menus") {
    :not(menu, #ContentSelectDropdown)
      > menupopup
      > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
    :not(menu, #ContentSelectDropdown)
      > menupopup
      > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
      list-style-image: var(--menuitem-image) !important;
    }
  }

  /* Padding */
  :root {
    --context-menu-background-padding-default: 5px;
    --context-menu-background-padding: var(--context-menu-background-padding-default);
  }
  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
    background-position: left var(--context-menu-background-padding) center !important;
    padding-inline-start: var(--context-menu-background-padding) !important;
  }

  /* Padding - Windows */
  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), /* Legacy - v99 */
         (-moz-platform: windows-win7), (-moz-platform: windows-win8), (-moz-platform: windows-win10) {
    /* Checkbox */
    :root {
      --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
    }
    :not(menu, #ContentSelectDropdown, #context-navigation)
      > menupopup
      > menuitem[type="checkbox"][checked="false"]
      > .menu-iconic-left {
      padding-inline-start: var(--context-menu-text-padding);
    }
  }

  @media (-moz-os-version: windows-win7), /* Legacy - v99 */
         (-moz-platform: windows-win7) {
    :root {
      --context-menu-background-padding-default: 2px;
    }
  }
  @media (-moz-os-version: windows-win8), /* Legacy - v99 */
         (-moz-platform: windows-win8) {
    :root {
      --context-menu-background-padding-default: 3px;
    }
  }
  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
         (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
    #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
    #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
      background-position: left var(--context-menu-background-padding) center !important;
      padding-inline-start: 0 !important;
    }
  }
  @media (-moz-os-version: windows-win10), /* Legacy - v99 */
         (-moz-platform: windows-win10) {
    :root {
      --context-menu-background-padding: 1em;
      --context-menu-text-padding: 24px; /* 16px + 8px */
      --menu-background-padding-default: calc(
        var(--context-menu-background-padding) + var(--context-menu-text-padding)
      );
    }

    #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
    #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
      padding-inline-start: var(--menu-background-padding-default) !important;
      margin-left: 0 !important;
    }
  }

  /* Padding - Linux */
  @media (-moz-gtk-csd-available) {
    :root {
      --context-menu-background-padding-default: 6px;
    }
  }

  /* Padding - Mac */
  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
    :root {
      --context-menu-background-padding-default: 10px;
      --context-menu-mac-padding: 21px;
    }

    /* context menu width */
    #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
    #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
      padding-inline-end: var(--context-menu-background-padding) !important;
    }

    /* text position */
    #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text,
    #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text {
      padding-inline-start: var(--context-menu-mac-padding) !important;
    }

    /* Checkbox menuitem, None iconic menu */
    #placesContext menuitem[type="checkbox"],
    #placesContext menu:not(.menu-iconic) {
      padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
    }
  }

  /* Icon lists */
  #placesContext_open {
    --menuitem-image: url("./icons/link-square.svg");
  }
  #placesContext_openBookmarkContainer\:tabs,
  #placesContext_openBookmarkLinks\:tabs {
    --menuitem-image: url("./icons/movetowindow-16.svg");
  }
  #placesContext_open\:newtab,
  #placesContext_openContainer\:tabs,
  #placesContext_openLinks\:tabs {
    --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  }
  #placesContext_open\:newwindow {
    --menuitem-image: url("chrome://browser/skin/window.svg");
  }
  #placesContext_open\:newprivatewindow {
    --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
  }

  #placesContext_show_bookmark\:info,
  #placesContext_show\:info,
  #placesContext_show_folder\:info {
    --menuitem-image: url("chrome://global/skin/icons/edit.svg");
  }
  #placesContext_deleteBookmark,
  #placesContext_deleteFolder,
  #placesContext_delete,
  #placesContext_delete_history {
    --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  }
  #placesContext_deleteHost {
    --menuitem-image: url("./icons/eye-hide.svg");
  }
  #placesContext_sortBy\:name {
    --menuitem-image: url("./icons/text-sort-ascending.svg");
  }

  #placesContext_cut {
    --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  }
  #placesContext_copy {
    --menuitem-image: url("./icons/edit-copy.svg");
  }
  #placesContext_paste_group {
    --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  }

  #placesContext_new\:bookmark {
    --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  }
  #placesContext_new\:folder {
    --menuitem-image: url("chrome://global/skin/icons/folder.svg");
  }
  #placesContext_new\:separator {
    --menuitem-image: url("./icons/vertical-line.svg");
  }

  #placesContext_paste {
    --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  }

  #placesContext_createBookmark {
    --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  }
  #show-other-bookmarks_PersonalToolbar {
    /* checkbox */
    /* --menuitem-image: url("./icons/star-line-horizontal.svg"); */
  }
  #placesContext_showAllBookmarks {
    --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  }

  .openintabs-menuitem {
    --menuitem-image: url("./icons/movetowindow-16.svg");
  }

  /*= organizeButtonPopup ====================================================*/
  #newbookmark {
    --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  }
  #newfolder {
    --menuitem-image: url("./icons/folder.svg");
  }
  #newseparator {
    --menuitem-image: url("./icons/vertical-line.svg");
  }

  #orgUndo {
    --menuitem-image: url("./icons/undo.svg");
  }
  #orgRedo {
  }

  #orgCut {
    --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  }
  #orgCopy {
    --menuitem-image: url("./icons/edit-copy.svg");
  }
  #orgPaste {
    --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  }
  #orgDelete {
    --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  }

  #orgSelectAll {
    --menuitem-image: url("./icons/select-all-on.svg");
  }

  #orgClose {
    --menuitem-image: url("chrome://global/skin/icons/close.svg");
  }

  /*= viewMenuPopup ==========================================================*/
  #viewColumns {
    --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
  }
  #viewSort {
    --menuitem-image: url("./icons/text-sort-ascending.svg");
  }

  /*= maintenanceButtonPopup =================================================*/
  #backupBookmarks {
    --menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
  }
  #fileRestoreMenu {
  }

  #fileImport {
    --menuitem-image: url("chrome://browser/skin/save.svg");
  }
  #fileExport {
    --menuitem-image: url("chrome://browser/skin/open.svg");
  }

  #browserImport {
    --menuitem-image: url("chrome://browser/skin/import.svg");
  }

  @media (-moz-gtk-csd-available) {
    /*= Layout Fixes =========================================================*/
    menupopup menu {
      padding-block: 4px;
    }

    .menu-right {
      width: 16px !important; /* Original: 1ex */
      background-image: url("chrome://global/skin/icons/arrow-right.svg");
      background-position: right center;
    }

    /*= Proton ===============================================================*/
    :root {
      --organizer-color: -moz-DialogText;
      --organizer-deemphasized-color: GrayText;

      --organizer-toolbar-background: -moz-Dialog;
      --organizer-pane-background: -moz-Dialog;
      --organizer-content-background: -moz-Dialog;

      --organizer-hover-background: SelectedItem;
      --organizer-hover-color: SelectedItemText;
      --organizer-selected-background: SelectedItem;
      --organizer-selected-color: SelectedItemText;
      --organizer-outline-color: SelectedItem;

      --organizer-separator-color: ThreeDDarkShadow;
      --organizer-border-color: ThreeDShadow;

      --organizer-toolbar-field-background: Field;
      --organizer-toolbar-field-background-focused: Field;
      --organizer-toolbar-field-border-color: ThreeDShadow;
      --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
      --organizer-toolbar-field-focus-box-shadow: unset;
      --organizer-pane-field-border-color: ThreeDShadow;
    }

    @media not all and (prefers-contrast) {
      :root {
        --organizer-color: var(--in-content-page-color);
        --organizer-deemphasized-color: var(--in-content-deemphasized-text);

        --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
        --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
        --organizer-content-background: var(--in-content-page-background);

        --organizer-hover-background: var(--in-content-button-background-hover);
        --organizer-hover-color: var(--organizer-color);
        --organizer-selected-background: var(--in-content-button-background-active);
        --organizer-selected-color: var(--organizer-color);
        --organizer-outline-color: var(--in-content-primary-button-background);

        --organizer-separator-color: var(--organizer-pane-field-border-color);
        --organizer-border-color: var(--in-content-border-color);

        --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
        --organizer-toolbar-field-background-focused: Field;
        --organizer-toolbar-field-border-color: transparent;
        --organizer-toolbar-field-focus-border-color: color-mix(
          in srgb,
          var(--organizer-outline-color) 50%,
          transparent
        );
        --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
        --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
      }

      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
        :root {
          --organizer-color: rgb(251, 251, 254);
          --organizer-deemphasized-color: rgb(191, 191, 201);

          --organizer-toolbar-background: rgb(43, 42, 51);
          --organizer-pane-background: rgb(35, 34, 43);
          --organizer-content-background: rgb(28, 27, 34);

          --organizer-hover-background: rgb(82, 82, 94);
          --organizer-selected-background: rgb(91, 91, 102);
          --organizer-outline-color: rgb(0, 221, 255);

          --organizer-toolbar-field-background: var(--in-content-page-background);
          --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
          scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
        }
      }
    }

    /*- Toolbar & Menus ------------------------------------------------------*/
    #placesToolbar {
      appearance: none !important;
      background-color: var(--organizer-toolbar-background) !important;
      color: var(--organizer-color) !important;
      border-bottom: 1px solid var(--organizer-border-color) !important;
      padding: 4px !important;
      padding-inline-end: 6px !important;
    }

    #placesToolbar > toolbarbutton {
      appearance: none !important;
      padding: 5px !important;
      border-radius: 4px !important;
    }

    #placesToolbar > toolbarbutton[disabled] {
      opacity: 0.6 !important;
    }

    #placesToolbar > toolbarbutton:not([disabled]):hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-hover-color) !important;
    }

    #placesToolbar > toolbarbutton:not([disabled]):hover:active {
      background-color: var(--organizer-selected-background) !important;
    }

    #placesToolbar > toolbarbutton > .toolbarbutton-icon,
    #placesMenu > menu > image,
    #placesMenu > menu > .menubar-text {
      -moz-context-properties: fill !important;
      fill: currentColor !important;
    }

    #placesMenu {
      margin-inline-start: 6px !important;
    }

    #placesMenu > menu {
      appearance: none !important;
      color: var(--organizer-color) !important;
      border-radius: 4px !important;
      padding-block: 5px !important;
      padding-inline-start: 5px !important;
      margin-inline-end: 2px !important;
    }

    #placesMenu > menu[_moz-menuactive="true"],
    #placesMenu > menu:hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-hover-color) !important;
    }

    #placesMenu > menu:hover:active,
    #placesMenu > menu[open] {
      background-color: var(--organizer-selected-background) !important;
      color: var(--organizer-selected-color) !important;
    }

    #placesMenu > menu > .menubar-text {
      margin-block: 0 !important; /* override menu.css */
      padding-inline-end: 4px !important;
    }

    /*- Search Bar & Input ---------------------------------------------------*/
    #searchFilter,
    #detailsPane html|input {
      appearance: none !important;
      background-color: var(--organizer-toolbar-field-background) !important;
      color: var(--organizer-color) !important;
      border: 1px solid var(--organizer-toolbar-field-border-color) !important;
      border-radius: 4px !important;
      margin: 0 !important;
      padding-block: 2px !important;
      min-height: 24px !important;
    }

    #searchFilter[focused] {
      box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
      background-color: var(--organizer-toolbar-field-background-focused) !important;
      border-color: transparent !important;
      outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
      outline-offset: -2px !important;
    }

    /*- Sidebar & Splitter ---------------------------------------------------*/
    #placesList {
      background-color: var(--organizer-pane-background) !important;
    }

    #placesView > splitter {
      border: 0 !important;
      border-inline-end: 1px solid var(--organizer-border-color) !important;
      min-width: 0 !important;
      width: 3px !important;
      background-color: transparent !important;
      margin-inline-start: -3px !important;
      position: relative !important;
    }

    /*- Downloads Pane -------------------------------------------------------*/
    #downloadsRichListBox {
      color: var(--organizer-color) !important;
      background-color: var(--organizer-content-background) !important;
    }

    #clearDownloadsButton:focus-visible {
      outline: 2px solid var(--organizer-outline-color) !important;
    }

    richlistitem[selected="true"],
    richlistitem:hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-color) !important;
    }

    richlistbox:where(:focus) > richlistitem[selected="true"] {
      background-color: var(--organizer-selected-background) !important;
    }

    /*- Tree -----------------------------------------------------------------*/
    #contentView treecol {
      /* Use box-shadow to draw a bottom border instead of border-bottom
         * because otherwise the items on contentView won't be perfectly
         * aligned with the items on the sidebar. */
      box-shadow: inset 0 -1px var(--organizer-border-color) !important;
    }

    tree {
      background-color: var(--organizer-content-background) !important;
      color: var(--organizer-color) !important;
    }

    treecol:not([hideheader="true"]),
    treecolpicker {
      appearance: none !important;
      border: none !important;
      background-color: var(--in-content-button-background) !important;
      color: var(--organizer-color, inherit) !important;
      padding: 5px 10px !important;
    }

    treecol:not([hideheader="true"], [sortable="false"]):hover,
    treecolpicker:hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-color) !important;
    }

    treecol:not([hideheader="true"], [sortable="false"]):hover:active,
    treecolpicker:hover:active {
      background-color: var(--organizer-selected-background) !important;
    }

    treecol:not([hideheader="true"], :first-child),
    treecolpicker {
      padding-left: 10px !important;
      border-inline-start-width: 1px !important;
      border-inline-start-style: solid !important;
      border-image: linear-gradient(
          transparent 0%,
          transparent 20%,
          var(--organizer-border-color) 20%,
          var(--organizer-border-color) 80%,
          transparent 80%,
          transparent 100%
        )
        1 1 !important;
    }

    treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
      fill: currentColor !important;
      width: 18px !important;
      height: 18px !important;
    }

    treechildren::-moz-tree-row {
      background-color: transparent !important;
    }

    treechildren::-moz-tree-row(hover) {
      background-color: var(--organizer-hover-background) !important;
    }

    treechildren::-moz-tree-row(selected) {
      background-color: var(--organizer-selected-background) !important;
      color: var(--organizer-selected-color) !important;
      border: 1px solid transparent !important;
    }

    treechildren::-moz-tree-image(hover),
    treechildren::-moz-tree-twisty(hover),
    treechildren::-moz-tree-cell-text(hover) {
      color: var(--organizer-hover-color) !important;
    }

    treechildren::-moz-tree-image(selected),
    treechildren::-moz-tree-twisty(selected),
    treechildren::-moz-tree-cell-text(selected) {
      color: var(--organizer-selected-color) !important;
    }

    treechildren::-moz-tree-separator {
      height: 1px !important;
      border-color: var(--organizer-separator-color) !important;
    }

    treechildren::-moz-tree-separator(hover) {
      border-color: var(--organizer-hover-color) !important;
    }

    treechildren::-moz-tree-separator(selected) {
      border-color: var(--organizer-selected-color) !important;
    }

    /*- Info Box -------------------------------------------------------------*/
    #detailsPane {
      background-color: var(--organizer-pane-background) !important;
      color: var(--organizer-color) !important;
      padding: 5px !important;
      border-top: 1px solid var(--organizer-border-color) !important;
    }

    #editBookmarkPanelRows .expander-up,
    #editBookmarkPanelRows .expander-down {
      appearance: none !important;
      min-width: 0 !important;
      padding: 5px !important;
      margin: 0 !important;
      margin-inline-end: 4px !important;
      border: 1px solid var(--organizer-pane-field-border-color) !important;
      border-radius: 4px !important;
      color: var(--organizer-color) !important;
      background-color: var(--organizer-content-background) !important;
      list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
      -moz-context-properties: fill !important;
      fill: currentColor !important;
    }

    #editBookmarkPanelRows .expander-up:hover,
    #editBookmarkPanelRows .expander-down:hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-hover-color) !important;
    }

    #editBookmarkPanelRows .expander-up:hover:active,
    #editBookmarkPanelRows .expander-down:hover:active {
      background-color: var(--organizer-selected-background) !important;
      color: var(--organizer-selected-color) !important;
    }

    #editBookmarkPanelRows .expander-up:focus-visible,
    #editBookmarkPanelRows .expander-down:focus-visible {
      outline: 2px solid var(--organizer-outline-color) !important;
      outline-offset: -1px !important;
    }

    #editBookmarkPanelRows .expander-up {
      list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
    }

    #editBookmarkPanelRows .expander-up > .button-box,
    #editBookmarkPanelRows .expander-down > .button-box {
      padding: 0 !important;
    }

    #places input {
      border: 1px solid var(--organizer-pane-field-border-color) !important;
      border-radius: 4px !important;
      background-color: var(--organizer-content-background) !important;
      color: var(--organizer-color) !important;
      min-height: 20px !important;
      padding-inline: 4px !important;
    }

    #places input:focus {
      outline: 2px solid var(--organizer-outline-color) !important;
      outline-offset: -1px !important;
    }

    #places input:not(:read-write):focus {
      outline: none !important;
    }

    .caption-label {
      margin-inline-start: 8px !important;
      color: var(--organizer-deemphasized-color) !important;
    }

    #editBMPanel_tagsSelectorRow > richlistbox {
      appearance: none !important;
      color: var(--organizer-color) !important;
      background-color: var(--organizer-content-background) !important;
      border: 1px solid var(--organizer-border-color) !important;
      border-radius: 4px !important;
    }

    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
      border: 1px solid transparent !important;
    }

    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
      background-color: var(--organizer-hover-background) !important;
      color: var(--organizer-hover-color) !important;
    }

    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
      background-color: var(--organizer-selected-background) !important;
      color: var(--organizer-selected-color) !important;
    }

    /*- Radio Button ---------------------------------------------------------*/
    menuitem[type="radio"] {
      /* margin-inline-start: 0 !important; */
      appearance: none !important;
    }

    menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
      appearance: none !important;
      width: 16px !important;
      height: 16px !important;
      padding: 0 !important;
      border: 1px solid var(--in-content-box-border-color) !important;
      border-radius: 100% !important;
      margin-block: 2px !important; /* extend the vertical clicktarget */
      margin-inline: 0 6px !important;
      background-color: var(--in-content-button-background) !important;
      background-position: center !important;
      flex-shrink: 0 !important; /* avoid shrinking inside flex container */
    }

    menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(--in-content-button-background-hover) !important;
      color: var(--in-content-button-text-color-hover) !important;
    }

    menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(--in-content-button-background-active) !important;
    }

    menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
      -moz-context-properties: fill !important;
      fill: currentColor !important;
      color: var(--in-content-primary-button-text-color) !important;
      background-color: var(--in-content-primary-button-background) !important;
      background-image: url("chrome://global/skin/icons/radio.svg") !important;
      border-color: transparent !important;

      /* Style the button also when printing with "Print Backgrounds" unchecked */
      color-adjust: exact !important;
    }

    menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(--in-content-primary-button-background-hover) !important;
      color: var(--in-content-primary-button-text-color-hover) !important;
    }

    menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(--in-content-primary-button-background-active) !important;
    }

    menuitem[type="radio"] > .menu-iconic-text {
      margin-inline: 0 8px !important;
      padding-inline-start: 0 !important;
    }

    /* Disabled checkboxes, radios and labels */
    menuitem[type="radio"][disabled="true"],
    menuitem[type="checkbox"][disabled="true"] {
      color: inherit !important;
    }

    menuitem[type="radio"][disabled="true"],
    menuitem[type="checkbox"][disabled="true"] {
      opacity: 0.5 !important;
    }

    /*- Check Box ------------------------------------------------------------*/
    /* From checkbox.css */
    menuitem[type="checkbox"] {
      appearance: none !important;
      -moz-box-align: center !important;
      margin: 0px 2px !important;
    }

    menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
      margin-inline-end: 2px !important;
    }
    menuitem[type="checkbox"] > .menu-iconic-text {
      margin: 1px 0 !important;
    }

    menuitem[type="checkbox"][disabled="true"] {
      opacity: 0.4 !important;
    }

    menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
      appearance: none !important;
      color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
      background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
      border: 1px solid currentColor !important;
      border-radius: 2px !important;
      margin-inline-end: 6px !important;
    }

    menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
      height: 16px !important;
      width: 16px !important;
    }

    menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(
        --checkbox-unchecked-hover-bgcolor,
        color-mix(in srgb, -moz-accent-color 4%, Field)
      ) !important;
    }

    menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
      background-color: var(
        --checkbox-unchecked-active-bgcolor,
        color-mix(in srgb, -moz-accent-color 8%, Field)
      ) !important;
    }

    menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
      border-color: var(--checkbox-checked-border-color, transparent) !important;
      background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
      background-image: url("chrome://global/skin/icons/check.svg") !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      -moz-context-properties: fill !important;
      fill: currentColor !important;
      color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
      /* Style the button also when printing with "Print Backgrounds" unchecked */
      color-adjust: exact !important;
    }

    menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
      background-color: var(
        --checkbox-checked-hover-bgcolor,
        color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
      ) !important;
    }

    menuitem[type="checkbox"]:not([disabled="true"]):hover:active
      > .menu-iconic-left[checked="true"]
      > .menu-iconic-icon {
      background-color: var(
        --checkbox-checked-active-bgcolor,
        color-mix(in srgb, currentColor 25%, -moz-accent-color)
      ) !important;
    }

    menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
      outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
      outline-offset: var(--focus-outline-offset, 2px) !important;
    }

    @media (prefers-contrast) {
      menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
        /* color will set the border-color on the check due to how HCM works for in-content pages. */
        color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
      }

      menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
        color: var(--checkbox-checked-border-color, currentColor) !important;
        fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
      }

      menuitem[type="checkbox"]:not([disabled="true"]):hover:active
        > .menu-iconic-left[checked="true"]
        > .menu-iconic-icon,
      menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
        color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
        fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
      }
    }

    /* From common.css */
    menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
      margin-block: 2px !important;
    }

    /*- Menu Separtor --------------------------------------------------------*/
    menuseparator {
      appearance: none !important;
      min-width: 2px;
      min-height: 0;
      border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
      border-bottom: none;
      margin: var(--panel-separator-margin, 6px);
      padding: 0;
    }
  }
}