body, html{
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	justify-content: stretch;
	width: 100%;
	height: auto;
	min-height: 100%;

	--litegrey:#F8F8F8;
	--grey:#2d2d2d;
	--darkgrey:#111111;
	--liteblue:#e9f5f9;
	--blue:#80cbe0;
	--darkblue:#29a1c8;
	--gold:#65513c; /*#958574;*/
	--litegold:#958574;
	--red:#E02645;
	--yellow:#E0D826;
	--green:#7CE026;

	--bgPlain:#FFFFFF;
	--bgColor:#fbfbfb;
	--fgColor:var(--darkgrey);
	--btnColor:var(--gold);

	--normalText: normal normal normal 1rem/1em "Open Sans", Arial, sans-serif;
	--titleText: normal normal bold 1rem/1em "Open Sans", Arial, sans-serif;
	--inputText: normal normal normal 1rem/1em "Open Sans", Arial, sans-serif;
	--labelText: normal normal bold .8rem/1em "Open Sans", Arial, sans-serif;
	--buttonText: normal normal normal 1.33rem/1em "Open Sans", Arial, sans-serif;

	--padding:50px;
	--halfpadding:25px;

	--tablepadding:10px;

	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;

	background: var(--bgColor);
	color: var(--fgColor);
}
html{
	height: 100%;
}

div.ctn{
	width: 90vw;
	max-width: 1900px;
	margin: 0 auto;
}

div.ctn.full{
	width: auto;
	max-width: none;
	padding-left:calc(var(--padding) - 25px);
	padding-right:calc(var(--padding) - 25px);
}

div.ctn.medium{
	max-width: 1400px;
}

div.ctn.small{
	display: flex;
	flex-direction: column;
	max-width: 1000px;
	flex: 1 1 auto;
	justify-content: center;
}

/*UI*/

.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1em;
}
.flex.top{
	align-items: start;
}
.flex.fill{
	align-items: stretch;
}

.half{
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
	margin-bottom: 1em;
}
.half.fill{
	align-items: stretch;
}

	.half>*{
		width: 1 1 50%;
		width: 100%;
	}

.third{
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
	margin-bottom: 1em;
}

	.third>*{
		width: 1 1 33.333%;
		width: 100%;
	}

.quarts{
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
	margin-bottom: 1em;
}

	.quarts>*{
		width: 1 1 25%;
		width: 100%;
	}

.flex:last-child,
.half:last-child,
.third:last-child,
.quarts:last-child{
	margin-bottom: 0;
}

/*
.half+.flex,
.half+.half,
.half+.third,

.flex+.flex,
.flex+.half,
.flex+.third,

.third+.flex,
.third+.half,
.third+.third{
	margin-top: 1rem;
}*/


hr{
	display: block;
	margin:1rem 0;
	padding: 0;
	border:none;
	width: 100%;
	height: 2px;
	background: var(--btnColor);
}

a{
	color: var(--btnColor);
}

img{
	display: block;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
	line-height: 1em;
}

h1{
	font-size: 2rem;
}
h2{
	font-size: 1.75rem;
}
h3{
	font-size: 1.5rem;
}
h4{
	font-size: 1rem;
}
h5{
	font-size: 1rem;
}
h6{
	font-size: 1rem;
}

header h1:last-child,
header h2:last-child,
header h3:last-child,
header h4:last-child,
header h5:last-child,
header h6:last-child,
header p:last-child{
	margin-bottom: 0;
}

p{
	line-height: 1.2em;
}

	h1 span,
	h2 span,
	h3 span,
	h4 span,
	h5 span,
	h6 span{
		font-weight: normal;
		font-size: .8em;
		opacity: .75;
	}

/* HEADER */

body>header{
	--gold: var(--litegold);
	--btnColor: var(--litegold);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 0;

	background: var(--darkgrey);
	color: #bbbbbb;
	color: #ffffff;

	box-sizing: border-box;
	border-bottom: 2px solid var(--blue);

	z-index: 50;
}
body>header+*{
	margin-top: 72px;
}

	body>header>div.ctn{
		display: flex;
		gap: var(--padding);
		justify-content: space-between;
	}

		body>header a{
			color: #FFFFFF;
			text-decoration: none;
		}
		body>header a:hover{
			color: var(--blue);
		}
		body>header a.active{
			pointer-events: none;
			text-decoration: underline;
			text-decoration-color: var(--btnColor);
			text-decoration-thickness: 2px;
		}

		body>header>div>a#logo{

		}

			body>header>div>a#logo>img{
				width: auto;
				height: 50px;
			}

		body>header>div>nav{
			display: flex;
			gap: 25px;
			align-items: center;
		}

			body>header>div>nav>ul{
				display: block;
				list-style: none;
				margin: 0;
				padding: 0;

				display: flex;
				gap: 25px;
			}

				body>header>div>nav>ul>li{
					display: block;
				}

			body>header>div>nav>#user{
				background: var(--gold);
				box-shadow: inset 0 6px 0 9px var(--grey), inset 0 0 0 5px var(--grey);
				border-radius: 100%;
			}
			body>header>div>nav>#user:hover::before,
			body>header>div>nav>#user.hover::before{
				border-color: var(--blue);
			}

				body>header>div>nav>#user::after{
					content: "";
					display: block;
					position: absolute;
					top: 7px;
					left: 50%;
					transform: translateX(-50%);
					width: 10px;
					height: 10px;
					background: var(--gold);
					border-radius: 100%;
				}

				body>header>div>nav>#user::before{
					content: "";
					display: block;
					width: 2rem;
					height: 2rem;
					border:2px solid currentColor;
					border-radius: 100%;
				}

			body>header>div>nav>#user:hover{

			}

				body>header>div>nav>#user:hover::after{
					animation: nod 1s ease-in-out;
				}

				@keyframes nod {
					0%, 100% {
						transform: translate(-50%, 0);
					}
					25% {
						transform: translate(-50%, -1px);
					}
					50% {
						transform: translate(-50%, 1px);
					}
					75% {
						transform: translate(-50%, -1px);
					}
				}



/* box */

div.box{
	background: #FFF;
	border-radius: 5px;
	border:2px solid #EEE;
	padding: var(--halfpadding);
	box-sizing: border-box;
}
div.box+div.box{
	margin-top: 1rem;
}

	div.box header{
		margin: calc(var(--halfpadding) * -1);
		margin-bottom: var(--halfpadding);
		padding: var(--halfpadding) var(--halfpadding);

		background: #EEE;

		display: flex;
		justify-content: space-between;
	}

	div.box footer{
		margin: calc(var(--halfpadding) * -1);
		margin-top: var(--halfpadding);
		padding: var(--halfpadding) var(--halfpadding);

		background: #EEE;

		display: flex;
		flex-wrap: wrap;
		justify-content: end;
		gap: 10px;
	}

/* wifi */

.wifi{
	width: 20px;
	height: 20px;

	font-size: 18px;

	position: relative;

	transform: translateY(-18%);
}

	.wifi::before,
	.wifi::after{
		content: "\e90e";

		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column-reverse;
		align-items: center;

		font-family: 'icomoon' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.wifi::before{
		opacity: .25;
	}

	.wifi::after{
		overflow: hidden;
		border-radius: 100%;
/*		background: red;*/
	}

.wifi.lv1::after{
	height:32%;
}
.wifi.lv2::after{
	height:59%; /* was 55 */
}

.wifi.error::after{
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 2px;
	height: 13px;
	background: black;
/*	border:2px solid var(--litegrey);*/
	border-radius: 0;
	transform: translateX(-50%);
	background-image: linear-gradient(to top, black 2px, var(--litegrey) 2px, white 4px, black 4px);
	box-shadow: 0 0 0 2px var(--litegrey);
}

.wifi.none::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 15px;
	background: black;
/*	border:2px solid var(--litegrey);*/
	border-radius: 0;
	transform: translate(-50%, -50%) rotate(-40deg);
	box-shadow: 0 0 0 2px var(--litegrey);
}



/* dd */

