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

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

#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display:none!important; }

/** Default Thme - Contrast ***************************************************/
/*= Lightmode - Color darker =================================================*/
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy - v96 */
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
  --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */
}
@media (-moz-os-version: windows-win10), /* Legacy - v99 */
       (-moz-platform: windows-win10) {
  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox,  /* Legacy - v96 */
  :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
    background-color: var(--lwt-accent-color) !important;
  }
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox,  /* Legacy - v96 */
  :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
    background-color: var(--lwt-accent-color) !important;
  }
}

/*= Darkmode - Color lighter =================================================*/
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"], /* Legacy - v96 */
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
  --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */
}

/** Theme - Compatibility *****************************************************/
/*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */
#allTabsMenu-hiddenTabsView .all-tabs-item {
  margin-inline: 8px;
  border-radius: 4px;
}

/*= Remote Tabs Panel's Bottom Padding =======================================*/
#PanelUI-remotetabs #PanelUI-remotetabs-main {
  margin-bottom: 6px;
}

/*= Identity Popup Icon Crop =================================================*/
.identity-popup-security-connection.identity-button {
  padding-block: 1px !important;
}

/*= Zoom in button's plus icon horizontal rate ===============================*/
#customization-palette-container #zoom-in-button > .toolbarbutton-icon,
#customization-panel-container #zoom-in-button > .toolbarbutton-icon,
#widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon {
  padding-inline-start: 0px !important;
}

/*= Icon Fill Color ==========================================================*/
:root:-moz-lwtheme {
  /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
       Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light
     */
  --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
}

/*= First visible tab margin at maximized #332 ===============================*/
:root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
  margin-left: -1px;
}

/*= Disabled menu background color ===========================================*/
menuitem[disabled="true"],
menu[disabled="true"] {
  background-color: transparent !important;
}

/*= Remove Tab Border ========================================================*/
/* Light Theme */
#TabsToolbar:not([brighttext])
  #tabbrowser-tabs:not([noshadowfortests])
  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  > .tab-stack
  > .tab-background {
  border: unset !important; /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
}

/* Dark Theme */
#TabsToolbar[brighttext]
  #tabbrowser-tabs:not([noshadowfortests])
  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  > .tab-stack
  > .tab-background:-moz-lwtheme {
  border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
}

/*= Light Weight Theme =======================================================*/
/* Header Image */
:root[lwtheme-image] {
  background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
  background-repeat: no-repeat !important;
  background-position: right top !important;
}
@media (min-width: 2500px) {
  :root[lwtheme-image] {
    background-size: contain;
  }
}
:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme {
  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  background-repeat: var(--lwt-background-tiling) !important;
  background-position: var(--lwt-background-alignment) !important;
  background-color: unset !important; /* Original:  var(--lwt-accent-color) */
}

/* Navbar Border */
#navigator-toolbox:-moz-lwtheme {
  --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
  --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
}

/** OS - Compatibility ********************************************************/
/*= Windows 7, 8 - Tab Bar Background *****************************************/
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  /* Header Color */
  :root:not([lwtheme-image]):-moz-lwtheme {
    background-color: var(--lwt-accent-color) !important;
  }
}
@media (-moz-os-version: windows-win7), /* Legacy - v99 */
       (-moz-platform: windows-win7) {
  #TabsToolbar:-moz-lwtheme {
    color: var(--lwt-text-color) !important;
  }

  /* Remove Aero */
  #TabsToolbar {
    /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */
    background-image: unset !important;
  }
}
@media (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win8) {
  #navigator-toolbox:-moz-lwtheme {
    color: var(--lwt-text-color) !important;
  }
}

/*= Windows 7, 8 - Menu Active Color =========================================*/
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  menupopup > menu,
  menupopup > menuitem,
  #context-navigation > menuitem {
    border: 1px solid transparent; /* Need reduce 2px at menu */
  }

  #main-menubar > menu[open="true"],
  #main-menubar > menu[_moz-menuactive="true"] {
    background-color: -moz-menuhover !important; /* Make to original */
  }
  :root:-moz-lwtheme #main-menubar > menu[open="true"],
  :root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] {
    color: inherit !important; /* Original: -moz-menubarhovertext */
    background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
  }

  menulist > menupopup > menuitem[_moz-menuactive="true"],
  menulist > menupopup > menu[_moz-menuactive="true"] {
    background-color: highlight !important;
    color: highlighttext !important;
  }

  #PlacesToolbar menu,
  #PlacesToolbar menuitem,
  #BMB_bookmarksPopup menu,
  #BMB_bookmarksPopup menuitem {
    border: none !important; /* Remove border */
  }
  #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"],
  #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"],
  #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"],
  #BMB_bookmarksPopup menuitem:not([disabled], :active)[_moz-menuactive="true"] {
    background-color: var(--button-hover-bgcolor) !important;
  }
}

@media (-moz-os-version: windows-win7), /* Legacy - v99 */
       (-moz-platform: windows-win7) {
  menu[_moz-menuactive="true"],
  menuitem[_moz-menuactive="true"] {
    background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important;
    border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important;
  }
  menu[_moz-menuactive="true"][disabled="disabled"],
  menuitem[_moz-menuactive="true"][disabled="true"] {
    background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
    border-color: color-mix(in srgb, currentColor 60%, transparent) !important;
  }

  /* Remove text shadow */
  :root:-moz-lwtheme #toolbar-menubar {
    text-shadow: unset !important;
    /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */
  }

  /* Remove Color */
  :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) {
    background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */
    color: unset !important; /* Original: black */
  }
}
@media (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win8) {
  menu[_moz-menuactive="true"],
  menuitem[_moz-menuactive="true"] {
    background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important;
    border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important;
  }
  menu[_moz-menuactive="true"][disabled="disabled"],
  menuitem[_moz-menuactive="true"][disabled="true"] {
    background-color: color-mix(in srgb, currentColor 17%, transparent) !important;
    border-color: color-mix(in srgb, currentColor 80%, transparent) !important;
  }
}

@media (-moz-gtk-csd-available) {
  /*= Linux - Global Menubar Active Color ====================================*/
  #main-menubar > menu[open="true"],
  #main-menubar > menu[_moz-menuactive="true"] {
    color: inherit !important; /* Original: -moz-menubarhovertext */
    background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
  }

  /*= Linux - Titlebar button at lwtheme =====================================*/
  .titlebar-button:-moz-lwtheme {
    appearance: auto !important;
  }
  .titlebar-min:-moz-lwtheme,
  .titlebar-max:-moz-lwtheme,
  .titlebar-restore:-moz-lwtheme,
  .titlebar-close:-moz-lwtheme {
    list-style-image: none !important;
  }
  .titlebar-button:-moz-lwtheme:hover,
  .titlebar-button:-moz-lwtheme:hover:active {
    background-color: unset !important;
    color: unset !important;
  }
}

/*= Linux - Light System Default Theme's Selected Tab ========================*/
@media (-moz-gtk-csd-available) and (-moz-toolbar-prefers-color-scheme: light),
  (-moz-gtk-csd-available) and (prefers-color-scheme: light) {
  /* Because of
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
      border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
      box-shadow: 0 0 4px rgba(128,128,142,0.5);
    }
   */
  #tabbrowser-tabs:not([noshadowfortests])
    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
    > .tab-stack
    > .tab-background:not(:-moz-lwtheme) {
    box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important;
  }
  #TabsToolbar:not([brighttext])
    #tabbrowser-tabs:not([noshadowfortests])
    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
    > .tab-stack
    > .tab-background:not(:-moz-lwtheme) {
    box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important;
  }
}

/** System Default Theme ******************************************************/
/*= Common - URL Bar focus color =============================================*/
@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
  /* URL Bar */
  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
    --focus-outline-color: -moz-accent-color !important;
  }

  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
    border-color: color-mix(
      in srgb,
      -moz-accent-color 50%,
      transparent
    ) !important; /* Like: --toolbar-field-focus-border-color */
  }
}

/*= Windows7 - Aero Based Theme ==============================================*/
@media (-moz-os-version: windows-win7), /* Legacy - v99 */
       (-moz-platform: windows-win7) {
  #TabsToolbar:not(:-moz-lwtheme) {
    --background-color: rgb(229, 229, 235);
  }
  #TabsToolbar:not(:-moz-lwtheme)
    .tabbrowser-tab
    > .tab-stack
    > .tab-background:not([selected="true"], [multiselected]) {
    color: var(--background-color);
    background-color: color-mix(in srgb, currentColor 60%, transparent);
  }
  #TabsToolbar:not(:-moz-lwtheme)
    .tabbrowser-tab:hover
    > .tab-stack
    > .tab-background:not([selected="true"], [multiselected]) {
    background-color: color-mix(
      in srgb,
      currentColor 85%,
      transparent
    ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
  }
  #scrollbutton-up:not(:-moz-lwtheme),
  #scrollbutton-down:not(:-moz-lwtheme),
  #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
  #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
    color: var(--background-color) !important;
    background-color: color-mix(in srgb, currentColor 50%, transparent);
  }
}

/*= Windows10 - UWP like color ===============================================*/
@media (-moz-os-version: windows-win10), /* Legacy - v99 */
       (-moz-platform: windows-win10) {
  :root:not(:-moz-lwtheme) {
    --win-text-color: rgba(0, 0, 0);
    --win-bgcolor: rgb(204, 204, 204);
    --win-disabled-color: rgb(145, 145, 145);
    --win-disabled-bgcolor: transparent;
    --win-hover-bgcolor: rgb(218, 218, 218); /* also button-bgcolor */
    --win-hover-active-bgcolor: #c2c2c2; /* also button-hover-bgcolor */
    --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66);
    --win-button-active-bgcolor: #aaaaaa;
    --win-field-bgcolor: #ffffff;
    --win-component-bgcolor: #f2f2f2;
    --win-border-color: #8a8a8a;
    --win-tab-seperator-color: #a3a3a3;
    --win-sidebar-bgcolor: #e6e6e6;
    --win-sidebar-hover-bgcolor: #cfcfcf;
    --win-sidebar-button-hover-bgcolor: #b8b8b8;
    --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
    --win-button-border: #747474;
    --win-shorcut-text-color: #757575;
    --win-error-color: #b31616;
    --win-red-border-color: #ff4343;
    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
    --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
    --win-accent-active-color: -moz-accent-color;
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root:not(:-moz-lwtheme),
    :root[lwt-default-theme-in-dark-mode] {
      --win-text-color: #ffffff;
      --win-bgcolor: #2b2b2b;
      --win-disabled-color: #747474;
      --win-disabled-bgcolor: transparent;
      --win-hover-bgcolor: #2e2e2e; /* also button-bgcolor */
      --win-hover-active-bgcolor: #454545; /* also button-active-color */
      --win-button-hover-bgcolor: rgba(46, 46, 46, 0.66);
      --win-button-active-bgcolor: #515151;
      --win-field-bgcolor: #373737;
      --win-component-bgcolor: #171717;
      --win-border-color: #5b5b5b;
      --win-tab-seperator-color: #555555;
      --win-sidebar-bgcolor: #1f1f1f;
      --win-sidebar-hover-bgcolor: #353535;
      --win-sidebar-button-hover-bgcolor: #353535;
      --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
      --win-button-border: #8f8f8f;
      --win-shorcut-text-color: #adadad;
      --win-error-color: #ffb900;
      --win-red-border-color: #ff4343;
      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
      --win-accent-active-color: -moz-accent-color;
    }
  }

  :root:not(:-moz-lwtheme),
  :root[lwt-default-theme-in-dark-mode] {
    /* Text, Icon Color */
    --menu-color: var(--win-text-color) !important;
    --lwt-text-color: var(--win-text-color) !important;
    --button-color: var(--win-text-color) !important;
    --input-color: var(--win-text-color) !important;
    --toolbar-color: var(--win-text-color) !important;
    --toolbar-non-lwt-textcolor: var(--win-text-color) !important;
    --toolbarbutton-icon-fill: var(--win-text-color) !important;
    --toolbar-field-focus-color: var(--win-text-color) !important;
    --urlbar-popup-action-color: var(--win-text-color) !important;
    --toolbar-field-color: var(--win-text-color) !important;
    --autocomplete-popup-highlight-color: var(--win-text-color) !important;
    --tab-icon-overlay-fill: var(--win-text-color) !important;
    --panel-banner-item-color: var(--win-text-color) !important;
    --arrowpanel-color: var(--win-text-color) !important;
    --autocomplete-popup-color: var(--win-text-color) !important;

    /* Text Disabled Color */
    --menu-disabled-color: var(--win-disabled-color) !important;
    --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
    --panel-disabled-color: var(--win-disabled-color) !important;
    --download-progress-paused-color: var(--win-disabled-color) !important;

    /* Text Shortcut Color */
    --panel-shortcut-color: var(--win-shorcut-text-color) !important;
    --panel-description-color: var(--win-shorcut-text-color) !important;

    /* Title Background, Border Color */
    --menu-border-color: var(--win-bgcolor) !important;
    --lwt-accent-color: var(--win-bgcolor) !important;
    --toolbar-field-border-color: var(--win-bgcolor) !important;
    --chrome-content-separator-color: var(--win-bgcolor) !important;

    /* Component Background Color */
    --menu-background-color: var(--win-component-bgcolor) !important;
    --toolbar-bgcolor: var(--win-component-bgcolor) !important;
    --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
    --arrowpanel-background: var(--win-component-bgcolor) !important;
    --autocomplete-popup-background: var(--win-component-bgcolor) !important;

    /* Seperator */
    --toolbarseparator-color: var(--win-tab-seperator-color) !important;

    /* Field Backround Color */
    --input-bgcolor: var(--win-field-bgcolor) !important;
    --toolbar-field-background-color: var(--win-field-bgcolor) !important;
    --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
    --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
    --button-primary-color: var(--win-field-bgcolor) !important;
    --checkbox-checked-color: var(--win-field-bgcolor) !important;

    /* Hover Background Color, Button Color  */
    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
    --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
    --button-bgcolor: var(--win-hover-bgcolor) !important;
    --panel-banner-item-background-color: var(--win-hover-bgcolor) !important;

    /* Hover Active, Button Hover Color */
    --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
    --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
    --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
    --panel-banner-item-hover-bgcolor: var(--win-hover-active-bgcolor) !important;

    /* Button Hover Active Color */
    --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
    --panel-banner-item-active-bgcolor: var(--win-button-active-bgcolor) !important;

    /* Disabled Background Color */
    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;

    /* Button Hover Color */
    --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;

    /* Button Border Color */
    --checkbox-border-color: var(--win-button-border) !important;
    --input-border-color: var(--win-button-border) !important;
    --autocomplete-popup-separator-color: var(--win-button-border) !important;

    /* Accent Color */
    --button-primary-bgcolor: var(--win-accent-color) !important;
    --focus-outline-color: var(--win-accent-color) !important;
    --checkbox-checked-bgcolor: var(--win-accent-color) !important;

    /* Accent Content Color */
    --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
    --urlbar-popup-url-color: var(--win-accent-content-color) !important;
    --download-progress-fill-color: var(--win-accent-content-color) !important;

    /* Accent Hover Color */
    --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
    --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;

    /* Accent Hover Active Color */
    --button-primary-active-bgcolor: var(--win-accent-active-color) !important;
    --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;

    /* Error Color */
    --error-text-color: var(--win-error-color) !important;
    --input-error-border-color: var(--win-error-color) !important;

    /* Others */
    --tab-line-color: Highlight !important;
    --tab-selected-bgcolor: unset !important;
    --tabs-border-color: transparent !important;
    --checkbox-checked-border-color: transparent !important;

    /* Other Defaults */
    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;

    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;

    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
  }
  #navigator-toolbox:not(:-moz-lwtheme) {
    background: var(--lwt-accent-color) !important;
  }

  /*- Separator --------------------------------------------------------------*/
  :root:not(:-moz-lwtheme) {
    --arrowpanel-border-color: var(--win-bgcolor) !important;
    --panel-separator-color: var(--win-bgcolor) !important;
  }
  :root[lwt-default-theme-in-dark-mode] {
    --arrowpanel-border-color: var(--win-border-color) !important;
    --panel-separator-color: var(--win-border-color) !important;
  }

  /*- Menu -------------------------------------------------------------------*/
  html#main-window menupopup:not(:-moz-lwtheme) {
    --menu-color: var(--win-text-color) !important;
    --menu-background-color: var(--win-component-bgcolor) !important;
    --menu-border-color: var(--win-bgcolor) !important;
    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
    --menu-disabled-color: var(--win-disabled-color) !important;
    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
  }

  /*- Toolbar ----------------------------------------------------------------*/
  :root:not(:-moz-lwtheme) #titlebar,
  :root[lwt-default-theme-in-dark-mode] #titlebar {
    --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
    --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
    --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
    --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
  }

  /*- Sidebar ----------------------------------------------------------------*/
  #sidebar-box:not([lwt-sidebar]) {
    appearance: none !important;
  }
  :root:not(:-moz-lwtheme) #sidebar-box,
  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
    --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
    --sidebar-text-color: var(--win-text-color) !important;
    --sidebar-border-color: var(--win-border-color) !important;
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
      --lwt-sidebar-background-color: transparent !important;
      --lwt-sidebar-text-color: var(--win-text-color) !important;
    }
  }

  /*- Panel ------------------------------------------------------------------*/
  :root:not(:-moz-lwtheme) .subviewbutton,
  :root[lwt-default-theme-in-dark-mode] .subviewbutton {
    --button-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
    --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
  }

  :root:not(:-moz-lwtheme)
    toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover),
  :root[lwt-default-theme-in-dark-mode]
    toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover) {
    background-color: var(--win-hover-bgcolor) !important;
  }
  :root:not(:-moz-lwtheme)
    toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active),
  :root[lwt-default-theme-in-dark-mode]
    toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active) {
    background-color: var(--win-hover-active-bgcolor) !important;
  }

  /*- Others -----------------------------------------------------------------*/
  /* For overwrite */
  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy - lwtheme-mozlightdark at v96 */
  :root:not(:-moz-lwtheme) {
    /* Light Theme */
    --lwt-accent-color: var(--win-bgcolor) !important;
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
      --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
    }
  }

  #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
  :root[lwtheme-mozlightdark] /* Legacy - lwtheme-mozlightdark at v96 */
    #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
    #tabbrowser-tabs:not([movingtab])
      > #tabbrowser-arrowscrollbox
      > .tabbrowser-tab
      > .tab-stack
      > .tab-background[multiselected]:not([selected]) {
    background-image: linear-gradient(
        color-mix(in srgb, currentColor 11%, transparent),
        color-mix(in srgb, currentColor 11%, transparent)
      ),
      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }
}

