header a,
header a:hover {
	color: var(--bg)
}

header,
nav {
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999
}

header {
	height: 48px;
	background-color: #161923;
	top: 0
}

header .branding {
	color: hsla(0, 0%, 100%, .75);
	font-size: 20px;
	padding-left: 16px
}

header .branding a {
	text-decoration: none
}

header .branding span {
	font-weight: 100
}

header input {
	margin-left: 16px;
	margin-right: 4px;
	height: 40px;
	padding: 12px;
	outline: none;
	flex-grow: 1;
	background: rgba(255, 255, 240, .1);
	line-height: 1;
	font-size: 16px;
	color: var(--bg);
	box-shadow: inset 0 -2px 0 rgba(255, 255, 240, .5), inset 0 0 0 2px transparent;
	border: none;
	transition: all .2s ease
}

header input:hover {
	transition: none;
	box-shadow: inset 0 -2px 0 transparent, inset 0 0 0 2px rgba(255, 255, 240, .5)
}

header input:focus,
header input:focus:hover {
	box-shadow: 0 -2px 0 transparent inset, 0 0 0 2px var(--ac) inset
}

nav {
	top: 48px;
	height: 32px;
	background-color: rgba(22, 25, 35, .05);
	box-shadow: inset 0 -1px 0 rgba(22, 25, 35, .1)
}

nav .toggles {
	display: flex;
	align-items: center;
	height: 100%;
	color: var(--fg);
	font-size: .8rem;
	margin: 0 16px
}

nav .toggles .title {
	opacity: .75
}

nav ul {
	list-style-type: none
}

nav ul,
nav ul li {
	display: flex;
	height: 100%;
	align-items: center
}

nav ul li {
	padding: 4px 8px;
	color: var(--fg);
	font-weight: 500;
	transition: all .2s ease;
	cursor: pointer
}

nav ul li:hover {
	color: var(--bg);
	background-color: var(--ac);
	transition: none
}

nav ul li.active {
	box-shadow: 0 -2px 0 var(--ac) inset
}

aside {
	flex-grow: 1;
	background-color: rgba(22, 25, 35, .05);
	border-right: 1px solid rgba(22, 25, 35, .1);
	line-height: 1.1;
	max-width: 65%;
	min-width: 30%;
	overflow-y: auto
}

.empty {
	padding: 16px
}

.parameters {
	margin-bottom: 1rem
}

.details {
	padding: 0 16px;
	position: -webkit-sticky;
	position: sticky
}

.details .info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid rgba(22, 25, 35, .1);
	font-size: .8rem;
	line-height: 1
}

.details .info .apiset,
.details .info .namespace {
	font-weight: 500
}

.details .info .apiset span,
.details .info .namespace span {
	opacity: .75;
	font-weight: 400
}

.details>h2 {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1;
	margin-bottom: 8px
}

.details>* {
	margin-bottom: 16px
}

.details>.hash>span {
	--visibility: hidden;
	opacity: .5;
	display: inline-block;
	margin-right: 8px
}

.details .code {
	width: calc(100% + 32px);
	margin-left: -16px;
	margin-right: -16px
}

.details .code .lowlight .hljs {
	padding: 16px;
	font-weight: 500;
	background-color: rgba(22, 25, 35, .05)
}

.details .desc {
	line-height: 1.3
}

.details .desc ul {
	padding-left: 28px;
	list-style-type: square
}

.details .desc .returns {
	margin-bottom: 16px
}

.details .desc .returns>div {
	padding-left: 1.5em
}

.details .desc .hljs {
	display: block !important
}

.details .desc .hljs,
.details .desc p .hljs {
	font-weight: 500;
	background-color: rgba(22, 25, 35, .05)
}

.details .desc p .hljs {
	padding: 0 4px;
	line-height: 1;
	border: none;
	display: inline !important
}

.details .desc pre {
	margin: 16px 0
}

p {
	-webkit-margin-before: 16px;
	margin-block-start: 16px;
	-webkit-margin-after: 16px;
	margin-block-end: 16px
}

p.old {
	margin: 0
}

p:first-child {
	-webkit-margin-before: 0;
	margin-block-start: 0
}

aside pre {
	white-space: pre-wrap
}

div.inlined,
p.inlined {
	display: inline
}

