alphaListNav.scss

body {
	font-family: sans-serif;
	font-weight: 400;
	font-size: 16px;
	background-color: #fafafa;
}

.alpha-list-wrapper,
#no-match {
	display: none;
}

.alpha-list-wrapper.active,
#no-match.active {
	display: block;
}

#alpha-nav {
	padding-top: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.character-element {
	position: relative;
	text-decoration: none;
	text-align: center;
	/*     font-size: 1.2em; */
	line-height: 1;
	white-space: nowrap;
	padding: 5px 6px;
	color: #005f97;
	border: 1px solid #aaa;
	border-radius: 3px;
	background: rgb(2, 0, 36);
	background: linear-gradient(
		180deg,
		rgba(2, 0, 36, 1) 0%,
		rgba(248, 253, 255, 1) 0%,
		rgba(225, 225, 225, 1) 100%
	);
}

@media (max-width: 767px) {
	.character-element {
		padding: calc(100% / 50);
		margin: calc(100% / 50);
		min-width: calc(100% / 15);
	}
}

.alphaNav-count-elem {
}

.character-element:not(.disabled):hover,
.character-element:not(.disabled):active {
	background: #ccc;
	cursor: pointer;
}

.character-element.disabled {
	color: #aaa;
	cursor: default;
}

.character-element.active {
	background: #ddd;
}