.keyboard {
    display: block;
    position: relative;
    padding: 0px;
}

.keyboard .key {
    color: black;
    display: inline-block;
    border: thin solid #DDD;
    background: white;
    height: 150px;

    cursor: pointer;
    position: relative;
    z-index: 10;
}

.keyboard .key.active {
    background: #dc3545;
}

.keyboard .key .key-text {
    height: auto;
    line-height: normal;
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: black;
}

.keyboard .key.active .key-text {
    color: white;
}

.keyboard .key.sharp {
    z-index: 12;
    position: absolute;
    top: 0px;

    width: 4%;
    background: #444;
    height: 80px;
}

.keyboard .key.sharp .key-text {
    color: white;
}


.keyboard .key.sharp.active {
    background: #dc3545;
    color: white;
}


.noselect {
  -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 */
}