* {
	margin: 0;
	padding: 0;
	color: unset;
	outline: none;
	scrollbar-width: thin;
	box-sizing: border-box;
	scroll-behavior: smooth;
	-ms-scroll-chaining: none;
	overscroll-behavior: none;
}

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-weight: 100 900;
	src: local("Inter Variable"), url("InterVariable.woff2") format("woff2");
	font-display: swap;
}

:root {
	color-scheme: dark light;
	font-family: "Inter Variable", sans-serif;
	/* fix for Chrome 'Inter Variable' */
	font-feature-settings: 'liga' 1, 'calt' 1;

	/* Theme Color */
	--brd-hue: 187;
	--brd-sat: 48%;
	--brd-lig: 40%;
	--brand-color: hsl(var(--brd-hue), var(--brd-sat), var(--brd-lig));
	--brand-color-opc: hsl(var(--brd-hue), var(--brd-sat), var(--brd-lig), 30%);

	--color-effect: hsl(var(--brd-hue), var(--brd-sat), var(--brd-lig), 8%);

	--modal-background-color: hsl(var(--brd-hue), var(--brd-sat), 10%, 90%);


	--hue: 0;
	--sat: 0%;
	--lig: 13%;
	--base: hsl(var(--hue), var(--sat), var(--lig));

	--c-hue: 0;
	--c-sat: 0%;
	--c-lig: 100%;
	--current-color: hsl(var(--c-hue), var(--c-sat), var(--c-lig));

	--gap: 0.3em;
	--margin: 0.4em;
	--padding: 0.4em;
	--border-radius: 6px;

	--wrapper-margin: 0 auto;
	--wrapper-width-min: 300px;
	--wrapper-width-max: 1200px;
	--wrapper-width: clamp(var(--wrapper-width-min), 90dvw, var(--wrapper-width-max));
}

html,
body {
	position: relative;
	top: 0;
	left: 0;
	text-rendering: optimizelegibility;
	min-width: var(--wrapper-width-min);
}

body:has(.content-center) {
	overflow-x: hidden;
}

details summary::-webkit-details-marker {
	display: none;
}

details[open] summary~* {
	animation: slide .2s ease-in-out;
}

summary {
	cursor: pointer;
}

ul {
	padding-left: 1rem;
}

ul li>ul {
	padding-left: 1.5em;
}

h1 {
	font-size: 2.5rem;
}

@keyframes slide {
	0% {
		opacity: 0;
		margin-left: -10px
	}

	100% {
		opacity: 1;
		margin-left: 0px
	}
}

