/*
* @license Apache-2.0
*
* Copyright (c) 2019 The Stdlib Authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/*
* Layout stylesheet.
*
* 1. General rules.
* 2. Clearfix.
* 3. Positioning.
* 4. Visibility.
* 5. Main.
* 6. Lists.
* 7. Definition lists.
* 8. Blockquotes.
* 9. Horizontal rules.
* 10. Tables.
* 11. Code.
* 12. Main navigation.
* 13. Equations.
* 14. Elements.
* 15. Icons.
* 16. Printing.
*/

/*
* General rules.
*/

html {
	box-sizing: border-box;
}

html,
body {
	min-height: 100vh;
}

body {
	margin: 0;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

input {
	margin: 0;
}

img {
	box-sizing: content-box;
	max-width: 100%;
}

/*
* Headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 1.5em;
	margin-bottom: 1em;
}

h1,
h2 {
	padding-bottom: 0.3em;
}

/*
* Clearfix.
*/

.group:before,
.group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	zoom: 1; /* for IE 6/7 (trigger hasLayout) */
}

/*
* Positioning.
*/

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.right {
	text-align: right;
	margin-left: auto;
	margin-right: 0;
}

/*
* Visibility.
*/

.invisible {
	visibility: hidden;
}

/*
* Root.
*/

#root {
	position: relative;
	width: 100%;
}

/*
* Main.
*/

