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

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

}

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

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

.modal-header {
	background-color: #364153;
	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-mjm-blue {
	background-color: #364153 !important;
}

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

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

.mjm-masthead-loggedin-light {
	font-weight: 300;
	opacity: 0.85;
}

.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 .mjm-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;
	font-weight: 700;
	color: #000;
	font-size: 1.2em;
 }

 .custom-dropdown-notification-item p {
	margin: 0;
	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-notification-item i {
	height: 60%;
	margin-right: 10px;
	}

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

 .custom-dropdown-header,
 .custom-dropdown-footer {

	font-size: 16px;
	padding: 5px 10px;
 }

 .custom-dropdown-header {
	background-color: #364153;
	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;
}

 /* 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: #364153;
}

/* Some additional specific overrides for hover, active, etc., states */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: #2e3747;
	border-color: #2e3747;
}

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

.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 #364153;
	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;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.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: #364153;
}

.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: #364153;
	border-color: #364153;
}

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

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

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

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

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

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

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

.form-control:focus {
	border-color: #364153;
	box-shadow: 0 0 0 0.25rem rgba(54, 65, 83, 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: #364153;
	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: #364153;
	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: #364153;
	color: white;
	border: 0px solid #364153;
	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: #2e3747;
	color: #a0aec0;
}

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