ESR Dark Mode – userChrome.css

/* -------------------------------------------------------------- */
/*   v4.1.3  ||  Firefox ESR || v78.3.1esr  || HighValueDayGame   */
/* -------------------------------------------------------------- */

/* -------------------------------------------------------------- */
/* Changes:                                                       */ /* ==================================== v4.1.3 */
/* - layout improvements in fairly hidden places                  */
/* -------------------------------------------------------------- */
/* For questions:   https://highvaluedaygame.com/contact/         */
/* -------------------------------------------------------------- */

@-moz-document url(chrome://browser/content/browser.xul)
#nav-bar {-moz-box-ordinal-group: 1 !important;}
#PersonalToolbar {-moz-box-ordinal-group: 2 !important;}
#titlebar {-moz-box-ordinal-group: 3 !important;}

/* ============================================================== */
/* >>>>>>>>>>>>>    OPTIONAL USER CUSTOMIZATION      <<<<<<<<<<<< */
/* ============================================================== */

/* >>>> --------------------------------------------------------- */
/* >>>>  STEP 1: centre URL BAR after adding buttons              */
/* >>>> --------------------------------------------------------- */
/* If you placed buttons next to the Menu on the right-hand side  */
/* of the URL bar (e.g add-on buttons, overflow menu, etc) and    */
/* you want to keep the URL BAR aligned with the bookmarks        */
/* toolbar, remove the 0 below and add 29px for each button you   */
/* placed between the URL bar and the Menu (assuming no buttons   */
/* were on the left-hand side of the URL bar - otherwise 29px for */
/* each more button you placed on the right-hand side of the URL  */
/* BAR compared to the left-hand side                             */

#urlbar-container {
-moz-box-pack: center !important;
padding-right: 75px !important;
padding-left: 0px !important;   /* <<=== Add 29px per each button between URL bar and Menu */
}

/* >>>> --------------------------------------------------------- */
/* >>>>  STEP 2: move RELOAD BUTTON somewhere else in the nav bar */
/* >>>> --------------------------------------------------------- */

#stop-reload-button .toolbarbutton-icon{
border-radius: 4px !important;
padding: -2px !important;
}
#stop-reload-button{
transform: translateX(20px);  /* <<=== Assign position of the reload button along the nav bar */
border-radius:0px !important;
margin-right: 0px !important;
}

/* >>>> --------------------------------------------------------- */
/* >>>>  STEP 3: change min width/height of the Firefox window    */
/* >>>> --------------------------------------------------------- */

#main-window {
min-width: 900px !important;  /* <<=== Assign min width of window (!! may affect fingerprinting resistance) */
*min-height: 900px !important;  /* <<=== Assign min height of window (!! may affect fingerprinting resistance) */
}

/* >>>> --------------------------------------------------------- */
/* >>>>  STEP 4: re-assign original colours to add-on buttons     */
/* >>>> --------------------------------------------------------- */

#nav-bar .toolbarbutton-1:not(:-moz-any([type="menu-button"], 
#nav-bar-overflow-button)) {
filter: grayscale(100%) !important; /* <<=== comment to display original colour of the buttons in the NAV BAR */
}

.widget-overflow-list .toolbarbutton-icon {
filter: grayscale(100%) !important; /* <<=== comment to display original colour of the buttons in the OVERFLOW MENU */
}

.webextension-browser-action {
 filter: grayscale(100%) !important; /* <<=== comment to display original colour of the notification pop-ups in the OVERFLOW MENU */
}

/* ============================================================== */
/* >>>>>>>>>>>    END OF OPTIONAL CUSTOMIZATION      <<<<<<<<<<<< */
/* ============================================================== */

/* ------------------------------------------------------------ */
/* Background colours structure                                 */
/* ------------------------------------------------------------ */

#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#PersonalToolbar), 
.browserContainer > findbar, #browser-bottombox {
background-color: rgb(60,60,60) !important;                    /* ==================================== DARK MODE */
}

#main-window,
  browser[type="content-primary"],
  browser[type="content"],
  tabbrowser#content,
  #content,
  browser[type="content"] > html {
    background: rgb(32,32,32) !important;
  }
}  

/* ------------------------------------------------------------ */
/* NAV bar                                                      */
/* ------------------------------------------------------------ */

/* For the height see "White boxes around all buttons" below */

#nav-bar-customization-target {
-moz-box-pack: center !important;
}

#nav-bar {
-moz-box-ordinal-group: 1 !important;
padding-left: 75px !important;                                  /* leave space for the RED AMBER GREEN buttons */
}

#nav-bar-customization-target {
margin: 4.5px 0px !important;                                   /* vertical position of everything except hamburger menu */
}

#PanelUI-menu-button {
margin: 4.5px 0px !important;                                   /* vertical position of hamburger menu */
margin-left: -3px !important;
}

#nav-bar {
min-height: 37px !important;                                    /* height of the section */
max-height: 37px !important;
}

#nav-bar .toolbarbutton-1:not(:-moz-any([type="menu-button"], 
#nav-bar-overflow-button)) {
max-height: 29px !important;                                    /* height of the buttons */
}

#nav-bar-overflow-button {
margin: 4.5px 0px !important;
}

/* ------------------------------------------------------------ */
/* URL bar                                                      */
/* ------------------------------------------------------------ */

#urlbar {
margin-bottom: -0.5px !important;
margin-top: -0.5px !important;
}

#urlbar {                                                      /* status = DEFAULT */
box-shadow: 0 0 3px transparent !important;
border: 0.75px solid rgb(48,48,48) !important;                 /* ==================================== DARK MODE */
background: rgb(144,144,144) !important;                       /* ==================================== DARK MODE */
min-width: 500px !important;                                   /* side position */
max-width: 500px !important;                                   /* side position */
border-radius: 5px !important;                     
}

#urlbar {                                                      /* style of text within */
font-size: 12px !important;
color: rgb(0,0,0) !important;
}

#urlbar[focused] {                                             /* status = ACTIVE */
box-shadow: 0 0 3px transparent !important;
border: 2.5px solid rgb(32,32,32) !important;                  /* ==================================== DARK MODE */
border-radius: 6px !important;                     
}

#identity-box {
transform: scale(0.8, 0.8) !important;                         /* size of lock symbol on the left */
filter: grayscale(100%) !important;
margin-inline-start: -5px;
}

#identity-box:hover:not(.no-hover):not([open="true"]),
#tracking-protection-icon-container:hover:not([open="true"]) {
background-color: transparent !important;
color: rgb(0,0,0) !important;                                  /* ==================================== DARK MODE */
transform: scale(.8, .8) !important;
}

#identity-icon {
margin-inline-start: 0px !important;
}

#tracking-protection-icon-container {                          /* ==================================== DARK MODE */
background-color: rgb(144,144,144) !important;
*color: rgb(0,0,0) !important;
padding-inline: 4px !important;
border-inline-end: 1px solid rgb(80,80,80) !important;
border-image: none !important;
transform: scale(.9, .9) !important;
}

