@media(prefers-color-scheme: light)
{
	@media only screen and (max-width: 1176px)
	{
		#head-content
		{
			background-color: var(--dark-layer-two);
			box-shadow: 0px -10px 10px 10px rgba(0, 0, 10, .2);
			/* border-bottom: 1px solid rgba(0, 0, 10, 0.2); */
			border-bottom: 1px solid rgb(200, 200, 210);
		}

		#footer-content
		{
			border-top: 1px solid var(--dark-layer-one)!important;
		}
	}

	:root
	{
		--dark-layer-one: rgb(220, 220, 230);
		--dark-layer-two: rgb(245, 245, 255);
		--light-layer-one: rgb(45, 45, 60);
		--light-layer-two: rgb(60, 60, 80);
		--drop-shadow: 	0 1px 1px -1px rgba(0, 0, 0, 0.2),
						0 2px 2px -1px rgba(0, 0, 0, 0.15),
						0 4px 4px -2px rgba(0, 0, 0, 0.15),
						0 8px 8px -2px rgba(0, 0, 0, 0.1);
		--drop-shadow-light: 	0 1px 1px -2px rgba(0, 0, 0, 0.2),
								0 2px 2px -2px rgba(0, 0, 0, 0.15),
								0 4px 4px -4px rgba(0, 0, 0, 0.15),
								0 8px 8px -4px rgba(0, 0, 0, 0.1);
	}

	*
	{
		scrollbar-color: var(--dark-layer-two) var(--light-layer-one);
	}

	#footer-content
	{
		background: rgba(245, 245, 255, .5);
	}

	h1, input[type='button']:not(.control-panel), input[type='button']:not(:disabled).white, button:not(:disabled).white, button, input[type='text']:focus, input[type='password']:focus, textarea:focus, .log-message
	{
		color: var(--dark-layer-one);
	}

	h1, input[type='button']:not(.control-panel), input[type='button']:not(:disabled).white, button:not(:disabled).white, button, input[type='text']:focus, input[type='password']:focus, textarea:focus, .log-message
	{
		background: var(--light-layer-one);
	}

	.control-panel, #devices button
	{
		--background-color: var(--light-layer-one);
		
		color: var(--dark-layer-two);
	}

	.control-panel::before
	{
		filter: invert(100%) sepia(10%) hue-rotate(200deg);
	}

	input:not(.control-panel, .color-picker, :disabled, [type='checkbox'], [type='radio'], [type='submit']):hover, textarea:not(:disabled):hover
	{
		background: var(--light-layer-one);
		color: var(--dark-layer-one);
	}

	input[type='submit']
	{
		color: var(--light-layer-one)!important;
	}

	h2, p, label, input, textarea, .select-selected, .scrollarea
	{
		color: var(--light-layer-one);
	}

	.gradient-red, .gradient-green, .gradient-blue, .gradient-blue-green, .gradient-blue-purple, .gradient-purple, .gradient-yellow, .gradient-orange, .gradient-cyan, .overlay-red::before, .overlay-green::before, .overlay-blue::before, .overlay-blue-green::before, .overlay-blue-purple::before, .overlay-purple::before, .overlay-yellow::before, .overlay-orange::before, .overlay-cyan::before, .underlay-red::after, .underlay-green::after, .underlay-blue::after, .underlay-blue-green::after, .underlay-blue-purple::after, .underlay-purple::after, .underlay-yellow::after, .underlay-orange::after, .underlay-cyan::after
	{
		color: var(--light-layer-one)!important;
	}

	.gradient-green, .gradient-yellow, .gradient-blue-green, .gradient-cyan
	{
		--drop-shadow: var(--drop-shadow-light);
	}

	.gradient-red.pulse, .gradient-green.pulse, .gradient-blue.pulse, .gradient-cyan.pulse, .gradient-purple.pulse, .gradient-yellow.pulse, .gradient-orange.pulse
	{
		box-shadow: 0 0 0 0 hsla(var(--element-second-color), 0.75), var(--drop-shadow);

		animation-name: animationImportantHSL;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);

		will-change: box-shadow;
	}

	@keyframes animationImportantHSL
	{
		0%
		{
			-moz-box-shadow: 0 0 0 0 hsla(var(--element-second-color), 0.75), var(--drop-shadow);
			box-shadow: 0 0 0 0 hsla(var(--element-second-color), 0.75), var(--drop-shadow);
		}
		70%
		{
			-moz-box-shadow: 0 0 0 10px hsla(var(--element-second-color), 0), var(--drop-shadow);
			box-shadow: 0 0 0 10px hsla(var(--element-second-color), 0), var(--drop-shadow);
		}
		100%
		{
			-moz-box-shadow: 0 0 0 0 hsla(var(--element-second-color), 0), var(--drop-shadow);
			box-shadow: 0 0 0 0 hsla(var(--element-second-color), 0), var(--drop-shadow);
		}
	}

	h2, input[type='button']:disabled, #main-menu button:disabled, .outline, input, textarea, .select-selected, .scrollarea
	{
		border-color: var(--light-layer-one);
	}

	.outline
	{
		border-color: var(--light-layer-one)!important;
		color: var(--light-layer-one)!important;
	}

	input[type='button']:disabled, #main-menu button:disabled
	{
		border-color: var(--light-layer-one)!important;
		color: var(--light-layer-one)!important;
	}

	input:not(.control-panel, :disabled, [type='checkbox'], [type='radio']):hover, textarea:not(:disabled):hover
	{
		border-color: rgba(45, 45, 55, 0);
	}

	.setup-png
	{
		filter: invert(0%) saturate(0%);
	}

	input[type='button']:not(:disabled, .control-panel, .widget-left, .widget-right, .panel):hover, button:not(:disabled, .control-panel, .widget-left, .widget-right, .panel):hover
	{
		background: var(--light-layer-two);
		filter: none;
	}

	input[type='button']:not(:disabled).white:hover, button:not(:disabled).white:hover
	{
		filter: none!important;
		background: rgb(75, 75, 95);
	}

	#groups button:not(.active):hover
	{
		background: rgb(75, 75, 95)!important;
	}

	input[type='button']:not(:disabled, .control-panel, .widget-left, .widget-right, .panel):active, button:not(:disabled, .control-panel, .widget-left, .widget-right, .panel):active
	{
		background: var(--light-layer-two);
		filter: none;
	}

	input[type='button']:not(:disabled).white:active, button:not(:disabled).white:active
	{
		filter: none!important;
		background: rgb(75, 75, 95);
	}

	#groups button:not(.active):active
	{
		background: rgb(75, 75, 95)!important;
	}

	.gradient-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.gradient-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover,
	.overlay-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.overlay-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::before,
	.underlay-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	.underlay-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):hover::after,
	input[type='submit']:not(:disabled, .control-panel, .widget-left, .widget-right):hover
	{
		filter: brightness(90%)!important;
	}

	.gradient-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.gradient-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active,
	.overlay-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.overlay-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::before,
	.underlay-blue:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-blue-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-blue-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-cyan:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-green:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-orange:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-purple:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-red:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	.underlay-yellow:not(div, :disabled, .control-panel, .overlay, .widget-left, .widget-right):active::after,
	input[type='submit']:not(:disabled, .control-panel, .widget-left, .widget-right):active
	{
		filter: brightness(90%)!important;
	}

	.custom-select > .select-items .select-item:not(.same-as-selected):hover, .panel:hover
	{
		filter: none!important;
	}
	
	.custom-select > .select-items .select-item:not(.same-as-selected):active, .panel:active
	{
		filter: none!important;
	}

	::-webkit-scrollbar-track, ::-webkit-scrollbar
	{
		background: var(--light-layer-one);
	}

	::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner
	{
		background: var(--dark-layer-two);
		border: 2px solid var(--light-layer-one);
	}

	.panel
	{
		background: var(--dark-layer-two);
	}

	.title-container
	{
		background: var(--dark-layer-one);
	}

	.panel, #footer-content
	{
		border-color: rgba(255, 255, 255, .5);
	}

	.striped, #footer-content
	{
		background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 10px);
	}

	#groups
	{
		background: var(--light-layer-one);
		border-color: var(--light-layer-one);
	}

	#groups button
	{
		border-color: rgb(110, 110, 130);
	}

	#groups .active, #trigger .locked, #result .locked
	{
		background: rgb(110, 110, 130)!important;
	}

	.select-selected.select-active
	{
		background: var(--light-layer-one)!important;
		color: var(--dark-layer-one)!important;
	}

	.same-as-selected
	{
		background: var(--light-layer-two)!important;
		color: var(--dark-layer-one)!important;
	}

	.select-selected:after
	{
		border-color: var(--light-layer-one) transparent transparent transparent;
	}

	.select-selected.select-active:after
	{
		border-color: transparent transparent var(--dark-layer-one) transparent;
	}

	.custom-select > .select-items
	{
		background: rgb(20, 20, 30);
	}
	
	.custom-select > .select-items .select-item
	{
		background: rgb(20, 20, 30);
		color: var(--dark-layer-one);
	}

	.custom-select > .select-items .select-item:not(.same-as-selected):hover
	{
		background: var(--light-layer-one);
		color: var(--dark-layer-one);
	}

	.custom-select > .select-items .select-item:active
	{
		background: var(--light-layer-two);
		color: var(--dark-layer-one);
	}

	.icon, .select-selected img, .custom-select > .select-items img
	{
		filter: invert(15%) sepia(100%) hue-rotate(200deg);
	}

	.icon-inverted, .select-selected.select-active img, .custom-select > .select-items img
	{
		filter: invert(95%) sepia(10%) hue-rotate(200deg);
	}

	.table
	{
		color: var(--light-layer-one);
	}

	.table .column
	{
		background: var(--dark-layer-one);
	}

	.table .primary
	{
		background: rgb(200, 200, 210);
	}

	.update-status
	{
		color: var(--light-layer-one);
	}

	input[type='text']::placeholder, input[type='password']::placeholder
	{
		color: rgb(110, 110, 130);
	}

	#dialogue
	{
		background: rgba(0, 0, 10, .6);
	}

	#dialogue .content
	{
		background-color: var(--dark-layer-two);

		box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2),
			0 1px 2px rgba(0, 0, 0, 0.15),
			0 2px 4px rgba(0, 0, 0, 0.15),
			0 4px 8px rgba(0, 0, 0, 0.1);

		border: 3px solid var(--dark-layer-two);
	}

	#dialogue h2
	{
		border: 3px solid var(--dark-layer-two);
	}

	.graph
	{
		border: 2px solid var(--dark-layer-two);
	}

	.gradient-overlay.activated
	{
		color: rgb(45, 45, 60);
	}

	.icon-button.split.gradient-red .button-icon img, .icon-button.split.gradient-green .button-icon img, .icon-button.split.gradient-blue .button-icon img, .icon-button.split.gradient-cyan .button-icon img, .icon-button.split.gradient-blue-green .button-icon img, .icon-button.split.gradient-blue-purple .button-icon img, .icon-button.split.gradient-purple .button-icon img, .icon-button.split.gradient-yellow .button-icon img, .icon-button.split.gradient-orange .button-icon img
	{
		filter: invert(15%) sepia(100%) hue-rotate(200deg);
	}

	.icon-button.split.separated .button-icon
	{
		border-color: var(--dark-layer-one)!important;
	}

	.icon-button.split.separated.gradient-red .button-icon, .icon-button.split.separated.gradient-green .button-icon, .icon-button.split.separated.gradient-blue .button-icon, .icon-button.split.separated.gradient-cyan .button-icon, .icon-button.split.separated.gradient-blue-green .button-icon, .icon-button.split.separated.gradient-blue-purple .button-icon, .icon-button.split.separated.gradient-purple .button-icon, .icon-button.split.separated.gradient-yellow .button-icon, .icon-button.split.separated.gradient-orange .button-icon
	{
		border-color: var(--light-layer-one)!important;
	}

	.icon-button.split.layer.left .button-icon
	{
		box-shadow: -12px 0 12px -12px inset rgb(0 0 0 / 70%);
	}

	.icon-button.split.layer.right .button-icon
	{
		box-shadow: 12px 0 12px -12px inset rgb(0 0 0 / 70%);
	}

	.icon-button.split.layer.left.gradient-red .button-icon, .icon-button.split.layer.left.gradient-green .button-icon, .icon-button.split.layer.left.gradient-blue .button-icon, .icon-button.split.layer.left.gradient-cyan .button-icon, .icon-button.split.layer.left.gradient-blue-green .button-icon, .icon-button.split.layer.left.gradient-blue-purple .button-icon, .icon-button.split.layer.left.gradient-purple .button-icon, .icon-button.split.layer.left.gradient-yellow .button-icon, .icon-button.split.layer.left.gradient-orange .button-icon
	{
		box-shadow: -12px 0 12px -12px inset rgb(0 0 0 / 50%);
	}

	.icon-button.split.layer.right.gradient-red .button-icon, .icon-button.split.layer.right.gradient-green .button-icon, .icon-button.split.layer.right.gradient-blue .button-icon, .icon-button.split.layer.right.gradient-cyan .button-icon, .icon-button.split.layer.right.gradient-blue-green .button-icon, .icon-button.split.layer.right.gradient-blue-purple .button-icon, .icon-button.split.layer.right.gradient-purple .button-icon, .icon-button.split.layer.right.gradient-yellow .button-icon, .icon-button.split.layer.right.gradient-orange .button-icon
	{
		box-shadow: 12px 0 12px -12px inset rgb(0 0 0 / 50%);
	}
	
	.accessory-img
	{
		filter: invert(95%) sepia(10%) hue-rotate(200deg);
	}

	.canvas, .graph
	{
		color: var(--light-layer-two);
	}

	#status button
	{
		color: var(--dark-layer-two);
	}

	#status img
	{
		filter: invert(95%) sepia(10%) hue-rotate(200deg);
	}

	#trigger .group
	{
		background-color: var(--dark-layer-one);
	}

	#trigger .control .image-button, #result .control .image-button
	{
		border-color: var(--light-layer-one);
	}

	#trigger .control, #result .control
	{
		background-color: var(--light-layer-one);
	}

	input[type="checkbox"]::before
	{
		filter: invert(95%) sepia(10%) hue-rotate(200deg);
	}

	input[type="checkbox"]:checked
	{
		background-color: var(--light-layer-one);
	}
}