.numpad-holder {
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 769px) {
    .numpad-holder {
        max-width: 60%;
    }

    .numpad-display {
        max-width: 80%;
    }
}

@media only screen and (max-width: 768px) {
    .numpad-collapse {
        display: block !important;
    }
}

.show-keypad {
    position: absolute;
    bottom: 0;
    right: .5rem;
}

.numpad-input {
    border-bottom: 3px solid #445060;
    display: block;
    text-align: center;
    font-size: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
}

.numpad-input:before {
    content: "•";
    color: #445060;
    transition: color .2s, font-size .1s;
    display: block;
}

.numpad-item {
    border: 2px solid #445060;
    border-radius: 6px;
    display: block;
    font-size: 1.8em;
    margin-bottom: .6em;
    text-align: center;
    padding: .2em;
    cursor: pointer;
}

.row.numpad-display.length-5 {
    --bs-gutter-x: 1rem;
}

.row.numpad-display.length-6 {
    --bs-gutter-x: 0.5rem;
}

.numpad-display.length-5 .col:nth-child(5) {
    display: block !important;
}

.numpad-display.length-6 .col:nth-child(5),
.numpad-display.length-6 .col:nth-child(6) {
    display: block !important;
}

.numpad-display.active-1 .col:nth-child(1) .numpad-input:before,
.numpad-display.active-2 .col:nth-child(-n+2) .numpad-input:before,
.numpad-display.active-3 .col:nth-child(-n+3) .numpad-input:before,
.numpad-display.active-4 .col:nth-child(-n+4) .numpad-input:before,
.numpad-display.active-5 .col:nth-child(-n+5) .numpad-input:before,
.numpad-display.active-6 .col:nth-child(-n+6) .numpad-input:before {
    color: #fff;
    font-size: 1.5em;
}

@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, 18px, 0);
    }
}

@keyframes shake {
  0% {
    transform: translateX(0px);
    timing-function: ease-in;
  }
  37% {
    transform: translateX(5px);
    timing-function: ease-out;
  }
  55% {
    transform: translateX(-5px);
    timing-function: ease-in;
  }
  73% {
    transform: translateX(4px);
    timing-function: ease-out;
  }
  82% {
    transform: translateX(-4px);
    timing-function: ease-in;
  }
  91% {
    transform: translateX(2px);
    timing-function: ease-out;
  }
  96% {
    transform: translateX(-2px);
    timing-function: ease-in;
  }
  100% {
    transform: translateX(0px);
    timing-function: ease-in;
  }
}

@keyframes errorColor {
  from {
    color: red;
  }
  to {
    color: #445060;
  }
}

.numpad-display.loading .numpad-input:before {
    color: #fff;
    font-size: 1.5em;
    animation: bounce 0.3s;
    animation-delay: var(--animation-delay);
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
}

.numpad-display.error {
    animation: shake .5s;
}

.numpad-display.error .numpad-input:before {
    animation: errorColor 2s ease-in-out;
}