td.details-control {
	text-align: center;
	cursor: pointer;
}
	td.details-control > input {
		content: url('../Images/details_open.png');
		height: 20px;
		width: 20px;
		vertical-align: middle;
	}

tr.shown td.details-control {
	text-align: center;
}
	tr.shown td.details-control > input {
		content: url('../Images/details_close.png');
		height: 20px;
		width: 20px;
		vertical-align: middle;
	}

#rptInstructorHoursSummary fieldset {
	width: 75%;
	min-width: 700px;
}

.disabledLabel {
	pointer-events: none;
}

.disabledLook {
	border: 1px solid #999;
	color: #333;
	opacity: 0.5;
	pointer-events: none;
}

.disabledLook option {
	color: #000;
	opacity: 1;
}
	
#ReportSelection li {
	margin-bottom: 10px;
}

.dt-print-view h1 {
	text-align: center;
}

.dt-print-view table tfoot th {
	text-align: left;
	padding: 0 0 0 0;
}

table.dataTable tfoot td {
	font-weight: bold;
}

table.dataTable thead th, table.dataTable tbody td, table.dataTable tfoot td {
	height: 15px;
	padding: 3px 2px;
}

.dataTables_wrapper .dataTables_filter {
	width: 100%;
	float: none;
	text-align: center;
}

/* Move buttons to right (and up) if length or search is also present */
.dataTables_wrapper .dataTables_filter ~ .dt-buttons {
	position: relative;
	float: right;
	margin-top: -2em;
}
.dataTables_wrapper .dataTables_length ~ .dt-buttons {
	position: relative;
	float: right;
	margin-top: -2em;
}
/* For Compliance checks due, move the entire set of buttons to the right.
   Needs to be done separately because length and filter not present
   Move buttons to top right over table */
#MainContent_gvComplianceChecksDue_wrapper .dt-buttons {
	position: relative;
	float: right;
	margin-top: -2.5em;
}

/* this is for buttons in a datatable cell to make them smaller */
td > a.dt-button {
	padding: 1px 2px 1px 2px;
	vertical-align: middle;
}

td > input {
	margin-right: 5px;
}

.CbxList {
	padding: 1px 2px 1px 2px;
	margin-bottom: 3px;
}
/* Visuals */
.phone {
	max-width: 100px;
}

.nowrap {
	white-space: nowrap;
}

.centered {
	margin-left: auto;
	margin-right: auto;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.top {
	vertical-align: top;
}

.bottom {
	vertical-align: bottom;
}

.text_centered {
	text-align: center;
}

.hidden {
	display: none;
}

.show {
	display: block;
}

.bold {
	font-weight: 600;
}

.bolder {
	font-weight: 800;
}

.required {
	color: red;
}

.error {
	color: red;
}

.border {
	border-width: thin;
	border-color: #d0d0d0;
	border-style: solid;
}

.bordertop {
	border-top: thin solid gray;
}

.clear {
	clear: both;
}

.comment {
	color: gray;
	font-style: italic;
	font-size: .9em;
}

.InfoMsg {
	margin-bottom: 1em;
	display: block;
	color: red;
}

.Highlight {
	background-image: url(/images/Highlight.png);
	background-repeat: repeat;
}

/* Textbox and Inputs Focus */
input:focus, textarea:focus {
	/*border: 1px solid #7ac0da;*/
	background-color: lemonchiffon;
}
/*iframe:focus {
  background-color: lemonchiffon;
}*/

/* Buttons */
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
	background-color: #d3dce0;
	border: 2px outset #d7b9c9;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	padding: 2px 5px 2px 5px;
}

	input[type="submit"]:focus,
	input[type="button"]:focus,
	input[type="reset"]:focus,
	button:focus {
		background-color: lemonchiffon;
	}

	input[type="submit"]:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	button:hover {
		background-color: lemonchiffon;
	}

td input[type="submit"],
td input[type="button"],
td input[type="reset"],
td button {
	font-size: 1em;
	padding: 4px;
	margin-right: 4px;
}

