/*
	Created Date: 3/2024
	- Style Guide
	- BS5 Reversions
	- Gantt chart changes
	- [.progress-bar] styles currently used in dspQuoteOverview for progress bar styling on order checklist
*/

:root {
	--fcc-blue: #5b738f;
	--fcc-dark-blue: #173c66;
	--fcc-text-dark: #082a3d;
	--fcc-teal: #7095a7;
	--accent-blue:   #3A95FF;

	/* creates "darker effect" on hover, not full color change */
	--fcc-dark-blue-hover: rgba(23, 60, 102, 0.2) !important;

	--quote-yellow: #e8f156;
	--order-green: #44ca47;
	--invoice-blue: #00a3e8;
	--closed-brown: #c5874a;
	--archived-red: #c64a4a;

	--quote-yellow-light: #f8fbcc;
	--order-green-light: #c7efc8;
	--invoice-blue-light: #ace6ff;
	--closed-brown-light: #eedbc9;

	--th-blue: #cadbf5;

	--tooltip-header: #002299;
	--tooltip-body: #e4e7ff;

	/* THEME */
	--theme-primary: var(--fcc-blue);
	--theme-accent: var(--accent-blue);
	/* --theme-secondary: */
}

/* THEME COLORS */
.bg-fcc-blue { background: var(--fcc-blue) !important; }
.bg-fcc-dark-blue { background: var(--fcc-dark-blue) !important; }

/* Important BS5 override */
/* - added identical colors from V1 `style_screen.css` */
/* - default BS5 table-bg overrides these colors */
.bg-blue03alt	{ background: rgb(195, 208, 238) !important; }
.bg-blue01 		{ background: rgb(238, 237, 249) !important; }
.bg-blue02 		{ background: rgb(222, 220, 242) !important; }
.bg-blue04 		{ background: rgb(189, 185, 229) !important; }
.bg-blue05 		{ background: rgb(172, 167, 223) !important; }
.bg-green02 	{ background: rgb(220, 238, 204) !important; }
.bg-green03 	{ background: rgb(202, 229, 178) !important; }
.bg-green04 	{ background: rgb(185, 220, 153) !important; }
.bg-green05 	{ background: rgb(167, 211, 127) !important; }
.bg-grey01 		{ background: rgb(242, 242, 242) !important; }
.bg-grey03 		{ background: rgb(217, 217, 217) !important; }
.bg-grey04 		{ background: rgb(204, 204, 204) !important; }
.bg-grey06 		{ background: rgb(178, 178, 178) !important; }
.bg-orange01 	{ background: rgb(255, 229, 208) !important; }
.bg-orange03 	{ background: rgb(250, 204, 159) !important; }
.bg-purple01 	{ background: rgb(226, 217, 243) !important; }
.bg-purple03 	{ background: rgb(249, 154, 250) !important; }
.bg-red02 		{ background: rgb(248, 216, 211) !important; }
.bg-red03 		{ background: rgb(245, 196, 188) !important; }
.bg-red04 		{ background: rgb(242, 177, 166) !important; }
.bg-red05 		{ background: rgb(238, 157, 144) !important; }
.bg-yellow03 	{ background: rgb(253, 246, 185) !important; }
.bg-yellow08 	{ background: rgb(249, 230, 69)  !important; }
/* blue03 MUST appear AFTER other colors for RecieveOrder
   table toggling the "selected row" background color */
.bg-blue03 		{ background: rgb(205, 202, 236) !important; }

/* Modals */
.modal-header {
	background: var(--theme-primary);
	color: var(--bs-white);
}
/*	Background colors that match quote->order stages	*/
.bg-fcc-quote-yellow { background: var(--quote-yellow) !important; }
.bg-fcc-order-green { background: var(--order-green) !important; }
.bg-fcc-invoice-blue { background: var(--invoice-blue) !important; }
.bg-fcc-closed-brown { background: var(--closed-brown) !important; }

