/* Version 1.12 */
@import url("CustomerStyleSheetVars.css");
/* Look in CustomerStyleSheetVars.css for theme :root variables */

/* USE ROBOTO AS GLOBAL FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');

/*pro4 styling to hide old items*/
.form-group i.pro4DPaddon {
	display: none;
}

.form-group i.pro4inputaddon, .form-group div.pro4inputaddon {
	display: none;
}

/* General global app variable settings */
:root {
	/* --- Mobile colors --- */
	--mobile-overlay-bg: rgba(255, 255, 255, .1);
	--mobile-overlay-placeholder-text: rgba(0, 0, 0, .5);
	/* -- General use colors --- */
	--error: rgba(198, 40, 40, 1);
	--error-light: rgb(255, 170, 163) /*rgba(255, 95, 82, 1)*/;
	--error-dark: rgba(142, 0, 0, 1);
	--error-text: rgb(255, 255, 255);
	--danger: var(--error); /*#f44336;*/
	--danger-dark: var(--error-dark); /*#d32f2f;*/
	--danger-light: var(--error-light);
	--info: rgb(33, 150, 243);
	--info-dark: rgb(25, 118, 210);
	--info-light: rgb(187, 222, 251);
	--success: rgb(76, 175, 80);
	--success-dark: rgb(56, 142, 60);
	--success-light: rgb(200, 230, 201);
	--warning: rgba(255, 238, 186, 1);
	--warning-dark: rgba(133, 100, 4, 1);
	--warning-light: rgba(255, 243, 205, 1);
	--light: rgb(240, 243, 245);
	--light-text: var(--dark);
	--light-dark: /*rgb(215, 215, 215)*/ rgb(210, 214, 216);
	--light-dark-text: var(--dark);
	--light-dark-darker: rgb(200, 205, 208);
	--light-light: rgb(250, 250, 250);
	--light-light-text: var(--dark);
	--dark: rgb(66, 66, 66);
	--dark-dark: rgb(33, 33, 33);
	--dark-light: rgb(117, 117, 117);
	--dark-light-text: var(--light);
	/* --- Calculations needed if putting a separator between tabbies --- */
	--tab-divider: 1.5px;
	--tab-width-adj: calc(100% + var(--tab-divider));
	--tab-margin-left: calc(-1 * var(--tab-divider));
	/* Opacity variables */
	--alpha1: 0.1;
	--alpha2: 0.2;
	--alpha3: 0.3;
	--alpha4: 0.4;
	--alpha5: 0.5;
	--alpha6: 0.6;
	--alpha7: 0.7;
	--alpha8: 0.8;
	--alpha9: 0.9;
	/* ------------------------------------------------------------------------------*/
	/* Variables available for use that are not being used                           */
	/*		-- Please make sure to uncomment any variable if you want to put it in use */
	/* ----------------------------------------------------------------------------- */
	/*--mdc-theme-on-primary: #fff;
	--mdc-theme-on-secondary: #fff;
	--mdc-theme-on-surface: #000;
	--mdc-theme-on-error: #fff;
	--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-dark: white;
	--mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
	--mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
	--mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
	--mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);*/
}

/* Alternative Headings */
heading1 {
	display: block;
	font-size: 6rem;
	line-height: 6rem;
	letter-spacing: -.015625em;
	font-weight: 300;
}

heading2 {
	font-size: 3.75rem;
	line-height: 3.75rem;
	letter-spacing: -.0083333333em;
	font-weight: 300;
	display: block;
}

heading3 {
	font-size: 3rem;
	line-height: 3.125rem;
	letter-spacing: normal;
	display: block;
	font-weight: 300;
}

heading4 {
	font-size: 2.125rem;
	line-height: 2.5rem;
	letter-spacing: .0073529412em;
	font-weight: 300;
}

heading5 {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 2rem;
	display: block;
}

heading6 {
	line-height: 2rem;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: .0125em;
}

heading7 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 500;
	letter-spacing: .009375em;
}

heading8 {
	font-size: 1rem;
	line-height: 1.50rem;
	font-weight: 500;
	letter-spacing: .009375em;
}

subheading[right] {
	line-height: 2rem;
	font-size: 1rem;
	font-weight: 400;
	display: inline-block;
	text-align: right;
	width: 100%;
	color: var(--text-hint);
	text-transform: uppercase;
	padding-bottom: 1em;
	letter-spacing: 1px;
}

#app .form {
}

.datepicker .table-condensed {
	min-width: 200px;
}

h2 + p {
	text-indent: 20px;
}

/* ============ INPUTS ============ */

select.form-control {
	cursor: pointer;
}

.form-group {
	margin-bottom: 4px;
}

#app .form-group.row {
}

/* div that holds All form inputs */
#app div.form-group.row > div {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* The form input for text, selects, and textareas that have LABELS */
/*input[data-type="datetime"], #app label + input:not(.chosen-search-input), #app label + select, label + textarea, #app .chosen-container, .profilecard .form-group input, select.fluid.form-control {*/
.form-group input, .form-group select, .chosen-container-single .chosen-single { /* , select + .chosen-container-single.chosen-with-drop  */
	/*background-color: var(--theme-input-bg);*/
	border: 0px;
	box-shadow: none;
	font-weight: 400;
	color: var(--theme-input-color);
	border-bottom: 1px solid;
	border-bottom-color: var(--text-hint);
	padding: 4px 8px 1px 8px;
	height: auto;
}

/* Multi selection chosen container */
.chosen-container.chosen-container-multi .chosen-choices {
	background: var(--light) !important;
	border-radius: 2px;
}
/* Single selection "multi" picker */
.chosen-container-single .chosen-single {
	background: white;
	height: 23px;
	padding: 1px 8px 1px 8px;
	border-radius: 0px;
}

	.chosen-container-single .chosen-single span {
		height: 100%;
		display: inline-flex;
		align-items: center;
		margin-top: 2px;
	}

	.chosen-container-single .chosen-single div b { /* arrow button */
		/*margin-top: 6px;*/
		height: calc(100% - 6px);
	}

/* Label for all form inputs EXCEPT checkboxes */
.form-group:not(.plain) label:not(.form-check-label) {
	background: transparent;
	color: rgba(0, 0, 0, 0.38); /* Need to use a fallback for old IE that doesn't use CSS variables */
	color: var(--text-disabled);
	font-weight: 400 /*!important*/;
	font-size: 10.5px /*!important*/;
	letter-spacing: .5px;
	/*margin-bottom: -4px;*/
	border-radius: 5px 5px 0 0;
}

.form-group label {
	padding: 0px;
}

/*#tableClientPicker_wrapper > .row:first-child > div:last-child {
	float: right;
}
#tableClientPicker_wrapper > .row:first-child #tableClientPicker_filter {
	width: 100%;
	background: none;
	border: none;
	padding: 0;
}

	div#tableClientPicker_wrapper > div:first-child > div {
	display: inline-flex;
	align-items: center;
	justify-content: stretch;
	height: 22px;
	margin-bottom: .5em;
}*/

/**/
.modal div[id*="_wrapper"] > .row:first-child > div:last-child {
	float: right;
}

	.modal div[id*="_wrapper"] > .row:first-child > div:last-child > .dataTables_filter {
		width: 100%;
		background: none;
		border: none;
		padding: 0;
	}

.modal div[id$="_wrapper"] > div:first-child > div {
	display: inline-flex;
	align-items: center;
	justify-content: stretch;
	height: 22px;
	margin-bottom: .5em;
}

.padding-40 {
	padding: 40px;
}


/* --------- CUSTOM CHECKBOXES ---------------- */
.custom-checkboxes.chkbox {
	margin: 0 4px 0 0;
}

.custom-checkboxes.label {
	color: var(--text);
	font-size: unset;
	padding: 0;
	margin: 0 1em 0 0;
	font-weight: normal;
}

.custom-checkboxes.div[readonly] {
	color: var(--text-disabled);
}

.custom-checkboxes.container.inline {
	display: inline-flex;
	align-items: center;
	margin: 3px;
	width: 100%;
}

	.custom-checkboxes.container.inline .label.right {
		margin-left: .5em;
	}

/* -------------- PICKERS ----------------- */
.container-fluid.picker {
	margin-top: unset;
	margin-bottom: unset;
	padding: 0;
}

.modal .picker h2 {
	text-indent: unset;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding-top: 4px !important;
}

.modal .picker input[type="search"] {
	margin-left: 0px !important;
}

.modal .picker .custom-checkboxes.inline {
	padding-left: 0;
	margin-bottom: 12px;
}

.modal .picker .input-group {
	margin-top: 0 !important;
}

.modal .picker .dataTables_scroll {
	margin-bottom: 1.5em;
}

/* ============ ACTIVE INPUTS ============ */
input:active:not([readonly]):not(.mdc-text-field__input) {
	transition: all .15s ease-in-out;
}

input:focus:not([readonly]):not(.mdc-text-field__input) {
	font-weight: 500;
	color: var(--theme-input-color--focus);
	transition: all .15s ease-in-out;
}

.form-control:focus {
	/* bootstrap shadow */
	/*box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);*/
	box-shadow: none;
	border-color: var(--theme-input-color--focus);
	background-color: var(--theme-input-bg--focus);
}

/* Input with invalid entry */
.InvalidEntry:not(.mdc-text-field__input) {
	border-bottom-color: var(--error) !important;
	background: var(--error-light) !important;
	color: var(--error) !important;
}

/* INACTIVE / READONLY */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	border-bottom: none !important;
	background: var(--light) !important;
	color: var(--text-disabled);
	border-radius: 4px !important;
}

.input-group .form-control[disabled] {
	border-radius: 16px 0 0 16px !important;
}

/* disabled input icon buttons */
#app .form-control[disabled] ~ .input-group-addon, .form-control[readonly] ~ .input-group-addon, fieldset[disabled] .form-control ~ .input-group-addon {
	border-bottom: none;
	background: var(--light);
}

.input-group .form-control[disabled] ~ .input-group-addon:last-child {
	border-radius: 0 16px 16px 0 !important;
}

input[data-type="datetime"], #app label + input[readonly]:not(.chosen-search-input), #app label + select, label + textarea, #app .chosen-container {
}

/* This removes underlines when viewing an employee card */
#app input[readonly][data-type="datetime"], #app input[readonly], div.modal-dialog input[readonly] {
	border: none !important;
	box-shadow: none;
	background: none !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/*color: var(--text-disabled);*/
	cursor: not-allowed;
}

#app textarea[readonly], div.modal-dialog textarea[readonly] {
	border: none !important;
	box-shadow: none;
	background: var(--light) !important;
	overflow: auto;
	cursor: not-allowed;
}

#app select[disabled]:not(.keepborder) { /* Employee card view -- select*/
	/*color: var(--text-disabled);*/
	border: none;
	box-shadow: none;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
}

#app .employeeCard div[id^="empEditSection"] select[disabled]:not(.keepborder) {
	padding-left: 8px;
}

#app .employeeCard div[id^="empEditSection"] input[type="checkbox"] {
	margin-left: 8px;
}

	#app .input-group-addon.readonly {
		display: none;
	}

#app input.name {
	font-weight: bold;
	font-size: 13px;
}

#app input.email, #app input.phone {
	font-weight: bold;
	color: #0072c6;
	text-decoration: underline;
	cursor: pointer;
}

	#app input.email:hover, #app input.phone:hover {
		text-decoration: none;
	}

/* Labels for inputs that are on CARDS/PANELS */
div .panel-body label:not(.form-check-label):not(.control-label) {
	background: unset !important;
	font-size: 12px !important;
	color: inherit !important;
	font-weight: 700 !important;
	padding-left: 0px;
}

/* -------------- RADIO ------------ */
.radio-inline {
	display: inline-flex;
	align-items: center;
	padding-left: 20px !important;
}

/* START profile/card styling */
.profilecard {
	margin-bottom: 15px;
}

	.profilecard .panel {
		margin-bottom: 5px;
	}

	.profilecard .panel-heading {
		font-size: 13px;
		background: var(--primary);
		font-weight: 700;
		color: white;
		text-transform: uppercase;
		padding: .75em;
	}

.panel-body {
	padding: 6px 0 10px 0;
	width: 100%;
}

	.panel-body .form-group > div label + .form-control { /* Form controls with INLINE LABELS TO THE LEFT */
		margin-left: 8px;
	}

	.panel-body .row {
		/*margin-left: 0;
		margin-right: 0;*/
	}


	.panel-body .form-group.row div:not(.bootstrap-datetimepicker-widget) {
	}

	.panel-body .form-group.row div .form-control[readonly], .panel-body .form-group.row div .form-control[disabled] {
		background: none !important;
	}

div.employeepickerinput {
	background-color: var(--light);
}
/* ============= EMPLOYEE CARD/ COBRA RECORD STYLES ============= */
.employeeCard div.panel-body .form-group.row,
.cobraRecord div.panel-body .form-group.row {
	margin: 0;
	padding: 2px 0;
	/*min-height: 24px;
	max-height: 32px;*/
}

	.employeeCard div.panel-body .form-group.row > div,
	.cobraRecord div.panel-body .form-group.row > div {
		margin-top: 0 !important;
	}

.form-group.row > div > .form-control {
	margin-left: 0px !important;
}

.padding-top-20 {
	padding-top: 20px;
}

.employeeCard div.panel-body .form-group.row div:first-child,
.cobraRecord div.panel-body .form-group.row div:first-child {
	min-height: 24px;
}

.employeeCard div.panel-body .form-group.row div:last-child {
}

.employeeCard div.panel-body .form-group.row div:first-child label,
.cobraRecord div.panel-body .form-group.row div:first-child label {
	/*height: 24px;
	max-height: 36px;*/
	font-size: .9rem !important;
	min-height: 24px;
}

.employeeCard div.panel-body .form-group.row div .form-control, .cobraRecord div.panel-body .form-group.row div input {
	/*height: 100%;*/
	/*height: 24px;
	max-height: 36px;*/
	height: 24px;
	margin-top: 0;
}

.employeeCard div.panel-body .form-group.row div:last-child select,
.cobraRecord div.panel-body .form-group.row div:last-child select { /* SELECT control on employee card */
	padding-left: 4px;
}

	.employeeCard div.panel-body .form-group.row div:last-child select[disabled] { /* DISABLED SELECT control on employee card */
		padding-left: 0px;
	}

.employeeCard .panel-body .form-group.h2.row {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin-top: 1em;
}

	.employeeCard .panel-body .form-group.h2.row h2 { /* Employee > Allocations page causing some issues */
		/*padding: 0 !important;
		margin: 0 !important;*/
	}

.employeeCard h2 > button.btn {
	/* padding: 0 12px!important; */
	line-height: 1 !important;
	float: right !important;
	margin-top: -3px !important;
	font-size: 13px !important;
}

.employeeCard h2.row {
	color: pink;
}

.employeeCard .form-group:not(.plain) label:not(.form-check-label) span {
	font-size: 10.5px;
}

.employeeCard div.panel-body .form-group.row div label, .cobraRecord div.panel-body .form-group.row label {
	font-size: .9rem !important;
	min-height: 24px;
	display: flex;
	align-items: center;
}

