/* ==UserStyle==
@name           Dark Vibrant qBittorrent WebUI
@version        2.1.4
@namespace      https://github.com/ggets/
@description    A darker (yet vibrant) theme for qBittorrent WebUI (improved iFelix18 theme, ispired by Cozzy's theme: userstyles.org/styles/152766)
@author         Felix & GGets
@homepageURL    https://github.com/ggets/Dark-qBittorrent-WebUI/
@supportURL     https://github.com/ggets/Dark-qBittorrent-WebUI/issues/
@updateURL      https://raw.githubusercontent.com/ggets/Dark-qBittorrent-WebUI/master/dark-qbittorrent-webui.user.css
@license        CC-BY-SA-4.0
@preprocessor   stylus
==/UserStyle== */
@-moz-document url-prefix("http://192.168.1.10/torrent/") {
		/* Dark Vibrant qBittorrent WebUI by Felix && GGets

				1.0.0 (03/06/2018) - first release
				2.0.0 (12/03/2023) - 1st mod release
				2.1.2 (16/03/2023) - 2nd mod release
				2.1.4 (21/03/2023) - 3rd mod release (latest)

	----------------------------------------------------------------------------------------------*/
	/*#filtersColumn,#filtersColumn_handle{display:none;}*/
	:root {
		--c-accent-100: hsla(210,75%,50%,1.00);
		--c-accent-080: hsla(210,75%,50%,0.80);
		--c-accent-060: hsla(210,75%,50%,0.60);
		--c-accent-050: hsla(210,75%,50%,0.50);
		--c-accent-040: hsla(210,75%,50%,0.40);
		--c-accent-020: hsla(210,75%,50%,0.20);
		--c-accent-010: hsla(210,75%,50%,0.10);
		--c-accentLight-100: hsla(210,75%,60%,1.00);
		--c-accentLight-080: hsla(210,75%,60%,0.80);
		--c-accentLight-060: hsla(210,75%,60%,0.60);
		--c-accentLight-050: hsla(210,75%,60%,0.50);
		--c-accentLight-040: hsla(210,75%,60%,0.40);
		--c-accentLight-020: hsla(210,75%,60%,0.20);
		--c-accentLight-010: hsla(210,75%,60%,0.10);
		--c-accentDark-100: hsla(210,75%,40%,1.00);
		--c-accentDark-080: hsla(210,75%,40%,0.80);
		--c-accentDark-060: hsla(210,75%,40%,0.60);
		--c-accentDark-050: hsla(210,75%,40%,0.50);
		--c-accentDark-040: hsla(210,75%,40%,0.40);
		--c-accentDark-020: hsla(210,75%,40%,0.20);
		--c-accentDark-010: hsla(210,75%,40%,0.10);
		--c-black-100:		hsla(0,0%,0%,1.00);
		--c-black-080:		hsla(0,0%,0%,0.80);
		--c-black-060:		hsla(0,0%,0%,0.60);
		--c-black-050:		hsla(0,0%,0%,0.50);
		--c-black-040:		hsla(0,0%,0%,0.40);
		--c-black-020:		hsla(0,0%,0%,0.20);
		--c-black-010:		hsla(0,0%,0%,0.10);
		--c-dark-100:			hsla(0,0%,8%,1.00);
		--c-dark-080:			hsla(0,0%,8%,0.80);
		--c-dark-060:			hsla(0,0%,8%,0.60);
		--c-dark-050:			hsla(0,0%,8%,0.50);
		--c-dark-040:			hsla(0,0%,8%,0.40);
		--c-dark-020:			hsla(0,0%,8%,0.20);
		--c-dark-010:			hsla(0,0%,8%,0.10);
		--c-white-100:		hsla(0,0%,100%,1.00);
		--c-white-080:		hsla(0,0%,100%,0.80);
		--c-white-060:		hsla(0,0%,100%,0.60);
		--c-white-050:		hsla(0,0%,100%,0.50);
		--c-white-040:		hsla(0,0%,100%,0.40);
		--c-white-020:		hsla(0,0%,100%,0.20);
		--c-white-010:		hsla(0,0%,100%,0.10);
		--c-white-008:		hsla(0,0%,100%,0.08);
		--c-white-016:		hsla(0,0%,100%,0.16);
	}
	#prop_general fieldset,
	#watched_folders_tab tr,
	#watched_folders_tab th,
	#watched_folders_tab td {
		border-color: var(--color-Grey) !important;
	}
	body input, /* add body to override Felix's setting */
	body textarea { /* add body to override Felix's setting */
		color: var(--color-White) !important;
		/*white-space: nowrap;*/
		padding: .2rem;
		border-radius: .25rem;
	}
	#torrentFilesFilterToolbar{
		margin: 0;
	}
	#torrentsFilterToolbar{
		margin: 0 0 0 8px;
	}
	#torrentsFilterToolbar,
	#torrentFilesFilterToolbar{
		position: relative;
	}
	#torrentFilesFilterToolbar input{
		padding: 3px 3px 3px 32px;
	}
	#torrentsFilterToolbar input{
		padding: 2px 3px 2px 32px;
		border-radius: .25rem 0 0 .25rem;
	}
	#torrentsFilterToolbar::after,
	#torrentFilesFilterToolbar::after {
		content: '';
		display: block;
		position: absolute;
		top: 6px;
		left: 12px;
		width: 12px;
		height: 12px;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiLz48L3N2Zz4");
		filter: contrast(0%);
	}
	#torrentFilesFilterToolbar::after {
		top: 8px;
	}
	body #torrentsFilterToolbar input:not(:focus){
		background-image: none !important;
	}
	#mainWindowTabs{
		margin: 0px 8px 0 0;
		border-radius: 0 .25rem .25rem 0;
		border: 2px solid var(--c-white-008);
		border-left: none;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	body .toolbarTabs { /* add body to override Felix's setting */
		margin-top: -2px;
		background: linear-gradient(var(--c-white-008),var(--c-black-020)) !important;
		border-radius: .5rem 0 0;
		background-position: 2px 0 !important;
		background-repeat: no-repeat !important;
	}
	.tab-menu>li,
	#mainWindowTabs.toolbarTabs li,
	#propertiesTabs li{
		background: transparent !important;
		margin: 0px 1px !important;
		padding: 4px 12px !important;
		box-shadow: inset -1px -1px 0 0 hsla(0,0%,0%,.3),inset 1px 1px 0 0 hsla(0,0%,100%,.1);
		border-radius: .25rem .25rem 0 0;
	}
	#mainWindowTabs.toolbarTabs li{
		margin: -2px 1px !important;
	}
	.tab-menu li.selected,
	#mainWindowTabs.toolbarTabs li.selected,
	#propertiesTabs li.selected{
		background: var(--c-accent-050) linear-gradient(var(--c-black-020),var(--c-white-008)) !important;
		box-shadow: 0 0 0 2px var(--c-black-020),inset 0 0 0 2px var(--c-white-016);
	}
	.propertiesPanel{
		box-shadow: 0 0 0 2px var(--c-black-020)/*,inset 0 0 0 2px var(--c-white-016);*/
	}
	#mainWindowTabs.toolbarTabs,
	#mainWindowTabs.toolbarTabs *{
		border-collapse: collapse !important;
	}
	#mainWindowTabs.toolbarTabs li{
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 0 !important;
	}
	#mainWindowTabs.toolbarTabs li:last-child{
		border-radius: 0 4px 4px 0 !important;
	}
	#mainWindowTabs.toolbarTabs li.selected{
		box-shadow: inset 0 0 0 2px var(--c-white-016);
	}
	#mainWindowTabs .tab-menu li a {
		padding: 0 !important;
	}
	#mainWindowTabs.toolbarTabs {
		padding: 0 !important;
	}
	#downloadPage_contentWrapper,
	#uploadPage_contentWrapper{
		width: 80vw;
	}
	#downloadForm .settings table,
	#uploadForm .settings table{
		width: 94%;
	}
	#downloadForm div#submitbutton,
	#uploadForm div#submitbutton {
		margin-top: 1rem !important;
		margin-bottom: 1rem;
	}
	#downloadForm button[type="submit"],
	#uploadForm button[type="submit"] {
		padding: .75rem 4rem;
		font-size: 1rem !important;
		border: 2px solid var(--c-black-060);
		background: linear-gradient(176deg,var(--c-accent-100),var(--c-accentDark-100));
		box-shadow: 1px 1px 8px var(--c-black-060),0 0 0 2px var(--c-black-020),inset 0 0 0 2px var(--c-white-016);
		border-radius: .5rem;
		color: var(--c-accentLight-100);
		text-shadow: -1px -1px 0 var(--c-white-080),1px 1px 0 var(--c-black-060);
		text-transform: uppercase;
		margin-top: 12px;
	}
	#downloadForm .settings table tbody tr td input[type="checkbox"],
	#uploadForm .settings table tbody tr td input[type="checkbox"]{
		transform:scale(1.4);
	}
	#downloadForm .settings table tbody tr td .select-watched-folder-editable,
	#downloadForm .settings table tbody tr td select,
	#downloadForm .settings table tbody tr td input[type="text"],
	#uploadForm .settings table tbody tr td .select-watched-folder-editable,
	#uploadForm .settings table tbody tr td select,
	#uploadForm .settings table tbody tr td input[type="text"]{
		width: 100% !important;
		box-sizing: border-box;
	}
	#downloadForm .settings table tbody tr td select,
	#downloadForm .settings table tbody tr td input[type="text"],
	#uploadForm .settings table tbody tr td select,
	#uploadForm .settings table tbody tr td input[type="text"]{
	/*	border: 1px solid var(--c-white-016) !important;*/
	}
	#downloadForm .settings table tbody tr td .select-watched-folder-editable,
	#uploadForm .settings table tbody tr td .select-watched-folder-editable,
	#downloadForm .settings table tbody tr td .select-watched-folder-editable select+input[type="text"],
	#uploadForm .settings table tbody tr td .select-watched-folder-editable select+input[type="text"],
	#downloadForm>div:first-child,
	#uploadForm>div:first-child{
		background: none !important;
		border: none !important;
	}
	#downloadForm>div:first-child,
	#uploadForm>div:first-child{
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		text-align: right;
		padding: 0 .4rem;
		box-sizing: border-box;
	}
	#downloadForm .settings table tbody tr td .select-watched-folder-editable select+input[type="text"],
	#uploadForm .settings table tbody tr td .select-watched-folder-editable select+input[type="text"]{
		width: calc(100% - 19px) !important;
	}
	#downloadForm #fileselect,
	#uploadForm #fileselect{
		width: calc(66% - .6rem) !important;
	}
	#downloadForm .settings table tbody tr td .select-watched-folder-editable,
	#uploadForm .settings table tbody tr td .select-watched-folder-editable{
		height: 2rem;
	}
	#downloadForm .settings table tbody tr td .select-watched-folder-editable select,
	#uploadForm .settings table tbody tr td .select-watched-folder-editable select{
		bottom: auto;
	/*	border-color: var(--c-white-016) !important;*/
		/*-webkit-appearance: none !important;*/
		/*-moz-appearance: none !important;*/
		/*-ms-appearance: none !important;*/
		/*-o-appearance: none !important;*/
		/*appearance: none !important;*/
	}
	#downloadForm .settings table tbody tr td:nth-child(1),
	#uploadForm .settings table tbody tr td:nth-child(1){
		width: 33% !important;
	}
	#filtersColumn_handle {
		margin-left: 0;
	}
	.horizontalHandle,.columnHandle {
		border: none;
		background: var(--c-white-008) !important;
	}
	.horizontalHandle:hover,.columnHandle:hover {
		background: var(--c-white-016) !important;
	}
	.horizontalHandle{
		height: 6px;
	}
	.columnHandle {
		width: 6px;
	}
	.torrentsTableContextMenuTarget:nth-child(odd) {
		background: var(--c-black-020) !important;
	}
	.torrentsTableContextMenuTarget:nth-child(even) {
		background: var(--c-white-016) !important;
	}
	.torrentsTableContextMenuTarget {
		line-height: 26px;
		font-size: 13px;
	}
	/*progressbar border*/
	div.progressbar_wrapper {
		border-radius: 3px;
		overflow: hidden;
		height: 16px !important;
		border: 1px solid var(--c-black-060) !important;
	}
	body div.progressbar_wrapper { /* add body to override Felix's setting */
		border-color: var(--c-black-060) !important;
	}
	/* % completed */
	div.progressbar_wrapper div.progressbar_dark {
		background: linear-gradient(var(--c-accent-100),var(--c-accentDark-100)) !important;
		box-shadow: inset 0 0 0 1px var(--c-white-016);
		color: var(--color-White) !important;
	}
	/* % remaining */
	div.progressbar_wrapper div.progressbar_light {
		background: linear-gradient(var(--c-black-010),var(--c-white-016)) !important;
		box-shadow: inset 0 0 0 1px var(--c-white-008);
		color: var(--color-White) !important;
	}
	#mochaToolbar .mochaToolButton,
	#torrentsTableMenu.contextMenu img,
	#desktopHeader #desktopNavbar img,
	#addTrackersPlus {
		filter: brightness(160%) grayscale(20%) !important;
	}
	body .mocha .mochaOverlay{
		display: flex;
		flex-direction: column;
	}
	div .mochaTitlebar,div .mochaTitlebar.replaced {
		background-color: var(--c-accentDark-100) !important;
		/*background-image: linear-gradient(var(--c-white-016),var(--c-black-010)) !important;*/
	}
	/*div.mochaContentBorder{*/
		/*box-shadow: inset 0 0 0 2px var(--c-white-016) !important;*/
		/*border: 2px solid #4a4a4a !important;*/
	/*}*/



	/* 03.2k23 */


	#desktopHeader {
		position: relative;
	}
	#desktopHeader #desktopNavbar {
		position: absolute;
		top: -2.2rem;
		left: 32vw;
		right: 32vw;
		height: auto;
	/*	opacity: .5;*/
		z-index: 3;
		transition: top .25s ease-in,opacity .32s ease-in,background .32s ease-in,box-shadow .32s ease-in;
		transition-delay: .4s;
		overflow: visible;
		border-radius: 0 0 .5rem .5rem;
		background-image: linear-gradient(transparent,var(--c-black-010) 90%,var(--c-accentDark-020) 96%,var(--c-accent-020) 98%) !important;
		background-size: 100% 100% !important;
		background-position: 0 0 !important;
		background-repeat: repeat !important;
		background-color: transparent !important;
		border-color: var(--c-accent-050);
		border: none;
		box-shadow: inset 0 0 0 1px var(--c-accentDark-010),inset 0 -2px 0 0 var(--c-accent-020),0 3px 12px 0 hsla(0,0%,0%,.3);
		backdrop-filter: blur(4px);
	}
	#desktopHeader #desktopNavbar:hover {
		top: -.5rem;
	/*	opacity: 1;*/
		transition-delay: 0s;
		background-image: linear-gradient(transparent, var(--c-black-040) 90%,var(--c-accentDark-050) 96%,var(--c-accent-050) 98%) !important;
		background-color: var(--c-dark-010) !important;
		box-shadow: inset 0 0 0 1px var(--c-accentDark-050),inset 0 -2px 0 0 var(--c-accent-100),0 3px 12px 0 hsla(0,0%,0%,.6);
		border-color: var(--c-accent-100);
	}
	#desktopHeader #desktopNavbar>ul {
		display: flex;
		padding: .3rem .5rem .35rem;
		backdrop-filter: blur(3px);
		border-radius: 0 0 .5rem .5rem;
		box-shadow: inset 0 0 0 1px var(--c-accentDark-020),inset 0 -1px 0 0 var(--c-accent-020),0 3px 12px 0 hsla(0,0%,0%,.3);
	}
	#desktopHeader #desktopNavbar:hover>ul {
		box-shadow: inset 0 0 0 1px var(--c-accentDark-050),inset 0 -1px 0 0 var(--c-accent-050),0 3px 12px 0 hsla(0,0%,0%,.6);
	}
	#desktopHeader #desktopNavbar>ul>li {
		float: none;
	}
	#desktopHeader #desktopNavbar>ul>li>a {
		padding: .5rem 1rem;
	}
	#desktopHeader #desktopNavbar>ul>li ul,
	body .contextMenu,
	body .contextMenu>li>ul,
	body #loginform{
		border: none !important;
		border-radius: .25rem !important;
		background: var(--c-dark-040) linear-gradient(var(--c-black-010),var(--c-black-060)) !important;
		backdrop-filter: blur(6px);
		box-shadow: inset 0 0 0 1px var(--c-white-008),0 0 0 1px var(--c-black-080),2px 2px 6px 0 var(--c-black-080) !important;
	}
	#desktopHeader #desktopNavbar>ul>li ul>li>a{
		padding: .75rem 1rem .75rem 2rem;
	}
	body .contextMenu>li>a,
	body .contextMenu>li>ul>li>a{
		padding: .6rem 1rem !important;
	}
	body .contextMenu>li>a:first-child,
	body .contextMenu>li>ul>li>a:first-child{
		border-radius: .25rem .25rem 0 0 !important;
	}
	body .contextMenu>li>a:last-child,
	body .contextMenu>li>ul>li>a:last-child{
		border-radius: 0 0 .25rem .25rem !important;
	}
	.contextMenu .separator {
		border-top: 1px solid var(--c-white-008) !important;
	}
	#desktopHeader #desktopNavbar li a:hover,
	body .contextMenu>li>a:hover, /* add body to override Felix's setting */
	body .contextMenu>li>ul>li>a:hover{ /* add body to override Felix's setting */
		background: var(--c-white-008) !important;
	}
	#desktopHeader #mochaToolbar {
		z-index: 2;
	}
	.piecesbarWrapper {
		border-radius: .2rem;
		overflow: hidden;
		border: none !important;
	}

	.piecesbarWrapper::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(hsla(0,0%,100%,.06),hsl(0, 0%,0%,.18)) !important;
		box-shadow: inset 0 0 0 1px var(--c-white-016);
		border-radius: .2rem;
	}
	.piecesbarCanvas {
		filter: hue-rotate(-56deg) saturate(84%) brightness(186%);
	}
	hr{
		color: black;
		background: black;
		box-shadow: 0 1px 0 0 hsla(0,0%,100%,.1);
	}
	.panel-header .toolbox{
		margin-top: 1px;
	}
	#desktopFooterWrapper{
		box-shadow: 0 -2px 3px 0px hsla(0,0%,0%,.32);
	}
	body #desktopFooter, /* add body to override Felix's setting */
	body #mochaToolbar{	
		background: var(--color-Dark) linear-gradient(transparent,var(--c-black-020)) !important;
	}
	body #desktopFooter{ /* add body to override Felix's setting */
		padding: 0 1rem 3px;
		border: 1px solid var(--c-white-008) !important;
		text-shadow: 2px 2px 3px hsl(0, 0%, 0%);
	}
	#desktopFooter>span#error_div{
		color: hsl(0, 100%, 50%);
		margin-top:	3px;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		padding-bottom: 7px;
		padding-left: 4rem;
		padding-right: 2rem;
		margin-left: -1.2rem;
		margin-right: -1.2rem;
	}
	#desktopFooter>span#error_div:not(:empty)::after{
		background: red;
		content: '';
		position: absolute;
		bottom: -15px;
		height: 1rem;
		left: 1rem;
		right: 1rem;
		box-shadow: 0 0 .5rem 0 red;
		border-radius: 120rem;
		z-index: 5;
	}
	#desktopFooter>span#error_div:not(:empty)::before{
		content: '';
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBkPSJNNTY5LjUxNyA0NDAuMDEzQzU4Ny45NzUgNDcyLjAwNyA1NjQuODA2IDUxMiA1MjcuOTQgNTEySDQ4LjA1NGMtMzYuOTM3IDAtNTkuOTk5LTQwLjA1NS00MS41NzctNzEuOTg3TDI0Ni40MjMgMjMuOTg1YzE4LjQ2Ny0zMi4wMDkgNjQuNzItMzEuOTUxIDgzLjE1NCAwbDIzOS45NCA0MTYuMDI4ek0yODggMzU0Yy0yNS40MDUgMC00NiAyMC41OTUtNDYgNDZzMjAuNTk1IDQ2IDQ2IDQ2IDQ2LTIwLjU5NSA0Ni00Ni0yMC41OTUtNDYtNDYtNDZ6bS00My42NzMtMTY1LjM0Nmw3LjQxOCAxMzZjLjM0NyA2LjM2NCA1LjYwOSAxMS4zNDYgMTEuOTgyIDExLjM0Nmg0OC41NDZjNi4zNzMgMCAxMS42MzUtNC45ODIgMTEuOTgyLTExLjM0Nmw3LjQxOC0xMzZjLjM3NS02Ljg3NC01LjA5OC0xMi42NTQtMTEuOTgyLTEyLjY1NGgtNjMuMzgzYy02Ljg4NCAwLTEyLjM1NiA1Ljc4LTExLjk4MSAxMi42NTR6Ii8+PC9zdmc+");
		width: 20px;
		height: 20px;
		display: block;
		position: absolute;
		left: 2rem;
		top: .1rem;
		filter: contrast(0%) sepia(200%) saturate(500%) hue-rotate(-20deg) drop-shadow(2px 2px 3px hsl(0, 0%, 0%));
		background-position: top 0 left 0;
		z-index: 5;
		background-color: transparent;
		background-repeat: no-repeat;
	}
	#desktopFooter>table{
		right: 1rem;
	}
	#desktopFooter>table>tbody>tr>td{
		padding: 1px .25rem;
	}
	#desktopFooter>table>tbody>tr>td.statusBarSeparator{
		background: transparent !important;
		box-shadow: inset 1px 1px 0 0 hsla(0,0%,0%,.3),inset -1px -1px 0 0 hsla(0,0%,100%,.05);
		width: 2px;
		padding: 0;
	}
	#mochaToolbar .divider::after {
		content: '';
		position: absolute;
		display: inline-block;
		background: transparent !important;
		box-shadow: inset 1px 1px 0 0 hsla(0,0%,0%,.6),inset -1px -1px 0 0 hsla(0,0%,100%,.07);
		width: 2px;
		height: 90%;
		left: 0;
	}
	body #mochaToolbar .divider{
		background: transparent !important;
		position: relative !important;
	}
	body .horizontalHandle, /* add body to override Felix's setting */
	body .columnHandle { /* add body to override Felix's setting */
		background: var(--c-white-008) !important;
		border-color: var(--c-white-008) !important;
	}
	body select{
	/*	background: var(--c-black-010);*/
	/*	border-color: var(--c-accentDark-050);*/
		color: var(--color-White) !important;
		border-radius: .25rem;
		padding: .12rem .5rem;
	}
	body{
		text-shadow: 1px 1px 2px hsla(0, 0%, 0%,.6);
	}
	body .panel-header,
	body .panel-headerContent,
	body .toolbarTabs {
		background-color: hsla(0,0%,100%,.02) !important;
	}
	body input[type="text"],
	body input[type="password"],
	body input[type="file"],
	body select,
	body textarea{
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
		background-position: 0 0 !important;
		background-color: var(--c-dark-080) !important;
		background-image: linear-gradient(var(--c-black-040),var(--c-black-020)) !important;
		border: 2px solid var(--c-white-008) !important;
	}
	body input[type="text"]:hover,
	body input[type="file"]:hover,
	body select:hover,
	body textarea:hover{
		background-image: linear-gradient(var(--c-black-060),var(--c-black-020)) !important;
		border: 2px solid var(--c-white-016) !important;
	}
	body input[type="text"]:focus,
	body input[type="file"]:focus,
	body select:focus,
	body textarea:focus{
		background-image: linear-gradient(var(--c-black-080),var(--c-black-020)) !important;
		border: 2px solid var(--c-accent-050) !important;
	}
	/* for the download/upload/confirmation iframes */
	html[slick-uniqueid],html body{
		background: transparent !important;
	}
	body #desktop{
		background: var(--color-Dark) !important;
	}
	.mochaContentOverlay{
		display: flex;
		flex-direction: column;
	}
	.mochaContentBorder,
	body .mochaTitlebar.replaced{
		background: var(--c-dark-040) linear-gradient(var(--c-black-010),var(--c-black-060)) !important;
		backdrop-filter: blur(6px);
	}
	body .mochaTitlebar.replaced{
		background-color: var(--c-accent-060) !important;
		padding: .25rem .125rem;
	}
	.mochaContentBorder{
		border-bottom: none;
		flex-grow: 1;
		margin-bottom: 11px;
	}
	body .mocha.replaced{
		min-width: 25vw;
	}
	body .mocha.replaced#confirmDeletionPage{
		min-width: 38rem;
	}
	body .mocha::after{
		box-shadow: inset 0 0 0 1px var(--c-white-008),0 0 0 1px var(--c-black-080),2px 2px 6px 0 var(--c-black-080) !important;
	}
	body .mochaContentWrapper{
		background: transparent !important;
		width: calc(100% - 2rem - 2px) !important;
		padding: 1rem !important;
	}
	body .mochaContentWrapper
	body .mochaContent,
	body .mochaIframe {
		min-height: 100% !important;
	}
	body .mochaIframe {
		height: 100% !important;
	}
	.mochaTitlebar{
		min-width: calc(100% - 6px) !important;
		width: calc(100% - 6px) !important;
		box-shadow: inset 0 0 0 1px var(--c-accentDark-060);
		min-height: 25px;
		flex-shrink: 0;
	}
	.mochaOverlay{
		min-width: calc(100% - 8px) !important;
		width: calc(100% - 8px) !important;
	}
	body input[type="button"],
	body input[type="submit"]{
		background: linear-gradient(var(--c-white-008),var(--c-black-020)) !important;
		padding: .75rem 1rem !important;
		box-shadow: inset -1px -1px 0 0 hsla(0,0%,0%,.3),inset 1px 1px 0 0 hsla(0,0%,100%,.1);
		border-radius: .25rem;
		border: none;
	}
	.mochaControls,
	.mochaCanvasControls{
		top: 13px !important;
		right: 15px !important;
	}

	body>br:first-child+p{ /* Address the mocha dialogs. Need to find a better way. */
		margin-top: -.5rem;
		margin-bottom: .5rem;
		font-size: 1rem;
		line-height: 1.5rem;
	}
	body #deleteFromDiskCB{
		transform:scale(1.4);
	}
	body label[for="deleteFromDiskCB"]{
		font-size: .9rem;
		padding-left: .5rem;
	}
	body #urls{
		height: 6rem;
	}


	#main>h1{ /* do we only have this on login page? */
		position: absolute;
		top: 8rem;
		z-index: 2;
		left: 35%;
		width: 30%;
		display: block;
		margin: auto;
		opacity: .75;
	}
	body #loginform{
		padding: 8rem 6rem 4rem 24rem;
	}
	body #loginform::after{
		content:'';
		display:block;
		background: url(../images/qbittorrent-tray.svg);
		background-size: 12rem 12rem;
		position: absolute;
		left: 6rem;
		top: 7rem;
		width: 12rem;
		height: 12rem;
		opacity: .64;
		filter: drop-shadow(3px 3px 6px var(--c-black-100));
	}
	body #loginform>.row{
		position: relative;
		padding: .5rem 0;
	}
	body #loginform>.row>br{
		display: none;
	}
	body #loginform>.row>label{
		position: absolute;
		left: 1rem;
		top: 0rem;
		background: linear-gradient(transparent,var(--c-black-040)) !important;
		padding: .1rem .5rem;
		backdrop-filter: blur(2px);
		border-radius: .1rem;
	}
	#logo{
		position: absolute;
		left: calc(50% - 15rem);
	}
	#logo>img{
		position: relative;
		top: -14rem;
		left: -4rem;
		width: 38rem;
		height: 38rem;
		filter: brightness(50%) saturate(70%) blur(2em);
		opacity: .5;
	}
	#loginform input[type="submit"]{
		margin-top: .5rem;
		width: 100% !important;
		float: none;
		box-shadow: inset -1px -1px 0 0 hsla(0,0%,0%,.3),inset 1px 1px 0 0 hsla(0,0%,100%,.1),3px 3px 6px var(--c-black-020);
		background-color: var(--c-black-010) !important;
	}
	#loginform input,
	#loginform input[type="submit"]{
		width: 12rem;
		padding: .5rem !important;
	}


	/* Dark qBittorrent WebUI by Felix

			1.0.0 (03/06/2018) - first release

	----------------------------------------------------------------------------------------------*/
	/* COLORS */
	 :root {
		--color-Dark: #1D1D1D;
		--color-Grey: #3A3A3A;
		--color-White: #C4C4C4;
	}
	/* THEME */
	html,
	body,
	#desktopHeader,
	#desktopNavbar,
	#mochaToolbar,
	#Filters {
		background: var(--color-Dark) !important;
		color: var(--color-White);
	}
	a {
		color: var(--color-White) !important;
	}
	#desktopNavbar li a {
		color: var(--color-White) !important;
		border-bottom-color: var(--color-Grey) !important;
	}
	#desktopNavbar li a:hover {
		background: var(--color-Grey) !important;
	}
	#desktopNavbar li ul {
		background: var(--color-Dark) !important;
		background-image: none !important;
	}
	#desktopNavbar li ul .divider {
		border-top-color: var(--color-Grey) !important;
	}
	#pageWrapper {
		border-top-color: var(--color-Grey) !important;
	}
	.torrentTable,
	.dynamicTable {
		border-color: var(--color-Grey) !important;
	}
	.torrentTable th,
	.dynamicTable th {
		background: var(--color-Dark) !important;
		color: var(--color-White) !important;
	}
	.dynamicTable th {
		border-right-color: var(--color-Grey) !important;
	}
	.torrentTable tr,
	.dynamicTable tr {
		background: var(--color-Dark) !important;
	}
	.torrentTable tr:nth-child(even),
	.dynamicTable tr:nth-child(even) {
		background: var(--color-Dark) !important;
	}
	.torrentTable tr.selected,
	.torrentTable tr:hover,
	.dynamicTable tr.selected,
	.dynamicTable tr:hover {
		color: var(--color-White) !important;
	}
	.torrentTable tr.selected,
	.dynamicTable tr.selected {
		background: var(--color-Grey) !important;
	}
	.torrentTable tr:hover,
	.dynamicTable tr:hover,
	ul.filterList li:hover,
	.selectedFilter {
		background: var(--color-Grey) !important;
	}
	.toolbarTabs {
		padding-bottom: 0 !important;
	}
	.toolbarTabs li,
	.toolbarTabs li a {
		background-image: none !important;
		color: var(--color-White) !important;
	}
	.toolbarTabs li {
		margin-left: 2px !important;
		margin-right: 2px !important;
		margin-bottom: 0 !important;
		background: var(--color-Grey) !important;
		border-radius: 2px 2px 0 0;
		box-shadow: none;
		background-position: left -70px
	}
	.toolbarTabs li.selected {
		background: var(--color-Dark) !important;
	}
	.toolbarTabs li a {
		margin-left: 0 !important;
		padding: 4px 9px !important;
	}
	#propertiesPanel_header {
		height: 27px !important;
	}
	#propertiesPanel_headerContent {
		padding-top: 3px !important;
	}
	/*
	#prop_general fieldset,
	#watched_folders_tab tr,
	#watched_folders_tab th,
	#watched_folders_tab td {
		border-color: var(--color-White) !important;
	}
	*/
	#desktopFooter {
		background: var(--color-Dark) !important;
		border: 1px solid var(--color-Grey) !important;
		color: var(--color-White) !important;
	}
	.panel {
		background: var(--color-Dark) !important;
		border-bottom-color: var(--color-Grey) !important;
		color: var(--color-White) !important;
	}
	.panel-header,
	.panel-headerContent,
	.toolbarTabs {
		background-image: none !important;
		background-color: var(--color-Grey) !important;
	}
	.panel-header {
		border-bottom-color: var(--color-Dark) !important;
	}
	.horizontalHandle,
	.columnHandle {
		background: var(--color-Grey) !important;
		border-color: var(--color-Grey) !important;
	}
	.horizontalHandle .handleIcon {
		background: none !important;
	}
	.columnHandle:after {
		transform: rotate(90deg) !important;
	}
	.horizontalHandle {
		background-image: none !important;
	}
	.mochaCanvas {
		display: none !important;
	}
	.mochaTitlebar,
	.mochaTitlebar.replaced {
		background: var(--color-Grey) !important;
		border-radius: 7px 7px 0 0;
	}
	.mochaTitle {
		color: var(--color-White) !important;
	}
	.mochaToolbarWrapper {
		border-top-color: var(--color-Grey) !important;
	}
	.mochaToolbar {
		border-top-color: var(--color-Grey) !important;
		background: var(--color-Grey) !important;
		padding-top: 4px;
	}
	.mochaContentBorder {
		border-top-color: var(--color-Dark) !important;
		border-bottom-color: var(--color-Grey) !important;
		border-bottom-width: 23px !important;
		border-radius: 0 0 7px 7px;
	}
	.mochaContentWrapper {
		background: var(--color-Dark) !important;
	}
	.mochaContent fieldset {
		border-color: var(--color-White) !important;
	}
	.mocha::after {
		content: "";
		display: block;
		position: absolute;
		top: 4px;
		left: 5px;
		bottom: 7px;
		right: 5px;
		border-radius: 7px;
		box-shadow: 0 0 10px #000;
		z-index: -1000;
	}
	.mocha#preferencesPage::after {
		bottom: 6px;
	}
	.contextMenu,
	.contextMenu li ul {
		background: var(--color-Dark) !important;
		border-color: var(--color-Grey) !important;
	}
	.contextMenu li a {
		color: var(--color-White) !important;
	}
	.contextMenu li a:hover {
		background: var(--color-Grey) !important;
	}
	h2,
	h3 {
		color: var(--color-White);
	}
	.filterList a {
		color: var(--color-White) !important;
	}
	/*Makes the toolbar buttons, rightclick menu and menu bar white*/
	.mochaToolButton,
	.contextMenu img,
	#desktopNavbar img,
	#addTrackersPlus {
		filter: grayscale(100%) brightness(249%) !important;
	}
	/*Adjusts images in the footer and filter menu and torrents section (e.g. the downloading, seeding and paused icons) to be slightly brighter*/
	#filtersColumn img,
	#transferList_wrapper img,
	#desktopFooter img {
		filter: brightness(100%);
	}
	/*progressbar border*/
	div.progressbar_wrapper {
		border-color: var(--color-White) !important;
	}
	/* % of download completed*/
	.progressbar_dark {
		background: var(--color-Grey) !important;
		color: var(--color-White) !important;
	}
	/* % of download uncompleted*/
	.progressbar_light {
		background: var(--color-Dark) !important;
		color: var(--color-White) !important;
	}
	.panel-collapse {
		filter: grayscale(100%) brightness(60%) !important;
	}
	select {
		background: var(--color-Dark);
		border-color: var(--color-White);
		color: var(--color-White) !important;
	}
	/*
	input,
	textarea {
		background: var(--color-Grey) !important;
		color: var(--color-White) !important;
		border: 0px;
		white-space: nowrap;
	}
	*/
	input::placeholder {
		color: var(--color-White) !important;
	}
	#error_div {
		color: red;
	}
	/* SCROLLBARS
	----------------------------------------------------------------------------------------------*/
	 ::-webkit-scrollbar-corner {
		background-color: #333333;
	}
	 ::-webkit-scrollbar {
		background-color: #333333;
		height: 10px;
		width: 10px;
	}
	 ::-webkit-scrollbar-thumb {
		background: #555555;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
	/* VERSION
	----------------------------------------------------------------------------------------------*/
	div#aboutpage_content.mochaContent h3:nth-child(2)::after {
		content: '\Awith "Dark qBittorrent WebUI" v2.1.4 by Felix && GGets';
		white-space: pre;
		font-weight: normal;
		color: darkgreen;
	}
}