div.dd{
	position: relative;
	z-index: 20;

	--offset:2rem;

	transition: z-index 0s .5s;
}

		div.dd>.menu{
			position: absolute;
			top: 100%;
			right: 50%;
			margin: 0;
			padding: 0;
			border-radius: 5px;
			list-style: none;
			transform: translate(var(--offset), 5px);
			border: 2px solid var(--blue);
			background: #FFFFFF;
			padding: 6px 10px;

			max-width: 70vw;
/*			display: none;*/

			pointer-events: none;
			opacity: 0;
			scale: 1 .8;
			translate: 0 -10px;
			transform-origin:100% -10px;
		}
		.js div.dd>.menu{
			transition: opacity .5s .3s, scale .5s .3s, translate .5s .3s;
		}

			div.dd>.menu::before{
				content: "";
				display: block;
				position: absolute;
				top: -15px;
				left: 100%;
				background: #FFFFFF;
				width: 17px;
				height: 17px;
				transform: translateX(calc(var(--offset) * -1 + 2px)) rotate(45deg);
				transform-origin: 0 0;
				border-radius: 5px 0 100% 0;
				border: 2px solid var(--blue);
				border-bottom: 0;
				border-right: 0;
			}

			div.dd>.menu::after{
				content: "";
				display: block;
				position: absolute;
				top: -15px;
				left: 0;
				right: 0;
				height: 15px;

			}

	div.dd:hover,
	div.dd.hover{
		cursor: pointer;
		z-index: 21;

		transition: none;
	}

		div.dd:hover>.menu,
		div.dd.hover>.menu{
/*			display: block;*/

			pointer-events: auto;
/*			transform: scale(1);*/
			opacity: 1;
			scale:1;

			translate: 0;
		}

		.js div.dd:hover>.menu,
		.js div.dd.hover>.menu{
			transition: opacity .3s, scale .3s, translate .3s;
		}

	.dd>ul.menu{
		padding: 0;
	}

		.dd>ul.menu>li{
			border-top: 2px solid var(--blue);
			display: flex;
		}
		.dd>ul.menu>li:first-child{
			border-top: 0;
		}

			.dd>ul.menu>li>a,
			.dd>ul.menu>li>span{
				display: block;
				padding: 6px 10px;
				color: #000000;

				flex: 1 1 auto;

				white-space: nowrap;
				z-index: 2;
			}
			.dd>ul.menu>li>a:first-child:last-child:hover{
				background: var(--blue);
			}

			.dd>ul.menu>li>a.asc,
			.dd>ul.menu>li>a.desc{
				flex: 0 0 auto;
				text-decoration: none;
				padding: 3px;
				margin: 3px;
				border-radius: 100%
			}
				.dd>ul.menu>li>a.asc::before,
				.dd>ul.menu>li>a.desc::before{
					content: "\e90c";
					display: block;

					/* use !important to prevent issues with browser extensions that change fonts */
					font-family: 'icomoon' !important;
					speak: never;
					font-style: normal;
					font-weight: normal;
					font-variant: normal;
					text-transform: none;

					/* Better Font Rendering =========== */
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;

					font-size: 1.5rem;
					text-indent: 0;
				}
				.dd>ul.menu>li>a.asc::before{
					transform: scaleY(-1);
				}
			.dd>ul.menu>li>a.asc:hover,
			.dd>ul.menu>li>a.desc:hover{
				background: var(--blue);
			}



	.dd:hover>ul.menu,
	.dd.hover>ul.menu{

	}

		.dd>ul.menu:has(>li:first-child>a:first-child:last-child:hover)::before{
			background: var(--blue);
		}





/* info */

