/*
@import url("//hello.myfonts.net/count/39d2e7");

@font-face {font-family: 'FFDaxStdWideRegular';src: url('/fonts/39D2E7_0_0.eot');src: url('/fonts/39D2E7_0_0.eot?#iefix') format('embedded-opentype'),url('/fonts/39D2E7_0_0.woff2') format('woff2'),url('/fonts/39D2E7_0_0.woff') format('woff'),url('/fonts/39D2E7_0_0.ttf') format('truetype');}

body, p, h1, h2, h3, h4, h5, td, th  {
	font-family: FFDaxStdWideRegular; 
}
*/
#requestmodal .json-block {
	display: block;
	background: #f6f8fa;
	border-radius: 6px;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 300px;
	overflow: auto;
	font-family: monospace;
	font-size: 0.85rem;
	max-height: 300px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.viewOnlyDocContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: none;
}

.viewOnlyDoc {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	text-align: center;
	cursor: pointer;
}

#ocfcutoffreportcontainer .ocfcutoffreporttable td {
	max-width: 200px;
}



#loadequipmenttable .upload-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#loadequipmenttable .upload-item label {
	margin-bottom: 5px;
}
#loadequipmenttable .upload-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 10px;
}

#loadDialog #octerror {
	color: red; 
	font-weight: 600;
	font-size: 13px;
	display: block;
	text-align: left;
	padding: 5px 10px;
	margin-top: 6px;
	background: rgba(217, 83, 79, 0.1);
	border-radius: 3px;
}
#loadequipmenttable .error-message {
	color: red;
	font-weight: bold;
	font-size: 12px;
	display: block;
	margin-top: 4px;
	text-align: left;
}

#emailModal #octequipmentbutton {
	display: none;
}

#octrecurringchargestable #details {
	cursor: default;
}

#orderequipmentmodalcontainer .clickable-row[aria-expanded="true"] .chevron-icon {
	transform: rotate(180deg);
}

#orderequipmentmodalcontainer table .main-header {
	background-color: #f2f2f2;
}

#orderequipmentmodalcontainer table {
	table-layout: fixed;
	width: 100%;
}

#orderequipmentmodalcontainer table td{
	align-content:center;
}

.dispatch-table-container .rowsection {
	background-color: #eeeeee;
}

.dispatch-table-container td {
	min-width: 5rem;
}

.dispatch-table-container .tablesection {
	border-left: 1px solid #DDDDDD;
	min-width: 8rem;
}

.dispatch-table-container {
	width: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dispatch-table-container table {
	width: auto;
	table-layout: auto;
}

.dispatch-table-container table thead tr th {
	border-bottom: none;
	border-top: none;
}

.dispatch-table-container table thead tr:nth-of-type(2) th {
	min-width: 6rem;
}

.flexheader {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.flexheadericon {
	display: flex; 
	align-items: center;
	margin-top: 20px;
}


/* These transtions seemed to really slow down several Hensall computers to the point where they were saying the page is not responding. */
select, .dropdown-menu, .ui-autocomplete-input, .ui-autocomplete {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ddd;
  padding: 2px;
  outline: 0;
  font-size: 14px;
}

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

label, a {
	font-size: 0.8rem;
}

body, p, h1, h2, h3, h4, h5, td, th  {
	font-family: 'Lato', sans-serif;
}

.hilight  {
	color: #D92632;
}

pre {
	background-color: #eee;
}

#query {
	font-family: monospace;
	margin: 1em 0;
}

.form-group textarea {
	height: 6em !important;
}

h1, h2, h3 {
	color: #D92632;
}

span.fieldname {
	color: #D92632;
	padding: 0px 5px;
}

h4, h5, label {
	color: #63666A;
}

label {
	margin-bottom: 0px;
	font-weight: 600;
}

.tabs-container .panel-body {
	border-top: none;
}

.modal-backdrop-white {
	background-color: #fff !important;
	opacity: 0.75 !important;
}

.disable-row {
	opacity: 0.65 !important;
}


.toast-message h1,
.toast-message h2,
.toast-message h3,
.toast-message p,
.toast-message b,
.toast-message small {
	color: #fff !important;
}

.toast-top-right {
	margin-top: 65px;
}

a {
	color: #009CA6;
}

.table > thead > tr > th {
	vertical-align: bottom
}

table.table-hover > tbody > tr[onclick]:hover,
table.table-hover.dataTable > tbody > tr:hover {
	cursor: pointer;
}

p, li, td, th {
	color: #2D2926;
}

.nav-header {
	padding: 0px 20px;
	background-color: inherit;
}

.navbar-header {
	padding-top: 20px;
	height: 80px;
}

#alertmenu {
	padding-top: 10px;
}
#ordersearchbarmenu {
	padding-top: 10px;
}
#coopsearchbarmenu {
	padding-top: 5px;
}

.followupmenu  {
	min-width: 600px;
}

.wrapper-content {
    padding: 0px 10px 40px;
}

.nav-header  a {
	color: #63666A;
}

.nav-header  img {
	margin-left: -20px;
}

th.number, td.number {
	text-align: right;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border-bottom: none;
}

.float, .integer {
    text-align: right;
}

select {
	height: inherit;
}

.checkbox-group {
	padding-top: 20px;
	margin-bottom: 0px;
}

.control-label {
	padding-top: 8px;
}



input[type=radio].custom-radio {
	display:none;
}

input[type=radio].custom-radio + label.custom-radio {
	padding-left:24px;
	height:19px; 
	display:inline-block;
	line-height:19px;
	background-repeat:no-repeat;
	background-position: 0 0;
	vertical-align:middle;
	cursor:pointer;
}

input[type=radio].custom-radio:checked + label.custom-radio {
	background-position: 0 -19px;
}