@keyframes reduce-header {
	to {
		--filter-effects: blur(11px);
		background: var(--background-c, #0000004d);
		padding-top: 1rem;
		padding-bottom: 1rem;
		backdrop-filter: var(--filter-effects);
		-webkit-backdrop-filter: var(--filter-effects);
	}
}

body {
	color: var(--current-color);
	background-color: var(--base);
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* :root:has(#prefers-color [value="☀️"]:checked) {
	color-scheme: light;

	--hue: 0;
	--sat: 0%;
	--lig: 85%;

	--c-hue: 0;
	--c-sat: 0%;
	--c-lig: 13%;
}

:root:has(#prefers-color [value="🌑"]:checked) {
	color-scheme: dark;

	--hue: 0;
	--sat: 0%;
	--lig: 13%;

	--c-hue: 0;
	--c-sat: 0%;
	--c-lig: 90%;
} */

main {
	display: grid;
	gap: var(--gap);
	margin-bottom: 10px;
	grid-auto-flow: row;
	padding-left: env(safe-area-inset-right, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

nav {
	--background-c: #0000004d;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	font-weight: bold;
	animation-range: 0 150px;
	animation-timeline: scroll();
	animation: reduce-header linear both;
	box-shadow: 0px 5px 6px -8px var(--brand-color);
}

nav~main {
	/* 3rem del padding/gap, y 3 rem del nav */
	padding-top: calc(3rem + 3rem) !important;
}

nav .wrapper {
	gap: 0;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto;
	padding-top: calc(env(safe-area-inset-top, 0px)) !important;
}

nav .button:hover,
.button-brand:hover {
	--tw-scale-x: 105%;
	--tw-scale-y: 105%;
}

nav a:has(svg):hover {
	--tw-scale-x: 115%;
	--tw-scale-y: 115%;
}

nav .button:hover:not([disabled]),
nav a:has(svg):hover:not([disabled]),
.button-brand:hover:not([disabled]) {
	scale: var(--tw-scale-x)var(--tw-scale-y);
}

nav a {
	--padding-y: calc(.25rem*3) !important;
	--padding-x: calc(.25rem*5) !important;
	border: 1px solid;
	text-decoration: none;
	border-color: transparent;
	transition-duration: .3s;
	padding-block: var(--padding-y);
	padding-inline: var(--padding-x);
	transition-property: background-color;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

nav a:hover:not(.no-default) {
	border-radius: var(--border-radius);
	border-color: color-mix(in oklab, var(--brand-color)10%, transparent);
	background-color: color-mix(in oklab, var(--brand-color)5%, transparent);
}

nav .button {
	margin: 0;
	box-shadow: none;
	background-color: var(--brand-color-opc);
}

nav .button,
nav a:has(svg) {
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-property: transform, translate, scale, rotate, background-color;
}

nav a:has(svg) {
	transition-duration: .3s;
}

nav .button:hover {
	background-color: var(--brand-color) !important;
}

nav a:has(svg) {
	justify-self: left;
}

#mobile_navbar {
	--gap: 8px;
	--padding: 0;
	grid-row: 2;
	display: grid;
	gap: var(--gap);
	grid-column: 1/3;
	overflow: hidden;
	grid-auto-flow: row;
	grid-template-rows: 0fr;
	padding: var(--padding);
	scroll-margin-top: 6rem;
	scroll-padding-top: 6rem;
	transition-duration: 0.2s;
	transition-property: grid-template-rows, position, padding, margin-top;
}

#dropdown-nav-mobile {
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

#dropdown-nav-mobile:checked~#mobile_navbar {
	margin-top: var(--gap);
	grid-template-rows: 1fr;
}

main header {
	display: grid;
	--gap: 0.7rem;
	gap: var(--gap);
	max-width: 1024px;
	text-align: center;
	margin: 0 auto;
	padding: 10vh 0;
	justify-items: center;
}

/* Utilities */
.border-c-effect {
	border: 1px solid var(--color-effect);
}

.fit-cover {
	object-fit: cover;
}

.only-desktop {
	display: none;
}

/* no scale */
.no-scale {
	scale: none !important;
}

/* no-border */
.no-border {
	border: none !important;
}

/* padding-1 */
.padding-1 {
	--padding: 1rem;
	padding: 1rem;
}

/* overflow-hidden */
.overflow-hidden {
	overflow: hidden;
}

.overflow-hidden-mobile {
	overflow: hidden;
}

/* align-s-base */
.align-s-base {
	align-self: baseline;
}

/* min-width-85 */
.min-width-85 {
	min-width: 85%;
}

/* dialog modal  */
dialog {
	top: 50%;
	margin: 0 auto;
	transform: translateY(-50%);
	border: 1px solid var(--color-effect);
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

label:has(legend) {
	position: relative;
}

label legend {
	left: 0.8rem;
	font-weight: bold;
	padding: 0 0.5rem;
	align-self: center;
	position: absolute;
	touch-action: none;
	pointer-events: none;
	display: inline-block;
	transition-property: top;
	top: calc(var(--padding));
	transition-duration: 0.2s;
	background-color: var(--base);
	border-radius: var(--border-radius);
}

label input[type="text"]:focus~legend,
label input[type="text"]:valid~legend,
label input[type="text"]:disabled~legend,
legend.fixed {
	top: -0.8rem;
}

h3.with-legend {
	transition-property: transform;
	transition-duration: 0.2s;
}

h3.with-legend:has(~label:first-of-type >input:focus, ~label:first-of-type >input:valid) {
	transform: translateY(-0.8rem);
}

.wrapper {
	margin: 0 auto;
	max-width: var(--wrapper-width);
}

.border-top {
	border-top: 1px solid var(--color-effect);
}

.mobile-full-width {
	width: 100%;
}

.place-center {
	place-items: center;
}

.space-between {
	justify-content: space-between;
}

[hidden] {
	display: none !important;
}

[pointer] {
	cursor: pointer;
}

.display-i-block {
	display: inline-block;
}

.padding {
	padding: var(--padding);
}

.no-wrap {
	white-space: nowrap;
}

.pre-wrap {
	white-space: pre-wrap;
}

.no_padding {
	padding: 0;
}

.no_padding_i {
	padding: 0 !important;
}

/* text red */
.color-text-red {
	--current-color: #cb2b2b;
	color: #cb2b2b;
}

.color-text-red-i {
	--current-color: #cb2b2b !important;
	color: #cb2b2b !important;
}

.red-hover:hover,
.price-status-rejected,
.price-status-suspended,
.price-status-overdue {
	--hue: 0;
	--sat: 55%;

	--brd-hue: 0;
	--brd-sat: 55%;
	--brd-lig: 70%;

	--brand-color-opc: hsla(var(--brd-hue), var(--brd-sat), var(--brd-lig), .7);
}

.text-ellipsis {
	width: inherit;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.button-cancel {
	background-color: hsl(0, 65%, 35%);
	transition-property: background-color;
}

.button-cancel:hover {
	background-color: hsl(0, 65%, 45%);
}

a[disabled] {
	pointer-events: none;
}

/* container */
.container {
	--filter-effects: blur(2px);
	padding: var(--padding, 0.7rem);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
	backdrop-filter: var(--filter-effects);
	-webkit-backdrop-filter: var(--filter-effects);
}

/* basic center */
.center {
	text-align: center;
	align-self: center;
}

/* simple grid */
.grid {
	display: grid;
	gap: var(--gap);
}

/* grid-flow-col */
.grid-flow-col {
	display: grid;
	gap: var(--gap);
	grid-auto-flow: column;
}

a.small,
.text-small {
	zoom: 0.7;
}

.font-size-xxs {
	font-size: 0.4rem;
}

.font-size-xs {
	font-size: 0.6rem;
}

.font-size-small {
	font-size: small;
}

.font-size-med {
	font-size: 0.8rem;
}

/* margin bottom */
.margin-bottom-05 {
	margin-bottom: 0.5rem;
}

.margin-bottom-2 {
	margin-bottom: 2rem;
}

.margin-bottom-1 {
	margin-bottom: 1rem;
}

/* margin y */
.margin-y {
	margin-top: var(--margin);
	margin-bottom: var(--margin);
}

.margin-y-i {
	margin-top: var(--margin) !important;
	margin-bottom: var(--margin) !important;
}

.margin-top {
	margin-top: var(--margin);
}

.margin-top-i {
	margin-top: var(--margin) !important;
}

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

/* align content center */
.align-content-center {
	align-content: center;
}

/* display flex */
.flex {
	display: flex;
	gap: var(--gap);
}

.flex-i {
	display: flex !important;
}

/* inline flex center */
.inline-flex-center {
	display: inline-flex;
	place-content: center;
	align-items: center;
}

/* Color brand */
.color-brand {
	color: var(--brand-color);
	transition-duration: .15s;
	transition-property: color;
}

.color-brand-opc {
	color: var(--brand-color-opc);
}

a.color-brand:hover {
	--brd-lig: 55%;
	--brand-color: hsl(var(--brd-hue), var(--brd-sat), var(--brd-lig));
}

.text-header {
	font-size: 2rem;
}

.text-title {
	font-size: 1.85rem;
}

.text-xl {
	font-size: 1.25rem;
}

.text-2xl {
	font-size: 1.5rem;
}

.break-word {
	overflow-wrap: break-word;
}

.text-balance {
	text-wrap: balance;
}

.w-space-i {
	white-space: inherit;
}

/* Text decoration */
.text-d-none {
	text-decoration: none;
}

/* text left */
.text-left {
	text-align: left;
}

/* letter spacing */
.letter-s-1 {
	letter-spacing: 1px;
}

.letter-s-less-15 {
	letter-spacing: -.15px;
}

.padding-y,
.padding-block {
	padding-top: var(--padding);
	padding-bottom: var(--padding);
}

.padding-x,
.padding-inline {
	padding-left: var(--padding);
	padding-right: var(--padding);
}

.padding-top {
	padding-top: var(--padding);
}

.padding-bottom {
	padding-bottom: var(--padding);
}

.padding_unset {
	padding: unset !important;
}

.flex-center {
	display: flex;
	gap: var(--gap);
	align-items: center;
}

/* back button */
.back_btn {
	width: 24px;
	display: grid;
	aspect-ratio: 1;
}

/* all small caps */
.f-all-s-caps {
	font-variant: all-small-caps;
}

/* align items  */
.align-i-center {
	align-items: center;
}

/* justify content  */
.justify-c-start {
	justify-content: start;
}

/* font monospace */
.font-mono {
	font-family: monospace;
}

/* font-bold */
.font-bold {
	font-weight: bold;
}

/* opacity */
.opacity-07 {
	opacity: 0.7;
}

/* float */
.float-left {
	float: left;
}

.float-right {
	float: right;
}

/* Switch input checkbox */
.switch {
	min-width: 45px;
	place-self: end;
	max-height: 28px;
	align-self: center;
	position: relative;
	display: inline-block;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	--border-radius: 3px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	cursor: pointer;
	position: absolute;
	border: 1px solid var(--color-effect);
	background-color: var(--color-effect);
	border-radius: var(--border-radius);
	transition: background-color 0.2s;
}

.slider:before {
	margin: 8%;
	content: "";
	height: 70%;
	width: 16px;
	position: absolute;
	place-self: center;
	justify-self: start;
	transition: transform 0.2s;
	border-radius: var(--border-radius);
	background-color: var(--brand-color);
}

.switch input:checked+.slider {
	background-color: var(--brand-color-opc);
}

.switch input:checked+.slider:before,
.justify-self-end {
	justify-self: end;
}

/* detail element */
.detail_element~section {
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: 0.3s;
	transition-property: max-height, padding, margin-top;
}

.detail_element:has(input[type="checkbox"]:checked)~section {
	padding: 0.4rem;
	margin-top: 5px;
	max-height: 15rem;
	border-top: 1px solid var(--color-effect);
}

.detail_element~section>* {
	padding: 4px 0;
}

/* element slider */
.elem-slider {
	width: 100%;
	display: flex;
	position: relative;
	scrollbar-width: none;
	overflow: scroll hidden;
	overscroll-behavior: auto;
	scroll-snap-type: x mandatory;
	scrollbar-color: transparent transparent;
}

.elem-slider::-webkit-scrollbar {
	display: none;
}

.toggle-show-security {
	all: unset;
	z-index: 1;
	right: 10px;
	width: 22px;
	display: grid;
	appearance: none;
	overflow: hidden;
	line-height: 22px;
	position: absolute;
	justify-content: center;
	grid-template-areas: "center";
	top: calc(var(--padding) - 2px);
}

.toggle-show-security:checked~input.password {
	-webkit-text-security: none;
}

.toggle-show-security::after {
	grid-area: center;
	content: "\01F441";
	filter: grayscale(1);
}

.toggle-show-security:checked::before {
	top: -1px;
	left: -1px;
	z-index: 1;
	width: 16px;
	height: 22px;
	font-size: 1.2rem;
	grid-area: center;
	position: relative;
	place-self: center;
	content: "\002571";
}

.password,
.password-hover {
	-webkit-text-security: disc;
}

.password-hover:hover {
	-webkit-text-security: none;
}

/* no gap */
.no-gap {
	gap: 0;
}

/* Layouts  */
.support-center {
	min-height: 480px;
}

.support-center:has(label) {
	min-height: auto;
}

.support-center .default-centered {
	align-content: center;
	justify-items: center;
	min-height: 400px;
	gap: 0.8rem;
}

.support-detail {
	grid-template-areas:
		"content aside"
		"content aside";
	grid-template-columns: 2fr 1fr !important;
}

.support-detail content {
	grid-row-start: 2;
	grid-column: 1/3;
}

.support-detail aside {
	display: grid;
	gap: var(--gap);
	grid-auto-flow: column;
	--padding: 1rem;
	grid-column: 1/3;
	grid-row: 1/2;
	padding: var(--padding);
}

.support-detail .status {
	padding: 0.2rem 0.5rem;
}

.support-detail .reply-control {
	place-items: end;
}

.support-detail .reply-control a {
	font-size: 0.6rem;
	padding: 0.3rem;
}

.reset-pass-form {
	--gap: 0.7rem !important;
}

.reset-pass-code {
	display: grid;
	--padding: 0.8rem;
	justify-content: space-evenly;
	grid-template-columns: repeat(auto-fit, calc(var(--padding) * 3));
}

.reset-pass-code input[type="number"] {
	aspect-ratio: 1;
	appearance: none;
	--padding: 0.8rem;
	-moz-appearance: none;
	padding: var(--padding);
	-webkit-appearance: none;
	width: calc(var(--padding) * 3);
}

/* Chrome, Safari, Edge, Opera */
.reset-pass-code input[type="number"]::-webkit-outer-spin-button,
.reset-pass-code input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.reset-pass-code input[type=number] {
	-moz-appearance: textfield;
}

.service-item>header {
	--gap: 3px;
	grid-template-columns: 1fr auto !important;
}

.service-item header>section {
	justify-self: start;
}

.service-item .service-detail,
.checkout-process .checkout-content {
	--gap: 1rem;
	display: grid;
	line-height: 1rem;
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.account-services>header,
.service-item>header,
.checkout-process>header,
.support>header {
	--padding: 1rem;
	display: grid;
	gap: var(--gap);
	align-items: center;
	padding: var(--padding);
	max-width: var(--wrapper-width-max);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.account-services section header,
.account-services section label {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.invoice,
.account-services,
.service-item,
.checkout-process,
.support {
	align-self: start;
	margin: 2.5rem auto;
	width: var(--wrapper-width);
}

.invoice .dashboard-header {
	display: grid;
	padding: 1rem;
	max-width: inherit;
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.invoice .dashboard-header h1 {
	align-self: center;
}

.invoice .header-actions {
	gap: 1rem;
	display: flex;
}

.invoice .search-input {
	width: 100%;
	padding: 0.5rem 1rem;
	background: var(--base);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
}

.invoice .search-input:focus {
	border-color: var(--brand-color);
	box-shadow: 0 0 0 2px var(--brand-color-opc);
}

.invoice .filter-select {
	width: 100%;
	appearance: none;
	background: var(--base);
	padding: 0.5rem 2rem 0.5rem 1rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='grey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
}

.invoice .invoices-summary {
	gap: 1rem;
	display: grid;
	margin-bottom: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.invoice .invoices-summary div {
	padding: 1.5rem;
	transition: transform 0.2s ease;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
}

.invoice .invoices-summary div:hover {
	transform: translateY(-3px);
}

.invoice h3,
.account-services section header h3,
.support .support-center header h3 {
	opacity: 0.7;
	font-size: 0.9rem;
	color: var(--current-color);
}

.invoice .summary-card .amount {
	font-weight: 600;
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	color: var(--current-color);
}

.invoice .summary-card span {
	opacity: 0.6;
	font-size: 0.85rem;
	color: var(--current-color);
}

.invoice .summary-card span.positive {
	opacity: 1;
	color: var(--brand-color);
}

.invoice .invoices-table,
.account-services section,
.support .support-center {
	overflow: hidden;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
}

.invoice .invoices-table header,
.account-services section header,
.support .support-center header {
	text-align: left;
	font-weight: 500;
	max-width: inherit;
	justify-items: initial;
	color: var(--current-color);
	background: var(--color-effect);
}

.invoice .invoices-table header,
.invoice .invoices-table label,
.support .support-center header,
.support .support-center label {
	display: grid;
	grid-template-columns: minmax(2rem, 6rem) minmax(90px, 1fr) minmax(8rem, 11rem);
}

.invoice .invoices-table header h3:last-child,
.invoice .invoices-table label p:last-child,
.support .support-center header h3:last-child,
.support .support-center label p:last-child {
	place-self: end;
	--gap: 0.1rem;
	place-content: end;
}

.invoice .invoices-table label,
.account-services section label,
.support .support-center label {
	font-size: 0.85rem;
	white-space: nowrap;
}

.invoice .invoices-table label>*,
.account-services section label>*,
.support .support-center label>* {
	width: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

.invoice .invoices-table>header,
.invoice .invoices-table>label,
.invoice .invoices-table>p,
.account-services section>header,
.account-services section>label,
.account-services section>p,
.support .support-center>header,
.support .support-center>label,
.support .support-center>p {
	gap: 0.7rem;
	padding: 1rem;
	border-bottom: 1px solid var(--color-effect);
}

.invoice .invoices-table label:last-child,
.invoice .invoices-table p:last-child,
.account-services section label:last-child {
	border-bottom: none;
}

[class*="price-status-"] {
	--padding: 0.5em;
	line-height: 6px;
	font-size: 0.5rem;
	font-weight: bold;
	margin-right: 5px;
	padding: var(--padding);
	border-radius: var(--border-radius);
	border: 1px solid var(--brand-color-opc);
	background-color: var(--brand-color-opc);
}

.price-status-approved {
	--hue: 0;
	--sat: 55%;

	--brd-hue: 100;
	--brd-sat: 55%;
	--brd-lig: 55%;

	--brand-color-opc: hsla(var(--brd-hue), var(--brd-sat), var(--brd-lig), .7);
}

.price-status-refunded {
	--hue: 0;
	--sat: 55%;

	--brd-hue: 20;
	--brd-sat: 55%;
	--brd-lig: 55%;

	--brand-color-opc: hsla(var(--brd-hue), var(--brd-sat), var(--brd-lig), .7);
}

.invoice-detail-card content {
	display: flex;
	flex-wrap: wrap;
}

.invoice-detail-card content .invoice-brand-logo {
	display: grid;
	max-width: 100%;
	flex: 1 1 200px;
	place-items: center;
}

.invoice-detail-card content .invoice-detail {
	padding: 0;
	display: grid;
	--gap: 0.2rem;
	max-width: 100%;
	flex: 2 1 250px;
	gap: var(--gap);
	text-align: center;
	border-radius: 2px;
	grid-template-columns: 1fr 1fr 1fr;
}

.invoice-detail-card content .invoice-detail label h3,
.invoice-detail-card content .invoice-detail label p {
	padding: var(--padding);
}

.invoice-detail-card content .invoice-detail label h3 {
	border-radius: 2px;
	background-color: var(--brand-color-opc);
}

.invoice-detail-card content .invoice-detail .reference {
	grid-column: 2/4;
}

.invoice-detail-card content .invoice-detail .name {
	grid-column-start: 2;
	grid-column-end: 4;
}

.invoice-detail-content {
	padding: 0;
	overflow: hidden;
	border-radius: var(--border-radius);
}

.invoice-detail-content div,
.invoice-detail-content label {
	--gap: 1px;
	display: grid;
	text-align: right;
	grid-template-columns: 1fr minmax(120px, auto);
}

.invoice-detail-content div p {
	background-color: var(--brand-color-opc);
}

.invoice-detail-content div p,
.invoice-detail-content label p {
	padding: 0.8rem;
	text-indent: 5px;
}

.invoice-detail-content .description {
	text-align: left;
}

.invoices-updates {
	--padding: 0.8rem;
}

.invoices-updates details summary {
	padding: var(--padding);
}

.logo-view-transition {
	view-transition-name: brand-logo;
}

.button-brand {
	--padding-y: .5rem;
	--padding-x: 1rem;
	margin: 0;
	box-shadow: none;
	transition-duration: 2s;
	padding-block: var(--padding-y);
	padding-inline: var(--padding-x);
	border-radius: var(--border-radius);
	background-color: var(--brand-color-opc);
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-property: transform, translate, scale, rotate, background-color;
}

.button-brand:disabled,
.button-brand[disabled] {
	background-color: var(--brand-color-opc);
}

.button-brand:hover:not([disabled]) {
	background-color: var(--brand-color) !important;
}

/* Valid forms button effect color */
form.valid-button-effect:valid input[type="submit"]:not(.no-default),
form.valid-button-effect:valid button[type="submit"]:not(.no-default) {
	background-color: var(--brand-color-opc);
}

form.valid-button-effect:valid input[type="submit"]:not(.no-default):hover,
form.valid-button-effect:valid button[type="submit"]:not(.no-default):hover {
	background-color: var(--brand-color);
}

#qr_code_totp {
	max-width: 420px;
}

#dashboard-services {
	gap: 0;
}

#dashboard-services header,
#dashboard-services label {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#dashboard-services label> :not(:last-child) {
	border-right: 1px solid var(--color-effect);
}

#dashboard-services label>* {
	padding: 8px 6px;
	overflow: hidden;
	margin-left: 6px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#card_enrollment {
	--gap: 1rem;
}

#card_enrollment div {
	--gap: 3px;
}

#card_enrollment .card-icon {
	right: 15px;
	display: grid;
	position: absolute;
	align-self: center;
}

#delete_acc input[type="email"] {
	min-width: 325px;
}

#dropdown {
	z-index: 2;
	max-width: 100%;
	text-align: center;
	position: relative;
}

#dropdown [type="checkbox"] {
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

#dropdown .dropdown-input+button {
	padding: 0 !important;
	transition-duration: 0.2s;
	transition-property: background-color, margin, border-radius;
}

#dropdown .dropdown-input+button label {
	--padding: 0.5rem;
	display: grid;
	cursor: pointer;
	position: relative;
	align-items: center;
	grid-template-columns: 1fr auto;
	padding: var(--padding) calc(var(--padding) * 2);
}

#dropdown .dropdown-input+button label:before {
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	z-index: -1;
	height: 100%;
	cursor: auto;
	position: fixed;
	pointer-events: none;
}

