/**************************************************
	Column layout using <div>'s
	<div class="col-block-wrapper clearfix clear">
		<div class="col-block col-width-50"> Left </div>
		<div class="col-block col-width-50"> Right </div>
	</div>
 **************************************************/
.col-block-wrapper         { width:100%; }
.col-block                 { float:left; }
.col-width-10              { width:10%; }
.col-width-15              { width:15%; }
.col-width-20              { width:20%; }
.col-width-25              { width:25%; }    /*** 4 blocks per row ***/
.col-width-30              { width:30%; } 
.col-width-33              { width:33.33%; } /*** 3 blocks per row ***/
.col-width-35              { width:35%; }
.col-width-40              { width:40%; }
.col-width-45              { width:45%; }
.col-width-50              { width:50% }     /*** 2 blocks per row ***/
.col-width-55              { width:55% } 
.col-width-60              { width:60% } 
.col-width-65              { width:65% } 
.col-width-66              { width:66.66%; }
.col-width-70              { width:70% }
.col-width-75              { width:75% }
.col-width-80              { width:80% }
.col-width-85              { width:85% }
.col-width-90              { width:90% }
.col-width-95              { width:95% }
.col-width-100             { width:100% }

.text-right        { text-align:right !important; }
.text-center       { text-align:center !important; }

