@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    animation: bounceOutUp 1s;
}


@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: 5;
}

.mm-number {
    padding: 0px;
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    outline: none;
}

.mm-number input[type="number"]{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    border-radius: 0px;

}

.mm-number -webkit-autofill,
.mm-number -webkit-autofill:hover,
.mm-number -webkit-autofill:focus,
.mm-number -webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.mm-number input[type="number"]::-webkit-outer-spin-button,
.mm-number input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-number input[type="number"] {
    -moz-appearance: textfield;
}

.mm-number-container {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    height: inherit;
}

.mm-number-input {
    width: 500px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.mm-number-input-container {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    height: inherit;
}

.mm-number-input-item {
    width: 40px;
    height: 40px;
    margin: 10px 2px;
}

.mm-number-input-item input {
    width: 100%;
    height: inherit;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    border: 1px solid rgba(20,20,20,0.1);
}

.mm-number-input-submit {
    text-align: center;
    width: 80px;
    height: 40px;
    background: #f1f1f1;
    color: #333;
    border: none;
    font-size: 14px;
    font-weight: 300;
}

.mm-number-input-submit:focus, .mm-number-input-submit:hover {
    background: #333;
    color: #f1f1f1;
    cursor: pointer;
}