/* TODO MLG (very low) - related to old breadcrumbs now, unused method in V2 */
.buffer {float: left; width: 1280px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

/* Nav Menu - Desktop Dropdowns */
#desktopNav {
	ul {
		list-style: none;
	}

	.nav-link {
		position: relative;
		border-right: 1px solid var(--bs-gray-400);

		&:first-child,
		&:last-child {
			border-left: 1px solid var(--bs-gray-400);
		}

		&:hover {
			background-color: var(--fcc-blue);
			background: var(--fcc-dark-blue-hover);
			color: var(--bs-white);
			box-shadow: var(--bs-box-shadow) !important;

			.nav-group {
				display: block;
				visibility: visible;
				opacity: 1;
			}
		}

		a {
			display: block;
			color: var(--bs-white);
			font-size: .875rem;
			text-decoration: none;
			padding: 0.25rem 0.75rem;
			opacity: .95;
		}

		.nav-group {
			display: none;
			visibility: hidden;
			opacity: 0;
			position: absolute;
			top: 100%;
			left: 0;
			margin: 0;
			padding: 0;
			width: max-content;
			z-index: 1000;
			background: var(--bs-white);
			box-shadow: 0 .75rem 1.5rem 0 rgba(0, 0, 0, 0.6) !important;
			border-bottom-left-radius: 0.375rem;
			border-bottom-right-radius: 0.375rem;
			transition: opacity 0.15s ease-in-out,
						visibility 0.15s ease-in-out;

			&.center {
				left: 50%;
				transform: translate(-50%, 0);
			}

			&.left {
				left: unset;
				right: 0;
			}

			a {
				padding: 8px 16px;
				font-size: .75rem;
				color: var(--fcc-text-dark);

				&:hover {
					opacity: 1;
					background: var(--fcc-dark-blue-hover);
					box-shadow: var(--bs-box-shadow-sm) !important;
				}
			}
		}

		.nav-group-label {
            padding: 10px 4px;
			font-size: .813rem;
			color: var(--bs-white);
            text-transform: uppercase;

			span {
				padding: 0;
				color: var(--fcc-dark-blue);
				border-bottom: 3px solid var(--bs-primary);
			}
		}

		.nav-group-dark {
			color: var(--fcc-text-dark);
			background: var(--fcc-dark-blue-hover);
		}

	}
}
/* END Nav Menu - Desktop Dropdowns */

/* Autocomplete Menu - Dropdowns (matches Nav Menu above) */
.ui-menu {
	box-shadow: 0 .75rem 1.5rem 0 rgba(0, 0, 0, 0.6) !important;
	border: 1px solid var(--bs-white) !important;
	border-radius: 0.375rem;

	.ui-menu-item {
		background-color: var(--bs-white);
		font-size: 1.1em;
		font-family: Verdana,Arial,sans-serif;

		a {
			color: var(--fcc-text-dark);
			display: block;
			line-height: 1.5;
			padding: 0.2em 0.4em;
			text-decoration: none;

			&:hover {
				border: none !important;
				background: var(--fcc-dark-blue-hover);
				box-shadow: var(--bs-box-shadow-sm) !important;
			}
		}
	}

	.ui-menu-item-wrapper {
		color: var(--fcc-text-dark);
	}

	.ui-state-default,
	.ui-state-hover,
	.ui-state-active,
	.ui-state-focus {
		/* rm downstream jQuery UI effects on selected items */
		border: none !important;
		margin: 0 !important;

		/* help arrow navigation match hover style */
		color: var(--fcc-text-dark);
		background: var(--fcc-dark-blue-hover);
		box-shadow: var(--bs-box-shadow-sm) !important;
	}
}

/* Autocomplete Section Header */
.nonClickable {
    color: var(--fcc-text-dark);
	background: var(--fcc-dark-blue-hover);
    display: block;
    line-height: 1.5;
    padding: 8px 4px 0px;
    text-decoration: none;
    cursor:not-allowed !important;
	pointer-events: none !important;
}
/* END Autocomplete Menu - Dropdowns (matches Nav Menu above) */

/* Tables */
.table {
	/* TODO - rm bg after DataTable migration */
	thead {
		/* combo w/th bg */
		background: var(--theme-primary);
		&.dark-blue { background: var(--fcc-dark-blue) }
	}

	/* required for QVIMHighlights */
	tr.bg-orange01 td {
		background: rgb(255, 229, 208) !important;
	}
	tr.bg-purple01 td {
		background: rgb(226, 217, 243) !important;
	}

	th {
		background: transparent;
		color: var(--bs-white);
		border-right: 1px solid #999 !important;

		&:last-child {
			border-right: none !important;
		}

		&.sub-header {
			background-color: var(--fcc-dark-blue) !important;
			color: var(--bs-white);
		}
	}

	input[type="text"] {
		/* prevents BS5 inputs from getting too small (unreadable) on mobile.
			- roughly 10px per digit (8 = 12345678 = 12 million)
			- most text inputs SHOULD be full width
		 */
		min-width: 80px;
	}
	
	input[type="text"].lineItemQuantity {
		/* prevents BS5 inputs from getting too small (unreadable) on mobile.
			- roughly 10px per digit (8 = 12345678 = 12 million)
			- most text inputs SHOULD be full width
		 */
		min-width: 60px;
	}

	/* not used, considered */
	/* thead.dark-blue th:hover {
		background: rgba(91, 115, 143, .2) !important; fcc-blue
	} */
}

table.dataTable {
	th:hover {
		background: var(--fcc-dark-blue-hover);
	}

	/* position sorting arrows */
	span.dt-column-order {
		right: unset !important;
		margin-left: 2px;
	}
}

/* END THEME COLORS */


/* STYLE GUIDE */
/* Modals */
.modal-header {
	background: var(--theme-primary);
	color: var(--bs-white);
}

