/*  < css reset >  */
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
	margin-block-start: 0;
	margin-block-end: 0;
}
blockquote {
	margin-inline-start: 0;
	margin-inline-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}
/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}
/* Set core body defaults */
body {
	text-rendering: optimizeSpeed;
/*	display: grid;
	grid-template-columns: 300px auto;
	grid-template-rows: auto;
	grid-template-areas:
	"header main";*/
}
/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}
/* Inherit fonts for inputs and buttons */
table,
input,
button,
textarea,
select {
	font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/*  </ css reset >  */

/* ==========================================================================
   CSS VARIABLES & THEME CONFIGURATION
   ========================================================================== */

:root {}
.sr_only {
	pointer-events: none;
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow-x: hidden;
}
html {
	--hue-blue: 210; /* Blue */
	--hue-orange: 25; /* Orange */

	--font-family: 'Roboto', sans-serif;
	--font-size-mobile: 14px;
	--font-size-tablet: 16px;
	--font-size-desktop: 18px;

	--hue: 0;
	--text-color: hsl(var(--hue), 0%, 14%);
	--text-color-light: hsl(var(--hue-blue), 53%, 49%);
	--text-color-highlight: hsl(var(--hue-orange), 70%, 45%);

	/*--link-color: hsl(var(--hue-blue), 53%, 49%);*/
	--link-color: #000;
	--link-color-hover: hsl(var(--hue-blue), 53%, 49%);

	--error-color: rgb(240, 50, 50);

	--link-btn-text-color: hsl(var(--hue), 0%, 0%);

	--btn-text-color: hsl(var(--hue), 0%, 100%);
	--btn-bg: hsl(var(--hue-blue), 100%, 43%);
	--btn-bg-hover: hsl(var(--hue-blue), 100%, 50%);

	--btn-action-text-color: hsl(var(--hue), 0%, 14%);
	--btn-action-text-color-hover: hsl(var(--hue), 0%, 100%);
	--btn-action-bg: hsl(var(--hue), 0%, 100%);
	--btn-action-bg-hover: hsl(var(--hue), 0%, 14%);
	--btn-action-border: hsl(var(--hue), 0%, 14%);

	--btn-color-disabled: hsl(0, 0%, 65%);

	--bg: hsl(40, 13.04%, 95.49%);
	/*--bg: hsl(var(--hue), 0%, 100%);*/
	--bg-accent: hsl(var(--hue), 0%, 95%);
	--bg-accent-2: hsl(var(--hue), 0%, 88%);
	--box-shadow: rgba(hsl(var(--hue), 0%, 0%), 0.05%);
	--border-radius: 4px;
	--border-radius-inner: 2px;
	--border-color: hsl(var(--hue), 0%, 88%);

	--action-btn-bg-color: #fff;
	--action-btn-border-color: hsl(0, 0.25%, 25.44%);
	--action-bg-color: #d6d6d6;

	--list-item-select: hsl(var(--hue), 0%, 28%);
	--list-item-btn: hsl(var(--hue), 0%, 95%);
	--list-item-btn-text: hsl(var(--hue), 0%, 14%);
	--list-item-btn-select: hsl(var(--hue), 0%, 20%);
	--list-item-btn-text-select: hsl(var(--hue), 0%, 95%);

	--list-item-btn-disabled: hsl(var(--hue), 0%, 95%);
	
	--list-item-focus-text: #000;
	--list-item-focus-text-select: #000;
	--list-item-focus-icons: #000;
	--list-item-focus-icons-select: #fff;
	--list-item-focus-icons-bg: #000;
	--list-item-focus-icons-bg-select: #000;
	--list-item-focus-bg: #fff;
	--list-item-focus-bg-select: #fff;
	--list-item-focus-border: #000;
	--list-item-focus-border-select: #000;
	--list-item-focus-border-no-deadline: #006edb;
	--list-item-focus-border-no-deadline-select: #006edb;
	--list-item-focus-border-upcoming: #008800;
	--list-item-focus-border-upcoming-select: #008800;
	--list-item-focus-border-overdue: #cc0001;
	--list-item-focus-border-overdue-select: #cc0001;
}
html[data-theme='dark'] {
	--text-color: hsl(var(--hue), 0%, 70%);
	--text-color-light: hsl(var(--hue), 15%, 35%);
	--text-color-highlight: hsl(var(--hue-orange), 70%, 45%);
	--link-color: hsl(var(--hue), 0%, 75%);
	--link-color-hover: hsl(var(--hue), 0%, 100%);

	--error-color: rgb(240, 50, 50);

	--link-btn-text-color: hsl(var(--hue), 0%, 100%);

	--btn-text-color: hsl(var(--hue), 0%, 100%);
	--btn-bg: hsl(var(--hue), 0%, 15%);
	--btn-bg-hover: hsl(var(--hue), 0%, 20%);
	--btn-action-text-color: hsl(var(--hue), 0%, 70%);
	--btn-action-text-color-hover: hsl(var(--hue), 0%, 70%);
	--btn-action-bg: hsl(var(--hue), 0%, 15%);
	--btn-action-bg-hover: hsl(var(--hue), 0%, 20%);
	--btn-action-border: hsl(var(--hue), 0%, 15%);
	--bg: hsl(var(--hue), 0%, 7%);
	--bg-accent: hsl(var(--hue), 0%, 10%);
	--bg-accent-2: hsl(var(--hue), 0%, 15%);
	--box-shadow: rgba(hsl(var(--hue), 0%, 0%), 0.05%);
	--border-color: hsl(var(--hue), 0%, 15%);

	--action-btn-bg-color: #000;
	--action-btn-border-color: hsl(0, 0.25%, 25.44%);

	--action-btn-color-hover: #000;
	--action-btn-bg-color-hover: #e0e0e0;
	--action-btn-border-color-hover: hsl(0, 0.25%, 25.44%);

	--action-bg-color: #282828;

	--list-item-select: hsl(var(--hue), 0%, 50%);
	--list-item-btn: hsl(var(--hue), 0%, 14%);
	--list-item-btn-text: hsl(var(--hue), 0%, 88%);
	--list-item-btn-select: hsl(var(--hue), 0%, 90%);
	--list-item-btn-text-select: hsl(var(--hue), 0%, 14%);

	--list-item-btn-disabled: hsl(var(--hue), 0%, 14%);

	--list-item-focus-text: #fff;
	--list-item-focus-text-select: #fff;
	--list-item-focus-icons: #fff;
	--list-item-focus-icons-select: #000;
	--list-item-focus-icons-bg: #fff;
	--list-item-focus-icons-bg-select: #fff;
	--list-item-focus-bg: #000;
	--list-item-focus-bg-select: #000;
	--list-item-focus-border: #fff;
	--list-item-focus-border-select: #fff;
	--list-item-focus-border-no-deadline: #006edb;
	--list-item-focus-border-no-deadline-select: #006edb;
	--list-item-focus-border-upcoming: #008800;
	--list-item-focus-border-upcoming-select: #008800;
	--list-item-focus-border-overdue: #cc0001;
	--list-item-focus-border-overdue-select: #cc0001;
}
html {
	color: var(--text-color);
	font-size: var(--font-size-mobile);
	font-family: var(--font-family);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.4;
	background-color: var(--bg);
}
/*@media (min-width: 800px) {
	html {
		background-color: var(--bg-accent);
	}
}*/

html.color-theme-in-transition,
html.color-theme-in-transition *,
html.color-theme-in-transition *:before,
html.color-theme-in-transition *:after,
html.menu-theme-in-transition,
html.menu-theme-in-transition *,
html.menu-theme-in-transition *:before,
html.menu-theme-in-transition *:after {
	transition: all 500ms ease;
	transition-delay: 0;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.header {
	background-color: var(--bg);
	.header_wrap {
		position: relative;
		display: grid;
		padding: 15px;
		max-width: 100%;
		align-items: center;
		grid-template-columns: auto 200px 1fr;
		grid-template-columns: 1fr 200px auto;
		/*grid-template-columns: auto 1fr;*/
		column-gap: 0;
	}
	.logo {
		display: inline-flex;
		gap: 1px;
		align-items: center;
		margin: 0;
		width: max-content;
		color: var(--text-color);
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
	}
	.nav_icon {
		z-index: 3;
		position: relative;
		cursor: pointer;
		margin: 0 0 0 auto;
		width: 30px;
		height: 22.5px;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
	}
}

.nav_icon {
	span {
		opacity: 1;
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 4.5px;
		background: var(--text-color);
		border-radius: 4.5px;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
		&:nth-child(1) {
			top: 0px;
		}
		&:nth-child(2),
		&:nth-child(3) {
			top: 9px;
		}
		&:nth-child(4) {
			top: 18px;
		}
	}
	&.open {
		span:nth-child(1) {
			top: 9px;
			width: 0%;
			left: 50%;
		}
		span:nth-child(2) {
			transform: rotate(45deg);
		}
		span:nth-child(3) {
			transform: rotate(-45deg);
		}
		span:nth-child(4) {
			top: 9px;
			width: 0%;
			left: 50%;
		}
	}
}
@media (min-width: 800px) {
	.header .nav_icon {
		display: none;
	}
}

.module_search {
	padding: 0 20px;
	ul {
		margin: 0;
		padding: 0;
	}
	.search_container {
		position: relative;
		padding: 0 20px;
		#search_loading {
			z-index: 3;
			position: absolute;
			top: 0;
			left: 0;
			margin: 6px 0 0;
			padding: 10px 20px;
			width: calc( 100dvw - 40px );
			max-width: 450px;
			background-color: var(--bg-accent);
			border-radius: var(--border-radius);
			box-shadow: 0 0 14px rgba(0,0,0,0.5);
			font-size: 14px;
			color: var(--text-color);
			display: none;
		}
		#search_list.js_active {
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			margin: 6px 0 0;
			padding: 4px;
			width: calc( 100dvw - 40px );
			max-width: 450px;
			overflow-y: auto;
			max-height: calc( 100dvh - 90px );
			background-color: var(--bg-accent);
			border-radius: var(--border-radius);
			box-shadow: 0 0 14px rgba(0,0,0,0.5);
			hr {
				margin: 5px 0;
			}
			h2 {
				padding: 4px 10px;
				font-size: 14px;
				font-weight: bold;
				background-color: var(--bg-accent-2);
			}
			ul {
				li {
					list-style: none;
					margin: 0;
					&:not(:last-of-type) {
						padding: 0 0 4px;
					}
					a {
						display: block;
						padding: 10px;
						color: var(--text-color);
						text-decoration: none;
						background-color: var(--bg-accent);
						border-radius: var(--border-radius-inner);
						&:hover,
						&:active,
						&:focus {
							background-color: var(--bg-accent-2);
						}
						&.search_result_selected {
							&,
							&:hover,
							&:focus,
							&:active {
								background-color: #fff;
								color: #000;
								outline: 2px solid #000;
								outline-offset: -2px;
							}
						}
						mark {
							background-color: var(--text-color-highlight);
							color: #fff;
							padding: 2px 4px;
							border-radius: 2px;
							font-weight: bold;
						}
						.search_parent {
							display: block;
							font-size: 12px;
							color: var(--text-color-light);
							margin-bottom: 4px;
							font-style: italic;
						}
						.search_snippet {
							display: block;
							font-size: 12px;
							color: var(--text-color-light);
							margin-top: 4px;
							line-height: 1.4;
						}
					}
					span {
						display: block;
						padding: 10px;
						color: var(--text-color);
						text-decoration: none;
						background-color: var(--bg-accent);
						border-radius: var(--border-radius-inner);
					}
				}
			}
		}
	}
}