input[type="date"] {
	/* settings for using jquery date picker */
	/* firefox date plus additional controls fit in 100, but chrome requires 125 */
	width: 125px;
	min-width: 125px;
	font-family: Arial, 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
}

/* Specialty Masterpage */
.MasterHeader {
	background-color: #3959A8;
	color: white;
	padding: .5em 1%;
	font-size: 2em;
	display: flex;
	justify-content: space-between;
}

.MasterGreeting {
	background-color: lemonchiffon;
	padding: .4em 1%;
	/*font-size: .8em;*/
	font-weight: 500;
}

.PageHeader {
	display: flex;
	justify-content: space-between;
}

.PageHeaderItem {
	flex: 0 0 auto;
}

.GridHeaderSection {
	display: grid;
	align-items: end;
	margin: 1.5em 0 .5em 0;
	padding: 0;
}

.GridHeaderLeftItem {
	justify-self: start;
	grid-row: 1;
	grid-column: 1;
}

.GridHeaderMiddleItem {
	justify-self: center;
	grid-row: 1;
	grid-column: 2 / span 2;
}

.GridHeaderRightItem {
	justify-self: end;
	grid-row: 1;
	grid-column: 4;
}

.GridHeaderMiddleItemLeft {
	justify-self: start;
	grid-row: 1;
	grid-column: 2 / span 2;
}

.ExpiresAlert {
	border: 2px solid orange;
}

.ExpiresWarning {
	border: 2px solid red;
}

.MasterFooter {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: .5em .5em .5em 1em;
	background-color: #3959A8;
	color: white;
	font-size: .8em;
	display: flex;
	justify-content: space-between;
}

.SaveRoomForFooter {
	margin: 0 0 24px 0;
	padding-top: 1em;
}

/* Specialty Content */
.Content {
	width: 90%;
	min-height: 625px;
	margin-top: 1em;
}

/* Specialty Dashboards */
.DashboardHeading {
	padding-top: .5em;
	padding-bottom: .5em;
	font-size: 1.3em;
	font-weight: 600;
}

.DashboardSubHeading {
	padding-top: .5em;
	padding-bottom: .5em;
	font-size: 1.1em;
	font-weight: 600;
	display: block;
}

/* Dashboard Links */
.DashboardLinksBackground {
	background-color: #E0E0E0;
}

.DashboardActionBackground {
	background-color: #F0F0F0;
}

a.dash {
	text-decoration: none;
	display: block;
	padding: 2px 6px;
	font-size: .9em;
}

	a.dash:hover {
		text-decoration: underline;
	}
/* permreadonly is used in cases where js code turns readonly on/off (work order) and permreadonly will always remain */
.readonly, .permreadonly {
	background-color: #E3E3E3 !important; /* important here prevents focus from changing the color*/
	color: black;
	border: 1px solid #ABADB3;
}
/* Specialty Grids */
.Grid {
	font-size: .9em;
	background-color: white;
	border-color: darkgrey;
	padding: 5px;
	margin: .5em 0 1.5em 0;
}

.DataEntryGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px,max-content));
	grid-column-gap: 25px;
	grid-row-gap: 15px;
	margin: .5em 0 1.5em 0;
}
	/* Set full width for all input items, but not date or phone. They are defined elsewhere and we don't want to override that. */
	.DataEntryGrid [class*="-input"]:not([type="date"]):not(.phone) {
		width: 100%;
	}
	/* Each cell in the grid will have a label and entry field.
	   Set entry field to block so it will display under the label	*/
	.DataEntryGrid label + input {
		display: block;
	}

	.DataEntryGrid label + textarea {
		display: block;
	}

	.DataEntryGrid label + select {
		display: block;
	}
	.DataEntryGrid select {
		padding: 2px 2px 2px 2px;
		width: 100%;
	}
	.DataEntryGrid div > label:first-child {
		font-weight: bold;
	}

/*Specialty Tabs*/
#tabs ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#tabs li {
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 0 solid gray;
	float: left;
	margin: 0 0.5em 0 0;
	height: 22px;
}