/* Tables */
.table {
	/* TODO - rm bg after DataTable migration */
	thead {
		/* combo w/th bg */
		background: var(--theme-primary);
		&.dark-blue { background: var(--fcc-dark-blue) }
	}

	th {
		background: transparent;
		color: var(--bs-white);

		&.sub-header {
			background-color: var(--fcc-text-dark);
			color: var(--bs-white);
		}
	}
}
/* END THEME COLORS */
.quicklinks,
footer p {
	font-size: .75rem !important;
}

/* Calendar */
.calendar.table {
	min-width: auto;
	max-width: 420px;

	th, td {
		text-align: center;
	}
	
	&.small {
		max-width: 200px;
		th, td {
			padding: 4px;
		}
	}

	thead {
		.month th {
			background: var(--fcc-dark-blue);
			font-size: .813rem;
		}

		.days th {
			padding: 4px;
			background: var(--fcc-blue);
		}
	}
}

/* Order Track - FullCalendar */
#calendar {
	.fc-day-number,
	.fc-day-header.fc-widget-header,
	.fc-content,
	.fc-button.fc-state-default {
		font-size: .75rem;
	}

	h2 {
		color: var(--fcc-text-dark);
	}

	.fc-day-header.fc-widget-header { 
		padding: 4px 0;
		background: var(--fcc-dark-blue);
		color: var(--bs-white);
	}

	.fc-content {
		padding: 1px 0;
		display: flex;
		align-items: center;

		img {
			margin-right: 4px;
		}
	}
}

.quicklinks {
	.header {
		background: var(--fcc-teal);
		color: var(--bs-white);
	}

	.btn:not(.btn-light) {
		background: var(--fcc-teal);
		color: var(--bs-white) !important;

		&:hover {
			filter: brightness(97%);
		}
	}
}

/* Modal */
.modal .table {
	min-width: auto;
}

/* End Modal */

/* Tables */
/* DataTable */
table.dataTable thead>tr>th {
	background: var(--fcc-blue) !important;
}

.dt-buttons.btn-group .btn {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.5rem;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: var(--bs-border-radius-sm);
	font-size: .75rem;

	&:not(:hover) {
		background: transparent;
	}
}
/* End DataTable */

.table {
	th {
		&.sub-header {
			padding: .25rem;
			text-align: center;
		}

		&.long {
			width: 400px;
		}
		
		&.longest {
			width: 500px;
		}
		
		&.medium {
			width: 140px;
		}

		&.min-200 {
			min-width: 200px;
		}

		&.action {
			width: 0;
		}
	}
}

table .badge {
	padding: 3px 5px;
	width: 22px;
	font-size: .75rem;
	color: var(--bs-emphasis-color);
    border-radius: 0;
	border: 1px solid var(--bs-emphasis-color);
	text-transform: uppercase;

	&.library {
		width: 110px;
		font-size: .688rem;
	}

	&.type-quote {
		background-color: var(--quote-yellow);
	}
	&.type-order {
		background-color: var(--order-green);
	}
	&.type-partial-invoice {
		background: var(--invoice-blue);
		background: linear-gradient(135deg, var(--invoice-blue) 50%, var(--order-green) 50%);
	}
	&.type-invoice {
		background-color: var(--invoice-blue);
	}
	&.type-closed {
		background-color: var(--closed-brown);
	}
	&.type-archived {
		background-color: var(--archived-red);
	}
}
/* End Tables */
.mig1 {
	h2.subheader {
		margin-top: 0;
		margin-bottom: .5rem;
		font-size: .875rem;
	}
	
	h3.subheader {
		font-size: .813rem;
		font-weight: bold;
		border-bottom: 3px solid var(--fcc-blue);
	}
	
	h5, h6 {
		font-size: .875rem;
	}

	.modal h5 {
		font-style: normal;
	}

	p {
		font-size: .875rem;
	}

	a.btn {
		color: var(--bs-btn-color);

		&:hover {
			color: var(--bs-btn-hover-color);
		}

		&:focus-visible {
			color: var(--bs-btn-hover-color);
		}
	}

	ol.breadcrumb {
		line-height: var(--bs-body-line-height);
	}

	table {
		a:not(.dropdown-item) {
			color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
		}

		input,
		select {
			font-size: .75rem;
		}
	}

	input {
		&.form-check-input {
			font-size: 1rem;
		}
	}

	.list-group-item a:not(.dropdown-item) {
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
	}

	.col-form-label-sm,
	.form-control-sm,
	.form-control-sm .form-control[type=file],
	.form-select-sm,
	.form-check-label,
	.input-group .btn.btn-sm,
	.pagination {
		font-size: .75rem;
	}
}

.fs-10 {
    font-size: .60rem !important;
}
.fs-12 {
    font-size: .75rem !important;
}

/* mig1 */
form.accordion {
	h2 {
		margin-top: 0 !important;
	}
}
/* Dropdown menus */
.btn-group  {
	height: fit-content;

	.dropdown-toggle {
		display: flex;
	}

	.dropdown-menu {
		font-size: .75rem;
	}

	.dropdown-item-danger {
		color: var(--bs-red);
	}

	.dropdown-toggle::after {
		 margin-left: 0;
	}
}