#dropdown .dropdown-input:checked+button label:before {
	pointer-events: auto;
}

#dropdown .section-dropdown {
	--padding: 0.5rem;
	right: 0;
	opacity: 0;
	z-index: 1;
	display: grid;
	max-height: 0;
	min-width: 125%;
	overflow: hidden;
	font-weight: bold;
	position: absolute;
	pointer-events: none;
	transition-duration: 0.2s;
	background-color: #2b2a33;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
	transition-property: max-height, opacity, margin, border-radius;
}

#dropdown .dropdown-input:checked~.section-dropdown {
	opacity: 1;
	max-height: 18rem;
	pointer-events: auto;
	border-top-right-radius: 0;
}

#dropdown .dropdown-input:checked~button {
	border-bottom: 1px solid transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#dropdown input:checked~button svg,
#dropdown input:checked~label svg {
	transform: rotate(180deg) translateX(-2px) translateY(-3px);
}

#dropdown a,
#dropdown button:is(.no-default),
#dropdown .dropdown-sub+label {
	cursor: pointer;
	border: unset;
	text-align: right;
	position: relative;
	white-space: nowrap;
	text-decoration: none;
	transition-duration: 0.2s;
	transition-property: background-color;
	padding: var(--padding) calc(var(--padding) * 2);
	padding-bottom: calc(var(--padding) + 2px);
}