.employeeCard div.panel-body .form-group.row div input:focus { /* ACTIVE/FOCUS */
}
/* ============ TABS styling ============ */
#app .tab-h:not(.sub) .nav {
	border: none;
}

	/* Tab normal (NOT subtabs) */
	/*#app .tab-h:not(.sub) .nav li a {
		background: var(--primary);
		color: var(--primary-text);
		text-transform: uppercase;
		height: 42px;
		padding: 12px;
		margin: 0;
		padding: 8px 15px;
		font-weight: 500;
		letter-spacing: .05em;
	}*/

	/* Tab normal (ALL tabs - including subtabs) */
	/*#app .tab-h .nav li a {
	width: 100%;
	display: block;
	margin: 0;
	border: none;
	font-weight: 500;
	letter-spacing: .05em;
}*/

	/* Tab active (EXCEPT subtabs) */
	/*#app .tab-h:not(.sub) .nav li.active a {
	background: var(--primary-dark);
	color: var(--primary-text);
}*/

	/* Tab ACTIVE */
	/*#app .tab-h .nav li.active a {
	box-shadow: -2px 0px 0px 1px rgba(58, 58, 57,.2);
	border-bottom: 4px solid var(--secondary);
	margin-left: -1.5px;
	margin-left: var(--tab-margin-left);
	width: calc(100% + 1.5px);
	width: var(--tab-width-adj);
}*/

	/* Tab HOVER state */
	/*#app .tab-h .nav li a:hover {
	background: var(--secondary);
	color: var(--secondary-text-hover);
}*/

	/* ACTIVE tab in HOVER state */
	/*#app .tab-h .nav li.active a:hover {
	color: var(--primary-text-hover);
	cursor: pointer;
	background: var(--secondary-dark);
}*/

	/*#app .tab-h .nav li a, #app .tab-h .nav li.active a, #app .tab-h .nav li a:hover, #app .tab-h:not(.sub) .nav li a:hover:after, #app .tab-h .nav li.active a:hover, #app .tab-h .nav li.active a:hover:after {
		transition: all .15s ease-in-out;
		transition-property: background, color, border-color;
	}*/

	/* *************************  */
	#app .tab-h:not(.sub) .nav li {
		margin-bottom: 2px;
	}
		/* Tab normal */
		#app .tab-h:not(.sub) .nav li a {
			/*background: var(--theme-gradient);
			border: 1px solid var(--theme-gradient-border);*/ /* gradients are ew */
			background: var(--light);
			border: 1px solid var(--light-dark);
			color: var(--text);
			height: 42px;
			padding-top: 12px;
			border-radius: 6px 6px 0 0;
			/*border-bottom: none;*/
		}

/* Tab normal -- IF USING DIVIDER */
/*#app .tab-h .nav li a {
	width: 100%;
	display: block;
	margin: 0;
	padding: 8px 0px;
	border: none;
	left: 0px;
	font-weight: 500;
	letter-spacing: .05em;
}*/

#app .tab-h .nav li a {
	width: 100%;
	display: block;
	font-weight: 500;
	letter-spacing: .05em;
}

/* Tab active */
#app .tab-h:not(.sub) .nav li.active a {
	/*background: var(--primary-dark);*/
	/*color: var(--primary-text);*/
}

/* Tab ACTIVE */
#app .tab-h .nav li.active a {
	box-shadow: -2px 0px 0px 1px rgba(58, 58, 57,.2);
	border-bottom: 4px solid var(--secondary);
}

/* Tab ACTIVE -- IF USING DIVIDER */
/*#app .tab-h .nav li.active a {
	margin-left: -1.5px;
	margin-left: var(--tab-margin-left);
	width: calc(100% + 1.5px);
	width: var(--tab-width-adj);
	box-shadow: -2px 0px 0px 1px rgba(58, 58, 57,.2);
	border-bottom: 4px solid var(--secondary);
}*/

/* Tab HOVER state */
#app .tab-h .nav li a:hover {
	background: var(--secondary-light);
	color: var(--secondary-light-text-hover);
}

/* Tab HOVER state -- IF USING DIVIDER */
/*#app .tab-h .nav li a:hover {
	background: var(--secondary);
	color: var(--secondary-text-hover);
	margin-left: -1.5px;
	margin-left: var(--tab-margin-left);
	width: calc(100% + 1.5px);
	width: var(--tab-width-adj);
	padding-left: 1.5px;
	padding-left: var(--tab-divider);
}*/

/* Tab divider */
#app .tab-h:not(.sub) .nav li a::after {
	/*border-right: 1.5px solid var(--primary-dark);
	border-right: var(--tab-divider) solid var(--primary-dark);
	content: ' ';
	padding-right: 10px;*/
}

/* Tab DIVIDER HOVER state */
#app .tab-h:not(.sub) .nav li a:hover:after {
	/*border-color: var(--secondary);*/
}

/* ACTIVE tab in HOVER state */
#app .tab-h .nav li.active a:hover {
	/*color: var(--primary-text-hover);*/
	cursor: pointer;
	/*background: var(--secondary-dark);*/
	border-color: var(--secondary);
}
	/* ACTIVE tab in HOVER state -- IF USING DIVIDER */
	/*#app .tab-h .nav li.active a:hover {
	color: var(--primary-text-hover);
	cursor: pointer;
	background: var(--secondary-dark);
	margin-left: -1.5px;
	margin-left: var(--tab-margin-left);
	padding-left: 0;
	width: calc(100% + 1.5px);
	width: var(--tab-width-adj);
}*/

	/* ACTIVE tab DIVIDER HOVER state */
	#app .tab-h .nav li.active a:hover:after {
		/*border-color: var(--secondary-dark);*/
	}

/* Handles the spacing to the left of tab divider */
#app .tab-h:not(.sub) .nav li a::before {
	/*content: ' ';
	margin-left: 10px;*/
}

/* ACTIVE tab DIVIDER HOVER state */
#app .tab-h .nav li.active a:hover:after {
	border-color: var(--secondary-dark);
}

/* Handles the spacing to the left of tab divider */
#app .tab-h:not(.sub) .nav li a::before {
	content: ' ';
	margin-left: 10px;
}



#app .tab-h .nav li a, #app .tab-h .nav li.active a, #app .tab-h .nav li a:hover, #app .tab-h:not(.sub) .nav li a:hover:after, #app .tab-h .nav li.active a:hover, #app .tab-h .nav li.active a:hover:after {
	transition: all .15s ease-in-out;
	transition-property: background, color, border-color;
}

	#app .tab-h .nav li a, #app .tab-h .nav li.active a, #app .tab-h .nav li a:hover, #app .tab-h:not(.sub) .nav li a:hover:after, #app .tab-h .nav li.active a:hover, #app .tab-h .nav li.active a:hover:after {
		transition: all .15s ease-in-out;
		transition-property: background, color, border-color;
	}

/* ============ END TABS styling ============ */

/* ============ START DataTables ============*/
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected, #app table.dataTable tbody > tr.selected { /* TODO Change this to primary-light */
	background: var(--secondary-light);
	color: var(--secondary-light-text);
}

	table.dataTable tbody > tr > .selected #app .input-group-addon.search {
		color: var(--primary-light-text);
		background: var(--primary-light);
	}

/*
	input icon color
.dataTables_wrapper .input-group-addon i {
}

input icon bg color
.dataTables_wrapper .input-group-addon {
	border-bottom: none;
}

*/

#app .dataTables_info {
	display: none;
}

/* SEARCH BAR in Data Tables */
/*#app .dataTables_filter input[type='search'] {*/
#app input[type='search'] {
	width: 100% !important;
	height: 28px !important;
	font-size: 13px !important;
	/*border-radius: 25px !important;*/
}

/* ============ END DataTables ============== */

/* Adds space to the top on "plain" labels */
.form-group.plain.top label, .form-group.plain.top label + div {
	padding: .5em 0;
	margin-top: 1em;
}

/* Checkbox labels on the side */
.form-check-label {
	display: inline-flex !important;
	align-items: center !important;
}

	/* Checkboxes INPUT with labels on the side */
	.form-check-label > input[type="checkbox"] {
		margin-top: -1px;
		margin-right: .5em;
	}

/* Inline labels + inputs */
.label-row {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	width: 100%;
}

	.label-row label input {
		margin-top: 0;
	}

/* if there will be a row of checkboxes in a group, please add the class "checkboxes" to the group row div */
.form-group.row.checkboxes label, .form-check-label {
	background: none;
	font-size: 12px !important;
	margin-left: 0px !important;
	padding-left: 0px !important;
	color: var(--text-secondary);
	color: rgba(0, 0, 0, 0.54) !important; /* Need to use a fallback for old IE that doesn't use CSS variables */
	font-weight: 500 !important;
}

.form-check-label {
}

.form-group.row.checkboxes label {
}

/* SELECTION BOXES */
#app .chosen-container, #app .chosen-choices {
	box-shadow: none;
	background-image: none;
	border: none;
	background: white;
	max-width: 100%;
}

#app .chosen-choices {
	border: 1px solid var(--light-dark);
	border-radius: 4px;
}

/* ============ INPUT BUTTONS ============ */
/* input icon color */
#app .input-group-addon i {
	color: var(--text-disabled);
	margin-top: 2px;
	background: transparent;
	transition: all .15s ease-in-out;
}

/* input icon bg color */
#app .input-group-addon {
	background: var(--theme-input-bg);
	border-radius: 0px;
	border: 0px;
	border-bottom: 1px solid rgba(0,0,0,.3);
	padding: 0 12px;
	transition: all .15s ease-in-out;
}

#app .form-control:focus + .input-group-addon, #app .form-control:active + .input-group-addon, #app .bootstrap-datetimepicker-widget + .input-group-addon { /* if the input is focused, style the button the same */
	background: var(--theme-input-bg--focus);
	border-color: var(--theme-input-color--focus);
}

	#app .form-control:focus + .input-group-addon i, #app .form-control:active + .input-group-addon, #app .bootstrap-datetimepicker-widget + .input-group-addon i {
		color: var(--theme-input-color--focus);
	}

.input-group-btn {
	padding: 0px;
	/*height: 34px;*/
}

	.input-group-btn:last-child > .btn {
		margin: 0px;
		padding: 3px 10px !important;
		/*height: 100%;*/
	}

/* input icon color */
.dataTables_wrapper .input-group-addon i {
}

/* input icon bg color */
.dataTables_wrapper .input-group-addon {
}

/* Group buttons when input is active */
.form-group input:active:not([readonly]) + .input-group-addon, .form-group input:focus:not([readonly]) + .input-group-addon {
	/*border-bottom: 2px solid var(--primary) !important;
	background: var(--primary-light) !important;
	font-weight: 500;
	transition: all .15s ease-in-out;*/
}

/* Dropdown button next to input */
input.form-control + .dropdown.AddEdit, input.form-control + .dropdown.AddEdit button {
	padding: 2px 10px 1.5px 10px !important;
	margin-left: -6px !important;
	margin-top: -1px;
}


/* File Input */
input[type="file"] {
	background: none;
	border: none;
}


/* SECTION HEADER TEXT */
#app .form h2, #challenge h2, #disclaimer h2 {
	/*padding: 0 14px;
	font-size: 2.125rem;
	letter-spacing: .0073529412em;
	margin-top: .5em;*/
	padding: 0 14px;
	font-size: 1.25rem;
	/* line-height: 3.5rem; */
	letter-spacing: .0073529412em;
	margin-top: 1em;
	/* border-bottom: 3px dotted #999999; */
	background: var(--light);
	padding-bottom: 8px;
	padding-top: 8px;
	margin-bottom: 8px;
	/* border-top-left-radius: 8px; */
	/* border-top-right-radius: 8px; */
	border: 1px solid var(--light-dark);
}

#app #support h3 {
	font-size: 1.15rem;
	letter-spacing: .0073529412em;
	/* border-bottom: 3px dotted #999999; */
	padding-top: 8px;
	color: var(--mdc-theme-text-hint);
}

#app #support .supportCenter {
	border: 2px dashed;
	border-color: var(--light-dark);
}

	#app #support .supportCenter, #app #support .supportCenter input {
		background-color: var(--default);
		margin: .5em;
	}

/*#app .form h2:before, #challenge h2:before, #disclaimer h2:before {
		content: "\f0a9";
		font-family: 'Font Awesome 5 Pro';
		position: relative;
		font-size: 16px;
		color: #444444;
		left: -25px;
		margin-right: -20px;
	}*/
#app .form h2.empty:before, #challenge h2.empty:before, #disclaimer h2.empty:before {
	content: "";
}

.modal h2 {
	font-size: 13pt !important;
	color: #616161 !important;
	margin: 10px 13px 10px 5px !important;
	padding: 10px 10px !important;
	font-weight: bold;
	text-indent: 20px;
}

/*.modal h2:before {
		content: "\f0a9";
		font-family: 'Font Awesome 5 Pro';
		position: absolute;
		font-size: 13pt;
		left: -5px;
	}*/

/* END SECTION HEADER TEXT (h2) */

.SundialIframeHolder {
	padding-top: 15px;
}

/*THIS IS ALL FOR MOBILE*/
@media screen and (max-width: 767px) {
	.SundialIframeHolder {
		padding-top: 150px;
	}

	.form-group:not(.plain) label:not(.form-check-label) {
		padding-top: .5em;
	}

	#app .form-control {
		font-size: 16px;
	}

	#app .dt-buttons { /* @media screen and (max-width: 767px) */
		float: left !important;
		width: auto !important;
	}

	#app .dataTables_filter * { /* @media screen and (max-width: 767px) */
		width: auto !important;
	}

	#app .dataTables_filter label div { /* @media screen and (max-width: 767px) */
		float: left !important;
	}

	#app .dataTables_filter label .input-group-addon.search { /* @media screen and (max-width: 767px) */
		float: none !important;
	}

	#app .dataTables_filter > div:not(.dt-buttons) { /* @media screen and (max-width: 767px) */
		float: right;
		width: auto;
	}

	#app .dataTables_filter > div > div { /* @media screen and (max-width: 767px) */
		float: left !important;
		display: table !important;
	}

	#app .dataTables_filter > div select { /* @media screen and (max-width: 767px) */
		float: left !important;
	}

	#app .dataTables_filter { /* @media screen and (max-width: 767px) */
		display: table;
		text-align: right;
	}

	#app .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { /* @media screen and (max-width: 767px) */
		padding: 8px;
		vertical-align: middle !important;
		font-size: 16px !important;
	}

	#app div.dataTables_scrollBody .table thead th { /* @media screen and (max-width: 767px) */
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}

	#app .form-control { /* @media screen and (max-width: 767px) */
	}

	/* @media screen and (max-width: 767px) */
	#app *, html, #app body, #app div, #app dl, #app dt, #app dd, #app ul, #app btn ol, #app li, #app h1, #app h2, #app h3, #app h4, #app h5, #app h6, #app h2 #app pre, #app form, #app label, #app fieldset, #app input, #app p, #app blockquote, #app th, #app td {
		font-size: 16px;
	}

	#app .btn { /* @media screen and (max-width: 767px) */
		font-size: 16px !important;
		padding: 6px 10px;
	}

	#app .employeeCard h2 > button.btn {
		/* padding: 0 12px!important; */
		line-height: 1 !important;
		float: right !important;
		margin-top: -3.5px !important;
		padding: 4px 10px !important;
	}

	.clientInfo { /* @media screen and (max-width: 767px) */
		font-size: 16px;
	}

	#app h1, #app h1 span { /* @media screen and (max-width: 767px) */
		font-size: 22px !important;
	}

	#app .dataTables_filter input[type='search'].input-sm { /* @media screen and (max-width: 767px) */
		padding: 6px 10px !important;
		font-size: 16px !important;
		height: 34px !important;
	}

	#app .dataTables_scrollBody { /* @media screen and (max-width: 767px) */
		height: auto !important;
	}

	#progress-side .toggle { /* @media screen and (max-width: 767px) */
		margin-left: -8px !important;
		margin-top: 14px !important;
	}

	#progress-side .panel {
		width: 350px;
	}

	.mypayrollhome .col-xs-4 { /* @media screen and (max-width: 767px) */
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.modal { /* @media screen and (max-width: 767px) */
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 760px !important;
	}

	.side-menu .navbar-nav li a { /* @media screen and (max-width: 767px) */
		padding: 21px 15px !important;
	}

	.navbar ul li a {
		font-size: 22px;
	}

	#header .navbar ul li a {
		font-size: 13.5px;
	}

	.side-menu .navbar .panel-collapse ul li a { /* @media screen and (max-width: 767px) */
		font-size: 16px !important;
		padding-left: 35px !important;
		padding-right: 12px !important;
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}
}
/* ============ END @media screen and (max-width: 767px) */


