:root {
	/* Colors */
	--color: #000; /* Default text color */
	--background-color: #f0f0f0; /* Main background color */
	--accent-color: #f7cc02; /* Brand color */
	--border-color: #e0e0e0; /* Border color */

	/* Shadow Colors */
	--shadow-color: rgba(0, 0, 0, 0.1);
	--shadow-color-light: rgba(0, 0, 0, 0.05); /* Subtle light shadow */
	--shadow-color-medium: rgba(0, 0, 0, 0.2); /* Moderate shadow */
	--shadow-color-dark: rgba(0, 0, 0, 0.4); /* Darker shadow for emphasis */

	--secondary-color: #505050; /* Alternate section background */
	--secondary-background-color: #fff; /* Alternate section background */
	--secondary-accent-color: #f7cc02; /* Brand color */
	--secondary-border-color: darkgray; /* Border color */

	--tertiary-background-color: whitesmoke; /* Slightly darker dark background */
	--success: #27ae60;
	--danger: #e74c3c;
	--hover-background: gainsboro;
	--selected-background: darkgray;
	--scrollbar-track-background: rgba(0, 0, 0, 0.03);
	--scrollbar-thumb-background: rgba(0, 0, 0, 0.09);
	--scrollbar-track-hover: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Colors */
		--color: #f0f0f0; /* Light text color for dark mode */
		--background-color: #333; /* Dark background */
		--border-color: #555; /* Dark mode border color */

		/* Dark Mode Shadows */
		--shadow-color: rgba(255, 255, 255, 0.1);
		--shadow-color-light: rgba(
			255,
			255,
			255,
			0.05
		); /* Subtle light shadow in dark mode */
		--shadow-color-medium: rgba(
			255,
			255,
			255,
			0.2
		); /* Moderate shadow in dark mode */
		--shadow-color-dark: rgba(
			255,
			255,
			255,
			0.4
		); /* Darker shadow for emphasis in dark mode */

		--secondary-color: #fff; /* Alternate dark color background */
		--secondary-background-color: #444; /* Alternate dark background */

		--tertiary-background-color: #222; /* Slightly darker dark background */

		--hover-background: #222;
		--selected-background: #111;

		--scrollbar-track-background: rgba(255, 255, 255, 0.05);
		--scrollbar-thumb-background: rgba(255, 255, 255, 0.15);
		--scrollbar-track-hover: rgba(255, 255, 255, 0.1);
	}
}

* {
	padding: 0px;
	margin: 0px;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	height: 100%;
	font-family: Arial, sans-serif;
	background-color: var(--background-color);
	color: var(--color);
	fill: var(--color);
	font-size: 1rem;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	fill: inherit;
}

a:hover {
	color: var(--accent-color);
	fill: var(--accent-color);
}

nav {
	height: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: transparent;
	z-index: 1;
}

.sticky-nav {
	position: sticky;
	background-color: var(--background-color);
	box-shadow: 0 4px 4px var(--shadow-color-medium);
	height: auto;
	right: 0;
	top: 0;
}

main {
	min-height: calc(100vh - 70px);
}

i {
	display: inline-flex;
}

svg {
	height: inherit;
	width: inherit;
	fill: inherit;
	stroke: inherit;
}

section {
	padding: 80px 15px;
}

section.centered {
	max-width: 800px;
	height: 100%;
	margin: 0px auto;
}

.datatable-container {
	overflow: auto;
}
.datatable-container table {
	width: 100%;
	border-collapse: collapse;
}
.datatable-container tr {
	border-bottom: 1px solid var(--secondary-border-color);
}
.datatable-container tr.hover:hover {
	background-color: var(--hover-background);
}
.datatable-container td {
	padding: 10px;
}
.datatable-container .header td {
	position: sticky;
	top: 0;
	padding: 10px 0px;
	min-width: 150px;
}
.datatable-container .header td:not(:first-child) {
	padding-left: 10px;
}
.datatable-container .header .sort {
	position: absolute;
	bottom: 18px;
	right: 18px;
	float: right;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(100vh - 70px);
	text-align: center;
}

.logo-name {
	font-size: 26px;
	width: 200px;
}

/* seconday lighter yellow FDE87D */
.logo-name-colored {
	color: var(--accent-color);
	text-shadow: 1px 1px 2px var(--secondary-color);
	/* -webkit-text-stroke: 1px black; */
}

