/* ALL STYLES HAVE BEEN VERIFIED AS BEING IN PeriodicTable-Template */

body.PeriodicTable {
	font-family: "Segoe UI", "SF UI Display Light", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14pt;
	line-height: 1.5em;
	padding: 0;
	margin: 0.25em;
}

p {
	margin: 0;
}

a, a:link, a:visited {
	color: inherit;
	border: 1px black dotted;
	padding: 0 2px;
	text-decoration: none;
}

img.flag {
	border: 1px black solid;
	vertical-align: middle;
}

div.flag-head {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}

	div.flag-head div.flag {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: max-content;
		margin-left: 0.5em;
	}

		div.flag-head div.flag p {
			font-size: 14pt;
			margin: 0;
		}

			div.flag-head div.flag p:nth-child(1) {
				font-weight: bold;
			}

			div.flag-head div.flag p:nth-child(2) {
			}

			div.flag-head div.flag p:nth-child(3) {
			}

	div.flag-head div.head {
		width: 100%;
	}

		div.flag-head div.head p {
			font-size: 42pt;
			text-align: center;
			text-transform: uppercase;
		}

div.physicalstate-category {
	display: flex;
	align-items: start;
	height: 9em;
	border-style: solid;
	border-color: silver;
	border-width: 1px 0;
/*
	margin-bottom: 1em;
*/
}

	div.physicalstate-category div.stcat-label {
		font-weight: bold;
		font-size: 14pt;
		text-transform: uppercase;
/*
		text-align: left; (REDUNDANT)
		margin-bottom: 0.25em;
*/
	}

	div.physicalstate-category div.phase-column {
		display: flex;
		flex-direction: column;
		width: 20%;
		padding: 0 0.5em 0 0;
	}

	div.physicalstate-category div.category-column {
		display: flex;
		flex-direction: column;
		width: 85%;
	}

/*
html[lang|="fa"] div.states p,
html[lang|="ur"] div.states p,
*/
html[lang|="fa"] div.stcat-label,
html[lang|="ur"] div.stcat-label {
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	direction: rtl;
}

div.physicalstates p {
	font-size: 16pt;
	font-weight: bold;
/* REDUNDANT
	text-align: left;
*/
	margin: 0;
	padding: 2px;
}

div.categories {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	width: 100%;
	gap: 0.25em;
}

	div.categories > div {
		display: flex;
		flex-direction: column;
		border: solid 1px red;
	}

		div.categories div div:first-child {
		font-family: "Segoe UI Semibold", "SF UI Display Light", Tahoma, Geneva, Verdana, sans-serif;
			padding: 0px 3px;
	}

		html[lang|="fa"] div.categories div div:first-child, 
		html[lang|="ur"] div.categories div div:first-child {
			font-family: "Times New Roman", Times, serif;
			font-size: 120%;
			padding: 3px 3px 0 3px;
			direction: rtl;
		}

		div.categories div div:last-child {
			padding: 0 3px;
			font-size: 80%;
		}


	div.categories p {
		font-family: "Segoe UI Semibold", "SF UI Display Light", Tahoma, Geneva, Verdana, sans-serif;
		font-size: 12pt;
		border: 1pt gray solid;
		padding: 0.25em;
		margin: 0;
	}
/* THIS iframe IS A CANDIDATE TO REMOVE FROM THIS CSS FILE **/
iframe {
	width: 100%;
	border: 0;
}
/* 
iframe.pt-footer {
	margin-top: 2em;
	border-top: 4px black double;
	height: 25em;
}
*/
/* THE .per-table CLASS DEFINES THE STRUCTURE FOR THE PERIODIC TABLE ABOVE THE LANTHANIDES/ACTINIDES */
.per-table {
	display: grid;
	grid-template-columns: 1fr repeat(18, 2fr);
	grid-template-rows: repeat(8, 3fr);
	margin: -2em 0 1em 0;
}
/* THE .per-lan-act CLASS DEFINES THE STRUCTURE FOR THE LANTHANIDES/ACTINIDES ROWS*/
.per-lan-act {
	display: grid;
	grid-template-columns: 1fr 6fr repeat(15, 2fr);
	grid-template-rows: repeat(2, 1fr);
}
/* div.element DEFINES THE STRUCTURE OF INDIVIDUAL ELEMENTS */
/* div.asterisk DEFINES THE TWO ASTERISK BOXES: LANTHANIDES/ACTINIDES */
/* div.period DEFINES THE LEFT-SIDE PERIOD LABELS */
div.element, div.asterisk, div.period {
	display: inline-block;
	border-collapse: collapse;
	/*	
	vertical-align: middle;
*/
}

