:root,
[data-theme=light] {
	--palette-bg-hsl: 250 38% 98%;
	--palette-bg: hsl(var(--palette-bg-hsl));
	--palette-surface-hsl: 255 100% 100%;
	--palette-surface: hsl(var(--palette-surface-hsl));
	--palette-text-hsl: 0 0% 0%;
	--palette-text: hsl(var(--palette-text-hsl));
	--palette-muted-hsl: 250 20% 50%;
	--palette-muted: hsl(var(--palette-muted-hsl));
	--palette-fill: hsl(var(--palette-muted-hsl)/0.1);
	--palette-fill-soft: hsl(var(--palette-muted-hsl)/0.05);
	--palette-stroke: hsl(var(--palette-muted-hsl)/0.25);
	--palette-emphasis: #2f3641;
	--palette-emphasis-contrast: #fff;
	--palette-accent-h: 252;
	--palette-accent-s: 93%;
	--palette-accent-l: 58%;
	--palette-accent: hsl(var(--palette-accent-h) var(--palette-accent-s) var(--palette-accent-l));
	--palette-accent-contrast: #fff;
	--palette-accent-soft: hsl(var(--palette-accent-h) var(--palette-accent-s) 92%);
	--palette-accent-text: hsl(var(--palette-accent-h) var(--palette-accent-s) calc(var(--palette-accent-l)*0.9));
	--palette-danger-h: 0;
	--palette-danger-s: 100%;
	--palette-danger-l: 38%;
	--palette-danger: hsl(var(--palette-danger-h) var(--palette-danger-s) var(--palette-danger-l));
	--palette-danger-contrast: #fff;
	--palette-danger-soft: hsl(var(--palette-danger-h) var(--palette-danger-s) 92%);
	--palette-danger-text: hsl(var(--palette-danger-h) var(--palette-danger-s) calc(var(--palette-danger-l)*0.9));
	--palette-warning-h: 60;
	--palette-warning-s: 100%;
	--palette-warning-l: 45%;
	--palette-warning: hsl(var(--palette-warning-h) var(--palette-warning-s) var(--palette-warning-l));
	--palette-warning-contrast: hsl(var(--palette-warning-h) var(--palette-warning-s) 15%);
	--palette-warning-soft: hsl(var(--palette-warning-h) var(--palette-warning-s) 92%);
	--palette-warning-text: hsl(var(--palette-warning-h) var(--palette-warning-s) 24%);
	--palette-success-h: 127;
	--palette-success-s: 100%;
	--palette-success-l: 27%;
	--palette-success: hsl(var(--palette-success-h) var(--palette-success-s) var(--palette-success-l));
	--palette-success-contrast: #fff;
	--palette-success-soft: hsl(var(--palette-success-h) var(--palette-success-s) 92%);
	--palette-success-text: hsl(var(--palette-success-h) var(--palette-success-s) calc(var(--palette-success-l)*0.9));
	--palette-activity-h: 23;
	--palette-activity-s: 100%;
	--palette-activity-l: 45%;
	--palette-activity: hsl(var(--palette-activity-h) var(--palette-activity-s) var(--palette-activity-l));
	--palette-activity-contrast: #fff;
	--palette-activity-soft: hsl(var(--palette-activity-h) var(--palette-activity-s) 92%);
	--palette-activity-text: hsl(var(--palette-activity-h) var(--palette-activity-s) calc(var(--palette-activity-l)*0.9));
	color-scheme: light
}

[data-theme=dark] {
	--palette-bg-hsl: 250 20% 8%;
	--palette-surface-hsl: 250 20% 12%;
	--palette-text-hsl: 250 20% 93%;
	--palette-muted-hsl: 250 20% 60%;
	--palette-accent-soft: hsl(var(--palette-accent-h) var(--palette-accent-s) 20%);
	--palette-accent-text: hsl(var(--palette-accent-h) var(--palette-accent-s) calc(var(--palette-accent-l)*1.3));
	--palette-danger-soft: hsl(var(--palette-danger-h) var(--palette-danger-s) 10%);
	--palette-danger-text: hsl(var(--palette-danger-h) var(--palette-danger-s) calc(var(--palette-danger-l)*1.3));
	--palette-warning-soft: hsl(var(--palette-warning-h) var(--palette-warning-s) 10%);
	--palette-warning-text: hsl(var(--palette-warning-h) var(--palette-warning-s) 40%);
	--palette-success-soft: hsl(var(--palette-success-h) var(--palette-success-s) 10%);
	--palette-success-text: hsl(var(--palette-success-h) var(--palette-success-s) calc(var(--palette-success-l)*1.3));
	--palette-activity-soft: hsl(var(--palette-activity-h) var(--palette-activity-s) 10%);
	--palette-activity-text: hsl(var(--palette-activity-h) var(--palette-activity-s) calc(var(--palette-activity-l)*1.3));
	color-scheme: dark
}
body {
    background-color: rgb(33, 37, 41);
}
:root {
	--shadow-sm: 0 1px 4px var(--palette-fill);
	--shadow-md: 0 0 0 1px var(--palette-fill), 0 5px 15px var(--palette-stroke);
	--color-overlay: rgba(0, 0, 0, .5);
	--filter-hover: brightness(0.95);
	--filter-active: brightness(0.9);
	--ratio: 1.5;
	--space-px: 1px;
	--space-xxs: calc(var(--space-xs)/var(--ratio));
	--space-xs: calc(var(--space-sm)/var(--ratio));
	--space-sm: calc(var(--space-md)/var(--ratio));
	--space-md: 1rem;
	--space-lg: calc(var(--space-md)*var(--ratio));
	--space-xl: calc(var(--space-lg)*var(--ratio));
	--space-xxl: calc(var(--space-xl)*var(--ratio));
	--space-xxxl: calc(var(--space-xxl)*var(--ratio));
	--space-gutter: max(var(--space-lg), min(3vw, var(--space-xl)));
	--font-system: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	--font-text: var(--font-system);
	--font-display: var(--font-text);
	--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-bold: 600;
	--line-height-default: 1.3;
	--line-height-condensed: 1.2;
	--line-height-expanded: 1.5;
	--measure: 92ch;
	--z-index-header: 100;
	--z-index-overlay: 200;
	--z-index-alerts: 300;
	--text-xxs: 0.8rem;
	--text-xs: 0.875rem;
	--text-sm: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.5rem;
	--text-xl: 2rem;
	--text-xxl: 2.5rem;
	--radius: 10px;
	--control-height: 2.5em;
	--control-height-small: 2.3em;
	--control-radius: var(--radius);
	--header-height: 4rem
}

.menu,
:root {
	--color-bg: #444444;
	--color-surface: var(--palette-surface);
	--color-text: var(--palette-text);
	--color-muted: #DDDDDD;
	--color-fill: var(--palette-fill);
	--color-fill-soft: var(--palette-fill-soft);
	--color-stroke: var(--palette-stroke);
	--color-emphasis: var(--palette-emphasis);
	--color-emphasis-contrast: var(--palette-emphasis-contrast);
	--color-accent: #EEBD22;
	--color-accent-contrast: var(--palette-accent-contrast);
	--color-accent-soft: var(--palette-accent-soft);
	--color-accent-text: #DDDDDD;
	--color-danger: var(--palette-danger);
	--color-danger-contrast: var(--palette-danger-contrast);
	--color-danger-soft: var(--palette-danger-soft);
	--color-danger-text: var(--palette-danger-text);
	--color-warning: var(--palette-warning);
	--color-warning-contrast: var(--palette-warning-contrast);
	--color-warning-soft: var(--palette-warning-soft);
	--color-warning-text: var(--palette-warning-text);
	--color-success: var(--palette-success);
	--color-success-contrast: var(--palette-success-contrast);
	--color-success-soft: var(--palette-success-soft);
	--color-success-text: var(--palette-success-text);
	--color-activity: var(--palette-activity);
	--color-activity-contrast: var(--palette-activity-contrast);
	--color-activity-soft: var(--palette-activity-soft);
	--color-activity-text: var(--palette-activity-text)
}

*,
:after,
:before {
	box-sizing: border-box;
	margin: 0;

}

button,
input,
select,
textarea {
	font: inherit
}

[hidden] {
	display: none !important
}

[role=list] {
	list-style: none;
	padding: 0
}

button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0
}

@media (prefers-reduced-motion:reduce) {

	*,
	:after,
	:before {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important
	}
}

:root {
	scroll-behavior: auto
}

html {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-text);
	font-size: var(--text-sm);
	line-height: var(--line-height-default)
}

@media (max-width:40rem) {
	html {
		font-size: 95%
	}
}

input,
select,
textarea {
	color: var(--color-text)
}

* {
	word-wrap: anywhere;
	-webkit-tap-highlight-color: transparent
}

.link,
a {
	color: var(--color-accent-text);
	cursor: pointer;
	-webkit-text-decoration: none;
	text-decoration: none
}

.link:hover,
a:hover {
	-webkit-text-decoration: underline;
	text-decoration: underline
}

hr {
	border: 0;
	border-top: 1px solid var(--color-stroke);
	margin: var(--space-xl) 0
}

mark,
strong {
	font-weight: var(--weight-bold)
}

mark {
	background: transparent;
	color: var(--color-accent-text)
}

code,
pre {
	font-family: var(--font-mono)
}

:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px
}

[tabindex="-1"]:focus {
	outline: none
}

:focus:not(:focus-visible) {
	outline: none
}

.waterhole {
	align-items: stretch;
	min-height: 100vh;
	min-height: 100svh
}

.waterhole,
.waterhole__main {
	display: flex;
	flex-direction: column
}

.waterhole__main {
	flex-grow: 1
}

.waterhole__main :not(textarea) {
	scroll-margin-top: var(--header-height)
}

ui-popup>.enter-active,
ui-popup>.leave-active {
	transition: transform .15s, opacity .15s
}

ui-popup>.enter-from,
ui-popup>.leave-to {
	opacity: 0;
	transform: scale(0)
}

ui-popup::part(backdrop),
ui-popup>:nth-child(2) {
	z-index: var(--z-index-overlay)
}

[data-placement=bottom] {
	transform-origin: top center
}

[data-placement=bottom-start] {
	transform-origin: top left
}

[data-placement=bottom-end] {
	transform-origin: top right
}

[data-placement=top] {
	transform-origin: bottom center
}

[data-placement=top-start] {
	transform-origin: bottom left
}

[data-placement=top-end] {
	transform-origin: bottom right
}

[data-placement=left] {
	transform-origin: right center
}

[data-placement=left-start] {
	transform-origin: right top
}

[data-placement=left-end] {
	transform-origin: right bottom
}

[data-placement=right] {
	transform-origin: left center
}

[data-placement=right-start] {
	transform-origin: left top
}

[data-placement=right-end] {
	transform-origin: left bottom
}

[data-placement^=top] {
	margin-top: calc(var(--space-xs)*-1)
}

[data-placement^=bottom] {
	margin-top: var(--space-xs)
}

[data-placement^=left] {
	margin-left: calc(var(--space-xs)*-1)
}

[data-placement^=right] {
	margin-left: var(--space-xs)
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
	font-family: var(--font-display)
}

.h4,
.h5,
.h6,
h4,
h5,
h6 {
	font-family: var(--font-text)
}