#tabs a {
	text-decoration: none;
	display: block;
	background: #eee;
	padding: 0.24em 1em;
	color: #00c;
	text-align: center;
}

#tabsContent {
	border: 1px solid gray;
	clear: both;
}

#tabs .active a {
	position: relative;
	top: 1px;
	background: white;
	color: black;
	font-weight: bold;
}

#tabs a:hover {
	background: #ddf;
}

/*Specialty Drawings*/
input.draw {
	background-color: #d3dce0;
	border: 2px outset #d7b9c9;
	cursor: pointer;
	font-size: .6em;
	font-weight: 500;
	/*padding: 1px 1px 1px 1px;*/
}

	input.draw:focus {
		background-color: lemonchiffon;
	}

	input.draw:hover {
		background-color: lemonchiffon;
	}

.armsFloatLeft {
	width: 100px;
	text-align: left;
	float: left;
}

.armsFloatRight {
	width: 100px;
	text-align: right;
	float: left;
}

/* Specialty Spellchecker */
.rs_err_hl {
	background-image: url(/SpellCheck/underline.png);
	background-position: bottom;
	background-repeat: repeat-x;
	background-color: #dddd22;
	padding: 4px;
	cursor: pointer;
	/*cursor: hand;*/
}

.rsw_spellable {
	/*background-color: #ddddee;*/
	margin: 0;
	padding: 2px;
	word-wrap: break-word;
	font-size: 1em;
	font-family: Arial, "Segoe UI", Verdana, Helvetica, Sans-Serif;
	color: black;
	border-top: 2px solid #606060;
	border-left: 2px solid #606060;
	border-right: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
}

	.rsw_spellable:focus {
		background-color: lemonchiffon !important;
	}

iframe:focus {
	background-color: lemonchiffon !important;
}
/*	For narrower rows in Compliance check grid but not working. 
	It still uses the "table td" probably because the other columns do. 
	Need to do something for all columns if the row contains an editable
	column.  Something for jquery or javascript.
*/

div#inputcell {
	padding: 1px 2px 1px 2px;
}

/* HTML Tag Styles */
html {
	background-color: #e2e2e2;
	margin: 0;
	padding: 0;
}

body {
	background-color: #fff;
	font-size: .85em;
	font-family: Arial, "Segoe UI", Verdana, Helvetica, Sans-Serif;
	margin: 0;
	padding: 0;
}

table td {
	border-collapse: collapse;
	padding: 4px 2px 4px 2px;
}

table[id*="cbxlAccessories"] td {
	padding: 0 25px 3px 0;
}

hr {
	color: gray;
}

/* Layout Sizes for 12 column layout  */
/* Shown as: column coverage - pixels */
.width_01-60 {
	width: 60px;
}

.width_02-140 {
	width: 140px;
}

.width_03-220 {
	width: 220px;
}

.width_04-300 {
	width: 300px;
}

.width_05-380 {
	width: 380px;
}

.width_06-460 {
	width: 460px;
}

.width_07-540 {
	width: 540px;
}

.width_08-620 {
	width: 620px;
}

.width_09-700 {
	width: 700px;
}

.width_10-780 {
	width: 780px;
}

.width_11-860 {
	width: 860px;
}

.width_12-940 {
	width: 940px;
}

/* Widget sizes */
.fullwidth {
	width: 100%;
}

.xtrasmall {
	width: 3em;
}

.xxsmall {
	width: 2em;
}

.xxxsmall {
	width: 1.5em;
}

.small {
	width: 6em;
}

.mediumsmall {
	width: 8em;
}

.medium {
	width: 10em;
}

.mediumlarge {
	width: 15em;
}

.large {
	width: 20em;
}

.xtralarge {
	width: 30em;
}

.height100 {
	min-height: 100px;
}

.height200 {
	min-height: 200px;
}

.height500 {
	min-height: 500px;
}

/* Spacings */
.margin-top-xtrasmall {
	margin-top: 1em;
}

.margin-top-small {
	margin-top: 2em;
}

