.dv-step-flow {
  --dv-columns: 3;
  --dv-column-gap: 80px;
  --dv-row-gap: 60px;
  --dv-direction-angle: 0deg;
  --dv-direction-x: 0px;
  --dv-direction-y: 0px;
  display: grid;
  gap: var(--dv-row-gap) var(--dv-column-gap);
  width: 100%;
  overflow: visible;
}

.dv-step-flow *,
.dv-step-flow *::before,
.dv-step-flow *::after {
  box-sizing: border-box;
}

.dv-step-flow--horizontal {
  grid-template-columns: repeat(var(--dv-columns), minmax(0, 1fr));
}

.dv-step-flow--vertical {
  grid-template-columns: minmax(0, 1fr);
}

.dv-step-flow__item {
  --dv-step-direction-angle: var(--dv-step-angle-desktop, var(--dv-direction-angle));
  --dv-step-direction-x: var(--dv-step-x-desktop, var(--dv-direction-x));
  --dv-step-direction-y: var(--dv-step-y-desktop, var(--dv-direction-y));
  position: relative;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow: visible;
}

.dv-step-flow__item:hover,
.dv-step-flow__item:focus {
  color: inherit;
}

.dv-step-flow__item-inner {
  position: relative;
  height: 100%;
  overflow: visible;
  transition: background-color 0.3s ease;
}

.dv-step-flow__visual-wrap {
  position: relative;
  display: inline-flex;
}

.dv-step-flow__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 126px;
  overflow: hidden;
}

