@charset "utf-8";

/*********************************
* CORE HTML TAGS
**********************************/

/* All core HTML tags should be styled by Bootstrap / Materialize */

/* Once all pages are converted to the new theme, we can remove these styles */

/* Select ONLY non Bootstrap elements */
input:not([type]):not(.form-control), /* Workaround for inputs with no type */
input[type="text"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="email"]:not(.form-control),
input.hasDatepicker:not(.form-control),
select:not(.form-select),
textarea:not(.form-control) {
	outline: 0;
	border: var(--ppw-form-control-border-width) solid var(--ppw-form-control-border-color);
	border-radius: var(--ppw-form-control-border-radius);
	background-color: var(--ppw-form-control-bg);

	font-size: var(--ppw-form-control-font-size);
	color: var(--ppw-form-control-color);

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	min-height: 20px;	
}

/* Select ONLY non Bootstrap elements */
input:not([type]):not(.form-control):focus, /* Workaround for inputs with no type */
input[type="text"]:not(.form-control):focus,
input[type="date"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
input[type="email"]:not(.form-control):focus,
input.hasDatepicker:not(.form-control):focus,
select:not(.form-select):focus,
textarea:not(.form-control):focus {
	outline: 0;
	border: 1px solid var(--bs-primary);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

input:not([type]):not(.form-control):disabled, /* Workaround for inputs with no type */
input[type="text"]:not(.form-control):disabled,
input[type="date"]:not(.form-control):disabled,
input[type="password"]:not(.form-control):disabled,
input[type="email"]:not(.form-control):disabled,
input.hasDatepicker:not(.form-control):disabled,
select:not(.form-control):disabled,
textarea:not(.form-control):disabled {
	outline: 0;
	border: 1px solid #e5e6e8;
	color: #a8aab4;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
 

/* Select ONLY non Bootstrap elements */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
	margin: 3px;
}

/*********************************
* IDs
**********************************/

#content {
	padding: 0px var(--ppw-layout-default-padding-x);
}

#content.full-width {
	padding: 0px 0px;
}

#footer {
	padding-right: 16px;
	padding-left: 16px;
	padding-bottom: 8px;

	font-size: .75em;
}

#wohistory-menu span.wo-status {
	padding: 2px 2px 3px 2px;
}

#wohistory-menu .historyLink {
	margin-left: -2px;	
}

#wohistory-menu .status-chip {
	padding: 3px;
	border-radius: 2px;
}

#showDetails {
	cursor: pointer;
}

#wo_details {
	border-spacing: 2px;
}

/* OLD SITE CLASSES */
#wo_details td.display-name,
.display-name {
	background-color: inherit;
	text-align: right;
}

#notification {
	display: inline;
	display: none;

	padding: 4px;
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;

	font-weight: 600; /* Semi-Bold */
	font-size: 12px;
}

#notification_container {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	z-index: 2000; /* Above #header */

	text-align: center;
}

#slidedown_details table td {
	padding: 4px;
	border: none;
	line-height: 1em;
}

#slider_handle {
	height: 7px;
	color: black;
	line-height: 7px;
	text-align: center;
	cursor: pointer;
}

#advancedTbl td {
	vertical-align: middle;
}

#training {
	display: inline-block;

	width: 256px;
	margin-top: 4px;
	margin-bottom: 4px;	

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background-color:#f7f5f5;
	text-align: center;
	font-weight: 300;
	font-size: 120%;
}

/*********************************
* CLASSES
**********************************/

.page-description {
	margin-bottom: 12px;

	color: var(--bs-emphasis-color);
	font-size: 16px;
	line-height: 1em;
}

.page-description:empty {
	display: none;
}

.training-section-heading {
	margin-bottom: 8px;
	background-color: #e6e6e6;
	font-weight: 600;
}

/*********************************
* CLASSES > TABLES
**********************************/

table.vertical-center {
	height: 100%;
	padding: 0px;
	margin: 0px;
	white-space: nowrap;
}

table.vertical-center td {
	margin: 0px;
	padding: 0px;
}

table.vertical-center > tbody > tr > td {
	padding: 0px;
}

table.row-lines tbody td {
	border-bottom: 1px solid #D6D6D6;	
}

table.row-stripe tbody tr:nth-child(even) td,
table.row-stripe tbody tr.even td {
	background-color: #f7f7f7;
}

/* Used only on View Work Order > PCR Forms > Form Overview */
table.stripe-grey-pcr tbody tr:nth-child(4n) td {
	background-color: #d5d5d5;
}