label.custom-radio {
	background-image:url( /images/radio.png );
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



	input[type=checkbox].custom-checkbox {
		position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
	}

	input[type=checkbox].custom-checkbox + label.custom-checkbox {
		padding-left:25px;
		height:17px; 
		display:inline-block;
		line-height:17px;
		background-repeat:no-repeat;
		background-position: 0 0;
		vertical-align:middle;
		cursor:pointer;
	}

	input[type=checkbox].custom-checkbox:checked + label.custom-checkbox {
		background-position: 0 -17px;
	}

	label.custom-checkbox {
		background-image:url( /images/checkbox.png );
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

.accountname {
	float: left;
	padding-top: 15px;
	padding-left: 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 30px;
	vertical-align: top;
	white-space: nowrap;
}

.no-padding-left {
	padding-left: 0;
}
.no-padding-right {
	padding-right: 0;
}


.ui-autocomplete {
    position: absolute;
    z-index: 3000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
		margin-right: 100px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.ui-autocomplete > li {
	padding: 3px 20px;
	border-bottom: 1px solid #ddd;
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 0px;
}

.ui-menu-item {
	padding:0.4em !important;
}

.ui-autocomplete > li a {
	color: #009CA6;
	background: #fff;
    padding: 3px 2px;
}

.ui-autocomplete > li:hover a {
	color: #fff;
	background: #009CA6;
	border: none;
}

.ui-autocomplete > li:focus a {
	color: #fff;
	background: #009CA6;
	border: none;
}

ul.ui-menu {
	min-width: 250px;
}

.ui-autocomplete > li.ui-state-focus {
	background-color: #DDD;
}
.ui-helper-hidden-accessible {
  display: none;
}

div.centerimage {
	padding: 10px;
}

div.centerimage img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}




div#timeline {
  background-color: #6ab0de;
  margin-top: 36px;
  margin-bottom: 36px;
  height: 10px;
  width: 100%;
  position: relative;
}
div#timeline .inside {
  position: absolute;
  height: 4px;
  background-color: #fff;
  width: 0%;
  top: 3px;
  left: 0;
}
div#timeline .dot {
  z-index: 99;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  text-align: center;
  /*cursor: pointer;*/
}
div#timeline .dot:nth-child(1) {
  left: 5%;
  background-color: #2c3e50;
}
div#timeline .dot:nth-child(2) {
  left: 25%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(3) {
  left: 60%;
  background-color: #7b3;
}
div#timeline .dot:nth-child(4) {
  left: 80%;
  background-color: #20638f;
}

div#timeline .dot date {
  display: block;
  position: relative;
  top: -60px;
  text-align: center;
}
div#timeline .dot span {
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.loader {
	border: 3px solid #f3f3f3;
	border-radius: 50%;
	border-top: 3px solid #3498db;
	/*border-bottom: 8px solid #3498db;*/
	width: 20px;
	height: 20px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}


.feed-activity-list {
	margin-top: 15px;
}

.feed-element {
	position: relative;
}

.media-body.icon {
	padding-left: 50px;
}

.list-name-icon-container {
	position: absolute;
	top: 0px;
}

.list-nameicon {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 1px solid #ddd;
	background: #eee;
}

.list-nameicontext {
	width: 100%;
	position: absolute;
	left: 0px;
	text-align: center;
	font-size: 1rem;
	padding-top: 0.5em;
}



.name-icon-container {
	position: absolute;
	top: 24px;
}

.name-container {
	padding-top: 10px;
	padding-left: 50px;
	line-height: 60px;
	height: 60px;
}

.user-info.image > .name-container {
	padding-left: 0px;
}

.nameicon {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 1px solid #ddd;
	background: #eee;
}

.nameicontext {
	width: 100%;
	position: absolute;
	left: 0px;
	text-align: center;
	font-size: 1rem;
	padding-top: 0.7em;
}

.feed-element .media-body { 
	padding-left: 50px;
}


.media-body {
	padding-left: 10px;
}

.pull-right {
	float: right !important;
}


/** INPUT CHANGE MONITORING */

.labelchanged{
	font-size: 8pt;
	padding: 2px 5px;
	margin-left: 3px;
}




	.inputtabchanged a:after {
		content: '* ';
		background-color: #f99d2a;
		color: #FFFFFF;
		text-shadow: none;
		border-radius: 0.25em;
		font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		line-height: 10px;
		padding: 2px 3px 0px 3px;
		margin-left: 5px;
	}

/** END INPUT CHANGE MONITORING */

a:not([href]):not([tabindex]).btn:not(.btn-white):not(.btn-default) {
	/* fix for some stupid bug from /scss/reboot.scss where the text color was black */
	color: white;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
	background-color: maroon;
}

.tabs-container{
	margin-top: 10px;
}

.btn-default:focus {
	background-color: #F1F1F1;
}


.navbar-brand-webtest {
	background: #3276b1;
	color: #fff;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 0.875rem;
	float: left;
	margin-top: 8px;
	margin-left: 5px;
	border-radius: 5px;
}
/*ibox starts from here*/
.ibox-collapsed-content h1,
.ibox-collapsed-content h2,
.ibox-collapsed-content h3,
.ibox-collapsed-content h4,
.ibox-collapsed-content h5,
.ibox-collapsed-title h1,
.ibox-collapsed-title h2,
.ibox-collapsed-title h3,
.ibox-collapsed-title h4,
.ibox-collapsed-title h5 {
	margin-top: 5px;
}
.ibox-collapsed {
	clear: both;
	margin-bottom: 25px;
	margin-top: 0;
	padding: 0;
}

	.ibox-collapsed.collapsed .ibox-collapsed-content {
		display: none;
	}

	.ibox-collapsed.collapsed .fa.fa-chevron-up:before {
		content: "\f078";
	}

	.ibox-collapsed.collapsed .fa.fa-chevron-down:before {
		content: "\f077";
	}

	.ibox-collapsed:after,
	.ibox-collapsed:before {
		display: table;
	}

