root {
	color-scheme: light dark;
	--bodyBackgroundColor: rgb(0,0,0);
	--headerBackgroundGradientTopColor: rgb(0,0,0);
	--headerBackgroundGradientBottomColor: rgba(0,0,0,0);
	--itemNameColor: rgb(255,140,140);
}
@media (prefers-color-scheme: dark) {
	body {
		--bodyBackgroundColor: rgb(0,0,0);
		--headerBackgroundGradientTopColor: rgb(0,0,0);
		--headerBackgroundGradientBottomColor: rgba(0,0,0,0);
		--bodyTextColor: rgb(200,200,200);
		--linkTextColor: rgb(255,255,0);
		--footerLinkTextColor: rgb(255,255,0);
		--themeColorLight: rgb(50,50,50);
		--productIconBackgroundColorLight: rgba(255,255,255,1);
		--productIconBackgroundColorDark: rgba(200,200,200,0);
		--productCategoryBackgroundColor: rgba(200,200,200,.2);
/*		--logoImage: url('/art/logoDark.svg'); */
		--logoImage: url('/art/whitestreakDark.svg');
		--logoShineColor1: rgba(0,0,0,0);
		--logoShineColor2: rgba(0,0,0,0.1);
		--logoShineColor3: rgba(0,0,0,0.2);
		--menuIcon: url('/art/menuIconDark.svg');
		--cartIcon: url('/art/cartLight.svg');
		--orderListColor: rgb(50,50,50);
		--scrollColor: rgb(100,100,100);
		--sloganColor: rgb(200,200,200);
		--sloganShadowColor: rgb(100,100,100);
		--mainBackgroundImgOpacity: 0.2;
		--companyNameTextColor: rgb(0, 0, 0);
		--companyNameHighlightColor: rgb(255, 255, 255);
		--sectionBackgroundColor: rgba(100,100,100,0.5);
		--sectionBackgroundColorOdd: rgba(100,100,100,0.5);
		--sectionBackgroundColorEven: rgba(150,150,150,0.5);
	}
}
@media (prefers-color-scheme: light) {
	body {
		--bodyBackgroundColor: rgb(200,200,200);
		--headerBackgroundGradientTopColor: rgb(200,200,200);
		--headerBackgroundGradientBottomColor: rgba(200,200,200,0);
		--bodyTextColor: rgb(20,20,20);
		--linkTextColor: rgb(20,60,180);
		--footerLinkTextColor: rgb(20, 60, 180);
		--themeColorLight: rgb(100,100,100);
		--productIconBackgroundColorLight: rgba(100,100,100,1);
		--productIconBackgroundColorDark: rgba(200,200,200,0);
		--productCategoryBackgroundColor: rgba(100,100,100,.2);
/*		--logoImage: url('/art/logoLight.svg'); */
		--logoImage: url('/art/whitestreakLight.svg');
		--logoShineColor1: rgba(200,200,200,0);
		--logoShineColor2: rgba(200,200,200,0.2);
		--logoShineColor3: rgba(200,200,200,0.5);
		--menuIcon: url('/art/menuIconLight.svg');
		--cartIcon: url('/art/cartDark.svg');
		--orderListColor: rgb(150,150,150);
		--scrollColor: rgb(100,100,100);
		--sloganColor: rgb(100,100,100);
		--sloganShadowColor: rgb(255,255,255);
		--mainBackgroundImgOpacity: 0.1;
		--companyNameTextColor: rgb(255, 255, 255);
		--companyNameHighlightColor: rgb(0, 0, 0);
		--sectionBackgroundColor: rgba(200,200,200,0.5);
		--sectionBackgroundColorOdd: rgba(150,150,150,0.5);
		--sectionBackgroundColorEven: rgba(100,100,100,0.5);
	}
}
body {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 100vh;
	margin: 0;
/* 	margin: 0 10px 0 10px; */
	font-family: "calibri","arial";
	color: var(--bodyTextColor);
	background-color: var(--bodyBackgroundColor);
	--headerTitleWrapWidth: 490px;
	--headerHeight: 100px;
	--footerHeight: 100px;
}
@media ( width > 490px ) {
	body {
		--headerHeight: 100px;
	}
}
/*****************************************************************\
                      basic elements
\*****************************************************************/
* {
	scroll-margin-top: var(--headerHeight);
}
h1 {
	font-family: carlito;
	font-size: 1.5em;
	font-style: italic;
	font-weight: 100;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.3em;
}
h4 {
	font-size: 1.2em;
}
a {
	color: var(--linkTextColor);
	text-decoration: none;
}
img {
	border: none;
}
/*****************************************************************\
                      general layout
\*****************************************************************/
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--headerHeight);
	width: 100%;
	min-width: 238px;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
