/* Common Styles For All Themes */

* {
	padding: 0px;
	margin: 0px;
}
table
{
	text-align: start;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

body
{
	margin: 10px;
	box-sizing: border-box;
	background: #FFFFFF;
}

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

.hiddenMessage:hover
{
	background: none;
}

input[type="date"]::-webkit-inner-spin-button{
    display: none;
}

.jobBoard
{
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 75px;
}

.jobBoard table
{
	background: #ffffff;
	margin: 0px auto;
	font-size: 0.75em;
	border-collapse: unset;
}

.jobBoard table tr table
{
	width: 100%;
	font-size: 1em;
}

.jobBoard td
{
	padding: 0px 0px;
	border-collapse: unset;
}

.jobBoard th
{
	padding: 0px 5px;
}

.jobBoard td, .jobBoard th
{
	margin: 5px;
	width:0px;
	word-wrap: break-word;
	white-space: nowrap;
	text-align: left;
	font-family: 'Lucida Sans Unicode', sans-serif;

}

.jobBoard .accordianButton
{
	text-align: left;
	margin-top: 1px;
}

.formTab
{
	display: none;
}

.formTab:target
{
	display: block;
}

.MessageBox button
{
	background-image:url("../images/Stainless.jpg");
}

.MessageBox
{
	border: #4169E1 1px solid;
	font-family: 'Lucida Sans Unicode', sans-serif;
	margin: 0 auto;
	color: black;
}

.MessageBox tr:nth-child(even)
{
	background: #EEEEEE;
}

.MessageBox td
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	border: 1px solid #111;
}

.MessageBox th
{
	background: #ddf;
	border: none;
	text-align:center;
	font-size:0.9em;
	color: #0000ff;
}

.MessageBox textarea
{
	width:100%;
}

/*
body
{
	box-sizing: border-box;
	background: #FFFFFF;
}
*/

.standardForm th
{
	font-weight: normal;
}

.standardForm
{
/*	border: #4169E1 1px solid;	*/
	font-family: 'Lucida Sans Unicode', sans-serif;
	display: inline-block;
	margin: 0 auto;
	color: black;
	border-spacing: 5px 3px;
	border-collapse: unset;
}

form
{
	display: inline-block;
}

.standardForm label
{
	background: none;
	border: none;
}

.standardForm textarea
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	width:100%;
	min-width: 400px;
	min-height: 60px;
	padding: 2px 2px;
	box-sizing: border-box;
	font-size: 1.05em;
/*	margin: 2px 2px;*/
}

.standardForm select
{
	width:100%;
	padding: 0px 1px;
	min-width: 50px;
}

.standardForm button
{
	width:100%;
}

.standardForm td:nth-child(2)
{
	border-collapse: collapse;
	
}.standardForm td:nth-child(3)
{
	border-collapse: collapse;
}

.standardForm tr
{
	border-collapse: unset;
}
.standardForm tr th
{
/*
	background: #c8d4f8;
	background: linear-gradient(bottom, #c8d4f8, #dddefb);
	background: -moz-linear-gradient(bottom, #c8d4f8, #dddefb);
	background: -webkit-linear-gradient(bottom, #c8d4f8, #dddefb);
	background: -ms-linear-gradient(bottom, #c8d4f8, #dddefb);
*/
	border: none;
	font-size:0.95em;
	font-weight: 900;
	color: #555;
	white-space: pre;
}

.standardForm input[type="number"],
.standardForminput[type="text"],
.standardForm input[type="date"],
.standardForminput[type="email"],
.standardForminput[type="password"]
{
	width:100%;
}

.standardForm button
{
	min-height: 25px;
}
.standardForm input
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	box-sizing: border-box;
	min-height: 25px;
	vertical-align: middle;
}

.standardForm input[type="submit"], input[type='reset']{
	width: 100%;
}

.FormBox
{
	display: block;
	margin: 0 auto;
	text-align: center;
}

img
{
    image-orientation: from-image;
}

img.standardForm
{
	width:100%;
}

header
{
	position:static;
	-moz-user-select: none;
	user-select: none;
}

