.select2-dropdown {
	z-index: 1051; /* Bootstrap's modal z-index is 1050, so we go 1 higher */
}

@font-face {
		font-family: 'contractr';
		src: url('contractr.woff2') format('woff2'),
				 url('contractr.woff') format('woff');
		font-weight: normal;
		font-style: normal;

}

.img-flag img {
		width: 20px;
		height: 15px;
		border: 1px solid #aaa;
		margin-right: 10px;
}

.contractr-font {
	font-family: 'contractr', sans-serif;
}

.modal-header {
	background-color: #4e73df;
	color: #fff;
}

.valid-input {
		border-color: darkgreen !important;
		background-color: #dbf0db !important;
		padding-right: 40px !important; /* Space for the tick icon */
		position: relative;
}

.invalid-input {
	border-color: darkred !important;
	background-color: #f0dbdb !important;
	padding-right: 40px !important; /* Space for the tick icon */
	position: relative;
}

.form-check-label.error {
		color: darkred;
}

.modal-backdrop.show {
		background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), #FFF; /* Using gradient over solid colour for extra opacity */
}

.modal-content {
		box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);  /* This adds a shadow with 5px vertical offset, 15px blur and 50% black colour */
}

.bg-contractr-blue {
	background-color: #4e73df !important;
}

.contractr-masthead-loggedout {
	margin-top: 6px;
	font-size: 1.8rem;
	font-family: 'contractr', sans-serif;
}

.contractr-masthead-loggedin {
	margin-top: 6px;
	font-size: 1.8rem;
	font-family: 'contractr', sans-serif;
}

.masthead-text-selected {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

#mastheadMainBar {
		transition: height 0.3s;
}

.masthead-reduced #mastheadMainBar {
	height: 50% !important; /* reduce to half height */
}

.masthead-reduced .contractr-masthead-loggedin {
	font-size: 1.5rem;
}

.masthead-reduced svg {
	width: 40px;
	height: 32px;
}

.masthead-reduced .masthead-icons {
		display: none !important;
}

 /* CSS for message and notificaton dropdowns */

.custom-dropdown-messages {
	position: absolute;
	width: 400px;
	top: 100%;
	right: 0;
	display: none;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}


.custom-dropdown-messages-item {
	display: flex;
	align-items: center;
	height: 74px;
	width: 100%;
	padding: 4px 8px;
	border-bottom: 1px solid #ccc;
}

.profile-pic {
	flex-shrink: 0;
}

.custom-dropdown-messages-item > div:last-child {
	flex-grow: 1;
	margin-left: 10px;
}

.custom-dropdown-messages-item b {
	text-align: left;
	text-decoration: none;
	display: block;
	font-weight: 700;
	color: #000;
	font-size: 1.2em;
}

.custom-dropdown-messages-item p {
	margin: 0;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	color: #000;
}

.custom-dropdown-messages-item:hover {
	background-color: #edf6ff;
}

.custom-dropdown-messages-item img {
	display: none;
}

.custom-dropdown-messages-item .profile-pic {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 10px;
	margin-left: 6px;
	background-size: cover;
	background-position: center;
}

.custom-dropdown-messages-item i {
	height: 60%;
	margin-right: 10px;
 }

 .messageDropInternal a {
	text-decoration: none;
	color: #000;
 }

 .custom-dropdown-notifications {
	position: absolute;
	width: 400px;
	top: 100%;
	right: 0;
	display: none;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
 }


 .custom-dropdown-notifications-item {
	display: flex;
	align-items: center;
	height: 74px;
	width: 100%;
	padding: 4px 8px;
	border-bottom: 1px solid #ccc;
 }

 .custom-dropdown-notification-item > div:last-child {
	flex-grow: 1;
	margin-left: 10px;
 }

 .custom-dropdown-notification-item b {
	text-align: left;
	text-decoration: none;
	display: block;
	margin: 0;
	font-weight: 700;
	color: #000;
	font-size: 1.2em;
 }

 .custom-dropdown-notification-item p {
	margin: 0;
	margin-left: 10px;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	color: #000;
 }

 .custom-dropdown-notification-item:hover {
	background-color: #edf6ff;
 }

 .custom-dropdown-notification-item img {
	display: none;
 }

 .custom-dropdown-notification-item .profile-pic {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 10px;
	margin-left: 6px;
	background-size: cover;
	background-position: center;
 }