.main {
	position: relative;
	width: 100%;
	min-height: 100vh;

	margin-bottom: 7em;
	padding-top: 7.5em; /* 16px*7.5 = 120px */

	/*
	* Initialize the render layer to allow for hardware acceleration.
	*/

	/* Add transform fallbacks for browsers not supporting `translate3d`. */
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	-webkit-transform: translateZ(0) translateX(0);
	-moz-transform: translateZ(0) translateX(0);
	-ms-transform: translateZ(0) translateX(0);
	-o-transform: translateZ(0) translateX(0);
	transform: translateZ(0) translateX(0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	/*
	* Specify scroll margins for jump links.
	*/

	/* top | right | bottom | left */
	scroll-margin: 6.25em 0 0 0;
}

/*
* When the side menu is visible, translate the "main" element.
*/
.main.translate-right {
	/* Add transform fallbacks for browsers not supporting `translate3d`. Translate in order to accommodate the side menu. */
	-webkit-transform: translateX(300px);
	-moz-transform: translateX(300px);
	-ms-transform: translateX(300px);
	-o-transform: translateX(300px);
	transform: translateX(300px);

	-webkit-transform: translateZ(0) translateX(300px);
	-moz-transform: translateZ(0) translateX(300px);
	-ms-transform: translateZ(0) translateX(300px);
	-o-transform: translateZ(0) translateX(300px);
	transform: translateZ(0) translateX(300px);

	-webkit-transform: translate3d(300px, 0, 0);
	-moz-transform: translate3d(300px, 0, 0);
	-ms-transform: translate3d(300px, 0, 0);
	-o-transform: translate3d(300px, 0, 0);
	transform: translate3d(300px, 0, 0);

	/*
	* Specify scroll margins for jump links.
	*/

	/* top | right | bottom | left */
	scroll-margin: 6.25em 0 0 300px;
}

/*
* Media queries.
*
* [1]: https://zellwk.com/blog/media-query-units/
*/

@media only screen and (max-width: 53.75em) { /* 860px */
	.main {
		width: 86%;
		margin-left: 7%;
	}

	.main.translate-right {
		/* Add transform fallbacks for browsers not supporting `translate3d`. Translate in order to accommodate the side menu. */
		-webkit-transform: translateX(350px);
		-moz-transform: translateX(350px);
		-ms-transform: translateX(350px);
		-o-transform: translateX(350px);
		transform: translateX(350px);

		-webkit-transform: translateZ(0) translateX(350px);
		-moz-transform: translateZ(0) translateX(350px);
		-ms-transform: translateZ(0) translateX(350px);
		-o-transform: translateZ(0) translateX(350px);
		transform: translateZ(0) translateX(350px);

		-webkit-transform: translate3d(350px, 0, 0);
		-moz-transform: translate3d(350px, 0, 0);
		-ms-transform: translate3d(350px, 0, 0);
		-o-transform: translate3d(350px, 0, 0);
		transform: translate3d(350px, 0, 0);

		/*
		* Specify scroll margins for jump links.
		*/

		/* top | right | bottom | left */
		scroll-margin: 6.25em 0 0 300px;
	}
}

@media only screen and (max-width: 45em) { /* 720px */
	.main {
		width: 94%;
		margin-left: 3%;
	}
}

/*
* README.
*/

.readme {
	min-height: 100%;
	margin-left: 12.5%;
	margin-bottom: 12px;
}

.readme-content {
	/*
	* Specify scroll margins for jump links.
	*/

	/* top | right | bottom | left */
	scroll-padding: 12.5em 0 0 0;
}

.readme h1 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.readme > h1,
.readme > section > h1,
.readme > h2,
.readme > section > h2,
.readme > h3,
.readme > section > h3,
.readme > h4,
.readme > section > h4,
.readme > h5,
.readme > section > h5,
.readme > h6,
.readme > section > h6,
.readme > section,
.readme > section > section,
.readme > p,
.readme > section > p,
.readme > blockquote,
.readme > section > blockquote,
.readme > pre,
.readme > section > pre,
.readme > code,
.readme > section > code,
.readme > ul,
.readme > section > ul,
.readme > hr,
.readme > section > hr,
.readme > nav,
.readme > section > nav {
	min-width: 594px;
	max-width: 720px;
}

.readme > h1,
.readme > section h1,
.readme > h2,
.readme > section h2,
.readme > h3,
.readme > section h3,
.readme > h4,
.readme > section h4,
.readme > h5,
.readme > section h5,
.readme > h6,
.readme > section h6 {
	/*
	* Specify scroll margins for jump links.
	*/

	/* top | right | bottom | left */
	scroll-margin: 6.25em 0 0 0;
}

.readme p,
.readme blockquote,
.readme dl,
.readme table,
.readme pre {
	margin-top: 0;
	margin-bottom: 1em;
}

/*
* Media queries.
*
* [1]: https://zellwk.com/blog/media-query-units/
*/

@media only screen and (max-width: 76.25em) { /* 1220px */
	.readme > h1,
	.readme > section > h1,
	.readme > h2,
	.readme > section > h2,
	.readme > h3,
	.readme > section > h3,
	.readme > h4,
	.readme > section > h4,
	.readme > h5,
	.readme > section > h5,
	.readme > h6,
	.readme > section > h6,
	.readme > section,
	.readme > section > section,
	.readme > p,
	.readme > section > p,
	.readme > blockquote,
	.readme > section > blockquote,
	.readme > pre,
	.readme > section > pre,
	.readme > code,
	.readme > section > code,
	.readme > ul,
	.readme > section > ul,
	.readme > hr,
	.readme > section > hr,
	.readme > nav,
	.readme > section > nav {
		width: 66.66666666666%;
	}
}

@media only screen and (max-width: 67.5em) { /* 1080px */
	.readme > h1,
	.readme > section > h1,
	.readme > h2,
	.readme > section > h2,
	.readme > h3,
	.readme > section > h3,
	.readme > h4,
	.readme > section > h4,
	.readme > h5,
	.readme > section > h5,
	.readme > h6,
	.readme > section > h6,
	.readme > section,
	.readme > section > section,
	.readme > p,
	.readme > section > p,
	.readme > blockquote,
	.readme > section > blockquote,
	.readme > pre,
	.readme > section > pre,
	.readme > code,
	.readme > section > code,
	.readme > ul,
	.readme > section > ul,
	.readme > hr,
	.readme > section > hr,
	.readme > nav,
	.readme > section > nav {
		width: 80%;
		max-width: 700px;
	}
}

@media only screen and (max-width: 53.75em) { /* 860px */
	.readme {
		margin-left: 0;
	}

	.readme > h1,
	.readme > section > h1,
	.readme > h2,
	.readme > section > h2,
	.readme > h3,
	.readme > section > h3,
	.readme > h4,
	.readme > section > h4,
	.readme > h5,
	.readme > section > h5,
	.readme > h6,
	.readme > section > h6,
	.readme > section,
	.readme > section > section,
	.readme > p,
	.readme > section > p,
	.readme > blockquote,
	.readme > section > blockquote,
	.readme > pre,
	.readme > section > pre,
	.readme > code,
	.readme > section > code,
	.readme > ul,
	.readme > section > ul,
	.readme > hr,
	.readme > section > hr,
	.readme > nav,
	.readme > section > nav {
		width: 96%;
		max-width: 700px;
	}
}

@media only screen and (max-width: 45em) { /* 720px */
	.readme {
		margin-left: 0;
	}

	.readme > h1,
	.readme > section > h1,
	.readme > h2,
	.readme > section > h2,
	.readme > h3,
	.readme > section > h3,
	.readme > h4,
	.readme > section > h4,
	.readme > h5,
	.readme > section > h5,
	.readme > h6,
	.readme > section > h6,
	.readme > section,
	.readme > section > section,
	.readme > p,
	.readme > section > p,
	.readme > blockquote,
	.readme > section > blockquote,
	.readme > pre,
	.readme > section > pre,
	.readme > code,
	.readme > section > code,
	.readme > ul,
	.readme > section > ul,
	.readme > hr,
	.readme > section > hr,
	.readme > nav,
	.readme > section > nav {
		width: 100%;
		min-width: 100%;
	}
}

/*
* Lists.
*/

.readme ul,
.readme ol {
	margin-top: 0;
	margin-bottom: 1em;
	padding-left: 2em;
}

.readme ul ul,
.readme ul ol,
.readme ol ol,
.readme ol ul {
	margin-top: 0;
	margin-bottom: 0;
}

/*
* Set the top margin of any list item children which are paragraphs.
*/
.readme li > p {
	margin-top: 1em;
}

/*
* Add space between adjacent list items.
*/
.readme li + li {
	margin-top: 0.25em;
}

/*
* Define special rules for lists within a namespace table of contents.
*/
.readme .namespace-toc ul {
	padding-left: 0.5em;
}

.readme .namespace-toc ul li {
	display: flex;
	flex-shrink: 1;
}

.readme .namespace-toc ul li .signature {
	width: 50%;
	min-width: 50%;
}

.readme .namespace-toc ul li .delimiter {
	display: none;
}

/*
* Define special rules for lists of related packages.
*/

.readme .related ul {
	padding-left: 1em;
	margin-bottom: 1.5em;
}

.readme .related ul li .delimiter {
	display: none;
}

.readme .related ul li .package-name {
	display: block;

	margin-top: 0.75em;
	margin-bottom: 0.2em;
}

.readme .related ul li .description {
	display: block;

	margin-bottom: 0.5em;
	padding-left: 2em;
}

/*
* Define special rules for breadcrumb navigation.
*/

.readme .readme-breadcrumbs ol {
	margin-bottom: 0;
	padding-left: 0;
}

.readme .readme-breadcrumbs li {
	height: 1.2em;

	margin-top: 0;
}

/*
* Definition lists.
*/

.readme dl {
	padding: 0;
}

.readme dl dt {
	margin-top: 1em;
	padding: 0;
}

.readme dl dd {
	margin-bottom: 1em;
	padding: 0 1em;
}

.readme dd {
	margin-left: 0;
}

/*
* Blockquotes.
*/

.readme h1 + blockquote {
	margin-bottom: 2em;
}

.readme blockquote {
	padding: 0 1.0em;
}

.readme blockquote > :first-child {
	margin-top: 0;
}

.readme blockquote > :last-child {
	margin-bottom: 0;
}

/*
* Horizontal rules.
*/

.readme hr {
	height: 0.25em;
	margin: 1.5em 0;
	padding: 0;
}

.readme hr::before {
	display: table;
	content: "";
}

.readme .related hr {
	display: none;
}

/*
* Tables.
*/

.readme table {
	display: block;
	width: 100%;
}

.readme table th,
.readme table td {
	padding: 6px 13px;
}

.readme td,
.readme th {
	padding: 0;
}

/*
* Code.
*/

.readme pre {
	padding: 1em;
}

.readme pre code {
	display: inline;
	max-width: inherit;
	padding: 0;
}

.readme code {
	margin: 0;
	padding: 0;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.readme code::before,
.readme code::after {
	letter-spacing: -0.2em;
	content: "\00a0";
}

.readme pre code::before,
.readme pre code::after {
	content: normal;
}

/*
* Keyboard elements.
*/

.readme kbd {
	display: inline-block;
	padding: 3px 5px;
}

/*
* Related packages section.
*/

.readme .related {
	margin-top: 3em;
}

.readme .related h2 {
	margin-top: 0;
	padding-top: 0.7em;
	padding-bottom: 0.4em;
	padding-left: 0.5em;
}

.readme .related h2:before {
	display: inline-block;
	padding-right: 0.3em;

	vertical-align: middle;
}

/*
* Breadcrumb navigation.
*/

.readme .readme-breadcrumbs {
	margin: 0;
}

.readme .readme-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;

	align-items: center;

	margin: 0;
	padding: 0;
}

.readme .readme-breadcrumbs .breadcrumb-separator {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.readme .readme-breadcrumbs .icon {
	display: inline-block;

	height: 1em;
	width: 1em;

	margin-right: 0.5em;

	vertical-align: text-top;
}

/*
* README bottom navigation.
*/

.readme .readme-addendum {
	margin-top: 3em;
	margin-bottom: 400px;
}

.readme .readme-bottom-nav .edit-print-wrapper {
	display: flex;
	justify-content: space-between;
}

.readme .readme-bottom-nav .print-button {
	padding: 0;
	margin: 0;
}

.readme .readme-bottom-nav .pagination {
	display: flex;
	justify-content: space-between;

	margin-top: 2.5em;
	padding-top: 3em;
}

.readme .readme-bottom-nav .pagination-link,
.readme .readme-bottom-nav .pagination-link-placeholder {
	width: 50%;
	padding: 1em;
}

.readme .readme-bottom-nav .pagination-link-prev {
	padding-left: 0.5em;
}

.readme .readme-bottom-nav .pagination-link-next {
	padding-right: 0.5em;
}

.readme .readme-bottom-nav .pagination-link-label {
	margin-top: 0.2em;
}

/*
* Feedback form.
*/

.readme-feedback {
	display: block;
	width: 100%;

	margin-top: 2em;
	padding-left: 0.5em;
}

.readme-feedback > fieldset > legend {
	padding: 0 2em;
}

.readme-feedback-sentiment-wrapper {
	display: flex;

	justify-content: center;

	margin-top: 1em;
}

.readme-feedback-sentiment-label {
	display: flex;

	height: 4em;
	width: 4em;

	margin: 0 0.5em;

	align-items: center;
	justify-content: center;
}

.readme-feedback-sentiment-label .icon {
	height: 1.5em;

	margin: 0;
}

.readme-feedback-submit-buttons {
	display: flex;

	margin: 1em 0;

	justify-content: flex-end;
}

.readme-feedback-submit-buttons button {
	height: 2.5em;
	width: 7em;

	margin: 0 0.5em;
}

.readme-feedback-submit-buttons button:last-child {
	margin-right: 0;
}

.readme-feedback-footnote {
	padding-top: 1em;
}

/*
* Runner results.
*/

.runner .badge-list {
	display: flex;
	margin: 0;
	padding: 0;
}

.runner .badge-list .badge {
	margin: 0;
	margin-right: 16px;
}

.runner .badge-list .badge a {
	/* vertical | horizontal */
	padding: 0.3em 1em;
}

.runner-results p {
	margin-bottom: 0;
}

.runner-results .icon {
	display: inline-block;

	height: 1em;
	width: 1em;

	margin-right: 0.5em;

	vertical-align: text-top;
}

.runner-results .test-block,
.runner-results .benchmark-block {
	margin-bottom: 1em;
	padding-left: 1em;
}

.runner-results .test-block .test-description,
.runner-results .benchmark-block .benchmark-description {
	margin-bottom: 0.5em;
}

.runner-results .test-block .test-pass,
.runner-results .test-block .test-fail,
.runner-results .benchmark-block .benchmark-iterations,
.runner-results .benchmark-block .benchmark-elapsed,
.runner-results .benchmark-block .benchmark-rate {
	margin-left: 1em;
}

.runner-results .test-block .test-result-icon,
.runner-results .benchmark-block .benchmark-result-icon {
	margin-right: 0.5em;
}

/*
* Search results.
*/

.search-results h1 {
	display: flex;
}

.search-results h1 span {
	flex-grow: 1;
}

/*
* Set special rules for search results lists.
*/
.search-results .search-results-list {
	padding-left: 0;
}

.search-results .search-results-list-item {
	display: block;
	margin-top: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 10px;
	padding-right: 10px;
}

.search-results .search-results-list-item-title {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.search-results .search-results-list-item-url {
	margin-top: 0;
	margin-bottom: 0;
}

.search-results .search-results-list-item-url .icon {
	display: inline-block;
	height: 1em;
	width: 1em;
	vertical-align: text-bottom;
}

.search-results .search-results-list-item-url-link {
	padding-left: 0.5em;
}

.search-results .search-results-list-item-description {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0;
}

/*
* Settings menu.
*/

.settings-menu-overlay {
	display: flex;

	z-index: 1200;

	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;

	padding-top: 40px;
	padding-bottom: 32px;
	padding-left: 40px;
	padding-right: 40px;

	align-items: flex-start;
	justify-content: center;
}

.settings-menu-blocker {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.settings-menu-wrapper {
	display: flex;

	flex-direction: column;

	height: 100%;
	min-height: 320px;
	max-height: 832px;
	width: 100%;
	max-width: 380px; /* 1040px */
	overflow: auto;
}

.settings-menu-head {
	display: flex;

	margin-bottom: 1.5em;

	padding-right: 10px;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 10px;

	align-items: center;
	justify-content: space-between;
}

.settings-menu-head h1 {
	display: flex;
	width: 100%;

	margin: 0;
	margin-left: 48px;
	padding: 0;
}

.settings-menu-head h1 span {
	flex: 1 0 0;
}

.settings-menu-head .icon-button.settings-menu-close-button {
	width: 48px;
	height: 48px;
}

.settings-menu-head .icon-button.settings-menu-close-button .icon {
	margin-left: 12px;
	margin-right: 12px;
}

.settings-menu-item {
	width: 100%;

	padding-left: 0.75rem;
	padding-right: 0.75rem;

	margin-bottom: 1.5rem;
}

.settings-menu-item-label {
	display: block;

	margin-bottom: 0.5rem;
}

.settings-select-wrapper {
	position: relative;
}

.settings-select {
	display: block;
	appearance: none;

	width: 100%;

	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	padding-left: 1rem;
	padding-right: 2rem;
}

.settings-select-custom {
	display: flex;

	position: absolute;

	right: 0;
	top: 0;
	bottom: 0;

	padding-left: 0.5rem;
	padding-right: 0.5rem;

	align-items: center;
}

.settings-select-custom-icon {
	height: 1rem;
	width: 1rem;
}

.settings-checkbox-wrapper {
	display: flex;
}

.settings-checkbox {
	margin-right: 0.5rem;
	margin-top: 0.25rem;
}

.settings-checkbox-label p {
	margin-bottom: 1em;
}

/*
* Documentation help.
*/

.readme.help h1 {
	display: flex;
}

.readme.help h1 span {
	flex-grow: 1;
}

/*
* Error decoder.
*/

.readme.error-decoder h1 {
	display: flex;
}

.readme.error-decoder h1 span {
	flex-grow: 1;
}

.readme.error-decoder .error-decoder-content > p,
.readme.error-decoder .error-decoder-message > p,
.readme.error-decoder .error-decoder-message pre {
	margin-top: 2em;
}

.readme.error-decoder p.error-decoder-landing {
	margin-top: 1.5em;
}

.readme.error-decoder .error-decoder-message pre > code {
	display: block;

	padding: 1em 1em;
}

/*
* Main navigation.
*/

/*
* Mobile first top navigation.
*/

.top-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 100;

	width: 100%;
	min-height: 4em;

	padding: 0;
}

.top-nav .icon-button {
	position: relative;
	padding: 0;
}

.top-nav .icon-button::after {
	display: none;

	position: absolute;
	width: 100px;
	height: 100px;

	margin-top: -50px;
	margin-left: -50px;

	top: 50%;
	left: 50%;
}

.top-nav .icon-button:focus:not(:active)::after {
	display: block;
}

.top-nav .icon {
	height: 1.5em;
	width: 1.5em;

	margin: 1.25em;
}

.top-nav-divider {
	height: 2em;

	margin-top: 1em;
	margin-left: 0;
	margin-right: 0;
}

.top-nav-search {
	height: 4em;

	margin-left: auto;
	margin-right: 0;

	padding-left: 12px;
	padding-top: 3px;
}

.top-nav-search-button.icon-button {
	display: none;
}

/*
* When a search element is active, we want to grow the search box to occupy all available width.
*/
.top-nav-search.top-nav-search-active {
	flex: 1;
	margin-left: 8px;
}

/*
* On smaller devices, we don't want to automatically display these navigational elements.
*/
.top-nav-items {
	display: none;
	margin-top: -1em;
}

/*
* We only want to display the dropdown menu when the side menu is *not* displayed.
*/
:not(.side-menu-open) .top-nav-items-dropdown {
	order: 100;
	display: block;
	width: 100%;
}

.top-nav-item {
	height: 4em;
}

.top-nav-item a {
	display: block;
	padding: 0 1em;
}

/*
* On smaller devices, when the side menu is open, we don't want to allow the user to interact with package navigation or search due to lack of available screen real estate.
*/
.side-menu-open .top-nav-items-menu-button,
.side-menu-open .top-nav-search-button,
.side-menu-open .top-nav-search {
	display: none !important;
}

/*
* On smaller devices, when the side menu is open, because search is not shown, we want to push the divider as far as we can to the right.
*/
.side-menu-open .top-nav-divider {
	margin-left: auto;
}

@media only screen and (min-width: 24em) { /* 384px */
	/*
	* Once we have enough real estate, add some padding.
	*/
	.top-nav-search {
		padding-left: 16px;
	}
}

@media only screen and (min-width: 33em) { /* 528px */
	/*
	* Once we have enough real estate, show the search icon button.
	*/
	.top-nav-search-button.icon-button {
		display: inline-flex;
	}
}

@media only screen and (min-width: 50em) { /* 800px */
	.side-menu-open .top-nav-divider {
		margin-left: 0;
	}

	/*
	* For larger devices, we allow search even though the side menu is open.
	*/
	.side-menu-open .top-nav-search-button,
	.side-menu-open .top-nav-search {
		display: inline-flex !important;
	}
}

@media only screen and (min-width: 54em) { /* 864px */
	/*
	* On larger devices, we display all package navigation items inline and not in a dropdown, so we should hide this button.
	*/
	.top-nav-items-menu-button {
		display: none !important;
	}

	/*
	* When the side menu is not open, display all package navigation items inline.
	*/
	.top-nav-items,
	.top-nav-items-dropdown {
		display: inline-flex;
		position: relative;
		float: right;

		order: 0;

		height: 100%;
		width: auto;
		margin-top: 0;
	}
	.side-menu-open .top-nav-items,
	.side-menu-open .top-nav-items-dropdown {
		display: none;
	}
}

@media only screen and (min-width: 76.25em) { /* 1220px */
	/*
	* For large devices, always display the package navigation items inline.
	*/
	.side-menu-open .top-nav-items,
	.side-menu-open .top-nav-items-dropdown {
		display: inline-flex !important;
	}
}

/*
* When a download progress bar is displayed, ensure it is visible at the top of the top navigation element.
*/
.top-nav .download-progress {
	z-index: 2000;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}

/*
* Bottom navigation.
*/

.bottom-nav {
	width: 100%;
	min-height: 5em;
}

/*
* Side menu.
*/

.side-menu-head {
	display: flex;

	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 10px;

	align-items: center;
	justify-content: space-between;
}

.side-menu-head .icon-button.side-menu-close-button {
	width: 48px;
	height: 48px;
}

.side-menu-head .icon-button.side-menu-close-button .icon {
	margin: 12px;
}

.side-menu-wrapper {
	width: 0;
}

@media only screen and (min-width: 34em) { /* 544px */
	/*
	* When the side menu is open, set the menu wrapper width in order to push over top-navigation items.
	*/
	.side-menu-open .side-menu-wrapper {
		width: 350px;
	}
}

.side-menu-drawer {
	width: 350px;
}

.side-menu-drawer {
	z-index: 121;
}

.side-menu-version-wrapper {
	display: flex;
	justify-content: space-between;
	height: 2.5em;
}

.side-menu-version-wrapper label {
	height: 1.5em;

	margin-top: 0.5em;

	padding-left: 1em;
	padding-right: 1em;
}

.side-menu-version-select-wrapper {
	flex-grow: 1;
	height: 100%;
	padding-right: 0.5em;
}

.side-menu-version-select {
	height: 100%;
	width: 100%;
	padding-left: 1em;
}

.side-menu-filter {
	position: relative;
	margin-top: 3px;
}

.side-menu-filter-input {
	width: 100%;
	height: 2.5em;

	padding-left: 1em;
}

.side-menu-filter-clear {
	position: absolute;
	top: 0.4em;
	right: 4px;
}

.side-menu-list-item.MuiListItem-root,
.side-menu-list-item-namespace.MuiListItem-root {
	display: flex;
	height: 2.25em;
	padding: 0;
}

.side-menu-list-item a,
.side-menu-list-item-namespace a {
	flex-grow: 1;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

button.side-menu-list-item-namespace-icon {
	width: 2.25em;
	padding: 0.5em;
}

.side-menu-list-wrapper {
	position: relative;
	height: calc(100vh - 116px); /* -140px with version menu */
}

.side-menu-list {
	height: 100%;
	padding-left: 0;
}

/*
* Create a pseudo-element after each side menu list item which we can use to create button press animation. By default, this pseudo-element is hidden.
*/
.side-menu-list-item a::after,
.side-menu-list-item-namespace a::after {
	display: none;
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/*
* When a user clicks on a side menu list item, we display the pseudo-element.
*/
.side-menu-list-item a:focus:not(:active)::after,
.side-menu-list-item-namespace a:focus:not(active)::after {
 	display: block;
}

/*
* Skip links.
*/

.skip-link {
	position: absolute;
	top: -5em;
	left: 0;
	right: 0;

	z-index: 10000;

	margin-left: auto;
	margin-right: auto;

	padding: 0.5em;
	padding-left: 1em;
	padding-right: 1em;

	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	width: max-content;
}

.skip-link:focus {
	top: 0;
}

/*
* Equations.
*/

.equation {
	margin-top: 0;
	margin-bottom: 1em;
}

/*
* Banner.
*/

.banner .banner-wrapper {
	margin-top: 3em;
	margin-bottom: 4.5em;
}

.banner .banner-tagline {
	margin-top: 0.75em;
}

/*
* Icons.
*/

.icon {
	display: inline-block;

	vertical-align: text-bottom;
}

.readme .readme-bottom-nav .edit-icon,
.readme .readme-bottom-nav .print-icon {
	width: 1.125em;
	height: 1.125em;

	margin-right: 0.25em;
}

/*
* Heading icon buttons.
*/

h1 button.icon-button {
	position: relative;

	width: 1.4em;
	height: 1.4em;

	padding: 0;
}

h1 button.icon-button::after {
	display: none;

	position: absolute;
	width: 100px;
	height: 100px;

	margin-top: -50px;
	margin-left: -50px;

	top: 50%;
	left: 50%;
}

h1 button.icon-button:focus:not(:active)::after {
	display: block;
}

h1 button.icon-button .icon {
	height: 0.6em;
	width: 0.6em;

	margin: 0;

	vertical-align: baseline;
}

/*
* Printing.
*/

@media print {
	/*
	* Hide navigational elements when printing.
	*/
	.top-nav {
		display: none;
	}

	.side-menu-wrapper {
		display: none;
	}

	.bottom-nav {
		display: none;
	}

	.readme-addendum {
		display: none;
	}

	/*
	* Ensure that the main content is not shifted to the right (e.g., due to the side menu being open).
	*/
	.main.translate-right {
		transform: translate3d(0, 0, 0);
	}

	.main {
		padding-top: 0;
	}

	.readme {
		padding-top: 1.5em;
		margin-left: 0;
	}

	/*
	* Adjust the position of additional print content.
	*/
	.print-addendum {
		margin-top: 2em;
	}

	.print-addendum p {
		margin-top: 1em;
	}
}

/*
* Define standard page margins when printing.
*/

@page {
	margin-top: 0.5in;
	margin-left: 0.5in;
	margin-right: 0.5in;
	margin-bottom: 0.5in;
}