[menu-icon] {
	display: block;
	min-width: 30px;
	cursor: pointer;
	margin: 0px 15px;
}

[menu-icon] span {
	position: relative;
	display: block;
	height: 2px;
	width: 100%;
	margin-top: 6px;
	margin-bottom: 6px;
	transition: all 0.25s;
	background-color: var(--color);
}

[menu-icon]:hover span {
	background-color: var(--accent-color);
}

[menu-icon="active"] span:first-child {
	transform: rotate(45deg) translate(-1px, 6px);
}

[menu-icon="active"] span:nth-child(2) {
	display: none;
}

[menu-icon="active"] span:last-child {
	transform: rotate(-45deg) translate(-1px, -6px);
}

/* Left arrow */
[menu-icon="active"].arrow-left span:first-child {
	width: 15px;
}

[menu-icon="active"].arrow-left span:first-child {
	transform: rotate(-45deg) translate(-5px, 1px);
	width: 12px;
}

[menu-icon="active"].arrow-left span:nth-child(2) {
	display: block;
}

[menu-icon="active"].arrow-left span:last-child {
	transform: rotate(45deg) translate(-5px, -1px);
	width: 12px;
}

/* right arrow */
[menu-icon="active"].arrow-right span:first-child {
	width: 15px;
	margin-left: auto;
}

[menu-icon="active"].arrow-right span:first-child {
	transform: rotate(45deg) translate(14px, -8px);
	width: 12px;
	margin-left: unset;
	margin-right: auto;
	left: 5px;
}

[menu-icon="active"].arrow-right span:nth-child(2) {
	display: block;
}

[menu-icon="active"].arrow-right span:last-child {
	transform: rotate(-45deg) translate(14px, 8px);
	width: 12px;
	margin-right: auto;
	left: 5px;
}

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
	border: 2px solid var(--accent-color);
	background-color: var(--background-color);
	color: var(--accent-color);
	fill: var(--accent-color);
	border-radius: 8px;
}

.round {
	padding: 0;
	border-radius: 50%;
}

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

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

button.green {
	border-color: var(--success);
	color: var(--success);
	fill: var(--success);
}

button.green:hover {
	background-color: var(--success);
}

button:hover {
	background-color: var(--accent-color);
	color: var(--color);
	fill: var(--color);
}

.second-container {
	display: none;
}

@media (max-width: 768px) {
	.button-question {
		width: 100%;
	}
}

.button-round {
	position: fixed;
	bottom: 18px;
	right: 18px;
	border: 2px solid var(--accent-color);
	background-color: var(--background-color);
	color: var(--accent-color);
	border-radius: 50%;
	padding: 15px;
	width: 50px;
	height: 50px;
	z-index: 1;
}

.button-round:hover {
	background-color: var(--accent-color);
	color: var(--color);
	fill: var(--accent-color);
}

.button-round i {
	height: 20px;
	fill: var(--accent-color);
}

.button-round:hover i {
	fill: var(--color);
}

sidenav {
	position: fixed;
	top: 0px;
	overflow: hidden;
	background-color: var(--tertiary-background-color);
	height: 100vh;
	width: 0px;
	z-index: 10;
}

sidenav .nav {
	background-color: var(--tertiary-background-color);
}

sidenav .close {
	float: right;
	padding: 10px;
}

sidenav ul li {
	display: flex;
	justify-content: space-between;
	width: 100%;
	line-height: 40px;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
}

sidenav ul li:hover {
	background: var(--secondary-background-color);
}

[sidenav="open"] sidenav {
	width: 270px;
}

.card {
	/* border: 1px solid #ddd; */
	border-radius: 10px;
	box-shadow: 0 4px 8px var(--shadow-color);
	padding: 20px;
	background-color: var(--tertiary-background-color);
	/* transition: transform 0.3s, box-shadow 0.3s; */
}

.card:hover {
	/* transform: translateY(-5px); */
	box-shadow: 0 6px 12px var(--shadow-color);
}

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

.card-field {
	flex-grow: 1;
	width: 290px;
	margin-bottom: 10px;
}

.card-field.full-width {
	width: 100%;
}

.card-label {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--secondary-color);
}

.card-value {
	font-size: 1.1rem;
	color: var(--secondary-color);
}

@media (max-width: 300px) {
	.card-field {
		width: 100%;
	}
}

