#jskeyboard {
    background-color: white;
	border: 1px solid #333;
	border-radius: 9px;
	box-shadow: 0 15px 15px -12px rgba(0, 0, 0, 0.35);
	display: none;
	overflow: hidden;
	position: absolute;
	bottom: 10px;
	right: 26px;
	z-index: 200;
}
#jskeyboard > div > div {
	display: flex;
}
#jskeyboard > div > div > span {
	display: inline-flex;
	border: 1px solid #eee;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-evenly;
	font-size: 2em;
	height: 100%;
	text-align: center;
}
#jskeyboard > div > div > span:active {
	background-color: #ddd;
}
#jskeyboardtitlebar {
	height: 24px;
}
#jskeyboardtitlebar .closebtn {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	display: block;
	width: 24px;
	text-align: center;
	line-height: 24px;
}
#jskeyboardtitlebar .closebtn:hover {
	background-color: red;
	color: #fff;
}

#jskeyboardmain {
	height: calc(100% - 24px);
}
#jskeyboard.numeric {
	display: block;
    width: 200px;
    height: 224px;
}
#jskeyboard.numeric > #jskeyboardmain > div {
	height: 50px;
}
#jskeyboard.numeric span {
	width: 50px;
}

#jskeyboard.full {
	display: block;
    width: 550px;
    height: 274px;
}
#jskeyboard.full > #jskeyboardmain > div {
	height: 20%;
}
#jskeyboard.full span {
	width: 50px;
}
#jskeyboard > div > div > span.backspace {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6YmxhY2s7IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTYgM0wxIDhMNiAxM0wxNSAxM0wxNSAzTDYgM3ogTTcgMTFMMTMgNXogTTcgNUwxMyAxMXoiPjwvcGF0aD48L3N2Zz4=");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
}
#jskeyboard > div > div > span.shift,
#jskeyboard > div > div > span.ctrl {
	font-size: 1em;
}
#jskeyboard > div > div > span.space {
	width: 300px;
}
#jskeyboard > div > div > span.enter {
	font-size: 1em;
	height: 200%;
}

.key-pressed-flash {
  animation-name: key-pressed-flash;
  animation-duration: 200ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

@keyframes key-pressed-flash {
  0% {background-color: inital;}
  10% {background-color: #808080;}
  100% {background-color: inital;}
}