/*
================================================
Created by Mark Fredriksen
Last updated on 11-18-2025
Notes: This stylesheet applies to the NHGRI Research domain (research.nhgri.nih.gov) and is an interpretation of the existing Genome.gov Web template based on DIR's specific needs. This "bare bones" version of the stylesheet was design to provide basic header/footer functionality of the DIR template.

================================================
Contents:
	00 Debugging
  01 Sensible Defaults
	02 Typography
	03 Base Layout
	04 Header
	05 Primary Navigation
	06 Footer
	07 Main Content: Base Layout

================================================
*/


/* 00 Debugging
--------------------------------------------- */
/*
* {
    outline: 1px solid rgba(255,0,0,.1);
}*/


/* 01 Sensible Defaults
--------------------------------------------- */
@import url("../../core/dist/v5.3.8/bootstrap-reboot.css");
@import url("../../font-awesome/v7.1.0/all.css");
@import url("front-end__variables.css");
@import url("front-end__webfonts.css");


/* 02 Typography
--------------------------------------------- */
/*
	10 / 16 =	0.625em		(10px equivalent)
	12 / 16 =	0.75em		(12px equivalent)
	13 / 16 =	0.8125em	(13px equivalent)
	14 / 16 =	0.875em		(14px equivalent)
	15 / 16 =	0.9375em	(15px equivalent)
	16 / 16 =	1em				(16px equivalent)
	18 / 16 =	1.125em		(18px equivalent)
	20 / 16 =	1.25en		(20px equivalent)
	21 / 16 =	1.3125em	(21px equivalent)
	24 / 16 =	1.5em			(24px equivalent)
	30 / 16 =	1.875em		(30px equivalent)
	42 / 16 =	2.625em		(42px equivalent)
	54 / 16 =	3.375em		(54px equivalent)
	72 / 16 =	4.5em			(72px equivalent)
*/

/* Ligatures */
body {
	text-rendering: optimizeLegibility; /* Turns on ligatures and kerning */
}

/* Rendering */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Raleway', Arial, 'Microsoft Sans Serif', 'sans-serif'; /* Confirm final font pacakge */
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.125;
}

em {
	font-style: italic;
}

strong {
	font-weight: 600;
}

sup {
	vertical-align: super;
	font-size: 0.625em;
}

sub {
	vertical-align: sub;
	font-size: 0.625em;
}

#masthead {
	font-size: 1.125rem;
}

header nav {
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.625em;
	letter-spacing: 0.05em;
}

header .site-name h1, header .site-name a{
	font-size: 1em;
	font-weight: 500;
}

header .navbar-toggler.collapsed, header .navbar-toggler:not(.collapsed) {
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: 0.05em;
}

nav {

}

.navbar-nav li {
	letter-spacing: 0.0625rem;
}

.navbar-nav li>ul>li, .navbar-nav li ul li {
	line-height: 1.3125em;
}

footer {
	font-size: 0.8125rem;
	font-weight: 600;
}

footer .navigation li {
	line-height: 30px;
}

.banner-notice p {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.625em;
	letter-spacing: 0.03125rem;
}

#button__back-to-top {
	font-family: "Font Awesome 7 Free";
	font-size: 0.75em;
	font-weight: 900;
	line-height: 40px;
}

main {
	font-family: 'Raleway', Arial, 'Microsoft Sans Serif', 'sans-serif';
	font-weight: 400;
	letter-spacing: max(0.03125em, calc(100vw/90*0.0625));
	line-height: 1.5em;
}

main a.external::after {
	font-family: "Font Awesome 7 Free";
	font-size: 0.8125em;
	font-weight: 900;
}

#breadcrumbs .breadcrumb {
	font-family: 'Montserrat', Arial, 'Microsoft Sans Serif', 'sans-serif';
	font-size: 0.675rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.625em;
}

#breadcrumbs .breadcrumb li.active {
	font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
	font-size: 150%;
}