.h1,
h1 {
	font-size: var(--text-xxl)
}

.h1,
.h2,
h1,
h2 {
	font-weight: var(--weight-bold);
	line-height: var(--line-height-condensed)
}

.h2,
h2 {
	font-size: var(--text-xl)
}

.h3,
h3 {
	font-size: var(--text-lg)
}

.h3,
.h4,
h3,
h4 {
	font-weight: var(--weight-bold)
}

.h4,
h4 {
	font-size: var(--text-md)
}

.h5,
h5 {
	font-size: var(--text-sm)
}

.h5,
.h6,
h5,
h6 {
	font-weight: var(--weight-bold)
}

.h6,
h6 {
	font-size: var(--text-xs)
}

.subtitle {
	color: var(--color-muted);
	font-family: var(--font-text);
	font-size: var(--text-xxs);
	font-weight: var(--weight-medium);
	text-transform: uppercase
}

.lead {
	font-size: var(--text-md)
}

.content,
.lead {
	line-height: var(--line-height-expanded)
}

.content {
	word-wrap: break-word
}

:where(.content) li p,
:where(.content)>*+* {
	margin-top: 1em
}

:where(.content)>*+h1 {
	margin-top: 1.8em
}

:where(.content)>*+h2 {
	margin-top: 1.8em
}

:where(.content)>*+h3 {
	margin-top: 1.8em
}

:where(.content)>*+h4 {
	margin-top: 1.8em
}

:where(.content)>*+h5 {
	margin-top: 1.8em
}

:where(.content)>*+h6 {
	margin-top: 1.8em
}

:where(.content) a {
	-webkit-text-decoration: underline;
	text-decoration: underline
}

:where(.content) ol {
	list-style-position: outside;
	padding-left: 2em
}

:where(.content) ul {
	list-style: disc outside;
	padding-left: 2em
}

:where(.content) ul ul {
	list-style-type: circle
}

:where(.content) ul ul ul {
	list-style-type: square
}

:where(.content) blockquote {
	border-left: 5px solid var(--color-fill);
	color: var(--color-muted);
	padding-left: var(--space-md)
}

:where(.content) blockquote>*+* {
	margin-top: 1em
}

:where(.content) figcaption {
	color: var(--color-muted);
	font-size: 90%
}

:where(.content) code {
	background: var(--color-fill-soft);
	border-radius: 4px;
	color: var(--color-accent-text);
	font-family: var(--font-mono);
	font-size: 80%;
	padding: 3px
}

:where(.content) pre code {
	padding: var(--space-md) !important
}

:where(.content) pre code {
	background: var(--color-fill);
	border-radius: var(--radius);
	color: inherit;
	display: block;
	overflow: auto
}

:where(.content) img:not([class]) {
	height: auto;
	max-width: 100%
}

:where(.content) video:not([class]) {
	height: auto;
	max-width: 100%
}

:where(.content) hr:not([class]) {
	border: 0;
	border-top: 3px solid var(--color-stroke);
	margin: 2em 0
}

:where(.content--compact)>*+* {
	margin-top: 1em
}

:where(.content--compact) h1,
:where(.content--compact) h2,
:where(.content--compact) h3,
:where(.content--compact) h4,
:where(.content--compact) h5,
:where(.content--compact) h6 {
	font-size: 100%
}

.alert {
	align-items: flex-start;
	background: var(--color-fill);
	border-radius: var(--radius);
	display: flex;
	font-size: var(--text-xs);
	gap: var(--space-sm);
	line-height: var(--line-height-expanded);
	padding: var(--space-sm) var(--space-md)
}

.alert__icon {
	display: flex;
	font-size: var(--text-md);
	line-height: var(--line-height-default)
}

.alert__message {
	min-width: 0
}

.alert__actions {
	align-items: center;
	display: flex;
	gap: var(--space-sm);
	margin-bottom: calc(var(--space-xs)*-1);
	margin-left: auto;
	margin-right: calc(var(--space-sm)*-1);
	margin-top: calc(var(--space-xs)*-1)
}

.alerts {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	left: 0;
	padding: var(--space-sm);
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	z-index: var(--z-index-alerts)
}

.alerts>* {
	box-shadow: var(--shadow-md);
	pointer-events: auto;
	transition: all .3s
}

.alerts>.enter-from,
.alerts>.leave-to {
	opacity: 0
}

.alerts>.leave-active {
	position: absolute
}

.alerts>.leave-to {
	filter: blur(4px)
}

@media (max-width:40rem) {
	.alerts {
		align-items: stretch;
		bottom: 0;
		top: auto
	}

	.alerts>.enter-from {
		transform: translateY(100%)
	}
}

@media (min-width:40.001rem) {
	.alerts>* {
		max-width: 50ch
	}

	.alerts>.enter-from {
		transform: translateY(-100%)
	}
}

:root {
	--attribution-avatar-size: 2.5em
}

.attribution {
	padding-left: calc(var(--attribution-avatar-size) + var(--space-md))
}

.attribution .avatar {
	height: 2.5em;
	height: var(--attribution-avatar-size);
	margin-left: calc((var(--attribution-avatar-size) + var(--space-md))*-1);
	position: absolute;
	width: 2.5em;
	width: var(--attribution-avatar-size)
}

.attribution__name {
	color: inherit;
	font-weight: var(--weight-medium);
	margin-right: var(--space-xxs);
	-webkit-text-decoration: none;
	text-decoration: none
}

.attribution__name:hover {
	-webkit-text-decoration: underline;
	text-decoration: underline
}

.attribution__info {
	color: var(--color-muted);
	display: block;
	font-size: var(--text-xs);
	margin-top: var(--space-xxs)
}

.attribution__info>*+:before {
	content: " \00B7 "
}

.avatar {
	aspect-ratio: 1;
	background: var(--color-stroke);
	border-radius: 100%;
	height: 100%;
	width: 100%
}

.avatar text {
	fill: var(--color-bg);
	font-size: 50px
}

.badge,
.tag {
	align-items: center;
	background: var(--color-fill);
	border: 0;
	border-radius: 999px;
	color: var(--color-muted);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--text-xxs);
	font-weight: var(--weight-medium);
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	min-height: 1.7em;
	min-width: 2.5ch;
	overflow: hidden;
	padding: 0 .6em;
	text-align: center;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap
}

.badge>.icon:first-child,
.tag>.icon:first-child {
	margin-left: -.2em;
	margin-right: .2em
}

.badge .icon,
.tag .icon {
	stroke-width: 2.5
}

.group-badge {
	background-color: var(--group-color, var(--color-fill));
	color: var(--group-color-constrast, var(--color-muted))
}

.badge--hidden {
	background-color: transparent;
	border: 2px dotted var(--color-stroke)
}

.suspended-badge {
	background: var(--color-muted);
	color: var(--color-bg)
}

.tag {
	border-radius: 4px;
	font-size: var(--text-xs);
	font-weight: 400;
	padding: 0 .5em
}

.block-link {
	border-radius: var(--radius);
	color: inherit;
	display: block;
	padding: var(--space-md);
	-webkit-text-decoration: none !important;
	text-decoration: none !important
}

.block-link:hover {
	background: var(--color-fill)
}

.block-link:active {
	filter: var(--filter-active)
}

.breadcrumb {
	color: var(--color-muted);
	list-style: none;
	padding: 0
}

.breadcrumb>* {
	display: inline
}

.breadcrumb>*+:before {
	color: var(--color-muted);
	content: "\203A";
	margin: 0 var(--space-xxs)
}

.breadcrumb [aria-current=page] {
	color: var(--color-text)
}

.btn {
	--btn-height: var(--control-height);
	--btn-padding: calc(var(--btn-height)*0.4);
	align-items: center;
	background: var(--color-fill);
	border: 0;
	border-radius: var(--control-radius);
	color: var(--color-text);
	display: inline-flex;
	flex-shrink: 0;
	font-weight: var(--weight-medium);
	gap: var(--space-xxs);
	height: var(--control-height);
	height: var(--btn-height);
	justify-content: center;
	margin: 0;
	padding: 0 var(--btn-padding);
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	vertical-align: middle;
	white-space: nowrap
}

.btn.is-disabled,
.btn:disabled {
	cursor: default;
	opacity: .5
}

.btn .is-inert {
	cursor: default
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert) {
	cursor: pointer
}

.btn.is-focused:not(:disabled):not(.is-disabled):not(.is-inert),
.btn.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert),
.btn:not(:disabled):not(.is-disabled):not(.is-inert):focus,
.btn:not(:disabled):not(.is-disabled):not(.is-inert):hover,
.btn[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
	filter: var(--filter-hover)
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert):active {
	filter: var(--filter-active);
	transform: scale(.97)
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-stroke);
	color: var(--color-muted)
}

.btn--outline:hover {
	background: var(--color-bg)
}

.btn--transparent:disabled {
	background: transparent;
	color: var(--color-muted)
}

.btn--transparent.is-disabled,
.btn--transparent:not(button):not(a):not([role=button]):not([role=link]),
:where(:not([open]))>.btn--transparent:where(:not(:hover):not(.is-hovered):not(:focus):not(.is-focused)) {
	background: transparent;
	color: var(--color-muted)
}

.btn--sm {
	--btn-height: var(--control-height-small);
	font-size: 87.5%
}

.btn--narrow,
.btn--sm {
	--btn-padding: calc(var(--btn-height)*0.3)
}

.btn--wide {
	--btn-padding: calc(var(--btn-height)*0.5)
}

.btn--start {
	margin-left: calc(var(--btn-padding)*-1)
}

.btn--end {
	margin-right: calc(var(--btn-padding)*-1)
}

.btn--icon {
	border-radius: 100px;
	padding: 0;
	position: relative;
	width: var(--btn-height)
}

.btn--icon .avatar {
	height: 100%;
	width: 100%
}

.btn--icon .icon {
	font-size: 120%
}

.btn--icon .badge {
	position: absolute;
	right: 0;
	top: 0
}

.btn--icon .label {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

.btn.is-active,
.btn[aria-pressed=true],
:checked+.btn {
	background: #eebd22 !important;
	border-color: transparent;
	color: var(--color-accent-text) !important
}

.btn-group {
	align-items: stretch;
	display: flex;
	gap: 1px
}

.btn-group>:first-child:not(:only-child),
.btn-group>:first-child:not(:only-child)>.btn {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0
}

.btn-group>:not(:first-child):not(:last-child),
.btn-group>:not(:first-child):not(:last-child)>.btn {
	border-radius: 0
}

.btn-group>:last-child:not(:only-child),
.btn-group>:last-child:not(:only-child)>.btn {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0
}

.card {
	--color-bg: #444444;
	background: var(--palette-surface);
	background: var(--color-bg);
	border-radius: none;
	box-shadow: var(--shadow-sm)
}

.card .card {
	border: 1px solid var(--color-fill)
}

.card__header {
	background: var(--color-bg);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: var(--space-sm) var(--space-md)
}

summary.card__header {
	outline: none !important;
	transform: none !important
}

summary.card__header.is-disabled,
summary.card__header:disabled {
	cursor: default;
	opacity: .5
}

summary.card__header .is-inert {
	cursor: default
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert) {
	cursor: pointer
}

summary.card__header.is-focused:not(:disabled):not(.is-disabled):not(.is-inert),
summary.card__header.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert),
summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):focus,
summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):hover,
summary.card__header[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
	filter: var(--filter-hover)
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):active {
	filter: var(--filter-active);
	transform: scale(.97)
}

