/*csslint zero-units: 0, important: 0,overqualified-elements: 0*/

html {
	min-height: 100%;
}

body {
	background-color: White;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 100%;
	margin: 0px;
	min-width: 320px;
}

body h2, body h3, body h4, body h5 {
	text-align: center;
}

.login-panel select,
.login-panel input,
.login-panel textarea {
	margin: 4px;
}

form {
	position: relative;
	margin-top: 60px;
}

.form-row {
	min-width: 200px;
	/*display: inline-block;*/
	padding: 4px;
}

.form-row label {
	text-align: right;
	display: inline-block;
	min-width: 90px;
}

div.Popup {
	text-align: justify;
	font-size: 0.9em;
	color: #F7F4F3; /* pearl */
	background: #015174; /* Arjo Blue */
	border: 3px none;
	border-radius: 6px;
	border-collapse: separate;
	box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
}

div.PopupBlack {
	text-align: justify;
	font-size: 0.9em;
	color: black; /* pearl */
	background: #015174; /* Arjo Blue */
	border: 3px none;
	border-radius: 6px;
	border-collapse: separate;
	box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
}

label.basic {
	color: inherit;
	font-weight: inherit;
}

.app-popup form {
	margin-top: 0px;
}

.app-popup .header {
	display: none;
}

.heading {
	width: 95%;
	padding: 4px;
	margin: 0 auto;
}

.heading > div {
	display: inline-block;
}

.foot {
	padding: 20px;
}

.foot .statement {
	margin: 5px 10%;
	margin: 10px auto;
	max-width: 900px;
	padding: 0px 5%;
}

.notification,
.user-message {
	display: inline-block;
	font-size: 14px;
	padding: 8px;
	white-space: pre-wrap;
}

.Section {
	margin: 2px auto;
}

.Section h3 {
	font-size: 16px;
	margin: 4px 0px;
	margin-bottom: 8px;
}

.Section summary {
	padding: 4px;
	font-weight: bold;
	font-size: 22px;
	cursor: pointer;
}

table.Section td {
	border: 0px none !important;
}

details {
	display: block;
	margin: auto;
}

.Section table.results td {
	padding: 2px;
}


/* Quiz */

.quiz-dialog {
	position: fixed;
	position: absolute;
	width: 400px;
	max-width: 800px;
	margin-left: -200px;
	margin-top: -100px;
	left: 50%;
	top: 50%;
	padding: 10px;
	border-radius: 25px;
	text-align: center;
}

.quiz-dialog-button {
	background-color: #c3d9e5;
	border-radius: 40px;
	width: 90%;
	cursor: pointer;
	padding: 20px 0px;
	font-size: 17px;
	font-weight: bold;
	margin: 10px 0px;
	display: inline-block;
}

