@font-face { font-family: 'Rubik'; font-weight: 500; src: local('Rubik'), url('/style/Rubik-Black.ttf'); }
@font-face { font-family: 'Rubik'; font-weight: 400; src: local('Rubik'), url('/style/Rubik-Bold-Edit.ttf'); }
@font-face { font-family: 'Rubik'; font-weight: 100; src: local('Rubik'), url('/style/Rubik-Light.ttf'); }
@font-face { font-family: 'Rubik'; font-weight: 300; src: local('Rubik'), url('/style/Rubik-Medium-Edit.ttf'); }
@font-face { font-family: 'Rubik'; font-weight: 200; src: local('Rubik'), url('/style/Rubik-Regular-Edit.ttf'); }

:root
{
	--dark-layer-one: rgb(20, 20, 30);
	--dark-layer-two: rgb(30, 30, 45);
	--light-layer-one: rgb(220, 220, 230);
	--light-layer-two: rgb(245, 245, 255);
	--drop-shadow: 	0 0px 1px rgba(0, 0, 0, 0.04), 
					0 1px 2px rgba(0, 0, 0, 0.06), 
					0 2px 4px rgba(0, 0, 0, 0.08), 
					0 4px 8px rgba(0, 0, 0, 0.10);
	--transition-normal: .2s;
	--transition-color: var(--transition-normal) background-color ease-in-out, var(--transition-normal) color ease-in-out, var(--transition-normal) border-color ease-in-out, var(--transition-normal) filter ease-in-out;
}

*
{
	font-family: Rubik;
	appearance: none;
	-webkit-appearance: none;
	/*-webkit-tap-highlight-color: rgba(125, 125, 135, 0.15)!important;*/
	-webkit-tap-highlight-color: transparent!important;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

html, body, #content, #groups, .control-panel::before, .panel, .custom-select > .select-items .select-item, .column, .log-message, .button-icon, h1, h2, p, a, label, img
{
	transition: var(--transition-color);
}

#content
{
	background: var(--dark-layer-one);
	padding: 0 25px;
}

#footer-container
{
	margin: 0 25px;
	margin-bottom: 50px;
}

#head-content, #footer-content
{
	position: relative;
	z-index: 20000;
	overflow: hidden;
	transition: var(--transition-color), var(--transition-normal) opacity ease-in-out, var(--transition-normal) max-height ease-in-out, var(--transition-normal) min-height ease-in-out;

	will-change: opacity, max-height, min-height;
}

#head-content
{
	margin-top: 50px;
}

#footer-content
{
	background: rgba(45, 45, 60, .75);
	padding: 20px;
	border-radius: 32px;
	min-width: 70%;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	display: grid;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

#footer-fade
{
	margin-top: auto;
}

#head-content h1, #head-content p, #footer-fade
{
	transition: var(--transition-color), var(--transition-normal) opacity ease-in-out;

	will-change: opacity;
}

#footer-temp button, #footer-temp input, #footer-fade button, #footer-fade input
{
	transition: var(--transition-color),
				var(--transition-normal) height ease-in-out,
				var(--transition-normal) margin-top ease-in-out,
				var(--transition-normal) margin-bottom ease-in-out,
				var(--transition-normal) padding-top linear,
				var(--transition-normal) padding-bottom linear,
				var(--transition-normal) border-top-width linear,
				var(--transition-normal) border-bottom-width linear,
				var(--transition-normal) opacity ease-in-out,
				var(--transition-normal) background-color ease-out,
				var(--transition-normal) letter-spacing ease-out,
				var(--transition-normal) filter ease-out!important;

	will-change: height, margin-top, margin-bottom, padding-top, padding-bottom, border-top-width, border-bottom-width, opacity, background-color, letter-spacing, filter;
}

textarea, input[type='text'], input[type='password'], input[type='textarea'], .scrollarea
{
	-webkit-user-select: text;
	user-select: text
}

h1
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	background: var(--dark-layer-one);
}
/*
img
{
	mage-rendering: -webkit-optimize-contrast;
}
*/
.main
{
	min-width: 70%;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
}

b
{
	font-weight: 300;
}

input, textarea, button, select, .select-selected, .custom-select > .select-items, .scrollarea
{
	height: 50px;
	width: 100%!important;
	background: transparent;
	color: var(--light-layer-two);
	outline: none;
	border: 3px solid var(--light-layer-two);
	border-radius: 16px;
	font-size: 16px;
	font-weight: 200;
	letter-spacing: 3px;
	box-sizing: border-box;
	box-shadow: var(--drop-shadow);
	white-space: normal;
	padding: 5px 20px;
}

input, textarea, button, select, .select-selected, .scrollarea
{
	transition: var(--transition-normal) ease-out, var(--transition-color), var(--transition-normal) height ease-in-out, var(--transition-normal) padding ease-in-out, var(--transition-normal) border-width ease-in-out;

	will-change: height, padding, border-width;
}

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

input[type='radio']
{
	background: transparent;
	transition: var(--transition-color), .15s border-width ease-in-out, .15s background-color ease-in-out;
	cursor: pointer;
	padding: 0;

	will-change: border-width, background-color;
}

input[type='radio']:active, input[type='radio']:checked
{
	border-width: 9px;
	background: var(--light-layer-two);
}

input[type='text']:focus, input[type='password']:focus
{
	background: var(--light-layer-two);
	color: var(--dark-layer-one);
}

input[type='text']:hover, input[type='password']:hover, textarea:focus, textarea:hover
{
	background: var(--light-layer-two);
	color: var(--dark-layer-one);
}

input[type='button']:not(:disabled, .control-panel, .widget-left, .widget-right, .white):hover, button:not(:disabled, .control-panel, .widget-left, .widget-right, .white):hover, .hoverable:hover,
input[type='button']:not(:disabled, .control-panel, .widget-left, .widget-right, .white):active, button:not(:disabled, .control-panel, .widget-left, .widget-right, .white):active, .hoverable:active
{
	filter: brightness(120%);
	transition: var(--transition-normal) ease-out;
}

.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(75%)!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(75%)!important;
}


