body {
	font-family: Arial, sans-serif;
}

.header {
	background: linear-gradient(to bottom, black, #4b5a82);
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_small {
	height: 75px;
	align-items: left;
}

.logo {
	max-width: 150px;
}

.logo_small {
	max-width: 120px;
}

.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

.nav-item {
	margin-right: 15px;
}

.nav-link {
	color: white;
	text-decoration: none;
}

.nav-link:hover {
	text-decoration: underline;
	color: #8ecfe1;
}

.nav-link.active {
	font-weight: bold;
	color: #8ecfe1;
}

.nav-link.active:hover {
	text-decoration: none;
}

/* Make the entire viewport height minus the header and footer */
body,
html {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Container that grows to take up the remaining space */
.container {
	flex: 1;
}

.breadcrumb_container {
	max-height: 32px;
}

/* Footer positioned at the bottom */
footer {
	font-size: 0.8em;
	margin-top: auto;
	text-align: center;
	padding: 10px 0;
	background-color: #f8f9fa;
	border-top: solid 1px #ddd;
}

footer p {
	margin: 0.5rem;
	color: #777;
}

.dashboard-btn {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	color: rgb(46, 46, 78);
	text-decoration: none;
	border-radius: 8px;
	background-color: #cde1f4;
	border-color: #6c91b9;
}

.dashboard-btn .icon-text {
	font-weight: bold;
	font-size: 1.25rem;
}

.dashboard-btn:hover {
	background-color: #6c91b9;
	color: black;
}

.breadcrumb {
	background-color: transparent;
	padding: 0.5rem 1rem;
	margin-top: 1rem;
	font-size: 0.9rem;
}
.breadcrumb-item a {
	color: #007bff;
	text-decoration: none;
}
.breadcrumb-item a:hover {
	text-decoration: underline;
}
.breadcrumb-item.active {
	color: #6c757d;
}

/* Nav-Tabs Styling with Softer Appearance */
.nav-tabs .nav-link {
	color: #495057; /* Softer, neutral color */
	border: 1px solid transparent;
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: #f1f3f5; /* Light gray background */
	padding: 0.5rem 1rem;
}

.nav-tabs .nav-link.active {
	color: #fff;
	background-color: #6c757d; /* Neutral, darker gray for active tab */
	border-color: #6c757d #6c757d #f1f3f5;
}

.nav-tabs .nav-link:hover {
	background-color: #e9ecef; /* Slightly darker gray on hover */
	border-color: #dee2e6 #dee2e6 #f1f3f5;
	color: #495057;
}

/* Create New Record Button */
.btn-primary {
	background-color: #007bff; /* Standard primary blue */
	border-color: #007bff;
}

.btn-primary:hover {
	background-color: #0056b3; /* Darker blue on hover */
	border-color: #0056b3;
}

.optional-links a {
	color: #007bff;
	text-decoration: none;
	margin-right: 8px;
}

.optional-links a:hover {
	text-decoration: underline;
}

.autocomplete-suggestions {
	border: 1px solid #ccc;
	max-height: 150px;
	overflow-y: auto;
	position: absolute;
	background-color: white;
	z-index: 1000;
}

.autocomplete-suggestion {
	padding: 10px;
	cursor: pointer;
}

.autocomplete-suggestion:hover {
	background-color: #f0f0f0;
}

.job-item.editing {
	background-color: #e0e0e0 !important; /* Light gray */
	border: 2px solid #ff7b00 !important; /* Optional: blue border to highlight */
}

.job-item.editing .editing-label {
	background-color: #ffcc00; /* Yellow background */
	color: #333;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 5px;
}

.job-item p,
#jobSummary p {
	font-size: 0.8rem;
	margin: 2px;
}

.calculated-field {
	font-weight: bold;
	color: #007bff;
}

.framed-section {
	border: 1px solid #ccc;
	padding: 15px;
	border-radius: 5px;
	background-color: #f9f9f9;
	margin-bottom: 20px;
}
.nav-tabs .nav-link {
	color: #495057;
	border: 1px solid #dee2e6;
	margin-bottom: -1px;
}

.nav-tabs .nav-link.active {
	background-color: #b0d2f9;
	color: #344b6d;
	border-color: #b4c7da;
	text-decoration: underline;
	font-weight: bold;
}
.modal-dialog {
	max-height: 95vh; /* Modal will be 80% of the viewport height */
	overflow-y: auto; /* Scroll content if it exceeds the height */
}

.modal-content {
	padding: 20px; /* Add padding to make the content look centered and not against the edge */
}

.modal-body {
	padding: 15px; /* Add padding within the modal body */
	max-height: calc(85vh - 50px); /* Ensure the modal body height is appropriate */
	overflow-y: auto; /* Make sure content scrolls within the modal body */
}

.disabled-tab {
	color: #6c757d; /* Gray color for disabled look */
	pointer-events: none; /* Disable pointer interactions */
	cursor: not-allowed;
	opacity: 0.5; /* Reduced opacity for inactive look */
}

/* Make the #jobCity input consistent with other form elements */
#jobCity {
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

/* Adjust the suggestion container styling to make it consistent and visually aligned */
#citySuggestions {
	position: absolute; /* Place right below the input box */
	width: 90%; /* Match the input field width */
	background-color: #ffffff;
	border: 1px solid #ccc;
	max-height: 200px; /* Set a limit to avoid long lists */
	overflow-y: auto;
	z-index: 1000; /* Make sure it's above other elements */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

/* Style for each suggestion item */
.autocomplete-suggestion {
	padding: 10px;
	cursor: pointer;
}

.autocomplete-suggestion:hover {
	background-color: #f0f0f0;
}

.card.client-record-card {
	width: 48%;
	float: left;
	margin: 1%;
}
.client-record-card-body p {
	margin: 0;
	font-size: 0.8rem;
}

/* Styling for the new modal */
#mapOccupationModal .modal-content {
	padding: 20px;
	background-color: #f9f9f9; /* Light background */
	border-radius: 8px; /* Rounded corners */
	border: 1px solid #ddd; /* Subtle border */
}

/* Modal body with consistent scrolling behavior */
#mapOccupationModal .modal-body {
	max-height: calc(85vh - 50px);
	overflow-y: auto;
	padding: 20px;
}

