@media (width >= 1000px) { font-size: 11pt; }
@media (width < 1000px) { font-size: 9pt; }

[data-tooltip]::before {
	content: attr(data-tooltip);
	position: relative;
	top: 1.5em;
	left: 0.5em;
	padding: 1px 5px;
	display: none;
	color: white;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 4px;
	transition: opacity 0.1s ease-out;
	z-index: 99;
	text-align: left;

	:hover {
		display: inline-block;
		}
	}

[click],
[clicks],
[onclick] {
	color: blue !important;
	cursor: pointer;
	text-decoration: underline;

	:hover {
		background-color: #e8e8e8;
		}

	:visited {
		colour: navy;
		}
	}

/* ===== NAV ===== */

nav.menuBar {
	background-color: #33475b !important;
	font-family: Roboto, Montserrat, Arial, Helvetica, sans-serif;
	padding: 0.1em;

	> ul {
		background-color: #33475b !important;

		> li {
			color: #efefef;
			cursor: pointer;
			margin-left: 0.1em;
			margin-right: 0.1em;
			padding: 1em;

			:hover {
				background-color: #2b3c4d;
				}

			:active {
				background-color: #282933;
				}

			.dropdown {
				::after {
					content: "\25BC";
					margin-left: 2px;
					}

				:hover:after {
					color: #ff7a59;
					}

				:focus:after {
					color: #ff7a59;
					}
				}
			}
		}
	}

nav.menu {
	background-color: #33475b !important;

	> ul {
		background-color: #33475b !important;
		border: none;
		display: flex;
		flex-direction: column;

		> li {
			display: inline-flex;
			flex-direction: row;
			margin: 0.2em;
			width: auto;
			padding: 1em;
			color: #efefef;

			.more:hover:after {
				content: "\25B8";
				margin-left: auto;
				color: #ff7a59;
				}
			}
		}

	li.menuItem:hover {
		background-color: #212e3b;
		}
	}

#application, #company, #info {
	background-color: #33475b
	}

div.scrollTable {
	margin: 0px;
	}

/* ================= */
#dashboardLogo {
	height: auto;
	left: 50%;
	max-height: 50%;
	max-width: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	}

#dialog-box {
	min-height: 5em;
	min-width: 25em;

	fieldset,
	input,
	table {
		}
	}

#free-trial {
	left: 50%;
	padding: 1em;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	}

#free-trial::backdrop {
	background: #888;
	}

#free-trial table {
	width: 30em;
	}

#free-trial table,
#free-trial td {
	border: 0px;
	}

#functionKeys {
	text-align: center;

	> button {
		padding: 0.2em;
		}
	}

#notes {
	max-width: 10em;
	text-align: left;
	text-wrap: break-word;
	}

.A {
	background-color: green !important;
	color: white !important;
	text-align: center !important;
	}

.I {
	background-color: red !important;
	color: white !important;
	text-align: center !important;
	}

.N {
	background-color: red;
	color: white;
	text-align: center;
	}

.Y {
	background-color: green;
	color: white;
	text-align: center;
	}

.addButton {
	background-image: url(/images/add.png);
	background-size: 20px;
	float: right;
	height: 20px;
	width: 20px;
	}

.black {
	background-color: black;
	color: white;
	}

.blacksmall {
	background-color: black;
	color: white;
	}

.blue {
	background-color: #C8C8FF;
	color: black;
	}

.bluesmall {
	background-color: #C8C8FF;
	color: black;
	}

.bold {
	font-weight: bold;
	}

.box {
	background-color: transparent;
	border: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	padding: 0px;
	vertical-align: top;
	}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

.center img {
	display: inline;
	}

.center table {
	display: inline-table;
	}

.contenteditable {
	background-color: LightYellow;
	border: 1px solid grey;
	padding: 0.2em;
	}

.data {
	text-align: right;
	}

.editCell {
	background-color: LightYellow;
	border: 1px solid grey;
	padding: 0.2em;
	}

.fgred {
	color: red;
	}

.fkey {
	text-align: center;
	margin: 0 auto;
	padding: 0.1em;
	}
@supports (display: flex) {
	.flex {
	display: flex;
	#flex-flow: row wrap;
	flex: 2 1 auto;
	justify-content: center;
	}
	}