#dropdown a:hover,
#dropdown button:is(.no-default):hover,
#dropdown .dropdown-sub+label:hover {
	text-decoration: underline;
	background-color: var(--brand-color-opc);
}

#dropdown .section-dropdown-sub {
	position: relative;
	display: grid;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition-duration: 0.2s;
	transition-property: max-height, opacity, margin;
}

#dropdown .dropdown-sub:checked~.section-dropdown-sub {
	opacity: 1;
	margin: 2px;
	max-height: 5rem;
	pointer-events: auto;
}

#dropdown .section-dropdown-sub a {
	transition-duration: 0.2s;
	transition-property: background-color;
}

.services_form_option input[type="file"],
.width-100 {
	width: 100%;
}

.width-100-i {
	width: 100% !important;
}

.dis_club_service_form:not(option),
.dis_shop_service_form:not(option),
.services_form_option {
	padding: 0;
	opacity: 0;
	max-height: 0;
	--margin: 0 !important;
	transition-duration: 0.3s;
	transition-behavior: allow-discrete;
	transition-property: max-height, padding, margin, opacity;
}

:has(option.dis_club_service_form:checked) .dis_club_service_form,
:has(option.dis_shop_service_form:checked) .dis_shop_service_form,
:has(.no-contact-form option:checked:not([value=""])) .services_form_option {
	--margin: 1.2rem !important;
	max-height: 100%;
	opacity: 1;
}