.custom-select > .select-items .select-item:not(.same-as-selected):active, input[type='button']:not(:disabled).white:active, button:not(:disabled).white:active,
.custom-select > .select-items .select-item:not(.same-as-selected):hover, input[type='button']:not(:disabled).white:hover, button:not(:disabled).white:hover
{
	transition: var(--transition-normal) ease-out;
	background: rgb(200, 200, 220);
}

input[type='button']:not(:disabled, .control-panel):active, input[type='submit']:not(:disabled):active, button:not(:disabled):active
{
	letter-spacing: 2px;
}

input[type='text'], input[type='password']
{
	padding-left: 20px;
}

textarea, .scrollarea
{
	padding: 20px;
	height: auto;
	max-height: 300px;
	overflow-y: scroll;
	height: 300px;
	resize: none;
	white-space: pre-line;
}

input[type='button']:not(:disabled, .control-panel), input[type='submit']:not(:disabled, .control-panel), button:not(:disabled, .control-panel, .widget-right, .widget-left)
{
	cursor: pointer;
}

input[type='button'], input[type='submit'], button, .log-message
{
	background: rgb(60, 60, 80);
	border-width: 0;
	/*color: var(--dark-layer-one);*/
	color: var(--dark-layer-one);
}

input[type='button']:not(.widget-left, .widget-right):disabled, input[type='submit']:not(.widget-left, .widget-right):disabled, button:not(.widget-left, .widget-right):disabled
{
	/*filter: saturate(0.5);*/
	opacity: .5;
}

input[type='button'].white, button.white, .white
{
	background: var(--light-layer-two);
}

input[type='button']:disabled, #main-menu button:disabled, .outline
{
	background: transparent!important;
	color: var(--light-layer-two)!important;
	border: 3px solid var(--light-layer-two)!important;
}

input:disabled, #main-menu button:disabled
{
	opacity: 1!important;
}

input[type='radio']
{
	width: 18px!important;
	height: 18px!important;
	margin: 2.25px;
	margin-right: 20px;
	margin-left: 0;
}

label
{
	display: flex!important;
}

h1, h2
{
	font-weight: 300;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	width: -moz-fit-content;
}

h1
{
	background: var(--light-layer-two);
	color: var(--dark-layer-one);
	margin-top: 50px;
}

p, a, label
{
	font-weight: 200;
	line-height: 24px;
}

h1, h2, p, a, label
{
	text-align: center;
	font-size: 48px;
	letter-spacing: 10px;
	text-transform: uppercase;
	display: block;
	max-width: 100%;
	white-space: normal;
}

#devices.grid-view input[type='button'], #devices.grid-view button, h1, h2, p, a, label, #groups button, .log-message, .log-title
{
	word-break: break-all;
	word-break: break-word;
}

p, a, label
{
	font-style: italic;
}

a
{
	text-decoration: none;
	color: hsl(210, 80%, 65%)!important;
	margin: 0!important;
	text-align: left;
}

p, label
{
	color: var(--light-layer-two);
}

p, a, label
{
	font-size: 16px!important;
}

h2, h1
{
	border-radius: 64px;
}

h1
{
	padding: 8px 30px 8px 40px;
}

h2
{
	padding: 9.5px 20px 9.5px 20px;
	padding-right: 10px;
	font-size: 28px;
	font-weight: 200;
	margin-top: 60px;
	margin-bottom: 20px;
	border-width: 3px;
	background: transparent;
	color: var(--light-layer-two);
	border: 3px solid var(--light-layer-two);
	box-sizing: border-box;
}

.reload-button
{
	display: flex;
	position: relative;
	height: 56px;
	top: calc(50% - 28px);
	margin: 0px auto;
	padding: 0;
	padding-left: 20px;
	padding-right: 10px;

	border-color: var(--dark-layer-one);
	background: var(--light-layer-two);
	color: var(--dark-layer-one);
	
	opacity: 0;
	z-index: 1;
	cursor: pointer;
	align-items: center;

	will-change: opacity;
	transition: var(--transition-color), 1s opacity ease-in-out;
}
/*
.indicator
{
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: 2px solid var(--light-layer-two);
	margin: auto 20px auto 20px;
	transition: .3s ease;
}

.indicator.red
{
	background: hsl(350, 75%, 50%);
}

.indicator.green
{
	background: hsl(150, 75%, 50%);
}
*/
.control-container
{
	min-width: 60%;
	width: 100%;
	top: -50px;
	margin-top: 50px;
	position: relative;
	display: grid;
	gap: 20px;
}

.control-container.grid
{
	grid-template-columns: 1fr 1fr;
}

