.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
}

.mdl-card {
  margin: 0.5em;
}

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

.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: 9pt;
    padding: .1em .6em;
    cursor: default;
}

.gamepad {
	color: white;
	font-weight: bold;
	background-color: #444;
	border-radius: 50%;
	height: 10px;
	width: 10px;
}
.gamepad.a {
	color: #8f8;
}
.gamepad.b {
	color: #f88;
}
.gamepad.x {
	color: #88f;
}
.gamepad.y {
	color: #ff8;
}

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

img {
  max-width: 20em;
}

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

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

.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) {
	background: #ddd;
}

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