/* Account  */
.account_grid {
	display: grid;
	gap: var(--gap);
	--padding: 0.4rem;
}

.account_grid header.main {
	margin: 0 auto;
	display: grid;
	overflow: hidden;
	padding-top: 28px;
	position: relative;
	grid-auto-flow: row;
	justify-items: normal;
}

.account_grid header.main p {
	opacity: 0.7;
}

.account_grid header {
	margin: 0;
	display: grid;
	place-items: center;
	justify-content: left;
	grid-auto-flow: column;
	padding: 15px 0 5px 0;
}

.account_grid>aside {
	--gap: 4px;
	gap: var(--gap);
	margin-top: 3rem;
	margin-bottom: calc(1rem + 35px);
}

.account_grid>aside svg {
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.8rem 0 0.6rem;
}

.account_grid>aside form label,
.relative {
	position: relative;
}

.account_grid>aside>*,
.account_grid>aside form>*,
.btn-padd-style {
	padding: 0.8rem 0.4rem;
	--padding: 0.8rem;
}

[class*="before_icon_"]::after {
	content: ">";
	float: right;
	font-weight: bold;
}

.account_grid>aside * {
	text-decoration: none;
}

.account_grid>aside form {
	padding: 0;
	margin-bottom: calc(1rem + 0.8rem + 0.2rem);
}

.account_grid>aside form:not(:valid) button[type="submit"] {
	opacity: 0.6;
}

.account_grid>aside form input[type="text"],
.margin-bottom-08 {
	margin-bottom: 0.8rem;
}

#account-service header {
	width: 100%;
	--gap: 0.3rem;
	display: grid;
	max-width: 100%;
	gap: var(--gap);
	text-align: left;
	justify-items: left;
	align-items: center;
	padding: var(--padding);
	grid-template-columns: minmax(auto, 1fr) auto;
	border-bottom: 1px solid var(--color-effect);
}