#main h1 {
	font-family: 'Montserrat', Arial, 'Microsoft Sans Serif', 'sans-serif';
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: 0.015625em;
}

.home #main h1 {
	font-size: 2.5rem;
}

.modal .caption-custom {
	line-height: normal;
}

#article-metadata p {
	font-size: 0.75rem;
	font-style: italic;
	line-height: normal;
}

#main label {
	font-weight: 600;
}

#main form .btn-primary, #main form .btn-secondary, #main .btn-custom {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.125em;
}

aside#toc h2 {
	font-size: 1em;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
}

nav#toc-nav .nav > li > a {
	font-size: 0.875em;
	font-weight: 500;
	line-height: normal;
}

nav#toc-nav .nav-link.active {
	font-weight: 600;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#breadcrumbs .breadcrumb {
		letter-spacing: 0.05em;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#breadcrumbs .breadcrumb {
		font-size: 0.75rem;
	}
	#main h1 {
		font-size: 2.5rem;
	}
	.home #main h1 {
		font-size: 3rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	main {
		line-height: max(1.625rem, calc(100vw/100*1.375));
	}
	main .lh-normal {
		line-height: 1.625em;
	}
}

/* 03 Base Layout
--------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
}

a, a:link, a:visited {
	color: var(--blue-royal);
	text-decoration: none;
	font-weight: 400;
}

a:hover {
	color: var(--cobalt);
}

#page__wrapper {
	width: 100%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

.banner-notice {
	text-align: center;
	background: var(--magenta);
}

.banner-notice.alert {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.banner-notice p {
	display: inline-block;
	margin: 0;
	padding: 0.825em;
	max-width: 90%;
	color: var(--white);
}

.banner-notice p a, footer .navigation a {
	padding-bottom: 1px;
	text-decoration: none;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
	border-bottom: 1px solid;
}

.banner-notice p a {
	text-transform: uppercase;
	color: inherit;
	border-color: transparent;
}

.banner-notice p a:hover {
	text-decoration: none;
	border-color: var(--white);
}

.banner-notice button.btn-close {
	display: flex;
	padding: 0;
	position: absolute;
	top: 0;
	right: calc(var(--margin-outside) - calc(2.5rem - 0.8625rem)/2);
	width: 2.5rem;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: transparent;
	outline: none;
	opacity: 1;
	border: none;
	transition: linear 0.25s;
}

.banner-notice button.btn-close:before, .banner-notice button.btn-close:after {
	position: absolute;
	content: '';
	width: 0.8625rem;
	height: 0.125rem;
	background: var(--white);
} 

.banner-notice button.btn-close:before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.banner-notice button.btn-close:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.banner-notice button.btn-close:hover {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#button__back-to-top {
		position: fixed;
		opacity: 0;
		visibility: hidden;
		bottom: 1rem;
		right: 0.75rem;
		width: 40px;
		height: 40px;
		text-align: center;
		z-index: 999;
		background: var(--magenta--trans);
		-webkit-transition: ease opacity 0.3s, ease background-color 0.3s;
		-moz-transition: ease opacity 0.3s, ease background-color 0.3s;
		-o-transition: ease opacity 0.3s, ease background-color 0.3s;
		transition: ease opacity 0.3s, ease background-color 0.3s;
	}
	#button__back-to-top.visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	#button__back-to-top:hover {
		text-decoration: none;
		cursor: pointer;
		background: var(--magenta);
	}
	#button__back-to-top::after {
		content: "\f077";
		color: var(--white);
	}
}


/* 04 Header
--------------------------------------------- */
header {
	color: var(--white);
	webkit-position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 999;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 2px 10px 0 rgba(0,0,0,0.12);
}

#masthead {
	color: var(--white);
	background: var(--blue-dusty);
}

#masthead #brand {
	margin: 0 var(--margin-outside);
	padding: 1rem 0;
}

#masthead #brand>a {
	display: inline-block;
}

