@import url("fonts/web-lato/Lato.css");

/* Theme */
:root {
	--color-accent: #6940e3;
	--color-accent-hc: #baaddd;
	--color-darkest: #0a0905;
	--color-dark: #45433d;
	--color-medium: #d6d5d2;
	--color-light: #f3eee0;
	--color-lightest: #fffcf4;
	--color-snow: #fff;
	--color-white: #fff;
	--color-white-transparent: rgba(255, 255, 255, 0.82);

	--color-back-bar: var(--color-white);
	--color-selection: #d6d7de;
	--color-highlight: #e6e9f7;
	--color-header-background-primary: #111024;
	--color-header-background-secondary: #50556e;

	--color-sidebar: #111024;
	--color-sidebar-focus: #212740;
	--color-sidebar-text: #ffffff;

	--color-field-background: #f3eee0;

	--color-red: #f04634;
	--color-blue: #1672f6;
	--color-orange: #f58f2e;
	--color-yellow: #fac53b;
	--color-green: #4ec04b;
	--color-teal: #5ba2ba;
	--color-indigo: #4a51c8;
	--color-purple: #9b53d2;
	--color-brown: #957958;
	--color-red-pale: #f0c5c0;
	--color-blue-pale: #c5d9f6;
	--color-orange-pale: #f5dcc4;
	--color-yellow-pale: #faecc8;
	--color-green-pale: #afd9ad;
	--color-teal-pale: #adced9;
	--color-indigo-pale: #b2b4d9;
	--color-purple-pale: #c8b2d9;
	--color-brown-pale: #decdb8;

	--gap-0: 0rem;
	--gap-4: 0.25rem;
	--gap-6: 0.375rem;
	--gap-8: 0.5rem;
	--gap-10: 0.625rem;
	--gap-12: 0.75rem;
	--gap-16: 1rem;
	--gap-20: 1.25rem;
	--gap-24: 1.5rem;
	--gap-28: 1.75rem;
	--gap-32: 2rem;
	--gap-40: 2.5rem;
	--gap-44: 2.75rem;
	--gap-48: 3rem;
	--gap-52: 3.25rem;
	--gap-64: 4rem;
	--gap-128: 8rem;
	--border-radius-8: 0.5rem;
	--border-radius-12: 0.75rem;
	--border-radius-16: 1rem;
	--border-radius-32: 2rem;

	--border-medium: 0.5pt solid var(--color-medium);
	--border-light: 1pt solid var(--color-light);
	--border-active: 1pt solid var(--color-accent);
	--border-error: 1pt var(--color-red) solid;

	--card-shadow: 0px 4px 10px 0px #878ca826;

	--box-shadow-light: 0px 4px 10px 0px rgba(135, 140, 168, 0.15);
	--box-shadow-strong:
		0px 161px 45px 0px rgba(31, 37, 71, 0),
		0px 103px 41px 0px rgba(31, 37, 71, 0.01),
		0px 58px 35px 0px rgba(31, 37, 71, 0.03),
		0px 26px 26px 0px rgba(31, 37, 71, 0.05),
		0px 6px 14px 0px rgba(31, 37, 71, 0.1);

	--box-shadow-medium:
		0px 6px 14px 0px #1f25471a, 0px 26px 26px 0px #1f25470d,
		0px 58px 35px 0px #1f254708, 0px 103px 41px 0px #1f254703,
		0px 161px 45px 0px #1f254700;

	--font-size-xs: 0.68rem;
	--font-size-s: 0.8rem;
	--font-size-m: 1rem;

	--wallpaper: url("../wallpaper-light.jpg");
}