.control-panel
{
	--background-color: rgb(60, 60, 80);
	--box-shadow: rgb(40, 40, 55);

	position: relative;
	color: var(--dark-layer-one);
	transition: var(--transition-color), .3s background-color ease-in-out, .3s box-shadow ease-in-out;
	border-width: 0;
	height: 150px;
	padding: 10px 80px;
	border-radius: 32px;
	font-size: 46px;
	letter-spacing: 20px!important;
	font-weight: 400!important;
	-webkit-tap-highlight-color: rgba(125, 125, 135, 0)!important;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
	background-color: var(--background-color);
	box-shadow: 0 4px 0 0 var(--box-shadow);

	will-change: background-color, box-shadow;
}

.control-panel::before
{
	content: '';
	background-image: var(--content), var(--content);

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;

	background-position: 30px center, calc(100% - 30px)!important;
	background-blend-mode: overlay!important;
	background-repeat: no-repeat!important;
	background-size: 46px!important;

	filter: invert(9%) sepia(10%) hue-rotate(200deg);
}
/*
.control-panel:nth-of-type(2n)
{
	background-image: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(0, 0, 0, .08) 0px, rgba(0, 0, 0, .08) 12px)!important;
}
*/
.control-panel-text
{
	padding-left: 20px;
	width: fit-content;
	width: -moz-fit-content;
	margin: 0 auto;
}

input[type='submit']
{
	--element-main-color: 145, 85%, 50%;
	--element-second-color: 165, 85%, 50%;
}

.gradient-red, .overlay-red::before, .underlay-red::after
{
	--element-main-color: 350, 95%, 60%!important;
	--element-second-color: 345, 85%, 55%!important;
}

.gradient-green, .overlay-green::before, .underlay-green::after
{
	--element-main-color: 165, 85%, 50%!important;
	--element-second-color: 145, 85%, 50%!important;
}

.gradient-blue, .overlay-blue::before, .underlay-blue::after
{
	--element-main-color: 200, 85%, 55%!important;
	--element-second-color: 220, 95%, 60%!important;
}

.gradient-cyan, .overlay-cyan::before, .underlay-cyan::after
{
	--element-main-color: 180, 95%, 60%!important;
	--element-second-color: 190, 85%, 50%!important;
}

.gradient-blue-green, .overlay-blue-green::before, .underlay-blue-green::after
{
	--element-main-color: 205, 95%, 60%!important;
	--element-second-color: 170, 90%, 50%!important;
}

.gradient-blue-purple, .overlay-blue-purple::before, .underlay-blue-purple::after
{
	--element-main-color: 200, 85%, 55%!important;
	--element-second-color: 270, 85%, 55%!important;
}

.gradient-purple, .overlay-purple::before, .underlay-purple::after
{
	--element-main-color: 280, 95%, 60%!important;
	--element-second-color: 270, 85%, 55%!important;
}

.gradient-yellow, .overlay-yellow::before, .underlay-yellow::after
{
	--element-main-color: 50, 95%, 60%!important;
	--element-second-color: 35, 85%, 55%!important;
}

.gradient-orange, .overlay-orange::before, .underlay-orange::after
{
	--element-main-color: 18, 95%, 60%!important;
	--element-second-color: 12, 85%, 55%!important;
}

.gradient-red, .gradient-green, .gradient-blue, .gradient-cyan, .gradient-blue-green, .gradient-blue-purple, .gradient-purple, .gradient-yellow, .gradient-orange, .overlay-red::before, .overlay-green::before, .overlay-blue::before, .overlay-cyan::before, .overlay-blue-green::before, .overlay-blue-purple::before, .overlay-purple::before, .overlay-yellow::before, .overlay-orange::before, .underlay-red::after, .underlay-green::after, .underlay-blue::after, .underlay-cyan::after, .underlay-blue-green::after, .underlay-blue-purple::after, .underlay-purple::after, .underlay-yellow::after, .underlay-orange::after, input[type='submit']
{
	--element-gradient: linear-gradient(to left, hsl(var(--element-second-color)) 0%, hsl(var(--element-main-color)) 100%);

	color: var(--dark-layer-one)!important;
	background: transparent;
	background-image: var(--element-gradient)!important;
	background-origin: border-box;
}

.gradient-red.striped, .gradient-green.striped, .gradient-blue.striped, .gradient-cyan.striped, .gradient-blue-green.striped, .gradient-blue-purple.striped, .gradient-purple.striped, .gradient-yellow.striped, input[type='submit'].striped
{
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 10px), var(--element-gradient)!important;
}

.gradient-red img, .gradient-green img, .gradient-blue img, .gradient-cyan img, .gradient-blue-green img, .gradient-blue-purple img, .gradient-purple img, .gradient-yellow img, .gradient-orange img
{
	filter: invert(8%) sepia(100%) hue-rotate(205deg);
}

