.mgNumpad {
    width: 280px;
    margin: 0 auto 40px auto;
    text-align: center;
}
.mgNumpad a {
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #0091DC;
    background-color: #F9F9F9;
    display: inline-block;
    vertical-align: top;
    width: 65px;
    height: 21px;
    margin: 10px;
    padding: 22px 0;
    line-height: 20px;
    font-size: 20px;
    color: #000;

    /* disable text selection highlighting */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.mgNumpad a:hover { text-decoration: none; }

.mgNumpad a.blink {
    background-color: #0091DC;
    transition: background-color .5s;
}

.mgNumpad a.reset,
.mgNumpad a.delete {
    position: relative;
}

.mgNumpad a.reset hr,
.mgNumpad a.delete hr {
    border: none;
    margin: 0;
    position: absolute;
    height: 2px;
    background-color: #000;
}

.mgNumpad a.reset hr:first-child,
.mgNumpad a.reset hr:last-child {
    top: 31px;
    left: 24px;
    width: 17px;
}

.mgNumpad a.reset hr:first-child { transform: rotate(-45deg); }

.mgNumpad a.reset hr:last-child { transform: rotate(45deg); }

.mgNumpad a.delete hr:first-child,
.mgNumpad a.delete hr:last-child {
    left: 27px;
    width: 10px;
}

.mgNumpad a.delete hr:first-child {
    top: 29px;
    transform: rotate(-45deg);
}

.mgNumpad a.delete hr:last-child {
    top: 35px;
    transform: rotate(45deg);
}

.mgNumpad .code { padding: 40px 20px 20px 20px; }

.mgNumpad .code span {
    margin: 7px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #0091DC;
    border-radius: 50%;
}

.mgNumpad .code span.fill { background-color: #0091DC; }