/*= Windows10 - Titlebar accent color ========================================*/
@media (-moz-windows-accent-color-in-titlebar) {
  /* Tab Bar */
  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
    color: -moz-accent-color-foreground;
    background-color: -moz-accent-color;
  }

  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
    --toolbarbutton-icon-fill: currentColor;
    --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
    --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
  }
}

/*= GTK - URL View url accent color ==========================================*/
@media (-moz-gtk-csd-available) {
  :root:not(:-moz-lwtheme) .urlbarView-url {
    --urlbar-popup-url-color: -moz-accent-color;
  }

  /* Nightly Compatibility */
  :root:not(:-moz-lwtheme) #urlbar {
    --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1)  */
    --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
  }
}

/*= Mac - Default like color =================================================*/
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  :root:not(:-moz-lwtheme),
  :root[lwt-default-theme-in-dark-mode] {
    /* Colors */
    --mac-text-color: -moz-dialogtext;
    --mac-disabled-color: GrayText;
    --mac-bgcolor: Window;
    --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
    --mac-field-bgcolor: Window;
    --mac-panel-bgcolor: Menu;
    --mac-sidebar-bgcolor: -moz-mac-source-list;
    --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
    --mac-hover-bgcolor: Window;
    --mac-disabled-bgcolor: transparent;
    --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
    --mac-accent-color: -moz-accent-color; /* or LinkText */
    --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
    --mac-accent-hover-color: color-mix(
      in srgb,
      rgb(0, 0, 0) 10%,
      -moz-accent-color
    ); /* or -moz-mac-menuselect, Highlight */
    --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */

    /* Text, Icon Color */
    --menu-color: var(--mac-text-color) !important;
    --lwt-text-color: var(--mac-text-color) !important;
    --button-color: var(--mac-text-color) !important;
    --input-color: var(--mac-text-color) !important;
    --toolbar-color: var(--mac-text-color) !important;
    --toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
    --toolbarbutton-icon-fill: var(--mac-text-color) !important;
    --toolbar-field-focus-color: var(--mac-text-color) !important;
    --urlbar-popup-action-color: var(--mac-text-color) !important;
    --toolbar-field-color: var(--mac-text-color) !important;
    --autocomplete-popup-highlight-color: var(--mac-text-color) !important;
    --tab-icon-overlay-fill: var(--mac-text-color) !important;
    --panel-banner-item-color: var(--mac-text-color) !important;
    --arrowpanel-color: var(--mac-text-color) !important;
    --autocomplete-popup-color: var(--mac-text-color) !important;
    --panel-shortcut-color: var(--mac-text-color) !important;
    --panel-description-color: var(--mac-text-color) !important;

    /* Text Disabled Color */
    --menu-disabled-color: var(--mac-disabled-color) !important;
    --button-active-bgcolor: var(--mac-disabled-color) !important;
    --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
    --panel-disabled-color: var(--mac-disabled-color) !important;
    --download-progress-paused-color: var(--mac-disabled-color) !important;

    /* Background Color */
    --lwt-accent-color: var(--mac-bgcolor) !important;
    --menu-background-color: var(--mac-bgcolor) !important;
    --autocomplete-popup-background: var(--mac-bgcolor) !important;

    /* Selected Background Color */
    --toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
    --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;

    /* Field Backround Color */
    --input-bgcolor: var(--mac-field-bgcolor) !important;
    --toolbar-field-background-color: var(--mac-field-bgcolor) !important;
    --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;

    /* Panel Backround Color */
    --arrowpanel-background: var(--mac-panel-bgcolor) !important;

    /* Hover Background Color  */
    --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
    --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
    --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;

    --button-bgcolor: var(--mac-hover-bgcolor) !important;
    --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
    --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
    --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
    --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
    --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
    --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
    --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;

    --button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
    --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
    --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;

    /* Disabled Background Color */
    --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;

    /* Border Color */
    /*
      --menu-border-color: var(--mac-bgcolor) !important;
      --toolbar-field-border-color: var(--mac-bgcolor) !important;
      --arrowpanel-border-color: var(--mac-bgcolor) !important;
      --chrome-content-separator-color: var(--mac-bgcolor) !important;
      --toolbarseparator-color: var(--mac-bgcolor) !important;
      --panel-separator-color: var(--mac-bgcolor) !important;
     */

    /* Button Border Color */
    /*
      --tab-line-color: var(---mac-bgcolor) !important;
      --checkbox-border-color: var(--mac-bgcolor) !important;
      --input-border-color: var(--mac-bgcolor) !important;
      --autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
     */

    /* Accent Color Forground */
    --button-primary-color: var(--mac-primary-button-color) !important;
    --checkbox-checked-color: var(--mac-primary-button-color) !important;

    /* Accent Color */
    --button-primary-bgcolor: var(--mac-accent-color) !important;
    --focus-outline-color: var(--mac-accent-color) !important;
    --checkbox-checked-bgcolor: var(--mac-accent-color) !important;

    /* Accent Content Color */
    --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
    --urlbar-popup-url-color: var(--mac-accent-content-color) !important;
    --download-progress-fill-color: var(--mac-accent-content-color) !important;

    /* Accent Hover Color */
    --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
    --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;

    /* Accent Hover Active Color */
    --button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
    --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;

    /* Error Color */
    /*
      --error-text-color: var(--win-error-color) !important;
      --input-error-border-color: var(--win-error-color) !important;
     */

    /* Others */
    --tab-selected-bgcolor: unset !important;
    --tabs-border-color: transparent !important;
    --checkbox-checked-border-color: transparent !important;

    /* Other Defaults */
    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;

    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;

    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root:not(:-moz-lwtheme),
    :root[lwt-default-theme-in-dark-mode] {
      --mac-field-bgcolor: Field;
      --mac-panel-bgcolor: -moz-CellHighlight;
      --mac-hover-bgcolor: ButtonFace;

      --toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
      --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
    }
  }

  /*- Toolbar ----------------------------------------------------------------*/
  :root:not(:-moz-lwtheme) #navigator-toolbox,
  :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
    background-color: var(--mac-bgcolor) !important;
  }

  :root:not(:-moz-lwtheme) #titlebar {
    --mac-hover-bgcolor: ButtonFace;
  }
  :root:not(:-moz-lwtheme) #titlebar,
  :root[lwt-default-theme-in-dark-mode] #titlebar {
    --button-hover-bgcolor: var(--mac-hover-bgcolor);
    --button-active-bgcolor: var(--mac-hover-bgcolor);
    --toolbarbutton-hover-background: var(--mac-hover-bgcolor);
    --toolbarbutton-active-background: var(--mac-hover-bgcolor);

    /* Prevent transparent tabbar at fullscreen hover #312 */
    background: var(--mac-bgcolor);
  }

  :root[lwt-default-theme-in-dark-mode] #urlbar {
    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
  }

  /*- Sidebar ----------------------------------------------------------------*/
  #sidebar-box:not([lwt-sidebar]) {
    appearance: none !important;
  }
  :root:not(:-moz-lwtheme) #sidebar-box,
  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
    --sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
    --sidebar-text-color: var(--mac-text-color) !important;
    /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
      --lwt-sidebar-background-color: transparent !important;
      --lwt-sidebar-text-color: var(--mac-text-color) !important;
    }
  }

  :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
    --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
    --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
  }

  /*- Others -----------------------------------------------------------------*/
  /* For Overwrite */
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
      --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
    }
  }

  /* Hard Coded */
  :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy - lwtheme-mozlightdark at v96 */
    #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[selected="true"],
  :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
    #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[selected="true"] {
    background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
  }

  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
    fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
  }
}

/** Fully Theme Mode **********************************************************/
/* Default Themes
     https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json
     https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
     https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
  */

/*= Default Colors - Hard Coded ==============================================*/
/* 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);
  }
}

/*== Menu color =============================================================*/
html#main-window menupopup {
  /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
  --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important;
  --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important;

  --menu-border-color: var(
    --toolbarbutton-active-background,
    var(--button-active-bgcolor, var(--card-outline-color))
  ) !important;
  --menuitem-hover-background-color: var(
    --toolbarbutton-hover-background,
    var(--button-hover-bgcolor, var(--in-content-button-background-hover))
  ) !important;

  --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important;
  --menuitem-disabled-hover-background-color: color-mix(
    in srgb,
    var(--menuitem-hover-background-color) 40%,
    transparent
  ) !important;
}

@media not all and (-moz-gtk-csd-available) {
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup {
    --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important;
    --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important;
  }
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]),
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"]
    menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
    --menuitem-hover-background-color: color-mix(
      in srgb,
      currentColor 17%,
      transparent
    ); /* Looks like toolbar button */
    /* or var(--lwt-sidebar-highlight-background-color)
         If this value is used, unset is required in the default theme.
      */
  }

  /* Fallback background */
  menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) {
    background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important;
  }
}

/* Default theme color preservation */
:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy - lwtheme-mozlightdark at v96 */
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy - lwtheme-mozlightdark at v96 */
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
  --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
  --arrowpanel-background: var(
    --toolbar-bgcolor,
    var(--in-content-button-background)
  ) !important; /* --menu-background-color */
}
@media not all and (-moz-gtk-csd-available) {
  window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */
    window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"]    menupopup {
    /* Default Dark Mode */
    --panel-color: var(--menu-color) !important;
    --panel-background: var(--menu-background-color) !important;
  }
}

/*== Bookmark Popup Color ====================================================*/
#editBMPanel_folderTree:-moz-lwtheme,
#editBMPanel_tagsSelector:-moz-lwtheme {
  appearance: none !important;
  border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
}

#editBMPanel_folderTree:-moz-lwtheme,
#editBMPanel_folderTree:-moz-lwtheme > treechildren,
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image,
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover),
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected),
#editBMPanel_tagsSelector:-moz-lwtheme,
#editBMPanel_tagsSelector:-moz-lwtheme > richlistitem {
  color: var(--lwt-text-color, fieldtext) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) {
  font-weight: 600 !important;
}