.header nav {
	menu {
		margin: 0;
		padding: 0;
		@media (min-width: 800px) {
			display: flex;
			justify-content: flex-end;
		}
		li {
			display: inline-block;
			margin: 0 14px 10px 0;
			font-size: 14px;
			vertical-align: middle;
			&:last-of-type {
				margin-right: 0;
			}
			a {
				display: block;
				padding: 6px 10px;
				color: var(--btn-text-color);
				text-decoration: none;
				background-color: var(--btn-bg);
				border-radius: var(--border-radius);
				&:hover,
				&:active,
				&:focus {
					color: var(--btn-text-color);
					background-color: var(--btn-bg-hover);
				}
			}
			@media (max-width: 799px) {
				display: block;
				margin: 0 0 14px;
			}
			@media (min-width: 800px) {
				margin: 0 14px 0 0;
			}
		}
	}
	@media (max-width: 799px) {
		pointer-events: none;
		z-index: 2;
		box-sizing: border-box;
		opacity: 0;
		position: fixed;
		top: 0;
		right: 0;
		padding: 70px 20px 20px;
		width: 100%;
		height: 100%;
		background-color: var(--bg);
	}
	/*
	@media (min-width: 800px) {
		// the following causes a column overflow
		text-align: right;
	}
	*/
}
@media (max-width: 799px) {
	html[data-menu='open'] .header nav {
		pointer-events: all;
		opacity: 1;
	}
}

