/* ======================= Keyboard Area ===================== */
#distCalc .keyboardArea {
	height: 100%;
}

/* ======================= Keyboard ===================== */
#distCalc .keyboard {
	display: grid;
	grid-template-rows: auto;
	grid-auto-rows: 1fr;
	height: 100%;
	gap: 0.25rem;
	padding: 0.5rem 0.5rem 1rem 0.5rem;
	margin: 0 auto;
	max-width: 30rem;
}
/* ======================= All Keyboard buttons ===================== */
#distCalc .keyboard [data-key-val] {
	font-size: 1.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ======================= Calc. Keyboard ===================== */
#distCalc .keyboard .calculator {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	gap: 0.25rem;
}

#distCalc .calculator button {
	border-width: 1px;
	border-style: outset;
	border-radius: 2px;
	background-color: #bbb;
}

#distCalc .calculator button svg {
	pointer-events: none;
}

#distCalc .calculator button.numKey {
	background-color: #ddd;
}

#distCalc .calculator button:hover {
	background-color: #ccc;
}

#distCalc .calculator button:active {
	border-style: inset;
}

#distCalc .calculator [data-key-val="clear"] {
	background-color: darkorange;
	color: var(--light-color);
}

#distCalc .calculator [data-key-val="clear"]:hover {
	background-color: rgb(255, 149, 20);
}

#distCalc .calculator [data-key-val="ok"] {
	background-color: green;
	color: var(--light-color);
}

#distCalc .calculator [data-key-val="ok"]:hover {
	background-color: lightgreen;
}

/* #distCalc [data-key-val="clear"],
#distCalc [data-key-val="ok"],
#distCalc [data-key-val="="] {
	grid-column: span 2;
} */

/* ======================= Imperial Keyboard ===================== */

#distCalc .keyboard .system {
	display: grid;
	grid-template-rows: 1fr;
}

#distCalc .keyboard .system > * {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.25rem;
	/* margin-bottom: 0.5rem; */
}

#distCalc .keyboard .system button {
	border-width: 1px;
	border-style: outset;
	border-radius: 2px;
	background-color: #28a745;
	font-size: 2.2rem;
}

#distCalc .keyboard .system button sup {
	font-size: 1rem;
	align-self: start;
}

#distCalc .keyboard .system button .superScript {
	font-size: 1rem;
	vertical-align: top;
}

#distCalc .keyboard .system button:hover {
	background-color: #3ad05d;
}

#distCalc .keyboard .system button:active {
	border-style: inset;
}

/* ======================= Memory Keyboard ===================== */

#distCalc .keyboard .memory {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, minmax(40px, auto));
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

#distCalc .keyboard .memory button {
	font-size: 2rem;
	border-width: 1px;
	border-style: outset;
	border-radius: 2px;
	background-color: #2848a7;
	color: white;
}

#distCalc .keyboard .memory button:hover {
	background-color: #365ccd;
}

#distCalc .keyboard .memory button:active {
	border-style: inset;
}