/* 	background: linear-gradient( */
/* 		to bottom, */
/* 		var(--headerBackgroundGradientTopColor) 60%, */
/* 		var(--headerBackgroundGradientBottomColor) 100% */
/* 	) */
	background: linear-gradient(
		to bottom,
		var(--headerBackgroundGradientTopColor) 70px,
		var(--headerBackgroundGradientBottomColor) 100%
	)
}
header > * {
	vertical-align: top;
}
main {
	position:relative;
	display: block;
	margin-top: var(--headerHeight);
	margin-left: 10px;
	margin-right: 10px;
/* 	left:0; */
/* 	right:0; */
	z-index:0;
	flex: 1;
}
@media only screen and ( min-width: 961px ) {
	main {
		margin-left: 20px;
		margin-right: 20px;
	}
}
aside {
	position: absolute;
	z-index: 1;
}
footer{
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
}
/*****************************************************************\
                      header elements
\*****************************************************************/
img#menuToggle {
	max-height: 32px;
	margin: 2px;
	cursor: pointer;
	transform: rotate(90deg);
  	content: var(--menuIcon);
}
a#logo {
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
a#logo:after {
	content: "";
	position: absolute;
	top: 0%;
	right: -20%;
	width: 20%;
	height: 100%;
	background: linear-gradient(
		130deg,
		var(--logoShineColor1) 0%,
		var(--logoShineColor2) 40%,
		var(--logoShineColor3) 45%,
		var(--logoShineColor3) 50%,
		var(--logoShineColor2) 60%,
		var(--logoShineColor1) 100%
	);
	animation: 10s linear 2s shine infinite;
}
img#logoImage {
  	max-height: 34px;
	animation: 1s linear 0s 1 shake;
  	cursor: pointer;
  	content: var(--logoImage);
  	margin-top: 2px;
}
@keyframes shine {
	0% {
		right: -20%;
	}
	10% {
		right: 100%;
	}
	100% {
		right: 100%;
	}
}
@keyframes shake {
	0% {
		transform: translate(1px, 0px);
	}
	5% {
		transform: translate(-1px, 10px);
	}
	10% {
		transform: translate(0px, 0px);
	}
	15% {
		transform: translate(-1px, 9px);
	}
	20% {
		transform: translate(1px, 0px);
	}
	25% {
		transform: translate(0px, 8px);
	}
	30% {
		transform: translate(1px, 0px);
	}
	35% {
		transform: translate(-1px, 7px);
	}
	40% {
		transform: translate(0px, 0px);
	}
	45% {
		transform: translate(-1px, 6px);
	}
	50% {
		transform: translate(1px, 0px);
	}
	55% {
		transform: translate(0px, 5px);
	}
	60% {
		transform: translate(1px, 0px);
	}
	65% {
		transform: translate(-1px, 4px);
	}
	70% {
		transform: translate(0px, 0px);
	}
	75% {
		transform: translate(-1px, 3px);
	}
	80% {
		transform: translate(1px, 0px);
	}
	85% {
		transform: translate(0px, 2px);
	}
	90% {
		transform: translate(1px, 0px);
	}
	95% {
		transform: translate(-1px, 1px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}
header p {
	margin-top:0;
	margin-bottom:0;
}
div#headerButtons {
	position:absolute;
	top:0px;
	right:0px;
	text-align:right;
}
div#name {
	display: inline-block;
	position: relative;
	z-index: -2;
}
div#name img {
	display:block;
}
img#name1 {
	height:1.5em;
	animation:4s ease-in-out 0s 1 slide;
	animation-fill-mode:forwards;
	visibility:hidden;
}
img#name2 {
	height:1.5em;
	animation:3.8s ease-in-out .2s 1 slide;
	animation-fill-mode:forwards;
	visibility:hidden;
	margin-left:0.5em;
}
img#name3 {
	height:1.5em;
	animation:3.6s ease-in-out .4s 1 slide;
	animation-fill-mode:forwards;
	visibility:hidden;
	margin-left:1em;
}
@keyframes slide {
	0% {
		transform:translate(-100vw);
	}
	10% {
		transform:translate(0em);
		visibility:visible;
	}
	55% {
		transform:translate(0em);
	}
	60% {
		transform:translate(100vw);
		visibility:hidden;
		height:1.5em;
		filter:brightness(1);
	}
	96% {
		transform:translate(-100vw);
		visibility:hidden;
		height:1.5em;
	}
	100% {
		visibility:visible;
		transform:translate(0em);
		height:1em;
		filter:brightness(.2);
	}
}
#header-text{
    position:absolute;
    top:50px;
    left:230px;
    text-align:left;
    color:#800000;
    min-width:18em;
}
div.streaks {
	height: 8px;
	background: linear-gradient(
		to bottom,
		red 2px,
		white 2px 6px,
		blue 6px
	);
}
div#pageTitle {
	position: relative;
	z-index: -1;
	white-space: normal;
}
h1#pageTitle {
	margin: 0;
	display: inline-block;
	position: absolute;
	left: 34px;
}
h1#pageTitle > a {
	color: inherit;
}

/*****************************************************************\
                      main elements
\*****************************************************************/
img#mainBackgroundImg {
	position: fixed;
	top: 0;
	left: 0;
	width: 500px;
	max-width: 100%;
	opacity: var(--mainBackgroundImgOpacity);
	z-index: -1;
}
p#slogan {
	text-align: center;
	margin-top: 0;
/* 	font-family: cursive; */
	font-style: italic;
	font-weight: bold;
	font-size: 150%;
	color: var(--sloganColor);
	text-shadow:
		5px 0px 5px var(--sloganShadowColor),
		0px 5px 5px var(--sloganShadowColor),
		-5px 0px 5px var(--sloganShadowColor),
		0px -5px 5px var(--sloganShadowColor);
}
a#orderListButton {
	position:relative;
	background:none;
	background-color:rgb(255,140,0);
	background-color:rgba(255,140,0,0.75);
	background-image:url('/art/cart.png');
	background-repeat:no-repeat;
	background-position:.5em 50%;
	background-size:1.25em;
	border:none;
	border-radius:.25em;
	padding:0.25em 0.5em 0.25em 2em;
	top:0.25em;
	color:black;
	font-size:1.5em
}
a#orderListButton:hover {
    background-color:rgb(255,140,0);
    background-color:rgba(255,140,0,1);
}

/*****************************************************************\
                      footer elements
\*****************************************************************/
div#copyright{
    margin:0px 10% 0 10%;
    text-align:center;
}
div#copyright p{
    font-size:0.8em;
    line-height:0.8em;
}
div#footerMenu {
    text-align:center;
}
div#footerMenu a {
	display: inline-block;
    color: var(--footerLinkTextColor);
    margin-right:1em;
    white-space: nowrap;
}
div#footerMenu a:last-child {
    margin-right:0;
}

/*****************************************************************\
                      basic element customization
\*****************************************************************/
a.stealth {
	color: inherit;
}
div.separated {
	margin-top: 1em;
}
iframe.map {
	background-color:#FFFFFF;
}

/*****************************************************************\
                      flyout menu styling
\*****************************************************************/
nav#menu-side {
	position: fixed;
	top:calc(3em + 4px);
	left:0;
	z-index: 0;
	display: none;
}
#menu-side a {
	display:block;
	border-width:1px;
	border-style:solid;
	border-radius:.25em;
	background-color:rgb(20,20,20);
	color:rgb(200,200,200);
	padding:.25em 1em .25em 1em;
	margin-bottom:-1px;
}
#menu-side a.currentMenuSelection {
	color:rgb(0,0,0);
	background-color:rgb(255,255,0);
	font-weight:bold;
}
#menu-side div.userMenuGroup {
	background-color:rgb(200,255,200);
	border-width:1px;
	border-style:solid;
	border-radius:.25em;
	border-color:var(--bodyBackgroundColor);
}

