/* KEYBOARD KEYS CONTAINER CSS 2.0 "GRID" TEMPLATE AREAS */

/* 
UNUSED:
"escKey f1Key f2Key f3Key f4Key f5Key f6Key f7Key f8Key f9Key f10Key f11Key f12Key f13Key f14Key" 
*/





#keyboardKeysContainer {
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    gap: .5vmin .5vmin;
    grid-auto-flow: row;
    grid-template-areas:


        "tabKey tabKey KeyQ wKey eKey rKey tKey yKey uKey iKey oKey pKey bracketLeftKey bracketRightKey backslashKey"

        "capsLockKey capsLockKey KeyA sKey dKey fKey gKey hKey jKey kKey lKey semicolonKey singleQuoteKey returnKey returnKey"

        "shiftKeyLeft shiftKeyLeft zKey xKey cKey vKey bKey nKey mKey commaKey periodKey forwardSlashKey shiftKeyRight shiftKeyRight ."

        ". . . spacebarKey spacebarKey spacebarKey spacebarKey spacebarKey spacebarKey spacebarKey spacebarKey . . . .";

    width: 100%;
    height: 100%;
    
    align-content: end;
}

#keyboardKeysContainer button.hidden{
    visibility: hidden;
}


#keyboardKeysContainer button.functionRow {
    background-color: darkGray;
}




#keyboardContainer .keyboardkey{
    overflow: hidden;
}



#keyboardKeysContainer button:hover{
    background-color: darkGray;
}

#keyboardKeysContainer button:active,
#keyboardKeysContainer button.active {
    background-color: #333;
    color: silver;
}



#keyboardKeysContainer *:after {
    /*  content:attr(class);*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
}



#keyboardContainer {

    position: absolute;
    bottom: -110px;
    left: 0;
    z-index: 9999;
    background-color: black;



    aspect-ratio: 23 / 9;

    /*border:1px solid red;*/

    /*background-color:#88888869;*/
    background-color: transparent;
    border-radius: 1vmin;


    /*border: 3px solid #999;*/
    min-width: 900px;
    width: 920px;
    z-index: 200;


    padding-left: 10px;

}




#keyboardContainer {

    text-shadow: 0.1vh 0.1vh #fff;

    text-align: center;
    vertical-align: middle;

}

button {
    cursor: pointer;

    -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 */

}


#keyboardKeysContainer button {

    border: 2px solid #333;
    position: relative;
    border-radius: 3pt;
    /*border-radius: .8vmin;*/
    /*box-shadow: .2vmin .2vmin;*/

    background-color: rgb(93, 91, 91);
    opacity: 0.4;
    color:rgb(247, 242, 242);
    
    cursor: pointer;


    -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 */
}






button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: #333;
    font-family: 'DDINExpRegular', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}



.endButton {
    background-color: rgb(134, 37, 26) !important;
    box-shadow: #333 !important;
    box-shadow: 1pt 1pt 0px #333 !important;
color:rgb(210, 115, 115) !important;
    opacity: 1.0 !important;

}

.endButton b{

}

.drawingButton {
    background-color: rgb(130, 244, 29) !important;
    box-shadow: 1pt 1pt 0px #333 !important;
    opacity: 1.0 !important;
    color:green !important;
}

.enabledButton{
    opacity: 1.0 !important;
}


.operationButton {
    background-color: rgb(169, 29, 184) !important;
    color: rgb(226, 86, 241) !important;
    box-shadow: 1pt 1pt 0px #333 !important;
}

.selectionButton{
    background-color: rgb(91, 15, 100) !important;
    color: white;
    box-shadow: 1pt 1pt 0px #333 !important;
    opacity: 1.0 !important;
    color: rgb(186, 30, 203) !important;

}

/* SPECIFIC KEYBOARD KEYS */

.spacebarKey {
    grid-area: spacebarKey;
}

.tabKey {
    grid-area: tabKey;
    width: 75%;
}

.shiftKeyLeft {
    grid-area: shiftKeyLeft;
    width: 115%;
}

.forwardSlashKey {
    grid-area: forwardSlashKey;
}

.capsLockKey {
    grid-area: capsLockKey;
    width: 85%;
}