.quiz-progress {
	display: inline-block;
	height: 26px;
	text-align: left;
	background-color: #dddddd;
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

.quiz-progress-bar {
	display: inline-block;
	height: 26px;
	text-align: center;
	line-height: 30px;
	color: white;
}

.quiz-progress-value {
	position: absolute;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	left: 0px;
	top: 5px;
	width: 100%;
	color: white;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

.quiz-overview {
	width: 100%;
	max-width: 1446px;
	margin: 10px auto;
	border-spacing: 20px;
	font-size: 14px;
}

.quiz-overview .Section {
	margin: 10px auto;
}

.quiz-button {
	margin: 2px;
	width: 150px;
	height: 35px;
	font-size: 1.3em;
	font-size: 16px;
	border-radius: 25px
}

.quiz-question, .quiz-answer {
	zoom: 0.9;
}

.quiz-question {
	width: 70%;
	min-height: 90px;
	background-color: lightblue;
	border-radius: 25px;
	text-align: center;
	margin: auto;
	margin-bottom: 20px;
	padding: 20px 5%;
	font-size: 20px;
	font-weight: bold;
}

.quiz-question p {
	padding: 2px;
	margin: 4px;
}

/* Quiz Subtitle */
.quiz-question h3 {
	margin: 4px;
	padding: 20px;
	font-style: italic;
}

/* Quiz Question image */
.quiz-question img {
	margin-bottom: 10px;
	max-height: 400px;
	max-width: 600px;
}

/* Quiz Question value */
.quiz-question h4 {
	margin: 10px;
	font-size: 19px;
	white-space: pre-wrap;
}

.quiz-answer {
	text-align: left;
	margin: 25px;
	border-radius: 25px;
	background-color: #F5F5F5;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center right;
	min-height: 80px;
}

.quiz-answer-value {
	white-space: pre-wrap;
}

.quiz-grid {
	display: grid;
	grid-template-columns: 50% 50%;
}

.quiz-grid .quiz-answer {
	float: left;
	margin: 2%;
	width: 44%;
}

@supports(display: grid) {
	.quiz-grid .quiz-answer {
		width: auto;
		margin: 3%;
	}
}

.quiz-answer:hover {
	box-shadow: inset 0px 5px 400px rgba(30,0,0,0.05);
}

.quiz-answer.selected {
	background-color: #FBD575;
}

.quiz-answer.correct {
	background-color: #8ad1d1; /*#93ce4e;*/
}

.quiz-answer.usercorrect {
	background-color: #8ad1d1; /*#93ce4e;*/
	background-image: url('../Images/imgAuthoriseSmall.png');
}

.quiz-answer.userincorrect {
	background-image: url('../Images/imgWrongAnswer.png');
}

.quiz-answer-part,
.quiz-answer-letter {
	display: inline-block;
	min-height: 30px;
	text-align: center;
	vertical-align: middle;
	font-size: 17px;
	margin: 20px 0px;
}

.quiz-answer-part {
	width: 90%;
	margin-top: 30px;
}

.quiz-answer-letter {
	width: 5%;
	margin-left: 1%;
	margin-top: 20px;
}

.quiz-answer-image {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
}

.table-section {
	width: 100%;
	max-height: 200px;
	min-height: 120px;
	overflow-y: auto;
	background: white;
}

.field {
	padding: 5px 2px;
	display: inline-block;
}

.field-row {
	margin: 5px;
}

.field-row label {
	display: inline-block;
	margin-right: 8px;
	width: 60%;
}

.field-row input[type=checkbox] {
	margin: 3px 1em
}

.field-row select,
.field-row input[type=text],
.field-row input[type=number],
.field-row input[type=search],
.field-row input[type=tel],
.field-row textarea,
.field-row .output {
	display: inline-block;
	width: 97%;
}

.field-row textarea:read-only {
	background: #F8F8F8;
}

.field-row select {
	width: calc(97% + 2px) !important;
}

.Section .field-row label {
	font-weight: bold;
}

.field-controls {
	text-align: center;
}

field-controls button {
	min-width: 200px;
}

.control-panel {
	margin: 10px auto;
	width: 1000px;
}

.control-panel .Panel,
.control-panel .Section {
	display: inline-block;
	vertical-align: top;
	width: 26%;
	margin: 2%;
	padding: 1%;
}

.screen-panel {
	margin: 10px auto;
	min-height: 500px;
	width: 90%;
	border: 1px outset #F8F8F8;
}

.screen-panel .Section {
	width: 44%;
	max-width: 500px;
	margin: 2% 3% 0% 1%;
	margin-bottom: 0px;
}

.screen-data table.results {
	width: 100%;
}

.screen-data {
	height: 100%;
	height: calc(100% - 30px);
	overflow-y: auto;
	clear: both;
	text-align: center;
}

.screen-data.chart {
	max-height: 700px;
	padding: 10px 0px;
}

.screen-bar {
	width: 100%;
	margin: 0px;
	background: silver;
	height: 36px;
}

.screen-bar button {
	margin: 4px;
	height: 30px;
	min-width: 30px;
	padding: 1px;
}

.screen-bar .tab {
	margin: 4px;
	height: 27px;
	padding: 1px;
	width: 1px;
	border-left: 2px groove silver;
}

.screen-bar select {
	margin: 4px;
	height: 30px;
	padding: 1px;
}

.screen-bar button.selected {
	border-style: inset;
}

/* large screens */
@media(min-width:1400px) {

	.control-panel {
		float: left;
		margin: 10px;
		width: 320px;
		border-right: 1px solid silver;
		padding: 10px 30px;
	}

	.control-panel .Panel,
	.control-panel .Section {
		width: 96%;
	}

	.screen-panel {
		float: none;
		display: inline-block;
		height: 780px;
		width: 80%;
		margin: 20px;
		width: calc(95% - 380px);
	}

	.table-section {
		max-height: 200px;
		min-height: 160px;
	}
}

/* ELEMENT LAYOUT */

.center {
	float: none;
	text-align: center;
	margin: 0 auto;
}

.left {
	display: block;
	float: left;
	text-align: left;
}

.right {
	display: block;
	float: right;
	text-align: right;
}

.bottom {
	position: absolute;
	bottom: 4%;
	left: 1%;
	width: 98%;
	text-align: center;
}

.wrap {
	display: -moz-inline-stack;
	display: inline-block;
	*display: inline;
	zoom: 1;
	clear: none;
}

.nowrap {
	white-space: nowrap;
}

.required {
	color: red;
}

/* Text Appearance */

.code, .log {
	white-space: pre-line;
	font-family: "Courier New", Courier, monospace;
}

.log {
	font-size: 1em;
	color: #333;
	margin-top: 1em;
	margin-left: 1em;
}

.panel.log {
	border: 1px inset silver;
	display: inline-block;
	overflow-y: auto;
	max-height: 190px;
	width: 100%;
	margin: 1em auto;
	padding: 2px;
}

.gentle {
	color: #444444;
	font-style: italic;
	font-size: 0.9em;
}

.subtle {
	color: #888;
	font-size: 0.9em;
}

.subtle a {
	color: #888;
	font-size: 1em;
	text-decoration: none;
}

.subtle a:hover {
	text-decoration: underline;
}

/* Basic Element Styles */

.hidden {
	visibility: collapse;
	display: none;
	width: 0px;
}

.fixed {
	position: absolute;
	position: fixed;
}

.scroll {
	overflow: auto;
	overflow-x: visible;
}

* .hideSelects select {
	_visibility: hidden;
	_display: none;
}

@supports (filter:invert(1)) {

	.dark-mode {
		background: gainsboro;
		filter: invert(1) hue-rotate(160deg) contrast(90%) brightness(110%);
	}

	.dark-mode * {
		box-shadow: none !important;
	}

	.dark-mode img {
		filter: invert(1) hue-rotate(200deg) contrast(110%) brightness(90%);
	}

	.dark-mode .popup,
	.dark-mode .dialog,
	.dark-mode .floating {
		border: 1px solid black;
	}

	.dark-mode .menuIcons .menu-item {
		color: black;
	}

	.dark-mode .menuIcons .menu-item div {
		text-shadow: 1px 1px 1px white;
	}
}

.dark-mode .menuIcons .menu-item img {
	background-color: #969696;
	border-color: #969696;
}

.dark-mode body {
	background-color: transparent;
}

/* IE10 & IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.dark-mode {
		background: #222;
		filter: invert(1) hue-rotate(160deg) contrast(90%);
		color: white;
	}

	.dark-mode h1,
	.dark-mode h2,
	.dark-mode h3,
	.dark-mode h4,
	.dark-mode h5 {
		color: white;
	}

	.dark-mode .menuIcons .menu-item {
		color: white;
	}

	.dark-mode .menuIcons .menu-item div {
		text-shadow: none;
	}
}

.arrow {
	width: 35px;
	height: 35px;
	cursor: pointer;
	vertical-align: middle;
}

hr {
	color: #E0E0E5;
	border: 1px solid #E0E0E5;
}

.highlight, .highlight select {
	background-color: #FFFFD0;
	background-image: none;
}

select.highlight option {
	background-color: #FFFFD0;
}

ul li {
	margin: 4px;
	text-align: left;
}

/* Tables and Grids */

table.Selection label {
	cursor: pointer;
}

table.Wrapping {
	display: inline-block;
}

table.Wrapping tr {
	display: inline-block;
	float: left;
	width: 46%;
	white-space: nowrap;
}

table.Wrapping td {
	display: inline-block;
}

table.Report td {
	height: 30px;
}


table.results, table.records, table.data, table.data-view, table.data-grid {
	border-collapse: collapse;
	margin: 0 auto;
}

table .results {
	min-width: 80px;
	font-size: 13px;
}

table.results.selection td {
	cursor: pointer;
	padding: 8px 4px;
}

table.results.selection tr:hover td {
	color: #015174; /* arjo blue */
	color: #87657D !important; /* flow purple */
	background: rgba(223, 190, 194, 0.4) !important; /* sway pink */
}

table.results.selection tr.dragover {
	border-top: 2px dotted black;
}

table.results tr.selected {
	color: black;
	xxxbackground-color: lightblue;
}

table.results.selection tr.fixed-row td {
	background-color: #FFFFFF !important; /* white */
	color: black;
}

table.results.selection tr.fixed-row > td {
	background-color: #FFFFFF !important; /* white */
	box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3);
	box-shadow: inset 0px 1px 4px rgba(0,0,0,0.4);
}

table.results th[onclick], table.results th.sortable {
	cursor: pointer;
}

table.results th[onclick]:hover, table.results th.sortable:hover {
	text-decoration: underline;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}


table.results input[type=checkbox] {
	zoom: 130%;
	margin: 2px;
	*zoom: 100%;
}

table.Report td {
	padding: 3px;
}

table.results.Report {
	padding: 3px;
	font-size: 12px;
	width: 90%;
	margin: 4% auto;
	border-collapse: collapse;
	text-align: center;
}

table.data-grid {
	border-collapse: collapse;
	margin: auto
}

table.data-grid td {
	padding: 4px;
	white-space: pre-line;
	border: 1px solid silver;
}

table.data-grid.results td, table.data-grid.results th {
	padding: 4px;
	/*border-left: 1px solid #D9D4D0;
	border-bottom: 1px solid #D9D4D0;
	border-left: 1px solid rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(0,0,0,0.3);*/
}

th.sort {
	cursor: pointer;
}

th.sort:hover {
	text-decoration: underline;
}

.NoResults {
	display: inline-block;
	width: 99%;
	text-align: center;
	font-style: italic;
}

table.records.selection tr.fixed-row td,
table.records.selection tr.fixed-row:hover td {
	border: none;
	cursor: default;
	background: none !important;
}

table.Section {
	border: none;
}

table.Section td {
	-ms-filter: initial;
	filter: none;
	border: none;
	background: none !important;
	background-color: transparent;
}

table.Section tr {
	border: none;
	border-bottom: none;
}



/* Dashboard */

.dash-board {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 1%;
}

.dash-item {
	position: relative;
	min-width: 30%;
	xxflex-basis: 40%;
	margin: 1%;
	overflow: hidden;
	border: 1px solid #F6F6F6;
	flex-grow: 1;
	/* float:left; 	width: 46%;*/
}

.dash-bar {
	text-align: right;
	width: calc(100% - 4px);
	display: inline-block;
	padding: 2px;
}

.dash-item.edit {
	border-style: dashed;
	border: 2px dashed grey;
	opacity: 0.6;
}

.dash-item.edit .dash-bar {
	border-bottom: 2px ridge grey;
}

.dash-data {
	margin: 2%;
}

.dash-data div[dir='ltr'] {
	margin: auto;
}

.dash-data table {
	text-align: center;
	width: 100%;
	margin: auto !important;
}

.dash-data-part {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

table.dash-values {
	text-align: left;
	border-spacing: 2em;
	font-weight: bold;
	font-size: 2em;
	width: auto;
	margin: auto;
}

table.dash-values td label {
	font-size: 90%;
}


/* Login */
.login-icon {
	display: none;
}

.landing {
	max-width: 1500px;
	min-width: 310px;
	margin: auto;
	text-align: left;
}

.landing form {
	xxxpadding: 2%;
}

.landing .login {
	max-width: 500px;
}

.landing #navUserName {
	display: none;
}

.login-panel {
	position: static;
	max-width: 85%;
	xxxfont-size: 1.2em;
	border-collapse: separate;
	margin: 0px auto;
	xxxwidth: 450px;
	padding: 30px;
	xxxbackground: white;
	right: 20%;
	top: 20%;
}

.login-panel h2 {
	margin-top: 0px;
	text-align: center;
}

.login-panel .padding {
	width: 10px;
}

.login-panel tr {
	vertical-align: top;
}

.login-panel button,
.login-panel input[type=button] {
	min-width: 100px;
	margin-top: 10px;
}

.LoginTable {
	height: auto;
	width: 100%;
	width: 400px;
	margin: auto;
}

.LoginTable td {
	vertical-align: middle;
}

.loginfield {
	width: 85%;
	*width: 200px;
}

.loginlabel {
	white-space: nowrap;
}

.loginTitle {
	position: relative;
}

.loginTitle h1 {
	zoom: 1;
	text-align: center;
	font-size: 24px;
}

.loginFooter {
	text-align: center;
	padding: 3px;
}

.login-info h1,
.login-info h2,
.login-info h3 {
	text-align: left;
}

.login-info hr {
	width: 45%;
	margin: 30px 0px;
}

.logo {
	font-family: Verdana;
	font-size: 34px;
	color: #00509c;
}

.logo-red {
	font-style: italic;
	font-family: Verdana;
	font-size: 34px;
	color: #9b0057;
}

.header .logo-red {
	font-size: 18px;
}

/* Navigation bar */

.header {
	position: absolute;
	position: fixed;
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 30;
	text-align: center;
	white-space: nowrap;
	background-color: #9c9d9f;
	color: white;
	margin: 0px;
	xheight: 30px;
}

.header #navHome {
	float: left;
}

