@import url("fa7.min.css");
@import url("open-props.css");
@import url("colors.css");

:root {
	--container: 100dvw;
	--gap: 2rem;
	--columns-fill-4: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-4: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fill-3: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-3: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
}

html{
	scroll-behavior: smooth;
}

body,
body * {
	box-sizing: border-box;
	font-family: var(--font-sans);
	font-size: var(--font-size-2);
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

body {
	padding: 7rem 0;
	overflow-x: hidden;
}

body.no-scroll {
	height: 100vh;
	overflow: hidden;
}
body.no-scroll:before {
	content: "";
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.5);
	z-index: 2;
}

h1 {
	font-size: var(--font-size-fluid-2);
	letter-spacing: .0125rem;
}
h1 > small,
h2 > small {
	font-weight: 400;
	color: hsl(var(--green-9-hsl));
}
h2, legend, .legend {
	font-size: var(--font-size-fluid-1);
}

img {
	max-width: 100%;
	height: auto;
}
img:not([src]) {
	display: none;
}
img[src=""] {
	display: none;
}

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

p:not(:last-child) {
	margin-bottom: 1rem;
}

address {
	font-style: normal;
}

.row {
	display: flex;
	gap: 1rem;
}
.row > * {
	flex: 1;
}

header {
	background-color: hsl(var(--gray-9-hsl));
	display: flex;
	height: 80px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
header > time {
	align-content: center;
	align-items: center;
	color: #fff;
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
}
header > nav {
	display: flex;
	align-content: center;
	align-items: center;
	gap: .15rem;
	flex-grow: 1;
	justify-content: flex-start;
	min-width: 0;
	overflow: hidden;
}
.navigation-filter {
	display: none;
}
header > nav.basics {
	align-self: stretch;
	background: hsl(var(--gray-8-hsl));
	border-left: 1px solid hsl(var(--gray-7-hsl));
	flex: 0 0 auto;
	gap: .35rem;
	justify-content: flex-end;
	overflow: visible;
	padding: .45rem;
	position: relative;
	z-index: 2;
}
header > nav.basics .basics-trigger {
	align-items: center;
	background-color: hsl(var(--lime-5-hsl));
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 6px;
	color: #fff;
	cursor: default;
	display: none;
	justify-content: center;
	min-width: 2.9rem;
	padding: .45rem .75rem;
	transition: opacity ease .2s, transform ease .2s;
}
header > a,
header > nav > a {
	align-content: center;
	align-items: center;
	border-bottom: 3px solid transparent;
	color: #fff;
	display: flex;
	height: 100%;
	flex-direction: column;
	flex: 0 0 auto;
	justify-content: center;
	min-width: 6.25rem;
	padding: .5rem .75rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background-color ease .25s, border-color ease .25s;
}
header i {
	transition: all ease .25s;
}
header a:hover i {
	transform: scale(1.5);
}
header > nav.main-navigation > a:hover i {
	transform: translateY(-.1rem) scale(1.2);
}
header > nav:not(.basics) > a.active,
header > nav:not(.basics) > a:hover {
	background-color: hsl(var(--green-9-hsl)) !important;
	border-bottom-color: hsl(var(--lime-5-hsl));
}
header > nav > a.active *,
header > nav:hover > a.active * {
	color: white !important;
	fill: white !important;
}
header > nav.basics > a {
	background-color: hsl(var(--lime-5-hsl));
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 6px;
	min-width: 2.9rem;
}
header > nav.basics > a.active,
header > nav.basics:hover > a.active {
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
}
header > nav.basics > a.active *,
header > nav.basics:hover > a.active * {
	color: #fff !important;
	fill: #fff !important;
}
header > nav > a.danger {
	background-color: hsl(var(--red-9-hsl));
}
header > nav > a.primary {
	background-color: hsl(var(--blue-9-hsl));
}
header > nav > a.secondary {
	background-color: hsl(var(--gray-5-hsl));
}
header > nav > a.success {
	background-color: hsl(var(--green-9-hsl));
}
header > nav > a.info {
	background-color: hsl(var(--blue-5-hsl));
}
header > nav > a.profil {
	background-color: hsl(var(--gray-9-hsl));
}
header > nav > a.warning {
	background-color: hsl(var(--yellow-9-hsl));
}
header > nav > a.download {
	background-color: hsl(var(--cyan-9-hsl));
}
header > nav > a.logs {
	background-color: hsl(var(--yellow-6-hsl));
}
header > nav > a.forms{
	background-color: #722662;
}
header > nav > a.modules {
	background-color: #ff6b6b;
}
header > nav > a.navigation-admin {
	background-color: #b2608e;
}
header > nav > a.monitoring {
    background-color: hsl(var(--violet-5-hsl));
}
header > nav > a.documents {
	background-color: hsl(var(--blue-7-hsl));
}
header > nav.basics > a:hover,
header > nav.basics > a.active {
	border-color: rgba(255,255,255,.85);
	transform: translateY(-.1rem);
}
header > nav.basics > a:hover i,
header > nav.basics > a.active i {
	color: #fff;
	transform: none;
}

.tenant-switch {
	align-items: stretch;
	align-self: stretch;
	display: flex;
	position: relative;
}
.tenant-switch > a {
	align-items: center;
	background-color: hsl(var(--lime-5-hsl));
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 6px;
	color: #fff;
	display: flex;
	gap: .45rem;
	justify-content: center;
	min-width: 3.25rem;
	padding: .45rem .75rem;
}
.tenant-switch > a:hover,
.tenant-switch:hover > a,
.tenant-switch.active > a {
	background-color: hsl(var(--green-9-hsl));
	border-color: rgba(255,255,255,.85);
	color: #fff;
}
.tenant-switch > a > i:first-child {
	font-size: 1.1rem;
}
.tenant-switch > a > span,
.tenant-switch > a > i:last-child {
	display: none;
}
.tenant-switch > a:hover *,
.tenant-switch:hover > a *,
.tenant-switch.active > a * {
	color: #fff;
}
.tenant-switch-menu {
	background: #fff;
	border: 1px solid hsl(var(--gray-4-hsl));
	box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18);
	display: none;
	min-width: 280px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 12;
}
body:not(.mobilenav) .tenant-switch:hover .tenant-switch-menu,
body:not(.mobilenav) .tenant-switch:focus-within .tenant-switch-menu {
	display: block;
}
.tenant-switch-menu > strong {
	border-bottom: 1px solid hsl(var(--gray-3-hsl));
	display: block;
	padding: .75rem 1rem;
}
.tenant-switch-menu form {
	display: block;
}
.tenant-switch-menu button {
	background: #fff;
	border: none;
	border-bottom: 1px solid hsl(var(--gray-2-hsl));
	color: hsl(var(--gray-9-hsl));
	cursor: pointer;
	display: grid;
	gap: .2rem .65rem;
	grid-template-columns: 1rem 1fr;
	padding: .85rem 1rem;
	text-align: left;
	text-transform: none;
	width: 100%;
}
.tenant-switch-menu button:hover,
.tenant-switch-menu button.active {
	background: hsl(var(--green-1-hsl));
}
.tenant-switch-menu button > i {
	color: hsl(var(--green-9-hsl));
	grid-row: span 3;
	margin-top: .15rem;
}
.tenant-switch-menu button strong {
	font-size: var(--font-size-1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tenant-switch-menu button small {
	color: hsl(var(--gray-6-hsl));
	display: block;
}
.tenant-switch-menu > a {
	align-items: center;
	color: hsl(var(--gray-9-hsl));
	display: flex;
	gap: .5rem;
	padding: .75rem 1rem;
	text-decoration: underline;
}

header > a:first-child {
	flex: 0 0 95px;
	width: 95px;
	height: 80px;
	object-fit: contain;
	background: #fff;
	border-bottom: 2px solid #000;
}
header > nav > a > img {
	height: 100%;
	min-height: 80px;
	margin: 0;
	padding: 0;
	width: 10vw;
	min-width: 80px;
}
header > nav > a > span {
	display: block;
	font-size: var(--font-size-1);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

header #opener {
	display: none;
	flex: 0 0 80px;
}

.navigation-loading header > nav.basics {
	flex: 0 0 4.25rem;
	min-width: 4.25rem;
}
.navigation-loading header > nav.basics .basics-trigger {
	display: flex;
	order: 2;
}
.navigation-loading header > nav.basics > a,
.navigation-loading header > nav.basics > .tenant-switch {
	order: 1;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.basicnav-collapsed header > nav.basics {
	flex: 0 0 4.25rem;
	min-width: 4.25rem;
}
.basicnav-collapsed header > nav.basics .basics-trigger {
	display: flex;
	order: 2;
}
.basicnav-collapsed header > nav.basics > a,
.basicnav-collapsed header > nav.basics > .tenant-switch {
	order: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateX(.5rem);
	transition: opacity ease .2s, transform ease .2s, visibility ease .2s;
	visibility: hidden;
}
.basicnav-enabled.basicnav-collapsed header > nav.basics:hover,
.basicnav-enabled.basicnav-collapsed header > nav.basics:focus-within {
	bottom: 0;
	gap: .35rem;
	justify-content: flex-end;
	position: absolute;
	right: 0;
	top: 0;
	width: max-content;
	z-index: 20;
}
.basicnav-enabled.basicnav-collapsed header > nav.basics:hover .basics-trigger,
.basicnav-enabled.basicnav-collapsed header > nav.basics:focus-within .basics-trigger {
	opacity: 0;
	pointer-events: none;
	transform: translateX(.5rem);
}
.basicnav-enabled.basicnav-collapsed header > nav.basics:hover > a,
.basicnav-enabled.basicnav-collapsed header > nav.basics:focus-within > a,
.basicnav-enabled.basicnav-collapsed header > nav.basics:hover > .tenant-switch,
.basicnav-enabled.basicnav-collapsed header > nav.basics:focus-within > .tenant-switch {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	visibility: visible;
}

.mobilenav header #opener {
	align-content: center;
	align-items: center;
	color: white;
	display: flex;
	justify-content: center;
	margin-left: auto;
	padding: 1rem;
}
.mobilenav header #opener * {
	font-size: 2.4rem;
}

.mobilenav header {
	flex-direction: row !important;
	min-height: 80px;
	z-index: 11;
}
.mobilenav header > nav.closed {
	display: none;
}
.navigation-resizing header > nav.closed {
	display: flex;
	pointer-events: none;
	visibility: hidden;
}
.mobilenav header > nav.basics .basics-trigger {
	display: none;
}

.no-scroll header {
	background: hsl(var(--gray-9-hsl));
	flex-wrap: wrap;
	height: 100dvh;
	z-index: 11;
}
.no-scroll header > nav {
	align-content: start;
	align-items: stretch;
	background: white;
	display: grid !important;
	flex: 1 1 100%;
	gap: .5rem;
	grid-auto-rows: minmax(4.25rem, auto);
	grid-template-columns: repeat(auto-fit, minmax(var(--nav-tile-min-size), 1fr));
	height: calc(100dvh - 160px);
	justify-content: stretch;
	order: 3;
	overflow-x: hidden;
	overflow-y: auto;
	padding: .5rem;
	width: 100%;
}
.no-scroll header > nav.main-navigation {
	--nav-tile-min-size: min(14rem, 100%);
	scrollbar-color: hsl(var(--gray-5-hsl)) hsl(var(--gray-1-hsl));
}
.no-scroll .navigation-filter {
	align-items: center;
	background: #fff;
	border: 1px solid hsl(var(--gray-3-hsl));
	display: flex;
	gap: .65rem;
	grid-column: 1 / -1;
	min-height: 3.5rem;
	padding: .65rem 1rem;
	position: sticky;
	top: 0;
	z-index: 1;
}
.no-scroll .navigation-filter i {
	color: hsl(var(--gray-6-hsl));
}
.no-scroll .navigation-filter input {
	background: transparent;
	border: none;
	color: hsl(var(--gray-9-hsl));
	display: block;
	font-size: var(--font-size-2);
	margin: 0;
	outline: none;
	padding: 0;
	width: 100%;
}
.no-scroll .navigation-filter input::placeholder {
	color: hsl(var(--gray-6-hsl));
}
.main-navigation > a.nav-filter-hidden {
	display: none !important;
}
.no-scroll header > nav.basics {
	align-items: stretch;
	background: hsl(var(--gray-9-hsl));
	border-top: 1px solid hsl(var(--gray-8-hsl));
	display: flex !important;
	flex: 1 1 100%;
	gap: .4rem;
	height: 80px;
	order: 4;
	overflow-x: auto;
	overflow-y: visible;
	padding: .5rem;
	scrollbar-width: none;
}
.no-scroll header > nav.basics::-webkit-scrollbar {
	display: none;
}
.no-scroll header > nav.closed {
	display: grid;
}
.no-scroll header > nav.basics.closed {
	display: flex;
}
.no-scroll header > nav:not(.basics) > a {
	align-items: center;
	background: hsl(var(--gray-1-hsl));
	border: 1px solid hsl(var(--gray-3-hsl));
	border-left: .35rem solid hsl(var(--gray-5-hsl));
	color: hsl(var(--gray-9-hsl));
	flex-direction: row;
	gap: .75rem;
	height: auto;
	justify-content: flex-start;
	min-height: 4rem;
	min-width: 0;
	padding: .75rem 1rem;
	text-align: left;
	width: 100%;
}
.no-scroll header > nav:not(.basics) > a * {
	color: black;
}
.no-scroll header > nav:not(.basics) > a.active,
.no-scroll header > nav:not(.basics) > a:hover {
	background: hsl(var(--green-9-hsl));
	border-color: hsl(var(--green-9-hsl));
	border-left-color: hsl(var(--lime-5-hsl));
}
.no-scroll header > nav:not(.basics) > a.active *,
.no-scroll header > nav:not(.basics) > a:hover * {
	color: white;
}
.no-scroll header > nav > a > i {
	font-size: 1.35rem;
}
.no-scroll header > nav > a > span {
	display: block;
}
.no-scroll header > nav > a {
	aspect-ratio: auto;
	height: auto;
	min-width: 4.75rem;
}
.no-scroll header > nav.basics > a,
.no-scroll header > nav.basics .tenant-switch > a {
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: none;
	color: #fff;
	min-width: 3.65rem;
}
.no-scroll header > nav.basics > a *,
.no-scroll header > nav.basics .tenant-switch > a * {
	color: #fff;
}
.no-scroll header > nav.basics > a:hover,
.no-scroll header > nav.basics > a.active,
.no-scroll header > nav.basics .tenant-switch:hover > a,
.no-scroll header > nav.basics .tenant-switch.active > a {
	border-color: rgba(255,255,255,.85);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
	transform: none;
}
.no-scroll header > nav.basics > a:hover *,
.no-scroll header > nav.basics > a.active *,
.no-scroll header > nav.basics .tenant-switch:hover > a *,
.no-scroll header > nav.basics .tenant-switch.active > a * {
	color: #fff !important;
}
.no-scroll #opener {
	align-self: center;
	color: hsl(var(--red-9-hsl));
	cursor: pointer;
	display: flex;
	height: 80px;
	text-shadow: none;
}
.no-scroll .tenant-switch-menu {
	max-height: calc(100dvh - 170px);
	overflow-y: auto;
	position: fixed;
	right: .75rem;
	top: 80px;
	width: min(360px, calc(100dvw - 1.5rem));
}