div.info{
	align-self: start;
}

	div.info::after{
		font-size: 20px;
		line-height: 20px;

		display: block;
		color: var(--darkblue);

		content: "\e905";

		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	div.info:hover{

	}

		div.info:hover::after{
			content: "\e912";
		}

/* messages */

ul.messages{
	display: block;
	list-style: none;
/*	margin: calc(var(--padding) * -1);*/
	margin: calc(var(--halfpadding) * -1);
	margin-bottom: 0;
	padding: 0;
}

	ul.messages>li,
	div.message{
		margin-top: 1rem;
		text-align: left;
		--bg:#888;
		--fg:#000;
	}

	ul.messages>li:first-child,
	div.message{
		margin-top: 0;
	}

	div.message+div.message{
		margin-top: 1rem;
	}

	ul.messages>li.error,
	div.message.error{
		--bg: var(--red);
		--fg: #FFF;
	}
	ul.messages>li.warning,
	div.message.warning{
		--bg: var(--yellow);
	}
	ul.messages>li.ok,
	div.message.ok{
		--bg: var(--green);
	}

		ul.messages>li>h2,
		div.message>h2{
			background: var(--bg);
			color: var(--fg);
			font: var(--titleText);
			text-transform: uppercase;
			padding: 20px var(--halfpadding);
			border-radius: 5px 5px 0 0;
			margin-bottom: 0;
		}

		ul.messages>li>div,
		div.message>div{
			background: #FFFFFF;
			border:2px solid var(--bg);
			padding: 20px var(--halfpadding);
			border-radius: 0 0 5px 5px;
			border-top:0;
			overflow: hidden;
		}

			ul.messages>li>div>p:last-child,
			div.message>div>p:last-child{
				margin-bottom: 0;
			}


			ul.messages>li>div>footer,
			div.message>div>footer{
				background: var(--litegrey);
				padding: 10px var(--halfpadding);
				margin: 20px calc(var(--halfpadding) * -1) -20px calc(var(--halfpadding) * -1);
			}

/* spec */

ul.spec{
	list-style: none;
	display: flex;
/*	flex-wrap: wrap;*/
	gap: var(--halfpadding);
	gap: max(var(--halfpadding), 1.5rem);
	margin: 0;
	padding: 0;

/*	flex-wrap: wrap;*/
}

	ul.spec>li{
		white-space: nowrap;
	}
	

		ul.spec>li>label{
			font: var(--labelText);
			text-transform: uppercase;
			margin: 0;
			padding: 0;
			white-space: nowrap;
			margin-bottom: .5rem;
		}

			ul.spec>li>label>span{
				position: static;
				font-weight: normal;
				margin: 0;
				display: inline;
				font-size: .8em;
			}

		ul.spec>li>span{
			
		}

		ul.spec>li span.unit{
			opacity: .5;
			font-size: .8em;
		}


/* grid */

ul.grid{
	list-style: none;
	display: flex;
	flex-wrap: wrap;

/*	margin: calc(var(--halfpadding) * -1);*/
/*	margin-top: var(--halfpadding);*/
/*	margin-bottom: 0;*/
	margin: var(--halfpadding);
	padding: 0;

	text-align: center;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

	ul.grid>li{
		position: relative;
		background: var(--litegrey);
		border-radius: 5px;
		padding: var(--halfpadding);
		box-shadow: inset 0 0 0 2px #EEE;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/*
	ul.grid>li{
		transition: transform .3s;
	}
	ul.grid:has(li:hover)>li{
		opacity: .5;
		transform: scale(.9);
	}
	ul.grid:has(li:hover)>li:hover{
		opacity: 1;
		transform: scale(1.1);
	}
	*/

		ul.grid>li>label{
			font: var(--labelText);
			text-transform: uppercase;
			margin: 0;
			padding: 0;
		}

			ul.grid>li>label>span{
				font-weight: normal;
				font-size: .8;
				position: static;
				display: inline;
				opacity: .8;
			}

		ul.grid>li>div.icon{
			position: relative;
			width: 7rem;
			height: 7rem;
/*			border-radius: 100%;*/
/*			background: fuchsia;*/
			margin: 10px auto;

			display: flex;
			align-items: center;
			justify-content: center;
		}

			ul.grid>li>div.icon::after{
				font-size: 75px;
				color: var(--gold);
			}

			ul.grid>li>div.icon>div{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 3px 5px;
/*				background: var(--darkgrey);*/
				color: #FFF;
				border-radius: 100px;
				white-space: nowrap;

/*				background-color: rgba(17,17,17,0.8);*/
/*				box-shadow: inset 0 0 0 2px #FFFFFF, 2px 2px 10px #000000;*/
/*				backdrop-filter: saturate(1.8) blur(5px);*/
/*				-webkit-backdrop-filter: saturate(1.8) blur(5px);*/

				background: var(--litegrey);
				background: color-mix(in srgb, var(--litegrey) 90%, transparent);

				color: var(--gold);
				font: var(--labelText);
				text-transform: uppercase;

				border:2px solid currentColor;

				overflow: hidden;

				z-index: 3;
			}

				ul.grid>li>div.icon>div>span{
					position: relative;
					z-index: 3;
				}

				ul.grid>li>div.icon>div>div.pct{
					position: absolute;
					top:0;
					left: 0;
					width: 5%;
					bottom: 0;
					background: var(--blue);
/*					opacity: .2;*/
					z-index: 1;
					border-radius: 100px;
				}

		ul.grid>li>.data{
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			text-align: center;
			font-size: 2em;
		}

			ul.grid>li>.data>span{
				display: block;
			}

				ul.grid>li>.data>span>span.unit{
					opacity: .5;
					font-size: .8em;
				}

		ul.grid>li>ul.spec{
			justify-content: space-evenly;
			gap: 10px;
		}

			ul.grid>li>ul.spec>li>label{
				margin-bottom: 0;
			}

		ul.grid>li>div.info{
			position: absolute;
			top: 10px;
			right: 10px;
		}

			ul.grid>li>div.info>div{
				text-align: left;
				font-size: 1rem;
				width: 320px;
				box-sizing: border-box;
			}



/* MAIN */

body>main{
	/*	background: var(--darkblue);*/
	flex: 1 1 auto;
	padding: 50px 0;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
}
body>main:first-child:last-child{
	padding: 0;
}

body>main>header:first-child{
	--gold: var(--litegold);
	--btnColor: var(--blue);

	background: var(--grey);
	color: #FFF;
/*	--btnColor:#FFF;*/
	margin: -50px 0 50px 0;
	padding: 25px;

	position: relative;
	z-index: 2;
}

	body>main>header:first-child h1{
		margin: 0;
	}

	body>main>header:first-child div.flex>div:last-child{
		text-align: right;
	}

		body>main>header:first-child div.flex>div:last-child a.btn{
			margin: 5px;
		}

body>main>form.search{
	background: #EEE;
	margin: -50px 0 50px 0;
	padding: 25px;

	position: relative;
	z-index: 25;
}

	body>main>form.search>div.ctn>div:first-child{
		display: flex;
		gap: 1rem;
	}

		body>main>form.search>div.ctn>div:first-child>label,
		body>main>form.search>div.ctn>div:first-child>.flabel{
			margin: 0;
		}

		body>main>form.search>div.ctn>div:first-child>label:has(+button){

		}

			body>main>form.search>div.ctn>div:first-child>label:has(+button)>input[type=text],
			body>main>form.search>div.ctn>div:first-child>label:has(+button)>input[type=number],
			body>main>form.search>div.ctn>div:first-child>label:has(+button)>input[type=email],
			body>main>form.search>div.ctn>div:first-child>label:has(+button)>input[type=date],
			body>main>form.search>div.ctn>div:first-child>label:has(+button)>input[type=password],
			body>main>form.search>div.ctn>div:first-child>label:has(+button)>div.select{
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

			body>main>form.search>div.ctn>div:first-child>label+button{
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				align-self: end;
				background: var(--btnColor);
				padding: 6px;
				margin-left: -1rem;
			}

			form.search button.searchButton{
				color: #FFF;
				text-indent: -100px;
				font-size: 0;
			}

				form.search button.searchButton::after{
					content: "\e922";

					/* use !important to prevent issues with browser extensions that change fonts */
					font-family: 'icomoon' !important;
					speak: never;
					font-style: normal;
					font-weight: normal;
					font-variant: normal;
					text-transform: none;

					/* Better Font Rendering =========== */
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;

					font-size: 2rem;
					text-indent: 0;
					display: block;
				}


/* tabs */

div.tabs{
	padding: 0 10px;
	margin-bottom: -2px;
	z-index: 1;
	overflow: hidden;
	position: relative;
}

	div.tabs>.tabPrevBtn,
	div.tabs>.tabNextBtn{
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 40px;
		background: #EEEEEE;
		overflow: hidden;
		text-indent: -100px;
		z-index: 2;
	}

		div.tabs>.tabPrevBtn::before,
		div.tabs>.tabNextBtn::before{
			content: "\e902";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			line-height: 40px;
			text-align: center;

			/* use !important to prevent issues with browser extensions that change fonts */
			font-family: 'icomoon' !important;
			speak: never;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;

			/* Better Font Rendering =========== */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			text-indent: 0;

			font-size: 1.5rem;
			text-indent: 0;
		}

	div.tabs>.tabNextBtn{
		left: auto;
		right: 0;
	}

		div.tabs>.tabNextBtn::before{
			transform: rotate(180deg);
		}


	div.tabs::before,
	div.tabs::after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 40px;
		width: 20px;
		bottom: 2px;
		z-index: 2;
		background:linear-gradient(to right, var(--bgColor), color-mix(in srgb, var(--bgColor) 00%, transparent));
	}
	div.tabs::after{
		left: auto;
		right: 40px;
		transform: rotate(180deg);
	}
	div.tabs.noleft::before,
	div.tabs.noright::after,
	div.tabs.noscroll::before,
	div.tabs.noscroll::after,

	div.tabs.noleft>.tabPrevBtn,
	div.tabs.noright>.tabNextBtn,
	div.tabs.noscroll>.tabPrevBtn,
	div.tabs.noscroll>.tabNextBtn{
		display: none;
	}

	div.tabs>ul{
		display: flex;
		align-items: end;
		padding: 0;
		margin: 0;
		list-style: none;
		border-bottom: 2px solid #EEEEEE;
	}

		div.tabs>ul>li{
			position: relative;

			background: var(--litegrey);
			border:2px solid #EEE;
			border-radius: 5px 5px 0 0;
			border-bottom: 0;

			margin-left: -5px;

			color: rgba(0,0,0,0.5)
		}
		div.tabs>ul>li:first-child{
			margin-left: 0;
		}

			div.tabs>ul>li>a{
				display: block;
				padding: 5px 10px;
				text-decoration: none;
				color: inherit;

				white-space: nowrap;
			}

		div.tabs>ul>li:hover{
			color: #000;
		}

		div.tabs>ul>li.active{
			z-index: 2;
			color: #000;
			background: var(--litegrey);
		}

			div.tabs>ul>li.active::before{
				content: "";
				position: absolute;
				top: 100%;
				height: 4px;
				left: 0;
				right: 0;
				margin-top: -1px;
				background: var(--litegrey);
				content: "";
			}

			div.tabs>ul>li.active>a{
				padding: 8px 10px;
			}


/* device(s) */

ul.devices{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

.device{
	border:2px solid #EEE;
	border-radius: 5px;
/*	padding: var(--halfpadding);*/
	background: var(--bgPlain);
	margin-bottom: 1rem;
}

	.device>header{
		position: relative;
		background: var(--litegrey);
/*		margin: calc(var(--halfpadding) * -1);*/
/*		margin-bottom: var(--halfpadding);*/
		padding: var(--halfpadding);
		border-radius: 3px 3px 0 0;
	}
	.device>header:last-child{
/*		margin-bottom: calc(var(--padding) * -1);*/
		border-radius: 3px;
	}

		.device>header>div.flex{
/*			margin-bottom: 1rem;
			padding-bottom: 1rem;
			border-bottom: 2px solid var(--btnColor);*/
		}

		.device>header>ul.spec{
			margin-top: 1rem;
			padding-top: 1rem;
			border-top: 2px solid var(--btnColor);

			gap: 10px;
			margin-top: 10px;
			padding-top: 10px;
		}

			.device>header>ul.spec>li{
				background: #EEE;
				border-radius: 5px;
				padding: 5px;
			}

			.device>header>div.flex>div{
				display: flex;
				gap: 1rem;
				flex: 0 1 auto;

				align-items: start;
				justify-content: end;
			}

				.device>header>div.flex>div>div{
					display: flex;
					gap: 1rem;
				}
				.device>header>div.flex>div>div:has(.minmax){
					flex-direction: column;
					gap: 0;
				}

					.device>header>div.flex>div>div{
/*						text-align: center;*/
/*						display: flex;*/
						position: relative;
					}

						.device>header>div.flex>div>div>div.label{
							font: var(--labelText);
							text-transform: uppercase;
							color: var(--btnColor);

							position: absolute;
							bottom: 100%;
/*							left: 50%;*/
/*							transform: translateX(-50%);*/
							left:0;

							white-space: nowrap;

							opacity: 0;

							transition: opacity .5s;
						}
						.device>header>div.flex>div>div:hover>div.label{
							opacity: 1;

							transition: opacity .2s;
						}

						.device>header>div.flex>div>div>div.icon,
						.device>header>div.flex>div.infos>div>div.wifi{
/*							margin-right: .5rem;*/
							display: inline-block;

							position: absolute;
							top: 5px;
							left: 5px;
						}

							.device>header>div.flex>div>div>div.icon::after{
								color: var(--gold);
								font-size: 1.5rem;
								text-align: center;
							}

						.device>header>div.flex>div>div>div.data{
							padding-left: 2rem;
						}

							.device>header>div.flex>div>div>div.data>span{
								white-space: nowrap;
							}

								.device>header>div.flex>div>div>div.data>span>span.unit{
									opacity: .5;
									font-size: .8em;
								}

						.device>header>div.flex>div>div>ul.minmax{
							opacity: .5;
							margin-top: .5rem;
							margin-right: -3rem;
						}
						.device>header>div.flex>div>div:hover>ul.minmax{
							opacity: 1;
						}

					.device>header>div.flex>div>div.dd:not(:has(.wifi)){

					}

/*						.device>header>div.flex>div>div.dd:not(:has(.wifi))>.menu{
							right: none;
							left: -.75rem;
						}

							.device>header>div.flex>div>div.dd:not(:has(.wifi))>.menu::before{
								left: auto;
								right: 100%;
								transform: translateX(2.6rem) rotate(45deg);
							}
*/

						.device>header>div.flex>div>div.dd>div.menu.min{
							min-width: 200px;
						}


			.device>header>div.flex>div.name{
				flex-direction: column;
				justify-content: start;
				gap: 0;
				flex: 1 1 auto;

				padding-right: 70px;

				justify-content: start;
			}

				.device>header>div.flex>div.name>div:first-child{
					align-items: end;
					justify-content: start;
				}

					.device>header>div.flex>div.name>div>div.title{
						align-self: start;
					}

						.device>header>div.flex>div.name>div>div.title>div{
							font: var(--labelText);
							text-transform: uppercase;
							line-height: 1em;
/*							color: var(--btnColor);*/
						}
						.device>header>div.flex>div.name>div>div.title>h1{
							margin: 0;
							line-height: 1em;
						}

							.device>header>div.flex>div.name>div>div.title>h1>a{
								text-decoration: none;
							}

					.device>header>div.flex>div.name>div>div.more{
						display: flex;
						gap: var(--halfpadding);
					}

						.device>header>div.flex>div.name>div>.more>.favorite{
							width: 20px;
							height: 20px;
	/*						background: fuchsia;*/
	/*						margin-left: calc(var(--halfpadding) * -1);*/
	/*						margin-right: -.5rem;*/

							display: flex;
							align-items: center;
							justify-content: center;

							text-decoration: none;
							border-radius: 100%;
						}
						.device>header>div.flex>div.name>div>.more>.favorite:hover{
							background: rgba(0,0,0,0.1);
						}

							.device>header>div.flex>div.name>div>.more>.favorite::after{
								content: "\e903";

								/* use !important to prevent issues with browser extensions that change fonts */
								font-family: 'icomoon' !important;
								speak: never;
								font-style: normal;
								font-weight: normal;
								font-variant: normal;
								text-transform: none;

								/* Better Font Rendering =========== */
								-webkit-font-smoothing: antialiased;
								-moz-osx-font-smoothing: grayscale;

								font-size: 1.5rem;
								text-indent: 0;
							}
							.device>header>div.flex>div.name>div>.more>.favorite.on::after{
								content: "\e901";
							}

						.device>header>div.flex>div.name>div>.more>.warning{
							width: 20px;
							height: 20px;

							display: flex;
							align-items: center;
							justify-content: center;
						}

							.device>header>div.flex>div.name>div>.more>.warning::after{
								content: "\e90b";

								/* use !important to prevent issues with browser extensions that change fonts */
								font-family: 'icomoon' !important;
								speak: never;
								font-style: normal;
								font-weight: normal;
								font-variant: normal;
								text-transform: none;

								color: var(--red);

								/* Better Font Rendering =========== */
								-webkit-font-smoothing: antialiased;
								-moz-osx-font-smoothing: grayscale;

								font-size: 1.5rem;
								text-indent: 0;
							}

/*					.device>header>div.flex>div.name>div.more{
						margin-bottom: -1rem;
					}

						.device>header>div.flex>div.name>div.more a{
							opacity: 0;

							text-decoration: none;

							transition: opacity .5s;
						}
						.device:hover>header>div.flex>div.name>div.more a{
							opacity: .5;

							transition: opacity .2s;
						}
						.device:hover>header>div.flex>div.name>div.more a:hover{
							opacity: 1;
						}*/

			.device>header>div.flex>div.infos{
				flex-wrap: wrap;
			}

				.device>header>div.flex>div.infos>*{
					background: #EEE;
					border-radius: 5px;
					padding: 5px;
					flex: 1 1 auto;
					margin-top: -5px;
				}


			.device>header>div.flex>div.end{

			}

		.device>ul.buttons{
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
			border-top: 2px solid #EEE;
		}

			.device>ul.buttons>li{
				border-left: 2px solid #EEE;
				flex: 1 1 auto;
			}
			.device>ul.buttons>li:first-child{
				border-left: 0;
			}

				.device>ul.buttons>li>a{
					display: block;
					text-align: center;
					padding: 6px 10px;
				}
				.device>ul.buttons>li>a:hover{
					color:#000;
				}

		@media screen and (min-width:1300px){
			.device:has(ul.buttons){
				display: flex;
			}

				.device:has(ul.buttons)>header{
					flex: 1 1 auto;
				}

				.device:has(ul.buttons)>ul.buttons{
					flex-direction: column;
					border-top: 0;
					border-left: 2px solid #EEE;
					flex-direction: 0 0 auto;
				}

					.device:has(ul.buttons)>ul.buttons>li{
						border-left: 0;
						border-top: 2px solid #EEE;
					}
					.device:has(ul.buttons)>ul.buttons>li:first-child{
						border-top: 0;
					}

						.device:has(ul.buttons)>ul.buttons>li>a{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							padding: 6px var(--padding);
						}
		}



	.device ul.messages{
		position: relative;
/*		margin-top: calc(var(--padding) * -1);*/
		isolation: isolate;

		margin: 0;

/*		margin-left: calc(var(--halfpadding) * -1);*/
/*		margin-right: calc(var(--halfpadding) * -1);*/

/*		margin-bottom: var(--halfpadding);*/
	}
	.device ul.messages:empty{
		display: none;
	}

		.device ul.messages>li{
			margin-top: 0;
		}

			.device ul.messages>li>h2,
			.device ul.messages>li>div{
				border-radius: 0;
			}

/*		.device ul.messages::before{
			content: "";
			position: absolute;
			top: 0;
			left: calc((var(--padding) - var(--halfpadding)) * -1);
			right: calc((var(--padding) - var(--halfpadding)) * -1);
			height:40px;
			background: var(--litegrey);
			z-index: -1;
		}*/


ul.minmax{
	margin: 0;
	padding: 0;
	display: block;
	list-style: none;
}


	ul.minmax>li{
		padding-left: 2rem;
		position: relative;
	}

		ul.minmax>li::before,
		ul.minmax>li::after{
			width: 1rem;
			height: 1rem;

			position: absolute;
			top: .2rem;
			left: 0;

			content: "";

			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		ul.minmax>li::before{
			content: "\e916";

			/* use !important to prevent issues with browser extensions that change fonts */
			font-family: 'icomoon' !important;
			speak: never;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;

			/* Better Font Rendering =========== */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			font-size: 1.5rem;
			text-indent: 0;

			opacity: .25;
		}
		ul.minmax>li.target::before{
			content: "\e917";
		}
		ul.minmax>li.target::after{
			width: 4px;
			height: 4px;
			background: var(--gold);
			top: .7rem;
			left: .5rem;
			transform: translate(-50%, -50%);
			border-radius: 100%;
		}
		ul.minmax>li.now::after{
			border-right: 2px solid var(--gold);
		}
		ul.minmax>li.med::after{
			height: .55rem;
			border-bottom: 2px solid var(--gold);
		}
		ul.minmax>li.max::after{
			border-top: 2px solid var(--gold);
		}
		ul.minmax>li.min::after{
			border-bottom: 2px solid var(--gold);
		}

		ul.minmax>li>span{

		}

			ul.minmax>li>span>span.unit{
				opacity: .5;
				font-size: .8em;
			}

/* deviceinfo */

	.deviceinfo ul.messages{
		margin-bottom: 1rem;
	}

	.deviceinfo .half{
		margin:var(--halfpadding);
	}

/* e404 */

main:has(#error){
	display: flex;
}
	main:has(#error)>.ctn{
		max-width: none;
		width: 100%;
		flex: 1 auto;

		display: flex;
		align-items: center;
		justify-content: center;
	}

#error{
	width: 100%;
	height: 100%;
	margin: -50px 0;
	padding: 50px 0;

	background: url(images/bg2.jpg) #29a1c8;
	background-position: 50% 25%;
	background-size: cover;


	display: flex;
	justify-content: center;
	align-items: center;
}

	#error>div{
		width: 95vw;
		max-width: 450px;
	}

		#error>div>header{
			padding: 25px var(--padding);
			border-radius: var(--padding) var(--padding) 0 0;
			text-align: center;

			background: #EEEEEE;
			background: rgba(238,238,238,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);
		}

		#error>div>div{
			padding: 25px var(--padding);

			background: #FFFFFF;
			background: rgba(255,255,255,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);
		}

		#error>div>footer{
			padding: 25px var(--padding);
			border-radius: 0 0 var(--padding) var(--padding);
			text-align: center;

			background: #EEEEEE;
			background: rgba(238,238,238,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);
		}

