@keyframes bounce {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-10%)
  }
}

@keyframes preferences-loader-animation-svg-default {
  0% {
    transform:rotateZ(0deg)
  }
  100% {
    transform:rotateZ(360deg)
  }
}

@keyframes preferences-loader-animation-circle-default {
  0%,25% {
    stroke-dashoffset:56;
    transform:rotate(0)
  }
  50%,75% {
    stroke-dashoffset:15;
    transform:rotate(45deg)
  }
  100% {
    stroke-dashoffset:56;
    transform:rotate(360deg)
  }
}

.sf-hidden {
  display:none!important
}

input:-webkit-autofill,
input:autofill {
  background:transparent!important;
  transition:background-color 50000s ease-in-out 0s
}

#btn_resend_code {
  pointer-events:auto!important
}

obf,
.obf {
  position:absolute;
  width:0!important;
  height:0!important;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0!important;
  padding:0!important;
  margin:0!important;
  font-size:0!important;
  line-height:0!important;
  gap:0!important
}

.gap-1\.5,
.gap-2,
.gap-4 {
  gap:0!important
}

#modey {
  width:500px;
  margin:auto
}

#vidop {
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#modex {
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  flex-direction:column;
  flex-shrink:0;
  border-style:solid;
  border-width:0;
  position:relative;
  z-index:101;
  min-height:0;
  min-width:0;
  width:500px;
  padding-left:20px;
  padding-right:20px;
  left:0;
  margin:auto
}

@media (max-width:768px) {
	
	#vidop {
 width:100%!important;
 display:flex;
 justify-content:center;
 height: 100%;
}


  #modey {
    width:90%;
    margin:auto
  }
  #modex {
    width:90%;
    margin:auto
  }
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif
}

.pin {
  border-radius:30px;
  color:#0b051d
}

.title {
  font-size:40px;
  font-weight:700;
  margin-top:18px;
  line-height:45px
}

.desc {
  margin-top:12px;
  color:#ddd;
  font-size:21px;
  line-height:30px
}

.dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 0 40px;
}

.dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#bebebe;
  transition:.2s
}

.dot.active {
  background:#000;
  transform:scale(1.2)
}

.numpad {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 10px;
    width: 320px;
}

.key {
  width:60px;
  height:60px;
  margin:auto;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:29px;
  cursor:pointer;
  transition:.15s;
  user-select:none;
  background:#f2f2f2
}

.key:hover {
  background:#e0dfdf
}

.key:active {
  transform:scale(.92)
}

.back svg {
  width:36px;
  height:36px
}

@media (max-width:500px) {
  .pin {
    margin-top:20px
  }
  .title {
    font-size:34px
  }
  .desc {
    font-size:18px
  }
  .key {
    width:70px;
    height:70px;
    font-size:36px
  }
}