:root {
	--bf-bg: #00000066;
	--bf-hover-bg: #fefefe20;
	--bf-color: #f2f2f2;
	--bf-focused-color: #fefefe;
	
	--bf-accent-bg: #4C5FF9CC;

	--bf-icon-color: #f2f2f2;
	--bf-switch-tab-color: #6498EF;
	--bf-bookmark-color: #53E2AE;

	--bf-tab-font-size: 11pt;
	--bf-tab-font-weight: 500;
	--bf-tab-color: var(--bf-color);
	--bf-tab-selected-bg: var(--bf-bg);

	--bf-tab-height: 32px;
	--bf-tab-border-radius: 6px;
	--bf-tab-soundplaying-bg: #985EFFCC;

	--bf-navbar-padding: 4px;
  
	--bf-urlbar-bg: var(--bf-bg);
	--bf-urlbar-active-bg: #000000BB;
	--bf-urlbar-color: var(--bf-color);
	--bf-urlbar-focused-color: var(--bf-focused-color);
	--bf-urlbar-font-size: 12pt;
	--bf-urlbar-font-weight: 500;

	--bf-urlbar-results-font-size: 12pt;
	--bf-urlbar-results-font-weight: 550;
	--bf-urlbar-results-url-color: var(--bf-color);

	--bf-sidebar-bg: transparent;
	--bf-sidebar-color: var(--bf-color);

	--bf-menupopup-bg: #00000090;
	--bf-menupopup-color: var(--bf-color);
	
	--bf-splitter-bg: #00000090;

	--autocomplete-popup-background: var(--bf-bg) !important;
	--default-arrowpanel-background: var(--bf-bg) !important;
	--default-arrowpanel-color: #fefefa !important;
	--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
	--panel-disabled-color: #f9f9fa80;
	--toolbar-bgcolor: transparent !important;
	--urlbar-separator-color: transparent !important;
}

/*
░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░

Transparent Window
*/

#main-window {
	background: transparent !important;
	border: none !important;
}

/*
░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄
░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄
░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀

Contains navbar, urlbar, and etc.
*/

toolbar {
	background-image: none !important;
}

toolbar#nav-bar {
	background: var(--bf-bg) !important;
	padding: var(--bf-navbar-padding) !important;
}

.toolbar-items {
	background-color: var(--bf-bg) !important;
}

toolbarbutton {
	box-shadow: none !important;
	margin-left: 2px !important;
}

.toolbarbutton-1 {
	--toolbarbutton-hover-background: var(--bf-hover-bg) !important;
	--toolbarbutton-active-background: var(--bf-hover-bg) !important;
}

#urlbar {
	max-width: 70% !important;
	margin: 0 15% !important;
}

#urlbar-input:focus {
	color: var(--bf-urlbar-focused-color) !important;
}

#urlbar-background {
	background-color: var(--bf-urlbar-bg) !important;
	border: none !important;
}

.megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
	box-shadow: none !important;
	background-color: transparent !important;
}

.megabar[open=true] > #urlbar-background {
	background: var(--bf-urlbar-active-bg) !important;
}

#navigator-toolbox, toolbaritem {
	border: none !important;
}

.urlbar-icon {
	color: var(--bf-icon-color)  !important;
}

.urlbar-icon > image {
	fill: var(--bf-icon-color) !important;
	color: var(--bf-icon-color) !important;
}

.urlbarView-favicon, .urlbarView-type-icon {
	display: none !important;
}

#star-button {
  /* 	Hide URL bar bookmark button */
	display: none;
}

.toolbarbutton-text {
	color: var(--bf-icon-color)  !important;
}

.urlbarView-row[type="bookmark"] > span{
	color: var(--bf-bookmark-color) !important;
}

.urlbarView-row[type="switchtab"] > span{
	color: var(--bf-switch-tab-color) !important;
}

#urlbar-results {
	font-weight: var(--bf-urlbar-results-font-weight);
	font-size: var(--bf-urlbar-results-font-size) !important;
	color: var(--bf-urlbar-results-color) !important;
}

.urlbarView-row-inner:hover {
  /* 	hover background color */
	background: var(--bf-accent-bg) !important;
}

