#keyboard_input, #keyboard_input * {
	pointer-events: initial;
}
#keyboard_input * {
	box-sizing: border-box;
}

#keyboard_input {
	/*position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;*/
	
	/*height: 40vh;*/
	height: 340px;
	padding-top: 8px;
	padding-bottom: 8px;
	
	position: absolute; 
	left: 0px; 
	bottom: 0px; 
	overflow: hidden;
	right:0px;
	background-color: rgba(240, 240, 240, 0.9);
	box-shadow: 0px -10px 4px rgba(240, 240, 240, 0.9);
}


#keyboard_container {
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
	
}

.keyb_row_table {
	border-spacing: 6px 2px;
    border-collapse: separate;
	font-size: 16px;
	font-family: monospace;
	font-weight: bold;
	/*height: 100%;*/
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	max-width: 1024px;
}
.kebbtn {
	height: 100%;
	/*height: 50px;*/
	background-color: #cccccc;
	color: white;
	border-radius: 12px;
	padding: 4px;
	padding-left: 8px;
	padding-right: 8px;
	vertical-align:middle;
	text-align: center;
	
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow:  0px 1px 0px 0px #333333;
    cursor: pointer;
	background-color: rgba(192, 192, 192, 0.85);
	background-image: linear-gradient(to top, rgba(192, 192, 192, 0.85) 0%,rgba(192, 192, 192, 0.25) 100%);
    border: 1px solid #777777;
	text-shadow: 0px 1px 0px #ffffff;
	
	color:black;
	background-image: linear-gradient(to top, rgba(230, 230, 230, 0.85) 0%,rgba(230, 230, 230, 0.25) 100%);
	position: relative;
}
.kebbtn.arrow {
	width: 22px !important;
	height: 20px !important;
	background-image: linear-gradient(to top, rgba(230, 230, 230, 0.85) 0%,rgba(230, 230, 230, 0.65) 100%) !important;
	text-shadow: 0px 1px 0px #ffffff !important;
	
	color:black !important;
}
.kebbtn.hidden {
	visibility: hidden !important;
}
#keybtbl {
	height: 100%;
}
#keybtbl>tbody>tr:first-child .kebbtn {
	/*height: 40px;*/
	height: 50%;
}
.kebbtn:active {
	position: relative;
	top: 1px;
	left: 1px;
	box-shadow: inset 0px 0px 0px 0px #ffffff !important;
}
.kebbtn:not(#spacebar) {
	/*max-width: 50px;*/
}
#spacebar {
	max-width: 400px;
}

.kebbtn.dark {
	box-shadow: inset 0px 1px 0px 0px #cccccc;
	box-shadow:  0px 1px 0px 0px #333333;
	background-color: rgba(100, 100, 100, 0.85);
	background-image: linear-gradient(to top, rgba(150, 150, 150, 0.85) 0%,rgba(150, 150, 150, 0.65) 100%);
	border: 1px solid #333333;
	text-shadow: 0px 1px 0px #333333;
	padding-left:30px;
	padding-right: 30px;
	
	color: white;
}
.kebbtn.dark.selected {
	position: relative;
	top: 1px;
	left: 1px;
	box-shadow: 0px 0px 6px 6px rgba(100, 0, 0, 0.55) !important;
	border: 1px solid #cc0000;
	/*text-shadow: none;
	color: #000000;*/
	background-image: linear-gradient(to bottom, rgba(150, 150, 233, 1) 0%,rgba(150,1050, 255, 1) 100%);
	background-image: linear-gradient(to top, rgba(175, 0, 0, 0.85) 0%,rgba(175, 0, 0, 0.65) 100%);
	/*text-decoration: underline;*/
}
#enterbtn {
	border: 1px solid rgba(40, 40, 180, 0.85);
	background-image: linear-gradient(to bottom, rgba(100, 100, 233, 1) 0%,rgba(100,100, 255, 1) 100%);
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow:  0px 1px 0px 0px #333333;
}

@media screen and (max-width: 900px), (max-height: 600px) {
	.keyb_row_table {
		font-size: 12px;
		
	}
	.keyb_row_table {
		border-spacing: 1px 1px;
	}
	.kebbtn {
		height: 30px;
	}
	#keybtbl>tbody>tr:first-child .kebbtn {
		height: 30px;
	}
	.smlhidden {
		/*display:none;*/
	}
	#keyboard_input {
		height: 230px;
	}
	.kebbtn.dark {
		/*font-size: 10px;*/
	}
	#keybtbl {
		
		/*position: absolute;
		bottom: 0px;*/
	}
	.kebbtn:not(#spacebar) {
		/*max-width: 50px;*/
	}
	
	
	.kebbtn {
		border-radius: 6px;
		border-spacing: 1px;
		text-shadow: none;
	}

}

@media screen and (max-width: 600px) {
	.kebbtn {
		padding-left: 2px;
		padding-right: 2px;
	}
}

@media screen and (max-width: 750px) {
	.kebbtn {
		border-radius: 6px;
		border-spacing: 1px;
		text-shadow: none;
	}
	.kebbtn.dark {
		padding-left:6px;
		padding-right: 6px;
	}
}