.margin-top-medium {
	margin-top: 6em;
}

.margin-right-small {
	margin-right: 2em;
}

.margin-right-xtrasmall {
	margin-right: 1em;
}

.margin-bottom-small {
	margin-bottom: 2em;
}

.margin-bottom-xtrasmall {
	margin-bottom: 1em;
}

.margin-left-small {
	margin-left: 2em;
}

.margin-left-xtrasmall {
	margin-left: 1em;
}

.padding-top-small {
	padding-top: 15px;
}

.padding-top-xtrasmall {
	padding-top: 8px;
}

.padding-top-medium {
	padding-top: 30px;
}

.padding-bottom-small {
	padding-bottom: 15px;
}

.padding-bottom-xtrasmall {
	padding-bottom: 8px;
}

.padding-left-medium {
	padding-left: 30px;
}

.padding-left-small {
	padding-left: 15px;
}

.padding-left-xtrasmall {
	padding-left: 8px;
}

.padding-right-small {
	padding-right: 15px;
}

.padding-right-xtrasmall {
	padding-right: 8px;
}

.padding-none {
	border-collapse: collapse;
	padding: 0;
}

.message {
	height: 30em;
	width: 80em;
}

.underline {
	border-bottom: 1px solid black;
}

.scrollable {
	height: 120px;
	overflow-y: auto;
}
/* Loading gif */
@keyframes ldio-oid9q71kf0p {
	0%

{
	opacity: 1
}

100% {
	opacity: 0
}

}

.ldio-oid9q71kf0p div {
	left: 94px;
	top: 28px;
	position: absolute;
	animation: ldio-oid9q71kf0p linear 1s infinite;
	background: #abbd81;
	width: 12px;
	height: 24px;
	border-radius: 6px / 12px;
	transform-origin: 6px 72px;
}

	.ldio-oid9q71kf0p div:nth-child(1) {
		transform: rotate(0deg);
		animation-delay: -0.8888888888888888s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(2) {
		transform: rotate(40deg);
		animation-delay: -0.7777777777777778s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(3) {
		transform: rotate(80deg);
		animation-delay: -0.6666666666666666s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(4) {
		transform: rotate(120deg);
		animation-delay: -0.5555555555555556s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(5) {
		transform: rotate(160deg);
		animation-delay: -0.4444444444444444s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(6) {
		transform: rotate(200deg);
		animation-delay: -0.3333333333333333s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(7) {
		transform: rotate(240deg);
		animation-delay: -0.2222222222222222s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(8) {
		transform: rotate(280deg);
		animation-delay: -0.1111111111111111s;
		background: #abbd81;
	}

	.ldio-oid9q71kf0p div:nth-child(9) {
		transform: rotate(320deg);
		animation-delay: 0s;
		background: #abbd81;
	}
.loadingio-spinner-3zyzqhjktj.hidden{
	display: none;
}
.loadingio-spinner-3zyzqhjktj {
	width: 100%;
	height: 100%;
	display: inline-block;
	overflow: hidden;
	background: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.ldio-oid9q71kf0p {
	width: 200px;
	height: 200px;
	position: relative;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
}

	.ldio-oid9q71kf0p div {
		box-sizing: content-box;
	}

overlay {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.8);
	opacity: 1;
	transition: all 0.5s;
}

.modal {
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: Black;
	filter: alpha(opacity=60);
	opacity: 0.4;
	-moz-opacity: 0.8;
}

.center {
	z-index: 1000;
	margin: 300px auto;
	padding: 10px;
	width: 200px;
	background-color: White;
	border-radius: 10px;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

	.center img {
		height: 200px;
		width: 200px;
	}

.ui-dialog-titlebar {
	height: 20px; 
}

.ui-dialog-content h1 {
	font-size: 1em;
	text-align: center;
	text-decoration: underline;
}

.ui-dialog-content h2 {
	font-size: 1em;
	text-decoration: underline;
}

.ui-dialog-content h3 {
	font-size: 1em;
	font-weight: 700;
}