/* 3 dot dropdown menu */
.v-dots.btn-group  {
	height: fit-content;

	.dropdown-toggle {
		display: flex;

		&::after {
			display: none;
		}
	}
}

/* Tooltip icons */
.tooltip-inner {
	max-width: 250px;
	/* background-color: var(--fcc-blue); */
	text-align: left;
	opacity: 1;
}
.tooltip-fcc {
    position: absolute;
    top: 0;
    right: -1.1rem;
}


/* mig1 */
.table {
	border-collapse: collapse;

	th {
		text-align: inherit;
		border-width: 0;
		border-color: inherit;
	}

	th,
	td {
		font-size: .75rem;
	}
}
/* END STYLE GUIDE */
/* BS5 Reversions */
body {
	background-color: var(--bs-body-bg) !important;

	/* sticky footer */
	display: flex;
	flex-direction: column;
}
h1 {
	padding: 0; /* mig1*/
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
}

h2, h5, h6, p {
	font-size: .875rem;
}

h2.subheader {
	font-weight: bold;
	color: var(--fcc-text-dark);
}

h3.subheader {
	font-size: .813rem;
	font-weight: bold;
	border-bottom: 3px solid var(--fcc-blue);
}

p.subheader {
	font-size: .875rem;
	font-weight: bold;
	border-bottom: 3px solid var(--fcc-blue);

	&.dark {
		border-color: var(--fcc-dark-blue);
	}
}

input,
select,
textarea,
.submitBtn,
.div trumbowyg-editor p{
	font-size: .75rem;
}

.nav-global,
.quicklinks,
.nav-tabs,
.breadcrumb,
.fs-12,
.dropdown-menu,
.dt-search, /* dataTable */
.dt-info,
.dt-length,
.col-form-label-sm,
.form-label-sm,
.form-control,
.form-control-sm .form-control[type=file],
.form-control-plaintext,
.form-select-sm,
.form-check-label,
form .btn.inline,
.input-group-text,
.input-group .btn.btn-sm,
.input-group-sm > .input-group-text,
.jstree-anchor, /* file trees */
.pagination,
.pagination .page-link,
div.trumbowyg-editor p,
.alert p,
footer p {
	font-size: .75rem !important;
}

.fs-13 {
	font-size: .813rem !important;
}

.fs-14 {
	font-size: .875rem !important;
}

header {
	.upper {
		background: var(--fcc-blue);

		#quickQuoteOrderSearch {
			min-width: 190px;
		}
	}

	.lower {
		background: var(--fcc-teal);
	}
}

/* Mobile Nav Menu */
.navbar-dark,
nav.navbar[data-bs-theme=dark] {
	--bs-navbar-color: rgba(255, 255, 255, 0.85);
}

#mobileNav,
#quickLinksNav {
	max-width: 320px;
}

#mobileNav {
	font-size: 1rem;
	background: var(--fcc-teal) !important;

	.offcanvas-header {
		background: var(--fcc-blue);
	}

	.dropdown-item {
		font-size: 1rem;
		&:active {
			background-color: var(--fcc-blue);
		}
	}

	.btn {
		&.show {
			padding-bottom: 0;
		}

		&first-child:active {
			color: var(--bs-navbar-hover-color);
		}
	}
}

/* Home */
.home.container-xxl {
	max-width: 1580px;
}
.quicklinks {
	.header {
		background: var(--fcc-teal);
		color: var(--bs-white);
	}

	.btn:not(.btn-light) {
		background: var(--fcc-teal);
		color: var(--bs-white) !important;

		&:hover {
			filter: brightness(97%);
		}
	}
}

.greeting {
	text-transform: none;
}

/* Alerts */
.alert {
	&.inline p {
		font-size: .75rem;
	}

	p {

		font-size: .813rem;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

}

/* Badges */
.badge {
	padding: 3px 5px;
	width: 22px;
	font-size: .75rem;
	color: var(--bs-emphasis-color);
	border-radius: 0;
	border: 1px solid var(--bs-emphasis-color);
	text-transform: uppercase;

	&.legend {
		width: auto;
	}

	&.library {
		width: 110px;
		font-size: .688rem;
	}

	&.type-quote {
		background-color: var(--quote-yellow);
	}
	&.type-order {
		background-color: var(--order-green);
	}
	&.type-partial-invoice {
		background: var(--invoice-blue);
		background: linear-gradient(135deg, var(--invoice-blue) 50%, var(--order-green) 50%);
	}
	&.type-invoice {
		background-color: var(--invoice-blue);
	}
	&.type-closed {
		background-color: var(--closed-brown);
	}
	&.type-archived {
		background-color: var(--archived-red);
	}

	&.large {
		padding-top: 5px;
		width: auto;
		border-width: 2px;
		font-size: 1rem;
		letter-spacing: 0.2rem;
	}
}

/* Tabs */
.nav-tabs {
	--bs-nav-tabs-border-color: var(--fcc-blue);
	--bs-nav-tabs-link-active-border-color: var(--fcc-blue) var(--fcc-blue) var(--bs-body-bg);
	--bs-nav-tabs-link-hover-border-color: var(--fcc-blue);

	&:hover {
		--bs-nav-tabs-link-hover-border-color: var(--bs-border-color) var(--bs-border-color) var(--fcc-blue);
	}

	.nav-link {
		border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--fcc-blue);
	}
}