.chosen-container-multi .chosen-choices li.search-choice {
	border-radius: 16px !important;
	background-color: var(--light-dark);
	background-image: none;
	color: var(--light-dark-text);
	font-family: Roboto, sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.01786em;
	text-decoration: inherit;
	text-transform: inherit;
	height: auto;
	display: inline-flex;
	position: relative;
	align-items: center;
	box-sizing: border-box;
	padding: 4px 12px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	overflow: hidden;
	border-color: /*transparent;*/ rgba(0,0,0,.18);
	box-shadow: none;
	margin-top: 6px;
	margin-bottom: 6px;
}

	.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
		top: 6px;
		right: 5px;
	}

	/* Spacing to the right of the selection badge text (before the "x" that closes it)*/
	.chosen-container-multi .chosen-choices li.search-choice span {
		margin-right: .7em;
	}

.modal table.dataTable thead .sorting:after, .modal table.dataTable thead .sorting_asc:after, .modal table.dataTable thead .sorting_desc:after, .modal table.dataTable thead .sorting_asc_disabled:after, .modal table.dataTable thead .sorting_desc_disabled:after {
	bottom: 3px !important;
}

#header nav ul li i {
	margin-right: 4px;
}

#header nav ul li a i.fa-2x {
	font-size: 1.5em!important;
}

table.matchDataTables button.btn, table.dataTable button.btn {
	background-color: transparent !important;
	border: none !important;
}

	table.matchDataTables button.btn.btn-info, table.dataTable button.btn.btn-info {
		color: #0072c6;
	}

		table.matchDataTables button.btn.btn-info i:hover, table.dataTable button.btn.btn-info i:hover {
			color: #0072c6 !important;
		}

	table.matchDataTables button.btn.btn-dark.red, table.dataTable button.btn.btn-dark.red {
		color: #cc1a1a !important;
	}

		table.matchDataTables button.btn.btn-dark.red:hover, table.dataTable button.btn.btn-dark.red:hover {
			color: #cc1a1a !important;
			background-color: transparent !important;
		}

	table.matchDataTables button.btn.btn-dark:not(.red), table.dataTable button.btn.btn-dark:not(.red) {
		color: #000 !important;
	}

		table.matchDataTables button.btn.btn-dark:not(.red) i:hover, table.dataTable button.btn.btn-dark:not(.red) i:hover {
			color: #000 !important;
		}

button.btn {
	background-color: #ffffff !important;
	color: #444444 !important;
	border: 1px solid #c9c9c9 !important;
}

	button.btn.btn-primary:hover, button.btn.btn-secondary:hover, button.btn.btn-default:hover {
		background-color: #616161 !important;
	}

	button.btn.red {
		background-color: #ffffff !important;
		color: #444444 !important;
	}

	button.btn i {
		padding-right: 3px !important;
	}

	button.btn:hover {
		color: #ffffff !important;
	}

	button.btn.btn-info i {
		color: #0072c6 !important;
	}

	button.btn.btn-info:hover i {
		color: #ffffff !important;
	}

a.btn-info {
	background-color: #ffffff !important;
	color: #444444;
	border: 1px solid #c9c9c9 !important;
	height: 28px;
	font-size: 13px;
}

	a.btn-info span {
		font-size: 13px !important;
	}

	a.btn-info i {
		color: #0072c6 !important;
	}

	a.btn-info:hover i {
		color: #ffffff !important;
	}

button.btn.btn-dark.red {
}

	button.btn.btn-dark.red i {
		color: #cc1a1a !important;
	}

	button.btn.btn-dark.red:hover i {
		color: #ffffff !important;
	}

.dataTable tr button.btn.btn-dark.red:hover i {
	color: #cc1a1a !important;
}

.dataTable tr button.btn.btn-info:hover i {
	color: #0072c6 !important;
}

.dataTable tr button.btn.btn-info:hover {
	color: #444444 !important;
}

button.btn.btn-dark:not(.red) {
}

	button.btn.btn-dark:not(.red) i {
		color: #000000 !important;
	}

		button.btn.btn-dark:not(.red) i:hover {
			color: #ffffff !important;
		}

/*#app .panel-heading {
	color: #444444;
	background: linear-gradient(#F9F9F9, #E9E9E9) !important;
	border-radius: 0;
	border: none;
	font-weight: bold;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom: 1px solid #d9d9d9;
}*/
/*custom sizing*/
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #FFFFFF;
}

.form-control {
	/*padding: 3px 10px !important;
	height: 28px;
	font-size: 13px;*/
}

.dataTables_filter .form-group {
	margin-bottom: 0px !important;
}

#app .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
	opacity: .40;
	background-color: #a9a9a9 !important;
}

	#app .btn.disabled, .btn[disabled], fieldset[disabled] .btn:hover {
		opacity: .40;
		background-color: #a9a9a9 !important;
	}

#app .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 8px;
	padding-left: 8px;
	vertical-align: middle;
}

#app table.table-bordered.dataTable th {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
	padding-right: 22px;
}

.btn {
	padding: 4px 10px !important;
	font-size: 13px !important;
}

.jumbotron {
	padding-left: 50px !important;
	padding-right: 50px !important;
	padding-bottom: 15px !important;
	padding-top: 10px !important;
}

	.jumbotron .newstext {
		margin-top: 3px !important;
	}

.btn.btn-info.icononly, .btn.btn-dark.icononly {
	background: none !important;
}

	.btn.btn-info.icononly i {
		color: #0072c6 !important;
	}

	.btn.btn-dark.icononly i {
		color: #cc1a1a !important;
	}

	.btn.btn-info.icononly:hover {
		color: #0072c6 !important;
		background: #e9e9e9 !important;
	}

	.btn.btn-dark.icononly:hover {
		color: #cc1a1a !important;
		background: #e9e9e9 !important;
	}


/* end */
html {
	-webkit-font-smoothing: antialiased;
}
/* reset */
*,
html,
body,
div,
dl,
dt,
dd,
ul, btn ol,
li,
h1,
h2,
h3,
h4,
h5,
h6, h2 pre,
form,
label,
fieldset,
input,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
	font-family: Roboto,sans-serif;
	font-size: 13px /*.93rem*/;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color: #BA0707;
	text-decoration: none;
}

	a:hover {
		color: #C9C9C9;
	}

body {
	/*background: #F0F0F0;*/
	color: #444444;
	-webkit-font-smoothing: antialiased;
	line-height: 1;
	width: 100%;
}

.ClientPickerButton {
	width: 75px;
}

.CPHighlight {
	background: rgb(150, 200, 250);
}

.divWaitOverlay {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba( 0, 0, 0, .1 ) url('../images/Loading.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
}

	/* Anytime the body has the loading class, our
   modal element will be visible */
	body.loading .divWaitOverlay {
		display: block;
	}

body.loadingoverride .divWaitOverlay {
	display: block;
}

.side-menu {
	position: fixed;
	width: 200px;
	height: 100%;
	top: 50px;
	background: var(--light);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
}

	.side-menu .navbar {
		border: none;
	}

	.side-menu .navbar-header {
		width: 100%;
		border-bottom: 1px solid #D4D4D4;
	}

	.side-menu .panel-collapse ul li a {
		font-size: 12px !important;
	}

	.side-menu .navbar-nav .active a {
		/*color: #444444 !important;*/
		color: var(--secondary-text) !important;
		/*background: #CDE6F7;*/
		background: var(--secondary);
		margin-right: -1px;
		font-weight: bold;
	}

		.side-menu .navbar-nav .active a:hover {
			background: var(--secondary-dark) !important;
			color: var(--secondary-dark-text) !important;
		}

	.side-menu .navbar-nav li {
		display: block;
		width: 100%;
		/*border-bottom: 1px solid #D4D4D4;*/
	}

		.side-menu .navbar-nav li a {
			padding: 10px 15px;
			font-weight: normal;
		}

			.side-menu .navbar-nav li a:hover {
				background: var(--light-dark);
			}

			.side-menu .navbar-nav li a .glyphicon {
				padding-right: 10px;
			}

	.side-menu .dropdown {
		border: 0;
		margin-bottom: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

		.side-menu .dropdown .caret {
			float: right;
			margin: 9px 5px 0;
		}

.caret {
	color: #FFFFFF;
}

.side-menu .dropdown .indicator {
	float: right;
}

.side-menu .dropdown > a {
	/*border-bottom: 1px solid #D4D4D4;*/
}

.side-menu .dropdown .dropdown > a {
	border-bottom: none;
}

.side-menu .dropdown .panel-body {
	padding: 0;
}

	.side-menu .dropdown .panel-body .navbar-nav {
		width: 100%;
		border-color: transparent !important;
		background-color: var(--light-dark) !important;
	}

		.side-menu .dropdown .panel-body .navbar-nav li {
			padding-left: 15px;
			/*border-bottom: 1px solid #23282e;*/
		}

			.side-menu .dropdown .panel-body .navbar-nav li:last-child {
				border-bottom: none;
			}

	.side-menu .dropdown .panel-body .panel > a {
		margin-left: -20px;
		padding-left: 35px;
	}

	.side-menu .dropdown .panel-body .panel-body {
		margin-left: -15px;
	}

		.side-menu .dropdown .panel-body .panel-body li {
			padding-left: 30px;
		}

			.side-menu .dropdown .panel-body .panel-body li:last-child {
				/*border-bottom: 1px solid #23282e;*/
			}

.side-menu #search-trigger {
	background-color: #f3f3f3;
	border: 0;
	border-radius: 0;
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px 18px;
}

.side-menu .brand-name-wrapper {
	min-height: 50px;
}

	.side-menu .brand-name-wrapper .navbar-brand {
		display: block;
	}

/* Main body section */
.side-body {
	margin-left: 200px;
}

@media (max-width: 768px) {
	.side-menu {
		position: relative;
		width: 100%;
		height: 0;
		border-right: 0;
		/*border-bottom: 1px solid #e7e7e7;*/
	}

	#app.container-fluid {
		padding-top: 130px !important;
	}

	.navbar-toggle-fullscreen {
		display: none;
	}

	.side-menu .brand-name-wrapper .navbar-brand {
		display: inline-block;
	}

	.brand-name-wrapper input[type=text] {
		display: none;
	}
	/* Slide in animation */
	@-moz-keyframes slidein {
		0% {
			left: -250px;
		}

		100% {
			left: 10px;
		}
	}

	@-webkit-keyframes slidein {
		0% {
			left: -250px;
		}

		100% {
			left: 10px;
		}
	}

	@keyframes slidein {
		0% {
			left: -250px;
		}

		100% {
			left: 10px;
		}
	}

	@-moz-keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -250px;
		}
	}

	@-webkit-keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -250px;
		}
	}

	@keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -250px;
		}
	}
	/* Slide side menu*/
	/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
	.side-menu-container > .navbar-nav.slide-in {
		-moz-animation: slidein 300ms forwards;
		-o-animation: slidein 300ms forwards;
		-webkit-animation: slidein 300ms forwards;
		animation: slidein 300ms forwards;
		/*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
	}

	.side-menu-container > .navbar-nav {
		/* Add position:absolute for scrollable menu -> see top comment */
		position: fixed;
		left: -250px;
		width: 250px;
		top: 43px;
		top: 98px;
		height: 100%;
		border-right: 1px solid #e7e7e7;
		background-color: #f8f8f8;
		-moz-animation: slideout 300ms forwards;
		-o-animation: slideout 300ms forwards;
		-webkit-animation: slideout 300ms forwards;
		animation: slideout 300ms forwards;
		/*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
	}
	/* Uncomment for scrollable menu -> see top comment */
	.absolute-wrapper {
		width: 235px;
		-moz-animation: slideout 300ms forwards;
		-o-animation: slideout 300ms forwards;
		-webkit-animation: slideout 300ms forwards;
		animation: slideout 300ms forwards;
		/*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
	}

	@-moz-keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 200px;
		}
	}

	@-webkit-keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 200px;
		}
	}

	@keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 200px;
		}
	}

	@-moz-keyframes bodyslideout {
		0% {
			left: 200px;
		}

		100% {
			left: 0;
		}
	}

	@-webkit-keyframes bodyslideout {
		0% {
			left: 200px;
		}

		100% {
			left: 0;
		}
	}

	@keyframes bodyslideout {
		0% {
			left: 200px;
		}

		100% {
			left: 0;
		}
	}
	/* Slide side body*/
	.side-body {
		margin-left: 5px;
		position: relative;
		-moz-animation: bodyslideout 300ms forwards;
		-o-animation: bodyslideout 300ms forwards;
		-webkit-animation: bodyslideout 300ms forwards;
		animation: bodyslideout 300ms forwards;
		/*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
	}

	.body-slide-in {
		-moz-animation: bodyslidein 300ms forwards;
		-o-animation: bodyslidein 300ms forwards;
		-webkit-animation: bodyslidein 300ms forwards;
		animation: bodyslidein 300ms forwards;
		/*-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;*/
	}
	/* Hamburger */
	.navbar-toggle {
		border: 0;
		float: right;
		padding: 18px;
		margin: 0;
		border-radius: 0;
		background-color: #f3f3f3;
	}

	.navbar-header {
		/* this is probably redundant */
		position: fixed;
		z-index: 3;
		background-color: #f8f8f8;
	}
	/* Dropdown tweek */
	.dropdown .panel-body .navbar-nav {
		margin: 0;
	}
}

nav li a {
	color: #FFFFFF !important;
}

.glyphicon {
	color: #C9C9C9;
}

.nav.navbar-nav li:hover:not(.autoComplete_result) {
	background-color: #f8f8f8 !important;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.nav li ul {
	border-top: 1px solid #9e9e9e !important;
	border-bottom: 1px solid #9e9e9e !important;
}

.container-fluid {
	margin-top: 50px;
	margin-bottom: 30px;
}

@media (min-width: 768px) {
	.navbar-toggle-fullscreen {
		border: 0;
		margin: 0;
		border-radius: 0;
		display: block;
		text-align: center;
		font-size: 1.5em;
		width: 100%;
		padding: 5px;
		height: 30px;
		color: #C9C9C9 !important;
		cursor: pointer;
	}

		.navbar-toggle-fullscreen i {
			color: #23282e;
		}

			.navbar-toggle-fullscreen i:hover {
				color: #343b44;
			}

		.navbar-toggle-fullscreen i {
			margin-left: -18px;
		}

	.side-menu-closed {
		width: 50px;
	}

			.side-body-bigger {
				margin-left: 50px;
			}

	.closed {
		display: none;
	}
}

.Overlay {
	position: fixed; /* Sit on top of the page content */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}

.MenuSearchItem {
	display: block;
	width: 100%;
	border-bottom: 1px solid #23282e;
	float: left;
	background: #2e353d;
	color: #FFFFFF;
	padding: 10px;
	line-height: 20px;
	height: 40px;
	width: 100%;
}

	.MenuSearchItem a {
		padding: 15px;
		line-height: 20px;
		height: 50px;
		width: 100%;
		color: #FFFFFF;
		cursor: pointer;
		text-decoration: none;
	}

.TableContainer {
	border: 1px solid #c9c9c9;
	border-radius: 2px;
	background: #FFFFFF;
	margin-top: 20px;
	width: 100%;
	display: table;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
	box-shadow: 0 4px 5px rgba(0,0,0,.15);
}

.scroll-left {
	height: 34px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

	.scroll-left .scroller {
		color: #FFFFFF !important;
		position: absolute;
		width: 100%;
		height: 100%;
		margin-right: 25px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		line-height: 34px;
		text-align: center;
		/* Starting position */
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		/* Apply animation to this element */
		-moz-animation: scroll-left 30s linear infinite;
		-webkit-animation: scroll-left 30s linear infinite;
		animation: scroll-left 30s linear infinite;
	}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
	0% {
		-moz-transform: translateX(100%);
	}

	100% {
		-moz-transform: translateX(-100%);
	}
}

@-webkit-keyframes scroll-left {
	0% {
		-webkit-transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(-100%);
	}
}

@keyframes scroll-left {
	0% {
		-moz-transform: translateX(100%); /* Browser bug fix */
		-webkit-transform: translateX(100%); /* Browser bug fix */
		transform: translateX(100%);
	}

	100% {
		-moz-transform: translateX(-100%); /* Browser bug fix */
		-webkit-transform: translateX(-100%); /* Browser bug fix */
		transform: translateX(-100%);
	}
}

.Search {
	line-height: normal !important;
}

.NotificationIcon {
	position: absolute;
	width: 15px;
	height: 15px;
	top: 26px;
	left: 14px;
	background-color: red;
	border-radius: 50%;
	color: #FFFFFF;
	text-align: center;
	font-size: 13pt;
	line-height: normal;
}

.DontDisplay {
	display: none !important;
}

.NotificationItem {
	line-height: normal;
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 10px;
}

	.NotificationItem:not(:first-child):after {
		display: block;
		content: '';
		height: 3px;
		margin-top: -10px;
		background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0)));
		background-image: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
		background-image: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
		background-image: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
		background-image: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
	}