.urlbarView-url, .search-panel-one-offs-container {
	color: var(--bf-urlbar-results-url-color) !important;
	font-weight: var(--bf-urlbar-results-font-weight);
	font-size: var(--bf-urlbar-font-size) !important;
}

#urlbar-input {
	font-size: var(--bf-urlbar-font-size) !important;
	color: var(--bf-urlbar-color) !important;
	font-weight: var(--bf-urlbar-font-weight)!important;
	text-align: center !important;
}

::-moz-selection {
	/* URL bar hightlight color */
	background-color: var(--bf-accent-bg) !important;
}

#searchbar {
	background: var(--bf-bg) !important;
	border: none !important;
}

.searchbar-textbox {
	color: var(--bf-focus-fg) !important;
	font-weight: 700 !important;
}

#tracking-protection-icon-container, #identity-box
{
	display: none !important;
}

#back-button > .toolbarbutton-icon {
	--backbutton-background: transparent !important;
	border: none !important;
}

#back-button {
	list-style-image: url("left-arrow.svg") !important;
}

#forward-button {
	list-style-image: url("right-arrow.svg") !important;
}


/* 
░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀

The tabs container
*/

#titlebar {
	/* Move tab bar beneath the url bar */
	-moz-box-ordinal-group: 3 !important;
}

#tabbrowser-tabs {
  /* 	Set minimum height for tab bar */
	--tab-min-height: 0px;
}

#tabbrowser-tabs tab:only-of-type,
#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button {
  /* 	Hide tab bar if there's only one tab */
	display: none !important;
}

.tabbrowser-tab[fadein]:not([pinned]) {
	/* Stretch Tabs */
	max-width: none !important;
}

.tab-background {
	border: none !important;
	background: transparent !important;
}

.tab-background[selected="true"] {
	background: var(--bf-tab-selected-bg) !important;
}

.tab-background:not[visuallyselected] {
	background: var(--bf-tab-selected-bg) !important;
	opacity: 0.5 !important;
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
	/* Remove the "lines" in tabs */
	border-left: none !important;
}

.tabbrowser-arrowscrollbox {
	margin-inline-start: 4px !important;
	margin-inline-end: 0px !important;
}

.tab-text {
	font-weight: var(--bf-tab-font-weight);
	font-size: var(--bf-tab-font-size) !important;
	color: var(--bf-tab-color);
}

.tab-label-container:not([textoverflow]) {
	/* Center tab text */
	width: 50% !important;
	max-width: 50% !important;
	min-width: 50% !important;
	display: flex;
	overflow: hidden;
	justify-content: center;
}

.tab-close-button {
  /* 	Hide close tab button */
	display: none !important;
}

hbox.tab-content .tab-icon-image {
	/* Hide tab icon */
	display: none !important;
}

hbox.tab-content[pinned=true] .tab-icon-image {
  /* 	Show the icon of pinned tabs */
	display: initial !important;
}

hbox.tab-content[pinned=true] .tab-text {
	display: none !important;
}

.tab-line, .tab-bottom-line {
  /* 	Hide the tab line */
	display: none !important;
}

.tabbrowser-tab {
 	border-radius: var(--bf-tab-border-radius) !important;
 	border-width: 0;
 	height: var(--bf-tab-height) !important;
 	margin-top: 0 !important;
	margin-bottom: 4px !important;
	margin-inline-start: 2px !important;
	margin-inline-end: 2px !important;
}

.tabbrowser-tab[soundplaying="true"] {
  /* 	Audio playing background */
	background-color: var(--bf-tab-soundplaying-bg) !important;
}

.tab-icon-sound {
  /* 	Hide icon of audio */
 	display: none !important;
}

#tabs-newtab-button {
	padding-bottom: 5px !important;
}

#tabs-newtab-button {
	list-style-image: url("add.svg") !important;
	opacity: 1;
}

tab.tabbrowser-tab {
 	overflow: hidden;
}

tab.tabbrowser-tab:hover {
	background: var(--bf-hover-bg) !important;
 	box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

#tabbrowser-tabs {
	--tab-loading-fill: var(--bf-color) !important;
}