.margin-10 { margin:10px; }
.margin-top-10 { margin-top:10px; }
.margin-bottom-10 { margin-bottom:10px; }
div.border { border:1px solid #ccc; }

/**************************************************
	button - mimics chrome style buttons
 **************************************************/
.btn {
	border:1px solid #aaa;
	color:#000 !important;
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #f9f9f9 0%, #ddd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#ddd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f9f9f9 0%,#ddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ddd',GradientType=0 ); /* IE6-9 */
	border-radius:2px;
	padding:5px;
	margin-right:3px;
}
.btn:hover {
	cursor:pointer; cursor:hand;
	border:1px solid #888;
}
	.btn img {
		height:16px;
		position:relative;
		top:4px;
	}

/* diabled button */
.btn-disabled { opacity:0.5; }
.btn-disabled:hover { cursor:default; }

/* make the button bigger */
.btn-lg {
	font-size:110%;
	padding:10px;
}
	.btn-lg img {
		height:24px;
		top:7px;
	}

/* make the button smaller */
.btn-sm {
	font-size:90%;
	padding:2px;
}
	.btn-sm img {
		height:12px;
		top:2px;
	}



/**************************************************
	table classes
 **************************************************/
.table { border-collapse:collapse; width:100%; background:#fff; }
.table th, .table td { padding:3px; }
/* bordered puts a border on top and bottom of cells */
.table.bordered thead tr:last-child th { border-bottom:2px solid #ddd; }
.table.bordered td { border-top:1px solid #ddd; }
/* similar header background color as jQuery UI */
.table.striped th { 
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 48%, #e6e6e6 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eeeeee 48%,#e6e6e6 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eeeeee 48%,#e6e6e6 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}
/* striped alternates row color */
.table.striped tbody tr:nth-child(odd) { background:#e9e9e9; }
/* boxed puts a border around entire cell, like a calendar */
.table.boxed thead tr:last-child th { border-bottom:2px solid #ddd; }
.table.boxed th, table.boxed td { border:1px solid #ddd; }
/* force padding on cell - datatable padding normally overwrites this and removes all padding... sometimes we need/want it */
.table.padded td { padding:3px !important; }

.table.center-text th, .table.center-text td {  text-align:center; }


/* table heading and toolbar 

	<div class="table-heading">
		Activities
	</div>
	<table cellpadding="0" cellspacing="0" class="table striped boxed">
		...
	</table>
*/
.table-heading { background: #eee; padding: 9px; border: 1px solid #ddd; border-bottom:0; }

/* table toobar (used with table-heading)

	<div class="table-heading">
		Activities
		<div class="table-toolbar color-info">
			<ul>
				<li>Activities Total: $5,675.83</li>
				<li><input type="button" value="Refresh"/></li>
			</ul>
		</div>	
	</div>
	<table cellpadding="0" cellspacing="0" class="table striped boxed">
		...
	</table>
*/
.table-toolbar { float: right; margin:-9px -9px 0 0; background:transparent; border-left:1px solid #ddd; }
.table-toolbar ul { margin:0; padding:0 !important; list-style:none !important; list-style-type:none !important; color:inherit; }
.table-toolbar ul li { float:left; padding:5px; line-height:22px; color:inherit; }
	.table-toolbar.bordered ul { border-left:0; }
	.table-toolbar.bordered ul li { border-left:1px solid #ddd; }
	.table-toolbar img { vertical-align:middle; height:16px; position:relative; top:-1px; }
		.table-toolbar button img { vertical-align:middle; height:12px; position:relative; top:-1px; }



/**************************************************
	jGrowl and alert colors
 **************************************************/

.alert-padded { padding: 20px; }
div.dataTables_wrapper td.alert-bordered,
.alert-bordered { border: 1px solid #000; }

.color-danger,
.alert-danger,
.color-error,
table.dataTable tbody tr.alert-error,
table.dataTable tbody tr.alert-error a,
.ui-state-highlight.alert-error,
.alert-error {
	background: #f2dede !important; border-color: #f0b9c1 !important; color: #b94a48 !important;
}
.color-info, .alert-info { background: #d9edf7 !important; border-color: #bce8f1 !important; color: #3a87ad !important; }
.color-subtle, .alert-subtle { background: #f5f5f5 !important; border-color: #ddd !important; color: #777 !important; }
.color-success, .alert-success { background: #dff0d8 !important; border-color: #d6e9c6 !important; color: #468847 !important; }
table.dataTable tbody tr.alert-warn,
table.dataTable tbody tr.alert-warn a,
.ui-state-highlight.alert-warn,
.alert-warn {
	background: #FFFFDD;
	border-color: #e2d460 !important;
	color: #706500;
}
.alert-table {
	height: 100%;
	padding: 5px;
	border-left: 1px solid #666;
	margin: -2px -5px -2px 0;
}
.alert-bright {
	background-color: yellow;
	border-color: gold;
	color: #000;
}

div.jGrowl div.jGrowl-notification { min-height:14px; } /* min-height=20px in base is too tall for 12px text */
div.jGrowl div.jGrowl-notification .close { float:right !important; position:relative; top:-2px; right:-5px; line-height:18px; font-size:20px !important; color:#000 !important; opacity:0.2; filter:alpha(opacity=20); }
div.jGrowl div.jGrowl-notification .close:hover { opacity:0.4; filter:alpha(opacity=40); }

/* for some reason by default, the header of jGrowl is smaller than the content text. This increases the 
	size of the header to be slightly bigger making more sense for heirarchy */
.jGrowl-notification .jGrowl-header { font-size: 1.2em; }
/* increase the size of the "x" for closing the growl message */
.jGrowl-notification .jGrowl-close { font-size: 1.5em; }


/**************************************************
	input groups
 **************************************************

	<div class="input-group">
		<label for="someInput">Some label here:</label>
		<div class="input-content">
			<input type="text" name="someInput" id="someInput" value=""/>
		</div>
	</div>

	//
	// input-content-text
	//
	<div class="input-group">
		<label>Some label here:</label>
		<div class="input-content input-content-text">
			This is when text only
		</div>
	</div>

	//
	// input-icon-after
	//
	<div class="input-group">
		<label for="birthdate">jCalendar:</label>
		<div class="input-content">
			<input type="text" name="birthdate" id="birthdate" class="jcalendar" readonly="true" maxlength="10"/>
			<span class="input-icon-after">
				<label for="birthdate">
					<img src="/images/icons/calendar_date.png" height="12px"/>
				</label>
			</span>			
		</div>
	</div>		
*/
/* label and input wrapper */
.input-group { margin-bottom:5px; clear:both; }
/* label */
.input-group > label,
.input-label { display:inline-block; width:170px; padding-right:5px; padding-top:3px; text-align:right; font-weight:700; vertical-align:top; margin-bottom:2px; }
.input-label-small { width:75px; }
/* required indicator on label */
.input-group > label.req::before { content: "*"; color:red; }
/* content area where the input is */
.input-content { display:inline-block; min-height:20px; line-height:20px; margin-bottom:2px; }
.input-content input[type=checkbox],
.input-content input[type=radio] { position:relative; top:2px; }
.input-content-text { padding-left:1px; padding-top:1px; } /* if a label has no text/select/textarea input, add this class along side input-content it adjust the padding so that things stay inline. Radio/checkbox/plain text will need this */
/* input icons */
.input-icon { width:16px; }
.input-icon img { vertical-align:middle; }
.input-icon-before { background:#fff; display:block; float:left; vertical-align:middle; border:1px solid #aaa; border-right:0; padding:2px; position:relative; top:1px; left:0; }
.input-icon-before img { display:block; height:12px; }
.input-icon-after { background:#fff; display:inline-block; vertical-align:middle; border:1px solid #aaa; border-left:0; padding:2px; position:relative; top:-1px; left:3px; }
.input-icon-after img { display:block; height:12px; }
/* input help text */
.input-help { margin-left: 200px; font-style: italic; color: #999;}
/*
	input group wrapper - allows multiple input groups to stack vertical within a list that is otherwise horizontal

		A		B		D
				C

	<div class="input-group">
		A
	</div>
	<div class="input-group-wrapper">
		<div class="input-group">
			B
		</div>		
		<div class="input-group">
			C
		</div>
	</div>
	<div class="input-group">
		D
	</div>		
*/
.input-group-wrapper { display: inline-flex; flex-direction: column; }
/* 
	input group compact - makes label width smaller and removes some margins/paddings so things fit tighter together 

	<div class="input-group-compact">
		<div class="input-group">
			... etc
		</div>
		<div class="input-group">
			... etc
		</div>		
	</div>
*/
.input-group-compact .input-group { margin-bottom:0; }
.input-group-compact .input-group > label { padding-right:0; padding-top:1px; width:100px; }
.input-group-compact .input-content { min-height:18px; line-height:16px; margin-bottom:0x; }

/* this fixes the help icon position when using server.lib.helpIcon() */
.input-group label a[onclick] { position:absolute; }
.input-group label a[onclick] img { position:relative; top:-2px; left:-22px; }
.input-group label.req a[onclick] img { position:relative; top:-2px; left:-30px; }


/* wrapper class to set the label widths; class would be set on same level as .form-inline */
.label-width-75  .input-group > label { width: 75px; }
.label-width-100 .input-group > label { width:100px; }
.label-width-125 .input-group > label { width:125px; }
.label-width-133 .input-group > label { width:133px; }
.label-width-150 .input-group > label { width:150px; }
.label-width-166 .input-group > label { width:166px; }
.label-width-175 .input-group > label { width:175px; }
.label-width-200 .input-group > label { width:200px; }
.label-width-225 .input-group > label { width:225px; }
.label-width-250 .input-group > label { width:250px; }

/* set max-widths for input-content so content can wrap appropriately 
	TODO?: set defaults based on number of columns - label width also plays a factor... maybe percentage based somehow?
*/
.content-width-185 .input-content { max-width:185px; }

/* when form is inline, we need to reset the position of the icon */
.form-inline .input-group label a[onclick] { position:relative; }
.form-inline .input-group label a[onclick] img { position:relative; top:0; left:0; }
.form-inline .input-group label.req a[onclick] img { position:relative; top:0; left:0; }


/* 
	adjust label widths using a wrapper class
	
	<div class="label-width-200">
		<div class="input-group">
			<label for="foo">Something</label>
			<div class="input-content">
				<input type="text" name="foo" id="foo" value=""/>
			</div>
		</div>
	</div>
*/
.label-width-50  .input-group > label { width:50px; }
.label-width-75  .input-group > label { width:75px; }
/* using .input-group-compact sets width to 100 and changes margin/padding */
.label-width-100 .input-group > label { width:100px; }
.label-width-125 .input-group > label { width:125px; }
.label-width-150 .input-group > label { width:150px; }
/* 170 is default width */
.label-width-200 .input-group > label { width:200px; }
.label-width-225 .input-group > label { width:225px; }
.label-width-250 .input-group > label { width:250px; }
.label-width-275 .input-group > label { width:275px; }
.label-width-300 .input-group > label { width:300px; }


/**************************************************
	form layouts
 **************************************************

	//
	// form-inline
	// - forms are vertical unless this class is added, then they are inline/horizontally layed out
	//
	<div class="form-inline">
		<div class="input-group">
			... etc
		</div>
	</div>

	//
	// form-labels-stacked
	// - form labels are inline with the input unless this class is added
	//
	<div class="form-labels-stacked">
		<div class="input-group">
			... etc
		</div>
	</div>
*/
.form-inline .input-group { clear:none; display:inline-block; margin-right:10px; }
.form-inline .input-group > label,
.form-inline .input-label { width:auto; white-space:nowrap; } 

.form-labels-stacked .input-group > label,
.form-labels-stacked .input-label { width:auto; display:block; text-align:left; }

/* added CSS for form validation */
.form-error { display:block; color:red; }
.form-inline .input-group { vertical-align: top; }
.input-content .k-dropdown.has-error { padding-top:2px; line-height:22px; }
.input-content .k-dropdown.has-error .k-dropdown-wrap { border:1px solid #b94a48; }
/* shows red warning icon in input */
.input_error {
	background-image: url(/images/icons/alert_large_red.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}
/* shows green ok icon in input */
.input_ok {
	background-image: url(/images/icons/accept.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}


/*************************
	kendo tabstrip exceptions
 *************************/
.k-tabstrip .k-tabstrip-items {
	padding:.3em .3em 0 !important;
}
.k-tabstrip>.k-content, .k-panelbar .k-tabstrip>.k-content {
	padding:10px;
}


/*************************
	kendo dropdownlist exceptions
 *************************/
 .k-dropdown .k-input,
 .k-dropdown .k-state-hover .k-input,
 .k-dropdown .k-state-focused .k-input,
 .k-menu .k-popup,
 .k-multiselect .k-button,
 .k-multiselect .k-button:hover,
 .k-list-container {
	color:#000;
 }

 /* so that it aligns properly with regular text inputs on the same line */
.k-dropdown {
 	position:relative;
 	min-width:100px;
 }
	.k-dropdown .k-input, .k-dropdown .k-select {
		height:16px;
		line-height:16px;
		padding:0;
	}
		.k-dropdown .k-input {
			text-indent:3px;
		}
		/* changes the width of the box around the drop down arrow */
		.k-dropdown .k-select {
			width:1.4em;
		}
	/* dropDownList wrap */
	.k-dropdown-wrap.k-state-default,
	.k-dropdown-wrap {
		border-radius:1px;
	}
	/* dropdownlist filter */
	.k-list-filter>.k-textbox {
		height:22px;
		padding:1px;
		text-indent:3px;
	}
	/* dropDownList options */
	.k-list .k-state-focused,
	.k-list .k-state-hover {
	}
	/* prevents the dropdownlist items from wrapping */
	.k-list .k-item { white-space:nowrap;  }
	/* changes the size of the dropdownlist options as well as the hover state */
	.k-popup .k-list .k-item {
		padding:0 4px;
		line-height:16px;
		min-height:16px;
	}
		.k-popup .k-list>.k-state-hover,
		.k-popup .k-list>.k-state-selected {
			background:#1e90ff;
			color:#fff;
			border-radius:0px;
		}

/* override the background color of some form elements - removes gradient and makes it white */
.k-autocomplete.k-state-default, .k-picker-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-dropdown-wrap.k-state-default {
	background-image: none;
	background-color: #fff;
	border-color: #aaa;
}

/**************************************************
	Kendo Grid exceptions & custom styles
 **************************************************/
.kendoGridToolbar {
	padding:5px;
}

.k-grid-content {
	min-height: 30px;
}

/* loading overlay on a kendo grid table row */
#kendoGridRowLoadingOverlay { 
	display:none; 
	text-align:right;
	position:absolute;
	z-index:10000; 
	background:rgba(0,0,0,0.5);
}
	#kendoGridRowLoadingOverlay #info {
		display:inline-block;
		background:#fff;
		color:#333;
		padding:5px 5px 2px 5px;
		border-radius:4px;
		margin-top:5px;
		margin-right:5px;
	}

/**************************************************
	Kendo UI exceptions
 **************************************************/

/*** remove the border radius from elements so they look more natural to navpoint style ***/
.k-block, .k-button, .k-textbox, .k-drag-clue, .k-touch-scrollbar, .k-window, .k-window-titleless .k-window-content, .k-window-action, .k-inline-block, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-autocomplete, .k-multiselect, .k-combobox, .k-dropdown, .k-dropdown-wrap, .k-datepicker, .k-timepicker, .k-colorpicker, .k-datetimepicker, .k-notification, .k-numerictextbox, .k-picker-wrap, .k-numeric-wrap, .k-colorpicker, .k-list-container, .k-calendar-container, .k-calendar td, .k-calendar .k-link, .k-treeview .k-in, .k-editor-inline, .k-tooltip, .k-tile, .k-slider-track, .k-slider-selection, .k-upload,
.k-dropdown-wrap .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input,
.k-dropdown-wrap.k-state-border-down .k-input, .k-picker-wrap.k-state-border-down .k-input, .k-picker-wrap.k-state-border-down .k-selected-color, .k-numeric-wrap.k-state-border-down .k-input,
.k-dropdown-wrap.k-state-border-down, .k-picker-wrap.k-state-border-down, .k-numeric-wrap.k-state-border-down,
.k-split-button.k-state-border-down>.k-button {
	border-radius: 0px;
}
.k-button .k-icon {
	background-image: none;
	height: 0;
	width:0;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
	padding: 0px 4px 0px 4px;
	min-width: 16px;
}
 a.k-button.k-button-icontext {
    color: black;
    font-weight: normal;
    text-decoration: none;
 }
/* adds a border after the last row */
.k-grid table { border-bottom:1px solid #ccc; }
/* keeps a double border from showing up on the far left */
.k-grid th { border-width:0 1px 0 0 !important; }
.k-grid td { border-width:0 1px 0 0 !important; }
/*** wrap the kendo element in k-small class to make it smaller - originally used for the non-complete delivery section of create order for the combobox ***/
.k-combobox-small .k-combobox {
	margin-bottom:2px;
}
.k-combobox-small .k-combobox,
.k-combobox-small .k-dropdown-wrap,
.k-combobox-small .k-input, 
.k-combobox-small .k-select {
	height:16px;
	line-height:16px;
}
.k-combobox-small .k-input, 
.k-combobox-small .k-select {
	min-height:16px;
	padding:0;						
}
.k-combobox-small .k-select {
	width:1.4em;
}
.k-combobox-small .k-dropdown-wrap {
	padding:0 1.4em 0 0;
}

/*************************************
	autoComplete widget
 *************************************/

/* adjust the autocomplete widget to fit more inline with Chrome styling */
.k-widget.k-autocomplete {
	position:relative;
	top:-1px;
}
.k-autocomplete .k-input {
	height:14px;
	padding:1px 0;
	text-indent:2px;
	border-radius:0;
}
.k-autocomplete.k-state-border-down .k-input,
.k-autocomplete.k-state-border-up .k-input,
.k-autocomplete.k-state-border-down {
	border-radius:0;
}



/**************************************************
	jQuery UI exceptions
 **************************************************/

/*** too much indentations for tab content... horizinal space is precious, so we want very little/no padding ***/
.ui-tabs .ui-tabs-panel {
 	padding:6px 3px 3px 3px;
 }
 
/*** use the same font family and the previous version of the jquery ui so the items fit in the designed space **/
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
	font-family: Arial, helvetica, sans-serif;
}
/*** make tabs a bit smaller by default ***/
.ui-tabs .ui-tabs-nav li {
	margin:0 1px;
}

/*** make sure the tab links are not blue ***/
.ui-tabs .ui-tabs-nav li a:link,
.ui-tabs .ui-tabs-nav li a:visited {
	color:#212121;
	font-size:11px;
	padding:.5em .75em;
	font-family:tahoma, arial, helvetica;
}

/**  This adds the resizable icon back on to dialogs as the newer ui removed it. **/
.ui-dialog .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 3px;
    bottom: 3px;
    background-position: -80px -224px;
}

/** this ensures that dialogs without z-index will stay on top of things like the navigation bar**/
.ui-dialog { z-index: 1000 !important ;}

/*** prevents blue highlight for button focus ***/
.ui-button:focus { outline:none !important }

/* Fix jquery auto suggest - our menu is z-index 1000 so the autosuggest must be higher than that */
.ui-autocomplete {z-index:1100 !important;}
.ui-autocomplete-loading { background: white url(/images/loading.gif) no-repeat right center; }

#it-toolbar{
	position: absolute;
	width: 500px;
	height: 46px;
	padding: 5px;
	display: none;
	background:#e8f3c6;
	border-bottom:1px solid #a6c34e;
}

/* disabled class */
.kendo-dropDownList.readonly .k-dropdown-wrap.k-state-default,
input.disabled,
select.disabled,
textarea.disabled,
select:disabled {
  background-color: #EBEBE4;
  color:rgb(84,84,84);
}
select.disabled option {
	display: none;
}

/* show elipsis and light up blue when mouse over */
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* disabled image --- grey'd out */
.disabled img, img.disabled {
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */               
}

/* for the 'dev' banner */
div.ribbon-banner {
   padding-top: 5px;
   display: block;
   position: absolute;
   top: 50px;
   left: -120px;
   width: 400px;
   height: 60px;
   text-align: center;
   opacity: 0.7;
   -webkit-transform: rotate(-45deg);
   -moz-transform:    rotate(-45deg);
   -ms-transform:     rotate(-45deg);
   transform:         rotate(-45deg);
   font-size: 20px;
   line-height: 16px;
   font-weight: 700;
   color: white;
   background-color: #E63E3E;
   border: 1px solid white;
   z-index: 100;
}
div.ribbon-banner-impersonate {
	position: absolute;
	top: 0;
	left: 0;
	background: #FFFFDD;
	border-right: 1px solid #706500;
	border-bottom: 1px solid #706500;
	color: #000;
	padding: 5px 10px;
	z-index: 101;
}

/* Content width should not exceed 810px */

/* COLOR CODES
	orange - #eb6b08
	dark gray - #585858
	light gray - #c2c2c2
*/

/* does not work in IE 6 or below */
.clear:after { clear: both; content:""; display: block; visibility: hidden; }

.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* this can be used on its own, too */
table.tableGridLines td {border: 1px dotted #CCCCCC;}
table.tableGridLines {border-collapse: collapse; }

/* makes a table cell as small as possible without wrapping the text */
th.shrink,
td.shrink { white-space: nowrap; width:1px; }

/* mw means that the cell will have a max width for truncating text */
td.mw,
td.mw p { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } /* truncate requires use of a specified width also */
/* when a <p> is inside a <td>, mw needs to be applied to both the td and the p */

.mw50  { max-width:50px; }
.mw75  { max-width:75px; }
.mw100 { max-width:100px; }
.mw125 { max-width:125px; }
.mw150 { max-width:150px; } 
.mw175 { max-width:175px; } 
.mw200 { max-width:200px; } 
.mw225 { max-width:225px; } 
.mw250 { max-width:250px; } 
.mw275 { max-width:275px; } 
.mw300 { max-width:300px; } 


/* CF9 Fixes */

/* the ext-all.css file from CF9 sets the strong tag to no longer be bold.  This reverses that */
strong { font-weight: bold; }
em { font-style: italic; }

/* this fixes an issue with tabs in CF9, an issue that is caused by our "#content ul..." declaration above */
#content ul.x-tab-strip, #content ol.x-tab-strip {
	padding: 0px;
}

/* these next two declarations make the CF9 tabs look more like they were in CF8 */

div.x-tab-panel-header, ul.x-tab-strip-top {
    background-image: none;
    background-color: transparent;
    padding-bottom: 0px;
}

div.x-tab-panel-header {
	border: 0px;
}

/* this makes the popup windows look more like CF8, with a white background instead of a grey one */
div.x-window-mc {
    background-color: white;
	}

/* this fixes the overly large column headers on a cfgrid. Makes them look more like in cf8 */
div.x-grid3-hd-inner {
	padding: 2px 2px 2px 3px;
	}
	
/* in CF9 some rows in some grids end up with white text when selected. This makes them hard to read. Fix it. */
div.x-grid3-row-selected {
	color: black!important;
	}

/* fix the font in our grids.  It was ignoring what is specified in the colheaderfont tag */
div.x-grid3-cell-inner, div.x-grid3-hd-inner { font-family: arial, helvetica, sans-serif!important; }

/* end cf9 fixes */
/* fix to place calendar on top of other elements, such as grids */
#ui-datepicker-div {
	z-index: 9999!important;
}


/* [GLOBAL STYLES] */

.strikethrough {text-decoration: line-through;}

* {
		font-family: arial, helvetica, sans-serif;
		font-size:12px;
		margin: 0;
		padding: 0;
}

html {
		height: 100%;
		overflow-y: scroll;
}

body {
		color: #444444;
		height: 100%;
}

p {
		word-break: break-word;
}

input[type=text], input[type=password]{
		padding: 1px;
}

input[type=button], button {
		padding: 2px;
}

input[type=submit]{
		padding: 2px;
}

input[type=reset]{
		padding: 2px;
}

/* removes the up/down spin arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin: 0; 
}

a:link, a:visited, .ui-widget-content a:link, .ui-widget-content a:visited {
		color: blue;
		font-weight: normal;
		text-decoration: none;
}

a:hover, a:active, .ui-widget-content a:hover, .ui-widget-content a:active {
		color: blue;
		font-weight: normal;
		text-decoration: none;
}

/* 2011-10-31: This fixes the issue where rich text inside of a table would be shoved down half a line. - Jason */
/* 2015-01-15: we dont want to remove padding from all <p> tags. Just top and bottom of first and last <p> so it fits snug - Brad */
td p:first-child { padding-top:0; }
td p:last-child { padding-bottom:0; }

p, h2, h3, h4, h5, h6 { 
		padding: 5px 0; 
}

img {
		border: none;
}

ul {
		list-style-type: none;
}

fieldset, input[type=text], input[type=password], select {
		border: 1px #aaa solid;
}

fieldset {
	padding: 10px 5px;
}

/* what was this for?  Its causing some problems.  Removing it for now. RPS 3/25/10
label {
		display: inline;
		font-weight: bold;
}
/*

/* [SPECIAL TEXT] */
.title {
	font-size: 20px;	
}

.label {
	color: green;	
}
	/* instead of putting align="right" on the tag, just use an extra class. (ie. class="label right") */
	.label.left { text-align:left; }
	.label.right { text-align:right; }
	.label.center { text-align:center; }

	/* The "label" class is also used by datatables, so unset this green color on it */
	.label.ui-state-default { color: unset; }

.sectionHeader {
	font-size: 20px;
}

.gridtitle {
	font-weight: bold;	
	color: #000000;
}

/* [FOR TRIP VISIT USER-PICKER] */

.wrapUp { 
	float: left; 
	margin-top: 2px; 
	margin-right: 10px; 
	white-space:nowrap;
	min-width:150px;
}
.wrapUpTag {
	border:1px solid #999;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.vertLine {
	border-right: 1px solid #999;
	display: inline-block;
	padding: 0;
}
.curPoint {
	cursor:pointer;
}
.pad2Top {
	padding-top:2px;
}
.pad2Left {
	padding-left:2px;
}
.search-select-remove {
	display: inline-block;
	cursor: pointer;
	padding: 5px 0 0 5px;
	margin: 0 0 -1px 0;
}

/* [PAGE WRAPPER] */

#wrapper {
		height: auto !important; height: 100%;
		margin-bottom: -20px;
		min-height: 100%;
		width: 100%;
}

/* [HIDE CFWINDOW ON PAGE LOAD] */
.yuiextdlg {
    position:absolute;
    left:-200px;
}

/* [HEADER] */

#header-wrapper {
	padding: 5px 0 0 0;
}
#header {
		margin: 0 auto 10px auto;
		width: 100%;
		max-width: 1000px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
}
#header h1 {
	height: 48px;
	display: flex;
	align-items: center;
}
#header-logo {
		width: 145px;
}


#header-content {
		background: #FFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width: 855px;
		border-radius: 0 10px 0 0;
		height: 48px;
}

#header-content-user {
		width: 100%;
		max-width: 655px;
		display: flex;
		flex-wrap: wrap;
		height: 100%;
		align-content: center;
}

#header-content-user p {
		padding: 0 0 0 12px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
}

#header-content-expand {
	display: none;
}

#header-content-expand.expanded {
	display: flex;
}

#header-content-user > p > a:hover {
		color: #686868;
}

#header-content-user select {
	padding: 5px 10px;
}

#header-content-search {
	display: flex;
	align-items: center;
	padding: 0 0 0 20px;
}

#header-content-search p {
		color: #eb6b08;
		font-weight: bold;
		letter-spacing: 3px;
		padding: 0;
		text-align: center;
}

#header-content-search #field {
		border: 1px #787878 solid;
		float: left;
		position: relative;
		width: 160px;
		padding: 5px 10px;
}

#header-content-search #button {
		float: right;
		position: relative;
}

#header-content-error {
		float:right;
		padding: 0;
		position: relative;
		top: 8px;
		right: 5px;
}