#editBMPanel_folderTree:-moz-lwtheme > treechildren,
#editBMPanel_tagsSelector:-moz-lwtheme {
  background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover),
#editBMPanel_tagsSelector > richlistitem:hover {
  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected),
#editBMPanel_tagsSelector > richlistitem[selected="true"] {
  background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
}

#editBMPanel_namePicker,
#editBMPanel_tagsField {
  --input-bgcolor: var(--arrowpanel-background, Field);
  --input-color: var(--arrowpanel-color, FieldText);
}

/*== Sidebar - Field Color ===================================================*/
.sidebar-panel #search-box,
xul|search-textbox.tabsFilter {
  --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent);

  appearance: none !important;
  padding: 5px 8px !important;
  border: 1px solid var(--input-bgcolor) !important;
  border-radius: 4px;

  background-color: var(--lwt-sidebar-background-color, Field) !important;
  color: var(--lwt-sidebar-text-color, FieldText) !important;
}
.sidebar-panel:not([lwt-sidebar]) #search-box {
  --input-bgcolor: ThreeDShadow;
}

.sidebar-panel #search-box[focused="true"],
xul|search-textbox.tabsFilter[focused="true"] {
  outline: 1px solid var(--input-bgcolor);
}
.sidebar-panel[lwt-sidebar] #search-box[focused="true"],
body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] {
  --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
}
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
  border-color: -moz-accent-color !important; /* Hard Coded */
  outline-color: -moz-accent-color !important;
}

/*= PopupAutoComplete ========================================================*/
#PopupAutoComplete {
  --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background));

  /* overwrite */
  --panel-border-radius: 4px !important; /* Original: 0 */
  --panel-border-color: var(
    --arrowpanel-border-color,
    var(--menu-border-color)
  ) !important; /* Original: ThreeDShadow */

  appearance: none !important;
  background: transparent !important;
  border: none !important;
  clip-path: inset(0 round var(--panel-border-radius));
}

#PopupAutoComplete > richlistbox {
  border-radius: var(--panel-border-radius) !important;
  background-color: var(--panel-bgcolor) !important; /* Original: Field */
  color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */
}
.autocomplete-richlistitem:hover {
  background-color: var(--arrowpanel-dimmed) !important;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
  fill: GrayText !important;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
  --panel-border-color: var(--panel-bgcolor);
  color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */
  background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */
  border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
  background-color: var(
    --arrowpanel-dimmed-further,
    hsla(0, 0%, 80%, 0.5)
  ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */
}

/* Fully Dark Mode ************************************************************/
/*= Remove White Flash =======================================================*/
#tabbrowser-tabbox,
#tabbrowser-tabpanels,
browser[type="content-primary"],
browser[type="content"] > html {
  background: var(--in-content-page-background) !important;
}

/*= Notification =============================================================*/
@-moz-document url("chrome://global/content/alerts/alert.xhtml")
{
  /* Color */
  :root {
    --menu-color: #15141a;
    --menu-background-color: #f9f9fb;
    --menu-border-color: #cfcfd8;
    --menuitem-hover-background-color: #e0e0e6;
  }
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root {
      --menu-border-color: rgba(107, 107, 107, 0.3);
      --menu-color: #fbfbfe;
      --menu-background-color: #2b2a33;
      --menuitem-hover-background-color: #52525e;
    }
    #alertSourceLabel {
      color: rgb(5, 209, 241) !important;
    }
  }

  /* line below removes background from the notification "window" on linux */
  #alertNotification {
    background: transparent !important;
  }

  #alertBox {
    color: var(--menu-color) !important;
    background-color: var(--menu-background-color) !important;
    border-color: var(--menu-border-color) !important;
    border-radius: 6px !important;
    -moz-window-shadow: cliprounded !important;
  }
  #alertSettings {
    fill: currentColor !important;
    color: inherit !important;
    border-radius: 0 !important;
    margin-inline: 0 !important;
    margin-bottom: -4px !important;
  }
  .close-icon,
  #alertSettings {
    background: transparent !important;
  }
  .close-icon:hover > .toolbarbutton-icon,
  #alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
    background-color: var(--menuitem-hover-background-color, #e0e0e6) !important;
  }

  /* Shape */
  .close-icon > .toolbarbutton-icon,
  #alertSettings > .button-box > .box-inherit {
    border-radius: 4px !important;
    padding: 2px !important;
    margin: 2px 2px -2px 0 !important;
  }
  #alertSettings > .button-box > .box-inherit {
    margin: -4px 4px 3px 0 !important;
  }
  #alertSettings > .button-box > .box-inherit > .button-icon {
    padding: 1px;
  }
}

/*= Proton Commons ===========================================================*/
@-moz-document url("chrome://global/content/commonDialog.xhtml"),
  url("chrome://pippki/content/editcacert.xhtml"),
  url("chrome://pippki/content/deletecert.xhtml"),
  url("chrome://pippki/content/exceptionDialog.xhtml"),
  url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
  url("chrome://global/content/appPicker.xhtml"),
  url("chrome://browser/content/pageinfo/pageInfo.xhtml")
{
  /*- Overwrite --------------------------------------------------------------*/
  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
    :root {
      --in-content-page-background: #42414d;
    }
  }

  :root:not(:-moz-lwtheme),
  :root[lwt-default-theme-in-dark-mode] {
    --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
    --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
  }

  /*- Dialog -----------------------------------------------------------------*/
  #commonDialog,
    #editCaCert,
    #deleteCertificate,
    #exceptiondialog,
    #unknownContentType,
    #app-picker,
    #topBar, /* #topBar, #mainDeck: Page Info */
    #mainDeck {
    -moz-appearance: none !important; /* For Mac */
    color: var(--in-content-page-color) !important;
    background-color: var(--in-content-page-background) !important;
    /* border-radius: 0 0 8px 8px !important; */
  }

  /*- Button -----------------------------------------------------------------*/
  button {
    -moz-appearance: none !important;
    color: var(--in-content-button-text-color) !important;
    background-color: var(--in-content-button-background) !important;
    font: inherit;
    font-size: 1em !important;
    font-weight: 600 !important;
    min-height: 32px !important;
    border: 1px solid transparent !important; /* shows up in high-contrast mode */
    border-radius: var(--in-content-button-border-radius) !important;
    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;

    min-height: 32px !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 {
    padding: 6px 13px !important;
    min-height: 28px !important;
    font-size: 0.95em !important;
  }
  button.small {
    padding: 5px 11px !important;
    min-height: 24px !important;
    font-size: 0.9em !important;
  }

  /* Remove margin added by button.css */
  xul|button > .button-box > .button-text {
    margin: 0 !important;
  }

  button:-moz-focusring,
    xul|menulist:-moz-focusring,
    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
    xul|radio[focused="true"]:-moz-focusring {
    box-shadow: none !important;
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: 2px !important;
  }
  button:not([disabled="true"]):hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent !important;
  }

  xul|button:not([disabled="true"]):hover:active,
  xul|button[open],
  xul|button[open]:hover,
  xul|menulist[open="true"]:not([disabled="true"]) {
    background-color: var(--in-content-button-background-active) !important;
  }

  xul|button[default] {
    background-color: var(--in-content-primary-button-background) !important;
    color: var(--in-content-primary-button-text-color) !important;
  }
  xul|button[default]:not([disabled="true"]):hover {
    background-color: var(--in-content-primary-button-background-hover) !important;
    color: var(--in-content-primary-button-text-color) !important;
  }
  xul|button[default]:not([disabled="true"]):hover:active {
    background-color: var(--in-content-primary-button-background-active) !important;
  }

  xul|button[disabled="true"],
  xul|menulist[disabled="true"] {
    opacity: 0.4 !important;
  }
  xul|button:not([disabled="true"]):hover,
  xul|menulist:not([disabled="true"]):hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent !important;
  }

  @media (prefers-contrast) {
    xul|button[default]:not([disabled="true"]):hover {
      border-color: currentColor !important;
    }

    button:focus {
      color: var(--in-content-button-text-color) !important;
    }

    xul|button[default]:focus,
    button.primary:focus {
      color: var(--in-content-primary-button-text-color) !important;
    }
  }

  /*- Radio Button -----------------------------------------------------------*/
  xul|radio {
    /* margin-inline-start: 0 !important; */
    appearance: none !important;
  }

  xul|*.radio-check {
    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 */
  }

  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
  }

  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
    background-color: var(--in-content-button-background-active) !important;
  }

  xul|*.radio-check[selected] {
    -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;
  }

  xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
    background-color: var(--in-content-primary-button-background-hover) !important;
    color: var(--in-content-primary-button-text-color-hover) !important;
  }

  xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
    background-color: var(--in-content-primary-button-background-active) !important;
  }

  xul|*.radio-label-box {
    margin-inline: 0 8px !important;
    padding-inline-start: 0 !important;
  }

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

  xul|checkbox[disabled="true"],
  xul|radio[disabled="true"],
  xul|label[disabled="true"] {
    opacity: 0.5 !important;
  }

  /*- Check Box --------------------------------------------------------------*/
  /* From checkbox.css */
  checkbox {
    appearance: none !important;
    -moz-box-align: center !important;
    margin: 4px 2px !important;
  }

  .checkbox-icon[src] {
    margin-inline-end: 2px !important;
  }
  .checkbox-label {
    margin: 1px 0 !important;
  }

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

  .checkbox-check {
    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;
  }

  .checkbox-check {
    height: 16px !important;
    width: 16px !important;
  }

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

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

  .checkbox-check[checked] {
    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;
  }

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

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

  checkbox:-moz-focusring > .checkbox-check {
    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
  }

  @media (prefers-contrast) {
    checkbox:not([disabled="true"]):hover > .checkbox-check {
      /* 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;
    }

    .checkbox-check[checked] {
      color: var(--checkbox-checked-border-color, currentColor) !important;
      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
    }

    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
      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 */
  xul|*.checkbox-check {
    margin-block: 2px !important;
  }
  xul|richlistitem > xul|*.checkbox-check {
    margin: 3px 6px !important;
  }

  /*- Menulist ---------------------------------------------------------------*/
  /* From mulist.css */
  xul|menulist {
    appearance: none !important;
    background-color: var(--in-content-button-background, ButtonFace) !important;
    color: var(--in-content-button-text-color, ButtonText) !important;
    border-radius: 4px !important;
    padding-block: 4px !important;
    padding-inline: 12px 8px !important;
    margin: 5px 2px 3px !important;
  }

  xul|menulist[size="medium"] {
    padding-block: 6px !important;
    padding-inline: 16px 10px !important;
  }

  xul|menulist[size="large"] {
    padding-block: 8px !important;
    padding-inline: 16px 12px !important;
  }

  xul|menulist:hover {
    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
  }

  xul|menulist:hover:active {
    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
  }

  xul|menulist:-moz-focusring {
    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
  }

  #label-box {
    -moz-box-align: center !important;
    -moz-box-pack: center !important;
    font-weight: 600 !important;
  }

  dropmarker {
    display: -moz-box !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* dropmarker::part(icon)
   * ::part is not apply chrome
   */
  dropmarker[exportparts="icon: dropmarker-icon"] {
    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }

  #highlightable-label:not([highlightable="true"]),
  #label[highlightable="true"] {
    display: none !important;
  }

  xul|menuitem > label:not(.menu-text) {
    margin: 0 3px !important;
  }

  /* From common.css */
  xul|menulist > xul|menupopup {
    appearance: none !important;

    /* Reset native styles on Windows and macOS */
    border: none !important;
    background-color: transparent !important;

    --panel-border-color: var(--in-content-box-border-color) !important;
    --panel-border-radius: 2px !important;
    --panel-background: var(--in-content-box-background) !important;
    --panel-color: var(--in-content-text-color) !important;
    --panel-padding: 0 !important;
  }

  xul|menulist > xul|menupopup xul|menu,
  xul|menulist > xul|menupopup xul|menuitem {
    appearance: none !important;
    font-size: 1em !important;
    padding-block: 0.2em !important;
    padding-inline: 10px 30px !important;
  }

  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
    color: var(--in-content-item-hover-text) !important;
    background-color: var(--in-content-item-hover) !important;
  }

  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
    color: var(--in-content-item-selected-text) !important;
    background-color: var(--in-content-item-selected) !important;
  }

  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
    color: #999 !important;
    /* override the [_moz-menuactive="true"] background color from
         global/menu.css */
    background-color: transparent !important;
  }

  xul|menulist > xul|menupopup xul|menuseparator {
    appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--in-content-box-border-color) !important;
    border-bottom: none !important;
  }

  xul|menulist::part(dropmarker) {
    margin-block: 1px !important;
  }

  /* Override menulist.css */
  xul|menulist[disabled="true"] {
    background-color: var(--in-content-button-background) !important;
  }

  xul|menulist:-moz-focusring > xul|*.menulist-label-box {
    outline: none !important;
  }

  /*- List Boxes -------------------------------------------------------------*/
  html|select[size][multiple],
  xul|listheader,
  xul|richlistbox {
    appearance: none !important;
    margin-inline: 0 !important;
    background-color: var(--in-content-box-background) !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    border-radius: 4px !important;
    color: var(--in-content-text-color) !important;
  }

  xul|listheader {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-bottom: 1px !important;
    box-shadow: inset 0 -1px var(--in-content-table-border-color) !important;
    overflow: clip !important; /* Clip border-radius */
  }

  xul|listheader + xul|richlistbox {
    margin-top: 0 !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html|select[size][multiple] > html|option,
  xul|treechildren::-moz-tree-row {
    padding: 0.3em inherit !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-image: none !important;
  }

  xul|treechildren::-moz-tree-row(multicol, odd) {
    background-color: var(--in-content-box-background-odd);
  }

  html|select[size][multiple] > html|option:hover,
  xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
  xul|treechildren::-moz-tree-row(hover) {
    background-color: var(--in-content-item-hover) !important;
    color: var(--in-content-item-hover-text) !important;
  }

  xul|richlistbox > xul|richlistitem[selected],
  xul|treechildren::-moz-tree-row(selected) {
    background-color: var(--in-content-item-selected) !important;
    color: var(--in-content-item-selected-text) !important;
  }

  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !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-focus-outline-color: var(--in-content-item-selected-text) !important;
  }

  xul|richlistitem[selected] xul|menulist:focus-visible {
    outline-offset: -2px !important;
  }

  /* Use a 2px border so that selected row highlight is still visible behind
        an existing high-contrast border that uses the background color */
  @media (prefers-contrast) {
    xul|treechildren::-moz-tree-row(selected) {
      border: 2px solid currentColor !important;
      border-radius: 4px !important;
    }
  }

  xul|panel[type="autocomplete-richlistbox"] {
    background-color: var(--in-content-box-background) !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    color: var(--in-content-text-color) !important;
  }

  /*- Each OS ----------------------------------------------------------------*/
  @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) {
    xul|checkbox,
    xul|radio {
      padding-inline-start: 0 !important;
    }

    /* Override menulist.css */
    xul|menulist[disabled="true"] {
      background-color: var(--in-content-button-background) !important;
    }

    xul|menulist:-moz-focusring > xul|*.menulist-label-box {
      outline: none !important;
    }
  }

  @media (-moz-gtk-csd-available) {
    /* Overriding appearance also avoids incorrect selection background color with light text. */
    xul|button > xul|*.button-box,
    xul|menulist::part(label-box),
    xul|*.radio-label-box,
    xul|*.checkbox-label-box {
      appearance: none !important;
    }

    xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
      appearance: none !important;
    }
    xul|menulist {
      font-size: inherit !important;
    }
    xul|menulist::part(dropmarker) {
      display: -moz-box;
      margin-block: 6px !important;
    }
    xul|menulist:-moz-focusring::part(label-box) {
      outline: none !important;
    }
  }

  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
    xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
    xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
      display: none !important;
    }

    xul|menulist::part(dropmarker) {
      display: -moz-box !important;
      margin-block: 1px !important;
    }

    xul|menulist > xul|menupopup xul|menu,
    xul|menulist > xul|menupopup xul|menuitem {
      padding-inline-end: 34px !important;
    }

    xul|*.checkbox-icon,
    xul|*.radio-icon {
      margin-inline-end: 0 !important;
    }

    xul|*.text-link:-moz-focusring {
      box-shadow: none !important;
    }
  }
}

