:root {
	--default: #000;
	--light: #fff /*#d7c9aa*/;
	--main: #419D78 /* #34C555 */;
	--dark: #268A62 /* #11714A */;
	--accent: #4427a8 /* #8888ff */;
	--mainsemi: #419D7855;
	--accentsemi: #4427a855;
	--accent2: #453F3C;
	--light2: #EEEBD3;
}

a, nav.breadcrumb a { color: #357E65;}
.content a { text-decoration: none }
a.button { text-decoration: none }

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	color: var(--default);
}
body > .footer a { text-decoration: dotted underline 0.25px; }
body > .footer a:hover { text-decoration-style: solid; }

#main > .container
{
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-bottom: 1rem;
}
#main > .column {
	padding: 0;
}

#main-column {
	padding: 0.75rem 0 1rem 1.25rem;
}
main > article.content { padding: 0; }

.footer {padding: 0 1.5rem}

@font-face {
	font-family: Space Grotesk;
	font-weight: 700;
	font-style: normal;
	src: local("Space Grotesk"),url(../fonts/space-grotesk-v12-latin-700.woff2) format("woff2"),url(../fonts/space-grotesk-v12-latin-700.woff) format("woff");
	font-display: swap;
}

h1, h2, h3, h4 {
	font-family: "Space Grotesk", Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-style: normal;
	font-weight: 700;
	text-transform: none;
	margin: revert;
}

.navbar-brand > a {text-decoration: none!important }
.navbar {
	width: 100%;
	background-color: var(--main);
	color: var(--light);
}

.navbar .button, .codePanelHeader .button {
	border-color: var(--accent)
}

.navbar-title {
	font-family: "Space Grotesk",Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.navbar-title>span {
  color: #aba;
}

.navbar-end .buttons {
	margin-right: 10px;
}

a.navbar-toggle {
	font-size: 24px;
	position: relative;
	margin-left: auto;
	width: 3.25rem;
	height: 3.25rem;
	color: var(--light);
	display: flex;
	align-items: center;
	justify-content: center;
}

a.navbar-toggle > span { display: flex; }
a.navbar-toggle > span + span { display: none; }

a.navbar-toggle.is-active > span { display: none; }
a.navbar-toggle.is-active > span + span { display: flex; }

@media screen and (min-width: 1024px) 
{ 
	a.navbar-toggle { display: none }
	#main-column {
		width: 70%
	}
	#right-column { width:30% }
}

@media screen and (max-width: 1023px)  {
	.navbar-menu.is-active {
		background-color: var(--light);
		box-shadow: 0 8px 16px var(--mainsemi);
	}
}


@media (min-width: 768px) {
	.sidebar {
		position: sticky;
		top: calc(1.5*24px + 1rem);
	}
	.sidebar-header {
		display: none;
	}
}
.sidebar {
	flex: .3;
	display: block;
	background-color: #f5f5f5;
}
@media screen and (min-width: 769px), print {
	.sidebar {
		overflow: hidden;
		max-width: 360px;
		max-height: calc(100vh - 56px);
	}
}
.sidebar-header {
	width:100%;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
}
.sidebar-body {
	overflow-y: auto;
	display: flex;
	min-width: 0;
	width: 100%;
	height: 100%;
}
.sidebar-toc {
	flex: 1 1 auto;
}

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	padding: 1rem;
}

	.content a.button:not(.is-danger):not(.is-warning), .content button.button, #toggleTOC {
		background-color: var(--main);
		font-weight: bold;
		color: var(--light) !important;
		text-decoration: none;
	}

	.content ul {
		margin-top: 0
	}

@media screen and (max-width: 768px) {
	.sidebar {
		width: 100%;
	}

	.content {
		margin-left: 0;
	}
}

div.footer {
	padding: 2rem 1.5rem 2rem;
}

#firebaseui-auth-container ul {
	list-style-type: none;
}

aside.section  {
	padding: 56px 0 0 5px;
}
.menu .menu-list {
	padding: 0 0 0 10px;
	margin: 0;
	line-height: 1.0;
}

.menu .menu-list a.is-active {
	background: var(--main);
	border-radius: 4px;
	border-color: red;
}
.menu .menu-label {
	margin: 10px 0;
	padding: 15px 5px 10px 10px;
	text-transform: none;
	font-size: 18px;
	font-weight: 600;
	color: #000;
}

.firebaseui-idp-button {
	border-radius: 8px !important;
}