/* FOOTER */

body>footer{
	position: sticky;
	top: 0;
	padding: var(--halfpadding); 0;

	background: var(--grey);
	color: #bbbbbb;

	box-sizing: border-box;
	border-top: 2px solid var(--blue);
}

	body>footer>div.ctn{
		display: flex;
		gap: var(--padding);
		justify-content: space-between;
		align-items: center;
	}

		body>footer a{
			color: inherit;
		}
		body>footer a:hover{
			color: #FFFFFF;
		}

		body>footer ul{
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
			gap: 2rem;
		}

			body>footer ul li{

			}

				body>footer ul li img{
					display: block;
					height: 40px;
				}

/* FORM */

label,
.flabel{
	position: relative;
	display: block;
	padding: 1.5em 0 0 0;
	width: 100%;
	margin-bottom: 1em;
}
div.flex>label,div.flex>.flabel{
	margin-bottom: 0;
}

	label>input{
		font: var(--inputText);
	}

	label>input[type=text],
	label>input[type=number],
	label>input[type=email],
	label>input[type=date],
	label>input[type=password],
	label>input[type=file],
	label>textarea,
	div.select,
	label>div.fake{
		border:2px solid var(--btnColor);
		border-radius: 5px;
		background: #FFF;

		box-sizing: border-box;

		width: 100%;
		height: 40px;
		padding: 6px 10px;
	}

	label>textarea{
		height: 150px;
	}

	div.select{
		padding: 0;
		position: relative;
	}

		div.select::before{
			content: "▶";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 34px;
			border-left: 2px solid var(--btnColor);

			display: flex;
			align-items: center;
			justify-content: center;

			color: var(--btnColor);
			font-size: .8em;

			pointer-events: none;
			background: var(--bgPlain);
			z-index: 3;
		}

		div.select>select{
			border-radius: 0;
			border:0;
			padding: 6px 10px;
			background: transparent;
			color: inherit;
			font: var(--inputText);
			-webkit-appearance:none;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}

			div.select>select>option{
				padding-right: 48px;
			}

	div.select.custom{

	}

		div.select.custom::after{
			content: "";
			display: block;
			position: absolute;
			bottom: -2px;
			left: -2px;
			right: -2px;
			height: 10px;
			background: #FFFFFF;
			border:2px solid var(--btnColor);
			border-radius: 0 0 5px 5px;
			border-top: 0;
			z-index: 2;
		}

		div.select.custom>.values{
			padding: 6px 10px;
			padding-right: 46px;
			white-space: nowrap;
			line-height: 24px;
		}

		div.select.custom>ul{
			position: relative;
/*			top: 100%;*/
			display: block;
			list-style: none;
			padding: 0;
			margin: -2px -2px 0 -2px;

			border:2px solid var(--btnColor);
			background: #FFF;
			border-radius: 0 0 5px 5px;

			transform-origin: 100% 0%;
			opacity: 0;
			transform: translateY(-10px);
			pointer-events: none;

			transition: transform .3s, opacity .3s, scale .3s;

			z-index: 1;
		}

			div.select.custom>ul>li{
				border-top: 2px solid var(--btnColor);
			}
			div.select.custom>ul>li:first-child{
				border-top: 0;
			}

				div.select.custom>ul>li>label{
					padding: 6px 10px;
					margin: 0;
				}

					div.select.custom>ul>li>label>input{
						display: none;
					}

					div.select.custom>ul>li>label>span{

					}

	/*div.select.custom:hover,*/
	div.select.custom.hover{
		z-index: 5;
	}

		/*div.select.custom:hover::after,*/
		div.select.custom.hover::after{
			border-radius: 0;
		}

			/*div.select.custom:hover::before,*/
			div.select.custom.hover::before{
				background-color: var(--gold);
				color: #FFF;
				rotate:90deg;
			}

		div.select.custom:hover>.values,
		div.select.custom.hover>.values{
			
		}

		/*div.select.custom:hover>ul,*/
		div.select.custom.hover>ul{
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}


	label>div.fake{
		position: relative;
		background-color: #EEE;
		cursor: not-allowed;
	}

		label>div.fake>span{
			opacity: .5;
		}

		label>div.fake>a.edit{
			position: absolute;
			top: 50%;
			right: 5px;
			padding: 3px 5px;
			transform: translateY(-50%);
			font-size: .8em;
			text-decoration: none;
		}
		label>div.fake>a.edit:hover{
			background: var(--gold);
			color: #FFF;
			border-radius: 20px;
			
		}


	label>span,
	.flabel>span{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		font: var(--labelText);
		text-transform: uppercase;
		color: var(--btnColor);
	}

	span.label{
		display: block;
		font: var(--labelText);
		text-transform: uppercase;
		color: var(--btnColor);
	}

	label>a.help{
		position: absolute;
		top: 0;
		right: 0;

		color: var(--btnColor);
	}