/*= Delete Cert ==============================================================*/
@-moz-document url("chrome://pippki/content/deletecert.xhtml")
{
  #certlist {
    border: 1px solid var(--in-content-table-border-color) !important;
    border-radius: 4px !important;
  }
}

/*= Cert Exeption Dialog =====================================================*/
@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml")
{
  #locationTextBox {
    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;

    font-family: inherit !important;
    font-size: inherit !important;
    padding: 8px !important;
    margin: 2px 4px !important;
  }
  #locationTextBox:focus {
    border-color: transparent !important;
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: -1px !important; /* Prevents antialising around the corners */
  }
  #locationTextBox:-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 */
  }
  #locationTextBox:disabled {
    opacity: 0.4 !important;
  }

  #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
    width: 48px !important;
    height: 48px !important;
    background-image: url("chrome://global/skin/icons/warning.svg") !important;
    background-size: 48px !important;
    background-repeat: no-repeat !important;

    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }
  #exceptiondialog:first-child > hbox > vbox > image {
    display: none !important;
  }
}

/*= Page Info ================================================================*/
@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml")
{
  :root {
    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
  }

  #viewGroup > radio {
    border-radius: 8px !important;
    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
    margin: 4px !important;
  }
  #viewGroup > radio:hover {
    background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
  }
  #viewGroup > radio[selected="true"] {
    color: var(--in-content-button-text-color) !important; /* SelectedItemText */
    background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
  }
  #viewGroup > radio {
    color: var(--in-content-deemphasized-text) !important; /* FieldText */
  }

  #viewGroup > radio {
    list-style-image: none !important;
    background-image: var(--viewgroup-image) !important;
    background-repeat: no-repeat;
    background-position: top var(--in-content-button-vertical-padding) center;
    background-size: 32px !important;

    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }
  #generalTab {
    --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
  }
  #mediaTab {
    --viewgroup-image: url(chrome://browser/skin/canvas.svg);
  }
  #permTab {
    --viewgroup-image: url(chrome://browser/skin/permissions.svg);
  }
  #securityTab {
    --viewgroup-image: url(chrome://global/skin/icons/security.svg);
  }

  #viewGroup > radio > .radio-label-box {
    /* Overwrite */
    margin: 0 !important;
    padding: 0 6 !important;
  }
  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
    #viewGroup > radio > .radio-label-box {
      padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
    }
  }

  #mainDeck input {
    color: var(--in-content-page-color) !important;
  }

  #permList {
    -moz-appearance: none !important;
    color: var(--in-content-page-color) !important;
    background-color: var(--in-content-box-background) !important;
  }
  .permission:hover {
    color: var(--in-content-text-color) !important;
    background-color: var(--in-content-button-background-hover) !important;
  }
  .permission radio[disabled] {
    color: var(--in-content-deemphasized-text) !important;
  }

  treecols {
    -moz-appearance: none !important;
    background: var(--in-content-table-header-background) !important;
    color: var(--in-content-table-header-color) !important;
  }
  treecols > treecol,
  treecols > treecolpicker.treecol-image {
    -moz-appearance: none !important;
    color: var(--in-content-table-header-color) !important;
    background: var(--in-content-table-header-background) !important;
    border: 1px solid var(--in-content-table-border-color) !important;
    padding: 4px !important;
    border-spacing: 0;

    text-align: center !important;
  }

  tree,
  treechildren::-moz-tree-row {
    -moz-appearance: none !important;
    color: var(--in-content-text-color) !important;
    background-color: var(--in-content-table-background) !important;
    border: 1px solid var(--in-content-table-border-color) !important;
  }

  treechildren::-moz-tree-row(odd) {
    background-color: var(--in-content-box-background-odd) !important;
  }

  treechildren::-moz-tree-row(hover) {
    color: var(--in-content-item-hover-text) !important;
    background-color: var(--in-content-item-hover) !important;
  }
  treechildren::-moz-tree-row(selected) {
    background-color: var(--in-content-item-selected) !important;
  }

  treechildren::-moz-tree-cell {
    border-inline: 1px solid var(--in-content-table-border-color) !important;
    border-spacing: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
  }
  treechildren::-moz-tree-cell-text(hover) {
    color: var(--in-content-item-hover-text) !important;
  }
  treechildren::-moz-tree-cell-text(selected) {
    font-weight: 600 !important;
    color: var(--in-content-item-selected-text) !important;
  }

  #imagecontainerbox {
    background-color: var(--in-content-box-background) !important;
  }

  #metatree,
  #imagetree,
  #imagecontainerbox,
  #permList {
    border-radius: 4px !important;
  }
  #metatree,
  #imagetree {
    overflow: hidden !important;
  }

  #topBar,
  #imagecontainerbox,
  #permList {
    border-color: var(--in-content-table-border-color) !important;
  }
}

/*= Library Popup ============================================================*/
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
  @media (-moz-gtk-csd-available) {
    :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;
    }
  }
}

/** Decoration ****************************************************************/
@media (prefers-reduced-motion: no-preference) {
  /*= URL, Search Bar ========================================================*/
  #urlbar:hover:not([focused="true"]) > #urlbar-background,
  #searchbar:hover:not(:focus-within) {
    --toolbar-field-border-color: var(--toolbar-field-focus-border-color);
  }

  /*= Other Fields ===========================================================*/
  /* Sidebar */
  .sidebar-panel[lwt-sidebar] #search-box:hover,
  body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
    border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
  }
  .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
  body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
    border-color: -moz-accent-color !important;
  }

  /* Others */
  #editBMPanel_namePicker:hover,
  #editBMPanel_tagsField:hover,
  .findbar-container .findbar-textbox:hover {
    --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
  }

  /*= Downloads Panel ========================================================*/
  /* Accent Color for downloaded item */
  #downloadsListBox .download-state[exists] .downloadDetails {
    color: var(--button-primary-bgcolor);
  }
  #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
    color: var(--button-primary-hover-bgcolor);
  }

  /* File moved or missing */
  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  }
  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
    filter: grayscale(100%) !important;
  }
}

/*= Cursor Types =============================================================*/
#appMenu-proton-update-banner,
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
#appMenu-zoomReduce-button2,
#appMenu-zoomReset-button2,
#appMenu-zoomEnlarge-button2,
#appMenu-fullscreen-button2,
#panelMenu_showAllBookmarks,
#PanelUI-historyMore,
#appMenuClearRecentHistory:not([disabled]),
#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
#BMB_viewBookmarksSidebar,
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll,
#import-button,
menuitem.openintabs-menuitem,
#downloadsListBox .downloadButton,
#downloadsListBox .download-state[exists],
#downloadsListBox .download-state[exists] .downloadDetails,
#downloadsHistory,
#protections-popup-footer .protections-popup-footer-button,
#protections-popup-multiView .panel-subview-footer-button,
#identity-popup-clear-sitedata-button,
#identity-popup-more-info {
  cursor: pointer !important;
}

/* TODO: For now, fxa-menu doesn't show any status.
           (JS required, observe .syncNowBtn status)
  #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
    cursor: progress !important;
  }
  */

/*= Animate ==================================================================*/
@media (prefers-reduced-motion: no-preference) {
  /*- Background Color -------------------------------------------------------*/
  button,
  toolbarbutton,
  stack,
  vbox,
  .toolbarbutton-icon,
  #tabs-newtab-button > .toolbarbutton-icon {
    transition: background-color 1s var(--animation-easing-function) !important;
  }
  button:hover,
  toolbarbutton:hover,
  stack:hover,
  vbox:hover,
  .toolbarbutton-icon:hover,
  #tabs-newtab-button:hover > .toolbarbutton-icon {
    transition: background-color 0.25s var(--animation-easing-function) !important;
  }
  @media (-moz-gtk-csd-available) {
    .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
      transition: background-image 0.25s var(--animation-easing-function) !important;
    }
  }

  .subviewbutton {
    /* treechildren::-moz-tree-row: Can't apply
       menu, menuitem is not apply.
     */
    transition: background-color 0.5s var(--animation-easing-function) !important;
  }
  .subviewbutton:hover {
    transition: background-color 0.1s var(--animation-easing-function) !important;
  }

  /*- Pinned Tab -------------------------------------------------------------*/
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
    /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
    transition: -moz-box-flex 0.2s var(--animation-easing-function),
      margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
    transition: -moz-box-flex 0.2s var(--animation-easing-function),
      margin-inline-start 0.2s var(--animation-easing-function) !important;
  }

  #tabbrowser-tabs:not([movingtab]) .tab-content::before,
  #tabbrowser-tabs:not([movingtab]) .tab-content::after {
    transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
    transition: width 0.3s var(--animation-easing-function) !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
    transition: all 0.3s var(--animation-easing-function) !important;
  }

  /*- URL / Search Bar -------------------------------------------------------*/
  #urlbar-background,
  #searchbar {
    transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
  }
  #urlbar-background:hover,
  #searchbar:hover {
    transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
  }

  /* Buttons in URL bar */
  #tracking-protection-icon-container,
  #identity-icon-box,
  #identity-permission-box,
  #notification-popup-box,
  #page-action-buttons > .urlbar-page-action {
    transition: background-color 2.5s var(--animation-easing-function) !important;
  }
  #tracking-protection-icon-container:hover,
  #identity-icon-box:hover,
  #identity-permission-box:hover,
  #notification-popup-box:hover,
  #page-action-buttons > .urlbar-page-action:hover {
    transition: background-color 1.25s var(--animation-easing-function) !important;
  }

  /*- Border - Other Fields --------------------------------------------------*/
  #search-box:hover,
  xul|search-textbox.tabsFilter:hover,
  #editBMPanel_namePicker:hover,
  #editBMPanel_tagsField:hover,
  .findbar-container .findbar-textbox:hover {
    transition: border-color 1s var(--animation-easing-function) !important;
  }
  #search-box:hover,
  xul|search-textbox.tabsFilter:hover,
  #editBMPanel_namePicker:hover,
  #editBMPanel_tagsField:hover,
  .findbar-container .findbar-textbox:hover {
    transition: border-color 0.5s var(--animation-easing-function) !important;
  }

  /*- Sidebar ----------------------------------------------------------------*/
  #sidebar-box {
    /* like #sidebar-box > #sidebar */
    min-width: 14em;
    width: 18em;
    max-width: 36em;

    /* Animation */
    transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
      visibility 0s linear !important;
  }
  #sidebar-box[hidden="true"] {
    display: -moz-box !important;
    margin-inline-start: -18em;
    opacity: 0;
    visibility: collapse;
    transition-delay: 0s, 0s, 0.25s !important;
  }

  /*- Full Screen ------------------------------------------------------------*/
  #navigator-toolbox {
    /* Full screen out */
    transition: margin-top 1s ease;
    transform-origin: top;
  }
  #navigator-toolbox[inFullscreen="true"] {
    /* Full screen enter */
    animation-duration: 1s;
    animation-name: fullscreen;
    animation-timing-function: ease;

    /* Full screen navbar not hover */
    transition: margin-top 0.3s var(--animation-easing-function) 50ms;
  }
  #navigator-toolbox[inFullscreen="true"]:hover {
    transition-duration: 1.5s;
    transition-delay: 0.1s;
  }

  @keyframes fullscreen {
    from {
      margin-top: 0;
    }
    /* Dont' use `to`: Depending on density */
  }

  /*- Expand - Synced Tabs ---------------------------------------------------*/
  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
  {
    .item-tabs-list {
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
      transform: translateY(0%);
      opacity: 1;
      max-height: 100%;
    }

    .item.client.closed .item-tabs-list {
      display: flex !important;

      transition: transform 0.2s ease-out, opacity 0.2s ease-out,
        max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
      visibility: hidden;
      transform: translateY(-100%);
      opacity: 0;
      max-height: 0;
    }
  }

  /*- Arrow - Synced Tabs ----------------------------------------------------*/
  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
  {
    /* treechildren::-moz-tree-twisty: Can't apply */
    #template-container .item.client .item-twisty-container {
      transition: transform 0.1s var(--animation-easing-function) !important;
    }

    #template-container .item.client.closed .item-twisty-container {
      transform: rotate(-90deg);
      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
    }

    #template-container .item.client.closed .item-twisty-container:dir(rtl) {
      transform: rotate(90deg);
      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
    }
  }

  /*- Arrow - Edit Bookmark Popup --------------------------------------------*/
  #editBookmarkPanelRows .expander-up .button-icon,
  #editBookmarkPanelRows .expander-down .button-icon {
    transition: transform 0.1s var(--animation-easing-function) !important;
  }
  #editBookmarkPanelRows .expander-up {
    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
  }
  #editBookmarkPanelRows .expander-up .button-icon {
    transform: rotate(180deg);
  }
}

