[data-step-form] {
  outline: none;
}

[data-step-form] .input:focus,
[data-step-form] .select>select:focus,
[data-step-form] button:focus {
  box-shadow: none;
  outline: revert;
}

@media (hover: hover) and (pointer: fine) {
  [data-step-form] .input[type="checkbox"]:focus+.label .checkbox {
    box-shadow: none;
    outline: auto;
    outline: auto -webkit-focus-ring-color;
  }
}

:is([data-step-form-content], [data-step-form-error]):not(.is-active) {
  display: none;
}

[data-step-form-field="nav"] .badge.is-plain.is-grey {
  background-color: var(--color-pj1);
}

[data-step-form-field="nav"] .input {
  animation: animateStepFormFocus 1.5s infinite;
}

[data-step-form-field="nav"] .select select {
  font-weight: 600;
  animation: animateStepFormFocus 1.5s infinite;
}

[data-step-form-field="nav"] .checkbox {
  animation: animateStepFormFocus 1.5s infinite;
}

@keyframes animateStepFormFocus {
  0% {
    border-color: #bdbdbd;
    box-shadow: 0 0 0 rgba(26, 140, 196, 85%);
  }

  50% {
    border-color: var(--color-pj1);
    box-shadow: 0 0 10px rgba(26, 140, 196, 85%);
  }

  100% {
    border-color: #bdbdbd;
    box-shadow: 0 0 0 rgba(26, 140, 196, 85%);
  }
}

[data-step-form-href][data-step-form-validate] {
  opacity: 0.5;
}

[data-step-form-href][data-step-form-validate="true"] {
  opacity: 1;
}

[data-step-form-href][data-step-form-validate="true"].button.is-plain.is-pj1 {
  animation: animateStepFormValidHref 1.5s infinite;
}

@keyframes animateStepFormValidHref {
  0% {
    box-shadow: 0 1px 4px 2px rgba(26, 140, 196, 85%);
  }

  50% {
    box-shadow: 0 1px 12px 2px rgba(26, 140, 196, 85%);
  }

  100% {
    box-shadow: 0 1px 4px 2px rgba(26, 140, 196, 85%);
  }
}