@supports not (display: flex) {
	.flex {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	}

.frame {
	background-color: white;
 	padding: 0.5em;
	}

.green {
	background-color: green;
	color: white;
	}

.hide {
	display: none;
	}

.info {
	background-color: white;
	}

.left {
	float: left;
	}

.magenta {
	background-color: #F0C0F0;
	color: black;
	}

.magentasmall {
	background-color: #C080C0;
	color: black;
	}

.master {
	margin-left: 1em;
	}

.middle {
	vertical-align: middle;
	}
.small {
	}
.number {
	text-align: right;
	}
.pink {
	background-color: #ffd0d0;
	color: black;
	}
.red {
	background-color: red;
	color: black;
	}
.right {
	float: right;
	}
.text {
	text-align: left;
	}
.title {
	background-color: #b1c1d3;
	font-weight: bold;
	}
.title-2 {
	background-color: #ff7a59;
	font-weight: normal;
	color: white;
	}
.title-2:hover {
	color: #ff7a59;
	font-weight: normal;
	background-color: white;
	}
.toggle {
	background-color: pink;
	color: navy;
	}
.top {
	vertical-align: top !important;
	}

.total-double {
	background-color: salmon;
	color: black;
	font-weight: bold;
	padding: 0.2em;
	text-align: right;
	border-top: double;
	}
.viewing {
	background-color: lightBlue;
	}
.visited {
	background-color: navy;
	color: white;
	}
.white {
	background-color: white;
	color: #4848FF
	}
.yellow {
	background-color: #EAEA80;
	color: black;
	}

/* Support call priority */

.p1 {
	background-color: red !important;
	color: white !important;
	padding: 0.5em;
	}

.p2 {
	background-color: orange !important;
	color: black !important;
	padding: 0.5em;
	}

.p3 {
	background-color: green !important;
	color: white !important;
	padding: 0.5em;
	}

a {
	color: black;
	text-decoration: underline ;
	}

a[href^="http"]::before {
	content: "🔗 ";
	}

a[href^="mailto"]::before {
	content: "📧 ";
	}

a[href^="tel"]::before {
	content: "📞 ";
	}

a.menu {
	color: white;
	text-decoration: none;
	}
a.report {
	color: black;
	text-decoration: none;
	font-style: italic;
	}
a.small_button {
	color: white;
	text-decoration: none;
	}
a.pink_button {
	color: pink;
	text-decoration: none;
	}
b {
	font-weight: bold;
	}

body {
	background-color: #e6ecf1;
	color: #4e4e4e;
	font-family: 'Roboto', 'Arimo', Verdana, Arial, Helvetica, sans-serif;
	padding: 0px;
	}

body.index {
	background-color: #DDD;
	height: calc(100vh - 0.5em);
	padding-top: 0.5em;
	text-align: center;
	background-color: #e6ecf1;
	font-family: sans-serif;

	> article {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		overflow: hidden;

		> fieldset {
			background-color: white;
			border: 0;
			border-radius: 0.5em;
			box-shadow: 0 0 4px #aaa;
			box-sizing: border-box;
			display: inline-block;
			margin-top: 0.5em;
			max-width: 25em;
			min-height: 14em;
			padding: 1em;
			position: relative;
			text-align: left;
			vertical-align: top;

			.center {
				text-align: center;
				}

			> div {
				padding: 0px;
				margin: 20px 0px;
				}

			> button {
				display: inline-block;
				font-weight: bold;
				margin: auto 1em auto auto;
				position: absolute;
				left: 50%;
				width: calc(100% - 1em);
				transform: translateX(-50%);
				}

			> form {
				padding: 0px;

				> button {
					font-weight: bold;
					width: 24em;
					}

				> h3 {
					display: inline-block;
					margin: 0.2em;
					width: 7em;
					}

				> input {
					border: 1px solid gray;
					margin: 0.2em;
					}
				}

			td,
			th {
				border: 0px;
				}

			> h3 {
				}

			}
		}

	h1,
	h2 {
		border: 0px;
		font-weight: bold;
		margin: 0.5em;
		justify-content: center;
		}

	img {
		display: inline;
		}

	div.lsup {
		display: flex;
		align-items: center;
		justify-content: space-between;
		}

	div.lsup-1 {
		display: flex;
		align-items: center;
		margin: 0 auto;
		}

	div.lp-btn {
		width: 100%;
		margin: 30px 0 10px 0;
		padding: 0.8em;
		border-radius: 3px;
		border: 0;
		background-color: grey;
		color: black;
		font-weight: bold;
		text-shadow: none;
		box-shadow: none;

		:hover {
			background-color: #33475b;
			color: white;
			}
		}

	div.no-acc {
		display: flex;
		align-items: center;
		justify-content: center;
		}

	> h3 {
		color: #33475b;
		padding: 1em;
		}

	input[type=text],
	input[type=password] {
		width: 100%;
		box-sizing: border-box;
		padding: 0.5em;
		margin: 5px 0px;
		border: 1px solid #e6ecf1;
		}

	img {
		margin: 1em;
		}

	p {
		margin-bottom: 1em;
		}

	}

.menu {
	background-color: navy;
	}

.print {
	background-color: white;
	font-family: fixed;
	}

.prompt {
	> h1,
	> h2,
	> h3 {
		display: block;
		}
	}

.submenu {
	background-color: brown;
	color: white;
	}

> article {
	margin-top: 0.5em;
	height: 90vh;
	}

> h1,
> h2,
> h3 {
	background: transparent;
	}

> img {
	display: inline-block;
	margin: 1em;
	}

td,
th {
	border: 0px;
	}

button {
	background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(185,185,185,1));
	background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	color:rgba(0,0,0,0.9);
	margin: 2px;
	padding: 3px;
	text-shadow:1px 1px 0px rgba(255,255,255,0.8);
	}