summary.card__header::-webkit-details-marker,
summary.card__header::marker {
	color: var(--color-stroke);
	margin-right: var(--space-sm)
}

summary.card__header:focus-visible {
	background: var(--color-accent-soft)
}

details.card:not([open]) .card__header {
	border-radius: var(--radius)
}

.card__body {
	padding: min(var(--space-gutter), var(--space-lg));


}

.card__row {
	padding: var(--space-sm) var(--space-md)
}

:not(.divider)+.card__row {
	border-top: 1px solid var(--color-fill)
}

.card-list>* {
	margin-bottom: var(--space-lg)
}

@media (max-width:40rem) {
	.container .card:not(.card .card) {
		border-radius: 0;
		margin-left: calc(var(--space-gutter)*-1) !important;
		margin-right: calc(var(--space-gutter)*-1) !important
	}

	.container .card:not(.card .card)>.card__header {
		border-radius: 0
	}
}

.channel-label {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: var(--space-xxs);
	-webkit-text-decoration: none;
	text-decoration: none;
	vertical-align: bottom
}

a.channel-label:hover>:last-child {
	-webkit-text-decoration: underline;
	text-decoration: underline
}

.channel-picker .menu-item {
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md)
}

.channel-picker .menu-item>.icon:first-child {
	font-size: var(--text-lg)
}

.channel-picker .menu-heading {
	padding-left: var(--space-md);
	padding-right: var(--space-md)
}

.channel-picker .menu-heading:not(:first-child) {
	padding-top: var(--space-md)
}

.choice {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: var(--space-sm)
}

.choice>:disabled+* {
	color: var(--color-muted)
}

input[type=checkbox],
input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--color-bg);
	border: 2px solid var(--color-stroke);
	color: currentColor;
	cursor: pointer;
	flex-shrink: 0;
	font: inherit;
	height: 1.2em;
	margin: 0;
	position: relative;
	vertical-align: -.2em;
	width: 1.2em
}

input[type=checkbox]:checked,
input[type=radio]:checked {
	border: 0
}

input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
	background: var(--color-accent-contrast);
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%)
}

input[type=checkbox]:not(:disabled):not([aria-disabled=true]):active,
input[type=radio]:not(:disabled):not([aria-disabled=true]):active {
	filter: var(--filter-active)
}

input[type=checkbox]:not(:disabled):not([aria-disabled=true]):checked,
input[type=radio]:not(:disabled):not([aria-disabled=true]):checked {
	background: var(--color-accent)
}

input[type=checkbox]:disabled,
input[type=checkbox][aria-disabled=true],
input[type=radio]:disabled,
input[type=radio][aria-disabled=true] {
	background: var(--color-stroke);
	border: 0
}

input[type=checkbox]:disabled:checked:before,
input[type=checkbox][aria-disabled=true]:checked:before,
input[type=radio]:disabled:checked:before,
input[type=radio][aria-disabled=true]:checked:before {
	background: var(--color-muted)
}

input[type=checkbox] {
	border-radius: .3em
}

input[type=checkbox]:checked:before {
	-webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	height: 60%;
	width: 60%
}

input[type=radio] {
	border-radius: 100%
}

input[type=radio]:checked:before {
	border-radius: 100%;
	height: 40%;
	width: 40%
}

.color-picker {
	position: relative
}

.color-picker__picker {
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	margin-top: 6px;
	position: absolute;
	top: 100%;
	z-index: var(--z-index-overlay)
}

.color-picker__swatch,
.swatch {
	border: 1px solid hsl(var(--palette-text-hsl)/.1);
	border-radius: 4px;
	display: inline-block;
	height: 1.5em;
	vertical-align: middle;
	width: 1.5em
}

.combobox {
	position: relative
}

.combobox__list {
	left: 0;
	max-width: none !important;
	position: absolute;
	top: 100%;
	width: 100% !important
}

.dialog {
	--color-bg: var(--palette-surface);
	background: var(--palette-surface);
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	margin-left: auto;
	margin-right: auto;
	max-width: 100%
}

.dialog__header {
	align-items: center;
	display: flex;
	gap: var(--space-md);
	padding: var(--space-xl);
	padding-bottom: 0
}

.dialog__body {
	padding: var(--space-xl)
}

.dialog--sm {
	width: 45ch
}

@media (max-width:40rem) {

	.dialog__body,
	.dialog__header {
		padding: var(--space-gutter)
	}

	.dialog__header {
		padding-bottom: 0
	}

	.container .dialog {
		border-radius: 0;
		margin-left: calc(var(--space-gutter)*-1) !important;
		margin-right: calc(var(--space-gutter)*-1) !important;
		max-width: none;
		width: calc(100% + var(--space-gutter)*2)
	}
}

.divider {
	align-items: center;
	color: var(--color-muted);
	display: flex;
	font-size: var(--text-xxs);
	font-weight: var(--weight-bold);
	padding: var(--space-xs) 0;
	text-transform: uppercase
}

.divider:after,
.divider:before {
	border-bottom: 2px solid;
	content: "";
	flex-grow: 1
}

.divider:not(:empty):before {
	margin-right: 5px
}

.divider:not(:empty):after {
	margin-left: 5px
}

.field {
	align-items: flex-start;
	-moz-column-gap: var(--space-md);
	column-gap: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-xs)
}

.field>:first-child:not(:only-child) {
	flex-basis: 20%;
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 15ch
}

.field>:nth-child(2) {
	flex-basis: calc(80% - var(--space-md));
	flex-grow: 999;
	margin: 0;
	min-width: 0
}

.stacked-fields .field>:first-child {
	flex-basis: 100%
}

.field__label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium)
}

.field__description,
.field__status {
	color: var(--color-muted);
	font-size: var(--text-xs)
}

.field__status {
	font-weight: var(--weight-medium)
}

.has-error .field__status {
	color: var(--color-danger-text)
}

/*!
    Theme: GitHub
    Description: Light theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15
    Outdated base version: https://github.com/primer/github-syntax-light
    Current colors taken from GitHub's CSS
  */
:root .hljs,
[data-theme=light] .hljs {
	color: #24292e
}

:root .hljs-doctag,
:root .hljs-keyword,
:root .hljs-meta .hljs-keyword,
:root .hljs-template-tag,
:root .hljs-template-variable,
:root .hljs-type,
:root .hljs-variable.language_,
[data-theme=light] .hljs-doctag,
[data-theme=light] .hljs-keyword,
[data-theme=light] .hljs-meta .hljs-keyword,
[data-theme=light] .hljs-template-tag,
[data-theme=light] .hljs-template-variable,
[data-theme=light] .hljs-type,
[data-theme=light] .hljs-variable.language_ {
	color: #d73a49
}

:root .hljs-title,
:root .hljs-title.class_,
:root .hljs-title.class_.inherited__,
:root .hljs-title.function_,
[data-theme=light] .hljs-title,
[data-theme=light] .hljs-title.class_,
[data-theme=light] .hljs-title.class_.inherited__,
[data-theme=light] .hljs-title.function_ {
	color: #6f42c1
}

:root .hljs-attr,
:root .hljs-attribute,
:root .hljs-literal,
:root .hljs-meta,
:root .hljs-number,
:root .hljs-operator,
:root .hljs-selector-attr,
:root .hljs-selector-class,
:root .hljs-selector-id,
:root .hljs-variable,
[data-theme=light] .hljs-attr,
[data-theme=light] .hljs-attribute,
[data-theme=light] .hljs-literal,
[data-theme=light] .hljs-meta,
[data-theme=light] .hljs-number,
[data-theme=light] .hljs-operator,
[data-theme=light] .hljs-selector-attr,
[data-theme=light] .hljs-selector-class,
[data-theme=light] .hljs-selector-id,
[data-theme=light] .hljs-variable {
	color: #005cc5
}

:root .hljs-meta .hljs-string,
:root .hljs-regexp,
:root .hljs-string,
[data-theme=light] .hljs-meta .hljs-string,
[data-theme=light] .hljs-regexp,
[data-theme=light] .hljs-string {
	color: #032f62
}

:root .hljs-built_in,
:root .hljs-symbol,
[data-theme=light] .hljs-built_in,
[data-theme=light] .hljs-symbol {
	color: #e36209
}

:root .hljs-code,
:root .hljs-comment,
:root .hljs-formula,
[data-theme=light] .hljs-code,
[data-theme=light] .hljs-comment,
[data-theme=light] .hljs-formula {
	color: #6a737d
}

:root .hljs-name,
:root .hljs-quote,
:root .hljs-selector-pseudo,
:root .hljs-selector-tag,
[data-theme=light] .hljs-name,
[data-theme=light] .hljs-quote,
[data-theme=light] .hljs-selector-pseudo,
[data-theme=light] .hljs-selector-tag {
	color: #22863a
}

:root .hljs-subst,
[data-theme=light] .hljs-subst {
	color: #24292e
}

:root .hljs-section,
[data-theme=light] .hljs-section {
	color: #005cc5;
	font-weight: 700
}

:root .hljs-bullet,
[data-theme=light] .hljs-bullet {
	color: #735c0f
}

:root .hljs-emphasis,
[data-theme=light] .hljs-emphasis {
	color: #24292e;
	font-style: italic
}

:root .hljs-strong,
[data-theme=light] .hljs-strong {
	color: #24292e;
	font-weight: 700
}

:root .hljs-addition,
[data-theme=light] .hljs-addition {
	background-color: #f0fff4;
	color: #22863a
}

:root .hljs-deletion,
[data-theme=light] .hljs-deletion {
	background-color: #ffeef0;
	color: #b31d28
}

/*!
    Theme: GitHub Dark
    Description: Dark theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15
    Outdated base version: https://github.com/primer/github-syntax-dark
    Current colors taken from GitHub's CSS
  */
[data-theme=dark] .hljs {
	color: #c9d1d9
}

[data-theme=dark] .hljs-doctag,
[data-theme=dark] .hljs-keyword,
[data-theme=dark] .hljs-meta .hljs-keyword,
[data-theme=dark] .hljs-template-tag,
[data-theme=dark] .hljs-template-variable,
[data-theme=dark] .hljs-type,
[data-theme=dark] .hljs-variable.language_ {
	color: #ff7b72
}

[data-theme=dark] .hljs-title,
[data-theme=dark] .hljs-title.class_,
[data-theme=dark] .hljs-title.class_.inherited__,
[data-theme=dark] .hljs-title.function_ {
	color: #d2a8ff
}

[data-theme=dark] .hljs-attr,
[data-theme=dark] .hljs-attribute,
[data-theme=dark] .hljs-literal,
[data-theme=dark] .hljs-meta,
[data-theme=dark] .hljs-number,
[data-theme=dark] .hljs-operator,
[data-theme=dark] .hljs-selector-attr,
[data-theme=dark] .hljs-selector-class,
[data-theme=dark] .hljs-selector-id,
[data-theme=dark] .hljs-variable {
	color: #79c0ff
}