#header-content-error a {
		font-size: 10px;
}

#header-content-date {
		float: right;
		font-size: 11px;
		position: relative;
		top: 6px;
		padding-right: 30px;
}

#menu-search-results {
	position: absolute;
	top: 36px;
	left: 0;
	border: 1px solid #787878;
	width: 500px;
	display: none;
	max-height: 200px;
	overflow-y: auto;
	z-index: 1050;
	background: #E9E9E9;
}

#menu-search-results > .menu-search-header {
	padding: 5px 10px;
	font-weight: bold;
}

#menu-search-results > .menu-search-result {
	padding: 5px 10px 5px 20px;
	cursor: pointer;
	text-decoration: underline;
	color: blue;
}

#menu-search-results > .person-search-result,
#menu-search-results > .material-search-result {
	padding: 5px 10px 5px 20px;
}

#menu-search-results > .material-search-result {
	cursor: pointer;
}
#menu-search-results > .material-search-result:hover {
	background: #DDD;
}

#menu-search-results > .menu-search-result:hover {
	/*background: #1e90ff;
	color: #FFF;*/
}

.margin-top3 {margin-top:3px;}
.redbg, .redbg.odd, .redbg.even { background-color: #FFCCCC !important;}
.whitebg { background-color: #FFFFFF;}
.greybg, .whitebg.odd { background-color: #DDDDDD;}
.orangebg, .orange.odd, .orange.even { background-color: #FF8844;}
.lightorangebg, .lightorange.odd, .lightorange.even { background-color: #FFCC99;}
table.dataTable > tbody > tr.yellowbg,
.yellowbg , .yellowbg.odd , .yellowbg.even, .table.striped tbody tr.yellowbg:nth-child(odd) { background-color: #FFFC6B;}
.greenbg { background-color: #56F030;}
/* [NAVIGATION] */

#navigation-wrapper {
		/*background: url("/images/layout/nav-squared-right.png") no-repeat top right;*/
		margin: 0 auto;
		position: relative;
		width: 100%;
		max-width: 1000px;
}

#navigation-left {
		background: url("/images/layout/nav-squared-left.png");
		float: left;
		height: 30px;
		width: 15px;
}

#navigation-content {
		background: url("/images/layout/nav-edge-top-bottom.png") repeat-x;
		float: left;
		height: 30px;
		padding-top: 5px;
		width: 100%;
		max-width: 970px;
}

#navigation-content > ul {
		background: #eb6b08;
		height: 20px;
		list-style: none;
		padding-left: 0px;
}

#navigation-content > ul > li {
		float: left;
		height: 10px;
}

#navigation-content a:link, #navigation-content a:visited {
		color: #323232;
		display: block;
		float: left;
		font-size: 10px;
		font-weight: bold;
		height: 16px;
		letter-spacing: 1px;
		padding: 4px 10px 0px;
		text-decoration: none;
}

#navigation-content a:hover, #navigation-content a:active {
		background: #323232;
		color: #ffffff;
}