/** Reduce Padding ************************************************************/
/*= Root - Reduce Padding ====================================================*/
:root {
  /* Tab Bar */
  --proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */
  --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
  --tab-border-radius: 0px !important; /* Original: 4px */
  --inline-tab-padding: 6px !important; /* Original: 8px */

  /* Panel */
  --arrowpanel-menuicon-padding: 8px;
  --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
  --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
  --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
}

:root[uidensity="compact"] {
  /* Tool Bar */
  --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */

  /* Panel */
  --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */
}

:root[uidensity="touch"] {
  /* Tab Bar - Like Original */
  --proton-tab-block-margin: 4px !important; /* Original: 4px */
  --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */
  --inline-tab-padding: 8px !important; /* Original: 8px */

  /* Panel - Like Original */
  --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
}

.tab-content[pinned] {
  --inline-tab-padding: 8px; /* Prevent overflow pinned tab's divide line not aligned */
  padding-inline: var(--inline-tab-padding) !important;
}

/* Fix Tab bar button radious */
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
.tab-close-button {
  --tab-border-radius: 4px !important;
}

/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
/* for First Tab Space */
:root {
  --space-left-tabbar: 0px; /* If you want drag space, set to 8px */
}
:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
  padding-inline-start: var(--space-left-tabbar) !important;
}

/* Titlebar Space */
.titlebar-spacer[type="pre-tabs"] {
  width: 30px !important; /* Original: 40px */
}
.titlebar-spacer[type="post-tabs"] {
  width: 25px !important; /* Original: 40px */
}

/* Tabbar Buttons */
:root {
  --newtab-button-minus-width-padding: 2px;
  --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
}
#new-tab-button > .toolbarbutton-icon,
#alltabs-button > .toolbarbutton-badge-stack {
  /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
  width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;

  /* Original: --toolbarbutton-inner-padding */
  padding-left: var(--newtab-button-width-padding) !important;
  padding-right: var(--newtab-button-width-padding) !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0 !important;
}

:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
  --scrollbtn-inner-padding: 1px;
  --scrollbtn-outer-padding: 3px;
}
#scrollbutton-up {
  padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
  padding-right: var(--scrollbtn-outer-padding, 4px) !important;
}
#scrollbutton-down {
  padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
  padding-right: var(--scrollbtn-inner-padding, 4px) !important;
}

:root:not([uidensity="touch"]) #new-tab-button,
#alltabs-button {
  --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
}

/* Tab - Max Size */
:root {
  --tab-max-width: 225px;
}
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  max-width: var(--tab-max-width) !important; /* Original: 225px */
}

/* neighbouring tabs should "pinch" together */
.tabbrowser-tab {
  padding-inline: 0 !important;
}

/*= Tab Bar - Reduce Height, Show more contents ==============================*/
/* for Extra Drag Space */
:root {
  --space-above-tabbar: 0px; /* If you want drag space, set to 8px */
}
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
  height: calc(var(--tab-min-height) + var(--space-above-tabbar));
}
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
  padding-top: var(--space-above-tabbar) !important;
}

/* Toolbar Height */
#TabsToolbar {
  --tab-min-height: 33px;
  --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
}
:root[uidensity="compact"] #TabsToolbar {
  --tab-min-height: 29px;
}
:root[uidensity="touch"] #TabsToolbar {
  --tab-min-height: 41px;
}

:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
  max-height: var(--tab-min-height) !important; /* Force apply height */
}
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
  height: var(--tab-min-height) !important;
}

/* Top Margin */
.tab-background,
.tab-content {
  margin-top: 0 !important;
}

/* Scroll Button - Size Fix */
:root #tabbrowser-arrowscrollbox {
  --scrollbtn-vertical-padding: 3px;
  --scrollbtn-vertical-border: 2px;
  --scrollbtn-border-radius: 7px;
}
#scrollbutton-up,
#scrollbutton-down {
  /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
  /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
  padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
  padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;

  /* Original: 4px */
  border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
  border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
  /* Original: calc(var(--tab-border-radius) + 4px) = 8px */
  border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
}

:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
  height: calc(
    var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
  ); /* Compact: 28px, Normal: 33px, Touch: 38px */
}

/* Pinned Tab - Titlechanged Indicator position fix */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important;
}
:root[uidensity="compact"]
  .tabbrowser-tab:is([image], [pinned])
  > .tab-stack
  > .tab-content[attention]:not([selected="true"]),
:root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important;
}
:root[uidensity="touch"]
  .tabbrowser-tab:is([image], [pinned])
  > .tab-stack
  > .tab-content[attention]:not([selected="true"]),
:root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
}

/*= Nav Bar - Reduce Width ===================================================*/
#nav-bar:not([customizing]) toolbarspring {
  min-width: 1px !important;
  max-width: 100px !important;
}

/*= URL Bar - Reduce Padding =================================================*/
:root:not([uidensity="touch"]) #urlbar-container,
:root:not([uidensity="touch"]) #search-container {
  padding-block: 3px !important; /* Original: 4px */
  margin-inline: 5px !important; /* Original: 5px */
}
:root:not([uidensity="compact"]) #urlbar-container,
:root:not([uidensity="compact"]) #search-container {
  padding-block: 2px !important;
}

/* spread menu */
:root:not([uidensity]) .urlbarView-row {
  padding-block: 1px !important; /* Original: 2px */
}
:root[uidensity="compact"] .urlbarView-row {
  padding-block: 0px !important;
}

:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
  padding-block: 8px !important; /* Original: 10px */
}
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 2px !important;
}

/*= BookMark Bar - Reduce Height =============================================*/
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
  margin-top: 0px; /* Original: 2px */
}

/*= Info Bar - Reduce Padding ================================================*/
:root:not([uidensity]) #tab-notification-deck {
  --infobar-message-margin: 0 4px 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
  --infobar-message-margin: 0 4px 2px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
  margin: var(--infobar-message-margin, 0 4px 4px) !important;
}

:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
  --infobar-vertical-margin: 7px;
  --infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
  --infobar-vertical-margin: 6px;
  --infobar-button-vertical-margin: 2px;
}
.infobar > .icon {
  margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-message {
  padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
  margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
}
.notification-close {
  margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
}

/* Hard coded for compatibility - Disappearing phenomenon */
.container.infobar::before {
  content: "";
  display: block;
  width: 2px;
  position: absolute;
  background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}

/*= Menu - Reduce Padding ====================================================*/
:root {
  --menu-padding: 0.35em; /* Win7, 8: 0px */
}
:root[uidensity="compact"] {
  --menu-padding: 0.25em;
}
:root[uidensity="touch"] {
  --menu-padding: 0.5em;
}
menupopup:not(.in-menulist) > menuitem,
menupopup > menu {
  /* Original: 0.5em */
  padding-block: var(--menu-padding) !important;
}

#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
  padding-block: 0 !important;
}

@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  :root:not([uidensity="touch"]) .menu-text,
  :root:not([uidensity="touch"]) .menu-iconic-text {
    padding-inline-end: 0 !important; /* Original: 2px */
  }
  :root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
    padding-block: 1px !important; /* Original: 4px*/
  }
  :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
    padding: 0 0 1px !important; /* Original: 0 0 4px*/
  }
  :root:not([uidensity="touch"]) .menu-right {
    margin-right: 6px !important; /* Original: 12px */
  }
}

@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  /* Remove border */
  menupopup > menuitem,
  menupopup > menu {
    padding-block: calc(var(--menu-padding) - 2px) !important;
  }

  /* Make to original */
  :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
    padding: 0 0 4px !important;
  }
}

@media (-moz-gtk-csd-available) {
  menupopup > menu {
    padding-inline-start: 0.5em;
  }
}

/* Arrow Icon Align to Right */
.bookmark-item.subviewbutton > .menu-right {
  margin-inline-end: 0 !important;
}

/*= Bookmark Menu - Reduce Padding ===========================================*/
:root {
  --bookmark-menu-padding: 3px;
}
:root[uidensity="compact"] {
  --bookmark-menu-padding: 1.5px;
}

:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
  padding-block: var(--bookmark-menu-padding) !important;
}

/*= Global Menu - Set Padding ================================================*/
/* Vertical Align - Center & Height: 100%  */
#main-menubar {
  -moz-box-flex: 1 !important;
}

/* Rounding */
#main-menubar > menu {
  border-radius: 4px;
}

/* Menubar item padding */
:root {
  --global-menubar-padding: 2px;
}
:root[uidensity="compact"] {
  --global-menubar-padding: 1px;
}
:root[uidensity="touch"] {
  --global-menubar-padding: 4px;
}
#main-menubar > menu {
  padding-block: var(--global-menubar-padding) !important;
}

/* Reduce items */
#main-menubar > menu > menupopup menuitem,
#main-menubar > menu > menupopup menu {
  padding-block: var(--bookmark-menu-padding) !important;
}

/*= Popup Panel - Reduce padding =============================================*/
#protections-popup-main-header-label {
  height: unset !important; /* Original: 37.6px */
}

#identity-popup,
#permission-popup,
#protections-popup {
  --vertical-section-padding: 0.8em; /* Original: 0.9em */
}

.protections-popup-footer-button,
.protections-popup-category {
  min-height: 24px; /* Original: 32px */
  height: unset !important;
}

/** Popup panel - Compact mode  */
/* Footer Button Height */
:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
  padding: 3px 8px !important;
}
/* Footer Button Height */
:root[uidensity="compact"] #protections-popup-trackersView-settings-button {
  margin: 4px 8px 0 !important;
}
/* not cut off for Protection popup Footer on windows */
:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
  padding: 3px 0 20px !important;
}
/* Button and disabled category in Protection popup */
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
  height: 20px !important;
  min-height: 20px !important;
}
/* Footer Button in Tracking Content Panel */
:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
  margin: 0 0 3px !important;
}
/* Identity popup header padding */
:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
  padding: 2px 5px !important;
}
/* Text When There is no trackers */
:root[uidensity="compact"] #protections-popup-no-trackers-found-description {
  margin: 2em 4em !important;
}
/* Download Item margin */
:root[uidensity="compact"] #downloadsListBox {
  margin: 0 !important;
}

/** Tab Bar - Connect to window ***********************************************/
.tab-background {
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
  margin-bottom: 0px !important;
}

.tab-content {
  margin-top: var(--tab-block-margin);
}

.tab-stack {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* Remove line at Toolbar's top */
#tabbrowser-tabs {
  z-index: 1 !important;
}
#TabsToolbar {
  overflow: hidden;   /* Prevent toolbar area over */
}

/** Selected Tab - Color like toolbar *****************************************/
:root:not(:-moz-lwtheme) {
  /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
  --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
}
#tabbrowser-tabs:not([movingtab])
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab
  > .tab-stack
  > .tab-background[selected="true"]:-moz-lwtheme {
  /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
 */
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
}

/* Multi Selected Color */
#tabbrowser-tabs:not([movingtab])
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab
  > .tab-stack
  > .tab-background[multiselected]:not([selected]):-moz-lwtheme {
  background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
}

.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
  background: color-mix(in srgb, currentColor 65%, transparent);
  opacity: 0.3;
}
#TabsToolbar[brighttext]
  .tab-background[multiselected="true"]:not([selected="true"])
  > .tab-loading-burst:not([bursting]) {
  opacity: 0.15;
}

/** Selected Tab - Photon like contextline ************************************/
:root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
  --tab-line-color: rgb(10, 132, 255) !important;
}
@media (-moz-gtk-csd-available) {
  :root:not(:-moz-lwtheme) #tabbrowser-tabs {
    --tab-line-color: Highlight !important; /* -moz-accent-color */
  }
}

.tab-context-line {
  display: -moz-inline-box !important;
  height: 2px !important;
  border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
}

.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
  /* Photon like color
       Default: var(--tab-line-color, rgb(10, 132, 255))
       Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent)

       FF v96+ replace by var(--lwt-tab-line-color) */
  background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important;
}

.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
  background-color: rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
  transform: none !important;
}
#TabsToolbar[brighttext]
  .tabbrowser-tab:hover:not([selected="true"], [multiselected])
  > .tab-stack
  > .tab-background
  > .tab-context-line {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Prevent identitiy color flashing */
.tabbrowser-tab[usercontextid] .tab-context-line {
  --identity-icon-color: none;
}

:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) /* Legacy - lwtheme-mozlightdark at v96 */
  #TabsToolbar[brighttext]
  #tabbrowser-tabs:not([noshadowfortests])
  tab[visuallyselected]
  > stack:-moz-lwtheme::before,
:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) /* Legacy - lwtheme-mozlightdark at v96 */
  #TabsToolbar[brighttext]
  #tabbrowser-tabs:not([noshadowfortests])
  tab[visuallyselected]
  > stack:-moz-lwtheme::after {
  /* As Selected Tab - Box Shadow */
  stroke: var(--toolbar-color) !important;
}

/* Animation */
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
    transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
  }
}

/* Remove side's background color border */
#TabsToolbar[brighttext]
  #tabbrowser-tabs:not([noshadowfortests])
  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  > .tab-stack
  > .tab-background:-moz-lwtheme {
  --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
}
#TabsToolbar:not([brighttext])
  #tabbrowser-tabs:not([noshadowfortests])
  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  > .tab-stack
  > .tab-background {
  box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
}

/* Container Tab */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  margin: unset !important;
}

/** Unselected Tab - Divide line **********************************************/
.tabbrowser-tab[first-visible-tab="true"] .tab-background::before,
.tab-background::after {
  content: "";
}

.tab-background::before,
.tab-background::after {
  /* Box Model */
  display: block;
  position: absolute;

  /* Position */
  top: 50%;
  transform:  translateY(calc(-50% + 1px)) !important;

  /* Bar shape */
  width: 1px;
  height: 100%;

  /* Bar Color */
  opacity: 0.3;
  background-color: var(--lwt-background-tab-separator-color, currentColor) !important;
}
.tab-background::after {
  right: 0;
}