/* ==========================================================================
   TOOLBAR & MAIN CONTENT LAYOUT
   ========================================================================== */

html.html_toolbar_view {
	overflow: hidden;
}
body.toolbar_view {
	height: 100dvh;
	min-height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
}
/*
.toolbar_view header:not([class]) {}
body.toolbar_view .header {}
*/
.toolbar,
.main_content_w_toolbar {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
}
.main_content_w_toolbar {
	overflow: hidden;
}
.main_content_w_form {
	padding: 0;
}
.main_content_w_form form .ql-table-btns {
	padding: 0 10px;
}
.main_content_w_form form input,
.main_content_w_form form textarea,
.main_content_w_form .ql-toolbar.ql-snow {
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--border-color);
}
.main_content_w_form .ql-container.ql-snow {
	border-right: 0;
	border-left: 0;
}
.main_content_w_form .btn_group {
	padding: 0 10px 20px;
}
.toolbar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
	padding: 10px;
	background-color: var(--action-bg-color);
	.toolbar_grid {
		margin: 0;
		gap: 10px;
		&_start {
			display: flex;
			align-self: flex-start;
		}
		&_end {
			display: flex;
			justify-self: flex-end;
		}
		.btn {
			cursor: pointer;
			display: inline-block;
			padding: 6px;
			min-width: 34px;
			color: var(--btn-action-text-color);
			line-height: 1;
			text-align: center;
			text-decoration: none;
			background-color: var(--btn-action-bg);
			border-radius: var(--border-radius);
			border: var(--btn-action-border) 1px solid;
			background-color: var(--action-btn-bg-color);
			border-color: var(--action-btn-border-color);
			img,
			svg {
				vertical-align: middle;
			}
			&:hover,
			&:active,
			&:focus {
				color: var(--action-btn-color-hover);
				background-color: var(--action-btn-bg-color-hover);
			}
		}
	}
}
/*
@media (orientation: landscape) {
	body.toolbar_view {
		padding: 0 54px;
	}
	.toolbar .toolbar_grid .portrait_icon {
		display: none;
	}

	.toolbar {
		position: fixed;
		top: 0;
		bottom: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		min-width: 54px;
		height: 100vh;
		height: 100dvh; // mobile safari - dynamic height
	}
	.toolbar_header {
		left: 0;
	}
	.toolbar_footer {
		right: 0;
	}

	.toolbar .toolbar_grid {
		flex-direction: column;
	}
	.toolbar .toolbar_grid_start {
		align-self: flex-start;
	}
	.toolbar .toolbar_grid_end {
		align-self: flex-end
	}

	.main_content_w_toolbar {
		margin: 0 auto;
		width: calc( 100dvw - 108px );
		height: 100vh;
		overflow-y: auto;
	}
}
@media (orientation: portrait) {
	.toolbar_view {
		padding: 54px 0;
	}

	.toolbar .toolbar_grid .landscape_icon {
		display: none;
	}

	.toolbar {
		position: fixed;
		right: 0;
		left: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		width: 100vw;
		width: 100dvw; // mobile safari - dynamic height
		min-height: 54px;
	}
	.toolbar_header {
		top: 0;
	}
	.toolbar_footer {
		bottom: 0;
	}

	.toolbar .toolbar_grid {
		flex-direction: row;
	}
	.toolbar .toolbar_grid_start {
		align-self: flex-start;
	}
	.toolbar .toolbar_grid_end {
		align-self: flex-end
	}

	.main_content_w_toolbar {
		margin: 0;
		width: 100dvw;
		height: calc( 100dvh - 108px );
		max-height: calc( 100dvh - 108px );
		overflow-y: auto;
	}
}
*/
.main_content_w_toolbar {
	margin: 0;
	width: 100dvw;
	height: calc( 100dvh - 54px );
	max-height: calc( 100dvh - 54px );
	overflow-y: auto;
}

/* ==========================================================================
   SUB NAVIGATION
   ========================================================================== */

