body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: transparent;
}

#wizardContainer {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

#wizardSteps {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 2rem;
}

#wizardSteps .nav-item {
  flex: 1;
  text-align: center;
}

#wizardSteps .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  color: #6c757d;
  background-color: transparent;
  border: none;
}

#wizardSteps .nav-link .step-number {
  width: 4rem; /* Increase from 3rem */
  height: 4rem; /* Increase from 3rem */
  font-size: 1.5rem; /* Increase from 1.25rem */
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem; /* Increase from 0.5rem */
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#wizardSteps .nav-link .step-name {
  font-size: 1rem; /* Increase from 0.875rem */
  transition: all 0.3s ease;
}

#wizardSteps .nav-link.active .step-number {
  background-color: #007bff;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

#wizardSteps .nav-link.active .step-name {
  color: #007bff;
  font-weight: bold;
}

#wizardSteps .nav-link.completed .step-number {
  background-color: #28a745;
  color: #fff;
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

#wizardSteps .nav-link.completed .step-name {
  color: #28a745;
}

#wizardSteps .nav-link:not(.active):hover .step-number {
  background-color: #dee2e6;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
}

#wizardContent {
  min-height: 300px;
  padding: 15px 0;
}

#wizardContent h3 {
  margin-bottom: 1.5rem;
  color: #343a40;
}

.form-label {
  font-weight: 600;
  color: #495057;
}