button[clicks] {
	text-decoration: none;
	}

button:hover {
	background:rgba(240,240,240,1);
	}

button:active,
button:focus {
	background:-webkit-gradient(linear,0% 100%,0% 0%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
	background:linear-gradient(to top,rgba(255,255,255,1),rgba(185,185,185,1));
	}

button:disabled {
	color:rgba(0,0,0,0.4);
	text-shadow:1px 1px 0px rgba(255,255,255,0.5);
	background:rgba(220,220,220,1);
	}

button.logout {
	color: navy;
	font-weight: bold;
	}

button.tabSelected {
	background-color: pink;
	border: 1px grey solid;
	border-bottom: 0px;
	margin-left: 4px;
	border-radius: 3px 3px 0px 0px;
	}

caption {
	background: #33475b;
	color: #efefef;
	font-family: Roboto, Montserrat, Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
	font-weight: normal;
	margin: 0px;
	padding: 0.3em;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #6F8EAF;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	text-align: center !important;
	vertical-align: middle !important;
	white-space: nowrap;
	}

caption.h1 {
white-space: nowrap;
	}

caption.edit {
	text-decoration: underline;
	cursor: pointer;
	}
caption.h2 {
	background-color: #ff7a59;
	letter-spacing: 2px;	
	color: #fff;
	font-weight: normal;
	margin: 0px;
	padding: 0.5em;
	border-bottom: 0px;
	}
col.border {
	background-color: #b1c1d3;
	}

div {
	.details table tr td {
		border: 0px;
		margin: 1px;
		padding-left: 0.5em;
		font-family: Arial,Helvetica,sans-serif;
		text-align: left;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
		}

	.edit {
		background-color: white;
		position: fixed;
		top: 10%;
		right: 10%;
		float: right;
		height: 50%;
		width: 50%;
		visibility: hidden;
		}

	.header {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		left: 50%;
		transform: translate(-50%);
		}

	.left {
		float: left;
		}

	.tab {
		border-bottom: 2px black solid;
		margin: 0px;
		padding: 0px;

		> button {
			border: 1px grey solid;
			border-bottom: 0px;
			margin-left: 0.5em;
			margin-bottom: 0px;
			border-radius:5px 5px 0px 0px;
			box-shadow:0px 0px 2px rgba(0,0,0,0.4);

			:hover {
				background-color: #b1c1d3;
				}

			.selected {
				background-color: lightblue;
				}
			}
		}
	}

div.prompt,
#prompt {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	position: relative;
	/*margin-left: auto;
	margin-right: auto;
	left: 50%;
	transform: translateX(-50%);*/
	}

#dialog-box {
	}

#milestones .milestone {
	background-color: #b1c1d3;
	font-weight: bold;
	color: navy;
	}

#milestones .normal {
	font-weight: normal;
	}

#milestones .ticket {
	padding-bottom: 0.5em;
	}

#milestones .ticket > table {
	margin: 0px;
	width: 100%;
	}

#milestones .ticket > table > thead > tr {
	background-color: #b1c1d3;
	color: black;
	text-align: center;
	}

#milestones .ticket > table tr > td:first-child {
	border-left: 0px;
	width: 16px;
	}