.side-menu .dropdown .panel-body .panel > a {
	margin-left: 0px;
}

.NewsOpen {
	padding-bottom: 0 !important;
}

.breadcrumbholder {
	position: fixed;
	left: 200px;
	right: 0;
	top: 50px;
	height: 25px;
}

.BreadCrumbsOpen {
	margin-top: 40px;
}

@media screen and (max-width: 767px) {
	#btnHSearch input {
		display: none;
	}

	#btnHSearch span {
		display: none;
	}

	#btnHSearch .dropdown {
		display: none;
	}

	.breadcrumbholder {
		left: 0;
		top: 106px;
	}

	.BreadCrumbsOpen {
		margin-top: 95px;
	}
}

.breadcrumb > li + li:before {
	content: "\2190";
	color: #02010A;
}

.NotificationHeader {
	width: 205px;
	float: left;
	font-weight: bold;
}

.NotificationText {
	font-weight: normal;
	width: 100%;
	float: left;
}

.checkboxspan {
	float: left;
	margin-left: 25px;
	line-height: 36px;
	color: #555555;
}

.checkbox {
	width: 20px;
	float: left;
	position: relative;
	background: #FFFFFF;
	margin-top: 0px;
	margin-bottom: 0px;
}

	.checkbox label {
		cursor: pointer;
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0;
		border-radius: 2px;
		background: #ffffff;
		border: 1px solid #cccccc;
		padding-left: 0px !important;
	}

		.checkbox label:before {
			content: "\f00c";
			font-family: 'Font Awesome 5 Pro';
			font-style: normal;
			font-weight: normal;
			text-decoration: inherit;
			color: #FFF;
			font-size: 18px;
			padding-right: 0.5em;
			position: absolute;
			top: 0px;
			left: 0;
			z-index: 1;
		}

		.checkbox label:after {
			opacity: 0;
			content: '';
			color: #FFFFFF;
			position: absolute;
			width: 18px;
			height: 18px;
			border-radius: 2px;
			left: 0;
			background: #0072c6;
		}

	.checkbox input[type=checkbox]:checked + label:after {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
	}

input {
	border-radius: 0px !important;
	color: #000000;
}

select {
	border-radius: 0px !important;
	color: #000000;
}

.table.table-striped.dataTable {
	width: 100% !important;
}

.AutoCompleteList {
	background: #ffffff;
	border: 1px solid #c9c9c9;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

	.AutoCompleteList li {
		list-style-type: none;
		text-align: left;
	}

		.AutoCompleteList li:hover {
			background-color: #edf7ff;
		}

		.AutoCompleteList li.ACSelect {
			background-color: #0072c6;
			color: white;
		}

	.AutoCompleteList ul {
		padding: 0px;
		margin: 0px;
	}

.dataTables_paginate {
	float: right;
}

.dataTables_length {
	float: left;
}

table.dataTable tbody td { /*We do this so that you cant select the text in datatables.  If we dont have this and you click really fast it will mess things up.*/
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}



/* new app */

#header { /* Top navbar container */
	height: 45px;
	width: 100%;
	background: var(--primary); /*var(--customer-background)*/
	top: 0;
	left: 0;
	position: fixed;
	z-index: 998;
	overflow: hidden !important;
}

	#header .logo {
		min-width: 151px;
		height: 30px !important;
		margin: 8px 0 0 10px;
		float: left;
		text-decoration: none;
	}

	#header nav {
		min-width: 380px;
		min-height: 45px;
	}

		#header nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			float: right;
		}

			#header nav ul li {
				display: inline-block;
				float: left;
			}

			#header nav ul[aria-labelledby="helpchangetab"] li:hover {
				background: transparent;
			}

			#header nav ul li a {
				display: block;
				/*padding: 12px 5px;*/
				padding: 12px;
				color: var(--primary-text);
				text-decoration: none;
			}

				#header nav ul li a:hover {
					color: var(--primary-text-hover);
				}

				#header nav ul li a i {
					color: var(--primary-text) !important;
				}

				#header nav ul li a span {
					color: var(--primary-text) !important;
					display: none;
					position: relative;
					top: -5px;
					margin-left: 4px;
					margin-right: 2px;
					/*margin: 0 10px;*/
				}
				#header nav ul.dropdown-menu li a i {
					color: #23282E !important;
				}

/* Header nav - supervisor / employee mode toggle */
.ToggleUserMode {
	padding: 11px 8px 6px 8px;
	color: var(--paper);
}

.ToggleUserMode:hover {
	background: transparent!important;
}

	.ToggleUserMode a {
		color: var(--paper) !important;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

.modetoggle--container {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 10px;
	font-weight: 400;
	margin-bottom: 2px;
	letter-spacing: .4px;
	display: inline-block;
}

.ToggleUserMode .btn-group a {
	font-size: 11px !important;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .3px;
}

.ToggleUserMode .btn-primary.active {
	cursor: default;
}
/* END Header nav - supervisor / employee mode toggle */

/* ASSUME ID Toggle */
.ToggleAssumeMode {
	padding-top: 11px;
	margin: 0 12px 0 0;
}

	.ToggleAssumeMode .pro-btn {
		font-size: 11px !important;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: .3px;
		padding: 2.5px 8px;
		width: 56px;
		text-align: left;
	}
		.ToggleAssumeMode .pro-btn i {
			margin-right: 0px !important;
			position: absolute;
			top: 4px;
			right: 6px;
		}
/* END ASSUME ID Toggle*/

@media screen and (min-width: 768px) {
	#header nav ul li a {
		padding: 13px 10px;
	}
}

#header nav ul li a .fa-chevron-down {
	position: relative;
	top: -4px;
}

#header nav ul li a span + .fa-chevron-down {
	margin-left: 2px;
}

#header nav ul li a.tab i {
	color: #ffffff;
}

#header nav ul li a.tab span {
	color: #ffffff;
	margin-left: 4px;
	margin-right: 2px;
}

#header nav ul li a.tab:hover {
	/*background: #D5D5D5;*/
}

#header nav ul li a input {
	color: #23282E !important;
	padding: 5px;
	position: relative;
	top: -5px;
	margin-right: 10px;
	margin-bottom: -15px;
	font-weight: normal;
}

#header nav ul ul {
	width: 100%;
}

@media screen and (max-width: 1120px) {
	#header nav ul ul {
		float: right;
		position: relative;
		margin-left: -500px;
	}
}

#header nav ul ul li {
	width: 100%;
	display: block;
	color: #23282E;
	position: relative;
}

	#header nav ul ul li i {
		color: #23282E;
	}

	#header nav ul ul li a {
		color: #23282E !important;
		background: #FFFFFF;
		font-size: 12px;
		font-family: 'Poppins', sans-serif;
	}

#header nav ul li a {
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#header nav ul li a:hover:not([id*="usermode"]) {
	background: var(--primary-dark);
}

	#header nav ul ul li hr {
		padding: 0;
		margin: 0;
	}

	#header nav ul ul li span.help-label {
		color: var(--mdc-theme-text-hint);
		padding: 12px 10px 4px 0px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0 12px;
		display: block;
		position: absolute;
		z-index: 1001;
	}

@media screen and (min-width: 1120px) {
	#header nav ul li a span:not(.help-label) {
		display: inline-block;
	}
}

.side-menu {
	height: 100%;
	overflow: auto;
	display: block;
	z-index: 10;
}

	.side-menu nav {
		display: none;
	}

	.side-menu .side-menu-container ul {
		/*max-height: 580px;*/
		overflow-x: hidden;
		overflow-y: auto;
	}

		.side-menu .side-menu-container ul ul {
			overflow: hidden;
		}

@media screen and (min-width: 768px) {
	.side-menu {
		top: 45px;
	}

		.side-menu nav {
			display: block;
		}
}

@media screen and (max-width: 768px) {
	.side-menu {
		position: fixed;
		height: auto;
		top: 45px;
	}

		.side-menu .navbar-nav {
			width: 100%;
		}

		.side-menu .side-menu-container > .navbar-nav {
			position: static;
			/*max-height: 400px;*/
		}

		.side-menu .navbar-nav {
			border-top: solid 1px #9E9E9E;
		}

		.side-menu .navbar {
			margin-bottom: 0;
		}

		.side-menu .navbar-nav {
			margin: 0;
		}

/*	#header nav ul li a i.fa-2x {
		font-size: 1.2em;
	}*/
}

@media screen and (min-width: 768px) {
	.side-menu nav {
		display: block !important;
	}
}

#side-menu a.hamburger {
	padding: 10px 15px;
	margin: 10px;
  display: inline-block;
  color: #FFF;
	background: var(--customer-background);
	text-decoration: none;
}

#side-menu span.clientInfo {
	display: none;
}

@media screen and (max-width: 768px) {
	#side-menu span.clientInfo {
		display: flex;
		color: #000;
		position: relative;
		text-decoration: none;
		float: right;
		right: 10px;
		font-weight: bold;
		width: calc(100% - 100px);
		height: 66px;
		align-items: center;
	}
}


#side-menu a.hamburger:hover {
	/*background: #343B44;*/
}

#side-menu a.hamburger i {
	color: #FFF;
}

#side-menu a.hamburger i:hover {
	color: var(--secondary) /*#FFF*/;
}

@media screen and (min-width: 768px) {
	#side-menu a.hamburger {
		display: none
	}
}

#side-menu nav {
	font-size: 12pt;
}

	#side-menu nav i {
		width: 20px;
		text-align: center;
	}

		#side-menu nav i.fa-sort-up {
			padding-top: 8px;
			font-size: 15px;
		}

		#side-menu nav i.fa-sort-down {
			/*padding-top: 4px;*/
			font-size: 15px;
		}

.navbar-toggle-fullscreen {
	position: absolute;
	bottom: 65px;
}

nav ul li a {
	color: #000000 !important;
	font-weight: bold;
}

nav ul li:not(.active) a:hover {
	color: #444444;
}

/*#header nav.navbar.navbar-default ul:not(.dropdown-menu) li:not(.active) a:hover {
	color: #444444;
	background-color: #444444;
}*/

#header nav.navbar.navbar-default ul.dropdown-menu:not(.bootstrap-datetimepicker-widget) li:not(.active) a:hover {
	color: #444444 !important;
	background-color: #edf7ff !important;
}

nav a[aria-expanded=false] .fa-sort-up {
	display: none;
}

nav a[aria-expanded=true] .fa-sort-down {
	display: none;
}

nav li.dropdown {
	border-bottom: none !important;
}

#footer {
	height: 40px;
	width: 100%;
	color: #FFFFFF;
	font-size: 12pt;
	background: var(--customer-background);
	left: 0;
	bottom: 0;
	z-index: 99;
	overflow: hidden;
	position: fixed;
	text-align: center;
	line-height: 40px;
	border-top: solid 1px #9E9E9E;
}

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

		#footer a i {
			color: #FFFFFF;
			text-decoration: none;
			position: relative;
			top: 3px;
			margin-left: 10px;
		}

		#footer a:hover i {
			color: #D5D5D5;
		}

	#footer #marqueeControls {
		width: 150px;
		position: absolute;
		color: #FFFFFF;
		background: #cc1a1a;
		padding-left: 5px;
		z-index: 10;
		cursor: pointer;
	}

@media screen and (min-width: 768px) {
	#footer #marqueeControls {
		width: 250px;
	}
}

#footer marquee ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

	#footer marquee ul li {
		color: #FFFFFF;
		float: left;
		margin-right: 150px;
		font-size: 13px;
	}

#marqueeControls .play {
	display: none;
}

#footer marquee {
	position: relative;
}

#footer .gradient-left, #footer .gradient-right {
	width: 299px;
	display: none;
	position: absolute;
	top: 0;
	z-index: 2;
	overflow: hidden;
	cursor: pointer;
}

#footer .gradient-left {
	left: 200px;
	float: left;
	background: url('../../media/images/news-gradient-left.png') no-repeat 0 0;
}

#footer .gradient-right {
	float: right;
	right: 0px;
	background: url('../../media/images/news-gradient-right.png') no-repeat 0 0;
}

@media screen and (min-width: 768px) {
	#footer .gradient-left, #footer .gradient-right {
		display: inline-block;
	}
}

.navbar-default {
	background: transparent;
	border: none;
}

.side-menu .nav li ul {
	border: none
}

.side-menu .dropdown .panel-body .navbar-nav li {
	padding-left: 0;
	border: none;
}

.side-menu .panel-body ul li a {
	color: #000000 !important;
	background: #ffffff !important;
	padding: 5px 35px !important;
}

	.side-menu .panel-body ul li a:hover {
		text-decoration: underline;
		background: var(--secondary-light) !important;
		color: var(--secondary-light-text) !important;
	}

.side-menu .panel-body ul li.active a {
	/*color: #444444 !important;*/
	/*background: #CDE6F7 !important;*/
	color: var(--secondary-text) !important;
	background: var(--secondary) !important;
	text-decoration: none !important;
}

.side-menu .panel-body ul li li.active a {
	color: #0072c6 !important;
	background: #fff !important;
	text-decoration: none !important;
	border-right: none !important;
}

.side-menu .panel-body ul li ul li a {
	padding: 5px 75px !important;
}

.navbar-toggle-fullscreen i {
	color: #444444 !important;
	font-size: 1.2em !important;
}

.nav ul li {
	border: none !important;
}

/* login */

/*#login {
	height: 470px;
	width: 400px;
	border: solid 1px #000;
	margin: -235px 0 0 -200px;
	position: absolute;
	left: 50%;
	top: 50%;
}

	#login .header {
		height: 102px;
		background: var(--customer-background);
		border-bottom: solid 2px #FFFFFF;
		text-align: center;
	}

		#login .header img {
			padding-top: 15px;
		}

	#login div.navigation {
		height: 40px;
		width: 100%;
		color: #FFFFFF;
		background: var(--customer-background);
		margin: 0;
		padding: 0;
		text-align: center;
	}

		#login div.navigation ul.nav {
			display: inline-block;
			margin: 0 auto;
			padding: 0;
			border: none;
		}

			#login div.navigation ul.nav li {
				margin: 0 -3px 0 0;
			}

				#login div.navigation ul.nav li a {
					color: #FFFFFF;
					background: var(--customer-background);
					-webkit-border-radius: 0px;
					-moz-border-radius: 0px;
					border-radius: 0px;
					border: none;
					border-left: solid 1px #9E9E9E;
					border-right: solid 1px #9E9E9E;
					text-decoration: none;
				}

					#login div.navigation ul.nav li a:hover {
						background: #343B44;
					}

				#login div.navigation ul.nav li.active a {
					color: #23282E;
					background: #FFFFFF;
				}

				#login div.navigation ul.nav li a i {
					padding-right: 10px;
				}

	#login .tabContent {
		width: 270px;
		margin: 0 auto;
		padding: 20px 10px;
		display: none;
	}

		#login .tabContent.active {
			display: block;
		}

	#login .container {
		width: 250px;
	}

		#login .container .col-6 {
			width: 123px;
			display: inline-block !important;
		}

	#login a {
		color: #23282E;
		text-decoration: underline;
	}

		#login a:hover {
			text-decoration: none;
		}

	#login .btn i {
		padding-right: 5px;
	}*/

