.frogmi-flow {
  width: 100%;
  padding: 18px 0 0;
  overflow: hidden;
  background: transparent;
}

.frogmi-flow__viewport {
  width: min(100%, var(--container-max, 1180px));
  margin: 0 auto;
  overflow: visible;
}

.frogmi-flow__canvas {
  width: 100%;
  min-width: 0;
  position: relative;
}

.frogmi-flow-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
 * Journey labels. Rendered as HTML inside <foreignObject> so the browser wraps,
 * centres and fits each translation inside the fixed boxes of the artwork.
 */
.frogmi-flow__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: #1d1d1b;
  overflow-wrap: break-word;
  pointer-events: none;
}

.frogmi-flow__label--heading {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
}

.frogmi-flow__label--legend {
  justify-content: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.frogmi-icon-hover {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s ease, filter 0.28s ease;
}

.frogmi-icon-hover:hover {
  transform: scale(1.09);
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.16));
}

.frogmi-dot,
.frogmi-dot-halo,
.frogmi-dot-core {
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.frogmi-dot {
  fill: #ffffff;
  stroke-width: 4.8;
}

.frogmi-dot-core {
  fill: #ffffff;
  stroke: none;
}

.frogmi-dot-halo {
  stroke: none;
}

.frogmi-dashed-flow-green {
  animation: frogmiDashMoveGreen 2.2s linear infinite;
}

.frogmi-dashed-flow-pink {
  animation: frogmiDashMovePink 1.9s linear infinite;
}

@keyframes frogmiDashMoveGreen {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -13.764px;
  }
}

@keyframes frogmiDashMovePink {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 12px;
  }
}

.frogmi-tail-overlay {
  fill: none;
  stroke: #cfe0ed;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 768px) {
  .frogmi-flow {
    padding: 14px 0 0;
  }
}