.simple-keyboard {
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.hg-button.hg-button-special,
.simple-keyboard .hg-button.hg-standardBtn {
    min-width: 40px;
    min-height: 40px
}

.hg-button.hg-button-space {
    width: 60%
}

.hg-button.hg-button-bksp {
    min-width: 80px
}

.hg-button.hg-button-enter {
    min-width: 80px
}

.simple-keyboard .hg-row {
    display: flex
}

.simple-keyboard .hg-row:not(:last-child) {
    margin-bottom: 5px
}

.simple-keyboard .hg-row .hg-button:not(:last-child) {
    margin-right: 5px
}

.simple-keyboard .hg-button {
    display: inline-block;
    flex-grow: 1;
    cursor: pointer
}

.hg-theme-default {
    background-color: #ececec;
    padding: 5px;
    border-radius: 5px
}

.hg-theme-default .hg-button {
    box-shadow: 0 0 1px 1px #b4b4b4, 0 2px 2px hsla(0, 0%, 70.2%, .8);
    border-radius: 3px;
    height: 40px;
    background: #f9f9f9
}

.hg-theme-default .hg-button.hg-button-special {
    background: #e2e2e2
}

.hg-theme-default .hg-button:active {
    background: #d5d5d5;
    transform: translateY(1px);
    box-shadow: none
}

.hg-theme-default.hg-layout-numeric .hg-button {
    width: 33.3%;
    height: 60px
}

.hg-theme-default.hg-layout-custom .hg-button {
    height: 25px;
    width: 25px
}

.hg-theme-default.hg-layout-custom.hg-theme-default .hg-button:active {
    transform: scale(.95)
}

.hg-theme-default.hg-kiosk-mode .hg-button.hg-standardBtn {
    width: 165px
}

.hg-theme-ios {
    background: hsla(0, 0%, 82%, .4);
    font-size: 1em
}

.hg-theme-ios .hg-row:not(:last-child) {
    margin-bottom: .1em
}

.hg-theme-ios .hg-row .hg-button:not(:last-child) {
    margin-right: .1em
}

.hg-theme-ios .hg-button {
    height: 3.5em;
    width: 3.5em;
    background: #fff;
    border-radius: .3em;
    box-shadow: 0 .1em 0 0 #aaa, 0 .1em 0 .1em #666;
    font-weight: 400;
    font-size: 1em
}

.hg-theme-ios .hg-button.hg-button-bksp {
    width: 3.5em;
    background: #a9b1bd
}

.hg-theme-ios .hg-button.hg-button-bksp>span {
    color: #fff
}

.hg-theme-ios .hg-button.hg-button-space {
    width: 15em
}

.hg-theme-ios .hg-button.hg-button-special {
    background: #a9b1bd;
    color: #fff
}

.hg-theme-ios .hg-button.hg-standardBtn {
    width: 2.3em
}

.hg-theme-ios .hg-button.hg-activeButton {
    background: #a9b1bd;
    color: #fff
}

.hg-theme-ios .hg-button:active {
    transform: translateY(.1em);
    box-shadow: none
}

.hg-theme-android {
    background-color: #212329;
    padding: .2em;
    border-radius: .2em
}

.hg-theme-android .hg-row:not(:last-child) {
    margin-bottom: .2em
}

.hg-theme-android .hg-row .hg-button:not(:last-child) {
    margin-right: .2em
}

.hg-theme-android .hg-button {
    height: 3em;
    background: #555963;
    color: #e6e6e6;
    box-shadow: 0 .1em 0 .1em #000;
    border-radius: .2em
}

.hg-theme-android .hg-button.hg-button-bksp,
.hg-theme-android .hg-button.hg-button-enter {
    background: #44474f
}

.hg-theme-android .hg-button.hg-standardBtn {
    width: 2.5em
}

.hg-theme-android .hg-button:active {
    background: #3f4147
}

.hg-theme-android .hg-button.hg-activeButton {
    background: #777c88
}

.hg-theme-dark {
    background-color: #464646;
    padding: 5px;
    border-radius: 5px
}

.hg-theme-dark .hg-button {
    box-shadow: 0 0 1px 1px #141414, 0 2px 2px rgba(9, 9, 9, .8);
    border-radius: 3px;
    height: 40px;
    background: #292929;
    color: #fff
}

.hg-theme-dark .hg-button.hg-button-special {
    background: #222
}

.hg-theme-dark .hg-button:active {
    background: #353535;
    transform: translateY(1px);
    box-shadow: none
}