label.checkbox{
	padding: 0;
	cursor: pointer;
}

	label.checkbox>input{
		display: none;
	}

	label.checkbox>span{
		position: relative;
		padding-left: 1.5em;

		font: var(--normalText);
		white-space: nowrap;
		text-transform: none;
	}

		label.checkbox>span::before,
		label.checkbox>span::after{
			content: "";
			display: block;

			position: absolute;
			top: 0;
			left: 0;
			width: 1rem;
			height: 1rem;
			box-sizing: border-box;
			border-radius: 5px;
		}
		label.checkbox>span::before{
			border:2px solid var(--btnColor);
		}
		label.checkbox>span::after{
			background: var(--btnColor);
			transform: scale(.2);
			opacity: 0;
			transition: transform .2s, opacity .2s;
		}

	label.checkbox>span:hover{

	}

		label.checkbox:hover>span::after{
			transform: scale(.4);
			opacity: .75;
		}

	label.checkbox>input+span{

	}
	label.checkbox>input:checked+span{

	}
		label.checkbox>input:checked+span::after{
			transform: scale(1);
			opacity: 1;
		}
		label.checkbox:hover>input:checked+span::after{
			transform: scale(.6);
			opacity: .8;
		}

button, 
a.btn{
	display: block;
	border:2px solid var(--btnColor);
	border-radius: 5px;
	background: transparent;
	padding: 6px 20px;
	font: var(--buttonText);
	color: var(--btnColor);

	height: 40px;
	box-sizing: border-box;

	text-decoration: none;

	white-space: nowrap;
}
a.btn{
	display: inline-flex;
	align-items: center;
}

button[class^="i-"], button[class*=" i-"],
a.btn[class^="i-"], a.btn[class*=" i-"]{
	text-indent: -100px;
	font-size: 0;
}
button[class^="i-"]:after, button[class*=" i-"]:after,
a.btn[class^="i-"]:after, a.btn[class*=" i-"]:after{
	display: block;
	text-indent: 0;
	font-size: 1.5rem;
}


button:hover, 
a.btn:hover{
	background: var(--btnColor);
	color: var(--bgColor);
	cursor: pointer;
}

button.warning, 
a.btn.warning{
	--btnColor:var(--yellow);
}
button.danger, 
a.btn.danger{
	--btnColor:var(--red);
}


.inv{
	padding: 6px 10px;
}

	.inv::after{
		padding-left: .5rem;
	}

.inv:hover,
.dd:hover>.inv,
.dd.hover>.inv{
	background: var(--gold);
	color: #FFF;
	border-radius: 20px;
}


/* LOGIN */
#login{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(images/bg.jpg) #29a1c8;
	background-position: 50% 25%;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

	#login>div{
		width: 95vw;
		max-width: 450px;
	}

		#login>div>header{
			padding: 25px var(--padding);
			border-radius: var(--padding) var(--padding) 0 0;
			text-align: center;

			background: #EEEEEE;
			background: rgba(238,238,238,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);

			position: relative;
			z-index: 2;
		}

			#login>div>header>img{
				width: 100px;
				margin: 0 auto;
			}
			#login>div>header>#lang{
				display: block;
				/*bottom: 0;*/
				top: 0;
				padding: 5px 15px;
				background: rgba(255,255,255,.4);
				/*border-radius: 5px 5px 0 0;*/
				border-radius: 0 0 5px 5px;
				text-align: center;
				width: 20px;
				transform-origin: 0 0;
				text-decoration: none;
				right: var(--padding);
				position: absolute;
			}

		#login>div>form{
			padding: 25px var(--padding);

			background: #FFFFFF;
			background: rgba(255,255,255,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);
		}

			#login>div>form a{
				white-space: nowrap;
			}

		#login>div>footer{
			padding: 25px var(--padding);
			border-radius: 0 0 var(--padding) var(--padding);
			text-align: center;

			background: #EEEEEE;
			background: rgba(238,238,238,.8);
			backdrop-filter: saturate(1.8) blur(20px);
			-webkit-backdrop-filter: saturate(1.8) blur(20px);
		}

			#login>div>footer>ul{
				display: flex;
				margin: var(--padding) 0 0 0;
				padding: 0;
				list-style: none;
				gap: 1rem;
				align-items: center;
				justify-content: space-between;
			}

				#login>div>footer>ul>li{
					display: block;
				}

				#login>div>footer>ul>li img{
					height: 40px;
				}

/* progress */

	ul.progress{
		display: flex;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		list-style: none;
		height: 2px;
		background: var(--litegold);
		margin-top: 70px;

		--offset:25px;
	}

		ul.progress>li{
			width: 25px;
			height: 25px;
			margin: -12px;
			position: relative;
			border-radius: 100%;
			border:2px solid var(--litegold);
			background: var(--bgPlain);
		}

			ul.progress>li::before{
				content: "";
				display: block;
				position: absolute;
				bottom: 125%;
				left: 50%;
				width: 1px;
				height: 10px;
				background: currentColor;
				z-index: 1;
				opacity: 0;

				transform-origin: 0 100%;
				transform: scale(.2);

				transition: opacity .5s, transform .5s;
			}

			ul.progress>li>span{
				position: absolute;
				bottom:175%;
				left: 50%;
				white-space: nowrap;
				transform: translate(-50%, 15px);
				opacity: 0;
				pointer-events: none;

				transition: opacity .5s, transform .5s;
			}
			ul.progress>li:first-child>span{
				transform: translate(calc(var(--offset) * -1), 10px);
			}
			ul.progress>li:last-child>span{
				transform: translate(-100%, 10px) translateX(var(--offset));
			}

		ul.progress>li.active{
			background: var(--blue);
			pointer-events: none;
			border:2px solid var(--btnColor);
		}
		ul.progress>li.done{
			background: var(--litegold);
			
		}

			ul.progress>li.active::before,
			ul.progress>li.active>span,
			ul.progress>li:hover::before,
			ul.progress>li:hover>span{
				opacity: 1;
				transform: translate(-50%, 0px);
				transition: opacity .5s .1s, transform .5s .1s;
			}
			ul.progress>li.active::before,
			ul.progress>li:hover::before{
				transform: scale(1);
			}
			ul.progress>li.active>span,
			ul.progress>li:hover>span{
				transform: translate(-50%, 0px);
			}
			ul.progress>li:first-child.active>span,
			ul.progress>li:first-child:hover>span{
				transform: translate(calc(var(--offset) * -1), 0px);
			}
			ul.progress>li:last-child.active>span,
			ul.progress>li:last-child:hover>span{
				transform: translate(-100%, 0px) translateX(var(--offset));
			}
			ul.progress:has(>li:hover)>li.active::before,
			ul.progress:has(>li:hover)>li.active>span{
				opacity: 0;
				transition: opacity .2s, transform .1s;
			}
			ul.progress:has(>li:hover)>li.active::before{
				transform: scale(.2);
			}
			ul.progress:has(>li:hover)>li.active>span{
				transform: translate(-50%, 15px);
			}
			ul.progress:has(>li:hover)>li.active:first-child>span{
				transform: translate(calc(var(--offset) * -1), 15px);
			}
			ul.progress:has(>li:hover)>li.active:last-child>span{
				transform: translate(-100%, 15px) translateX(var(--offset));
			}

		header ul.progress{
			margin-bottom: -25px;
			z-index: 2;
		}