#account-service header>content h2 {
	display: grid;
	gap: var(--gap);
	align-items: center;
	white-space: nowrap;
	grid-auto-flow: column;
}

#account-service header>aside {
	display: grid;
	gap: var(--gap);
	grid-auto-flow: column;
}

#account-service header>aside button {
	padding-bottom: var(--padding-y);
	--gap: 0;
}

#account-service-content {
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (3 + 1), 250px, 100%), 1fr));
	align-items: start;
}

#account-service-content>div:nth-child(odd) {
	background-color: hsla(var(--hue), var(--sat), calc(var(--lig) + 0.7%));
}

#dis_club_product_header {
	--gap: 0.7rem;
	gap: var(--gap);
	display: grid;
	position: relative;
	place-content: center;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "center";
}

#dis_club_product_header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	height: 100%;
	opacity: 0.1;
	filter: blur(1px);
	grid-area: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/img/header-app.webp");
	animation: change-bg 14s infinite ease-in-out;
}

#dis_club_product_header header {
	padding: 15dvh 0;
}

@keyframes change-bg {
	0% {
		background-image: url("/img/header-app.webp");
	}

	33% {
		background-image: url("/img/desktop_trace.webp");
	}

	66% {
		background-image: url("/img/mobile_menu.webp");
	}

	100% {
		background-image: url("/img/header-app.webp");
	}
}

#dis_club_specs {
	--gap: 0.5rem;
	gap: var(--gap);
	margin-top: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (3 + 1), 200px, 100%), 1fr));
}

#dis_club_specs article {
	display: grid;
	padding: 10px;
	gap: var(--gap);
	align-content: start;
}

#dis_club_plans {
	width: 100%;
	max-width: 485px;
	--padding: 1.21rem;
	justify-items: center;
	padding-top: var(--padding);
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (2 + 1), 198px, 100%), 1fr));
}

#dis_club_plans article {
	--padding: 0.8rem;
	display: flex;
	flex-direction: column;
	width: clamp(200px, 100%, 410px);
	padding: var(--padding) calc(var(--padding) * 1.5);
}

#dis_club_plans article h4 {
	padding-bottom: var(--padding);
}

#dis_club_plans article div {
	flex-grow: 1;
	display: flex;
	opacity: 0.85;
	align-items: flex-start;
	border-top: 1px solid var(--color-effect);
}

#dis_club_plans article ul {
	--gap: 0.4rem;
	padding-left: 1.5rem;
}

#dis_club_plans article p {
	margin-top: calc(var(--padding)* 2);
}

#terms {
	display: grid;
	--gap: 1rem;
}

#term-policy {
	--gap: 1rem;
	--padding: 2rem;
	padding: var(--padding) 0 var(--padding) 0;
}

#dis_club_presentation {
	max-width: 100%;
	overflow: hidden;
	align-items: center;
	grid-template-columns: 1fr 3fr;
}

#dis_club_presentation img {
	max-width: 100%;
	overflow: hidden;
}

#products_list_balloons {
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (2 + 1), 318px, 100%), 1fr));
}

[id^="balloons_"] {
	--gap: 0.4rem;
	text-align: left;
	padding: var(--padding);
	align-content: space-between;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
}

[id^="balloons_"] * {
	padding: var(--padding);
}

[id^="balloons_"] h4 {
	display: flex;
	padding-top: 0;
	padding-left: 0;
	align-items: center;
	border-bottom: 1px solid var(--color-effect);
}

[id^="balloons_"] p {
	font-size: 0.9rem;
	line-height: 1.2rem;
	opacity: 0.8;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

[id^="balloons_"] a {
	padding-left: 0;
	width: fit-content;
	letter-spacing: 3px;
	text-decoration: none;
	margin-left: calc(var(--padding) + 3px);
}

/* about */
.about-content {
	--gap: 0.7rem;
	--padding: 7dvh;
}

/* contact */
.contact-content {
	--gap: 0.7rem;
	--padding: 2.1rem;
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (2 + 1), 318px, 100%), 1fr));
}

.contact-content content {
	--padding: 2.3rem;
	--margin: 2rem;
	padding-top: 2.1rem;
	margin-bottom: var(--margin);
	padding-bottom: var(--padding);
	border-bottom: 1px solid var(--color-effect);
}

.contact-content content>:not(div) {
	padding-left: 10px;
}

.contact-content content h2 {
	--margin: 1.2rem;
	display: flex;
	gap: var(--gap);
	align-items: center;
}

.contact-content content div {
	--margin: 1rem;
}

.contact-content aside {
	padding: 2.1rem;
	max-width: 550px;
	margin: 0 auto;
}

.contact-content aside form>label:first-child:not(.no-contact-form) {
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (2 + 1), calc(225px - var(--padding) *2), 100%), 1fr));
}

/* checkout */


/* social links */
.social-links {
	--gap: 0.8rem;
	gap: var(--gap);
}

.social-links a {
	width: 24px;
	display: grid;
}

.social-links svg {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1/1;
}

/* footer */
footer {
	border-top: 1px solid var(--color-effect);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 25px);
}

.footer-legend {
	--gap: 0.5rem;
	gap: var(--gap);
	padding: 4dvh 0;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (4 + 1), 152px, 100%), 1fr));
}

.footer-legend a {
	text-decoration: none;
}

.footer-legend section {
	--gap: 0.3rem;
	display: grid;
	gap: var(--gap);
	grid-auto-flow: row;
	place-content: start;
	padding: 10px;
}

.footer-legend.only-mobile {
	grid-template-columns: none;
}

.footer-legend.only-mobile details {
	width: 100%;
	display: grid;
	cursor: pointer;
	padding: var(--padding);
}

.footer-legend.only-mobile details:not(:last-child),
.border-bottom-1-effect {
	border-bottom: 1px solid var(--color-effect);
}

.footer-legend.only-mobile details summary {
	display: grid;
	list-style: none;
	grid-auto-flow: column;
	padding: var(--padding);
	place-content: space-between;
}

.footer-legend.only-mobile details[open] summary .open,
.footer-legend.only-mobile details:not([open]) summary .close {
	display: none;
}

