/*variables override*/
body, html{
	--gold:#39849C;
	--grey_shy:#9c9c9c;
	--color_spec_overall:#289FC7;
	--color_spec_salt:#39849C;
	--color_spec_pool:#3D6572;
	--color_spec_ollo:#324247;
	--color_spec_wifi:#2C3133;
	
}
/*menu*/
body header nav>ul{
	height: 100%;
}
	/*body header nav ul li{
		box-sizing: border-box;
	}*/
		body header nav>ul li a{
			display: inline-block;
/*			box-sizing: border-box;*/
			height: 100%;
			line-height: 50px;

		}
body header nav>ul li.active{
	cursor: default;
	
}
	body header nav>ul li.active>a{
		color: var(--blue);
		border-bottom: 2px solid var(--blue);
		cursor: default;
		height: 99%;
		height: calc(100% - 3px);
	}
/*form elements*/
label.success>span{
	color:var(--green);
}
label.success>input{
	border-color: var(--green);
}
label.error>span,
label>input:invalid+span{
	color:var(--red);
}
label.error>input,
label>input:invalid{
	border-color: var(--red);
}
label.warning>span{
	color:var(--yellow);
}
label.warning>input{
	border-color: var(--yellow);
}

main>header h1>i{
	color:var(--blue);
}

li.device,
div.device/*,
div.table>table*/{
	box-shadow:-4px 6px 10px 0px var(--litegold);
/*	box-shadow:-4px 6px 10px 0px var(--grey);*/
}
	
	div.device .half{
		padding: 1em var(--halfpadding);
	}

	div.device div.box ul.list{
		max-height: 2500px;
		overflow: auto;
	}

.device>header>div.flex>div.name>div:first-child{
	align-items: center;
}
.device>header>div.flex>div.name>div>div.title {
	min-width: 125px;
}

div.device>header>ul.spec{
	border-top:none;
}
div.device>header>ul.spec:first-of-type {
	border-top: 2px solid var(--btnColor);
}
div.device>header>ul.spec:last-of-type {
	padding-bottom: var(--tablepadding);
	border-bottom: 2px solid var(--btnColor);
}

ul.spec{
/*	flex-wrap: wrap;*/
}
ul.spec>li{
/*	white-space: normal;*/
}
	/*pass due comm date*/
	.device>header>ul.spec>li.late{
		background-color:var(--yellow);
		position: relative;
	}
		.device>header>ul.spec>li.late div.i-warning{
			display: inline-block;
			height: 25px;
			width: 25px;
			text-align: center;
			position: absolute;
			bottom: 0;
			right:0;
		}
		.device>header>ul.spec>li.late div.i-warning::after{
			font-size: 25px;
			position: absolute;
			bottom: 5px;
			right:5px;
		}
ul.spec>li.title{
}
ul.spec>li.title>label{
	color:var(--blue);
	height: 90%;
	align-content: center;
}