#tracking-protection-icon-container:hover:not([open="true"]) { /* ==================================== DARK MODE */
background-color: rgb(144,144,144) !important;
color: rgb(0,0,0) !important;
transform: scale(.9, .9) !important;
}

#protections-popup[mainviewshowing][side="top"] {
filter: grayscale(100%) !important;
}

#protections-popup-mainView-panel-header-section {             /* ==================================== DARK MODE */
background: rgb(52,52,52) !important;
color: rgb(184,184,184) !important;                            /* text colour */
}

#protections-popup-no-trackers-found-description {
color: unset !important;                                       /* text "No trackers found" */
}

#protections-popup-footer-protection-type-label {
color: unset !important;                                       /* text "Strict" */
}

#protections-popup-message {                                   /* ==================================== DARK MODE */
color: rgb(184,184,184) !important;                            /* text "Browse without being followed" */
}

#protections-popup-message .text-link {
color: rgb(184,184,184) !important;                            /* text "Browse without being followed" */
}

#urlbar-input{                                                 /* center URL bar text - OFF */
*text-align: center !important;
}

:not(.urlbar-icon-wrapper) >                                   /* history dropmaker */
.urlbar-icon:not([disabled]):hover, 
.urlbar-icon-wrapper:not([disabled]):hover {
background-color: rgb(154,154,154) !important;                 /* ==================================== DARK MODE */
color: rgb(0,0,0) !important;
}

.identity-popup-connection-secure {
color: rgb(120,220,190) !important;                            /* text "Connection secure" */
}                                                              /* ==================================== DARK MODE */

.text-link {
color: rgb(120,220,190) !important;                            /* text "Learn more" */
}                                                              /* ==================================== DARK MODE */

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

/* #identity-popup[customroot="true"] [when-customroot="true"],
#identity-popup[connection="not-secure"] [when-connection~="not-secure"],
#identity-popup[connection="secure-cert-user-overridden"] [when-connection~="secure-cert-user-overridden"],
#identity-popup[connection="secure-ev"] [when-connection~="secure-ev"],
#identity-popup[connection="secure"] [when-connection~="secure"],
#identity-popup[connection="chrome"] [when-connection~="chrome"],
#identity-popup[connection="file"] [when-connection~="file"],
#identity-popup[connection="extension"] [when-connection~="extension"], */
#identity-popup[connection="cert-error-page"] [when-connection~="cert-error-page"],
#identity-popup[ciphers="weak"] [when-ciphers~="weak"],
#identity-popup[mixedcontent~="active-loaded"] [when-mixedcontent="active-loaded"],
#identity-popup[mixedcontent~="passive-loaded"]:not([mixedcontent~="active-loaded"]) [when-mixedcontent="passive-loaded"],
#identity-popup[mixedcontent~="active-blocked"]:not([mixedcontent~="passive-loaded"]) [when-mixedcontent="active-blocked"],
#identity-popup[mixedcontent~="active-blocked"][mixedcontent~="passive-loaded"] [when-mixedcontent~="active-blocked"][when-mixedcontent~="passive-loaded"],
#identity-popup-securityView-body[mixedcontent~="active-blocked"] > button[when-mixedcontent="active-blocked"] {
color: rgb(184,184,184) !important;                            /* ==================================== v4.1.3 */
background-color: rgb(52,52,52) !important;                    /* ==================================== v4.1.3 */
}

#identity-popup[ciphers="weak"] .identity-popup-security-connection,
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
filter: grayscale(100%) !important;                            /* ==================================== v4.1.3 */
}

.identity-popup-warning-yellow {
border: none !important;                                       /* ==================================== v4.1.3 */
}

/* ------------------------------------------------------------ */
/* URL bar search results                                       */
/* ------------------------------------------------------------ */

#urlbar-results {                                              /* ==================================== ESR change */
-moz-margin-start: 0px !important;                             /* ==================================== ESR change */
margin-top: 0px !important;                                    /* ==================================== ESR change */
left: unset !important;                                        /* Override 0 */
right: unset !important;                                       /* Override 0 */
*min-width: 500px !important;
*max-width: 500px !important;
*background: rgb(60,60,60) !important;                         /* ==================================== DARK MODE */
box-shadow: none !important;
border: 1px solid rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
border-radius: 4px !important;                                 /* border radius */
}
                                                               /* ==================================== ESR change */
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-url,
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-actiontitle,
.urlbarView-row:not([type="search"]) .urlbarView-secondary,
.urlbarView-row:not([type="search"]) .urlbarView-url {
font-size: 12px !important;
}

#urlbar-input::-moz-selection {                                /* colour autocomplete text URL bar */
background-color: rgb(80,80,80) !important;                    /* ==================================== DARK MODE */
border: 0px !important;
opacity: 1 !important;
color: rgb(192,192,192) !important;                            /* ==================================== DARK MODE */
}

.urlbarView-title {                                            /* ==================================== ESR change */
font-size: 12px !important;
}

.urlbarView-action {
color: rgb(192,192,192) !important;                            /* ==================================== DARK MODE */
}

.urlbarView-favicon {
transform: scale(.9, .9) !important;                           /* favicons in search results */
filter: grayscale(25%) !important;
}

.urlbarView-row {
padding: 6px 0px !important;                                   /* vertical space between lines */
}

.urlbarView-title {                                            /* drop-down results, title colour */
color: rgb(192,192,192) !important;                            /* ==================================== DARK MODE */
font-weight: 450 !important;
}

.urlbarView-url {                                              /* drop-down results, URL color */
color: rgb(192,192,192) !important;                            /* ==================================== DARK MODE */
}

.urlbarView-row[selected], .urlbarView-row:hover {             /* drop-down results, selected/hover colors */
background-color: rgb(72,72,72) !important;                    /* ==================================== DARK MODE */
}

.urlbarView-row[selected] .urlbarView-title,
.urlbarView-row:hover .urlbarView-title,
.urlbarView-row[selected] .urlbarView-secondary,
.urlbarView-row:hover .urlbarView-secondary,
.urlbarView-row[selected] .urlbarView-title-separator,
.urlbarView-row:hover .urlbarView-title-separator {            /* drop-down results, selected URL color */
color: rgb(180,180,180) !important;                            /* ==================================== DARK MODE */
}

.searchbar-engine-one-off-item {
filter: grayscale(25%) !important;
}

.search-panel-one-offs-header-label {                          /* text "This time, search with:" */
color: rgb(212,212,212) !important;
font-weight: 500 !important;
}

.searchbar-engine-one-off-item[selected],
.searchbar-engine-one-off-item:hover {                         /* ==================================== v4.1.3 */      
background-color: rgb(72,72,72) !important;                    /* ==================================== DARK MODE */
color: rgb(180,180,180) !important;                            /* ==================================== DARK MODE */
}

.searchbar-engine-one-off-item > .button-box {
color: rgb(192,192,192) !important;                            /* ==================================== DARK MODE */
}

/* ------------------------------------------------------------ */
/* Fuck off megabar                                             */
/* ------------------------------------------------------------ */

#urlbar-container,
#urlbar{
  position: static !important;
  display: -moz-box !important;
}