#milestones .ticket > table tr:first-child > td:nth-child(1) {
	width: 5em;
	}

#milestones .ticket > table tr:first-child > td:nth-child(2) {
	width: 30em;
	}

#milestones .ticket > table tr:first-child > td:nth-child(3) {
	width: 5em;
	}

#milestones .ticket > table tr:first-child > td:nth-child(4) {
	width: 5em;
	}

#milestones .ticket > table tr > td:last-child {
	border-right: 0px;
	}

article {
	margin: 0px;

	.body {
		display: flex;
		flex: auto;

		> div {
			margin: 0 0.5em 0 0.5em;
			vertical-align: top;

			.center {
				margin: 0 auto;
				vertical-align: top;
				}
			}
		}

	#runSheet {
		div {
			padding: 0.25em;

			h1 {
				width: 100%;
				}

			> table {
				width: 100%;
				}
			}
		}
	}

article.body > fieldset,
div.header > fieldset,
div.flex > fieldset,
div.prompt > fieldset,
#prompt > fieldset{
	/*border: 1px solid gray;*/
	/*box-shadow: inset 0 0 0.2em #999999;*/
	box-shadow: 0 0 4px #aaa;
	display: inline;
	padding: 0.5em;
	text-align: center;
	vertical-align: top;
	margin: 10px;
	border-radius: 3px;
	}

article.body > fieldset > div,
div.header > fieldset > div,
div.header > fieldset > fieldset,
div.header > fieldset > p,
div.header > fieldset > table,
div.prompt > fieldset > div,
div.prompt > fieldset > fieldset,
div.prompt > fieldset > p,
div.flex > fieldset > div,
div.flex > fieldset > fieldset,
div.flex > fieldset > p,
div.flex > fieldset > table {
	background-color: white;
	display: inline;
	margin: 0.2em;
	padding: 0.2em;
	white-space: nowrap;
	}

article.body > fieldset:not(.plain) > div,
div.header > fieldset:not(.plain) > div,
div.header > fieldset:not(.plain) > fieldset,
div.header > fieldset:not(.plain) > label,
div.header > fieldset:not(.plain) > p,
div.prompt > fieldset:not(.plain) > div,
div.prompt > fieldset:not(.plain) > fieldset,
div.prompt > fieldset:not(.plain) > label,
div.prompt > fieldset:not(.plain) > p {
	font-weight: bold;
	}

article.body > fieldset button,
div.prompt > fieldset button,
div.prompt > fieldset img,
div.prompt > fieldset input,
div.prompt > fieldset label,
#prompt > fieldset button,
#prompt > fieldset img,
#prompt > fieldset input,
#prompt > fieldset label {
	vertical-align: middle;
	}

article.body > fieldset > legend,
div.header > fieldset > legend,
div.prompt > fieldset > legend,
#prompt > fieldset > legend {
	background-color: white;
	border: 1px solid gray;
	border-radius: 0.25em;
	color: #020202;
	font-weight: bold;
	padding: 0.25em;
	vertical-align: middle;
	}

article.body > fieldset:not(.plain) > table tr > td,
div.header > fieldset:not(.plain) > table tr > td,
div.header > fieldset:not(.plain) > table tr > th,
div.prompt > fieldset:not(.plain) > table tr > td,
div.prompt > fieldset:not(.plain) > table tr > th,
#prompt > fieldset:not(.plain) > table tr > td,
#prompt > fieldset:not(.plain) > table tr > th {
	border: 0px;
	vertical-align: middle;
	}

article.body > fieldset:not(.plain) > table tr > td > img,
div.header > fieldset:not(.plain) > table tr > td > img,
div.header > fieldset:not(.plain) > table tr > td > input,
div.header > fieldset:not(.plain) > table tr > td > select,
div.prompt > fieldset:not(.plain) > table tr > td > img,
div.prompt > fieldset:not(.plain) > table tr > td > input,
div.prompt > fieldset:not(.plain) > table tr > td > select,
#prompt > fieldset:not(.plain) > table tr > td > img,
#prompt > fieldset:not(.plain) > table tr > td > input,
#prompt > fieldset:not(.plain) > table tr > td > select {
	vertical-align: middle;
	}

article.body > fieldset:not(.plain) > table tr > td:nth-child(odd),
div.header > fieldset:not(.plain) > table tr > td:nth-child(odd),
div.header > fieldset:not(.plain) > table tr > td:nth-child(odd),
div.prompt > fieldset:not(.plain) > table tr > td:nth-child(odd),
div.prompt > fieldset:not(.plain) > table tr > td:nth-child(odd),
#prompt > fieldset:not(.plain) > table tr > td:nth-child(odd) {
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	}