#masthead #brand img {
	height: 33px;
	width: auto;
	vertical-align: top;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
}

#masthead__utilities {
	margin-right: var(--margin-outside);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#masthead .search-desktop__wrapper {
	margin-left: 0;
	width: auto;
	visibility: hidden;
	opacity: 1;
}

#masthead .navbar-toggler__wrapper {
	margin-left: 1em;
	width: auto;
	visibility: visible;
	opacity: 1;
}

.navbar-toggler {
	display: flex;
	padding: 0;
	flex-direction: row;
	align-items: center;
	background: transparent !important;
	border-radius: 0;
}

.navbar-toggler:focus, .navbar-toggler:active {
	outline: none;
	background: transparent !important;
	box-shadow: none;
}

.navbar-toggler.collapsed::before, .navbar-toggler:not(.collapse)::before {
	margin-right: 0.75em;
	color: var(--white);
}

.navbar-toggler__icon {
	background-image: none !important; /* Disables Bootstrap's default toggle icon (? - Bootstrap 5)*/
}

.navbar-toggler .icon-bar {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--white);
	-webkit-transform: rotate(0deg) translate(0px, 0px);
	-moz-transform: rotate(0deg) translate(0px, 0px);
	-o-transform: rotate(0deg) translate(0px, 0px);
	transform: rotate(0deg) translate(0px, 0px);
	opacity: 1;
}

.navbar-toggler .icon-bar+.icon-bar {
	margin-top: 6px;
}

.navbar-toggler .icon-bar:nth-child(3) {
	width: 16px;
	-webkit-transition: ease all .35s;
	-moz-transition: ease all .35s;
	-o-transition: ease all .35s;
	transition: ease all .35s;
}

.navbar-toggler .navbar-toggler__icon:hover>.icon-bar:nth-child(3), .navbar-toggler .navbar-toggler__icon:active>.icon-bar:nth-child(3) {
	width: 22px;
	-webkit-transition: ease all .35s;
	-moz-transition: ease all .35s;
	-o-transition: ease all .35s;
	transition: ease all .35s;
}

.navbar-toggler .icon-bar:nth-child(2), .navbar-toggler .icon-bar:nth-child(4) {
	-webkit-transition: transform .35s ease-in-out;
	-moz-transition: transform .35s ease-in-out;
	-o-transition: transform .35s ease-in-out;
	transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
	-webkit-transform: rotate(135deg) translate(6px, -4px);
	-moz-transform: rotate(135deg) translate(6px, -4px);
	-o-transform: rotate(135deg) translate(6px, -4px);
	transform: rotate(135deg) translate(6px, -4px);
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
	width: 22px;
	visibility: hidden;
	background-color: transparent;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(4) {
	-webkit-transform: rotate(-135deg) translate(6px, 4px);
	-moz-transform: rotate(-135deg) translate(6px, 4px);
	-o-transform: rotate(-135deg) translate(6px, 4px);
	transform: rotate(-135deg) translate(6px, 4px);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#masthead #brand {
		padding: 1.5rem 0;
	}
	#masthead #brand img {
		height: 45px;
	}
	#masthead .navbar-toggler__wrapper {
		margin-left: 0;
		width: 0;
		visibility: hidden;
		opacity: 0;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	header.minified {
		position: fixed;
	}
	header.minified #masthead #brand {
		padding: 1rem 0;
	}
	header.minified #masthead #brand img {
		height: 35px;
	}
	header.minified #masthead .navbar-toggler__wrapper {
		margin-left: 1em;
		width: auto;
		visibility: visible;
		opacity: 1;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}


/* 05 Primary Navigation
--------------------------------------------- */
header nav {
	color: var(--white);
	background: var(--blue-dusty-dark--trans)
}

header nav .navbar {
	display: none;
}

header nav .site-name {
	margin-left: var(--margin-outside);
	padding: 1.5em 0;
}

header nav .site-name h1 {
	margin: 0;
}