.form-control, .form-select {
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* Updated button styles */
.btn {
  font-size: 1.1rem; /* Increased from 1rem */
  font-weight: bold; /* Added bold font weight */
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  transition: all 0.15s ease-in-out;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.is-invalid {
  border-color: #dc3545;
}

.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Update these styles at the end of your existing CSS */

.custom-tooltip {
--bs-tooltip-max-width: 300px;
width: 300px;
}

.custom-tooltip .tooltip-inner {
max-width: 100%;
width: auto;
text-align: left;
padding: 12px 15px;
font-size: 0.875rem;
line-height: 1.6;
background-color: #f8f9fa;
color: #212529;
border: 1px solid #ced4da;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
white-space: normal;
word-wrap: break-word;
}

.custom-tooltip .tooltip-arrow {
display: none; /* Hide the arrow */
}

/* Add these new styles for right positioning */
.custom-tooltip {
position: absolute;
left: 100%; /* Position to the right of the icon */
top: 50%;
transform: translateY(-50%);
margin-left: 10px; /* Add some space between the icon and tooltip */
}

.form-label {
position: relative;
display: inline-block; /* Ensure the label doesn't take full width */
}

.form-label i {
cursor: pointer;
margin-left: 5px;
}

.autocomplete-wrapper {
position: relative;
width: 100%;
}

.autocomplete-list {
position: absolute;
z-index: 1050; /* Increase this value to ensure it's above other elements */
width: 100%;
max-height: 200px;
overflow-y: auto;
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid #ced4da;
border-top: none;
border-radius: 0 0 0.25rem 0.25rem;
background-color: white;
top: 100%; /* Position the list below the input */
left: 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
}

.autocomplete-list li {
padding: 0.5rem 1rem;
cursor: pointer;
}

.autocomplete-list li:hover {
background-color: #f8f9fa;
}

.autocomplete-wrapper input[readonly] {
background-color: #fff;
cursor: pointer;
}

.autocomplete-wrapper input[readonly]:focus {
box-shadow: none;
}

/* Toggle switch styles */
.form-switch {
padding-left: 3.5em;
}

.form-switch .form-check-input {
width: 3em;
height: 1.5em;
margin-left: -3.5em;
background-image: none;
border-radius: 1.5em;
transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
background-position: right center;
background-color: #0d6efd;
}

.form-switch .form-check-label {
position: relative;
}

.form-switch .toggle-label-off,
.form-switch .toggle-label-on {
position: absolute;
top: 0;
transition: opacity 0.15s ease-in-out;
}

.form-switch .toggle-label-off {
left: 3.5em;
opacity: 1;
}

.form-switch .toggle-label-on {
left: 3.5em;
opacity: 0;
}

.form-switch .form-check-input:checked ~ .form-check-label .toggle-label-off {
opacity: 0;
}

.form-switch .form-check-input:checked ~ .form-check-label .toggle-label-on {
opacity: 1;
}

/* Updated Toggle switch styles */
.custom-switch {
padding-left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.custom-switch .form-check-input {
display: none;
}

.custom-switch .form-check-label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 4px;
border-radius: 24px;
background-color: #e9ecef;
cursor: pointer;
transition: all 0.3s ease;
min-width: 90px;
height: 32px;
position: relative;
margin-top: 5px; /* Add some space between the label and the switch */
}

.custom-switch .form-check-label::before {
content: '';
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 2px;
top: 2px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.custom-switch .form-check-input:checked + .form-check-label {
background-color: #0d6efd;
}

.custom-switch .form-check-input:checked + .form-check-label::before {
left: calc(100% - 30px);
}

.custom-switch .toggle-label {
font-size: 0.8125rem;
font-weight: bold;
transition: all 0.3s ease;
z-index: 1;
line-height: 28px;
}

.custom-switch .toggle-label-off {
padding-left: 12px;
color: #495057;
}

.custom-switch .toggle-label-on {
padding-right: 32px;
color: #fff;
position: absolute;
left: 18px;
}

.custom-switch .form-check-input:not(:checked) + .form-check-label .toggle-label-on {
opacity: 0;
}

.custom-switch .form-check-input:checked + .form-check-label .toggle-label-off {
opacity: 0;
}

/* Increase spacing between form elements */
.mb-3 {
margin-bottom: 1rem !important; /* Increase from the default .75rem */
}

/* Add more padding to form controls */
.form-control, .form-select, .form-check, .custom-switch {
margin-bottom: 0.5rem; /* Add space below each form control */
}

/* Adjust spacing for radio and checkbox groups */
.radio-group, .checkbox-group {
margin-bottom: 0.5rem;
}

.radio-group .form-check, .checkbox-group .form-check {
margin-bottom: 0.25rem;
}

/* Ensure consistent spacing for autocomplete inputs */
.autocomplete-wrapper {
margin-bottom: 0.5rem;
}

/* Add more space after labels */
.form-label {
margin-bottom: 0.5rem;
}

/* Add these styles at the end of your CSS file */

.input-group {
display: flex;
align-items: stretch;
}

.input-group .form-control,
.input-group .form-select,
.input-group .autocomplete-wrapper {
flex: 1;
min-height: 38px;
border-radius: 0.25rem !important;
}

.input-group .btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 0.25rem !important;
margin-left: 5px;
}

.input-group .clear-btn {
margin-right: 5px;
}

/* Remove these properties as they're no longer needed */
.input-group .form-control,
.input-group .form-select,
.input-group .autocomplete-wrapper input {
/* border-top-right-radius: 0;
border-bottom-right-radius: 0; */
}

.input-group .lookup-btn {
/* border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-left: none; */
}

/* Ensure proper spacing for autocomplete inputs */
.autocomplete-wrapper {
flex: 1;
display: flex;
}

.autocomplete-wrapper input {
flex: 1;
min-height: 38px;
border-radius: 0.25rem !important;
}

/* Adjust the autocomplete list width */
.autocomplete-list {
width: calc(100% - 86px);
}

/* Ensure proper vertical alignment for select elements */
.input-group select.form-select {
padding-top: 0;
padding-bottom: 0;
}

/* Adjust padding for inputs to vertically center text */
.input-group .form-control,
.input-group .form-select,
.input-group .autocomplete-wrapper input {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}

/* Adjust button container spacing */
#nextSubmitBtnContainer {
  margin-top: 20px;
}

/* Add these styles at the end of your CSS file */

.wizard-nav-btn {
  width: 120px; /* Set a fixed width for both buttons */
  margin: 0 5px; /* Add some horizontal spacing between buttons */
}

.mt-3.d-flex.justify-content-between {
  padding: 0 5px; /* Add some padding to the container */
}

#nextSubmitBtnContainer {
  margin-top: 0; /* Remove top margin as it's no longer needed */
}

/* Ensure the submit button has the same styling */
#submitBtn {
  width: 120px;
}

/* Update the autocomplete-wrapper and autocomplete-list styles */
.autocomplete-wrapper {
position: relative;
width: 100%;
}

.autocomplete-list {
position: absolute;
z-index: 1050; /* Increase this value to ensure it's above other elements */
width: 100%;
max-height: 200px;
overflow-y: auto;
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid #ced4da;
border-top: none;
border-radius: 0 0 0.25rem 0.25rem;
background-color: white;
top: 100%; /* Position the list below the input */
left: 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
}

