html.has-dialog {
  overflow: hidden;
}
.item-panel {
  display: none;
}

body.wrong {
  -webkit-animation:bg-red 1s ease-in;
  animation:bg-red 1s ease-in
}

body.correct {
  -webkit-animation:bg-green 1s ease-in;
  animation:bg-green 1s ease-in
}

body.is-secure .layout-navbar {

}

#pin {
  width:21em;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:1em;
  border-radius:.3em;
  margin:0 auto;
  color:#0008;
  position:relative
}
html[data-style='dark'] #pin {
  color:#fff8;
}

#pin .name {
  color:#000;
  text-align: center;
}
html[data-style='dark'] #pin .name {
  color: #fff;
}

.dots {
  width:50%;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-justify-content:space-around;
  -ms-flex-pack:distribute;
  justify-content:space-around;
  padding:1em;
  padding-top:2em
}

.dot {
  position:relative;
  background:#0003;
  border-radius:.8em;
  width:.8em;
  height:.8em;
  -webkit-transform:scale3d(0.7,0.7,0.7);
  transform:scale3d(0.7,0.7,0.7)
}
html[data-style='dark'] .dot {
  background:#fff3;
}

html[data-style='light'] .dot.active {
  -webkit-animation:growDot .5s ease;
  animation:growDot .5s ease;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}
html[data-style='dark'] .dot.active {
  -webkit-animation:growDotDark .5s ease;
  animation:growDotDark .5s ease;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}

html[data-style='light'] .dot.wrong,
html[data-style='dark'] .dot.wrong {
  -webkit-animation:wrong .9s ease;
  animation:wrong .9s ease
}

html[data-style='light'] .dot.correct,
html[data-style='dark'] .dot.correct {
  -webkit-animation:correct .9s ease !important;
  animation:correct .9s ease !important;
}

#pin p {
  font-size:.8em
}

.numbers {
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  justify-content:space-around;
  align-content:flex-end;
  margin:1em 0
}

.number {
  position:relative;
  width:2.5em;
  height:2.5em;
  margin:.3em;
  border-radius:2.5em;
  border:2px solid #0000;
  text-align:center;
  line-height:2.5em;
  font-weight:400;
  font-size:1.8em;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transition:all .5s ease;
  transition:all .5s ease
}
html[data-style='dark'] .number {
  border:2px solid #fff0;
}

.number:hover {
  color:#00000080
}
html[data-style='dark'] .number:hover {
  color:#ffffff80
}

.number:hover:before {
  border:2px solid #00000080
}
html[data-style='dark'] .number:hover:before {
  border:2px solid #ffffff80
}

.number:before {
  content:"";
  position:absolute;
  left:-2px;
  width:2.5em;
  height:2.5em;
  border:2px solid #0000001a;
  border-radius:2.5em;
  -webkit-transition:all .5s ease;
  transition:all .5s ease
}
html[data-style='dark'] .number:before {
  border:2px solid #ffffff1a;
}

#pin.is-loading .dot {
  background: #000;
  -webkit-animation: dotPulse 0.8s infinite ease-in-out;
  animation: dotPulse 0.8s infinite ease-in-out;
}
html[data-style='dark'] #pin.is-loading .dot {
  background: #fff;
}

#pin.is-loading .dot:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#pin.is-loading .dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#pin.is-loading .dot:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#pin.is-loading .dot:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#pin.is-loading .number:before,
#pin.is-loading .number:hover:before {
  display: none;
}
#pin.is-loading .number:hover {
  
}
#pin.is-loading .number {
  opacity: 0.5;
}

@-webkit-keyframes dotPulse {
  0%, 100% {
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
            transform: scale3d(0.7, 0.7, 0.7);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes dotPulse {
  0%, 100% {
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
            transform: scale3d(0.7, 0.7, 0.7);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes growDot {
  100% {
    background:#000;
    -webkit-transform:scale3d(0.9,0.9,0.9);
    transform:scale3d(0.9,0.9,0.9)
  }
}

@keyframes growDot {
  100% {
    background:#000;
    -webkit-transform:scale3d(0.9,0.9,0.9);
    transform:scale3d(0.9,0.9,0.9)
  }
}

@-webkit-keyframes growDotDark {
  100% {
    background:#fff;
    -webkit-transform:scale3d(0.9,0.9,0.9);
    transform:scale3d(0.9,0.9,0.9)
  }
}

@keyframes growDotDark {
  100% {
    background:#fff;
    -webkit-transform:scale3d(0.9,0.9,0.9);
    transform:scale3d(0.9,0.9,0.9)
  }
}

@-webkit-keyframes wrong {
  20% {
    background:#dc143c
  }
  
  40% {
    -webkit-transform:translate(-15px,0);
    transform:translate(-15px,0)
  }
  
  60% {
    -webkit-transform:translate(10px,0);
    transform:translate(10px,0)
  }
  
  80% {
    -webkit-transform:translate(-5px,0);
    transform:translate(-5px,0)
  }
}

@keyframes wrong {
  20% {
    background:#dc143c
  }
  
  40% {
    -webkit-transform:translate(-15px,0);
    transform:translate(-15px,0)
  }
  
  60% {
    -webkit-transform:translate(10px,0);
    transform:translate(10px,0)
  }

  80% {
    -webkit-transform:translate(-5px,0);
    transform:translate(-5px,0)
  }
}

@-webkit-keyframes correct {
  20% {
    background:#32cd32
  }

  40% {
    -webkit-transform:translate(0,-15px);
    transform:translate(0,-15px)
  }

  60% {
    -webkit-transform:translate(0,10px);
    transform:translate(0,10px)
  }

  80% {
    -webkit-transform:translate(0,-5px);
    transform:translate(0,-5px)
  }
}

@keyframes correct {
  20% {
    background:#32cd32
  }

  40% {
    -webkit-transform:translate(0,-15px);
    transform:translate(0,-15px)
  }

  60% {
    -webkit-transform:translate(0,10px);
    transform:translate(0,10px)
  }

  80% {
    -webkit-transform:translate(0,-5px);
    transform:translate(0,-5px)
  }
}

@-webkit-keyframes bg-red {
  50% {
    background:#dc143c
  }
}

@keyframes bg-red {
  50% {
    background:#dc143c
  }
}

@-webkit-keyframes bg-green {
  50% {
    background:#32cd32
  }
}

@keyframes bg-green {
  50% {
    background:#32cd32
  }
}

.social-icons-row {
  margin-top: 15px;
}