/*****************************************************************\
                      collapsible tree styling
\*****************************************************************/
ul.tree {
	margin-left:-80px;
}
ul.tree li { 
	position:relative; 
	list-style:none;
}
ul.tree li > a {
	font-size:12pt;
}
ul.tree li input.checkbox { /* standard checkbox */
	float:left;
	margin-top:-14px;
	margin-left:.5px;
	opacity:0;
	z-index:2;
	cursor:pointer;
	height:1em;
	width:1em;
}
li input.checkbox + ul { /* custom checkbox */
	background-image:url(toggle-collapsed.png);
	background-size:.75em;
	background-repeat:no-repeat;
	margin-top:-1em;
	margin-bottom:0;
	margin-right:0;
	margin-left:0;
	height:1em;
}
li input.checkbox + ul > li {
	display:none;
}
li label { /* label text */
	cursor:pointer;
	display:block;
	margin-top:.5em;
	margin-left:2em;
	text-align:left;
	height:1.125em;
	overflow:hidden;
	padding:0 0 0 0;
	font-size:16pt;
	font-weight:bold;
}
li input:checked + ul {
	background-image:url(toggle-expanded.png);
	padding-top:1em;
	height:auto;
}
li input:checked + ul > li {
	display:block;
}
div.tree {
	--indenture:8px;
}
div.treeLevel1 {
	margin-left:calc(var(--indenture) * 1);
}
div.treeLevel2 {
	margin-left:calc(var(--indenture) * 2);
}

/*****************************************************************\
                      collapsible table styling
\*****************************************************************/
table.tree td {
	position:relative;
}
table.tree input[type=checkbox] {
	cursor:pointer;
	position:absolute;
	z-index:1;
	top:-1.5em;
	width:1em;
	height:1em;
	padding:0;
	margin:0;
	opacity:0;
}
table.tree input[type=checkbox] + img.toggle + table {
	margin-top:0em;
	margin-bottom:0;
	margin-right:0;
	margin-left:1px;
	display:none;
}
table.tree img.toggle {
	position:absolute;
	z-index:0;
	top:-1.25em;
	width:auto;
	height:1em;
}
table.tree input[type=checkbox]:checked + img.toggle {
	transform:rotate(90deg);
}
table.tree input[type=checkbox]:checked + img.toggle + table {
	display:block;
}
/*****************************************************************\
\*****************************************************************/
.americanFlagText {
	background-image: url(/art/flag.png);
	background-repeat: no-repeat;
	background-size: 120% 120%;
	background-position: center;
	background-clip: text;
	color: rgba(0, 0, 0, 0);
	font-weight: bold;
/* 	--blurRadius: 10px; */
/* 	--shadowOffset: 4px; */
/* 	text-shadow: var(--shadowOffset) 0px var(--blurRadius) var(--bodyTextColor), 0px var(--shadowOffset) var(--blurRadius) var(--bodyTextColor), calc(-1 * var(--shadowOffset)) 0px var(--blurRadius) var(--bodyTextColor), 0px calc(-1 * var(--shadowOffset)) var(--blurRadius) var(--bodyTextColor); */
}
h2#itemName, td.itemName {
	color:var(--itemNameColor);
}
p{
  font-size:14pt;
}
p.login-label{
  text-align:right;
}
p.login-field{
  text-align:left;
}
#title{
  position:relative;
  text-align:left;
  margin-top:120px;
  margin-left:50px;
}  
#links{
	clear:both;
}
.background-image{
  text-align:center;
}
.center{
	text-align: center;
}
.dollars::before {
    content: '$';
    float: left;
    margin-right: 10px;
/*     padding-right:.5em; */
}
td.dollars,
th.dollars {
    text-align:right;
    padding-left:5px;
    padding-right:5px;
    white-space:nowrap;
}
td.dollars > form {
	display:inline;
}
td.dollars input {
    text-align:right;
    width:80px;
	margin-left:0em;
}
input.dollars {
	background-image:url('/art/dollar.svg');
	background-position:5px center;
	background-repeat:no-repeat;
	background-size:8px;
	text-align:right;
}
.floatright {
    float:right;
}
.formfield{
  width:15.5em;
  display:block;
  border-radius:.5em;
  border:solid rgb(128,128,128) 1px;
  height:2em;
  line-height:2em;
}
div.labeledFormField {
	display:inline-block;
	line-height:100%;
	vertical-align:top;
}
div.labeledFormField > label {
	display:block;
}
.forminput-left{
  text-align:left;
}
.forminput-right{
  text-align:right;
}
.green{
  color:green;
}
.indent{
  text-align:left;
  padding-left:1em;
}
.left{
  text-align:left;
}
.leftpadded{
  text-align:left;
  padding-left:5px;
}
.product{
  float:left;
  height:17em;
  width:20em;
  border:solid;
  text-align:left;
  margin:1em 1em 1em 1em
}
.productimg{
  position:absolute;
  top:0;
  right:0;
  z-index:1;
}
.red{
  color:red;
}
.right{
  text-align:right;
}
.rightpadded{
  text-align:right;
  padding-right:5px;
}
.top{
  vertical-align:top;
}
.bottom{
  vertical-align:bottom;
}
.middle{
  vertical-align:middle;
}
.underline {
	text-decoration: underline;
}

/*****************************************************************\
                      tables
\*****************************************************************/
table.testTable td {
	border: solid 1px;
}
table.pdm,
table.pdm table,
table#itemInventoryList {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	border-width: 0;
}
table.pdm form {
	display: inline;
}
table.pdm td {
	overflow: hidden;
	vertical-align: top;
}
table.pdm td.descriptionFromFile:after {
    content: ' (from file)';
/*     text-align: right; */
/*     float:right; */
}
table.pdm button {
	vertical-align: top;
}
table#newProductData th {
	text-align: right;
}
div#poLinesTableDiv {
	width: 100%;
	overflow: auto;
}
table#poLinesTable {
	table-layout: fixed;
	width: 100%;
}
table#poLinesTable td {
	padding: 0;
}
table#poLinesTable td > input,
table#poLinesTable td > select {
	width: 100%;
	box-sizing: border-box;
}
table#poLinesTable td.numberWithUnit {
	position: relative;
}
table#poLinesTable td.numberWithUnit > input[type='number'] {
	width: calc(100% - 40px);
}
table#poLinesTable td.numberWithUnit > input.numberInputUnit {
	position: absolute;
	z-index: -1;
	text-align: right;
	padding-right: 5px;
}
table#poCostTable th {
	text-align: left;
}
table#productData th {
	text-align: left;
	vertical-align: top;
}
table#productData td {
	text-align: left;
	vertical-align: top;
	padding-left: 5px;
}
table#productData input {
	box-sizing: border-box;
}
table.verticalCenter td {
	vertical-align:middle;
}
table.verticalTop td {
	vertical-align:top;
}
table.mobile {
	table-layout:fixed;
    width:100%;
}
table.desktop {
	display:none;
}
/*@media only screen and ( min-width:961px ) {
	table.mobile {
	    display:none;
	}
	table.desktop {
		display:table;
		table-layout:fixed;
		width:100%;
	}
	div.mobile {
		display:none;
	}
}*/
table.striped tr:nth-child(even) {
    background-color:rgb(20,20,20);
}
/* table.doubleStriped > tbody > tr:first-child { */
/*     background-color:rgb(20,20,20); */
/* } */
table.doubleStriped > tbody > tr:nth-of-type(4n+0),
table.doubleStriped > tbody > tr:nth-of-type(4n+3) {
    background-color:rgb(20,20,20);
}
table#componentListTable {
	table-layout: fixed;
	width: 100%;
}
table#componentListTable th {
	text-align: left;
}
table#componentListTable td {
	overflow: hidden;
}
div.horizontalScrollContent {
	width: 100%;
	overflow: auto;
}
table.ledger{
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}
tr.reviewDefect td {
	background-color: rgb(150,0,0);
}
tr.ledgerEntry td{
  border-top:1px solid;
}
table#trialBalance{
  border-collapse:collapse;
}
tr.bottomLine td{
  border-top:1px solid;
}
tr.greyedOut {
	color: rgb(84,84,84);
}
table#newPoTable {
	table-layout: fixed;
	width: 100%;
}

