.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
.lowercase {
	text-transform: lowercase;
}

#keyboardWrapper {
	position: fixed;
	bottom: -304px;
	width: 800px;
	left: calc(50% - 400px);
	/* margin: 0 0 0 -735px; */
	z-index: 280;
}
.keyboard {
	height: 360px;
	padding-bottom: 20px;
	width: 100%;
	margin: 0 auto;
	background: #efefef;
	border-radius: 1rem;
	border: 1px solid #999;
	box-shadow: 0px 1px 2px 0px rgba(230,230,230,1);
	display: flex;
	flex-direction: column;
	/* removed for Elo */
	/* justify-content: space-evenly; */
}
.krow {
	display: flex;
	align-items: center;
	/* removed for Elo */
	/* justify-content: space-evenly; */
}
.krow.hideKeyboard {
	width: 100%;
	justify-content: flex-end;
}
.keyboardClose {
	position: relative;
	right: 20px;
	top: 6px;
	font-size: 2em;
}
.keyboardOpen {
	position: relative;
	right: 20px;
	top: 6px;
	font-size: 2em;
	width: 100%;
	text-align: right;
}
.krow.numbers {
	width: 87%;
	margin: 0 auto;

	/* comment this out if using number instad of just delete key */
	/* or if you want the delete key centered */
	/* justify-content: right; */
}
.krow.qwerty {
	/* without brackets */
	width: 85%;
	/* with brackets */
	/* width: 89%; */
	margin: 0 auto;
}
.krow.asdfg {
	/* with enter key */
	/* width: 87%; */
	width: 85%;
	margin: 0 auto;
}
.krow.zxcvb {
	width: 87%;
	margin: 0 auto;
}
.spaceBar {
	width: 40%;
	margin: 0 auto;
}
.spaceBar .key {
	width: 100%;
}
.key, .shift, .backspace, .enter {
	color: #000;
	text-align: center;
	width: 60px;
	height: 60px;
	border-radius: 6px;
	/* border: 1px solid #999; */
	font-size: 1.8rem;
	font-weight: 300;
	/* modified for Elo */
	/* line-height: 3.9rem; */
	line-height: 3.9rem;
	/* removed for Elo */
	/* margin-bottom: 0px; */
	margin-bottom: 10px;
	margin-right: 10px;
	box-shadow: 0px 1px 2px 0px rgba(144,144,144,1);
	background: rgb(255,255,255);
	/* background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(242,242,242,1) 100%); */
}
.shift {
	width: 100px;
}
.enter {
	width: 100px;
	background: #ddffdd;
}
.krow.spaceBar .backspace {
	/* width: 150px;
	font-size: 1.7rem;
	line-height: 1.2em;
	*/
	padding-top: 10px;
	width: 100px;
	position: absolute;
	right: 70px;
	/* bottom: 30px; */
	font-size: 2.0rem;
	line-height: 2.6rem;
}
.bsarrow {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	bottom: 10px;
}
.key:active, .shift:active, .backspace:active, enter:active {
	background-color: #ddd;
}