ul.spec>li>label{
	
	color: var(--litegold);
}
.device>header>div.flex>div.name>div>.more>.dd::after,
.device>header>ul.spec>li.state .dd::after,
div.table>table>tbody>tr>td.metric_state::after{
	/* 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(--green);

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

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

}
/*.device>header>ul.spec>li.state{
	display: flex;
	align-items: center;
	width: 100%;
	height:100%;
}*/
.device>header>ul.spec>li.state .dd,
.data .metric_state .dd{
	display: flex;
	align-items: center;
	width: 100%;
	height:100%;
}

div.device>header>ul.spec>li.state .dd::after{
	font-size: 2.5rem;
}
/*.device>header>ul.spec>li.state.ok{
	background-color:var(--green);
	opacity: .5;
}*/

.device>header>div.flex>div.name>div>.more>.ok::after,
.device>header>ul.spec>li.state.ok .dd::after,
div.table>table>tbody>tr>td.metric_state.ok::after{
	content: "\e916";
}
.device>header>div.flex>div.name>div>.more>.warning::after,
.device>header>ul.spec>li.state.warning .dd::after,
div.table>table>tbody>tr>td.metric_state.warning::after{
	content: "\e90b";
	color: var(--yellow);
}
.device>header>div.flex>div.name>div>.more>.error::after,
.device>header>ul.spec>li.state.error .dd::after,
div.table>table>tbody>tr>td.metric_state.error::after{
	content: "\e90b";
	color: var(--red);
}
.device>header>div.flex>div.name>div>.more>.unknown::after,
.device>header>ul.spec>li.state.unknown .dd::after{
	content: "\e904";
	color: var(--grey_shy);
}

.device>header>ul.spec>li:first-of-type>label{
	color: var(--bgPlain);
	opacity: 1;
}
.device>header>ul.spec>li{
	border: 1px solid var(--litegold);
}
.device>header>ul.spec.salt>li:first-of-type{
	background-color: var(--color_spec_salt);
}
.device>header>ul.spec.salt>li{
	border: 1px solid var(--color_spec_salt);
}
.device>header>ul.spec.pool>li:first-of-type{
	background-color: var(--color_spec_pool);
}
.device>header>ul.spec.pool>li{
	border: 1px solid var(--color_spec_pool);
}
.device>header>ul.spec.ollo>li:first-of-type{
	background-color: var(--color_spec_ollo);
}
.device>header>ul.spec.ollo>li{
	border: 1px solid var(--color_spec_ollo);
}
.device>header>ul.spec.wifi_spec>li:first-of-type{
	background-color: var(--color_spec_wifi);
}
.device>header>ul.spec.wifi_spec>li{
	border: 1px solid var(--color_spec_wifi);
}
.device>header>ul.spec.cell>li:first-of-type{
	background-color: var(--color_spec_overall);
}
.device>header>ul.spec.cell>li{
	border: 1px solid var(--color_spec_overall);
}
.device>header>ul.spec.other>li:first-of-type{
	background-color: var(--blue);
}
.device>header>ul.spec.other>li{
	border: 1px solid var(--blue);
}


.device>header>ul.spec>li:first-of-type>label{
	color: var(--bgColor);
	/*opacity: 1;*/
}
.device>header>ul.spec>li.enabled{
	color: var(--green);
	border: 1px solid var(--green);
}
.device>header>ul.spec>li.disabled{
	color: var(--grey_shy);
	border: 1px solid var(--grey_shy);
}
.device>header>ul.spec>li.deleted{
	color: var(--red);
	border: 1px solid var(--red);
}

.device>header>div.flex>div>div {
/*	gap:3rem;*/
}
.device>header>div.flex>div.name>div>.more>.token::after{
	content:'\e913';
	opacity: .5;
}
.device>header>div.flex>div.name>div>.more>.token::after,
.device>header>div.flex>div.name>div>.more>.favorite::after{
	color: var(--grey_shy);
	transition: font-size .2s, color .5s, opacity .5s;
	font-size: 1.5rem;
}
.device>header>div.flex>div.name>div>.more>.token:hover,
.device>header>div.flex>div.name>div>.more>.favorite:hover{
	cursor:	pointer;
	opacity: 1;
}
.device>header>div.flex>div.name>div>.more>.token.enabled::after{
	color: var(--green);
/*	text-shadow: var(--green) 1px 0 10px;*/
	opacity: 1;
}
.device>header>div.flex>div.name>div>.more>.favorite.on::after{
	color: var(--yellow);	
}
.device>header>div.flex>div.name>div>.more>.token:hover::after,
.device>header>div.flex>div.name>div>.more>.favorite:hover::after{
	color: var(--blue);
	font-size: 2rem;
}

.dd>ul.menu>li>a.asc.active,
.dd>ul.menu>li>a.desc.active{
	background: var(--blue);
	color: var(--litegrey);
}

.wifi::after{
	color:var(--green);
}
.wifi.lv2::after{
	color:var(--blue);
}
.wifi.lv1::after{
	color:var(--yellow);
}
.wifi.error::after{
	background:var(--red);
	background-image: linear-gradient(to top, var(--red) 2px, var(--litegrey) 2px, white 4px, var(--red) 4px);
}

/*body>main>form.search{
	margin: -50px 0 0px 0;
}*/
div.pager{
	z-index: 100;
	justify-content: center;
}
	body ul.pager_list{
		/*background-color: green;*/
		text-align: center;
		margin: 0;
		padding:0;

	/*	margin-top: 20px;*/
	}
		body ul.pager_list li{
			display: inline-block;
			padding: var(--tablepadding);
		}
		body ul.pager_list li.active{
			/*border-top: 1px solid var(--blue);*/
			border-bottom: 1px solid var(--blue);
			color: var(--litegold);
			opacity: .5;
		}
		body ul.pager_list li a {
			text-decoration: inherit;
		}
div.table>table{
	font-size: .8em;
}
	div.table>table>thead{
		top:0;
	}
		div.table>table>thead>tr>th{
			text-align: left;
			font-size: .8em;
		}
		div.table>table>thead>tr>th.overall{
			background-color: var(--color_spec_overall);
		}
		div.table>table>thead>tr>th.salt{
			background-color: var(--color_spec_salt);
		}
		div.table>table>thead>tr>th.pool{
			background-color: var(--color_spec_pool);
		}
		div.table>table>thead>tr>th.ollo{
			background-color: var(--color_spec_ollo);
		}
		div.table>table>thead>tr>th.esp32{
			background-color: var(--color_spec_wifi);
		}
		div.table>table>tbody>tr>td.cycle_on{
			color: var(--green);
		}
		div.table>table>tbody>tr>td.cycle_off{
			color: #D9D9D9;
		}
		div.table>table>tbody>tr.date>td{
			top:65px;
			color:var(--litegold);
			background-color: var(--liteblue);
		}
		div.table>table>tbody td{
			max-width: 150px;
			text-align: left;

		}
		div.table>table>thead>tr:not(:first-child):last-child>th{
			padding: 0 10px;
		}

		ul.messages>li>h2, div.message>h2{
			padding: 4px 10px;
		}

div.box>div>form{
	padding-bottom: var(--halfpadding);
	margin-bottom:var(--halfpadding);
	border-bottom: 2px solid #EEE;
}
div.box>div>form button{
	position: relative;
	display: block;
}
div.box.no_content header{
	margin-bottom: 0;
}
div.box.no_content footer{
	margin-top: 0;
}
button, a.btn, a {
	transition: color .3s, background-color .5s;
}
.popup_form{
	display: none;
}


div.tabs li:hover,
div.tabs li a:hover{
	cursor: pointer;
}

div.device.card{
	display: none;
	opacity: 0;
}
div.device.card.active{
	display: block;
	opacity: 1;
	min-height: 780px;
}

div.select.custom>ul{
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}
	div.select.custom>ul>li.optgroup{
		text-transform: uppercase;
		color:var(--litegold);
		padding: 6px 0 6px 10px;
	}
	/*div.select.custom>ul>li.optgroup:has(+li.optgroup)::after{
		content:"-";
		text-align:center;
		border-top:1px solid var(--gold);
		display:block;
		width:100%;
		margin-left: -10px;
	}*/
	body>main>div#login>div>header>h1{
		color: var(--bgPlain);
		margin-top: var(--halfpadding);
	}
	body.register>main>div#login>div>header>h1,
	body.password_demand>main>div#login>div>header>h1 {
		margin: var(--halfpadding) 0 var(--padding) 0;
		/*color: var(--litegold);*/
