@charset "UTF-8";
/** Maspex stylesheets 4.10 2024-05-24
 * 	https://aip.solutions
 * new technologies: nested selectors, css variables, flexbox positioning, container queries
 */
@font-face {font-family:'IBM Plex Regular';font-weight:normal;font-display:swap;src:url("/res/IBMPlexSans-Regular.woff2") format("woff2");}
@font-face {font-family:'IBM Plex Bold';font-weight:bold;src:url("/res/IBMPlexSans-Bold.woff2") format("woff2");}
@font-face {font-family:'FontAwesome';font-weight:bold;font-display:block;src:url("/res/fa-solid-900.woff2") format("woff2");}
/** general formatting */
/* colors */
:root {
	/* default gray theme */
	--white:				#FFF;
	--easy-white:			#F5F8FA;
	--soft-white:			#ECEFF1;
	
	--mild-gray:			#CFD8DC;
	--muted-gray:			#B0BEC5;
	--light-background: 	#607D8B;
	--dark-background:		#37474F;
	--base-background:		#455A64;
	
	--interactive-dark: 	#01579B;
	--interactive-default:	#0288D1;
	--interactive-light:	#DBEBF3;
	
	--red-dark:				#BF360C;
	--red-light:			#FEE;
	
	--state-ok:				#88B314;
	--state-auto:			#88B314;
	--state-manual:			#4A9BEC;
	--state-warning: 		#FFC107;
	--state-error:			#EB5100;
	--state-offline:		#9BA7AE;
	--state-active:			#FFEB3B;
	--state-block:			#D500F9;
	--state-stored:			#BBDEFB;
	
	--green-light:			#F6FBE7;
	--soft-black:			#263238;
	--sharp-black:			#191E21;
	--black:				#000;
	
 	/* system statuses */
 }
/* base */
body, nav, menu, ul	{margin:0;padding:0;}
header, main, form, footer, aside, section, article, h1, h2, h3
				{position:relative;display:block;box-sizing:border-box;}
form			{width:100%;}
section			{display:flex;flex-wrap:wrap;align-items:stretch;padding-bottom:16px;display:block;
	> h1		{width:100%;}
	> header	{width:100%;}
}