header .site-name h1 a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

header .site-name h1 a:hover {
	text-decoration: none;
}

header nav .navbar-toggler__wrapper {
	margin-right: var(--margin-outside);
}

header nav .navbar-toggler.collapsed::before {
	content: 'MENU';
}

header nav .navbar-toggler:not(.collapsed)::before {
	content: 'CLOSE';
}

#site-nav-primary {
	padding: 1em var(--margin-outside) 1.5em;
}

.navbar-nav a, .navbar-nav a:link, .navbar-nav a:visited {
	color: inherit;
}

ul.navbar-nav {
	margin: 1em 0 0;
}

.navbar-nav li {
	list-style: none;
	text-transform: uppercase;
}

.navbar-nav > li {
	padding-left: 0.875rem;
}

.navbar-nav li>ul>li,
.navbar-nav li ul li {
	text-transform: capitalize;
}

.navbar-nav>li a {
	display: inline-block;
	padding: 0.625em;
	text-decoration: none;
	-webkit-transition: border ease-in 0.15s;
	-moz-transition: border ease-in 0.15s;
	-o-transition: border ease-in 0.15s;
	transition: border ease-in 0.15s;
	border-left: 6px solid transparent;
}

.navbar-nav>li a:hover {
	text-decoration: none;
	border-color: var(--genome-teal);
}

.nav-link .dropdown-toggle {
	display: inline-block;
	transition: transform ease 0.3s;
}

