:root {
	--color-primary-50: #F1FCFA;
	--color-primary-100: #CEF9F1;
	--color-primary-200: #9EF1E4;
	--color-primary-300: #65E3D2;
	--color-primary-400: #36C8BD;
	--color-primary-500: #1DAFA4;
	--color-primary-600: #146B85;
	--color-primary-700: #14716C;
	--color-primary-800: #155A57;
	--color-primary-900: #003734;
	--color-primary-950: #041E1E;
	--color-accent-50: #FCFEE9;
	--color-accent-100: #F9FFC2;
	--color-accent-200: #F4FF75;
	--color-accent-300: #F8FF45;
	--color-accent-400: #FCFC13;
	--color-accent-500: #ECE206;
	--color-accent-600: #CDB302;
	--color-accent-700: #AA28106;
	--color-accent-800: #86550D;
	--color-accent-900: #725211;
	--color-accent-950: #432C05;
	--color-neutral-50: #F3F6F8;
	--color-neutral-100: #E1EBEC;
	--color-neutral-200: #C7D3DA;
	--color-neutral-300: #A0B3C0;
	--color-neutral-400: #728C9E;
	--color-neutral-500: #577183;
	--color-neutral-600: #146B85;
	--color-neutral-700: #14716C;
	--color-neutral-800: #155A57;
	--color-neutral-900: #003734;
	--color-neutral-950: #F1FCFA;
	--color-primary: var(--color-primary-500);
	--color-primary-focus: var(--color-primary-600);

	--color-primary-content: #FFFFFF;
	--color-secondary: var(--color-primary-400);
	--color-secondary-focus: var(--color-primary-500);
	--color-secondary-content: var(--color-primary-900);
	--color-light-secondary-content: var(--color-primary-500);
	--color-accent: var(--color-accent-500);
	--color-accent-focus: var(--color-accent-600);
	--color-accent-text: var(--color-accent-600);
	--color-accent-content: var(--color-neutral-900);
	--color-neutral: var(--color-neutral-100);
	--color-neutral-focus: var(--color-neutral-200);
	--color-neutral-content: var(--color-neutral-900);
	--color-success: var(--color-accent-400);
	--color-success-focus: var(--color-accent-500);
	--color-success-content: var(--color-accent-900);
	--color-warning: var(--color-accent-100);
	--color-warning-focus: var(--color-accent-200);
	--color-warning-content: var(--color-neutral-900);
	--color-error: pink;
	--color-error-focus: pink;
	--color-error-content: red;
	--color-info: lightblue;
	--color-info-focus: skyblue;
	--color-info-content: hsl(108, 63%, 15%);
	--color-base-100: var(--color-neutral-50);
	--color-base-200: var(--color-neutral-50);
	--color-base-300: var(--color-neutral-900);
	--color-base-content: var(--color-neutral-900);
	--color-button: var(--color-primary-500);
	--color-background: var(--color-primary-50);
	--color-background-focus: var(--color-neutral-900);
	--color-background-content: var(--color-neutral-50);
	
	--border-color-primary-20: rgb(from var(--color-primary-800) r g b/20%);
	--border-color-primary-70: rgb(from var(--color-primary-950) r g b/70%);
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

html {
	overflow-x: hidden;
	font-family: Poppins, sans-serif;
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
	color: var(--color-primary-950);
}

body {
	color: var(--color-base-content);
	background-color: var(--color-base-100);
	min-width: 100vw;
	min-height: 100vh;
	font-size: 1rem;
	line-height: 1.5;
}

main {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	min-width: 320px;
	max-width: 768px;
	padding: 2rem;
}

footer {
	align-self: flex-end;
}

.footer-text {
	text-align: center;
	align-self: center;
}

.footer-text, .gray-text {
	font-size: .7rem;
	width: 100%;
	color: var(--color-gray-400);
	max-width: fit-content;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: 0.025em;
}

h1 {
	font-weight: 600;
	font-size: 1.75rem;
	text-align: start;
	color: var(--color-primary-900);
}

h2 {
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 2.50rem;
	text-align: center;
}

h3 {
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

h4 {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.75rem;
}

p {
	letter-spacing: 0.005em;
}

a {
	text-decoration: none;
	font-weight: 400;
	font-size: 1rem;
}

p > a {
	color: var(--color-blue-700);
}


a.link {
	color: var(--color-blue-700);
}

a.primary-link {
	color: var(--color-blue-700);
	text-decoration: underline;
	font-size: 1.3rem;
	align-self: center;
}

.bg-base-100 {
	background-color: var(--color-base-100);
}

.bg-base-200 {
	background-color: var(--color-base-200);
}

.bg-base-300 {
	background-color: var(--color-base-300);
}

.bg-black {
	--tw-bg-opacity: 1;
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.text-base-content {
	color: var(--color-base-content);
}


.text-primary {
	color: var(--color-primary-content);
}

.primary {
	color: var(--color-primary-content);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	outline-color: var(--color-primary);
}

.primary:hover, .primary:focus {
	background-color: var(--color-primary-focus);
	border-color: var(--color-primary-focus);
	outline-color: var(--color-primary-focus);
}

.text-secondary {
	color: var(--color-secondary-content);
}

.text-secondary-light {
	color: var(--color-light-secondary-content);
}

.secondary {
	color: var(--color-secondary-content);
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	outline-color: var(--color-secondary);
}

.secondary:hover, .secondary:focus {
	background-color: var(--color-secondary-focus);
	border-color: var(--color-secondary-focus);
	outline-color: var(--color-secondary-focus);
}

.text-accent {
	color: var(--color-primary-400);
}


.accent {
	color: var(--color-accent-content);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	outline-color: var(--color-accent);
}

.accent:hover, .accent:focus {
	background-color: var(--color-accent-focus);
	border-color: var(--color-accent-focus);
	outline-color: var(--color-accent-focus);
}

.text-neutral {
	color: var(--color-neutral-content);
}

.neutral {
	color: var(--color-neutral-content);
	background-color: var(--color-neutral);
	border-color: var(--color-neutral);
	outline-color: var(--color-neutral);
}

.neutral:hover, .neutral:focus {
	background-color: var(--color-neutral-focus);
	border-color: var(--color-neutral-focus);
	outline-color: var(--color-neutral-focus);
}

.text-warning {
	color: var(--color-warning-content);
}

.warning {
	color: var(--color-warning-content);
	background-color: var(--color-warning);
	border-color: var(--color-warning);
	outline-color: var(--color-warning);
}

.warning:hover, .warning:focus {
	border-color: var(--color-warning-focus);
	outline-color: var(--color-warning-focus);
}


.text-info {
	color: var(--color-info-content);
}

.info {
	color: var(--color-info-content);
	background-color: var(--color-info);
	border-color: var(--color-info);
	outline-color: var(--color-info);
}

.info:hover, .info:focus {
	background-color: var(--color-info-focus);
	border-color: var(--color-info-focus);
	outline-color: var(--color-info-focus);
}

.text-error {
	color: var(--color-error-content);
}

.error {
	color: var(--color-error-content);
	background-color: var(--color-error);
	border-color: var(--color-error);
	outline-color: var(--color-error);
}

.error:hover, .error:focus {
	background-color: var(--color-error-focus);
	border-color: var(--color-error-focus);
	outline-color: var(--color-error-focus);
}

.text-success {
	color: var(--color-success-content);
}

.success {
	color: var(--color-success-content);
	background-color: var(--color-success);
	border-color: var(--color-success);
	outline-color: var(--color-success);
}

.success:hover, .success:focus {
	background-color: var(--color-error-focus);
	border-color: var(--color-error-focus);
	outline-color: var(--color-error-focus);
}

h1:focus {
	outline: none;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50190;
}

.validation-message {
	color: #e50190;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: "An error has occurred."
}

.content-grid,
.full-width {
	--_padding-inline: var(--content-grid-padding-inline, 1rem);
	--_content-max-width: var(--content-grid-content-max-width, 50rem);
	--_breakout-max-width: var(--content-grid-breakout-max-width, 1200px);
	--_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
	--_content-size: calc(100% - (var(--_padding-inline) * 2));
	display: grid;
	grid-template-columns: [full-width-start] minmax(var(--_padding-inline), 1fr) [content-start] min(var(--_content-size), var(--_content-max-width)) [content-end] minmax(var(--_padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
	grid-column: content;
}

.content-grid > .breakout {
	grid-column: breakout;
}

.content-grid > .full-width {
	grid-column: full-width;
	display: grid;
	grid-template-columns: inherit;
}

/* QUICK GRID */

.quickgrid {
	width: 100%;
}

.col-justify-end {
	text-align: end;
}

.col-justify-center {
	text-align: center;
}

.col-justify-start {
	text-align: start;
}

.readonly-input {
	width: 100%;
}

.quickgrid td.sticky {
	left: 0;
	z-index: 100;
}

.quickgrid th.sticky {
	left: 0;
	z-index: 900;
}

.quickgrid td {
	white-space: nowrap;
}

.quickgrid, .quickgrid th, .quickgrid td {
	border-collapse: collapse;
}

.quickgrid th, .quickgrid td {
	width: 20%;
	/*text-align: start;*/
	padding: 5px;
}

.divided-table {
	border: 1px solid var(--border-color-primary-20);
	border-radius: 1rem;
	border-spacing: 1rem .5rem;
	border-collapse: separate;
	width: 100%;
	overflow: auto;
}

.divided-table > table {
	width: 100%;
	border-collapse: collapse;
}

.divided-table td:first-child {
	text-align: left;
}

.divided-table td.align-right {
	text-align: right;
	font-weight: bold;
}

td.align-right > a {
	display: contents;
}

.divided-table > table > tbody > tr:not(:last-child) {
	border-bottom: 1px solid var(--border-color-primary-20);
}

.divided-table > table > tbody > tr > td {
	padding: 0.5rem;
}

.divided-table > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
}

.divided-table > div:not(:last-child) {
	border-bottom: 1px solid var(--border-color-primary-20);
}

.divided-table > div > div:first-child {
	text-align: left;
	flex: 1;
}

.divided-table > div > div:last-child {
	text-align: right;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.divided-table > div > div:last-child > a {
	display: contents;
}


/* TEMPLATED FIELDS */
.centered-container {
	gap: 1rem;
	display: flex;
	width: fit-content;
	align-self: center;
	flex-direction: column;
	align-items: center;
}

.field-container {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.field-container.form-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
}

.field-container > [data-field-role="label-container"],
.field-label {
	text-align: start;
	font-size: 1.25rem;
	font-weight: 500;
}

.field-container > [data-field-role="input-container"] {
	display: flex;
	gap: 0.5rem;
	box-sizing: border-box;
	flex-direction: row;
	border-radius: 8px;
}

.field-container.input-as-content > [data-field-role="input-container"] {
	display: contents;
}

.field-container > [data-field-role="input-container"]:has(> input[type="checkbox"]) {
	flex-grow: 1;
}

.field-container > [data-field-role="input-container"] span {
	color: var(--color-secondary-content);
	font-size: 1.5rem;
}

.field-container > [data-field-role="input-container"] > input, select {
	width: 100%;
	border-radius: 0.375rem;
	padding: 0.5rem;
	border-width: 2px;
}

.field-container > [data-field-role="input-container"] > input:focus {
	outline: none;
	border-color: var(--color-secondary-content);
}

.field-container[data-is-error] > [data-field-role="input-container"] > input {
	border-color: var(--color-error-focus);
	outline: none;
	color: var(--color-error-content);
}

.field-container > [data-field-role="validation-container"] {
	color: var(--color-error-content);
	font-size: small;
}

.field-container > [data-field-role="validation-container"] ul {
	color: var(--color-error-content);
	list-style: disc;
	list-style-position: inside;
}

.field-container input:user-invalid,
.field-container select:user-invalid {
	border-color: var(--color-error-focus);
}

.field-container input:user-valid,
.field-container select:user-valid {
	border-color: var(--color-success-focus);
}

form:invalid button[type="submit"] {
	/*pointer-events: none;*/
	background-color: var(--color-neutral-300);
	opacity: 0.6;
}

.field-container > [data-field-role="description-container"] > span {
	color: var(--color-base-content);
	font-size: small;
}

.field-container > [data-field-role="description-container"] {
	display: contents;
}

button[type="submit"].error-button-fill {
	background-color: var(--color-red-600);
}

/* BIG CHECK BOX */
.field-container.big-check-box > [data-field-role="input-container"] > input[type='checkbox'] {
	-webkit-appearance: none;
	min-width: 3rem;
	min-height: 3rem;
	background: white;
	border-radius: 5px;
	border: 2px solid gray;
}

.field-container > [data-field-role="input-container"] > input[type='checkbox'] {
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 5px;
	border: 1px solid gray;
	appearance: none;
	background-color: var(--color-primary-content);
	display: grid;
	place-content: center;
	position: relative;
	cursor: pointer;
}

.field-container > [data-field-role="input-container"] > input[type='checkbox']::before {
	content: "";
	width: 1.5em;
	height: 1.5em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--color-primary-content);
	transform-origin: center;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	background-color: transparent;
}

.field-container > [data-field-role="input-container"] > input[type='checkbox']:checked::before {
	transform: scale(1);
}

.field-container > [data-field-role="input-container"] > input[type='checkbox']:checked {
	background-color: var(--color-primary-400);
}

.field-container > [data-field-role="input-container"] > input[type='checkbox'] ~ p {
	width: 100%;
	text-align: start;
	align-self: center;
}

.form-centered-container {
	display: flex;
	justify-content: center;
}

.final-value-input {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-neutral-content);
	background-color: var(--color-neutral);
}

@keyframes button-click {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes button-animation {
	100% {
		transform: rotate(-5deg) scale(1.1);
	}
}

/* LOADING */

.loading {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 99999;
}

.loading-container > .loading > .animate-spin {
	display: none;
}

.loading-container > .loading {
	width: 7rem;
	align-self: center;
}

.loading:before {
	content: "";
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto auto 0;
	background: var(--color-accent-400);
	animation: l9-0 .5s cubic-bezier(0, 800, 1, 800) infinite;
}

.loading:after {
	content: "";
	width: 100%;
	aspect-ratio: 1/cos(30deg);
	margin: 0 auto auto;
	clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
	background: var(--color-primary-400);
	animation: l9-1 .5s linear infinite;
}

@keyframes l9-0 {
	0%, 2% {
		translate: 0 0%
	}
	98%, to {
		translate: 0 -.2%
	}
}

@keyframes l9-1 {
	0%, 5% {
		rotate: 0deg
	}
	95%, to {
		rotate: -60deg
	}
}

.contrast-container + .loading-container {
	border-radius: 1.5rem;
}

/* BIG FORM */

.contrast-container, .warning-container {
	padding: 1rem;
	border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(1px 6px 4px rgb(0, 0, 0, .4));
}

.contrast-container {
	background-color: var(--color-neutral-50);
	color: var(--color-neutral-content);
}

.warning-container {
	background-color: var(--color-accent-50);
	color: var(--color-neutral-content);
}

.information-card {
	padding: 1rem;
	border-radius: 1rem;
	gap: .5rem;
}

.one-line-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: center;
	padding-block: 0.5rem;
	padding-inline: 1rem;
}

.one-line-horizontal-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 1rem;
	justify-content: space-between;
}

.one-line-horizontal-container > div {
	width: 100%;
}

/* BUTTONS */
.btn, button {
	display: flex;
	font-weight: 600;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: .8rem;
	gap: 0.8rem;
	background: var(--color-button);
	color: var(--color-base-100);
	border-radius: 5rem;
	border: none;
	transition: transform 0.3s ease-in-out;
	position: relative;
	text-align: center;
	width: 100%;
}


button:has(img),
.btn:has(img) {
	border: none;
}


button[type="submit"][disabled="disabled"] {
	opacity: 0.5;
	animation: none;
}

button[type="submit"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	gap: 0.1rem;
	width: 100%;
	background: var(--color-button);
	color: var(--color-base-100);
	border-radius: 5rem;
	border: none;
	transition: transform 0.3s ease-in-out;
	position: relative;
}

/* Add arrow SVG after text */
button[type="submit"]::after, .accent-button::after, .btn::after {
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background: url("img/svg/arrow-circle-fill.svg") no-repeat center;
}

.accent-button::after, .secondary-button::after {
	filter: brightness(0);
}


button[type="submit"]:active {
	animation: button-click 0.3s ease-in-out;
}

form > .secondary-button, button.secondary-button, a.secondary-button {
	color: var(--color-secondary-content);
	background-color: transparent;
	border: solid 2px var(--color-secondary-focus);
}

form > .secondary-button::after, button.secondary-button::after {
	content: none;
}

.accent-button {
	background-color: var(--color-accent);
	color: var(--color-accent-content);
}

form:invalid button[type="submit"]:hover {
	animation: none;
}

.icon-button {
	width: 3rem;
	height: 3rem;
	font-size: 3rem;
	border-radius: 5rem;
	padding: .5rem;
}

.icon-button:after {
	content: none;
}

form > button.secondary-button.delete-button::after {
	display: block;
	background: url("img/svg/trashcan.svg") no-repeat center;
	content: "";
	width: 1.5rem;
	height: 1.5rem;
}

.secondary-link{
	color: var(--color-primary-500);
	text-decoration: underline;
	align-self: center;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
}
/*LAYOUT*/
.default-layout {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.default-layout main {
	flex: 1;
	display: flex;
	flex-direction: column;
}



.default-layout > main > div > form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.default-layout > main > div:first-of-type:not([class])[style*="position: relative"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

/* SIDEBAR & NAVIGATION  */

.navbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-neutral-900);
	padding: 2rem;
	height: 5rem;
	width: 100%;
	z-index: 10000;
}

.navbar-menu {
	margin-top: 5rem;
	position: fixed;
	right: 0;
	width: 100%;
	height: 100vh;
	box-shadow: 1rem 0 2.5rem var(--border-color-primary-70);
	background: var(--color-background);
	transform: translateX(100vw);
	transition: transform .3s ease;
	z-index: 1000;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#navbar-menu-toggler-checkbox:checked ~ .navbar-menu {
	transform: translateX(0);
	pointer-events: auto;
}

#navbar-menu-toggler-checkbox:not(:checked) ~ .navbar-menu {
	display: none;
}


#navbar-menu-toggler-checkbox:checked ~ .navbar {
	position: sticky;
	top: 0;
}