/* [SECTION] (this includes the side bar and page content) */

#section-wrapper {
		margin: 0 auto 30px;
		clear: both;
		overflow: visible;
		width: 100%;
		max-width: 1000px;
}




/* [SIDEBAR] */

#sidebar-wrapper {
		float:left;
		margin: 0px 0px 10px;
		width: 160px;
}

#sidebar-top {
		float: left;
		height: 105px;
		width: 160px;
}

#sidebar-bottom {
		background: url("/images/layout/sidebar-rounded-bottom.png");
		height: 15px;
		width: 160px;
}

#sidebar-content-wrapper {
		background: url("/images/layout/sidebar-edge-left-right.png");
		clear:both;
		overflow: auto;
		width: 160px;
}

#sidebar-content {
		background: #c2c2c2;
		margin: 0px 5px;
		min-height: 140px;
		width: 150px;
}

.section {
		background: #585858;
		color: #dddddd;
		font-size: 14px;
		padding-left: 5px;
}

.subsection {
		background: #d8d8d8;
		font-size: 14px;
		padding-left: 10px;
}

.submenu {
		list-style: square;
		padding: 5px 0 15px 25px;
}

.submenu a:link, .submenu a:visited {
		color: #323232;
		font-size: 12px;
}

.submenu a:hover, .submenu a:active {
		color: #ffffff;
}




