.keys-grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 3fr;
	gap: .25em .25em;
	grid-template-areas:
		"rightArrow slash asterisk minus"
		"seven eight nine plus"
		"four five six plus"
		"one two three enter"
		"zero zero period enter"
		"lot lot lot lot";
}
.key-lot {
	grid-area: lot;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: .25em .25em;
	grid-template-areas:
		"pageup pagedown backspace"
		"pause floor liftReserve"
		"group ungroup reloadLots";
}

.grid-pause {
	grid-area: pause;
}

.grid-floor {
	grid-area: floor;
}

.grid-liftReserve {
	grid-area: liftReserve;
}

.grid-group {
	grid-area: group;
}

.grid-ungroup {
	grid-area: ungroup;
}

.grid-reloadLots {
	grid-area: reloadLots;
}

.better-btn {
	font-size: 1.0vw;
	padding: unset;
}

.background-color-ba {
	background-color: #ed1b24;
}

.color-ba {
	color: #ed1b24;
}

.keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
}

.interested {
	color: #55ae55;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
	I want to use this in places where I have an overflow auto/scroll div with a list inside.
	Currently it doesn't work, so I'm not using it.
*/
.scrollShadow {
	background:
	  linear-gradient(#ffffff 33%, rgba(255,255,255, 0)),
	  linear-gradient(rgba(255,255,255, 0), #ffffff 66%) 0 100%,
	  radial-gradient(farthest-side at 50% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)),
	  radial-gradient(farthest-side at 50% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-attachment: local, local, scroll, scroll;
	background-size: 100% 27px, 100% 27px, 100% 9px, 100% 9px;
}