/* list */

ul.list{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

	ul.list>li{
		border-top: 2px solid #EEE;
		padding: var(--halfpadding) 0;
		margin: 0;
	}
	ul.list>li:first-child{
		border-top: 0;
	}
	ul.list:first-child>li:first-child,
	header+ul.list>li:first-child{
		padding-top: 0;
	}
	ul.list:last-child>li:last-child{
		padding-bottom: 0;
	}

		ul.list>li .title{
/*			font-size: 1.5rem;*/
			font-weight: bold;
		}

		ul.list>li .sub{
			font-size: .8rem;
			opacity: .5;
		}

	ul.list>li.empty{
		color: #888;
		text-align: center;
		margin: var(--padding) 0;
	}

		ul.list>li.empty::before,
		ul.list>li.empty::after{
			content: "—";
			padding: 0 1rem;
		}

ul.list:empty{
}

	ul.list:empty::before{
		display: block;
		content: "—";
		color: #888;
		text-align: center;
		margin: var(--padding) 0;
	}


/* comments */

	ul.comments{

	}

		ul.comments>li{
			margin-top: 2rem;
			border:0;
			padding: 0;
		}
		ul.comments>li:first-child{
			margin-top: 0;
		}

			ul.comments>li>.comment{
				padding: 15px;
				border: 2px solid #EEE;
				border-radius: 5px;
				margin-bottom: .5rem;
			}

			ul.comments>li>.author{
				text-align: right;
				font-weight: bold;
			}

			ul.comments>li>.timestamp{
				text-align: right;
				font-size: .8em;
			}
				ul.comments>li>.timestamp>span{
					opacity: .5;
				}


/* table */
	div.table{
		overflow: auto;
/*		height: 100%;*/
		width: 100%;
		height: 450px;
		box-sizing: border-box;
		white-space: nowrap;

		padding-bottom: 50px;

		display: flex;
	}
	div.table::before,
	div.table::after{
		content: "";
		display: inline-block;
		width: var(--padding);
		height: 10px;
/*		background: fuchsia;*/

		flex: 0 0 var(--padding);
	}
	form.search+div.table{
		/*margin-top: -50px;
		padding-top: 50px;*/
	}

		div.table>table{
			border-collapse: collapse;
			width: calc(100% - (2 * var(--padding)));
/*			margin: var(--padding);*/
		}

			div.table>table td,
			div.table>table th{
				text-align: right;
				padding: var(--tablepadding);
				margin: 0;
				background: #FFF;
			}

			div.table>table>thead{
				color: #FFF;

				position: sticky;
				top: -50px; /*70px;*/
				z-index: 2;
			}

				div.table>table>thead>tr{
				}

					div.table>table>thead>tr>th{
						vertical-align: top;
						background: var(--gold);
						padding: 5px 10px;
						text-align: center;

						font: var(--labelText);
						text-transform: uppercase;
					}

					div.table>table>thead>tr:first-child>th[colspan]{
						padding-bottom: 0;
						height: 25px;
					}
					div.table>table>thead>tr:first-child>th:first-child{
						border-top-left-radius: 5px;
					}
					div.table>table>thead>tr:first-child>th:last-child{
						border-top-right-radius: 5px;
					}

					div.table>table>thead>tr:not(:first-child):last-child>th{
						padding: 0;
						height: 20px;
						font-weight: normal;
						font-size: .8em;
						color: rgba(255,255,255,.8);
					}

					div.table>table>thead>tr:first-child:last-child>th{
						height: 40px;
						vertical-align: middle;
						text-align: left;
					}

			div.table>table>tbody{
				
			}

				div.table>table>tbody>tr{
					
				}

					div.table>table>tbody>tr>td,
					div.table>table>tbody>tr>th{
/*						border: 2px solid #FFF;*/
					}

					div.table>table>tbody>tr>td{

					}

					div.table>table>tbody>tr>td:first-child{
						text-align: left;
						vertical-align: top;
					}

					div.table>table>tbody>tr>td.txt,
					div.table>table>tbody>tr.txt>td,
					div.table>table>tbody.txt>tr>td,
					div.table>table.txt>tbody>tr>td{
						text-align: center;
					}

					div.table>table>tbody>tr>td.left,
					div.table>table>tbody>tr.left>td,
					div.table>table>tbody.left>tr>td,
					div.table>table.left>tbody>tr>td{
						text-align: left;
					}

						div.table>table>tbody>tr>td div.time{
							position: sticky;
							top: 60px; /*180px;*/
							font-weight: bold;
/*							background: var(--bgColor);*/

							font: var(--labelText);
							font-variant: small-caps;
						}


						div.table>table>tbody>tr>td span.unit{
							opacity: .5;
							font-size: .8em;
						}

				div.table>table>tbody>tr.date{

				}

					div.table>table>tbody>tr.date>td{
						text-align: left;
/*						font-weight: bold;*/
						background: #EEE;

						font: var(--labelText);
						text-transform: uppercase;

						position: sticky;
						top: 0px; /*120px;*/
						z-index: 1;

						height: 40px;
						padding: 5px;

						vertical-align: middle;

						box-shadow: 0 -5px 10px white;
					}


				div.table>table>tbody>tr>td:empty{
					text-align: center;
					color: #CCC;
				}

					div.table>table>tbody>tr>td:empty::before{
						content: "—";
					}

				div.table>table>tbody>tr:not(.date):has(td:hover)>td,
				div.table>table>tbody>tr:not(.date):has(td[rowspan]):has(td:hover)+tr>td,
				div.table>table>tbody>tr:not(.date):has(td[rowspan]):has(+tr>td:hover)>td{
					background: var(--liteblue);
				}


		div.table>div.pager{
			margin: calc(var(--padding) * -1);
			margin-top: var(--padding);
		}


div.pager{
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: var(--halfpadding) var(--padding);

	position: sticky;
	bottom: 0;
	background: var(--bgPlain);

	z-index: 5;
}
body>main>div.pager:last-child{
	margin-bottom: -50px;
}



/* breadcrumbs */

ul.breadcrumbs{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
	display: flex;

	font:var(--labelText);
	text-transform: uppercase;

	margin-bottom: 1rem;
}

	ul.breadcrumbs>li{
		white-space: nowrap;
	}

		ul.breadcrumbs>li::before{
			content: "/";
			margin: 0 .5rem;
		}
		ul.breadcrumbs>li:first-child::before{
			display: none;
		}

/* popup */


#popup{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(45,45,45,.5);
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--grey);
	background: color-mix(in srgb, var(--grey) 90%, transparent);
	backdrop-filter: blur(10px); /* Background blur */
	-webkit-backdrop-filter: blur(10px); /* Safari support */


	opacity: 0;
	transition: opacity .5s;

	z-index: 100;
}
#popup.visible{
	opacity: 1;
}
	
	#popup>div{
		position: relative;
		width: 90vw;
		max-width: 800px;
		max-height: 800vh;

		transform: translateY(-50%);
		transition: transform .5s;
	}
	#popup.visible>div{
		transform: translateY(0);
	}

		#closePopup,
		#backPopup{
			position: absolute;
			top: 15px;
			right: 15px;
			width: 50px;
			height: 50px;
/*			background: fuchsia;*/

			cursor: pointer;

			z-index: 50;

			border-radius: 100%;

			text-indent: -100px;
			font-size: 0;

			text-decoration: none;
		}
		#closePopup:hover,
		#backPopup:hover{
			background-color: rgba(0,0,0,0.1);
		}

			#closePopup::after,
			#backPopup::after{
				font-size: 2rem;
				text-indent: 0;

				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
			}

		#backPopup{
/*			position: absolute;*/
/*			top: 15px;*/
			left: 15px;
			right: auto;
/*			width: 50px;*/
/*			height: 50px;*/
/*			background: fuchsia;*/

			z-index: 50;
		}

		#popup .breadcrumbs{
			display: none;
		}

		#popup>div>div{
			
		}

			#popup>div>div>header,
			#popup>div>div>footer{
				padding: 25px var(--padding);

				background: #EEEEEE;
				background: rgba(238,238,238,.8);
				backdrop-filter: saturate(1.8) blur(20px);
				-webkit-backdrop-filter: saturate(1.8) blur(20px);

				position: relative;
				z-index: 2;
			}

				#popup>div>div>header:first-child h1{
					margin: 0 25px 0 0;
				}

				#popup>div:has(#backPopup)>div>header:first-child h1{
					margin-left: 25px;
				}

			#popup>div>div>div{
				padding: 25px var(--padding);
				background: #FFFFFF;
				background: rgba(255,255,255,.8);
				backdrop-filter: saturate(1.8) blur(20px);
				-webkit-backdrop-filter: saturate(1.8) blur(20px);

				max-height: calc(100vh - 200px);
				overflow: auto;
			}

			#popup>div>div>*{
				box-sizing: border-box;
			}

			#popup>div>div>*:first-child{
				border-top-left-radius: var(--padding);
				border-top-right-radius: var(--padding);
			}
			#popup>div>div>*:last-child{
				border-bottom-left-radius: var(--padding);
				border-bottom-right-radius: var(--padding);
			}

				#popup>div>div>div.ctn{
					padding: 25px var(--padding);
				}
				#popup div.ctn{
					width: 100%;
					box-sizing: border-box;
					padding: 0;
				}