/* 
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-accent: #536ee5;
        --color-accent-hc: #536ee5;
        --color-darkest: #f5f6ff;
        --color-dark: #b6b7bf;
        --color-medium: #5e6173;
        --color-light: #44484d;
        --color-lightest: #131314;
        --color-back-bar: var(--color-lightest);
        --color-selection: #2f2d38;
        --color-sidebar: #131314;
        --color-sidebar-text: #ffffff;
        --color-white: #1e2026;
        --color-white-transparent: rgba(35, 36, 41, 0.82);
        --wallpaper: url("../wallpaper-dark.jpg");
        --color-highlight: #09090a;
        --border-medium: 1pt solid var(--color-medium);
        --border-light: 1pt solid var(--color-light);
        --color-header-background-primary: #202126;
        --color-header-background-secondary: #202126;
        --color-sidebar-focus: var(--color-selection);
        --color-field-background: #1b1b1c;

        --color-red: #f04634;
        --color-blue: #1672f6;
        --color-orange: #f58f2e;
        --color-yellow: #fac53b;
        --color-green: #4ec04b;
        --color-teal: #5ba2ba;
        --color-indigo: #4a51c8;
        --color-purple: #9b53d2;
        --color-brown: #957958;
        --color-red-pale: #9d5b54;
        --color-blue-pale: #47648e;
        --color-orange-pale: #b68353;
        --color-yellow-pale: #917e4c;
        --color-green-pale: #548f52;
        --color-teal-pale: #4a7d8e;
        --color-indigo-pale: #6064ad;
        --color-purple-pale: #816696;
        --color-brown-pale: #7a603f;
    }
} */

/* Animations */

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

* {
	box-sizing: border-box;
}

*:not(button, a, .clickable) {
	hyphens: auto;
	transition: opacity 0.25s ease-in-out;
}

*:not(pre) {
	font-family: "LatoWeb", sans-serif;
}

@media screen and (max-width: 1920pt) {
	html {
		font-size: 0.8em;
	}
}

body {
	font-family: "LatoWeb", sans-serif;
	color: var(--color-dark);
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: var(--color-lightest);
}

h1,
h2,
h3,
h4,
h5,
p {
	margin: 0px;
}

h1,
.heading1 {
	font-size: 1.7rem;
	color: var(--color-darkest);
	font-weight: 700;
}

h3 {
	font-size: 1.25rem;
	color: var(--color-darkest);
}

h1.large,
h2.large,
h3.large {
	font-size: 2rem;
	color: var(--color-darkest);
	font-weight: 700;
}

h2.nav-title {
	font-size: 1.75rem;
}

h2,
.heading2 {
	font-size: 1.25rem;
	color: var(--color-darkest);
}

h2[onclick] {
	cursor: pointer;
}

.frame > h2 {
	padding-left: 0.5rem;
}

.frame > h3 {
	padding-left: 0.5rem;
}

.frame-sm > h2 {
	padding-left: 0.5rem;
}

.frame-sm > h3 {
	padding-left: 0.5rem;
}

.headline,
dt {
	font-weight: bold;
	font-size: var(--font-size-m);
	color: var(--color-darkest);
	margin-bottom: -0.25rem;
}

p,
.body {
	font-size: var(--font-size-m);
	color: var(--color-dark);
	font-weight: normal;
}

p.small,
span.small {
	font-size: var(--font-size-s);
}

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

.tagline {
	font-weight: bold;
	color: var(--color-darkest);
	text-transform: uppercase;
	letter-spacing: calc(var(--font-size-xs) * 0.1);
	font-size: var(--font-size-xs);
}

label {
	font-weight: bold;
	font-size: var(--font-size-m);
	color: var(--color-darkest);
	letter-spacing: 0.48px;
}

label.full-width {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	height: 100%;
	text-align: center;
}

.caption,
label.error {
	font-size: var(--font-size-xs);
	letter-spacing: calc(var(--font-size-xs) * 0.05);
	line-height: 1.5;
}

.error {
	color: var(--color-red);
}

.form-error {
	color: var(--color-red);
	font-size: var(--font-size-xs);
	margin-top: var(--gap-4);
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-8);
	width: 100%;
}

input {
	font-family: "LatoWeb", sans-serif;
	color: var(--color-dark);
}

input[type="radio"] {
	cursor: pointer;
}

input[disabled] {
	cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-accent);
}

input:not([type="checkbox"]),
textarea,
select {
	font-size: 1rem;
	padding: var(--gap-8);
	width: 100%;
	border: var(--border-medium);
	border-radius: var(--border-radius-8);
	display: block;
	outline: none;
	background-color: var(--color-white);
	color: var(--color-dark);
}

textarea {
	resize: vertical;
	min-height: 3rem;
}

input:not([type="checkbox"]):read-only {
	border: 0;
	background-color: var(--color-lightest);
}

input:placeholder-shown,
::placeholder,
::-webkit-input-placeholder {
	color: #807f7c;
	opacity: 1;
}

