/*#region Scanner NumPad*/
#id-scanner-numpad {
    display: none;
}

#id-scanner-numpad-lcd {
    /*border-color: #3f5668a1;*/
    /*border-style: solid;*/
    /*border-width: 0.5px;*/
    border-bottom: solid;
    /*border-bottom-width: 2px;*/
    padding: 10px;
    /*background-color: #77889900;*/
    height: 20px;
}

#id-number-input {
    /*border-bottom-style: double;*/
    /*border-bottom-width: 0.5px;*/
    /*border-color: brown;*/
    height: 29px;
}

/* NumPad START */
family: 'Open Sans', sans serif; font-weight: 300; -webkit-tap-highlight-color: transparent;
}

.rotate {
    display: none;
    color: #bdd73c;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    width: 400px;
    height: 50px;
    margin-left: -200px;
    margin-top: -25px;
}

.keypadwrapper {
    text-align: center;
    width: 100%;
    /*color: #375a70;*/
    color: #ffffff;
}

.inputwrapper h2 {
    /*color: #375a70;*/
    /*font-family: Ubuntu, sans-serif;*/
    /*font-weight: normal;*/
    color: #f7f7f7;
    font-family: monospace;
    letter-spacing: 5px;
    font-weight: 600;
}

.keypadwrapper .inputwrapper {
    margin: 1em;
    line-height: 0.61em;
    vertical-align: middle;
    /*margin-top: -40px;*/
    margin-top: -5px;
    font-size: xx-large;
}

.keypadwrapper .numberinput {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    /*border: 1px solid #375a70;*/
    border: 2px solid #ffffff;
    margin-right: 2%;
    margin-left: 2%;
    font-size: 2em;
}

.keypadwrapper .keypad .numberline {
    width: 90%;
}

.keypadwrapper .keypad #linefour {
    position: absolute;
    /*bottom: 15%;*/
    top: calc(300px + (3 * 12%));
}

.keypadwrapper .keypad #linethree {
    position: absolute;
    /*bottom: 25%;*/
    top: calc(300px + (2 * 12%));
}

.keypadwrapper .keypad #linetwo {
    position: absolute;
    /*bottom: 35%;*/
    top: calc(300px + (1 * 12%));
}

.keypadwrapper .keypad #lineone {
    position: absolute;
    /*bottom: 45%;*/
    top: 300px;
}

.keypadwrapper .keypad .digits {
    display: inline-block;
    margin: 0 8%;
}

    .keypadwrapper .keypad .digits div {
        width: 4em;
        height: 4em;
        text-align: center;
        border: 1px solid #778899;
        border-radius: 70px;
        display: inline-block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .keypadwrapper .keypad .digits div span:nth-child(1) {
            display: block;
            font-size: 1.8em;
            height: 1em;
            margin-top: 0.2em;
        }

        .keypadwrapper .keypad .digits div span:nth-child(2) {
            font-size: 0.6em;
        }

        .keypadwrapper .keypad .digits div:hover {
            background-color: rgba(63, 86, 104, 0.15);
            color: #fff;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

.nocircle {
    width: auto !important;
    border: none !important;
    height: auto !important;
}

@media all and (max-width: 470px) {
    .digits {
        margin: 0 5% !important;
    }
}

@media all and (max-width: 350px) {
    .digits {
        margin: 0 2% !important;
    }
}

@media all and (max-height: 470px) {
    #linefour {
        bottom: 2% !important;
    }

    #linethree {
        bottom: 23% !important;
    }

    #linetwo {
        bottom: 43% !important;
    }

    #lineone {
        bottom: 63% !important;
    }
}

/* NumPad END */