.header #navLogo {
	float: left;
}

.header li {
	float: right;
	display: inline-block;
	border: 0px;
	text-align: center;
	margin: 0 auto;
	padding: 0px;
	list-style: none;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.header li.left {
	float: left;
}

.header .logo {
	font-weight: bold;
	font-family: Verdana;
	font-size: 16px;
	text-shadow: none;
	vertical-align: top;
}

.header li a,
.header li var {
	width: auto;
	white-space: nowrap;
	font-style: normal;
	padding: 0px 6px;
	display: inline-block;
	height: 31px;
	line-height: 31px;
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
}

.header li var {
	margin-left: 20px;
	margin-right: 10px;
}

.header li select {
	width: auto;
	margin: 6px 4px;
	vertical-align: middle;
	font-size: 15px;
	min-height: 0px;
}

.header li a {
	border: 0px transparent none;
	text-decoration: none;
	cursor: pointer;
}

.header li var.login-panel {
	color: white;
}

.header li img {
	height: 24px;
	padding: 3px;
	width: auto;
}

.header .command {
	cursor: pointer;
}

.header .command-item {
	z-index: -1;
	padding: 10px;
	margin-top: 6px;
	padding-bottom: 5px;
	background-color: #9c9d9f;
	cursor: pointer;
}

.header .command-item:hover {
	font-weight: bold;
}


.nav-dots {
	text-align: center;
	width: 100%;
}

.nav-dot {
	font-size: 200%;
	padding: 10px;
	cursor: pointer;
}


/* Tab Controls */

.tabbed, Section.tabbed {
	position: relative;
	margin-top: 50px;
	border: 1px solid silver;
	padding: 10px;
}

.tabs, .list-tabs {
	position: absolute;
	width: 100%;
	top: -38px;
	white-space: nowrap;
	overflow: visible;
	overflow-x: auto;
	padding-top: 2px;
}

.tab {
	position: relative;
	width: 16%;
	line-height: 18px;
	vertical-align: top;
	display: inline-block;
	white-space: nowrap;
	padding: 8px 5px;
	overflow: hidden;
	cursor: pointer;
	z-index: 25;
	text-align: center;
	text-overflow: ellipsis;
	border: 1px solid rgb(128, 128, 128);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	font-weight: normal;
	text-decoration: none;
	background-color: #F8F8FA;
	color: black;
}

.list-tabs .tab {
	font-weight: bold;
	font-size: 20px;
	color: #555;
	text-shadow: 0px 1px #FFF;
}

a.tab:hover {
	padding-bottom: 11px;
	top: -2px;
}

.tab.add {
	font-weight: bold;
	color: white;
	width: 50px;
	left: -10px;
	z-index: 20;
	font-size: 30px;
	padding-left: 10px;
}

.tab.selected {
	font-weight: bold;
	border-bottom: 0px;
	padding-bottom: 10px;
	background-color: white;
}

/* BUTTONS */

input.GoButton,
input.GoButtonS {
	font-size: 16px;
	cursor: pointer;
	xxxheight: 28px;
}

input.close,
button.close,
.popup-close {
	height: auto;
	min-width: 1.5em;
	position: absolute;
	float: right;
	right: 1px;
	top: 3px;
	margin: 1px;
	padding: 2px;
	font-size: 14px;
	font-weight: bold;
}

/* COLOURS */

.colour-button {
	margin: 5px;
	margin-top: 0px;
	padding: 2px;
	color: #015174;
	background-color: #E9E4E0;
	font-size: 16px;
	font-weight: normal;
}

.colour-button span {
	display: inline-block;
	height: 20px;
	width: 20px;
	border: 1px solid silver;
}

.colour-grid td {
	padding: 2px;
	font-size: 13px;
	height: 4.4em;
}

.colour {
	display: inline-block;
	height: 100%;
	width: 100%;
	cursor: pointer;
	border: 1px solid white;
	padding: 0px;
	text-align: center;
}

.colour i {
	display: inline-block;
	line-height: 16px;
	xxxmargin-top: 5px;
}

.colour code {
	display: none;
	font-size: smaller;
}

.colour.light {
	color: black;
}

.colour.dark {
	color: white;
}

.colour:hover {
	border-color: black;
}

.colour-label {
	height: 20px;
	width: 160px;
	display: inline-block;
	border: 1px solid #DDDDDD;
	vertical-align: middle;
}

.noColour {
	background-color: none;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.3);
	background-image: url('../Images/noColor.gif');
	background-position: top left;
	background-repeat: repeat;
}

button.image {
	padding: 1px;
	margin-top: 4px;
}

/* MENUS */

.menuPadding {
	width: 7%;
}

/* Menu List - vertical list with small icons */
.menuList {
	display: block;
	width: 75%;
	min-width: 400px;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 1%;
	border-collapse: collapse;
	text-align: center;
	zoom: 1;
}

.menuList .menu-item {
	position: relative;
	display: block;
	width: 100%;
	white-space: nowrap;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid #CCC;
	background-color: #FFFFFF;
	color: #173C45;
	box-shadow: inset 0px -6px 20px rgba(100,100,100,0.1);
	-ms-box-shadow: inset 0px -6px 20px rgba(100,100,100,0.1);
	-webkit-box-shadow: inset 0px -6px 20px rgba(100,100,100,0.1);
}

.menuList .menu-item:hover {
	background-image: none;
	font-weight: bold;
	background: #E4F8FF;
	color: #207CB5;
	zoom: 1;
}

.menuList .menu-item div {
	display: block;
	overflow: hidden;
	line-height: 1.2em;
	font-size: 1em;
	padding: 0.6em;
	white-space: normal;
	text-align: left;
	vertical-align: middle;
	font-weight: bold;
}