#urlbar[focused] {
box-shadow: inset 0 0 0 1px var(--lwt-toolbar-field-border-focus, highlight); 
}

.urlbarView{
position: absolute !important;
border: 1px solid rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
border-radius: 5px !important;
background-color: rgb(52,52,52) !important;                    /* ==================================== DARK MODE */
margin-block-start: -7px !important;
margin-inline: -2px !important;
max-width: 500px !important;                                   /* side position */
top: var(--urlbar-toolbar-height);
z-index: 4;
}

.urlbarView-type-icon {
-moz-context-properties: fill !important;
*opacity: 0.6 !important;
}

#urlbar-results {
border: 0px solid rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
}

.urlbarView {                                                  /* remove padding between results */
*margin-inline: 2px !important;
*width: 100% !important;
}
.urlbarView-row {
*padding-block: 0 !important;
}

.urlbarView-type-icon {                                        /* move favourite icon to the left */
min-width: 16px !important;
height: 16px !important;
margin-bottom: 0 !important;
margin-inline-start: 0 !important;
filter: grayscale(100%) !important;
}

.urlbarView-favicon {                                          /* move favicon */
margin-inline-start: 20px !important;
}

.urlbarView-row-inner{
padding-block: 0px !important;
}

.urlbarView-title {
*display: none;
}

.urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
display: none !important;                                      /* make second line with url disappear */
}

.urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
padding-left: 20px !important;                                 /* position second line from the left */
}

.urlbarView-row-inner{
padding-inline-start: 7px !important;
}

.urlbarView-body-inner {
border-top: transparent !important;
}

#urlbar .search-one-offs:not([hidden]) {
border-top: 1px solid rgb(32,32,32) !important;                /* ==================================== DARK MODE */
padding-block: 3px !important;
}

#urlbar > #urlbar-background{
display: none !important;
}

#urlbar > #urlbar-input-container{
padding: 0px !important; width: auto !important; height: auto !important;
}

#urlbar > #urlbar-input-container::before{
content: ""; display: -moz-box; height: 24px;
}

.urlbarView-row:not([type="tip"])[selected] > .urlbarView-row-inner {
background: unset !important;                                  /* no blue highlight */
}
   
.urlbarView-row:hover{
background-color: rgb(72,72,72) !important;                    /* ==================================== DARK MODE */
}
.urlbarView-row-inner:hover{
background-color: rgb(72,72,72) !important;                    /* ==================================== DARK MODE */
}

:root{                                                         /* ==================================== DARK MODE */
--arrowpanel-dimmed: rgb(72,72,72) !important;                 /* .urlbarView-row-inner "active" but no "hover" */ 
}

#urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button {
display: block !important;                                     /* display go button when typing */
}

#pageActionButton {                                            /* page action */
*display: block !important;
}

/* ------------------------------------------------------------ */
/* Bookmarks bar                                                */
/* ------------------------------------------------------------ */

#PlacesToolbar {
-moz-box-ordinal-group: 2 !important;                          /* align with URL bar */
padding-left: 52.5px !important;
padding-right: 0px !important;
}

#PersonalToolbar {
height: 26px !important;
background: rgb(60,60,60) !important;                          /* ==================================== DARK MODE */
border-top: 1px solid rgb(96,96,96) !important;                /* border */
border-bottom: 1px solid rgb(96,96,96) !important;             /* border */
magin-left: -2px !important;
magin-right: -2px !important;
padding: -2.5px 0px -2.5px 0px !important;
}

toolbarbutton.bookmark-item:not(.subviewbutton) {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.bookmark-item>.toolbarbutton-icon {
display: none !important;                                      /* hide icons */
}

#PlacesToolbarItems {                                          /* status = DEFAULT */
-moz-box-pack: center;
background: rgb(60,60,60) !important;                          /* ==================================== DARK MODE */
color: rgb(168,168,168) !important;                            /* ==================================== DARK MODE */
font-size: 11px !important;
}

toolbarbutton.bookmark-item {
background-color: rgb(60,60,60) !important;                    /* ==================================== DARK MODE */
border-radius: 4px !important;
color: rgb(168,168,168) !important;
border: 0.5px solid rgb(60,60,60) !important;                  /* ==================================== DARK MODE */
}

toolbarbutton.bookmark-item:hover {                            /* status = HOVER */
background-color: rgb(128,128,128) !important;                 /* ==================================== DARK MODE */
border-radius: 4px !important;                                 /* radius */
color: rgb(0,0,0) !important;                                  /* ==================================== DARK MODE */
border: 0.5px solid rgb(32,32,32) !important;                  /* ==================================== DARK MODE */
}

#personal-bookmarks toolbarbutton {                            /* space items within the bar*/
margin-left: 1.5px !important;
margin-right: 1.5px !important;
}

#PlacesToolbarItems > .bookmark-item[container]:after {        /* space right of the text */
content:'>';
font-weight: 550;
margin-left: 6px;
margin-right: -2px;
display: block;
transform: rotate(90deg) scale(0.7, 1.3);
color: rgb(168,168,168);                                        /* ==================================== DARK MODE */
}

/* ------------------------------------------------------------ */
/* Dragging bookmarks                                           */
/* ------------------------------------------------------------ */

toolbarbutton.bookmark-item[dragover][open] {                  /* ==================================== DARK MODE */
background-color: rgb(136,136,136) !important;                 /* Toolbar, bg colour of bookmark folders */
border: 0.5px solid rgb(32,32,32) !important;
color: rgb(0,0,0) !important;                                  /* Toolbar, text colour of bookmark folders */
}

menupopup menu {
background: 0 !important;                                      /* Pop-up menu, dragging folder into folder */
}

#PlacesToolbarDropIndicator {                                  /* Bookmarks bar, vertical line between items */
filter: grayscale(100%) !important;
}

image[part="drop-indicator"] {
filter: grayscale(100%) !important;                            /* Pop-up menu, horizontal line */
}

/* ------------------------------------------------------------ */
/* Tabs - Height                                                */
/* ------------------------------------------------------------ */

:root {
--tab-min-height: 25px !important;
}

#TabsToolbar {                                                 /* height */
height: 25px !important;
}

#titlebar {
height: 25px !important;
}

#new-tab-button {
max-height: 25px !important;
}

#tabs-newtab-button {
max-height: 25px !important;
}

#TabsToolbar, .tabbrowser-tab {
max-height: 25px !important;
}

#alltabs-button, #scrollbutton-up, #scrollbutton-down {
display: none !important;
}

.scrollbutton-up, .scrollbutton-down {
display: none !important;
}

.scrollbutton-up, .scrollbutton-down {
max-height: 25px !important;
}

.scrollbutton-up[orient="horizontal"] ~ spacer {
margin-bottom: 10px !important;
}

/* ------------------------------------------------------------ */
/* Tabs - Other                                                 */
/* ------------------------------------------------------------ */

.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
display: none !important;                                      /* hide lateral blank spaces top left and top right of all tabs*/
}

#TabsToolbar-customization-target {
background-color: transparent !important;                      /* default background colour */
}