table.nestingTable, table.nestingTable table {
	border-collapse: collapse;
	width:100%;
	padding: 0;
}
/* table.nestingTable th, table.nestingTable table td {
}
 */
 td.topPadded {
 	padding-top: 7px;
 }
/*****************************************************************\
                      buttons
\*****************************************************************/
button {
	border: none;
	border-radius: 5px;
	background: none;
	background-position: center;
	background-repeat: no-repeat;
    cursor: pointer;
	vertical-align: middle;
	--buttonHeight: 32px;
	--buttonWidth: 32px;
	height: var(--buttonHeight);
	width: var(--buttonWidth);
}
button:hover {
	border: solid grey 1px;
	height: calc(var(--buttonHeight) + 2px);
	width: calc(var(--buttonWidth) + 2px);
	margin: -1px;
}
button + label {
	cursor:pointer;
	vertical-align:middle;
	padding-left:.5em;
}
button + label.hidden,
input + label.hidden,
label + label.hidden {
	display:none;
}
button + label.fixed,
input + label.fixed,
label + label.fixed {
	position: absolute;
	padding: 0;
	margin-left: 15px;
	--backgroundHighlightColor: rgb(0,0,120);
	background-color: var(--backgroundHighlightColor);
	box-shadow: 0px 0px 10px 10px var(--backgroundHighlightColor);
}
button + label.left, input + label.left {
	right: 0;
	margin-right: 15px;
}
button:hover + label.hidden,
button:active + label.hidden,
input:hover + label.hidden,
button:hover + label + label.hidden,
input:hover + label + label.hidden {
	display:inline;
}
button[draggable=true] {
    cursor: grab;
}
button.addButton {
    background-image:url(/art/add.svg);
	background-size:20px;
}
button.autoWidth {
	--buttonWidth:auto;
}
button.checkBackButton {
    background-image: url(/art/checkBack.svg);
    background-size: 30px;
}
button.checkInButton {
    background-image: url(/art/checkIn.svg);
    background-size: 30px;
}
button.checkOutButton {
    background-image: url(/art/checkOut.svg);
    background-size: 30px;
}
button.deleteButton {
    background-image:url(/art/delete.png);
    background-size:20px;
    padding:15px;
}
button.editButton{
    background-image:url(/art/edit.png);
    background-size:20px;
    padding:15px;
}
button.erpButton {
    background-image: url(/art/arrowRight.svg);
    background-size: 20px;
}
button.filterButton {
	background-image:url(/art/filter.svg);
	background-size:32px;
}
button.hiddenMenuButton {
	background-image:url(/art/arrowRight.svg);
	background-size:12px;
}
button.icon:hover {
	border: none;
	height:var(--buttonHeight);
	width:var(--buttonWidth);
	margin:0px;
}
button.file {
	background-size:22px;
	background-position: center;
}
button.fileButton {
	background-image:url(/art/file.svg);
}
button.fileApprovedButton {
	background-image:url(/art/fileApproved.svg);
}
button.fileInWorkButton {
	background-image:url(/art/fileInWork.svg);
}
button.folderButton {
	background-image:url(/art/folder.svg);
	background-size:28px;
	background-position: center 4px;
	margin-right: 5px;
}
button.folderButton-green {
	background-image:url(/art/folder-green.svg);
}
button#hideOrderListButton {
	position: relative;
	top: 5px;
	left: -15px;
	width: calc(100% + 30px);
	font-size: 24px;
	text-align: left;
    margin: 1px;
    color: var(--bodyTextColor);
}
button#hideOrderListButton:hover {
    margin: 0px;
}
button.linkButton {
	background-image:url(/art/link.svg);
	background-size:32px;
}
button.loginButton {
	background-image:url(/art/login.svg);
    background-size:20px;
}
button.logoutButton {
	background-image:url(/art/logout.svg);
    background-size:24px;
    margin:1px;
    margin-top:1.25px;
}
button.logoutButton:hover {
	margin:0px;
}
button.moveUpButton {
	--buttonHeight:auto;
	--buttonWidth:auto;
	background-image:url(/art/moveUpArrow.svg);
    background-size:1em;
    background-position:center top;
    padding-top:1em;
}
button.nextButton {
	background-image:url(/art/nextArrow.svg);
	background-size:20px;
}
button.orderButton {
	--buttonWidth:auto;
	background-color:rgb(255,140,0);
	background-color:rgba(255,140,0,0.75);
	background-image:url('/art/cart.png');
	background-position:.5em 50%;
	background-size:1.25em;
	border-radius:.25em;
	padding:.25em 1em .25em 2em;
	color:black;
	font-size: 16px;
}
button.orderButton:hover {
	border:none;
	margin:0;
	background-color:rgb(255,140,0);
    background-color:rgba(255,140,0,1);
}
@media only screen and ( min-width:961px ) {
	button.orderButton {
		font-size:initial;
	}
}
button.orderListButton {
	border: none;
	background: none;
	background-image: var(--cartIcon);
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	--buttonHeight: 32px;
	--buttonWidth: 32px;
	height: var(--buttonHeight);
	width: var(--buttonHeight);
}
button.orderListButton:hover {
	border: solid grey 1px;
	border-radius: 5px;
	margin: -1px;
	height: calc(var(--buttonHeight) + 2px);
	width: calc(var(--buttonWidth) + 2px)
}
button.orderListButton.centered {
	display: block;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
button.orderListButton.centered:hover {
	transform: translate(calc(-50% + 1px), calc(-50% + 1px));
}
button.printablePageButton {
	background-image:url(/art/pdf.svg);
	background-size:contain;
}
button.productCategoryButton {
	--buttonHeight: 160px;
	--buttonWidth: 160px;
	background: var(--bodyBackgroundColor);
	border: solid 1px var(--bodyTextColor);
	color: inherit;
}
button.productInformationHeading {
	background-size:16px;
}
button.productInformationHeading+label {
	font-size:16pt;
	padding-left:20px;
}
button.pauseButton {
	background-image:url(/art/pauseButton.svg);
	background-size:24px;
}
button.reviewBackButton {
    background-image: url(/art/reviewBack.svg);
    background-size: 30px;
}
button.reviewInButton {
    background-image: url(/art/reviewIn.svg);
    background-size: 30px;
}
button.reviewOutButton {
    background-image: url(/art/reviewOut.svg);
    background-size: 30px;
}
button.small {
	--smallButtonHeight:22px;
	--smallButtonWidth:22px;
	height:var(--smallButtonHeight);
	width:var(--smallButtonWidth);
}
button.small:hover {
	height:calc(var(--smallButtonHeight) + 2px);
	width:calc(var(--smallButtonWidth) + 2px);
}
button.searchButton {
	background-image:url(/art/search.svg);
	background-size:30px 30px;
	vertical-align:-10px;
}
button.sortRows {
	background-image: url(/art/arrowDown.svg);
	background-size:10px 10px;
}
button.startButton {
	background-image:url(/art/playButton.svg);
	background-size:24px;
}
button.startExercisingButton {
	color: var(--bodyTextColor);
	border: solid 1px var(--bodyTextColor);
	border-radius: 5px;
	background: var(--bodyBackgroundColor);
	width: auto;
	height: var(--buttonHeight);
}
button.startExercisingButton:hover {
	border: solid 1px var(--bodyTextColor);
	height: var(--buttonHeight);
	width: auto;
	margin: 0;
}
button.stealthButton {
    margin:0;
    padding:0 2px 0 2px;
    font-family:inherit;
    font-size:inherit;
    color:inherit;
    white-space:nowrap;
}
button.stealthButton:hover {
	--buttonWidth:auto;
	border:solid 1px;
    margin:-1px;
}
button.stopButton {
	background-image:url(/art/stopButton.svg);
	background-size:24px;
}
button.subtractButton {
    background-image:url(/art/subtract.svg);
	background-size:20px;
}
button.tableButton {
	display:inline-block;
	width:100%;
/* 	height:100%; */
	text-align:left;
}
button.textButton {
	background: var(--bodyBackgroundColor);
	border: solid 1px var(--bodyTextColor);
	--buttonWidth: auto;
	width: var(--buttonWidth);
	height: var(--buttonHeight);
	color: inherit;
	margin: 0;
}
button.toggleButton {
	background-size: 12px;
	position: relative;
}
button.toggleButtonCollapsed {
	background-image: url(/art/arrowRight.svg);
}
button.toggleButtonExpanded {
	background-image: url(/art/arrowDown.svg);
}
button.unlinkButton {
	background-image:url(/art/unlink.svg);
	background-size:32px;
}
button.updateButton {
    background-image:url(/art/update.svg);
    background-size:contain;
    padding:15px;
}
button span.bubbleCount {
	position: absolute;
	top: 0px;
	left: 20px;
	display: inline-block;
	width: 20px;
	line-height: 20px;
	text-align: center;
	color: var(--bodyTextColor);
    background-image: url(/art/redCircle.svg);
    background-size: cover;
	background-repeat: no-repeat;
}
a.button {
	border: none;
	border-radius: 5px;
	background: none;
	background-position: center;
	background-repeat: no-repeat;
    cursor: pointer;
	vertical-align: middle;
	--buttonHeight: 32px;
	--buttonWidth: 32px;
	height: var(--buttonHeight);
	width: var(--buttonWidth);
  	
	margin:0;
  	padding:0 .25em 0 .25em;
  	color:inherit;
  	line-height: var(--buttonHeight);
  	white-space: nowrap;
  	overflow: hidden;
}
a.button:hover {
  	background-color:rgb(200,200,200);
}
a.checkOutButton {
	display: inline-block;
	margin: 5px 0 5px 5px;
	width: calc(50% - 5px);
	text-align: center;
	color: black;
	background-color: white;
	background-image: url(/art/cart.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center right 5px;
	box-sizing: border-box;
}
a.checkOutButton:hover {
  	outline: solid 2px var(--themeColorDark);
}
a.keepShoppingButton {
	display: inline-block;
	margin: 5px 5px 5px 0;
	width: calc(50% - 5px);
	text-align: center;
	color: black;
	background-color: white;
	background-image: url(/art/arrowLeftBlack.svg);
	background-size: 18px 25px;
	background-repeat: no-repeat;
	background-position: center left 5px;
	box-sizing: border-box;
}
a.keepShoppingButton:hover {
  	background-color: white;
  	outline: solid 2px var(--themeColorDark);
}
a.stealthButton, input[type=submit].stealthButton {
	display: inline-block;
	background: none;
    border: none;
    border-radius: 5px;
    border-width: 1px;
    margin: 1px;
    --margin-right: 1px;
    margin-right: var(--margin-right);
    padding: 0 2px 0 2px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    white-space: nowrap;
	--buttonHeight: 32px;
	--buttonWidth: auto;
	/* height: var(--buttonHeight); */
	/* width: var(--buttonWidth); */
	line-height: var(--buttonHeight);
	box-sizing: border-box;
/* 	vertical-align: middle; */
    cursor: pointer;
}
a.stealthButton:hover, input[type=submit].stealthButton:hover {
	border: solid 1px;
    margin: 0px;
/*     margin-right:calc(var(--margin-right) - 1px); */
}
a.tableButton, input[type=submit].tableButton {
/* 	box-sizing: border-box; */
	display:inline-block;
	width:100%;
	height:100%;
/* 	text-align:left; */
/* 	--buttonWidth:100%; */
}
/* a.tableButton:hover, input[type=submit].tableButton:hover { */
/* 	--buttonWidth:calc(100% - 2px); */
/*     margin:-1px; */
/* } */
a.tableButton.rightpadded {
	padding-right: 5px;
}
a.tableButton.rightpadded:hover {
	padding-right: 3px;
}
label.fileButton { /*label to act as button*/
	display:inline-block;
	border:none;
	background-image:url(/art/folder.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left center;
	width:32px;
	height:32px;
	cursor:pointer;
	vertical-align:middle;
}
/*****************************************************************\
                      forms
\*****************************************************************/
form.inline {
	display: inline;
}
form.block {
	display: block;
}
input, select, textarea {
	font: inherit;
	border-radius:.5em;
	border-style:solid;
	border-color:rgb(128,128,128);
	border-width:1px;
	height:32px;
	padding:0;
}
input, select {
	line-height:32px;/* for IE */
}
/* select { */
/* 	height: 34px; */
/* } */
td > select,
td > form > select {
	width: 100%;
	box-sizing: content-box;
}
td > input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}
input:required:invalid, select:required:invalid {
	border-color:red;
}
input:required:invalid, select:required:invalid {
	background-color: rgb(255,235,235);
}
input:required:valid, select:required:valid {
	border-color:green;
}
input:required:valid, select:required:valid {
	background-color: rgb(235,255,235);
}
input:required::placeholder, select:required::placeholder, select:required:invalid {
	color:gray;
}
input[type="checkbox"] {
	--checkboxSize: 16px;
	width: var(--checkboxSize);
	height: var(--checkboxSize);
	vertical-align: middle;
}
input[type="checkbox"].greyedOut {
	opacity: 50%;
}
input[type='file'] {
	background-color: inherit;
	color: inherit;
}
input[type='number'] {
	text-align:right;
}
input[type='radio'] {
	width:16px;
	margin:8px;
	vertical-align:middle;
}
input[type='radio'] ~ label {
	vertical-align:middle;
}
input[type='radio'].compact {
	margin: 0;
}
select > option {
	color:black;
}
table input {
	width: 100%;
}
table textarea {
	width: 100%;
	height: 100%;
	resize: vertical;
}

form.library, form.project {
	display: inline-block;
}
form.verticalLayout > input[type=text],
form.verticalLayout > input[type=number],
form.verticalLayout > select,
form.verticalLayout > textarea {
	display:block;
	width:100%;
}
@media only screen and ( min-width:961px ) {
	form.verticalLayout > input[type=text],
	form.verticalLayout > input[type=number],
	form.verticalLayout > select,
	form.verticalLayout > textarea {
		max-width:400px;
	}
}
input.stealth, textarea.stealth, select.stealth {
	color: inherit;
	background: inherit;
	margin: 0;
	padding: 0;
	border: none;
	font: inherit;
	cursor: pointer;
	resize: none;
	overflow: hidden;
	border-radius: 0;
	line-height: inherit;
	height: inherit;
}
input.compact, textarea.compact, select.compact {
	height: 20px;
	vertical-align: top;
}
input.stealthEdit {
	height: 32px;
}
input.stealthEdit,
textarea.stealthEdit,
select.stealthEdit {
	color: inherit;
	background: inherit;
	resize: none;
	overflow: hidden;
}
input.withUnits {
	--unitWidth: 50px;
	width: calc(100% - var(--unitWidth));
}
textarea.autoHeight {
	overflow: hidden;
	resize: none;
}
textarea.instruction {
	width: calc(100% - 6px);
	font: inherit;
	color: inherit;
	background-color: inherit;
}
div.checkboxList * {
	white-space: nowrap;
}

/*           Exercise selection form                */
form.exercises {
	--checkboxSize: 16px;
}
form.exercises input[type=checkbox] {
	width: var(--checkboxSize);
	margin: 0;
}
form.exercises label {
	--leftMargin: 10px;
	margin-left: var(--leftMargin);
	display: inline-block;
	width: calc(100% - var(--checkboxSize) - var(--leftMargin));
	line-height: var(--checkboxSize);
	vertical-align: middle;
}

/*****************************************************************\
                      table column filter form
\*****************************************************************/
form.tableFilter {
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	color:inherit;
}
form.tableFilter select {
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	color:inherit;
	background:none;
	border:none;
	cursor:pointer;
}
/*****************************************************************\
                      stealth select
\*****************************************************************/
form.stealth {
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	color:inherit;
}
form.stealth select {
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
	color:inherit;
	background:none;
	border:none;
	cursor:pointer;
}
/*****************************************************************\
                      credit card form styling
\*****************************************************************/
div#orderForm {
	position:relative;
	width:100%;
	max-width:25em;
}
div#orderForm input, div#orderForm select {
	display:block;
	font-size:1em;
	border-radius:.5em;
	border-style:solid;
	border-color:rgb(128,128,128);
	border-width:1px;
	height:2em;
	line-height:2em;/* for IE */
}
div#orderForm input[type=text] {
	padding:0 .5em 0 .5em;
	width:calc(100% - 1em - 2px);
}
div#orderForm input[type=radio] {
	display:inline;
	vertical-align:middle;
	padding:0;
	margin:0 1em 0 0;
}
div#orderForm select {
	padding:0 .5em 0 .5em;
	width:calc(100% - 1em - 2px);
	background-color:white;
}
div#orderForm select:required:invalid {
	color:gray;
}
div#orderForm select > option {
	color:black;
}
div.creditcardnumber input {
	width:100%;
	background-image:url(/art/card.png);
	background-repeat:no-repeat;
	background-position:calc(100% - 0.5em) 50%;
	background-size:2em;
}
div#authenticationData {
	position:relative;
	width:100%;
}
div#expirationDate {
	position:relative;
	left:0;
	width:calc(80% - 1em);
}
div#cvc {
	position:absolute;
	right:0;
	top:0;
	width:20%;
}
div#cvc input {
	width:calc(100% - 1em - 2px);
}
div.payment {
	clear:both;
	margin-right:12px;
}
div.payment input {
	width:100%;
	text-align:right;
	background-image:url(/art/dollar.png);
	background-repeat:no-repeat;
	background-position:5%;
	background-size:auto 16pt;
}
/*****************************************************************\
                      UPS element styling
\*****************************************************************/
div#upsShippingOptions{
	position:relative;
}
img#UPSMark {
	position: absolute;
	right: 0;
	top: 0;
	width: 50px;
}
p.UPSStatement {
	font-size: 12px;
	/*text-align: center;*/
}
/*****************************************************************\
                      Shipping options table styling
\*****************************************************************/
table#shippingOptions {
	width:70%;
}
table#shippingOptions input {
	height:1em;
	padding:0;
}
/*****************************************************************\
                      Procedure table styling
\*****************************************************************/
table.procedure {
	width:100%;
	border-collapse:collapse;
}
@media only screen and ( min-width:961px ) {
	table.procedure {
		width:100%;
	}
}
table.procedure > tr:nth-child(even) {
	background-color:rgba(50,50,50,.5);
}
div.taskResources {
	border: solid 1px;
}
table.taskResources, form.taskResources {
	padding-left:50px;
}
td.taskResource,
table.taskResources td {
	padding-left:20px;
}
tr.borderTop > th, tr.borderTop > td, div.borderTop {
	border-top:solid 1px;
}
tr.borderBottom > th, tr.borderBottom > td, div.borderBottom {
	border-bottom:solid 1px;
}
tr.borderLeft > th:first-child, tr.borderLeft > td:first-child, div.borderLeft {
	border-left:solid 1px;
}
tr.borderRight > th:last-child, tr.borderRight > td:last-child, div.borderRight {
	border-right:solid 1px;
}
tr.borderAll > th, tr.borderAll > td {
	border-top:solid 1px;
	border-bottom:solid 1px;
}
tr.borderAll > th:first-child, tr.borderAll > td:first-child {
	border-left:solid 1px;
}
tr.borderAll > th:last-child, tr.borderAll > td:last-child {
	border-right:solid 1px;
}
/*****************************************************************\
                      Fine print styling
\*****************************************************************/
p.finePrint {
	font-size:0.75em;
}
p.finePrint sup {
	font-size:0.60em;
}
/*****************************************************************\
                      Resource table styling
\*****************************************************************/
td.resourceDataCell {
	--backgroundColor: rgb(40,40,40);
	background-color: var(--backgroundColor);
	border-radius: 5px;
}
/*****************************************************************\
                      Gantt chart styling
\*****************************************************************/
div#ganttChartDiv {
	--backgroundColor: rgb(40,40,40);
	background-color: var(--backgroundColor);
	border-radius: 5px;
}
div.ganttChart {
	position:relative;
	overflow:auto;
	width:100;
}
table.ganttChart {
	table-layout: fixed;
	width: auto;
	white-space: nowrap;
	border-collapse: collapse;
	--scrollPadding:32px;
}
table.ganttChart tbody {
	white-space:nowrap;
	overflow:auto;
}
table.ganttChart th {
	vertical-align: baseline;
}
table.ganttChart td,
table.ganttChart th {
	/* background: rgb(0,0,0); */
	background-color: var(--backgroundColor);
}
table.productionGanttChart td:nth-child(6),
table.productionGanttChart th:nth-child(6),
table.resourceGanttChart td:nth-child(5),
table.resourceGanttChart th:nth-child(5) {
	background:
		linear-gradient(90deg, rgb(20,20,20) 0px, rgb(20,20,20) var(--pixelsPerFirstDay), transparent var(--pixelsPerFirstDay)),
		repeating-linear-gradient(
			90deg,
			rgb(40,40,40) 0px var(--pixelsPerDay),
			rgb(20,20,20) var(--pixelsPerDay) calc(2 * var(--pixelsPerDay))
		) var(--pixelsPerFirstDay);
}
table.ganttChart col {
	width: var(--colWidth);
	min-width: var(--colWidth);
	max-width: var(--colWidth);
}
table.ganttChartTable thead {
	border-top: solid 1px;
	border-bottom: solid 1px;
}
th.stickyCell, td.stickyCell {
/* 	position:-webkit-sticky; */
	position: sticky;
	background-color: inherit;
	opacity: 1;
}
th.slidingCell, td.slidingCell {
	padding-left:var(--scrollPadding);
}
button.ganttBar {
	height:16px;
	background:none;
	background-color:grey;
	border:none;
	border-radius:5px;
	margin:0;
	padding:0;
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	white-space:nowrap;
    vertical-align:middle;
}
button.ganttBar:hover {
	border:solid 1px;
/* 	margin:0 -1px 0 -1px; */
}
/*****************************************************************\
                      search form styling
\*****************************************************************/
form#searchForm {
	position: absolute;