.sub_nav {
	margin: 0;
	padding: 0;
	@media (min-width: 600px) {
		padding: 20px 20px 0;
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 15px 20px;
		background-color: var(--bg-accent-2);
		border-radius: var(--border-radius);
		li {
			display: inline-block;
			padding: 0;
			&:not(:last-of-type) {
				margin: 0 14px 0 0;
			}
			a {
				display: block;
				color: var(--text-color);
				text-decoration: none;
				&:hover,
				&:active,
				&:focus {
					color: var(--text-color);
					text-decoration: underline;
				}
			}
		}
	}
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

main {
	padding: 20px;
	hyphens: auto;
	font-size: 14px;
	font-size-adjust: from-font;
	background-color: var(--bg);
	img {
		max-width: 100%;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	p,
	table,
	form,
	img,
	picture {
		margin: 0 0 10px;
	}
	h1 {
		font-size: 18px;
	}
	h2 {
		font-size: 16px;
	}
	h3 {
		font-size: 15px;
	}
	h4 {
		font-size: 14px;
	}
	h5 {
		font-size: 13px;
	}
	a {
		color: var(--link-color);
		text-decoration: underline;
		transition: all 500ms ease;
		&:hover,
		&:active,
		&:focus {
			color: var(--link-color-hover);
			text-decoration: none;
		}
	}
	pre,
	code {
		background-color: rgb(35, 36, 31);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		box-sizing: border-box;
		color: rgb(248, 248, 242);
		counter-reset: list-5 0 list-7 0 list-9 0 list-3 0 list-6 0 list-1 0 list-8 0 list-2 0 list-4 0;
		cursor: text;
		display: block;
		font-family: monospace;
		margin-bottom: 5px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 5px;
		overflow-wrap: break-word;
		overflow-x: visible;
		overflow-y: visible;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		tab-size: 4;
		text-align: left;
		text-rendering: optimizespeed;
		-webkit-font-smoothing: antialiased;
		white-space: pre-wrap;
		* {
			font-family: monospace;
			font-size: 13px;
		}
	}
	blockquote,
	blockquote * {
		border-left: 4px solid var(--border-color);
		margin-bottom: 5px;
		margin-top: 5px;
		padding-left: 16px;
	}
	@media (min-width: 1000px) {
		h1 {
			font-size: 26px;
		}
		h2 {
			font-size: 24px;
		}
		h3 {
			font-size: 22px;
		}
		h3 {
			font-size: 20px;
		}
		h3 {
			font-size: 18px;
		}
	}
}

/* ==========================================================================
   TABLES
   ========================================================================== */

table {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	border-collapse: collapse;
	th,
	td {
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		border-collapse: collapse;
		min-width: 10px;
	}
	tr th {
		text-align: inherit;
	}
}

/* ==========================================================================
   FORMS
   ========================================================================== */

form {
	> div {
		margin-bottom: 15px;
	}
	label {
		padding: 0 11px;
	}
	input,
	textarea {
		box-sizing: border-box;
		margin: 0;
		padding: 10px;
		width: 100%;
		color: var(--text-color);
		background-color: var(--bg);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
	}
	input[type='checkbox'] {
		width: auto;
	}
	textarea {
		min-height: 300px;
	}
	input[type='submit'] {
		cursor: pointer;
		padding: 8px 20px;
		background: var(--btn-bg);
		border: 0;
		color: var(--btn-text-color);
		font-size: inherit;
		border-radius: var(--border-radius);
		&:hover,
		&:active,
		&:focus {
			color: var(--btn-text-color);
			background: var(--btn-bg-hover);
		}
	}
}


footer {
	padding: 0;
}

/* ==========================================================================
   BUTTONS & BUTTON GROUPS
   ========================================================================== */

.btn_group {
	display: flex;
	margin-bottom: 0;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}
form .btn_group input {
	margin: 0;
	width: auto;
}

.pseudo_btn {
	cursor: pointer;
	padding: 8px 20px;
	background: var(--btn-bg);
	border: 0;
	color: var(--btn-text-color);
	font-size: inherit;
	text-decoration: none;
	border-radius: var(--border-radius);
	&:hover,
	&:active,
	&:focus {
		color: var(--btn-text-color);
		background: var(--btn-bg-hover);
	}
}

.menu_icon {
	line-height: 1;
}

/* ==========================================================================
   THEME SWITCH
   ========================================================================== */

.theme_switch .toggle_off {
	color: var(--btn-text-color);
}
.theme_switch .toggle_on {
	color: var(--btn-text-color);
}
html[data-theme='light'] .theme_switch .toggle_off {
	display: block;
}
html[data-theme='light'] .theme_switch .toggle_on {
	display: none;
}

html[data-theme='dark'] .theme_switch .toggle_off {
	display: none;
}
html[data-theme='dark'] .theme_switch .toggle_on {
	display: block;
}

/* ==========================================================================
   NAVIGATION ACTIONS
   ========================================================================== */

.nav_actions {
	margin: 0 0 20px;
	&.nav_placement_start {}
	&.nav_placement_end {
		display: flex;
		justify-content: flex-end;
	}
	&.nav_placement_space_between {
		display: flex;
		justify-content: space-between;
	}
	a {
		cursor: pointer;
		display: inline-block;
		display: inline-flex;
		gap: 7px;
		align-items: center;
		padding: 6px;
		min-width: 34px;
		color: var(--btn-action-text-color);
		line-height: 1;
		text-align: center;
		text-decoration: none;
		background-color: var(--btn-action-bg);
		border-radius: var(--border-radius);
		border: var(--btn-action-border) 2px solid;
		&:hover,
		&:active,
		&:focus {
			color: var(--btn-action-text-color-hover);
			background-color: var(--btn-action-bg-hover);
			img {
				filter: invert(1);
			}
		}
		img,
		svg {
			vertical-align: middle;
		}
	}
}

/* ==========================================================================
   TABLE VIEW
   ========================================================================== */

.table_view {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	table {
		width: 100%;
		&,
		th,
		td {
			border: 0;
			border-collapse: collapse;
		}
		tbody tr {
			&:not(:last-of-type) {
				border-bottom: 1px solid var(--border-color);
			}
		}
		thead tr th,
		tbody tr td {
			padding: 10px 20px;
			&:first-of-type {
				padding-left: 0;
				width: calc( 100% - 90px);
			}
			&:nth-of-type(3):last-of-type {
				padding-right: 0;
				width: 90px;
			}
		}
		thead tr th {
			font-weight: normal;
		}
	}
}
.table_view_images {
	img {
		max-width: 300px;
	}
}
.table_td_action {
	a {
		cursor: pointer;
		display: inline-block;
		padding: 6px 4px 4px;
		color: var(--text-color);
		line-height: 1;
		text-decoration: none;
		border-radius: var(--border-radius);
		&:not(:last-of-type) {
			margin-right: 5px;
		}
		&:hover,
		&:active,
		&:focus {
			color: var(--btn-action-text-color-hover);
			background-color: var(--btn-action-bg-hover);
		}
	}
}

/* ==========================================================================
   ERROR & INFO MESSAGES
   ========================================================================== */

.error {
	background-color: #FF6600;
	border: #AA4502 1px solid;
	padding: 5px 10px;
	color: #FFFFFF;
	border-radius: var(--border-radius);
}
.info {
	font-size: .8em;
	color: #FF6600;
}
input.info_error,
textarea.info_error {
	border: 1px solid #FF6600;
}

/* ==========================================================================
   CONTEXT POPOVER
   ========================================================================== */

.context_popover {
	display: none;
	padding: 0;
	background: transparent;
}
.popover_content {
	width: max-content;
	button {
		padding: 2px;
		height: 28px;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 0;
	}
	ul {
		display: block;
		margin: 0;
		padding: 0;
		li {
			display: block;
			width: 100%;
			border: 0;
			small {
				display: block;
			}
			a {
				display: block;
				border-radius: 0;
				border: 0;
			}
		}
	}
}
.popover_content_row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.popover_content_col {
	min-width: 150px;
}

/* ==========================================================================
   QUILL EDITOR (Commented Out)
   ========================================================================== */

/*  < quill >  */
/*main .ql-toolbar.ql-snow,
main .ql-container.ql-snow {
	border-color: var(--border-color);
}
main textarea#source_view {}
main textarea.form_input_hidden {
	display: none;
}
#editor-container .ql-editor {
	overflow-y: auto;
	min-height: 250px;
	max-height: calc(100dvh - 108px - 150px);
}
.ql-toolbar.ql-snow {
	margin: 0;
}
.ql-editor.ql-blank::before {
	color: var(--text-color);
}
.ql-editor p {
	padding: 0 0 20px;
}
#snow-container {
	min-height: 250px;
	margin-bottom: 10px;
}
.container {
	display: flex;
}
.panel {
	flex: 1;
	margin-left: 25px;
	margin-right: 25px;
}*/
/*  < quill >  */

/* ==========================================================================
   LIST LAYOUTS
   ========================================================================== */

.layout_list > ul {
	padding: 0;
}
.layout_list ul li {
	margin: 5px 0 0;
	list-style: none;
}
.layout_list ul li ul:before {
	content:'';
	position: absolute;
	top: 0;
	left: 20px;
	height: 100%;
	border-left: 1px solid var(--border-color);
}
.layout_list ul li ul {
	position: relative;
	padding: 0 0 0 40px;
}
.layout_list ul li nav {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	align-items: center;
	padding: 0 3px 0 8px;
	background-color: transparent;
	border: 1px solid var(--bg-accent);
	border-radius: var(--border-radius);
}

.layout_list ul li .item_label_upcoming {
	box-shadow: 0 0 1.5px #008800;
}
.layout_list ul li .item_label_upcoming .list_context_deadline {
	color: #008800;
}

.layout_list ul li .item_label_today {
	box-shadow: 0 0 1.5px #f1c40f;
}
.layout_list ul li .item_label_today .list_context_deadline {
	color: #f1c40f;
}

.layout_list ul li .item_label_overdue .list_context_deadline {
	color: #cc0001;
}

.layout_list ul li status {
	width: 12px;
	height: 12px;
	border-radius: 100%;
}
.layout_list ul li .item_label_focus status {
	position: relative;
	background-color: #000;
}
.layout_list ul li .item_label_focus status:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background-color: #000;
	border: 2px solid #fff;
	border-radius: 100%;
}
.layout_list ul li .item_label_done status {
	height: 0;
}
.layout_list ul li .item_label_no_deadline status {}
.layout_list ul li .item_label_overdue status {
	background-color: #cc0001;
}

.layout_list ul li nav a {
	color: var(--link-btn-text-color);
}
.layout_list ul li nav:hover,
.layout_list ul li nav:active,
.layout_list ul li nav:focus {
/*	background-color: var(--bg-accent);*/
	border-color: var(--list-item-select);
	box-shadow: none;
}
.layout_list ul li nav .list_item {
	display: flex;
	flex-grow: 1;
	gap: 10px;
	align-items: center;
}
.layout_list ul li nav .list_checkbox {
	padding: 4px 0;
}
.layout_list ul li nav .list_checkbox form * {
	display: block;
}
.layout_list ul li nav .list_title {
	flex-grow: 1;
	font-size: 14px;
	padding: 7px 0;
}
@media (min-width: 1000px) {
	.layout_list ul li nav .list_title {
		font-size: 14px;
	}
}
.layout_list ul li nav .list_context {
	display: flex;
	flex-grow: auto;
	gap: 4px;
	padding: 0;
	font-size: 10px;
	font-weight: bold;
	text-align: right;
	align-items: center;
}
ul li nav .btn,
.layout_list ul li nav .list_context button {
	height: 26px;
	aspect-ratio: 1;
}
.layout_list ul li nav .list_context span:not([class]) {
	display: inline-block;
	padding: 2px 0 0;
}
.layout_list ul li nav .list_context_schedule {}
.layout_list ul li nav .list_context_deadline {}
.layout_list ul li a:not(.btn) {
	display: inline-block;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}
.layout_list .list_title_spacer {
	padding: 0 0 0 20px;
}


.layout_list ul li .item_label_done {
	background-color: var(--list-item-btn-disabled);
	box-shadow: none;
}



.layout_list ul li .item_label_focus {
	box-shadow: none;

	background: linear-gradient(var(--list-item-focus-bg), var(--list-item-focus-bg)) padding-box,
	linear-gradient(to right, var(--list-item-focus-border), var(--list-item-focus-border)) border-box;
	border-radius: 4px;
	border: 1px solid transparent;
}
.layout_list ul li .item_label_focus:hover,
.layout_list ul li .item_label_focus:active,
.layout_list ul li .item_label_focus:focus {
	border-color: var(--list-item-focus-border-select);
}


.layout_list ul li .item_label_focus.item_label_no_deadline {
	background: linear-gradient(var(--list-item-focus-bg), var(--list-item-focus-bg)) padding-box,
	linear-gradient(to right, var(--list-item-focus-border), var(--list-item-focus-border-no-deadline)) border-box;
}
.layout_list ul li .item_label_focus.item_label_no_deadline:hover,
.layout_list ul li .item_label_focus.item_label_no_deadline:active,
.layout_list ul li .item_label_focus.item_label_no_deadline:focus {
	border-color: var(--list-item-focus-border-no-deadline-select);
}


.layout_list ul li .item_label_focus.item_label_upcoming {
	background: linear-gradient(var(--list-item-focus-bg), var(--list-item-focus-bg)) padding-box,
	linear-gradient(to right, var(--list-item-focus-border), var(--list-item-focus-border-upcoming)) border-box;
}
.layout_list ul li .item_label_focus.item_label_upcoming:hover,
.layout_list ul li .item_label_focus.item_label_upcoming:active,
.layout_list ul li .item_label_focus.item_label_upcoming:focus {
	border-color: var(--list-item-focus-border-upcoming-select);
}


.layout_list ul li .item_label_focus .custom__checkmark input:checked ~ .checkmark {
	color: var(--list-item-focus-icons-select);
	background-color: var(--list-item-focus-icons-bg-select);
}
.layout_list ul li .item_label_upcoming.item_label_focus .list_context_deadline {
	color: var(--list-item-focus-text);
}
.layout_list ul li .item_label_focus .list_title {
	font-weight: bold;
}
.layout_list ul li .item_label_done .list_title {
	text-decoration:line-through;
}
.layout_list ul li .item_label_done .list_context_deadline {
	display: none;
}
.layout_list ul li .item_label_done .to_do_action {
	display: none;
}

subnav {
	position: relative;
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 3px 0;
	line-height: 1;
}
subnav .btn,
subnav button {
	cursor: pointer;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	color: var(--list-item-btn-text);
	background-color: var(--list-item-btn);
	border: 0;
	border-radius: var(--border-radius);
}
subnav .btn:hover,
subnav .btn:active,
subnav .btn:focus,
subnav button:hover,
subnav button:active,
subnav button:focus,
subnav button[aria-expanded="true"] {
	color: var(--list-item-btn-text-select);
	background-color: var(--list-item-btn-select);
}

subnav .btn .btn_default,
subnav button .btn_default {
	display: block;
}
subnav .btn .btn_focus,
subnav button .btn_focus {
	display: none;
}
subnav .btn:hover .btn_default,
subnav .btn:active .btn_default,
subnav .btn:focus .btn_default,
subnav button:hover .btn_default,
subnav button:active .btn_default,
subnav button:focus .btn_default,
subnav button[aria-expanded="true"] {
	display: none;
}
subnav .btn:hover .btn_focus,
subnav .btn:active .btn_focus,
subnav .btn:focus .btn_focus,
subnav button:hover .btn_focus,
subnav button:active .btn_focus,
subnav button:focus .btn_focus,
subnav button[aria-expanded="true"] {
	display: block;
}

/* ==========================================================================
   SELECT LIST
   ========================================================================== */

/*  < select_list >  */
.select_list {
	padding: 0 20px;
	ul {
		margin: 0;
		padding: 0;
		li {
			list-style: none;
			ul {
				margin: 5px 0;
				padding: 0 0 0 20px;
			}
			nav {
				display: flex;
			}
			input[type='radio'],
			input[type='radio'] + label {
				display: inline-block;
				width: auto;
			}
			input[type='radio'] {
				margin: 10px;
			}
			input[type='radio'] + label {
				padding: 7px 10px;
			}
		}
	}
}
/*  < select_list >  */

/* ==========================================================================
   NOTE VERSIONS
   ========================================================================== */

.note_versions {
	display: flex;
	flex-direction: column;
	gap: 15px;
	nav {
		display: flex;
		flex-direction: row;
		gap: 15px;
		margin: 0 0 15px;
	}
	.note_version {
		padding: 15px;
		background-color: var(--bg-accent);
		border-radius: var(--border-radius);
	}
	.version_date {
		display: flex;
		flex-direction: row;
		gap: 15px;
		align-items: center;
	}
}

/*
@media (min-width: 1000px) {
	.main_content {
		display: flex;
		flex-direction: row;
	}
	main {
		order: 2;
		width: calc( 100% - 300px);
	}
	aside {
		order: 1;
		width: 300px;
	}
	}
*/

/* ==========================================================================
   TIPPY TOOLTIPS
   ========================================================================== */

/*  < Tippy >  */
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{
	max-width:calc(100vw - 10px)
}
.tippy-box {
	position:relative;
	background-color: transparent;
	white-space:normal;
	outline:0;
	transition-property:transform,visibility,opacity;
	border: 0;
}
.tippy-box[data-placement^=top]>.tippy-arrow {
	bottom:0;
}
.tippy-box[data-placement^=top]>.tippy-arrow:before {
	bottom:-7px;
	left:0;
	border-width:8px 8px 0;
	border-top-color:initial;
	transform-origin:center top;
}
.tippy-box[data-placement^=bottom]>.tippy-arrow {
	top: 0;
}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before{
	top:-7px;
	left:0;
	border-width:0 8px 8px;
	border-bottom-color:initial;
	transform-origin:center bottom
}
.tippy-box[data-placement^=left]>.tippy-arrow{
	right:0
}
.tippy-box[data-placement^=left]>.tippy-arrow:before{
	border-width:8px 0 8px 8px;
	border-left-color:initial;
	right:-7px;
	transform-origin:center left
}
.tippy-box[data-placement^=right]>.tippy-arrow{
	left:0
}
.tippy-box[data-placement^=right]>.tippy-arrow:before{
	left:-7px;
	border-width:8px 8px 8px 0;
	border-right-color:initial;
	transform-origin:center right
}
.tippy-box[data-inertia][data-state=visible]{
	transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)
}
.tippy-arrow{
	width:16px;height:16px;color:#333
}
.tippy-arrow:before {
	content:"";
	position:absolute;
	border-color:transparent;
	border-style:solid
}
.tippy-content {
	position: relative;
	z-index: 1;
	padding: 4px;
	background-color: var(--action-btn-bg-color);
	border: 1px solid var(--action-btn-border-color);
	border-radius: var(--border-radius);
}
/*  </ Tippy >  */