.tabbrowser-tab:not([pinned="true"]) {                         /* min width of tabs */
min-width:160px !important;
}

.tab-background[selected="true"] {                             /* ACTIVE tabs, background colour */
background-attachment: none !important;
background-color: rgb(60,60,60) !important;
background-image: none !important;                             /* ==================================== DARK MODE */
}

#TabsToolbar .tabbrowser-tab[selected] {                       /* ACTIVE tabs, text colour */
color: rgb(168,168,168) !important;                            /* ==================================== DARK MODE */
}

#tabbrowser-tabs {
--tab-line-color: transparent !important;                      /* ACTIVE tab, make top border transparent*/
}

.tab-background[selected="true"] {
border-radius: 0px 0px 0px 0px !important;                     /* ACTIVE TAB, radius TOP TOP BOTTOM BOTTOM */
}

.tabbrowser-tab:not([selected]) .tab-background {
background-color: rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
}

#TabsToolbar {                                                 /* INACTIVE tabs, text colour */
color: rgb(220,220,220) !important;                            /* ==================================== DARK MODE */  
}

.tabbrowser-tab:not([selected])::after {                       /* INACTIVE tabs, lateral border */
color: rgb(60,60,60) !important;                               /* ==================================== DARK MODE */
}

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"]):not([multiselected]) {
background-color: rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
margin-top: -5px !important;                                   /* INACTIVE tabs, hover, do not show upper margin */
}

.tab-throbber {
display: none !important; 
}

.tabbrowser-tab[fadein] {
max-width: 100vw !important;                                   /* TABS, max width */
}

.tab-label {
-moz-box-flex: 1 !important;
text-align: center !important;                                 /* TABS, show text in the middle of them */
}

.tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]) {
mask-image: none !important;                                   /* TABS, remove fade-out effect right end side */
}

.tab-loading-burst {                                           /* TABS, remove swipe animation after page has loaded */
display: none !important;
}

/* ------------------------------------------------------------ */
/* Colour behind / below tabs                                   */
/* ------------------------------------------------------------ */

#TabsToolbar {
background-color: rgb(60,60,60) !important;                    /* ==================================== DARK MODE */
border: none !important;                                       /* ==================================== DARK MODE */
-moz-appearance: none !important;
}

#titlebar {
margin-bottom: -1px !important;
}

/* ------------------------------------------------------------ */
/* Tab icons                                                    */
/* ------------------------------------------------------------ */

.tab-icon-image {
display: none !important;                                      /* TABS, hide icons */
}

.tabbrowser-tab .tab-close-button {                            /* TAB CLOSE, move to left & show backbround only on hover */
display:-moz-box! important;
-moz-box-ordinal-group:0!important;
* margin-right:3px!important;
-moz-margin-start:-8.5px !important;
-moz-margin-end:0px !important;
transform: scale(0.85, 0.85) !important;                       /* size */
}

.tabbrowser-tab:not(:hover) .tab-close-button{                 /* TAB CLOSE, X, hide when not hover */
opacity: 0;
}

.tabbrowser-tab .tab-close-button{                             /* X sign in selected tab */
color: rgb(192,192,192) !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button{             /* X sign in not-selected tab */ 
color: rgb(192,192,192) !important;
}

.tabbrowser-tab .tab-close-button:hover {                      /* X background square in selected tab */
background-color: rgb(24,24,24) !important;
color: rgb(192,192,192) !important;
border-radius: 2px !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button:hover {      /* X background square in not-selected tab */
background-color: rgb(48,48,48) !important;
color: rgb(192,192,192) !important;
border-radius: 2px !important;
}

.tabbrowser-tab .tab-icon-sound {                              /* SOUND ICON, move to the right to perfectly centre TAB text */
display:-moz-box! important;
-moz-box-ordinal-group:1!important;
* margin-left:3px!important;
-moz-margin-start:2px !important;
-moz-margin-end:-6.5px !important;
transform: scale(0.85, 0.85) !important;                       /* size */
}

.tab-icon-sound[soundplaying] {
color: rgb(169,169,169) !important;                            /* ==================================== DARK MODE */
transform: scale(0.85, 0.85) !important;                       /* size */
}

/* ------------------------------------------------------------ */
/* New Tab and Overflow menu                                    */
/* ------------------------------------------------------------ */

#alltabs-button {                                              /* Hide drop down icon */
display: none;
}

.scrollbutton-up[orient="horizontal"] ~ spacer {               /* Hide scroll buttons down icon */
display: none !important;
}

                                                               /* NEW TAB, + icon, dimensions - normal */
#tabs-newtab-button {
transform: scale(0.8, 1.0) !important;
margin-left: -6px !important;
margin-right: -3px !important;
padding: 0px 0px 0px 3px !important;
fill: rgb(144,144,144) !important;                             /* ==================================== DARK MODE */
}

#new-tab-button {                                              /* NEW TAB, + icon, dimensions - many tabs */
transform: scale(0.8, 1) !important;                           /* ==================================== ESR change */
margin-left: -6px !important;
margin-right: -3px !important;
padding: 0px 0px 0px 3px !important;
fill: rgb(144,144,144) !important;                             /* ==================================== DARK MODE */
}
                                                               /* NEW TAB, background of icon - normal */
#tabs-newtab-button .toolbarbutton-icon {
border-radius: 0px !important;
background-color: rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
}
#tabs-newtab-button:hover .toolbarbutton-icon {
border-radius: 0px !important;
background-color: rgb(60,60,60) !important;                    /* ==================================== v4.1.3 */
}
#tabs-newtab-button:active .toolbarbutton-icon {
border-radius: 0px !important;
background-color: rgb(32,32,32) !important;                    /* ==================================== v4.1.3 */
}

#new-tab-button .toolbarbutton-icon {                          /* NEW TAB, background of icon - many tabs */
border-radius: 0px !important;
background-color: rgb(32,32,32) !important;                    /* ==================================== DARK MODE */
}
#new-tab-button:hover .toolbarbutton-icon {
border-radius: 0px !important;
background-color: rgb(60,60,60) !important;                    /* ==================================== v4.1.3 */
}
#new-tab-button:active .toolbarbutton-icon {
border-radius: 0px !important;
background-color: rgb(32,32,32) !important;                    /* ==================================== v4.1.3 */
}

/* ------------------------------------------------------------ */
/* Dropdown menu folders in bookmark bar                        */
/* ------------------------------------------------------------ */

menupopup, popup,
popup > menu > menupopup,
menupopup > menu > menupopup {                                 /* BACKGROUND */
-moz-appearance: none !important;                              /* ==================================== ESR change */
background: rgb(60,60,60) !important;                          /* ==================================== DARK MODE */
border-radius: 5px !important;
padding: 0px 0px 0px 0px !important;                           /* space ABOVE RIGHT BELOW LEFT */
max-width: 400px !important;                                   /* max width of pop-up window */
}

menupopup menuseparator {                                      /* above "open all tabs" */
-moz-appearance: none !important;                              /* ==================================== ESR change */
background: rgb(169,169,169) !important;                       /* ==================================== DARK MODE */
margin: 0px 0px 0px 0px !important;
padding: 0.5px !important;                                     /* height border above "open all tabs" */
}

