#openingform .step {
  display: none;
}

#openingform #currentstep {
  display: block;
}

#openingform .step,
#openingform .acclist {
  transition: opacity 0.35s;
}

#openingform .step[inert],
#openingform .acclist[inert] {
  opacity: 0;
}

#openingform .timeline .step-label {
  color: #727c8d;
}

#openingform .timeline {
  --timeline-step-width: 84px;
  --timeline-dot-size: 20px;
  --timeline-step-gap: calc((100% - ((var(--timeline-step-width)) * 4)) / 3);
  --timeline-text-size: calc(var(--spacing) * 20);

  
}

#openingform .timeline > [data-step-nav] {
  width: var(--timeline-step-width);
}

#openingform .timeline .timeline-segment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

#openingform .timeline .timeline-segment.is-complete {
  background: #04ad47;
}

#openingform .timeline .timeline-segment.seg-1 {
  left: calc((var(--timeline-step-width) / 2) + (var(--timeline-text-size) / 2));
  width: calc(var(--timeline-step-width) + var(--timeline-step-gap) - var(--timeline-text-size));
}

#openingform .timeline .timeline-segment.seg-2 {
  left: calc(
    (var(--timeline-step-width) / 2) +
    (var(--timeline-step-width) + var(--timeline-step-gap)) +
    (var(--timeline-text-size) / 2)
  );
  width: calc(var(--timeline-step-width) + var(--timeline-step-gap) - var(--timeline-text-size));
}

#openingform .timeline .timeline-segment.seg-3 {
  left: calc(
    (var(--timeline-step-width) / 2) +
    ((var(--timeline-step-width) + var(--timeline-step-gap)) * 2) +
    (var(--timeline-text-size) / 2)
  );
  width: calc(var(--timeline-step-width) + var(--timeline-step-gap) - var(--timeline-text-size));
}

#openingform .timeline > [data-step-nav]:has(.activetick) .step-label {
  color: #1d2940;
}

#openingform .timeline > [data-step-nav].is-complete .step-label {
  color: #1d2940;
}

#openingform .timeline .num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: 9999px;
  border: 2px solid #727c8d;
  background: #727c8d;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  font-family: "Lato", sans-serif;
}

#openingform .timeline .num.activetick {
  border-color: #466587;
  background: #466587;
  color: #fff;
}

#openingform .timeline .num.complete {
  border-color: transparent;
  background: transparent;
  color: transparent;
}

#openingform .timeline .num.complete::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: url("/static/img/icons/check-mark-greenbackground.svg") center / contain no-repeat;
}

#openingform .ast {
  color: #ef4444;
  font-size: 12px;
}

#openingform .inputs,
#openingform .checkbox-field input[type="text"] {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #1d2940;
}

#openingform .inputs::placeholder,
#openingform .checkbox-field input[type="text"]::placeholder {
  color: #727c8d !important;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 1;
}

#openingform select.inputs:has(option[value=""]:checked) {
  color: #727c8d;
}

#openingform select.inputs {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-weight: 400;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23727C8D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

#openingform select.inputs option {
  font-weight: 400;
}

#openingform select.inputs::-ms-expand {
  display: none;
}

#openingform #placebutton {
  display: none;
}

#openingform .last#currentstep ~ .acclist > #stepactions > #placebutton {
  display: flex;
}

#openingform .last#currentstep ~ .acclist > #stepactions > #nextbutton {
  display: none;
}

#openingform .first#currentstep ~ .acclist > #stepactions > #backstep {
  display: none;
}

#openingform #placebutton[inert] {
  opacity: 1;
  text-decoration: none;
  border-color: #e5e7eb;
  background: #e5e7eb;
  color: #64748b;
}

#openingform #placebutton[inert] img {
  display: none;
}

#openingform button {
  cursor: pointer;
}

#openingform button:disabled,
#openingform button[disabled],
#openingform button[inert] {
  cursor: not-allowed;
}

#openingform .checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#openingform .checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

#openingform .checkbox-field input[type="text"]:disabled {
  color: #94a3b8;
}

#openingform .business-step .step2-option {
  color: #1d2940;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 24px;
}

#openingform .business-step .step2-option input[type="checkbox"] + input[type="text"] {
  height: 36px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1d2940;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#openingform .business-step .step2-option input[type="checkbox"] + input[type="text"]:focus {
  outline: none;
  border-color: #64748b;
}

#openingform .business-step .step2-option input[type="checkbox"] + input[type="text"]:disabled {
  display: none;
}

#openingform .business-step .step2-option input[type="checkbox"] + input[type="text"]:disabled::placeholder {
  color: #94a3b8;
}

#openingform .business-step .step2-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  flex: 0 0 18px;
}

#openingform .business-step .step2-checkbox:checked {
  border-color: #466587;
  background-color: #466587;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.25L6.5 11.25L12.5 5.25' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

#openingform .business-step .step2-checkbox:focus-visible {
  outline: 2px solid #466587;
  outline-offset: 1px;
}

@media (max-width: 640px) {
  #openingform .timeline {
    --timeline-step-width: 76px;
    --timeline-dot-size: 20px;
    gap: 4px;
  }

  #openingform .timeline .num {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}