.tabbrowser-tab[visuallyselected] .tab-background::before,
.tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab[beforeselected-visible] .tab-background::after {
  opacity: 0;
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  .tab-background::before,
  .tab-background::after {
    transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
  }
}

/** New tab button - Smaller button *******************************************/
#tabs-newtab-button > .toolbarbutton-icon {
  margin-left: 1px;

  /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
  --toolbarbutton-inner-padding: 6px;
}
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
  --toolbarbutton-inner-padding: 4px; /* Photon: 6px */
}
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
  --toolbarbutton-inner-padding: 9px; /* Photon: 9px */
}

/* Unloaded Tab - Contents Opacity ********************************************/
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  opacity: 0.7;
}

/** Clipped tabs - Letters cleary *********************************************/
#tabbrowser-tabs[closebuttons="activetab"] .tab-content:not([pinned]) {
  padding-inline-start: 8px !important;
}

#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"]
  .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
  mask-image: linear-gradient(to right, black 70%, transparent) !important;
}

#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"]
  .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
  mask-image: linear-gradient(to left, black 70%, transparent) !important;
}

/** Clipped tabs - Show close button at hover *********************************/
#tabbrowser-tabs[closebuttons="activetab"]
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab:not([pinned])
  > .tab-stack
  > .tab-content
  > .tab-close-button:not([selected="true"]) {
  display: -moz-inline-box !important;
}

#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  visibility: collapse !important;
  opacity: 0;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
  opacity: 1;
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  /* Fade out */
  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    transition: opacity 0.1s var(--animation-easing-function) !important;
  }

  /* Fade in */
  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
    transition: opacity 0.25s var(--animation-easing-function) !important;
  }
}

/* Closed Button's icon thicker */
.tabbrowser-tab .tab-content > .close-icon {
  list-style-image: url("./icons/dismiss-filled.svg") !important;
}

/* Closed Button's icon larger */
.tab-close-button {
  padding: 6px !important; /* Original: 7px */
}
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 1px !important; /* Original: 0px */
  width: 19px !important; /* Original: 17px */
}

/* Closed Button's padding reduce */
#tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button {
  margin-inline-end: calc(
    (var(--inline-tab-padding) / -2) + 2px
  ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/
  padding: 4px !important; /* Original: 7px */
  width: 20px !important; /* Original: 24px */
  height: 20px !important; /* Original: 24px */
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 3px !important; /* Original: 0px */
  width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
}

/** Sound Tab - Hide Label ****************************************************/
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) {
  display: none !important;
}

/** Sound Tab - Show with Favicons ********************************************/
/* Makes the favicons always visible (also on hover) */
.tab-icon-image:not([pinned]) {
  opacity: 1 !important;
}

/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
  /* Position */
  top: 0 !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
  transform: translateX(-0.5px) translateY(-6px);

  /* Shape */
  padding: 1.5px !important;
  border-radius: 10px !important;
  width: 17px !important;
  height: 17px !important;
}
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  /* Color */
  color: currentColor !important;
  stroke: transparent !important;
  background: transparent !important;
  fill-opacity: 0.8 !important;
  opacity: 1 !important;
}
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
  transform: translateX(4px);
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  .tab-icon-overlay:not([crashed]),
  .tab-icon-overlay[pinned][crashed][selected] {
    transition: 0.1s var(--animation-easing-function);
  }

  .tab-label-container > .tab-label {
    transition: transform 0.25s var(--animation-easing-function);
  }
}

/* None exist favicon - Size bigger */
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
  transform: translateX(-0.5px) translateY(-1px);
  inset-inline-end: 0 !important;
  margin-inline-end: 0 !important;
  padding: 0 !important;
}
.tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
  opacity: 0 !important; /* Favicon hidden */
}
.tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
  .tab-label {
  transform: translateX(3px);
}

/* Busy - Show */
.tab-throbber[busy],
.tab-icon-pending[busy] {
  opacity: 1 !important;
}

/* Busy - Overlay Position */
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
  transform: translateX(-0.5px) translateY(-6px);
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
  inset-inline-end: -9px !important;
  margin-inline-end: 9.5px !important;
  padding: 1.5px !important;
}

/* Hover */
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: var(--toolbar-bgcolor, white) !important;
  stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
  background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
  fill-opacity: 0.95 !important;
}

#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: var(--toolbar-bgcolor, black) !important;
}

.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover {
  padding: 0 !important;
}

/** PictureInPicture Tab - Show PIP Icon **************************************/
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after,
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after {
  content: "";
}
.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after {
  /* Shape */
  display: -moz-inline-box !important;
  width: 14px;
  height: 14px;
  background-size: 14px;
  -moz-box-ordinal-group: 1 !important;

  /* Color */
  fill: currentColor;
  opacity: 0.8;
  -moz-context-properties: fill;

  /* Icon */
  background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
}
.tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after {
  opacity: 0.95;
}

/* Close Button's position */
.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
  -moz-box-ordinal-group: 2 !important;
}
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
  margin-left: 7px !important;
}
#tabbrowser-tabs:not([closebuttons="activetab"])
  .tabbrowser-tab[pictureinpicture]:not([pinned]):hover
  .tab-close-button {
  margin-left: 2px !important;
}

/** Container Tab - Color line at icon's bottom *******************************/
.tab-content:not([titlechanged])::before {
  /* Box Model */
  content: "";
  display: block;
  position: absolute !important;
  transform: translate(9px, 12px) !important;

  /* Shape */
  border-bottom: 2px solid var(--identity-icon-color);
  width: 25%;
  opacity: 0.75;
}
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
  width: calc(100% - 30px);
  opacity: 1;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
  width: calc(100% - 33px);
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  .tab-content:not([titlechanged])::before {
    transition: 0.15s var(--animation-easing-function) !important;
    transition-property: width, opacity;
  }
}

/* Pinned Tab */
.tabbrowser-tab[pinned] .tab-content::before {
  transform: translateY(12px) !important;
  width: 16px;
}

/* Pinned Tab - Titlechanged Indicator override */
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  --dotted-identity-image: radial-gradient(
    circle,
    var(--identity-icon-color),
    var(--identity-icon-color) 2px,
    transparent 2px
  );
  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
  background-position-x: 32%, 50%, 70% !important;
}
:root[uidensity="compact"]
  .tabbrowser-tab:is([image], [pinned])[usercontextid]
  > .tab-stack
  > .tab-content[attention]:not([selected="true"]),
:root[uidensity="compact"]
  .tabbrowser-tab[usercontextid]
  > .tab-stack
  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  background-position-x: 30%, 50%, 70% !important;
}

/* Pinned Tab - Titlechanged & soundplaying */
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  > .tab-stack
  > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  > .tab-stack
  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
}
:root[uidensity="compact"]
  .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  > .tab-stack
  > .tab-content[attention]:not([selected="true"]),
:root[uidensity="compact"]
  .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  > .tab-stack
  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
}

/** Crashed Tab - Don't show Favicons *****************************************/
.tab-icon-image[crashed] {
  display: none !important;
}

/** Fullscreen - Overlap toolbar **********************************************/
:root[sizemode="fullscreen"] #navigator-toolbox {
  position: fixed !important; /* Needed for content to take up entire height */
  display: block !important; /* Needed for content to take up entire height */
  z-index: 1000 !important; /* Puts the UI above the content */
}

:root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) {
  width: 100%; /* Makes the UI take up the entire width */
}

:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]),
:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] {
  visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */
}

/** 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 ===========================================*/
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
  @media (-moz-gtk-csd-available) {
    #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;
    }
  }
}

/** Panel - Icons *************************************************************/
/*= Padding ==================================================================*/
:root {
  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;

  /* Blank Menu Left Padding */
  --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
  --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
}
:root[uidensity="compact"] {
  --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
}
:root[uidensity="touch"] {
  --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
}
:root {
  /* Global */
  --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);

  /* General Panel */
  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;

  /* Blank Menu Left Padding */
  --arrowpanel-menuimageblank-padding-horizontal: calc(
    var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
  );
  --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
}

#downloadsHistory .button-text,
.subviewbutton > .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
  padding-inline-start: 0 !important;
}
#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text,
#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
#appMenu-proton-update-banner .toolbarbutton-text {
  margin-inline-start: 0 !important;
}

#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before {
  display: -moz-inline-box;
  margin-inline-end: var(--arrowpanel-menuicon-padding);
  width: 16px;
  height: 16px;
}
#appMenu-proton-update-banner {
  margin-bottom: 2px !important;
}
#appMenu-proton-update-banner::before {
  margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
}
#appMenu-fxa-status2,
#appMenu-zoom-controls2 {
  align-items: center;
  padding-top: var(--arrowpanel-menuimageblank-padding) !important;
  padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
}
#appMenu-zoom-controls2::before {
  margin-inline-end: 0 !important;
}

.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
  margin-left: 16px !important;
}

/* Icons Color */
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before,
#downloadsHistory .button-icon,
.subviewbutton > image {
  fill: currentColor !important;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
  -moz-context-properties: fill !important;
}
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
  stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important;
  -moz-context-properties: fill, stroke !important;
}
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon {
  stroke: var(--button-hover-bgcolor) !important;
}

.subviewbutton[disabled="true"] > image {
  /* Ghost icons when disabled */
  opacity: 0.4;
}

/*= Panel - Main =============================================================*/
#appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
  display: -moz-inline-box !important;
  margin-inline-start: var(--arrowpanel-menuicon-padding);
  -moz-box-ordinal-group: 0 !important;
}

#appMenu-proton-update-banner::before {
  content: url("./icons/whatsnew.svg");
}
#appMenu-fxa-status2::before {
  /* Don't exist img tag */
  content: url("chrome://browser/skin/fxa/avatar-empty.svg");
}
#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before {
  display: none;
}
#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])
  #appMenu-fxa-label2::before {
  /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
  content: "";
  border-radius: 50% !important;
  background-size: 16px !important;
  background-image: var(--avatar-image-url) !important;
}

#appMenu-new-tab-button2,           /* Seperate */
  #appMenu-passwords-button,          /* Seperate */
  #appMenu-extensions-themes-button,
  #appMenu-save-file-button2,         /* Seperate */
  #appMenu-find-button2,
  #appMenu-more-button2,              /* Seperate */
  #appMenu-help-button2,
  #appMenu-quit-button2               /* Seperate */ {
  padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
  padding-top: var(--arrowpanel-menuitemblank-padding) !important;
  padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
}
#appMenu-zoom-controls2 {
  padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}

#appMenu-new-window-button2 {
  list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenu-new-private-window-button2 {
  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}

#appMenu-bookmarks-button {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#appMenu-history-button {
  list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-downloads-button {
  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}

#appMenu-print-button2 {
  list-style-image: url("chrome://global/skin/icons/print.svg");
}

#appMenu-settings-button {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

/*= Panel - Account ==========================================================*/
#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
#PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Default */
#fxa-manage-account-button::before {
  content: "";
  display: -moz-inline-box;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  background-size: 32px;
  background-image: var(--avatar-image-url);
  margin-inline-end: var(--arrowpanel-menuicon-padding);
}

.syncNowBtn {
  visibility: visible !important;
  -moz-box-ordinal-group: 1 !important;
  margin-inline-end: var(--arrowpanel-menuicon-padding);
}
#PanelUI-fxa-menu-setup-sync-button {
  list-style-image: url("chrome://browser/skin/sync.svg");
}

#PanelUI-fxa-menu-connect-device-button {
  list-style-image: url("chrome://browser/skin/fxa/add-device.svg");
}
#PanelUI-fxa-menu-sendtab-button {
  list-style-image: url("./icons/send-to-device.svg");
}
#PanelUI-fxa-menu-sync-prefs-button {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#PanelUI-fxa-menu-account-signout-button {
  list-style-image: url("./icons/sign-out.svg");
}
#PanelUI-remotetabs-view-managedevices::before {
  /* Box */
  content: "";
  padding-inline-end: 16px;
  padding-block: 1px;
  margin-inline-end: var(--arrowpanel-menuicon-padding);

  /* Color */
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  -moz-context-properties: fill;

  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("chrome://global/skin/icons/settings.svg");
}

.PanelUI-remotetabs-notabsforclient-label {
  margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
  padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}

/* Change Separator */
#PanelUI-fxa-menu::before {
  content: "";
  display: -moz-box;
  border-bottom: 1px solid var(--panel-separator-color);
  margin: var(--panel-separator-margin);
  padding: 0;
}
#PanelUI-fxa-menu > :first-child {
  -moz-box-ordinal-group: 0;
}
#PanelUI-sign-out-separator {
  display: none;
}
.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */
  .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
  list-style-image: url("./icons/send-to-device.svg");
}
.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */
  .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

/*= Panel - Bookmark =========================================================*/
#panelMenuBookmarkThisPage {
  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
panelMenuBookmarkThisPage[starred] {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

#panelMenu_searchBookmarks {
  list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#panelMenu_viewBookmarksToolbar {
  list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}

#panelMenu_showAllBookmarks {
  list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}

/*= Panel - History ==========================================================*/
#appMenuRecentlyClosedTabs {
  list-style-image: url("chrome://browser/skin/tab.svg");
}
#appMenuRecentlyClosedWindows {
  list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenuRestoreSession {
  list-style-image: url("./icons/restore-session.svg");
}
#appMenuClearRecentHistory {
  list-style-image: url("chrome://browser/skin/forget.svg");
}

#PanelUI-historyMore {
  list-style-image: url("chrome://browser/skin/history.svg");
}

#appMenu-library-recentlyClosedTabs {
  list-style-image: url("./icons/movetowindow-16.svg");
}
#appMenu-library-recentlyClosedWindows {
  list-style-image: url("./icons/restore-session.svg");
}

/*= Panel - More tools =======================================================*/
#appmenu-moreTools-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