/* Tabs for the modal */
#mapOccupationModal .nav-tabs .nav-link {
	color: #495057;
	border: 1px solid #dee2e6;
	margin-bottom: -1px;
	font-size: 0.9rem;
	padding: 10px 15px;
	text-align: center;
}

#mapOccupationModal .nav-tabs .nav-link.active {
	background-color: #b0d2f9;
	color: #344b6d;
	border-color: #b4c7da;
	text-decoration: underline;
	font-weight: bold;
}

#mapOccupationModal .nav-tabs .nav-link:hover {
	background-color: #e9ecef;
	color: #495057;
}

/* Industries and Occupations Tiles */
.tile-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.industry-tile,
.occupation-tile {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 10px 15px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	font-size: 0.9rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(33% - 10px); /* Three columns with spacing */
}

.industry-tile button,
.occupation-tile button {
	background-color: #dc3545;
	color: #fff;
	border: none;
	padding: 2px 7px;
	font-size: 0.8rem;
	border-radius: 3px;
	cursor: pointer;
	margin-right: 5px;
}

.industry-tile button:hover,
.occupation-tile button:hover {
	background-color: #a71d2a; /* Darker danger color on hover */
}

/* Mapping toggles */
.mapping-toggle {
	margin-top: 15px;
}

.mapping-toggle button {
	margin: 5px;
	padding: 10px 15px;
	border: 1px solid #007bff; /* Bootstrap primary color */
	border-radius: 5px;
	background-color: #fff;
	color: #007bff;
	cursor: pointer;
}

.mapping-toggle button.active {
	background-color: #007bff; /* Active state: Primary color */
	color: #fff;
	font-weight: bold;
}

.mapping-toggle button:hover {
	background-color: #0056b3; /* Darker hover color */
	color: #fff;
}