/* 
░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
 
The findbar
*/

#browser #appcontent #tabbrowser-tabbox findbar,
#browser #appcontent #tabbrowser-tabbox tabpanels {
 	-moz-appearance: none !important;
 	background-color: transparent !important;
 	background-image: none !important;
}

#browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
 	background-color: var(--bf-bg) !important;
}

/* 
░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀

Contains history, bookmarks, and etc.
*/

#history-panel,
#sidebar-search-container,
#bookmarksPanel {
 	background: var(--bf-bg) !important;
}

#search-box {
 	-moz-appearance: none !important;
 	background: var(--bf-bg) !important;
 	border-radius: 6px !important;
}

#sidebar-search-container {
 	background-color: var(--bf-sidebar-bg) !important;
}

.close-icon, .urlbar-icon {
 	fill: var(--bf-icon-color) !important;
}

image #sidebar-icon {
  display: none;
}

.sidebar-placesTree {
 	color: var(--bf-sidebar-color) !important;
}

#sidebar-switcher-target {
	color: var(--bf-sidebar-color) !important;
}

#sidebar-header {
 	background: var(--bf-bg) !important;
}

#sidebar-box {
 	--sidebar-background-color: var(--bf-sidebar-bg) !important;
}

#sidebar-splitter {
 	border: none !important;
	opacity: 1 !important;
	background-color: var(--bf-splitter-bg) !important;
}

/* 
░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
 
The dropdown menus
*/

.panel-arrowcontent {
 	padding: 0px !important;
 	margin: 0px !important;
}

toolbarseparator {
 	display: none !important;
}

box.panel-arrowbox {
 	display: none;
}

box.panel-arrowcontent {
 	border-radius: 8px !important;
 	border: none !important;
}

/* 
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀
 
Right-click menu
*/

menupopup, popup,
popup > menu > menupopup,
menupopup > menu > menupopup {
	-moz-appearance: none !important;
	background: var(--bf-menupopup-bg) !important;
	border: 0px !important;
	border-radius: 4px !important;
	padding: 2px 0px 2px 0px  !important;
}

menupopup menuseparator {
	-moz-appearance: none !important;
	background: #525A6D  !important;
	margin: 2px 0px 2px 0px !important;
	padding: 0 !important;
	border-top: none !important;
	border-color: transparent !important;
}

menupopup menu, menuitem {
	-moz-appearance: none !important;
	color: var(--bf-focused-color) !important;
	padding: 5px !important;
}

menupopup menu[disabled=true], menuitem[disabled=true] {
  /* 	Disabled button */
	-moz-appearance: none !important;
	opacity: 0.5 !important;
	color: var(--bf-focused-color) !important;
	background-color: transparent !important;
}

menupopup menu:hover:not([disabled=false]), menuitem:hover:not([disabled=false]) {
  /* 	Disabled button hover */
	-moz-appearance: none !important;
	opacity: 0.5 !important;
	color: var(--bf-focused-color) !important;
	background-color: transparent !important;
}

menupopup menu:hover:not([disabled=true]), menuitem:hover:not([disabled=true]) {
  /* 	Enabled button hover */
	-moz-appearance: none !important;
	color: var(--bf-focused-color) !important;
	opacity: 1 !important;
	background-color: var(--bf-accent-bg) !important;
}

/* 
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
 
The control buttons. Contains, close, minimize, and maximize buttons
*/

#autohide-context, #window-controls {
	display:none!important;
}

:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
    display: none !important;
}

:root[tabsintitlebar][sizemode="maximized"] #nav-bar {
    padding-left: 3px !important;
}


/* 
░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
 
The customization window
*/

#customization-container {
	background: var(--bf-bg) !important;
}

.customizationmode-button {
	-moz-appearance: none !important;
	background: var(--bf-bg) !important;
	padding: 5px !important;
	border-radius: 6px !important;
}

.customizationmode-button:hover {
	-moz-appearance: none !important;
	background: var(--bf-hover-bg) !important;
	padding: 5px !important;
	border-radius: 6px !important;
}

.customizationmode-button label {
	color: var(--bf-color) !important;
}