menupopup menu, menuitem{                                      /* ITEMS, DEFAULT */
-moz-appearance: none !important;                              /* ==================================== ESR change */
color: rgb(176,176,176) !important;                            /* ==================================== DARK MODE */
padding: 0px 20px 0px 15px !important;                         /* space ABOVE RIGHT BELOW LEFT */
height: 21px !important;                                       /* vertical height of each line */
font-size: 12px !important;
}

menupopup menu:hover, menuitem:hover,                          /* FOLDER ITEMS, HOVER */
menu[open="true"],                                             /* INACTIVE selected/open folders */
menuitem[_moz-menuactive="true"] {
-moz-appearance: none !important;                              /* ==================================== ESR change */
background-color: rgb(128,128,128) !important;                 /* ============= DARK MODE */
color: rgb(0,0,0) !important;                                  /* ==================================== DARK MODE */
font-size: 12px !important;
}

.menu-right {                                                  /* TRIANGLE SIGN to open sub-folders */
-moz-appearance: none !important;
padding: 8px !important;
margin-right: -10px !important;
color: black !important;
border: solid rgb(176,176,176);                                /* ==================================== DARK MODE */
border-width: 0 2.5px 2.5px 0;
transform: rotate(-45deg) scale(.4);
}
                                                               /* inactive selected/open folders and website bookmarks */
/* ------------------------------------------------------------ */
/* Folder icons, colour                                         */
/* ------------------------------------------------------------ */

*#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
*:-moz-any(
*#PlacesToolbarItems,
*#PlacesChevronPopup,
*#BMB_bookmarksPopup,
*#bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon,
*/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */
*:-moz-any(
*#bookmarks-view, 
*#editBMPanel_folderTree, 
*#placesList, 
*#placeContent) treechildren::-moz-tree-image(container),
*#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
*#editBMPanel_folderMenuList menupopup menuitem {
*fill: rgb(169,169,169) !important;                            /* ==================================== DARK MODE */
*}

.bookmark-item.menuitem-with-favicon:not([container]) {        /* ==================================== DARK MODE */
*fill: rgb(176,176,176) !important;
filter: grayscale(25%)
}

/* ------------------------------------------------------------ */
/* MacOS window buttons RED AMBER GREEN                         */
/* ------------------------------------------------------------ */

.titlebar-buttonbox-container {
position: fixed !important;
display: block !important;
top: 10px !important;
left 2px !important;
}

/* ------------------------------------------------------------ */
/* Toolbar buttons                                              */
/* ------------------------------------------------------------ */

:root {
--lwt-toolbarbutton-icon-fill: rgb(24,24,24) !important;       /* ==================================== DARK MODE */
}

/* ------------------------------------------------------------ */
/* Remove separator menu button */

#PanelUI-button,
#PanelUI-menu-button {
border:none !important;
padding-left:0px !important;
margin-inline-end:1.4px !important;
}

/* ------------------------------------------------------------ */
/* Shape and size of buttons */

.toolbarbutton-1 {
--toolbarbutton-hover-background: none !important;             /* over-write default HOVER colour*/
transform: scale(0.825, 0.825) !important;                     /* size */
}

*#nav-bar .toolbarbutton-1 {
*fill: rgb(24,24,24) !important;                                /* ==================================== DARK MODE */
*}

/* ------------------------------------------------------------ */
/* White boxes around all buttons */

#nav-bar .toolbarbutton-1:not(:-moz-any([type="menu-button"])){
background: rgb(128,128,128) !important;                       /* ==================================== DARK MODE */
border: 0.75px solid rgb(48,48,48) !important;                 /* ==================================== DARK MODE */
border-radius: 4.5px !important;
padding: unset !important;
}

/* ------------------------------------------------------------ */
/* BACK button */

#nav-bar #back-button {
width: 30px !important;
max-height: 30px !important;
height: 30px !important;
padding: 0px !important;
-moz-image-region: unset !important;
}

*#nav-bar #back-button:hover .toolbarbutton-icon {
* border-radius: 4px !important;
* background-color: rgb(192,192,192) !important;
}

/* ------------------------------------------------------------ */
/* FWD button */

#nav-bar #forward-button {
width: 29px !important;                                        /* width consistent with button height set in NAV BAR */
padding: 0px !important;
-moz-box-align: center !important;
-moz-image-region: unset !important;
}

#nav-bar #forward-button:hover .toolbarbutton-icon {
border-radius: 4px !important;
* background-color: rgb(211,211,211) !important;
}

/* ------------------------------------------------------------ */
/* Remove default of BACK/FWD buttons */

#nav-bar #back-button > .toolbarbutton-icon,
#nav-bar #forward-button > .toolbarbutton-icon
{
background: none !important;
border: none !important;
box-shadow: none !important;
padding: unset !important;
}

#back-button[disabled="true"] > .toolbarbutton-icon {
opacity: 1 !important;
-moz-context-properties: none !important;
fill-opacity: unset !important;
}

#back-button[disabled="true"] {
opacity: 0.4 !important;
-moz-context-properties: none !important;
fill-opacity: unset !important;
}

/* ------------------------------------------------------------ */
/* Assign symbol of BACK button */

#nav-bar #back-button {
list-style-image: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">\ <path d="M12,5 L8.5,9 L12,13" fill="transparent" stroke="rgb(0,0,0)" stroke-width="1.2" stroke-linecap="round"/>\ </svg>') !important;
}

/* ------------------------------------------------------------ */
/* Assign symbol of FWD button */

#nav-bar #forward-button {
list-style-image: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">\ <path d="M7,5 L11,9 L7,13" fill="transparent" stroke="rgb(0,0,0)" stroke-width="1.4" stroke-linecap="round"/>\ </svg>') !important;
}

/* ------------------------------------------------------------ */
/* Position of FWD and BACK buttons */

#forward-button .toolbarbutton-icon {
margin-left: 1px !important;
}

#forward-button {
margin-left: -4px !important;
}

#back-button .toolbarbutton-icon {
margin-left: -5px !important;
}

/* ------------------------------------------------------------ */
/* Dialog windows - General                                     */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */ 

window, page, dialog, wizard {
  -moz-appearance: none !important;
  background-color: rgb(52,52,52) !important;
  color: rgb(184,184,184) !important;                          /* text */
  font: message-box;
  line-height: normal;
}

#infoIcon {
  filter: grayscale(100%) !important;
}

.dialog-button-box button.dialog-button {
  -moz-appearance: none !important; 
  background-color: rgb(52,52,52) !important;
  color: rgb(188,188,188) !important;
  font-weight: 650 !important;
  font-size: 9pt !important;
  padding: 3px !important; 
  border: 0.75px solid rgb(169,169,169) !important;
  border-radius: 2px !important;
} 

.dialog-button-box button.dialog-button:hover {
  -moz-appearance: none !important; 
  background-color: rgb(60,60,60) !important; 
  color: rgb(188,188,188) !important;
  padding: 3px !important; 
  border: 0.75px solid rgb(169,169,169) !important;
} 

