@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-pro-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/source-sans-pro-700-latin.woff2) format('woff2');
}
.svg-steps {
  --svg-steps-accent: #1a73e8;
  --svg-steps-fg: #222;
  --svg-steps-muted: #666;
  --svg-steps-border: #d0d0d0;
  --svg-steps-bg: #fff;
  --svg-steps-caption-font: inherit;
  --svg-steps-caption-size: 1.15em;
  --svg-steps-counter-font: inherit;
  --svg-steps-counter-size: 1em;
  --svg-steps-counter-case: none;
  --svg-steps-counter-spacing: normal;
  --svg-steps-watermark-font: 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  --svg-steps-watermark-case: none;
  --svg-steps-watermark-spacing: .02em;
  --svg-steps-watermark-color: rgba(0, 0, 0, .32);
  --svg-steps-btn-color: var(--svg-steps-accent);
  --svg-steps-btn-bg: var(--svg-steps-bg);
  --svg-steps-btn-border-width: 1px;
  --svg-steps-btn-border-color: var(--svg-steps-border);
  --svg-steps-btn-hover-color: var(--svg-steps-accent);
  --svg-steps-btn-hover-bg: var(--svg-steps-bg);
  --svg-steps-btn-hover-border-color: var(--svg-steps-accent);
  --svg-steps-btn-disabled-color: var(--svg-steps-border);
  --svg-steps-btn-disabled-border-color: var(--svg-steps-border);
  --svg-steps-restart-color: var(--svg-steps-muted);
  --svg-steps-focus: color-mix(in srgb, var(--svg-steps-accent) 35%, transparent);
  display: block;
  max-width: 100%;
  color: var(--svg-steps-fg);
  position: relative;   
  outline: none;
  border-radius: 8px;
}
.svg-steps:focus-visible { box-shadow: 0 0 0 3px var(--svg-steps-focus); }
.svg-steps__stage { position: relative; }
.svg-steps--loading .svg-steps__stage { min-height: 120px; }
.svg-steps__frame { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.svg-steps__svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.svg-steps__watermark {
  position: absolute;
  top: 2px;
  font: var(--svg-steps-watermark-font);
  text-transform: var(--svg-steps-watermark-case);
  letter-spacing: var(--svg-steps-watermark-spacing);
  color: var(--svg-steps-watermark-color);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.svg-steps__watermark--top-left { left: 2px; }
.svg-steps__watermark--top-right { right: 2px; }
.svg-steps--restart-left .svg-steps__restart { right: auto; left: 0; }
.svg-steps__title {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 52px 8px 0;
}
.svg-steps--restart-left .svg-steps__title { margin: 0 0 8px 52px; }
.svg-steps__caption {
  margin: .5em 0 0;
  min-height: 1.4em;   
  font-family: var(--svg-steps-caption-font);
  font-size: var(--svg-steps-caption-size);
  line-height: 1.4;
  text-align: center;
  color: var(--svg-steps-fg);
}
.svg-steps__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  margin-top: .75em;
}
.svg-steps__counter {
  min-width: 7em;
  text-align: center;
  font-family: var(--svg-steps-counter-font);
  font-size: var(--svg-steps-counter-size);
  text-transform: var(--svg-steps-counter-case);
  letter-spacing: var(--svg-steps-counter-spacing);
  font-variant-numeric: tabular-nums;
  color: var(--svg-steps-muted);
}
.svg-steps__btn,
.svg-steps__restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--svg-steps-btn-color);
  background: var(--svg-steps-btn-bg);
  border: var(--svg-steps-btn-border-width) solid var(--svg-steps-btn-border-color);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   
  transition: color .15s, background-color .15s, border-color .15s;
}
.svg-steps__btn {
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 1.4em;
}
@media (hover: hover) {
  .svg-steps__btn:hover:not(:disabled):not([aria-disabled="true"]),
  .svg-steps__restart:hover:not(:disabled) {
    color: var(--svg-steps-btn-hover-color);
    background: var(--svg-steps-btn-hover-bg);
    border-color: var(--svg-steps-btn-hover-border-color);
  }
}
.svg-steps__btn:focus-visible,
.svg-steps__restart:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--svg-steps-focus);
}
.svg-steps__btn:disabled,
.svg-steps__btn[aria-disabled="true"] {
  color: var(--svg-steps-btn-disabled-color);
  border-color: var(--svg-steps-btn-disabled-border-color);
  cursor: default;
}
.svg-steps__restart {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  color: var(--svg-steps-restart-color);
  transition: opacity .2s, visibility .2s, color .15s, background-color .15s, border-color .15s;
}
.svg-steps__restart span, .svg-steps__restart svg { display: block; }
.svg-steps__restart:disabled { opacity: 0; visibility: hidden; }
.svg-steps--error .svg-steps__stage { color: #b00020; padding: 1em; }
