html,
body
{
    width:100%;
    height:100%;
    margin:0;
    font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, Noto Color Emoji, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

html
{
    overflow:hidden;
	background-color:var(--bg);
    scroll-behavior:smooth;
}

body
{
	--vw:1800px;

	position:relative;
    max-width:var(--vw);
    margin:0 auto;
	background-color:var(--theme1);
    box-shadow:0 0 10px rgba(0, 0, 0, .6);
}


header {
    z-index:100;
	position:absolute;
	top:0;
	left:0;
	right:0;
	transition:background-color .3s;
}
header.small {
	background-color:#EAEAF0CC;
}
header:hover {
	background-color:#EAEAF0;
	box-shadow:0 0 10px rgba(0, 0, 0, .6);
}
header > .logo {
	height:96px;
	transition:height .5s;
}
header.small > .logo {
	height:64px;
}
header > .logo > img {
	filter:drop-shadow(2px 4px 6px #000A);
}


main {
    width:100%;
    height:100%;
    overflow:auto;
}
#page {
    width:100%;
}

#page .banner
{
	--bMax:600px;

    position:relative;
    width:100%;
    max-height:var(--bMax);
    overflow:hidden;
}
#page > .banner > img
{
    /* position:absolute;
    top:50%;
    transform:translateY(-50%); */
    width:100%;
	max-height:var(--bMax);
    object-position:center;
    object-fit:cover;
}



/* #page > .banner
{
    position:relative;
    width:100%;
    max-height:700px;
    overflow:hidden;
}
#page > .banner > img
{
    /* position:absolute;
    top:50%;
    transform:translateY(-50%); *//* 
    width:100%;
} */

#pageHeader
{
    z-index:2;
    position:sticky;
    /* background-color:var(--theme1Transparent); */
    background-color:var(--theme1);
    top:0;
    width:-moz-available;
    backdrop-filter:blur(1px);
}

.page_search
{
	overflow:hidden;
	position:relative;
	display:inline-block;
	vertical-align:middle;
	width:30px;
	height:28px;
	margin-top:3px;
	margin-left:20px;
	background-image:url(/Images/search.png);
	background-size:18px 18px;
	background-position:6px 5px;
	background-repeat:no-repeat;
	font-size:16px;
	cursor:pointer;
	transition:width .4s ease-in-out;
}
.page_search.show
{
	width:250px !important;
}
.page_search > :first-child
{
	margin-left:30px;
}
.page_search > input
{
	width:calc(100% - 30px);
	height:100%;
	padding:1px 0;
	background:transparent;
	border:0;
	font-size:16px;
	line-height:1.3em;
	outline:0;
}
.darkTheme .page_search > input
{
	color:#FFF;
}
.page_search > .bar
{
	position:absolute;
	left:30px;
	right:0;
	bottom:2px;
	height:1px;
	background-color:#3a454c;
	background-position:0 0;
    background-position-x:0px;
	background-position-x:0px;
	background-size:200% 100%;
	background-repeat:repeat-x;
}
.page_search.searching > .bar
{
	bottom:1px;
	height:2px;
	background-image:url("/Images/rowGradient.png");
	animation:rowLoading 5s linfear infinite;
}


/* New Button */
#newObject
{
	overflow:hidden;
	display:inline-block;
	vertical-align:middle;
	width:110.25px;
	margin-left:14px;
	transition:width .4s;
	filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}
#newObject > button
{
	display:inline-block;
	padding:10px 11px 8px;
	background-color:#fff;
	border:0;
	border-radius:3px;
	font-size:1em;
	color:var(--color1Alt1);
	white-space:nowrap;
	cursor:pointer;
	outline:none;
}
#newObject > button:hover
{
	background-color:var(--color1Alt1);
	color:#fff;
}
#newObject > button:hover:active
{
	background-color:var(--color1Alt2);
}
/* New Button: End Of */

/* Lists */
.list.list_fancy
{
	z-index:1;
	overflow:visible;
	position:relative;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:180px;
	filter:drop-shadow(0 0 1px #333);
}
.list_row.loading,
.list_row.cut
{
	cursor:unset;
}
.list_row > .loading,
.list_row > .overlay
{
	z-index:4;
	display:none;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
}
.list_row > .overlay
{
	z-index:3;
	background-color:#e7ecf4a0;
}
.list_row.cut > .overlay,
.list_row.loading > .overlay
{
	display:block;
}
.list_row.loading > .loading
{
	/* opacity:0.15; */
	display:block;
	background-position:0 0;
	background-image:url("/Images/rowGradientTransparent.png");
	background-size:200% 100%;
	background-repeat:repeat-x;
	animation:rowLoading 5s linear infinite;
}
@keyframes rowLoading
{
	0%{ background-position:0 0; }
	100%{ background-position:200% 0; }
}

/* List Row */
.list_row
{
    position:relative;
	border-bottom:1px solid var(--listRowBorder);
}
.window .list_row
{
	border-bottom:1px solid var(--windowListRowBorder);
}
.list_row:hover
{
	z-index:98;
}
.list_row:last-child
{
	border-bottom:0 !important;
}

/* List Header */
.list_header,
.list_row_header
{
	display:flex;
	box-sizing:border-box;
	align-items:center;
	gap:10px;
}
.list_header
{
	padding:4px 0;
	color:var(--windowTitleText);
	font-weight:600;
}
.list_header.list_fancy
{
	z-index:2;
	height:50px;
	margin-left:19px;
	margin-right:19px;
	padding:10px 0 10px 18px;
	background-color:var(--color1Alt1);
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	color:#fff;
	text-align:left;
	filter:drop-shadow(0 0 .5px rgba(0, 0, 0, 0.9));
}
.list_row_header.changed::after
{
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	border-style:solid;
	border-width:15px 0px 0px 13px;
	border-color:var(--color1) transparent transparent transparent;
}

/* List Expander */
.list_row_header > .expander
{
	display:none;
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%, -75%);
	width:30px;
	height:20px;
	cursor:pointer;
}
.list_row_header > .expander::after
{
	content:"";
	display:none;
	position:absolute;
	top:calc(50% - 8px);
	left:calc(50% - 5px);
	transform:rotate(90deg) translate(0px, 0);
	width:0;
	height:0;
	border-top:16px solid transparent;
	border-bottom:16px solid transparent;
	border-left:16px solid var(--listDisabledText);
	filter:drop-shadow(0 0 2px #0009);
}
.list_row.expandable > .list_row_header:hover > .expander::after,
.list_row.expanded > .list_row_header > .expander::after
{
	display:block;
}
.list_row_header > .expander:hover::after
{
	display:block;
	border-left:16px solid var(--color1Alt2);
}
.list_row.expanded > .list_row_header > .expander::after
{
	transform:rotate(-90deg) translate(2px, 0px);
}

/* List Row Header */
.list_row_header
{
	position:relative;
	z-index:2;
	height:34px;
	background-color:var(--listRow);
	color:var(--textList);
	white-space:nowrap;
	cursor:pointer;
}
.list_row_header.list_fancy
{
	height:50px;
}
.list_row_header.red
{
	color:var(--listRowRedText);
}
.window .list_row_header
{
	background-color:var(--windowListRow);
}
.window .list.disabled .list_row_header,
.window .list .list_row.disabled > .list_row_header,
.window .list .list_row_header.disabled
{
	background-color:var(--windowListRowDisabled);
	border-bottom: 1px solid var(--windowListRowDisabledBorder);
}
.list_row_header.warning,
.window .list .list_row_header.warning,
.window .list .list_row.approval:not(.expanded) .list_row_header,
.window .list .list_row.list_row_header.approval
{
	background-color:var(--listRowWarning);
}
.list_row.list_row_header.selected,
.list_row.list_row_header:not(.loading):not(.cut):hover:active,
.list_row.expandable.list_row_header:hover:active,
.list_row.expandable.selected > .list_row_header,
.list_row.expandable.expanded > .list_row_header
{
	background-color:var(--listRowSelected);
}
.list_row:not(.loading):not(.cut).list_row.header:hover,
.list_row:not(.expanded) > .list_row_header:hover
{
	background-color:var(--listRowHover) !important;
}
.list:not(.items) .list_row.list_row_header.selected
{
	background-color:var(--listRowSelected);
}

/* List Column */
.list_column,
.list_column > .value
{
	position:relative;
	display:flex;
	/* overflow:hidden; */
	box-sizing:border-box;
	/* flex-grow:1;
	flex-basis:100px; */
	flex-grow:0;
	flex-basis:100%;
	align-items:center;
	height:100%;
	font-size:1em;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.window .list_header > .list_column,
/* .window .list_row_header > .list_column input, */
.window .list_row_header > .list_column > *:first-child,
.window .list_row_header > .list_column > input
{
	padding-left:6px;
}
.list_row.list_row_header.list_fancy .list_column:first-child,
.list_row.list_fancy > .list_row_header .list_column:first-child
{
	margin-left:18px;
}
.list_column.center
{
	justify-content:center;
}
.list_column.select
{
	flex-grow:0;
	flex-shrink:0;
	flex-basis:46px;
	max-width:46px;
	margin-left:-10px;
	padding:0 0 0 16px;
}
.list_row_body > .list_row_header > .list_column:first-child
{
	flex-basis:calc(100% + 16px);
}
.window.purchaseOrder .list.items .list_column.select
{
	position:absolute;
	left:0;
	transform:translateX(-100%);
	width:22px;
	height:100%;
	margin-left:unset;
	padding:unset;
	cursor:pointer;
}
.window .list.disabled .list_column.select,
.window .list .list_row.disabled .list_column.select,
.window .list .list_row_header.disabled > .list_column.select
{
	display:none;
}

/* List Sort */
.list_header > .list_column[data-sort] > .name
{
	cursor:pointer;
}
.list_header > .list_column[data-sort] > .name > *
{
	display:inline-block;
	vertical-align:middle;
}
.list_header > .list_column .sort
{
	height:14px;
	width:10px;
	margin-top:2px;
	margin-left:2px;
}
.list_header > .list_column.sort .sort
{
	background-image:url("/Images/sort.png");
	background-size:100% 100%;
	background-position:0, 0;
}
.list_header > .list_column.desc .sort
{
    -moz-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
    -ms-filter:"FlipV";
}

/* List Column Input */
.list_row_header > .list_column > input
{
	z-index:1;
	width:100%;
	height:100%;
	padding:0;
	background:transparent;
	border:0;
	outline:none;
	text-align:left;
	/* color:var(--text); */
	color:inherit;
	font-size:1em;
	cursor:inherit;
}
.list_row_header > .list_column > input[type="button"]:not(:disabled):hover
{
	background-color:var(--fieldActive);
}
.list_row.selected > .list_row_header > .list_column > input:required:placeholder-shown
{
	background-color:var(--colorRed);
	color:#FFF;
}
.list_row.selected > .list_row_header > .list_column > input:not(:disabled):hover,
/* .list_row.selected > .list_row_header > .list_column > input:not([type="button"]):not(:disabled):focus */
.list_row.selected > .list_row_header > .list_column > input:not([type="button"]):focus
{
	/* background-color:var(--windowListRow); */
	color:inherit;
}

/* List Select */
.list_column.select > label
{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	display:block;
    position:relative;
	height:18px;
	width:18px;
    padding-left:0 !important;
	background-color:#fff;
	border:1px solid #666;
	border-radius:2px;
	cursor:pointer;
	transition:border-color ease $duration/2;
	-webkit-transition:border-color ease $duration/2;
	-moz-transition:border-color ease $duration/2;
	-o-transition:border-color ease $duration/2;
}
.list_row > .list_column.select:hover > label
{
	border:2px solid #777;
}
.all .list_column.select > label,
.list_row.selected > .list_column.select > label
{
	border:2px solid #333;
}
.list_column.select > label::before,
.list_column.select > label::after
{
	content:' ';
	position:absolute;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	transform-origin:left top;
	-webkit-transform-origin:left top;
	-moz-transform-origin:left top;
	-ms-transform-origin:left top;
	-o-transform-origin:left top;
	display:inline-block;
	height:0;
	width:4px;
	background-color:#20a6ef;
	border-radius:1.5px;
	/* transition:opacity ease .5;
	-webkit-transition:opacity ease .5;
	-moz-transition:opacity ease .5; */
}
.list_column.select > label::before
{
	top:11px;
	left:8.5px;
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	-moz-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	-o-transform:rotate(-135deg);
}
.list_column.select > label::after
{
	top:5.5px;
	left:1px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.all .list_column.select > label::before,
.list_row.selected > .list_column.select > label::before
{
	height:19px;
	box-shadow:0 0 0 1.5px #f9f9f9;
	animation:checkboxTail .4s ease 0s forwards;
	-webkit-animation:checkboxTail .4s ease 0s forwards;
	-moz-animation:checkboxTail .4s ease 0s forwards;
	-o-animation:checkboxTail .4s ease 0s forwards;
}
.all .list_column.select > label::after,
.list_row.selected > .list_column.select > label::after
{
	height:9px;
	animation:checkboxHead .2s ease 0s forwards;
	-webkit-animation:checkboxHead .2s ease 0s forwards;
	-moz-animation:checkboxHead .2s ease 0s forwards;
	-o-animation:checkboxHead .2s ease 0s forwards;
}

/* List Actions */
/* Field Actions */
.list_column > .actions
{
	z-index:4;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	display:flex;
}
.list_column > .actions > .action,
.list_column > .open,
.field > .open
{
	z-index:2;
	display:none;
	height:100%;
	width:32px;
	box-sizing:border-box;
	/* background-color:var(--listRowHeaderButton); */
	background-color: #FFF2;
	cursor:pointer;
}
.list_column > .open,
.field > .open
{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
}
.field > .open
{
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
/* .list_column:hover > .actions > .view, */
.list_column:hover > .value.object ~ .actions > .view,
.list_column:hover > .value.file ~ .actions > .open,
.list_column:hover > .value.file ~ .open,
.field:hover input.file ~ .open
{
	display:block;
}
.list_column > .actions > .action:hover,
.list_column > .open:hover,
.field > .open:hover
{
	background-color:var(--color1Alt1);
}
.list_column > .actions > .action:hover:active,
.list_column > .open:hover:active,
.field > .open:hover:active
{
	background-color:var(--color1Alt2);
}
.list_column > .actions > .action::after,
.list_column > .actions > .open::after,
.list_column > .open::after,
.field > .open::after
{
	content:"";
	display:block;
	width:100%;
	height:calc(100% - 1px);
	margin-top:1px;
	background-image:url("/Images/reveal.png");
	background-size:26px;
	background-repeat:no-repeat;
	background-position:center;
}
.list_column > .actions > .view::after
{
	background-image:url("/Images/open.png");
	background-size:20px;
}

/* List Body */
.list_row_body
{
	overflow:hidden;
	position:relative;
	z-index:1;
	height:0;
	margin:0 6px;
	background-color:var(--listRowSelected);
}
.list_row.expanded .list_row_body
{
	/* overflow:auto; */
	overflow:visible;
	height:auto;
}
.list_row.expanded .list_row_body:not(:empty)
{
	border-top:1px solid var(--listRowBorder);
}
.window.purchaseOrder .list_row.expanded .list_row_body:not(:empty)
{
	border-top:2px solid #999;
	border-bottom:2px solid #999;
}

.list_row_body > .header
{
	overflow:hidden;
	display:flex;
	align-items:center;
	gap:3px;
	width:fit-content;
	margin:14px auto;
	border-radius:8px;
	filter:drop-shadow(0 0 2px rgba(0, 0, 0, .35));
}
.list_row_body > .header > .button
{
	padding:4px 6px;
	background-color:var(--windowTabCurrent);
	color:var(--windowTabCurrentText);
	font-weight:600;
	cursor:pointer;
}
.list_row_body > .header > .button:hover
{
	background-color:var(--windowTabHover);
	color:#FFF;
}
.list_row_body > .header > .button.current
{
	background-color:var(--windowTab);
	color:#FFF;
	cursor:default;
}
.list_row_body > .header > .button:first-child
{
	padding-left:10px;
}
.list_row_body > .header > .button:last-child
{
	padding-right:10px;
}
.list_row_body > .body
{
	/* margin:0 20px 20px; */
	margin:0;
}
.list_row_body .list_header
{
	color:var(--sublistHeaderText);
}

.list_empty
{
	display:none;
	padding:10px;
	background-color:var(--listRow);
	text-align:center;
	color:var(--textList);
	font-family:Arial, Helvetica, sans-serif;
	font-size:.95em;
	font-weight:bold;
}
.window .list_empty
{
	background-color:var(--windowListRow);
	color:var(--listEmptyText);
}
.list.disabled .list_row.disabled,
.list.disabled > .list_empty
{
	background-color:var(--windowListRowDisabled);
}
.list_body:empty + .list_empty
{
	display:block;
}

.list_options
{
    box-sizing:border-box;
    width:100%;
	height:30px;
}
.list_options.list_fancy
{
	z-index:2;
    height:50px;
    margin-top:45px;
    padding:0 25px;
}
.list_options > .option
{
	display:inline-block;
	margin:4px 0;
	padding:0 6px;
	color:#bbb;
	pointer-events:none;
}
.list_options.list_fancy > .option
{
    padding:0 10px;
    color:var(--textDisabled);
}
.list_options > .option.always,
.list.selection > .list_options > .option.selection,
.list.one > .list_options > .option.one
{
    color:var(--textList);
	pointer-events:auto;
    cursor:pointer;
}
.list_options > .option.dropDown > .selection
{
    cursor:pointer;
}








.products {
    display:grid;
    margin:100px 200px;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
}
.products > .product {
	box-sizing:border-box;
	padding:20px;
	background-color:#FFF;
	filter:drop-shadow(0 0 2px #0006);
	overflow:hidden;
}
.products > .product > img {
	width:100%;
	aspect-ratio:1;
	object-fit:cover;
}