/* Used only on View Work Order > PCR Forms > Form Overview */
table.stripe-grey-pcr tbody tr:nth-child(4n-1) td {
	background-color: #d5d5d5;
}

table.stripe-blue tbody tr:nth-child(even) td,
table.stripe-blue tbody tr.even td {
	background-color: #e5ecf9;
}

table.wo-table-summary th {
	padding: 4px;
}

table.wo-table-summary a {
	color: rgba(0, 0, 0, 0.8);
}

table.wo-table-summary .wo-status {
	padding: 2px 4px;
}

/*********************************
* CLASSES > MENUS
**********************************/

.tooltip-menu {
	padding: 8px 0px;
	overflow: hidden;
	position: relative;
}

.tooltip-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-width: 175px;
}

/* Standard row */
.tooltip-menu li {
	display: flex;
	align-items: center;
	color: rgba(0, 0, 0, 0.87);
	font-size: 14px;
	padding: 8px 16px;
	line-height: 20px;
}

/* Divider row */
.tooltip-menu li.divider {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0;
}

/* Heading row */
.tooltip-menu li.heading {
	font-weight: 700;
	color: rgba(0, 0, 0, 0.65);
	font-size: 12px;
}

/* Inject a Material checkmark icon for checkboxes and radio buttons */
.tooltip-menu input[type="checkbox"]::before,
.tooltip-menu input[type="radio"]::before {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;

	font-variation-settings:
	'FILL' 1,
	'wght' 600,
	'GRAD' 0,
	'opsz' 48;

	content: 'check';
	font-size: 20px;

	padding-right: 8px;

	opacity: 0;
}

/* Fix vertical alignment of checkmark icon */
.tooltip-menu li label {
	display: flex;
	align-items: center;
}

/* Show the checkmark when the checkbox/radio is checked */
.tooltip-menu input[type="checkbox"]:checked::before,
.tooltip-menu input[type="radio"]:checked::before {
	opacity: 1;
}

/* Hide the native controls */
.tooltip-menu li input[type="checkbox"],
.tooltip-menu li input[type="radio"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	/* Not removed via appearance */
	margin: 0;
}

/*********************************
* CLASSES > MENUS > ACTIONS
**********************************/
ul.link-menu,
ul.link-menu-large {
	padding-left: 12px;
	margin: 0;
	padding: 0;

	list-style-type: none;
	list-style-position: inside;
}

ul.link-menu-large {
	font-size: 14px;
}

ul.link-menu li {
	overflow: hidden;

	padding-top: .25em;
	padding-bottom: .25em;
	padding-right: 1em;
	padding-left: 1em;

	white-space: nowrap;
}

ul.link-menu li > a.button-small{
	display: block;
	float: right;
	margin-left: 24px;
}

ul.link-menu-large li {
	padding-top: .5em;
	padding-bottom: .5em;
	padding-right: 1em;
	padding-left: 1em;
}

.required {
	color: red;
	font-weight: 700; /* Bold */
}

.dim {
	opacity: .5;
}

#ui-datepicker-div {
	z-index: 1050 !important;
}

.question-heading {
	display: block;
	margin: 4px;
}

td.late {
	background-color: #feeded;
	color: #c80000;
}

td.today {
	background-color: #ffe58c;
}

td.wait {
	background-color: #CBF2FF;
}

td.display-value {
	white-space: normal;
}

.wo_form .display-value {
	padding: 4px;
	min-width: 128px;	

	border: 1px solid #747474;
	background-color: var(--ppw-form-control-bg);

	color: var(--ppw-form-control-color);
	word-wrap: break-word;
}

.yellow-highlight {
	background-color: #fafa63 !important;
}

.color-select,
.minicolors-input {
	padding: 4px;
}

/*********************************
* CLASSES > FORMS
**********************************/
.form {
/* 	background-color: #FFF;
	display: inline-block; */
	
	/* ROUNDED CORNERS */
/*	border-radius: 4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;*/
}

.form-box, 
.formcontent /* OLD SITE */ {
	display: inline-block;
	margin: 8px 0px;

	background-color: var(--ppw-form-bg);
	border: var(--bs-card-border-width) solid var(--bs-card-border-color);
	border-radius: 4px;

	padding: 1.25rem;
	box-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
}

.form-content {
	padding: 8px 0px;
	width: fit-content;
}

.form-content input[type='text']:focus, 
.form-content select:focus, 
.form-content textarea:focus, 
.formcontent input[type='text']:focus, /* OLD SITE */
.formcontent select:focus, /* OLD SITE */
.formcontent textarea:focus /* OLD SITE */ {
	/* border: 1px solid #39F; */
}

