.h5p-progress-dots-container {
  text-align: center;
  padding: var(--h5p-theme-spacing-xs) var(--h5p-theme-spacing-s);
  border-radius: var(--h5p-theme-border-radius-medium);
  margin: 0;
  background-color: var(--h5p-theme-ui-base);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.h5p-progress-item {
  list-style: none;
  display: inline-block;
}
.h5p-progress-dot {
  display: inline-block;
  width: 0.5625em;
  height: 0.5625em;
  border-radius: 50%;
  margin: 0 calc(var(--h5p-theme-spacing-s)*0.35);
  cursor: pointer;
  border: 1px solid var(--h5p-theme-contrast-cta-white);
  position: relative;
  transition: transform 0.2s;
}

.h5p-progress-dot.disabled {
  cursor: default;
}

.h5p-progress-dot:not(.disabled):hover {
  transform: scale(1.25);
}

.h5p-progress-dot.answered {
  background: var(--h5p-theme-main-cta-base);
}

.h5p-progress-dot:before {
  display: block;
  content: "";
  border: 2px solid transparent;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: 50%;
  position: absolute;
  box-sizing: border-box;
  left: -5px;
  top: -5px;
  transition: border-color 0.5s;
}

.h5p-progress-dot.current:before {
  border-color: var(--h5p-theme-main-cta-base);
}

.h5p-progress-dot.disabled:focus-visible {
  outline: none
}

.h5p-progress-dot:focus {
  transform: scale(1.15);
  outline: 2px ridge var(--h5p-theme-main-cta-base);
  border-radius: 4px;
  outline-offset: 2px;
}