[data-theme=dark] .hljs-meta .hljs-string,
[data-theme=dark] .hljs-regexp,
[data-theme=dark] .hljs-string {
	color: #a5d6ff
}

[data-theme=dark] .hljs-built_in,
[data-theme=dark] .hljs-symbol {
	color: #ffa657
}

[data-theme=dark] .hljs-code,
[data-theme=dark] .hljs-comment,
[data-theme=dark] .hljs-formula {
	color: #8b949e
}

[data-theme=dark] .hljs-name,
[data-theme=dark] .hljs-quote,
[data-theme=dark] .hljs-selector-pseudo,
[data-theme=dark] .hljs-selector-tag {
	color: #7ee787
}

[data-theme=dark] .hljs-subst {
	color: #c9d1d9
}

[data-theme=dark] .hljs-section {
	color: #1f6feb;
	font-weight: 700
}

[data-theme=dark] .hljs-bullet {
	color: #f2cc60
}

[data-theme=dark] .hljs-emphasis {
	color: #c9d1d9;
	font-style: italic
}

[data-theme=dark] .hljs-strong {
	color: #c9d1d9;
	font-weight: 700
}

[data-theme=dark] .hljs-addition {
	background-color: #033a16;
	color: #aff5b4
}

[data-theme=dark] .hljs-deletion {
	background-color: #67060c;
	color: #ffdcd7
}

.icon {
	display: inline-block;
	flex-shrink: 0;
	height: 1.2em;
	-o-object-fit: contain;
	object-fit: contain;
	vertical-align: -.2em;
	width: 1.2em
}

.icon--thin {
	stroke-width: 1.5
}

.icon--thick {
	stroke-width: 2.5
}

.icon--narrow {
	margin-left: -.2em;
	margin-right: -.2em
}

.with-icon {
	align-items: center;
	display: inline-flex
}

.with-icon>.icon {
	margin-right: .2em
}

.with-icon>.icon:not(:first-child) {
	margin-left: .2em
}

.icon-tabler-lock circle {
	display: none
}

.dot {
	background: currentColor;
	border-radius: 100%;
	display: inline-block;
	height: 10px;
	margin: .3em .1em;
	vertical-align: -5px;
	width: 10px
}

.input,
input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]),
select,
textarea {
	-webkit-appearance: none;
	background: var(--color-bg);
	border: 1px solid var(--color-stroke);
	border-radius: var(--control-radius);
	box-sizing: border-box;
	color: var(--color-text);
	display: block;
	height: var(--control-height);
	padding: .55em .7em;
	width: 100%
}

.input:focus,
.input:focus-within,
input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]):focus,
input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]):focus-within,
select:focus,
select:focus-within,
textarea:focus,
textarea:focus-within {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent);
	outline: none
}

.has-error .input,
.has-error input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]),
.has-error select,
.has-error textarea {
	border-color: var(--color-danger)
}

input[type=file] {
	overflow: hidden
}

input[type=file]:not(:disabled):not([readonly]) {
	cursor: pointer
}

input[type=file]::file-selector-button {
	background: none;
	border: 0;
	color: var(--color-accent-text);
	font-weight: var(--weight-bold);
	margin: 0;
	padding: 0 var(--space-md) 0 0;
	pointer-events: none;
	width: auto
}

::-moz-placeholder {
	color: var(--color-muted)
}

::placeholder {
	color: var(--color-muted)
}

.textarea,
select[multiple],
textarea {
	border-radius: var(--radius);
	height: auto;
	padding: .7rem
}

.select,
select:not([multiple]) {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='%23888'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L10 5.414 7.707 7.707a1 1 0 0 1-1.414-1.414l3-3A1 1 0 0 1 10 3zm-3.707 9.293a1 1 0 0 1 1.414 0L10 14.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-position: center right .5em;
	background-repeat: no-repeat;
	background-size: 1.25em;
	cursor: default;
	padding-right: 2em
}

:invalid+.hide-if-invalid {
	visibility: hidden
}

.input-container {
	--input-container-padding-start: 2.6em;
	--input-container-padding-end: 2.6em;
	align-items: center;
	display: flex
}

.input-container>:not(input):not(.input):not(select):not(script) {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative
}

.input-container>:not(input):not(.input):not(select):not(script):first-child {
	margin-right: calc(var(--input-container-padding-start)*-1);
	width: var(--input-container-padding-start)
}

.input-container>:not(input):not(.input):not(select):not(script):last-child {
	margin-left: calc(var(--input-container-padding-end)*-1);
	width: var(--input-container-padding-end)
}

.input-container>.input:nth-child(2),
.input-container>input:not(.does-not-exist):nth-child(2),
.input-container>select:not(.does-not-exist):nth-child(2) {
	padding-left: var(--input-container-padding-start)
}

.input-container>.input:nth-last-child(2),
.input-container>input:not(.does-not-exist):nth-last-child(2),
.input-container>select:not(.does-not-exist):nth-last-child(2) {
	padding-right: var(--input-container-padding-end)
}

.mention {
	border-radius: var(--radius);
	color: inherit;
	font-weight: var(--weight-bold)
}

.mention--self {
	background: var(--color-warning-soft);
	border-radius: 4px;
	color: var(--color-warning-text);
	margin: -2px;
	padding: 2px
}

.menu {
	--color-bg: var(--palette-surface);
	background: var(--palette-surface);
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	display: block;
	font-size: var(--text-xs);
	max-width: 30ch;
	min-width: 15ch;
	overflow: auto;
	padding: var(--space-xs);
	width: -moz-max-content;
	width: max-content;
	z-index: var(--z-index-overlay)
}

.menu--lg {
	max-width: 50ch
}

.menu-item {
	align-items: flex-start;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: calc(var(--radius)*2/3);
	color: var(--color-text);
	display: flex;
	gap: var(--space-xs);
	margin: 0;
	padding: var(--space-xs);
	text-align: left;
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	transform: none !important;
	width: 100%
}

.menu-item.is-disabled,
.menu-item:disabled {
	cursor: default;
	opacity: .5
}

.menu-item .is-inert {
	cursor: default
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert) {
	cursor: pointer
}

.menu-item.is-focused:not(:disabled):not(.is-disabled):not(.is-inert),
.menu-item.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert),
.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):focus,
.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):hover,
.menu-item[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
	filter: var(--filter-hover)
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):active {
	filter: var(--filter-active);
	transform: scale(.97)
}

.menu-item.is-focused,
.menu-item.is-hovered,
.menu-item:focus,
.menu-item:hover,
.menu-item[aria-selected=true] {
	background: var(--color-fill);
	outline: none
}

.menu-item.color-danger.is-hovered,
.menu-item.color-danger:hover {
	background: var(--color-danger);
	color: var(--color-danger-contrast)
}

.menu-item.is-active,
.menu-item[aria-checked=true],
.menu-item[aria-current=page] {
	background: var(--color-accent-soft);
	color: var(--color-accent-text)
}

.menu-item__title {
	display: block;
	font-weight: var(--weight-medium)
}

.menu-item__description {
	color: var(--color-muted);
	display: block;
	font-size: 90%;
	margin-top: var(--space-xxs)
}

.menu-item__check {
	margin-left: auto
}

.menu-item:not(.is-active):not([aria-current=page]):not([aria-checked=true]) .menu-item__check {
	visibility: hidden
}

.menu-divider {
	margin: var(--space-xs)
}

.menu-divider+.menu-divider,
.menu>.menu-divider:first-child,
.menu>.menu-divider:last-child {
	display: none
}

.menu-heading {
	color: var(--color-muted);
	font-family: var(--font-text);
	font-size: var(--text-xxs);
	font-weight: var(--weight-medium);
	padding: var(--space-xs);
	text-transform: uppercase
}

.menu-sticky {
	background: var(--color-bg);
	margin-top: calc(var(--space-sm)*-1);
	padding-top: var(--space-xs);
	position: sticky;
	top: calc(var(--space-sm)*-1);
	z-index: 1
}

ui-popup:has(>.drawer)::part(backdrop) {
	background: var(--color-overlay)
}

.drawer {
	background: var(--color-bg);
	box-shadow: var(--shadow-md);
	height: 100vh;
	left: 0 !important;
	margin: 0;
	max-height: none !important;
	overflow: auto;
	padding: var(--space-lg);
	position: fixed !important;
	top: 0 !important;
	width: min(70vw, 30ch);
	z-index: var(--z-index-overlay)
}

.drawer.enter-from,
.drawer.leave-to {
	opacity: 1;
	transform: translateX(-100%)
}

.drawer--right {
	left: auto !important;
	right: 0 !important
}

.drawer--right.enter-from,
.drawer--right.leave-to {
	transform: translateX(100%)
}

ui-modal {
	align-items: flex-start;
	bottom: 0;
	justify-content: center;
	left: 0;
	overflow: auto;
	padding: var(--space-xxxl) var(--space-gutter);
	position: fixed;
	right: 0;
	top: 0;
	z-index: var(--z-index-overlay)
}

ui-modal:not([hidden]) {
	display: flex
}

ui-modal .dialog {
	border: 0;
	box-shadow: var(--shadow-md)
}

ui-modal::part(backdrop) {
	background: var(--color-overlay)
}

ui-modal::part(content) {
	max-width: 100%
}

ui-modal.enter-active,
ui-modal.leave-active {
	transition: opacity .3s
}

ui-modal.enter-from,
ui-modal.leave-to {
	opacity: 0
}

ui-modal.enter-active::part(content),
ui-modal.leave-active::part(content) {
	transition: transform .3s cubic-bezier(.54, 1.12, .38, 1.11), opacity .3s
}

ui-modal.enter-from::part(content),
ui-modal.leave-to::part(content) {
	opacity: 0;
	transform: scale(.7)
}

.nav {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0
}

.nav-heading {
	color: var(--color-muted);
	font-family: var(--font-text);
	font-size: var(--text-xxs);
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-xs);
	padding: 0 var(--space-sm);
	text-transform: uppercase;
	width: 100%
}

*+.nav-heading {
	margin-top: var(--space-lg)
}

.nav-link {
	align-items: center;
	border-radius: var(--control-radius);
	color: var(--color-text);
	display: flex;
	font-weight: var(--weight-medium);
	gap: var(--space-xs);
	min-height: var(--control-height);
	padding: var(--space-xs) var(--space-sm);
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	transform: none !important
}

.nav-link>:not(.icon) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.nav-link>.icon {
	font-size: 120%
}

.nav-link>[class^=icon-fa] {
	padding: 2px
}

.nav-link>.badge {
	margin-left: auto
}

.nav-link.is-disabled,
.nav-link:disabled {
	cursor: default;
	opacity: .5
}

.nav-link .is-inert {
	cursor: default
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert) {
	cursor: pointer
}

.nav-link.is-focused:not(:disabled):not(.is-disabled):not(.is-inert),
.nav-link.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert),
.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):focus,
.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):hover,
.nav-link[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
	filter: var(--filter-hover)
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):active {
	filter: var(--filter-active);
	transform: scale(.97)
}

.nav-link:focus,
.nav-link:hover {
	/* background: var(--color-fill) */
}

.nav-link.is-active,
.nav-link[aria-current=page] {
	background: #EEBD22 !important;
	color: #FFF;
}