/* 	right: 34px; */
	right: 0;
	display: inline-block;
/* 	width: calc(100% - 142px); */
/* 	min-width: 95px; */
/* 	max-width: 255px; */
	/* margin-right: 34px; */
}
input#searchInput {
	padding-left: 10px;
/* 	width: calc(100% - 32px - 10px - 2px); */
	width: calc(100% - 10px);
	max-width: 255px;
	
}
button#submitSearchFormButton {
	position: absolute;
	right: 0;
	top: 0;
}
div.searchFilterMenu {
	display:inline-block;
	vertical-align:top;
}
input.searchFilterMenu {
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	width:100%;
	height:20px;
	top:0;
	left:0;
	opacity:0;
	cursor:pointer;
	z-index:1;
}
div.searchFilterMenu > div {
	display:none;
}
div#searchFilterForm {
	display:none;
	background-color: var(--bodyBackgroundColor);
	/*border-radius: 0 0 5px 5px;
	border: solid 1px;
	border-top: none;*/
}
div.searchFilterOption input {
	width:16px;
	height:16px;
	margin:0;
	padding:0;
	vertical-align:middle;
}
div.searchFilterOption label {
	margin:0 0 0 5px;
	padding:0;
	vertical-align:middle;
}
div.searchFilterOption {
	position:relative;
	height:1.5em;
	line-height:1.5em;
	vertical-align:middle;
}
/*****************************************************************/
form#timesheet input:read-only {
	background-color:rgb(220,220,220);
	border:solid rgb(210,210,210) 2px;
}
table#timesheetTable {
	table-layout:fixed;
	width:100%;
}
table#timesheetTable td {
	padding-right:6px;
}
table#timesheetTable td:last-child {
	padding-right:0;
}
table#timesheetTable td input {
	width:100%;
	text-align:right;
}