.nav-link[aria-expanded="true"] .dropdown-toggle {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.navbar-nav {
	display: grid;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
  position: relative;
	grid-auto-flow: column;
  grid-template-columns: repeat(var(--nav-columns, 1), minmax(0, 1fr));
  grid-template-rows: auto;
  column-gap: 0;
  transition: grid-template-columns ease-in-out 0.3s; /* Is this needed anymore? */
}

.column-divider {
    display: none !important;
}

.navbar-nav.columns-2,
.navbar-nav.columns-3,
.navbar-nav.columns-4 {
	--divider-color: var(--gray);
	--divider-thickness: 1px;
	background-repeat: no-repeat;
	background-size: var(--divider-thickness) 100%;
	background-image: none;
}

.navbar-nav.columns-2 {
	background-image:
		linear-gradient(var(--divider-color), var(--divider-color));
	background-position:
		calc(50% - var(--divider-thickness) / 2 - 0.5px) 0; /* Retina offset */
}
.navbar-nav.columns-3 {
	background-image: 
		linear-gradient(var(--divider-color), var(--divider-color)),
		linear-gradient(var(--divider-color), var(--divider-color));
	background-position:
		calc(33.3333% - var(--divider-thickness) / 2 - 0.5px) 0, /* Retina offset */
		calc(66.6666% - var(--divider-thickness) / 2 - 0.5px) 0; /* Retina offset */
}

.navbar-nav.columns-4 {
	background-image:
		linear-gradient(var(--divider-color), var(--divider-color)),
		linear-gradient(var(--divider-color), var(--divider-color)),
		linear-gradient(var(--divider-color), var(--divider-color));
	background-position:
		calc(25% - var(--divider-thickness) / 2 - 0.5px) 0, /* Retina offset */
		calc(50% - var(--divider-thickness) / 2 - 0.5px) 0, /* Retina offset */
		calc(75% - var(--divider-thickness) / 2 - 0.5px) 0; /* Retina offset */
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	header nav .navbar {
		display: flex;
		flex-wrap: nowrap;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	header.minified .navbar {
		display: none;
	}
	#site-nav-primary {
		border-top: var(--gray) 1px solid;
	}
	.navbar-nav.columns-2 {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	ul.navbar-nav {
		margin: 0;
	}
	.navbar-nav.columns-3 {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.navbar-nav.columns-2 {
		max-width: calc(70% - 6rem);
	}

	.navbar-nav.columns-3 {
		max-width: calc(85% - 6rem);
	}

	.navbar-nav.columns-4 {
		grid-template-columns: repeat(4, minmax(0,1fr));
		max-width: calc(100% - 6rem);
	}
}


/* 06 Footer
--------------------------------------------- */
footer {
	padding: 40px 0;
	color: var(--white);
	background: var(--blue-dusty);
	text-align: center;
}

footer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.logos-gov {
	text-align: center;
}

.logos-gov img {
	height: 45px;
	width: auto;
}

.logos-gov li {
	display: inline-block;
}

.logos-gov li+li {
	padding-left: 2.5em;
}

footer .navigation {
	margin: 2.25rem 0;
}	

footer .navigation a {
	color: inherit;
	border-color: transparent;
}

footer .navigation a:hover {
	text-decoration: none;
	border-color: var(--white);
}

footer .navigation li {
	margin: 0.75em 0;
}

footer .mantra img {
	height: 60px;
	width: auto;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	footer {
		padding: 50px 0;
	}
	.logos-gov img {
		height: 50px;
		width: auto;
	}
	.logos-gov li+li {
		padding-left: 4em;
	}
	footer .navigation {
		display: inline-flex;
		margin: 3.25rem 0;
	}
	footer .navigation ul {
		margin-left: 0;
		padding-left: 0;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-rule: var(--white) 4px solid;
		-moz-column-rule: var(--white) 4px solid;
		column-rule: var(--white) 4px solid;
		-webkit-column-gap: calc(6rem + 6px);
		-moz-column-gap: calc(6rem + 6px);
		column-gap: calc(6rem + 6px);
	}
	footer .navigation li {
		margin: 0;
		padding-right: 0;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	footer {
		padding: 60px 0;
		text-align: left;
	}
	.logos-gov li+li {
		padding-left: 2.5em;
	}
	footer .navigation {
		margin: 0;
	}	
	footer .navigation ul {
		margin-left: calc(100vw/40*2);
		padding-left: 1.25rem; /* Equal to 1/2 the padding on column-gap */
		border-left: var(--white) 4px solid;
		-webkit-column-gap: calc(2.5rem + 6px);
		-moz-column-gap: calc(2.5rem + 6px);
		column-gap: calc(2.5rem + 6px);
	}
	footer .mantra img {
		height: 60px;
		width: auto;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	footer .navigation li {
		padding-right: calc(100vw/40*2);
	}
}


/* 07 Main Content: Base Layout
--------------------------------------------- */
main {
	padding: 1.5em 0;
	color: var(--text-main);
}

main a {
	padding-bottom: 1px;
	text-decoration: none;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
	border-bottom: transparent 1px solid;
}

main a:hover {
	text-decoration: none;
	border-color: inherit;
}

main a.external::after {
	content: "\f35d";
	margin-left: 0.375em;
}

/* Breadcrumbs */
#breadcrumbs {
	padding: 0;
}

.home #breadcrumbs {
	display: none; /* Don't display breadcrumbs on home page */
}

#breadcrumbs .breadcrumb {
	display: block;
	margin-bottom: 2rem;
	padding: 0 0.5rem 0.75rem;
	color: var(--gray-dark);
	background: none;
	border-radius: 0;
	border-bottom: 1px solid var(--blue-dusty);
}

#breadcrumbs .breadcrumb-item {
	display: inline-block;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--gray-dark);
	content: "\203A";
}

#breadcrumbs .breadcrumb a,
#breadcrumbs .breadcrumb a:link,
#breadcrumbs .breadcrumb a:visited {
	color: var(--gray-dark);
}

#breadcrumbs .breadcrumb a:hover {
	color: var(--blue-royal);
}

#breadcrumbs .breadcrumb li.active {
	color: var(--magenta-dusty);
}

/* Main content */
main #main {
	padding: 0;
	background: transparent;
}