.form-header,
.form-footer {
	padding: 6px;
	background-color: #e6e6e6;
	text-align: center;
}

.form-footer-alt {
	padding: 6px;
	text-align: center;
}

.form-header {
	border-bottom-width: 1px;
	border-bottom-color: #a7a7a7;
	border-bottom-style: solid;
}

.form-footer {
	border-top-width: 1px;
	border-top-color: #a7a7a7;
	border-top-style: solid;

	/* ROUNDED CORNERS */
	border-radius: 0px 0px 3px 3px;
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
	-khtml-border-radius: 0px 0px 3px 3px;
}

.form-heading,
.pageheading /* OLD SITE */ {
	display: flex;

	padding-top: 22px;
	padding-bottom: 14px;
	margin: 0;
	
	color: var(--bs-heading-color);
	align-items: center;
	line-height: 1em;
	font-size: 24px;
	font-weight: 500;
}

.form-title {
	padding-left: 0.75em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	
	font-size: 1.5em;
	line-height: 1;
	text-align: center;	
	font-weight: 300;
}

/* OLD SITE CLASSES */
.form td.display-name-form,
.formcontent td.display-name-form, /* OLD SITE */
.display-name {
	font-weight: normal;
	padding: 4px;
	text-align: right;
	vertical-align: top;
}

.form td.display-value-form {
	text-align: left;
	vertical-align: top;
}

.section-heading {	
	padding-top: 1em;
	margin-bottom: 12px;

	text-align: left;
	font-size: 18px;
	line-height: 1;
}

.row-border-bottom tr td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D3D3D3;
}

input[type='text'].form-error ,
select.form-error ,
textarea.form-error,
.form-error {
	background: none repeat scroll 0 0 #FFE4E4;
	border: 1px solid #C30000;
	color: #340000;
}

input[type='text'].form-success ,
select.form-success ,
textarea.form-success,
.form-success {
	background: none repeat scroll 0 0 #C7EAC3;
	border: 1px solid #0E7B00;
	color: #0E7B00;
}

td.wo_status,
td.wo_status_sub {
	vertical-align: middle;
	/* text-transform: uppercase; */
	font-size: 10px;
	text-align: center;
	font-weight: 600;
} 

td.wo_status a,
td.wo_status_sub a {
	color: inherit;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	-ms-grid-columns: 1fr;
	grid-template-rows: auto;
	-ms-grid-rows: auto;
	row-gap: 5px;
	grid-row-gap: 5px;
	margin: 5px;
}

.form-grid .group {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	-ms-grid-columns: 1fr 1.3fr;
	grid-template-rows: auto;
	-ms-grid-rows: auto;
	column-gap: 10px;
	grid-column-gap: 10px;
}

.form-grid .group .item-left {
	justify-self: end;
	align-self: start;
}

.form-grid .group .item-right {
	justify-self: start;
	align-self: center;
}

.form-grid .group .buttons {
	grid-column-start: 2;
}

.form-grid .group input,
.form-grid .group textarea,
.form-grid .group select {
	margin: 0;
}

/* Only used in /modules/admin/templates/qbo_connect.html. Replace with select placeholder */
.select-width > select {
	width: 200px;
}

.hide-overflow > tbody > tr > td {
	max-height: 40px !important;
	min-height: 40px;	

	border-right: .05px solid #BCBABA;
}

.hide-overflow > tbody > tr {
	max-height: 40px !important;
	min-height: 40px;
}

.hide-overflow > tbody > tr > td > h5 {
	overflow: hidden !important;

	max-width: 200px !important;
	margin-left: 5px;
	margin-right: 5px;

	white-space: nowrap;
}

.required-field:after {
	content: " *";
	color: red;
}

/*********************************
* CLASSES > BUTTONS
**********************************/

/* Rules for all buttons */
.button-small,
.button-large,
.chip-small,
.chip-large {
	display: inline-flex;

	padding: var(--ppw-btn-padding-y) var(--ppw-btn-padding-x);

	background-color: var(--ppw-btn-bg);
	border: var(--ppw-btn-border-width) solid var(--ppw-btn-border-color);
	border-radius: var(--ppw-btn-border-radius);
	outline: 0 none;
	
	font-family: var(--ppw-btn-font-family); /* BUTTON TAG USES MS SHELL DLG BY DEFAULT*/
	font-size: var(--ppw-btn-font-size);
	font-weight: var(--ppw-btn-font-weight);
	line-height: var(--ppw-btn-line-height);
	color: var(--ppw-btn-color);
	align-items: center;
	vertical-align: middle;
	text-decoration: none;

	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	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;
}