@keyframes placeholderShimmer {
	0% {
		background-position: -468px 0;
	}

	100% {
		background-position: 468px 0;
	}
}

.loading .load-value:before {
	content: "\00a0";
	/* Non-breaking space character to ensure the span has height before content loads */
}

.avatar {
	--avatar-size: 40px;
	width: var(--avatar-size);
	height: var(--avatar-size);
	background-color: var(--accent-color);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary-background-color);
	position: relative;
}

.avatar.round,
.avatar.round > .avatar-image {
	border-radius: 50%;
}

.avatar-image * {
	width: 100%;
	height: 100%;
	position: absolute;
}

.avatar > .avatar-image {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	overflow: hidden;
}

.avatar > .avatar-image > img:not([src]) {
	display: none;
}

.avatar > .avatar-name {
	z-index: 1;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
	height: 20px;
	width: 20px;
	letter-spacing: 1em;
}

.avatar-status {
	position: absolute;
	right: 0px;
	bottom: 0px;
	display: flex;
	height: 12px;
	width: 12px;
	border: 2px solid var(--background-color);
	border-radius: 50%;
	z-index: 3;
	background-color: var(--danger);
	transform: translate(12%, 0%);
}

.avatar-status.on {
	background-color: var(--success);
}

.avatar-status.off {
	background-color: var(--danger);
}

footer {
	background-color: var(--accent-color);
	color: #000;
	fill: #000;
}

footer a:hover {
	color: #444;
	fill: #444;
}

footer p {
	font-size: 18px;
	font-weight: 400;
	margin-top: 10px;
	line-height: 1.6;
}

[unique="true"],
[validation="true"] {
	outline: 1px solid var(--success) !important;
}

[unique="false"],
[validation="false"] {
	outline: 1px solid var(--danger) !important;
}

.main-view {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	overflow: auto;
}

.flex-form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 600px;
	margin: auto;
}

fieldset {
	border: none;
}

.flex-form floating-label {
	flex-grow: 1;
}

.input-300 {
	width: 290px;
	flex-grow: 1;
}

.input-600 {
	width: 100%;
}

.input-icon {
	width: calc(100% - 18px) !important;
}

.floating-icon {
	display: flex;
	position: absolute;
	top: 9px;
	right: 8px;
	font-size: 20px;
}

textarea {
	resize: vertical;
}

@media (max-width: 628px) {
	.input-300 {
		width: 100%;
	}
}

.selected {
	background-color: var(--selected-background);
}

/* .menu-icon {
        position: fixed;
        left: 15px;
        top: 25px;
        z-index: 11;
    } */

[session] {
	display: none;
}

[session="on"],
[session="idle"] {
	display: block;
}

#admin {
	display: none;
}

#admin[session="on"][admin="true"],
#admin[session="idle"][admin="true"] {
	display: block;
}

@media (max-width: 768px) {
	sidenav#menuL {
		display: block;
	}
}

[menu-icon][session="on"],
[menu-icon][session="idle"] {
	display: block;
}

.show[selected] {
	display: block !important;
}

[hidden],
[template] {
	display: none !important;
}

/* .hover:hover {
	background: var(--hover-background);
} */

:-webkit-autofill {
	box-shadow: 0 0 0px 1000px transparent inset;
	background-color: transparent;
	color: var(--color);
	transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color: var(--color);
}

/* Firefox */
:autofill {
	background-color: transparent;
	color: var(--color);
	-webkit-text-fill-color: var(--color);
	border: 1px solid transparent;
}

/* WebKit browsers (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-background);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent-color);
	opacity: 0.08;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track-background);
}

::-webkit-scrollbar-track:hover {
	background: var(--scrollbar-track-hover);
}

/* Firefox browsers */
* {
	scrollbar-width: thin;
	/* Options: auto, thin, none */
	scrollbar-color: var(--scrollbar-thumb-background)
		var(--scrollbar-track-background);
	/* Thumb color, Track color */
}

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

	100% {
		transform: rotate(360deg);
	}
}

/* Apply the animation to the icon with a class */
[src$="assets/svg/spinner.svg"] {
	animation: spin 2s linear infinite;
	/* Adjust the duration and other properties as needed */
}

.alt-section:nth-of-type(even) {
	background-color: var(--background-color);
}

.alt-section:nth-of-type(odd) {
	background-color: var(--secondary-background-color);
}

.floating-label_outline {
	border-color: inherit;
}