#main [id] {
	scroll-margin-top: calc(var(--header-height, 0px) + var(--header-offset, 0px)); /* Ensures anchor tag destinations don't appear under the header element, including block-level elements like <h2-8>, <div> and <p>.*/
}

#main h1 {
	padding: 0.125em inherit;
	color: var(--blue-dusty);
}

.home #main h1 {
	padding: 0.25em 0;
}

#main h2,
#main h3,
#main h4,
#main h5,
#main h6,
#main h7,
#main h8 {
	margin-top: 1.125em;
	color: var(--blue-dusty);
}

#main h2+h3,
#main h3+h4,
#main h4+h5,
#main h5+h6,
#main h6+h7,
#main h7+h8  {
	margin-top: inherit;
}

#main .image,
#main .figure,
#main .picture {
	margin: 2em 0;
}

#article-endnote {
	font-size: 0.75rem;
	font-weight: 400;
}

#article-endnote::before {
	display: block;
	margin: 2rem 0 1.25rem;
	height: 1px;
	width: 65%;
	content: '';
	background-color: var(--white-off);
}

#article-metadata::before {
	display: block;
	margin: 2rem 0 1.5rem;
	height: 8px;
	width: 4em;
	content: '';
	background: var(--magenta);
}

#article-metadata sup {
	top: 0.25em;
}

/* Table Controls */
.table-custom {
	
}

.table-custom > :not(caption) > * > *,
.table-borderless > :not(caption) > * > *,
.table-dark > :not(caption) > * > * {
	color: inherit;
	padding: 0.75rem;
}

.table-custom > :not(caption) > * > * {
	border-bottom: var(--gray-light--trans) 1px solid;
}

.table-dark > :not(caption) > * > * {
	border-bottom: var(--white-off) 1px solid;
}

.table-custom .table-group-divider {
	border-top: var(--gray-medium) 2px solid;
}

table img.table-icon[src*=svg] {
	height: 1.25em;
}

.table-custom > caption { 
	font-size: 0.875em;
	font-style: italic;	
	padding: 0.375em 0.625rem 0;
	line-height: normal;
}

.table td.highlight,
.table th.highlight {
	background-color: var(--dir-blue--highlight--trans);
	transition: background-color 0.15s ease-in-out;
}

.table-responsive { /* Helps keep column highlights visible during horizontal scrolling */
	overflow-x: auto;
	position: relative;
}