/* Web Developer Tools */
#appmenu-developer-tools-view .subviewbutton:nth-child(1),
#PanelUI-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("./icons/developer.svg");
}
/* Task Manager */
#appmenu-developer-tools-view .subviewbutton:nth-child(2),
#PanelUI-developer-tools-view .subviewbutton:nth-child(2) {
  list-style-image: url("./icons/performance.svg");
}
/* Remote Debugging - Edge bug.svg */
#appmenu-developer-tools-view .subviewbutton:nth-child(3),
#PanelUI-developer-tools-view .subviewbutton:nth-child(3) {
  list-style-image: url("./icons/bug.svg");
}
/* Browser Toolbox - Edge webdeveloper.svg */
#appmenu-developer-tools-view .subviewbutton:nth-child(4),
#PanelUI-developer-tools-view .subviewbutton:nth-child(4) {
  list-style-image: url("./icons/window-dev-tools.svg");
}
/* Browser Content Toolbaox -  */
#appmenu-developer-tools-view .subviewbutton:nth-child(5),
#PanelUI-developer-tools-view .subviewbutton:nth-child(5) {
  list-style-image: url("./icons/command-frames.svg");
}
/* Browser Console */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(5),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) {
  list-style-image: url("chrome://devtools/skin/images/command-console.svg");
}
/* Responsive Design Mode */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(4),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) {
  list-style-image: url("./icons/command-responsivemode.svg");
}
/* Eyedropper */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(3),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) {
  list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
}
/* Page Source - Edge file-search.svg */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(2),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) {
  list-style-image: url("./icons/document-search.svg");
}
/* Extensions for Devel */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(1),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) {
  list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}
#appmenu-developer-tools-view .subviewbutton:last-child {
  margin-bottom: 6px !important;
}

/*= Panel - Help =============================================================*/
#appMenu_menu_openHelp {
  list-style-image: url("chrome://global/skin/icons/help.svg");
}
#appMenu_feedbackPage {
  list-style-image: url("./icons/send.svg");
}
#appMenu_helpSafeMode {
  list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}
#appMenu_troubleShooting {
  list-style-image: url("chrome://global/skin/icons/more.svg");
}
#appMenu_help_reportSiteIssue {
  list-style-image: url("chrome://global/skin/icons/lightbulb.svg");
}
#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
  list-style-image: url("chrome://global/skin/icons/warning.svg");
}
#appMenu_aboutName {
  list-style-image: url("chrome://global/skin/icons/info.svg");
}

/*= Panel - Library ==========================================================*/
#appMenu-library-bookmarks-button {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#appMenu-library-history-button {
  list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-library-downloads-button {
  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}

/*= Panel - Downloads ========================================================*/
#downloadsHistory {
  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#downloadsHistory .box-inherit.button-box {
  display: -moz-inline-box !important;
}

/*= Toolbar - Overflow Menu ==================================================*/
#overflowMenu-customize-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

/*= Tabbar - All Tab Menu ====================================================*/
#allTabsMenu-undoCloseTab {
  list-style-image: url("chrome://global/skin/icons/undo.svg");
}
#allTabsMenu-searchTabs {
  list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#allTabsMenu-containerTabsButton {
  list-style-image: url("./icons/container-openin-16.svg");
}

#allTabsMenu-hiddenTabsButton {
  list-style-image: url("./icons/password-hide.svg");
}

#allTabsMenu-containerTabsView .subviewbutton:last-child {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

/*= BMB_bookmarksPopup =======================================================*/
#BMB_viewBookmarksSidebar {
}
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll {
  --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
#BMB_bookmarksToolbar {
  --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  #BMB_bookmarksShowAllTop {
    list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
  }
  #BMB_bookmarksShowAllTop > .menu-iconic-left {
    display: -moz-box !important;
  }
}

/*= protections-popup ========================================================*/
#protections-popup-settings-button > .protections-popup-settings-icon,
#protections-popup-show-report-button > .protections-popup-show-report-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline-end: 1em;
}

#protections-popup-settings-button > .protections-popup-settings-icon,
#protections-popup-multiView .panel-subview-footer-button {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

#protections-popup-show-report-button > .protections-popup-show-report-icon {
  /* chrome://browser/skin/controlcenter/dashboard.svg */
  list-style-image: url("icons/dashboard.svg");
}

/*= identity-popup ===========================================================*/
#identity-popup-clear-sitedata-button,
#identity-popup-more-info {
  padding-inline: 5px !important;
}

#identity-popup-securityView-body {
  margin-inline-start: 32px !important; /* Original: 10px */
}

#identity-popup-clear-sitedata-button {
  list-style-image: url("./icons/broom.svg");
}

/*= sidebarMenu-popup ========================================================*/
#identity-popup-more-info {
  list-style-image: url("chrome://global/skin/icons/info.svg");
}

#sidebar-switcher-bookmarks {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

#sidebar-switcher-history {
  list-style-image: url("chrome://browser/skin/history.svg");
}

#sidebar-switcher-tabs {
  list-style-image: url("chrome://browser/skin/tab.svg");
}

#sidebar-reverse-position {
  list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#sidebar-box[positionend="true"] #sidebar-reverse-position {
  /* Can't apply this. shadow dom */
  list-style-image: url("chrome://browser/skin/sidebars.svg");
}

#sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] {
  list-style-image: url("chrome://global/skin/icons/close.svg");
}

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

/* Icon */
:not(menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
:not(menu, #ContentSelectDropdown)
  > menupopup
  > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#main-menubar > menu,
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
#blockedPopupDontShowMessage,
menuitem.privatetab-icon /* Waterfox */ {
  /* 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);
}
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
#blockedPopupDontShowMessage,
menuitem.privatetab-icon /* Waterfox */ {
  background-position: left var(--context-menu-background-padding) center !important;
  padding-inline-start: var(--context-menu-background-padding) !important;
}

/* Menubar */
#main-menubar > menu {
  background-position: left var(--context-menu-background-padding-default) center !important;
  padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
  padding-inline-end: 3px;
}
#main-menubar > menu:first-child {
  background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
  padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
#main-menubar > menu > menupopup {
  --menuitem-image: none; /* Prevent Image Inheritance */
}

/* 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) {
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  #blockedPopupDontShowMessage,
  menuitem.privatetab-icon /* Waterfox */ {
    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));
  }

  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  #blockedPopupDontShowMessage,
  menuitem.privatetab-icon /* Waterfox */ {
    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;
  }

  #main-menubar > menu > .menubar-text {
    padding-inline-start: 3px;
  }
}

/* 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 */
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  #blockedPopupDontShowMessage {
    padding-inline-end: var(--context-menu-background-padding) !important;
  }

  /* text position */
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
    padding-inline-start: var(--context-menu-mac-padding) !important;
  }

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

/*= Bookmark Menu - Layout ===================================================*/
/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
   * #BMB_bookmarksPopup: looks like arrow panel
   */

/* Empty Menu */
menupopup menupopup[emptyplacesresult] .menu-text,
#PersonalToolbar menupopup[emptyplacesresult] .menu-text {
  margin-inline-start: 0 !important;
}

/* Bookmark Popup - As Arrow Panel */
#BMB_bookmarksPopup,
#PersonalToolbar {
  --context-menu-background-padding: var(--arrowpanel-menuitem-padding);
}

/* Windows 7, 8 */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
       (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  /* Global Menu */
  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
    padding-inline-start: 0 !important;
  }

  /* Bookmark Popup - None icon menu */
  #BMB_bookmarksPopup,
  #PersonalToolbar {
    --arrowpanel-menuicon-padding: 9px;
  }
  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
    margin-inline: var(--arrowpanel-menuitem-padding) !important;
    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
  }
  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
    padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
  }
  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
    padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
  }
}

/* Windows */
@media (-moz-os-version: windows-win10), /* Legacy - v99 */
       (-moz-platform: windows-win10) {
  /* Bookmark Popup - None icon menu */
  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
    margin-inline: var(--arrowpanel-menuitem-padding) !important;
    padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
  }
}

/* Linux */
@media (-moz-gtk-csd-available) {
  /* Global Menu */
  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
    padding-inline-start: var(--context-menu-background-padding) !important;
  }

  /* Bookmark Popup - Iconic menu */
  #BMB_bookmarksPopup .menu-iconic-text,
  #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text {
    padding-inline-start: 1px !important;
  }
  /* Bookmark Popup - None icon menu */
  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
    padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
  }
}

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  /* Bookmark Popup - As Arrow Panel */
  #PersonalToolbar menupopup menuitem,
  #PersonalToolbar menupopup menu {
    padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
  }

  /* Bookmark Popup - None icon menu */
  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
    padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important;
  }
}

/** Context Menu - Icons ******************************************************/
/*= tabContextMenu ===========================================================*/
#context_openANewTab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}

#context_reloadTab,
#context_reloadSelectedTabs {
  --menuitem-image: url("./icons/reload.svg");
}
#context_toggleMuteTab,
#context_toggleMuteSelectedTabs {
  --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
#context_toggleMuteTab[muted],
#context_toggleMuteSelectedTabs[muted] {
  --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
#context_pinTab,
#context_pinSelectedTabs {
  --menuitem-image: url("./icons/pin-tab.svg");
}
#context_unpinTab,
#context_unpinSelectedTabs {
  --menuitem-image: url("./icons/unpin-tab.svg");
}
#context_duplicateTab,
#context_duplicateTabs {
  --menuitem-image: url("./icons/notebook-subsection.svg");
}

#context_bookmarkTab,
#context_bookmarkSelectedTabs {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context_moveTabOptions {
  --menuitem-image: url("./icons/arrow-swap.svg");
}
#context_sendTabToDevice {
  --menuitem-image: url("./icons/send-to-device.svg");
}

#context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */
  #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item {
  /* At windows */
  --menuitem-image: url("./icons/share.svg");
}
#context_reopenInContainer {
  --menuitem-image: url("./icons/container-openin-16.svg");
}
#context_selectAllTabs {
  --menuitem-image: url("./icons/tab-multiple.svg");
}

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

/*= new-tab-button-popup =====================================================*/
#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
.new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}

/*= toolbar-context-menu =====================================================*/
.customize-context-manageExtension {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
.customize-context-removeExtension {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.customize-context-reportExtension {
  --menuitem-image: url("./icons/send.svg");
}

.customize-context-moveToPanel {
  --menuitem-image: url("chrome://browser/skin/pin-12.svg");
}
.toolbar-context-autohide-downloads-button {
  --menuitem-image: url("./icons/password-hide.svg");
}
.customize-context-removeFromToolbar {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#toolbar-context-openANewTab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}

#toolbar-context-reloadSelectedTab,
#toolbar-context-reloadSelectedTabs {
  --menuitem-image: url("./icons/reload.svg");
}
#toolbar-context-bookmarkSelectedTab,
#toolbar-context-bookmarkSelectedTabs {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#toolbar-context-selectAllTabs {
  --menuitem-image: url("./icons/tab-multiple.svg");
}
#toolbar-context-undoCloseTab {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}

#toggle_toolbar-menubar {
  /* checkbox */
  /* --menuitem-image: url("./icons/calendar-agenda.svg"); */
}
#toggle_PersonalToolbar {
  /* Also placeContext */
  --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}

menuitem.viewCustomizeToolbar {
  --menuitem-image: url("chrome://browser/skin/customize.svg");
}

/*= blockedPopupOptions ======================================================*/
#blockedPopupAllowSite {
  --menuitem-image: url("chrome://global/skin/icons/check.svg");
}
#blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] {
  --menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#blockedPopupDontShowMessage {
  /* checkbox */
  --menuitem-image: url("chrome://global/skin/icons/blocked.svg");
}

/*= autohide-context =========================================================*/
#autohide-context > menuitem[data-l10n-id="full-screen-autohide"] {
  /* checkbox */
}

#autohide-context > menuitem[data-l10n-id="full-screen-exit"] {
  --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
}

/*= contentAreaContextMenu ===================================================*/
#context-viewsource-goToLine {
  --menuitem-image: url("./icons/text-number-format.svg");
}
#context-viewsource-wrapLongLines {
  /* checkbox */
  /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */
}

#context-viewsource-highlightSyntax {
  /* checkbox */
  /* --menuitem-image: url("./icons/code.svg"); */
}

#spell-no-suggestions {
  --menuitem-image: url("./icons/text-proofing-tools.svg");
}
#spell-add-to-dictionary {
  --menuitem-image: url("./icons/book-add.svg");
}
#spell-undo-add-to-dictionary {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}

#context-openlinkincurrent {
  --menuitem-image: url("./icons/link-square.svg");
}
#context-openlinkincontainertab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context-openlinkintab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context-openlinkinusercontext-menu {
  --menuitem-image: url("./icons/container-openin-16.svg");
}
#context-openlink {
  --menuitem-image: url("chrome://browser/skin/window.svg");
}
#context-openlinkprivate {
  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}

#context-bookmarklink {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context-savelink {
  --menuitem-image: url("chrome://browser/skin/save.svg");
}
#context-savelinktopocket {
  --menuitem-image: url("./icons/pocket-outline.svg");
}
#context-copyemail {
  --menuitem-image: url("chrome://browser/skin/mail.svg");
}
#context-copylink {
  --menuitem-image: url("./icons/link.svg");
}
#context-sendlinktodevice {
  --menuitem-image: url("./icons/send-to-device.svg");
}

#context-media-play {
  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
}
#context-media-pause {
  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
}
#context-media-mute {
  --menuitem-image: url("chrome://global/skin/media/audio-muted.svg");
}
#context-media-unmute {
  --menuitem-image: url("chrome://global/skin/media/audio.svg");
}
#context-media-playbackrate {
  --menuitem-image: url("./icons/time-picker.svg");
}
#context-media-loop {
  /* checkbox */
  /* --menuitem-image: url("./icons/arrow-repeat-all.svg"); */
}
#context-leave-dom-fullscreen {
  --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg");
}
#context-video-fullscreen {
  --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg");
}
#context-media-hidecontrols {
  --menuitem-image: url("./icons/eye-hide.svg");
}
#context-media-showcontrols {
  --menuitem-image: url("./icons/eye-show.svg");
}

#context-viewvideo {
  --menuitem-image: url("./icons/video.svg");
}
#context-video-pictureinpicture {
  /* checkbox */
  /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */
}

