:root
{
    --key_size:10vh;
    --min_key_size:10vw;    
}

@media (orientation: portrait) {
    .hg-theme-dark {
        :root
        {
            --key_size:15vw!important;
        }
        
    }

    .virtualKeyboard {
        left:0!important;
    }
  }

.virtualKeyboard {
    /* height:0.3vh; */
    /* width: 1.8vw; */
    display: block;
    bottom: 0rem;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: calc(50% - ( var(--key_size) * 5));
    transition: 0.4s ease-out;
    max-width: 100vw;
    max-height:30vh;
}

.virtualKeyboard .row {
    display: flex;
    flex-flow: row;
    flex-basis: fit-content;
    align-items: center;
    align-content: center;
    align-self: center;
    justify-content:center;
}

.virtualKeyboard .row .key {
    background: radial-gradient(#404040b8, #404040);
    border: 1px solid black;
    color: #a7a7a7;
    display: block;
    width: var(--key_size);
    height:var(--key_size);
    text-align: center;
    /* text-anchor: unset; */
    line-height: var(--key_size);
    /* flex: 0 0 2rem; */
    border-radius: 4px;
    align-self: unset;
    transition: 0.4s ease-out;
    cursor:pointer;
    max-height:10vh;
    max-width:10vw;
    font-size: calc(var(--key_size) * 0.55);
    user-select: none;
}

.disabled
{
    color: hsla(0, 0%, 65%, 0.307)!important;
}

.virtualKeyboard .row .key:hover 
{
    background: radial-gradient(#765e24, #404040de);
}

.virtualKeyboard .row .pressed {
    background: radial-gradient(#363636, #313131d9);
}