.nav-link.is-active .badge,
.nav-link[aria-current=page] .badge {
	background: inherit;
	color: inherit
}

@media (max-width:52rem) {
	.collapsible-nav {
		flex: 1 1 10ch;
		max-width: -moz-fit-content;
		max-width: fit-content;
		min-width: 0
	}
}

@media (min-width:52.001rem) {
	.collapsible-nav>:first-child {
		display: none
	}

	.collapsible-nav>:last-child {
		display: contents !important
	}
}

.placeholder {
	align-items: center;
	color: var(--color-muted);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl) 0;
	text-align: center
}

.placeholder>* {
	max-width: 50ch
}

.placeholder__icon {
	stroke-width: 1.5px;
	height: 4em;
	width: 4em
}

:root {
	--sidebar-width: 25ch
}

.with-sidebar {
	align-items: flex-start;
	display: flex;
	gap: var(--space-gutter);
	justify-content: center
}

.with-sidebar>:not(.sidebar) {
	flex-grow: 999;
	min-width: 0
}

.sidebar {
	display: flex
}

@media (max-width:52rem) {
	.with-sidebar {
		align-items: stretch;
		flex-direction: column;
		gap: var(--space-md)
	}

	.with-sidebar>:not(.sidebar) {
		width: 100%
	}

	.sidebar {
		flex-direction: row;
		flex-wrap: wrap
	}

	.sidebar--bottom {
		align-items: center;
		background: var(--color-bg);
		bottom: 0;
		flex-basis: auto !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		margin-left: calc(var(--space-gutter)*-1);
		margin-right: calc(var(--space-gutter)*-1);
		padding: var(--space-sm) var(--space-gutter);
		position: sticky;
		width: calc(100% + var(--space-gutter)*2) !important;
		z-index: var(--z-index-header)
	}

	.sidebar--bottom.is-stuck {
		box-shadow: var(--shadow-sm)
	}
}

@media (min-width:52.001rem) {
	.sidebar {
		flex-basis: 25ch;
		flex-basis: var(--sidebar-width);
		flex-direction: column;
		flex-shrink: 0
	}

	.sidebar--sticky {
		box-sizing: content-box;
		margin-bottom: calc(var(--space-gutter)*-1);
		margin-top: calc(var(--space-gutter)*-1);
		max-height: calc(100vh - var(--header-height) - var(--space-gutter)*2);
		overflow: auto;
		padding-bottom: var(--space-gutter);
		padding-top: var(--space-gutter);
		position: sticky;
		top: var(--header-height)
	}

	.sidebar__collapsed {
		display: none
	}
}

.skip-link {
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
	padding: var(--space-xs);
	position: absolute;
	top: -10rem
}

.skip-link:focus {
	left: var(--space-xs);
	position: absolute;
	top: var(--space-xs);
	z-index: var(--z-index-overlay)
}

.spinner {
	align-items: center;
	color: var(--color-muted);
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-sm)
}

.spinner:before {
	animation: spinner .6s linear infinite;
	border: .35em solid var(--color-fill);
	border-radius: 50%;
	border-top-color: var(--color-stroke);
	content: "";
	display: block;
	height: 2em;
	margin: 0 auto;
	width: 2em
}

.spinner--sm {
	padding: 0;
	vertical-align: -.3em
}

.spinner--sm:before {
	border-width: .25em;
	height: 1.2em;
	width: 1.2em
}

.spinner--block {
	display: flex;
	padding: var(--space-md)
}

@keyframes spinner {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(359deg)
	}
}

.table-container {
	max-width: 100%;
	overflow: auto;
	width: -moz-fit-content;
	width: fit-content
}

.table-container * {
	word-wrap: normal
}

.table-container table {
	border: 0;
	width: 100%
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

table,
table td,
table th {
	border: 1px solid var(--color-fill)
}

table td,
table th {
	padding: var(--space-sm);
	text-align: left
}

table th {
	font-weight: var(--weight-bold)
}

.table,
.table-container table {
	border-collapse: separate;
	font-size: var(--text-xs)
}

.table td,
.table th,
.table-container table td,
.table-container table th {
	border-width: 1px 0 0;
	padding: var(--space-sm);
	text-align: left
}

.table th,
.table-container table th {
	font-weight: var(--weight-bold)
}

.table thead td,
.table thead th,
.table-container table thead td,
.table-container table thead th {
	border-width: 0
}

td.choice-cell {
	min-width: 4ch;
	padding: 0;
	position: relative
}

td.choice-cell>* {
	align-items: center;
	bottom: 0;
	cursor: pointer;
	display: flex;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.is-highlighted,
td.choice-cell>.is-highlighted,
td.choice-cell>:not(.is-disabled):hover {
	background: var(--color-fill)
}

.tabs {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--space-sm)*-1);
	margin-right: calc(var(--space-sm)*-1)
}

.tab {
	color: var(--color-muted);
	flex-shrink: 0;
	font-weight: var(--weight-medium);
	min-width: 2ch;
	overflow: hidden;
	padding: var(--space-xs) var(--space-sm);
	position: relative;
	text-align: center;
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	text-overflow: ellipsis;
	white-space: nowrap
}

.tab.is-hovered:not(.is-disabled):not([aria-disabled=true]),
.tab:not(.is-disabled):not([aria-disabled=true]):hover {
	color: var(--color-text)
}

.tab.is-active,
.tab[aria-current=page],
.tab[aria-selected=true] {
	color: #DDDDDD !important
}

.tab.is-active:after,
.tab[aria-current=page]:after,
.tab[aria-selected=true]:after {
	background: #EEBD22;
	border-radius: var(--radius);
	bottom: 0;
	content: "";
	height: 4px;
	left: 50%;
	min-width: 2ch;
	position: absolute;
	transform: translateX(-50%);
	width: calc(100% - var(--space-sm)*2)
}

.tab.is-disabled,
.tab[aria-disabled=true] {
	cursor: default;
	opacity: .3
}

.tabs--vertical {
	align-items: stretch;
	flex-direction: column;
	flex-wrap: nowrap;
	font-size: var(--text-xs);
	margin-right: 0
}

.tabs--vertical .tab {
	display: block;
	padding: var(--space-xxs) var(--space-sm);
	text-align: left
}

.tabs--vertical .tab.is-active:after,
.tabs--vertical .tab[aria-current=page]:after,
.tabs--vertical .tab[aria-selected=true]:after {
	bottom: var(--space-xxs);
	height: calc(100% - var(--space-xxs)*2);
	left: 0;
	min-width: 0;
	transform: none;
	width: 4px
}

