.invalid .checkmark-circle {
  background-color: transparent;
  border-color: #000000;
}

.checkmark-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #000000;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: background-color 0.3s, border-color 0.3s;
}

.checkmark-circle::before {
  content: '\2713';
  font-size: 14px;
  color: #000000;
  transition: color 0.3s;
  position: absolute;
}

.valid .checkmark-circle {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.valid .checkmark-circle::before {
  color: white;
}

.card-body {
}