.button-small::before,
.button-small::after,
.button-large::before,
.button-large::after,
.chip-small::before,
.chip-small::after,
.chip-large::before,
.chip-large::after {
	color: var(--ppw-btn-icon-color); /* rgba(0, 0, 0, 0.65); */
}

/* Small buttons */
.button-small,
.chip-small {
	--ppw-btn-padding-x: 6px;
	--ppw-btn-padding-y: 4px;
	--ppw-btn-font-size: 12px;
	--ppw-btn-font-weight: 500;
	--ppw-btn-line-height: 16px;
	--ppw-btn-border-radius: 3px;

	margin: 2px;
	
	white-space: nowrap;
	word-break: "";
}

/* Small button icon settings */
.button-small::before,
.chip-small::before {
	font-size: 16px;
	margin-right: 6px;
}

.button-small::after,
.chip-small::after {
	font-size: 16px;
	margin-left: 6px;
}

/* Small button pill style */
.button-small.pill,
.chip-small.pill {
	--ppw-btn-border-radius: 20px;
}

/* Large buttons */
.button-large,
.chip-large {
	--ppw-btn-padding-x: 20px;
	--ppw-btn-padding-y: 10px;
	--ppw-btn-font-size: 14px;
	--ppw-btn-font-weight: 500;
	--ppw-btn-line-height: 14px;
	--ppw-btn-border-radius: 4px;

	margin: 4px;
}

/* Large button icon settings */
.button-large::before {
	font-size: 20px;
	margin-right: 6px;
}

/* Large button pill style */
.button-large.pill,
.chip-large.pill {
	--ppw-btn-border-radius: 20px;
}

/* Hide the button background on primary toolbar, datatables footers, and qTip footers */
/*#toolbar .button-small,
#work_orders_wrapper .dt-footer .button-small,
.qtip-footer .button-small {
	--ppw-btn-border-color: transparent;
	background-color: transparent;
	box-shadow: none;
} */

/* Make button background color slightly darker on forms. They are harder to see after removing the border. */
[data-ppw-theme="light"] .form-box .button-small,
[data-ppw-theme="light"] .form-box .button-large,
[data-ppw-theme="light"] .formcontent .button-small,
[data-ppw-theme="light"] .formcontent .button-large {
	/* background-color: #dcdcdc; */
	--ppw-btn-bg: #dcdcdc;
}

.button-large:active,
.button-small:active, 
.button-large.active,
.button-small.active,
.chip-large:active,
.chip-small:active, 
.chip-large.active,
.chip-small.active {
	box-shadow: var(--ppw-btn-active-shadow);
	background-color: var(--ppw-btn-active-bg);

	color: var(--ppw-btn-active-color);
}

.button-large:hover,
.button-small:hover,
.chip-large:hover,
.chip-small:hover {
	background-color: var(--ppw-btn-hover-bg);

	color: var(--ppw-btn-hover-color);
}

a.button-large:link,
a.button-large:hover,
a.button-large:focus,
a.button-large:visited, 
a.button-small:link,
a.button-small:hover,
a.button-small:focus,
a.button-small:visited,
a.chip-large:link,
a.chip-large:hover,
a.chip-large:focus,
a.chip-large:visited, 
a.chip-small:link,
a.chip-small:hover,
a.chip-small:focus,
a.chip-small:visited {
	color: var(--ppw-btn-color);
	text-decoration: none;
}
.button-small.disabled,
.button-large.disabled, 
.button-small[disabled],
.button-large[disabled], 
.button-small[disabled]:hover,
.button-large[disabled]:hover, 
.button-large[disabled]:active,
.button-small[disabled]:active,
.chip-small.disabled,
.chip-large.disabled, 
.chip-small[disabled],
.chiplarge[disabled], 
.chip-small[disabled]:hover,
.chip-large[disabled]:hover, 
.chip-large[disabled]:active,
.chip-small[disabled]:active {
	opacity: .5;
	box-shadow: none;
}

.button-small.notext::before,
.button-large.notext::before {
	margin-right: 0px;
}

.chip-small.notext [data-icon]::before,
.chip-large.notext [data-icon]::before {
	margin-right: 0px;
}

.button-small.notext,
.button-large.notext,
.chip-small.notext,
.chip-large.notext {
	font-size:0;
}

.button-group {
	display: inline-block;
	padding: 0;
	margin: 0;

	list-style: none;
}

.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group {
	margin-left: 15px;
}

.button-group .button-small {
	float: left;
	margin-left: -1px;
}