/* Add Industry/Occupation Form */
#addIndustryForm,
#addOccupationForm {
	display: none; /* Hidden initially */
	margin-top: 15px;
}

#addIndustryForm input,
#addOccupationForm input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 10px;
}

#addIndustryForm button,
#addOccupationForm button {
	background-color: #007bff;
	border: none;
	color: white;
	padding: 10px 15px;
	font-size: 0.9rem;
	border-radius: 4px;
	cursor: pointer;
}

#addIndustryForm button:hover,
#addOccupationForm button:hover {
	background-color: #0056b3;
}

/* Empty state message */
.tile-container p {
	text-align: center;
	width: 100%;
	color: #6c757d; /* Bootstrap muted color */
	font-style: italic;
}

.industry-tile span,
.occupation-tile span {
	padding: 5px 8px;
}

/* Job Associations Cards */
#jobAssociations .association-card {
	display: flex;
	align-items: center;
	padding: 5px 8px;
	border: 1px solid #bcc0c5;
	border-radius: 4px;
	background-color: #d8d8d8;
	font-size: 14px;
	color: #343a40;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	margin: 4px 6px;
}

.association-details p {
	margin: 0px;
}
div#jobAssociations {
	border-left: solid 2px #ccc;
	padding-left: 12px;
}
/* Close Button on Cards */
#jobAssociations .association-card .close-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 14px;
	color: #dc3545; /* Bootstrap danger color */
	background: none;
	border: none;
	cursor: pointer;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

#jobAssociations .association-card .close-btn:hover {
	background-color: #f8d7da; /* Bootstrap danger background */
}

/* Styling for Delete Association Button */
.delete-association {
	margin-left: auto; /* Push the button to the right of the card */
	padding: 5px 10px; /* Add some padding for a neat appearance */
	font-size: 12px; /* Slightly smaller font for a secondary button */
	font-weight: bold; /* Make the text bold */
	border: none; /* Remove the default border */
	border-radius: 4px; /* Match the card's border radius */
	transition: background-color 0.2s ease, color 0.2s ease; /* Smooth hover effect */
}

/* Hover State for the Button */
.delete-association:hover {
	background-color: #c82333; /* Darker red for hover */
	color: #fff; /* Ensure contrast */
	box-shadow: 0 2px 4px rgba(200, 35, 51, 0.4); /* Add a subtle shadow effect */
}

/* Alignment of Association Cards */
.association-card {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Space between text and button */
	padding: 10px;
	border: 1px solid #dee2e6; /* Match with Bootstrap's light border */
	border-radius: 4px;
	background-color: #f8f9fa; /* Light gray for a card-like feel */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
	gap: 10px; /* Small spacing between card elements */
}

/* Card Text Styling */
.association-name {
	font-size: 14px;
	color: #343a40; /* Bootstrap's dark gray text color */
	font-weight: 500; /* Semi-bold for prominence */
}

.custom-alert {
	position: relative;
	padding: 15px 20px;
	border-radius: 5px;
	font-size: 16px;
	text-align: left;
	max-width: 100%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	margin-bottom: 10px;
}

/* Container for stacked alerts */
#customAlertsContainer {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 400px;
	width: 100%;
}

.custom-alert.neutral {
	background-color: #f5f5f5;
	color: #333;
	border-left: 4px solid #6c757d;
}

.custom-alert.success {
	background-color: #d4edda;
	color: #155724;
	border-left: 4px solid #28a745;
}

.custom-alert.danger {
	background-color: #f8d7da;
	color: #721c24;
	border-left: 4px solid #dc3545;
}

.custom-alert.warning {
	background-color: #fff3cd;
	color: #856404;
	border-left: 4px solid #ffc107;
}

.custom-alert.info {
	background-color: #d1ecf1;
	color: #0c5460;
	border-left: 4px solid #17a2b8;
}

.card-body {
	padding: 0.6rem 1rem 0.9rem !important;
}

.client-record-card-body.col-6 {
	padding-right: 0px !important;
}

.modal-dialog.modal-lg {
	max-width: 95% !important;
	font-size: 16px;
}