.dialog-button-box button.dialog-button:active {
  -moz-appearance: none !important; 
  background-color: rgb(52,52,52) !important; 
  color: rgb(188,188,188) !important;
  padding: 3px !important; 
  border: 0.75px solid rgb(169,169,169) !important;
} 

/* ------------------------------------------------------------ */
/* Dialog windows - Bookmark properties                         */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

dialog#bookmarkproperties {                                    /* background */
  -moz-appearance: none !important;
  background: rgb(52,52,52) !important;
}

dialog#bookmarkproperties textbox {                            /* text boxes */
  -moz-appearance: none !important;
  color: rgb(0,0,0) !important;
  background-color: rgb(144,144,144) !important;
  border: 0.75px solid rgb(32,32,32) !important;
  padding: 3px !important;
}

/* ------------------------------------------------------------ */
/* Window "Customize..."                                        */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

#customization-footer-spacer, #customization-spacer,
#customization-panel-container,#customization-palette-container,
#customization-footer {
  background: rgb(52,52,52) !important;
}

toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="menu-panel"] {
  color: rgb(188,188,188) !important; !important;
}

#customization-header{
  color: rgb(188,188,188) !important; !important;
}

#customization-reset-button, #customization-undo-reset-button,
#customization-done-button {
  color: rgb(188,188,188) !important; !important;
  background-color: rgb(52,52,52) !important; 
  border: 0.75px solid rgb(169,169,169) !important;
}

#customization-done-button:not([disabled]) {                   /* Button "Done" */
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
  color: rgb(188,188,188) !important; !important;
}
#customization-done-button:-moz-any(:hover):not([disabled]) {
  background-color: rgb(60,60,60) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}
#customization-done-button:-moz-any(:hover:active):not([disabled]) {
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}

#customization-reset-button:not([disabled]) {                  /* Button "Restore" */
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
  color: rgb(188,188,188) !important; !important;
}
#customization-reset-button:-moz-any(:hover):not([disabled]) {
  background-color: rgb(60,60,60) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}
#customization-reset-button:-moz-any(:hover:active):not([disabled]) {
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}

#customization-undo-reset-button:not([disabled]) {            /* Button "Restore" */
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
  color: rgb(188,188,188) !important; !important;
}
#customization-undo-reset-button:-moz-any(:hover):not([disabled]) {
  background-color: rgb(60,60,60) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}
#customization-undo-reset-button:-moz-any(:hover:active):not([disabled]) {
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}

.customizationmode-button:not([disabled]) {                    /* All other buttons */
  color: rgb(188,188,188) !important; !important;
  background-color: rgb(52,52,52) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}
.customizationmode-button:-moz-any(:hover):not([disabled]) {
  color: rgb(188,188,188) !important; !important;
  background-color: rgb(60,60,60) !important;
  border: 0.75px solid rgb(169,169,169) !important;
}
.customizationmode-button:-moz-any(:hover:active):not([disabled]) {
  color: rgb(188,188,188) !important; !important;
  background-color: rgb(52,52,52) !important; 
  border: 0.75px solid rgb(169,169,169) !important;
}
.customizationmode-button:-moz-any(:active, :hover):not([disabled]),
.customizationmode-button[open],
.customizationmode-button[checked] {
  color: rgb(188,188,188) !important; !important;
  background-color: rgb(60,60,60) !important; 
  border: 0.75px solid rgb(169,169,169) !important;
}

.customizationmode-checkbox, .customizationmode-button {
  color: rgb(188,188,188) !important; !important;
}

/* ------------------------------------------------------------ */
/* Arrow panels                                                 */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

:root {
--arrowpanel-border-color: none !important;                    /* external border */
--arrowpanel-background: rgb(52,52,52) !important;             /* background colour */
--arrowpanel-color: rgb(184,184,184) !important;               /* text colour */
--panel-disabled-color: rgb(144,144,144) !important;           /* text colour, inactive items */
--panelui-subview-transition-duration: 1ms !important;
--focus-ring-box-shadow: 0 0 0 1.5px rgb(0,0,0) !important;    /* highlight around search fields in Edit Bookmark */
}

panelview .toolbarbutton-1:not(:-moz-any([disabled], [open], :active)):-moz-any(:hover, :focus), toolbarbutton.subviewbutton:not(:-moz-any([disabled], [open], :active)):-moz-any(:hover, :focus), .navigable.subviewbutton:not(:-moz-any([disabled], [open], :active)):-moz-any(:hover, :focus), menu.subviewbutton:not(:-moz-any([disabled], :active))[_moz-menuactive], menuitem.subviewbutton:not(:-moz-any([disabled], :active))[_moz-menuactive], .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled], [open], :active)):-moz-any(:hover, :focus), .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(:-moz-any([disabled], [open], :active)):-moz-any(:hover, :focus) {
  color: rgb(0,0,0) !important;                                /* ==================================== DARK MODE */
  background-color: rgb(128,128,128) !important;               /* HOVER colour of items and buttons in panels */
}

.panel-footer {
  background-color: unset !important;                          /* background colour bottom part in Edit Bookmark */
}

/* ------------------------------------------------------------ */
/* Button - Margins */

.panel-footer > button {
  -moz-appearance: none;
  border-top: none !important;
  margin: 5px !important;
}

/* ------------------------------------------------------------ */ /* =================================== DARK MODE */
/* Button - Default */

.panel-footer > button:not([disabled])[default] {
  background-color: rgb(52,52,52) !important;
  color: rgb(188,188,188) !important;
  border: 0.75px solid rgb(169,169,169) !important;
  border-radius: 2px !important;
  font-weight: 650 !important;
}
.panel-footer > button:not([disabled])[default]:hover {
  background-color: rgb(60,60,60) !important;
  color: rgb(188,188,188) !important;
  font-weight: 650 !important;
}
.panel-footer > button:not([disabled])[default]:hover:active {
  background-color: rgb(52,52,52) !important;
  color: rgb(188,188,188) !important;
  font-weight: 650 !important;
}

/* ------------------------------------------------------------ */ /* =================================== DARK MODE */
/* Button - Other */

.panel-footer > button:not([disabled]) {
  background-color: rgb(52,52,52) !important;
  color: rgb(188,188,188) !important;
  border: 0.75px solid rgb(169,169,169) !important;
  border-radius: 2px !important;
  font-weight: 650 !important;
}
.panel-footer > button:not([disabled]):hover {
  background-color: rgb(60,60,60) !important; 
  color: rgb(188,188,188) !important;
  font-weight: 650 !important;
}
.panel-footer > button:not([disabled]):hover:active {
  background-color: rgb(52,52,52) !important; 
  color: rgb(188,188,188) !important;
  font-weight: 650 !important;
}

/* ------------------------------------------------------------ */
/* Misc */

*#widget-overflow {
*  filter: grayscale(100%) !important;                         /* icon in "Add Search Engine" + add-ons pop-up windows */
*}                                                             /* !! It messes up with add-ons */