.menuList .menu-item img {
	float: left;
	height: 2.2em;
	/* width:2.5em; */
	margin: 0.2%;
	text-align: center;
	vertical-align: middle;
	outline: 0px;
	border: 0px;
}

/* Menu Icons - wrapping list of large icons  */

.menuIcons {
	display: inline-block;
	width: 100%;
	min-width: 400px;
	max-width: 1600px;
	padding: 0px;
	margin: 0px auto;
	margin-left: 3%;
	font-size: 14px;
}

.menuIcons .menu-item {
	position: relative;
	float: left;
	width: auto;
	height: 7em;
	padding: 1% 1% 3% 1%;
	margin: 2px;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	border: 0px none;
	border-radius: 6px;
	background-color: none;
	background: none;
	cursor: pointer;
	color: black;
}

.menuIcons .menu-item div {
	float: none;
	display: block;
	width: 8em;
	overflow: hidden;
	line-height: 1em;
	font-size: 90%;
	xxxfont-weight: bold;
	padding: 8px 3px;
	white-space: normal;
	text-align: center;
	vertical-align: middle
}

.menuIcons .menu-item img {
	float: none;
	width: 4em;
	height: 4em;
	margin: 1%;
	max-width: 5em;
	text-align: center;
	vertical-align: middle;
	outline: 0px;
	border: 1px solid #EEEEEE;
	background-color: white;
}

.menuIcons .menu-item div {
	text-shadow: 0 6px 7px rgba(0, 0, 60, 0.1);
}

/* Menu Table - simple horizontal list */

.menuWrapping div {
	margin: 3px;
}

.menuWrapping div:hover {
	font-weight: bold;
	color: black;
}

.menuClassic tr:hover {
	font-weight: bold;
	color: black;
}

.icon, .icon-simple {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin: 2px;
	height: 1.6em;
	width: 1.6em;
	padding: 0px;
}

span.icon {
	background-color: silver;
	background-image: url('../Images/icons.png');
	background-position: 0px 50%;
	background-repeat: no-repeat;
	border-radius: 50%;
	height: 19px;
	width: 19px;
}

.icon.checkedOut {
	background-position: -792px;
	background-color: mediumseagreen;
}

.icon.cross {
	background-position: -72px;
}

.icon.load {
	background-position: -108px;
	background-color: mediumseagreen;
}

.icon.exit {
	background-position: -108px;
	background-color: purple;
}

.icon.email {
	background-position: -827px;
}

.icon.camera {
	background-position: -864px;
	background-color: cadetblue;
}

.icon.edit {
	background-position: -288px;
}

.icon.selecter {
	background-position: -108px;
}

.icon.followup, .icon.popup {
	background-position: -360px;
	background-color: steelblue;
}

.icon.action {
	background-position: -432px;
}

.icon.search {
	background-position: -612px;
}

.icon.blank {
	background-position: 72px;
}

.icon.refresh {
	background-position: -324px;
}

.icon.edited {
	background-position: -252px;
	background-color: #84C81C;
}

.icon.edited2 {
	background-position: -648px;
	background-color: greenyellow;
}

.icon.upload {
	background-position: -180px;
	background-color: purple;
	background-color: rebeccapurple;
}

.icon.download {
	background-position: -216px;
	background-color: mediumseagreen;
}

.icon.sync {
	background-position: -180px;
	background-color: goldenrod;
}

.icon.up {
	background-position: -180px;
}

.icon.down {
	background-position: -216px;
}

.icon.dark {
	background-color: rgba(0, 0, 0, 0.4);
}

.icon-text {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin: 0px 2px;
	height: 1em;
	width: auto;
}

.icon.checked, .icon.unchecked {
	background-image: none;
	background-color: white;
	background-size: 90%;
	border: 1px inset silver;
	border-radius: 2px;
	margin: 0px;
}

.icon.disabled {
	opacity: 0.35;
}

.icon.checked {
	background-image: url('../Images/imgCheckbox.png');
	background-color: #c8d0d5;
}

/*
.icon.checked {
	background-position: -648px;
	background-color: darkseagreen;
	border-radius: 2px;
	float: right;
}

.icon.unchecked {
	background-position: -683px;
	background-color: white;
	border-radius: 2px;
	float: right;
}
*/

.link-engineer {
	display: inline-block;
}