#disclaimer, #challenge {
	height: 600px;
	width: 600px;
	border: solid 1px #000;
	margin: -300px 0 0 -300px;
	position: absolute;
	left: 50%;
	top: 300px;
}

	#disclaimer .header, #challenge .header {
		height: 102px;
		background: var(--customer-background);
		border-bottom: solid 2px #FFFFFF;
		text-align: center;
	}

		#disclaimer .header img, #challenge .header img {
			padding-top: 15px;
		}

	#disclaimer div.title, #challenge div.title {
		height: 40px;
		width: 100%;
		color: #FFFFFF;
		background: var(--customer-background);
		margin: 0;
		padding: 0;
		text-align: center;
	}

	#disclaimer div.content, #challenge div.content {
		margin: 0;
		height: 381px;
		padding: 20px 30px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	#disclaimer .title h1, #challenge .title h1 {
		font-size: 14pt;
		font-weight: bold;
		padding: 5px 0 0 5px;
	}

.divWaitOverlay {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,.50) url('../images/Loading.gif') 50% 50% no-repeat;
	background-size: 100px;
}

body.loading {
}

	body.loading .divWaitOverlay {
		display: block;
	}


/* bootstrap */

ul.dropdown-menu:not(.bootstrap-datetimepicker-widget) {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-top: none !important;
}

	ul.dropdown-menu:not(.bootstrap-datetimepicker-widget) a {
		border-left: none !important;
	}

	ul.dropdown-menu:not(.bootstrap-datetimepicker-widget) li a i {
		color: #23282E;
	}


.form-group.row.buttons {
	padding: 15px 15px;
}

.row.bottom button {
	margin-left: 15px;
}

.nopadding {
	margin: 0 !important;
	padding: 0 !important;
}

.marginTpBtm20 {
	margin: 10px 0 10px 0;
}

/* app */
#app.container-fluid {
	padding: 5px 5px;
	margin: 0 !important;
}

#app .top {
	margin-bottom: 12px;
}

#app .input-group-addon.search {
	/*color: #FFF;
	background: #000;*/
}

.btn-info {
	background: #0072c6 !important;
	border: none;
}

	.btn-info:hover {
		background: #0061a9 !important;
	}

.btn.selected {
	opacity: 0.5;
	-moz-opacity: 0.5;
	-webkit-opacity: 0.5;
}

.btn-light {
	color: #000;
	background: #E1E1E1;
}

	.btn-light:hover {
		background: #bfbdbd !important;
	}

.btn-dark {
	color: #FFF;
	background: #000;
}

	.btn-dark:hover {
		color: #ffffff !important;
		background: #616161 !important;
	}

.btn.red {
	color: #ffffff !important;
	background: #cc1a1a !important;
}

	.btn.red:hover {
		background: #a61414 !important;
	}

.btn.green {
	color: #ffffff !important;
	background: #4d913b !important;
}

	.btn.green:hover {
		background: #396d2c !important;
	}

.btn.yellow {
	color: #000 !important;
	background: #e3cf61 !important;
}

	.btn.yellow:hover {
		background: #cfbd57 !important;
	}

.green {
	color: var(--success);
}

.btn {
	border: none;
}

	.btn.sml {
		padding: 2px 8px;
	}

.red {
	color: #cc1a1a
}

.background-gray {
	background: #616161 !important;
	color: #FFFFFF !important;
}

.background-blue {
	/*background: #0072c6 !important;*/
	background: #edf7ff;
	color: #444444 !important;
}

.blue {
	color: #0072c6 !important;
}

.green {
	color: var(--success) !important;
}

.teal {
	color: #3ebede !important;
}

.orange {
	color: #f47b19 !important;
}

.purple {
	color: #cc00ff !important;
}

.magenta {
	color: #e70a5b !important;
}

.gray-box {
	background: #eeeeee;
	padding: 20px;
	border: solid 2px #ffffff;
	color: #5a5a5a !important;
}

	.gray-box div {
		font-size: 14px !important;
	}

		.gray-box div h3 {
			font-size: 14px !important;
			color: #000;
			font-weight: bold;
		}

		.gray-box div span {
			font-size: 13px !important;
		}

	.gray-box.active {
		background: #0072c6;
		color: #fff !important;
	}

		.gray-box.active div h3 {
			color: #fff;
		}

		.gray-box.active span.green {
			color: #93ff85 !important;
		}

.border-light-gray {
	border: solid 20px #fbfbfb;
}

.font-medium {
	font-size: 13px;
}

.font-large {
	font-size: 14px;
}

.cursor-pointer {
	cursor: pointer;
}

.bold {
	font-weight: bold;
}

.warning {
	color: #947701;
	font-size: 13px;
}

p {
	margin-bottom: 10px;
}

#app .data {
	margin-bottom: 20px;
}

#app .form-control {
	transition: all .15s ease-in-out;
	z-index: 1;
}

#app .file-preview {
	border-radius: 0px;
}

#app .data .dataTable {
	margin-bottom: 20px;
}

#app .uploadcontrol button {
	margin-left: 20px;
}

#app .uploadcontrol .btn {
	padding: 3px 10px;
}

#app .bottom:not(.bootstrap-datetimepicker-widget) {
	width: 100%;
	display: block;
	background: #FFF;
	position: fixed;
	padding: 10px 0;
	bottom: 0px;
	right: 10px;
	padding-right: 20px;
	z-index: 2;
}

#app .form {
	margin-bottom: 30px;
}

#app table.table.dataTable {
	margin-top: 0px !important;
}

#app .dataTables_scrollHead th {
	/*color: #FFF;*/
	/*background: #616161;*/
	color: #444444;
	/*background: linear-gradient(#F9F9F9, #E9E9E9) !important;*/
}

#app .dataTable th {
	color: #444444;
	/*background: linear-gradient(#F9F9F9, #E9E9E9) !important;*/
	background: transparent;
	border-color: transparent;
	border-bottom: 1px solid var(--light-dark);
}

#app .dataTables_scrollBody {
	background: none;
	z-index: 1 !important;
}

#app .dt-buttons .btn { /* data tables top bar left hand side buttons */
	margin-right: 5px;
	border-radius: 26px;
	background: var(--secondary) !important;
	border: none !important;
	padding: 6px 15px !important;
	margin-top: -1px;
}

	#app .dt-buttons .btn:hover {
		background: var(--secondary-dark) !important;
	}

	#app .dt-buttons .btn span {
		color: var(--secondary-text);
	}

		#app .dt-buttons .btn span:hover {
			color: var(--secondary-dark-text);
		}

		#app .dt-buttons .btn span i {
			color: var(--secondary-text) !important;
		}

			#app .dt-buttons .btn span i:hover {
				color: var(--secondary-dark-text) !important;
			}

	#app .dt-buttons .btn.btn-success {
		background: var(--success) !important; /*rgb(40, 167, 108)*/
		border: none;
	}

		#app .dt-buttons .btn.btn-success:hover {
			background: var(--success-dark) !important; /*rgb(33, 136, 74) */
		}
/* ---- END data table buttons left hand side ----- */
/* Search button */
/*#app .dataTables_filter input[type='search'] + .input-group-addon {*/
#app input[type='search'] + .input-group-addon {
	border-bottom: none;
	cursor: pointer;
	background: var(--secondary) !important;
	padding-left: 18px;
}

	/*#app .dataTables_filter input[type='search'] + .input-group-addon i {*/
	#app input[type='search'] + .input-group-addon i {
		color: var(--primary-text) !important;
	}

#tableGeneric_filter, .dataTables_filter { /* Bar above the datatable header that has the buttons */
	background: var(--light);
	padding: .75em;
	border: 1px solid var(--light-dark);
}
/* Search button */
#app .dataTables_filter input[type='search'] + .input-group-addon {
	background: none;
}

/* Search button */
#app .dataTables_filter input[type='search'] + .input-group-addon {
	background: none;
	border-bottom: none;
}

#app .dataTables_filter .dt-buttons {
	float: left;
}

#app .dataTables_filter label {
	float: right;
	text-align: right !important;
}

/* data table right side selects */
.dataTables_filter .form-group .form-control {
	padding-bottom: 4px;
	border: 1px solid var(--light-dark);
	margin-top: 1px;
}

#app .dataTables_filter label input {
	float: right !important;
}

#app .dataTables_filter .dt-buttons.btn-group {
	text-align: left !important;
}

#app .dataTable > tbody > tr > td {
	border: none;
	border-bottom: 1px solid var(--light-dark);
	padding-top: 6px;
	padding-bottom: 5px;
}

#app .dataTable > tbody > tr:hover {
	background: var(--light);
}

.modal .dataTables_scrollHead th {
	color: #444444;
	background: /*linear-gradient(#F9F9F9, #E9E9E9) !important;*/ var(--theme-dt-header-bg) !important;
}

.modal .dataTables_scrollBody {
	background: none;
	z-index: 1 !important;
}

.modal .dt-buttons .btn {
	margin-right: 5px;
	border-radius: 3px;
}

.modal table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected #app .input-group-addon.search {
	/*color: #000;*/
	/*background: #edf7ff;*/
}

.modal .dataTables_info {
	display: none;
}

.modal .dataTables_filter input[type='search'] {
	width: 100% !important;
	height: 28px !important;
	font-size: 13px !important;
}

.modal .dataTables_filter .dt-buttons {
	width: 50%;
}

.modal .dataTables_filter label {
	width: 50%;
	text-align: right !important;
}

	.modal .dataTables_filter label input {
		float: right !important;
	}

.modal .dataTables_filter .dt-buttons.btn-group {
	text-align: left !important;
}

.matchDataTables thead tr {
	color: #444444;
	background: linear-gradient(#F9F9F9, #E9E9E9) !important;
}

/*@media screen and (min-width: 1366px) {
    #app .dataTables_scrollBody button {
        margin-left: 6px;
        padding: 2px 8px;
    }

    .modal .dataTables_scrollBody button {
        margin-left: 6px;
        padding: 2px 8px;
    }
}*/
#app .dataTables_scrollBody button {
	margin-left: 3px !important;
	padding: 1px 3px !important;
}

.modal .dataTables_scrollBody button {
	margin-left: 6px !important;
	padding: 0px 6px !important;
}

.modal .dataTables_filter label {
	width: 100% !important;
}

#app h1 {
	font-size: 14pt;
}

	#app h1 a {
		font-size: 15pt;
		color: #444444;
		text-decoration: none;
	}

		#app h1 a:hover {
			text-decoration: none;
		}

	#app h1 i {
		font-size: 13px;
	}

	#app h1 span {
		font-size: 15pt;
	}

#app .preview {
	display: none;
}

#app .innerDiv {
	width: 100%;
	padding: 5px 10px;
	color: #000 !important;
	background: #FFFFFF !important;
}

	#app .innerDiv .form-group {
		display: block;
	}

#app #tableEmployees tbody tr.details + tr:not(.even):not(.odd) {
	background: #edf7ff;
}

#app #tableEmployees_wrapper .dataTables_info {
	display: block;
	float: left;
}

#app .preview input[type=text] {
	background: rgba(0,0,0,0);
	background-color: transparent;
	box-shadow: none;
	border: none;
}

input[type=search] {
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

#app td button, #app th button {
	margin-left: 10px;
}

#app .innerDiv input.fluid {
	width: 100%;
}

.bottom-align {
	position: relative;
	left: 10px;
	float: left;
}

/* SUBTABS */
#app .tab-h.sub {
	padding: 0px 15px 0 15px;
	margin: -21px -15px 0px -15px;
	position: relative;
	z-index: 5;
}

	#app .tab-h.sub .nav {
		background-image: linear-gradient(#e9e9e9, #d9d9d9);
		margin: 0;
		padding: 0;
		display: block;
		border: none;
	}

		#app .tab-h.sub .nav li a {
			background-image: linear-gradient(#e9e9e9, #d9d9d9);
			font-weight: bold;
			margin: 0;
			padding: 10px 15px;
			border: none;
			border-radius: 0px;
			position: relative;
			left: 0;
			color: #444444;
		}

			#app .tab-h.sub .nav li a:hover {
			}

		#app .tab-h.sub .nav li.active a {
			background-image: linear-gradient(#a9a9a9, #999999);
			border-top: none;
			border-left: none;
			top: 0;
			left: 0;
			margin-bottom: 1px;
			z-index: 5;
		}

			#app .tab-h.sub .nav li.active a:hover {
				color: #ffffff;
				cursor: pointer;
			}

/* END SUBTABS */

#app .tab-v .nav {
	background: #F0EEEF;
	margin: 0;
	padding: 0;
	display: block;
	border: solid 1px #9d9d9d;
	border-bottom: none;
}

	#app .tab-v .nav li a {
		color: #9d9d9d;
		background: #F0EEEF;
		font-weight: bold;
		margin: 0;
		padding: 10px 15px;
		border: none;
		border-radius: 0px;
		position: relative;
		margin-top: -2px;
		border-bottom: solid 1px #9d9d9d;
	}

		#app .tab-v .nav li a:hover {
			color: #5f5f5f;
		}

	#app .tab-v .nav li.active a {
		color: #ffffff;
		background: #0072c6;
	}

		#app .tab-v .nav li.active a:hover {
			color: #ffffff;
		}

#app .employeeCard .employee, #app .employeeCard .payInformation {
	margin-bottom: 20px;
}

#app .profile {
	margin-bottom: 20px;
}

@media only screen and (max-width: 960px) {
	/*#app .tab-h .nav li {
        float: none;
    }

	#app .tab-h .nav li a {
		width: 100%;
		display: block;
		margin: 0;
		padding: 8px 15px;
		border: none;
		left: 0px;
	}

	#app .tab-h .nav li.active a {
		color: #FFFFFF;
		background: #9d9d9d;
		border: none;
		left: 0px;
		top: 0px;
	}

		#app .tab-h .nav li.active a:hover {
			color: #FFFFFF;
			background: #9d9d9d;
		}*/
}

#app .progress-h {
	margin: 0 -15px 0 -15px;
}

	#app .progress-h .nav {
		background: #9d9d9d;
		border: solid 1px #fff;
		margin: 0;
		padding: 0;
		display: block;
	}

		#app .progress-h .nav li a {
			color: #fff;
			background: #0072c6;
			font-weight: bold;
			margin: 0;
			padding: 10px 15px;
			border: none;
			border-radius: 0px;
			border-right: solid 1px #fff;
			border-bottom: solid 1px #fff;
			position: relative;
			left: -1px;
		}

@media screen and (max-width: 800px) {
	#app .progress-h .nav li a {
		padding: 10px 7px;
	}
}

#app .progress-h .nav li a span {
	display: none;
}

#app .progress-h .nav li a:hover {
	color: #fff;
}

#app .progress-h .nav li.active a span {
	display: inline-block;
}

#app .progress-h .nav li.active a i {
	margin-right: 10px;
}

#app .progress-h .nav li a:hover {
	color: #ffffff;
	background: #0061a9;
	cursor: pointer;
}

#app .progress-h {
	margin-bottom: 20px;
}

#app .progress-v .nav {
	padding: 0;
	display: block;
	border-bottom: none;
}

	#app .progress-v .nav li {
		width: 100%;
		display: block;
		padding-left: 10px;
		padding-right: 10px;
	}

		#app .progress-v .nav li a {
			width: 100%;
			color: #000;
			font-weight: bold;
			margin: 0;
			padding: 5px 0;
			border: none;
			border-radius: 0px;
			position: relative;
		}

			#app .progress-v .nav li a:hover {
				background: none;
				text-decoration: underline;
			}

		#app .progress-v .nav li.active a {
			background: transparent;
		}

			#app .progress-v .nav li.active a:hover {
				text-decoration: underline;
			}

		#app .progress-v .nav li span {
			display: inline-block;
			min-width: 20px;
			margin-right: 10px;
		}

#app:not(.masterholder) .inactive:not(.visited) a, #app .inactive:not(.visited) span {
	opacity: 0.25;
}

#app.masterholder .inactive:not(.visited) a, #app .inactive:not(.visited) span {
	opacity: 0.25 !important;
}