/* ------------------------------------------------------------ */
/* Arrow panels - Edit Bookmark                                 */ /* =================================== DARK MODE */
/* ------------------------------------------------------------ */

#editBookmarkPanelInfoArea {                                   /* remove top area with image */
display: none !important;
}

#editBMPanel_namePicker, #editBMPanel_folderMenuList,
#editBMPanel_tagsField, #editBMPanel_keywordField,
#editBMPanel_foldersExpander, #editBMPanel_tagselectorExpander,
#editBMPanel_tagsSelector, #editBMPanel_locationField { 
  color: rgb(0,0,0) !important;
  background-color: rgb(144,144,144) !important;
  border: 0.75px solid rgb(32,32,32) !important;
}

#editBMPanel_nameRow, #editBMPanel_tagsRow,
#editBMPanel_locationRow, #editBMPanel_keywordRow {
color: rgb(188,188,188) !important;                            /* text Name/Folder/Location/Tags */
}

#editBMPanel_folderTree {
  -moz-appearance: none !important; 
  color: rgb(220,220,220)  !important;                         /* text and icons in the drop-down menu*/
  background: none !important;                                 /* border when not active */
}

.checkbox-check {
  -moz-appearance: checkbox;
  filter: grayscale(100%) !important;
}

*#editBMPanel_PanelRows-input::-moz-selection {                /* colour autocomplete text URL bar */
*background-color: rgb(80,80,80) !important;
*color: rgb(192,192,192) !important;
*}

/* ------------------------------------------------------------ */
/* Arrow panels - Others (Add extensions, etc.)                 */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

#infoBox textbox, #infoBox listbox, #searchFilter {            /* Fill-in boxes */
  -moz-appearance: none !important; 
  color: rgb(0,0,0) !important;                                /* Text */
  background-color: rgb(144,144,144) !important;
  border: 0.5px solid rgb(32,32,32) !important;
  padding: 3px !important; 
}

/* ------------------------------------------------------------ */
/* Option menu - Top menu                                       */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

*#appMenu-popup .subviewbutton .toolbarbutton-text,            /* TEXT style */
*#appMenu-popup .panel-arrowcontent,
*panelmultiview .toolbaritem-combined-buttons>label {
*}

.appMenu-tp-separator,                                         /* HORIZONTAL BORDERS */
toolbarseparator {
display: visible !important;
border-color: rgb(128,128,128) !important;
}

#appMenu-zoomReset-button {                                    /* ZOOM CONTROl xx% */
background: transparent !important;
color: rgb(169,169,169) !important;
border: 0px solid rgb(169,169,169) !important;
border-radius: 0px !important;
}

/* ------------------------------------------------------------ */
/* Option menu - First sub-menu                                 */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

.panel-header {                                                /* TOP HEADER */
color: rgb(192,192,192) !important;
background: rgb(48,48,48) !important;
border-bottom: 1px solid rgb(128,128,128) !important;
}

/* ------------------------------------------------------------ */ /* ==================================== v4.1.3 */
/* Option menu - Synced Tabs, Send Tab to Device                */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

.PanelUI-fxa-signin-button, .PanelUI-remotetabs-button {
background-color: rgb(52,52,52) !important;
color: rgb(188,188,188) !important;
border: 0.75px solid rgb(169,169,169) !important;
border-radius: 2px !important;
font-weight: 650 !important;
}
.PanelUI-fxa-signin-button:hover, .PanelUI-remotetabs-button:hover {
background-color: rgb(60,60,60) !important;
color: rgb(188,188,188) !important;
font-weight: 650 !important;
}
.PanelUI-fxa-signin-button:active, .PanelUI-remotetabs-button:active {
background-color: rgb(52,52,52) !important;
color: rgb(188,188,188) !important;
border: 0.75px solid rgb(169,169,169) !important;
border-radius: 2px !important;
font-weight: 650 !important;
}

/* ------------------------------------------------------------ */
/* Overflow menu                                                */
/* ------------------------------------------------------------ */

#overflowMenu-customize-button {                                /* Bottom area "Customise Toolbar..." */
font-weight: 550 !important;
color: rgb(184,184,184) !important;                             /* ==================================== DARK MODE */
background-color: rgb(52,52,52) !important;                     /* ==================================== DARK MODE */
}

#overflowMenu-customize-button:hover {                          /* Bottom area "Customise Toolbar..." HOVER */ 
font-weight: 550 !important;
color: rgb(0,0,0) !important;                                   /* ==================================== DARK MODE */
background-color: rgb(144,144,144) !important;                  /* ==================================== DARK MODE */
}

#widget-overflow-mainView {                                     /* Elements in Overflow Menu */
color: rgb(184,184,184) !important;                             /* ==================================== DARK MODE */
background-color: rgb(52,52,52) !important;                     /* ==================================== DARK MODE */
}

.widget-overflow-list .toolbarbutton-1 {                        /* Overwrite previous "scale" command for toolbarbutton-1 */
transform: scale(1, 1) !important;
}

.widget-overflow-list .toolbarbutton-1  > .toolbarbutton-text {
-moz-box-align: center !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}

.widget-overflow-list .toolbarbutton-icon {                    /* Icons, colour */
fill: rgb(184,184,184) !important;                             /* ==================================== DARK MODE */
}

.widget-overflow-list:hover .toolbarbutton-icon {              /* Icons, HOVER colour */
fill: rgb(32,32,32) !important;                                /* ==================================== DARK MODE */
}

/* ------------------------------------------------------------ */
/* Context menu                                                 */
/* ------------------------------------------------------------ */

#contentAreaContextMenu>*>*>image {                            /* Assign colour to icon on the right-hand side */
fill: currentColor !important;
-moz-context-properties: fill, fill-opacity, stroke !important;
}

#context-navigation, #context-sep-navigation { 
display: none !important 
}

/* ------------------------------------------------------------ */
/* Miscellanueous                                               */
/* ------------------------------------------------------------ */

#confirmation-hint {
display: none !important;                                      /* hide "Saved to Library!" bookmark confirmation popup */
}

#appMenu-library-recentHighlights {
display: none !important;
}

#urlbar-zoom-button {
display:none!important                                         /* remove ZOOM info from URL bar */
}

#pageAction-panel-default-bookmark-folder_gustiaux_com,
#pageAction-panel-builtInSeparator {                           /* remove DEFAULT BOOKMARK FOLDER add-on line from Page Actions */
display:none!important 
}

/* ------------------------------------------------------------ */
/* Library menu                                                 */ /* ==================================== DARK MODE */
/* Credits for the initial inspiration:  Izheil                 */
/* github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme        */
/* ------------------------------------------------------------ */

#placesView, #placesView .scrollbox-innerbox, #downloadsRichListBox,
#infoPane, #placesList, #placeContent, tree {
  -moz-appearance: none !important; 
  background: rgb(32,32,32) !important;                        /* Background */
  color: rgb(220,220,220)  !important;                         /* Text and icons */
}

#placesList {                                                  /* Text and icons left-hand side */
  color: rgb(220,220,220)  !important;}

/* ------------------------------------------------------------ */
/* All treechildren (list-like) elements */

