/*  < 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 >  */

: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-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(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 {
	background-color: var(--bg);
}
.header .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;
}
.header .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;
}
.header .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;
}
.nav_icon span:nth-child(1) {
	top: 0px;
}
.nav_icon span:nth-child(2),
.nav_icon span:nth-child(3) {
	top: 9px;
}
.nav_icon span:nth-child(4) {
	top: 18px;
}
.nav_icon.open span:nth-child(1) {
	top: 9px;
	width: 0%;
	left: 50%;
}
.nav_icon.open span:nth-child(2) {
	transform: rotate(45deg);
}
.nav_icon.open span:nth-child(3) {
	transform: rotate(-45deg);
}
.nav_icon.open 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_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,
					span {
						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);
						}
					}
				}
			}
		}
	}
}

.header nav {}
.header nav menu {
	margin: 0;
	padding: 0;
}
@media (min-width: 800px) {
	.header nav menu {
		display: flex;
		justify-content: flex-end;
	}
}
.header nav menu li {
	display: inline-block;
	margin: 0 14px 10px 0;
	font-size: 14px;
	vertical-align: middle;
}
.header nav menu li:last-of-type {
	margin-right: 0;
}
.header nav menu li a {
	display: block;
	padding: 6px 10px;
	color: var(--btn-text-color);
	text-decoration: none;
	background-color: var(--btn-bg);
	border-radius: var(--border-radius);
}
.header nav menu li a:hover,
.header nav menu li a:active,
.header nav menu li a:focus {
	color: var(--btn-text-color);
	background-color: var(--btn-bg-hover);
}
@media (max-width: 799px) {
	.header nav {
		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);
	}
	html[data-menu='open'] .header nav {
		pointer-events: all;
		opacity: 1;
	}
	.header menu ul li {
		display: block;
		margin: 0 0 14px;
	}
}
@media (min-width: 800px) {
	/* .header nav {
		// the following causes a column overflow
		text-align: right;
	} */
	.header nav menu li {
		margin: 0 14px 0 0;
	}
}

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 .toolbar_grid {
	margin: 0;
	gap: 10px;
}
.toolbar .toolbar_grid_start {
	display: flex;
	align-self: flex-start;
}
.toolbar .toolbar_grid_end {
	display: flex;
	justify-self: flex-end;
}
.toolbar .toolbar_grid .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);
}
.toolbar .toolbar_grid .btn img,
.toolbar .toolbar_grid .btn svg {
	vertical-align: middle;
}
.toolbar .toolbar_grid .btn:hover,
.toolbar .toolbar_grid .btn:active,
.toolbar .toolbar_grid .btn: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_nav {
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) {
	.sub_nav {
		padding: 20px 20px 0;
	}
}
.sub_nav ul {
	list-style: none;
	margin: 0;
	padding: 15px 20px;
	background-color: var(--bg-accent-2);
	border-radius: var(--border-radius);
}
.sub_nav ul li {
	display: inline-block;
	padding: 0;
}
.sub_nav ul li:not(:last-of-type) {
	margin: 0 14px 0 0;
}
.sub_nav ul li a {
	display: block;
	color: var(--text-color);
	text-decoration: none;
}
.sub_nav ul li a:hover,
.sub_nav ul li a:active,
.sub_nav ul li a:focus {
	color: var(--text-color);
	text-decoration: underline;
}

main {
	padding: 20px;
	hyphens: auto;
	font-size: 14px;
	font-size-adjust: from-font;
	background-color: var(--bg);
}
main img {
	max-width: 100%;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main p,
main table,
main form
main img,
main picture {
	margin: 0 0 10px;
}

main h1 {
	font-size: 18px;
}
main h2 {
	font-size: 16px;
}
main h3 {
	font-size: 15px;
}
main h4 {
	font-size: 14px;
}
main h5 {
	font-size: 13px;
}
main a {
	color: var(--link-color);
	text-decoration: underline;
	transition: all 500ms ease;
}
main a:hover,
main a:active,
main a:focus {
	color: var(--link-color-hover);
	text-decoration: none;
}
main pre,
main 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;
}
main pre *,
main code * {
	font-family: monospace;
	font-size: 13px;
}
main blockquote,
main blockquote * {
	border-left: 4px solid var(--border-color);
	margin-bottom: 5px;
	margin-top: 5px;
	padding-left: 16px;
}
@media (min-width: 1000px) {
	main h1 {
		font-size: 26px;
	}
	main h2 {
		font-size: 24px;
	}
	main h3 {
		font-size: 22px;
	}
	main h3 {
		font-size: 20px;
	}
	main h3 {
		font-size: 18px;
	}
}

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


form {}
form > div {
	margin-bottom: 15px;
}
form label {
	padding: 0 11px;
}
form input,
form 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);
}
form input[type='checkbox'] {
	width: auto;
}
form textarea {
	min-height: 300px;
}
form 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);
}
form input[type='submit']:hover,
form input[type='submit']:active,
form input[type='submit']:focus {
	color: var(--btn-text-color);
	background: var(--btn-bg-hover);
}


footer {
	padding: 0;
}