form#mobileFilterForm{

}
	
	form#mobileFilterForm>div.ctn.flex{
		display: flex;
		flex-direction: column;
	}

		form#mobileFilterForm>div.ctn.flex>div{
			order:2;
			width: 100%;
		}

		form#mobileFilterForm>div.ctn.flex>div.dd{
			order: 1;
			width: auto;
			align-self: end;
		}

		form#mobileFilterForm>div.ctn.flex button{
			display: none;
		}



@media screen and (max-width: 1100px){

	ul.spec{
		flex-wrap: wrap;
	}

	ul.grid>li>.data{
		font-size: 2.7vw;
	}

	.device>header>div.flex{
		flex-wrap: wrap;
	}

		.device>header>div.flex>div.name{
			order: 1;
			flex-direction: row;
			align-items: end;
			gap: 1rem;
		}

/*			.device>header>div.flex>div.name>div.more{
				margin-bottom: 0;
			}

				.device>header>div.flex>div.name>div.more a{

				}*/

		.device>header>div.flex>div.infos{
			order: 3;
			flex: 0 0 100%;
			justify-content: space-between;

		}

		.device>header>div.flex>div.end{
			order: 2;
			position: absolute;
			top: var(--halfpadding);
			right: var(--halfpadding);
		}


		.deviceinfo .device>header>div.flex>div.infos{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 10px;
		}

			.deviceinfo .device>header>div.flex>div.infos>*:nth-child(0){
	            grid-column: 1;
	            grid-row: 1;
			}
			.deviceinfo .device>header>div.flex>div.infos>*:nth-child(1){
	            grid-column: 1;
	            grid-row: 2;
			}

			.deviceinfo .device>header>div.flex>div.infos>*:has(.minmax){
				grid-row: span 2;
			}
}

@media screen and (max-width: 750px){
	ul.grid{
		grid-template-columns: repeat(2, 1fr);
		margin: 5px;
		gap: 5px;
	}

		ul.grid>li{
			padding:var(--padding) var(--halfpadding)  var(--halfpadding)  var(--halfpadding);
		}

			ul.grid>li>div.info{
				top: 5px;
				right: 5px;
			}

			ul.grid>li>.data{
				font-size: 20px;
			}

			ul.grid>li>label{
				height: 2rem;
				line-height: 1rem;
			}

			ul.grid>li>div.icon{
				width: 13.3vw;
				height: 13.3vw;
			}

				ul.grid>li>div.icon::after{
					font-size: 10vw;
				}

}

#menu,
#menulabel{
	display: none;
}

.mobile{
	display: none !important;
}

@media screen and (max-width: 750px){
	.mobile{
		display: inline-flex !important;
	}

	#langswitcher{
		order: 1;
	}

	#user{
		order: 2;
	}

	#menulabel{
		position: relative;

		display: block;
		width: 45px;
		height: 45px;
		padding: 0;
		margin: 0;

/*		background: fuchsia;*/

		order: 10;

		text-indent: -100px;
		font-size: 0;

		border-radius: 5px;

		cursor: pointer;
	}
	#menulabel:hover{
		background: var(--grey);
	}

		#menulabel::before,
		#menulabel::after{
			content: "";
			position: absolute;
			top: 50%;
			left: 5px;
			right: 5px;
			height: 2px;
			background: currentColor;

			transition: rotate .2s, transform .3s .2s;
		}
		#menulabel::before{
			transform: translateY(-5px);
		}
		#menulabel::after{
			transform: translateY(5px);
		}

	#menu:checked+#menulabel{
		
	}

		#menu:checked+#menulabel::before,
		#menu:checked+#menulabel::after{
			transition: transform .3s, rotate .3s .2s;
		}
		#menu:checked+#menulabel::before{
			transform: translateY(0);
			rotate:45deg;
		}
		#menu:checked+#menulabel::after{
			transform: translateY(0);
			rotate:-45deg;
		}

	#menu+#menulabel+ul{
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: calc(100vh - 72px);
		margin-top: 2px;

		background: var(--grey);
		background: color-mix(in srgb, var(--grey) 90%, transparent);
		backdrop-filter: blur(10px); /* Background blur */
		-webkit-backdrop-filter: blur(10px); /* Safari support */

		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 2rem;

/*		display: none;*/
		pointer-events: none;
		opacity: 0;
		height: 0;
	}

	.js #menu+#menulabel+ul{
		transition: height .0s .5s, opacity .5s;
	}

		#menu+#menulabel+ul>li:first-child{
			margin-top:-50px;
			transition: margin .5s;
		}

	#menu:checked+#menulabel+ul{
		display: flex;
		pointer-events: auto;
		opacity: 1;
		height: calc(100vh - 72px);

		transition: height .0s, opacity .3s;
	}

		#menu:checked+#menulabel+ul>li:first-child{
			margin-top: 0;
			transition: margin .3s;
		}




	body>main>form.search{
		display: none;
	}

		body>main>form.search>div.ctn.flex{
			flex-direction: column;
		}

			body>main>form.search>div.ctn>div:first-child{
				flex-direction: column;
			}

	form.search+div.table{
		margin-top: 0;
	}



	a.btn.add,
	a.btn#filter{
		text-indent: -100px;
		font-size: 0;

		padding-left: 1rem;
		padding-right: 1rem;
	}
		a.btn.add::before,
		a.btn#filter::before{
			content: "\e900";

			/* use !important to prevent issues with browser extensions that change fonts */
			font-family: 'icomoon' !important;
			speak: never;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;

			/* Better Font Rendering =========== */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			font-size: 1.5rem;
			text-indent: 0;
		}

		a.btn#filter::before{
			content: "\e90c";
			transform: scaleY(-1);
		}



/*	body>main>header:first-child .flex{
		flex-direction: column;
	}*/

	div.dd>.menu{
/*		display: none;*/
	}

		div.dd>.menu::before{
/*			display: none;*/
		}

	div.dd:hover,
	div.dd.hover{

	}



		div.dd:hover>.menu,
		div.dd.hover>.menu{
/*			position: fixed;
			top: 50%;
			left: 1rem;
			right: 1rem;
			transform: translateY(-50%);
			box-shadow: 0 0 0 20000px rgba(0,0,0,0.5);*/
		}

	div.dd:hover:not(.hover)>.menu,
	div.select.custom:hover:not(.hover)>ul{
		display: none;
	}
	div.dd.hover>.menu{
		display: block;
	}


.device>header{
	padding: 5px;
}

	.device>header>div.flex{
/*		gap: 0;*/
		margin-bottom: 10px;
	}

		.device>header>div.flex>div.name{
			padding-right: 35px;
			flex: 1 1 100%;
			width: 100%;

			padding: 10px 45px 10px 0;
		}

			.device>header>div.flex>div.name>div:first-child{
/*				flex-wrap: wrap;*/
/*				width: 100%;*/
/*				gap: .5em;*/
				align-items: start;
			}

				.device>header>div.flex>div.name>div>div.title{
/*					width: 100%;*/
					align-self: center;
				}

			.device>header>div.flex>div.name>div>div.more{
				flex-direction: column-reverse;
				gap: 5px;
			}

		.device>header>div.flex>div.end{
/*			position: static;*/
			flex-direction: column-reverse;
			gap: .5em;
		}

		.device>header>div.flex>div.infos{
/*			display: grid;*/
/*			grid-template-columns: repeat(3, 1fr);*/
/*			gap: var(--halfpadding);*/
			gap:10px;
		}

			.device>header>div.flex>div.infos>div{
/*				background: #EEE;*/
/*				border-radius: 5px;*/
/*				padding: 5px;*/
				flex-direction: column;
				gap: 0;
				text-align: center;
				justify-content: space-evenly;
				min-width: 50px;
/*				flex: 1 1 auto;*/
				margin-top: 0;
			}

				.device>header>div.flex>div>div>div.label{
					display: none !important;
				}

				.device>header>div.flex>div.infos>div>div.icon,
				.device>header>div.flex>div.infos>div>div.wifi{
					position: static;
					font-size: 2rem;
				}

				.device>header>div.flex>div.infos>div>div.wifi{
					transform: none;
					position: relative;
					font-size: 1.5rem;
					margin: 7px auto 13px auto;
				}

					.device>header>div.flex>div>div>div.wifi::before,
					.device>header>div.flex>div>div>div.wifi::after{

					}

				.device>header>div.flex>div>div>div.data{
					padding: 0;
				}

			.device>header>ul.spec>li{
				flex: 1 1 auto;
			}

			.deviceinfo .device>header>div.flex>div.infos{
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(auto-fill, minmax(2rem, 1fr));
			}

				.deviceinfo .device>header>div.flex>div.info>div{
					width: 100%;
				}

				.deviceinfo .device>header>div.flex>div.infos>*:nth-child(1){
					grid-column: 1;
					grid-row: 1;
				}

				.deviceinfo .device>header>div.flex>div.infos>*:nth-child(2){
					grid-column: 2;
					grid-row: 1;
				}

				.deviceinfo .device>header>div.flex>div.infos>*:has(.minmax){
					grid-column: span 2;
					grid-row: auto;
				}

					.device>header>div.flex>div>div>ul.minmax,
					.deviceinfo .device>header>div.flex>div.info>div>ul.minmax{
						margin-right: 0;
						display: flex;
						gap: 1rem;
						opacity: .75 !important;
						justify-content: space-evenly;
						flex-wrap: wrap;

						background: var(--litegrey);
						border-radius: 5px;
						padding: 5px;
					}

						.device>header>div.flex>div>div>ul.minmax>li,
						.deviceinfo .device>header>div.flex>div.info>div>ul.minmax>li{
							padding-left: 1.5rem;
						}



		.deviceinfo ul.messages{
			margin-bottom: 5px;
		}

		.deviceinfo .half{
			margin: 5px;
			flex-direction: column-reverse;
		}


	div.pager{
		padding-left: 0;
		padding-right: 0;
	}

		div.pager>a{
			display: block;
			text-indent: -100px;
			font-size: 0;
			text-decoration: none;
		}
		div.pager>a:first-child{

		}
		div.pager>a:last-child{
			transform: rotate(180deg);
		}
			div.pager>a::before{
				display: block;
				content: "\e902";

				/* use !important to prevent issues with browser extensions that change fonts */
				font-family: 'icomoon' !important;
				speak: never;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;

				/* Better Font Rendering =========== */
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				font-size: 1.5rem;
				text-indent: 0;
			}

		div.pager>div{
/*			display: none;*/
			font-size: .8rem;
			opacity: .75;
		}



	body>footer{
		margin: 0;
		padding: 0;
	}

		body>footer>div.ctn{
			width: 100%;
			display: block;
		}

			body>footer>div.ctn>div{
				padding: 10px 1rem;
				text-align: center;
			}

			body>footer>div.ctn>div:last-child{
				background: var(--darkgrey);
			}

				body>footer ul{
					justify-content: center;
					padding: 10px 0;
				}
}