.articleHeader { display:flex; }
.articleHeader .dropdown { margin-left: auto; }
.dropdown.is-right a.dropdown-item { padding-right: 1em; }
.dropdown.is-right .dropdown-menu { min-width:8rem; }
.articleHeader .dropdown-menu {
	border: 1px solid #d7d7d7;
	padding-top: 0;
}

td .dropdown { width: 100%; }
.dropdown-trigger { display: inline-flex; width: 100%; }
.dropdown-trigger > button { justify-content: flex-start; width: 100%; }
.dropdown-trigger > button > span:first-child {
	flex: 1; text-align: left;
}
.dropdown-trigger > button > span + span {
	justify-content: flex-end;
}

.breadcrumb {
	width:100%;
	font-size: 0.8rem;
	padding: 0.5rem 0.25rem;
}
nav.breadcrumb:not(:last-child) { margin-bottom: 0.5rem; }
nav.breadcrumb li:last-child a { display: none; }
@media screen and (max-width: 768px) {
	nav.breadcrumb.is-small { font-size: 1rem; line-height: 1.65; }
}
	/* Attribute-based visibility. Elements are invisible
 * unless they also have class 'is-active'.
 */
	[data-nn-key], .toc [data-nn-key] {
		display: none;
	}

		[data-nn-key].is-active {
			display: initial;
		}

	section[data-nn-key].is-active {
		display: block;
	}

	[data-nn-key].button.is-active {
		display: inline-flex;
	}
	/* Bulma sets last child's bottom margin to zero.
 * This messes with the layout when elements are
 * grouped to use attribute-based visibility.
.content [data-nn-key] > :last-child { margin-bottom: 1em; }
*/


	/* override bulma */
	div.tabs:not(:last-child) {
		margin-bottom: 0;
	}

	.tabs.is-boxed li.is-active a {
		border-top-left-radius: 0.375rem;
		border-top-right-radius: 0.375rem;
		background: var(--main);
		color: var(--light) !important;
	}

	.content .tabs ul {
		margin-left: 0;
		margin-top: 0;
	}

	/* Code blocks can be under tabs or as individual panels. */
	.codeTabPanel > pre,
	.codePanel > pre {
		color: #DCDCDC;
		background-color: #1D1D1D;
	}
p + .codePanel {
	padding-top:0;
}

	.codePanel > pre {
		padding: 5px 5px 5px 5px;
		border: 1px solid var(--main);
		border-top: 0;
	}

	/* Content panels under tabs */
	.codeTabPanels {
		background: var(--main);
		color: var(--light);
		border: 1px solid #dbdbdb;
		border-top: 0px;
		padding: 5px;
		margin-bottom: 1rem;
	}

	.codeTabPanel {
		position: relative;
		align-items: center;
	}

		.codeTabPanel > .code-action {
			z-index: 30;
			position: absolute;
			top: 0.25rem;
			right: 0;
			opacity: 0.3;
			transition: opacity 0.3s ease;
		}

		.codeTabPanel:hover > .code-action,
		.codeTabPanel:active > .code-action {
			opacity: 1.0;
		}

	/* Individual code panels have a header that contains the action button. */
.codePanelHeader {
	background: var(--main);
	color: var(--light);
	border: 1px solid var(--main);
	border-bottom: 0;
	display: flex;
	align-items: center;
}

	.codePanelHeader .language {
		flex-grow: 1;
		padding: 2px 16px;
	}
	.codePanelHeader > button.button {
		color: var(--default)!important;
		background-color: var(--light);
		border-color: var(--accent);
	}
		
	.codePanel {
		padding: 1em;
		flex: 1;
		box-sizing: content-box;
	}

		.codePanel pre {
			padding: 0.5em;
			line-height: 1.37;
		}


	/* Copy code, turns green for 1s when action succeeded. */
	.code-action, #mainBanner .button {
		height: auto; /* override bulma */
		margin-right: calc(0.5em - 1px);
		padding-top: calc(0.25em - 1px);
		padding-bottom: calc(0.25em - 1px);
		padding-left: 0.75em;
		padding-right: 0.75em;
	}
#mainBanner .button {
}

/* Documentation style fine-tuning */
.content #seeAlsoSection h4 {
	margin-bottom: 0;
}

.content hr {
	background-color: lightgrey;
}