input[type="date"] {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	color: var(--color-accent);
	background-color: var(--color-lightest);
	border: 1px transparent solid;
	font-family: "LatoWeb", sans-serif;
}

select {
	background-image: url(./chevron-down.svg);
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
	background-size: auto 6pt;

	background-position: calc(100% - 6pt);
}
select.round {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-weight: bold;
	padding: 0.75rem 1.25rem;
	background-image: url(./chevron-down.svg);
	background-repeat: no-repeat;
	background-size: auto 8pt;
	background-position: calc(100% - 8pt);
	color: var(--color-dark);
	border-radius: 2rem;
}
h2 a {
	text-decoration: none;
	opacity: 0.7;
}
h2 a:hover {
	opacity: 1;
}
/* 
select {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-weight: bold;
	padding: 0.75rem 1.25rem;
	background-image: url(./chevron-down.svg);
	background-repeat: no-repeat;
	background-size: auto 8pt;
	color: var(--color-dark);
	border-radius: 1rem;
} */

select[value="Geprüft"] {
	background-image: url(./chevron-down-green.svg);
}

select[value="Erledigt"] {
	background-image: url(./chevron-down-green.svg);
}

select.round:focus {
	background-color: var(--color-light);
}

select:disabled {
	background-image: none;
	opacity: 1;
}

label > input {
	width: auto;
	display: inline-block;
}
fieldset {
	border: 0;
	padding: 0pt;
}

fieldset label {
	text-align: center;
}

input.small {
	font-size: var(--font-size-s);
	padding: var(--gap-8);
}

input.error,
input:invalid,
input:has(+ .error:not(:empty)),
textarea:has(+ .error:not(:empty)),
input:has(+ .error-box:not(:empty)),
textarea:has(+ .error-box:not(:empty)) {
	border: var(--border-error);
}

input:focus {
	border: var(--border-active);
	outline: none;
}

input[type="radio"] {
	accent-color: var(--color-accent);
}

.hidden-button {
	padding: 0.75rem 1.5rem;
}

.hidden-button summary {
	margin-left: 0.75rem;
}

.hidden-button button.noborder {
	padding: 0px;
}

.hidden-button[open] {
	background: var(--color-lightest);
	border-radius: 2rem;
}

button,
button.swal2-styled {
	font-size: var(--font-size-m);
	font-weight: bold;
	color: var(--color-accent);
	border: 1pt solid var(--color-accent);
	background: transparent;
	border-radius: var(--border-radius-8);
	padding: var(--gap-12) var(--gap-20);
	cursor: pointer;
	font-family: "LatoWeb", sans-serif;
	letter-spacing: calc(var(--font-size-m) * 0.015);
}

.card-dark button {
	color: var(--color-accent-hc);
}

button[type="submit"],
button.primary,
button.swal2-confirm {
	color: var(--color-sidebar-text);
	border: 0;
	background: var(--color-accent);
}

button.center-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-6);
}

button:disabled {
	cursor: default;
	opacity: 0.5;
}

button:active:not(:disabled),
a:active,
.copy-text:active {
	opacity: 0.6;
}

button.noborder {
	border: 0;
	padding: var(--gap-8);
}

button.danger {
	--color-accent: var(--color-red);
}

summary {
	cursor: pointer;
	margin-bottom: 0;
}

details:not(.spoiler) summary::marker {
	display: none;
	content: "";
}

.spoiler summary {
	color: var(--color-dark);
	padding: 0.25rem 0rem;
}

details summary > .card:first-child {
	border-bottom-left-radius: var(--border-radius-8);
	border-bottom-right-radius: var(--border-radius-8);
}