.autocomplete-list li {
padding: 0.5rem 1rem;
cursor: pointer;
}

.autocomplete-list li:hover {
background-color: #f8f9fa;
}

/* Ensure the input is not covered */
.autocomplete-wrapper input {
width: 100%;
z-index: 1001; /* Ensure the input is above the list */
}

/* Ensure the autocomplete wrapper has a higher z-index than surrounding elements */
.autocomplete-wrapper {
position: relative;
z-index: 1000; /* This should be lower than the list but higher than other elements */
}

/* Adjust the input z-index if necessary */
.autocomplete-wrapper input {
position: relative;
z-index: 1001; /* This should be higher than the wrapper but lower than the list */
}

/* Add or update these styles in your CSS file */

.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-input {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.autocomplete-input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.autocomplete-list {
  position: absolute;
  z-index: 9999;
  width: 100%; /* Match the width of the input */
  max-height: 200px;
  overflow-y: auto;
  list-style-type: none;
  padding: 0;
  margin: 2px 0 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.autocomplete-list li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #e9ecef;
}

.autocomplete-list li:last-child {
  border-bottom: none;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
  background-color: #f8f9fa;
  color: #16181b;
}

/* Adjust the input group styles */
.input-group .autocomplete-container {
  flex: 1;
}

.input-group .autocomplete-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Update these styles in your existing CSS file */

.form-control, 
.form-select, 
.autocomplete-input {
  border: 1px solid #adb5bd; /* Darker border color */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, 
.form-select:focus, 
.autocomplete-input:focus {
  border-color: #6c757d; /* Even darker border color on focus */
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25); /* Adjusted box shadow color */
}

.autocomplete-list {
  border: 1px solid #adb5bd; /* Matching darker border color for autocomplete list */
}

/* Update the is-invalid state as well */
.is-invalid {
  border-color: #dc3545;
}

.is-invalid:focus {
  border-color: #bd2130; /* Darker red for invalid focus state */
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Styles for the divider */
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
}

.divider::before,
.divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #ced4da;
}

.divider-text {
padding: 0 10px;
color: #6c757d;
font-weight: bold;
}

.form-fieldset {
border: 1px solid #ced4da;
border-radius: 0.25rem;
padding: 2.5rem 1rem 1rem; /* Increased top padding */
margin-bottom: 1rem;
position: relative;
margin-top: 0.5rem;
background-color: #f8f9fa;
}

.fieldset-legend {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0 0.5rem;
margin: 0;
font-size: 1rem;
font-weight: bold;
background-color: inherit;
color: inherit;
white-space: nowrap;
text-align: center;
width: auto;
max-width: 90%;
line-height: 1;
}

/* Add this new rule to increase space after the legend */
.form-fieldset > .form-element-container:first-child {
margin-top: 1rem; /* Adds extra space after the legend */
}

/* Optionally, you can add more space between all form elements within the fieldset */
.form-fieldset .form-element-container {
margin-bottom: 1.5rem; /* Increases space between form elements */
}

