* {
margin: 0;
padding: 0;
}

#container2 {
width: 1024px;
position:absolute;
top:444px;
left:0px;
background-color:#333333;

visibility:collapse;
z-index:999999;


}
#texto {
margin: 0 0 5px;
padding: 5px;
width: 671px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 5px;
list-style: none;
}
	#keyboard li {
	float: left;
	margin: 0 5px 5px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			#keyboard .tab, #keyboard .delete {
			width: 70px;
			}
			#keyboard .capslock {
			width: 80px;
			}
			#keyboard .return {
			width: 77px;
			}
			#keyboard .left-shift {
			width: 95px;
			}
			#keyboard .right-shift {
			width: 109px;
			}
		.lastitem {
		margin-right: 0;
		}
		.uppercase {
		text-transform: uppercase;
		}
		#keyboard .space {
		clear: left;
		width: 681px;
		}
		.on {
		display: none;
		}
		#keyboard li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}

		:root {
			--main-bg-color: coral;
		}
		.material {
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			border: none;
			border-radius: 4px;
			padding: 0 16px;
			min-width: 64px;
			height: 36px;
			vertical-align: middle;
			text-align: center;
			text-overflow: ellipsis;
			color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
			background-color: #1c1c1c;
			box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
			font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
			font-size: 14px;
			font-weight: 500;
			line-height: 36px;
			overflow: hidden;
			outline: none;
			cursor: pointer;
			transition: box-shadow 0.2s;
		}
	
		.material::-moz-focus-inner {
			border: none;
		}
	
		/* Overlay */
		.material::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
			opacity: 0;
			transition: opacity 0.2s;
		}
	
		/* Ripple */
		.material::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			border-radius: 50%;
			padding: 50%;
			width: 32px; /* Safari */
			height: 32px; /* Safari */
			background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
			opacity: 0;
			transform: translate(-50%, -50%) scale(1);
			transition: opacity 1s, transform 0.5s;
		}
	
		/* Hover, Focus */
		.material:hover {
			box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
			color: #fff;
		}
	
		.material:hover::before {
			opacity: 0.08;
		}
	
		/* Disabled */
		.material:disabled {
			color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
			background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
			box-shadow: none;
			cursor: initial;
		}
	
		.material:disabled::before {
			opacity: 0;
		}
	
		.material:disabled::after {
			opacity: 0;
		}