details[open] summary > .card:first-child {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

a {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: none;
}

a > div {
	font-weight: normal;
}

table {
	border-spacing: 0;
	border-radius: var(--border-radius-8);
}

thead {
	/* top: 0; */
	/* position: sticky; */
	/* z-index: 300; */
	color: var(--color-darkest);
}

th {
	text-align: left;
	border-bottom: var(--border-medium);
}

th {
	padding: var(--gap-8) var(--gap-16);
}

td {
	padding: var(--gap-12) var(--gap-16);
}

tbody tr:nth-child(odd) {
	background: var(--color-lightest);
}

tr.clickable:hover {
	background: var(--color-highlight);
}

dialog {
	width: 100vw;
	height: 100vh;
	position: fixed;
	display: none;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	z-index: 600;
	margin: 0px;
	max-width: 100vw;
	max-height: 100vh;
	border: none;
	background-color: rgba(112, 89, 178, 0.75);
}
dialog[open] {
	display: flex;
}

dialog > article {
	width: 30rem;
	background: var(--color-white);
	border-radius: var(--border-radius-12);
	padding: var(--gap-16);
}

dialog > article > header > form {
	width: auto;
}

aside details > summary {
	margin-bottom: var(--gap-8);
}

aside.sidebar {
	background-color: var(--color-white);
	padding: var(--gap-16);
	max-width: 16rem;
	width: 100%;
	align-self: flex-start;
	border-radius: var(--border-radius-12);
}

aside.sidebar + main {
	max-height: 100%;
	overflow-y: scroll;
}

aside.sidebar nav a[selected] {
	background-color: var(--color-selection);
}

ul.nav {
	list-style: none;
	padding-left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-12);
}

ul.nav ul {
	list-style: none;
	padding-left: var(--gap-24);
}

ul.nav li {
	border-radius: 8pt;
	width: 100%;
	font-size: 1rem;
}
ul.nav li a {
	width: 100%;
	display: block;
	color: var(--color-lightest);
	padding: var(--gap-16) var(--gap-20);
}
ul.nav li:hover,
li.selected {
	background-color: #4a415f;
}
ul.nav li:hover {
	opacity: 0.8;
}
ul.nav li:active {
	opacity: 0.6;
}

.main-nav .link,
aside.sidebar nav a {
	color: var(--color-darkest);
	padding: var(--gap-10) var(--gap-16);
	text-decoration: none;
	width: 100%;
	font-weight: normal;
	border-radius: var(--border-radius-8);
}

.main-nav .link {
	margin-bottom: var(--gap-8);
}

.main-nav a {
	text-decoration: none;
	font-weight: normal !important;
	flex-grow: 1;
}

.main-nav {
	background-color: var(--color-sidebar);
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	padding: var(--gap-16) var(--gap-24) var(--gap-32) var(--gap-24);
	width: 100%;
	justify-content: space-between;
	max-width: 17rem;
	flex-shrink: 0;
}

.main-nav a,
.main-nav p,
.main-nav h1 {
	color: var(--color-sidebar-text);
}

.main-nav [selected] {
	background-color: var(--color-sidebar-focus);
}

.nav-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-0);
	margin-bottom: var(--gap-16);
}

hr {
	border: 0;
	border-top: var(--border-light);
	width: 100%;
	margin: var(--gap-16) 0;
}

.notification {
	border-radius: var(--border-radius-8);
	background-color: var(--color-white);
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: var(--gap-8);
	align-items: stretch;
}

.notification header {
	padding: 1rem var(--gap-8);
	border-top-left-radius: var(--border-radius-8);
	border-bottom-left-radius: var(--border-radius-8);
	display: flex;
	gap: 0.5rem;
}

.notification footer {
	margin-top: var(--gap-16);
}

.notification.orange header {
	background-color: var(--color-orange-pale);
}

.notification.green header {
	background-color: var(--color-green-pale);
}

.notification div {
	padding: var(--gap-16);
}

.notification div > ul {
	padding-left: var(--gap-16);
}

.focused {
	background-color: var(--color-selection);
}

[role="avatar"] {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 1rem;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.8rem;
}

[role="avatar"].bigger {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	border-radius: 1.125rem;
}

[role="avatar"].xl {
	width: 4rem;
	height: 4rem;
	min-width: 4rem;
	min-height: 4rem;
	border-radius: 2rem;
}

.user-avatar-wrapper {
	position: relative;
	overflow: visible;
}

.user-avatar-wrapper.grouped {
	margin-left: -0.5rem;
	border-radius: 1rem;

	border: 2pt solid var(--color-white);
}

.user-avatar-wrapper.grouped:first-child {
	margin-left: 0rem;
}

.user-avatar-wrapper label {
	display: none;
}

.user-avatar-wrapper:hover label {
	display: block;
	position: absolute;
	right: 2.25rem;
	top: -1rem;
	background-color: var(--color-white);
	border-radius: var(--gap-8);
	padding: var(--gap-8);
	width: auto;
	box-shadow: var(--box-shadow-strong);
}