/* Filters */
.filter {
	.card-title {
		font-size: .875rem;
	}

	.btn.btn-sm {
		font-size: .75rem;
	}
}

/* Forms */
input,
select,
textarea,
span.input-group-text,
.text-disabled {
	border-color: var(--bs-gray-400) !important;
}

input {
	/* override the bs-gray-400 above */
	&.form-control-plaintext {
		border: inherit;
	}
	
	&.date-thin {
		max-width: 115px;
	}
}

.form-check-label {
	margin-top: 2px;
}

.form-check {
	margin-top: 2px;
}

.form-switch .form-check-input {
	width: 2.3rem;
	height: 1.1rem;
}

.text-disabled {
	background-color: var(--bs-secondary-bg);
}

.simulateDisabled {
	background-color: var(--bs-secondary-bg) !important;
}
/* End Forms */

/* Modal */
.modal .table {
	min-width: auto;
}

/* End Modal */

/* Tables */
/* DataTable */
table.dataTable thead>tr>th {
	background: var(--fcc-blue) !important;
}

/* add ".sub-header" style */
.dtrg-group.dtrg-level-0 {
	background: var(--fcc-dark-blue) !important;

	th {
		padding: .25rem;
		text-align: center !important;

		a {
			color: (var(--bs-white)) !important;
		}
	}
}

.dt-buttons.btn-group .btn {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.5rem;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: var(--bs-border-radius-sm);
	font-size: .75rem;

	&:not(:hover) {
		background: transparent;
	}
}
/* End DataTable */

.table {
	th {
		&.sub-header {
			padding: .25rem;
			text-align: center !important;
		}

		&.long {
			min-width: 400px;
		}

		&.min-200 {
			min-width: 200px;
		}

		&.action {
			width: 0;
		}
	}
}
/* End Tables */

/* Calendar */
.calendar.table {
	min-width: auto;
	max-width: 420px;

	&.small {
		max-width: 265px;

		th, td {
			padding: 4px;
		}
	}

	th, td {
		text-align: center;
	}

	thead {
		.month th {
			background: var(--fcc-dark-blue);
			font-size: .813rem;
		}

		.days th {
			padding: 4px;
			background: var(--fcc-blue);
		}
	}
}


/* Home page - past/upcoming items */
#month1,
#month2,
#month3 {
	.calendar.table {
		.bg-green02,
		.bg-green03,
		.bg-green05,
		.bg-red02,
		.bg-red05 {
			cursor: pointer;
		}
	}
}
/* End Calendar */

/* Item Details, Notes, Grouping */
#itemsInGroup {
	option {
		&:first-child {
			color: var(--bs-red);
			font-weight: bold;
		}

		&:disabled {
			color: var(--bs-black);
			font-weight: bold;
		}
	}
}
/* End Item Details, Notes, Grouping */

/* Footer */
footer {
	color: var(--bs-white);
	background: var(--fcc-teal);

	a {
		color: var(--bs-white);
	}
}

.mig1 {
	h2.subheader {
		margin-top: 0;
		margin-bottom: .5rem;
		font-size: .875rem;
	}

	h5, h6 {
		font-size: .875rem;
	}

	.modal h5 {
		font-style: normal;
	}

	p {
		font-size: .875rem;
	}

	a.btn {
		color: var(--bs-btn-color);

		&:hover {
			color: var(--bs-btn-hover-color);
		}

		&:focus-visible {
			color: var(--bs-btn-hover-color);
		}
	}

	ol.breadcrumb {
		line-height: var(--bs-body-line-height);
	}

	table {
		a:not(.dropdown-item) {
			color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
		}

		input,
		select {
			font-size: .75rem;
		}
	}

	input {
		&.form-check-input {
			font-size: 1rem;
		}
	}

	.list-group-item a:not(.dropdown-item) {
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
	}

	.col-form-label-sm,
	.form-label-sm,
	.form-control-sm,
	.form-control-sm .form-control[type=file],
	.form-select-sm,
	.form-check-label,
	.input-group .btn.btn-sm,
	.pagination {
		font-size: .75rem;
	}
}

/* mig1 */
form.accordion {
	h2 {
		margin-top: 0 !important;
	}
}


/* Required Label Asterisks */
.table td.required::before {
	display: inline;
	content: '* ';
	color: var(--bs-danger);
}

label.required::before {
	display: inline;
	content: '* ';
	color: var(--bs-danger);
}
/* END Required Label Asterisks */