.pulse
{
	box-shadow: 0 0 0 0 hsla(var(--element-main-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-main-color), 0.75), var(--drop-shadow);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75), var(--drop-shadow);
	}
	70%
	{
		-moz-box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0), var(--drop-shadow);
		box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0), var(--drop-shadow);
	}
	100%
	{
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0), var(--drop-shadow);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0), var(--drop-shadow);
	}
}
/*
@keyframes animationImportantHSL {
	0% {
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
	}
	35% {
		-moz-box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
		box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
	}
	70% {
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0.75);
	}
}

@keyframes animationImportantHSL {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
	}
	35% {
		-moz-box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.25);
		box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.25);
	}
	70% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.75);
	}
}

@keyframes animationImportantHSL {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0);
	}
	25% {
		-moz-box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.25);
		box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.25);
	}
	50% {
		-moz-box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.75);
		box-shadow: 0 0 0 10px rgba(245, 245, 255, 0.75);
	}
	70% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.25);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0.25);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(245, 245, 255, 0);
		box-shadow: 0 0 0 0 rgba(245, 245, 255, 0);
	}
}

@keyframes animationImportantHSL {
	0% {
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0);
	}
	25% {
		-moz-box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
		box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
	}
	50% {
		-moz-box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.5);
		box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.5);
	}
	75% {
		-moz-box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
		box-shadow: 0 0 0 10px hsla(var(--element-main-color), 0.25);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0);
		box-shadow: 0 0 0 0 hsla(var(--element-main-color), 0);
	}
}
*/
.setup-png
{
	width: 200px;
	height: 200px;
	filter: invert(100%) saturate(0%);
	margin: 0 auto;
	margin-bottom: 100px;
	display: block;
}

::-webkit-scrollbar
{
	height: auto;
	width: 26px;
	overflow: hidden;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar
{
	background: var(--light-layer-two);
	/*border-radius: 13px 0 0 13px!important;*/
	border-radius: 0;
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner
{
	background: var(--dark-layer-two);
	border: 2px solid var(--light-layer-two);
	border-radius: 26px;
	min-height: 66px;
}

textarea::-webkit-scrollbar-thumb, .scrollarea::-webkit-scrollbar-thumb, .custom-select > .select-items::-webkit-scrollbar-thumb
{
	background: transparent;
	border-radius: 0;
	border-color: transparent;
	box-shadow: inset 0 0 10px 10px var(--dark-layer-two);
}

textarea::-webkit-scrollbar-thumb, .scrollarea::-webkit-scrollbar-thumb
{
	border-width: 20px 9px 20px 12px;
}

.custom-select > .select-items::-webkit-scrollbar-thumb
{
	border-width: 20px 10.5px 20px 10.5px;
}

textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar, .custom-select > .select-items::-webkit-scrollbar-track, .custom-select > .select-items::-webkit-scrollbar, .scrollarea::-webkit-scrollbar-track, .scrollarea::-webkit-scrollbar
{
	border-radius: 0 13px 13px 0;
}

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

::-webkit-scrollbar-track
{
	background: transparent;
	border-radius: 26px;
	overflow: hidden;
}

.overlay, .overlay-bottom
{
	opacity: 0;
	position: relative;
	top: 50px;
	margin-top: -50px;
	letter-spacing: 3px!important;
	cursor: progress!important;
	filter: none!important;
}

.overlay.gradient-green
{
	cursor: default!important;
}

.overlay-bottom
{
	top: 70px;
}

.widget
{
	display: flex;
	width: 100%!important;
	background: transparent;
	outline: none;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 200;
	letter-spacing: 3px;
	box-sizing: border-box;
	box-shadow: var(--drop-shadow);
	border-width: 0;    
	color: var(--dark-layer-one);
	padding: auto;
	overflow: hidden;
	white-space: normal;
}

.widget-table
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25%, 1fr))
}

.widget-table .widget-left, .widget-table .widget-right
{
	text-align: center;
}

.widget-table .widget-right
{
	background: hsl(200, 85%, 55%)!important;
}

.widget-table .widget-right:nth-child(2n)
{
	background: hsl(200, 85%, 45%)!important;
}

.widget-table .widget-left:nth-child(2n)
{
	background: rgb(55, 55, 70)!important;
}

.widget-left, .widget-right
{
	height: auto;
	border-radius: 0;
	padding: 9px 20px;
	width: 50%;
	box-shadow: none!important;
	letter-spacing: 3px!important;
	margin: 0px!important;
	line-height: 2;
}

.widget-left
{
	text-align: left;
	text-transform: uppercase;
}

.widget-right
{
	text-align: right;
}

.widget-right.left
{
	text-align: left;
}

.widget-left.right
{
	text-align: right;
}

