/* Based on design by James Holmes - https://codepen.io/32bitkid/pen/LKZzMR */
.keyboard {
  position: fixed; bottom: 0px; display: none;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;
  font-size: 0; border-radius: 4px; border: 13px solid #777; border-top-color: #666; border-bottom-color: #888; outline: 3px solid rgba(0, 0, 0, 0.2); outline-offset: -1px;
  box-shadow: inset 0 1rem 1rem rgba(0, 0, 0, 0.5), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.55); background-image: radial-gradient(#111, #222); padding: 0.25rem; opacity: 0.7;
}
.keyboardHeader {
  cursor: move; z-index: 10; background-color: #FFFFFF; height: 24px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; width: 760px; padding-top: 1px;
  margin-bottom: 2px; font-size: 20px; justify-content: center;
}
.row { height: 40px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; width: 760px; padding-top: 1px; margin-bottom: 2px; }

kbd {
  border-radius: 3px; box-sizing: border-box; color: rgba(0, 0, 0, 0.75); display: inline-block; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 400; line-height: 31.2px;
  position: relative; text-align: center; vertical-align: middle; width: 40px; height: 40px; border: 3px solid transparent; border-top: 2px solid transparent; border-bottom: 6px solid transparent;
  background-color: #e9e8e6; border-color: #c3c0bb; border-top-color: #eeedeb; border-bottom-color: #a6a29a; box-shadow: 0 -0.125em 0 -0.063em #a6a29a, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
  -webkit-transition: -webkit-transform 100ms; transition: -webkit-transform 100ms; transition: transform 100ms; transition: transform 100ms, -webkit-transform 100ms; outline: 0;
}
kbd::before {
  content: ''; position: absolute; top: 0px; left: -1px; bottom: -1px; right: -1px; border-radius: 4px; border-left: 1px solid transparent; border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
kbd::before {
  border-left-color: #b2afa8; border-right-color: #b2afa8; border-bottom-color: #959187; box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
  background-image: -webkit-gradient(linear, left top, right top, from(#e9e8e6), color-stop(5%, #c9c9c9), color-stop(40%, transparent), color-stop(60%, transparent), color-stop(95%, #c9c9c9),
    to(#e9e8e6)); background-image: linear-gradient(to right, #e9e8e6, #c9c9c9 5%, transparent 40%, transparent 60%, #c9c9c9 95%, #e9e8e6);
}
kbd:active, kbd.pressed { -webkit-transform: scale(0.96, 0.96) translate(0, 3px); transform: scale(0.96, 0.96) translate(0, 3px); }
kbd[data-01]::after { position: relative; z-index: 1; content: attr(data-01); }
kbd[data-02]::after { white-space: pre; content: attr(data-02) "\a" attr(data-01); line-height: 0.95rem; font-size: 12px; position: absolute; top: 0; left: 0; right: 0; text-align: center; }
kbd[data-02].d2flip::after { content: attr(data-01) "\a" attr(data-02); }
kbd[data-ak].akflip::after { content: attr(data-ak); }
kbd[data-ck].ckflip::after { content: attr(data-ck); }
kbd[data-mk].mkflip::after { content: attr(data-mk); }
kbd[data-sk].skflip::after { content: attr(data-sk); }
kbd.margin { margin-left: 24px; }
kbd[data-01=tab], kbd[data-01=enter], kbd[data-01=caps], kbd[data-01=backspace], kbd[data-01=lshift], kbd[data-01=rshift], kbd[data-01=lctrl], kbd[data-01=rctrl], kbd[data-01=lalt],
  kbd[data-01=ralt], kbd[data-01=lwin], kbd[data-01=rwin], kbd[data-01=rctx] {
  background-color: #7f8384; border-color: #575a5a; border-top-color: #848889; border-bottom-color: #393b3b; box-shadow: 0 -0.125em 0 -0.063em #393b3b, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
  text-transform: capitalize;
}
kbd[data-01=tab]:after, kbd[data-01=enter]:after, kbd[data-01=caps]:after, kbd[data-01=backspace]:after, kbd[data-01=lshift]:after, kbd[data-01=rshift]:after, kbd[data-01=lctrl]:after,
  kbd[data-01=rctrl]:after, kbd[data-01=lalt]:after, kbd[data-01=ralt]:after, kbd[data-01=lwin]:after, kbd[data-01=rwin]:after, kbd[data-01=rctx]:after {
  font-size: 0.725em; top: 0; left: 0; right: 0; line-height: 31.2px; position: absolute; }
kbd[data-01=tab]::before, kbd[data-01=enter]::before, kbd[data-01=caps]::before, kbd[data-01=backspace]::before, kbd[data-01=lshift]::before, kbd[data-01=rshift]::before, kbd[data-01=lctrl]::before,
  kbd[data-01=rctrl]::before, kbd[data-01=lalt]::before, kbd[data-01=ralt]::before, kbd[data-01=lwin]::before, kbd[data-01=rwin]::before, kbd[data-01=rctx]::before {
  border-left-color: #454848; border-right-color: #454848; border-bottom-color: #272929; box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
  background-image: -webkit-gradient(linear, left top, right top, from(#7f8384), color-stop(5%, #636363), color-stop(40%, transparent), color-stop(60%, transparent), color-stop(95%, #636363),
    to(#7f8384)); background-image: linear-gradient(to right, #7f8384, #636363 5%, transparent 40%, transparent 60%, #636363 95%, #7f8384);
}
kbd[data-01=lalt]::after, kbd[data-01=ralt]::after { content: 'Alt'; }
kbd[data-01=lctrl]::after, kbd[data-01=rctrl]::after { content: 'Ctrl'; }
kbd[data-01=lwin]::after, kbd[data-01=rwin]::after { content: '\2756'; font-size: 1rem; }
kbd[data-01=lshift]::after, kbd[data-01=rshift]::after { content: 'Shift\21d1'; }
kbd[data-01=space]::after { content: none; }
kbd[data-01=rctx]::after { content: '\2630'; }
kbd[data-01=backspace]::after { content: '\2190'; text-align: left; padding-left: 10px; }
kbd[data-01=tab]::after { content: 'Tab\21b9'; }
kbd[data-01=caps]::after { content: 'Caps Lock'; }
kbd[data-01=enter]::after { content: 'Enter\21b5'; }
kbd[data-01=SrLo]::after { content: 'Scroll\A Lock'; }
kbd[data-01=pause]::after { content: 'Pause\A Break'; }
kbd[data-01=PgUp]::after { content: 'Page\A Up'; }
kbd[data-01=PgDn]::after { content: 'Page\A Dn'; }
kbd[data-01=prt]::after { content: 'Prt\A Scr'; }
kbd[data-01=kbd]::after { content: '\2328\A Toggle'; }
kbd[data-01=zz1]::after { content: '\2263\A Menu'; }
kbd[data-ak=zz1].akflip::after { content: '\21bb\A Reboot'; font-size: 10px; }
kbd[data-ck=zz1].ckflip::after { content: '\2327\A Close'; }
kbd[data-mk=zz1].mkflip::after { content: 'dev\A key'; }
kbd[data-sk=zz1].skflip::after { content: '\2047\A Help'; }
kbd[data-01=zz2]::after { content: none; }
kbd[data-ak=zz2].akflip::after { content: none; }
kbd[data-ck=zz2].ckflip::after { content: none; }
kbd[data-mk=zz2].mkflip::after { content: none; }
kbd[data-sk=zz2].skflip::after { content: none; }
kbd[data-01=tab], kbd[data-01="\\"] { width: 60px; }
kbd[data-01=caps] { width: 70px; }
kbd[data-01=backspace] { width: 80px; }
kbd[data-01=enter] { width: 90px; }
kbd[data-01=lshift] { width: 90px; }
kbd[data-01=rshift] { width: 110px; }
kbd[data-01=lctrl], kbd[data-01=rctrl], kbd[data-01=lalt], kbd[data-01=ralt], kbd[data-01=lwin], kbd[data-01=rwin], kbd[data-01=rctx] { width: 50px; }
kbd[data-01=space] { width: 250px; }
kbd[data-01=esc], kbd[data-01=f1], kbd[data-01=f2], kbd[data-01=f3], kbd[data-01=f4], kbd[data-01=f5], kbd[data-01=f6], kbd[data-01=f7], kbd[data-01=f8], kbd[data-01=f9],
 kbd[data-01=f10], kbd[data-01=f11], kbd[data-01=f12], kbd[data-01=ins], kbd[data-01=home], kbd[data-01=del], kbd[data-01=end], kbd[data-01=PgUp], kbd[data-01=PgDn],
 kbd[data-01=prt], kbd[data-01=SrLo], kbd[data-01=pause] {
  font-size: 12px; text-transform: capitalize;
}
kbd[data-01=prt], kbd[data-01=SrLo], kbd[data-01=pause], kbd[data-01=PgUp], kbd[data-01=PgDn], kbd[data-01=zz1], kbd[data-01=kbd] {
  line-height: 1.125;
}
kbd[data-01=kbd], kbd[data-01=zz1], kbd[data-ak=zz1], kbd[data-ck=zz1], kbd[data-mk=zz1], kbd[data-sk=zz1], kbd[data-01=zz2], kbd[data-ak=zz2], kbd[data-ck=zz2], kbd[data-mk=zz2], kbd[data-sk=zz2] {
  font-size: 12px; text-transform: capitalize;
}