@charset "UTF-8";
/** larisa 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-reset:			#4A9BEC;
	--state-manual:			#FFC107;
	--state-warning: 		#FFC107;
	--state-error:			#EB5100;
	--state-offline:		#9BA7AE;
	--state-active:			#FFEB3B;
	--state-block:			#D500F9;
	
	--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;
	> 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;}
}
/* sys components */
svg.wcs 	{padding:0 5px 10px;margin:8px 0;
	rect  		{fill:var(--state-offline);stroke:var(--base-background);stroke-width:1px;}
	text  		{fill:var(--white);stroke:var(--white);stroke-width:0.5px;font-size:11px;font-weight:normal;text-anchor:middle;dominant-baseline:middle;}
	line		{fill:var(--white);stroke:var(--muted-gray);stroke-width:2px;}
	.wes 		{transform:translate(10px, 10px);}
	.wcs 		{transform:translate(70px, 10px);}
	.wms 		{transform:translate(130px, 10px);}
	.opc 		{transform:translate(70px, 70px);}
	.pcs 		{transform:translate(10px, 70px);}
	.srm 		{transform:translate(130px, 70px);}
	/* state chenages*/
	.auto {
		rect	{fill:var(--state-auto);}
	}
	.estop {
		rect	{fill:var(--state-error);}
	}
	.error {
		rect	{fill:var(--state-error);}
	}
	.manual {
		rect	{fill:var(--state-manual);}
	}
}
/* 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:top;}
.tablet		{display:none;}
.nobr		{white-space:nowrap;}
table sub	{display:block;color:var(--light-background);}
@container 	(width >= 720px) {
	th.tablet	{display:table-cell;}
	td.tablet	{display:table-cell;}
	table sub	{display:none;}
}
/* forms */
p			{display:flex;flex-wrap:wrap;margin:8px 0;width:100%;}
label		{position:relative;width:100%;display:flex;box-sizing:border-box;flex-flow:row wrap;align-items:center;justify-content:space-between;padding-right:4px;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-color:var(--mild-gray);outline:none;}
	&:disabled	{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);transition:all .4s;
	&.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;}
	&.small		{min-width:80px;}
}
footer		{width:100%;margin-top:24px;
	button	{margin-bottom:16px;}
}
.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 */
	section.xs, header.xs, article.xs	{width:100%;max-width:360px;}
	section.s, 	header.s, 	article.s	{width:100%;max-width:720px;}
	section.m, 	header.m, 	article.m	{width:100%;max-width:1080px;}
	section.l, 	header.l, 	article.l	{width:100%;max-width:1440px;}
	section.xl, header.xl, article.xl	{width:100%;max-width:1800px;}
/* heights */
	.x1				{height:48px;}
	label.x1		{height:60px;}
	.x2				{height:96px;}
	label.x2		{height:116px;}
/* response */
@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;}
	}
}
@container (width >= 720px) {
	section.xs, header.xs, article.xs {width:calc(25%);}
	section.s, 	header.s, 	article.s {width:calc(33.3%);}
	section.m, 	header.m, 	article.m {width:calc(50%);}
	section.l, 	header.l, 	article.l {width:calc(66.6%);}
	section.xl, header.xl, article.xl {width:calc(75%);}
	section.xx, header.xx, article.xx {width:calc(100%);}
}
/* 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;
		header.l, article.form.l 	{width:100%;}
		header.s, article.list.s 	{width:100%;}
	}
}
@media only screen and (min-width:720px) {
	.event > header {padding:16px 8px;}
}

/* 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:700px; min-height:420px;/*Iva change position:absolute 2024-07-01*/}
	&::backdrop 	{background-color:#0007;}
	&.storage		{min-height:720px;}
	&.optimization	{width:980px;}
}

body.popup	{background:var(--easy-white);padding:48px 0;
	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%;}
}
/** 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, &::after	{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";}
		&.control::before	{content:"\f494";}
		&.order::before		{content:"\f4de";}
		&.event::before		{content:"\f06a";}
		&.opc::before		{content:"\f0e8";}
		&.execution::before	{content:"\f15c";}
		&.document::before	{content:"\f15c";}
		&.inventory::before	{content:"\f483";}
		&.storage::before	{content:"\f00a";}
		&.material::before	{content:"\f02a";}
		&.report::before	{content:"\f073";}
		&.develop::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:168px;}
			&.button::before{content:"\f060";}
		}
	}
}
/* main content */
body main	{position:relative;margin:0 8px 0 56px;
	> 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	{padding:8px 16px;border-radius:4px;background:var(--white);}
			&.l > h2 {width:100%;display:flex;flex:auto;align-items:center;justify-content:space-between;
				span	{height:20px;line-height:20px;}
			}
			
		}
	}
	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 button	{min-width:40px;}
		.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/larisa-tyras.png') center bottom no-repeat;background-size:150px;*/z-index:-1;}
.popup > footer	{z-index:10;}
/** page templates */
/* list template */
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-draft::before 		{background:var(--state-manual);}
					&.status-pending::before 	{background:var(--state-warning);}
					&.status-finished::before 	{background:var(--state-ok);}
					&.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:200px;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	{
				&:nth-child(2n+1) {background:var(--white);}
				&:nth-child(2n)  {background:var(--easy-white);}
				&: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);background:var(--state-active);}
				&.draft > td:first-of-type::before 		{background:var(--state-manual);}
				&.pending > td,
				&.state-30 > td,
				&.state-40 > td,
				&.status-25 > td { color:var(--state-warning);
					&:first-of-type::before 	{background:var(--state-warning);}
				}
				&.state-50 > td	{color:var(--state-ok);}
				&.finished > td, 
				&.status-75 > td,
				&.status-100 > 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);}
				&.rx > td {font-weight:bold;background:var(--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:15px;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;}
				&.num	{text-align:right;padding-right:8px;}
				&.mid	{text-align:center;}
			}
		}
		> tfoot	{
			th	{background:var(--soft-white);
				 &.num {text-align:right;}
			}
			td 	{padding:16px 8px;}
			b	{padding:0 8px;}
		}
		&.aside, &.inventory, &.material { margin-bottom:16px;
		 	> tbody > tr.status-50 > td {background:inherit;}
		}
		&.storage tr.status-50.state-50 > td	{background:var(--white);}
		&.storage tr.status-50.state-75 > td	{background:var(--easy-white);}
		&.storage tr.status-50.state-100 > td	{background:var(--soft-white);}
	}
}
body.report section.list {
	& >table {display: block;overflow: auto;}
}
section > article.list {border-left:2px solid var(--white);
	&.aside {
		th, td {padding:4px;}
	}
}
@media only screen and (min-width:720px) {
	section {
		> article.aside	{top:-40px;
			> header	{height:34px;line-height:34px;}
		}
	}
	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 (min-width:1120px) {
	section {
		&.xl							{display: flex;
			header.l, article.form.l  	{width:56.6%;}
			header.s, 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;
			header.l, article.form.l 	{width:63.6%;}
			header.s, 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:8px 0;}
	}
}
@media only screen and (min-width:720px) {
	section.form, article.form { padding:0 16px;}
	/* iframe.popup {
		&.storage {min-height: 720px;}
	} */
}
@media only screen and (min-width:1366px) {
	iframe.popup {
		&.storage {min-height: 720px;}
	}
}
/* 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;}
	}
}
@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! **/