.primary-bg {
    background-color: #31cd8a;
}

:root {
  --header-height: 200px; /* Set your actual header height */
}

.form-control:focus {
  border-color: #8832ff;
  outline: none;
  box-shadow: 0 0 5px rgba(136, 50, 255, 0.5); /* Soft purple glow */
}

/* checkbox styles */
.form-check-checkbox {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #ccc; /* Default to #ccc */
  border-radius: 4px;
  outline: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-check-checkbox:hover {
  border: 1.5px solid #8832ff;
  outline: #8832ff;
}

.form-check-checkbox:checked {
  background-color: #8832ff;
  border-color: #8832ff;
  background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 32.00 32.00' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23ffffffCCCCCC' stroke-width='0.448'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='M6.5 17l6 6 13-13'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.form-check-checkbox:not(:checked) {
  background-color: white;
  border-color: #ccc; /* Unchecked state border */
}

.form-check-label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin-left: 8px;
}