/*		color: var(--bgPlain);*/
		text-transform: uppercase;
	}
	body.password_demand>main>div#login>div>header>h1{
		margin: var(--halfpadding) 0 0 0;
	}
		body.register>main>div#login>div>header>ul.progress>li.error{
			background-color: var(--red);
		}
			body.register>main>div#login>div>header>ul.progress>li.error>span{
				color: var(--red);
			}
		body.register>main>div#login>div>header>ul.progress>li.success{
			background-color: var(--green);
		}
	body.register>main>div#login>div>form{
		padding-top: var(--padding);
	}
	body.edit_mail_landing>main>div#login>div,
	body.password_demand>main>div#login>div{
		max-width: 500px;
	}
	body.edit_mail_landing>main>div#login>div>form>h2>i{
		margin-right: var(--tablepadding);
	}
	body.edit_mail_landing.success>main>div#login>div>form>h2>i{
		color: var(--green);
	}
	body.edit_mail_landing.error>main>div#login>div>form>h2>i{
		color: var(--red);
	}
body div.table tbody>tr>td.success,
body div.table tbody>tr>td.error{
	align-content: center;
}
body div.table tbody>tr>td.success::after,
body div.table tbody>tr>td.error::after{
	/* 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(--green);

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

	font-size: 1.5rem;
	text-indent: 0;
}
body div.table table{
	overflow-y: hidden;
}
body div.table table>tbody>tr>td.success::after{
	content: "\e916";
}
body div.table tbody>tr>td.error::after{
	color: var(--red);
	content: "\e907";
}

body.assembly.table main div.table{
	padding-top: 0;
}
form.search button{
	color: var(--bgPlain);
}

body>main>form.search>div.ctn>div>button{
	/*border-top-left-radius: 0;
	border-bottom-left-radius: 0;*/
	align-self: end;
	background: var(--btnColor);
	padding: 6px;
}

header>div>#logo>span{
	display: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}



div.err_display,
div.message_display{
	padding: var(--halfpadding) 0;
/*	margin-bottom: var(--halfpadding) ;*/
/*	border: 1px solid var(--litegold);*/
/*	border-bottom: 1px solid var(--darkgrey);*/
/*	border-radius:var(--halfpadding);*/
/*	background-color:var(--liteblue);*/
}
div.message_display{
	padding: var(--halfpadding) 0;
}
	div.err_display.err,
	div.message_display.error h3{
		color: var(--red);
	}
	div.err_display.success,
	div.message_display.success h3{
		color: var(--green);
	}
		div.message_display ul{
			list-style: none;
			padding: 0;
		}
			div.message_display ul>li{
				margin-bottom: var(--tablepadding);
				padding-left: var(--tablepadding);
				border-left: 1px solid var(--blue);
				border-right: 1px solid var(--blue);
			}
			div.message_display.success ul>li{
				border-color:var(--green);
			}
			div.message_display.error ul>li{
				border-color:var(--red);
			}


ul.list>li.section>h3{
	color: var(--litegold);
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 1.2em;
}
p>span{
	color: var(--darkblue);
}
.device h1{
	letter-spacing: .04em;
/*	transition: letter-spacing .5s;*/
}
.device h1:hover{
	font-family: serif;
	letter-spacing: .12em;
/*	font-size: 2.2em;*/
}

div.info.warning::after{
	content:'\e90b';
	color:var(--yellow);
}
div.menu ul.spec li>span>span.version_latest{
/*	margin-left: 20px;*/
	color:var(--darkblue);
}
/*div.menu ul.spec li>span>span.version_latest::before{
	font-size: 20px;
	line-height: 20px;
	display: block;
	color: var(--yellow);
	content: "\e90b";
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	position: absolute;
}*/