.custom-dropdown-notifications-item i {
   display: inline-block;
   width: 44px;
   height: 64px;
   font-size: 44px; /* sets the icon size */
   line-height: 64px; /* vertically centers the icon */
   margin-right: 10px; /* maintain spacing from the text */
   text-decoration: none;
 }
 
 .custom-dropdown-notifications-item i::before {
	 /* Ensure it keeps the necessary icon content, but remove any unwanted spacing */
	 margin: 0 !important;
	 padding: 0 !important;
	 /* Sometimes setting display to inline-block or block can help, try one if needed: */
	 display: inline-block;
 }

.notificationDropInternal a {
	text-decoration: none;
	color: #000;
	text-align: left !important;
}

.custom-dropdown-messages .notificationDropInternal {
	text-align: left !important;
}

 .custom-dropdown-header,
 .custom-dropdown-footer {
	font-size: 16px;
	padding: 5px 10px;
 }

 .custom-dropdown-header {
	background-color: #4e73df;
	color: white;
	text-align: left;
	font-weight:500;
	height: 36px;
	border-bottom: 1px solid #ccc;
 }

 .custom-dropdown-footer {
	background-color: #eee;
	text-align: center;
	height: 36px;
	line-height: 26px;
 }

 .custom-dropdown-footer a {
	color: #000000;
	text-decoration: none;
	transition: color 0.3s;
 }

 .custom-dropdown-footer a:hover {
 	color: rgb(140, 140, 140);
 }

.clickable-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;    /* Adjust this as needed */
	height: 40px;   /* Adjust this as needed */
	cursor: pointer;
	background-color: transparent;
	border: none;
 }

 /* Custom dropdown width */
 .wide-dropdown {
 	width: 250px;
 }

 /* Style for the dropdown headings */
 .dropdown-header {
	font-weight: bold;
	color: #000;
	background-color:#fff;
	font-size: 18px;
	margin-bottom: 5px;
}

 /* Style for the dropdown items with font-awesome icons */
 .dropdown-item i {
 	padding-right: 10px !important; /* Space between the icon and the text */
 }

 .masthead-reduced .dropdown-item svg {
 	font-size: 1rem;
	width: 18px;
	height: 18px;
 }

 .masthead-reduced .subHeaderBar svg {
	font-size: 1rem;
	width: 18px;
	height: 18px;
}



.dropdown-item svg {
	font-size: 1rem;
	 width: 18px;
	 height: 18px;
	}

 /* Horizontal divider */
 .dropdown-divider {
 	margin: 0.0rem 0;
	margin-top: 10px;
 }

 .dropdown-capsule {
	 margin-left:15px;
	 margin-top: 14px;
	 margin-bottom: 5px;
 }

.nav-link.dropdown-toggle::after {
 	display: none;
 }

.clickable-container.dropdown-toggle::after {
	display: none;
}

:root {
	--bs-primary: #4e73df;
}

/* Some additional specific overrides for hover, active, etc., states */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: darken(#4e73df, 7.5%);
	border-color: darken(#4e73df, 10%);
}

.btn-primary:disabled {
	background-color: #4e73df;
	border-color: #4e73df;
}

.hiddenMenuMasthead {
	display: none;
}

.hidden-menu-box-styling {
	padding: 25px;
}

.hidden-menu-box-styling a {
	color: #000 !important;
	font-size: 14px !important;
	font-weight: 320;
	text-decoration: none !important;
}

.hidden-menu-box-styling a i {
	font-weight: normal !important;
}

.pill-spacing {
	margin-bottom: 10px;
}

.enclose-blue-border-menu {
	border: 1px solid #4e73df;
	border-radius: 8px;
	/*padding: 15px;*/
	padding-bottom:8px;
	margin-right: 15px;
}

.hidden-menu-box-styling svg {
font-size: 1rem;
 width: 18px;
 height: 18px;
}

.hiddenMenuMasthead {
	background-color: #fff;
}

.nav-table-width {
	width: 20%;
	font-size: 18px;
}

.triangle {
		position: relative;
}

.triangle::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
	bottom: -10px; /* Adjust according to your design */
}