#app li.inactive.unavailable a, #app li.inactive.unavailable span, #app li.inactive.waived a, #app li.inactive.waived span, #app li.inactive.selected a, #app li.inactive.selected span {
	opacity: 1;
}

.panel-body .amount {
	margin: 7.5px 0;
}


/*#app .panel-body {
	background: none;
	background-image: linear-gradient(#fcfcfc,#ffffff,#fcfcfc) !important;
}*/

#app .input-group-addon {
	/*background: #000;*/
}

	#app .input-group-addon i {
		/*color: #ffffff;*/
	}

.hide {
	display: none;
}

.no-margin {
	margin: 0;
}

.no-padding {
	padding: 0;
}

.padding-20 {
	padding: 20px;
}

.margin-left-30 {
	margin-left: 30px !important;
}

@media only screen and (min-width: 768px) {
	.bottom-align {
		position: absolute;
		right: 10px;
		bottom: -205px;
	}
}

#app .employeeList tr.selected button {
	/*opacity: 0.10;
    cursor: default;*/
}

#app .tab-h {
	margin: 20px -15px;
}

	#app .tab-h .nav {
		/*background: #F0EEEF;*/
		/*border: solid 1px #9d9d9d;*/
		border: none;
		margin: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 1px;
		display: block;
	}

		/*#app .tab-h .nav li a {
			color: #000000;
			background: #F0EEEF;
			font-weight: bold;
			margin: 0;
			padding: 10px 15px;
			border: none;
			border-radius: 0px;
			border-right: solid 1px #9d9d9d;
			border-bottom: solid 1px #9d9d9d;
			position: relative;
			left: -1px;
		}*/

		/*#app .tab-h .nav li a:hover {
			color: white;
			text-decoration: underline;
		}*/

		/*#app .tab-h .nav li.active a {
			border-top: solid 5px #9d9d9d;
			border-left: solid 1px #9d9d9d;
			top: -5px;
			left: -1px;
			margin-bottom: -5px;
			z-index: 5;
		}*/

		#app .tab-h .nav li.active a:hover {
			text-decoration: none;
			cursor: pointer;
		}

#app .tab-v .nav {
	background: #F0EEEF;
	margin: 0;
	padding: 0;
	display: block;
	border: solid 1px #9d9d9d;
	border-bottom: none;
}

	#app .tab-v .nav li a {
		color: #000000;
		background: #F0EEEF;
		font-weight: bold;
		margin: 0;
		padding: 10px 15px;
		border: none;
		border-radius: 0px;
		position: relative;
		margin-top: -2px;
		border-bottom: solid 1px #9d9d9d;
	}

		#app .tab-v .nav li a:hover {
			color: #000000;
			text-decoration: underline;
		}

	#app .tab-v .nav li.active a {
		border-right: solid 20px #9d9d9d;
		text-decoration: none;
	}

#app .employeeCard .employee, #app .employeeCard .payInformation {
	margin-bottom: 20px;
}

#app .profile {
	margin-bottom: 20px;
}

.padding-15 {
	padding: 15px;
}

@media only screen and (max-width: 960px) {
	/*#app .tab-h .nav li {
        float: none;
    }*/

}

#app .panel {
	/*border-radius: 0;
	box-shadow: none;
	border: 1px solid #c9c9c9;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;*/
	border: none;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px -8px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px -8px;
}

#app .panel-body {
	/*background: #fbfbfb;*/
}

#app .input-group-addon {
	/*background: #000;*/
}

	#app .input-group-addon i {
		/*color: #ffffff;*/
	}

.hide {
	display: none;
}

.no-margin {
	margin: 0;
}

.no-padding {
	padding: 0;
}

.padding-10 {
	padding: 10px;
}

.padding-15 {
	padding: 15px;
}

.padding-20 {
	padding: 20px;
}

.padding-30 {
	padding: 30px;
}

.padding-40 {
	padding: 40px;
}

.full-width {
	width: 100%;
}

.padding-top-10 {
	padding-top: 10px;
}

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

.padding-top-20 {
	padding-top: 20px;
}

.padding-bottom-10 {
	padding-bottom: 11px;
}

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

.padding-bottom-20 {
	padding-bottom: 20px;
}

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

.padding-left-20 {
	padding-left: 20px;
}

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

.padding-left-40 {
	padding-left: 38px;
}

.margin-left-30 {
	margin-left: 30px;
}

.margin-top-20 {
	margin-top: 20px;
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

.margin-right-20 {
	margin-right: 20px;
}

.display-block {
	display: block;
}

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

.margin-5 {
	margin: 5px;
}

.block {
	display: block;
}

.inline {
	display: inline-block;
}

.InvalidEntry {
	/*border: 1px solid #FF0000 !important;*/
}

textarea {
	resize: none !important;
}

a.no-underline {
	text-decoration: none !important;
	cursor: default !important;
}

a {
	color: #000000;
	text-decoration: none;
}

	a:hover {
		color: #000000;
		text-decoration: underline;
	}

.float-left {
	float: left;
}

@media only screen and (max-width: 960px) {
	.mobile-padding-top-20 {
		padding-top: 20px;
	}
}

.table.table-striped.table-fixed {
	width: 100%;
}

	.table.table-striped.table-fixed tbody {
		max-height: 200px !important;
		overflow-y: auto !important;
		width: 100% !important;
	}

	.table.table-striped.table-fixed thead, .table.table-striped.table-fixed tbody, .table.table-striped.table-fixed tr, .table.table-striped.table-fixed td, .table.table-striped.table-fixed th {
		display: block !important;
	}

		.table.table-striped.table-fixed tbody td {
			float: left !important;
		}

		.table.table-striped.table-fixed thead tr th {
			float: left !important;
		}

.modal-content {
	border-radius: 0px;
}

.modal-dialog {
	border-radius-top-left: 10px;
	border-radius-top-right: 10px;
}

.modal-header .close {
	color: #fff;
	opacity: 1 !important;
	margin-top: -20px !important;
	text-shadow: none;
}

.dataTable object {
	display: none !important;
}

.warning .close {
	color: #000 !important;
}

.modal-title {
	font-size: 18px !important;
	font-weight: bold;
	color: #616161!important;
}

.warning .modal-header {
	font-size: 14px;
	color: #000;
	border-radius-top-left: 10px;
	border-radius-top-right: 10px;
}

.warning .modal-header {
	background: #e3cf61;
	font-size: 14px;
}

	.warning .modal-header .modal-title { color: black; }


.error .modal-header {
	font-size: 14px;
	background: #cc1a1a;
}

	.error .modal-header .modal-title {
		color: white!important;
	}


.success .modal-header {
	background: #4d913b;
	font-size: 14px;
}

	.success .modal-header .modal-title {
		color: white!important;
	}

.modal-body {
	color: #000;
}
/*
#side-menu {
  height: 70px;
  position: fixed;
  top: 50px;
}
#app {
  top: 70px;
  position: relative;
}
*/
/*
* CSS file extanding Bootstrap 3 grid classes for screens bigger than 1440 (XL) and 1920 (XXL) px. Add this file after the Bootstrap CSS file and you will be able to use col-xl- and col-xxl-
*
* Author: Iggy Pritzker
* Company: WebProm Design
* Site: www.web-design.co.il
*/


@media (min-width: 1440px) {
	.container {
		width: 1400px;
	}
}

@media (min-width: 1920px) {
	.container {
		width: 1860px;
	}
}

.col-xl-1, .col-xxl-1, .col-xl-2, .col-xxl-2, .col-xl-3, .col-xxl-3, .col-xl-4, .col-xxl-4, .col-xl-5, .col-xxl-5, .col-xl-6, .col-xxl-6, .col-xl-7, .col-xxl-7, .col-xl-8, .col-xxl-8, .col-xl-9, .col-xxl-9, .col-xl-10, .col-xxl-10, .col-xl-11, .col-xxl-11, .col-xl-12, .col-xxl-12 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

@media (min-width: 1440px) {
	.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
		float: left;
	}

	.col-xl-12 {
		width: 100%;
	}

	.col-xl-11 {
		width: 91.66666667%;
	}

	.col-xl-10 {
		width: 83.33333333%;
	}

	.col-xl-9 {
		width: 75%;
	}

	.col-xl-8 {
		width: 66.66666667%;
	}

	.col-xl-7 {
		width: 58.33333333%;
	}

	.col-xl-6 {
		width: 50%;
	}

	.col-xl-5 {
		width: 41.66666667%;
	}

	.col-xl-4 {
		width: 33.33333333%;
	}

	.col-xl-3 {
		width: 25%;
	}

	.col-xl-2 {
		width: 16.66666667%;
	}

	.col-xl-1 {
		width: 8.33333333%;
	}

	.col-xl-pull-12 {
		right: 100%;
	}

	.col-xl-pull-11 {
		right: 91.66666667%;
	}

	.col-xl-pull-10 {
		right: 83.33333333%;
	}

	.col-xl-pull-9 {
		right: 75%;
	}

	.col-xl-pull-8 {
		right: 66.66666667%;
	}

	.col-xl-pull-7 {
		right: 58.33333333%;
	}

	.col-xl-pull-6 {
		right: 50%;
	}

	.col-xl-pull-5 {
		right: 41.66666667%;
	}

	.col-xl-pull-4 {
		right: 33.33333333%;
	}

	.col-xl-pull-3 {
		right: 25%;
	}

	.col-xl-pull-2 {
		right: 16.66666667%;
	}

	.col-xl-pull-1 {
		right: 8.33333333%;
	}

	.col-xl-pull-0 {
		right: auto;
	}

	.col-xl-push-12 {
		left: 100%;
	}

	.col-xl-push-11 {
		left: 91.66666667%;
	}

	.col-xl-push-10 {
		left: 83.33333333%;
	}

	.col-xl-push-9 {
		left: 75%;
	}

	.col-xl-push-8 {
		left: 66.66666667%;
	}

	.col-xl-push-7 {
		left: 58.33333333%;
	}

	.col-xl-push-6 {
		left: 50%;
	}

	.col-xl-push-5 {
		left: 41.66666667%;
	}

	.col-xl-push-4 {
		left: 33.33333333%;
	}

	.col-xl-push-3 {
		left: 25%;
	}

	.col-xl-push-2 {
		left: 16.66666667%;
	}

	.col-xl-push-1 {
		left: 8.33333333%;
	}

	.col-xl-push-0 {
		left: auto;
	}

	.col-xl-offset-12 {
		margin-left: 100%;
	}

	.col-xl-offset-11 {
		margin-left: 91.66666667%;
	}

	.col-xl-offset-10 {
		margin-left: 83.33333333%;
	}

	.col-xl-offset-9 {
		margin-left: 75%;
	}

	.col-xl-offset-8 {
		margin-left: 66.66666667%;
	}

	.col-xl-offset-7 {
		margin-left: 58.33333333%;
	}

	.col-xl-offset-6 {
		margin-left: 50%;
	}

	.col-xl-offset-5 {
		margin-left: 41.66666667%;
	}

	.col-xl-offset-4 {
		margin-left: 33.33333333%;
	}

	.col-xl-offset-3 {
		margin-left: 25%;
	}

	.col-xl-offset-2 {
		margin-left: 16.66666667%;
	}

	.col-xl-offset-1 {
		margin-left: 8.33333333%;
	}

	.col-xl-offset-0 {
		margin-left: 0;
	}
}

@media (min-width: 1920px) {
	.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
		float: left;
	}

	.col-xxl-12 {
		width: 100%;
	}

	.col-xxl-11 {
		width: 91.66666667%;
	}

	.col-xxl-10 {
		width: 83.33333333%;
	}

	.col-xxl-9 {
		width: 75%;
	}

	.col-xxl-8 {
		width: 66.66666667%;
	}

	.col-xxl-7 {
		width: 58.33333333%;
	}

	.col-xxl-6 {
		width: 50%;
	}

	.col-xxl-5 {
		width: 41.66666667%;
	}

	.col-xxl-4 {
		width: 33.33333333%;
	}

	.col-xxl-3 {
		width: 25%;
	}

	.col-xxl-2 {
		width: 16.66666667%;
	}

	.col-xxl-1 {
		width: 8.33333333%;
	}

	.col-xxl-pull-12 {
		right: 100%;
	}

	.col-xxl-pull-11 {
		right: 91.66666667%;
	}

	.col-xxl-pull-10 {
		right: 83.33333333%;
	}

	.col-xxl-pull-9 {
		right: 75%;
	}

	.col-xxl-pull-8 {
		right: 66.66666667%;
	}

	.col-xxl-pull-7 {
		right: 58.33333333%;
	}

	.col-xxl-pull-6 {
		right: 50%;
	}

	.col-xxl-pull-5 {
		right: 41.66666667%;
	}

	.col-xxl-pull-4 {
		right: 33.33333333%;
	}

	.col-xxl-pull-3 {
		right: 25%;
	}

	.col-xxl-pull-2 {
		right: 16.66666667%;
	}

	.col-xxl-pull-1 {
		right: 8.33333333%;
	}

	.col-xxl-pull-0 {
		right: auto;
	}

	.col-xxl-push-12 {
		left: 100%;
	}

	.col-xxl-push-11 {
		left: 91.66666667%;
	}

	.col-xxl-push-10 {
		left: 83.33333333%;
	}

	.col-xxl-push-9 {
		left: 75%;
	}

	.col-xxl-push-8 {
		left: 66.66666667%;
	}

	.col-xxl-push-7 {
		left: 58.33333333%;
	}

	.col-xxl-push-6 {
		left: 50%;
	}

	.col-xxl-push-5 {
		left: 41.66666667%;
	}

	.col-xxl-push-4 {
		left: 33.33333333%;
	}

	.col-xxl-push-3 {
		left: 25%;
	}

	.col-xxl-push-2 {
		left: 16.66666667%;
	}

	.col-xxl-push-1 {
		left: 8.33333333%;
	}

	.col-xxl-push-0 {
		left: auto;
	}

	.col-xxl-offset-12 {
		margin-left: 100%;
	}

	.col-xxl-offset-11 {
		margin-left: 91.66666667%;
	}

	.col-xxl-offset-10 {
		margin-left: 83.33333333%;
	}

	.col-xxl-offset-9 {
		margin-left: 75%;
	}

	.col-xxl-offset-8 {
		margin-left: 66.66666667%;
	}

	.col-xxl-offset-7 {
		margin-left: 58.33333333%;
	}

	.col-xxl-offset-6 {
		margin-left: 50%;
	}

	.col-xxl-offset-5 {
		margin-left: 41.66666667%;
	}

	.col-xxl-offset-4 {
		margin-left: 33.33333333%;
	}

	.col-xxl-offset-3 {
		margin-left: 25%;
	}

	.col-xxl-offset-2 {
		margin-left: 16.66666667%;
	}

	.col-xxl-offset-1 {
		margin-left: 8.33333333%;
	}

	.col-xxl-offset-0 {
		margin-left: 0;
	}
}

.visible-xl,
.visible-xxl {
	display: none !important;
}

.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xxl-block,
.visible-xxl-inline,
.visible-xxl-inline-block {
	display: none !important;
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.visible-xl {
		display: block !important;
	}

	table.visible-xl {
		display: table;
	}

	tr.visible-xl {
		display: table-row !important;
	}

	th.visible-xl,
	td.visible-xl {
		display: table-cell !important;
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.visible-xl-block {
		display: block !important;
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.visible-xl-inline {
		display: inline !important;
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.visible-xl-inline-block {
		display: inline-block !important;
	}
}

@media (min-width: 1920px) {
	.visible-xxl {
		display: block !important;
	}

	table.visible-xxl {
		display: table;
	}

	tr.visible-xxl {
		display: table-row !important;
	}

	th.visible-xxl,
	td.visible-xxl {
		display: table-cell !important;
	}
}

@media (min-width: 1920px) {
	.visible-xxl-block {
		display: block !important;
	}
}

@media (min-width: 1920px) {
	.visible-xxl-inline {
		display: inline !important;
	}
}

@media (min-width: 1920px) {
	.visible-xxl-inline-block {
		display: inline-block !important;
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.hidden-xl {
		display: none !important;
	}
}

@media (min-width: 1920px) {
	.hidden-xxl {
		display: none !important;
	}
}

.skiptranslate iframe {
	top: 40px;
}

#header nav ul li.nostyleli a span {
	display: inline-block; /*!important;*/
}

#header #google_translate_element a:hover {
	/*background: white !important;*/
}

#header nav ul li.nostyleli .skiptranslate goog-te-gadget div:hover {
	/*background: white !important;*/
}

#header nav ul li.nostyleli {
	padding-top: 5px;
}

	#header nav ul li.nostyleli a {
		/*background: #fff !important;*/
		/*color: #000 !important;*/
		height: 30px !important;
	}

		#header nav ul li.nostyleli a span {
			/*color: #000 !important;*/
		}