.ibox-collapsed-title {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #ffffff;
	border-color: #e7eaec;
	border-image: none;
	border-width: 3px 0 0;
	color: inherit;
	margin-bottom: 0;
	padding: 14px 15px 7px;
	min-height: 48px;
}

.ibox-collapsed-content {
	background-color: #ffffff;
	color: inherit;
	padding: 15px 20px 20px 20px;
	border-color: #e7eaec;
	border-image: none;
	border-style: solid solid none;
	border-width: 1px 0px;
}

.ibox-collapsed-footer {
	color: inherit;
	border-top: 1px solid #e7eaec;
	font-size: 90%;
	background: #ffffff;
	padding: 10px 15px;
}

.ibox-collapsed-content {
	clear: both;
}

.ibox-collapsed-heading {
	background-color: #f3f6fb;
	border-bottom: none;
}

	.ibox-collapsed-heading h3 {
		font-weight: 200;
		font-size: 1.5rem;
	}

.ibox-collapsed-title h5 {
	display: inline-block;
	font-size: 0.875rem;
	margin: 0 0 7px;
	padding: 0;
	text-overflow: ellipsis;
	float: left;
}

.ibox-collapsed-title .label {
	float: left;
	margin-left: 4px;
}

.ibox-collapsed-tools {
	display: block;
	float: none;
	margin-top: 0;
	position: relative;
	padding: 0;
	text-align: right;
}

	.ibox-collapsed-tools a {
		cursor: pointer;
		margin-left: 5px;
		color: #405482;
		font-weight: bold;
	}

.ibox-collapsed-tools {
	color: #fff;
}

	.ibox-collapsed-tools > li > a {
		padding: 4px 10px;
		font-size: 0.75rem;
	}

.ibox-collapsed .ibox-collapsed-tools.open > .dropdown-menu {
	left: auto;
	right: 0;
}


.fullscreen-ibox-collapsed-mode .animated {
	animation: none;
}

body.fullscreen-ibox-collapsed-mode {
	overflow-y: hidden;
}

.ibox-collapsed.fullscreen {
	z-index: 2030;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	margin-bottom: 0;
}

	.ibox-collapsed.fullscreen .collapse-link {
		display: none;
	}

	/*ibox custom collapse button color*/
	.collapse-link {
		color: black !important;
	}

	.ibox-collapsed.fullscreen .ibox-collapsed-content {
		min-height: calc(100% - 48px);
	}

.skin-1 .ibox-collapsed-title,
.skin-1 .ibox-collapsed-content {
	border-width: 1px;
}

/*ibox ends here*/

.boldlabel {
	font-weight:bold;
}

.ancortag:hover {
	color: #0060B6  !important;
	text-decoration: none;
	cursor: pointer;
}
.ancortag {
	color: #00A0C6 !important;
	text-decoration: none;
}
	.customhover:hover {
		text-decoration: none;
		cursor: pointer;
	}