.content div.caption {
	font-style: italic;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

.content dt {
	font-weight: 600;
}

.content dd:not(:last-child) {
	margin-bottom: 1em;
}

.content q {
	font-style: italic;
}

.content .var { font-style: italic; }


/* Source code coloring */
pre.highlight {
	overflow-x: auto;
	background: rgb(30, 30, 30);
}

	pre.highlight > code a {
		color: rgb(220, 220, 220) !important;
	}

	pre.highlight > code {
		color: rgb(220, 220, 220);
		line-height: 1.3571;
	}

.c1, .hljs-comment, .hljs-quote, .hljs-variable {
	color: rgb(87, 166, 74)
}

.k, .kt, .hljs-built_in, .hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-tag {
	color: rgb(86, 156, 214)
}

.s, .hljs-addition, .hljs-attribute, .hljs-section, .hljs-string, .hljs-template-tag, .hljs-template-variable, .hljs-title, .hljs-type {
	color: rgb(214, 157, 133)
}

.m, .hljs-literal {
	color: rgb(181, 206, 168)
}

.hljs-deletion, .hljs-meta, .hljs-selector-attr, .hljs-selector-pseudo {
	color: #2b91af
}

.hljs-doctag {
	color: grey
}

.hljs-attr {
	color: red
}

.hljs-bullet, .hljs-link, .hljs-symbol {
	color: #00b0e8
}

.hljs-emphasis {
	font-style: italic
}

.hljs-strong {
	font-weight: 700
}

@media screen {
	code {
	.pln {color: #DCDCDC}
	.str {color: #D69D85}
	.kwd {color: #569CD6}
	.com {color: #57A64A}
	.typ {color: #4DC9B0}
	.lit {color: #DCDCDC}
	.pun, .opn, .clo {color: #B4B4B4}
	.tag {color: #008}
	.atn {color: #606}
	.atv {color: #080}
	.dec, .var {color: #DCDCDC}
	.fun {color: red}
	}
}
@media print,projection {
	.pln {color: #DCDCDC}
	.str {color: #060}
	.kwd {color: #006; font-weight: bold}
	.com {color: #600; font-style: italic}
	.typ {color: #404; font-weight: bold}
	.lit {color: #044}
	.pun, .opn, .clo {color: #440}
	.tag {color: #006; font-weight: bold}
	.atn {color: #404}
	.atv {color: #060}
}
.pln a { color: #DCDCDC }
.str a { color: #D69D85 }
.kwd a { color: #569CD6 }
.com a { color: #57A64A }
.typ a { color: #4DC9B0 }
.lit a { color: #DCDCDC }
.pun, .opn, .clo a { color: #B4B4B4 }
.tag a { color: #008 }
.atn a { color: #606 }
.atv a { color: #080 }
.dec, .var a { color: #DCDCDC }
.fun a { color: red }



/* Tables */

table.is-borderless th,
table.is-borderless td {border:0}
table.is-compact {width:initial}
	table.is-compact td {
		padding: 0.15em 0.75em;
		vertical-align: middle;
	}
input[type="number"] {width: 3em;}

/* Table of Contents */

.toc { padding:2px; margin:0; }
@media (min-width: 768px) { .toc { font-size:9pt; } }
.toc a { text-decoration: none; color: #444; padding: 2px;  }
.toc a:hover { text-decoration: underline; color: #000;}
.toc li[data-nn-key].is-active { display: inline-block; }
.toc li {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.toc svg {
	transform: rotate(0);
	transition: transform 0.2s ease;
	position: relative;
	top: 0.1rem;
	width: 0.75rem;
	height: 0.75rem;
}
.toc .expanded > span > svg {
	transform: rotate(90deg);
}
.toc li.expanded > ul {
	display: block;
}
.toc li > ul {
	display: none;
	padding-top: 0.2em
}
.toc>ul>li>ul li { margin-left: 1rem; }
.toc .selected > a {
	color: var(--light) !important;
	background-color: var(--main);
	border-radius: 3px;
}
.toc .selected > a:hover {
	text-decoration: none;
	color: var(--light) !important;
	cursor: default;
}

/* Page table of contents */
a:hover {text-decoration: underline; }

#right-column .page-toc:has(.message-body:empty) { display: none; }
#right-column .message-header {
	justify-content: initial;
	background-color: var(--main);
	color: var(--light);
}
#right-column .message:not(:last-child) {
    margin-bottom: 0.5em;
}
#right-column .message .message-body:empty {
	display: none
}
#right-column .message-body h3:first-child {
	margin-top: 0;
}
#right-column .message-body h3:not(:last-child) {
	margin-bottom: 0.25em;
}

#right-column .message-header + .message-body {
	border-width: 1px;
	border-top: 0;
	border-color: var(--main);
}
#right-column .message.list a {
    text-decoration: underline;
}
#right-column li {
	font-size: 0.85rem; 
	line-height:1.15rem;
	margin-bottom:0.35rem;
}

.in-article-toc {margin-bottom: 1em;}
.in-article-toc > h4 {margin-bottom:0;}
.in-article-toc > .page-toc-menu a {text-decoration-style:dotted}
.page-toc { padding: 0.25em; }
.page-toc .message a:not(.button):not(.tag):not(.dropdown-item) {
	text-decoration: none; }
.page-toc .message a:not(.button):not(.tag):not(.dropdown-item):hover {
	text-decoration: underline;
}
button.button .icon:last-child:not(:first-child) {
	margin-left: 0em;
	margin-right: 0;
}

ul.page-toc-menu {
	list-style: none;
}
.page-toc-menu li {
	line-height: 1.15em;
	margin-bottom: 0.35em;
}
	.page-toc-menu li > ul {
		padding-top: 0.35em;
	}
	.page-toc-menu li > ul > li {
		padding-left: 1em;
	}

	svg {
		fill: currentColor;
	}

.content code {
	color: var(--default);
	font-size: 1em;
	padding:initial;
}
/* Icons */
.icon svg {
	fill: currentColor;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	padding-right: 3px;
}
.icon.is-large svg {
	width: 2rem;
	height: 2rem;
}
.icon.is-medium svg {
	width: 2rem;
	height: 2rem;
	position: relative;
	top: 0.625rem;
}
a span.icon {
	width: 1em;
	height: 1em;
}
/* a span.icon svg {padding-top:0.25em} */

/* Banners */
#mainBanner {
	font-size: 0.75em;
	background-color: var(--mainsemi);
	border-radius: 0;
	padding: 0.25rem 2.5rem 0.5rem 0.75rem;
	margin-bottom: 0;
	display: none;
}
	#mainBanner.is-active, #mainBanner.always-visible {
		display: block;
	}
	#mainBanner.is-warning {
		color: var(--default);
		background-color: #f9d77a7f;
	}
	#mainBanner.is-danger {
		color: var(--default);
		background-color: #ec50707f;
	}
	#mainBanner .button {
		border-color: var(--main);
	}
	#mainBanner.is-warning .button {
		border-color: #b88700;
	}
	#mainBanner.is-danger .button {
		border-color: #8e0b25;
	}

/* Collapsable sections */

.toggleSection {
	transition: transform 0.2s ease;
	transform-origin: center;
	margin-right: 0.25em;
	cursor: pointer;
}
.collapsed { height: 0; overflow-y:hidden; transition: height 0.2s ease-in-out; }
.toggleCollapsed { transform: rotate(-90deg) }

/* Permalinks to headers */

.header-link {
	position: relative;
	left: 0.5em;
	opacity: 0;
	font-size: 0.8em;
	transition: opacity 0.2s ease-in-out 0.1s;
}
h2:hover > .header-link, h2:active > .header-link,
h3:hover > .header-link, h3:active > .header-link {
	opacity: 0.5;
}
.header-link:hover{ opacity: 1; }

test::before {
	background-color: blueviolet;
	color: green;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color='white' %3E%3Cpath fill='currentColor' stroke='currentColor' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right:4px;
}

.table.is-stacked-touch {
	table-layout: fixed;
	border: 1px solid rgb(61, 66, 68);
	word-wrap:break-word;
}
@media screen and (min-width: 768px) {
	.table-name-value tr > :first-child {
		width: 33%;
		word-wrap: break-word
	}
}
@media screen and (max-width: 767px) {
	.table.is-stacked-touch th, .table.is-stacked-touch td {
		width: 100%;
		display: block;
	}

	.table.is-stacked-touch th:not(:last-child),
	.table.is-stacked-touch td:not(:last-child) {
		border-bottom: 0;
	}
}

.has-tooltip + tooltip {
	display: none;
	transition: opacity 0.5s ease-in;
}
.has-tooltip:hover + tooltip {
	display: block;
	font-size: 0.8rem;
	opacity: 1;
	position: absolute;
	padding: 0.25em 0.5em;
	background-color: var(--light2);
	border: 1px solid var(--main);
	border-radius: 0.25rem;
	z-index: 9999;
}
input:user-invalid { border-color: red; }
.firebase-emulator-warning { display: none }
#firebaseui-auth-container button { border-radius: 9999px !important; }

#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5em;
	margin: 0;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
#cookie-banner .button { margin-left: 2em;}