svg.patternlock g.lock-lines line {
  stroke-width: 1.5;
  stroke: #000;
  opacity: .5
}

svg.patternlock g.lock-dots circle {
  stroke: transparent;
  fill: #000;
  stroke-width: 13.5
}

svg.patternlock g.lock-actives circle {
  fill: #000;
  opacity: .2;
  animation: lock-activate-dot .15s 0s ease 1;
  transform-origin: center
}

svg.patternlock g.lock-lines line {
  stroke-width: 1.5;
  stroke-linecap: round
}

svg.patternlock.success g.lock-actives circle {
  fill: green
}

svg.patternlock.error g.lock-actives circle {
  fill: red
}

@keyframes lock-activate-dot {
  0% {
    transform: scale(0)
  }

  75% {
    transform: scale(1.1)
  }

  100% {
    transform: scale(1)
  }
}