input:where([type="checkbox"][role="switch"]) {
	flex-shrink: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	color: inherit;
	font-size: inherit;
	width: 2em;
	height: 1em;
	box-sizing: content-box;
	border: 1px solid var(--color-medium);
	background-color: var(--color-medium);
	border-radius: 1em;
	vertical-align: text-bottom;
	margin: auto;
}

input:where([type="checkbox"][role="switch"])::before {
	content: "";
	position: absolute;
	background: #fff;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	box-sizing: border-box;
	width: 0.7em;
	height: 0.7em;
	margin: 0 0.15em;
	transition: left 0.25s ease-in-out;
	border-radius: 50%;
}

input:where([type="checkbox"][role="switch"]):checked::before {
	left: 1em;
}

input:where([type="checkbox"][role="switch"]):checked {
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
}

input:where([type="checkbox"][role="switch"]):disabled {
	opacity: 0.4;
}

ul.sortable {
	display: flex;
	flex-direction: column;
	gap: var(--gap-20);
	padding: 0;
	list-style: none;
}

ul.sortable .draggable-source--is-dragging {
	opacity: 0.2;
}

ul.sortable li .handle {
	cursor: grab;
}

ul.sortable li .handle:active,
.draggable--is-dragging {
	cursor: grabbing !important;
}

fieldset[role="filter"] {
	background-color: var(--color-lightest);
	border-radius: 100pt;
	border: 0pt;
	padding: var(--gap-4);
}

fieldset[role="filter"] input[type="radio"] {
	display: none;
}

fieldset[role="filter"] label.selected {
	background-color: var(--color-accent);
	border-radius: 100pt;
	color: #fff;
}

fieldset[role="filter"] label {
	cursor: pointer;
	color: var(--color-darkest);
	padding: var(--gap-8) var(--gap-16);
}

fieldset[role="filter"] label:active {
	opacity: 0.6;
}

.error-box {
	display: block;
}
select.round,
input[type="search"],
fieldset[role="filter"] {
	background-color: var(--color-field-background);
}