.customhover {
	text-decoration: none;
}
div.cpficon {
	content: url(http://hensall.wcg-itx.com/images/CPF_logo_tall.png);
	/* Images default to being inline, inline items cannot have a width, so change to block: */
	/* The following may be needed if there's still a wierd looking 2-3px gap at the bottom of the image in some browsers: */
	vertical-align: bottom;
}
div.hensallicon {
	content: url(http://hensall.wcg-itx.com/images/logo.png);

	/* Images default to being inline, inline items cannot have a width, so change to block: */
	/* The following may be needed if there's still a wierd looking 2-3px gap at the bottom of the image in some browsers: */
	vertical-align: bottom;
}

.redtext {
	color:red;
}
.browntext {
	color: #E0A868;
}
.greentext {
	color: forestgreen !important;
}

.searchbar {
	margin-top: 12px;
	margin-right: 25px;
	padding-top: 5px;
	padding-right: 60px;
	width: 250px;
}

a.linkicon{
	margin-right:5px;
}

.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #737373;
	font-size: 0.6875rem;
}

table.dataTableFit td, table.dataTable th {
	/* 
		WW June 2021 - Removed, messes up headings in AJAX tables
		width: auto !important; 
	*/
	white-space: normal;
	/*text-overflow: ellipsis;*/
	overflow: hidden;
}

table.dataTableFit {
	table-layout: fixed;
	width: 100% !important;
}



/*@media(max-width:1600px ) {
	#table_excel td,th {
		font-size: 12px;
	}
}

@media(max-width:1500px ) {
	#table_excel td,th {
		font-size: 11px;
	}
}

@media(max-width:1400px ) {
	#table_excel td,th {
		font-size: 10px;
	}
}

@media(max-width:1300px ) {
	#table_excel td,th {
		font-size: 9px;
	}
}

@media(max-width:1200px ) {
	#table_excel td,th {
		font-size: 8px;
	}
}*/
.breadcrumbs .breadcrumb > li + li:before {
	content: "->"
}


 li.show .dropdown-menu {
	z-index: 9999;
}





/*
    Wizard
*/

.wizard > .steps {
	position: relative;
	display: block;
	width: 100%;
}

.wizard.vertical > .steps {
	display: inline;
	float: left;
	width: 30%;
}

.wizard > .steps > ul > li {
	width: 25%;
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li {
	float: left;
}

.wizard.vertical > .steps > ul > li {
	float: none;
	width: 100%;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
	display: block;
	width: auto;
	margin: 0 0.5em 0.5em;
	padding: 8px;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {
	background: #eee;
	color: #aaa;
	cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
	background: #1AB394;
	color: #fff;
	cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
	background: #6fd1bd;
	color: #fff;
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
	background: #ED5565;
	color: #fff;
}

.wizard > .content {
	background: #eee;
	display: block;
	margin: 5px 5px 10px 5px;
	min-height: 120px;
	overflow: hidden;
	position: relative;
	width: auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.wizard-big.wizard > .content {
	min-height: 320px;
}

.wizard.vertical > .content {
	display: inline;
	float: left;
	margin: 0 2.5% 0.5em 2.5%;
	width: 65%;
}

.wizard > .content > .body {
	float: left;
	position: absolute;
	width: 95%;
	height: 95%;
	padding: 2.5%;
}

	.wizard > .content > .body ul {
		list-style: disc !important;
	}

		.wizard > .content > .body ul > li {
			display: list-item;
		}

	.wizard > .content > .body > iframe {
		border: 0 none;
		width: 100%;
		height: 100%;
	}

	.wizard > .content > .body input {
		display: block;
		border: 1px solid #ccc;
	}

		.wizard > .content > .body input[type="checkbox"] {
			display: inline-block;
		}

		.wizard > .content > .body input.error {
			background: rgb(251, 227, 228);
			border: 1px solid #fbc2c4;
			color: #8a1f11;
		}

	.wizard > .content > .body label {
		display: inline-block;
		margin-bottom: 0.5em;
	}

		.wizard > .content > .body label.error {
			color: #8a1f11;
			display: inline-block;
			margin-left: 1.5em;
		}

.wizard > .actions {
	position: relative;
	display: block;
	text-align: right;
	width: 100%;
}

.wizard.vertical > .actions {
	display: inline;
	float: right;
	margin: 0 2.5%;
	width: 95%;
}

.wizard > .actions > ul {
	display: inline-block;
	text-align: right;
}

	.wizard > .actions > ul > li {
		margin: 0 0.5em;
	}

.wizard.vertical > .actions > ul > li {
	margin: 0 0 0 1em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
	background: #1AB394;
	color: #fff;
	display: block;
	padding: 0.5em 1em;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
	background: #eee;
	color: #aaa;
}

.wizard > .loading {
}

	.wizard > .loading .spinner {
	}




/*
    Common
*/

.wizard,
.tabcontrol {
	display: block;
	width: 100%;
	overflow: hidden;
}

	.wizard a,
	.tabcontrol a {
		outline: 0;
	}

	.wizard ul,
	.tabcontrol ul {
		list-style: none !important;
		padding: 0;
		margin: 0;
	}

		.wizard ul > li,
		.tabcontrol ul > li {
			display: block;
			padding: 0;
		}

	/* Accessibility */
	.wizard > .steps .current-info,
	.tabcontrol > .steps .current-info {
		position: absolute;
		left: -999em;
	}

	.wizard > .content > .title,
	.tabcontrol > .content > .title {
		position: absolute;
		left: -999em;
	}



	/*
    Wizard
*/

	.wizard > .steps {
		position: relative;
		display: block;
		width: 100%;
	}

	.wizard.vertical > .steps {
		display: inline;
		float: left;
		width: 30%;
	}

	.wizard > .steps > ul > li {
		width: 25%;
	}

	.wizard > .steps > ul > li,
	.wizard > .actions > ul > li {
		float: left;
	}

	.wizard.vertical > .steps > ul > li {
		float: none;
		width: 100%;
	}

	.wizard > .steps a,
	.wizard > .steps a:hover,
	.wizard > .steps a:active {
		display: block;
		width: auto;
		margin: 0 0.5em 0.5em;
		padding: 8px;
		text-decoration: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.wizard > .steps .disabled a,
	.wizard > .steps .disabled a:hover,
	.wizard > .steps .disabled a:active {
		background: #eee;
		color: #aaa;
		cursor: default;
	}

	.wizard > .steps .current a,
	.wizard > .steps .current a:hover,
	.wizard > .steps .current a:active {
		background: #1AB394;
		color: #fff;
		cursor: default;
	}

	.wizard > .steps .done a,
	.wizard > .steps .done a:hover,
	.wizard > .steps .done a:active {
		background: #6fd1bd;
		color: #fff;
	}

	.wizard > .steps .error a,
	.wizard > .steps .error a:hover,
	.wizard > .steps .error a:active {
		background: #ED5565;
		color: #fff;
	}

	.wizard > .content {
		background: #eee;
		display: block;
		margin: 5px 5px 10px 5px;
		min-height: 120px;
		overflow: hidden;
		position: relative;
		width: auto;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

.wizard-big.wizard > .content {
	min-height: 320px;
}

.wizard.vertical > .content {
	display: inline;
	float: left;
	margin: 0 2.5% 0.5em 2.5%;
	width: 65%;
}

.wizard > .content > .body {
	float: left;
	position: absolute;
	width: 95%;
	height: 95%;
	padding: 2.5%;
}

	.wizard > .content > .body ul {
		list-style: disc !important;
	}

		.wizard > .content > .body ul > li {
			display: list-item;
		}

	.wizard > .content > .body > iframe {
		border: 0 none;
		width: 100%;
		height: 100%;
	}

	.wizard > .content > .body input {
		display: block;
		border: 1px solid #ccc;
	}

		.wizard > .content > .body input[type="checkbox"] {
			display: inline-block;
		}

		.wizard > .content > .body input.error {
			background: rgb(251, 227, 228);
			border: 1px solid #fbc2c4;
			color: #8a1f11;
		}

	.wizard > .content > .body label {
		display: inline-block;
		margin-bottom: 0.5em;
	}

		.wizard > .content > .body label.error {
			color: #8a1f11;
			display: inline-block;
			margin-left: 1.5em;
		}

.wizard > .actions {
	position: relative;
	display: block;
	text-align: right;
	width: 100%;
}

.wizard.vertical > .actions {
	display: inline;
	float: right;
	margin: 0 2.5%;
	width: 95%;
}

.wizard > .actions > ul {
	display: inline-block;
	text-align: right;
}

	.wizard > .actions > ul > li {
		margin: 0 0.5em;
	}

.wizard.vertical > .actions > ul > li {
	margin: 0 0 0 1em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
	background: #1AB394;
	color: #fff;
	display: block;
	padding: 0.5em 1em;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
	background: #eee;
	color: #aaa;
}

.wizard > .loading {
}

	.wizard > .loading .spinner {
	}



/*
    Tabcontrol
*/

.tabcontrol > .steps {
	position: relative;
	display: block;
	width: 100%;
}

	.tabcontrol > .steps > ul {
		position: relative;
		margin: 6px 0 0 0;
		top: 1px;
		z-index: 1;
	}

		.tabcontrol > .steps > ul > li {
			float: left;
			margin: 5px 2px 0 0;
			padding: 1px;
			-webkit-border-top-left-radius: 5px;
			-webkit-border-top-right-radius: 5px;
			-moz-border-radius-topleft: 5px;
			-moz-border-radius-topright: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}

			.tabcontrol > .steps > ul > li:hover {
				background: #edecec;
				border: 1px solid #bbb;
				padding: 0;
			}

			.tabcontrol > .steps > ul > li.current {
				background: #fff;
				border: 1px solid #bbb;
				border-bottom: 0 none;
				padding: 0 0 1px 0;
				margin-top: 0;
			}

			.tabcontrol > .steps > ul > li > a {
				color: #5f5f5f;
				display: inline-block;
				border: 0 none;
				margin: 0;
				padding: 10px 30px;
				text-decoration: none;
			}

				.tabcontrol > .steps > ul > li > a:hover {
					text-decoration: none;
				}

			.tabcontrol > .steps > ul > li.current > a {
				padding: 15px 30px 10px 30px;
			}

.tabcontrol > .content {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 35em;
	overflow: hidden;
	border-top: 1px solid #bbb;
	padding-top: 20px;
}

	.tabcontrol > .content > .body {
		float: left;
		position: absolute;
		width: 95%;
		height: 95%;
		padding: 2.5%;
	}

		.tabcontrol > .content > .body ul {
			list-style: disc !important;
		}

			.tabcontrol > .content > .body ul > li {
				display: list-item;
			}


div.wizard div.content {
	min-height: 400px;
}
.divouter {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.divmiddle {
	display: table-cell;
	vertical-align: middle;
}

.divinner {
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	/*whatever width you want*/
}

.page-heading {
  border-top: 0;
  padding: 0 0px 10px 0px;
}

.modal {
	overflow-y: auto;
}

.staticinputfield {
	padding: 6px 12px;
	width: 100%;
}

.tranjobnote {
	white-space: pre-line;
}

.img-hover:hover {
	cursor: pointer;
}

.hide {
	display: none;
}

.btn-notification,
.tab-notification,
.card-notification {
	position: relative !important;
}

.badge-notification-btn {
	position: absolute !important;
	top: -6px !important;
	right: -13px !important;
	border-radius: 15px;
}

.badge-notification-btn-2 {
	position: absolute !important;
	top: -6px !important;
	left: -13px !important;
	border-radius: 15px;
}

.badge-notification-tab {
	position: absolute !important;
	top: -7px !important;
	right: -7px !important;
	border-radius: 15px;
}

.badge-notification-card {
	position: absolute !important;
	top: -7px !important;
	right: -7px !important;
	border-radius: 15px;
}

.badge-notification-card-2 {
	position: absolute !important;
	top: -7px !important;
	left: -7px !important;
	border-radius: 15px;
}

.tr-load-rejected {
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.load-card:hover,
.load-card.hover,
.loadgroup-card:hover,
.load-li-hover {
	background-color: #f0f0f0;
	cursor: default;
}

.load-card:active,
.loadgroup-card:active {
	background-color: #d9d9d9;
}

.load-card-danger,
.loadgroup-card-danger,
.load-li-danger {
	background-color: #ffd4d4 !important;
}
.load-card-danger:hover,
.load-card-danger.hover,
.loadgroup-card-danger:hover,
.load-li-danger-hover {
	background-color: #ffbbbb !important;
}

.load-li,
.load-li-top,
.load-li-bottom {
	line-height: 0.95em;
}

.load-li {
	border-radius: 5px;
	margin-bottom: 0rem !important;
}
.load-li-top {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.load-li-bottom {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}


th.col-pickup,
th.col-fromto,
td.col-distributor,
td.col-pickup,
td.col-delivery {
	white-space: nowrap;
}

td.col-numloads {
	white-space: nowrap;
	text-align: right;
}

#notecolumn {
	background-color: white;
	border-radius: 15px;
}

.DivToScroll {
	background-color: #F5F5F5;
	border: 1px solid #DDDDDD;
	border-radius: 4px 0 4px 0;
	color: #3B3C3E;
	font-size: 0.75rem;
	font-weight: bold;
	left: -1px;
	padding: 10px 7px 5px;
}

.DivWithScroll {
	height: 400px;
	overflow: scroll;
	overflow-x: hidden;
}

.nowrap {
	white-space: nowrap !important;
}

.tabtitle {
	color:red;
	font-weight:bold;
	font-size:medium;
}
.system-logo-img {
	max-height: 100%;
	max-width: 100%;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.exportbuttons {
	padding-top : 5px;
}

.ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}


.table-borderless td, .table-borderless th, .table-borderless tr {
	border: none !important;
	border-spacing: 0px 0px;
}

.recent-items-header {
	font-size: 1.25em;
	font-weight: bold;
}

.dropdown-alerts {
	max-height: 80vh;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

.searchbar-icon {
	border-right: none;
}

.email-attachment {
	border-radius: 15px;
}
.email-contact, .order-contract {
	border-radius: 15px;
	border: 1px solid #f2f2f2;
}

#contract-group #salescontractnbr:disabled {
	background-color: white;
}
#contract-group {
	padding-right: 20px;
}
.add-contact-btn {
	font-size: 0.8em;
	height: 2em;
	width: 2em;
	margin-right: 0.1em;
	margin-top: 0;
	margin-bottom: 0;
}

@-webkit-keyframes blink {
	from {
		color: black;
	}

	to {
		color: red;
	}
}

@-moz-keyframes blink {
	from {
		color: black;
	}

	to {
		color: red;
	}
}

@-ms-keyframes blink {
	from {
		color: black;
	}

	to {
		color: red;
	}
}

@-o-keyframes blink {
	from {
		color: black;
	}

	to {
		color: red;
	}
}

@keyframes blink {
	from {
		color: black;
	}

	to {
		color: red;
	}
}

.blink {
	color: black;
	-webkit-animation: blink 1s linear infinite;
	-moz-animation: blink 1s linear infinite;
	-ms-animation: blink 1s linear infinite;
	-o-animation: blink 1s linear infinite;
	animation: blink 1s linear infinite;
	/*animation: blink 1s linear infinite;*/
}

.dropzone {
	overflow-y: auto;
	min-height: 200px !important;
	max-height: 400px;
}

.wrap-anywhere {
	overflow-wrap: anywhere;
	min-width: 55px;
}

#hiddeninput {
	font: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	height: 0;
	overflow: hidden;
	white-space: pre;
}

.dropzoneBackground {
	position: relative;
	top: 0;
	left: 15px;
	z-index: 100;
	height: 100%;
	width: 88%;
}

.dz-preview {
	z-index: 101;
}
.dz-details {
	padding-bottom: 30px !important;
}
.dz-remove {
	font-size: 0.75em !important;
	width: 25px !important;
	display: inline-block !important;
}

.highlight {
	background-color: yellow;
}

.tdmiddle {
	text-align: center;
	vertical-align: middle !important; 
}

.tdverticalmiddle {
	vertical-align: middle !important;
}

.markertitle a {
	color: #2D2926;
}

.markertitle {
	font-weight: normal;
	font-size: 1.25rem;
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
}

.markertitletype {
	margin-top: 1px;
	padding: 0 25px 0 0;
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
	font-size: 0.6875rem;
	line-height: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #7a7a7a;
}

.vesselmarkertitletype {
	margin-top: 1px;
	padding: 0 5px 0 0;
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
	font-size: 0.6875rem;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: black;
	font-weight: bold;
}

i.menu-icon {
	width: 12px;
}

.has-search .form-control {
	padding-left: 2.375rem;
}

.has-search .form-control-feedback {
	position: absolute;
	z-index: 2;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	line-height: 2.375rem;
	text-align: center;
	pointer-events: none;
	color: #aaa;
}

/*colvis start*/
div.dt-button-collection.fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -75px;
	border-radius: 0;
}

	div.dt-button-collection.fixed.two-column {
		margin-left: -200px;
	}

	div.dt-button-collection.fixed.three-column {
		margin-left: -225px;
	}

	div.dt-button-collection.fixed.four-column {
		margin-left: -300px;
	}

div.dt-button-collection > :last-child {
	display: block !important;
	-webkit-column-gap: 8px;
	-moz-column-gap: 8px;
	-ms-column-gap: 8px;
	-o-column-gap: 8px;
	column-gap: 8px;
}

	div.dt-button-collection > :last-child > * {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
	}

div.dt-button-collection.two-column {
	width: 400px;
}

	div.dt-button-collection.two-column > :last-child {
		padding-bottom: 1px;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-ms-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
	}

div.dt-button-collection.three-column {
	width: 450px;
}

	div.dt-button-collection.three-column > :last-child {
		padding-bottom: 1px;
		-webkit-column-count: 3;
		-moz-column-count: 3;
		-ms-column-count: 3;
		-o-column-count: 3;
		column-count: 3;
	}

div.dt-button-collection.four-column {
	width: 600px;
}

	div.dt-button-collection.four-column > :last-child {
		padding-bottom: 1px;
		-webkit-column-count: 4;
		-moz-column-count: 4;
		-ms-column-count: 4;
		-o-column-count: 4;
		column-count: 4;
	}

div.dt-button-collection .dt-button {
	border-radius: 0;
}

div.dt-button-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
	background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 2001;
}

@media screen and (max-width: 640px) {
	div.dt-buttons {
		float: none !important;
		text-align: center;
	}
}

button.dt-button.processing, div.dt-button.processing, a.dt-button.processing {
	color: rgba(0, 0, 0, 0.2);
}

	button.dt-button.processing:after, div.dt-button.processing:after, a.dt-button.processing:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 16px;
		margin: -8px 0 0 -8px;
		box-sizing: border-box;
		display: block;
		content: ' ';
		border: 2px solid #282828;
		border-radius: 50%;
		border-left-color: transparent;
		border-right-color: transparent;
		animation: dtb-spinner 1500ms infinite linear;
		-o-animation: dtb-spinner 1500ms infinite linear;
		-ms-animation: dtb-spinner 1500ms infinite linear;
		-webkit-animation: dtb-spinner 1500ms infinite linear;
		-moz-animation: dtb-spinner 1500ms infinite linear;
	}
div.dt-button-collection {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	margin-top: 3px;
	padding: 8px 8px 4px 8px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.4);
	background-color: white;
	overflow: hidden;
	z-index: 2002;
	border-radius: 5px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}

	div.dt-button-collection button.dt-button, div.dt-button-collection div.dt-button, div.dt-button-collection a.dt-button {
		position: relative;
		left: 0;
		right: 0;
		width: 100%;
		display: block;
		float: none;
		margin-bottom: 4px;
		margin-right: 0;
	}

		div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {
			background-color: #28a745;
			border: 1px solid #e7eaec;
			color:white;
			box-shadow: inset 1px 1px 3px #666;
		}

		div.dt-button-collection button.dt-button:not(.active), div.dt-button-collection button.dt-button:not(.active), div.dt-button-collection div.dt-button:not(.active), div.dt-button-collection div.dt-button:not(.active), div.dt-button-collection a.dt-button:not(.active), div.dt-button-collection a.dt-button:not(.active) {
			background-color: white;
		}

		/*colvis end*/

.edit-btn {
	padding: 2px 4px 2px 4px;
}

.badge-green {
	background-color: #63ba5f;
	color: #FFFFFF;
}
.text-green {
	color: #63ba5f;
}

.parkingBtn {
	border-radius: 15px;
	padding: 3.2px 8px 3.2px 8px;
}
.templatered {
	color: #D92632;
}

.downloadicon {
	padding: 0.5em 0em 0.5em 0em !important;
	margin-top: 1em !important;
	margin-left: 1em !important;
	z-index: 1000000 !important;
}

.downloadicon:hover {
	cursor: pointer !important;
	color: #a81d26;
}

.skinny-scrollbar {
	overflow-y: auto;
}

.skinny-scrollbar::-webkit-scrollbar {
	width: 17px;
	color: grey;
}

.skinny-scrollbar::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
	border-radius: 100px;
	border: solid 5px transparent;
}

.tableFileCellHover {
	background-color: #dedede;
}

/* load list file upload boxes */
.listUploadIcon {
	background-color: transparent;
	border: none;
}

.listImg {
	padding: 3px;
	max-height: 32px;
	max-width: 32px;
}

.listLoader {
	display: inline-block;
}
/* end of load list file upload boxes */


/* order system file upload boxes */
.orderUploadBox, .carrierUploadBox {
	display: inline-flex;
	flex-flow: column;
	align-items: center;
	/*justify-content: center;*/
	border: 1px solid lightgrey;
	border-radius: 5px;
	min-height: 75px;
	min-width: 100px;
	max-height: 350px;
	max-width: 450px;
}

.uploadBoxLoader {
	display: inline-flex;
}
.uploadBoxLoaderParent {
	display: inline;
	position: relative;
	top: 0.5em;
}
.uploadBoxFileHover, .orderUploadBox:hover, .carrierUploadBox:hover {
	background-color: #dedede;
	cursor: pointer;
}
.ub-tablecell {
	align-items: center;
	justify-content: center;
	border: none !important;
	min-height: 35px !important;
	min-width: 0 !important;
	padding: 5px;
	height: 100%;
	width: 100%;
}
.ub-sm {
	height: 80px;
	width: 120px;
	padding: 5px;
}
.ub-md {
	height: 100px;
	width: 180px;
	padding: 5px;
}
.ub-lg {
	height: 100%;
	min-height: 125px;
	max-width: 250px;
	min-width: 225px;
	padding: 5px;
}
.ub-xl {
	height: 100%;
	min-height: 125px;
	width: 100%;
	padding: 5px;
}
.orderFileType {
}
.orderFileInfo {
	font-size: 0.625rem;
	color: grey;
}
.orderFileImgParent {
	display: inline-flex;
	flex-flow: column;
	align-items: center
}
.orderFileRemoveBtn{
	width: 15px;
	height: 15px;
	font-size: 0.625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.orderFileImg {
	padding: 3px;
	max-height: 64px;
}
.file-img-sm {
	max-height: 32px !important;
}
/* end of order system file upload boxes */






/* ============ */
/* SCREENOBJECT */
/* ============ */

.dynamic-modal-dialog-parent {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
}

.dynamic-modal-dialog {
	max-width: 100%;
	width: 80% !important;
	display: inline-block;
}

	.dynamic-modal-dialog h4 {
		text-align: left;
	}

	.dynamic-modal-dialog .modal-header {
		padding: 15px 30px;
		text-transform: capitalize;
	}

.fieldnotepopover {
	background-color: #fff;
	font-size: 0.625rem;
	line-height: 1;
	margin-left: 3px;
	padding: 2px 5px;
}

	.fieldnotepopover:focus {
		background-color: #e6e6e6;
		outline: none !important;
	}

/* profile icon/img */
.row-profile-name-icon-container,
.row-profile-img-icon-container {
	padding-right: 20px;
	position: relative;
}

.row-profile-initials-container {
	background-color: #eee;
	color: #676a6c;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	text-align: center;
}

	.row-profile-initials-container:hover {
		color: #4d94ff;
	}

.row-profile-initials-text {
	font-size: calc(2.5rem / 3);
	line-height: 1;
	position: relative;
	top: calc(2.5rem / 3);
}

/* File Import Tab */
.file-upload-error-box {
	margin: 10px 10px;
	background-color: #dc3545;
	transition: background-color 1s;
}

	.file-upload-error-box hr {
		margin: 0 0 3px 0;
	}

#file-upload-spinner {
	display: none;
	align-items: center;
}

.three-dot-spinner {
	width: 50px;
	height: 50px;
	margin-left: 10px;
	position: relative;
}

#file-upload-complete {
	display: none;
}