.button-group > .button-small:not(:first-child):not(:last-child) {
	margin-right: 0;

	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-khtml-border-radius: 0;
}

.button-group > .button-small:first-child {
	margin-left: 0;
	margin-right: 0;

	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-khtml-border-radius-topright: 0;
	-khtml-border-radius-bottomright: 0;
}

.button-group > .button-small:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-khtml-border-radius-topleft: 0;
	-khtml-border-radius-bottomleft: 0;
}

/*********************************
* CLASSES > ICON BUTTONS
**********************************/

.icon-button {
	display: inline-block;
	position: relative;

	padding: 0;
	margin: 0;

	cursor: pointer;
}

.icon-button [data-icon] {
	color: rgba(0, 0, 0, 0.65);
	font-size: 20px;
}

/* Background circle default state */
.icon-button [data-icon]::after {
	content: '';

	background-color: rgba(255, 255, 255, 0);
	display: inline-block;
	height: 1.5em;
	width: 1.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.25,.25);
	border-radius: 50%;
	transition: all .25s;
}

.icon-button:hover {
	color: rgba(0, 0, 0, 1);
}

.icon-button.spin-right:hover {
	animation-name: spin;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

/* Background circle fade in + grow on hover */
.icon-button:hover [data-icon]::after {
	background-color: rgba(0, 0, 0, .15);
	transform: translate(-50%, -50%) scale(1,1);
}

@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

/*********************************
* CLASSES > ICONS
**********************************/
.icon-small {
	display: inline;

	height: 16px;
	width: 16px;
}

/*********************************
* CLASSES > PHOTOS
**********************************/
.photo-flex-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px;
}

.photo-flex-grid:empty {
	display: none;
}

.photo-div {
	position: relative;
	height: fit-content;
}

.photo-div:hover .photo-options {
	display: block;
}

.photo-div .photo-options {
	display: none;
	position: absolute;

	padding: 2px;

	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

	color: #fff;
	vertical-align: top;
}

.photo-div .photo-options a {
	color: #fff;
}

.photo-delete-button,
.photo-restore-button {
	position: absolute;
	bottom: 2px;
	right: 2px;
}

.photo-options .photo-delete-button {
	background-color: #b50000;
}
.photo-options .photo-delete-button::before {
	color: white;
}

.photo-div.selected > img {
	outline: var(--ppw-row-highlight-bg) solid 6px;
}

.photo-div.selected .selection-count {
	display: none;
	position: absolute;
	bottom: 1px;
	left: 1px;
	width: 40px;
	height: 40px;

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

	color: #ffffff;
	font-size: 24px;
	text-align: center;
	vertical-align: middle;
	line-height: 40px;
}

.photo-thumb {
	width: 150px;
	border: 1px solid #000000;
}

.photo-flagged {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	border: 3px solid #ff6600;
	width: 150px;
}

.photo-duplicate {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	width: 150px;
	border: 3px solid #C60000;
}

.photo-heading {
	clear: both;
	padding: 8px 0px;
	margin-bottom: 4px;
	
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-top-color: #b2b2b2;
	border-right-color: #b2b2b2;
	border-bottom-color: #b2b2b2;
	border-left-color: #b2b2b2;
	
	font-size: 20px;
	vertical-align: middle;
	line-height: 32px;
}

.photo-heading span, .photo-heading img {
	vertical-align: middle;
	/*display:table-cell;*/
	line-height: 32px;
}

.photo-subheading {
	clear: both;
	padding: 2px;
	
	background:#cccccc;
	border: 1px solid #B0B0B0;

	color: #000000;
	font-size: 14px;
	font-weight: bold;
}

.photo-stageheading {
	margin: 5px 0 5px 0;
	clear: both;
	margin-left: 8px;
}

.document-container {
	float: left;

	margin: 5px;
	padding: 3px;
	min-width: 250px;
	max-width: 300px;

	background: #f5f5f5;
}

.document-container img {
	float: left;
	margin: 3px 6px 3px 3px;
	border: 1px solid #d3d3d3;
}

.duplicate-container {
	float: left;
	padding: 5px;
	margin: 5px;
	background :#f5f5f5;
}

/*********************************
* CLASSES > FORM STATUS
**********************************/
.form-status ul {
	margin: 4px;
}

.form-status ul li {
	text-align: left;
}

/*********************************
* CLASSES > MESSAGES
**********************************/

.msg_info,
.msg_success,
.msg_warning,
.msg_error,
.msg_validation {
	display: inline-block;

	width: auto;
	margin: 8px;
	padding: 8px;
	
	border: 1px solid;

	/* ROUNDED CORNERS */
	border-radius: .25rem;
	-moz-border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-khtml-border-radius: .25rem;

	align-items: center;
	/* line-height: 24px; */
}