div#tableHeader {
	background: none;
	font-size: 1.1rem;
	padding: 5px;
	margin-bottom: 20px;
}
button#downloadPdfButton {
	max-width: 250px;
	margin: 0px;
	font-size: 0.8rem;
}

.table td,
.table th {
	padding: 0.35rem !important;
}

/*
#record_table_modal .modal-dialog {
	max-width: 850px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

#record_table_modal .modal-content {
	margin: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
*/

.card-header-trust {
	background: #000;
	color: #fff;
}
.card-body-trust {
	background: #888;
	color: #fff;
}

/* Manufacturer/Product-level styles */
.card-header-products {
	background: #bedaec;
	font-size: 0.9rem;
	font-weight: bold;
	color: #004085;
}
.card-body-products {
	background: #e5ecf1;
	color: #000;
	font-size: 0.9rem;
}

.card-header-manufacturers {
	background: rgba(0, 0, 0, 0.03);
	color: #000;
	font-weight: bold;
}

.card-body-manufacturers {
	background: #fff;
	color: #000;
}

/* For rule list items within product/manufacturer cards */
.card-body-products .list-group-item,
.card-body-manufacturers .list-group-item {
	font-size: 0.75rem;
	padding: 4px 10px;
}

.null-sm {
	font-size: 0.8rem;
	color: #999;
}

@media (min-width: 1200px) {
	.modal-xl {
		max-width: 1600px;
	}
}

#globalRulesContainer .list-group-item {
	font-size: 0.8rem !important;
}

.sub-rule {
	background-color: #f0f0f0;
	border-left: solid 5px #bbb;
}

div#worksheetTopInfo p {
	margin: 2px 0px;
}

#jobTypeSuggestions.dropdown-menu {
	max-width: 320px;
}

/* Enhanced styles for job title suggestions */
#jobTypeSuggestions {
	width: 320px;
	max-height: 260px;
	overflow-y: auto;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

#jobTypeSuggestions .dropdown-item {
	display: block;
	padding: 8px 10px;
	line-height: 1.2;
	color: #212529;
	text-decoration: none;
	cursor: pointer;
}

#jobTypeSuggestions .dropdown-item:hover,
#jobTypeSuggestions .dropdown-item:focus {
	background-color: #e7f1ff;
	color: #0a58ca;
}

#jobTypeSuggestions .dropdown-item.disabled {
	color: #6c757d;
	background-color: #f8f9fa;
	cursor: not-allowed;
}

#jobTypeSuggestions .dropdown-item.disabled:hover {
	background-color: #f8f9fa;
	color: #6c757d;
}

form,
#mainSearch {
	margin: 20px;
}

/* Global styling for form elements to ensure consistent spacing */
.form-group {
	margin-bottom: 1rem;
}

/* Add a small bottom margin to buttons for spacing */
button,
.btn {
	margin-bottom: 0.5rem;
}

/* Remove bottom margin for buttons within a button group to avoid layout issues */
.btn-group > .btn,
.btn-group > button {
	margin-bottom: 0;
}
label {
	margin-bottom: 0.3rem;
	color: #888;
	font-size: 0.95rem;
	font-weight: 100;
}

/* Margin for buttons, except when they are in a btn-group */
.btn {
	margin: 5px;
}

.btn-group .btn {
	margin: 0;
}

.black-label-text {
	font-size: 1rem;
	color: #000000;
}

.card-button-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0px; /* Vertical space between button rows */
	padding: 0 10px 10px;
}

.card-button-row {
	display: flex;
	gap: 10px; /* Horizontal space between buttons */
}

#workHistoryPreviewContainer {
	/* content scrolls; header sticks via .preview-card-header */
}

/* Make Product Worksheet preview sticky as well */
#productWorksheetPreviewContainer {
	/* content scrolls; header sticks via .preview-card-header */
}

/* Add this new rule to handle highlighting rows with missing titles */
.table-striped tbody tr.row-missing-title td {
	color: red !important;
}

input[type="checkbox"] {
	margin: 4px 8px 0px 8px;
}