.footer-legend.only-mobile details a {
	padding: var(--padding);
}

/* Devices */
.device-item {
	--gap: 0.5rem;
	grid-template-columns: minmax(80px, auto) 1fr;
}

.device-item svg {
	place-self: center;
}

.device-item p {
	place-self: start !important;
}

/* article dis.club */
article.diswid-club {
	--gap: 0.2em;
	display: grid;
	gap: var(--gap);
	margin: 6dvw auto;
	padding: var(--padding);
	width: var(--wrapper-width);
	grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (2 + 1), 318px, 100%), 1fr));
}

article.diswid-club img {
	max-width: 100%;
	overflow: hidden;
	mask-image: radial-gradient(farthest-corner, black 0%, transparent 71%);
}

article.diswid-club aside {
	--gap: 0.3em;
	gap: var(--gap);
	display: flex;
	flex-wrap: wrap;
	margin-top: -15%;
	position: relative;
	align-items: center;
	justify-content: center;
}

main.content-center {
	margin: 0;
	width: 100dvw;
	display: grid;
	place-items: center;
	align-items: center;
	min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Main content center */
main.content-center .return_btn {
	top: 0;
	left: 0;
	z-index: 2;
	height: 2.5rem;
	box-shadow: none;
	user-select: none;
	font-size: .875rem;
	position: absolute;
	align-items: center;
	display: inline-flex;
	font-variant: normal;
	place-content: center;
	border-radius: 9999px;
	padding: 0 1rem 2px 1rem;
	transition-duration: .15s;
	border: 1px solid transparent;
	margin-top: calc(env(safe-area-inset-top, 0px) + 16px);
	margin-left: calc(env(safe-area-inset-left, 0px) + .25rem);
	transition-property: background-color, color, border, box-shadow;
}

main.content-center .return_btn:hover {
	border: 1px solid var(--color-effect);
	background-color: var(--brand-color-opc);
	box-shadow: 0px 0px 5px -4px currentColor;
}

main.content-center .return_btn svg {
	margin-left: -.5rem;
	margin-bottom: -.1rem;
}

/* form login  */
.login_form {
	position: relative;
	--gap: .7rem;
	display: grid;
	margin: 0 auto;
	gap: var(--gap);
	max-width: 90dvw;
	max-height: calc(90dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	padding: var(--padding);
	width: clamp(280px, 100%, 28rem);
}

.login_form::after {
	height: 0;
	opacity: 0;
	content: "-";
	padding: 1rem;
}

.login_form .button-cancel {
	background-color: unset;
	box-shadow: none;
	border: 0;
}

.login_form h1,
.login_form h2,
.login_form p,
.login_form svg {
	place-self: center;
}

.login_form p,
.login_form .button-cancel {
	--c-lig: 70%;
	--current-color: hsl(var(--c-hue), var(--c-sat), var(--c-lig)) !important;
	color: var(--current-color) !important;
}

.login_form .button-cancel:hover {
	background-color: color-mix(in oklab, var(--current-color)5%, transparent);
}

.login_form a {
	text-decoration: none;
}

.login_form form {
	--gap: 0.55em;
}

.login_form form div {
	margin-bottom: var(--gap);
}

.forgot_password {
	align-items: end;
	grid-template-columns: 1fr auto;
}

/* Error box */
[class*="error_box_"] {
	display: grid;
	max-height: 0;
	overflow: hidden;
	transition: 0.8s;
	align-items: center;
	grid-auto-flow: column;
	justify-content: center;
	grid-template-columns: auto 1fr;
	border-radius: var(--border-radius);
	border: 0px solid var(--color-effect);
	transition-property: max-height, border, padding;
}

[class*="error_box_"]:active,
[class*="error_box_"][active] {
	padding: 0.3rem;
	max-height: 15rem;
	border: 1px solid var(--color-effect);
}

[class*="error_box_"] img {
	width: 24px;
	height: 24px;
	margin: 0 0.3rem;
	filter: invert(1);
}

[class*="error_box_"] p {
	overflow: hidden;
	font-size: 0.85rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

input.error {
	border: 1px solid red;
}

/* NavMenu_ */
[id*="NavMenu_"] {
	z-index: 3;
	display: grid;
	max-height: 0;
	margin: 0 auto;
	position: fixed;
	grid-gap: 0.5rem;
	overflow: hidden;
	transition: 0.2s;
	grid-auto-flow: row;
	background-color: var(--base);
	transition-property: max-height, opacity, padding, height;
}

[id*="NavMenu_"]:target~[class*="NavMenu_modal_"] {
	left: 0;
	opacity: 0.5;
	max-width: 100%;
	max-height: 100%;
}

[class*="NavMenu_modal_"] {
	position: fixed;
	top: 50dvh;
	left: 50dvw;
	opacity: 0;
	z-index: 2;
	max-width: 0;
	width: 100vw;
	height: 100vh;
	max-height: 0;
	transition: 0.4s;
	min-width: 320px;
	--padding: 0 !important;
	transition-property: opacity;
	background-color: var(--modal-background-color);
}

[id*="NavMenu_mobile_opts"] {
	--gap: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 92dvw;
	max-height: 0;
	gap: var(--gap);
	transition: 0.3s;
	text-align: center;
	background-color: unset;
	transition-property: max-height, padding;
}

[id*="NavMenu_mobile_opts"]>* {
	border-radius: 0;
	width: 100% !important;
	padding: 20px 0 !important;
	background: var(--base) !important;
	border-bottom: 1px solid var(--color-effect) !important;
}

[id*="NavMenu_mobile_opts"]>*:first-of-type {
	border-radius: var(--border-radius, 3px) var(--border-radius, 3px) 0 0;
}

[id*="NavMenu_mobile_opts"]>*:nth-last-child(2) {
	border-bottom: none !important;
	border-radius: 0 0 var(--border-radius, 3px) var(--border-radius, 3px);
}

[id*="NavMenu_mobile_opts"]:target {
	overflow: auto;
	max-height: 100dvh;
	height: minmax(200px, 300px);
	padding-left: env(safe-area-inset-right, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

[id*="NavMenu_mobile_opts"] .opts_cancel {
	filter: brightness(1.2);
	border: none !important;
	margin: clamp(5px, 2.4vw, 15px) 0;
	border-radius: var(--border-radius);
}

[id*="NavMenu_mobile_opts"]~[class*="NavMenu_modal_"] {
	bottom: 0;
	top: unset;
	transition-duration: 0.4s;
	box-shadow: 0px 0px 100px 100px var(--modal-background-color);
	transition-property: opacity, max-width, max-height, top, left, bottom;
}

.notification-content {
	gap: 3px;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	max-height: 0;
	display: grid;
	position: fixed;
	grid-auto-flow: column;
	transition-duration: 0.3s;
	background-color: green;
	grid-template-columns: 1fr auto;
	transition-property: max-height, opacity, padding;
	padding-inline: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 0.8rem);
}

.notification-content.is-error {
	background-color: #c42d2d;
}

#input_toggle_notification:checked~.notification-content {
	opacity: 1;
	max-height: 100dvh;
	padding-block: 0.5rem;
	padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.5rem);
}

.notification-content>label.close {
	cursor: pointer;
	place-self: end;
	font-size: 1.1rem;
	font-weight: bolder;
}

/* input */
input,
select,
textarea,
option {
	--lig: 15%;
	appearance: none;
	text-align: left;
	--padding: 0.5rem;
	padding: var(--padding);
	border-radius: var(--border-radius);
	background-color: hsl(var(--hue), var(--sat), var(--lig), 50%);
	border: 1px solid hsl(var(--brd-hue), var(--brd-sat), var(--brd-lig), 8%);
}

textarea {
	field-sizing: content;
}

.button,
input[type="submit"],
button:not(.no-default) {
	--padding: 0.8rem;
	font-size: 1rem;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	align-content: center;
	transition-duration: .2s;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-effect);
	box-shadow: 0px 0px 4px -4px currentColor;
	padding: var(--padding) calc(var(--padding) * 2);
	transition-property: background-color, color, border, box-shadow, transform, translate, scale;
}

button:disabled,
a.disabled_on_click[disabled] {
	cursor: progress !important;
	pointer-events: initial !important;
}

.button.hover-effect {
	transition-duration: 0.2s;
	transition-property: background-color;
}

.button.hover-effect:hover {
	background-color: var(--brand-color-opc);
}

a.hover-effect:not(button, .button) {
	transition-duration: 0.2s;
	transition-property: color;
}

a.hover-effect:not(button, .button):hover {
	color: var(--brand-color);
}

input[type="checkbox"]:not(.no-default):checked,
.background-c-effect {
	background-color: var(--color-effect);
}

input[type="checkbox"]:not(.no-default):checked::after {
	position: absolute;
	transform: translate(-50%, -50%);
	content: "✔";
}

select,
textarea {
	width: 100%;
}

textarea {
	resize: none;
	min-height: 70px;
	field-sizing: content;
}

/* Desktop view (PC, TV, etc.) */
/* media layout */
@media only screen and (min-width: 1380px) {
	main.content-center .return_btn {
		margin-top: 1.5rem;
		margin-left: 1.5rem;
	}
}

@media only screen and (min-width: 920px) {

	.account-services>header,
	.support>header {
		justify-items: left;
		grid-template-columns: 1fr auto;
	}

	article.diswid-club aside {
		display: grid;
		border: unset;
		margin-top: unset;
		box-shadow: unset;
		padding-left: 25%;
		backdrop-filter: unset;
		align-content: space-evenly;
		-webkit-backdrop-filter: unset;
	}

	nav .button {
		margin-left: 1.5rem;
	}

	#mobile_navbar {
		gap: 25px;
		grid-row: unset;
		overflow: inherit;
		text-align: right;
		grid-column: unset;
		place-content: end;
		max-height: initial;
		align-items: center;
		grid-auto-flow: column;
	}

	#mobile_navbar>div {
		grid-auto-flow: column;
	}

	.overflow-hidden-mobile {
		overflow: inherit;
	}

	.text-header {
		font-size: 4.5rem;
	}

	nav:has(#mobile_navbar:target) #on_mobile_navbar {
		display: none !important;
	}

	.only-mobile {
		display: none;
	}

	.only-desktop {
		display: initial;
	}


	.footer-legend:not(.only-mobile) {
		display: grid !important;
	}

	.mobile-full-width {
		width: auto;
	}

	.support-detail {
		padding-top: 1rem;
		margin-top: 0.5rem;
	}

	.support-detail content {
		grid-area: content;
	}

	.support-detail aside {
		--gap: 0.8rem;
		grid-area: aside;
		grid-auto-flow: initial;
		border-radius: var(--border-radius);
		border: 1px solid var(--color-effect);
		backdrop-filter: var(--filter-effects);
		-webkit-backdrop-filter: var(--filter-effects);
	}

	.support-detail aside .status {
		padding: 0;
	}

	.support-detail aside a {
		justify-self: initial;
	}

	.contact-content content {
		margin: 0 auto;
		max-width: 80%;
		padding-bottom: 0;
		border-bottom: none;
	}

	/* Invoices layout styles */
	.invoice .dashboard-header {
		display: flex;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion) {
	#dis_club_product_header::before {
		animation: none;
	}
}

@media only screen and (max-height: 620px) {
	.login_form {
		padding-top: 3rem;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light dark;

		--hue: 187;
		--sat: 5%;
		--lig: 90%;

		--c-hue: 0;
		--c-sat: 0%;
		--c-lig: 13%;
	}

	input,
	select,
	textarea,
	option {
		--lig: 88% !important;
	}

	[class*="error_box_"] img {
		filter: none !important;
	}

	.login_form p {
		--c-lig: 45% !important;
	}

	nav {
		--background-c: hsla(0, 0%, 95%, 0.3) !important;
	}

	.button-cancel {
		background-color: hsl(0, 100%, 80%);
	}

	.button-cancel:hover {
		background-color: hsl(0, 100%, 70%);
	}

	.login_form p,
	.login_form .button-cancel {
		--c-lig: 25%
	}

	#dropdown .section-dropdown {
		background-color: #F0F0F0;
	}
}

@view-transition {
	navigation: auto;
	animation-duration: 0.25s;
}

@media print {
	.no_print {
		display: none !important;
	}
}