/* Dropdown menus */
.btn-group  {
	height: fit-content;

	.dropdown-toggle {
		display: flex;
	}

	.dropdown-item-danger {
		color: var(--bs-red);
	}

	.dropdown-toggle::after {
		 margin-left: 0;
	}
}

/* 3 dot dropdown menu */
.v-dots.btn-group  {
	height: fit-content;

	.dropdown-toggle {
		display: flex;

		&::after {
			display: none;
		}
	}
}

/* Tooltip icons */
.tooltip-inner {
	max-width: 250px;
	/* background-color: var(--fcc-blue); */
	text-align: left;
	opacity: 1;
}
.tooltip-fcc {
	position: absolute;
	top: 0;
	right: -1.1rem;
}


/* mig1 */
.table {
	border-collapse: collapse;

	th {
		text-align: inherit;
		border-width: 0;
		border-color: inherit;
	}

	th,
	td {
		font-size: .75rem;
	}
}

/* Line Items */
#productPictureContainer .product-border {
	margin-top: 15px;
	width: 100%;
	max-width: 200px;
	min-height: 200px;
	border: 3px solid var(--fcc-blue);
}
/* END STYLE GUIDE */

/* BS5 REVERSIONS */
body {
	line-height: normal;
	font-size: 62.5%;
	margin: 0em auto;
	padding: 0px;
	font-family: arial, tahoma, verdana, sans-serif;
}

h2 {
	clear: left;
	margin: 1em 0px 0.5em 0px;
	font-weight: bold;
	font-size: 150%;
}

p {
	margin: 0px 0px 0.5em 0px;
	padding: 0px;
	line-height: 1.2em;
	font-size: 130%;
}

form h6 {
	font-style: normal;
}

button, input, optgroup, select, textarea { margin: revert; }
input, select, textarea, .submitBtn { font-size: 11px; }
table { border-collapse: separate; }

th {
	text-align: center;
	border-width: 1px;
	border-color: #000;
}

ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}

.btn.btn-sm {
	font-size: .875rem;
}

/* Forms */
label.form-check-label {
	line-height: 1.5;
}
input.form-check-input {
	font-size: revert;
}
input.form-check-lg {
	width:1.25em;
	height:1.25em;
}

/* Home page */
.contentbox-title-shading-small { line-height: 1rem; }
.sidebarbox-border {
	width: auto;
	margin: 0 0 1rem;
}

/* Manu. Info vendor catalog */
.jqcNode { text-decoration: none; }

/* resolve floats oddities */
.img-header,
#nav,
.buffer,
.container-content,
.footer {
	width: 100%;
}