@media screen and (max-width: 750px) and (max-height:400px){
	#menu+#menulabel+ul{
		font-size: 1.5rem;
		gap: 15px;
	}
}



@media screen and (max-width: 500px){
	ul.breadcrumbs{
		display: none;
	}

	.pc{
		display: none !important;
	}

	body, html{
		--padding: 25px;
		--halfpadding:15px;

		--buttonText: normal normal normal 1rem/1em "Open Sans", Arial, sans-serif;
	}

	h1{
		font-size: 1.5rem;
	}
	h2{
		font-size: 1.25rem;
	}
	h3{
		font-size: 1rem;
	}
	h4{
		font-size: 1rem;
	}
	h5{
		font-size: 1rem;
	}
	h6{
		font-size: 1rem;
	}

	body>main{
/*		padding-top: 5vw;*/
		padding-bottom: 5vw;
	}

	body>main>header:first-child{
		margin-bottom: 5vw;
	}
	body>main.devicemetrics>header:first-child,
	body>main.devicecommunications>header:first-child{
		margin-bottom: 0;
	}

		body>main>header:first-child .flex{
			flex-direction: row;
		}

	button, 
	a.btn{
		padding: 6px 10px;
	}

	/* flex */

	.flex, .half, .third, .quarts{
		flex-direction: column;
	}

	ul.list>li.flex,
	#popup>div>div>header>div>div>div.flex{
		flex-direction: row;
	}

		#popup>div:has(#backPopup)>div>header:first-child h1{
			margin-left: 40px;
			margin-right: 40px;
		}

		.flex>button{
			align-self: end;
		}


	/* login */

	#login>div>header>img{
		width: 20vw; /*50px;*/
	}

	#login>div>footer>ul{
		justify-content: space-evenly;
	}

		#login>div>footer>ul>li img{
			height: 30px;
		}

	/* progress */

	ul.progress{
		--offset:10px;
	}


	ul.grid>li>div.icon{
		width: 66px;
		height: 66px;
	}

		ul.grid>li>div.icon::after{
			font-size: 50px;
		}


	/* device */

	.device>header>div.flex>div>div:hover>div.label{
		display: none;
	}

	.device>header>div.flex{
		flex-direction: row;
	}
		.device>header>div.flex>div>div>.info{
			margin-right: 0;
		}


	.device>ul.buttons{
		flex-wrap: wrap;
	}

		.device>ul.buttons>li{
			flex: 1 1 50%;
			box-sizing: border-box;
		}
		.device>ul.buttons>li:first-child{
			flex: 1 1 100%;
			border-bottom: 2px solid #EEE;
		}

	/* message */
	ul.messages>li>div>footer, div.message>div>footer{
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

/*	.device ul.messages{
		margin-left: calc(var(--padding) * -1.5);
		margin-right: calc(var(--padding) * -1.5);
	}*/
/*		.device ul.messages::before{
			display: none;
		}*/

	/* grid */
/*	ul.grid{
		margin-left: calc(var(--padding) * -1.5);
		margin-right: calc(var(--padding) * -1.5);
		margin-bottom: calc(var(--padding) * -1.5);
	}*/

		ul.grid ul.spec>li{
			white-space: normal;
		}

			ul.grid>li>div.icon>div{
				white-space: normal;
			}

		ul.grid>li>.data{
			flex-direction: column;
		}

		ul.grid>li>.spec{
			flex-wrap: wrap;
			gap: var(--halfpadding);
		}






}


#debug{
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 50;
	border: 2px solid var(--btnColor);
	color: #FFFFFF;
	color: var(--btnColor);
	background: #FFFFFF;
	padding: 2px;
	line-height: 1em;
	border-radius: 5px;
	padding: 6px 10px;
	max-height: 1em;
	overflow: hidden;

	display: flex;
	flex-direction: column-reverse;

	opacity: .3;

	transition-duration: .6s;
	transition-delay: .6s;
	transition-property: opacity, max-height;

	cursor: default;
}
#debug::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: #FFF;
}
#debug:hover{
	max-height:50vh;
/*	overflow:auto;*/
	opacity: 1;

	transition-duration: .2s;
	transition-delay: 0s;
}
	#debug>div>*{
		margin: 0;
		padding: 0;
		list-style: none;
		display: block;
	}



.i-settings.on::after{
	animation: rotate 10s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

.i-production{
	position: relative;
	width: .5em;
	height: .5em;

	background: linear-gradient(
					to left, 
					var(--gold) 20%,
					transparent 20%,
					transparent 40%,
					var(--gold) 40%,
					var(--gold) 60%,
					transparent 60%,
					transparent 80%,
					var(--gold) 80%
				);

	background-size: 30% 50%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

	.i-production.off::before{
		content: "";
		display: block;
		animation: none;
		position: absolute;
		top: 50%;
		left: 50%;
		width: .5em;
		height: 4em;
		transform: translate(-50%, -50%) rotate(55deg);
		background: var(--gold);
		/* border: 2px solid var(--litegrey); */
		box-shadow: 0 0 0 .25em var(--litegrey);
	}

	.i-production.on::before,
	.i-production.on::after{
		content: "";
		display: block;
		width: .5em;
		height: .5em;
		border: 2px solid var(--gold);
		border-radius: 100%;
		background: #FFF;
		font-size: inherit !important;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		transform-origin: 50% 50%;

		opacity: 0;
	}

	.i-production.off::after{
		display: none;
	}

	.i-production.on::before{
		animation: production 5s linear infinite;
	}
	.i-production.on::after{
		animation: production2 5s 1s linear infinite;
	}

				@keyframes production {
					0% {
						opacity: 0;
						transform: scale(.5) translate(-.5em, 1em);
					}
					25% {
						opacity: 1;
						transform: scale(1) translate(-.5em, 1em);
					}
					35% {
						opacity: 1;
						transform: scale(1) translate(-.5em, 1em) translateY(-1.5em);
					}
					45% {
						opacity: 0;
						transform: scale(1.2) translate(-.5em, 1em) translateY(-3em);
					}

					50% {
						opacity: 0;
						transform: scale(.5) translate(-.5em, -1em);
					}
					75% {
						opacity: 1;
						transform: scale(1) translate(-.5em, -1em);
					}
					85% {
						opacity: 1;
						transform: scale(1) translate(-.5em, -1em) translateY(-1.5em);
					}
					95% {
						opacity: 0;
						transform: scale(1.2) translate(-.5em, -1em) translateY(-3em);
					}

					100% {
						opacity: 0;
						transform: translate(-50%, -50%);
					}
				}


				@keyframes production2 {
					0% {
						opacity: 0;
						transform: scale(.5) translate(.5em, -.8em);
					}
					25% {
						opacity: 1;
						transform: scale(1) translate(.5em, -.8em);
					}
					35% {
						opacity: 1;
						transform: scale(1) translate(.5em, -.8em) translateY(-1.5em);
					}
					45% {
						opacity: 0;
						transform: scale(1.2) translate(.5em, -.8em) translateY(-3em);
					}

					50% {
						opacity: 0;
						transform: scale(.5) translate(.5em, 1em);
					}
					75% {
						opacity: 1;
						transform: scale(1) translate(.5em, 1em);
					}
					85% {
						opacity: 1;
						transform: scale(1) translate(.5em, 1em) translateY(-1.5em);
					}
					95% {
						opacity: 0;
						transform: scale(1.2) translate(.5em, 1em) translateY(-3em);
					}

					100% {
						opacity: 0;
						transform: translate(-50%, -50%);
					}
				}