body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
		sans-serif;
	line-height: 1.5em;
	color: #333;
	background-color: #fff;
	overflow-y: hidden;
}

::-webkit-scrollbar {
	width: 0 !important;
	display: none;
}

#container {
	align-items: center;
	justify-content: center;
	display: flex;
	height: 100%;
	overflow-y: hidden;
}

#form {
	width: 100%;
	padding-top: 0.5em;
}

#label {
	max-width: 100%;
	max-height: 100%;
	margin-bottom: 0.8em;
	padding: 0 0.5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#data {
	border-radius: 2px;
	background: #fff;
	width: 90%;
	padding: 0.4em 0.5em;
	border: 1px solid black;
	min-height: 2em;
	margin: 0 0 1.2em;
}

select#data {
	height: 2em;
}

#data-container {
	text-align: center;
}

#buttons {
	text-align: right;
	padding: 0 0.5em 0 0;
}

#buttons > button,
#buttons > input[type="submit"] {
	border-radius: 2px;
	border: 0;
	margin: 0 0 0 0.5em;
	font-size: 0.8em;
	line-height: 1em;
	padding: 0.6em 1em;
}

#ok {
	background-color: #3879d9;
	color: white;
}

#cancel {
	background-color: #ddd;
	color: black;
}

/* Counter mode */
span {
	cursor: pointer;
}
.minus,
.plus {
	user-select: none;
	width: 20px;
	height: 20px;
	background: #f2f2f2;
	border-radius: 4px;
	padding: 8px 5px 8px 5px;
	border: 1px solid #ddd;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

/** Keybind mode */
div.keybind {
	display: grid;
	grid-template-columns: max-content max-content max-content;
	row-gap: 20px;
	column-gap: 10px;
	margin: auto 0;
	justify-content: center;
  }
  
  div.keybind button {
	width: auto;
  }
  
  div.keybind label {
	text-align: right;
  }
  
  div.keybind label:after {
	content: ":";
  }