.msg_info::before,
.msg_success::before,
.msg_warning::before,
.msg_error::before,
.form-info::before {
	display: inline-block;

	margin-right: 6px;
	
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;

	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48;

	vertical-align: middle;
}

.msg_info ul,
.msg_success ul,
.msg_warning ul,
.msg_error ul,
.msg_validation ul {
	margin: 0;
	list-style-position: inside;
}

.msg_info, .notification_info {
	background-color: var(--bs-primary-bg-subtle);
	border-color: var(--bs-primary-border-subtle);
	color: var(--bs-primary-text-emphasis);
}

.msg_info::before {
	content: "info";
}

.msg_success,
.notification_success {
	background-color: var(--bs-success-bg-subtle);
	border-color: var(--bs-success-border-subtle);
	color: var(--bs-success-text-emphasis);
}

.msg_success::before {
	content: "check";
}

.msg_warning,
.notification_warning {
	background-color: var(--bs-warning-bg-subtle);
	border-color: var(--bs-warning-border-subtle);
	color: var(--bs-warning-text-emphasis);
}

.msg_warning::before {
	content: "warning";
}

.msg_error,
.notification_error {
	background-color: var(--bs-danger-bg-subtle);
	border-color: var(--bs-danger-border-subtle);
	color: var(--bs-danger-text-emphasis);
}

.msg_error::before {
	content: "error";
}

input.error[type="text"],
input.error[type="password"],
select.error,
textarea.error {
	border: 1px solid #D8000C;
	background-color: #FFE8E8;
}

/*********************************
* CLASSES > TABLES
**********************************/

/* Somber theme. */
.somber-theme table {
	background-color: #f2f2f2;
	margin-top: 5px;
}

.somber-theme table tr th {
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNWM3YzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e3e3e3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* W3C */
	border-bottom: 0px solid #f2f2f2;
	padding: 5px;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
}

.somber-theme table tr td {
	border-bottom: 0px solid #f2f2f2;
	padding: 3px 40px 3px 8px;
	vertical-align: top;
}

.somber-theme table tr.even {
	background-color: rgb(236, 236, 236);
}

.somber-theme table tr.odd {
	background-color: rgb(255, 255, 255);
}

.somber-theme table tr td {
	border-color: rgb(211, 211, 211) transparent rgb(211, 211, 211) rgb(211, 211, 211);
	border-style: none solid solid none;
	border-width: 1px;
}