/* Report Description Accordians */
.report.accordion {
	h2 {
		/* mig1 */
		margin-top: 0 !important;
	}

	p, li {
		font-size: .8rem;
	}

	.accordion-button {
		font-size: 0.8rem;

		&:after {
			margin-left: .5rem;
			--bs-accordion-btn-icon-width: .8rem;
		}
	}

	.accordion-body p {
		font-size: .8rem;
		line-height: 1rem;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
/* END BS5 REVERSIONS */

/* Report Description Accordians */
.report.accordion {
	h2 {
		/* mig1 */
		margin-top: 0 !important;
	}

	p, li {
		font-size: .8rem;
	}

	.accordion-button {
		font-size: 0.8rem;

		&:after {
			margin-left: .5rem;
			--bs-accordion-btn-icon-width: .8rem;
		}
	}

	.accordion-body p {
		font-size: .8rem;
		line-height: 1rem;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
/* END BS5 Reversions */

/* Gantt chart changes */
#gantt_here {
	z-index: 10 !important;
}
.text-disabled {
	background-color: var(--bs-secondary-bg);
}

.gantt_grid_scale,
.gantt_grid_data,
.gantt_task_scale,
.gantt_task_content,
.gantt_tooltip {
	font-size: .75rem !important;
}

.gantt_grid_scale,
.gantt_task_scale {
    font-weight: bold;
	color: var(--bs-heading-color) !important;
}

/* Gantt chart changes */
a.gantt_cal_ltitle_close_btn.dhx_gantt_icon.dhx_gantt_icon_close {
	text-decoration: none;
}
/* END Gantt chart changes */

/* PROGRESS BAR */
.progress-bar {
	margin-bottom: 1rem;
	position: relative;
	width: 100%;
	height: 1.5rem;
	font-size: 14px;
	font-weight: bold;
	border-radius: 4px;
	background: linear-gradient(
		to right,
		var(--quote-yellow-light) 25%,
		var(--order-green-light) 25% 50%,
		var(--invoice-blue-light) 50% 75%,
		var(--closed-brown-light) 75%
	);

	.stage {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		position: relative;
		width: 100%;
		height: inherit;
		border-radius: 4px;

		.count {
			margin-bottom: 0;
			padding: 0 10px;
			font-size: 14px;
		}

		&:hover {
			cursor: pointer;

			.details {
				visibility: visible;
				opacity: 1;
			}
		}

		.details {
			visibility: hidden;
			padding: 10px;
			position: absolute;
			top: 125%;
			width: 200px;
			z-index: 1;
			opacity: 0;
			transition: opacity 0.3s;
			background-color: var(--tooltip-body);
			border: 1px solid var(--tooltip-header);
			border-radius: 4px;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

			p {
				font-size: 12px;
				font-weight: 400;

				.title {
					font-weight: 700;
					text-transform: uppercase;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}

			&::after {
				margin-left: -7px;
				position: absolute;
				top: -15px;
				left: 50%;
				border-width: 7px;
				border-style: solid;
				border-color: transparent transparent var(--tooltip-header) transparent;
				content: '';
			}
		}

		&.quote {
			&.w-0 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 0.5%),
					transparent calc(0% + 0.5%)
				);
			}
			&.w-5 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 1.25%),
					transparent calc(0% + 1.25%)
				);
			}
			&.w-10 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 2.5%),
					transparent calc(0% + 2.5%)
				);
			}
			&.w-15 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 3.75%),
					transparent calc(0% + 3.75%)
				);
			}
			&.w-20 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 5%),
					transparent calc(0% + 5%)
				);
			}
			&.w-25 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 6.25%),
					transparent calc(0% + 6.25%)
				);
			}
			&.w-30 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 7.5%),
					transparent calc(0% + 7.5%)
				);
			}
			&.w-35 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 8.75%),
					transparent calc(0% + 8.75%)
				);
			}
			&.w-40 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 10%),
					transparent calc(0% + 10%)
				);
			}
			&.w-45 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 11.25%),
					transparent calc(0% + 11.25%)
				);
			}
			&.w-50 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 12.5%),
					transparent calc(0% + 12.5%)
				);
			}
			&.w-55 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 13.75%),
					transparent calc(0% + 13.75%)
				);
			}
			&.w-60 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 15%),
					transparent calc(0% + 15%)
				);
			}
			&.w-65 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 16.25%),
					transparent calc(0% + 16.25%)
				);
			}
			&.w-70 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 17.5%),
					transparent calc(0% + 17.5%)
				);
			}
			&.w-70 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 18.75%),
					transparent calc(0% + 18.75%)
				);
			}
			&.w-80 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 20%),
					transparent calc(0% + 20%)
				);
			}
			&.w-85 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 21.25%),
					transparent calc(0% + 21.25%)
				);
			}
			&.w-90 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 22.5%),
					transparent calc(0% + 22.5%)
				);
			}
			&.w-95 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 23.75%),
					transparent calc(0% + 23.75%)
				);
			}
			&.w-100 {
				background: linear-gradient(
					to right,
					var(--quote-yellow) calc(0% + 25%),
					transparent calc(0% + 25%)
				);
			}
		}

		&.order {
			.count,
			.details {
				margin-left: 25%;
			}

			&.w-0 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 0.5%),
					transparent calc(25% + 0.5%)
				);
			}
			&.w-5 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 1.25%),
					transparent calc(25% + 1.25%)
				);
			}
			&.w-10 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 2.5%),
					transparent calc(25% + 2.5%)
				);
			}
			&.w-15 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 3.75%),
					transparent calc(25% + 3.75%)
				);
			}
			&.w-20 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 5%),
					transparent calc(25% + 5%)
				);
			}
			&.w-25 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 6.25%),
					transparent calc(25% + 6.25%)
				);
			}
			&.w-30 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 7.5%),
					transparent calc(25% + 7.5%)
				);
			}
			&.w-35 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 8.75%),
					transparent calc(25% + 8.75%)
				);
			}
			&.w-40 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 10%),
					transparent calc(25% + 10%)
				);
			}
			&.w-45 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 11.25%),
					transparent calc(25% + 11.25%)
				);
			}
			&.w-50 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 12.5%),
					transparent calc(25% + 12.5%)
				);
			}
			&.w-55 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 13.75%),
					transparent calc(25% + 13.75%)
				);
			}
			&.w-60 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 15%),
					transparent calc(25% + 15%)
				);
			}
			&.w-65 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 16.25%),
					transparent calc(25% + 16.25%)
				);
			}
			&.w-70 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 17.5%),
					transparent calc(25% + 17.5%)
				);
			}
			&.w-75 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 18.75%),
					transparent calc(25% + 18.75%)
				);
			}
			&.w-80 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 20%),
					transparent calc(25% + 20%)
				);
			}
			&.w-85 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 21.25%),
					transparent calc(25% + 21.25%)
				);
			}
			&.w-90 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 22.5%),
					transparent calc(25% + 22.5%)
				);
			}
			&.w-95 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 23.75%),
					transparent calc(25% + 23.75%)
				);
			}
			&.w-100 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green) 25% calc(25% + 25%),
					transparent calc(25% + 25%)
				);
			}
		}

		&.invoice {
			.count,
			.details {
				margin-left: 50%;
			}

			&.w-0 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 0.5%),
					transparent calc(50% + 0.5%)
				);
			}
			&.w-5 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 1.25%),
					transparent calc(50% + 1.25%)
				);
			}
			&.w-10 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 2.5%),
					transparent calc(50% + 2.5%)
				);
			}
			&.w-15 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 3.75%),
					transparent calc(50% + 3.75%)
				);
			}
			&.w-20 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 5%),
					transparent calc(50% + 5%)
				);
			}
			&.w-25 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 6.25%),
					transparent calc(50% + 6.25%)
				);
			}
			&.w-30 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 7.5%),
					transparent calc(50% + 7.5%)
				);
			}
			&.w-35 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 8.75%),
					transparent calc(50% + 8.75%)
				);
			}
			&.w-40 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 10%),
					transparent calc(50% + 10%)
				);
			}
			&.w-45 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 11.25%),
					transparent calc(50% + 11.25%)
				);
			}
			&.w-50 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 12.5%),
					transparent calc(50% + 12.5%)
				);
			}
			&.w-55 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 13.75%),
					transparent calc(50% + 13.75%)
				);
			}
			&.w-60 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 15%),
					transparent calc(50% + 15%)
				);
			}
			&.w-65 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 16.25%),
					transparent calc(50% + 16.25%)
				);
			}
			&.w-70 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 17.5%),
					transparent calc(50% + 17.5%)
				);
			}
			&.w-75 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 18.75%),
					transparent calc(50% + 18.75%)
				);
			}
			&.w-80 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 20%),
					transparent calc(50% + 20%)
				);
			}
			&.w-85 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 21.25%),
					transparent calc(50% + 21.25%)
				);
			}
			&.w-90 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 22.5%),
					transparent calc(50% + 22.5%)
				);
			}
			&.w-95 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 23.75%),
					transparent calc(50% + 23.75%)
				);
			}
			&.w-100 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue) 50% calc(50% + 25%),
					transparent calc(50% + 25%)
				);
			}
		}

		&.closed {
			.count,
			.details {
				margin-left: 75%;
			}

			&.w-0 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 0.5%),
					transparent calc(75% + 0.5%)
				);
			}
			&.w-5 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 1.25%),
					transparent calc(75% + 1.25%)
				);
			}
			&.w-10 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 2.5%),
					transparent calc(75% + 2.5%)
				);
			}
			&.w-15 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 3.75%),
					transparent calc(75% + 3.75%)
				);
			}
			&.w-20 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 5%),
					transparent calc(75% + 5%)
				);
			}
			&.w-25 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 6.25%),
					transparent calc(75% + 6.25%)
				);
			}
			&.w-30 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 7.5%),
					transparent calc(75% + 7.5%)
				);
			}
			&.w-35 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 8.75%),
					transparent calc(75% + 8.75%)
				);
			}
			&.w-40 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 10%),
					transparent calc(75% + 10%)
				);
			}
			&.w-45 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 11.25%),
					transparent calc(75% + 11.25%)
				);
			}
			&.w-50 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 12.5%),
					transparent calc(75% + 12.5%)
				);
			}
			&.w-55 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 13.75%),
					transparent calc(75% + 13.75%)
				);
			}
			&.w-60 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 15%),
					transparent calc(75% + 15%)
				);
			}
			&.w-65 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 16.25%),
					transparent calc(75% + 16.25%)
				);
			}
			&.w-70 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 17.5%),
					transparent calc(75% + 17.5%)
				);
			}
			&.w-75 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 18.75%),
					transparent calc(75% + 18.75%)
				);
			}
			&.w-80 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 20%),
					transparent calc(75% + 20%)
				);
			}
			&.w-85 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 21.25%),
					transparent calc(75% + 21.25%)
				);
			}
			&.w-90 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 22.5%),
					transparent calc(75% + 22.5%)
				);
			}
			&.w-95 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75% calc(75% + 23.75%),
					transparent calc(75% + 23.75%)
				);
			}
			&.w-100 {
				background: linear-gradient(
					to right,
					var(--quote-yellow-light) 25%,
					var(--order-green-light) 25% 50%,
					var(--invoice-blue-light) 50% 75%,
					var(--closed-brown) 75%
				);
			}
		}
	}
}
/* END PROGRESS BAR */

/*	Google auto complete suggestion box	*/
.pac-container {
    background-color: #FFF;
    z-index: 20001 !important;
    position: fixed;
    display: inline-block;
    float: left;
}

/* Vendor Product Catalogs  */
#vendorCatalogB {
	font-size: .75rem !important;
	
	li {
		padding: 0 0 6px !important;
	}
}


/*	Silly hack to remove the empty date placeholder text	*/
@-moz-document url-prefix() {
    input[type="date"] {
        padding: 0px;
    }
}

.dateTextIsBlack{
	color:black
}
.dateTextIsAlmostClear{
	color: gainsboro;
}