/* [CONTENT] */

.shortcut-wrapper {
	display: flex;
	justify-content: right;
	flex-direction: row-reverse;
	margin: -24px auto 0 auto;
}
.shortcut-wrapper > * {
	margin-left: 10px;
}
/* k-widget has it's own additional padding of 3px, so the margin is reduced by 3 on it to produce consistent spacing between the items */
.shortcut-wrapper > .k-widget {
	margin-left: 7px;
	margin-right: -3px;
}

div.shortcutStar {
	cursor: pointer;
	font-weight: bold;
	border: none;
	background: none;
	position: relative;
	z-index: 100;
}
div.shortcutStar ul {
	cursor: default;
}
div.shortcutStar .k-animation-container {
	min-width: 250px;
}
.shortcutStar.k-menu .k-link {
	padding: .28em 0 .38em 0;
	/* To get the width less than our 880 style, even with the padding kendo adds */
	display: block;
	box-sizing: border-box;
	max-width: 840px;
	/* To ellipsis if overflow */
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shortcutmenulink {
	font-size:14px;
	overflow-wrap: break-word;
	white-space: normal;
}

div.shortcutStar .k-item.k-state-default.k-first.k-last {
	border:none;
	padding: 4px;
}
div.shortcutStar.k-menu>.k-item>span.k-link {
	color: white;
	background-color: #e16a11;
	font-size: 20px;
	padding: 0 2px;
	line-height: 23px;
	border-radius: 12px;
}
div.shortcutStar .k-link .k-icon {
	display: none;
}

.helpIconWrapper {
	display: flex;
	justify-content: flex-end;
}
a.tabHelp {
	cursor: pointer;
	font-size: 26px;
	line-height: 32px;
	color: Dodgerblue;
	display: inline-block;
	position: relative;
	z-index: 95;
}
a.pageHelp {
	z-index: 100;
}
a.tabHelp.noContent {
	color: Grey;
}

#content { 
	margin: 0 auto;
	min-height: 400px;
	overflow: visible;
	width: 100%;
	max-width: 1000px;
	background: #FFF;
	box-sizing: border-box;
	position: relative;
}

#content-heading {
		margin: 0 0 10px;
		overflow: auto;
}

