body.Translit_NO div.alpha-box {
	grid-template-rows: 1fr repeat(2, 2fr);
}

body.Translit_YES div.alpha-box,
html:lang(de) div.alpha-box, html:lang(ga) div.alpha-box {
	grid-template-rows: 1fr repeat(3, 2fr);
}

	html:lang(de) div.alpha-box div.lc, html:lang(ga) div.alpha-box div.lc {
		color: green;
		font-size: 120%;
	}

	html:lang(de) div.alpha-box div.lc {
		font-family: "Walbaum-Fraktur UNZ1";
	}

html:lang(ur) div.glyph,
html:lang(fa) div.glyph {
	font-size: 170%;
}

html:lang(ga) div.alpha-box div.lc {
	font-family: "Bunchló"
}

div.alpha-chart {
	border: 2px fuchsia solid;
}

div.alpha-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

div.alpha-box {
	display: grid;
	justify-items: center;
	align-items: start;
	border: 2px blue solid;
	margin: 2px;
/*
*/
	background-color: white;
}

	div.alpha-box > div {
		display: grid;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		font-family: "Times New Roman";
	}

		div.alpha-box > div.top-segment {
			display: grid;
			grid-template-columns: 1fr 1fr;
			font-size: 90%;
		}

		div.alpha-box > div.top-segment, div.phones-ipa {
			background-color: #F0F0F0; /*DEEAF6*/
		}

			div.alpha-box > div.top-segment div {
				padding: 0 3px;
			}

div.order {
	color: brown;
	/* no definitions yet */
}

div.hex {
	text-align: end;
	color: darkgreen;
}

div.alpha-box > div.phones-ipa, div.alpha-box > div.lc-translits {
	display: flex;
	flex-direction: column;
	text-align: center;
/* CUTS OFF BOTTOM BORDER 
		padding: 3px 0;
*/
}

div.ortho-ipa, div.lc {
	font-family: 'Times New Roman';
	font-size: 120%;
	text-align: center;
}

div.lc {
	color: navy;
}

div.phones-ipa div, div.lc-translits div {
	display: flex;
	flex-direction: row;
	padding: 0 2px;
	text-align: center;
}

div.lc-translits {
	/*
	background-color: #E4FFE1;
*/
}

div.glyph {
	display: grid;
	font-size: 160%;
	color: black;
		padding: 3px 0 6px 0;
}
	/*div.alpha-box */
	div.glyph:hover {
		font-size: 180%;
		background-color: black;
		color: white;
	}

div.single-IPA:before, div.single-IPA:after {
	content: "/";
}

div.single-IPA.null:before, div.single-IPA.null:after {
	content: "";
}

div.region {
	color: black;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 90%;
}

	div.region:after {
		content: ": ";
	}