ui-tooltip {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

.tooltip {
	--color-text: var(--color-emphasis-contrast);
	--color-muted: hsla(0, 0%, 100%, .5);
	--color-accent: var(--color-text);
	background: var(--color-emphasis);
	border-radius: var(--radius);
	box-shadow: var(--space-md);
	color: var(--color-emphasis-contrast);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	max-width: 30ch;
	overflow: hidden;
	padding: var(--space-xs) var(--space-sm);
	text-align: center;
	z-index: var(--z-index-overlay)
}

.tooltip small {
	color: var(--color-muted);
	font-size: var(--text-xxs)
}

.tooltip.enter-active,
.tooltip.leave-active {
	transition: opacity .2s, transform .2s
}

.tooltip.enter-from,
.tooltip.leave-to {
	opacity: 0;
	transform: scale(.95)
}

.tooltip--block {
	font-size: var(--text-xxs);
	padding: var(--space-xs) var(--space-sm);
	text-align: left
}

turbo-frame {
	display: block
}

.busy-spinner[aria-busy=true] {
	min-height: 4em;
	position: relative;
	visibility: hidden
}

.busy-spinner[aria-busy=true]:after {
	animation: spinner .6s linear infinite;
	border: .35em solid var(--color-fill);
	border-radius: 50%;
	border-top-color: var(--color-stroke);
	content: "";
	height: 2em;
	left: calc(50% - 1em);
	position: absolute;
	top: var(--space-md);
	visibility: visible;
	width: 2em;
	z-index: 2
}

.turbo-progress-bar {
	background-color: var(--color-accent)
}

.next-page {
	position: relative
}

.next-page:before {
	bottom: -100px;
	content: "";
	position: absolute;
	top: -100px
}

.user-label {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: var(--space-xxs);
	-webkit-text-decoration: none;
	text-decoration: none;
	vertical-align: bottom
}

.user-label .avatar {
	height: 18px;
	width: 18px
}

.emoji-picker {
	max-width: none;
	padding: 0
}

.emoji-picker emoji-picker {
	--border-color: var(--color-stroke);
	--border-size: 0;
	--background: var(--color-bg);
	--button-hover-background: var(--color-fill);
	--button-active-background: var(--color-fill);
	--category-font-color: var(--color-muted);
	--indicator-color: var(--color-accent);
	--input-border-color: var(--color-stroke);
	--input-border-radius: var(--radius);
	--input-font-color: var(--color-text);
	--input-placeholder-color: var(--color-muted);
	--input-padding: 0.4em 0.7em;
	--outline-color: var(--color-accent)
}

.visually-hidden {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

.container {
	margin-left: auto;
	margin-right: auto;
	/* //max-width: 72rem; */
	padding-left: var(--space-gutter);
	padding-right: var(--space-gutter);
	width: 100%
}

.section {
	padding-bottom: var(--space-gutter);
	padding-top: var(--space-gutter)
}

.measure {
	max-width: 100%
}

.gap-px {
	gap: var(--space-px)
}

.gap-x-px {
	-moz-column-gap: var(--space-px);
	column-gap: var(--space-px)
}

.gap-y-px {
	row-gap: var(--space-px)
}

.p-px {
	padding: var(--space-px)
}

.px-px {
	padding-left: var(--space-px);
	padding-right: var(--space-px)
}

.py-px {
	padding-bottom: var(--space-px);
	padding-top: var(--space-px)
}

.m-px {
	margin: var(--space-px)
}

.mx-px {
	margin-left: var(--space-px);
	margin-right: var(--space-px)
}

.my-px {
	margin-bottom: var(--space-px)
}

.mt-px,
.my-px {
	margin-top: var(--space-px)
}

.-m-px {
	margin: calc(var(--space-px)*-1)
}

.-mx-px {
	margin-left: calc(var(--space-px)*-1);
	margin-right: calc(var(--space-px)*-1)
}

.-my-px {
	margin-bottom: calc(var(--space-px)*-1)
}

.-mt-px,
.-my-px {
	margin-top: calc(var(--space-px)*-1)
}

.gap-xxs {
	gap: var(--space-xxs)
}

.gap-x-xxs {
	-moz-column-gap: var(--space-xxs);
	column-gap: var(--space-xxs)
}

.gap-y-xxs {
	row-gap: var(--space-xxs)
}

.p-xxs {
	padding: var(--space-xxs)
}

.px-xxs {
	padding-left: var(--space-xxs);
	padding-right: var(--space-xxs)
}

.py-xxs {
	padding-bottom: var(--space-xxs);
	padding-top: var(--space-xxs)
}

.m-xxs {
	margin: var(--space-xxs)
}

.mx-xxs {
	margin-left: var(--space-xxs);
	margin-right: var(--space-xxs)
}

.my-xxs {
	margin-bottom: var(--space-xxs)
}

.mt-xxs,
.my-xxs {
	margin-top: var(--space-xxs)
}

.-m-xxs {
	margin: calc(var(--space-xxs)*-1)
}

.-mx-xxs {
	margin-left: calc(var(--space-xxs)*-1);
	margin-right: calc(var(--space-xxs)*-1)
}

.-my-xxs {
	margin-bottom: calc(var(--space-xxs)*-1)
}

.-mt-xxs,
.-my-xxs {
	margin-top: calc(var(--space-xxs)*-1)
}

.gap-xs {
	gap: var(--space-xs)
}

.gap-x-xs {
	-moz-column-gap: var(--space-xs);
	column-gap: var(--space-xs)
}

.gap-y-xs {
	row-gap: var(--space-xs)
}

.p-xs {
	padding: var(--space-xs)
}

.px-xs {
	padding-left: var(--space-xs);
	padding-right: var(--space-xs)
}

.py-xs {
	padding-bottom: var(--space-xs);
	padding-top: var(--space-xs)
}

.m-xs {
	margin: var(--space-xs)
}

.mx-xs {
	margin-left: var(--space-xs);
	margin-right: var(--space-xs)
}

.my-xs {
	margin-bottom: var(--space-xs)
}

.mt-xs,
.my-xs {
	margin-top: var(--space-xs)
}

.-m-xs {
	margin: calc(var(--space-xs)*-1)
}

.-mx-xs {
	margin-left: calc(var(--space-xs)*-1);
	margin-right: calc(var(--space-xs)*-1)
}

.-my-xs {
	margin-bottom: calc(var(--space-xs)*-1)
}

.-mt-xs,
.-my-xs {
	margin-top: calc(var(--space-xs)*-1)
}

.gap-sm {
	gap: var(--space-sm)
}

.gap-x-sm {
	-moz-column-gap: var(--space-sm);
	column-gap: var(--space-sm)
}

.gap-y-sm {
	row-gap: var(--space-sm)
}

.p-sm {
	padding: var(--space-sm)
}

.px-sm {
	padding-left: var(--space-sm);
	padding-right: var(--space-sm)
}

.py-sm {
	padding-bottom: var(--space-sm);
	padding-top: var(--space-sm)
}

.m-sm {
	margin: var(--space-sm)
}

.mx-sm {
	margin-left: var(--space-sm);
	margin-right: var(--space-sm)
}

.my-sm {
	margin-bottom: var(--space-sm)
}

.mt-sm,
.my-sm {
	margin-top: var(--space-sm)
}

.-m-sm {
	margin: calc(var(--space-sm)*-1)
}

.-mx-sm {
	margin-left: calc(var(--space-sm)*-1);
	margin-right: calc(var(--space-sm)*-1)
}

.-my-sm {
	margin-bottom: calc(var(--space-sm)*-1)
}

.-mt-sm,
.-my-sm {
	margin-top: calc(var(--space-sm)*-1)
}

.gap-md {
	gap: var(--space-md)
}

.gap-x-md {
	-moz-column-gap: var(--space-md);
	column-gap: var(--space-md)
}

.gap-y-md {
	row-gap: var(--space-md)
}

.p-md {
	padding: var(--space-md)
}

.px-md {
	padding-left: var(--space-md);
	padding-right: var(--space-md)
}

.py-md {
	padding-bottom: var(--space-md);
	padding-top: var(--space-md)
}

.m-md {
	margin: var(--space-md)
}

.mx-md {
	margin-left: var(--space-md);
	margin-right: var(--space-md)
}

.my-md {
	margin-bottom: var(--space-md)
}

.mt-md,
.my-md {
	margin-top: var(--space-md)
}

.-m-md {
	margin: calc(var(--space-md)*-1)
}

.-mx-md {
	margin-left: calc(var(--space-md)*-1);
	margin-right: calc(var(--space-md)*-1)
}

.-my-md {
	margin-bottom: calc(var(--space-md)*-1)
}

.-mt-md,
.-my-md {
	margin-top: calc(var(--space-md)*-1)
}

.gap-lg {
	gap: var(--space-lg)
}

.gap-x-lg {
	-moz-column-gap: var(--space-lg);
	column-gap: var(--space-lg)
}

.gap-y-lg {
	row-gap: var(--space-lg)
}

.p-lg {
	padding: var(--space-lg)
}

.px-lg {
	padding-left: var(--space-lg);
	padding-right: var(--space-lg)
}

.py-lg {
	padding-bottom: var(--space-lg);
	padding-top: var(--space-lg)
}

.m-lg {
	margin: var(--space-lg)
}

.mx-lg {
	margin-left: var(--space-lg);
	margin-right: var(--space-lg)
}

.my-lg {
	margin-bottom: var(--space-lg)
}

.mt-lg,
.my-lg {
	margin-top: var(--space-lg)
}

.-m-lg {
	margin: calc(var(--space-lg)*-1)
}

.-mx-lg {
	margin-left: calc(var(--space-lg)*-1);
	margin-right: calc(var(--space-lg)*-1)
}

.-my-lg {
	margin-bottom: calc(var(--space-lg)*-1)
}

.-mt-lg,
.-my-lg {
	margin-top: calc(var(--space-lg)*-1)
}

.gap-xl {
	gap: var(--space-xl)
}

.gap-x-xl {
	-moz-column-gap: var(--space-xl);
	column-gap: var(--space-xl)
}

.gap-y-xl {
	row-gap: var(--space-xl)
}

.p-xl {
	padding: var(--space-xl)
}

.px-xl {
	padding-left: var(--space-xl);
	padding-right: var(--space-xl)
}

.py-xl {
	padding-bottom: var(--space-xl);
	padding-top: var(--space-xl)
}

.m-xl {
	margin: var(--space-xl)
}

.mx-xl {
	margin-left: var(--space-xl);
	margin-right: var(--space-xl)
}

.my-xl {
	margin-bottom: var(--space-xl)
}

.mt-xl,
.my-xl {
	margin-top: var(--space-xl)
}

.-m-xl {
	margin: calc(var(--space-xl)*-1)
}

.-mx-xl {
	margin-left: calc(var(--space-xl)*-1);
	margin-right: calc(var(--space-xl)*-1)
}

.-my-xl {
	margin-bottom: calc(var(--space-xl)*-1)
}

.-mt-xl,
.-my-xl {
	margin-top: calc(var(--space-xl)*-1)
}

.gap-xxl {
	gap: var(--space-xxl)
}

.gap-x-xxl {
	-moz-column-gap: var(--space-xxl);
	column-gap: var(--space-xxl)
}

.gap-y-xxl {
	row-gap: var(--space-xxl)
}

.p-xxl {
	padding: var(--space-xxl)
}

.px-xxl {
	padding-left: var(--space-xxl);
	padding-right: var(--space-xxl)
}

.py-xxl {
	padding-bottom: var(--space-xxl);
	padding-top: var(--space-xxl)
}

.m-xxl {
	margin: var(--space-xxl)
}

.mx-xxl {
	margin-left: var(--space-xxl);
	margin-right: var(--space-xxl)
}

.my-xxl {
	margin-bottom: var(--space-xxl)
}

.mt-xxl,
.my-xxl {
	margin-top: var(--space-xxl)
}

.-m-xxl {
	margin: calc(var(--space-xxl)*-1)
}

.-mx-xxl {
	margin-left: calc(var(--space-xxl)*-1);
	margin-right: calc(var(--space-xxl)*-1)
}

.-my-xxl {
	margin-bottom: calc(var(--space-xxl)*-1)
}

.-mt-xxl,
.-my-xxl {
	margin-top: calc(var(--space-xxl)*-1)
}

.gap-xxxl {
	gap: var(--space-xxxl)
}

.gap-x-xxxl {
	-moz-column-gap: var(--space-xxxl);
	column-gap: var(--space-xxxl)
}

.gap-y-xxxl {
	row-gap: var(--space-xxxl)
}

.p-xxxl {
	padding: var(--space-xxxl)
}

.px-xxxl {
	padding-left: var(--space-xxxl);
	padding-right: var(--space-xxxl)
}

.py-xxxl {
	padding-bottom: var(--space-xxxl);
	padding-top: var(--space-xxxl)
}

.m-xxxl {
	margin: var(--space-xxxl)
}

.mx-xxxl {
	margin-left: var(--space-xxxl);
	margin-right: var(--space-xxxl)
}

.my-xxxl {
	margin-bottom: var(--space-xxxl)
}

.mt-xxxl,
.my-xxxl {
	margin-top: var(--space-xxxl)
}

.-m-xxxl {
	margin: calc(var(--space-xxxl)*-1)
}

.-mx-xxxl {
	margin-left: calc(var(--space-xxxl)*-1);
	margin-right: calc(var(--space-xxxl)*-1)
}

.-my-xxxl {
	margin-bottom: calc(var(--space-xxxl)*-1)
}

.-mt-xxxl,
.-my-xxxl {
	margin-top: calc(var(--space-xxxl)*-1)
}

.gap-gutter {
	gap: var(--space-gutter)
}

.gap-x-gutter {
	-moz-column-gap: var(--space-gutter);
	column-gap: var(--space-gutter)
}

.gap-y-gutter {
	row-gap: var(--space-gutter)
}

.p-gutter {
	padding: var(--space-gutter)
}

.px-gutter {
	padding-left: var(--space-gutter);
	padding-right: var(--space-gutter)
}

.py-gutter {
	padding-bottom: var(--space-gutter);
	padding-top: var(--space-gutter)
}

.m-gutter {
	margin: var(--space-gutter)
}

.mx-gutter {
	margin-left: var(--space-gutter);
	margin-right: var(--space-gutter)
}

.my-gutter {
	margin-bottom: var(--space-gutter)
}

.mt-gutter,
.my-gutter {
	margin-top: var(--space-gutter)
}

.-m-gutter {
	margin: calc(var(--space-gutter)*-1)
}

.-mx-gutter {
	margin-left: calc(var(--space-gutter)*-1);
	margin-right: calc(var(--space-gutter)*-1)
}

.-my-gutter {
	margin-bottom: calc(var(--space-gutter)*-1)
}

.-mt-gutter,
.-my-gutter {
	margin-top: calc(var(--space-gutter)*-1)
}

.stack {
	display: flex;
	flex-direction: column
}

.stack.reverse {
	flex-direction: column-reverse
}

.row {
	align-items: center;
	display: flex
}

.row.reverse {
	flex-direction: row-reverse
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15ch, 100%), 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 15ch), 100%), 1fr))
}

.grid-fit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15ch, 100%), 1fr));
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 15ch), 100%), 1fr))
}

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

.inline {
	display: inline;
	vertical-align: middle
}

.inline-block {
	display: inline-block
}

.justify-center {
	justify-content: center
}

.justify-end {
	justify-content: flex-end
}

.justify-start {
	justify-content: flex-start
}

.justify-between {
	justify-content: space-between
}

.align-center {
	align-items: center
}

.align-start {
	align-items: flex-start
}

.align-end {
	align-items: flex-end
}

.align-baseline {
	align-items: baseline
}

.align-stretch {
	align-items: stretch
}

.align-self-center {
	align-self: center
}