/* Report Styles */
.npfc-review-report {
background-color: #ffffff; /* Default background color */
border-radius: 8px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.npfc-report-category {
margin-bottom: 30px;
}

.npfc-report-category h2 {
font-size: 1.75rem;
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 20px;
}

.npfc-report-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.npfc-report-field {
background-color: #ffffff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 15px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.npfc-report-field:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}

.npfc-field-label {
font-weight: 600;
color: #495057;
margin-bottom: 8px;
display: block;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.npfc-field-value {
color: #212529;
word-break: break-word;
font-size: 1rem;
line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.npfc-report-fields {
  grid-template-columns: 1fr;
}
}

/* Empty field styles */
.npfc-report-field:empty {
display: none;
}

/* Remove alternating background colors */
.npfc-report-field:nth-child(even) {
background-color: #ffffff;
}

/* Add a subtle border to separate fields visually */
.npfc-report-field {
border: 1px solid #e9ecef;
}

/* Add these styles for disabled inputs */
.disabled-input,
.disabled-input:hover,
.disabled-input:focus {
background-color: #e9ecef;
opacity: 0.65;
cursor: not-allowed;
pointer-events: none;
}

.disabled-input::placeholder {
color: #6c757d;
}

/* Style disabled select elements */
select.disabled-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

/* Style disabled autocomplete inputs */
.autocomplete-container .disabled-input {
background-color: #e9ecef;
}

/* Ensure disabled inputs don't have hover effects */
.form-control.disabled-input:hover,
.form-select.disabled-input:hover,
.autocomplete-input.disabled-input:hover {
border-color: #ced4da;
box-shadow: none;
}

/* If needed, adjust the overall container to accommodate larger circles */
#wizardSteps {
  margin-bottom: 2.5rem; /* Increase from 2rem if necessary */
}

/* You might also want to adjust the step name font size for better proportion */
#wizardSteps .nav-link .step-name {
  font-size: 1rem; /* Increase from 0.875rem */
}

/* Update these styles in your existing CSS file */

/* Increase font size for all form inputs */
.form-control, 
.form-select, 
.autocomplete-input,
input[type="date"],
input[type="text"],
textarea {
  font-size: 1.1rem; /* Increase from 1rem */
}

/* Adjust padding to maintain proper height with larger font */
.form-control, 
.form-select, 
.autocomplete-input,
input[type="date"],
input[type="text"] {
  padding: 0.8rem 1rem; /* Slightly increase padding */
}

/* Increase font size for form labels */
.form-label {
  font-size: 1.1rem; /* Increase from default */
  margin-bottom: 0.5rem; /* Add some space below labels */
}

/* Adjust autocomplete list items */
.autocomplete-list li {
  font-size: 1.1rem; /* Match input font size */
  padding: 0.6rem 1rem; /* Adjust padding for larger text */
}

/* Increase font size for placeholder text */
::placeholder {
  font-size: 1.1rem;
}

/* Adjust select dropdown arrow position if needed */
.form-select {
  background-position: right 1rem center;
}

/* Increase font size for radio and checkbox labels */
.form-check-label {
  font-size: 1.1rem;
}

/* Adjust toggle switch text size */
.custom-switch .toggle-label {
  font-size: 1rem; /* Slightly smaller than inputs but larger than before */
}

/* Increase font size for error messages */
.invalid-feedback {
  font-size: 0.95rem; /* Increase from 0.875em */
}

/* Adjust tooltip text size */
.custom-tooltip .tooltip-inner {
  font-size: 1rem; /* Increase from 0.875rem */
}

/* Add this new style to your CSS file */
.wizard-nav-container {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}

/* Update/add these tooltip styles */
.tooltip-wrapper {
display: inline-block;
margin-left: 4px;
vertical-align: middle;
}

.tooltip-icon {
cursor: help;
font-size: 14px;
color: #007bff;
transition: color 0.2s ease;
}

.tooltip-icon:hover {
color: #0056b3;
}

.custom-tooltip {
opacity: 1 !important;
pointer-events: none;
}

.custom-tooltip .tooltip-inner {
max-width: 300px;
padding: 8px 12px;
color: #fff;
text-align: left;
background-color: #333;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-tooltip .tooltip-inner p {
margin-bottom: 0.5rem;
}

.custom-tooltip .tooltip-inner p:last-child {
margin-bottom: 0;
}

.custom-tooltip .tooltip-arrow {
display: block !important;
}

.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
border-right-color: #333;
}

.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
border-left-color: #333;
}

.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: #333;
}

.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: #333;
}

/* Add fade animation */
.tooltip.fade {
transition: opacity 0.15s linear;
}

.tooltip.show {
opacity: 1;
}

/* Add these styles for jQuery UI autocomplete */
.custom-autocomplete-menu {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #ced4da;
border-radius: 0.25rem;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 9999;
}

.custom-autocomplete-menu .ui-menu-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #e9ecef;
}

.custom-autocomplete-menu .ui-menu-item:last-child {
border-bottom: none;
}

.custom-autocomplete-menu .ui-menu-item:hover,
.custom-autocomplete-menu .ui-state-active {
background-color: #f8f9fa;
border: none;
margin: 0;
}

.ui-autocomplete-input {
width: 100%;
}

/* Update existing autocomplete styles to work with jQuery UI */
.autocomplete-container {
position: relative;
width: 100%;
}

.ui-autocomplete {
position: absolute;
cursor: default;
}