/*product fitment filter */
div.filterHeading h2 {
	display:inline;
	vertical-align:top;
	color:rgb(0,255,0);
}
div.filterHeading img {
	height:2em;
	padding:.5em 0 .5em .5em;
}
div.filterSelection select {
	display:block;
	width:80vw;
	max-width:20em;
	margin-left:auto;
	margin-right:auto;
	font-size:1.5em;
	text-align:center;
	text-align-last:center;
	background-color:transparent;
	color:inherit;
}
@media only screen and ( min-width:961px ) {
	div.filterSelection select {
		width:10em;
		margin-left:10em;
	}
}
div.filterSelection option {
	/*background-color:rgb(40,40,40);*//*This must be set inline for chrome browser and probably others. Transparency does not work using background-color:transparent or rgba(0,0,0,0).*/
	color:inherit;
	border:none;
}
span.OlsonLogo {
	opacity:0;
	width:0;
	display:inline-block;
}
span.introCompanyName {
	font-style: italic;
	font-weight: bold;
	color: var(--companyNameTextColor);
	--highlightSize: 4px;
	--highlightBlurSize: 2px;
/* 	text-shadow: */
/* 		0px var(--highlightSize) var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		var(--highlightSize) var(--highlightSize) var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		var(--highlightSize) 0px var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		var(--highlightSize) calc(-1 * var(--highlightSize)) var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		0px calc(-1 * var(--highlightSize)) var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		calc(-1 * var(--highlightSize)) calc(-1 * var(--highlightSize)) var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		calc(-1 * var(--highlightSize)) 0px var(--highlightBlurSize) var(--companyNameHighlightColor), */
/* 		calc(-1 * var(--highlightSize)) var(--highlightSize) var(--highlightBlurSize) var(--companyNameHighlightColor); */
	text-shadow:
		0px var(--highlightSize) var(--highlightBlurSize) var(--companyNameHighlightColor),
		0px calc(-1 * var(--highlightSize)) var(--highlightBlurSize) var(--companyNameHighlightColor);
}
span.email {
	font-style: italic;
	font-size: 90%;
	font-weight: bold;
}
/*****************************************************************\
                      unit value styling
\*****************************************************************/
span.hr:after {
	content:" hr";
}
td.hr:after {
	content:" hr";
}
/*****************************************************************\
                      scrollbar styling
\*****************************************************************/
body::-webkit-scrollbar, div::-webkit-scrollbar, table::-webkit-scrollbar {
    background-color:inherit;
}
body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, table::-webkit-scrollbar-thumb {
    background-color:var(--scrollColor);
    border-radius:5px;
}
/*****************************************************************\
                      drag and drop styling
\*****************************************************************/
.dropTarget {
	background-color: rgb(200,200,200);
}