#workMenu, #purchasesMenu, #accountingMenu {
		display: none;
}

/* Custom styles */
.flex-grow-1 {
		flex-grow: 1;
}

.custom-search-input {
		max-width: 300px;  /* Adjust as needed */
}

/* TRYING TO MAKE DATE PICKER LOOK MORE 2023 */

.datepicker {
	border-radius: 0.25rem;
	padding: .375rem .75rem;
}

.datepicker table tr td,
.datepicker table tr th {
		border-radius: 0;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
		border-radius: 0;
		background-color: #0d6efd;
		color: #ffffff;
}

.datepicker table tr td.today {
		color: #0d6efd;
		background-color: transparent;
}

.datepicker table tr td:hover {
		background-color: #f8f9fa;
}

.datepicker .prev,
.datepicker .next {
		cursor: pointer;
}

/* You can replace the below with your preferred icons */
.datepicker .prev:before {
		content: "←";
}

.datepicker .next:before {
		content: "→";
}

.datepicker-days {
	padding: 10px;
}

.datepicker table tr td {
	padding: 6px;
}

.invoice-dropdown-border {
	border: 0px;
	font-size: smaller;
}

.invoice-text-box {
	border: 0px;
	height:100%;
	width:100%;
	font-size: smaller;
	display:inline-block;
	vertical-align:top;
	padding: 0.5rem;
}

.force-drop-arrow {
	padding-right: 30px; /* room for the arrow on the right */
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M5,8l5,5,5-5' style='stroke:%23000;fill:none;stroke-width:2'/></svg>") no-repeat right 0.5rem center/16px 16px;
}

.accordion-button:not(.collapsed) {
	color: #000;
	background-color: #fff;
}

.loading-overlay {
	display: none; /* Hidden by default */
	position: fixed; /* Positioned over all content */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.5); /* Black background with opacity */
	z-index: 10000; /* Ensure it's above everything */
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	margin-top: -75px; /* Half the height */
	margin-left: -75px; /* Half the width */
}

.bootstrap-select > button {
	background-color: #fff !important; /* White background */
	border: 1px solid #dfe2e6 !important; /* Grey border */
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem; /* Adjust as needed */
	font-size: 1rem; /* Adjust as needed */
	line-height: 1.5;
	color: #595c5e; /* Text color */
	background-clip: padding-box;
	border-radius: 0.25rem; /* Adjust for rounded corners */
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* To target the background and arrow icon specifically */
.bootstrap-select > button:after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M5,8l5,5,5-5' style='stroke:%23000;fill:none;stroke-width:2'/></svg>");
	right: 0.5rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	pointer-events: none;
}

/* If you want to apply styles when the select box is focused or active */
.bootstrap-select.btn-group .btn:focus, .bootstrap-select.btn-group .btn:active, .bootstrap-select.btn-group.show>.dropdown-toggle.btn {
	box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); /* Example shadow */
}

:root {
	--bs-primary: #5672d8;
}

.btn-primary, .btn-check:focus + .btn-primary, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
	background-color: #5672d8;
	border-color: #5672d8;
}

.btn-primary:hover {
	background-color: #4561bc; /* Slightly darker for hover effect */
	border-color: #4561bc;
}

.btn-outline-primary {
	color: #5672d8;
	border-color: #5672d8;
}

.btn-outline-primary:hover {
	background-color: #5672d8;
	color: #fff;
}

.text-primary {
	color: #5672d8 !important;
}

a.text-primary:hover, a.text-primary:focus {
	color: #4561bc !important; /* Slightly darker for hover effect */
}

.bg-primary {
	background-color: #5672d8 !important;
}

.border-primary {
	border-color: #5672d8 !important;
}

.form-control:focus {
	border-color: #5672d8;
	box-shadow: 0 0 0 0.25rem rgba(86, 114, 216, 0.25);
}

#documentDetailsAccordion .accordion-button::after {
	display: none; /* Hides the arrow for this specific accordion item */
}