.table.table-custom th.cell-breakable,
.table.table-custom td.cell-breakable,
.table.table-custom th.cell-breakable a,
.table.table-custom td.cell-breakable a {
  white-space: normal !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

.table-sticky-header thead {
	position: sticky;
	top: calc(var(--header-height, 0px) + var(--header-offset, 0px));
	z-index: 5;
	background-color: inherit;	
	transition:
		background-color 0.3s ease,
		opacity 0.3s ease,
		top 0.2s ease;
}

.table-sticky-header thead th,
.table-sticky-header thead td {
	background-color: inherit;
	opacity: 1;
	box-shadow: none;
}

.table-sticky-header thead.is-stuck th,
.table-sticky-header thead.is-stuck td {
	background-color: var(--bs-gray-200) !important;
	opacity: 0.90;
	box-shadow: none; /* prevent per-cell shadow overlap */
}

.table-sticky-header thead.is-stuck {
	box-shadow:
		inset 0 -2px 0 var(--gray-medium), /* solid 2 px "border" */
		0 2px 6px rgba(0, 0, 0, 0.15);
}

.table-beyond-width { /* Override Bootstrap's 100% table width */
  width: auto !important;
  max-width: none !important;
  table-layout: auto;
}

.table-beyond-width th,
.table-beyond-width td { /* Prevent Bootstrap's wrapping so explicit width is respected */
  white-space: nowrap;
}

/* Popover, Tooltip, & Modal Controls */
.tooltip.tooltip-wide .tooltip-inner {
  max-width: 300px;
  white-space: normal;
}

.popover.popover-wide {
  max-width: 600px;
  white-space: normal;
}

.modal .modal-dialog .close {
  position: absolute;
  right: 1rem;
	padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
	outline: none;
  background-color: transparent;
  font-size: 1.125rem;
  transition: 0.25s linear;
	opacity: 1;
}

.modal .modal-dialog .close.alone {
	right: 0rem;
}

.modal .modal-dialog .close:before,
.modal .modal-dialog .close:after {
  position: absolute;
  content: '';
  width: 1.25rem;
  height: 0.125rem;
  background-color: var(--blue-dusty);
}

.modal .modal-dialog .close:before {
  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.modal .modal-dialog .close:after {
  -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.modal .modal-dialog .close:hover {
  -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	opacity: 1;
}

.modal .modal-dialog .close:hover:before,
.modal .modal-dialog .close:hover:after {
  background-color: var(--blue-sea);
}

.modal a {
	word-break: break-all;
}

.modal h2.modal-title {
	margin-top: 0.25em !important;
}

.modal h3 {
	margin-top: 0 !important;
}

.modal pre {
	white-space: pre-wrap;
	word-break: break-all;
}

.modal pre code {
	word-break: break-all;
}

img[data-bs-toggle="modal"] {
	cursor: pointer;
}

.modal .caption-custom {
  padding: 0.5em;
  text-align: center;
}

.modal .caption-custom p {
  margin-bottom: 0.5em;
}

/* Form Controls */
#main form {
	margin: 1.5rem 0 0;
}

#main .form-group {
	margin-bottom: 2rem;
}

#main form .btn-primary,
#main form .btn-secondary,
#main .btn-custom {
	margin-top: 1.25em;
	padding: 0.5rem 1rem;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s;
	border: none;
	background-color: inherit;
	border-radius: 0;	
}

#main form .btn-primary,
#main .btn-primary.btn-custom {
	background-color: var(--blue-dusty);
}

#main form .btn-secondary,
#main .btn-secondary.btn-custom {
	background-color: var(--bs-btn-bg);
}

#main form .btn-primary:hover,
#main form .btn-secondary:hover,
#main .btn-custom:hover,
#main .btn-primary.btn-custom:hover,
#main .btn-secondary.btn-custom:hover {
	background: var(--magenta) !important;
}

/* Tables of content [aside] */
aside#toc {
	position: sticky;
	top: calc(var(--header-height, 0px) + var(--header-offset, 0px));
	z-index: 10;
	align-self: start;
}

aside#toc h2 {
	padding-bottom: 0.5rem;
	border-bottom: var(--gray-light) 1px solid;
}

nav#toc-nav .nav > li {
	padding-left: 0.25rem;
}

nav#toc-nav .nav > li > a {
	display: block;
	padding: 0.25em 0.625em;
	text-decoration: none;
	color: var(--gray-medium);
	-webkit-transition: color 0.15s ease-in, border 0.15s ease-in;
  -moz-transition: color 0.15s ease-in, border 0.15s ease-in;
  -o-transition: color 0.15s ease-in, border 0.15s ease-in;
  transition: color 0.15s ease-in, border 0.15s ease-in;
	border-left: 3px solid transparent;
}

nav#toc-nav .nav > li > a:hover,
nav#toc-nav .nav > li > a.active {
	color: var(--blue-dusty);
	text-decoration: none;
	border-color: var(--genome-teal);
}

nav#toc-nav .nav-link.active {
  background-color: var(--bs-gray-100);
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	main {
		padding: 1.5em 0 2em;
	}
	#breadcrumbs .breadcrumb {
		padding: 0 1rem 0.75rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
	.table-responsive {
    overflow-y: visible !important;
  }
	aside#toc {
		position: inherit;
		z-index: auto;
		align-self: auto;
	}
}

@media (min-width: 769px) {
	.table-responsive {
    overflow-x: auto;
    overflow-y: visible !important; /* Still allow sticky */
  }
}