.icon-engineer {
	mask-image: url('../Images/engineer-icon.png');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url('../Images/engineer-icon.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	margin-left: 8px;
}

.info-engineer {
	font-size: 16px;
	vertical-align: middle;
	color: #777;
	min-width: 26px;
	display: inline-block;
}

code.info-engineer {
	display: inline-block;
	min-width: 21px;
	font-size: 15px;
}

.image.button {
	padding: 1px;
	font-size: 1.4em;
	cursor: pointer;
}

.image.button img {
	margin: 0px;
	padding: 0px;
	height: 1.6em;
	vertical-align: middle;
}

.circle {
	top: 2.5em;
	position: absolute;
	display: inline-block;
	min-width: 1.2em;
	height: 20px;
	font-size: 19px;
	line-height: 19px;
	text-align: center;
	border: 2px solid #FFF;
	border-radius: 12px;
	background: #F00;
	color: #FFF;
	font-weight: bold;
	box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.menuIcons .circle {
	top: auto;
	right: 24px;
	bottom: 3em;
}

.menuList .circle {
	top: auto;
	bottom: -4px;
	right: 4px;
}

/*Alert Message*/

.Alert {
	font-weight: bold;
}

.Alert2 {
	font-weight: bold;
	font-size: 1.1em;
	color: Navy;
}

.Alert3 {
	font-weight: bold;
	font-size: 1.2em;
	color: Navy;
}

.Alert4 {
	font-weight: bold;
	font-size: 1.2em;
	color: Red;
}

/* App Icons */

img.help {
	height: 16px;
	width: 16px;
	border: none;
	cursor: help;
	vertical-align: middle;
}

img.icon-action {
	height: 1.6em;
	width: auto;
	padding: 1px;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	border-radius: 0.8em;
}

img.icon-action.small {
	height: 1.2em;
}

img.icon-action.square {
	border-radius: 0;
}

img.icon-action:hover {
	filter: contrast(115%) brightness(105%);
	background: rgba(0,0,100,0.02);
	box-shadow: 0px 0px 5px rgba(0,0,100,0.02);
}


.icon-extra {
	width: 1.4em;
	height: 1.4em;
}

img.icon {
	background: none;
}

th img.help {
	height: 14px;
	width: 14px;
	vertical-align: top;
}

.link {
	font-weight: bold;
	font-size: 105%;
	color: #00509c;
	text-decoration: underline;
	margin-right: 20px;
	cursor: pointer;
}

.link-button {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

a:disabled.link-button,
a[disabled].link-button {
	color: gray;
	text-decoration: none;
	cursor: not-allowed;
}

iframe.hint {
	display: none;
	background: none;
	position: absolute;
	box-shadow: none;
	border: none;
	color: black;
	padding: 8px 10px;
	font-size: .9em;
	left: 0px;
	top: 0px;
}

iframe.assessment {
	background: #ffc;
	border: 1px solid #c93;
	display: none;
	position: absolute;
	width: 100px;
	padding: 0px 0px;
	font-size: .9em;
	left: 0px;
	top: 0px;
}

/* Treeview */
.tree input[type=checkbox] {
	margin-right: 4px;
}

.tree span[onclick]:hover {
	text-shadow: 0px 1px 1px rgba(0, 50, 100, 0.3);
}

/* Tree Structure */

.tree {
	padding: 10px;
	position: relative;
	background: white;
	overflow-y: visible;
	overflow-x: visible;
	min-height: 250px;
	color: black;
}

.tree .branch {
	margin: 5px;
	margin-left: 25px;
}

.tree .node {
	display: inline-block;
	padding-right: 10px;
	cursor: pointer;
	border-radius: 4px;
}

.tree .node.selected {
	color: #FFF;
	border: 1px solid #2373A5;
	border-color: #2373A5;
	background-color: #5393C5;
}

.tree .node.inactive {
	color: #777;
}

.tree .node.disabled {
	color: #888;
	cursor: default;
}

.tree .node.parent {
	cursor: pointer;
	font-weight: bold;
}

.tree .node.inactive:hover {
	background: none;
}

/* Other Layout styles */

div.Wrapping {
	display: inline-block;
}

div.Wrapping span {
	float: left;
	width: 45%;
}

.noWrap {
	white-space: nowrap;
}

.controls {
	text-align: center;
	vertical-align: bottom;
	margin: 4px;
	margin-top: 10px;
}

.controls button,
.controls input[type=button],
.controls input[type=submit] {
	min-width: 120px;
	margin: 10px !important;
}

.fixed-controls {
	text-align: center;
	width: 800px;
	padding: 10px 30px;
	margin: auto;
	position: fixed;
	bottom: 10px;
	left: 50%;
	margin-left: -400px;
	background: white;
	box-shadow: 0px 1px 6px rgba(0,0,0,0.3);
}

.small {
	font-size: .9em;
}

.symbol {
	font-family: wingdings;
	font-size: 160%;
	vertical-align: middle;
	line-height: 60%;
}

.holder {
	height: 100px;
	min-height: 100px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60px;
}

.date-control select, .date-control input,
select.DataList, select.TimeList, select.DayList, select.MonthList, select.YearList {
	width: 56px;
	margin-right: 1px;
	font-size: small;
	color: black;
	text-align: center;
	vertical-align: middle;
	padding-left: 2px;
}

select.DataList {
	width: 160px;
}

.date-control select.time, select.TimeList {
	width: 30px;
	padding: 1px;
	padding-left: 4px;
}

.date-control select.day, select.DayList {
	width: 50px;
}

.date-control select.month, select.MonthList {
	width: 56px;
}

.date-control select.year, select.YearList {
	width: 64px;
}

.date-control input.time {
	width: 32px;
	margin: 1px;
}

.date-control input.day {
	width: 32px;
	margin: 1px;
}

.date-control input.month {
	width: 32px;
	margin: 1px;
}

.date-control input.year {
	width: 50px;
	margin: 1px;
}

.time-field {
	font-family: Courier New, Courier, monospace;
	color: #078f8f;
	font-weight: bold;
}

.date-field {
	font-family: Courier New, Courier, monospace;
	font-weight: bold;
}

input.time-field,
input[type=text].time-field {
	width: 3.5em;
	color: #078f8f;
	font-size: 16px;
	margin: 4px;
}

input.date-field,
input[type=text].date-field {
	width: 6.5em;
	color: #078f8f;
	font-size: 16px;
	margin: 4px;
}


/* Scrollbars */

.tableDiv::-webkit-scrollbar {
	width: 12px;
}

.tableDiv::-webkit-scrollbar-track {
	width: 10px;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.tableDiv::-webkit-scrollbar-thumb {
	width: 10px;
	margin: 3px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: inset 0 0 5px rgba(0,30,60,0.4);
	-webkit-box-shadow: inset 0 0 5px rgba(0,30,60,0.4);
	background: rgba(200,240,255,0.5);
}

/* Message Controls */


.dialog,
.messageBody,
.floating {
	display: inline-block;
	position: absolute;
	z-index: 9999;
	background-color: #F5F5F7;
	background-attachment: scroll;
	background-clip: border-box;
	background-origin: padding-box;
	background-position-x: 0%;
	background-position-y: 0%;
}

.dialog,
.messageBody,
.floating,
.shadow {
	box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.moving {
	z-index: 70;
}

/* Dialog */

.dialog {
	left: 50%;
	top: 50%;
	margin-left: -190px;
	/*margin-top: -100px;*/
	font-size: 12px;
	z-index: 65;
	height: auto;
	min-width: 300px;
	max-width: 600px;
	max-height: 600px;
	overflow: auto;
	/*padding: .2em;*/
	cursor: default;
}

.dialog-inner,
.messageInner {
	display: inline-block;
	width: 100%;
	background-size: 30%;
	background-position: right bottom;
	background-repeat: no-repeat;
}

.dialog-titlebar,
.messageTitle {
	position: relative;
	padding: 4px;
	padding: 6px;
	border: 0px;
}

.dialog-titlebar img.icon,
.messageTitle img.icon {
	position: absolute;
	left: 2px;
	top: 1px;
}

.dialog-titlebar {
	position: relative;
	text-align: center;
	margin: -2px -2px 2px -2px;
	padding: .8em .3em .8em 1em;
	font-weight: bold;
	color: white;
	cursor: move;
	border: 0 solid #AAA;
	background-color: #7EB3D8;
}

.toast.error .toast-titlebar,
.dialog.error .dialog-titlebar {
	background-color: rgb(200, 50, 50);
}

.toast.warning .toast-titlebar,
.dialog.warning .dialog-titlebar {
	background-color: rgb(180, 140, 40);
}

.toast.success .toast-titlebar,
.dialog.success .dialog-titlebar {
	background-color: rgb(30, 150, 65);
}

.dialog-close {
	position: absolute;
	right: 8px;
	top: 16px;
	margin: -8px 2px 0 0;
	padding: 0;
	font-size: 18px;
	font-weight: normal;
	height: 25px;
	width: 27px;
	color: #FFF;
	text-decoration: none;
	background: none;
	border-radius: 4px;
	font-family: verdana;
	vertical-align: top;
}

.dialog-message {
	height: auto;
	width: auto;
	padding: 10px;
	white-space: pre-line;
	padding-top: 5px;
	font-family: Arial;
	font-weight: normal;
	font-size: 100%;
	font-style: normal;
	color: #0D0D0D;
}

.dialog-details {
	padding: 10px 0px;
	min-height: 30px;
	font-size: 0.9em;
	line-height: 16px;
	border-top: 1px solid #A9A9A9;
}

.dialog-details img {
	height: 1.2em;
	vertical-align: bottom;
	margin: 0px 2px;
}

.dialog-content {
	display: block;
	width: auto;
	min-height: 0px;
	height: auto;
	margin-bottom: -5px;
	position: relative;
	overflow: auto;
	text-align: left;
	border: 0;
	padding: .5em;
	color: #222;
}

/* Popup */

.popup {
	position: absolute;
	position: fixed;
	left: 50%;
	top: 50%;
	height: auto;
	min-width: 600px;
	margin-left: -300px;
	margin-top: -260px;
	background-color: #FFF;
	border: 0 solid #A9A9A9;
	z-index: 60;
	-webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 1px 20px rgba(0,0,0,0.75);
	box-shadow: 0 1px 20px rgba(0,0,0,0.75);
}

/*
.popup-titlebar {
	position: relative;
	text-align: center;
	margin: 0px;
	border: 0 solid #AAA;
	color: white;
	font-weight: bold;
	cursor: move;
	border-bottom: 1px solid #68809D;
	position: relative;
	clear: left;
	overflow: hidden;
	padding: 0px 2px;
	min-height: 56px;
	text-align: left;
}
*/

.popup-titlebar img {
	height: 20px;
	margin: 2px;
	vertical-align: bottom;
	margin-right: 4px;
	float: left;
}

.popup-controls {
	padding: 14px 15px 15px;
	margin: 0;
	text-align: right;
	background-color: #F5F5F5;
	border-top: 1px solid #DDD;
	border-width: 1px 0 0 0;
}

.popup.default .popup-titlebar {
	background-color: #6EAFDC;
	background-image: linear-gradient(#6EAFDC, #486A8D);
	background-image: linear-gradient(#6EAFDC 10%, #60A0CA, #486A8D);
}

.popup.error .popup-titlebar {
	background-color: rgb(200, 50, 50);
	background-image: linear-gradient(rgb(250, 100, 80),rgb(200, 50, 30));
}

.popup.warning .popup-titlebar {
	background-color: rgb(180, 140, 40);
	background-image: linear-gradient(rgb(230, 190, 90),rgb(180, 140, 40));
}

.popup.success .popup-titlebar {
	background-color: rgb(30, 150, 65);
	background-image: linear-gradient(rgb(80, 200, 115),rgb(30, 150, 65));
}


.hint {
	position: absolute;
	display: none;
	background: white;
	color: black;
	white-space: pre-wrap;
	box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 4px 18px -2px rgba(0, 0, 0, 0.5);
	xxx-webkit-user-drag: element;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: left;
}

.hint button {
	margin: 5px;
	width: 92px;
}

.hint i {
	font-size: 1em;
}

.messageFade {
	width: 100%;
	z-index: 9999;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#E2E2E2, endColorStr=#C5D0F0, gradientType='0');
	background-image: -webkit-gradient(linear, top, bottom, from(#E2E2E2), to(#C5D0F0)) !important;
	background-image: -webkit-linear-gradient(top, #E2E2E2, #C5D0F0) !important;
	background-image: -moz-linear-gradient(top, #E2E2E2, #C5D0F0) !important;
	background-image: -ms-linear-gradient(top, #E2E2E2, #C5D0F0) !important;
	background-image: -o-linear-gradient(top, #E2E2E2, #C5D0F0) !important;
	background-color: none;
}

.messageMask {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	/* z-index: 9999;*/
	min-width: 100%;
	min-height: 100%;
	background: #FFFFFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.moving .MessageInner,
.moving .MessageTitle,
.moving .GoButton {
	cursor: move;
	color: #D0C0C0;
}

.popupTitle {
	background: #9C9D9F;
	background: -o-linear-gradient(top,#C0C0C0,#909399);
	background: -ms-linear-gradient(top,#C0C0C0,#909399);
	background: -moz-linear-gradient(top,#C0C0C0,#909399);
	background: -webkit-linear-gradient(top,#C0C0C0,#909399);
	background: -webkit-gradient(linear, top, bottom, from(#C0C0C0), to(#909399));
	border-bottom: 2px groove silver;
	margin: 0px;
}

.popup-title {
	margin: 2px;
	font-family: Arial;
	font-size: 110%;
	font-style: normal;
	display: inline-block;
	text-align:center;
	margin-left: 5px;
}

.popup-titlebar {
	font-weight: bold;
	text-align: center;
	background-color: navy;
	vertical-align: middle;
	color: white;
	margin: 2px;
	min-height: 22px;
	font-size: 15px;
	text-align: left;
}

.popup-content {
	padding: 5px
}

.popup-close, 
.dialog-close {
	position: absolute;
	right: 2px;
	color: #FFF;
	text-decoration: none;
}

.iframe-scroll {
	overflow: scroll !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Date & Time Picker */

var.picker {
	white-space: nowrap;
	position: relative;
	display: inline-block;
}

button.picker,
img.picker {
	position: absolute;
	height: 1.5em;
	width: auto;
	top: 0px;
	bottom: 0px;
	padding: 0px;
	right: 0px;
	margin: 1px;
	cursor: pointer;
}

var.picker .picker {
	top: 50%;
	margin-top: -0.75em;
	right: 6px;
}

input.picker {
	margin: 0px;
	width: 6em;
	cursor: pointer;
}

/* Datepicker */

#datepicker, #timepicker {
	white-space: nowrap;
	text-align: center;
	margin: 0 auto;
	padding: 5px;
	border-radius: 10px;
}

#datepicker {
	*width: 28em;
	max-width: 30em;
}

#datepicker table {
	height: 240px;
	border-spacing: 6px;
}

#datepicker th {
	width: 4em;
	color: #207CB5;
}

#datepicker td {
	margin: 6px;
	padding: 6px;
	text-align: right;
	background: #6EAFDC;
	border: 1px silver outset;
	cursor: pointer;
}

#datepicker td:hover {
	font-weight: bold;
	background: rgb(100, 200, 255);
	text-decoration: underline;
}

#datepicker td.highlighted {
	background: #55CCDD;
}

#datepicker td.chosen {
	color: Navy;
	font-weight: bold;
	border: 1px inset navy;
	background: #9FFFFF;
}

#datepicker td.empty {
	opacity: 0.6;
	filter: alpha(opacity=60);
	color: black;
}

#datepicker label,
#datepicker select {
	display: inline-block;
	max-width: 12em;
	margin: 0.2em;
	font-size: 1.2em;
	font-weight: bold;
	vertical-align: bottom;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#datepicker label {
	cursor: pointer;
}

#datepicker label:hover {
	text-decoration: underline;
}

/* Timepicker */

#timepicker div {
	white-space: nowrap;
	clear: both;
}

#timepicker_time {
	border: 3px outset silver;
	border-color: #EEE Silver Silver Silver;
	margin: 0.5em 1em;
	clear: both;
}

#timepicker button.time {
	width: 2em;
	height: 1em;
	font-size: 2.5em;
	line-height: 0.8em;
	margin: 0.2em;
}

#timepicker button.up {
	background-image: url('../Images/arrow-up.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#timepicker button.down {
	background-image: url('../Images/arrow-down.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#timepicker span {
	width: 1em;
	font-size: 2.5em;
	margin: 2px;
	text-align: center;
}

#timepicker input {
	width: 2em;
	font-size: 2.5em;
	margin: 2px;
	text-align: center;
}

/* Canender */

#calendar {
	padding: 10px;
	margin: auto; /* 10px auto;*/
	text-align: center;
	max-width: 1000px;
}

#calendar h2,
#calendar h3 {
	text-align: center;
	margin: 10px;
}

#calendar table {
	margin: auto;
	width: 100%;
	font-size: 21px;
	border-collapse: separate;
	border-spacing: 0px;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
}

#calendar table th,
#calendar table td {
	width: 14%;
	padding: 10px;
}

#calendar table td {
	position: relative;
	border: 2px solid rgba(0, 0, 0, 0);
	cursor: pointer;
}


#calendar table th {
	position: relative;
	padding: 5px;
	border-bottom: 1px solid silver;
	color: #222;
}

#calendar table td:hover {
	background: rgba(110, 175, 220, 0.1);
}

