.webform-progress-tracker {gap:1rem;}
.progress-marker {display:none;}
.webform-progress-tracker {margin-top:0; margin-bottom: 2rem;}
.webform-progress-tracker .progress-step .progress-text {position: relative; padding: 0; background-color: #e9f5e5; overflow: visible;}
.webform-progress-tracker .progress-step.is-active .progress-text {background-color: #6CBE53; color: #fff;}
.webform-progress-tracker .progress-step .progress-text .progress-title {line-height: 1; padding: .75rem .5rem;}
.webform-progress-tracker .progress-step:not(:first-child) .progress-text:before,
.webform-progress-tracker .progress-step:not(:last-child) .progress-text:after { /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: .37rem; /* move it down because of rounded corners */
    width: 1.76rem; /* same as height */
    height: 1.76rem; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 2px 4px 2px 4px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    -webkit-border-radius: 2px 4px 2px 4px;
    -moz-border-radius: 2px 4px 2px 4px;
}
.webform-progress-tracker .progress-step:not(:first-child) .progress-text:before,
.webform-progress-tracker .progress-step:not(:last-child) .progress-text:after {
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.webform-progress-tracker .progress-step:not(:first-child) .progress-text:before { /* align the "before" square to the left */
    left: -.875rem;
  background-color: white;
}
.webform-progress-tracker .progress-step:not(:last-child) .progress-text:after { /* align the "after" square to the right */
    right: -.875rem;
  z-index: 1;
}
.form-item .form-label {
  margin-bottom: 0.25rem;
}
.form-item .form-text {
  margin-top: 0;
}
.webform-progress-tracker .progress-title[role="link"] {
  color: #000;
}
.form-actions .btn-primary {
  color: #fff;
}
.form-label.form-required:after {
  content: '*';
}
.form-item .required.error {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-item .required.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}
.form-item--error-message {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}