.somber-theme table tr:hover td {
	background: #dcebfc; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZWJmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjMWRiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #dcebfc 0%, #c1dbfc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dcebfc), color-stop(100%, #c1dbfc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dcebfc 0%, #c1dbfc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dcebfc 0%, #c1dbfc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dcebfc 0%, #c1dbfc 100%); /* IE10+ */
	background: linear-gradient(top, #dcebfc 0%, #c1dbfc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcebfc', endColorstr='#c1dbfc', GradientType=0 ); /* IE6-8 */
	color: #000 !important;
}

.somber-theme table tr.grand-total td {
	font-weight: 600;
	background-color: rgb(255, 255, 255);
	cursor: default;
}

/* Used only for Quickbooks integration */
table.stripey tbody tr:nth-child(4n) td {
	background-color: #f6f6f6;
}

/* Used only for Quickbooks integration */
table.stripey tbody tr:nth-child(4n-1) td {
	background-color: #f6f6f6;
}

/*********************************
* CLASSES > LISTVIEW
**********************************/
.list-enhanced ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.list-enhanced li {
	position: relative;
	box-sizing: border-box;
}

.list-enhanced li:hover {
	background-color: var(--ppw-list-item-hover-bg-color);
}

.list-enhanced .item-link,
.list-enhanced .list-button,
.list-enhanced label.item-content {
	transition-duration: .3s;
	transition-property: background-color,color;
	position: relative;
	overflow: hidden;
	z-index: 0;
	cursor: pointer;
}

.list-enhanced .item-link,
.list-enhanced .list-button {
	display: block;
}

.list-enhanced .item-link,
.list-enhanced label.item-content {
	color: inherit;
}

.list-enhanced .item-content {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: center;
	min-height: calc(var(--ppw-list-item-min-height));
	padding-left: calc(var(--ppw-list-item-padding-horizontal) + var(--ppw-safe-area-left));
}


.list-enhanced .item-media {
	display: flex;
	flex-shrink: 0;
	flex-wrap: nowrap;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: var(--ppw-list-item-padding-vertical);
	padding-top: var(--ppw-list-item-padding-vertical);
	position: relative;
}


.list-enhanced .item-inner {
	position: relative;
	width: 100%;
	min-width: 0;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: center;
	align-self: stretch;
	padding-top: var(--ppw-list-item-padding-vertical);
	padding-bottom: var(--ppw-list-item-padding-vertical);
	min-height: calc(var(--ppw-list-item-min-height));
	padding-right: calc(var(--ppw-list-item-padding-horizontal) + var(--ppw-safe-area-right));
}

.list-enhanced .item-media + .item-inner {
	margin-left: var(--ppw-list-item-media-margin);
}

.list-enhanced .item-link .item-inner {
	padding-right: calc(var(--ppw-list-chevron-icon-area) + var(--ppw-list-item-padding-horizontal) + var(--ppw-safe-area-right));
}


.links-list a:before,
.list-enhanced .item-link .item-inner:before,
.media-list .chevron-center .item-link .item-inner:before,
.media-list .item-link .item-title-row:before,
.media-list .item-link.chevron-center .item-inner:before,
.media-list.chevron-center .item-link .item-inner:before,
li.media-item .chevron-center .item-link .item-inner:before,
li.media-item .item-link .item-title-row:before,
li.media-item .item-link.chevron-center .item-inner:before,
li.media-item.chevron-center .item-link .item-inner:before {
	font-family: 'Material Symbols Outlined';
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 20px;
	position: absolute;
	top: 50%;
	width: 8px;
	height: 14px;
	margin-top: -7px;
	font-size: var(--ppw-list-chevron-icon-font-size);
	line-height: 14px;
	color: var(--ppw-list-chevron-icon-color);
	pointer-events: none;
	right: calc(var(--ppw-list-item-padding-horizontal) + var(--ppw-safe-area-right));
	content: var(--ppw-list-chevron-icon-right);
}

.list-enhanced .item-title {
	min-width: 0;
	flex-shrink: 1;
	white-space: var(--ppw-list-item-title-white-space);
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	font-size: var(--ppw-list-item-title-font-size);
	font-weight: var(--ppw-list-item-title-font-weight);
	color: var(--ppw-list-item-title-text-color);
	line-height: var(--ppw-list-item-title-line-height);
}


.list-enhanced .item-after {
	padding-left: var(--ppw-list-item-after-padding);
}

.list-enhanced .item-after {
	white-space: nowrap;
	flex-shrink: 0;
	display: flex;
	font-size: var(--ppw-list-item-after-font-size);
	font-weight: var(--ppw-list-item-after-font-weight);
	color: var(--ppw-list-item-after-text-color);
	line-height: var(--ppw-list-item-after-line-height);
	margin-left: auto;
}


.list-enhanced .item-footer, .list-enhanced .item-header {
	white-space: normal;
}

.list-enhanced .item-header {
	color: var(--ppw-list-item-header-text-color);
	font-size: var(--ppw-list-item-header-font-size);
	font-weight: var(--ppw-list-item-header-font-weight);
	line-height: var(--ppw-list-item-header-line-height);
}

.list-enhanced .item-footer {
	color: var(--ppw-list-item-footer-text-color);
	font-size: var(--ppw-list-item-footer-font-size);
	font-weight: var(--ppw-list-item-footer-font-weight);
	line-height: var(--ppw-list-item-footer-line-height);
}

.list-enhanced .no-chevron,
.list-enhanced.no-chevron,
.menu-list {
	--ppw-list-chevron-icon-color: transparent;
	--ppw-list-chevron-icon-area: 0px;
}

.list-enhanced .item-media [data-icon]::before {
	color: rgba(0, 0, 0, 0.65);
	font-size: 20px;
	font-variation-settings:
	'wght' 700,
	'GRAD' 0,
	'opsz' 48;
}

/*********************************
* EFFECTS > BACKGROUND COLORS
**********************************/

/* LIGHT GREY */
.photo-subheading {
	background: #e6e6e6;
}

/* LIGHT BLUE HIGHLIGHT */
ul.link-menu > li:hover, 
ul.link-menu-large > li:hover, 
.wo_tooltip ul li:hover, 
.row-highlight > tbody > tr:hover > td,
.notesTable tbody tr:hover td,
#notesTable tbody tr:hover td.bid-notes {
	color: var(--ppw-row-highlight-color) !important;
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
}

/*********************************
* jQuery Sortable Columns
**********************************/
#columns_container {
	display: table;
	border-spacing: 4px;
}

#columns-active,
#columns-inactive {
	padding: 4px;
	display: table-cell;
}

