.kkey:hover {
    opacity: 1;
}
.kkey2 {
    cursor: default;
    position: relative;
    display: inline-block;
    color: #777;
    /* font-size: 18px; */
    text-decoration: none;
    text-align: center;
    /* width: 34px; */
    /* height: 31px; */
    /* margin: 2px; */
    background: #eff0f2;
    border-radius: 2px;
    border-top: 1px solid #f5f5f5;
    border-top: 1px solid #6c6594;
    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #939393, 0 3px 0 #9d9d9d, 0 2px 3px #3a3a3a;
    color: #fff0ff;
    background: #523737;
    border-top: 0px solid #9a8080;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 #9b7e7e, 0 3px 0 #9c7a7a, 0 2px 3px #291b1b;
    padding: 3px 7px 2px 8px;
    display: inline-block;
    vertical-align: middle;
    filter: hue-rotate(308deg);
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 4px;
    color: #c600c6;
    background: rgba(255, 255, 255, 0);
    border-top: 0px solid #000000;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 rgb(154, 154, 154), 0 3px 0 rgba(148, 148, 148, 0.8), 0 2px 3px #291b1b;
}
.kkey2 {
    cursor: default;
    position: relative;
    display: inline-block;
    color: #777;
    /* font-size: 18px; */
    text-decoration: none;
    text-align: center;
    /* width: 34px; */
    /* height: 31px; */
    /* margin: 2px; */
    background: #eff0f2;
    border-radius: 2px;
    border-top: 1px solid #f5f5f5;
    border-top: 1px solid #6c6594;
    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #939393, 0 3px 0 #9d9d9d, 0 2px 3px #3a3a3a;
    color: #ffcdff;
    background: rgba(0, 0, 0, 0.7);
    border-top: 0px solid #000000;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 rgb(0, 0, 0), 0 3px 0 rgba(0, 0, 0, 0.8), 0 2px 3px #291b1b;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 rgb(144, 74, 142), 0 3px 0 rgb(178, 101, 176), 0 2px 3px #291b1b;
    padding: 3px 7px 2px 8px;
    display: inline-block;
    vertical-align: middle;
    /* filter: hue-rotate(308deg); */
    letter-spacing: 1px;
    /* opacity: 0.9; */
    margin-bottom: 4px;
}
.kkey {
    cursor: default;
    position: relative;
    display: inline-block;
    color: #777;
    /* font-size: 18px; */
    text-decoration: none;
    text-align: center;
    /* width: 34px; */
    /* height: 31px; */
    /* margin: 2px; */
    background: #eff0f2;
    border-radius: 2px;
    border-top: 1px solid #f5f5f5;
    border-top: 1px solid #6c6594;
    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #939393, 0 3px 0 #9d9d9d, 0 2px 3px #3a3a3a;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-top: 0px solid #000000;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 rgb(0, 0, 0), 0 3px 0 rgba(0, 0, 0, 0.8), 0 2px 3px #291b1b;
    box-shadow: inset 0 0 25px #291b1b00, 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 rgba(255, 255, 255, 0.35), 0 2px 3px rgba(255, 255, 255, 0.25);
    padding: 3px 7px 2px 8px;
    display: inline-block;
    vertical-align: middle;
    /* filter: hue-rotate(308deg); */
    letter-spacing: 1px;
    /* opacity: 0.9; */
    margin-bottom: 4px;
}
.kkey span {
    display: block;
    /* margin: 7px 0 0; */
    text-transform: uppercase;
    /* font-size: 19px; */
    /* padding-left: 2px;*/
}
.kkey-space {
    padding: 3px 17px 2px 20px;
}