aside { width: 220px; }
div[role="search"] { margin-bottom: 0; }
header {position: relative; }
hgroup { margin-bottom: 0; }
svg, use { pointer-events: none; }
ul { list-style-type: none; padding-left: 0; }
ul li { list-style-type: none; }

.align-center { align-items: center; }
.background-primary { background-color: var(--pico-primary); }
.border-round { border-radius: 50%; }
.centered-card { margin: var(--pico-spacing) auto 0; }
.color-secondary { color: var(--pico-secondary); }
.error { color: var(--pico-del-color); border: 1px solid var(--pico-del-color); }
.flex { display: flex; gap: var(--pico-spacing); }
details.dropdown > summary + ul li a.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-column { flex-direction: column; }
.flex-inline { display: inline-flex; gap: var(--pico-spacing); }
.flex-grow { flex: 1; }
.float-left { float: left; }
.float-right { float: right; }
.gap-xxs { gap: 4px; }
.gap-xs { gap: calc(var(--pico-spacing) / 1.6); }
.hide { display: none; }
.horizontal-scroll { display: flex; flex-wrap: nowrap; gap: calc(var(--pico-spacing) / 3); }
.horizontal-scroll button { white-space: nowrap; flex: 0 0 auto; }
.hover-background:hover { background: var(--pico-table-row-stripped-background-color); }
.max-width-xs { max-width: 576px; }
.message { padding: var(--pico-spacing); border-radius: var(--pico-border-radius); }
.min-width-xxs { min-width: 220px; }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: var(--pico-spacing); }
.mb-xs { margin-bottom: calc(var(--pico-spacing) / 3); }
.ml-xs { margin-left: calc(var(--pico-spacing) / 3); }
.mr-xs { margin-right: calc(var(--pico-spacing) / 3); }
.muted-color { color: var(--pico-muted-color); }
.overflow-auto {
	-webkit-overflow-scrolling: touch;
	&::-webkit-scrollbar { display: none; }
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.padding-xs { padding: calc(var(--pico-spacing) / 1.6); }
.pointer { cursor: pointer; }
.position-relative { position: relative; }
.primary { color: var(--pico-primary); }
.settings-list { grid-template-columns: 1fr 1fr 72px; }
.show-hover-parent .show-hover { display:none; }
.show-hover-parent:hover .show-hover { display: unset; }
.space-between { justify-content: space-between; }
.strike { text-decoration: line-through; }
.text-center { text-align: center; }

.arc-1 { fill: var(--arc1, --pico-color); }
.arc-2 { fill: var(--arc2, --pico-color); }
.arc-3 { fill: var(--arc3, --pico-color); }
.arc-4 { fill: var(--arc4, --pico-color); }

button.danger {
	background-color: var(--pico-form-element-invalid-border-color);
	border-color: var(--pico-form-element-invalid-border-color);
}

button.danger:hover {
	background-color: var(--pico-form-element-invalid-active-border-color);
	border-color: var(--pico-form-element-invalid-active-border-color);
}

#task-list input[type='checkbox'] { margin-top: 0; }
#autocomplete {
	background: var(--pico-form-element-background-color);
	border: 1px solid var(--pico-form-element-border-color);
	border-radius: var(--pico-border-radius);
	left: 0;
	list-style-type: none;
	max-height: 200px;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: calc(100% - var(--pico-spacing));
	z-index: 10;
}
#autocomplete li {
	cursor: pointer;
	padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}
#autocomplete li.selected { background: var(--pico-dropdown-hover-background-color); }
#dot-menu { margin-bottom: 0; }
#dot-menu summary { height: unset; background-color: transparent; border-color: transparent; }
#dot-menu summary:after { display: none; }
#menu-close { line-height: 1em; }

@media only screen and (min-width: 1025px) {
	.show-sm { display: none; }
}

@media only screen and (max-width: 1024px) {
	aside {
		-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
		backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
		background-color: var(--pico-modal-overlay-background-color);
		width: 0;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1000;
		transition: backdrop-filter var(--pico-transition);
	}

	aside article {
		border-radius: 0;
		padding: 0;
	}

	aside nav {
		background-color: var(--pico-background-color);
		padding: var(--pico-spacing);
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		transform: translateX(-220px);
		transition: transform var(--pico-transition);
		width: 220px;
	}

	/* aside nav ul { margin-top: calc(var(--pico-spacing) * 1.6); } */
	aside.open { width: 100%; }
	aside.open nav { transform: translateX(0); }

	.align-left-sm { align-items: start; }
	.flex-column-lg { flex-direction: column; }
	.hide-sm { display: none; }
	.max-width-xs { max-width: 100%; }
	.space-between-sm { justify-content: space-between; width: 100%; }
	.width-100-sm { width: 100%; }

	#dot-menu {
		position: absolute;
		right: var(--pico-spacing);
		top: calc(var(--pico-spacing) / 1.6);
	}
	#dot-menu summary { padding-right: 0; padding-left: 0; }
}

@media only screen and (max-width: 768px) {
	.settings-list { grid-template-columns: 1fr; }
}