div.element, div.asterisk {
	border-right: 1px solid;
	border-bottom: 1px solid;
}
/* div.group-info DEFINES THE ARABIC/ROMAN GROUP NUMBERS, e.g. 3 IIIB */
/* div.group-num DEFINES THE 8-9-10/VIIIB SITUATION */
div.group-info, div.group-num {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

div.group-num {
	flex-direction: column;
	margin-top: auto;
}

	div.group-info p, div.group-num p {
		display: inline;
		font-size: 10pt;
		font-weight: bold;
		margin: 0;
		width: 50%;
		padding: 0 3px;
	}

		div.group-info p:nth-child(1) {
			text-align: left;
			color: red;
		}

		div.group-info p:nth-child(2), div.group-num p {
			border-right: 1px black solid;
			/* border takes the color of <p> if not otherwise specified */
		}

		div.group-info p:nth-child(2) {
			text-align: right;
			color: blue;
		}

			div.group-info p:nth-child(2).noborder, div.group-num p.noborder {
				border-right: 0;
			}

	div.group-num p {
		text-align: center;
		width: 100%;
		padding: 0;
	}
		/* first-child REPRESENTS THE VIIIB LABEL */
		div.group-num p:first-child {
			color: blue;
			border-right: 0;
		}
		/* last-child REPRESENTS THE 8-9-10 LABELS */
		div.group-num p:last-child {
			border-top: 1px black solid;
			color: red;
		}

div.element p {
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: normal;
}
	/* nth-child(1) REPRESENTS THE ATOMIC NUMBER */
	div.element p:nth-child(1) {
		font-weight: bold;
		font-size: 10pt;
	}
	/* nth-child(2) REPRESENTS THE ELEMENT SYMBOL */
	div.element p:nth-child(2) {
		font-weight: bold;
		font-size: 24pt;
	}
	/* nth-child(3) REPRESENTS THE ELEMENT NAME */
	div.element p:nth-child(3) {
		font-weight: normal;
		font-size: 10pt;
	}

html[lang|="fa"] div.element p:nth-child(3),
html[lang|="ur"] div.element p:nth-child(3),
html[lang|="fa"] div.phase-column,
html[lang|="ur"] div.phase-column {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
html[lang|="fa"] div.phase-column,
html[lang|="ur"] div.phase-column {
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	direction: rtl;
}
/*
html[lang|="fa"] div.state-category {
	font-size: 120%;
}
*/

div.element p:nth-child(3).toolong {
	font-size: 9.5pt;
}
/* topbox PROVIDES THE UPPER BORDER FOR TOP-ROW ELEMENT BOXES, e.g., H, Be */
.topbox {
	border-top: 1px black solid;
}
/* leftbox PROVIDES THE LEFT-HAND BORDER FOR LEFT-SIDE ELEMENT BOXES, e.g., He, Al */
.leftbox {
	border-left: 1px black solid;
}

div.asterisk, div.period {
	font-weight: bold;
	text-align: center;
	/*	these do not work:
	display: table-cell;
	vertical-align: middle;
*/
}

	div.asterisk p {
		font-size: 24pt;
		padding-top: 1em;
		/*	use padding instead of line-height
	line-height: 1em;
*/
	}

	div.period p {
		font-size: 12pt;
		align-items: center;
		/*	use padding instead of line-height
	line-height: 4em;
	padding-top: 1.5em;
*/
	}

		div.period p.label {
			font-size: 14pt;
			text-align: right;
			padding-right: 0.5em;
		}

.He {
	grid-column-start: 19;
}

.BAl {
	grid-column-start: 14;
}