.form-step { display: none; 
	  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

	}
    .form-step.active { display: block; 
		transform: translateX(0);
	}
	.form-step.leaving {
	  opacity: 0;
	}
    .is-invalid { border-color: red !important; }
    .form-error { font-size: 0.9rem; }
	.form-progress-indicator {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-bottom: 2rem;
	}

.form-progress-indicator .step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #ccc; /* Grey border for inactive steps */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ccc;
  transition: all 0.3s ease;
}

.form-progress-indicator .step.active {
  border-color: var(--tj-color-theme-primary); 
  color: var(--tj-color-theme-primary); 
  transform: scale(1.1);
}

.form-progress-indicator .step.completed {
  background-color: #38c172; /* Green background for completed steps */
  border-color: #38c172;
  color: white;
}

.form-progress-indicator .line2 {
  flex-grow: 1;
  height: 2px;
  background-color: #ccc;
  margin: 0 5px;
  transition: background-color 0.3s ease;
}

.form-progress-indicator .step.active + .line2 {
  background-color: var(--tj-color-theme-primary); 
}
.form-check-label{
	margin-left: 10px;
	color: #fff;
}
.form-check-input:checked {
    background-color: #14a3a3;
    border-color: var(--tj-color-theme-primary);
}
.form-check-input {
    background-color: #00fdf021;
}
/* Custom CSS for the Bootstrap Table */

/* Style for the table header (thead) with the `table-light` class */
.table-bordered thead.table-light {
  background-color: #343a40 !important; /* Dark grey background */
  color: #ffffff !important;           /* White text color */
}

/* Style for the table body (tbody) */
.table-bordered tbody {
  background-color: #212529; /* A slightly darker background */
  color: #f8f9fa;           /* A light text color */
}

/* Adjust the border color for the cells within the table body */
.table-bordered tbody tr td {
  border-color: #495057;
}

/* Remove padding and margin from the summary table to better fit the dark theme */
#summaryContent .table {
    margin-bottom: 0;
}

/* Styling for the hidden menus */
#filtrationOptions,
#pumpOptions,
#otherServicesOptions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

.show-menu {
 
  max-height:  500px !important;
}