.custom-error { display: block; width: 100%; margin-top: .25rem; font-size: .875em; color: var(--bs-form-invalid-color); }
.logo-img svg { color: #2563eb; height: 32px; width: 32px;}
.is-invalid + span + .ti-eye-off,.is-invalid + span + span + .ti-eye-off,.is-invalid + span + span + .ti-eye, .is-invalid + span + .ti-eye {
  right: 35px !important;
  top: 34% !important;
}
/* Hide both logos by default */
.logo {
  display: none;
}

/* Show light logo when theme is light */
[data-bs-theme="light"] .logo-dark {
  display: block;
}

/* Show dark logo when theme is dark */
[data-bs-theme="dark"] .logo-light {
  display: block;
}

/* Make the switch track bg similar to btn bg-info-subtle */
#userIntegration .form-check-input:checked {
  background-color: #80e7a7; /* approximate light info background */
  border-color: #80e7a7;
}

/* Make the switch thumb a bit darker blue, matching info button */
#userIntegration .form-check-input:checked::before {
  background-color: #0ea5e9; /* bootstrap info blue */
  border-color: #0ea5e9;
}

/* Adjust the unchecked state to subtle gray */
#userIntegration .form-check-input {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

#userIntegration .form-check-input {
  width: 50px;  /* default is ~40px */
  height: 28px; /* default is ~20px */
  cursor: pointer;
}

/* Move the thumb to the right when checked */
#userIntegration .form-check-input:checked::before {
  transform: translateX(22px); /* default is ~20px */
}

#userIntegration iconify-icon, #clientFieldNames iconify-icon {
  vertical-align: middle;
}

[data-bs-theme="dark"] #userIntegration .form-check-input {
  background-color: #2d4052;
}