.align-self-start {
	align-self: flex-start
}

.align-self-end {
	align-self: flex-end
}

.align-self-baseline {
	align-self: baseline
}

.align-self-stretch {
	align-self: stretch
}

.push-center,
.push-start {
	margin-right: auto
}

.push-center,
.push-end {
	margin-left: auto
}

@media (max-width:40rem) {
	.break-sm {
		flex-grow: 1;
		order: 999;
		width: 100%
	}
}

.grow {
	flex-grow: 1
}

.shrink {
	min-width: 0
}

.no-shrink {
	flex-shrink: 0
}

.full-width {
	width: 100%
}

.full-height {
	height: 100%
}

.wrap {
	flex-wrap: wrap
}

.wrap-reverse {
	flex-wrap: wrap-reverse
}

.nowrap {
	flex-wrap: nowrap;
	white-space: nowrap
}

.dividers>*+* {
	border-top: 1px solid var(--color-stroke);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg)
}

.float-left {
	float: left
}

.float-right {
	float: right
}

.overflow-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.overflow-visible {
	overflow: visible
}

.overflow-hidden {
	overflow: hidden
}

.scrollable,
.scrollable-x,
.scrollable-y {
	-ms-overflow-style: none;
	overflow: auto;
	scrollbar-width: none
}

.scrollable-x::-webkit-scrollbar,
.scrollable-y::-webkit-scrollbar,
.scrollable::-webkit-scrollbar {
	display: none
}

.scrollable-x:after,
.scrollable-x:before,
.scrollable-y:after,
.scrollable-y:before,
.scrollable:after,
.scrollable:before {
	content: "";
	display: block;
	flex-shrink: 0;
	opacity: 0;
	pointer-events: none;
	position: sticky;
	transition: opacity .5s;
	z-index: 10
}

.scrollable-x:after,
.scrollable-x:before {
	align-self: stretch;
	margin-left: -40px;
	width: 40px
}

.scrollable-x:before {
	background-image: linear-gradient(to right, var(--color-bg), transparent);
	left: 0
}

.scrollable-x:after {
	background-image: linear-gradient(to left, var(--color-bg), transparent);
	right: 0
}

.scrollable-x.is-scrolled-left:after,
.scrollable-x.is-scrolled-right:before {
	opacity: 1
}

.scrollable-y:after,
.scrollable-y:before {
	height: 40px;
	margin-top: -40px;
	width: 100%
}

.scrollable-y:before {
	background-image: linear-gradient(to bottom, var(--color-bg), transparent);
	top: 0
}

.scrollable-y:after {
	background-image: linear-gradient(to top, var(--color-bg), transparent);
	bottom: 0
}

.scrollable-y.is-scrolled-down:before,
.scrollable-y.is-scrolled-up:after {
	opacity: 1
}

.rotate-90 {
	transform: rotate(90deg)
}

.rotate-180 {
	transform: rotate(180deg)
}

.rotate-270 {
	transform: rotate(270deg)
}

.flip-horizontal {
	transform: scaleX(-1)
}

.flip-vertical {
	transform: scaleY(-1)
}

.text-left {
	text-align: left
}

.text-center {
	text-align: center
}

.text-right {
	text-align: right
}

.color-text {
	color: var(--color-text)
}

.color-muted {
	color: var(--color-muted)
}

.color-accent {
	color: var(--color-accent-text)
}

.color-success {
	color: var(--color-success-text)
}

.color-warning {
	color: var(--color-warning-text)
}

.color-danger {
	color: var(--color-danger-text)
}

.color-activity {
	color: var(--color-activity-text)
}

.color-inherit {
	color: inherit
}

.text-xxs {
	font-size: var(--text-xxs)
}

.text-xs {
	font-size: var(--text-xs)
}

.text-sm {
	font-size: var(--text-sm)
}

.text-md {
	font-size: var(--text-md)
}

.text-lg {
	font-size: var(--text-lg)
}

.text-xl {
	font-size: var(--text-xl)
}

.text-xxl {
	font-size: var(--text-xxl)
}

.animate-shake {
	animation: shake .8s
}

@keyframes shake {

	10%,
	90% {
		transform: translateX(-1px)
	}

	20%,
	80% {
		transform: translateX(2px)
	}

	30%,
	50%,
	70% {
		transform: translateX(-4px)
	}

	40%,
	60% {
		transform: translateX(4px)
	}
}

.animate-appear {
	animation: appear .5s
}

@keyframes appear {
	0% {
		opacity: 0;
		transform: scale(.9)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.bg-accent,
.bg-activity,
.bg-danger,
.bg-emphasis,
.bg-success,
.bg-warning {
	--color-fill: hsla(0, 0%, 100%, .1);
	--color-stroke: hsla(0, 0%, 100%, .25);
	--color-muted: var(--color-text);
	--color-accent: var(--color-text);
	--color-accent-text: var(--color-text);
	background-color: #EEBD22;
	color: var(--color-text)
}

.bg-fill {
	background-color: var(--color-fill)
}

.bg-fill-soft {
	background-color: #EEBD22 !important; 
}

.bg-emphasis {
	--color-bg: var(--palette-emphasis);
	--color-text: var(--palette-emphasis-contrast)
}

.bg-accent {
	--color-bg: var(--palette-accent);
	--color-text: var(--palette-accent-contrast)
}

.bg-accent-soft {
	background-color: var(--color-accent-soft);
	color: var(--color-accent-text)
}

.bg-success {
	--color-bg: var(--palette-success);
	--color-text: var(--palette-success-contrast)
}

.bg-success-soft {
	background-color: var(--color-success-soft);
	color: var(--color-success-text)
}

.bg-warning {
	--color-bg: var(--palette-warning);
	--color-text: var(--palette-warning-contrast)
}

.bg-warning-soft {
	background-color: #550B55;
	color: #E326E3
}

.bg-danger {
	--color-bg: var(--palette-danger);
	--color-text: var(--palette-danger-contrast)
}

.bg-danger-soft {
	background-color: var(--color-danger-soft);
	color: var(--color-danger-text)
}

.bg-activity {
	--color-bg: var(--palette-activity);
	--color-text: var(--palette-activity-contrast)
}

.bg-activity-soft {
	background-color: var(--color-activity-soft);
	color: var(--color-activity-text)
}

.no-pointer {
	pointer-events: none
}

.no-select {
	-moz-user-select: none;
	user-select: none;
	-webkit-user-select: none
}

.clickable.is-disabled,
.clickable:disabled {
	cursor: default;
	opacity: .5
}

.clickable .is-inert {
	cursor: default
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert) {
	cursor: pointer
}

.clickable.is-focused:not(:disabled):not(.is-disabled):not(.is-inert),
.clickable.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert),
.clickable:not(:disabled):not(.is-disabled):not(.is-inert):focus,
.clickable:not(:disabled):not(.is-disabled):not(.is-inert):hover,
.clickable[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
	filter: var(--filter-hover)
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert):active {
	filter: var(--filter-active);
	transform: scale(.97)
}

.cursor-default {
	cursor: default !important
}

.cursor-help {
	cursor: help !important
}

.cursor-pointer {
	cursor: pointer !important
}

.js .no-js-only,
.no-js .js-only {
	display: none !important
}

.rounded {
	border-radius: var(--radius)
}

.pill {
	border-radius: 999px
}

.overlay-container {
	position: relative
}

.has-overlay:before,
.overlay {
	bottom: 0;
	left: 0;
	position: absolute !important;
	/* !important to override .busy-spinner*/
	right: 0;
	top: 0
}

.has-overlay:before {
	content: ""
}

.truncated {
	max-height: 15em;
	overflow: hidden;
	position: relative
}

.truncated__expander {
	align-items: flex-end;
	background: linear-gradient(to bottom, transparent, var(--color-bg) 60%);
	bottom: 0;
	display: flex;
	height: 5em;
	left: 0;
	position: absolute;
	right: 0;
	width: 100%
}

.font-text {
	font-family: var(--font-text)
}

.font-display {
	font-family: var(--font-display)
}

.font-mono {
	font-family: var(--font-mono)
}

.weight-normal {
	font-weight: var(--weight-normal)
}

.weight-medium {
	font-weight: var(--weight-medium)
}

.weight-bold {
	font-weight: var(--weight-bold)
}

.underline {
	-webkit-text-decoration: underline;
	text-decoration: underline
}

.no-underline {
	-webkit-text-decoration: none;
	text-decoration: none
}

@media (max-width:40rem) {
	.hide-sm {
		display: none !important
	}
}

@media (min-width:40.001rem) {
	.hide-md-up {
		display: none !important
	}
}

@media (max-width:52rem) {
	.hide-md-down {
		display: none !important
	}
}

@media (min-width:52.001rem) {
	.hide-lg-up {
		display: none !important
	}
}

@media (max-width:68rem) {
	.hide-lg-down {
		display: none !important
	}
}

.hide-if-empty:empty,
.hide-if-not-only-child:not(:only-child),
[data-theme=dark] .light-only,
[data-theme=light] .dark-only {
	display: none
}

.auth-button[data-provider=facebook] {
	background-color: #4267b2;
	color: #fff
}

.auth-button[data-provider^=twitter] {
	background-color: #1da1f2;
	color: #fff
}

.auth-button[data-provider=linkedin] {
	background-color: #0077b5;
	color: #fff
}

.auth-button[data-provider=google] {
	background-color: #fff;
	border: 1px solid var(--color-stroke);
	color: #555
}

.auth-button[data-provider=github] {
	background-color: #333;
	color: #fff
}

.auth-button[data-provider=gitlab] {
	background-color: #e24329;
	color: #fff
}

.auth-button[data-provider=bitbucket] {
	background-color: #205081;
	color: #fff
}

.channel-card__info,
.channel-card__inner {
	flex-basis: 30ch
}

.comment {
	--comment-padding: var(--space-lg);
	padding: var(--comment-padding)
}

@media (min-width:40.001rem) {
	.comment {
		border-radius: var(--radius);
		padding-left: calc(var(--attribution-avatar-size) + var(--space-md) + var(--comment-padding));
		position: relative;
		transition: background .2s
	}

	.comment .attribution {
		padding-left: 0
	}

	.comment .attribution__info {
		display: inline;
		margin-left: var(--space-xxs)
	}
}

.comment.is-highlighted,
:focus>.comment,
:target>.comment {
	background: var(--color-warning-soft)
}

.comment.is-answer {
	border: 2px solid var(--color-success);
	box-shadow: inset 0 0 10px 2px var(--color-success-soft);
	margin-bottom: -1px;
	margin-top: -1px
}

.comment.is-hidden {
	background: var(--palette-fill-soft);
	padding-top: var(--space-xs)
}

.comment.is-hidden.is-expanded>.comment__hidden {
	margin-bottom: var(--space-sm)
}

.comment.is-hidden:not(.is-expanded) {
	padding-bottom: var(--space-xs)
}

.comment.is-hidden:not(.is-expanded)>.comment__hidden~* {
	display: none
}

.comment__parent {
	margin-top: var(--space-xs);
	width: -moz-fit-content;
	width: fit-content
}

.comment__parent>a {
	color: var(--color-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium)
}

.comment__parent-tooltip {
	max-width: 80ch;
	overflow: hidden;
	padding: 0;
	text-align: left
}

.comment__parent-tooltip .comment {
	--comment-padding: var(--space-md)
}

.comment__parent-tooltip .comment>*+* {
	margin-top: var(--space-xs)
}

.comment__replies {
	margin-top: var(--space-md)
}

.comment__replies .comment__parent {
	display: none
}

.comment__replies .comment {
	--comment-padding: var(--space-md)
}

.comment-list .card__row {
	padding: 0
}

.comment-list #page_1+.card__row {
	border-top: 0
}