#calendar table td.empty {
	color: #888;
}

#calendar table td.chosen {
	border: 1px solid #07D;
	border-radius: 5px;
	xxbox-shadow: 0px 0px 2px 2px rgba(0, 100, 150, 0.3);
}

#calendar table td.highlighted {
	color: darkmagenta;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#calendar table td .bullet {
	position: absolute;
	right: 2px;
	top: 2px;
	z-index: 1;
}

button.previous,
#calendar #btnCalendarPrevious {
	float: left;
	background-image: url('../Images/imgBack.gif') !important;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 90% 90%;
	width: 30px;
	height: 28px;
	margin-right: 1em;
	padding: 4px;
}

button.next,
#calendar #btnCalendarNext {
	float: right;
	background-image: url('../Images/imgForward.gif') !important;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 90% 90%;
	width: 30px;
	height: 28px;
	margin-left: 1em;
	padding: 4px;
}

#calendar #btnCalendarToday {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	height: 28px;
	padding: 4px;
}

/* Full page calendar */

#calendar.full table {
	font-size: 16px;
	border-collapse: collapse;
	border: 1px solid silver;
}

#calendar.full {
	max-width: none;
}


#calendar.full h2 {
	font-size: 28px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	margin-left: 30px;
	float: left;
	width: auto;
}

#calendar.full table td {
	border: 1px solid silver;
	font-size: 90%;
	text-align: left;
	padding: 5px;
	background: #F7F7F7;
	vertical-align: top;
	max-height: 200px;
}

#calendar.full table td:hover {
	background: rgba(110, 175, 220, 0.1);
}

