@charset "UTF-8";
.signet-checkmark-form {
  list-style: none;
  counter-reset: signet-counter;
  display: flex;
}
.signet-checkmark-form .checkmark-item {
  counter-increment: signet-counter;
  margin: 0.25rem;
  position: relative;
}
.signet-checkmark-form .checkmark-item::before {
  content: counter(signet-counter);
  background-color: var(--gray-400);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}
.signet-checkmark-form .checkmark-item.active {
  counter-increment: signet-counter;
  margin: 0.25rem;
  position: relative;
}
.signet-checkmark-form .checkmark-item.active::before {
  content: counter(signet-counter);
  background-color: var(--primary-main);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}
.signet-checkmark-form .checkmark-item.valid {
  counter-increment: signet-counter;
  margin: 0.25rem;
  position: relative;
}
.signet-checkmark-form .checkmark-item.valid::before {
  content: "✓";
  background-color: transparent;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-main);
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  border: 1px solid var(--primary-main);
}