.KeyA {
    grid-area: KeyA;
}

.shiftKeyRight {
    grid-area: shiftKeyRight;
    width: 130%;
}

.KeyQ {
    grid-area: KeyQ;
}

.wKey {
    grid-area: wKey;
}

.eKey {
    grid-area: eKey;
}

.rKey {
    grid-area: rKey;
}

.tKey {
    grid-area: tKey;
}

.yKey {
    grid-area: yKey;
}

.uKey {
    grid-area: uKey;
}

.iKey {
    grid-area: iKey;
}

.oKey {
    grid-area: oKey;
}

.pKey {
    grid-area: pKey;
}

.bracketLeftKey {
    grid-area: bracketLeftKey;
}

.bracketRightKey {
    grid-area: bracketRightKey;
}

.backslashKey {
    grid-area: backslashKey;
    width: 140%;
}

.sKey {
    grid-area: sKey;
}

.dKey {
    grid-area: dKey;
}

.fKey {
    grid-area: fKey;
}

.gKey {
    grid-area: gKey;
}

.hKey {
    grid-area: hKey;
}

.jKey {
    grid-area: jKey;
}

.kKey {
    grid-area: kKey;
}

.lKey {
    grid-area: lKey;
}

.semicolonKey {
    grid-area: semicolonKey;
}

.singleQuoteKey {
    grid-area: singleQuoteKey;
}

.returnKey {
    grid-area: returnKey;
    width: 105%;
}

.zKey {
    grid-area: zKey;
}

.xKey {
    grid-area: xKey;
}

.cKey {
    grid-area: cKey;
}

.vKey {
    grid-area: vKey;
}

.bKey {
    grid-area: bKey;
}

.nKey {
    grid-area: nKey;
}

.mKey {
    grid-area: mKey;
}

.commKeyA {
    grid-area: commKeyA;
}

.periodKey {
    grid-area: periodKey;
}

.backquoteKey {
    grid-area: backquoteKey;
}

.Digit1 {
    grid-area: Digit1;
}

.twoKey {
    grid-area: twoKey;
}

.threeKey {
    grid-area: threeKey;
}

.fourKey {
    grid-area: fourKey;
}

.fiveKey {
    grid-area: fiveKey;
}

.sixKey {
    grid-area: sixKey;
}

.sevenKey {
    grid-area: sevenKey;
}

.eightKey {
    grid-area: eightKey;
}

.nineKey {
    grid-area: nineKey;
}

.zeroKey {
    grid-area: zeroKey;
}

.minusKey {
    grid-area: minusKey;
}

.equalsKey {
    grid-area: equalsKey;
}

.deleteKey {
    grid-area: deleteKey;
    width: 100% !important;
}


#KeyQ {
    transform: translate(-45%, 0%)
}

#KeyW {
    transform: translate(-45%, 0%)
}

#KeyE {
    transform: translate(-45%, 0%)
}

#KeyR {
    transform: translate(-45%, 0%)
}

#KeyT {
    transform: translate(-45%, 0%)
}

#KeyY {
    transform: translate(-45%, 0%)
}

#KeyU {
    transform: translate(-45%, 0%)
}

#KeyI {
    transform: translate(-45%, 0%)
}

#KeyO {
    transform: translate(-45%, 0%)
}

#KeyP {
    transform: translate(-45%, 0%)
}

#BracketLeft {
    transform: translate(-45%, 0%)
}

#BracketRight {
    transform: translate(-45%, 0%)
}

#Backslash {
    transform: translate(-31%, 0%)
}

/* For presentation only, no need to copy the code below */




.keyboardkey {
    position: relative;
    z-index: 1;
    content: attr(data-key);

}

.keyboardkey::after {
    text-transform: capitalize;
    font-weight: bold;
    content: attr(data-key);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-0%, -0%);
    opacity: 0;
    visibility: hidden;
    background-color: #000;
    color: #fff;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: 0px;
    font-size: 20pt;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 2px;
    z-index: 2;
    transition: opacity 0.2s ease, visibility 0.5s ease;
}


.keyboardkey:hover::after,
.keyboardkey.active::after {
    opacity: 1;
    visibility: visible;
}