.hide 			{display:none;}
footer			{text-align:right;}
/* titles */
h1				{margin:0 0 24px 0;color:var(--interactive-dark);font-weight:normal;font-size:30px;}
h2, h3			{margin:0;padding:0 12px;color:var(--base-background);text-transform:uppercase;text-wrap:nowrap;font-size:16px;}
h3				{font-size:14px;}
h4, h5, h6		{width:100%;border-radius:8px;padding:12px;font-size:18px;text-align:center;box-sizing:border-box;z-index:100;}
h4				{color:var(--interactive-dark);background:var(--interactive-light);}
h5				{color:var(--state-ok);background:var(--green-light);}
h6				{color:var(--red-dark);background:var(--red-light);}
.right			{float:right;}
@media only screen and (min-width:720px) {
	h2, h3		{padding:0 16px;}
}
/* links */
a 			{color:inherit;
	&.icon	{display:inline-block;width:40px;height:40px;font-size:0;text-align:center;transition: all .4s;text-decoration:none;
		&::before		{content:"";font-family:'FontAwesome';font-size:24px;color:var(--light-background);line-height:40px;}
		&.print::before		{content:"\f02f";}
		&.export::before	{content:"\f56e";}
		&.add::before		{content:"\f067";}
		&.edit::before		{content:"\f304";}
		&:hover			{color:var(--white);background:var(--interactive-dark);
			&::before	{color:var(--white);}
		}
		&.active		{color:var(--interactive-default);background:var(--interactive-light);
			&::before	{color:var(--interactive-default);}
		}
	}
}
a[onclick]	{cursor:pointer;}
/* lists */
/* list table response */
section, article		{container-type:inline-size;}
th			{padding:12px 8px;text-align:left;vertical-align:top;}
td			{padding:10px 0 10px 8px;vertical-align:middle;}
td.box 		{padding:2px 4px;
	> span		{display:flex;flex-wrap:wrap;align-items:stretch;width:130px;min-height:36px;text-align:center;flex-wrap:wrap;cursor:pointer;background:var(--mild-gray);border-radius:4px;padding:2px 4px;font-size:14px;
		&:before	{content:attr(data-code);width:100%;text-align:left;font-weight:bold;font-size:16px;}
		&.state-50	{background:white;}
	}
}
td.btn 		{padding-left:0;}
.tablet		{display:none;}
table sub	{display:block;color:var(--light-background);}
table.storage.box {border:unset;min-width:auto;
	sub{text-align: center;flex:1 1 100%;}
}
@container 	(width >= 720px) {
	th.tablet	{display:table-cell;}
	td.tablet	{display:table-cell;}
	table sub	{display:none;}
	table sub.code {display:block;}
}
/* forms */
p			{display:flex;flex-wrap:wrap;margin:8px 0;width:100%;align-items:end;}
label		{position:relative;width:100%;display:flex;box-sizing:border-box;flex-flow:row wrap;align-items:center;justify-content:space-between;color:var(--soft-black);
	&::before			{content:attr(title);font-size:13px;}
	&.status > input	{display:none;}
}
input, select, textarea, output {width:100%;min-height:40px;box-sizing:border-box;border-radius:8px;border:1px solid var(--mild-gray);padding:8px 4px;color:var(--soft-black);font-size:16px;background:var(--easy-white);
	&:hover		{border-color:var(--interactive-default);outline:2px solid var(--header);}
	&:invalid	{color:var(--red-dark);border-color:var(--red-dark);outline:2px solid var(--red-dark);background:var(--red-light);}
	&:focus		{color:var(--black);border-color:var(--interactive-dark);outline:2px solid var(--interactive-dark);background:var(--white);}
	&:read-only	{border:none;outline:none;background:var(--easy-white)}
	&:disabled	{border:none;outline:none;background:var(--easy-white); /* Iva change 2024-07-01 background:var(--soft-white);*/}
}
output:read-only {border-color:var(--easy-white);}
.inert input, .inert select, .inert textarea, .inert output {color:var(--light-background);border-color:var(--easy-white);}
button		{min-width:120px;height:40px;border:2px solid var(--interactive-default);border-radius:20px;padding:0 8px;cursor:pointer;color:var(--interactive-default);font-family:inherit;font-size:14px;text-transform:uppercase;font-weight:bold;background:var(--white);
	&.focus		{color:var(--white);background:var(--interactive-default);}
	&:hover		{color:var(--white);background:var(--interactive-default);}
	&.active	{color:var(--white);background:var(--interactive-default);}
	&.back		{float:left;}
	&.remove	{float:left;margin-left:4px;}
	&.small		{min-width:80px;}
	&:disabled	{color:var(--muted-gray);border-color:var(--muted-gray);cursor: not-allowed;
		&:hover{background:none;}
	}
	&.right		{position:absolute;right:8px;}
}
footer		{width:100%;margin-top:24px;}
.close::before {content:"\f067";font-family:'FontAwesome';font-size:18px;color:var(--red-dark);transform:rotate(45deg);}
.switch 	{	margin-left:16px;
	&::before	{display:block;line-height:24px;padding-left:56px;}
	> span		{position:absolute;top:0;left:0;border-radius:34px;width:48px;height:25px;cursor:pointer;background:var(--light-background);transition:.4s;
		&::before	{content:"";position:absolute;left:4px;bottom:3px;border-radius:50%;height:19px;width:19px;background:var(--soft-white);transition:.4s;}
	}
	> input 	{opacity:0;width:0;height:0;min-height:0;margin:0;/*Iva added min-height:0;margin:0; 2024-07-01*/}
	> input:checked + span {background:var(--interactive-default);
		&::before 	{transform:translateX(22px);background:var(--interactive-light);
			&:hover	{background-color:var(--white);}
		}
	}
}
/* misc base elements */
section pre {color:white;background:black;padding:10px;border-radius:10px;width:100%;}
/* basic elements response */
@media only screen and (min-width:480px) {
	label	{
		&::before	{font-size:14px;text-transform:uppercase;}
	}
	input, output, select, textarea {font-size:16px;padding:8px;}
}
/** grid system - 8 columns */
/* field widths */
	.i,   	.u		{width:25%;}
	.ii,  	.q		{width:50%;}
	.iii, 	.t		{width:75%}
	.iv,  	.s		{width:100%;}
	.v,   	.su		{width:100%;}
	.vi,  	.sq		{width:100%;}
	.vii, 	.st		{width:100%;}
	.viii,	.ss		{width:100%;}
/* panel widths */
	article.xs		{width:25%;}
	article.s		{width:33.3%;}
	article.m		{width:50%;}
	article.l		{width:66.6%;}
	article.xl		{width:75%;}
/* panel widths */
@container (width >= 640px) {
	.i,   	.u		{width:12.5%;}
	.is,   	.us		{width:15%;}
	.ii,  	.q		{width:25%;}
	.iii, 	.t		{width:37.5%}
	.iv,  	.s		{width:50%;}
	.v,   	.su		{width:62.5%;}
	.vi,  	.sq		{width:75%;}
	.vii, 	.st		{width:87.5%;}
	.viii,	.ss		{width:100%;} /* width 100% is the default value for the element */
	label	{padding-right:8px;
		&:last-child	{padding-right:0;}
	}
}
/* layout widths */
	section.xs		{max-width:360px;}
	section.s		{max-width:720px;}
	section.m		{max-width:1080px;}
	section.l		{max-width:1440px;}
	section.xl		{max-width:1800px;}