.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);
}
.pseudo_btn:hover,
.pseudo_btn:active,
.pseudo_btn:focus {
	color: var(--btn-text-color);
	background: var(--btn-bg-hover);
}


.menu_icon {
	line-height: 1;
}


.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;
}


.nav_actions {
	margin: 0 0 20px;
}
.nav_actions.nav_placement_start {}
.nav_actions.nav_placement_end {
	display: flex;
	justify-content: flex-end;
}
.nav_actions.nav_placement_space_between {
	display: flex;
	justify-content: space-between;
}
.nav_actions 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) 1px solid;
}
.nav_actions a:hover,
.nav_actions a:active,
.nav_actions a:focus {
	color: var(--btn-action-text-color-hover);
	background-color: var(--btn-action-bg-hover);
}
.nav_actions a img,
.nav_actions a svg {
	vertical-align: middle;
}
.nav_actions a:hover img,
.nav_actions a:active img,
.nav_actions a:focus img {
	filter: invert(1);
}


.table_view {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.table_view table,
.table_view table th,
.table_view table td {
	border: 0;
	border-collapse: collapse;
}
.table_view table {
	width: 100%;
}
.table_view table thead {}
.table_view table tbody tr {}
.table_view table tbody tr:not(:last-of-type) {
	border-bottom: 1px solid var(--border-color);
}
.table_view table thead tr th,
.table_view table tbody tr td {
	padding: 10px 20px;
}
.table_view table thead tr th:first-of-type,
.table_view table tbody tr td:first-of-type {
	padding-left: 0;
	width: calc( 100% - 90px);
}
.table_view table thead tr th:nth-of-type(3):last-of-type,
.table_view table tbody tr td:nth-of-type(3):last-of-type {
	padding-right: 0;
	width: 90px;
}
.table_view table 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);
}
.table_td_action a:not(:last-of-type) {
	margin-right: 5px;
}
.table_td_action a:hover,
.table_td_action a:active,
.table_td_action a:focus {
	color: var(--btn-action-text-color-hover);
	background-color: var(--btn-action-bg-hover);
}
.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 {
	display: none;
	padding: 0;
	background: transparent;
}
.popover_content {
	width: max-content;
}
.popover_content_row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.popover_content_col {
	min-width: 150px;
}
.popover_content button {
	padding: 2px;
	height: 28px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
}
.popover_content ul {
	display: block;
	margin: 0;
	padding: 0;
}
.popover_content ul li {
	display: block;
	width: 100%;
	border: 0;
}
.popover_content ul li small {
	display: block;
}
.popover_content ul li a {
	display: block;
	border-radius: 0;
	border: 0;
}


/*  < 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 >  */


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


.note_versions {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.note_versions nav {
	display: flex;
	flex-direction: row;
	gap: 15px;
	margin: 0 0 15px;
}
.note_versions .note_version {
	padding: 15px;
	background-color: var(--bg-accent);
	border-radius: var(--border-radius);
}
.note_versions .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 >  */
.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 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;
}



.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);
}
.mc_move dialog[open] {
	display: flex;
}
.mc_move dialog .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;
}
.mc_move dialog .mc_dialog_close:hover,
.mc_move dialog .mc_dialog_close:active,
.mc_move dialog .mc_dialog_close:focus {
	color: var(--list-item-btn-text-select);
	background-color: var(--list-item-btn-select);
}
.mc_move dialog img {
	width: 100%;
	height: auto;
}
.mc_move dialog::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 .mc_dialog_content {
	padding: 20px;
	overflow-y: auto;
}

#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;
}
#view_breadcrumb span,
#view_breadcrumb a {
	display: inline-block;
	margin: 0;
	padding: 0;
}
#view_breadcrumb a {
	color: inherit;
	text-decoration: none;
}
#view_breadcrumb a:hover,
#view_breadcrumb a:active,
#view_breadcrumb a:focus {
	text-decoration: underline;
}




/* 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 */
.custom__checkmark input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* Create a custom checkbox */
.custom__checkmark .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;
}
/* On mouse-over, add a grey background color */
.custom__checkmark:hover input ~ .checkmark {
	border-color: #fff;
}
/* When the checkbox is checked, add a blue background */
.custom__checkmark input:checked ~ .checkmark {
	background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.custom__checkmark .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the checkmark when checked */
.custom__checkmark input:checked ~ .checkmark:after {
	display: block;
}
/* Style the checkmark/indicator */
.custom__checkmark .checkmark:after {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


.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;
}


.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;
}
.list_current_dates::-webkit-scrollbar {
  display: none;
}
.list_current_dates li {
	display: block;
	width: 100%;
	padding: 7px 0;
	border-bottom: 1px solid #777;
}
@media (min-width: 800px) {
	.list_current_dates li {
		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 */
}
/* 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;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip_card:hover .card_inner {
	transform: rotateY(180deg);
}
/* Position the front and back side */
.flip_card .card_front, .flip_card .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) */
.flip_card .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 */
.flip_card .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);
}
.flip_card .card_back .card_top {
	display: flex;
	padding: 14px;
	align-items: center;
	height: 100%;
}
.flip_card .card_back .card_actions {
	display: flex;
	justify-content: space-between;
	padding: 0 14px 14px;
	width: 100%;
}



/* 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);
	}	
}