article.center {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	overflow: hidden;
	}

article.rows-2 > div.row-1 {
	background-color: #b1c1d3;
	grid-row: 1 / 2;
	margin: 0px;
	vertical-align: top;
	}

article.search > div {
	width: 30em;
	}

article.variables,
div.variables {
	background-color: gold;
	margin: 1px;
	border: 1px solid black;
	padding: 2px;
	text-align: center;
	}

div.dashboard,
fieldset.dashboard {
	background-color: #b1c1d3;
	display: inline-block;
	flex: none;
	max-width: 50em;
	vertical-align: top;
	}

div.ticket,
fieldset.dashboard div.ticket {
	background-color: white;
	border-radius: 1em;
	display: block;
	margin: 1em;
	padding: 1em;
	}

fieldset {
	background-color: white;
	border-radius: 1em;
	margin: 1em;
	padding: 1em;

	.form {
		background-color: #fdfdfb;
		border: 1px solid gray;
		border-radius: 0.5em;
		box-shadow: inset 0 0 0.2em #0099ff;
		display: inline;
		margin: 0.2em 0 0 0.2em;
		padding: 0.5em;
		vertical-align: top;
		}

	.dashboard {
		div.ticket:hover {
			background-color: LightBlue;
			}

		div.ticket-title {
			font-weight: bold;
			margin-bottom: 0.5em;
			text-align: center;
			}

		hr {
			border: 0px;
			height: 1px;
			margin-bottom: 5px;
			margin-top: 5px;
			}
		}

	.heading {
		background-color: linear-gradient(to bottom,rgba(255,255,255,1),rgba(135,206,250,1));
		border: 1px solid navy;
		border-radius: 5px;
		box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
		color: rgba(0,0,0,0.9);
		margin: 2px;
		padding: 3px;
		text-shadow: 1px 1px 0px rgba(255,255,255,0.8);

		> legend {
			margin-left: 0.5em;
			vertical-align: middle;

			img {
				vertical-align: middle;
				}
			}
		}

	.index > button {
		display: inline;
		min-width: 5em;
		}

	> legend {
		background-color: white;
		border: 1px solid rgba(0,0,0,0.5);
		border-radius: 0.2em;
		box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4);
		color: #020202;
		font-weight: bold;
		padding: 0.25em;
		vertical-align: middle;
		}
	}

fieldset.customer-notes {
	max-height: 35em;
	max-width: 50em;
	overflow-y: scroll;
	text-align: left !important;
	}

form#login {
	text-align: center;
	}

form#login > div {
	display: inline-block;
	}

font.tfblue {
	color: #3333FF
	}
font.tfred {
	color: #8E2323
	}
font.tfwhite {
	color: white;
	}
font.title {
	font-weight: bold;
	}
groupbox {
	border: 1px solid black;
	}

h1,
h2,
h3 {
	align-items: flex-start;
	display: flex;
	justify-content: center;
	}

h1 > div,
h2 > div,
h3 > div {
	margin: auto;
	}

h1,
.h1 {
	/*background: #6F8EAF;*/
	background: #33475b;
	color: #efefef;
	font-family: Roboto, Montserrat, Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
	font-weight: normal;
	margin: 0px;
	padding: 0.3em;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #6F8EAF;
	box-sizing: border-box;

	> button {
		margin: auto 0.3em;
		vertical-align: middle;
		}

	}

h2.alt {
	background-color: #ff7a59;
	letter-spacing: 2px;
	color: #fff;
	font-weight: normal;
	margin: 0px;
	padding: 0.5em;
	border-bottom: 0px;
	}

h1.logout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

h2,
.h2 {
	background-color: white;
	color: navy;
	font-family: sans-serif;
	font-weight: bold;
	margin: 0.1em;
	padding: 0.2em;
	text-align: center;
	vertical-align: middle;
	}
h2.menu {
	color: orange;
	}
h3,
.h3 {
	background-color: white;
	color: navy;
	margin: 0.1em;
	padding: 0.2em;
	text-align: center;
	vertical-align: middle;
	}
h4 {
	color: #b1c1d3;
	font-weight: bold;
	padding: 0.25em;
	text-align: center;
	}

iframe {
	padding: 0px;
	}

