/*************************************************************************************************************************************************************************************************************************************************************

"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for firefox's interface (NOT internal site) using "chrome" privileges.
Quote: https://userChrome.org | https://github.com/topics/userchrome 

************************************************************************************************************************************************************************************************************************************************************/

@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
/* Please write your custom CSS under this line*/

	#main-window {
		margin: 0px;
	}

	html {
		border-radius: 16px !important;
	}

	#tabbrowser-arrowscrollbox {
		padding-top: 8px !important;
	}

	:root[inFullscreen="true"] html {
		border-radius: 0px;
	}

	.browserContainer {
		outline: none !important;
		background: transparent !important;
	}

	#nav-bar {
		background: transparent !important;
	}

	.urlbar-input-container,
	#urlbar-container {
		border-radius: 16px !important;
	}

	.urlbar-background,
	#urlbar-background {
		opacity: 0.5;
		border-radius: 16px !important;
	}

	.urlbarView {
		border-bottom: 8px solid transparent !important;
	}

	.urlbarView-body-outer {
		background: light-dark(#ffffff, #202020);
		border-radius: 16px;
	}

	browser {
		border-radius: 16px !important;
	}

	#browser {
		background: transparent !important;
		border-radius: 16px !important;
		padding: 0px 8px 8px 8px;
	}

	:root[inFullscreen="true"] browser,
	:root[inFullscreen="true"] #browser {
		padding: 0px;
		border-radius: 0px !important;
	}

	#statusBar,
	#navigator-toolbox {
		background: transparent !important;
	}

	#TabsToolbar {
		background: transparent !important;

		toolbarbutton {
			visibility: hidden !important;
			display: none !important;
		}
	}

	#tabbrowser-tabs {
		border: 0px !important;
		container-type: inline-size;
	}

	.tab-background {
		&::before, &::after {
			content: none;
			border: 0px !important;
			border-radius: 0px !important;
		}

		border-radius: 16px 0px 0px 16px !important;
		margin: 0px 0px 0px 6px !important;
		opacity: 0.5 !important;
	}

	@container(max-width: 99px) {
		.tab-background {
			border-radius: 16px !important;
			margin: 0px 0px 0px 11px !important;
		}
	}

	.browserContainer,
	.browserStack,
	#tabbrowser-tabbox {
		box-shadow: none !important;
		border-radius: 16px !important;
		background: light-dark(rgba(255,255,255,0.5), rgba(20,20,20,0.5)) !important;
	}

	:root[inFullscreen="true"] #browserStack,
	:root[inFullscreen="true"] #tabbrowser-tabbox {
		border-radius: 0px !important;
	}

	#tabbrowser-tabpanels {
		background: transparent !important;
		hbox {
			border-radius: 8px !important;
		}
	}

	:root[inFullscreen="true"] #tabbrowser-tabpanels {
		hbox {
			border-radius: 0px;
		}
	}

	#tabs-newtab-button,
	#sidebar-button,
	#sidebar-tools-and-extensions-splitter,
	button-group.overflow-button {
		visibility: hidden;
		display: none;
	}

	#main-button,
	#unified-extensions-button {
		opacity: 0.0;
	}

	#main-buton:hover,
	#unified-extensions-button:hover {
		opacity: inherit;
	}

	#verticaltab-splitter {
		border: 0px !important;
		background: transparent !important;
	}

	#statuspanel-label {
		margin: 8px !important;
		padding: 4px !important;
		border-radius: 16px !important;
		opacity: 0.8;
	}
}