/*
========= piano control styles =============
*/

.piano-controls {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 1em;
	padding: 2em;
}

/*
========= tranport styles =============
*/

.transport-container {
	/* background-color: rgba(255, 0, 0, 0.146); */
	grid-column: 5 / 6;
	grid-row: 3 / 5;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: stretch; */
	/* justify-content: space-evenly; */
}

.tempo-container {
	grid-column: 1 / 5;
	grid-row: 1 / 1;
	/* align-content: center; */
	align-self: flex-end;
	/* justify-content: center; */
}

.tempo-container label,
.tempo-container input {
	font-size: 1.3em;
}

.tempo-container input {
	color: var(--control-text);
	background-color: var(--button-off);
	border: none;
	border-radius: 5px;
	text-align: center;
	padding: 0.05em;
	margin: 0.35em;
}

.navigation {
	grid-column: 1 / 5;
	grid-row: 2 / 2;
	display: flex;
	justify-content: space-evenly;
}

.player-data {
	grid-column: 4 / 9;
	grid-row: 1 / 3;
	/* background-color: rgba(0, 255, 94, 0.173); */
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div.player-data input,
div.player-data select {
	color: var(--control-text);
	background-color: var(--button-off);
	border: none;
	border-radius: 5px;
	text-align: center;
	padding: 0.05em;
	margin: 0.35em;
}

div.player-data div.tonic-container,
div.player-data div.meter-container {
	display: flex;
	align-items: center;
}

div.player-data div.tonic-container *,
div.player-data div.meter-container * {
	margin: 10px;
}

div.player-data div.matched-ends-container,
div.player-data div.glued-container {
	grid-column: 1 / 2;
}

div.player-data div.show-answer-container {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}

div.player-data div.gesture-num-container {
	display: flex;
	align-items: center;
}

div.player-data div.gesture-num-container input {
	width: 40px;
	margin: 10px;
}

.other-data {
	grid-column: 7 / 8;
	/* background-color: rgba(255, 0, 217, 0.173); */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-evenly;
}

.power-controls {
	/* background-color: rgba(0, 72, 255, 0.358); */
	grid-column: 7 / 9;
	grid-row: 4 / 5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

.piano-controls {
	/* grid-column: 2 / 3; */
	/* justify-self: center;
	align-self: center; */
	color: var(--control-text);
	/* font-size: 0.8rem; */
}

.piano-controls button {
	/* grid-column: 3 / 4; */
	/* color: rgba(223, 223, 223, 0.358); */
	color: var(--button-off);
	background: transparent;
	border-color: transparent;
	outline: none;
	font-size: 36px;
}

.keyboard-btn.hot {
	/* color: rgb(0, 145, 255); */
	color: var(--blue-button-lit);
	/* text-shadow: 0 0 4px rgb(0, 145, 255); */
	text-shadow: 0 0 4px var(--blue-button-lit);
}

.piano-controls button.power-btn.on {
	color: var(--red-button-lit);
	text-shadow: 0 0 5px var(--red-button-lit);
}

.volume-slider {
	/* grid-row: 4 / 5;
	grid-column: 4 / 5; */
	/* align-self: center; */
	-webkit-appearance: none;
	height: 2px;
	background: #767676;
	outline: none;
	/* grid-row: 2 / 3;
	grid-column: 21 / 23; */
}

.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 5px;
	height: 25px;
	background: #e6e6e6;
	cursor: pointer;
	/* grid-row: 2 / 3;
	grid-column: 21 / 23; */
}

.volume-::-moz-range-thumb {
	width: 5px;
	height: 25px;
	background: #767676;
	cursor: pointer;
	/* grid-row: 2 / 3;
	grid-column: 21 / 23; */
}

.play {
	color: rgba(0, 255, 30, 0.851);
	text-shadow: 0 0 4px rgba(0, 255, 30, 0.851);
}

.record {
	color: rgba(255, 0, 0, 0.851);
	text-shadow: 0 0 4px rgba(255, 0, 0, 0.851);
}

.hot {
	/* color: rgb(0, 145, 255); */
	color: var(--blue-button-lit);
	/* text-shadow: 0 0 4px rgb(0, 145, 255); */
	text-shadow: 0 0 4px var(--blue-button-lit);
}