iframe#data {
	background-color: white;
	border: 0px;
	}

iframe#edit {
	background-color: #e6ecf1;
	/*box-shadow: inset 0 0 0.5em #0099ff;*/
	/*box-shadow: 0 0 3px 0px inset #282933;*/
	}
div.listBox {
	background-color: #e6ecf1;
	/*box-shadow: 0 0 3px 0px inset #282933;*/
	}
iframe#new-support {
	width: 50em;
	}

iframe.dashboard {
	border: 0px;
	display: inline;
	height: 50em;
	margin: 0.1em;
	min-width: 50em;
	padding: 0.1em;
	width: 20%;
	}

iframe.dashboard-long {
	border: 0px;
	display: inline;
	height: 50em;
	margin: 0.2em;
	min-width: 40em;
	padding: 0.1em;
	width: 20%;
	}

iframe.dialog {
/*	border: 1px solid gray;
	box-shadow: inset 0 0 4px gray;*/
	padding: 4px;
	}

iframe.editor {
	border-left: 1px solid grey;
	}

iframe.tab {
	border: 1px solid red;
	border-top: black 2px solid;
	}

img {
	border-width: 0;
	}

img.icon {
	/*display: block;*/
	height: 16px;
	margin: 0 5px;
	vertical-align: middle;
	width: 16px;
	}

img.iconLarge {
	height: 48px;
	width: 48px;
	}

img.iconMedium {
	height: 32px;
	width: 32px;
	}

input {
	background-color: #ffffee;
	border: 1px solid navy;
	padding: 0.3em;
	}

label {
	color: black;
	margin-left: 0px;
	text-align: left;
	}

label.h2 {
	background-color: navy;
	color: orange;
	font-weight: bold;
	text-align: center;
	}
label.link {
	cursor: pointer;
	text-decoration: underline;
	}
label.title {
	background-color: white;
	color: black;
	font-weight: bold;
	text-align: left;
	}
label.white {
	background-color: white;
	text-align: left;
	}
li {
	padding: 0.1em 1em;
	}
listbox {
	padding: 1px;
	margin: 1px;
	border-radius: 4px;
	}
listcol {
	text-align: left;
	}
listcell {
	margin: 1px;
	border: 1px;
	padding: 0px;
	text-align: right;
	}
listheader {
	margin: 1px;
	border: 1px;
	padding: 0px;
	background-color: orange;
	color: black;
	font-weight: bold;
	text-align: right;
	}
menu {
	margin: 1px;
	padding: 0px;
	}

menuitem {
	margin: 1px;
	padding: 0px;
	}

p {
	margin: 0.5em;
	}

p.application {
	color: orange;
	margin-bottom: 1em;
	text-decoration: underline;
	}

select {
	border: 1px solid navy;
	}

table {
	border-collapse: collapse;
	empty-cells: show;
	margin: 0px;
	background-color: #fff;

	.details {
		tr > td:first-child {
			font-weight: bold;
			text-align: left;
			vertical-align: middle;
			}
		}

	.background {
		background-color: teal;
		color: black;
		}

	.bluesmall {
		background-color: #C8C8FF;
		color: black;
		}

	.button {
		background-color: lightyellow;
		border-style: outset;
		border-width: 3px;
		width: 100%;
		}

	.message {
		background-color: lightyellow;
		}

	td, th {
		padding: 0.3em;
		word-wrap: break-word;
		border: 1px solid #6F8EAE;
		}

	td {
		margin: 0px;
		border-collapse: collapse;
		vertical-align: middle;

		.border {
			background-color: #b1c1d3;
			}

		.center {
			text-align: center;
			}

		.edit {
			background-color: lightyellow;
			cursor: pointer;
			border: 2px outset yellow;
			}

		.space {
			background-color: white;
			width:1px;
			}

		.title {
			background-color: white;
			color: black;
			text-align: center;
			}

		.number {
			text-align: right;
			}
		}
	}

textarea {
	border-width: 1px;
	border-style: solid;
	border-color: navy;
	}
th {
	font-weight: normal;
	margin: 0px;
	border-right: 1px solid navy;*/

	.actions {
		width: 1em;
		}

	.bold {
		font-weight: bold;
		}

	.button {
		cursor:pointer;
		text-align: center;
		}

	.buttonover {
		cursor: pointer;
		border-width: 1px;
		border-style: inset;
		}

	.buttonout {
		border-width: 1px;
		border-style: outset;
		}

	.h1 > button,
	.h2 > button {
		float: right;
		font-weight: bold;
		margin: 0px;
		padding: 0;
		text-align: center;
		}

	.link {
		cursor: pointer;

		:hover {
			background-color: navy;
			color: white;
			}
		}

	.tdred {
		background-color: #FFDDDD;
		color: white;
		text-align: center;
		}

	.title {
		background: linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,137,255,1));
		background-color: #0099ff;
		text-align: center;
		}
	}