.dv-step-flow__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dv-step-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dv-step-flow__visual .dv-step-flow__image + .dv-step-flow__icon {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.dv-step-flow__badge {
  --dv-badge-x: 0px;
  --dv-badge-y: 0px;
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  transform: translate(var(--dv-badge-x), var(--dv-badge-y));
}

.dv-step-flow--badge-top-left .dv-step-flow__badge {
  top: 0;
  left: 0;
}

.dv-step-flow--badge-top-right .dv-step-flow__badge {
  top: 0;
  right: 0;
}

.dv-step-flow--badge-bottom-left .dv-step-flow__badge {
  bottom: 0;
  left: 0;
}

.dv-step-flow--badge-bottom-right .dv-step-flow__badge {
  right: 0;
  bottom: 0;
}

.dv-step-flow--badge-inline .dv-step-flow__badge,
.dv-step-flow--badge-custom .dv-step-flow__badge,
.dv-step-flow .dv-step-flow__badge--text-only {
  position: relative;
  inset: auto !important;
}

.dv-step-flow__title {
  padding: 0;
}

.dv-step-flow__description {
  display: inline-block;
}

.dv-step-flow__description p {
  margin: 0;
}

.dv-step-flow__connector {
  --dv-direction-color: #d9d9df;
  --dv-position-angle: 0deg;
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  color: var(--dv-direction-color);
  transform: translate(-50%, -50%) translate(var(--dv-step-direction-x), var(--dv-step-direction-y)) rotate(calc(var(--dv-position-angle) + var(--dv-step-direction-angle)));
  transform-origin: center;
  pointer-events: none;
}

.dv-step-flow__item--position-desktop-right .dv-step-flow__connector {
  --dv-position-angle: 0deg;
  top: 63px;
  left: calc(100% + (var(--dv-column-gap) / 2));
}

.dv-step-flow__item--position-desktop-left .dv-step-flow__connector {
  --dv-position-angle: 180deg;
  top: 63px;
  left: calc(0px - (var(--dv-column-gap) / 2));
}

.dv-step-flow__item--position-desktop-top .dv-step-flow__connector {
  --dv-position-angle: -90deg;
  top: calc(0px - (var(--dv-row-gap) / 2));
  left: 50%;
}

.dv-step-flow__item--position-desktop-bottom .dv-step-flow__connector {
  --dv-position-angle: 90deg;
  top: calc(100% + (var(--dv-row-gap) / 2));
  left: 50%;
}

.dv-step-flow__connector-svg {
  display: block;
  width: 110px;
  height: 32px;
  overflow: visible;
}

.dv-step-flow__shaft,
.dv-step-flow__head-open {
  fill: none;
  stroke: var(--dv-direction-color);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dv-step-flow__head-solid {
  fill: var(--dv-direction-color);
  stroke: none;
}

.dv-step-flow__shaft--double {
  display: none;
}

.dv-step-flow__connector--dashed .dv-step-flow__shaft {
  stroke-dasharray: 9 6;
}

.dv-step-flow__connector--dotted .dv-step-flow__shaft {
  stroke-dasharray: 1 7;
}

.dv-step-flow__connector--double .dv-step-flow__shaft--main {
  display: none;
}

.dv-step-flow__connector--double .dv-step-flow__shaft--double {
  display: block;
}

.dv-step-flow__connector--none .dv-step-flow__shaft {
  display: none;
}

@media (max-width: 1024px) {
  .dv-step-flow--horizontal {
    grid-template-columns: repeat(var(--dv-columns), minmax(0, 1fr));
  }

  .dv-step-flow__item {
    --dv-step-direction-angle: var(--dv-step-angle-tablet, var(--dv-step-angle-desktop, var(--dv-direction-angle)));
    --dv-step-direction-x: var(--dv-step-x-tablet, var(--dv-step-x-desktop, var(--dv-direction-x)));
    --dv-step-direction-y: var(--dv-step-y-tablet, var(--dv-step-y-desktop, var(--dv-direction-y)));
  }

  .dv-step-flow__item--position-tablet-right .dv-step-flow__connector {
    --dv-position-angle: 0deg;
    top: 63px;
    left: calc(100% + (var(--dv-column-gap) / 2));
  }

  .dv-step-flow__item--position-tablet-left .dv-step-flow__connector {
    --dv-position-angle: 180deg;
    top: 63px;
    left: calc(0px - (var(--dv-column-gap) / 2));
  }

  .dv-step-flow__item--position-tablet-top .dv-step-flow__connector {
    --dv-position-angle: -90deg;
    top: calc(0px - (var(--dv-row-gap) / 2));
    left: 50%;
  }

  .dv-step-flow__item--position-tablet-bottom .dv-step-flow__connector {
    --dv-position-angle: 90deg;
    top: calc(100% + (var(--dv-row-gap) / 2));
    left: 50%;
  }
}

@media (max-width: 767px) {
  .dv-step-flow--horizontal {
    grid-template-columns: repeat(var(--dv-columns), minmax(0, 1fr));
  }

  .dv-step-flow__item {
    --dv-step-direction-angle: var(--dv-step-angle-mobile, var(--dv-step-angle-tablet, var(--dv-step-angle-desktop, var(--dv-direction-angle))));
    --dv-step-direction-x: var(--dv-step-x-mobile, var(--dv-step-x-tablet, var(--dv-step-x-desktop, var(--dv-direction-x))));
    --dv-step-direction-y: var(--dv-step-y-mobile, var(--dv-step-y-tablet, var(--dv-step-y-desktop, var(--dv-direction-y))));
  }

  .dv-step-flow__item--position-mobile-right .dv-step-flow__connector {
    --dv-position-angle: 0deg;
    top: 63px;
    left: calc(100% + (var(--dv-column-gap) / 2));
  }

  .dv-step-flow__item--position-mobile-left .dv-step-flow__connector {
    --dv-position-angle: 180deg;
    top: 63px;
    left: calc(0px - (var(--dv-column-gap) / 2));
  }

  .dv-step-flow__item--position-mobile-top .dv-step-flow__connector {
    --dv-position-angle: -90deg;
    top: calc(0px - (var(--dv-row-gap) / 2));
    left: 50%;
  }

  .dv-step-flow__item--position-mobile-bottom .dv-step-flow__connector {
    --dv-position-angle: 90deg;
    top: calc(100% + (var(--dv-row-gap) / 2));
    left: 50%;
  }
}