main {
	padding-inline: 1rem;
}

main > *:not(:last-child) {
	margin-bottom: 1rem;
}

body.tenant main {
	align-items: center;
	display: flex;
	flex-direction: column;
}
body.tenant main > * {
	width: min(100%, 1100px);
}
body.tenant main > h1 {
	margin-bottom: 1rem;
	text-align: center;
}
body.tenant .tenant-select {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
body.tenant .tenant-select button {
	background: #fff;
	border: 1px solid hsl(var(--gray-4-hsl));
	color: hsl(var(--gray-9-hsl));
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-height: 150px;
	padding: 1rem;
	text-align: left;
	text-transform: none;
}
body.tenant .tenant-select button:hover,
body.tenant .tenant-select button.active {
	background: hsl(var(--green-1-hsl));
	border-color: hsl(var(--green-9-hsl));
}
body.tenant .tenant-select button i {
	color: hsl(var(--green-9-hsl));
	font-size: 2rem;
}
body.tenant .tenant-select strong {
	font-size: var(--font-size-3);
}
body.tenant .tenant-select small {
	color: hsl(var(--gray-7-hsl));
}
body.tenant .tenant-select span {
	margin-top: auto;
}
body.tenant .tenant-select button.active span {
	color: hsl(var(--green-9-hsl));
	font-weight: 600;
}

footer {
	background-color: hsl(var(--gray-9-hsl));
	bottom: 0;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 10;
}
footer > * {
	margin: 1rem;
}


/* TABLES */
table {
	max-width: 100%;
	width: 100%;
   	border-spacing: 0;
	border-collapse: separate;
	font-variant-numeric: tabular-nums;
}
table thead {
	position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
}
table tfoot {
	position: -webkit-sticky; /* for Safari */
    position: sticky;
    bottom: -1px;
}
table tr {
	scroll-margin-top: 100px;
}
table th,
table td {
	overflow-wrap: break-word;
	padding: .25rem .5rem;
}
table thead tr,
table tfoot tr {
	background-color: hsl(var(--gray-9-hsl));
	color: white;
}
table thead th,
table tfoot th {
	text-align: left;
}
table th[align=center],
table th.center {
	text-align: center;
}
table th[align=right],
table th.right {
	text-align: right;
}
table tbody tr:nth-child(even) {
	background-color: hsl(var(--gray-0-hsl));
}
table tbody tr:hover {
	background-color: hsl(var(--gray-2-hsl));
}
table tbody tr.danger,
table td.danger {
	background-color: hsl(var(--red-1-hsl));
}
table tbody tr.danger:nth-child(even) {
	background-color: hsl(var(--red-2-hsl));
}
table tbody tr.danger:Hover,
table td.danger:Hover {
	background-color: hsl(var(--red-3-hsl));
}
table tbody tr.danger:Hover td {
	border-color: hsl(var(--red-5-hsl));
}
table tbody tr.info,
table td.info {
	background-color: hsl(var(--blue-1-hsl));
}
table tbody tr.info:nth-child(even) {
	background-color: hsl(var(--blue-2-hsl));
}
table tbody tr.info:Hover,
table td.info:Hover {
	background-color: hsl(var(--blue-3-hsl));
}
table tbody tr.info:Hover td {
	border-color: hsl(var(--blue-5-hsl));
}
table tbody tr.success,
table td.success {
	background-color: hsl(var(--green-1-hsl));
}
table tbody tr.success:nth-child(even) {
	background-color: hsl(var(--green-2-hsl));
}
table tbody tr.success:hover,
table td.success:hover {
	background-color: hsl(var(--green-3-hsl));
}
table tbody tr.success:hover td {
	/*border-color: hsl(var(--green-5-hsl));*/
}
table tbody tr.warning,
table td.warning {
	background-color: hsl(var(--yellow-1-hsl));
}
table tbody tr.warning:nth-child(even) {
	background-color: hsl(var(--yellow-2-hsl));
}
table tbody tr.warning:hover,
table td.warning:hover {
	background-color: hsl(var(--yellow-3-hsl));
}
table tbody tr.warning:hover td {
	/*border-color: hsl(var(--yellow-5-hsl));*/
}

*.nowrap,
table tbody tr td:not(:first-child):last-child:not([data-title]) {
	white-space: nowrap;
}

table small {
	font-size: .75em;
}
table td > figure {
	aspect-ratio: 4 / 3;
	--webkit-aspect-ratio: 4 / 3; /* Safari fix */
	overflow: hidden;
	width: 300px;
	height: 225px;
}
table td > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.w-1\/3 {
	width: 33%;
}

table tbody tr.blue, table tbody td.blue {
	background: hsl(var(--blue-1-hsl));
}
table tbody tr:nth-child(2n).blue, table tbody td:nth-child(2n).blue{
	background: hsl(var(--blue-2-hsl));
}
table tbody tr.blue:hover, table tbody:hover td.blue{
	background: hsl(var(--blue-3-hsl));
}

@media screen and (max-width:1500px) {
    table.responsive thead {
        display: none; /* hide header and footer labels */
    }
	table.responsive tbody {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1rem;
		margin-bottom: 1em;
	}
    table.responsive tbody tr {
        display: flex;
		flex-wrap: wrap;
		padding: 0;
    }
    table.responsive tbody tr td[data-title]:before {
        content: attr(data-title);
		font-weight: 500;
		white-space: pre;
		text-align: left;
    }
    table.responsive tbody tr td {
        display: flex;
		flex-direction: column;
        justify-content: flex-start;
        white-space: normal;
        text-align: start;
		font-weight: 300;
		gap: .2rem;
		flex: 1 1 auto;
		overflow-wrap: anywhere;
	}
	table.responsive tbody tr:not(.success):not(.warning):not(.danger):not(.info):not(.blue) td {
		border-right: 1px solid hsl(var(--gray-4-hsl));
		border-bottom: 1px solid hsl(var(--gray-4-hsl));
	}
	table.responsive tbody tr td:last-child:not([data-title]) {
		flex-direction: row;
		justify-content: flex-end;
	}
	table.responsive tbody tr td:not([data-title]) a {
		aspect-ratio: 1;
		max-width: 3rem;
		align-self: flex-end;
	}
    table.responsive tbody tr td{
        border-right: 1px solid hsl(var(--gray-6-hsl));
        border-bottom: 1px solid hsl(var(--gray-6-hsl));
    }
}

@media screen and (max-width:1050px) {
	table.responsive tbody {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width:700px) {
	table.responsive tbody {
		grid-template-columns: 1fr;
	}
}

table.list-legend tbody,
table tr.list-legend {
	display: flex;
	flex-wrap: wrap;
}

table.list-legend tbody tr {
	flex: 1;
	display: flex;
}

table.list-legend tbody td,
table tr.list-legend td {
	flex: 1;
}

/* FORMS */
form.row {
	display: flex;
	flex-grow: 1;
	gap: 1px;
}
form.row * {
	margin: 0;
}
form > section {
	margin: 1em 0;
}
form p {
	color: hsl(var(--gray-7-hsl));
}
.form-inline {
	display: flex;
	flex-direction: row;
	gap: calc(var(--gap, 10px) / 2);
	> * {
		flex: 1;
		display: flex;
		align-content: center;
		align-items: center;
		height: 100%;
	}
	> :first-child,
	> div:has(.toggle-url) {
		flex: 0 1;
		margin-top: 15px;
	}
	> div:has(.toggle-url):last-child {
		margin-top: 7px;
	}
	p {
		white-space: nowrap;
	}
}
fieldset {
	border: none;
	display: flex;
	gap: 2em;
	margin-bottom: 1em;
	background: hsl(var(--gray-1-hsl));
	margin: 0 -1em;
	padding: 1em;
}
fieldset.grid {
	display: grid;
	grid-template-columns: var(--columns-fit-4);
}
fieldset.grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	.headline {
		grid-column: 1 / -1;
	}
	&.no-gap {
		gap: 0 var(--gap);
	}
	@media(max-width:2000px) {
		grid-template-columns: repeat(5, 1fr);
	}
	@media(max-width:1600px) {
		grid-template-columns: repeat(4, 1fr);
	}
	@media(max-width:1200px) {
		grid-template-columns: repeat(3, 1fr);
	}
	@media(max-width:800px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media(max-width:400px) {
		grid-template-columns: repeat(1, 1fr);
	}
	label {
		hyphens: auto;
	}
}
fieldset:has(legend) {
	margin-top: 1em;
}
fieldset > *:not(a) {
	flex-grow: 1;
	width: 100%;
}
fieldset > .btn {
	margin-top: 1rem;
	padding: 0;
	align-self: flex-end;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	height: 3rem;
	width: 3rem;
	aspect-ratio: 1;
}
fieldset > section.checkbox {
	width: auto;
	white-space: nowrap;
	padding-top: 1.5em;
}
fieldset > *.small {
	max-width: 150px;
}
fieldset > *.span2 {
	flex-grow: 2;
}
fieldset > *.span3 {
	flex-grow: 3;
}
.grid,
fieldset.grid {
	align-items: flex-start;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 2em;
	&.grid-6 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	&.grid-5 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	@media(max-width:1500px) {
		grid-template-columns: 1fr 1fr 1fr !important;
	}
	@media(max-width:1200px) {
		grid-template-columns: 1fr 1fr !important;
	}
	@media(max-width:600px) {
		grid-template-columns: 1fr !important;
	}
	
}
.grid > *,
fieldset.grid > * {
	flex-grow: 0;
}
fieldset.grid table {
	border: 1px solid hsl(var(--gray-9-hsl));
}
legend,
.legend {
	transform: translateY(1em);
	margin-bottom: 1em;
}
label {
	font-weight: 600;
}
label + span {
	display: block;
	padding-block: 10px;
	&:has(input) {
		padding-block: 0px;
	}
}
label > small {
	float: right;
	font-size: .9em;
	font-weight: 100;
}
fieldset > section > a {
	float: right;
	font-size: .75em;
}

body:not(.index) *:required:invalid {
	border: 1px solid hsl(var(--red-9-hsl));
}

input,
select,
textarea {
	background: #fff;
	border: 1px solid hsl(var(--gray-5-hsl));
	border-radius: 0;
	display: block;
	margin: .5rem 0;
	height: 2.25em;
	padding: .25rem .5rem;
	width: 100%;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline: none;
}
textarea {
	/*min-height: 10vh;*/
	height: auto;
}
select {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23000000' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;

	color: #000;
	-webkit-appearance: none; /* Entfernt das Standard-Styling */
	-moz-appearance: none;
	appearance: none;
}
select[multiple] {
	background-image: none;
	height: auto;
}
select[multiple] option:checked {
	background: hsl(var(--green-1-hsl));
}

select.contact-search-original {
	height: 1px;
	margin: 0;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.contact-search-select {
	margin: .5rem 0;
	position: relative;
	width: 100%;
}

.contact-search-select .contact-search-trigger {
	background: #fff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23000000' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
	background-position: right .7em top 50%;
	background-repeat: no-repeat;
	background-size: .65em auto;
	border: 1px solid hsl(var(--gray-5-hsl));
	color: #000;
	cursor: pointer;
	display: block;
	height: 2.25em;
	margin: 0;
	overflow: hidden;
	padding: .25rem 2rem .25rem .5rem;
	text-align: left;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
	width: 100%;
}

.contact-search-menu {
	background: #fff;
	border: 1px solid hsl(var(--gray-5-hsl));
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
	display: none;
	left: 0;
	padding: .5rem;
	position: absolute;
	right: 0;
	top: calc(100% + 2px);
	z-index: 30;
}

.contact-search-select.open .contact-search-menu {
	display: block;
}

.contact-search-input {
	margin: 0 0 .5rem;
}

.contact-search-options {
	max-height: 18rem;
	overflow: auto;
}

.contact-search-select .contact-search-option {
	background: transparent;
	border: none;
	color: #000;
	cursor: pointer;
	display: block;
	padding: .35rem .5rem;
	text-align: left;
	text-transform: none;
	width: 100%;
}

.contact-search-select .contact-search-option:hover,
.contact-search-select .contact-search-option.selected {
	background: hsl(var(--green-1-hsl));
}

.contact-search-select .contact-search-option:disabled {
	color: hsl(var(--gray-6-hsl));
	cursor: default;
}

.contact-search-empty {
	color: hsl(var(--gray-7-hsl));
	padding: .35rem .5rem;
}

input[list] {
    line-height: 1;
}

.range {
	position: relative;
}
[type=range] {
	background: transparent;
	border: none;
	padding: 0;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
[type=range]::-webkit-slider-thumb {
	background: white;
	border: 1px solid hsl(var(--gray-9-hsl));
	height: 2.25rem;
	transform: translateY(-.875rem);
	width: 2rem;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	z-index: 2;
}
[type=range]::-webkit-slider-runnable-track {
	background-color: hsl(var(--gray-5-hsl));
	height: .5rem;
	z-index: 1;
}
header output {
	align-content: center;
	align-items: center;
	background: transparent;
	color: inherit;
	display: flex;
	font-size: .75em;
	justify-content: center;
	padding: .25rem;
	pointer-events: none;
	position: absolute;
	transform: translateY(-2.5rem);
	width: 2rem;
	z-index: 3;
}

*[type=checkbox]{
	display: inline-block;
}
*[type=button],
*[type=submit] {
	background-color: hsl(var(--green-7-hsl));
	border: none;
	color: #fff;
	display: inline-block;
	padding: .25rem .5rem;
	text-transform: uppercase;
}
*[type=reset] {
	background-color: hsl(var(--red-8-hsl));
	border: none;
	color: #fff;
	display: inline-block;
	padding: .25rem .5rem;
	text-transform: uppercase;
}
[type="radio"] {
	width: initial;
	height: initial;
	appearance: radio;
	--webkit-appearance: inherit;
	display: inline-block;
	margin: 1rem;
}

[type="checkbox"] {
	display: none; 
	position: relative;
	left: 30px;
	top: 0px;
	z-index: 0;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
[type="checkbox"] + label {
	position: relative;
	display: block;
	cursor: pointer;
	margin: 1rem 0;
	padding-left: 3.5rem;
}
[type="checkbox"] + label:before {
	width: 3rem;
	height: 1.5rem;
	background-color: hsl(var(--red-2-hsl));
	border: 1px solid hsl(var(--gray-5-hsl));
	content: "";
	margin-right: 1rem;
	transition: background-color 0.5s linear;
	z-index: 1;
	position: absolute;
	left: 0px;
}
[type="checkbox"] + label:after {
	width: 1.5rem;
	height: 1.5rem;
	background-color: hsl(var(--red-9-hsl));
	content: "";
	transition: margin 0.1s linear;
	position: absolute;
	left: 1px;
	top: 1px;
	z-index: 3;
}
[type="checkbox"]:checked + label:before {
	background-color: hsl(var(--green-1-hsl));
}
[type="checkbox"]:checked + label:after {
	background-color: hsl(var(--green-9-hsl));
	margin: 0 0 0 1.5rem;
}

[type=color]::-webkit-color-swatch,
[type=color]::-webkit-color-swatch-wrapper {
	border: none;
	border-radius: none;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

td.btn-group {
	text-align: right;
}
td.btn-group .btn {
	padding: .5rem;
}
td.btn-group .btn i {
	font-size: .75em;
}

.fullsearch {
	display: flex;
	gap: .5em;
	width: 100%;
	flex-wrap: wrap;
}
.fullsearch > * {
	flex-grow: 1;
	margin: 0;
	width: auto;
	max-width: 100%;
}
.fullsearch > *[type=text] {
	min-width: 50%;
}
.fullsearch > *[type=submit] {
    flex-grow: 0;
	width: 50px;
	border: 1px solid hsl(var(--green-7-hsl));
}


/* BUTTONS */

.btn {
	align-content: center;
	align-items: center;
	border: none;
	display: inline-flex;
	font-family: inherit;
	justify-content: center;
	margin-right: .15rem;
	padding: .5rem 1rem;
	text-decoration: none;
	transition: background-color 500ms all;
}
.btn-group .btn {
	margin: 0;
}

.btn > i:only-of-type {
	margin-right: .5rem;
}
.btn-group i:only-of-type {
	margin: 0;
}

.btn.danger {
	background-color: hsl(var(--red-8-hsl));
	color: white;
}
.btn.danger:Hover {
	background-color: hsl(var(--red-9-hsl));
}

.btn.info {
	background-color: hsl(var(--blue-5-hsl));
	color: white;
}
.btn.info:Hover {
	background-color: hsl(var(--blue-6-hsl));
}

.btn.success {
	background-color: hsl(var(--green-8-hsl));
	color: white;
}
.btn.success:Hover {
	background-color: hsl(var(--green-9-hsl));
}

.btn.warning {
	background-color: hsl(var(--yellow-6-hsl));
	color: white;
}
.btn.warning:Hover {
	background-color: hsl(var(--yellow-7-hsl));
}

.btn.primary {
	background-color: hsl(var(--blue-8-hsl));
	color: white;
}
.btn.primary:Hover {
	background-color: hsl(var(--blue-9-hsl));
}

.btn.b1 {
	background-color: hsl(var(--gray-8-hsl));
	color: white;
}
.btn.b1:Hover {
	background-color: hsl(var(--gray-9-hsl));
}

.btn.b2 {
	background-color: hsl(var(--grape-5-hsl));
	color: white;
}
.btn.b2:Hover {
	background-color: hsl(var(--grape-6-hsl));
}

.btn.b3 {
	background-color: hsl(var(--violet-5-hsl));
	color: white;
}
.btn.b3:Hover {
	background-color: hsl(var(--violet-6-hsl));
}

.btn.b4 {
	background-color: hsl(var(--pink-5-hsl));
	color: white;
}
.btn.b4:Hover {
	background-color: hsl(var(--pink-6-hsl));
}

.btn.b5 {
	background-color: hsl(var(--cyan-5-hsl));
	color: white;
}
.btn.b5:Hover {
	background-color: hsl(var(--cyan-6-hsl));
}

.btn.b6 {
	background-color: hsl(var(--orange-5-hsl));
	color: white;
}
.btn.b6:Hover {
	background-color: hsl(var(--orange-6-hsl));
}
.btn.b7 {
	background-color: hsl(var(--indigo-5-hsl));
	color: white;
}
.btn.b7:Hover {
	background-color: hsl(var(--indigo-6-hsl));
}
.btn.b8 {
	background-color: hsl(var(--teal-5-hsl));
	color: white;
}
.btn.b8:Hover {
	background-color: hsl(var(--teal-6-hsl));
}
.btn.b9 {
	background-color: hsl(var(--lime-5-hsl));
	color: white;
}
.btn.b9:Hover {
	background-color: hsl(var(--lime-6-hsl));
}
.btn.firstresponder {
	background-color: hsl(138 53% 48%);
	color: white;
}
.btn.firstresponder:Hover {
	background-color: hsl(138 53% 38%);
	color: white;
}
.btn.fireworker {
	background-color: hsl(0 76% 64%);
	color: white;
}
.btn.fireworker:Hover {
	background-color: hsl(0 76% 54%);
	color: white;
}

.btn.o1 {
	outline: 1px solid hsl(var(--gray-8-hsl));
	outline-offset: -1px;
	color: inherit;
}
.btn.o1.active,
.btn.o1:Hover {
	background-color: hsl(var(--gray-1-hsl));
	outline: 1px solid hsl(var(--gray-9-hsl));
	outline-offset: -1px;
}

.btn.disabled{
	background: hsl(var(--gray-5-hsl)) !important;
}

.report-credit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: hsl(var(--green-8-hsl));
	border: 1px solid hsl(var(--green-8-hsl));
	color: white;
	margin: 0 0 1rem 0;
	padding: .45rem .7rem;
	font-size: .9rem;
	line-height: 1;
}
.report-credit strong {
	background: rgba(255, 255, 255, .18);
	color: white;
	min-width: 1.5rem;
	text-align: center;
}
.report-credit.empty {
	background: hsl(var(--orange-8-hsl));
	border-color: hsl(var(--orange-8-hsl));
}
.report-credit.empty strong {
	background: rgba(255, 255, 255, .18);
}
.report-credit-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.report-credit-row .report-credit {
	margin-bottom: 0;
}

/* ALERTS */
.error {
	background-color: hsl(var(--red-1-hsl));
	border: 1px solid hsl(var(--red-9-hsl));
	color: hsl(var(--red-9-hsl));
	margin-bottom: 1rem;
	padding: 1rem;
}
.saved {
	background-color: hsl(var(--green-1-hsl));
	border: 1px solid hsl(var(--green-9-hsl));
	color: hsl(var(--green-9-hsl));
	margin-bottom: 1rem;
	padding: 1rem;
}
main .info {
	background-color: hsl(var(--blue-1-hsl));
	border: 1px solid hsl(var(--blue-9-hsl));
	color: hsl(var(--blue-9-hsl));
	margin-bottom: 1rem;
	padding: 1rem;
}
div.warning {
	background-color: hsl(var(--orange-1-hsl));
	border: 1px solid hsl(var(--orange-9-hsl));
	color: hsl(var(--orange-9-hsl));
	margin-bottom: 1rem;
	padding: 1rem;
}

.inline-form-buttons {
	display: flex;
	width: fit-content;
}

.inline-form-button {
	max-width: 60px;
	height: 41px !important;
	align-self: flex-end;
	margin-bottom: 7px;
}

.inline-form-button i {
	margin: 0.5rem;
}



/* BEYOND */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.pull-right {
	float: right;
}

.hide:before,
.hide:after,
.hide {
	display: none !important;
}
.contact > main > form > div,
.contacts > main > form > div {
	margin: 1em -1em;
	padding: 1em;
	background: hsl(var(--gray-1-hsl));
}

#map {
	width: 100%;
	aspect-ratio: 4 / 2;
	background: hsl(var(--blue-1-hsl));
}

/* TEXT COLORS */
.text-danger {
	color: hsl(var(--red-9-hsl));
	fill: hsl(var(--red-9-hsl));
}
.text-success {
	color: hsl(var(--green-9-hsl));
	fill: hsl(var(--green-9-hsl));
}
.text-warning {
	color: hsl(var(--yellow-9-hsl));
	fill: hsl(var(--yellow-9-hsl));
}


/* TITLE */
tr[data-title]:hover:after,
a[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
tr[data-title]:after,
a[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    right: 0;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
tr[data-title]:after {
	right: auto;
	left: 10vw;
	bottom: auto;
}
[data-title] {
    position: relative;
}


.pagination {
	display: flex;
}
.pagination > * {
	display: block;
	padding: 1rem;
	border-bottom: 1px solid hsl(var(--gray-4-hsl));
	width: 100%;
	text-align: center;
}
.pagination > *:Hover {
	background: hsl(var(--gray-1-hsl));
}
.pagination > *.active {
	border: 1px solid hsl(var(--gray-4-hsl));
	border-bottom: 1px solid transparent;
	background: hsl(var(--gray-1-hsl));
	font-weight: 500;
}

.pagination_pages {
	border: 1px solid hsl(var(--gray-4-hsl));
	border-top: 1px solid transparent;
	transform: translateY(-1px);
}
.pagination_pages > * {
	display: none;
}
.pagination_pages > *.active {
	display: block;
	background: hsl(var(--gray-1-hsl));
	padding: 1rem !important;
}


.progress {
	background: hsl(var(--gray-6-hsl));
	border-radius: 3vmin;
	overflow: hidden;
}
.progress-bar {
	background: hsl(var(--green-9-hsl));
	color: white;
	white-space: nowrap;
	padding: 1px 3vmin;
	text-align: right;
}
.bar-0 {
	background: transparent;
}
.bar-1 {
	background: hsl(var(--red-9-hsl));
}
.bar-2 {
	background: hsl(var(--red-7-hsl));
}
.bar-3 {
	background: hsl(var(--red-5-hsl));
}
.bar-4 {
	background: hsl(var(--yellow-9-hsl));
}
.bar-5 {
	background: hsl(var(--yellow-7-hsl));
}
.bar-6 {
	background: hsl(var(--yellow-5-hsl));
}
.bar-7 {
	background: hsl(var(--green-5-hsl));
}
.bar-8 {
	background: hsl(var(--green-7-hsl));
}
.bar-10 {
	background: hsl(var(--green-9-hsl));
}



main > section {
	display: flex;
	gap: 1rem;
}
main > section > * {
	flex: 1;
}
main > section > *:has(canvas) {
	flex: 2;
}
/* keine Höhe von 100%*/
canvas {
	max-height: 90vh;
}

datalist {
	display: none;
}

datalist.open {
	border: 1px solid hsl(var(--red-9-hsl));
	padding: 1rem;
	display: block;
}
/* Editor CSS */
.tox-promotion{
	display: none !important;
}
.tox-statusbar__branding{
	display: none !important;
}
.tox.tox-tinymce {
	border-radius: 0 !important;
	border: 1px solid hsl(var(--gray-5-hsl)) !important;
}

#form #message {
	display: none;
	background: hsl(var(--gray-1-hsl));
	color: #000;
	position: relative;
	padding: 20px;
	margin-top: 10px;
}
#form #message p {
	padding: 10px 35px;
	font-size: 18px;
}
.valid {
	color: green;
}
.valid:before {
	position: relative;
	left: -35px;
	content: "✔";
}
.invalid {
	color: red;
}
.invalid:before {
	position: relative;
	left: -35px;
	content: "✖";
}
.aspect-square {
	position: relative;
	overflow: hidden;
}

.aspect-square img {
	user-select: none;
}
.aspect-square .dot {
	display: none;
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	background: hsla(0, 100%, 50%, 1);
	border-radius: 20px;
	border: 2px solid white;
	box-shadow: 0 0 4px black;
}
.img-preview {
	display: flex;
	gap: 20px;
}

.img-preview > div {
	flex: 1 1 50%;
	max-height: 80vh;
	max-width: 80vh;
	/*height: 100%;*/
	width: 100%;
}

.img-preview > .picker > img{
	max-height: 100%;
}

.img-preview canvas{
	max-height: 100%;
	max-width: 100%;
	height: auto;
}

.previews {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: 33% 33% 33%;
	grid-template-areas:
        "preview-2-1 preview-2-1 preview-2-1"
        "preview-1-2 preview-1-1 preview-1-1"
        "preview-1-2 preview-1-1 preview-1-1";
	grid-gap: 0;
	aspect-ratio: 1/1;
}

.previews img {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.previews [class*="preview-"] {
	position: relative;
}

.preview-2-1 {
	grid-area: preview-2-1;
	border: 1px solid #000;
}

.preview-1-2 {
	grid-area: preview-1-2;
	border: 1px solid #000;
	border-top: none;
}

.preview-1-1 {
	grid-area: preview-1-1;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

.toggle-url {
	color: #fff;
	padding: .5rem 1rem;
	background: #d71818;
	cursor: pointer;
}

.toggle-url.enabled {
	background: #1a8a18;
}

.editor {
	height: 600px;
	max-height: 100vh;
}
#save-btn[disabled]{
	background-color: hsl(var(--gray-5-hsl));
	cursor: not-allowed;
}

form input[disabled],
form input.disabled {
	color: #5e5e5e;
	background-color: #e7e7e7;
	pointer-events: none;
}
#sortable .handle{
	cursor: grab;
}

.flatpickr-current-month .numInputWrapper {
	width: 6ch;
	display: inline-block;
	position: absolute;
	top: 6px;
	right: 18px;
}

.locked {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	min-height: 70dvh;
	margin: 5dvh;
	background: hsl(var(--yellow-1-hsl));
}
.locked > span {
	background: hsl(var(--gray-3-hsl));
	border-radius: 50%;
	padding: 5dvh;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
.locked > span > i {
	font-size: 10dvh;
	aspect-ratio: 1;
}

.pill {
	background: hsl(var(--gray-3-hsl));
	border-radius: 1rem;
	color: hsl(var(--gray-9-hsl));
	display: inline-block;
	padding: .5rem 1rem;
	text-align: center;
	margin-top: 0.5rem;
	margin-right: 0.5rem;
}

.category-form {
	margin-top: 1rem;
}

.category-toolbar {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.category-toolbar h1 {
	margin: 0;
}

.category-list {
	background: hsl(var(--gray-0-hsl));
	border: 1px solid hsl(var(--gray-4-hsl));
	margin: 1rem 0;
	min-height: 7rem;
	padding: 0.75rem;
}

.category-item {
	border: 1px solid hsl(var(--gray-4-hsl));
	margin-bottom: 0.75rem;
	padding: 0.75rem 0.75rem 0.75rem 1rem;
}

.category-item:last-child {
	margin-bottom: 0;
}

.category-item.gray-1,
.category-item.gray-3 {
	background: #fff;
}

.category-item .category-item {
	background: hsl(var(--gray-1-hsl));
	margin-top: 0.75rem;
}

.category-item .category-item .category-item {
	background: hsl(var(--gray-2-hsl));
}

.category-fields {
	align-items: end;
	background: transparent;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
	margin: 0;
	padding: 0;
}

.category-fields.gray-1,
.category-fields.gray-3 {
	background: transparent;
}

.category-fields input {
	border-color: hsl(var(--gray-4-hsl));
	margin-bottom: 0;
}

.category-fields input:focus {
	border-color: hsl(var(--blue-6-hsl));
}

.category-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
	justify-content: flex-end;
	max-width: fit-content;
	padding-bottom: 0.2rem;
	width: auto;
}

.category-actions span {
	align-items: center;
	background: hsl(var(--gray-1-hsl));
	border: 1px solid hsl(var(--gray-4-hsl));
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

.category-actions span:hover {
	background: hsl(var(--gray-2-hsl));
}

.category-actions i,
.add-pos {
	cursor: pointer;
}

@media(max-width: 1200px) {
	.category-fields {
		grid-template-columns: 1fr 1fr;
	}

	.category-actions {
		justify-content: flex-start;
		padding-bottom: 0;
	}
}

@media(max-width: 700px) {
	.category-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.category-fields {
		grid-template-columns: 1fr;
	}
}

/* Grey Backgrounds */
.gray-1 {
	background: hsl(var(--gray-1-hsl));
}
.gray-2 {
	background: hsl(var(--gray-2-hsl));
}
.gray-3 {
	background: hsl(var(--gray-3-hsl));
}
.gray-4 {
	background: hsl(var(--gray-4-hsl));
}
.gray-5 {
	background: hsl(var(--gray-5-hsl));
}
.gray-6 {
	background: hsl(var(--gray-6-hsl));
}
.gray-7 {
	background: hsl(var(--gray-7-hsl));
}
.gray-8 {
	background: hsl(var(--gray-8-hsl));
}
.gray-9 {
	background: hsl(var(--gray-9-hsl));
}
div.test {
	padding: calc(var(--gap) / 2);
	text-align: center;
	background: hsl(var(--yellow-4-hsl));
	color: black;
	margin: -2rem 0 var(--gap) 0;
}
/*Loading Module*/
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: #333;
}
.gear {
    width: 60px;
    height: 60px;
    border: 8px solid #ccc;
    border-top: 8px solid #555;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}