/* ==========================================================================
   DETAILS & ACCORDION
   ========================================================================== */

details summary {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-template-columns: 1fr;
	align-items: center;
	cursor: pointer;
}
details[open] summary {
/*	margin: 0 0 10px;*/
}

.accordion_content {
	display: none;
}

/* ==========================================================================
   DIALOGS & MODALS
   ========================================================================== */

.mc_move {
	dialog {
		box-sizing: border-box;
		margin: auto;
		padding: 0;
		width: calc( 100% - 40px);
		/*max-width: max-content;*/
		max-width: 800px;
		max-height: calc( 100dvh - 40px );
		min-height: 88dvh;
		border: 0;
		border-radius: 4px;
		box-shadow: 0 0 20px rgba(0,0,0,0.8);
		&[open] {
			display: flex;
		}
		.mc_dialog_close {
			cursor: pointer;
			z-index: 10;
			position: absolute;
			top: 20px;
			right: 20px;
			display: flex;
			padding: 4px;
			color: var(--list-item-btn-text);
			background-color: var(--list-item-btn);
			border: 0;
			border-radius: 50%;
			border: 0;
			&:hover,
			&:active,
			&:focus {
				color: var(--list-item-btn-text-select);
				background-color: var(--list-item-btn-select);
			}
		}
		img {
			width: 100%;
			height: auto;
		}
		&::backdrop {
			opacity: 0.8;
			background-color: #000;
			/* Blur not working on */
			-webkit-backdrop-filter: blur(5px); /* Add this line first, it fixes blur for Safari*/
			backdrop-filter: blur(5px);  /* This line activates blur*/
		}
	}
}
.mc_dialog {
	.mc_dialog_inner {
		box-sizing: border-box;
		position: relative;
		display: flex;
		overflow: hidden;
	}
	.mc_dialog_content {
		padding: 20px;
		overflow-y: auto;
	}
}