/* heights */
	.x1				{height:48px;}
	label.x1		{height:60px;}
	.x2				{height:96px;}
	label.x2		{height:116px;}
@media only screen and (min-width:720px) {
	article.xs		{width:calc(25% - 32px);}
	article.s		{width:calc(33.3% - 32px);}
	article.m		{width:calc(50% - 32px);}
	article.l		{width:calc(66.6% - 32px);}
	article.xl		{width:calc(75% - 32px);}
}
/* system colors */
section.layout .hbw {
	g.blck > rect	{stroke:var(--muted-gray);fill:var(--muted-gray);}
	g.full > rect	{stroke:var(--interactive-dark);fill:var(--interactive-dark);}
	g.free > rect	{stroke:var(--state-auto);fill:var(--state-auto);}
	g.warn > rect	{stroke:var(--state-warning);fill:var(--state-warning);}
	g.pend > rect	{stroke:var(--state-warning);fill:var(--state-active);}
	g.semi > rect	{stroke:var(--interactive-dark);fill:var(--state-manual);}
}

/* system events */
section.event {flex-direction:column;
	&.active {display:flex;}
	> header {display:flex;justify-content:space-between;padding:16px 0px;
		> label {display:block;width:40px;height:40px;line-height:11px;border-radius:8px;border:1px solid var(--mild-gray);padding-top:10px;cursor:pointer;background:var(--mild-gray);
			&::before 	{color:var(--easy-white);font-weight:bold;font-size:12px;}
			&::after 	{content:"";display:inline-block;width:20px;height:4px;border:2px solid var(--easy-white);border-radius:4px;background:var(--state-offline);}
			&.active	{border:1px solid var(--mild-gray);background:var(--white);
				&::before 	{color:var(--base-background);}
				&::after 	{border:2px solid var(--easy-white);}
				&.alert::after	{background:var(--base-background);}
				&.error::after	{background:var(--state-error);}
				&.warn::after	{background:var(--state-warning);}
				&.info::after	{background:var(--state-auto);}
			}
		}
	}
	> div	{position:relative;flex:1 1 0;border-radius:4px 4px 0px 0px;text-align:left;overflow:auto;scrollbar-color:var(--muted-gray) transparent;scrollbar-width:thin;
		&::before	{content:"";position:fixed;float:right;width:224px;height:9px;border-radius:4px 4px 0px 0px;background:linear-gradient(180deg, #00000054 0%, #00000000 9px);z-index:10;}
	}
	ul		{z-index:-1;}
	li		{position:relative;margin:2px 0 6px 0;border:1px solid var(--soft-white);border-radius:4px;padding:6px 6px 6px 8px;font-size:13px;color:var(--sharp-black);text-align:left;background:var(--white);
		&::before {content:"";position:absolute;display:block;left:0;top:40%;width:4px;height:8px;border-radius: 4px 0px 0px 4px;transform:matrix(-1, 0, 0, -1, 0, 0);background:var(--state-offline);}
		&.alert::before	{background:var(--base-background);}
		&.error::before	{background:var(--state-error);}
		&.warn::before	{background:var(--state-warning);}
		&.info::before	{background:var(--state-auto);}
	}
	> footer	{margin-top:0;}
}
section {
	&.xl						{display: block;
		& article.form.l 		{width:100%;}
		& article.list.s 		{width:100%;}
	}
}
@media only screen and (min-width:720px) {
	.event > header {padding:16px 8px;}
}
/* modal dialogs */

	&.crane	{
		&.auto	{
			h3		{background:var(--state-auto);}
			output 	{background:var(--state-auto);}
		}
		&.active	{
			h3		{background:var(--state-active);}
			output 	{background:var(--state-active);}
			.cmd th	{background:var(--state-active);}
		}
		output.free	{background:var(--state-auto);}
		output.full	{background:var(--state-manual);}
		.success th	{background:var(--state-ok);}
		.failure th	{background:var(--state-error);}
		.active th	{background:var(--state-active);}
	}

/* popup windows */
iframe.popup	{border:0;border-radius:8px;padding:0;background:var(--soft-white);box-shadow:0px 3px 6px #00000029;
	&:popover-open 	{position:absolute;inset:unset;/*top:10%;*/top:3%;left:calc(50% - 360px);/*width:780px;*//*width:800px;*/width:735px;min-height:420px;/*Iva change position:absolute 2024-07-01*/}
	&::backdrop 	{background-color:#0007;}
	&.storage		{min-height:720px;width:980px;left:calc(50% - 440px);}
	&.optimization	{width:980px;}
}

body.popup	{background:var(--easy-white);padding:48px 0;
	&.tote		{padding-bottom:68px;}
	header		{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;padding-left:16px;box-shadow:none;border-bottom:1px solid var(--mild-gray);background:var(--soft-white);
		> a.close	{width:48px;}
	}
	section		{padding:0 8px;}
	article		{border:1px solid var(--soft-white);background:var(--white);}
	footer		{padding:12px 16px 0;border-top:1px solid var(--mild-gray);background:var(--soft-white);opacity:1;height:60px;z-index:10;}
	h5, h6		{position:absolute;width:98%;}
	.list button {margin:10px 0;}
	.list td button {margin:0;}
	.modal{width:80%;
		&::backdrop 	{background-color:#0007;}
		& p				{gap:unset;}
		& label			{padding-right:8px;}
		& label:last-of-type{padding-right:0;}
	}
}
/** main template */
html		{/*height:100%;*/overflow:auto;}
body 		{height:100%;min-width:360px;box-sizing:border-box;font-size:16px;font-family:'IBM Plex Regular',Arial,sans-serif;color:var(--soft-black);background:var(--muted-gray);
	&.public	{background:var(--light-background);}
}
/* header */
body > header	{position:fixed;left:0;top:0;width:48px;height:100%;background:var(--easy-white);box-shadow:3px 0 6px #00000029;overflow:hidden;z-index:50;transition:width .4s;
	& > nav		{
		&::before			{content:"";display:block;margin:8px;height:1px;background:var(--mild-gray);}
		&.account 			{position:absolute;width:100%;bottom:0;
			 &::after		{display:none;}
		}
	}
	& a				{display:flex;box-sizing:border-box;width:100%;height:48px;font-size:0;font-weight:bold;text-decoration:none;color:var(--dark-background);transition:all .4s;align-items:center;
		&::before	{width:48px;height:48px;line-height:48px;text-align:center;font-size:24px;font-family:'FontAwesome';color:var(--light-background);transition:all .4s;}
		&.button::before	{content:"\f0c9";}
		&.layout::before	{content:"\f494";}
		&.order::before		{content:"\f483";}
		&.event::before		{content:"\f06a";}
		&.opc::before		{content:"\f0e8";}
		&.station::before	{content:"\e0e3";}
		&.station\.mps::before	{content:"\f472";font-size:28px;}
		&.station\.ups::before	{content:"\f474";}
		&.vehicle::before	{content:"\f4de";}
		&.document::before	{content:"\f15c";}
		&.inventory::before	{content:"\e0e3";}
		&.storage::before	{content:"\f00a";}
		&.material::before	{content:"\f02a";}
		&.transport::before	{content:"\f073";}
		&.picking::before	{content:"\f073";}
		&.viewer::before	{content:"\f121";}
		&.profile::before	{content:"\f007";}
		&.logout::before	{content:"\f2f5";}
		&:hover			{color:var(--white);background:var(--interactive-dark);
			&::before	{color:var(--white);}
		}
		&.active		{color:var(--interactive-default);background:var(--interactive-light);
			&::before	{color:var(--interactive-default);}
		}
		&.logo		{display:inline-block;width:0;line-height:48px;overflow:hidden;
			img		{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;}
			&:hover			{color:inherit;background:inherit;
				&::before	{color:inherit;}
			}
		}
		&.button 		{position:absolute;right:0;top:0;width:48px;
			&::before 	{padding:0;}
		}
	}
	nav.action::after	{content:"";display:block;margin:8px;height:1px;background:var(--mild-gray);}
	&.active	{width:216px;
		& a			{font-size:16px;
			&::before		{color:var(--muted-gray);margin-right:4px;}
			&.logo 			{width:125px;margin-left:10px;}
			&.button::before{content:"\f060";}
		}
	}
}
/* main content */
body main	{position:relative;margin:0 8px 0 56px;
	&.offline	{ /* pa: temporarily disabled opacity:0.5; */
		&::before	{position:absolute;display:none;content:"System offline!";width:100%;margin-top:12%;text-align:center;color:var(--state-error);font-weight:bold;z-index:100;}
	}
	> header	{position:fixed;display:flex;align-items:center;justify-content:space-between;height:48px;left:56px;top:0;right:148px;min-width:160px;border-radius:0 0 8px 8px;padding-left:16px;background:var(--soft-white);box-shadow:0px 3px 6px #00000029;z-index:40;
		.legend	{display:none;}
	}
	> section,
	> form > section {position:relative;border-radius:0 0 8px 8px;background:var(--soft-white);
		> header	{display:flex;justify-content:space-between;line-height:48px;
			> nav	{display:flex;flex:auto;align-items:center;
				> a, > label	{flex:auto;max-width:80px;margin-right:4px;line-height:16px;border-radius:8px;padding:8px;text-align:center;text-decoration:none;font-size:14px;background:var(--mild-gray);transition:all .4s;
					&:hover		{color:var(--white);background:var(--interactive-dark);}
					&.active	{font-weight:bold;color:var(--interactive-default);background:var(--interactive-light);}
					> input		{display:none;}
				}
				> label::before	{display:block;width:100%;text-align:center;}
			}
			span	{margin:0 8px;padding:8px 16px;border-radius:4px;background:var(--white);}
		}
	}
	aside		{position:fixed;display:flex;flex-direction:column;width:140px;min-height:48px;height:48px;overflow:hidden;top:0;right:0;border-radius:0 0 0 8px;background:var(--easy-white);box-shadow: 0 3px 6px #00000029;transition:height .4s;z-index:50;
		&.active	{height:100%;border-radius:0;}
		&.estop > header	{background:var(--state-error);}
		&.error > header	{background:var(--state-error);}
		&.auto > header		{background:var(--state-auto);}
		&.manual > header	{background:var(--state-manual);}
		> header	{height:48px;
			> p		{position:relative;margin:1px;height:5px;display:flex;;
				i	{flex:auto;margin:0 1px;background:var(--state-offline);
					&.auto	{background:var(--state-auto)}
					&.estop	{background:var(--state-error)}
					&.error	{background:var(--state-error)}
					&.manual{background:var(--state-manual)}
				}
			}
			> h3	{display:flex;align-items:center;justify-content:space-between;margin:0 8px;height:42px;color:var(--base-background);}
		}
		> section	{margin:0 8px;text-align:center;border-top:1px solid var(--mild-gray);overflow:hidden;transition:height .4s;
			&.event	{flex:auto;}
		}
		dl			{font-size:0;margin:16px 8px;text-align:left;font-size:14px;}
		dt, dd		{display:inline-block;width:40%;margin:0;line-height:24px;}
		dt			{color:var(--light-background);}
		dd			{color:var(--soft-black);font-weight:bold;}
		footer		{margin-top:16px;border-top:1px solid var(--mild-gray);padding:16px 8px;}
		button		{width:100%;}
	}
	> footer		{position:fixed;display:flex;bottom:0;left:56px;right:0;width:auto;padding:0 16px 8px 0;justify-content:space-between;
		.zoom 		{display: flex;align-items:center;justify-content:center;
			button	{min-width:40px;margin-right:10px;}
		} 
		.alert		{align-content:center;
			> b 	{margin:0 4px;padding:4px 16px;border-radius:4px;background:var(--state-warning);}
		}
	}
}
@media only screen and (min-width:720px) {
	body main	 {
		> header {right:248px;padding-left:16px;
			.legend		{display:flex;list-style-type:none;margin-left:48px;color:var(--dark-background);flex:auto;
				li		{position:relative;font-size:15px;flex:1 1 auto;max-width:90px;
					&::before 	{content:"";position:absolute;left:-16px;top:-14px;border-radius:0 0 8px 8px;width:8px;height:32px;}
					&.auto::before 		{background:var(--state-auto);}
					&.manual::before	{background:var(--state-manual);}
					&.error::before 	{background:var(--state-error);}
					&.offline::before 	{background:var(--state-offline);}
				}
			}
		}
		aside	{width:240px;
			 h3	{margin:2px 8px 0 16px;
				&::before	{content:attr(title);font-size:20px;color:var(--soft-black);min-height:36px;line-height:32px;}
				&::after	{content:"\f078";font-size:16px;font-family:'FontAwesome';min-width:36px;min-height:36px;line-height:34px;text-align:center;cursor:pointer;}
			}
		}
	}
}
/* footer */
body > footer, body > form > footer 	{position:fixed;bottom:4px;width:100%;height:155px;opacity:0.3; font-size:0;background:url('/res/logo.svg') center bottom no-repeat;background-size:200px;z-index:-1;}
.popup > footer	{z-index:10;}
/** page templates */
/* list template */
section.head{padding-bottom:16px;padding: 0 16px;
	& header {align-items:center;flex-wrap:wrap;
		& button.tab {text-align: center;text-decoration: none;font-size: 14px;background: var(--mild-gray);transition: all .4s;border-radius: 8px;min-height: unset;text-transform:none;max-height: 32px;line-height: 32px;margin-right: 4px;min-width:unset;width:100%;max-width: 200px;border:none;flex:auto;font-weight: normal;color:inherit;
			&:hover {color: var(--white);background: var(--interactive-dark);}
			&.active {font-weight: bold;color: var(--interactive-default);background: var(--interactive-light);}
		}
		& output {width:auto;padding:0px 16px;min-height:unset;max-height:40px;line-height: 37px;margin-right:15px;}
	}
}
body.popup.control {margin-bottom:48px;
	& section.form {
		& table {min-width:100%;border-top:1px solid var(--mild-gray);border-collapse:collapse;
			a.icon	{position:absolute;top:0;right:0;width:40px;height:40px;
				&::before {font-size:18px;line-height:40px;}
		}
		> thead {
			th 	{position:sticky;top:0;font-weight:normal;font-size:14px;text-transform:uppercase;background:var(--soft-white);z-index:2;
				&::before {content:"";display:block;position:absolute;bottom:-8px;left:0;width:100%;height:9px;background:linear-gradient(180deg, #00000054 0%, #00000000 9px);z-index:10;}
				&::after {content:"";position:absolute;bottom:21px;margin-left:5px;height:6px;line-height:2px;font-size:13px;font-family:'FontAwesome';}
				&.asc::after {content:"\f0dd";}
				&.desc::after 	{content:"\f0dd";transform:rotate(-180deg);}
				&:first-of-type {padding-left:15px;
					&::before {border-top-left-radius:4px;}
				}
				&:last-of-type {width:48px;
					&::before {border-top-right-radius:4px;}
				}
				&.date 	{min-width:160px;}
				&.num	{text-align:center;}
			}
		}
		> tbody	{
			tr	{
				&:hover {position:relative;border-radius:4px;outline:1px solid var(--interactive-default);z-index:2;
					td	{background:var(--white);}
				}
				&.empty:hover {outline:none;
					td	{background:var(--easy-white);}
				}
				&.active > td, &.state-50 > td, &.status-50 > td {color:var(--state-ok);
					&:first-of-type::before 	{background:var(--state-active);}
				}
				&.status-50 > td {color:var(--soft-black);}
				&.draft > td:first-of-type::before 		{background:var(--state-manual);}
				&.pending > td,
				&.state-25 > td,
				&.state-35 > td,
				&.status-25 > td { color:var(--state-warning);
					&:first-of-type::before 	{background:var(--state-warning);}
				}
				&.status-40 > td { color:var(--state-ok);font-weight:bold;
					&:first-of-type::before 	{background:var(--state-ok);}
				}
				&.state-50 > td	{color:var(--state-ok);}
				&.status-60 > td { color:var(--state-error);font-weight:bold;
					&:first-of-type::before 	{background:var(--state-error);}
				}
				&.finished > td, &.status-75 > td {color:var(--state-ok);
				 	&:first-of-type::before	{background:var(--state-ok);}
				}
				&.failure > td, &.state--20 > td, &.status--50 > td { color: var(--state-error);
					&:first-of-type::before 	{background:var(--state-error);}
				}
				&.status-120 > td {color:var(--sharp-black);background:var(--state-block);}
				&:nth-child(2n+1) > td	{background:var(--white);}
				&.rx > td	{background:var(--white);}
				&.tx > td	{background:var(--easy-white);}
				&.storage > td	{background:var(--easy-white);}
				
			}
			td	{position:relative;/*pa: padding:14px 8px;*/border-bottom:1px solid var(--soft-white);background:var(--easy-white);z-index:1;
				&:first-of-type {padding-left:12px;border-radius:4px 0 0 4px;
					&::before {content:"";position:absolute;border-radius:0px 4px 4px 0px;width:4px;height:32px;background:transparent;transform:translate(-15px, -6px);}
            	}
				&:last-of-type {border-radius:0 4px 4px 0;padding-right:8px;}
				&.num	{text-align:right;padding-right:8px;}
			}
		}
		> tfoot	{
			th	{background:var(--soft-white);
				 &.num {text-align:right;}
			}
			td 	{padding:16px 8px;}
			b	{padding:0 8px;}
		}
		}
	}
}
section.list, article.list, div.list	{padding:0 8px;
	> header	{flex-wrap:wrap;
		> nav	{display:flex;flex:auto;align-items:center;
			> a, > label	{flex:auto;max-width:80px;margin-right:4px;line-height:16px;border-radius:8px;padding:8px;text-align:center;text-decoration:none;font-size:14px;background:var(--mild-gray);transition:all .4s;
				&:hover		{color:var(--white);background:var(--interactive-dark);}
				&.active	{font-weight:bold;color:var(--interactive-default);background:var(--interactive-light);}
				> input		{display:none;}
			}
			> label::before	{display:block;width:100%;text-align:center;}
    	}
		> menu	{display:flex;
			> label {margin-left:2px;width:16px;height:48px;border:1px solid var(--mild-gray);border-radius:0px 0px 8px 8px;padding-left:24px;background:var(--mild-gray);cursor:pointer;
				&::before	{position:absolute;content:"";left:6px;top:0;width:8px;height:32px;border:2px solid var(--easy-white);border-width:0 2px 2px 2px;border-radius:0 0 8px 8px;background:var(--mild-gray);}
				&::after 	{content:attr(title);font-size:14px;display:none;}
				&.active	{background:var(--white);
					&.status-active::before		{background:var(--state-active);}
					&.status-staging::before	{background:var(--state-active);}
					&.status-transit::before	{background:var(--state-active);}
					&.status-draft::before 		{background:var(--state-manual);}
					&.status-store::before 		{background:var(--state-manual);}
					&.status-pending::before 	{background:var(--state-warning);}
					&.status-staged::before 	{background:var(--state-auto);}
					&.status-closed::before 	{background:var(--state-auto);}
					&.status-finished::before 	{background:var(--state-ok);}
					&.status-block::before 		{background:var(--state-block);}
					&.status-blocked::before 	{background:var(--state-block);}
					&.status-error::before 		{background:var(--state-error);}
					&.status-aborted::before 	{background:var(--state-error);}
					&.status-cancel::before 	{background:var(--state-error);}
					&.status-failure::before 	{background:var(--state-error);}
				}
				> input		{display:none;}
			}
		}
	}
	> search	{display:flex;align-items:center;flex-wrap:wrap;width:100%;margin-top:10px;border-top:1px solid var(--mild-gray);padding:12px 0;
		> label	{width:45%;max-width:160px;margin:4px;
			&::before 	{content:"";}
			> input, > select {height:42px;}
		}
		> button {margin:4px;display:none;}
		> menu	 {margin:4px;display:none;align-items:center;justify-content:flex-end;flex:1 0 auto;
			> label	{width:200px;}
		}
	}
	> table		{min-width:100%;border-top:1px solid var(--mild-gray);border-collapse:collapse;
		a.icon	{position:absolute;top:0;right:0;width:40px;height:40px;
				&::before {font-size:18px;line-height:40px;}
		}
		> thead {
			th 	{position:sticky;top:0;font-weight:normal;font-size:14px;text-transform:uppercase;background:var(--soft-white);z-index:2;
				&::before {content:"";display:block;position:absolute;bottom:-8px;left:0;width:100%;height:9px;background:linear-gradient(180deg, #00000054 0%, #00000000 9px);z-index:10;}
				&::after {content:"";position:absolute;bottom:21px;margin-left:5px;height:6px;line-height:2px;font-size:13px;font-family:'FontAwesome';}
				&.asc::after {content:"\f0dd";}
				&.desc::after 	{content:"\f0dd";transform:rotate(-180deg);}
				&:first-of-type {padding-left:15px;
					&::before {border-top-left-radius:4px;}
				}
				&:last-of-type {width:48px;
					&::before {border-top-right-radius:4px;}
				}
				&.date 	{min-width:160px;}
				&.num	{text-align:center;}
			}
		}
		> tbody	{
			tr	{
				&:hover {position:relative;border-radius:4px;outline:1px solid var(--interactive-default);z-index:2;
					td	{background:var(--white);}
				}
				&.empty:hover {outline:none;
					td	{background:var(--easy-white);}
				}
				&.active > td, &.state-50 > td, &.status-50 > td {color:var(--state-ok);
					&:first-of-type::before 	{background:var(--state-active);}
				}
				&.status-50 > td {color:var(--soft-black);}
				&.draft > td:first-of-type::before 		{background:var(--state-manual);}
				&.pending > td,
				&.state-25 > td,
				&.state-35 > td,
				&.status-25 > td { color:var(--state-warning);
					&:first-of-type::before 	{background:var(--state-warning);}
				}
				&.status-40 > td { color:var(--state-ok);font-weight:bold;
					&:first-of-type::before 	{background:var(--state-ok);}
				}
				&.state-50 > td	{color:var(--state-ok);}
				&.status-60 > td { color:var(--state-error);font-weight:bold;
					&:first-of-type::before 	{background:var(--state-error);}
				}

				&.finished > td, &.status-75 > td {color:var(--state-ok);
				 	&:first-of-type::before	{background:var(--state-ok);}
				}
				&.failure > td, &.state--20 > td, &.status--50 > td { color: var(--state-error);
					&:first-of-type::before 	{background:var(--state-error);}
				}
				&.status-120 > td {color:var(--sharp-black);background:var(--state-block);}
				&:nth-child(2n+1) > td	{background:var(--white);}
				&.rx > td	{background:var(--white);}
				&.tx > td	{background:var(--easy-white);}
				&.storage > td	{background:var(--easy-white);}
				&.status-100 > td { color:var(--state-auto);
					&:first-of-type::before {background:var(--state-auto);}
				}
			}
			td	{position:relative;/*pa: padding:14px 8px;*/border-bottom:1px solid var(--soft-white);background:var(--easy-white);z-index:1;
				&:first-of-type {padding-left:12px;border-radius:4px 0 0 4px;
					&::before {content:"";position:absolute;border-radius:0px 4px 4px 0px;width:4px;height:32px;background:transparent;transform:translate(-15px, -6px);}
            	}
				&:last-of-type {border-radius:0 4px 4px 0;padding-right:8px;}
				&.num	{text-align:right;padding-right:8px;}
			}
		}
		> tfoot	{
			th	{background:var(--soft-white);
				 &.num {text-align:right;}
			}
			td 	{padding:16px 8px;}
			b	{padding:0 8px;}
		}
	}
}
body.report section.list {
	& >table {display: block;overflow: auto;}
}
section > article.list {border-left:2px solid var(--white);
	&.aside {
		th, td { padding:4px;}
	}
}
section.form > article.list {border-left:none;}
@media only screen and (max-width:560px) {
	section.head{
	& header {
		& button, 	& output  {margin-top:5px;}
		}
	}
}
@media only screen and (min-width:720px) {

	section.list, article.list { padding:0 16px;
		> header {
			> h2	{min-width:200px;}
			> menu > label {margin-left:8px;width:96px;
				&::after {display:initial;}
			}
		}
		> search > button	{display:initial;}
		> search > menu		{display:flex;}
	}

}
@media only screen and (max-width:900px) {
	section.head{padding-bottom:16px;}
 }
@media only screen and (min-width:1120px) {
	section.head{padding-bottom:0px;
		& header {flex-wrap:nowrap;}
	}
	section {
		&.xl						{display: flex;
			& article.form.l 		{width:56.6%;}
			& article.list.s 		{width:40.3%;}
		}
	}
}
@media only screen and (min-width:1280px) {
	body.report section.list {
		& >table {display: table;overflow: unset;}
	}
	section {
		&.xl						{display: flex;
			& article.form.l 		{width:63.6%;}
			& article.list.s 		{width:33.3%;}
		}
	}
}
/* form template */
section.form, article.form 	{padding:0 8px;
	>  header 	{
		> h2		{padding-left:10px;}
	}
	article			{margin:12px 0;/*border-top:1px solid var(--mild-gray);*/padding:4px 8px;border-radius:8px;
		> h3		{margin:16px 0 8px;}
	}
}
@media only screen and (min-width:720px) {
	section.form	{display:flex;
		article.s	{width:33.3%;}
		article.m	{width:50%;}
		article.l	{width:66.7%;}
	}
}
span.transfer		{display:flex;position:relative;float:left;width:240px;margin-left:16px;align-items:end;transform:translateY(-16px);}
@media only screen and (min-width:1366px) {
	iframe.popup {
		&.storage {min-height:720px;}
		&:popover-open {width:980px;}
		&.large:popover-open {width:1280px;}
	}
}
/* alert template */
section.alert 	{position:absolute;left:5%;top:5%;width:90%;max-width:520px;min-height:280px;border-radius:8px;padding:24px 16px 16px 32px;background:var(--white);box-shadow:0px 20px 40px #00000054;z-index:100;
	p			{margin:12px 0;width:100%;}
}
@media only screen and (min-width:720px) {
	section.alert 	{left:50%;margin-left:-260px;top:20vh;
		& input		{flex:1 0 80%;max-width:360px;}
	}
}
/* system overview */

@media print {
	body {background: none;}
	body > footer {display: none;}
	body > header {display: none;}
	button {display: none;}
	a.print, a.export, label.switch, a.btn.add, a.clear {display: none;}
	nav.filter  {position: absolute;right: 5px;top:7px;}
	nav.filter label.status.off {display:none;}
	nav.tab a {display: none;}
	nav.tab a.active {display: inline-block;position: absolute;top: 7px;left: 20%;}
	td:first-of-type::before {display:none;}
	section header label.empty:last-of-type {padding-right: 0!important;}
	section {
		& header {background: none!important;
			& label{max-width:20%;}
			& .empty{padding-right: 15px;
				&:last-of-type{padding-right: 0px;
				}
			} 
		}
		& table {
		  & td, & th {height: 25px;max-width:70px;
			& sub{display:none;}
		  }
		}
	}
	section {margin:0px;background: none!important;box-shadow: unset;max-height: unset;}
	.list table {
		& tbody {
		  & td {white-space: normal;overflow: visible;padding:0px;padding-left:5px;background: none;}
		
		}
	}
	.list table {
		& thead{border-bottom:1px solid grey;background:none!important;
		& th {padding:0px;padding-left:5px;
			&:last-of-type{display: none;}
			&::before {display:none;}
		}
	}
		& tbody {
		  & td {
			&:last-of-type{display: none;}
		  }
	}
	}
}
/** end of styles, enjoy! **/