input[type="search"] {
	padding-left: 2.6rem;
	background-image: url("search.svg");
	background-size: auto 8pt;
	background-position: 8pt 6.5pt;
	background-repeat: no-repeat;
	border-radius: 2rem;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.fade-out-after-one-second {
	animation: fadeOut 1s ease-out 1s forwards;
}

label.disabled {
	cursor: not-allowed;
}

.hide-when-empty:empty {
	display: none;
}

.darkest {
	color: var(--color-darkest);
}

.dark {
	color: var(--color-dark);
}

.card {
	border-radius: var(--border-radius-32);
	padding: var(--gap-20) var(--gap-24);
	background-color: var(--color-white);
}

.box-shadow-medium {
	box-shadow:
		0px 161px 45px 0px rgba(31, 37, 71, 0),
		0px 103px 41px 0px rgba(31, 37, 71, 0.01),
		0px 58px 35px 0px rgba(31, 37, 71, 0.03),
		0px 26px 26px 0px rgba(31, 37, 71, 0.05),
		0px 6px 14px 0px rgba(31, 37, 71, 0.1);
}

.box-shadow-light {
	box-shadow: var(--box-shadow-light);
}

.box-shadow-strong {
	box-shadow: var(--box-shadow-strong);
}

.kinda-full-width {
	max-width: 80rem;
	width: 100%;
}

.full-width {
	width: 100%;
}

.medium-width {
	max-width: 60rem;
	width: 60rem;
}

.small-width {
	max-width: 30rem;
	width: 30rem;
}

.row {
	display: flex;
	flex-direction: row;
	gap: var(--gap-8);
	align-items: center;
}

.row.no-center {
	align-items: flex-start;
}

.row.space-between {
	justify-content: space-between;
}
.row.align-end {
	justify-content: flex-end;
}

.column {
	display: flex;
	flex-direction: column;
	gap: var(--gap-8);
	justify-content: flex-start;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
}

.clickable {
	cursor: pointer;
}

.clickable:active {
	opacity: 0.7;
}

.frame {
	padding: 3.75rem 2rem 3.75rem 2.5rem;
}

.frame-sm {
	padding: 3rem 0rem 3rem 2.5rem;
	height: 100vh;
	max-width: calc(100vw - 14rem);
}

.no-radius-bottom {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.no-radius-top {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* htmx */
main.htmx-request:not(.noanim),
.swappable.htmx-request main:not(.noanim),
.swappable.htmx-request #spl-nav,
.htmx-request .hide-during-request {
	opacity: 0;
}

body.htmx-request .frame,
body.htmx-request .frame-sm {
	opacity: 0;
}

.border-radius-8 {
	border-radius: var(--border-radius-8);
}

.border-radius-16 {
	border-radius: var(--border-radius-16);
}

.pad-8 {
	padding: var(--gap-8);
}

.pad-16 {
	padding: var(--gap-16);
}

.pad-32 {
	padding: var(--gap-32);
}

.gap-0 {
	gap: 0;
}

.gap-4 {
	gap: var(--gap-4);
}

.gap-6 {
	gap: var(--gap-6);
}

.gap-8 {
	gap: var(--gap-8);
}

.gap-12 {
	gap: var(--gap-12);
}

.gap-16 {
	gap: var(--gap-16);
}

.gap-20 {
	gap: var(--gap-20);
}

.gap-24 {
	gap: var(--gap-24);
}

.gap-28 {
	gap: var(--gap-28);
}

.gap-32 {
	gap: var(--gap-32);
}

.gap-40 {
	gap: var(--gap-40);
}

.gap-44 {
	gap: var(--gap-44);
}

.gap-48 {
	gap: var(--gap-48);
}

.gap-52 {
	gap: var(--gap-52);
}

.gap-64 {
	gap: var(--gap-64);
}

.gap-128 {
	gap: var(--gap-128);
}

.tooltip {
	position: relative;
	cursor: default;
}

.tooltip > span {
	opacity: 0;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	pointer-events: none;
	background-color: var(--color-light);
	border-radius: 0.25rem;
	padding: 0.5rem;
	z-index: 100;
	text-align: right;
	display: block;
	font-size: 0.75rem;
	word-wrap: normal;
	hyphens: manual;
}

.tooltip:hover > span {
	opacity: 1;
}

.tooltip:hover {
	color: var(--color-dark);
}

details.details-clear summary {
	margin: 0;
}

details.details-clear summary::marker {
	content: "";
}

.card details.details-clear summary {
	background-image: url("../toggle-chevron-up.svg");
	background-position: calc(100% - 16pt) 50%;
	background-size: auto 6pt;
	background-repeat: no-repeat;
}

.card details.details-clear[open] summary {
	background-image: url("../toggle-chevron-down.svg");
}

@media (prefers-color-scheme: dark) {
	.dark-gap-6 {
		gap: var(--gap-6);
	}
}

.spin {
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

a.unset {
	text-decoration: none;
	color: inherit;
}

a.clickable:hover {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: underline;
}

.red-svg * {
	fill: var(--color-red);
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	100% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

.shimmer,
.shimmer-when-empty:empty {
	background: linear-gradient(
		-45deg,
		var(--color-white) 40%,
		var(--color-lightest) 50%,
		var(--color-white) 60%
	);
	background-size: 300%;
	background-position-x: 100%;
	animation: shimmer 1s infinite linear;
}

.shimmer-when-empty:empty {
	min-height: 6rem;
	border-radius: var(--border-radius-8);
}

@keyframes shimmer {
	to {
		background-position-x: 0%;
	}
}

.color-picker label [data-color] {
	width: 32pt;
	height: 32pt;
	border-radius: 16pt;
	display: block;
}
.color-picker label input:checked + [data-color] {
	border: 1pt var(--color-blue) solid;
}

table {
	border-radius: 1rem;
	background-color: var(--color-field-background);
	padding: 8pt;
	border-collapse: separate !important;
}
table thead {
	background-color: transparent;
}
table thead th {
	padding-top: 0pt;
	padding-bottom: 8pt;
	border-bottom: 0;
}
table tbody {
	background-color: var(--color-lightest);
	border-radius: 0.5rem;
	overflow: hidden;
	border-collapse: separate !important;
}

table tbody tr:first-child td:first-child {
	border-top-left-radius: 0.5rem;
}
table tbody tr:first-child td:last-child {
	border-top-right-radius: 0.5rem;
}
table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 0.5rem;
}
table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 0.5rem;
}
table tbody tr:not(:last-child) td {
	border-bottom: 1pt var(--color-medium) solid;
}
table tbody td {
	padding-top: 12pt;
	padding-bottom: 12pt;
}