#context-reloadimage {
  --menuitem-image: url("./icons/image-arrow-counterclockwise.svg");
}
#context-viewimage {
  --menuitem-image: url("./icons/image-add.svg");
}
#context-saveimage {
  --menuitem-image: url("./icons/image.svg");
}
#context-video-saveimage {
  --menuitem-image: url("./icons/video-snapshot.svg");
}
#context-savevideo {
  --menuitem-image: url("./icons/video.svg");
}
#context-saveaudio {
  --menuitem-image: url("chrome://global/skin/media/audio.svg");
}
#context-copyimage-contents {
  --menuitem-image: url("./icons/image-copy.svg");
}
#context-copyimage,
#context-copyvideourl,
#context-copyaudiourl {
  --menuitem-image: url("./icons/link.svg");
}
#context-sendimage,
#context-sendvideo,
#context-sendaudio {
  --menuitem-image: url("chrome://browser/skin/mail.svg");
}
#context-viewimageinfo {
  --menuitem-image: url("chrome://global/skin/icons/info.svg");
}
#context-viewimagedesc {
  --menuitem-image: url("./icons/image-alt-text.svg");
}
#context-setDesktopBackground {
  --menuitem-image: url("./icons/resize-image.svg");
}
#context-ctp-play {
  --menuitem-image: url("chrome://global/skin/icons/plugin.svg");
}
#context-ctp-hide {
  --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg");
}

#context-savepage {
  --menuitem-image: url("chrome://browser/skin/save.svg");
}
#context-pocket {
  --menuitem-image: url("./icons/pocket-outline.svg");
}
#context-sendpagetodevice {
  --menuitem-image: url("./icons/send-to-device.svg");
}
#fill-login {
  --menuitem-image: url("./icons/password.svg");
}
#fill-login-generated-password {
  --menuitem-image: url("chrome://browser/skin/login.svg");
}
#manage-saved-logins {
  --menuitem-image: url("./icons/key-multiple.svg");
}

#context-undo {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}
#context-redo {
}

#context-cut {
  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#context-copy {
  --menuitem-image: url("./icons/edit-copy.svg");
}
#context-paste {
  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#context-delete {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#context-selectall {
  --menuitem-image: url("./icons/select-all-on.svg");
}
#context-print-selection {
  --menuitem-image: url("chrome://global/skin/icons/print.svg");
}

#context-take-screenshot {
  --menuitem-image: url("chrome://browser/skin/screenshot.svg");
}

#context-keywordfield {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context-searchselect,
#context-searchselect-private {
  --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}

#frame {
  --menuitem-image: url("./icons/command-frames.svg");
}

#spell-check-enabled {
  /* checkbox */
}
#spell-add-dictionaries-main {
  --menuitem-image: url("./icons/book-add.svg");
}
#spell-dictionaries {
  --menuitem-image: url("./icons/book.svg");
}

#context-bidi-text-direction-toggle {
  --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg");
}
#context-bidi-page-direction-toggle {
  --menuitem-image: url("./icons/document-landscape-split-hint.svg");
}

#context-viewpartialsource-selection,
#context-viewsource {
  --menuitem-image: url("./icons/document-search.svg");
}
#context-inspect-a11y {
  --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg");
}
#context-inspect {
  --menuitem-image: url("./icons/command-pick.svg");
}

#context-media-eme-learnmore {
  /* iconic */
}

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  #context-back {
    --menuitem-image: url("chrome://browser/skin/back.svg");
  }
  #context-forward {
    --menuitem-image: url("chrome://browser/skin/forward.svg");
  }
  #context-reload {
    --menuitem-image: url("./icons/reload.svg");
  }
  #context-stop {
    --menuitem-image: url("chrome://global/skin/icons/close.svg");
  }

  #context-bookmarkpage {
    --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  }
}

/*= pictureInPictureToggleContextMenu ========================================*/
#pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] {
  --menuitem-image: url("./icons/eye-hide.svg");
}

/*= placeContext =============================================================*/
#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("./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");
}

/*= pageActionContextMenu ====================================================*/
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}

/*= customizationPanelItemContextMenu ========================================*/
#customizationPanelItemContextMenuUnpin {
  --menuitem-image: url("./icons/unpin-tab.svg");
}
.customize-context-removeFromPanel {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}

/*= customizationPaletteItemContextMenu ======================================*/
.customize-context-addToToolbar {
  --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg");
}
.customize-context-addToPanel {
  --menuitem-image: url("chrome://browser/skin/menu.svg");
}

/*= customizationPanelContextMenu ============================================*/
#customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] {
  --menuitem-image: url("chrome://browser/skin/customize.svg");
}

/*= downloads-button-autohide-panel ==========================================*/
#downloads-button-autohide-checkbox {
  /* checkbox */
}

/*= downloadsContextMenu =====================================================*/
.downloadPauseMenuItem {
  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
}
.downloadResumeMenuItem {
  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
}
.downloadUnblockMenuItem {
  --menuitem-image: url("./icons/checkmark-circle.svg");
}
.downloadUseSystemDefaultMenuItem {
  --menuitem-image: url("chrome://browser/skin/open.svg");
}
.downloadAlwaysUseSystemDefaultMenuItem {
  /* checkbox */
}
.downloadShowMenuItem {
  --menuitem-image: url("./icons/folder.svg");
}

#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
  --menuitem-image: url("./icons/link-square.svg");
}
#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
  --menuitem-image: url("./icons/link.svg");
}

.downloadDeleteFileMenuItem {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.downloadRemoveFromHistoryMenuItem {
  --menuitem-image: url("./icons/eraser.svg");
}
#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
  --menuitem-image: url("./icons/broom.svg");
}

/*= SyncedTabsSidebarContext =================================================*/
#syncedTabsOpenSelected {
  --menuitem-image: url("./icons/link-square.svg");
}
#syncedTabsOpenSelectedInTab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#syncedTabsOpenSelectedInWindow {
  --menuitem-image: url("chrome://browser/skin/window.svg");
}
#syncedTabsOpenSelectedInPrivateWindow {
  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}

#syncedTabsBookmarkSelected {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#syncedTabsCopySelected {
  --menuitem-image: url("./icons/link.svg");
}

#syncedTabsOpenAllInTabs {
  --menuitem-image: url("./icons/movetowindow-16.svg");
}
#syncedTabsManageDevices {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
#syncedTabsRefresh {
  --menuitem-image: url("chrome://browser/skin/sync.svg");
}

/*= SyncedTabsSidebarTabsFilterContext =======================================*/
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] {
  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] {
  --menuitem-image: url("./icons/edit-copy.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] {
  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}

#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] {
  --menuitem-image: url("./icons/select-all-on.svg");
}

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

/*= urlbar-input-container ===================================================*/
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] {
}

#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] {
  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] {
  --menuitem-image: url("./icons/edit-copy.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] {
  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#paste-and-go {
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] {
  --menuitem-image: url("./icons/select-all-on.svg");
}

/*= textbox-contextmenu ======================================================*/
/* Browser's Searchbar, Libray's Searchbar, Page Info */
.textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
}

.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] {
  --menuitem-image: url("./icons/edit-copy.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] {
  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] {
  --menuitem-image: url("./icons/select-all-on.svg");
}

/* Only searchbar */
menuitem.searchbar-paste-and-search {
}
menuitem.searchbar-clear-history {
  --menuitem-image: url("chrome://browser/skin/forget.svg");
}

/*= context_sendTabToDevicePopupMenu =========================================*/
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType="phone"] {
  --menuitem-image: url("chrome://browser/skin/device-phone.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType="tablet"] {
  --menuitem-image: url("chrome://browser/skin/device-tablet.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType="desktop"] {
  --menuitem-image: url("chrome://browser/skin/device-desktop.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType="tv"] {
  --menuitem-image: url("chrome://browser/skin/device-tv.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType="vr"] {
  --menuitem-image: url("chrome://browser/skin/device-vr.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target[clientType=""] {
  --menuitem-image: url("./icons/send-to-device.svg");
}

menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  > .sync-menuitem.sendtab-target:not([clientType]) {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}

/** Global Menu ***************************************************************/
/*= main-menubar =============================================================*/
#file-menu {
  --menuitem-image: url("./icons/mail-inbox-all.svg");
}
#edit-menu {
  --menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#view-menu {
  --menuitem-image: url("./icons/content-view.svg");
}
#history-menu {
  --menuitem-image: url("chrome://browser/skin/history.svg");
}
#bookmarksMenu {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#tools-menu {
  --menuitem-image: url("./icons/toolbox.svg");
}
#helpMenu {
  --menuitem-image: url("chrome://global/skin/icons/help.svg");
}

/*= menu_FilePopup ===========================================================*/
#menu_newNavigatorTab {
  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#menu_newUserContext {
}
#menu_newNavigator {
  --menuitem-image: url("chrome://browser/skin/window.svg");
}
#menu_newPrivateWindow {
  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#menu_newFissionWindow {
}
#menu_newNonFissionWindow {
}
#menu_openLocation {
}
#menu_openFile {
  --menuitem-image: url("chrome://browser/skin/open.svg");
}
#menu_close {
}
#menu_closeWindow {
}

#menu_savePage {
  --menuitem-image: url("chrome://browser/skin/save.svg");
}
#menu_sendLink {
  --menuitem-image: url("chrome://browser/skin/mail.svg");
}

#menu_printPreview {
}
#menu_print {
  --menuitem-image: url("chrome://global/skin/icons/print.svg");
}

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

#goOfflineMenuitem {
}
#menu_FileQuitItem {
  --menuitem-image: url("./icons/quit.svg");
}

/* Mange Containers */
#menu_newUserContext menupopup menuitem:last-child {
  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
}

/*= menu_EditPopup ===========================================================*/
#menu_undo {
  --menuitem-image: url("chrome://global/skin/icons/undo.svg");
}
#menu_redo {
}

#menu_cut {
  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#menu_copy {
  --menuitem-image: url("./icons/edit-copy.svg");
}
#menu_paste {
  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#menu_delete {
  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
}

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

#menu_find {
  --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#menu_findAgain {
}

#textfieldDirection-swap {
}

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

/*= menu_viewPopup ===========================================================*/
#viewToolbarsMenu {
  --menuitem-image: url("./icons/toolbar.svg");
}
#viewSidebarMenuMenu {
  --menuitem-image: url("chrome://browser/skin/sidebars.svg");
}

#viewFullZoomMenu {
  --menuitem-image: url("./icons/screenshot.svg");
}
#pageStyleMenu {
  --menuitem-image: url("./icons/document-css.svg");
}
#repair-text-encoding {
  --menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
}

#fullScreenItem {
  --menuitem-image: url("chrome://browser/skin/fullscreen.svg");
}
#menu_readerModeItem {
  --menuitem-image: url("chrome://browser/skin/reader-mode.svg");
}
#menu_showAllTabs {
}

#documentDirection-swap {
  --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg");
}

/* view-menu-popup sub menu */
#menu_customizeToolbars {
  --menuitem-image: url("chrome://browser/skin/customize.svg");
}

/* viewFullZoomMenu sub menu */
#menu_zoomEnlarge {
  --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg");
}
#menu_zoomReduce {
  --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg");
}
#menu_zoomReset {
  --menuitem-image: url("./icons/resize.svg");
}

/*= goPopup ==================================================================*/
#menu_showAllHistory {
  --menuitem-image: url("chrome://browser/skin/history.svg");
}
#sanitizeItem {
  --menuitem-image: url("chrome://browser/skin/forget.svg");
}

#sync-tabs-menuitem {
  --menuitem-image: url("chrome://browser/skin/sync.svg");
}
#historyRestoreLastSession {
  --menuitem-image: url("./icons/restore-session.svg");
}
#hiddenTabsMenu {
}
#historyUndoMenu {
  --menuitem-image: url("chrome://browser/skin/tab.svg");
}
#historyUndoWindowMenu {
  --menuitem-image: url("chrome://browser/skin/window.svg");
}

/* sub menu */
#historyUndoPopup .restoreallitem {
  --menuitem-image: url("./icons/movetowindow-16.svg");
}
#historyUndoWindowPopup .restoreallitem {
  --menuitem-image: url("./icons/restore-session.svg");
}

/*= bookmarksMenuPopup =======================================================*/
#bookmarksShowAll {
  --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}

#menu_bookmarkThisPage,
#menu_bookmarkAllTabs {
  --menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
#menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] {
  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
}

#bookmarksToolbarFolderMenu {
}
#menu_unsortedBookmarks {
}
#menu_mobileBookmarks {
}

/*= menu_ToolsPopup ==========================================================*/
#menu_openDownloads {
  --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#menu_openAddons {
  --menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
#sync-setup {
  --menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg");
}
#sync-enable {
}
#sync-unverifieditem {
}
#sync-syncnowitem {
}
#sync-reauthitem {
}

#webDeveloperMenu, /* Legacy */
  #browserToolsMenu {
  --menuitem-image: url("./icons/developer.svg");
}
#menu_pageInfo {
  --menuitem-image: url("./icons/document-endnote.svg");
}

/* menuWebDeveloperPopup sub menu */
#enableDeveloperTools {
}
#menu_devToolbox {
}
#menu_taskManager {
  --menuitem-image: url("./icons/performance.svg");
}
#menu_devtools_remotedebugging {
  --menuitem-image: url("./icons/bug.svg");
}
#menu_browserToolbox {
  --menuitem-image: url("./icons/window-dev-tools.svg");
}
#menu_browserContentToolbox {
  --menuitem-image: url("./icons/command-frames.svg");
}
#menu_browserConsole {
  --menuitem-image: url("chrome://devtools/skin/images/command-console.svg");
}
#menu_responsiveUI {
}
#menu_eyedropper {
}
#menu_pageSource {
  --menuitem-image: url("./icons/document-search.svg");
}
#extensionsForDevelopers {
  --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}

/*= menu_HelpPopup ===========================================================*/
#menu_openHelp {
  --menuitem-image: url("chrome://global/skin/icons/help.svg");
}
#feedbackPage {
  --menuitem-image: url("./icons/send.svg");
}
#helpSafeMode {
  --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}
#troubleShooting {
  --menuitem-image: url("chrome://global/skin/icons/more.svg");
}
#help_reportSiteIssue {
  --menuitem-image: url("chrome://global/skin/icons/lightbulb.svg");
}
#menu_HelpPopup_reportPhishingtoolmenu {
  --menuitem-image: url("chrome://global/skin/icons/warning.svg");
}
#menu_HelpPopup_reportPhishingErrortoolmenu {
}

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

#helpPolicySupport {
}

/** Libray Menu ***************************************************************/
/*= 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("chrome://global/skin/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");
}

/*= Waterfox =================================================================*/
#appMenu-restart-button {
  list-style-image: url("./icons/refresh-cw.svg") !important;
}
#menu_FileRestartItem {
  --menuitem-image: url("./icons/refresh-cw.svg");
}

menuitem.privatetab-icon {
  --menuitem-image: url("./icons/priavate-favicon.svg");
}