#content-heading > h1 {
		padding-left: 0;
		float: left;
}

#content-heading > ul {
		overflow: hidden;
		list-style-type: none;
}

#content-heading > ul > li {
		float: right;
		padding: 0 0 0 3px;
}

#content h1 {
		font-size: 18px; 
}

#content h2 {
		font-size: 14px;
}

#content ul {
	padding: 5px 20px; 
	list-style-type: disc;
}
#content ol {
	padding: 5px 20px; 
}

#content .ui-tabs .ui-tabs-nav {
	padding: .2em .2em 0;
}

ul#content-tabs {
	padding: 0px 2px; 
}

#content-heading > ul {
		overflow: hidden;
		list-style-type: none;
}

#content-heading > ul > li {
		float: right;
		padding: 0 0 0 3px;
}

.fixPadding ol{
	padding-left:40px;
	list-style-type:decimal !important;
}
.fixPadding ul{
	padding-left:40px;
	list-style-type:disc;
}


/* [ICONS] */

#icon-list {
		overflow: hidden;
}

#icon-list > li {
		list-style-type: none;
		float: right;
		padding: 0 0 0 9px;
}


/* [FOOTER] */

#footer, #push {
		clear: both;
		height: 20px;
}

#footer {
		background-color: #dddddd;
		width: 100%;
}

#footer p {
		padding: 3px 0 0;
		font-size: 10px;
		text-align: center;
}