.comment-list .comment {
	border-radius: 4px
}

.composer {
	--height-transition-duration: 0s;
	background: var(--color-bg);
	border-radius: var(--radius);
	bottom: calc(var(--radius)*-1);
	max-height: calc(100vh - var(--header-height));
	position: sticky;
	transition: box-shadow .2s, border .2s, height 0s, bottom .2s;
	transition: box-shadow .2s, border .2s, height var(--height-transition-duration), bottom .2s
}

.composer.is-static {
	height: 70vh !important;
	position: static
}

.composer.is-static .composer__close {
	visibility: hidden;
	width: var(--space-xs)
}

.composer:not(.is-open) {
	--height-transition-duration: 0.2s;
	bottom: -4.75em;
	height: 4.75em !important
}

.composer:not(.is-open) .composer__form {
	display: none
}

.composer.is-open {
	--color-bg: var(--palette-surface);
	--focus-shadow: 0 0 0 transparent;
	box-shadow: 0 0 0 transparent, var(--shadow-md);
	box-shadow: var(--focus-shadow), var(--shadow-md);
	height: 300px;
	min-height: 200px;
	padding-bottom: var(--radius);
	z-index: calc(var(--z-index-header) + 1)
}

.composer.is-open:focus-within {
	--focus-shadow: 0 0 0 2px var(--color-accent)
}

.composer.is-open .composer__placeholder {
	display: none
}

@media (max-width:40rem) {
	.composer.is-open {
		border-radius: 0;
		margin-left: calc(var(--space-gutter)*-1);
		margin-right: calc(var(--space-gutter)*-1)
	}
}

.composer__placeholder {
	border: 2px dashed var(--color-stroke);
	border-radius: var(--radius);
	cursor: text;
	padding: var(--space-md);
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	transition: box-shadow .2s, border .2s, color .2s
}

.composer__placeholder:hover {
	border-color: transparent;
	box-shadow: var(--shadow-md);
	color: inherit
}

.composer__placeholder .avatar {
	width: var(--control-height)
}

.composer__form .text-editor {
	border: 0;
	box-shadow: none;
	min-height: 0
}

.composer__form .text-editor__input {
	resize: none
}

.composer__handle {
	cursor: ns-resize;
	height: 20px;
	left: 100px;
	position: absolute;
	right: 100px;
	top: -5px;
	touch-action: none
}

.composer__handle:before {
	background: var(--color-fill);
	border-radius: var(--radius);
	content: "";
	height: 5px;
	left: 50%;
	position: absolute;
	top: 10px;
	transform: translateX(-50%);
	width: 20%
}

.composer__toolbar {
	border-bottom: 1px solid var(--color-stroke);
	padding: var(--space-xxs)
}

.composer__parent {
	padding-left: var(--space-sm)
}

.emoji {
	display: inline-block
}

span.emoji {
	transform: scale(1.2)
}

img.emoji {
	height: 1.2em;
	vertical-align: -.2em;
	width: 1.2em
}

.icon .emoji {
	height: 100%;
	vertical-align: 0;
	width: 100%
}

.header {
	--color-bg: rgb(33, 37, 41);
	background: var(--palette-surface);
	background: var(--color-bg);
	box-shadow: none;
	position: sticky;
	top: -1px;
	transition: box-shadow .2s;
	z-index: var(--z-index-header)
}

.header .container {
	height: var(--header-height)
}

.header-breadcrumb {
	color: var(--color-muted);
	flex-shrink: 99;
	margin-left: var(--space-xs);
	transition: opacity .2s, transform .2s
}

.header-breadcrumb:before {
	content: "\203A";
	margin: 0 var(--space-xs)
}

.header-breadcrumb[hidden] {
	display: block !important;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility 0s .2s;
	visibility: hidden
}

.header-search__form {
	margin-right: var(--space-xs)
}

.header-search__form input {
	width: 30ch
}

.header-user {
	margin-left: var(--space-xs)
}

.email-verification-banner {
	padding-bottom: var(--space-md);
	padding-top: var(--space-md)
}

@media (max-width:52rem) {
	.index-sidebar .index-create-post {
		margin-left: auto
	}
}

.index-footer {
	margin-top: var(--space-lg)
}

.notifications-menu {
	max-height: 40em;
	max-width: 100%;
	width: 55ch
}

.notifications-menu .menu-item {
	margin-top: 2px
}

.notification strong {
	color: var(--color-accent-text);
	font-weight: var(--weight-medium)
}

.notification.is-unread {
	background-color: var(--color-bg);
	background-image: linear-gradient(var(--color-activity-soft), var(--color-activity-soft))
}

.notification.is-unread .notification__time,
.notification.is-unread strong,
.notification.is-unread>.icon {
	color: var(--color-activity-text)
}

.notification-grid .choice {
	width: 8ch
}

.alert--notification {
	background-color: var(--color-bg);
	background-image: linear-gradient(var(--color-activity-soft), var(--color-activity-soft))
}

.alert--notification .alert__message {
	line-height: inherit;
	margin: calc(var(--space-xs)*-1)
}

.alert--notification .notification__time {
	display: none
}

.post-feed__pinned {
	--grid-min: 31ch
}

.post-feed__refresh {
	position: sticky;
	top: calc(var(--header-height) + var(--space-md))
}

.post-feed__refresh>* {
	left: 50%;
	position: absolute;
	transform: translateX(-50%)
}

.post-feed__refresh .btn {
	box-shadow: var(--shadow-md)
}

.post-list>:first-child>.post-list-item:first-of-type {
	border-top: 0
}

.post-list-item {
	padding: var(--space-md)
}

@media (min-width:40.001rem) {
	.post-list-item {
		padding-left: var(--space-lg)
	}
}

.post-list-item__avatar {
	flex-shrink: 0;
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	width: 2.5rem
}

.post-list-item__avatar,
.post-list-item__controls,
.post-list-item__end {
	margin-top: 3px
}

@media (max-width:40rem) {
	.post-list-item__main {
		width: 100%
	}

	.post-list-item__upper {
		flex-wrap: wrap;
		gap: var(--space-xs)
	}

	.post-list-item__end {
		flex-direction: row-reverse
	}
}

.post-title-link {
	color: inherit;
	display: inline-flex;
	margin: -10px 0;
	padding: 10px 0
}

.is-read .post-title-link,
.not-logged-in .post-title-link:visited {
	color: var(--color-muted)
}

.is-read .post-list-item__unread {
	display: none
}

.post-cards .post-card {
	margin-bottom: 0px;
}

[data-route="waterhole.channels.show"] .post-feed__content .channel-label {
	display: none
}

.post-header .post-tags-summary .tag {
	font-size: var(--text-sm)
}

.post-header .attribution,
.post-header .post-title {
	width: 100%
}

.post-page .sidebar {
	flex-basis: 16ch;
	flex-shrink: 1
}

#comments {
	scroll-margin-top: calc(var(--space-lg) + var(--header-height))
}

.comments-pagination__pages {
	max-height: 20rem
}

.reactions-menu {
	border-radius: 999px;
	display: flex;
	flex-direction: row;
	max-width: none;
	min-width: 0;
	overflow: visible
}

.reactions-menu button {
	padding: 2px;
	transform-origin: bottom;
	transition: transform .2s
}

.reactions-menu button:hover {
	transform: scale(1.2)
}

.reactions-condensed .icon {
	filter: drop-shadow(1px 0 0 var(--color-bg));
	margin-left: -4px;
	position: relative
}

.reactions-condensed[data-count="0"] {
	display: none
}

.reaction[data-count="0"] .icon {
	filter: grayscale(.9);
	opacity: .3
}

.search-results .post-list-item__title a:visited {
	color: var(--color-muted)
}

.text-editor {
	height: auto;
	min-height: 15em;
	padding: 0
}

.text-editor__toolbar {
	margin: var(--space-xxs);
	margin-bottom: 0
}

.is-previewing .text-editor__toolbar {
	pointer-events: none;
	z-index: 1
}

.is-previewing .text-editor__toolbar>* {
	pointer-events: all
}

.is-previewing .text-editor__toolbar>:not(.text-editor__preview-button) {
	display: none
}

.text-editor__expander {
	position: relative
}

.text-editor__input {
	background: transparent;
	border: 0;
	box-shadow: none !important;
	max-height: 70vh;
	outline: none;
	padding: var(--space-md);
	padding-top: var(--space-xs);
	position: relative;
	resize: vertical;
	width: 100%
}

.text-editor__input[hidden] {
	display: inline !important;
	display: initial !important;
	visibility: hidden
}

.text-editor__preview {
	overflow: auto;
	padding: var(--space-md)
}

.user-profile__card .avatar {
	width: 12ch
}

.user-profile__content {
	flex-basis: 60ch
}

.user-profile__controls {
	float: right;
	margin-left: -100%;
	position: relative
}


/*
|--------------------------------------------------------------------------
| App CSS
|--------------------------------------------------------------------------
|
| Put any custom CSS in this file, and it will be loaded on every page,
| following Waterhole's default CSS. To discover more variables and
| classes you might like to override, read about Waterhole's design system:
|
| https://waterhole.dev/docs/design/overview
|
*/

:root {
	/* Main accent color */
	--palette-accent-h: 250;
	--palette-accent-s: 93%;
	--palette-accent-l: 58%;
}

[data-theme='light'] {
	/* Interface colors in light mode */
	--palette-bg-hsl: 250 38% 98%;
	--palette-surface-hsl: 0 100% 100%;
	--palette-text-hsl: 0 0% 0%;
	--palette-muted-hsl: 250 20% 50%;
}

[data-theme='dark'] {
	/* Interface colors in dark mode */
	--palette-bg-hsl: 250 20% 8%;
	--palette-surface-hsl: 250 20% 12%;
	--palette-text-hsl: 250 20% 93%;
	--palette-muted-hsl: 250 20% 60%;
}

.post-list-item__title .channel-label img{
	display:none !important
}

.post-list-item__title .channel-label span{
	font-size:14px !important
}

.smallertext{font-size: 14px !important} 

.post-card.card__body{padding: 0px !important}
.post-card__header{
	background-color: rgb(68, 68, 68) !important;
	padding:15px;

}
.post-card__content {padding: 5px;}
.postfooter {padding:0px 15px 15px 15px;}
.is-read .post-title-link,
.not-logged-in .post-title-link:visited {
	color: #FFF !important;
}

.sidebar .nav-link[href="https://forum.hstl.us"] {
    display: none;
}

.card{
	border-radius:none !important;
}

.post-page__comments .card{
border: none !important;
background-color: none !important;
background: none !important;
box-shadow: none !important;
}

.post-feed__toolbar .tabs {display: none !important}

.text-uppercase{
	text-transform: uppercase;
}