/* historytab.xsl */
#historytab {
	padding-top: 15px;
	padding-bottom: 15px;
}

.history-row-element {
	position: relative;
}

.history-tab-body {
	padding-left: 60px;
}

.empty-history-row {
	margin: 25px 0;
	padding: 25px 0 25px 15px;
}


/* listinvoice.xsl */
.detailed-tracking-image-container {
	display: flex;
}

.detailed-tracking-thumbnail {
	border-radius: 5px;
	margin-right: 5px;
	-webkit-filter: brightness(100%);
}

.detailed-tracking-thumbnail:hover {
	-webkit-filter: brightness(50%);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.badge-file-count {
	position: absolute !important;
	top: -6px !important;
	right: -13px !important;
	background-color: #d1dade;
	color: #5e5e5e;
	font-size: 0.6875rem;
	border-radius: 20px;
}


/* tranjobcontract */
.mismatch-warning {
	color: #d92632;
}


/* tranjobdriversummary */
.commodity-code {
	color: #000;
	position: relative;
	display: inline-block;
}

.commodity-code > span {
	visibility: hidden;
	width: 120px;
	background-color: #6c757d;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}

.commodity-code:hover > span {
	visibility: visible;
}

.hiddenCol {
	overflow:hidden;
	max-width: 35px;
	min-width: 35px;
	opacity: 0;
}

.scrollLoadList {
	overflow-y: auto;
	overflow-x: hidden;
	list-style: none;
	max-height: 1000px;
}

.advancedlink {
	font-size: 0.625rem !important;
	font-weight: normal !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}

.advancedlink:hover {
	text-decoration: underline;
}

.orderbell {
	font-size: 1.0625rem !important;
	min-height: 0 !important;
	padding: 0px 0px 7px 0px !important;
	margin: 0 !important;
}

#searchorder {
	width: 15vw;
	min-width: 180px;
}

.redcircle {
	background: red;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	display: inline-block;
/*	text-align: center;*/
	vertical-align: middle;
}

.yellowcircle {
	background: #FFBF00;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	display: inline-block;
	/*	text-align: center;*/
	vertical-align: middle;
}
.greencircle {
	background: green;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	display: inline-block;
	/*	text-align: center;*/
	vertical-align: middle;
}

.circleblink {
	/*padding: 15px;*/
	/*text-align: center;*/
	display: inline-block;
	/*line-height: 50px;*/
	font-size: 0.9375rem;
	font-family: cursive;
	color: black;
	animation: blink 1s linear infinite;
}


@keyframes circleblink {
	0% {
		opacity: 0;
	}

	50% {
		opacity: .5;
	}

	100% {
		opacity: 1;
	}
}


.textbtn {
	border: none !important;
	background-color: inherit !important;
	color: red !important;
}

.textbtn:hover {
	background: inherit !important;
}

.emailAddrInput {
	min-width: 200px !important;
}

.popover {
	pointer-events: none;
}

/*@media (min-width: 992px) {
	.modal-xxl {
		max-width: 1140px;
	}
}*/


.modal-xxl {
	max-width: 1340px;
}


.btn-secondary {
	background-color: #5b748a !important;
}

/* Exclamation mark for table rows */
.warning-row {
	position: relative;
}

.warning-row::before {
	content: 'ⓘ';
	color: red;
	font-size: 3rem;
	position: absolute;
	left: 4.5rem;
	top: 2.5rem;
}

.warning-row.nobefore::before {
	display: none;
}

/* Exclamation mark for notes */

.warning-note {
	position: relative;
}

.warning-note::before {
	content: 'ⓘ';
	color: red;
	font-size: 2rem;
	position: absolute;
	left: -2.3rem;
	top: -0.75rem;
}

.disabled-section {
	opacity: 0.5;
	pointer-events: none;
}

.uploadbox-full {
	max-height: 100% !important;
	max-width: 100% !important;
}
/* ===== Program Search Modal (Scoped Styles) ===== */
/* Controls the modal width */
.modal-dialog.program-search {
	max-width: 1200px !important;
	width: 100%;
}

#programSearchModal {
	background: #fff;
	padding: 0;
	margin: 0;
	font-family: "Segoe UI", Arial, sans-serif;
}

	/* ===== Search Bar ===== */
	#programSearchModal .search-container {
		text-align: right;
		padding: 10px 15px 0 15px;
		margin-bottom: 0;
	}

	#programSearchModal #programSearchInput {
		max-width: 300px;
		font-size: 13px;
		height: 28px;
		margin-left: 72%;
	}

	/* ===== Left Column: Navigation Menu ===== */
	#programSearchModal #tagNav {
		background: #fafafa;
		border-right: 1px solid #ddd;
		padding: 15px 10px;
		min-height: 65vh;
		max-height: 70vh;
		overflow-y: auto;
	}

		#programSearchModal #tagNav h3 {
			font-size: 15px;
			font-weight: 700;
			margin: 0 0 10px 5px;
			color: #535456;
		}

		#programSearchModal #tagNav ul {
			list-style: none;
			padding-left: 0;
			margin: 0;
			display: block;
		}

		#programSearchModal #tagNav li {
			display: block;
			margin: 3px 0;
		}

		#programSearchModal #tagNav a {
			display: block;
			padding: 5px 8px;
			color: #d92632;
			text-decoration: none;
			font-size: 14px;
			border-radius: 3px;
			transition: background-color 0.15s, color 0.15s;
		}

			#programSearchModal #tagNav a:hover {
				background-color: #e9ecef;
				color: #A53319;
				text-decoration: none;
			}
	/* ===== Right Column: Content ===== */
	#programSearchModal #tagContent {
		padding: 15px 25px;
		max-height: 70vh;
		overflow-y: auto;
	}

	#programSearchModal #tagContent h3 {
			margin-top: 15px;
			margin-bottom: 8px;
			font-size: 16px;
			font-weight: 700;
			color: #535456;
			border-bottom: 1px solid #eee;
			padding-bottom: 3px;
	}

	/* ===== Menu Item Styling ===== */
	#programSearchModal .menu-item {
		margin-bottom: 6px; /* tightened spacing */
		padding-bottom: 4px;
		border-bottom: 1px solid #f5f5f5; /* subtle divider for clarity */
	}

	#programSearchModal .menu-item:last-child {
		border-bottom: none;
	}

	/* Program name (like Company, GL Code) */
	#programSearchModal .menu-link {
		display: inline-block;
		color: #d92632;
		font-weight: 600;
		font-size: 16px; /* slightly larger for emphasis */
		text-decoration: none;
		line-height: 1.2em;
		margin-bottom: 1px;
	}

	#programSearchModal .menu-link:hover {
		text-decoration: underline;
		color: #0056b3;
	}

	/* Program description (smaller and lighter) */
	#programSearchModal .menu-desc {
		display: block;
		font-size: 12.5px;
		color: #555;
		line-height: 1.3em;
	}

	/* ===== Scrollbar Styling ===== */
	#programSearchModal #tagNav::-webkit-scrollbar,
	#programSearchModal #tagContent::-webkit-scrollbar {
		width: 6px;
	}

	#programSearchModal #tagNav::-webkit-scrollbar-thumb,
	#programSearchModal #tagContent::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

		#programSearchModal #tagNav::-webkit-scrollbar-thumb:hover,
		#programSearchModal #tagContent::-webkit-scrollbar-thumb:hover {
			background: #999;
		}