#calendar.full table td.chosen {
	border: 1px solid #07D;
	border-color: rgb(0, 100, 150);
	border-radius: 0px;
	background-color: rgba(0, 100, 150, 0.15);
}

#calendar.full table td.empty {
	opacity: 0.7;
}

/* Calendar single day options */

#calendar .calendar-day {
	min-height: 100px;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 130px;
}

#calendar .calendar-day label {
	width: 100%;
	display: inline-block;
	text-align: left;
	font-size: 16px;
}

#calendar .highlighted label {
	font-weight: bold;
	color: darkmagenta;
}

#calendar .calendar-day a {
	display: block;
	white-space: nowrap;
	text-decoration: none;
}

#calendar .calendar-day .name {
	white-space: normal;
	white-space: pre-wrap;
	margin: 4px;
}

#calendar .calendar-day a:hover {
	text-decoration: underline;
}

#calendar .calendar-day::-webkit-scrollbar {
	width: 10px;
	xxxborder-radius: 6px;
	border: 1px solid #CCC;
}

#calendar .calendar-day::-webkit-scrollbar-track {
	width: 8px;
	margin-right: 2px;
	xxxborder-radius: 6px;
	border: 1px solid #CCC;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

#calendar .calendar-day::-webkit-scrollbar-thumb {
	width: 8px;
	margin-right: 2px;
	xxxborder-radius: 6px;
	border-radius: 1px;
	border: 1px outset silver;
	box-shadow: inset 0 0 5px rgba(0,30,60,0.4);
}

/* Calendar Week-view adjustment */

#calendar.full table td.weekview {
	max-height: none;
}

#calendar.full table td.weekview .calendar-day {
	max-height: none;
	min-height: 600px;
	transition: min-height 1s, height 1s;
}

#calendar table td button.options {
	position: absolute;
	top: 1px;
	right: 1px;
}

#calendar .calendar-extra {
	display: none;
	position: absolute;
	bottom: 2px;
	width: 96%;
	text-align: center;
	font-size: smaller;
	opacity: 0.8;
}

#calendar td:hover .calendar-extra {
	display: inline-block;
}

.traffic-light-grey,
.list-view li.grey .traffic-light {
	color: darkgray;
}

.traffic-light-green,
.list-view li.green .traffic-light {
	color: darkgreen;
}

.traffic-light-amber,
.list-view li.amber .traffic-light {
	color: darkgoldenrod;
}

.traffic-light-red,
.list-view li.red .traffic-light {
	color: darkred;
}

table td.traffic-light-grey {
	background: #DDDDDD !important;
}

table td.traffic-light-green {
	background: #DDFFDD !important;
}

td.traffic-light-amber {
	background: #FFF0DD !important;
}

td.traffic-light-red {
	background: #FFDDDD !important;
}

table td.traffic-light-grey .calendar-extra {
}

table td.traffic-light-green .calendar-extra {
}

table td.traffic-light-amber .calendar-extra {
	color: darkgoldenrod;
}

table td.traffic-light-red .calendar-extra {
	color: darkred;
}

/* List box */

.list-items li.dragover,
.list-box li.dragover {
	border-top: 2px dotted black;
}

.list-items,
.list-box {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	border: 1px solid #CCC;
}

.list-box {
	margin: 4px 1px;
}

.list-box.scroll {
	max-height: 360px;
	overflow-y: auto;
}

.list-items .group,
.list-box .group {
	padding: 5px;
	border: 1px solid #BBB;
	border-width: 0px 0px 1px 0px;
	color: #222;
	text-align: center;
	text-overflow: ellipsis;
	font-weight: bold;
	cursor: default;
}

.list-items li,
.list-box li {
	position: relative;
	border: 1px solid #CCC;
	border-width: 0px 0px 1px 0px;
	cursor: pointer;
	white-space: nowrap;
	list-style: none;
	margin: 0px;
	padding: 8px 12px;
	overflow: hidden;
	text-align: left;
	color: #222;
	background-color: #FFF;
}

.list-box li code {
	float: right;
	margin-right: 20px;
	opacity: 0.75;
	font-size: 0.9em;
	vertical-align: middle;
	margin-top: 1px;
}

.list-items li:hover,
.list-box li:hover {
	color: #2F3E46;
	border-color: #BBB;
	background-color: #F8F8FA;
}

.list-items li.selected,
.list-box li.selected {
	color: #FFF;
	border-color: #2373A5;
	background-color: #5393C5;
}

.list-items li.selected.disabled,
.list-box li.selected.disabled {
	color: #EEE !important;
	border-color: #84A8BE;
	background-color: #9BB9D0 !important;
}

.list-items li.empty,
.list-view li.empty,
.list-box li.empty {
	font-style: italic;
	background: rgb(240,240,240);
}

.list-items li img,
.list-box li img {
	width: auto;
	height: 2em;
	vertical-align: middle;
	margin-right: 10px;
}

.list-items.large li,
.list-box.large li {
	padding: 8px 11px;
}

.list-items li img.checkbox,
.list-box li img.checkbox {
	height: 1.2em;
	width: 1.2em;
}

.list-items input[type=checkbox],
.list-box input[type=checkbox] {
	float: right;
	height: 20px !important;
	width: 20px !important;
	min-height: 20px;
	background: none;
	background: #F0F0F0;
	min-width: 0px;
	margin: 2px;
	border-radius: 4px;
}

/* list-box */

.list-box.selection li:after {
	background-color: darkred;
	background-position: -72px 50%;
}

.list-box.multiselect li.chosen:after {
	content: "";
	background-color: darkred;
	background-position: -72px;
}

.list-box.multiselect li.selected:after {
	content: "";
	background-color: #1e8ca2;
	background-position: -252px;
}

.list-box.results li {
	cursor: auto;
}

.list-box li.empty:after {
	content: none;
}

.list-box li span.icon {
	margin: 0px;
	margin-right: 4px;
	vertical-align: middle;
	margin-bottom: 4px;
}

.list-box li span.command {
	float: right;
	margin: 0px;
	margin-top: 2px;
	cursor: pointer;
}

.list-box li span.command:hover {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

.list-box li img {
	vertical-align: middle;
	margin: 0px;
	margin-right: 0.6em;
}

.ReportMultiSelect {
	height: 150px;
	width: 250px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	border: solid;
	border-width: 1px;
	border-color: #bbbbbb;
	text-align: left;
}

.ReportMultiSelect table tr td {
	padding: 0px 6px;
	margin: 0px;
	height: auto;
	line-height: 10px;
	background-color: white;
	width: 250px;
}

.ReportMultiSelect table tr td input {
	min-height: 0px;
	vertical-align: middle;
}

.ReportMultiSelect table tr td label {
	min-height: 0px;
	vertical-align: middle;
}
/* ListSelection */

ul.list {
	display: inline-block;
	margin: 1px 0px;
	padding: 0px;
	background: white;
	overflow: scroll;
	overflow-x: hidden;
	border: 1px inset silver;
}

ul.list li.option {
	position: static;
	*height: 1.7em;
	line-height: 1.7em;
	font-size: 1em;
	vertical-align: middle;
	margin: auto;
	padding: 2px;
	padding-left: 2%;
	border-bottom: 1px solid #E0E0E0;
	color: #444444;
	cursor: pointer;
	*background-color: white;
}

ul.list li.selected {
	color: #002060;
	background-color: #C0F0F0;
	background-color: #C0F0F0 !important;
	background-color: rgba(100, 255, 255, 0.7) !important;
}

ul.list li.disabled {
	color: #AAAAAA;
	text-shadow: 1px 1px rgba(255,255,255, 0.8) !important;
}

ul.list var {
	vertical-align: top;
	font-size: 0.5em;
	alpha: 0.5;
	opacity: 0.5;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

ul.list::-webkit-scrollbar {
	width: 12px;
}

ul.list::-webkit-scrollbar-track {
	box-shadow: inset 0 0 4px rgba(0,100,100,0.2);
	-webkit-box-shadow: inset 0 0 6px rgba(0,100,100,0.2);
}

ul.list::-webkit-scrollbar-thumb {
	background: #EEFFFF;
}

.dropdown {
	line-height: 1.6em;
	margin: auto;
	padding: 1px;
	vertical-align: middle;
	padding-left: 2%;
	color: black;
}

.dropdown:hover,
ul.list li.option:hover {
	color: #88CCDD;
}

.dropdownbox ul {
	position: relative;
	display: inline;
	height: 0px;
	width: 0px;
	overflow: visible;
	vertical-align: top;
	z-index: 200;
	transition: max-height ease-out 0.3s;
	-webkit-transition: max-height ease-out 0.3s;
}

.dropdown b {
	font-size: 10px;
}


ul.list li img {
	clear: both;
	height: 1.5em;
	width: auto;
	margin: 1px;
}


.ribbon-old {
	background-color: rgb(170, 0, 0);
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14902));
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.498039);
	display: block;
	filter: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	height: 26px;
	line-height: 20px;
	padding: 2px 0px;
	position: absolute;
	right: -55px;
	top: 80px;
	transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0);
	width: 300px;
	z-index: 21;
	color: white;
	text-align: center;
	font-weight: bold;
	line-height: 25px;
	*top: auto;
}