tbody {
	> tr {
		text-align: left;

		td,
		th {
			vertical-align: top;
			}

		th {
			text-align: center;
			}

		.ruled > tr:nth-child(even) {
			background-color: lightblue;
			}
		}
	}

tfoot {
	> tr:not(.ub_hidden) {
		background-color: salmon;
		color: black;
		height: 1em;

		> th {
			text-align: center;
			vertical-align: middle;
			}
		}
	}

thead {
	> tr:not(.ub_hidden) {
		background-color: #b1c1d3;
		color: black;
		height: 2em;

		> th {
			text-align: center;
			vertical-align: middle;
			}
		}
	}

tr {
	.bottom-border {
		border-bottom: 1px solid grey;
		}

	.button {
		text-align: center;
		}

	.caption {
		background-color: #FFA580;
		color: black;
		text-align: center;
		vertical-align: middle;
		letter-spacing: 2px;

		> td,
		> th {
			vertical-align: middle;
			}

		> td img,
		> th img {
			vertical-align: middle;
			}
		}

	.center {
		background-color: white;
		color: black;
		text-align: center;
		}

	.custom > th:first-child,
	.custom > th:last-child {
		padding: 2px;
		width: 20px;
		}

	.data:hover {
		background-color: lightblue;
		text-align: right;
		}

	:hover.datalink {
		background-color: navy;
		color: white;
		cursor: pointer;
		}

	.heading {
		font-weight: bold;
		background-color: #b1c1d3;
		color: black;
		text-align: center;
		}

	.hr {
		background-color: #b1c1d3;
		height: 0.1em;
		}

	.main_menu {
		text-align: left;
		}

	.menu {
		background-color: #b1c1d3;
		color: black;
		font-weight: bold;
		text-align: center;
		}

	.section {
		background-color: lightyellow;
		font-weight: bold;
		color: black;
		text-align: center;
		}

	.separator {
		background-color: navy;
		height: 2px;
		}

	.space {
		background-color: white;
		height: 2px;
		}

	.sub_menu {
		text-align: left;
		}

	.sub_total {
		background-color: khaki !important;
		color: black;
		text-align: right;
		}

	.text {
		background-color: white;
		color: black;

		:hover {
			background-color: lightblue;
			color: black;
			}
		}

	.textEven {
		background-color: lightblue;
		color: black;
		}

	.total {
		background-color: salmon;
		color: black;
		font-weight: bold;
		padding: 0.2em;
		text-align: right;

		> .text {
			text-align: left;
			}
		}

	.top > td,
	.top > th {
		vertical-align: top;
		}

	.va-mid > td {
		vertical-align: middle;
		}

	.wheatdata {
		background-color: #FFFFD0;
		color: black;
		}
	}

ul.list {
	display: inline;
	margin-right: 1em;
	margin-left: 1em;
	list-style-type: none;
	}

ul.list > li {
	text-align: left;
	}

td.field-title {
	background-color: #FFF;
	color: #000;
	font-weight: bold;
	text-align: left;
	width: 8em;
	}
td.editable {
	background-color: #FFFFE0;
	min-width: 4em;
	min-height: 10px;
	}

nav > ul.menu {
	background-color: #33475b;
	padding: 15px 10px 4px 10px;
	font-weight: bold;
	list-style: none;
	margin: 0 auto;
	}

ul.menu ul {
	display: none;
	background-color: transparent;
	margin-top: 6px;
	margin-bottom: 2px;
	padding: 0.5em;
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: center;
	z-index: 100;
	}

ul.menu > li {
	background-color: transparent;
	border: 1px solid #222;
	border-bottom: 0px;
	border-radius: 0.5em 0.5em 0px 0px;
	background-color: #547497;
	color: white;
	display: inline;
	margin: 0;
	padding: 0.3em 0.5em 0.2em 0.5em;
	}
ul.menu > li:hover {
	color: #282933;
	}

ul.menu > li:first-child {
	/*border-left: 1px solid #222;*/
	}