#sel-columns-active,
#sel-columns-inactive,
#group_list {
	width: 200px;
}

#sel-columns-active,
#sel-columns-inactive {
	overflow-y: auto;
	height: 300px;
}

.sortable_list {
	margin: 4px;
	padding: 0px;	

	font-size: 12px;
	border: 1px solid #838383;

	list-style-type: none;
}

.sortable_list li {
	position: relative;

	padding: 4px;
	margin: 2px;

	background-color: #EEEEEE;
	border: 1px solid #A0A0A0;

	vertical-align: middle;
	font-size: 11px;
	line-height: 11px;

	cursor: move;
}

.sortable_list li input[type="checkbox"] {
	vertical-align: middle;
}

li.sortable_list_placeholder {
	background: none;
	background-color: #FFC;
	border: none;
}

li.sortable_list_placeholder::before {
	content: none;
}

.sortable_list li a.swap {
	position: absolute;
	right: 2px;
}

/*********************************
* FORMS > SWITCH CONTROL
**********************************/

/* Source: https://materializecss.com/switches.html */

.mtl-switch,
.mtl-switch * {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.mtl-switch label {
	cursor: pointer
}

.mtl-switch label input[type=checkbox] {
	position: absolute;	
	
	width: 0;
	height: 0;

	opacity: 0;
}

/* Track - checked color */
.mtl-switch label input[type=checkbox]:checked+.lever {
	background-color: var(--ppw-toggle-checked-track-bg);
}

.mtl-switch label input[type=checkbox]:checked+.lever:before,
.mtl-switch label input[type=checkbox]:checked+.lever:after {
	left: 18px;
}

/* Lever - checked color */
.mtl-switch label input[type=checkbox]:checked+.lever:after {
	background-color: var(--ppw-toggle-checked-lever-bg);
}

/* Track - unchecked color */
.mtl-switch label .lever {
	display: inline-block;
	position: relative;

	content: "";
	width: 36px;
	height: 14px;
	margin-right: 10px;
	margin: 0 16px;

	background-color: var(--ppw-toggle-track-bg);
	border-radius: 15px;

	vertical-align: middle;
	
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

.mtl-switch.notext .lever {
	margin: 0;
}

.mtl-switch label .lever:before,
.mtl-switch label .lever:after {
	display: inline-block;
	position: absolute;
	left: 0;
	top: -3px;

	content: "";	
	width: 20px;
	height: 20px;

	border-radius: 50%;

	-webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
	transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
	transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
	transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
}

/* Touch highlight start - unchecked color */
.mtl-switch label .lever:before {
	background-color: var(--ppw-toggle-lever-touch-start-bg);
}

/* Touch highlight start - checked color */
input[type=checkbox]:checked:not(:disabled) ~ .lever::before,
input[type=checkbox]:checked:not(:disabled).tabbed ~ .lever::before {
	background-color: var(--ppw-toggle-checked-lever-touch-start-bg);
}

/* Lever - unchecked color */
.mtl-switch label .lever:after {
	background-color: var(--ppw-toggle-lever-bg);
	-webkit-box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
	box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
}

/* Touch highlight end - checked color */
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
	-webkit-transform: scale(2.4);
	transform: scale(2.4);
	background-color: var(--ppw-toggle-checked-lever-touch-end-bg);
}

/* Touch highlight end - unchecked color */
input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
	-webkit-transform: scale(2.4);
	transform: scale(2.4);
	background-color: var(--ppw-toggle-lever-touch-end-bg);
}

/* Track - disabled color */
/*.mtl-switch label input[type=checkbox]:checked+.lever*/

.mtl-switch label input[type=checkbox][disabled]+.lever {
	background-color: var(--ppw-toggle-disabled-track-bg);
	cursor: default;
}

/* Lever - disabled color */
.mtl-switch label input[type=checkbox][disabled]+.lever:after,
.mtl-switch label input[type=checkbox][disabled]:checked+.lever:after {
	background-color: var(--ppw-toggle-disabled-lever-bg);
}

/**************************************************
* FILTER CHIPS
***************************************************/

.filter-chips-outer {
	display: flex;
	align-items: baseline;
}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.filter-chips .bc-title {
	font-weight: 600;
}

.filter-chips .bc-block {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
}

.filter-chips-right {
	margin-left: auto;
	flex: 0 0 auto;
}

/**************************************************
* Extras from legacy blueprint reset.css
***************************************************/

.left {
	float: left !important;
}

.right {
	float: right !important;
}

.qtip-body th, .qtip-body td {
	padding: 2px;
}