/* used for ERs of  different priorities */
table.dataTable>tbody>tr.erExpedite,
.table.striped tbody tr:nth-child(odd).erExpedite,
tr.erExpedite {background-color: #FFFC6B; font-weight: bold;}
tr.erExpedite a {font-weight: bold;}
.table.striped tbody tr:nth-child(odd).erHigh,
tr.erHigh {background-color: #9bd68b; font-weight: bold}
tr.erHigh a {font-weight: bold;}

/* use this to indicate the ER.orderNumberType field is set to 4, which means
this is a sales related ER. Used on the desktop and in ER search. */
tr.salesRelatedER {background-color: #80FE80 !important; }
 /* if changed also need to get changed in Trip Report Email  */
.goldBG { background-color: #FFD700 !important; } /* background color for gold level customers */ 
.platinumBG { background-color: #9FB4F9 !important; } /* background color for platinum level customers */

.bg-preferredLevel-1 { background-color: #C9B037; } /* Gold (global) */ 
.bg-preferredLevel-1.bg-3000 { background-color: unset; } /* Nothing (3000) */
.bg-preferredLevel-2 { background-color: #9FB4F9; } /* Platinum (all) */
.bg-preferredLevel-3 { background-color: #9FF9F9; } /* Bronze (global) */
.bg-preferredLevel-3.bg-3000 { background-color: #C9B037; } /* Gold (3000) */

.dataTable td > .bg-preferredLevel-1,
.dataTable td > .bg-preferredLevel-2,
.dataTable td > .bg-preferredLevel-3 {
	padding: 3px;
	margin: -3px;
}

/* This is for the help popups */
div.helpPopup{
	background:#fff;
	border:1px solid #888888;
	display:none;
	width:600px;
	min-height:1px;
	min-width:1px;
	padding:1px;
	position:fixed;
	top:100px;
	right: calc(50% - 300px);
	z-index:10000;
}

#popupClose{
	background:#CCCCCC;
	color:#585858;
	cursor:pointer !important;
	display:block;
	font-weight:bold;
	min-height:0px;
	padding:2px 4px;
	position:absolute;
	right:4px;
	top:2px;
	z-index:7550;
}

#popupClose:hover{background:#FFFFFF !important;}

#popupBackground{
	background:#cccccc;
	display:none;
	height:100%;
	left:0px;
	position:fixed;
	top:0px;
	width:100%;
	z-index:7000;
}

#innerPopup{
	border:5px solid #cccccc;
	display:block;
	z-index:7500;
}

#popupContent div{	
	max-height:550px;	
	overflow-y:scroll;
	overflow-x:hidden;
	z-index:7500;	
}

.popupTitle{
	background:#cccccc;
	color:#404040;
	padding:0px 0px 3px !important;
	margin-top:-3px;
}

/* Like a tooltip or jgrowl notification, a tiny info box, but inline and static */
.inline-tip {
	border: 1px solid #3366FF;
	border-left-width: 40px;
	border-radius: 4px;
	padding: 20px 10px;
	margin: 10px 0;
	position: relative;
}
.inline-tip:before {
	position: absolute;
	left: -32px;
	top: 50%;
	margin-top: -11px;
	content: "i";
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #FFF;
	border-radius: 22px;
	width: 22px;
	height: 22px;
}

/* used for our jquery tooltip plugin */
.tooltip{
   position: absolute;
   padding: 5px 5px;
   z-index: 10;
   
   color: #303030;
   background-color: #f5f5b5;
   border: 1px solid #DECA7E;
   
   font-size: 11px;
   line-height: 14px;
   text-align: center;
}

/*
	Feature Announcements
*/
.feedback-modal-wrapper,
.feature-modal-wrapper {
	display: none;
}
.survey-modal-bg,
.feedback-modal-bg,
.feature-modal-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: .3;
	z-index: 201;
}
.survey-modal-fg-wrapper,
.feedback-modal-fg-wrapper,
.feature-modal-fg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.survey-modal-fg,
.feedback-modal-fg,
.feature-modal-fg {
	background: #9bd68b;
	border-radius: 5px;
	border: 2px solid #9bd68b;
	min-width: 320px;
	height: 100%;
	width: 100%;
	position: relative;
	max-height: 600px;
	max-width: 800px;
	z-index: 201;
}
.feature-modal-resize {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 10px;
	cursor: ns-resize;
}
.feedback-modal-title,
.survey-modal-title,
.feature-modal-title {
	padding: 6px 10px;
	background-color: #9bd68b;
	margin: 0px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	cursor: move;
	color: #000;
}
.feature-modal-title div {
	font-size: 18px;
}
.feature-modal-title .fa {
	transform: scaleX(-1);
}
.feature-modal-title .k-icon {
	cursor: pointer;
	padding: 8px;
	margin: -7px -10px -6px 0;
}
.survey-modal-body,
.feedback-modal-body,
.feature-modal-body {
	background: #FFF;
	display: flex;
	flex-direction: column;
	height: calc(100% - 33px);
	position: relative;
	overflow: auto;
}
.survey-modal-body-inner,
.feedback-modal-body-inner,
.feature-modal-body-inner {
	position: relative;
	padding: 10px;
	display: flex;
	flex-direction: column;
	max-width:100%;
}
.feature-title-wrapper {
	display: flex;
	justify-content: space-between;
}
.feature-title-wrapper button {
	border-radius: 5px;
	padding: 5px 15px;
	margin: 0 0 10px 0;
	width: 125px;
	font-weight: bold;
}
.feature-title-wrapper .feedback {
	position: relative;
	margin-top: -5px;
	margin-right: -5px;
}
.feature-title-wrapper .feedback img {
	height: 32px;
	margin: 5px;
	cursor: pointer;
	filter: grayscale(1);
}
.feature-title-wrapper .feedback img.active {
	filter: none;
}
.feature-title-wrapper .feedback-text-title {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 5px;
}
.feature-title-wrapper .feedback-text {
	position: absolute;
	right: 0;
	top: 65px;
	background: #FFF;
	border: 2px solid #000;
	padding: 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.feature-title-wrapper .feedback-text textarea {
	width: 300px;
	height: 100px;
}
.feature-title-wrapper .feedback-buttons-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 5px;
}
.feature-title {
	font-size: 18px;
	font-weight: bold;
}
.feature-modal-body-inner p {
	padding: 0 0 10px 0;
}
.feature-modal-body-inner hr {
	margin: 10px 0;
}
.feature-modal-footer2 {
	font-style: italic;
	font-weight: bold;
	height: 30px;
	background: #9bd68b;
	display: flex;
	align-items: center;
	padding: 0 10px;
}

.lite-feature-announcement {
	display:block;
	position:absolute;
	bottom: -10px;
	left: 0;
	z-index:101;
	font-size:14px;
	color:#4f545c;
	cursor: pointer;
}
.lite-feature-announcement.position-above {
	bottom: unset;
	top: -34px;
}
.lite-feature-announcement-title {
	position: absolute;
	border: 1px solid #3a87ad;
	border-radius: 7px;
	padding: 5px 25px 5px 5px;
	background: #d9edf7;
	width: max-content;
	min-width: 145px;
	max-width: 295px;
	box-sizing: border-box;
}
.lite-feature-announcement.position-above .lite-feature-announcement-title {
	max-width: unset; /* Text wrapping is difficult with above, so we unset max-width */
}
.lite-feature-announcement-title-text {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	max-width: 270px;
}
.lite-feature-announcement.position-above .lite-feature-announcement-title-text {
	max-width: unset;
}
.lite-feature-announcement-close {
	position:absolute;
	font-weight:bold;
	top:3px;
	right:4px;
	color:#3a87ad;
	height:16px;
	width: 16px;
	border-radius: 2px;
	border-color:#bbdcec;
	border-width: 1px;
	border-style: solid;
	display:flex;
	justify-content: center;
	align-items: center;
}
.lite-feature-announcement-arrow {
	position: absolute;
	transform: rotate(135deg);
	border-left: 1px solid #3a87ad;
	border-bottom: 1px solid #3a87ad;
	background: #d9edf7;
	width: 8px;
	height: 8px;
	top: -5px;
	right: -20px;
}
.lite-feature-announcement.position-above .lite-feature-announcement-arrow {
	top: 22px;
	transform: rotate(-45deg);
}

/*
	Mobile Survey
*/
.survey-modal-wrapper {
	display: none;
}
.survey-modal-title {
	background-color: #DDD;
	border-bottom: 2px solid #999;
}
.survey-modal-fg {
	background: #999;
	border: 2px solid #999;
	max-height: 300px;
}
.survey-modal-body {
	height: 100%;
}
.survey-modal-body-inner textarea {
	height: 150px;
	margin-bottom: 5px;
}


/* jGrowl stuff ( 'popups' when CF/JS errors happen */
div.jGrowl {
	padding: 			10px;
	z-index: 			9999;
	color: 				#fff;
	font-size: 			12px;
}

/** Special IE6 Style Positioning **/
div.ie6 {
	position: 			absolute;
}

div.ie6.top-right {
	right: 				auto;
	bottom: 			auto;
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.top-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-right {
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.center {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 				100%;
}

/** Normal Style Positions **/
div.jGrowl {
	position:			absolute;
}

body > div.jGrowl {
	position:			fixed;
}

div.jGrowl.top-left {
	left: 				0px;
	top: 				0px;
}

div.jGrowl.top-right {
	right: 				0px;
	top: 				0px;
}

div.jGrowl.bottom-left {
	left: 				0px;
	bottom:				0px;
}

div.jGrowl.bottom-right {
	right: 				0px;
	bottom: 			0px;
}

div.jGrowl.center {
	top: 				0px;
	width: 				50%;
	left: 				25%;
}

/** Cross Browser Styling **/
.jGrowl-notification {
	word-break: normal;
}
div.center div.jGrowl-notification, div.center div.jGrowl-closer {
	margin-left: 		auto;
	margin-right: 		auto;
}

div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
	zoom: 					1;
	width: 					340px;
	padding: 				10px;
	margin-top: 			5px;
	margin-bottom: 			5px;
	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
	font-size: 				1em;
	text-align: 			left;
	display: 				none;
	-moz-border-radius: 	5px;
	-webkit-border-radius:	5px;
}

div.jGrowl div.jGrowl-notification div.header {
	font-weight: 			bold;
}

div.jGrowl div.jGrowl-notification div.close {
	z-index:				99;
	float: 					left;
	font-weight: 			bold;
	font-size: 				1em;
	cursor:					pointer;
	padding-right: 5px;
}

div.jGrowl div.jGrowl-closer {
	padding-top: 			4px;
	padding-bottom: 		4px;
	cursor: 				pointer;
	font-size:				.9em;
	font-weight: 			bold;
	text-align: 			center;
}

/** Hide jGrowl when printing **/
@media print {
	div.jGrowl {
		display: 			none;
	}
}

/***************************
	outline form elements when focused
	"outline" prop does not seem to apply to textarea and select. Had to use box-shadow for it to work
 ***************************/
textarea:focus,
select:focus,
button:focus,
input:focus {
	outline: 0 auto blue !important;
	outline-offset: 0px !important;
	-moz-box-shadow:0 0 5px rgb(77, 144, 254) !important;
	-webkit-box-shadow:0 0 5px rgb(77, 144, 254) !important;
	box-shadow:0 0 5px rgb(77, 144, 254) !important;
}

/** tab triangle indicators **/
button .indicate-on, button .indicate-off, button .indicate-none {
 	top: 6px;
 	margin-right: -3px;
 }

.x-tab-strip-text .indicate-on ,.x-tab-strip-text .indicate-off, .x-tab-strip-text .indicate-none{
	margin-right: 2px;
	float: right;
}
.indicate-none {
	height: 0;
	width:0;
	margin-top: -5px;
	border-top: 9px solid transparent;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	z-index: 50;
	position: relative;
	left: 1%;
	top: 2px;
}
.indicate-on {
	height: 0;
	width:0;
	margin-top: -5px;
	border-top: 9px solid #04A09B;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	z-index: 50;
	position: relative;
	left: 1%;
	top: 2px;
}
.indicate-off {
	height: 0;
	width: 0;
	margin-top: -5px;
	border-top: 9px solid #04A09B;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	z-index: 50;
	position: relative;
	left:1%;
	top: 2px;
}
.indicate-off:after {
	height: 0;
	width:0;
	margin-right: -2px;
 	margin-left: -6px;
	border-top: 7px solid #E3E3E3;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	z-index: 51;
	position: absolute;
	top: -1px;
}
.indicate-off::after,
.indicate-off::before {
 height: 0;
 width:0;
 content: '';
 overflow: hidden;
 position: relative;
 z-index: 53;
 left: 2px;
 bottom: 100%
}

/* Make our ckeditor bottom bar a little slimmer */
.cke_resizer {margin-top:-4px !important;}
.cke_bottom {height:6px !important;}


/*

	datatables 2.3.4

*/

/* Adjust margins / padding */
div.dt-container div.dt-layout-row {
	margin: 0;
}
table.dataTable {
	box-sizing: border-box;
}
/* DataTables sets some heavy padding on tables, so we unset it */
table.dataTable>tbody>tr>th,
table.dataTable>tbody>tr>td,
div.dt-container .ui-toolbar,
table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td  {
	padding: 0;
}

/* Make asc/desc indicator clearer */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
	opacity: 1;
}

/* Remove numeric right align */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
  flex-direction: row;
}

/* Search Filter */
.dt-layout-row:not(.dt-layout-table):has(> .dt-layout-end){
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: #ccc url(/vendor/css/jquery/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
	color: #222;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
	margin-left: 4px;
}
div.dt-container .dt-search input {
	background: #FFF;
	padding: 4px;
	margin: 2px 3px;
}
.dt-layout-row:not(.dt-layout-table):has(> .dt-layout-end):has(+ .dt-layout-table) {
	border-bottom: none;
}

/* Table header default like .table.striped */
table.dataTable thead>tr>*.ui-state-default,
.dataTable th { 
	background: linear-gradient(to bottom,  #eeeeee 48%,#e6e6e6 50%);
}

/* Table header */
.dataTable thead {
	border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Buttons (Excel Export) */
.dt-layout-row:not(.dt-layout-table):has(> .dt-layout-end).dt-buttons-wrapper,
.dt-buttons-wrapper {
	display: flex;
	justify-content: space-between;
}
.dt-buttons-wrapper.ui-helper-clearfix.ui-helper-clearfix:before,
.dt-buttons-wrapper.ui-helper-clearfix.ui-helper-clearfix:after {
	display: none;
}
div.dt-buttons>.dt-button,
div.dt-buttons>div.dt-button-split .dt-button {
	display: flex;
	padding: 2px;
	border: none;
	background: unset;
	margin: 0;
	line-height: unset;
}
div.dt-buttons>.dt-button:hover:not(.disabled),
div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled) {
	border: none;
}

/* jQuery UI + DataTables overrides */
.dt-jqueryui .dt-search {
	float: left; /* Surely there is a better way than float, no? */
}
.dt-jqueryui .dt-buttons {
	float: right; /* Surely there is a better way than float, no? */
}
.dt-jqueryui .H {
	display: flex;
	justify-content: space-between;
}

/* DataTables Mobile Expand/collapse rows */
body table.dataTable tbody th.dt-mobile-renderer-content,
body table.dataTable tbody tr td.dt-mobile-renderer-content,
body table.dataTable tbody th.dt-mobile-renderer-title,
body table.dataTable tbody tr td.dt-mobile-renderer-title {
	max-width: unset;
}

/* Default borders for datatables */

.dataTable { border-collapse:collapse; width:100%; background:#fff; }
.dataTable thead tr:last-child th { border-bottom:2px solid #ddd; }
.dataTable td { border-top:1px solid #ddd; }
/* similar header background color as jQuery UI */
.dataTable th { 
	background: linear-gradient(to bottom,  #eeeeee 48%,#e6e6e6 50%);
}
/* boxed puts a border around entire cell, like a calendar */
.dataTable thead tr:last-child th { border-bottom:2px solid #ddd; }
.dataTable th, .dataTable td { border:1px solid #ddd; }




/* [MOBILE] */

.mobile-only {
	display: none;
}

/* body loading indicator */
#body-loading {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.5);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
#body-loading .spinner {
	display: flex;
}
#body-loading .spinner > div {
  background-color: #FFF;
  height: 70px;
	width: 6px;
	margin: 0 2px;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
#body-loading .spinner .rect2 { animation-delay: -1.1s; }
#body-loading .spinner .rect3 { animation-delay: -1.0s; }
#body-loading .spinner .rect4 { animation-delay: -0.9s; }
#body-loading .spinner .rect5 { animation-delay: -0.8s; }
@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

@media only screen and (max-width:880px) {

	
	.desktop-only { display:none !important; }

	/* DEV-2407 This causes horizontal scrolling for "blown out" items on mobile */
	#section-wrapper {
		overflow: auto;
	}

	.shortcut-wrapper {
		margin-top: -14px;
	}

	div.shortcutStar ul li span.k-link {
		max-width: 300px;
	}
	.shortcutStar.k-menu .k-link {
		/* To get the width less than our minimum of 320, even with the padding kendo adds */
		max-width: 280px;
	}
	
	/* Loading indicator on page transition on mobile only for now */
	.body-loading #body-loading {
		display: flex;
	}
	/* Hide other partial content since ours is on top of it anyways */
	.body-loading .blockoverlay {
		display: none;
	}

	.hamburger {
			display: flex;
			flex-direction: column;
			padding: 4px 0;
			justify-content: center;
	}
	.hamburger .bread {
		background: #000;
		width: 20px;
		height: 2px;
		margin: 3px 10px;
	}
	.mobile-only {
		display: flex;
	}
	.header-links {
		display: none;
	}
	body.menu-active .header-links {
		display: flex;
		position: absolute;
		top: 49px;
		left: 0;
    right: 0;
		z-index: 999;
    justify-content: center;
    padding: 5px 0;
		background: #585858;
	}
	#header-content-search {
		display: none;
	}
	#header-wrapper {
		padding: 0;
	}
	#header {
		flex-wrap: unset;
		align-items: stretch;
		margin: 0;
	}
	#header > h1 {
		border-radius: 0;
		padding-left: 10px;
	}
	#header h1 img {
		width: 100px;
	}
	#content {
		box-shadow: unset;
		border-radius: 0;
		padding: 10px;
		background: unset;
	}
	div.ribbon-banner {
		 display: none;
	}
	.mobile-fullname {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120px;
	}

	/* Columns */
	.col-width-10,
	.col-width-15,
	.col-width-20,
	.col-width-25,
	.col-width-30,
	.col-width-33,
	.col-width-35,
	.col-width-40,
	.col-width-45,
	.col-width-50,
	.col-width-55,
	.col-width-60,
	.col-width-65,
	.col-width-66,
	.col-width-70,
	.col-width-75,
	.col-width-80,
	.col-width-85,
	.col-width-90,
	.col-width-95 {
		width: 100%;
	}
}
@media only screen and (max-width:375px) {
	.mobile-fullname {
		max-width: 108px;
	}
}
@media only screen and (max-width:320px) {
	.mobile-fullname {
		max-width: 53px;
	}
}

/* 
	CSS for cxwAlert() - an alternative the native alert() method
*/
.cxw-alert-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.3);
}
.cxw-alert-fg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 300px;
}
.cxw-alert-fg {
	background: #FFF;
	border-radius: 5px;
	border: 1px solid #999;
	width: 500px;
	height: 200px;
	display: flex;
	flex-direction: column;
}
.cxw-alert-header {
	padding: 6px 10px;
	background-color: #E6E6E6;
	border-bottom: 1px solid #999;
	border-radius: 5px 5px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 12px;
}
.cxw-alert-close {
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.cxw-alert-body {
	flex: 1;
	padding: 15px;
	overflow: auto;
	font-size: 14px;
}
.cxw-alert-footer {
	padding: 10px;
	border-top: 1px solid #DDD;
	text-align: center;
}
.cxw-alert-footer button {
	padding: 5px 20px;
}