ul.menu ul > li {
	background-color: #547497;
	border: 1px solid black;
	border-radius: 0em 0em 0.5em 0.5em;
	margin: 0;
	padding: 0.3em;
	}

ub-search > input {
	left: 0px;
	padding-left: 24px;
	position: relative;
	top: -4px;
	}

td.live > span[name=edit] {
	display: none;
	}

ub-search > img {
	display: inline;
	}

.vertbool > label.ubpromptRadio {
	display: block;
	}
.vertbool > label.ubpromptRadio > input[type="radio"] {
	vertical-align: bottom;
	}
.vertbool-input > input[type="text"] {
	text-align: -webkit-center;
	width: 30px;
	}
td.vertbool-cont {
	padding: 10px;
	}
.drawer-frame {
	height: 100vh;
	width: 0px;
	transition: width ease-in 300ms;
	background-color: #e6ecf1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	box-shadow: 0 0 4px #aaa;
	}

.drawer-open {
	width: 950px;
	transition: width ease-in 200ms;
	}

.cancel-button {
	background-color: #e6ecf1;
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 15;
	}

#drawerOverlay {
	position: absolute;
	top: 0;
	left: 0;
	background-color:rgba(0, 0, 0, 0.1);
	width: 100vw;
	height: 120vh;
	z-index: 5;
	} 

.shortCuts { 
	width: 60px;
	height: 100vh;
	background-color: #33475b;
	position: relative;
	top: 0;
	left: 0;
	z-index: 99;
	}

.iconContainer {
	color: #fafafa;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	}

.iconContainer:hover {
	background-color: #2b3c4d;
	color: #ff7a59;
	}

.icon-label {
	margin-top:3px;
	font-weight: bold;
	}

.icon-label:hover {
	color: #ff7a59;
	}

.nav-green > span {
	color: #ff7a59;
	}

.size-div {
	display: table;
	}

.size-div-row {
	display: table-row;
	}

.size-div-cell-head {
	width: 35px;
	height: 20px;
	border: 1px solid #ccc;
	font-weight: bold;
	display: table-cell;
	background-color: #6F8EAE;
	color: white;
	text-align: center;
	vertical-align: middle;
	}

.size-div-cell {
	min-width: 35px;
	height: 20px;
	border: 1px solid #ccc;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	}

/* INDEX.HTML */

.styled-table {
	border-collapse: seperate;
	margin: 5px auto;
	font-family: Roboto;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	}
.styled-table thead tr {
	background-color: #33475b;
	color: #ffffff;
	text-align: left;
	}

.styled-table th,
.styled-table td {
	padding: 12px 15px;
	text-align: left;
	border: 0px;
	}
.styled-table tbody tr {
	border-bottom: 1px solid #dddddd;
	transition: 0.2s;
	}

.styled-table tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
	}

.styled-table tbody tr:nth-of-type(odd) {
	background-color: #fafafa;
	}

.styled-table tbody tr:last-of-type {
	}

.styled-table tfoot tr {
	background-color: #fff;
	}
.styled-table tbody tr:hover {
	background-color: #6F8EAE;
	color: #ffffff;
	}

/* support calls */

.customer_notes {
	height: 30em;
	max-height: 30em;
	max-width: 40em;
	overflow-y: scroll;
	text-align: left !important;
	width: 40em;
	word-wrap: break-word;
	}

.support_notes {
	height: 30em;
	max-height: 30em;
	max-width: 40em;
	overflow-y: scroll;
	text-align: left !important;
	width: 40em;
	word-wrap: break-word;
	}

/* REPORT css */

#wr_search td {
	vertical-align: top;
	}

td.problem,
#wr_search .problem {
	max-width: 40em;
	width: 40em;
	word-wrap: break-word;
	}

#workRequestDetails {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: baseline;

	fieldset {
		width: 20em;
		word-wrap: break-word;
		}

	legend {
		height: 1.5em;
		}

	#notes {
		max-width: 20em;
		}
	}

/* MENUS and ubmenu */

img.menuIcon {
	height: 2em;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	width: 2em;
	}


/* BGCOLOR classes */

.bg-coral {
	background-color: #FF7F50;
}

.bg-peach {
	background-color: #FFE5B4;
}	

.bg-orange {
	background-color: #FFA500;
}	

.bg-salmon {
	background-color: #FA8027;
}	

.bg-mint {
	background-color: #98FB98;
}

.bg-seafoam {
	background-color: #9FE2BF;
}