.nav-scrollable {
	display: block;
	overflow-y: auto;
}

.nav-item {
	width: 90%;
	border-bottom: 1px solid var(--color-neutral-200);
}

.nav-item a {
	display: flex;
	align-items: center;
	height: 2.5rem;
	color: var(--color-neutral-900);
	text-decoration: none;
	justify-content: center;
	width: 100%;
}

.nav-item a:hover {
	background-color: var(--color-neutral-100);
}

.nav-text {
	display: flex;
	flex-direction: column;
	margin-left: .2rem;
	flex: 1;
}

.nav-title {
	font-size: 1rem;
}

.nav-subtitle {
	font-size: .8rem;
	color: var(--color-neutral-600);
}

.nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: var(--color-primary-500);
	color: var(--color-neutral-100);
	font-size: .8rem;
	font-weight: 600;
	margin-right: .5rem;
}

.nav-arrow {
	background: url("img/svg/arrow-right.svg") no-repeat center;
	padding-left: 2rem;
	height: inherit;
}

.captcha {
	max-height: 5rem;
	max-width: 15rem;
	width: 90%;
	align-self: center;
	border-radius: 1.5rem;
	border-color: var(--color-neutral-content);
	aspect-ratio: auto;
}

.centered-text-input {
	text-align: center;
	letter-spacing: .5rem;
}