tr.bg-invoice td {
	background-color: #96c7ff !important;
}
tr.bg-quote td {
	background-color: #9fffb4;
}
tr.bg-po td {
	background-color: #a1f3ff;
}
tr.bg-credit-note td {
	background-color: #fcff89;
}
tr.bg-job td {
	background-color: #ffa8ae;
}
.icon-invoice {
	color: #007bff;
}
.icon-quote {
	color: #28a745;
}
.icon-po {
	color: #17a2b8;
}
.icon-credit-note {
	color: #ffc107;
}
.icon-job {
	color: #dc3545;
}
.doc-icon {
	font-size: 1em;
	margin-right: 10px;
}



.financialDocumentDetails {
	background-color: white;
	border-radius: 10px;
	padding: 7px;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	align-items: center;
	justify-content: space-around;
}

.financialDocumentDetails div {
	margin: 0 15px;
	text-align: center; /* Left align text */
}

.financialDocumentDetails .label {
	color: #9e9e9e;
	font-size: 0.75em;
	display: block;
	text-transform: uppercase;
}

.financialDocumentDetails .value {
	font-size: 0.9em;
	font-weight: 500;
	color: black;
	display: block;
	text-transform: uppercase;
}

.financialDocumentItem-job {
	background-color: #dc3545;
	color: white;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between; /* Add this to space out the button */
}