/*****************************************************************\
                      Exercise Instructions
\*****************************************************************/
div#exerciseListDiv {
	display: inline-block;
	width: 200px;
}
div#exerciseBox {
	display: inline-block;
	width: calc(100% - 200px);
	min-width: 400px;
	vertical-align: top;
}
div#exerciseTitle {
	font-size: 36px;
	text-align: center;
}
div#exerciseInstruction {
	font-size: 16px;
}
div#exerciseTimer {
	background-image: conic-gradient(blue var(--clockAngle), white 0deg);
	border-radius: 50%;
	width: 400px;
	height: 400px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
div#exerciseTimer.timerStopped {
	opacity: 0.5;
}
div#exerciseTimer.timerRunning {
	opacity: 1;
}
div#exerciseTimer.timerPaused {
	opacity: 1;
}
div#exerciseTimer.timerBlinking {
	--timerColor: yellow;
	background-image: conic-gradient(var(--timerColor) var(--clockAngle), var(--timerColor) 0deg);
	animation: animateColor 1s steps(2,end) infinite;
}
@keyframes animateColor {
	from {
		--timerColor: yellow;
	}
	to {
		--timerColor: white;
	}
}
div#exerciseCountdown {
	--diameter: 200px;
	font-size: 36px;
	width: var(--diameter);
	height: var(--diameter);
	border-radius: 50%;
	background: var(--bodyBackgroundColor);
	position: absolute;
	left: calc(50% - var(--diameter) / 2);
	top: calc(50% - var(--diameter) / 2);
	text-align: center;
	vertical-align: middle;
	line-height: var(--diameter);
}