#widgets, .widgets
{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

#widgets .widget, .widgets .widget
{
	flex-basis: 100%;
	flex-grow: 1;
	min-width: max-content;
}

#widgets.two .widget, .widgets.two .widget
{
	flex-basis: calc(100% / 2 - 20px / 2);
}

#widgets.three .widget, .widgets.three .widget
{
	flex-basis: calc(100% / 3 - 20px / 3 * 2);
}

#widgets.four .widget, .widgets.four .widget
{
	flex-basis: calc(100% / 4 - 20px / 4 * 3);
}

.panel
{
	border: 1px solid rgba(128, 128, 128, 0.1);
	background: rgb(40, 40, 55);
	padding: 20px;
	border-radius: 32px;
	transition: var(--transition-color), 0s color;
}

#footer-content
{
	border: 1px solid rgba(245, 245, 255, .015);
}

#devices, #plugin-container, #automation-infos, #settings-form, #automation, #automation-create-form, #config-editor, #service-form, #settings-form-main, #bridge-container, #editor-form
{
	display: flex;
	flex-direction: column;
	gap: 50px;
}

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

#devices button, #groups button, #status button
{
	letter-spacing: 3px!important;
}

#devices button, #status button
{
	border: 1px solid rgba(128, 128, 128, 0.1);
	box-shadow: none;
	display: flex;
}

.name-connection
{
	display: flex;

	width: calc(100% - 34px);
	height: 100%;

	order: 0;
}

.device-name
{
	margin: auto 0;
	margin-right: auto;
	order: 0;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.connection
{
	margin: auto 0;
	margin-left: 10px;
	
	font-size: 14px;
	
	text-transform: uppercase;
	text-align: right;

	order: 1;

	transition: .3s color;
}

#devices.grid-view input[type='button'], #devices.grid-view button
{
	height: 100px;
}
/*
#devices.grid-view input[type='button'].update
{
	width: 175px!important;
}
*/
#devices.grid-view .device-container
{
	flex-flow: wrap;
}

#devices.grid-view .device-container button
{
	flex-basis: calc(33.33% - 13.33px);
	flex-shrink: 0;
	flex-grow: 1;
}

#devices.grid-view .name-connection
{
	/* width: calc(100% - 65px); */
	width: calc(100% - 62px);

	flex-direction: column;
	
	order: 1;
}

#devices.grid-view .connection
{
	margin: 0;
	margin-top: auto;
	margin-bottom: 5px;

	text-align: left;

	order: 0;
}

#devices.grid-view .device-name
{
	order: 1;
	margin: 0;
	/* margin-bottom: 10px; */
	margin-bottom: auto;
	max-height: calc(100% - 41px);
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

#devices.grid-view .accessory-img
{
	right: 0;
	height: 50%;
	order: 0;
	margin-left: 0;
	margin-right: auto;
}

.accessory-img
{
	filter: invert(8%) sepia(100%) hue-rotate(205deg);
	height: 65%;
	margin: auto 0;
	right: -4px;
	position: relative;
	margin-left: auto;
	transition: none;

	order: 1;
}

.image-button
{
	width: 50px!important;
	padding: 12px;
}

.image-button img
{
	transform: scale(.8);
}

.title-container
{
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	min-height: 50px;
	padding: 8px;
	padding-right: 10px;
	padding-left: 20px;
	background: var(--dark-layer-one);
	border-radius: 16px;
	border: none;
}

#activity
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.graph
{
	position: relative;
	border-radius: 32px;
	height: 300px;
	overflow: hidden;
	border: 2px solid rgb(60, 60, 80);
	color: rgb(150, 150, 170);
}

canvas
{
	border-radius: 32px;
	position: relative;
	transition: 1s opacity;

	will-change: opacity;
}

.graph .min, .graph .max, .graph .update, .graph .updates, .graph .name
{
	position: relative;
	z-index: 1;
	letter-spacing: 3px;
	font-weight: 300;
	opacity: 0;
	transition: 1s;
	margin-top: -19.2;
}

.graph .name
{
	opacity: 1;
}

.graph canvas
{
	position: absolute;
	top: 0;
}

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

#groups
{
	overflow: hidden;
	overflow-x: overlay;
	background: var(--light-layer-two);
	border-radius: 16px;
	height: 50px;
	box-sizing: border-box;
	border: 2px solid var(--light-layer-two);
}

#groups::-webkit-scrollbar-track, #groups::-webkit-scrollbar
{
	display: none;
}

#groups button
{
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	opacity: 1!important;
	min-width: 170px;
	margin: 0!important;
	border-left: 1px solid rgb(160, 160, 180);
	border-right: 1px solid rgb(160, 160, 180);
	border-radius: 0;
	padding: 5px 10px 5px 13px;
	height: auto;
	cursor: grab;
}

#groups button:last-child
{
	border-radius: 0 14px 14px 0;
	border-right-width: 0;
}

#groups button:first-child
{
	border-radius: 14px 0 0 14px;
	border-left-width: 0;
}

#groups .active
{
	border-style: solid;
	/*background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 10px)!important;*/
}

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

button img
{
	pointer-events: none;
}

.custom-select
{
	position: relative;
	box-sizing: border-box;
}

.select-selected, select
{
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	outline: none!important;
	text-align: left;
	padding: 12.5px 40px 12.5px 20px;
	cursor: pointer;
}

.select-selected img, .custom-select > .select-items img
{
	pointer-events: none;
	filter: invert(95%) sepia(10%) hue-rotate(200deg);
	height: 23px;
	margin-right: 14px;
	position: relative;
	z-index: 2;
}

.icon
{
	filter: invert(95%) sepia(10%) hue-rotate(200deg);
}

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

.select-selected:after
{
	position: absolute;
	content: "";
	top: 23px;
	right: 23px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	z-index: 2;
	border-color: var(--light-layer-two) transparent transparent transparent;
	transition: var(--transition-color), 0s border-color;
}

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

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

.custom-select > .select-items
{
	background: var(--light-layer-one);
	z-index: 25000;
	position: absolute;
	border-radius: 16px;
	top: 70px;
	left: 0;
	right: 0;
	max-height: 600px;
	overflow: hidden;
	overflow-y: auto;
	height: auto;
	border-width: 0;
	padding: 0;
	opacity: 1;
	transition: var(--transition-color), var(--transition-normal) opacity ease-out;

	will-change: opacity;
}

.custom-select.on-top > .select-items
{
	top: auto;
	bottom: 70px;
}

.custom-select > .select-items .select-item
{
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 13px 23px;
	text-align: left;
	background: var(--light-layer-one);
	color: var(--dark-layer-one);
	line-height: 24px;
}

.custom-select > .select-selected .select-search
{
	color: var(--dark-layer-one);
	background: transparent;
	box-shadow: none;
	position: absolute;
	border: none;
	left: 0;
	padding-left: 52px;
	z-index: 1;
}

.custom-select select
{
	display: none;
}

.select-hide
{
	opacity: 0!important;
	pointer-events: none!important;
}

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

select:not([multiple]).same-as-selected
{
	cursor: default!important;
}

.automation-color-container
{
	display: grid;
	gap: 20px;
}

.table
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
	line-height: 24px;
	padding: 0;
	pointer-events: none;
	height: auto;
	background: transparent;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	font-weight: 200;
	letter-spacing: 3px;
}

.table .column
{
	display: flex;
	background: rgb(60, 60, 80);
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
}

.table .column:last-of-type
{
	margin-bottom: 0;
}

.table .primary
{
	flex-shrink: 0;
	min-width: max(calc(100% / 4 - 42px), 141px);
	background: rgb(75, 75, 100);
	padding: 13px 17px 13px 20px;
	text-align: center;
	text-transform: uppercase;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition-normal) background-color ease-in-out;
}

.table .secondary
{
	display: grid;
	gap: 13px;
	padding: 13px;
}

.table .secondary div
{
	word-break: break-all;
	word-break: break-word;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.table .icon
{
	height: 24px;
	margin-right: 12px;
	position: relative;
	filter: invert(8%) sepia(100%) hue-rotate(205deg);
}

.vertical-view .table
{
	flex-direction: row;
	align-items: stretch;
}

.vertical-view .table .column
{
	flex-direction: column;
}

.vertical-view .table .column:last-of-type
{
	margin-right: 0;
}

.vertical-view .table .primary
{
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	max-width: none;
}

.plugin-container
{
	min-height: 50px;
	transition: .3s ease-in-out height, var(--transition-color)!important;
	letter-spacing: 3px!important;

	line-height: 2;
	overflow: hidden;
	padding: 9px 20px;
	text-align: left;

	will-change: height;
}

.plugin-container b
{
	font-weight: 200;
}

.update-status
{
	min-width: 160px;
	text-align: center;
	height: 32px;
	position: relative;
	right: -11px;
	border-radius: 12px;
	box-sizing: border-box;
	padding-left: 3px;
	transition: var(--transition-color), var(--transition-normal) background-color ease-out, var(--transition-normal) color ease-out;
	text-transform: uppercase;
}

.expandable-hidden
{
	opacity: 0;
	transition: var(--transition-color), .3s linear opacity;

	will-change: opacity;
}

.shine
{
	position: relative;
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
}

.shine:before, .shine:after
{
	animation: shine 2s ease-in-out infinite;
	animation-fill-mode: forwards;  
	content: "";
	position: absolute;
	top: 0;
	left: -210%;
	width: 200%;
	height: 100%;
	opacity: 0;
	/*transform: rotate(30deg);*/
	background-image: linear-gradient(
		to right, 
		rgba(255, 255, 255, 0.0) 0%,
		rgba(255, 255, 255, 0.06) 77%,
		rgba(255, 255, 255, 0.18) 92%,
		rgba(255, 255, 255, 0.0) 100%
	);

	will-change: left, opacity;
}

.shine:before
{
	animation: shine 2s ease-in-out infinite .8s;
}

@keyframes shine
{
	5% {
		opacity: 0.5;
	}
	25% {
		opacity: 1;
		transition-property: left, opacity;
		transition-duration: 0.7s, 0.15s;
		transition-timing-function: ease;
	}
	100% {
		opacity: 0;
		left: 20%;
		transition-property: left, opacity;
	}
}

.icon-button
{
	display: flex;
	padding: 5px;
}

.icon-button .button-icon
{
	padding: 8px;
	box-sizing: border-box;
	height: 100%;
}

.icon-button .button-icon.white
{
	background: var(--light-layer-two)!important;
}

.icon-button.split.arrow .button-icon, .icon-button.round .button-icon
{
	background: rgb(80, 80, 100);
}

.icon-button.round .button-icon
{
	border-radius: 12px;
}

.button-icon img
{
	height: 100%;
}

.button-text
{
	width: 100%;
	text-align: center;
	margin: auto 0;
}

.icon-button.split
{
	position: relative;
	padding: 0;
}

.icon-button.split .button-icon
{
	padding: 12px 20px;
}

.icon-button.split.left .button-icon
{
	padding-right: 18px;
	border-radius: 16px 0 0 16px;
}

.icon-button.split.right .button-icon
{
	padding-left: 18px;
	border-radius: 0 16px 16px 0;
}

.icon-button.split.arrow .button-text, .icon-button.split.layer .button-text
{
	text-align: center;
}

.icon-button.split.arrow .button-icon:after
{
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	background: rgb(80, 80, 100);
	top: 19px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.icon-button.split.arrow.left .button-icon:after
{
	left: 57px;
}

.icon-button.split.arrow.right .button-icon:after
{
	right: 57px;
}

.icon-button.left .button-icon
{
	margin-right: 20px;
}

.icon-button.right .button-icon
{
	margin-left: 20px;
}

.icon-button.split.arrow .button-icon.red, .icon-button.split.arrow .button-icon.red:after
{
	background: hsl(345, 85%, 55%);
}

.icon-button.split.separated
{
	padding: 5px;
}

.icon-button.split.separated .button-icon
{
	padding: 8px 20px;
}

.icon-button.split.separated.right .button-icon
{
	border-left: 3px solid rgb(20, 20, 30);
	padding-right: 18px;
}

.icon-button.split.separated.left .button-icon
{
	border-right: 3px solid rgb(20, 20, 30);
	padding-left: 18px;
}

.icon-button.split.layer .button-icon
{
	padding: 13px 23px;
}

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

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

.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%);
}

.icon-button.left
{
	padding-right: 20px!important;
}

.icon-button.right
{
	direction: rtl;
	padding-left: 20px!important;
}

.button-icon.colored
{
	background-color: rgb(245, 245, 255);
}

.icon-button.compact .button-icon
{
	padding-right: 0;
	padding: 9px;
}

.icon-button.compact .button-text
{
	width: auto;
}

.icon-button.compact.left .button-icon
{
	margin-right: 14px;
	padding-right: 0!important;
}

.icon-button.compact.right .button-icon
{
	margin-left: 11px;
	padding-left: 0!important;
}

.icon-button.compact.left .button-text
{
	margin-right: auto;
}

.icon-button.compact.right .button-text
{
	margin-left: auto;
}

.icon-button.compact.center.left .button-icon
{
	margin-left: auto;
}

.icon-button.compact.center.right .button-icon
{
	margin-right: auto;
}

.inline-button
{
	text-align: center;
	padding: 5px;
	position: relative;
	margin-top: -5px;
	margin-bottom: -5px;
	box-sizing: border-box;
	width: auto;
}

.log
{
	margin-bottom: 20px;
	transition: .3s opacity ease-in-out;
	opacity: 0;

	will-change: opacity;
}

.log:last-child
{
	margin-bottom: 0;
}

.log-message
{
	white-space: break-spaces;
	line-height: 30px;
	padding: 5px 10px;
	border-radius: 0 0 8px 8px;
}

.log-title
{
	display: flex;
	background:rgb(40, 40, 55);
	border-radius: 8px 8px 0 0;
	padding: 10px;
	font-size: 14px;
}

.log-title div:first-of-type
{
	margin-right: auto;
}

.log-title div:last-of-type
{
	margin-left: auto;
	text-align: right;
	width: calc(100% - 140px);
}

.log-title div:first-of-type, .log-title div:last-of-type
{
	height: min-content;
	margin: auto 0;
}

#networks
{
	margin-bottom: 100px;
}

#dialogue
{
	background: rgba(0, 0, 10, .6);
	display: flex;
	position: fixed;
	height: 100vh;
	width: 100%;
	top: 0;
	transition: var(--transition-color), .3s ease-in-out opacity;
	z-index: 30000;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(2px);

	will-change: opacity;
}

#dialogue .content
{
	width: max(600px, 50%);
	max-width: calc(100% - 40px);
	box-sizing: border-box;
	background-color: rgb(40, 40, 55);
	margin: auto;
	border-radius: 32px;
	padding: 20px;

	border: 3px solid rgb(60, 60, 80);
	box-shadow: var(--drop-shadow);

	transform-style: preserve-3d;
	transition: var(--transition-color), .3s cubic-bezier(0.68, -0.55, 0.27, 1.55) transform, .3s ease-in-out opacity;

	will-change: transform, opacity;
}

#dialogue p
{
	margin: 50px auto;
}

#dialogue h2
{
	border: 3px solid rgb(60, 60, 80);
}

#dialogue .button-area
{
	display: flex;
}

#dialogue .button-area div
{
	margin-right: 20px;
}

#dialogue .button-area div:last-of-type
{
	margin-right: 0;
}

.gradient-overlay
{
	position: relative;
	z-index: 1;
}

.gradient-overlay::before, .gradient-overlay::after
{
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transition: opacity .2s linear;
	opacity: 0;
	border-radius: 16px;

	will-change: opacity;
}

.gradient-overlay.activated::before
{
	opacity: 1!important;
}

.gradient-overlay.deactivated::after
{
	opacity: 1!important;
}

#top-menu
{
	display: flex;
	position: fixed;
	top: env(safe-area-inset-top);
	left: env(safe-area-inset-left);
	z-index: 30000;
	transition: .2s opacity ease-in-out;
	padding: 20px;
	height: 100%;
	width: 90px;
	box-sizing: border-box;
	flex-direction: column;

	will-change: opacity;
}

#top-menu button
{
	width: 50px!important;
	height: 50px;
	padding: 14px;
	box-shadow: none;
	transition: var(--transition-color);
}

#top-menu > div
{
	display: flex;
	margin-bottom: 20px;
}

#connection-status
{
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	font-weight: 300;
	width: 200px;
	margin: 0 auto;
	text-transform: uppercase;
	letter-spacing: 6px;
	font-size: 24px;
	padding-left: 6px;
	box-sizing: border-box;
}

.color-picker
{
	position: absolute;
	z-index: 10;
	border: none;
	box-shadow: none;
	height: 100%;
	cursor: pointer;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.color-picker::-webkit-color-swatch-wrapper
{
	padding: 0;
}

.color-picker::-webkit-color-swatch
{
	display: none;
}

#status
{
	height: 100px;
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: visible;
	border-radius: 16px;
}

.hidden:not(#head-content, #head-content > *, #footer-content, #footer-content > *, #top-menu, #top-menu > *, #dialogue)
{
	display: none!important;
}

#status::-webkit-scrollbar-track, #status::-webkit-scrollbar
{
	display: none;
}

#status button
{
	display: flex;
	align-items: center;
	height: 100%;
	width: fit-content!important;
	flex-shrink: 0;
	flex-grow: 1;
	box-shadow: none;
}

#status img
{
	filter: invert(8%) sepia(100%) hue-rotate(205deg);
	height: calc(100% - 50px);
	margin-right: 20px;
}

#status .state
{
	text-transform: uppercase;
}

#trigger .groups, #trigger .blocks, #result, #result .blocks, #trigger .group
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#trigger .groups:empty, #trigger .blocks:empty, #result .blocks:empty
{
	display: none;
}

#trigger .group
{
	background-color: rgb(60, 60, 80);
	border-radius: 36px;
	padding: 20px;
}

#trigger #group-logic, #trigger .block-logic
{
	flex-shrink: 0;
	width: 130px!important;
	max-width: 130px;
	padding-right: 17px;
	text-transform: uppercase;
}

#trigger .block, #result .block
{
	display: grid;
	gap: 20px;
	grid-template-columns: calc(50% - 10px) calc(20% - 50px) calc(30% - 100px) 100px;
}

#trigger .control, #result .control
{
	display: flex;
	border-radius: 16px;
	justify-content: space-between;
	background-color: var(--light-layer-two);
}

#trigger .control .image-button, #result .control .image-button
{
	box-shadow: none;
	border: 3px solid var(--light-layer-two);
}

#trigger .control .image-button img, #result .control .image-button img
{
	transform: none;
}

#trigger .control .image-button:first-child, #result .control .image-button:first-child
{
	float: left;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#trigger .control .image-button:last-child, #result .control .image-button:last-child
{
	float: right;
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#trigger .bottom
{
	display: flex;
	gap: 20px;
}

.panel .panel-content
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.panel .panel-content.padding
{
	padding: 20px;
}

.page
{
	transition: .2s opacity ease-in-out;
}

#main-menu
{
	width: 49%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 auto;
	margin-bottom: 100px;
}

#main-menu button
{
	text-transform: uppercase;
}

#toolbar
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 100px auto;
	margin-bottom: 0;
}

#toolbar #groups
{
	display: flex;
	width: 100%;
}

#automation, #devices
{
	margin-top: 100px;
	transition: .2s opacity ease-in-out;
}

#automation:empty, #devices:empty
{
	margin: 0;
}

#automation .widget
{
	box-shadow: none;
}

#no-automation, #no-accessories
{
	margin-top: 100px;
}

#device-controls
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 20px 0px;
	transition: margin-bottom 0.2s ease-out 0s;
}

input[type="color"]
{
	padding: 0;
	overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper
{
	padding: 0;
}

input[type="color"]::-webkit-color-swatch
{
	border: none;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 10px), linear-gradient(to top, rgba(0, 0, 0, .2) 0%, rgba(255, 255, 255, .2) 100%);
	background-origin: border-box;
}

input[type="time"]::-webkit-calendar-picker-indicator
{
	display: none;
}

input[type="time"]::-webkit-date-and-time-value
{
	text-align: left;
}

.label-input
{
	display: flex;
	align-items: center;
	cursor: pointer;
	text-align: left;
	gap: 20px;
}

input[type="checkbox"]
{
	position: relative;
	cursor: pointer;
	width: 50px!important;
	height: 50px!important;
	margin: 0;
	padding: 0;
	flex-shrink: 0;

	will-change: background-color;
}

input[type="checkbox"]::before
{
	position: absolute;
	content: '';
	height: 100%;
	left: 0;
	top: 0;
	background: url('/img/confirm.png');
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(100% - 20px);

	filter: invert(8%) sepia(100%) hue-rotate(205deg);
	opacity: 0;
	transition: .2s opacity ease-in-out;
	will-change: opacity;
}

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

input[type="checkbox"]:checked::before
{
	opacity: 1;
}

#dialogue form
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#dialogue.hidden
{
	pointer-events: none;
	opacity: 0;
}

#dialogue.hidden .content
{
	transform: scale(.8);
	opacity: 0;
}

@media only screen and (min-width: 1177px)
{
	#content
	{
		margin-top: 100px!important;
		margin-bottom: 20px;
	}

	#footer-content, #head-content
	{
		min-height: auto!important;
		max-height: none!important;
	}

	#head-content.fade-out, #footer-content.fade-out
	{
		opacity: 0;
	}

	#footer-temp, #head-temp
	{
		display: none;
	}

	#footer-content.fade
	{
		opacity: 0;
	}

	.control-container.grid .control-panel::before
	{
		background-position: 20px center, calc(100% - 20px)!important;
		background-size: 40px!important;
	}

	.control-container.grid .control-panel
	{
		padding: 10px 60px;
	}

	#head-content.hidden, #footer-content.hidden, #top-menu.hidden
	{
		display: none;
	}
}