.financialDocumentIcon-job {
	--icon-size: 56px; /* Adjust this value to set the size of the icon container */
	background-color: #dc3545;
	border-radius: 10px; /* Rounded corners */
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	width: var(--icon-size);
	height: var(--icon-size);
}
.view-button-job {
	--button-size: 56px; /* Adjust this value to set the size of the button */
	background-color: #dc3545;
	color: white;
	border: 0px solid #dc3545;
	border-radius: 20px; /* Matching the icon container and details container */
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-job:hover {
	background-color: #dc3545;
	color: #ffb0b9;
}

.financialDocumentItem-po {
	background-color: #17a2b8;
	color: white;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.financialDocumentIcon-po {
	--icon-size: 56px;
	background-color: #17a2b8;
	border-radius: 10px;
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	width: var(--icon-size);
	height: var(--icon-size);
}

.view-button-po {
	--button-size: 56px;
	background-color: #17a2b8;
	color: white;
	border: 0px solid #17a2b8;
	border-radius: 20px;
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-po:hover {
	background-color: #17a2b8;
	color: #a9e1e7;
}

.financialDocumentItem-credit-note {
	background-color: #ffc107;
	color: black;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.financialDocumentIcon-credit-note {
	--icon-size: 56px;
	background-color: #ffc107;
	border-radius: 10px;
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: black;
	width: var(--icon-size);
	height: var(--icon-size);
}

.view-button-credit-note {
	--button-size: 56px;
	background-color: #ffc107;
	color: black;
	border: 0px solid #ffc107;
	border-radius: 20px;
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-credit-note:hover {
	background-color: #ffc107;
	color: #fff8db;
}

.financialDocumentItem-invoice {
	background-color: #5672d8;
	color: white;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.financialDocumentIcon-invoice {
	--icon-size: 56px;
	background-color: #5672d8;
	border-radius: 10px;
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	width: var(--icon-size);
	height: var(--icon-size);
}

.view-button-invoice {
	--button-size: 56px;
	background-color: #5672d8;
	color: white;
	border: 0px solid #5672d8;
	border-radius: 20px;
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-invoice:hover {
	background-color: #5672d8;
	color: #99cfff;
}

.financialDocumentItem-quote {
	background-color: #198754;
	color: white;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.financialDocumentIcon-quote {
	--icon-size: 56px;
	background-color: #198754;
	border-radius: 10px;
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	width: var(--icon-size);
	height: var(--icon-size);
}

.view-button-quote {
	--button-size: 56px;
	background-color: #198754;
	color: white;
	border: 0px solid #198754;
	border-radius: 20px;
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-quote:hover {
	background-color: #198754;
	color: #a8e6ab;
}

.financialDocumentItem-attachment {
	background-color: #9e9e9e;
	color: white;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.financialDocumentIcon-attachment {
	--icon-size: 56px;
	background-color: #9e9e9e;
	border-radius: 10px;
	padding: 12px;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	width: var(--icon-size);
	height: var(--icon-size);
}

.view-button-attachment {
	--button-size: 56px;
	background-color: #9e9e9e;
	color: white;
	border: 0px solid #9e9e9e;
	border-radius: 20px;
	padding: 3px;
	text-align: center;
	cursor: pointer;
	font-size: 2em;
	font-weight: 900;
	margin-left: 5px;
	margin-right: 5px;
	width: var(--button-size);
	height: var(--button-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-button-attachment:hover {
	background-color: #9e9e9e;
	color: #dddddd;
}

.financialDocumentDetails-attachment {
	background-color: white;
	border-radius: 10px;
	padding: 7px;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

.financialDocumentDetails-attachment div {
	margin: 0 15px;
	text-align: left; /* Left align text */
}

.financialDocumentDetails-attachment .label {
	color: #9e9e9e;
	font-size: 0.75em;
	display: block;
	text-transform: uppercase;
}

.financialDocumentDetails-attachment .value {
	font-size: 0.9em;
	font-weight: 500;
	color: black;
	display: block;
	text-transform: uppercase;
}

/* Custom table row background colours */
table#jobs tr.status-new td {
  background-color: #e9948e;
}

table#jobs tr.status-inprogress td {
  background-color: #9cbbdf;
}

table#jobs tr.status-delivery td {
  background-color: #b8db7c;
}

table#jobs tr.status-complete td {
  background-color: #72d97e;
}

table#jobs tr.status-workshopcomplete td {
  background-color: #d6ff7b;
}

table#jobs tr.status-invoiced td {
  background-color: #c2c1c1;
}

.flash {
  animation: flashAnimation 0.8s ease-in-out;
}

@keyframes flashAnimation {
  0% {
	background-color: #ffff99; /* bright yellow flash */
  }
  100% {
	background-color: inherit; /* return to the row’s background */
  }
}

/* Force the overall container to be block-level and full width */
.twitter-typeahead {
	display: block !important;
	width: 100% !important;
}

/* Override the typeahead inputs (hint and main text input) */
.twitter-typeahead .tt-hint,
.twitter-typeahead .tt-input {
	width: 100% !important;
	background-color: #fff !important; /* White background */
	color: #000 !important;  /* Ensure text is visible */
}

/* Style the dropdown menu */
.tt-menu {
	width: 100% !important;
	background-color: #fff !important;
	border: 1px solid #ccc !important;
	color: #000 !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	z-index: 3000 !important;     /* keep it above tables/modals */
	max-height: 320px;             /* contain long lists */
	overflow-y: auto;              /* scroll inside the menu */
}

/* Wider dropdown only for the itemcode typeahead */
.twitter-typeahead.tt-itemcode .tt-menu {
	width: 400px !important;
	max-width: none !important;
}

/* Allow the dropdown to escape Bootstrap Table's scroll body when open */
.fixed-table-body.tt-unclip {
	overflow: visible !important;
}

/* Optionally, style individual dropdown items */
.tt-menu .tt-dataset a {
	display: block;
	padding: 0.5rem 1rem;
	color: #000;
	text-decoration: none;
}
.tt-menu .tt-dataset a:hover {
	background-color: #f8f9fa;
}

/* Style each suggestion option */
.tt-suggestion {
  display: block;                  /* Make each suggestion occupy a full row */
  padding: 0.5rem 1rem;             /* Add spacing */
  border-bottom: 1px solid #eaeaea;  /* Optional separator line */
  color: #212529;                  /* Dark text color */
  cursor: pointer;                 /* Change cursor on hover */
  background-color: #fff;          /* White background */
  text-decoration: none;           /* No underline (you can add underline on hover if desired) */
  transition: background-color 0.2s ease;
}

/* Highlight suggestion on hover */
.tt-suggestion:hover {
  background-color: #f8f9fa;
}

/* Optional: style the highlighted text within suggestions */
.tt-highlight {
  font-weight: bold;
  color: #000; /* Ensure highlighted text is clearly visible */
}

/* Style the footer link within the typeahead menu */
.tt-footer a {
  display: block;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: #007bff;
  text-decoration: none;
  border-top: 1px solid #eaeaea;
  transition: background-color 0.2s ease;
}

.tt-footer a:hover {
  background-color: #e9ecef;
}

/* Force the outer container to use flex and span the full parent width */
.twitter-typeahead {
  display: flex !important;      /* Or inline-flex if you want it inline with something else */
  width: 100% !important;
  align-items: center !important;  /* Keeps the icon and text aligned vertically */
}

/* Make the hint and main input expand within the flex container */
.twitter-typeahead .tt-hint,
.twitter-typeahead .tt-input {
  flex: 1 1 auto !important;   /* Allows them to grow/shrink to fill the space */
  width: 100% !important;
  box-sizing: border-box;
}

/* If there's a leftover inline-block style, override it. */
.twitter-typeahead input[type="text"] {
  display: block !important;
  background-color: #fff;
}

.jobs-wrapper {
  border: 1px solid #adf;        /* 1px solid blue border */
  border-radius: 0.5rem;           /* Rounded corners (8px roughly) */
  background-color: #dceffc;       /* Very light blue background */
  padding: 1rem;                  /* Spacing around the content */
}

.quotes-wrapper {
  border: 1px solid #ffa;        /* 1px solid yellow border */
  border-radius: 0.5rem;           /* Rounded corners (8px roughly) */
  background-color: #fcf5dc;       /* Very light yellow background */
  padding: 1rem;                  /* Spacing around the content */
}

.notif‑msg{
	font-size: 13px !important;          /* ≈ 0.8125 rem */
	line-height: 1.25 !important;        /* 13 px × 1.25 ≈ 16 px */
	font-weight: 700;         /* keep it bold, because <b> just means “boldness” */
}

.form-select.is-invalid {
	border-color: #dc3545;
	padding-right: calc(1.5em + .75rem);
	background-position: right calc(.375em + .1875rem) center;
	background-repeat: no-repeat;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  }

/* 1. Hide browser spin buttons */
.narrow-number::-webkit-outer-spin-button,
.narrow-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.narrow-number[type=number] {
	-moz-appearance: textfield; /* Firefox */
}

/* 2. Control width by character count */
.narrow-number {
	width: 10ch;   /* fits ~8 characters */
	max-width: 100%;
}

.invisible-table-input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	padding: 0;
	appearance: none;               /* nukes arrows on selects in most browsers */
	-moz-appearance: textfield;     /* removes number spinners in Firefox */
}

/* kill Chrome number spinners */
.invisible-table-input::-webkit-outer-spin-button,
.invisible-table-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* keep it borderless on focus/active */
.invisible-table-input:focus,
.invisible-table-input:active {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* optional: show a subtle underline on hover to hint editability */
.invisible-table-input:hover {
	border-bottom: 1px dashed #ccc;
}
.net-cell {
	padding: .8rem .5rem !important;
	font-size: .875rem; /* 14px */
}

.vat-select,
.account-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><path fill='%23000' d='M0 0 L5 5 L10 0 Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
    background-size: 10px 5px !important;
    padding-right: 20px !important; /* space for the arrow */
}

.dropdown-divider {
	margin-bottom: 10px;
}

.tt-menu,
.tt-open,
.tt-dataset {
	z-index: 2000;
	--bs-modal-zindex: 1500; /* Bootstrap's modal z-index */
} /* keep above .modal */

/* Only for the link modal */
#linkRecordModal .modal-content {
	overflow: visible;           /* let the menu spill over the footer */
}
#linkRecordModal .tt-menu {
	z-index: 1080;               /* above modal (1055) & backdrop (1050) */
}
#linkRecordModal .twitter-typeahead {
	width: 100%;                 /* keeps the menu aligned with input */
}

/* Only for the link modal */
#dealEditModal .modal-content {
	overflow: visible;           /* let the menu spill over the footer */
}
#dealEditModal .tt-menu {
	z-index: 1080;               /* above modal (1055) & backdrop (1050) */
}
#dealEditModal .twitter-typeahead {
	width: 100%;                 /* keeps the menu aligned with input */
}