treechildren::-moz-tree-row(even) {
  background-color: rgb(40,40,40) !important}

treechildren::-moz-tree-row(odd) {
  background-color: rgb(32,32,32) !important}

treechildren::-moz-tree-row(hover) {
  background: rgb(60,60,60) !important}

treechildren::-moz-tree-row(selected) {
  background: rgb(60,60,60) !important}

#placeContent treechildren::-moz-tree-cell {                   /* Border between Name/Tag/Location columns for listed items */
  border-right: none !important;
  border-left: none !important}

#placeContent treechildren::-moz-tree-column {                 /* Border between Name/Tag/Location columns empty space below listed items */
  border-right: none !important;}

/* ------------------------------------------------------------ */
/* Top header Name/Tag/Location */

#placeContent treecol {
  -moz-appearance: none !important;
  background: rgb(32,32,32) !important;
  padding: 3px !important;
  color: rgb(220,220,220) !important;
*  border-left: 0.5px solid rgb(220,220,220) !important;
  border-bottom: 0.5px solid rgb(220,220,220) !important}

#placeContent treecol:hover {                                  /* Top header Name/Tag/Location on HOVER */
  -moz-appearance: none !important; 
  background: rgb(0,0,0) !important;
  color: rgb(232,232,232) !important}

/* ------------------------------------------------------------ */
/* Top toolbar where the buttons are placed */

#placesToolbar {
  -moz-appearance: none !important; 
  background: rgb(32,32,32) !important;                        /* Background */
  color: rgb(24,24,24)  !important;                            /* Text and symbols within icons */
  border-bottom: 0.5px solid rgb(220,220,220) !important}
}

#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  fill: rgb(24,24,24) !important; opacity: 1 !important        /* symbols within back/forward buttons */
}

#placesToolbar > toolbarbutton[disabled="true"] > .toolbarbutton-icon, #placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive > .toolbarbutton-icon, #placesToolbar > toolbarbutton[type="menu"][disabled="true"] > .toolbarbutton-menu-dropmarker, #placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
  fill: rgb(24,24,24) !important;
}

/* ------------------------------------------------------------ */
/* Border between left-hand tree and right-hand list */

#placesView > splitter {
  border-inline-end: 0.5px solid rgb(220,220,220) !important}

/* ------------------------------------------------------------ */
/* Information box on the bottom right */

#detailsDeck {
  background-color: var(--Window-bg) !important; 
  border-top: 0.5px solid rgb(220,220,220) !important}

/* ------------------------------------------------------------ */
/* Tag expander */

.expander-up, .expander-down {
  filter: brightness(70%);
}

richlistbox {                                                  /* rectangular area which appears after pressing v */
  -moz-appearance: none !important;
  margin: 0px 0px !important;
}

/* ------------------------------------------------------------ */
/* Lock symbol > Connection secure > More information           */
/* ------------------------------------------------------------ */

th > label, td > input, .table-split-column {
color: rgb(220,220,220) !important;
}

#topBar {
-moz-appearance: none !important;
color: rgb(48,48,48) !important;
background-color: rgb(32,32,32) !important;
}

#viewGroup > radio, #viewGroup > toolbarbutton {
color: rgb(48,48,48) !important;
}

#viewGroup > radio[selected="true"], #viewGroup > toolbarbutton[checked="true"] {
color: rgb(220,220,220) !important;
}

.table-split-column {
*background-color: rgb(144,144,144) !important;
}

.table-split-column > label, .table-split-column > input {
color: rgb(220,220,220) !important;
}

#permList {
-moz-appearance: none !important;
background-color: rgb(32,32,32) !important;
color: rgb(220,220,220) !important;
}

.permission:hover {                                            /* ==================================== DARK MODE */
background-color: rgb(128,128,128) !important;
color: rgb(0,0,0) !important;
}

radio {
filter: grayscale(100%) !important;
}

/* ------------------------------------------------------------ */ /* ==================================== v4.1.3 */
/* Findbar                                                      */ /* ==================================== DARK MODE */ 
/* ------------------------------------------------------------ */

.findbar-container, .findbar-closebutton {
background-color: rgb(32,32,32) !important;                    
}

:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
border-top-color: rgb(32,32,32) !important;
color: rgb(168,168,168) !important;
}

:root {
--toolbar-bgcolor: rgb(32,32,32) !important;  
}

.findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover {
color: rgb(220,220,220) !important;
background-color: rgb(60,60,60) !important;
}

input.findbar-textbox, input.findbar-textbox:focus {
background-color: rgb(144,144,144) !important;
color: rgb(0,0,0) !important;
border-color: var(red, Highlight) !important;
border: 0.5px solid rgb(60,60,60) !important;
}

.findbar-find-previous, .findbar-find-next {
background-color: rgb(144,144,144) !important;
color: rgb(0,0,0) !important;
border-color: var(red, Highlight) !important;
border: 0.5px solid rgb(60,60,60) !important;
fill: rgb(32,32,32) !important;
}

/* ------------------------------------------------------------ */ /* ==================================== v4.1.3 */
/* Sidebar                                                      */ /* ==================================== DARK MODE */ 
/* ------------------------------------------------------------ */

#sidebar-header {
color: rgb(220,220,220) !important;
background-color: rgb(32,32,32) !important;                    
}

.content-scrollable {
background-color: rgb(32,32,32) !important;                    
}

.deck .instructions {
color: rgb(220,220,220) !important;
}

.deck .button {
background-color: rgb(52,52,52) !important;
}

.deck .button:hover {
background-color: rgb(60,60,60) !important;
}

/* ------------------------------------------------------------ */ /* ==================================== v4.1.3 */
/* about:logins > Import from Another Browser...                */ /* ==================================== DARK MODE */
/* ------------------------------------------------------------ */

.wizard-header {
-moz-appearance: none !important;
background-color: rgb(52,52,52) !important;
}

.wizard-header-box-text {
color: rgb(220,220,220) !important;
}

.wizard-header-icon {
filter: grayscale(100%) !important;
}

.wizard-page-box {
-moz-appearance: none !important;
color: rgb(220,220,220) !important;
background-color: rgb(52,52,52) !important;
}

/* ------------------------------------------------------------ */
/* System buttons in dialog windows                             */ /* ==================================== DARK MODE */ 
/* ------------------------------------------------------------ */

button[default="true"]:not([disabled="true"]):not(:-moz-window-inactive) {
filter: grayscale(100%) !important;
}

/* ------------------------------------------------------------ */
/* facebook container / google container                        */
/* ------------------------------------------------------------ */

#userContext-indicator {                                       /* =========================== DARK MODE */
  fill: rgb(56,56,56) !important;                              /* URL BAR, change colour of the fence */
}

#userContext-label {
  display:none!important                                       /* URL BAR, removel text label */
}

#pageActionSeparator {
  display:none!important                                       /* URL BAR, remove vertical separator */
}

.tabbrowser-tab[usercontextid] > .tab-stack >
.tab-background > .tab-bottom-line {
  height: 0 !important;                                        /* TAB, remove lower line */
}