/*******************************************************/
/*             Product Category Display                */
/*******************************************************/
div#productCategoryDiv {
	text-align: center;
}

/*******************************************************/
/*                  Product Data                       */
/*******************************************************/
div.productDataLevel2 {
	margin-left: 16px;
}

/*******************************************************/
/*              Manufacturing Order Data               */
/*******************************************************/
div#orderStatusButtonDiv {
	text-align: right;
}

/*******************************************************/
/*              Policies                               */
/*******************************************************/
div.policy p {
	margin-left: 10px;
}

/*****************************************************************\
                      Aside order list
\*****************************************************************/
div#orderListButtonTab {
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	background-color: var(--orderListColor);
	border-radius: 10px 0 0 10px;
	transition: 1s;
}
div#orderListButtonTab.showTransition {
	--orderListWidth: min(100vw,500px);
	right: var(--orderListWidth);
}
aside div#orderList {
	--orderListWidth: min(100vw,500px);
	position: fixed;
	top: 0;
	right: calc(var(--orderListWidth)*(-1));
	width: var(--orderListWidth);
	height: 100%;
	padding: 0 20px 20px 20px;
	box-sizing: border-box;
	background-color: var(--orderListColor);
	border-radius: 0 0 0 20px;
	transition: 1s;
}
aside div#orderList.showTransition {
	right: 0;
}
main div#orderList {
	width: 100%;
}


/*****************************************************************\
                      Standard elements
\*****************************************************************/
div.visibleSection {
	background-color: var(--sectionBackgroundColor);
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 10px;
	overflow: hidden;
}
div.insetContainer {
	margin: 10px;
/* 	display: inline-block; */
}
h2.formSectionHeading {
	margin-top: 0px;
}

/*****************************************************************\
                      About Page Styling
\*****************************************************************/
div.info {
	padding: 10px 0;
}
div.info:nth-child(odd) {
	background-color: var(--sectionBackgroundColorOdd);
}
div.info:nth-child(even) {
	background-color: var(--sectionBackgroundColorEven);
}
div.info h1 {
	text-align: center;
	margin: 10px 0px;
}
div.info p {
	font-size: 150%;
	margin: 10px 10px;
}

/*****************************************************************\
                      Landing Page Styling
\*****************************************************************/
h1.announcement {
	text-align: center;
	background-color: yellow;
	color: black;
}