header .textBanner
{
	background: -webkit-linear-gradient(left, #1a486a, #53a7e3);
	background: -moz-linear-gradient(left, #1a486a, #53a7e3);
	background: -ms-linear-gradient(left, #1a486a, #53a7e3);
	background: linear-gradient(left, #1a486a, #53a7e3);
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 2em;
	color: white;
	text-align: center;
	margin: 0;
}

header .heading
{
	color:#FFFFFF;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size:2em;
	max-width: 60%;
}

header span
{
	color:#FFFFFF;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size:0.85em;
}

.content
{
	border: 5px solid blue;
	width: 100%;
	min-height: 20%;
	text-align:center;
	box-sizing: border-box;
}

footer
{
	background: white;
	text-align:center;

	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size:0.9em;

	/* Anchor Footer To Bottom */

	position: sticky;
	bottom: 5px;
	width: 100%;
}

footer li
{
	display: inline-block;
	padding-left: 1%;
	padding-right: 1%;
}

footer li a
{
	color:#FFFFFF;
	text-decoration: none;
}

footer li a:visited
{
	color:#FFFFFF;
	text-decoration: none;
}

footer li a:active
{
	color:#FFFFFF;
	text-decoration: none;
}

footer li a:hover
{
	color:#FFFFFF;
	text-decoration: underline;
}

nav button
{
	background: #DDF;
	margin: 2px;
}

nav
{
	text-align:center;
	padding: 0px;
	color:#FFFFFF;
	margin: 10px auto;
	margin-bottom: 5px;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size:0.9em;
	z-index: 1;
}

.navLogo
{
	margin: 5px;
	display:inline-block;
	max-width: 250px;
	width: auto;
}

button ul
{
	margin: 0px;
	padding: 0px;
	text-align:left;
}

button ul li
{
	display: inline-block;
	min-width: 25%;
	margin: 0px;
	padding: 0px;
	text-align:left;
	white-space: nowrap;
}

nav ul
{
	margin-top: 1px;
}

nav li
{
	display: inline-block;
	padding-left: 1%;
	padding-right: 1%;
}
nav a
{
	text-decoration: none;
}
nav a:visited
{
	text-decoration: none;
}
nav a:active
{
	color:#FFFFFF;
	text-decoration: none;
}
nav a:hover
{
	color:#FFFFFF;
	text-decoration: underline;
}

.MessageGood
{
	color: green;
}

.MessageBarGood
{
	color: green;
	text-align: center;
}

.MessageInfo
{
	color: blue;
}

.MessageInfo2
{
	color: #0070c0;
}

.MessageBarInfo
{
	color: blue;
	text-align: center;
}

.MessageBad
{
	color: red;
}

.MessageBarBad
{
	color: red;
	text-align: center;
}

.MessageBarDebug
{
	color: #ff7d00;
	text-align: center;
}

.MessageBarSystem
{
	color: magenta;
	text-align: center;
}

.innerTable
{
	border: 1px solid black;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.innerTable td
{
	border: 1px solid black;
}

.innerTable td:nth-child(2)
{
	border: 1px solid black;
}

.innerTable td:nth-child(3)
{
	border: 1px solid black;
}

.innerTableEmpty:nth-child(1)
{
	border: none;
}

.Tab .standardForm
{
	display: none;
}

.Tab a
{
	display: block;
	text-align: center;
	background: #EEEEEE;
	border: #4169E1 1px solid;
	border-collapse: collapse;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.Tab .standardForm:target
{
	display: block
}

.Tab .standardForm:first-child
{
	z-index: 1
}


.standardForm input[type="number"]:valid, .standardForm input[type="date"]:valid, .standardForm input[type="text"]:valid, .standardForm input[type="email"]:valid,
.standardForm input[type="number"]:in-range, .standardForm input[type="date"]:in-range, .standardForm input[type="text"]:in-range, .standardForm input[type="email"]:in-range
{
/*    background:hsl(120, 50%, 90%);
	border-color:hsl(120, 50%, 50%); */
}


.standardForm input[type="number"]:invalid, .standardForm input[type="date"]:invalid, .standardForm input[type="text"]:invalid, .standardForm input[type="email"]:invalid,
.standardForm input[type="number"]:out-of-range, .standardForm input[type="text"]:out-of-range, .standardForm input[type="email"]:out-of-range
{
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 90%);
}

input[type="number"]
{
	text-align: right;
}

.newCss td, .newCss td:nth-child(2), .newCss td:nth-child(3)
{
	border: none;
	font-family: 'Lucida Sans Unicode', sans-serif;

}

.newCss
{
	border: 1px solid black;
}


button
{
	color: black;
	border: #555555 2px outset;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 0.9em;
	white-space: nowrap;
	min-width: 80px;
	text-align: left;
	padding: 1px 5px;
	outline: none;
}

.hiddenButton
{
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
}

.hiddenButton:hover
{
	border: none;
	background: none;
	cursor: pointer;
}

.jobBoard button, .jobBoard input[type="submit"]
{
	min-width: 150px;

	margin-bottom: 2px;
	margin-top: 1px;

}

button:hover
{
	color: black;
	background: #DDF;
	border: #555555 2px outset;
}

input[type="submit"], input[type="reset"], input[type="button"], input[type="File"]
{
	color: black;
	border: #555555 2px outset;
	font-size: 0.9em;
	white-space: nowrap;
	text-align: left;
	padding: 1px 5px;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="File"]:hover
{
	color: black;
	background: #DDF;
	border: #555555 2px outset;
}

input[type="submit"]:disabled
{
	color: grey;
}

.toggleButton input[type="checkbox"]
{
	display: none;
}

.toggleButton label
{
	background: green;
	color: #fff;
	display: block;
	font-size: 0.9em;
	text-align: center;
	width: 100%;
	border: #545D9D 2px outset;
}

.toggleButton label:hover
{
	color: #fff;
	background: #555;
	border: #555555 2px outset;
}

.toggleButton input:checked + label
{
	background: red;
}

.modalDialogB
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 999;
	opacity:1;
	pointer-events: auto;
	text-align:center;
}

.modalDialogB:target
{
	opacity:0;
	pointer-events: none;
}


.modalDialogB > div
{
/*
	width: 50%;
*/
	display: inline-block;
	width: auto;
	max-width: 40%;
	min-width: 25%;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	background: #fff;
	border: 2px solid black;
/*
	background: -moz-linear-gradient(#fff, #ccc);
	background: -webkit-linear-gradient(#fff, #ccc);
	background: -o-linear-gradient(#fff, #ccc);
	background: -ms-linear-gradient(#fff, #ccc);
	background: linear-gradient(#fff, #ccc);
	border-radius: 15px 15px 15px 15px;
	box-shadow: 5px 5px 15px #333;
	border: 2px outset;
*/
}


#modalDialogB_Messages
{
	padding: 40px 40px 0px 40px
}

.closeB
{
	background: #646DAD;
	color: #FFFFFF;
	text-align: center;
	padding: 5px 50px;
	text-decoration: none;
	font-weight: bold;
	-webkit-box-shadow: 1px 1px 3px #000;
	-ms-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	border: #545D9D 2px outset;
}


.closeB:hover { background: #555; }



.MenuTwo
{
	height: 520px;			/* Add Additional Length Here*/
	width: auto !important;
	position: fixed;
	bottom: 30%;			/* Increase To Move Closer To Top Of Screen*/
	left: -350px;			/* Minus Half Additional Length Here*/
	border-radius: 15px;
	padding: 10px;

	border: 3px outset #535360;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	vertical-align: bottom;
	-webkit-transition: transform 0.5s, left 0.25s;
	z-index: 20;
	transition: transform 1.5s, left 0.75s;
	max-width: 220px;		/* To Ensure Consistent Position Across Windows/Max/Linux */
}

.MenuTwo:hover,
.MenuTwo:focus
{
	left: 0px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: transform 0.5s, left 0.25s;
}



.MenuTwo button
{
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	border-left: 1px solid #6b727c;
	border-right: 1px solid #575f6a;
	background: #5f6975;
	border-radius: 5px;
	padding: 10px;
}


.MenuTwo ul
{
	float: left;
	padding-bottom: 100px;	/* Mouse Overshoot Bottom */
	list-style: none;
}

.MenuTwo ul ul
{
	padding-right: 100px;	/* Mouse Overshoot Right */
}

.MenuTwo span
{
	display: block;
	width: 100%;
	text-align: center;
	height: 35px;
	font-size: 1em;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-weight: bold;
	z-index: 20;
}


/*
.MenuTwo img
{
	width: 32px;
	display: block;
	margin: 0 auto;
}
* */

.MenuTwo ul li
{
	display: block;
	margin-bottom: 2px;
	margin-left:  2px;
	position:relative;
}
.MenuTwo button
{
	width: 100%;
}

.MenuTwo a
{
	width: 100%;
}

.MenuTwo ul ul
{
	display: none;
	position: absolute;
	left: 100%;

	/* Mouse Overshoot Top */

	top: -100px;
	padding-top: 100px;
	
}

.MenuTwo ul li:hover > ul {
	display: block;
}

.RollOut
{
	width: 250px;
	height: 640px;			/* Add Additional Length Here*/
	position: fixed;
	bottom: 20%;			/* Increase To Move Closer To Top Of Screen*/
	left: -420px;			/* Minus Half Additional Length Here*/
	border-radius: 15px;
	padding: 10px;
	background: #535360;
	border: 3px outset #535360;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	vertical-align: bottom;
	-webkit-transition: transform 0.5s, left 0.25s;
	transition: transform 0.5s, left 0.25s;
}

.RollOut:hover,
.RollOut:focus
{
	left: 0px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

.RollOut button
{
	width: 100%;
}

.RollOut div
{
	display: block;
	text-align: center;
	color: white;
	height: 50px;
	font-size: 1em;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-weight: bold;
}

@media print
{
	.RollOut
	{
		display: none !important;
	}
	
	.no-print, .no-print *
	{
		display: none !important;
	}
	
	table
	{
		 page-break-after:auto;
		 page-break-inside:auto;
		 page-break-before:auto;
	}
	
	tr
	{
		 page-break-after:auto;
		 page-break-inside:auto;
		 page-break-before:auto;
	}	
}

.screenHeading
{
	font-size: 1.25em !important;
	text-align: center !important;
	font-family: 'Lucida Sans Unicode', sans-serif;
	border: none;
	font-size:0.9em;
	font-weight: 400 !important;
	white-space: nowrap;
}

.TutorialList
{
	display: block;
	text-align: center;
}

.TutorialList table
{
	display: inline-block;
}

.TutorialList tr
{
	outline: thin solid black;
}

.TutorialList tr:hover
{
	outline: medium groove #646Dff;
}

.TutorialList img
{
	max-width: 64px;
}

.TutorialList button
{
	width: auto;
	min-width: auto;
}

.dayTile
{
	transition: all .25s ease-in-out;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.dayTile label {
	display:block;
	border-radius: 5px;
	font-size: 1em;
	text-align: center;
	min-width: 80px;
	min-height: 50px;
}

.dayTile:hover
{
	transform: scale(1.5,1.5);
	-webkit-backface-visibility: hidden;
}

.preferedDay
{
/*	border: 2px solid yellow !important; */
	animation-name: PreferedDate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes PreferedDate {

	0%	 { border: 2px solid white; }
	100% { border: 2px solid black; }
}

.dayTile input[type="radio"]:checked + label
{
	background: blue;
	color: white;
	padding: 0px 2px;
}







select
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	white-space: nowrap;
	width:100%;
	min-width: auto;
}


.Currency
{
	text-align: right	!important;
	font-family: 'Lucida Console', monospace	!important;
	white-space: nowrap;
	padding-right: 2px !important;
}

.ModelNumber
{
/*	font-family: 'Lucida Console', monospace	!important;		*/
}

.SerialNumber
{
/*	font-family: 'Lucida Console', monospace	!important;		*/
}

.linkAsButton {
	display: inline-block;
	color: black;
	border: 2px outset;
	min-height: 24px;
	margin: 0px 2px;
	text-decoration: none;
	padding: 1px 5px;
}

.buttonAsLink {
	font-size: 1.25em;
	color: #445878;
	background: none;
	border: none;
	cursor: pointer;
}

.buttonAsLink:hover {
	background: none;
	border: none;
}

.SlaFeed {
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 16px;
	box-shadow: inset 0 -15px 30px rgba(0,0,255,0.9), 0 0px 5px rgba(0,0,255,1);
	background: #44f;
	width: 75%;		/* 350px; */
	height: 34px;
	margin: 15px auto;
	overflow: hidden;
	border-radius: 4px;
	padding: 3px;
	-webkit-user-select: none
}
/*
.SlaFeed span {
	float: left;
	color: #fff;
	padding: 4px;
	position: relative;
	top: 1%;
	border-radius: 4px;
	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
	font: 16px;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	cursor: pointer;
}
*/

.SlaFeed form
{
	float: left;
}


.SlaFeed button {
	float: left;
	color: #fff;
	position: relative;
	padding: 2px;
	padding-bottom: 3px;
	top: 1%;
	border-radius: 4px;
/*	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4); */
	font: 16px;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	cursor: pointer;
/*	background-color: rgba(60,60,255,1); */
	background-color: transparent;
	border: none;
	outline: none;
}

.SlaFeed #SoaBut
{
	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
	background-color: rgba(0,0,255,255);
	padding: 4px;

}


.SlaFeed ul {
	padding-top: 2px;
	float: left;
	padding-left: 20px;
	animation: ticker 45s cubic-bezier(1, 0, .5, 0) infinite;
	-webkit-user-select: none
}

.SlaFeed ul li
{
	line-height: 30px;
	list-style: none;
	clear: both;
}

.SlaFeed ul li a {
	  color: #fff;
	  text-decoration: none;
	  font: 14px;
	  -webkit-font-smoothing: antialiased;
	  -webkit-user-select: none
}

.SlaFeed ul:hover { animation-play-state: paused }
.SlaFeed span:hover+ul { animation-play-state: paused }

@keyframes ticker {
	  0%   {margin-top: 0}
	  10%  {margin-top: -30px}
	  20%  {margin-top: -60px}
	  30%  {margin-top: -90px}
	  40%  {margin-top: -120px}
	  50%  {margin-top: -150px}
	  60%  {margin-top: -180px}
	  70%  {margin-top: -210px}
	  80%  {margin-top: -240px}
	  90%  {margin-top: -270px}
	  100% {margin-top: 0}
}


.PleaseWait
{
	display:none;
	position:fixed;
	top: 40%;
	left: 45%;
	border-radius: 10px;
	background: #fff;
	text-align:center;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 1em;
	box-shadow: 5px 5px 15px #333;
	width: 10%;
	border: 2px outset;
}

.PleaseWait div
{
	background: #ddf;
	border-radius: 15px 15px 0px 0px;
	text-align: center;
}

.PleaseWait span
{
	display: block;
}

@keyframes loadingPleaseWait {
   0% { transform: translate(6px,40px) scale(0); }
  25% { transform: translate(6px,40px) scale(0); }
  50% { transform: translate(6px,40px) scale(1); }
  75% { transform: translate(40px,40px) scale(1); }
 100% { transform: translate(75px,40px) scale(1); }
}
@keyframes loadingPleaseWait-r {
   0% { transform: translate(75px,40px) scale(1): }
 100% { transform: translate(75px,40px) scale(0); }
}
/*
@keyframes loadingPleaseWait-c {
   0% { background: #0070c0 }
  25% { background: #0070c0 }
  50% { background: #0070c0 }
  75% { background: #0070c0 }
 100% { background: #0070c0 }
}
*/
.loadingPleaseWait div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(80px,40px) scale(1);
  background: #0070c0;
  animation: loadingPleaseWait 3.571428571428571s infinite cubic-bezier(0,0.5,0.5,1); */
}
.loadingPleaseWait div:nth-child(1) {
  background: #0070c0;
  transform: translate(75px,50px) scale(1);
  animation: loadingPleaseWait-r 0.8928571428571428s infinite cubic-bezier(0,0.5,0.5,1); /*, loadingPleaseWait-c 3.571428571428571s infinite step-start; */
}.loadingPleaseWait div:nth-child(2) {
  animation-delay: -0.8928571428571428s;
  background: #0070c0;
}.loadingPleaseWait div:nth-child(3) {
  animation-delay: -1.7857142857142856s;
  background: #0070c0;
}.loadingPleaseWait div:nth-child(4) {
  animation-delay: -2.6785714285714284s;
  background: #0070c0;
}.loadingPleaseWait div:nth-child(5) {
  animation-delay: -3.571428571428571s;
  background: #0070c0;
}
.loadingPleaseWait-spinner-ellipsis {
	height: 150px;
	display: inline-block;
	overflow: hidden;
	background: #ffffff;
  
	background: #fff;
	text-align:center;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 0.9em;
/*	box-shadow: 5px 5px 15px #333; */
/*	border: 2px solid black; */
}
.loadingPleaseWait {
  width: 100px;
  height: 100%;
  position: relative;
  margin: auto;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.loadingPleaseWait div { box-sizing: content-box; }

.ActivityProgress
{
	background: #00f;
	background-image: radial-gradient(ellipse farthest-corner, #00f, #44f, #88f, #bbf);
	animation: rotating-function 1.25s linear infinite;
	box-sizing: border-box;
	border-radius: 15px;
	width: 10%;
	height: 50px;
	margin: auto auto;


}

.PleaseWait2 {
	display:none;
	position:fixed;
	top: 50%;
	left: 50%;
	border: 5px solid #00f;
	border-radius: 10px;
	width: 600px;
	margin-left:-300px;
	height: 300px;
	margin-top: -150px;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 3em;
	background: #fff;
	text-align:center;
}

.ActivityProgress2
{
	width: 10%;
	height: 50px;
	background-image: radial-gradient(ellipse farthest-corner, #00f, #44f, #88f, #bbf);
	box-sizing: border-box;
	border-radius: 15px;
	padding: 5px;
	margin: 20 auto;
	animation: rotating-function 1.25s linear infinite;
}

@keyframes rotating-function
{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.DragField
{
	border: 1px solid blue !important;
	border-radius: 10px !important;
	text-align: center !important;
	padding: 2px 5px !important;
	font-size: .8em;
}

.DragField:hover
{
	border: 3px solid blue !important;
	padding: 0px 5px !important;
}

.PopOutImage
{
	width:	100%;
/*	min-width:200px;*/
	transform: scale(1);
}

.PopOutImage:active
{
	border: 1px solid blue;
	background: white;
	padding: 1px 1px;
	position: fixed;
	top: 15%;
	bottom: 15%;
	left: 40%;
	right: 40%;
	width: auto !important;
	transform: scale(1.4);
	z-index: 10;
}
/* http://www.w3schools.com/howto/howto_css_modal_images.asp */


/* *** Image Rotator ***** */


select optgroup option
{
	padding-left: 10px;
}

.JobSort
{
	display: block;
	float:left;
	vertical-align: top;
	margin-left: 40px;
	margin-bottom: 25px;
	user-select: none;
/*	cursor: grab; */
}

.JobSort:active
{
	cursor: grabbing;
}

.JobSort table
{
	background: none;
}

.JobSort table td
{
	padding: 0px 5px;
	width: 150px;
	margin-left: 10px;
	color: #000;
}

.JobSort table td:nth-child(1)
{
	width: 145px;
	max-width: 145px;
	min-width: 145px;
}

.JobSort table td:nth-child(2)
{
	width: 140px;
	max-width: 140px;
	min-width: 140px;
}

.JobSort table td:nth-child(3)
{
	width: 175px;
	max-width: 175px;
	min-width: 175px;

}

.JobSort table td:nth-child(4)
{
	width: 115px;
	max-width: 115px;
	min-width: 115px;
}

.JobSort table td:nth-child(5)
{
	width: 135px;
	max-width: 135px;
	min-width: 135px;
}

.JobSort table td:nth-child(6)
{
	width: auto;
}

.JobSort div
{
	border: 2px red outset;
	min-width: 400px;
/*	min-height: 50px;*/

	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	border-left: 1px solid #6b727c;
	border-right: 1px solid #575f6a;
	background: #5f6975;
/*	border-radius: 5px; */
	background: #ffffff;
/*
	background: linear-gradient(top, #cccccc, #dddddd, #cccccc);
	background: -moz-linear-gradient(top, #cccccc, #dddddd, #cccccc);
	background: -webkit-linear-gradient(top, #cccccc, #dddddd, #cccccc);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
*/
/*	text-shadow: 2px 2px 1px #ffffff; */
}

/*.JobSort div:hover*/
.JobSort div:nth-child(n+3):hover
{
	background: #ddd;
/*
	background: linear-gradient(top, #dddddd, #ffffff, #dddddd);
	background: -moz-linear-gradient(top, #dddddd, #ffffff, #dddddd);
	background: -webkit-linear-gradient(top, #dddddd, #ffffff, #dddddd);
	color: #fff;
*/
}

th.rotate {
  height: 200px;	/* 140 */
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    translate(29px, 72px)
    rotate(315deg);
  width: 50px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

.tabStyle {
	background: #eee !important;
	color: black !important;
	border: 2px outset black !important;
	border-radius: 5px 5px 0px 0px;
	margin: 0px;
	display: inline-block;
	min-width: 100px;
	padding: 0px 5px;
	list-style-type: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	
	
}

.tabStyle:focus, .active {
	color: white !important;
	background: #1a486a !important;
	border-bottom: none !important;
}
/*
.breadCrumbStyle {
	color: white !important;
	border: 1px outset 11f !important;
	border-radius: 5px -5px 0px 0px;
	margin: 0px;
	display: inline-block;
	min-width: 100px;
	padding: 0px 5px;
	list-style-type: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
*/
.hoverTip div
{
	display: inline-block;
}

.DateTimeRED
{
	font-weight: 900;
	color: red;
}

#flsMap, #servtracMap
{
	position: relative;
}
.osmAttrib
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 1;
	font-size: 11px;
	background: black;
	color: white;
	padding: 2px 5px;
}

.mapTooltip {
  position: relative;
  padding: 3px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 5px;
  color: white;
  opacity: 0.9;
  white-space: nowrap;
  font: 10pt sans-serif;
}

.NCH
{
	display: none;
}

.arrowAction
{
	padding: 0px 10px;
	font-size: 2em	!important;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	color: blue;
	cursor: pointer;
}

@keyframes glowing {
  0% {  box-shadow: 0 0 3px #0000B2; }
  50% {  box-shadow: 0 0 25px #0000FF; }
  100% { box-shadow: 0 0 3px #0000B2; }
}

.blinkingButton
{
	animation: glowing 1500ms infinite;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.pulsingCallBlock
{
	animation: pulsing 500ms infinite;
}

@keyframes pulsing {
	100% { background: #aaa; }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeOut
{
	animation: fadeOut 500ms;
}

.fadeIn
{
	animation: fadeIn 500ms;
}}

.userAvatar
{
	height: 32px;
	margin: 2px;
	max-width: 32px;
	vertical-align: middle;
	border-radius: 90px;
	border: 1px #3677A6 inset;
}

.ribbon
{
	width: 100%;
	margin: 1px;
}

.ribbon .inset
{
	white-space: normal;
}

.ribbon .tickerBar
{
	vertical-align: middle;
	display: inline-block;
	width: 60%;
	max-height:32px;
	overflow: hidden;
	text-align: left;
}

.ribbon .tickerButton
{
	float: right;
	min-width: 32px;
	text-align: center;
}

.ribbon div
{
	vertical-align: middle;
	margin: 0px 5px;
	padding: 1px 1px;
	border-radius: 5px;
	display: inline-block;
}

.ribbon button
{
	vertical-align: middle;
	margin: 0px 5px;
	padding: 1px 1px;
	border-radius: 5px;
	background: none;
	display: inline-block;
	color: white;
	min-width: 0px;
}

.ribbon div div
{
	padding: 0px;
	margin: 0px;
	display: inline-block;
	width: 50%;
}

.ribbon div div span
{
	padding: 0px;
	margin: 0px;
	min-height: 32px;
	vertical-align: middle;
	display: inline;
}

.ribbon div div span button
{
	padding: 0px;
	margin: 0px;
	min-height:30px;
	border:none;
}

.ribbon div img
{
	vertical-align:middle;
	height: 32px;
	max-width: 64px;
	border-radius: 5px;
}

.ribbon button img
{
	vertical-align:middle;
	height: 32px;
	max-width: 64px;
	border-radius: 5px;
}

.ribbon .circleImg
{
	border-radius: 90px;
	height: 32px;
	width: 32px;
}

.ribbon div span
{
	padding: 0px 5px;
	vertical-align: middle;
}

.ribbon button span
{
	padding: 0px 5px;
	vertical-align: middle;
}

.ribbon a img
{
	vertical-align:middle;
	max-width: 64px;
	height: 40px;
	padding: 2px;
}

.lessAttention {
	font-weight: 900;
	font-size: 1.25em;
}

.attention {
  text-align: center;
  font-size: 1.25em;
  color: #fff;
  animation: blur 1s ease-out infinite;
  text-shadow: 0px 0px 1px #fff, 0px 0px 2px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 1px #fff,
      0px 0px 1px #fff, 
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 3px #fff,
      0px 0px 3px #fff,
      0px 0px 3px #fff,
      0px 0px 5px #fff,
      0px 0px 5px #fff,
      0px 0px 5px #7B96B8,
      0px 0px 15px #7B96B8,
      0px 1px 10px #7B96B8,
      0px 1px 10px #7B96B8,
      0px 1px 10px #7B96B8,
      0px 1px 10px #7B96B8,
      0px -1px 10px #7B96B8,
      0px -1px 10px #7B96B8;
  }
}

.attention2 {
  text-align: center;
  color: #fff;
  animation: redBlink 2s ease-in infinite;
}

@keyframes redBlink {
  0% { color: #fff; }
  30% { color: #fff; }
  50% { color: #f00; }
  70% { color: #fff; }
  100% { color: #fff; }
}

.SeniorEngineer {
  background: #fff;
  animation: orangeBlink 3s ease-in infinite;
}

@keyframes orangeBlink {
	45% { background: #ff4f0b; }
	55% { background: #ff4f0b; }
}

.tickerImgL
{
	vertical-align: middle;
	padding-right: 5px;
	max-height:20px;
	max-width: 64px;
}

.tickerImgR
{
	vertical-align: middle;
	transform: scaleX(-1);
	padding-right: 5px;
	max-height:20px;
	max-width: 64px;
}

.tabcontent
{
	display: none;
}

.justLeft
{
	text-align: left;
}

.justCenter
{
	text-align: center;
}

.justRight
{
	text-align: right;
}

.DateJustRight
{
	text-align: right;
}

.RightAlignedSelect {
	text-align: right;
}

.RightAlignedSelect option{
	direction: rtl;
}

.extraMargin
{
	padding: 0px 8px !important;
}

.FractHoursAsHourMins
{
	text-align: right;
}

.Percentage
{
	text-align: right;
}

.NoWrap
{
	white-space: nowrap;
}

.foundButton ul li
{
	width: 200px;
	min-width: 100px;
	overflow: hidden;
	word-wrap: break-word;
	white-space: normal;
	vertical-align: top;
}

.smallHelpBubble
{
	left: -22px;
	bottom: -4px;
	height: 16px;
	position: relative;
	cursor: help;
}

.mediumHelpBubble
{
	left: -36px;
	bottom: -4px;
	height: 24px;
	position: relative;
	cursor: help;
}

.largeHelpBubble
{
	left: -48px;
	bottom: -2px;
	height: 28px;
	position: relative;
	cursor: help;
}

.iconButton button
{
	width: 96px;
	height: 96px;
	text-align: center;
	border: outset;
}

.iconButton button img
{
	width: 64px;
}

.iconButton div
{
	text-align: center;
	font-size: 0.7em;
}

/*
@keyframes iconButtonActiveAni {
  0% {  box-shadow: -5 -5 3px #0000B2; }
  50% {  box-shadow: -5 -5 25px #0000FF; }
  100% { box-shadow: -5 -5 3px #0000B2; }
}
*/
.iconButtonActive
{
	border: 4px solid !important;
	border: inset !important;
}

.uploadTemplateSub input
{
	width: auto;
	margin: 0px 10px;
}

.uploadTemplateSub button
{
	width: auto;
	margin: 0px 10px;
	text-align: center;
	min-height: 32px;
}

.uploadTemplateSub a
{
	display: inline-block;
	margin: 0px 10px;
}

.uploadTemplateSub a img
{
	max-height: 32px;
	vertical-align: middle;
}




/*
.niceUploadButton input[type="File"]
{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.niceUploadButton label
{
	display: inline-block;
	color: black;
	border: 2px solid #444;
	min-height: 24px;
	margin: 0px 2px;
	text-decoration: none;
	padding: 1px 5px;
}


.niceUploadButton label {
	display: inline-block;
	background: #C0C0C0;
	white-space: nowrap;
	Text-align: left;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 0.9em;
	color: black;
	border: 2px outset #555555;
	min-height: 24px;
	margin: 0px 2px;
	text-decoration: none;
	vertical-align: middle;
	padding: 1px 5px;
}
*/

.RecallAnalysis
{
	min-width: 100px;
}

.subTable
{
	padding: 0px;
}

.subTable tr:nth-child(2n+5)
{
	background: none;
}

.subTable td
{
	border: none	!important;
	padding: 1px;
	white-space: nowrap;
}

.subTable td:nth-child(2)
{
	text-align: right;
}


.questionSort
{
	display: block;
	float:left;
	vertical-align: top;
	margin-left: 50px;
	margin-bottom: 25px;
	user-select: none;
	cursor: grab;
}

.questionSort:active
{
	cursor: grabbing;
}

.questionSort table
{
	background: none;
}

.questionSort table td
{
	padding: 0px 5px;
	width: 150px;
	margin-left: 10px;
	color: #000;
}

.questionSort table td:nth-child(1)
{
	width: 25px;
}

.questionSort table td:nth-child(2)
{
	width: 150px;
}

.questionSort table td:nth-child(3)
{
	width: 250px;
}

.questionSort table td:nth-child(4)
{
	width: 250px;
}

.questionSort table td:nth-child(5)
{
	width: 130px;
}

.questionSort table td:nth-child(6)
{
	width: auto;
}

.questionSort div
{
	border: 2px red outset;
	min-width: 400px;
/*	min-height: 50px;*/

	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	border-left: 1px solid #6b727c;
	border-right: 1px solid #575f6a;
	background: #5f6975;
	border-radius: 5px;
	background: linear-gradient(top, #cccccc, #dddddd, #cccccc);
	background: -moz-linear-gradient(top, #cccccc, #dddddd, #cccccc);
	background: -webkit-linear-gradient(top, #cccccc, #dddddd, #cccccc);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
/*	text-shadow: 2px 2px 1px #ffffff; */
}

.questionSort div:hover
{
	background: linear-gradient(top, #dddddd, #ffffff, #dddddd);
	background: -moz-linear-gradient(top, #dddddd, #ffffff, #dddddd);
	background: -webkit-linear-gradient(top, #dddddd, #ffffff, #dddddd);
	color: #fff;
}

.questionConditions
{
	border: 1px solid #ddd;
}

.questionConditions td:nth-child(1)
{
	max-width: 75px;
	min-width: 75px;
	width: 75px;
}
.questionConditions td:nth-child(2)
{
	max-width: 60px;
	min-width: 60px;
	width: 50px;
}
.questionConditions td:nth-child(3)
{
	max-width: 100px;
	min-width: 100px;
	width: 100px;
}

/*
.dynamicTreeDrop
{
	border-right: 5px solid blue !important;
}
*/
.htmlToolTip
{
	position: relative;
	display: inline-block;
	color: #00F;
	
/*	animation: pulsingTooltip 5000ms infinite; */
}

/*
@keyframes pulsingTooltip {

	80% { color: #000; font-weight: 400;}
	100% { color: #00F; font-weight: 900;}
}
*/
/*
.htmlToolTip::before
{
	content: 'Oh My!';
	background: red;
}
*/
.htmlToolTip .tooltiptext tr
{
	background: none !important;
	color: #000 !important;
}

.htmlToolTip textarea
{
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.htmlToolTip .tooltiptext th
{
	background: none !important;
	color: #000 !important;
}

.htmlToolTip .tooltiptext td
{
	background: none !important;
	color: #000 !important;
	white-space: nowrap;
}

.htmlToolTip .tooltiptext
{
  visibility: hidden;
  width: 120px;
  background-color: #FFF;
  color: #000 !important;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  border: 2px solid black;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
/*  left: 150%; */
  margin-left: -60px;
  margin-top: -20px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.htmlToolTip:hover .tooltiptext
{
  visibility: visible;
  opacity: 1;
}

.tooltiptext:hover
{
  visibility: visible;
  opacity: 1;
}

.required
{
	font-weight: 900 !important;
	color: #222 !important;
}

.required::after
{
	content: " \2666";
	color: red;
}

.jsTree
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-width: 1024px;
	font-size: 1.5em;
}


/* Style the caret/arrow */
.jsTreeCaret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.jsTreeCaret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.jsTreeCaret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.jsTreeNested {
  display: none;
  list-style-type: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.jsTreeActive {
  display: block;
  list-style-type: none;
  padding-left: 50px;
}

.depotSelectDropdown
{
	max-width: 20%;
	font-size: 1.25em;
	margin: 5px;
	vertical-align: middle;
}

.communicationMessage
{
	white-space: normal !important;
	min-width:640px;
	max-width: 1280px;
}

.communicationMessage td
{
	white-space: normal !important;
	word-wrap: break-word !important;
}





/*	********************** Dashboard ********************** */

.BASE_Dashboard
{
	display: block;
	margin: 0 auto;
	text-align: center;
}

.BASE_Dashboard > div > div > form
{
	border: 1px solid #000;
	margin: 0 auto;
	margin-left: 75px;
	margin-right: 75px;
	background: #ffffff;
}

.BASE_Dashboard button img {
	vertical-align: middle;
	padding-right: 5px;
	max-height: 16px;
}

.BASE_Dashboard > div > div > form tr:nth-child(4)
{
/*	border-spacing: 10px;*/
/*	background: red;*/
/*	border-collapse: separate;*/
/*	border-bottom: 5px solid red; */
}

.BASE_Dashboard > div > div > form tr:nth-child(2n+6)
{
	background: #F9F0DB;
}

/* BottomBar totals row (Items: N, Approx £ X.XX). Always beige to match
   the dashboard's alternating rows on legacy themes — its position was
   parity-dependent, so it randomly hit the "no beige" gap in the
   nth-child stripe above. Explicit rule makes the treatment consistent
   regardless of how many rows are shown.
   servTrac2 overrides this back to white via its own
   `.BASE_Dashboard td.dash-bottombar { background: #ffffff !important; }`
   rule in servTrac2.css (intentional — flat-look design), so this
   only affects legacy themes. */
.BASE_Dashboard td.dash-bottombar
{
	background: #F9F0DB;
}

.BASE_Dashboard > div td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.BASE_Dashboard > div th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
	
/*	padding: 1px 0px; border-bottom: 3px solid #92CDCF; position: sticky; top: 0px; z-index: 5; */
}

/*
	// Replaced With Less Specific CSS To Accomodate Bugs In Apple Version Of Chrome
	
.BASE_Dashboard > div > form td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.BASE_Dashboard > div > form th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
}
*/



.BASE_Dashboard > div > form td > select > option
{
	width: 0px;
}

.BASE_Dashboard > div > form td input[type="number"],
input[type="text"],
input[type="email"],
input[type="time"],
input[type="password"],
input[type="date"]
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	width: 100%;
	box-sizing: border-box;
}

.BASE_Dashboard .underlineRow:hover
{
	outline: medium groove #646Dff;
}

/*	********************** Diary Time Bars ********************** */

.BASE_DiaryTimeBars
{
	display:block;
	white-space: nowrap;
	width: 100%;
	background: white;
	font-family: 'Lucida Sans Unicode', sans-serif;
/*	overflow:hidden;			// MRK_DIARY_SCROLL			*/
	font-size: 0.75em;
}
.BASE_DiaryTimeBars > div
{

	border: 2px solid black;
	padding-bottom: 2px;
/*	min-width: 800px; */
	user-select: none;
	-moz-user-select: none;

}

.BASE_DiaryTimeBars .timeBarIcon
{
	vertical-align: middle;
	max-height:18px;
	max-width: 16px;
	padding: 0px;
	margin: 0px 0px 1px 0px;
}

.BASE_DiaryTimeBars > div > div > div > div > div
{
	display: inline-block;
	text-align: center;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}

.BASE_DiaryTimeBars > div .TrackerHeading
{
	text-align: left;
	font-size: 1.3em;
	margin-top: 5px;
	padding: 5px 5px 5px 20px;
	color: #0070c0;
	background: #eee;
}

.BASE_DiaryTimeBars > div > div .TrackerRow
{
	display:block;
	white-space: nowrap;
	width: 100%;
	text-align:left;
	margin-top: 2px;
}

.BASE_DiaryTimeBars > div > div .EngineerName
{
	display: inline-block;
	vertical-align: middle;
	align-content: center;
	overflow: hidden;
	text-align:left;
	z-index: 1;
	background: white;
	position: sticky;
	left: 0px;
	padding: 1px 0px 1px 5px;
	margin-right: -5px;
}

/*	********************** Diary Colours ********************** */
/*
.diary
{
	height: 36px;
}
*/
.OffDuty
{
	background: white;
}

.Travel
{
	background: #ddd;
}

.Courier
{
	background: #666;
}

.PartsCollection
{
	background: #f0ac04;
	border: 3px #000000 solid !important;
}

.Workshop
{
	background: #0000ff;
}

.FirstCall
{
	background: #005B00;
}

.SecondCall
{
	background: #007B00;
}

.AmCall
{
	background: #009B00;
}

.PmCall
{
	background: #9B0000;
}

.OnSite
{
	background: yellow;
}

.VisitComplete
{
	background: line;
}

.NextToLastCall
{
	background: #7B0000;
}

.LastCall
{
	background: #5B0000;
}

.Call
{
	background: #6363D6;
}

.Lunch
{
	background: #FC0;
}

.Free
{
	background: #8BDFED;
	color: black;
}


.ActiveCall
{
	animation-name: pulseCell;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 500ms;
}

@keyframes pulseCell
{
	0% {
/*		border: 1px solid green;*/
		 box-shadow: inset 0 0 15px white;
		}
	100% {
	 box-shadow: inset 20 20 15px blue;
/*		border: 4px solid red;*/
	}
}

/*	********************** Standard Report ********************** */

.stdReport
{
	border: 1px solid #000;
	margin: 0 auto;
	margin-left: 75px;
	background: #ffffff;
}

.stdReport thead
{
	font-size: 1.25em;
	display: table-row-group;
}

.stdReport thead tr
{
	font-size: 0.8em;
}

.stdReport thead:first-child
{
	font-size: 1.5em;
}

.stdReport td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.stdReport .stickyHeading
{
	position: sticky;
	top: 0px;
	padding: 0px 0px 0px 5px;
}

.stdReport .verticalSeperator
{
	width: 0px  !important;
	padding: 2px !important;
	min-width: 0px;
	max-width: 0px;
	background: black;
}

.stdReport th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-weight: 900;
	padding: 0px 5px;
	background: #ddd;
}

.stdReport tbody tr:nth-child(2n+1)
{
	background: #F9F0DB;
}

.stdReport tbody td
{
	min-width: 50px;
}

.stdReport .reportSummary
{
	font-weight: 900;
}

.stdReport tbody tr:first-child
{
	text-align: center;
	background: #ddd;
}

.stdReport tfoot tr:last-child
{
	font-weight: 900;
}

.dynReport
{
	border: 1px solid #000;
	margin: 0 auto;
	margin-left: 75px;
	background: #ffffff;
}

.dynReport thead
{
	font-size: 1.25em;
	display: table-row-group;
}

.dynReport table {
	width:100%;
	font-size: 1.25em;
}

.dynReport td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.dynReport th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-weight: 900;
	padding: 0px 5px;
	background: #ddd;
}

.dynamicTreeDrop::after
{
	content: ' \1F80A';
	color: black;
}

#TreeStruct
{
	background: #ddd;
}

.stdReport .reportNestSeperator
{
	height: 10px;
	background: black;
}


.stdReport .addRemoveColumn
{
	background: none;
	border: none;
	min-width: 10px;
	max-width: 10px;
	height: 10px;
	margin: 0px;
	padding: 0px;
	text-align: right;
	margin-left: 5px
}

/*	********************** Booking Frame ********************** */

.bookingFrameTabs
{
	margin: 0 auto;
	width: 100%;
}

.bfRequired
{
}

.bfRequired::after
{
	content: " \2666";
	color: red;
}
	
.bookingFrameTabs input[type="date"]
{
	max-width: 150px;
}

.bookingFrameTabs select
{
	max-width: 150px;
}

.bookingFrameTabs input
{
	border-color: #445878;
	border-width: 1px;
	width:150px;
	min-height: 25px;
	font-family: calibri;
}

.bookingFrameTabs input[type="File"]
{
	background: #445878;
	color: white;
	font-size: 1em;
	min-height: 35px;
	min-width: 250px;
	padding: 3px;
	font-family: calibri;
	vertical-align: top;
/*	border: #445878 2px outset; */
	border: none;
}

.bookingFrameTabs input[type="File"]:hover
{
}

.bookingFrameTabs button
{
	background: #445878;
	color: white;
	font-size: 1em;
	min-height: 35px;
	min-width: 150px;
	text-align: center;
	font-family: calibri;
	border: none;
}

.bookingFrameTabs .spanField
{
	color: #445878;
	display: inline-block;
	text-align: left;
	min-width: 175px; 
	font-weight: 400;
	font-size: 1em;
	font-family: calibri;
}

.bookingFrameTabs .spanFieldWide
{
	color: #445878;
	display: inline-block;
	text-align: left;
	min-width: 175px; 
	font-weight: 400;
	font-size: 1em;
	font-family: calibri;
}

.bookingFrameTabs .frameHeading
{
	color: #445878;
	font-weight: 400;
	font-size: 1.5em;
	font-family: calibri;
}

.bookingFrameTabs .frameButtonGroup
{
	text-align: right;
	white-space: nowrap;
}

.bookingFrameTabs .frameMandatory
{
	text-align: left;
	font-size: 0.8em;
	color: #767676;
	padding-bottom: 10px;
}

.bookingFrameTabs .hrBreak
{
	padding: 25px 0px 25px 0px;
	color: #445878;
}

.breadcrumb { 
  list-style: none; 
  overflow: hidden;
}

.breadcrumb li { 
  float: left;
/*  font: 18px Lucida Sans Unicode !important; */
/*  font: 16px calibri; !important; */
  font: 15px calibri; !important;
}
.breadcrumb li span {
  color: white;
  text-decoration: none; 
/*  padding: 10px 0 10px 65px; */
  padding: 10px 1px 10px 35px;
  overflow: visible;
/*  background: brown; /* fallback color */
/*  background: hsla(255,85%,35%,1); 	*/
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb li span::before { 
  content: " "; 
  display: block; 
  width: 0px; 
  height: 0px;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}

.breadcrumb li span::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
/*  border-left: 30px solid hsla(255,85%,35%,1);	*/
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

.breadcrumb li:first-child span {
  padding-left: 10px;
}

.breadcrumb li:last-child span {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}

.breadcrumb li:last-child span::after { 
  border: 0; 
}

/*	********************** Colour Bricks ********************** */

.ColourBrick
{
	white-space: nowrap;
/*	text-align: center; */
}

.ColourBrick img
{
	display: inline-block;
	margin: 1px;
	width: 16px;
	height: 16px;
	vertical-align:center;
}

.ColourBrick div
{
	display: inline-block;
	margin: 1px;
	width: 16px;
	height: 16px;
	vertical-align:center;
}

/*	********************** Diary Key ********************** */

.key
{
	margin-left: 0px;
	padding: 0px;
	margin-top: 5px;
	text-align: center;
	position: sticky;
	display: inline-block;
	top: 10px;
	width: 100%;
	right: 0px;
	z-index: 5;
/*	padding: 5px;*/
	margin-right: 0px;
	margin-bottom: 10px;
	
	
	font-family: 'Lucida Sans Unicode', sans-serif;
	color: #555 !important;
	font-size: 0.75em;
}

.key div
{
	display: block;
	text-align: center;
}

.key div span
{
	color: #0070C0;
	width: 200px;
	background: #ffffffcc;
	border-radius: 20px;
	display: inline-block;
}

.key table
{
	width: auto;
	margin: 0px auto;
	border-spacing: 5px 4px;
	border: 2px solid;
	background: white;
	font-size: 1.25em;
}

.key th
{
	font-size: 0.9em;
	padding: 0px;
	color: #555 !important;
	text-align: left;
}

.key td
{
	font-size: 0.8em;
	color: #555;
/*	padding: 0	*/
}

.key td:nth-child(2n)
{
	padding-right: 35px;
}

.key table div
{
	border: 1px solid #666;
	width: 25px;
	height: 25px;
	border-radius: 5px;
	display: inline-block;
}

.key table img
{
	max-width: 28px;
	max-height: 32px;
/*	height: 32px;	*/
	padding: 0px;
	margin: 0px 0px 1px 0px;
}

/*	********************** Diary Key ********************** */

.BASE_ReportList
{
	display: block;
	margin: 0 auto;
	text-align: center;
}

.BASE_ReportList div form
{
	border: #4169E1 1px solid;
	font-family: 'Lucida Sans Unicode', sans-serif;
	display: inline-block;
	margin: 0 auto;
	color: black;
	border-spacing: 5px 3px;
	border-collapse: unset;
}

.BASE_ReportList #lReportsList optGroup
{
	margin-left: 10px;
}

.genericTable table
{
	border: 1px solid #000;
	margin: 0 auto;
	margin-left: 75px;
	margin-right: 75px;
	background: #ffffff;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.genericTable td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.genericTable tr:nth-child(2n+5)
{
	background: #F9F0DB;
}

.PartImage
{
	border: 1px solid #BBB;
	overflow: hidden;
	max-width: 40px;
	max-height: 40px;
	min-width: auto;
	min-height: auto;
}
/*
::-webkit-scrollbar
{
	display: none;
}
*/

.SF_Type label
{
	text-align: center;
	padding: 5px 0px;
	margin: 0px 20px;
	border: 8px solid #ffffff;
}

.SF_Type input[type="radio"]:checked + label
{
	font-weight: 900;
	border-bottom: 8px solid #445878;
/*	border-radius: 20px 20px;*/
	border-inline-start-width: 0px;
	border-inline-end-width: 0px;
}

.ImageDropDown
{
	border: 1px solid black;
	border-radius: 5px;
	max-height: 25px;
	overflow: hidden;
}

.ImageDropDown:hover
{
//	overflow: visible;
}

.ImageDropDown input
{
	display: none;
}

.ImageDropDown ul
{
}

.ImageDropDown li
{
	list-style: none;
	height: 25px;
}

.ImageDropDown img {
	height: 25px;
}

.SingleFilterButtonBar td {
	text-align: center;
	margin: auto auto;
}

.SingleFilterButtonBar button {
	width: 100px;
	color: white;
	min-width: auto;
	text-align: center;
	margin: 0px 10px;
	border-radius: 5px;
	border: 0px;
	background: #455878;
	cursor: pointer;
}

.SingleFilterButtonBar button:hover {
	background: #92CDCF;
}

.WorkDiary {
	border: none;
}
.WorkDiary div {
	font-size: 0.60em;
	border: 1px solid black;
/*	border-radius: 5px;	*/
/*	margin: 4px 1px; */
	padding: 0px;
/*	margin: 1px 0px; */
	white-space: nowrap;
}

.ClientLogo {
	margin: 0 auto;
	max-width: 64px;
	max-height: 32px;
}

.ManufacturerLogo {
	margin: 0 auto;
	max-width: 64px;
	max-height: 32px;
}

.DiaryAvailabilityKey {
	border: 1px solid #666;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	display: inline-level;
	margin-right: 10px;
	margin-top: 2px;
}

.DayHourMin
{
	text-align: right;
}

.FoundWork
{
	clear: both;
	overflow: scroll;
	height: 375px;
	width: auto;
	resize: both;
	margin-left: 75px;
	margin-bottom:25px;
	display: block;
	border: 1px solid;
}

.FoundWork table
{
	display:table;
	width:100%;
	border-spacing: 0px 2px;
	padding-right: 10px;
	min-width: 1280px;
}

.FoundWork table th
{
	text-align: left;
	padding: 1px 5px 1px 15px;
	font-size: 16px;
	z-index: 5;
	user-select: none;
	position: sticky;
	top: 0;
	color: black;
}

/*
	padding: 1px 0px;
  border-bottom: 3px solid #92CDCF;
  position: sticky;
  top: 0;
  z-index: 5;
*/
.FoundWork table td
{
	text-align: left;
	padding: 0px 5px 0px 15px;
	font-size: 12px;
	height: 32px;
	color: #000;
}

.JobRatesMatrix 
{
	display: block;
	font-size: 1em;
	border: 1px solid black;
}

.JobRatesMatrix tr
{
	background: white;
}

.JobRatesMatrix th
{
	background: #cEe0e1;
	border: none;
	font-size:0.95em;
	font-weight: 900;
	color: #555;
	white-space: nowrap;
	font-size: 0.75em;
}

.JobRatesMatrix td
{
	min-width: 50px;
	font-size: 0.75em;
}

.JobRatesMatrix input
{
	height: 25px;
}

.jsDiaryScroll
{
	position: relative;
	left: 0px;
}

/*	********************** Help Bubbles ********************** */

.smallHelpBubble
{
	left: -22px;
	bottom: -4px;
	height: 16px;
	position: relative;
	cursor: help;
	border: none;
}

.mediumHelpBubble
{
	left: -36px;
	bottom: -4px;
	height: 24px;
	position: relative;
	cursor: help;
	border: none;
}

.largeHelpBubble
{
	left: -48px;
	bottom: -2px;
	height: 28px;
	position: relative;
	cursor: help;
	border: none;
}

/*	********************** Job Rates Matrix ********************** */

.BASE_JRM
{
	display: block;
	margin: 0 auto;
	text-align: center;
}

.BASE_JRM > div > form
{
	border: 1px solid #000;
	margin: 0 auto;
	margin-left: 75px;
	margin-right: 75px;
	background: #ffffff;
}

.BASE_JRM > div > form tr:nth-child(4)
{
/*	border-spacing: 10px;*/
/*	background: red;*/
/*	border-collapse: separate;*/
	border-bottom: 5px solid red;
}

.BASE_JRM > div td
{
//	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.BASE_JRM > div th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

/*
	// Replaced With Less Specific CSS To Accomodate Bugs In Apple Version Of Chrome
	
.BASE_Dashboard > div > form td
{
	border: 1px solid #999;
	font-size: 0.75em;
	empty-cells: show;
	padding: 2px;
	font-family: 'Lucida Sans Unicode', sans-serif;
}

.BASE_Dashboard > div > form th
{
	white-space: nowrap;
	font-family: 'Lucida Sans Unicode', sans-serif;
}
*/



.BASE_JRM > div > form td > select > option
{
	width: 0px;
}

.BASE_JRM > div > form > table > tbody > tr > td > input[type="text"],
.BASE_JRM > div > form > table > tbody > tr > td > input[type="number"],
.BASE_JRM > div > form > table > tbody > tr > td > input[type="email"],
.BASE_JRM > div > form > table > tbody > tr > td > input[type="time"],
.BASE_JRM > div > form > table > tbody > tr > td > input[type="password"],
.BASE_JRM > div > form > table > tbody > tr > td > input[type="date"]
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	width: 100%;
	box-sizing: border-box;
}

.BASE_JRM .underlineRow:hover
{
	outline: medium groove #646Dff;
}

.ReportsList2 th
{
	text-align: left;
	padding: 5px;
	min-width: 200px;
}

.ReportsList2 td
{
	min-width: 500px;
}

.AuthBox
{
	color: #445878;
	text-align:center;
	margin-top: 25px;
	font-size: 0.9em;
}

.AuthBox input
{
	color: #445878;
//	border: 2px solid #445878;
	border: 1px solid #ccc;
	border-radius: 0px;
//	background: #EEE;
	min-height: 40px;
	font-size: 1em;
}

.AuthBox input:focus
{
	outline-color: #445878;
	outline-style: solid;
	outline-width: 3px;
}

.AuthBox input[type="otpPass"]
{
	text-align: left;
	width: 192px;
	box-sizing: border-box;
	vertical-align: bottom;
	padding: 5px 10px;
	outline-color: #445878;
}

.AuthBox input[type="digit"],
.AuthBox input[type="password"],
.AuthBox input[type="text"]
{
	text-align: center;
	width: 40px !important;
	max-width: 40px;
	min-width: 40px;
	margin: 0px 10px;
	box-sizing: border-box;
	outline-color: #445878;
}

.AuthBox input[type="email"]
{
	padding: 5px;
	border: 1px solid #ccc;
	min-height: 40px;
	font-size: 0.9em;
	min-width: 500px;
	width: 50%;
	padding: 5px 10px;
	color: #445878 !important;
	-webkit-text-fill-color: #445878;
}

.AuthBox #submitButton
{
	width: 160px;
	height: 40px;
	margin: 0px 0px 0px 20px;
	background: #445878;
	border: none;
	border-radius: 0px;
	color: #fff;
	font-size: 0.75em;
	text-align: center;
	vertical-align: bottom;
}

#loginBannerImage
{
	max-width: 480px;
	min-height: 200px;
	margin: 15px auto auto auto;
	padding-top: 40px;
	text-align:center;
	position: relative;
	vertical-align: bottom;
}

#passwordEye
{
	position: relative;
	bottom: 30px;
	float: right;
	left: -5px;
	display: block;
	width: 28px;
}

.LoginBox
{
	font-family: 'Lucida Sans Unicode', sans-serif;
	color: #445878;
	text-align:center;
	margin-top: 25px;
	font-size: 0.9em;
/*
	font-family: calibri;
	font-size: 1.1em;
*/
}

.LoginBox a
{
	text-decoration: none;
}

.LoginBox table
{
	border-spacing: 0px;
	font-size: 1.25em;
	display: inline-block;
	vertical-align: top;
	border: none;
	margin: 25px 10px;
	padding: 0px;
}

.LoginBox button
{
	min-width: 500px;
	width: 100%;
	height: 40px;
	background: #445878;
	border: none;
	color: #fff;
	font-size: 0.9em;
	padding: 5px;
	text-align: center;
	border-radius: 0px;
}

.LoginBox input
{
/*	color: #445878;	*/
	padding: 5px;
	border: 1px solid #ccc;
	min-height: 40px;
	font-size: 0.9em;
	min-width: 500px;
	width: 100%;
	padding: 5px 10px;
	color: #445878 !important;
	-webkit-text-fill-color: #445878;
}

.LoginBox input:autofill
{
	transition: background-color 5000s ease-in-out 0s;
	font-family: 'Lucida Sans Unicode', calibri, sans-serif;
}

input:-webkit-autofill {
	font-family: 'Lucida Sans Unicode', calibri, sans-serif;
}

input:-webkit-autofill::first-line {
	font-family: 'Lucida Sans Unicode', calibri, sans-serif;
}

.LoginBox input:focus
{
	outline: none;
}

.LoginBox label
{
	color: #445878;
}

.LoginBox #forgotPassword
{
	text-align: center;
	padding-top: 10px;
	font-size: 0.8em;
}

.LoginBox #loginFooter
{
	padding-top: 20px;
	font-size: 0.75em;
}

.LoginBox #loginWelcomeMessage
{
	color: #445878;
	margin-top: 25px;
	font-size: 1.35em;
	font-style: italic;
	text-align: center;
}

.LoginBox #loginGreetingMessage
{
	color: #92CDCF;
	margin-top: 20px;
	font-size: 2em;
}

.BannerHeading
{
	text-align: center;
	background: #92CDCF;	/* #92CDCF; */
	width: 100%; border: none;
	margin-bottom: 25px;
	color: #445878;
	display: inline-block;
	margin-top: 16px;
	font-family: 'Lucida Sans Unicode', sans-serif;
	font-size: 24px !important;
	border: none !important;
}


/*	********************** Diary Availability Picker ********************** */

.DiaryAvailabilityPicker {
	width:100%;
	text-align: center;
	margin-left: -3px;
}

.DiaryAvailabilityPicker > table {
	margin: 25px auto;
	border-spacing: 3px;
	display: inline-table;
	width:auto;
}

.DiaryAvailabilityPicker td {
	max-width: none !important;
	min-width: auto !important;
	width: auto !important;
}

.DiaryAvailabilityPicker th span
{
	display: inline-block;
	width: 100%;
}

.DiaryAvailabilityPicker .MonthHeading
{
	height: 30px;
	text-align: center;
	
	color: #445878;
	font-size: 1.25em;
	vertical-align: center;
	padding-top: 0px;
	vertical-align: middle;
}


.DiaryAvailabilityPicker .CurrentDateHeadingOrdinal
{
	display:inline;
	font-size: 0.75em;
	vertical-align:top;
}

.DiaryAvailabilityPicker .KeyHeading
{
	font-weight: 900;
	font-size: 1.2em;
	color: #445878;
	font-weight: 900;
	text-align: left;
}

.DiaryAvailabilityPicker > table > tbody > tr > td > table 
{
	margin-top: -4px;
}

.popOutDiary #optionsBar {
	background: #ddd;
	padding: 2px;
	margin-bottom: 10px;
	font-family: calibri, "Lucida Sans Unicode", sans-serif;
	font-size: 1em;
}

.popOutDiary #optionsBar > input {
	margin-right: 10px;
}

.popOutDiary #DTB_FULL > div{
	margin-bottom: 10px;
}

#EmailDiv
{
	margin: 0px auto;
	width: auto;
	border: 1px solid;
	padding: 10px;
}
/* Hisense appliance-exchange (RMA) action row - Save / Cancel sit under the
   comments box, right-aligned, so they stay inside the section panel.
   width:auto is explicit because the legacy theme has no .optionButton rule
   to size them, and a bare button in a full-width cell stretches to fill it. */
td.sagRmaActions.sagRmaActions {
	/* .jobBoard td sets width:0 so cells shrink-wrap - without a width the
	   cell is only as wide as the buttons and there is nothing to align
	   against, leaving them stuck on the left. */
	width: 100%;
	text-align: right;
}
.sagRmaActions button {
	width: auto;
	min-width: 80px;
	display: inline-block;
	margin-left: 6px;
}

#ScriptEditor {
	border: 1px black solid;
	margin: auto 0;
}
/* Tick/cross markers inside job board buttons are set float:right inline.
   A float only stays on the label's line when there is spare width, and
   these buttons are sized by their column - so on narrow columns the marker
   dropped onto a second line. !important because the float is inline. */
.jobBoard button > span
{
	float: none !important;
}