.key {
  width: 100%;
  height: 6em;
}

.mashable-area {
	user-select: none;
	-webkit-user-select: none; /* 2022-04-26 Safari still needs this */  
}

.center {
  text-align: center;
}

.maximize {
	position: absolute;
	bottom: 0;
	right: 0;
}
.maximized .key {
	height: 90vh;
}
.maximized {
	width: 90vw;
}

.wide {
  width: 100%;
}

.hidden {
	visibility: none;
}

#errors {
    color: rgba(127, 0, 0, .54);
    max-height: 5em;
    overflow-y: scroll;
}

@keyframes yellow-fade {
	0% {background: yellow;}
	100% {background: none;}
}
#errors p {
    margin: 0;
    animation: yellow-fade 2s ease-in 1;
}

kbd {
    background-color: #eee;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 66%;
    padding: .1em .6em;
	cursor: default;
	vertical-align: middle;
}

kbd.gamepad {
	color: white;
	font-weight: bold;
	background-color: #444;
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

code {
  background-color: #333;
  color: #fff;
  padding: 0.1em;
}

textarea.notes {
	width: 100%;
	min-height: 10em;
	font-family: sans-serif;
}

img {
  max-width: 20em;
}

.mdl-card__supporting-text {
	max-height: 20em;
	overflow-y: scroll;
}
.mdl-card__supporting-text.long {
	max-height: inherit;
}

#recv {
	width: 2em;
	height: 1em;
	line-height: 1em;
	position: absolute;
	top: 0.5em;
	right: 1em;
	border-radius: 0.3em;
	text-align: center;
	vertical-align: middle;
}
#recv.rx {
	background-color: orange;
}

#note {
	position: absolute;
	top: 0.5em;
	right: 5em;
	font-size: 80%;
	color: #888;
}

.input-methods td {
	text-align: left;
}


#morse-tree table {
	width: 100%;
}
#morse-tree tr {
	height: 1.4em;
	text-align: center;
	font-family: monospace;
}
#morse-tree tr,
#morse-tree td:nth-child(n+2) {
	background: #eee;
}
#morse-tree tr:nth-child(n+2),
#morse-tree td.dah {
	background: #ddd;
}

#morse-list span {
	font-family: monospace;
	display: inline-block;
	background: #eee;
	margin: 1px;
	padding: 0.4em;
	min-width: 4em;
}

#charts {
	line-height: 0;
}
#charts canvas {
	height: 0.5em;
	width: 100%;
}