/* ==========================================================================
   KEYBOARD SHORTCUTS MODAL
   ========================================================================== */

.shortcuts_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10000;
}

.shortcuts_dialog {
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	width: auto;
	max-width: 500px;
	min-width: 300px;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	background-color: var(--bg-color, #fff);
	pointer-events: auto;
	&[open] {
		display: block;
		animation: shortcutsFadeIn 0.2s ease-out;
	}
	&::backdrop {
		background-color: rgba(0, 0, 0, 0.3);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		animation: backdropFadeIn 0.2s ease-out;
	}
}

@keyframes shortcutsFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes backdropFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.shortcuts_content {
	padding: 24px;
	h2 {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 20px;
		font-weight: 700;
		color: var(--text-color, #000);
	}
}

.shortcuts_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.shortcut_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px;
	background-color: var(--list-item-bg, #f5f5f5);
	border-radius: 6px;
	border: 1px solid var(--border-color, #e0e0e0);
	[data-theme="dark"] & {
		background-color: var(--list-item-bg, #2a2a2a);
		border-color: var(--border-color, #404040);
	}
}

.shortcut_keys {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	kbd {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		height: 28px;
		padding: 4px 8px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		color: var(--text-color, #333);
		background-color: var(--bg-color, #fff);
		border: 1px solid var(--border-color, #ccc);
		border-radius: 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		[data-theme="dark"] & {
			background-color: var(--bg-color, #1a1a1a);
			border-color: var(--border-color, #555);
			color: var(--text-color, #e0e0e0);
		}
	}
	span {
		margin: 0 2px;
		color: var(--text-color-secondary, #666);
		font-size: 14px;
	}
}

.shortcut_description {
	flex: 1;
	font-size: 14px;
	color: var(--text-color, #333);
	text-align: right;
	[data-theme="dark"] & {
		color: var(--text-color, #e0e0e0);
	}
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

#view_breadcrumb {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin: 10px 20px;
	padding: 10px;
	align-items: center;
	color: #fff;
	background: #000;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	span,
	a {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	a {
		color: inherit;
		text-decoration: none;
		&:hover,
		&:active,
		&:focus {
			text-decoration: underline;
		}
	}
}

/* ==========================================================================
   CUSTOM CHECKBOX
   ========================================================================== */

/* Customize the label (the container) */
.custom__checkmark {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Hide the browser's default checkbox */
	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
		&:checked ~ .checkmark {
			background-color: #2196F3;
			&:after {
				display: block;
			}
		}
	}
	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 22px;
		width: 22px;
		color: #fff;
		background-color: transparent;
		border: 2px solid transparent;
		border-radius: 2px;
		/* Create the checkmark/indicator (hidden when not checked) */
		&:after {
			content: "";
			position: absolute;
			display: none;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
	/* On mouse-over, add a grey background color */
	&:hover input ~ .checkmark {
		border-color: #fff;
	}
}

/* ==========================================================================
   ITEM CONTAINER & DETAILS
   ========================================================================== */

.item_container {
	background-color: transparent;
	border: 1px solid var(--bg-accent);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--bg-accent);
	border-radius: var(--border-radius);
}
.item_container .item_nav {
	padding: 0 6px 0 8px;
	border: 0;
}
.item_title {
	cursor: pointer;
	transition: 0.4s;
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
	font-size: 14px;
	padding: 0;
}
.layout_list .item_title .list_title {
	padding: 7px 0;
}
.item_title .list_context {
	
}
.item_details {
	display: none;
	transition: max-height 0.2s ease-out;
}
.item_details .item_content {
	padding: 7px 20px 20px 30px;
}
.item_details .item_codify {
	padding: 0 20px 7px 30px;
}

/* ==========================================================================
   CALENDAR & DATE LISTS
   ========================================================================== */

.list_current_dates {
	display: flex;
	width: 100%;
	gap: 10px 0;
	margin: 0 0 20px;
	padding: 0;
/*	flex-wrap: wrap;*/
	justify-content: center;
	overflow-x: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	li {
		display: block;
		width: 100%;
		padding: 7px 0;
		border-bottom: 1px solid #777;
		@media (min-width: 800px) {
			padding: 3px 10px;
			width: auto;
			border: 0;
			border-right: 1px solid #777;
		}
	}
}
.calendar_deadline_dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #fff;
	border-radius: 50%;
}

.card_group {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.card {
	display: inline-flex;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect) */
.flip_card {
	width: 200px;
	min-width: 150px;
	height: auto;
	aspect-ratio: 5 / 7;
	background-color: transparent;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
	/* Do an horizontal flip when you move the mouse over the flip box container */
	&:hover .card_inner {
		transform: rotateY(180deg);
	}
	/* Position the front and back side */
	.card_front,
	.card_back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility: hidden;
	}
	/* Style the front side (fallback if image is missing) */
	.card_front {
		display: flex;
		padding: 20px;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 26px;
		background-color: #000;
		border-radius: 20px;
	}
	/* Style the back side */
	.card_back {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 30px;
		background-color: dodgerblue;
		border-radius: 20px;
		transform: rotateY(180deg);
		.card_top {
			display: flex;
			padding: 14px;
			align-items: center;
			height: 100%;
		}
		.card_actions {
			display: flex;
			justify-content: space-between;
			padding: 0 14px 14px;
			width: 100%;
		}
	}
}
/* This container is needed to position the front and back side */
.card_inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}



/* ROUTER */
.router-focus {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

router {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 100px;
}
.router {
	display: block;
/*	min-height: 200px;*/
	background-color: #eee;
	border-radius: 10px;
}
.router--account {
	min-height: 40px;
}
focus {
	display: block;
}
@media (min-width: 800px) {
	.router-focus {
		flex-direction: row;
	}
	router {
		width: 300px;
	}
	focus {
		width: calc(100% - 300px);
	}
}

.router-focus-x {
	flex-direction: column;
}
.router-focus-x router {
	width: 100%;
}
.router-focus-x router {
	width: 100%;
}
@media (min-width: 800px) {
	.router-focus-x {
		flex-direction: column;
	}
	.router-focus-x router {
		width: 100%;
	}
	.router-focus-x .router {
		min-height: min-content;
	}
	.router-focus-x focus {
		width: 100%;
	}
}

/*  < kanban board >  */
.layout_kanban_board {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-left: -10px;
	padding: 10px;
	/*min-height: 100%;*/
	overflow-y: auto;
	.kanban_board {
		position: relative;
		display: grid;
		width: 100%;
		max-width: 320px;
		&:after {
			content: '';
			z-index: 1;
			position: absolute;
			top: -7px;
			left: -7px;
			pointer-events: none;
			display: none;
			width: calc(100% + 14px);
			height: calc(100% + 14px);
			/*filter: blur(10px);*/
			background: no-repeat center url("/web/image/gradient.png");
			background-size: cover;
			/*border: 2px solid #000;*/
			border-radius: 14px;
			/*	background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
			background-size: 750% 750%;
			animation: animated-gradient 10s ease infinite;*/
		}
		&:hover:after,
		&:active:after,
		&:focus:after,
		&:focus-within:after {
			display: block;
		}
		&:hover,
		&:active,
		&:focus,
		&:focus-within {
			/*box-shadow: 5px 5px 0 0 #000;*/
		}
		.layout_kanban_board_inner {
			position: relative;
			z-index: 2;
			display: grid;
			grid-template-rows: auto 1fr auto;
			padding: 7px;
			min-width: 300px;
			backdrop-filter: blur(10px);
			background-color: rgba(255, 255, 255, 0.8);
			border: 2px solid #000;
			border-radius: 10px;
		}
		h2 {
			margin: 0;
			padding: 5px 10px;
			font-size: 18px;
			&.kanban_column_title_editable {
				cursor: text;
				border-radius: 4px;
				&:hover {
					background-color: rgba(0, 0, 0, 0.04);
				}
				&:focus {
					outline: 1px solid rgba(0, 123, 255, 0.5);
					background-color: rgba(0, 0, 0, 0.02);
				}
			}
		}
		.kanban_footer {
			padding: 20px 0 0;
			text-align: center;
		}
	}
	.kanban_board_list {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		min-height: 50px;
		transition: background-color 0.2s ease, border-color 0.2s ease;
		&.drag-over {
			background-color: rgba(0, 123, 255, 0.1);
			border: 2px dashed rgba(0, 123, 255, 0.5);
			border-radius: 5px;
		}
		li {
			display: block;
			&:first-of-type .item_container {
				border-radius: 5px 5px 0 0;
			}
			&:not(:last-of-type) {
				border-bottom: 1px solid #c7c7c7;
			}
			&:last-of-type .item_container {
				border-bottom: 0;
				border-radius: 0 0 5px 5px;
			}
			.item_container {
				border: 0;
			}
		}
	}
	.item_container {
		display: block;
		padding: 7px 10px;
		/*	background-color: hsl(40, 13.04%, 95.49%);*/
		background-color: #fff;
		/*	border-radius: 5px;*/
		transition: opacity 0.2s ease, transform 0.2s ease;
		&.kanban_card {
			cursor: grab;
			transition: opacity 0.3s ease, transform 0.3s ease;
			&:active {
				cursor: grabbing;
			}
			&[draggable="true"]:hover {
				transform: translateY(-2px);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			&.kanban_card_animating {
				transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			}
		}
		a {
			text-underline-offset: 3px;
		}
	}
	ul li .list_title {
		display: block;
	}
	.item_title_overview {
		display: flex;
		gap: 10px;
	}
	.item_schedule {
		display: flex;
		gap: 10px;
		margin: 0;
		padding: 10px 0 0;
	}
	.btn {
		padding: 5px 14px;
		display: inline-block;
		color: #fff;
		text-decoration: none;
		background-color: #000;
		border: 2px solid #000;
		border-radius: 5px;
		&:hover,
		&:active,
		&:focus,
		&:focus-within {
			color: #000;
			background-color: #fff;
		}
	}
}
@keyframes animated-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Kanban modals */
.kanban_modal {
	pointer-events: none;
}
.kanban_modal_dialog {
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	max-width: 520px;
	width: 90%;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	background: var(--bg-color, #fff);
	pointer-events: auto;
}
.kanban_modal_dialog[open] {
	display: block;
	animation: kanbanModalFadeIn 0.2s ease-out;
}
@keyframes kanbanModalFadeIn {
	from { opacity: 0; transform: scale(0.96) translateY(-8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
.kanban_modal_dialog::backdrop {
	background: rgba(0, 0, 0, 0.35);
	animation: kanbanBackdropFade 0.2s ease-out;
}
@keyframes kanbanBackdropFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
.kanban_modal_inner {
	position: relative;
	padding: 0;
}
.kanban_modal_close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 24px;
	line-height: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0.6;
}
.kanban_modal_close:hover {
	opacity: 1;
}
.kanban_modal_content {
	padding: 24px 24px 20px;
}
.kanban_modal_content h3 {
	margin: 0 0 16px;
	font-size: 1.25rem;
}
.kanban_modal_content label {
	display: block;
	margin-top: 10px;
}
.kanban_modal_content .form_input_box {
	width: 100%;
	margin-top: 4px;
	box-sizing: border-box;
}
.kanban_modal_content .btn_group {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.kanban_clear_btn {
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 14px;
	border: 1px solid #ccc;
	background: #f5f5f5;
	border-radius: 4px;
	cursor: pointer;
}
.kanban_clear_btn:hover {
	background: #eee;
}
/* Warning modal - appears on top of other modals */
.kanban_warning_modal {
	z-index: 10001;
}
.kanban_warning_modal .kanban_modal_dialog {
	z-index: 10002;
	max-width: 400px;
}
.kanban_warning_modal .kanban_modal_dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	z-index: 10001;
}
.kanban_warning_modal .kanban_modal_content p {
	margin: 0 0 20px;
	color: var(--text-color, #333);
}
/*  </ kanban board >  */