.examples {
	margin-top: 16px
}

.examples .react-tabs {
	margin-left: -16px;
	margin-right: -16px;
	width: calc(100% + 32px)
}

.examples .react-tabs__tab-list {
	display: flex;
	margin-bottom: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(22, 25, 35, .05)
}

.examples .react-tabs__tab-list .react-tabs__tab {
	border: none;
	background-color: transparent;
	text-transform: lowercase;
	border-radius: 0;
	padding: 4px 16px;
	background-color: rgba(22, 25, 35, .05);
	transition: all .2s ease
}

.examples .react-tabs__tab-list .react-tabs__tab:hover {
	color: var(--bg);
	background-color: var(--ac);
	transition: none
}

.examples .react-tabs__tab-list .react-tabs__tab.react-tabs__tab--selected {
	box-shadow: 0 -2px var(--ac) inset
}

.examples .react-tabs__tab-list .react-tabs__tab:focus:after {
	display: none
}

.examples .react-tabs__tab-panel .lowlight .hljs {
	padding: 16px;
	font-weight: 500;
	background-color: rgba(22, 25, 35, .05)
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: fira code;
	outline: none
}

body {
	font-size: 16px;
	color: #161923;
	--fg: #161923;
	--bg: ivory;
	--ac: #6888ff
}

a {
	color: var(--fg);
	text-decoration: underline;
	transition: all .2s ease
}

a:hover {
	color: var(--bg);
	background-color: var(--ac);
	box-shadow: 0 0 0 4px var(--ac);
	transition: none
}

.app {
	position: fixed;
	display: flex;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0
}

aside,
section {
	max-height: calc(100vh - 80px)
}

section {
	flex: initial;
	min-width: 70%;
	overflow: auto
}

section .entry {
	height: 32px
}

section .entry>a {
	display: flex;
	align-items: center;
	height: 32px;
	padding: 4px 16px;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	color: currentColor !important;
	box-shadow: none
}

section .entry>a span {
	color: currentColor;
	font-size: .8rem;
	padding-left: 4px;
	font-weight: 400;
	white-space: nowrap;
	opacity: .75
}

section .entry:hover {
	background-color: #6888ff52;
}

section .entry:hover a {
	background-color: transparent
}

section .entry.namespace>a {
	font-size: 16px;
	font-weight: 500;
	padding-left: 12px;
	border-top: 1px solid rgba(22, 25, 35, .1)
}

section .entry.active {
	color: var(--bg);
	background-color: #6888ff;
}

#root,
.app,
body,
html {
	min-height: 100vh
}

.hidden {
	display: none
}

.material-icons-outlined {
	font-size: 16px
}

.icon-link .material-icons-outlined {
	vertical-align: middle;
	margin-right: 4px
}

@media only screen and (max-width:600px) {
	header {
		flex-direction: column;
		height: auto
	}

	header .branding {
		padding-left: 0;
		padding-top: 10px
	}

	header>*,
	header input {
		height: 50px
	}

	header input {
		margin-top: 5px;
		margin-bottom: 5px;
		height: 40px
	}

	nav {
		top: 100px;
		height: 40px
	}

	nav .toggles .title {
		display: none
	}

	.app {
		flex-direction: column
	}

	.app,
	.loading {
		top: 140px
	}

	aside {
		width: 100%;
		max-width: 100%;
		flex-grow: 0;
		max-height: 40vh;
		border-right: none;
		border-bottom: 1px solid rgba(22, 25, 35, .1)
	}

	section {
		flex: auto;
		width: 100%
	}
}

.loading {
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.lds-ripple {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px
}

.lds-ripple div {
	position: absolute;
	border: 4px solid #d7d7d7;
	opacity: 1;
	border-radius: 50%;
	-webkit-animation: lds-ripple 1s cubic-bezier(0, .2, .8, 1) infinite;
	animation: lds-ripple 1s cubic-bezier(0, .2, .8, 1) infinite
}

.lds-ripple div:nth-child(2) {
	-webkit-animation-delay: -.5s;
	animation-delay: -.5s
}

@-webkit-keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		top: 0;
		left: 0;
		width: 72px;
		height: 72px;
		opacity: 0
	}
}

@keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		top: 0;
		left: 0;
		width: 72px;
		height: 72px;
		opacity: 0
	}
}