.ribbon-old span {
	display: inline-block;
	width: 100%;
	border: 1px dashed white;
	margin: 2px 0px;
	line-height: 20px;
}


.ribbon {
	overflow: hidden;
	background-color: rgb(170, 0, 0);
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14902));
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.498039);
	display: block;
	filter: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 11px;
	height: 21px;
	line-height: 20px;
	padding: 2px 0px;
	position: absolute;
	left: -85px;
	top: 100px;
	transform: matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 0);
	width: 296px;
	z-index: 21;
	color: white;
	text-align: center;
	font-weight: bold;
	line-height: 13px;
	vertical-align: middle;
}

.ribbon span {
	display: inline-block;
	width: 110%;
	border: 1px dashed white;
	margin: 2px 0px;
	line-height: 15px;
}

#content {
	position: relative;
	float: left;
	width: 100%;
	height: 90%;
}

#content_main {
	float: none;
	text-align: left;
	font-size: 20px;
	margin: 6%;
}

#content_right {
	float: right;
	padding: 5% 2%;
	margin: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 25%;
}


.legal {
	font-size: 15px;
}

.legal dt {
	display: inline-block;
	float: left;
	clear: left;
	width: 40px;
}

.legal dd {
	display: block;
	margin-bottom: 10px;
}

.legal h2 {
	margin: 5px;
	font-size: 19px;
	text-align: left;
}


/* ListSelection */
ul.list {
	display: inline-block;
	margin: 1px 0px;
	padding: 0px;
	background: white;
	overflow: scroll;
	overflow-x: hidden;
	border: 1px inset silver;
}

ul.list li.option {
	position: static;
	*height: 1.7em;
	line-height: 1.7em;
	font-size: 1em;
	vertical-align: middle;
	margin: auto;
	padding: 2px;
	padding-left: 2%;
	border-bottom: 1px solid #E0E0E0;
	color: #444444;
	cursor: pointer;
	*background-color: white;
}

ul.list li.selected {
	color: #002060;
	background-color: #C0F0F0;
	background-color: #C0F0F0 !important;
	background-color: rgba(100, 255, 255, 0.7) !important;
}

ul.list li.disabled {
	color: #AAAAAA;
	text-shadow: 1px 1px rgba(255,255,255, 0.8) !important;
}

ul.list var {
	vertical-align: top;
	font-size: 0.5em;
	alpha: 0.5;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

ul.list::-webkit-scrollbar {
	width: 12px;
}

ul.list::-webkit-scrollbar-track {
	box-shadow: inset 0 0 4px rgba(0,100,100,0.2);
	-webkit-box-shadow: inset 0 0 6px rgba(0,100,100,0.2);
}

ul.list::-webkit-scrollbar-thumb {
	background: #EEFFFF;
}

.dropdown {
	line-height: 1.6em;
	margin: auto;
	padding: 1px;
	vertical-align: middle;
	padding-left: 2%;
	color: black;
}

.dropdown:hover,
ul.list li.option:hover {
	color: #88CCDD;
}

.dropdownbox ul {
	position: relative;
	display: inline;
	height: 0px;
	width: 0px;
	overflow: visible;
	vertical-align: top;
	z-index: 200;
	transition: max-height ease-out 0.6s;
	-webkit-transition: max-height ease-out 0.6s;
}

ul.list li img {
	clear: both;
	height: 1.5em;
	width: auto;
	margin: 1px;
}


/* Medium to large Screens */
@media (min-width:800px) {

	.landing .login {
		float: right;
		position: absolute;
		margin: 8%;
		left: auto;
		right: 6%;
		top: 6%;
		z-index: 29;
	}

	.landing .login-panel {
		float: right;
		position: absolute;
		padding: 3%;
		margin: 6% 8%;
		left: auto;
		right: 0px;
	}

	#content_main {
		display: inline-block;
		padding: 0%;
		margin: 6%;
		margin-right: 0%;
		width: 60%;
		width: 40%;
		padding-bottom: 0px;
		_padding-bottom: 30px;
	}
}

@media screen and (min-device-height:600px) and (min-device-width:600px) {

	.foot {
		position: absolute;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1) and (min-device-width:480px) and (max-device-width:1024px) {

	/* Make the font size bigger in general on the iPad */

	body {
		font-size: 80%;
	}

	td {
		font-size: 100%;
		padding: 3px;
		min-height: 20px;
	}

	/* Set the buttons and input fields to be larger on the iPad so that they can be pressed easily */

	select,
	textarea,
	input[type=text],
	input[type=number],
	input[type=search],
	input[type=password] {
		font-size: 1.2em;
	}

	input[type=checkbox] {
		font-size: 1.1em;
		padding: 3px;
		margin: 2px;
	}

	#frmPatientTVNAssessment {
		font-size: 1.1em;
	}

	table#Ulcers {
		font-size: 1.6em;
	}

	table.results td {
		padding: 3px;
		font-size: 1.1em;
	}

	table.results caption {
		font-size: 1em;
	}

	/* Make the Selection Tables (e.g Additional details) easier to select */

	.Selection td {
		padding: 4px;
	}

	#tblMenu TD {
		padding: 4px;
	}
}


/* larger screens */
@media screen and (min-width:600px) {

	.foot .statement {
		margin: 10px 12%;
	}

	.foot img.logo {
		position: absolute;
		bottom: 20px;
		left: 20px;
	}
}

/* Small devices such as phones */
@media (max-width:560px) {

	.landing .login, .login-panel {
		margin: 10px auto;
	}

	.landing .login-panel {
		zoom: 90%;
	}

	.landing form {
		margin-top: 75px;
	}

	.LoginTable {
		width: auto;
	}

	.ribbon {
		position: absolute;
		right: 0px;
		left: 0px;
		transform: none;
		width: 100%;
		padding: 2px 0px;
		z-index: 0;
		zoom: 0.7;
		top: 80px;
	}

	.header {
		xxxheight: 30px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	.menuIcons {
		zoom: 85%;
		margin: 0px;
	}

	.menuPadding {
		width: 2px;
		padding: 0px;
	}
}

/* Small devices such as phones - landscape */
@media (max-height:560px) and (orientation:landscape) {

	.landing form {
		zoom: 0.95;
	}

	.landing .login, .login-panel {
		margin: 10px auto;
	}

	.landing .login-panel {
		zoom: 90%;
		margin-top: 0px;
	}

	.login-panel h2 {
		font-size: 19px;
		margin-bottom: 0px;
	}

	.landing .login .user-message {
		display: inline;
	}

	.menuPadding {
		width: 0px;
	}
}