#header nav ul li div.goog-te-gadget-simple img {
	float: left;
	margin-top: 5px;
	margin-left: 8px;
}

#header nav ul li div.goog-te-gadget-simple span {
	color: black !important;
	float: right;
}

	#header nav ul li div.goog-te-gadget-simple span a {
		padding-left: 0px !important;
		background-color: transparent !important;
	}

		#header nav ul li div.goog-te-gadget-simple span a img {
			display: none !important;
		}

.fakemenua {
	display: block;
	background: var(--customer-background);
	text-decoration: none;
	/*border-left: solid 1px #9E9E9E;*/
	padding: 12px 10px;
	color: #ffffff;
	font-weight: bold;
}

	.fakemenua input {
		color: #23282E !important;
		width: 200px;
		padding: 5px;
		position: relative;
		top: -5px;
		margin-bottom: -15px;
		font-weight: normal;
	}

	.fakemenua .dropdown-menu {
		width: 280px;
	}

	.fakemenua.dropdown .dropdown-menu .dropdown-item {
		background-color: #FFFFFF !important;
		color: #23282E !important;
		width: 280px;
		padding-left: 5px;
		padding-right: 5px;
		display: table;
		cursor: pointer;
	}

		.fakemenua.dropdown .dropdown-menu .dropdown-item:hover {
			background-color: #edf7ff !important;
		}

	.fakemenua.dropdown .dropdown-item .img-circle {
		width: 40px;
		height: 40px;
		float: left;
	}

		.fakemenua.dropdown .dropdown-item .img-circle .fa {
			color: #FFFFFF;
			padding-top: 5px;
		}

	.fakemenua .SearchTextHolder {
		float: left;
		padding-left: 10px;
		width: 220px;
		padding-top: 5px;
	}

		.fakemenua .SearchTextHolder .SearchHeader {
			font-weight: bold;
			width: 100%;
			float: left;
			text-overflow: ellipsis;
			/* Required for text-overflow to do anything */
			white-space: nowrap;
			overflow: hidden;
		}

		.fakemenua .SearchTextHolder .SearchDetail {
			width: 100%;
			float: left;
			font-size: 10pt;
			padding-left: 10px;
		}

	.fakemenua #SearchResultsContainer .dropdown-item.searchselected {
		background-color: #edf7ff !important;
		color: #444444 !important;
	}

	.fakemenua i.fa-2x {
		font-size: 1.5em;
	}

.bluegreen {
	background-color: #00617A;
}

/*.blue {
	background-color: #004BB0;
}

.orange {
	background-color: #BB4B00;
}*/

.fakemenua .form-control-feedback {
	top: 11px;
	color: #d9d9d9;
	right: 12px;
	line-height: 24px;
}

@media screen and (max-width: 800px) {
	/* Handle Google Translate and user view mode for mobile phones */
	.goog-te-menu-value > span:not(:last-child) {
		display: none!important;
	}

	.modetoggle--container {
		display: block;
		margin-top: -6px;
	}
}

/* Bootstrap Card / Accordion */
.as-button {
	cursor: pointer;
}

.card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid var(--light-dark);
	border-radius: 0.25rem;
}

	.card > hr {
		margin-right: 0;
		margin-left: 0;
	}

	.card > .list-group:first-child .list-group-item:first-child {
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

	.card > .list-group:last-child .list-group-item:last-child {
		border-bottom-right-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
	}

.card-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1.25rem;
}

.card-title {
	margin-bottom: 0.75rem;
}

.card-subtitle {
	margin-top: -0.375rem;
	margin-bottom: 0;
}

.card-text:last-child {
	margin-bottom: 0;
}

.card-link:hover {
	text-decoration: none;
}

.card-link + .card-link {
	margin-left: 1.25rem;
}

.card-header {
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background-color: var(--light);
	border-bottom: 1px solid var(--light-dark);
}

	.card-header:first-child {
		border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
	}

	.card-header + .list-group .list-group-item:first-child {
		border-top: 0;
	}

.card-footer {
	padding: 0.75rem 1.25rem;
	background-color: var(--light);
	border-top: 1px solid var(--light-dark);
}

	.card-footer:last-child {
		border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
	}

.card-header-tabs {
	margin-right: -0.625rem;
	margin-bottom: -0.75rem;
	margin-left: -0.625rem;
	border-bottom: 0;
}

.card-header-pills {
	margin-right: -0.625rem;
	margin-left: -0.625rem;
}

.card-img-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.25rem;
}

.card-img {
	width: 100%;
	border-radius: calc(0.25rem - 1px);
}

.card-img-top {
	width: 100%;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
	width: 100%;
	border-bottom-right-radius: calc(0.25rem - 1px);
	border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

	.card-deck .card {
		margin-bottom: 15px;
	}

@media (min-width: 576px) {
	.card-deck {
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-right: -15px;
		margin-left: -15px;
	}

		.card-deck .card {
			display: -ms-flexbox;
			display: flex;
			-ms-flex: 1 0 0%;
			flex: 1 0 0%;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-right: 15px;
			margin-bottom: 0;
			margin-left: 15px;
		}
}

.card-group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

	.card-group > .card {
		margin-bottom: 15px;
	}

@media (min-width: 576px) {
	.card-group {
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
	}

		.card-group > .card {
			-ms-flex: 1 0 0%;
			flex: 1 0 0%;
			margin-bottom: 0;
		}

			.card-group > .card + .card {
				margin-left: 0;
				border-left: 0;
			}

			.card-group > .card:not(:last-child) {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

				.card-group > .card:not(:last-child) .card-header,
				.card-group > .card:not(:last-child) .card-img-top {
					border-top-right-radius: 0;
				}

				.card-group > .card:not(:last-child) .card-footer,
				.card-group > .card:not(:last-child) .card-img-bottom {
					border-bottom-right-radius: 0;
				}

			.card-group > .card:not(:first-child) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

				.card-group > .card:not(:first-child) .card-header,
				.card-group > .card:not(:first-child) .card-img-top {
					border-top-left-radius: 0;
				}

				.card-group > .card:not(:first-child) .card-footer,
				.card-group > .card:not(:first-child) .card-img-bottom {
					border-bottom-left-radius: 0;
				}
}

.card-columns .card {
	margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
	.card-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
		-webkit-column-gap: 1.25rem;
		-moz-column-gap: 1.25rem;
		column-gap: 1.25rem;
		orphans: 1;
		widows: 1;
	}

		.card-columns .card {
			display: inline-block;
			width: 100%;
		}
}

.accordion > .card {
	overflow: hidden;
}

	.accordion > .card:not(:first-of-type) .card-header:first-child {
		border-radius: 0;
	}

	.accordion > .card:not(:first-of-type):not(:last-of-type) {
		border-bottom: 0;
		border-radius: 0;
	}

	.accordion > .card:first-of-type {
		border-bottom: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	.accordion > .card:last-of-type {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.accordion > .card .card-header {
		margin-bottom: -1px;
	}

.btn-link {
	font-weight: 400;
	color: #007bff;
	text-decoration: none;
	background: 0 0;
}

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

	.btn-link.focus,
	.btn-link:focus {
		text-decoration: underline;
		box-shadow: none;
	}

	.btn-link.disabled,
	.btn-link:disabled {
		color: #6c757d;
		pointer-events: none;
	}
/* End Bootstrap Card / Accordion */

/* Collapsible elements */
.card-header.collapsible {
	display: flex;
	align-items: center;
}

	.card-header.collapsible:not(.lefticon)[aria-expanded="false"] *:not(span):last-child:after {
		content: "\f078";
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		margin-left: 12px;
		font-size: 12px;
		color: var(--text-hint);
		display: inline-block;
		transition: transform .4s ease-in-out;
	}

	.card-header.collapsible:not(.lefticon)[aria-expanded="true"] *:not(span):last-child:after {
		content: "\f078";
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		margin-left: 12px;
		font-size: 12px;
		color: var(--text-hint);
		display: inline-block;
		transform: rotate(180deg);
		transition: transform .4s ease-in-out;
	}

	.card-header.collapsible[aria-expanded="false"] > h2:after, .card-header.collapsible[aria-expanded="true"] > h2:after {
		position: absolute !important;
		right: 16px;
		top: 12px;
	}

	/*.card-header.collapsible.lefticon[aria-expanded="false"] *:not(span):first-child:before {*/
	.card-header.collapsible.lefticon[aria-expanded="false"] >:first-child:before {
		content: "\f13a";
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-weight: 900;
		text-decoration: inherit;
		margin-right: 12px;
		font-size: 12px;
		color: #444;
		display: inline-block;
		transition: transform .4s ease-in-out;
	}

	.card-header.collapsible.lefticon[aria-expanded="true"] >:first-child:before {
		content: "\f13a";
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-weight: 900;
		text-decoration: inherit;
		margin-right: 12px;
		font-size: 12px;
		color: #444;
		display: inline-block;
		transform: rotate(180deg);
		transition: transform .4s ease-in-out;
	}

	.card-header.collapsible > *:first-child {
		flex-grow: 1;
	}

	.card-header.collapsible *:not(:first-child) {
		margin-left: 12px;
	}

.card-header > h2 {
	font-size: 16px;
}

.card-body.row-item {
	display: flex;
	align-items: center;
}

/* List Group Rows */
.list-group-row {
	display: flex;
	align-items: center;
}

.list-group-row > .row-text {
	flex-grow: 1;
}

	.list-group-row > * {
		padding: .5em;
	}

:root {
	--info-color: #31708f;
	--info-accent: #3498db;
	--info-border: #bcdff1;
	--info-background: #e1f0fa;
	--success-dark: #18672b;
	--success-color: #1e7e34;
	--success-accent: #5cb85c;
	--success-border: #d0e9c6;
	--success-background: #f0f8ed;
	--warning-color: #856404;
	--warning-accent: #f0ad4e;
	--warning-border: #ffeeba;
	--warning-background: #fffae5;
	--danger-color: #a94442;
	--danger-accent: #d9534f;
	--danger-border: #ebcccc;
	--danger-background: #f8eded;
}

/* PRO Button */
.pro-btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	position: relative;
}

	.pro-btn:hover, .pro-btn:focus {
		text-decoration: none;
	}

	.pro-btn:focus, .pro-btn.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	}

	.pro-btn.disabled, .pro-btn:disabled {
		opacity: 0.65;
	}

	.pro-btn:not(:disabled):not(.disabled) {
		cursor: pointer;
	}

		.pro-btn:not(:disabled):not(.disabled):active, .pro-btn:not(:disabled):not(.disabled).active {
			background-image: none;
		}

a.pro-btn.disabled,
fieldset:disabled a.pro-btn {
	pointer-events: none;
}

.pro-alert.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
}

#app .pro-alert button, .pro-alert button {
	padding: 0.375rem 0.75rem !important;
	margin-left: unset !important;
}

.pro-alert > div strong {
	font-size: 11px;
}

.pro-alert > div, .pro-alert > div p {
	margin-top: 10px;
	margin-bottom: 0px;
	font-size: 11px;
}

.pro-alert > div {
	margin-left: 24px;
}


.pro-alert p .badge-pill {
	font-size: 11px;
	padding: 1px 7px;
	line-height: 1.5em;
}

.pro-alert hr {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: -36px;
}

.pro-alert.alert-dismissible {
	padding-right: 4rem;
}

.pro-alert.alert-warning {
	color: var(--warning-color);
	background-color: var(--warning-background);
	border-color: var(--warning-border);
}

.pro-alert.alert-success {
	background-color: var(--success-background);
	border-color: var(--success-border);
	color: var(--success-color);
}

.pro-alert.alert-info {
	background-color: var(--info-background);
	border-color: var(--info-border);
	color: var(--info-color);
}

.pro-alert.alert-danger {
	background-color: var(--danger-background);
	border-color: var(--danger-border);
	color: var(--danger-color);
}

.pro-alert .close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .5;
}

.pro-alert button.close {
	padding: 0;
	background-color: transparent;
	border: 0;
}

.pro-alert.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: .55rem 1.25rem;
	color: inherit;
}

.pro-alert button.close span {
	font-size: 1.5rem;
}

.pro-alert.alert i:not(.no-style) {
	margin-right: 8px;
}

.pro-alert.alert-warning i {
	color: var(--warning-accent);
}

.alert.pro-alert .badge {
	display: initial;
	vertical-align: baseline;
}

.pro-alert .badge-pill {
	padding-right: 0.6em;
	padding-left: 0.6em;
	border-radius: 10rem;
}

.pro-alert .badge-warning {
	background-color: var(--warning-accent);
}

	.pro-alert .badge-warning[href]:hover, .badge-warning[href]:focus {
		color: #fff;
		text-decoration: none;
		background-color: #d39e00;
	}

.pro-alert .badge-success {
	color: #fff;
	background-color: var(--success-accent);
}

	.pro-alert .badge-success[href]:hover, .badge-success[href]:focus {
		color: #fff;
		text-decoration: none;
		background-color: var(--success-color);
	}

.pro-alert.alert-success i {
	color: var(--success-accent);
}

.pro-alert .badge-info {
	color: #fff;
	background-color: var(--info-accent);
}

.alert-info hr {
	border-top-color: var(--info-border);
}

	.pro-alert .badge-info[href]:hover, .badge-info[href]:focus {
		color: #fff;
		text-decoration: none;
		background-color: #117a8b;
	}

.pro-alert.alert-info i {
	color: var(--info-accent);
}

.pro-alert .badge-danger {
	color: #fff;
	background-color: var(--danger-accent);
}

	.pro-alert .badge-danger[href]:hover, .badge-danger[href]:focus {
		color: #fff;
		text-decoration: none;
		background-color: #bd2130;
	}

.pro-alert.alert-danger i {
	color: var(--danger-accent);
}

.pro-alert button i {
	color: white!important;
}

/* PRO Notes */
.pro-note {
	border-left: solid 4px;
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	display: flex;
	padding: 12px;
}

	.pro-note.note-info {
		border-left-color: var(--info-accent);
		border-top-color: var(--info-border);
		border-right-color: var(--info-border);
		border-bottom-color: var(--info-border);
		background-color: var(--info-background);
		color: var(--info-color);
	}

		.pro-note.note-info::before {
			font-family: "Font Awesome 5 Pro";
			content: "\f249\00a0\00a0\00a0";
			color: var(--info-accent);
			font-weight: bold;
		}

	.pro-note.note-success {
		border-left-color: var(--success-accent);
		border-top-color: var(--success-border);
		border-right-color: var(--success-border);
		border-bottom-color: var(--success-border);
		background-color: var(--success-background);
		color: var(--success-color);
	}

		.pro-note.note-success::before {
			font-family: "Font Awesome 5 Pro";
			content: "\f058\00a0\00a0\00a0";
			color: var(--success-accent);
			font-weight: bold;
		}

	.pro-note.note-warning {
		border-left-color: var(--warning-accent);
		border-top-color: var(--warning-border);
		border-right-color: var(--warning-border);
		border-bottom-color: var(--warning-border);
		background-color: var(--warning-background);
		color: var(--warning-color);
	}

		.pro-note.note-warning::before {
			font-family: "Font Awesome 5 Pro";
			content: "\f071\00a0\00a0\00a0";
			color: var(--warning-accent);
			font-weight: bold;
		}

	.pro-note.note-danger {
		border-left-color: var(--danger-accent);
		border-top-color: var(--danger-border);
		border-right-color: var(--danger-border);
		border-bottom-color: var(--danger-border);
		background-color: var(--danger-background);
		color: var(--danger-color);
	}

		.pro-note.note-danger::before {
			font-family: "Font Awesome 5 Pro";
			content: "\f06a\00a0\00a0\00a0";
			color: var(--danger-accent);
			font-weight: bold;
		}

