/* The main purpose of this CSS file is to get black background in menus and context menu with R3dfox using both the black mode and the black theme
 * and also to reduce the default vertical line spacing 
 * WARNING! Make a backup of your whole profile before using this file
 * You have been warned
 * The code just below is for shrinking the general vertical line spacing
 */

menupopup > menuitem, menupopup > menu {padding-top: 2px !important; padding-bottom: 2px !important;}
*|*:root {--arrowpanel-menuitem-padding: 2px 8px !important;}


/* The code below is for making menus and the context menu with black background
 * Credit goes to Guerra24 : https://gist.github.com/Guerra24/6d7bc4be8849bb8d6eef3a2a74d68e1f
 */

menupopup {
	-moz-appearance: none !important;
	padding: 8px 2px 8px 2px !important;
	background-color: #2B2B2B !important;
	border: 1px #A0A0A0 solid !important;
	min-width: 280px !important;
}
menuseparator {
	-moz-appearance: none !important;
	border: none !important;
	padding: .5px 0px .5px 0px !important;
	margin: 4px 8px 4px 8px !important;
	background-color: #808080 !important;
}
menuitem, menu {
	-moz-appearance: none !important;
	color: white !important;
	padding: 2px 0px 2px 0px !important;
}
menuitem[disabled="true"], menuitem[disabled="true"] > .menu-text {
	color: gray !important;
}
menuitem:hover, menu:hover, menu[open="true"], menuitem[_moz-menuactive="true"]	 {
	-moz-appearance: none !important;
	padding: 2px 0px 2px 0px !important;
	background-color: #414141 !important;
}
menugroup {
	padding: 0px !important;
	background-color: transparent !important;
}
menuitem > .menu-text, menuitem > .menu-iconic-text {
	color: white !important;
}
menuitem[type="checkbox"] {
	padding-left: 8px !important;
	padding-top: 6.5px !important;
	padding-bottom: 6.5px !important;
}
menuitem[type="radio"] {
	padding-left: 8px !important;
	padding-top: 6.5px !important;
	padding-bottom: 6.5px !important;
}
menuitem[type="checkbox"] > .menu-iconic-text, menuitem[type="radio"] > .menu-iconic-text {
	padding-left: 5px !important;
}
menuitem[checked="true"][type="checkbox"] > .menu-iconic-left {
	padding: 7px 0px 0px 0px !important;
	border: solid white;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg) scale(.75);
	margin-bottom: 4px !important;
}
menuitem[checked="true"][type="radio"] > .menu-iconic-left {
	padding: 1px !important;
	border: solid white;
	height: 17px !important;
	border-radius: 100%;
	background: white;
	transform: scale(.5); 
}
menucaption {
	background-color: transparent !important;
	color: white !important;
}
#ContentSelectDropdown > menupopup {
	background-image: none !important;
}
#ContentSelectDropdown {
	padding: 0px !important;
}
menulist {
	-moz-appearance: none !important;
	padding: 4px 4px 4px 4px !important;
	border: 2px solid #666666 !important;
	background-color: transparent !important;
}
menulist:hover {
	padding: 4px 4px 4px 4px !important;
	border: 2px solid #999999 !important;
	background-color: transparent !important;
}
menulist[open="true"]  {
	border: 2px solid #666666 !important;
	background-color: #333333 !important;
}
#context-back > .menu-iconic-left, #context-forward > .menu-iconic-left, #context-reload > .menu-iconic-left, #context-stop > .menu-iconic-left, #context-bookmarkpage > .menu-iconic-left {
	padding: 0px !important;
}
.menu-iconic-left {
	-moz-appearance: none !important;
	padding: 0px 5px 0px 9px !important;
}
.menu-right {
	-moz-appearance: none !important;
	padding: 7.5px !important;
	margin-right: 6px !important;
	color: white !important;
	border: solid white;
	border-width: 0 2px 2px 0px;
	transform: rotate(-45deg) scale(.55);
}
tooltip {
	-moz-appearance: none !important;
	color: white !important;
	background-color: #2B2B2B !important;
	border: 1px solid #767676 !important;
	padding: 6.5px !important;
}


/* The code below is for colorizing the audio speaker icon
 * Credit goes to Aris-t2 : https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/tabs/tab_audio_icon_colorized.css
 */

.tab-icon-overlay[soundplaying] {
  fill: #058B00 !important;/* var(--green-70) */
}
.tab-icon-overlay[muted] {
  fill: #D70022 !important;/* var(--red-60) */
}
.tab-icon-overlay[activemedia-blocked] {
  fill: #FFE900 !important;/* var(--yellow-50) */
}

:root[lwtheme-brighttext]:not([style*='--lwt-header-image']) .tab-icon-overlay[soundplaying] {
  fill: lightgreen !important;
}
:root[lwtheme-brighttext]:not([style*='--lwt-header-image']) .tab-icon-overlay[muted] {
  fill: #ff5a5a !important;
}
:root[lwtheme-brighttext]:not([style*='--lwt-header-image']) .tab-icon-overlay[activemedia-blocked] {
  fill: orange !important;
}

@media (-moz-content-prefers-color-scheme: dark) {
	:root[lwtheme]:not([style*='--lwt-header-image']) .tab-icon-overlay[soundplaying] {
	  fill: lightgreen !important;
	}
	:root[lwtheme]:not([style*='--lwt-header-image']) .tab-icon-overlay[muted] {
	  fill: #ff5a5a !important;
	}
	:root[lwtheme]:not([style*='--lwt-header-image']) .tab-icon-overlay[activemedia-blocked] {
	  fill: orange !important;
	}
}

/* The code below is for removing the extensions container icon
 * Make sure to pin all of your extensions to the toolbar before using it
 * Disable this part if you plan to add a new extension or you won't be able to access its icon
 */

#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{
width: 0px !important;
padding: 0px !important;
}