/*Icons*/

.illustration {
	max-height: 20rem;
}

.logo img {
	content: url("img/logo/light/inala.svg");
}

.nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	margin-right: .3rem;
	color: var(--color-primary-500);
}

.nav-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}


/*Resend*/
.verification-container {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	margin-top: 1rem;
	align-items: center;
}

.verification-container > button {
	width: fit-content;
	height: 3rem;

}

.resend-button {
	font-size: small;
	min-width: 12rem;
	padding: .7rem;
}

.resend-button::after {
	content: "";
	display: none;
}

.resend-button:disabled {
	background-color: var(--color-neutral-200);
	color: var(--color-neutral-400);
	border-color: transparent;
}

.disabled, button.disabled {
	background-color: var(--color-neutral-200);
	border-color: transparent;
	animation: none;
	transform: none;
	pointer-events: none;
}
/*Signature*/

.signature-container {
	border: 1px dotted #d9d9d9;
	background: var(--color-primary-content);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

div.signature-container > canvas.signature {
	border: none;
	width: 100%;
}

.clear-signature-button {
	border-radius: 0 0 5px 5px;
	background: var(--color-neutral-200);
	color: var(--color-secondary-content);
	border: none;
	padding: 10px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.clear-signature-button::after {
	content: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.6395 1.05182C13.9097 -0.349305 15.9692 -0.349303 17.2394 1.05182L23.5473 8.00978C24.8176 9.4109 24.8176 11.6826 23.5473 13.0837L14.6026 22.9501C13.9927 23.623 13.1653 24.001 12.3027 24.001H7.81838C6.95573 24.001 6.12842 23.623 5.51844 22.9501L1.45267 18.4654C0.182442 17.0643 0.182445 14.7926 1.45267 13.3915L12.6395 1.05182ZM13.7133 21.3942L5.10538 11.8993L2.60264 14.66C1.96753 15.3605 1.96753 16.4963 2.60264 17.1969L6.66841 21.6817C6.9734 22.0181 7.38706 22.2071 7.81838 22.2071H12.3027C12.734 22.2071 13.1477 22.0181 13.4527 21.6817L13.7133 21.3942Z" fill="%23343B45"/></svg>');
}


/*Status*/

.status > p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.status {
	display: flex;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
}

.status-valid {
	color: var(--color-primary-500);
}

.status-valid::before {
	content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 10.001C20.5 15.5239 16.0228 20.001 10.5 20.001C4.97715 20.001 0.5 15.5239 0.5 10.001C0.5 4.47816 4.97715 0.00100708 10.5 0.00100708C16.0228 0.00100708 20.5 4.47816 20.5 10.001ZM15.5379 6.21309C15.1718 5.84698 14.5782 5.84698 14.2121 6.21309C14.2032 6.22194 14.1949 6.2313 14.1872 6.24114L9.84674 11.7719L7.22985 9.15504C6.86373 8.78892 6.27014 8.78892 5.90402 9.15504C5.5379 9.52115 5.5379 10.1147 5.90402 10.4809L9.21208 13.7889C9.5782 14.155 10.1718 14.155 10.5379 13.7889C10.5461 13.7808 10.5538 13.7722 10.561 13.7632L15.5512 7.52535C15.904 7.15828 15.8995 6.57472 15.5379 6.21309Z" fill="%2336CBBD"/></svg>');
}

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

.status-error::before {
	content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 10.001C20.5 15.5239 16.0228 20.001 10.5 20.001C4.97715 20.001 0.5 15.5239 0.5 10.001C0.5 4.47816 4.97715 0.00100708 10.5 0.00100708C16.0228 0.00100708 20.5 4.47816 20.5 10.001ZM7.19194 5.80907C6.94786 5.56499 6.55214 5.56499 6.30806 5.80907C6.06398 6.05314 6.06398 6.44887 6.30806 6.69295L9.61612 10.001L6.30806 13.3091C6.06398 13.5531 6.06398 13.9489 6.30806 14.1929C6.55214 14.437 6.94786 14.437 7.19194 14.1929L10.5 10.8849L13.8081 14.1929C14.0521 14.437 14.4479 14.437 14.6919 14.1929C14.936 13.9489 14.936 13.5531 14.6919 13.3091L11.3839 10.001L14.6919 6.69295C14.936 6.44887 14.936 6.05314 14.6919 5.80907C14.4479 5.56499 14.0521 5.56499 13.8081 5.80907L10.5 9.11712L7.19194 5.80907Z" fill="%23D23C30"/></svg>');

}

.status-pending {
	color: var(--color-yellow-600);
}

.status-pending::before {
	content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 10.001C20.5 15.5238 16.0228 20.001 10.5 20.001C4.97715 20.001 0.5 15.5238 0.5 10.001C0.5 4.47813 4.97715 0.000976562 10.5 0.000976562C16.0228 0.000976562 20.5 4.47813 20.5 10.001ZM10.5 5.00098C9.83074 5.00098 9.30779 5.57883 9.37438 6.24477L9.81281 10.6291C9.84811 10.9821 10.1452 11.251 10.5 11.251C10.8548 11.251 11.1519 10.9821 11.1872 10.6291L11.6256 6.24477C11.6922 5.57883 11.1693 5.00098 10.5 5.00098ZM10.5019 12.501C9.81157 12.501 9.25193 13.0606 9.25193 13.751C9.25193 14.4413 9.81157 15.001 10.5019 15.001C11.1923 15.001 11.7519 14.4413 11.7519 13.751C11.7519 13.0606 11.1923 12.501 10.5019 12.501Z" fill="%23A28106"/></svg>');
}

.status-unknown {
	color: var(--color-gray-500);
}

.status-unknown::before {
	content: "ℹ";
}

@media (min-width: 768px) {
	.navbar-menu {
		width: 20rem;
		padding: 0 1rem;
	}
}

/*CARD*/
.domiciliation-card,
.late-payment-card,
.payment-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: .5rem;
	padding: .9rem;
	gap: 0.2rem;
}

.domiciliation-card {
	border: solid 1px var(--color-yellow-600);
	color: var(--color-yellow-900);
	background-color: var(--color-yellow-50);
}

.late-payment-card {
	color: var(--color-red-900);
	border: 1px solid var(--color-red-600);
	background-color: var(--color-red-50);
}

.domiciliation-card-title,
.late-payment-card-title {
	display: flex;
	justify-content: space-between;
}

.domiciliation-card-content p,
.late-payment-card-content p {
	font-weight: bold;
	font-size: large;
}

.late-payment-card-content {
	align-self: end;
}

.domiciliation-card-title > p:nth-child(2),
.late-payment-card-title > p:nth-child(2) {
	text-align: right;
	text-decoration: underline;
}

.late-payment-card-content p {
	display: flex;
	justify-content: flex-end;
}

.domiciliation-card-content,
.payment-card-content,
.payment-card-footer {
	display: flex;
	justify-content: space-between;
}

.late-payment-card-title > p:nth-child(1), .domiciliation-card-title > p:nth-child(1) {
	display: flex;
	gap: 0.3rem;
}

.payment-card-content {
	font-weight: bold;
	font-size: medium;
}

.card {
	border-radius: .5rem;
}

.card > * {
	padding: .2rem;
}

.card-body {
	height: 4rem;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-size: medium;
	background-color: var(--color-neutral-200);
	border-radius: .5rem .5rem 0 0;
	font-weight: bold;
}

.card-header > p:nth-child(2)::before {
	content: url("img/svg/clock.svg");
	filter: brightness(0);
}

.card-header > p:nth-child(2) {
	display: flex;
	gap: .3rem;
}

.payment-card-date,
.payment-card-footer {
	font-size: small;
}

.late-card > .card-header > p:nth-child(2)::before {
	content: url("img/svg/warning.svg");
	filter: brightness(5);
}

.late-card {
	background-color: var(--color-red-100);
}

.late-card > .card-header {
	background-color: var(--color-red-500);
	color: var(--color-primary-content);
}

.wand-card {
	color: var(--color-gray-300);
	gap: .5rem;
	display: flex;
	font-weight: bold;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-top: 1rem;
}

.payment-header{
	background-color: var(--color-primary-700);
	color: var(--color-primary-content);
	font-size: 1.5rem;
	border-radius: .5rem .5rem 0 0;
}

.detail-card-header > div:first-child {
	margin-bottom: 1rem;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.contrast-card {
	background-color: var(--color-primary-50);
}

.a-link {
	color: var(--color-blue-700);
	text-decoration: underline;
	font-size: 1.3rem;
}

.input-disabled {
	pointer-events: none;
}

.input-disabled > div > input, select {
	background-color: var(--color-gray-50);
}

.account-card-arrow {
	height: 2rem;
	width: 2rem;
	background: url("img/svg/arrow-right.svg") no-repeat center;
	padding-left: 1rem;
}


.limits {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	text-align: center;
	color: var(--color-primary-800);
}

.limits span {
	display: flex;
	justify-content: center;
	padding: .25rem 1rem;
	max-width: 6rem;
	min-width: 6rem;
	border: .1rem solid var(--color-primary-200);
	border-radius: 2rem;
}

.limits > button {
	font-weight: 500;
	width: auto;
	display: flex;
	flex-direction: column;
	color: var(--color-primary-800);
	gap: 0;
}

.detail-card > div {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
}

.detail-card > div > div:first-child {
	font-weight: 600;
}

.detail-card > div > div:last-child {
	font-weight: 400;
	text-align: right;
}

h2.up-arrow::before {
	content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 2.50098C14 2.22483 13.7761 2.00098 13.5 2.00098H7.5C7.22386 2.00098 7 2.22483 7 2.50098C7 2.77712 7.22386 3.00098 7.5 3.00098H12.2929L2.14645 13.1474C1.95118 13.3427 1.95118 13.6593 2.14645 13.8545C2.34171 14.0498 2.65829 14.0498 2.85355 13.8545L13 3.70808V8.50098C13 8.77712 13.2239 9.00098 13.5 9.00098C13.7761 9.00098 14 8.77712 14 8.50098V2.50098Z" fill="%2314716C"/></svg>');
}

h2.down-arrow::before {
	content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 13.501C2 13.7771 2.22386 14.001 2.5 14.001H8.5C8.77614 14.001 9 13.7771 9 13.501C9 13.2248 8.77614 13.001 8.5 13.001H3.70711L13.8536 2.85453C14.0488 2.65927 14.0488 2.34269 13.8536 2.14742C13.6583 1.95216 13.3417 1.95216 13.1464 2.14742L3 12.2939V7.50098C3 7.22483 2.77614 7.00098 2.5 7.00098C2.22386 7.00098 2 7.22483 2 7.50098V13.501Z" fill="%23922A22"/></svg>');
}

.barcode-container{
	width: 100%;
	display: flex;
	flex-direction: column;	
	align-items: center;
}

.barcode-container > img {
	width: 12rem;
}

h1.embedded-accent-text{
	text-wrap: auto;
}

.embedded-accent-text > *:first-child {
	color: var(--color-light-secondary-content);
}

.cancel-link{
	text-decoration: none;
	color: var(--color-neutral-400);
}

.error-button{
	text-decoration: underline;
	width: fit-content;
	background: none;
	border: var(--color-error-content) .1rem solid;
	color: var(--color-error-content);
	height: 2rem;
	font-size: .8rem;
}

.error-button::after{
	content: "";
	display: none;
}
.error-container{
	display: flex;
	flex-direction: column;
	color: var(--color-error-content);
}

.error-summary{
	align-self: center;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.error-details{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	font-size: .9rem;
}