/* PRO Color Button */
.pro-btn.btn-secondary {
	color: #fff;
	background-color: #9ea5a8;
	border-color: #9ea5a8;
}

	.pro-btn.btn-secondary:hover {
		color: #fff;
		background-color: #848B8E;
		border-color: #7D8687;
	}

	.pro-btn.btn-secondary:focus, .pro-btn.btn-secondary.focus {
		color: #fff;
		background-color: #858E8F;
		border-color: #838C8E;
		box-shadow: 0 0 0 0.2rem rgba(165, 179, 179, 0.5);
	}

	.pro-btn.btn-secondary.disabled, .pro-btn.btn-secondary:disabled {
		color: #fff;
		background-color: #95a5a6;
		border-color: #95a5a6;
	}

	.pro-btn.btn-secondary:not(:disabled):not(.disabled):active, .pro-btn.btn-secondary:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-secondary.dropdown-toggle {
		color: #fff;
		background-color: #838C8D;
		border-color: #808687;
	}

		.pro-btn.btn-secondary:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-secondary:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-secondary.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(165, 179, 179, 0.5);
		}


.pro-btn.btn-dark {
	color: #fff;
	background-color: #717475;
	border-color: #717475;
}

	.pro-btn.btn-dark:hover {
		color: #fff;
		background-color: #313131;
		border-color: #2b2b2b;
	}

	.pro-btn.btn-dark:focus, .pro-btn.btn-dark.focus {
		color: #fff;
		background-color: #313131;
		border-color: #2b2b2b;
		box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5);
	}

	.pro-btn.btn-dark.disabled, .pro-btn.btn-dark:disabled {
		color: #fff;
		background-color: #444;
		border-color: #444;
	}

	.pro-btn.btn-dark:not(:disabled):not(.disabled):active, .pro-btn.btn-dark:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-dark.dropdown-toggle {
		color: #fff;
		background-color: #2b2b2b;
		border-color: #242424;
	}

		.pro-btn.btn-dark:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-dark:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-dark.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5);
		}

.pro-btn.btn-success {
	color: #fff;
	background-color: var(--success);
	border-color: var(--success);
}

	.pro-btn.btn-success:hover {
		color: #fff;
		background-color: var(--success-color);
		border-color: var(--success-dark);
	}

	.pro-btn.btn-success:focus, .pro-btn.btn-success.focus {
		color: #fff;
		background-color: var(--success-color);
		border-color: var(--success-dark);
		box-shadow: 0 0 0 0.2rem rgba(59, 198, 101, 0.50);
	}

	.pro-btn.btn-success.disabled, .pro-btn.btn-success:disabled {
		color: #fff;
		background-color: rgba(59, 198, 101, 0.50);
		border-color: rgba(59, 198, 101, 0.50);
	}

	.pro-btn.btn-success:not(:disabled):not(.disabled):active, .pro-btn.btn-success:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-success.dropdown-toggle {
		color: #fff;
		background-color: var(--success-color);
		border-color: var(--success-dark);
	}

		.pro-btn.btn-success:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-success:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-success.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(59, 198, 101, 0.50);
		}

.pro-btn.btn-info {
	color: #fff;
	background-color: #3498db;
	border-color: #3498db;
}

	.pro-btn.btn-info:hover {
		color: #fff;
		background-color: #2384c6;
		border-color: #217dbb;
	}

	.pro-btn.btn-info:focus, .pro-btn.btn-info.focus {
		color: #fff;
		background-color: #2384c6;
		border-color: #217dbb;
		box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5);
	}

	.pro-btn.btn-info.disabled, .pro-btn.btn-info:disabled {
		color: #fff;
		background-color: #3498db;
		border-color: #3498db;
	}

	.pro-btn.btn-info:not(:disabled):not(.disabled):active, .pro-btn.btn-info:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-info.dropdown-toggle {
		color: #fff;
		background-color: #217dbb;
		border-color: #1f76b0;
	}

		.pro-btn.btn-info:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-info:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-info.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5);
		}

.pro-btn.btn-warning {
	color: #fff;
	background-color: #f39c12;
	border-color: #f39c12;
}

	.pro-btn.btn-warning:hover {
		color: #fff;
		background-color: #d4860b;
		border-color: #c87f0a;
	}

	.pro-btn.btn-warning:focus, .pro-btn.btn-warning.focus {
		color: #fff;
		background-color: #d4860b;
		border-color: #c87f0a;
		box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5);
	}

	.pro-btn.btn-warning.disabled, .pro-btn.btn-warning:disabled {
		color: #fff;
		background-color: #f39c12;
		border-color: #f39c12;
	}

	.pro-btn.btn-warning:not(:disabled):not(.disabled):active, .pro-btn.btn-warning:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-warning.dropdown-toggle {
		color: #fff;
		background-color: #c87f0a;
		border-color: #bc770a;
	}

		.pro-btn.btn-warning:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-warning:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-warning.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5);
		}

.pro-btn.btn-danger {
	color: #fff;
	background-color: var(--error);
	border-color: var(--error);
}

	.pro-btn.btn-danger:hover {
		color: #fff;
		background-color: var(--error-dark);
		border-color: var(--error-dark);
	}

	.pro-btn.btn-danger:focus, .pro-btn.btn-danger.focus {
		color: #fff;
		background-color: var(--error-dark);
		border-color: var(--error-dark);
		box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5);
	}

	.pro-btn.btn-danger.disabled, .pro-btn.btn-danger:disabled {
		color: #fff;
		background-color: rgba(235, 103, 89, 0.5);
		border-color: rgba(235, 103, 89, 0.5);
	}

	.pro-btn.btn-danger:not(:disabled):not(.disabled):active, .pro-btn.btn-danger:not(:disabled):not(.disabled).active,
	.show > .pro-btn.btn-danger.dropdown-toggle {
		color: #fff;
		background-color: #d62c1a;
		border-color: #ca2a19;
	}

		.pro-btn.btn-danger:not(:disabled):not(.disabled):active:focus, .pro-btn.btn-danger:not(:disabled):not(.disabled).active:focus,
		.show > .pro-btn.btn-danger.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5);
		}

/* Employee Picker */
#tableEmpSearcher_filter {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0px;
	background: none;
	border: none;
}

	#tableEmpSearcher_filter #ddEmpSearchActive { height: 28px; }
	#tableEmpSearcher_wrapper table#tableEmpSearcher th { border-bottom: 1px; }

.empSearchClicker, .empSearchClicker .form-control[disabled] {
	cursor: pointer;
}

.empSearchClicker input, .empSearchClicker div {
	border-top: 1px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
}

.empSearchClicker #inputEmpNameHolder {
	padding: 6px 12px;
	border-radius: 50px 0 0 50px !important;
	border-left: 1px solid #ddd !important;
	border-right: 1px solid transparent;
	border-bottom: 1px solid #ddd !important;
}

.empSearchClicker .input-group-addon {
	border-radius: 0px;
	border: 0px;
	padding: 0 8px;
	transition: all .15s ease-in-out;
}

.empSearchClicker .form-control[disabled] ~ .input-group-addon { background: var(--light); }

.empSearchClicker #empClearSearchClicker {
	padding-right: 18px;
	border-radius: 0 50px 50px 0 !important;
	border-right: 1px solid #ddd !important;
}

.mb0 {
	margin-bottom: 0px !important;
}

		.mb20 {
			margin-bottom: 20px!important;
		}

		.mb10 { margin-bottom: 10px!important; }

.animate-pulse {
	animation-name: pulse;
	animation-duration: 1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 5, 0.8);
	}

	10% {
		box-shadow: 0px 1px 3px 1px rgba(0, 0, 5, 0.8);
	}

	25% {
		box-shadow: 0px 1px 5px 1px rgba(0, 0, 5, 0.8);
	}

	35% {
		box-shadow: 0px 1px 7px 1px rgba(0, 0, 5, 0.8);
	}

	50% {
		box-shadow: 0px 1px 9px 1px rgba(0, 0, 5, 0.8);
	}

	60% {
		box-shadow: 0px 1px 11px 1px rgba(0, 0, 5, 0.8);
	}

	75% {
		box-shadow: 0px 1px 13px 1px rgba(0, 0, 5, 0.8);
	}

	85% {
		box-shadow: 0px 1px 15px 1px rgba(0, 0, 5, 0.8);
	}

	100% {
		box-shadow: 0px 1px 17px 1px rgba(0, 0, 5, 0.8);
	}
}

.animate-bulge {
	animation: bulge .7s ease-out;
}

@keyframes bulge {
	0% {
		opacity: 0;
		transform: scale(.8, .8);
	}

	20% {
		opacity: 1;
		transform: scale(1.2, 1.2);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
/* For bookmarking on available user dashboards */
#app .row.top div h1 { /* "Breadcrumbs" */
	margin-top: 8px;
}

.dash-bookmark {
	margin-left: 8px;
	font-size: 18px !important;
	color: var(--light-dark-darker);
	transition: all ease-in-out .1s;
}

	.dash-bookmark:hover:not(.__toggling) {
		color: var(--mdc-theme-primary);
	}

	.dash-bookmark.marked {
		color: var(--mdc-theme-primary);
		transition: all ease-in-out .1s;
	}

		.dash-bookmark.marked:hover:not(.__toggling) {
			color: var(--light-dark-darker);
		}

.dash-bookmark.bookmark-report {
	font-size: 14px !important;
}

/* Popovers / Infotips */
/* If info tip is next to a .form-check-label, set the position to absolute */
.form-check-label + i.fas.fa-info-circle.help-text {
	position: absolute;
}

.help-text {
	color: var(--secondary);
	margin-left: 4px;
}
.dropdown-submenu {
	position: relative;
}

	.dropdown-submenu > .dropdown-menu {
		top: 0;
		left: 100%;
		margin-top: -6px;
		margin-left: -1px;
		-webkit-border-radius: 0 6px 6px 6px;
		-moz-border-radius: 0 6px 6px 6px;
		border-radius: 0 6px 6px 6px;
	}
.HelpCenterli ul.dropdown-menu {
	border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}
	.HelpCenterli ul.dropdown-menu a {
		white-space: pre-wrap;
	}
.HelpCenterPopoverI {
	padding-left:3px;
}
.form-control + span.prohelp-block {
	position: relative;
	cursor: help;
	display: none;
}

.form-control:focus + span.prohelp-block, span.prohelp-block:focus {
	display: inline-block !important;
	position: absolute;
	left: 0;
	top: calc(100% + 5px);
	min-width: 200px;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.3rem;
	z-index: 1060;
	-webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	margin: 0px !important;
	padding: 12px;
	font-size: 14px;
}
.csstooltip {
	position: relative;
	cursor: help;
}

	.csstooltip:hover::after {
		content: attr(data-content);
		position: absolute;
		left: 0;
		top: calc(100% + 5px);
		min-width: 200px;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 0.3rem;
		padding: 12px;
		color: #444444;
		font-size: 14px;
		z-index: 1060;
		-webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
		box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	}
.help-temp-pop {
}

.help-small {
}

.help-large {
}

.help-medium {
}

.help-header {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
}

.help-body {
}

.help-footer {
	width: 100%;
	padding-left: 10px;
	padding-right: 5px;
	text-align: right;
}

	.help-footer a {
		font-size: 11px;
		padding-right: 5px;
		color: #337ab7;
	}

.popover {
	max-width: 100% !important;
}	

	.dropdown-submenu > a:after {
		display: block;
		content: " ";
		float: right;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 5px 0 5px 5px;
		border-left-color: #23282E;
		margin-top: 5px;
	}
	.dropdown-submenu:hover > a:after {
		border-left-color: #23282E;
	}

	.dropdown-submenu.pull-left {
		float: none;
	}

		.dropdown-submenu.pull-left > .dropdown-menu {
			left: -100%;
			margin-left: 10px;
			-webkit-border-radius: 6px 0 6px 6px;
			-moz-border-radius: 6px 0 6px 6px;
			border-radius: 6px 0 6px 6px;
		}
/*.popover {*/
	/*background: var(--customer-accent);*/
	/*color: var(--paper);
}

.popover-title {
	font-size: 16px;
	background-color: rgba(255,255,255, .25);
	border-bottom: none;
	font-weight: 500;
}

.popover-content {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
}*/

/* Popover arrow colors */
	/*.popover.left > .arrow:after { border-left-color: var(--customer-accent); }
	.popover.right > .arrow:after { border-right-color: var(--customer-accent); }
	.popover.top > .arrow:after { border-top-color: var(--customer-accent); }
	.popover.bottom > .arrow:after { border-bottom-color: var(--customer-accent); }*/
	/*
#app .row.top div h1 {
	background: var(--light); 
	padding: 8px;
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: normal;
	border-radius: 4px;
	border: 1px solid var(--light-dark);
	color: var(--text-hint);
}*/
	/*	.pro-breadcrumb {
		background: var(--light);
	}

		.pro-breadcrumb > li + li:before {
			font-family: "Font Awesome 5 Pro";
			content: '\f054';
			color: var(--text-hint);
		}

		.pro-breadcrumb > .active {
			color: var(--text-hint);
		}

		.pro-breadcrumb a {
			color: var(--mdc-theme-primary)!important;
		}
*/

/* TAGS/CHOSEN */
/* CHOSEN (multi): Fixes not being horizontally aligned for multi chosen */
select.chosen-select[multiple][tags] + .chosen-container-multi input.chosen-search-input { /* Only does this for chosen elements that have the "tags" attribute added to them */
	margin-top: 7px;
	margin-bottom: 5px;
}

/* TAGS: hover on new option/tag to add (for list that pops up while typing */
.chosen-select[tags] + .chosen-container .chosen-results li.no-results:hover { /* Only does this for chosen elements that have the "tags" attribute added to them */
	cursor: pointer;
	background: var(--customer-accent);
	color: var(--paper);
}

.tag-error {
	color: rgb(171 69 68) !important;
}

.search-choice[tags] { /* Only does this for chosen elements that have the "tags" attribute added to them */
	transition: all ease-in-out .09s;
}

.search-choice.tag-error {
	background: rgb(242 222 222) !important;
	border-color: rgb(223 182 188) !important;
	animation: shake .5s ease-in-out;
	transition: background ease .02s;
}

.chosen-container-multi .chosen-choices li.search-choice.tag-error .search-choice-close {
	top: 4px;
	right: 3px;
	background: none;
}

	.chosen-container-multi .chosen-choices li.search-choice.tag-error .search-choice-close:before {
		content: "\f00d";
		font-family: 'Font Awesome 5 Pro' !important;
		font-size: 12px !important;
		color: rgb(171 69 68) !important;
	}

/* SHAKE ANIMATION */
@keyframes shake {
	0% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-3px);
	}

	40% {
		transform: translateX(3px);
	}

	60% {
		transform: translateX(-3px);
	}

	80% {
		transform: translateX(3px);
	}

	100% {
		transform: translateX(0);
	}
}

/* Time Picker controls */
div.TimeHolderControl, div.TimeHolderControlTiny {
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	padding: 0px !important;
}

	div.TimeHolderControl select.form-control, div.TimeHolderControlTiny select.form-control {
		display: inline-block;
		width: calc(33% - 6px);
	}

	div.TimeHolderControlTiny select.form-control {
		padding-left: 1px !important;
		padding-right: 1px !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		text-indent: 1px;
		text-overflow: '';
	}

input[type='time'].form-control {
	line-height: 20px;
}

.modal-backdrop + .dt-button-background {
	z-index: 1039;
}