trmd3.css

/* ==========EVERYTHING========== */
*:focus {
	outline: none;
}

/* ==========HTML========== */

html {
	font-size: 62.5%;
}

* {
	box-sizing: border-box;
}

/* ==========ROOT========== */
:root {
	/* MD3 */
	--m3-white: #ffffff;
	--m3-black: #000000;

	/* MD3 / TONAL / REFERENCE / PRIMARY */
	--m3-ref-primary-primary0: #000000;
	--m3-ref-primary-primary10: #21005d;
	--m3-ref-primary-primary20: #381e72;
	--m3-ref-primary-primary30: #4f378b;
	--m3-ref-primary-primary40: #6750a4;
	--m3-ref-primary-primary50: #7f67be;
	--m3-ref-primary-primary60: #9a82db;
	--m3-ref-primary-primary70: #b69df8;
	--m3-ref-primary-primary80: #d0bcff;
	--m3-ref-primary-primary90: #eaddff;
	--m3-ref-primary-primary95: #f6edff;
	--m3-ref-primary-primary99: #fffbfe;
	--m3-ref-primary-primary100: #000000;

	/* MD3 / TONAL / REFERENCE / SECONDARY */
	--m3-ref-secondary-secondary0: #000000;
	--m3-ref-secondary-secondary10: #1d192b;
	--m3-ref-secondary-secondary20: #332d41;
	--m3-ref-secondary-secondary30: #4a4458;
	--m3-ref-secondary-secondary40: #625b71;
	--m3-ref-secondary-secondary50: #7a7289;
	--m3-ref-secondary-secondary60: #958da5;
	--m3-ref-secondary-secondary70: #b0a7c0;
	--m3-ref-secondary-secondary80: #ccc2dc;
	--m3-ref-secondary-secondary90: #e8def8;
	--m3-ref-secondary-secondary95: #f6edff;
	--m3-ref-secondary-secondary99: #fffbfe;
	--m3-ref-secondary-secondary100: #ffffff;

	/* MD3 / TONAL / REFERENCE / TERTIARY */
	--m3-ref-tertiary-tertiary0: #000000;
	--m3-ref-tertiary-tertiary10: #31111d;
	--m3-ref-tertiary-tertiary20: #492532;
	--m3-ref-tertiary-tertiary30: #633b48;
	--m3-ref-tertiary-tertiary40: #7d5260;
	--m3-ref-tertiary-tertiary50: #986977;
	--m3-ref-tertiary-tertiary60: #b58392;
	--m3-ref-tertiary-tertiary70: #d29dac;
	--m3-ref-tertiary-tertiary80: #efb8c8;
	--m3-ref-tertiary-tertiary90: #ffd8e4;
	--m3-ref-tertiary-tertiary95: #ffecf1;
	--m3-ref-tertiary-tertiary99: #fffbfa;
	--m3-ref-tertiary-tertiary100: #ffffff;

	/* MD3 / TONAL / REFERENCE / ERROR */
	--m3-ref-error-error0: #000000;
	--m3-ref-error-error10: #410e0b;
	--m3-ref-error-error20: #601410;
	--m3-ref-error-error30: #8c1d18;
	--m3-ref-error-error40: #b3261e;
	--m3-ref-error-error50: #dc362e;
	--m3-ref-error-error60: #e46962;
	--m3-ref-error-error70: #ec928e;
	--m3-ref-error-error80: #f2b8b5;
	--m3-ref-error-error90: #f9dedc;
	--m3-ref-error-error95: #fceeee;
	--m3-ref-error-error99: #fffbf9;
	--m3-ref-error-error100: #ffffff;

	/* MD3 / TONAL / REFERENCE / NEUTRAL */
	--m3-ref-neutral-neutral0: #000000;
	--m3-ref-neutral-neutral10: #1d1b20;
	--m3-ref-neutral-neutral20: #48464c;
	--m3-ref-neutral-neutral30: #48464c;
	--m3-ref-neutral-neutral40: #605d64;
	--m3-ref-neutral-neutral50: #79767d;
	--m3-ref-neutral-neutral60: #938f96;
	--m3-ref-neutral-neutral70: #aea9b1;
	--m3-ref-neutral-neutral80: #cac5cd;
	--m3-ref-neutral-neutral90: #e6e0e9;
	--m3-ref-neutral-neutral95: #f5eff7;
	--m3-ref-neutral-neutral99: #fffbfe;
	--m3-ref-neutral-neutral100: #ffffff;

	/* MD3 / TONAL / REFERENCE / NEUTRAL VARIANT */
	--m3-ref-neutral-variant-neutral-variant0: #000000;
	--m3-ref-neutral-variant-neutral-variant10: #1d1a22;
	--m3-ref-neutral-variant-neutral-variant20: #322f37;
	--m3-ref-neutral-variant-neutral-variant30: #49454f;
	--m3-ref-neutral-variant-neutral-variant40: #605d66;
	--m3-ref-neutral-variant-neutral-variant50: #79747e;
	--m3-ref-neutral-variant-neutral-variant60: #938f99;
	--m3-ref-neutral-variant-neutral-variant70: #aea9b4;
	--m3-ref-neutral-variant-neutral-variant80: #cac4d0;
	--m3-ref-neutral-variant-neutral-variant90: #e7e0ec;
	--m3-ref-neutral-variant-neutral-variant95: #f5eefa;
	--m3-ref-neutral-variant-neutral-variant99: #fffbfe;
	--m3-ref-neutral-variant-neutral-variant100: #ffffff;

	/* MD3 / LIGHT / PRIMARY */
	--m3-sys-light-primary: #6750a4;
	--m3-sys-light-on-primary: #ffffff;
	--m3-sys-light-primary-container: #eaddff;
	--m3-sys-light-on-primary-container: #21005d;
	--m3-sys-light-primary-fixed: #eaddff;
	--m3-sys-light-on-primary-fixed: #21005d;
	--m3-sys-light-primary-fixed-dim: #d0bcff;
	--m3-sys-light-on-primary-fixed-variant: #4f378b;

	/* MD3 / LIGHT / SECONDARY */
	--m3-sys-light-secondary: #625b71;
	--m3-sys-light-on-secondary: #ffffff;
	--m3-sys-light-secondary-container: #e8def8;
	--m3-sys-light-on-secondary-container: #1d192b;
	--m3-sys-light-secondary-fixed: #e8def8;
	--m3-sys-light-on-secondary-fixed: #1d192b;
	--m3-sys-light-secondary-fixed-dim: #ccc2dc;
	--m3-sys-light-on-secondary-fixed-variant: #4a4458;

	/* MD3 / LIGHT / TERTIARY */
	--m3-sys-light-tertiary: #7d5260;
	--m3-sys-light-on-tertiary: #ffffff;
	--m3-sys-light-tertiary-container: #ffd8e4;
	--m3-sys-light-on-tertiary-container: #31111d;
	--m3-sys-light-tertiary-fixed: #ffd8e4;
	--m3-sys-light-on-tertiary-fixed: #31111d;
	--m3-sys-light-tertiary-fixed-dim: #efb8c8;
	--m3-sys-light-on-tertiary-fixed-variant: #633b48;

	/* MD3 / LIGHT / ERROR */
	--m3-sys-light-error: #b3261e;
	--m3-sys-light-on-error: #ffffff;
	--m3-sys-light-error-container: #f9dedc;
	--m3-sys-light-on-error-container: #410e0b;

	/* MD3 / LIGHT / SURFACE */
	--m3-sys-light-surface-dim: #ded8e1;
	--m3-sys-light-surface: #fef7ff;
	--m3-sys-light-surface-bright: #fef7ff;
	--m3-sys-light-surface-container-lowest: #ffffff;
	--m3-sys-light-surface-container-low: #f7f2fa;
	--m3-sys-light-surface-container: #f3edf7;
	--m3-sys-light-surface-container-high: #ece6f0;
	--m3-sys-light-surface-container-highest: #e6e0e9;
	--m3-sys-light-surface: #fef7ff;
	--m3-sys-light-on-surface: #1d1b20;
	--m3-sys-light-on-surface-variant: #49454f;
	--m3-sys-light-outline: #79747e;
	--m3-sys-light-outline-variant: #cac4d0;
	--m3-sys-light-inverse-surface: #322f35;
	--m3-sys-light-inverse-on-surface: #f5eff7;
	--m3-sys-light-on-primary-container: #21005d;
	--m3-sys-light-inverse-primary: #d0bcff;
	--m3-sys-light-scrim: #000000;
	--m3-sys-light-shadow: #000000;

	/* MD3 / LIGHT / ELEVATION */
	--m3-elevation-light-1: 0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3),
		0rem 0.1rem 0.3rem 0.1rem rgba(0, 0, 0, 0.15);
	--m3-elevation-light-2: 0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3),
		0rem 0.2rem 0.6rem 0.2rem rgba(0, 0, 0, 0.15);
	--m3-elevation-light-3: 0rem 0.4rem 0.8rem 0.3rem rgba(0, 0, 0, 0.15),
		0rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
	--m3-elevation-light-4: 0rem 0.6rem 1rem 0.4rem rgba(0, 0, 0, 0.15),
		0rem 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
	--m3-elevation-light-5: 0rem 0.8rem 1.2rem 0.6rem rgba(0, 0, 0, 0.15),
		0rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

	/* MD3 / DARK / PRIMARY */
	--m3-sys-dark-primary: #d0bcff;
	--m3-sys-dark-on-primary: #381e72;
	--m3-sys-dark-primary-container: #4e3689;
	--m3-sys-dark-on-primary-container: #e8dbfd;
	--m3-sys-dark-primary-fixed: #eaddff;
	--m3-sys-dark-on-primary-fixed: #21005d;
	--m3-sys-dark-primary-fixed-dim: #d0bcff;
	--m3-sys-dark-on-primary-fixed-variant: #4f378b;

	/* MD3 / DARK / SECONDARY */
	--m3-sys-dark-secondary: #ccc2dc;
	--m3-sys-dark-on-secondary: #332d41;
	--m3-sys-dark-secondary-container: #4a4458;
	--m3-sys-dark-on-secondary-container: #e8def8;
	--m3-sys-dark-secondary-fixed: #e8def8;
	--m3-sys-dark-on-secondary-fixed: #1d192b;
	--m3-sys-dark-secondary-fixed-dim: #ccc2dc;
	--m3-sys-dark-on-secondary-fixed-variant: #4a4458;

	/* MD3 / DARK / TERTIARY */
	--m3-sys-dark-tertiary: #efb8c8;
	--m3-sys-dark-on-tertiary: #492532;
	--m3-sys-dark-tertiary-container: #633b48;
	--m3-sys-dark-on-tertiary-container: #ffd8e4;
	--m3-sys-dark-tertiary-fixed: #ffd8e4;
	--m3-sys-dark-on-tertiary-fixed: #31111d;
	--m3-sys-dark-tertiary-fixed-dim: #efb8c8;
	--m3-sys-dark-on-tertiary-fixed-variant: #633b48;

	/* MD3 / DARK / ERROR */
	--m3-sys-dark-error: #f2b8b5;
	--m3-sys-dark-on-error: #601410;
	--m3-sys-dark-error-container: #8c1d18;
	--m3-sys-dark-on-error-container: #f9dedc;

	/* MD3 / DARK / SURFACE */
	--m3-sys-dark-surface-dim: #141218;
	--m3-sys-dark-surface: #141218;
	--m3-sys-dark-surface-bright: #3b383e;
	--m3-sys-dark-surface-container-lowest: #0f0d13;
	--m3-sys-dark-surface-container-low: #1d1b20;
	--m3-sys-dark-surface-container: #211f26;
	--m3-sys-dark-surface-container-high: #2b2930;
	--m3-sys-dark-surface-container-highest: #36343b;
	--m3-sys-dark-surface: #141218;
	--m3-sys-dark-on-surface: #e6e0e9;
	--m3-sys-dark-on-surface-variant: #cac4d0;
	--m3-sys-dark-outline: #938f99;
	--m3-sys-dark-outline-variant: #49454f;
	--m3-sys-dark-inverse-surface: #e6e0e9;
	--m3-sys-dark-inverse-on-surface: #322f35;
	--m3-sys-dark-inverse-primary: #6750a4;
	--m3-sys-dark-scrim: #000000;
	--m3-sys-dark-shadow: #000000;

	/* MD3 / DARK / ELEVATION */
	--m3-elevation-dark-1: 0rem 0.1rem 0.2rem 0rem 0.1rem 0.3rem 1rem
			rgba(0, 0, 0, 0.15),
		0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
	--m3-elevation-dark-2: 0rem 0.2rem 0.6rem 0.2rem rgba(0, 0, 0, 0.15),
		0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
	--m3-elevation-dark-3: 0rem 0.4rem 0.8rem 0.3rem rgba(0, 0, 0, 0.15),
		0rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
	--m3-elevation-dark-4: 0rem 0.6rem 1rem 0.4rem rgba(0, 0, 0, 0.15),
		0rem 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
	--m3-elevation-dark-5: 0rem 0.8rem 1.2rem 0.6rem rgba(0, 0, 0, 0.15),
		0rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

	/* MD3 / LIGHT / STATE LAYERS / PRIMARY */
	--m3-state-layers-light-primary-opacity-08: rgba(103, 80, 164, 0.08);
	--m3-state-layers-light-primary-opacity-12: rgba(103, 80, 164, 0.12);
	--m3-state-layers-light-primary-opacity-16: rgba(103, 80, 164, 0.16);
	--m3-state-layers-light-on-primary-opacity-08: rgba(255, 255, 255, 0.08);
	--m3-state-layers-light-on-primary-opacity-12: rgb(255, 255, 255, 0.12);
	--m3-state-layers-light-on-primary-opacity-16: rgb(255, 255, 255, 0.16);
	--m3-state-layers-light-primary-container-opacity-08: rgba(
		234,
		221,
		255,
		0.08
	);
	--m3-state-layers-light-primary-container-opacity-12: rgba(
		234,
		221,
		255,
		0.12
	);
	--m3-state-layers-light-primary-container-opacity-16: rgba(
		234,
		221,
		255,
		0.16
	);
	--m3-state-layers-light-on-primary-container-opacity-08: rgba(
		33,
		0,
		93,
		0.08
	);
	--m3-state-layers-light-on-primary-container-opacity-12: rgba(
		33,
		0,
		93,
		0.12
	);
	--m3-state-layers-light-on-primary-container-opacity-16: rgba(
		33,
		0,
		93,
		0.16
	);
	--m3-state-layers-light-primary-fixed-opacity-08: rgba(234, 221, 255, 0.08);
	--m3-state-layers-light-primary-fixed-opacity-12: rgba(234, 221, 255, 0.12);
	--m3-state-layers-light-primary-fixed-opacity-16: rgba(234, 221, 255, 0.16);
	--m3-state-layers-light-on-primary-fixed-opacity-08: rgba(33, 0, 93, 0.08);
	--m3-state-layers-light-on-primary-fixed-opacity-12: rgba(33, 0, 93, 0.12);
	--m3-state-layers-light-on-primary-fixed-opacity-16: rgba(33, 0, 93, 0.16);
	--m3-state-layers-light-primary-fixed-dim-opacity-08: rgba(
		208,
		188,
		255,
		0.08
	);
	--m3-state-layers-light-primary-fixed-dim-opacity-12: rgba(
		208,
		188,
		255,
		0.12
	);
	--m3-state-layers-light-primary-fixed-dim-opacity-16: rgba(
		208,
		188,
		255,
		0.16
	);
	--m3-state-layers-light-on-primary-fixed-variant-opacity-08: rgba(
		79,
		55,
		139,
		0.08
	);
	--m3-state-layers-light-on-primary-fixed-variant-opacity-12: rgba(
		79,
		55,
		139,
		0.12
	);
	--m3-state-layers-light-on-primary-fixed-variant-opacity-16: rgba(
		79,
		55,
		139,
		0.16
	);

	/* MD3 / LIGHT / STATE LAYERS / SECONDARY */
	--m3-state-layers-light-secondary-opacity-08: rgba(98, 91, 113, 0.08);
	--m3-state-layers-light-secondary-opacity-12: rgba(98, 91, 113, 0.12);
	--m3-state-layers-light-secondary-opacity-16: rgba(98, 91, 113, 0.16);
	--m3-state-layers-light-on-secondary-opacity-08: rgba(255, 255, 255, 0.08);
	--m3-state-layers-light-on-secondary-opacity-12: rgba(255, 255, 255, 0.12);
	--m3-state-layers-light-on-secondary-opacity-16: rgba(255, 255, 255, 0.16);
	--m3-state-layers-light-secondary-container-opacity-08: rgba(
		232,
		222,
		248,
		0.08
	);
	--m3-state-layers-light-secondary-container-opacity-12: rgba(
		232,
		222,
		248,
		0.12
	);
	--m3-state-layers-light-secondary-container-opacity-16: rgba(
		232,
		222,
		248,
		0.16
	);
	--m3-state-layers-light-on-secondary-container-opacity-08: rgba(
		29,
		25,
		43,
		0.08
	);
	--m3-state-layers-light-on-secondary-container-opacity-12: rgba(
		29,
		25,
		43,
		0.12
	);
	--m3-state-layers-light-on-secondary-container-opacity-16: rgba(
		29,
		25,
		43,
		0.16
	);
	--m3-state-layers-light-secondary-fixed-opacity-08: rgba(232, 222, 248, 0.08);
	--m3-state-layers-light-secondary-fixed-opacity-12: rgba(232, 222, 248, 0.12);
	--m3-state-layers-light-secondary-fixed-opacity-16: rgba(232, 222, 248, 0.16);
	--m3-state-layers-light-on-secondary-fixed-opacity-08: rgba(29, 25, 43, 0.08);
	--m3-state-layers-light-on-secondary-fixed-opacity-12: rgba(29, 25, 43, 0.12);
	--m3-state-layers-light-on-secondary-fixed-opacity-16: rgba(29, 25, 43, 0.16);
	--m3-state-layers-light-secondary-fixed-dim-opacity-08: rgba(
		204,
		194,
		220,
		0.08
	);
	--m3-state-layers-light-secondary-fixed-dim-opacity-12: rgba(
		204,
		194,
		220,
		0.12
	);
	--m3-state-layers-light-secondary-fixed-dim-opacity-16: rgba(
		204,
		194,
		220,
		0.16
	);
	--m3-state-layers-light-on-secondary-fixed-variant-opacity-08: rgba(
		74,
		68,
		88,
		0.08
	);
	--m3-state-layers-light-on-secondary-fixed-variant-opacity-12: rgba(
		74,
		68,
		88,
		0.12
	);
	--m3-state-layers-light-on-secondary-fixed-variant-opacity-16: rgba(
		74,
		68,
		88,
		0.16
	);

	/* MD3 / LIGHT / STATE LAYERS / TERTIARY */
	--m3-state-layers-light-tertiary-opacity-08: rgba(125, 82, 96, 0.08);
	--m3-state-layers-light-tertiary-opacity-12: rgba(125, 82, 96, 0.12);
	--m3-state-layers-light-tertiary-opacity-16: rgba(125, 82, 96, 0.16);
	--m3-state-layers-light-on-tertiary-opacity-08: rgba(255, 255, 255, 0.08);
	--m3-state-layers-light-on-tertiary-opacity-12: rgba(255, 255, 255, 0.12);
	--m3-state-layers-light-on-tertiary-opacity-16: rgba(255, 255, 255, 0.16);
	--m3-state-layers-light-tertiary-container-opacity-08: rgba(
		255,
		216,
		228,
		0.08
	);
	--m3-state-layers-light-tertiary-container-opacity-12: rgba(
		255,
		216,
		228,
		0.12
	);
	--m3-state-layers-light-tertiary-container-opacity-16: rgba(
		255,
		216,
		228,
		0.16
	);
	--m3-state-layers-light-on-tertiary-container-opacity-08: rgba(
		49,
		17,
		29,
		0.08
	);
	--m3-state-layers-light-on-tertiary-container-opacity-12: rgba(
		49,
		17,
		29,
		0.12
	);
	--m3-state-layers-light-on-tertiary-container-opacity-16: rgba(
		49,
		17,
		29,
		0.16
	);
	--m3-state-layers-light-tertiary-fixed-opacity-08: rgba(255, 216, 228, 0.08);
	--m3-state-layers-light-tertiary-fixed-opacity-12: rgba(255, 216, 228, 0.12);
	--m3-state-layers-light-tertiary-fixed-opacity-16: rgba(255, 216, 228, 0.16);
	--m3-state-layers-light-on-tertiary-fixed-opacity-08: rgba(49, 17, 29, 0.08);
	--m3-state-layers-light-on-tertiary-fixed-opacity-12: rgba(49, 17, 29, 0.12);
	--m3-state-layers-light-on-tertiary-fixed-opacity-16: rgba(49, 17, 29, 0.16);
	--m3-state-layers-light-tertiary-fixed-dim-opacity-08: rgba(
		239,
		184,
		200,
		0.08
	);
	--m3-state-layers-light-tertiary-fixed-dim-opacity-12: rgba(
		239,
		184,
		200,
		0.12
	);
	--m3-state-layers-light-tertiary-fixed-dim-opacity-16: rgba(
		239,
		184,
		200,
		0.16
	);
	--m3-state-layers-light-on-tertiary-fixed-variant-opacity-08: rgba(
		99,
		59,
		72,
		0.08
	);
	--m3-state-layers-light-on-tertiary-fixed-variant-opacity-12: rgba(
		99,
		59,
		72,
		0.12
	);
	--m3-state-layers-light-on-tertiary-fixed-variant-opacity-16: rgba(
		99,
		59,
		72,
		0.16
	);

	/* MD3 / LIGHT / STATE LAYERS / ERROR */
	--m3-state-layers-light-error-opacity-08: rgba(179, 38, 30, 0.08);
	--m3-state-layers-light-error-opacity-12: rgba(179, 38, 30, 0.12);
	--m3-state-layers-light-error-opacity-16: rgba(179, 38, 30, 0.16);
	--m3-state-layers-light-on-error-opacity-08: rgba(255, 255, 255, 0.08);
	--m3-state-layers-light-on-error-opacity-12: rgba(255, 255, 255, 0.12);
	--m3-state-layers-light-on-error-opacity-16: rgba(255, 255, 255, 0.16);
	--m3-state-layers-light-error-container-opacity-08: rgba(249, 222, 220, 0.08);
	--m3-state-layers-light-error-container-opacity-12: rgba(249, 222, 220, 0.12);
	--m3-state-layers-light-error-container-opacity-16: rgba(249, 222, 220, 0.16);

	/* MD3 / LIGHT / STATE LAYERS / SURFACE */
	--m3-state-layers-light-surface-dim-opacity-08: rgba(222, 216, 225, 0.08);
	--m3-state-layers-light-surface-dim-opacity-12: rgba(222, 216, 225, 0.12);
	--m3-state-layers-light-surface-dim-opacity-16: rgba(222, 216, 225, 0.16);
	--m3-state-layers-light-surface-opacity-08: rgba(254, 247, 255, 0.08);
	--m3-state-layers-light-surface-opacity-12: rgba(254, 247, 255, 0.12);
	--m3-state-layers-light-surface-opacity-16: rgba(254, 247, 255, 0.16);
	--m3-state-layers-light-surface-bright-opacity-08: rgba(254, 247, 255, 0.08);
	--m3-state-layers-light-surface-bright-opacity-12: rgba(254, 247, 255, 0.12);
	--m3-state-layers-light-surface-bright-opacity-16: rgba(254, 247, 255, 0.16);
	--m3-state-layers-surface-container-lowest-opacity-08: rgba(
		255,
		255,
		255,
		0.08
	);
	--m3-state-layers-surface-container-lowest-opacity-12: rgba(
		255,
		255,
		255,
		0.12
	);
	--m3-state-layers-surface-container-lowest-opacity-16: rgba(
		255,
		255,
		255,
		0.16
	);
	--m3-state-layers-surface-container-low-opacity-08: rgba(247, 242, 250, 0.08);
	--m3-state-layers-surface-container-low-opacity-12: rgba(247, 242, 250, 0.12);
	--m3-state-layers-surface-container-low-opacity-16: rgba(247, 242, 250, 0.16);
	--m3-state-layers-surface-container-opacity-08: rgba(243, 237, 247, 0.08);
	--m3-state-layers-surface-container-opacity-12: rgba(243, 237, 247, 0.12);
	--m3-state-layers-surface-container-opacity-16: rgba(243, 237, 247, 0.16);
	--m3-state-layers-surface-container-high-opacity-08: rgba(
		236,
		230,
		240,
		0.08
	);
	--m3-state-layers-surface-container-high-opacity-12: rgba(
		236,
		230,
		240,
		0.12
	);
	--m3-state-layers-surface-container-high-opacity-16: rgba(
		236,
		230,
		240,
		0.16
	);

	--m3-state-layers-surface-container-highest-opacity-08: rgba(
		230,
		224,
		233,
		0.08
	);
	--m3-state-layers-surface-container-highest-opacity-12: rgba(
		230,
		224,
		233,
		0.12
	);
	--m3-state-layers-surface-container-highest-opacity-16: rgba(
		230,
		224,
		233,
		0.16
	);
	--m3-state-layers-light-surface-opacity-08: rgba(254, 247, 255, 0.08);
	--m3-state-layers-light-surface-opacity-12: rgba(254, 247, 255, 0.12);
	--m3-state-layers-light-surface-opacity-16: rgba(254, 247, 255, 0.16);
	--m3-state-layers-light-on-surface-opacity-08: rgba(29, 27, 32, 0.08);
	--m3-state-layers-light-on-surface-opacity-12: rgba(29, 27, 32, 0.12);
	--m3-state-layers-light-on-surface-opacity-16: rgba(29, 27, 32, 0.16);
	--m3-state-layers-light-on-surface-variant-opacity-08: rgba(73, 69, 79, 0.08);
	--m3-state-layers-light-on-surface-variant-opacity-12: rgba(73, 69, 79, 0.12);
	--m3-state-layers-light-on-surface-variant-opacity-16: rgba(73, 69, 79, 0.16);
	--m3-state-layers-light-outline-opacity-08: rgba(121, 116, 126, 0.08);
	--m3-state-layers-light-outline-opacity-12: rgba(121, 116, 126, 0.12);
	--m3-state-layers-light-outline-opacity-16: rgba(121, 116, 126, 0.16);
	--m3-state-layers-light-outline-variant-opacity-08: rgba(202, 196, 208, 0.08);
	--m3-state-layers-light-outline-variant-opacity-12: rgba(202, 196, 208, 0.12);
	--m3-state-layers-light-outline-variant-opacity-16: rgba(202, 196, 208, 0.16);
	--m3-state-layers-light-invere-surface-opacity-08: rgba(50, 47, 53, 0.08);
	--m3-state-layers-light-invere-surface-opacity-12: rgba(50, 47, 53, 0.12);
	--m3-state-layers-light-invere-surface-opacity-16: rgba(50, 47, 53, 0.16);
	--m3-state-layers-light-inverse-on-surface-opacity-08: rgba(
		245,
		239,
		247,
		0.08
	);
	--m3-state-layers-light-inverse-on-surface-opacity-12: rgba(
		245,
		239,
		247,
		0.12
	);
	--m3-state-layers-light-inverse-on-surface-opacity-16: rgba(
		245,
		239,
		247,
		0.16
	);
	--m3-state-layers-light-on-primary-container-opacity-08: rgba(
		33,
		0,
		93,
		0.08
	);
	--m3-state-layers-light-on-primary-container-opacity-12: rgba(
		33,
		0,
		93,
		0.12
	);
	--m3-state-layers-light-on-primary-container-opacity-16: rgba(
		33,
		0,
		93,
		0.16
	);
	--m3-state-layers-light-inverse-primary-opacity-08: rgba(208, 188, 255, 0.08);
	--m3-state-layers-light-inverse-primary-opacity-12: rgba(208, 188, 255, 0.12);
	--m3-state-layers-light-inverse-primary-opacity-16: rgba(208, 188, 255, 0.16);
	--m3-state-layers-light-scrim-opacity-08: rgba(0, 0, 0, 0.08);
	--m3-state-layers-light-scrim-opacity-12: rgba(0, 0, 0, 0.12);
	--m3-state-layers-light-scrim-opacity-16: rgba(0, 0, 0, 0.16);
	--m3-state-layers-light-shadow-opacity-08: rgba(0, 0, 0, 0.08);
	--m3-state-layers-light-shadow-opacity-12: rgba(0, 0, 0, 0.12);
	--m3-state-layers-light-shadow-opacity-16: rgba(0, 0, 0, 0.16);

	/* MD3 / DARK / STATE LAYERS / PRIMARY */
	--m3-state-layers-dark-primary-opacity-08: rgba(208, 188, 255, 0.08);
	--m3-state-layers-dark-primary-opacity-12: rgba(208, 188, 255, 0.12);
	--m3-state-layers-dark-primary-opacity-16: rgba(208, 188, 255, 0.16);
	--m3-state-layers-dark-on-primary-opacity-08: rgba(56, 30, 114, 0.08);
	--m3-state-layers-dark-on-primary-opacity-12: rgba(56, 30, 114, 0.12);
	--m3-state-layers-dark-on-primary-opacity-16: rgba(56, 30, 114, 0.16);
	--m3-state-layers-dark-primary-container-opacity-08: rgba(78, 54, 137, 0.08);
	--m3-state-layers-dark-primary-container-opacity-12: rgba(78, 54, 137, 0.12);
	--m3-state-layers-dark-primary-container-opacity-16: rgba(78, 54, 137, 0.16);
	--m3-state-layers-dark-on-primary-container-opacity-08: rgba(
		232,
		219,
		253,
		0.08
	);
	--m3-state-layers-dark-on-primary-container-opacity-12: rgba(
		232,
		219,
		253,
		0.12
	);
	--m3-state-layers-dark-on-primary-container-opacity-16: rgba(
		232,
		219,
		253,
		0.16
	);
	--m3-state-layers-dark-primary-fixed-opacity-08: rgba(234, 221, 255, 0.08);
	--m3-state-layers-dark-primary-fixed-opacity-12: rgba(234, 221, 255, 0.12);
	--m3-state-layers-dark-primary-fixed-opacity-16: rgba(234, 221, 255, 0.16);
	--m3-state-layers-dark-on-primary-fixed-opacity-08: rgba(33, 0, 93, 0.08);
	--m3-state-layers-dark-on-primary-fixed-opacity-12: rgba(33, 0, 93, 0.12);
	--m3-state-layers-dark-on-primary-fixed-opacity-16: rgba(33, 0, 93, 0.16);
	--m3-state-layers-dark-primary-fixed-dim-opacity-08: rgba(
		208,
		188,
		255,
		0.08
	);
	--m3-state-layers-dark-primary-fixed-dim-opacity-12: rgba(
		208,
		188,
		255,
		0.12
	);
	--m3-state-layers-dark-primary-fixed-dim-opacity-16: rgba(
		208,
		188,
		255,
		0.16
	);
	--m3-state-layers-dark-on-primary-fixed-variant-opacity-08: rgba(
		79,
		55,
		139,
		0.08
	);
	--m3-state-layers-dark-on-primary-fixed-variant-opacity-12: rgba(
		79,
		55,
		139,
		0.12
	);
	--m3-state-layers-dark-on-primary-fixed-variant-opacity-16: rgba(
		79,
		55,
		139,
		0.16
	);

	/* MD3 / DARK / STATE LAYERS / SECONDARY */
	--m3-state-layers-dark-secondary-opacity-08: rgba(204, 194, 219, 0.08);
	--m3-state-layers-dark-secondary-opacity-12: rgba(204, 194, 219, 0.12);
	--m3-state-layers-dark-secondary-opacity-16: rgba(204, 194, 219, 0.16);
	--m3-state-layers-dark-on-secondary-opacity-08: rgba(51, 45, 65, 0.08);
	--m3-state-layers-dark-on-secondary-opacity-12: rgba(51, 45, 65, 0.12);
	--m3-state-layers-dark-on-secondary-opacity-16: rgba(51, 45, 65, 0.16);
	--m3-state-layers-dark-secondary-container-opacity-08: rgba(74, 68, 88, 0.08);
	--m3-state-layers-dark-secondary-container-opacity-12: rgba(74, 68, 88, 0.12);
	--m3-state-layers-dark-secondary-container-opacity-16: rgba(74, 68, 88, 0.16);
	--m3-state-layers-dark-on-secondary-container-opacity-08: rgba(
		232,
		222,
		248,
		0.08
	);
	--m3-state-layers-dark-on-secondary-container-opacity-12: rgba(
		232,
		222,
		248,
		0.12
	);
	--m3-state-layers-dark-on-secondary-container-opacity-16: rgba(
		232,
		222,
		248,
		0.16
	);
	--m3-state-layers-dark-secondary-fixed-opacity-08: rgba(232, 222, 248, 0.08);
	--m3-state-layers-dark-secondary-fixed-opacity-12: rgba(232, 222, 248, 0.12);
	--m3-state-layers-dark-secondary-fixed-opacity-16: rgba(232, 222, 248, 0.16);
	--m3-state-layers-dark-on-secondary-fixed-opacity-08: rgba(29, 25, 43, 0.08);
	--m3-state-layers-dark-on-secondary-fixed-opacity-12: rgba(29, 25, 43, 0.12);
	--m3-state-layers-dark-on-secondary-fixed-opacity-16: rgba(29, 25, 43, 0.16);
	--m3-state-layers-dark-secondary-fixed-dim-opacity-08: rgba(
		204,
		194,
		220,
		0.08
	);
	--m3-state-layers-dark-secondary-fixed-dim-opacity-12: rgba(
		204,
		194,
		220,
		0.12
	);
	--m3-state-layers-dark-secondary-fixed-dim-opacity-16: rgba(
		204,
		194,
		220,
		0.16
	);
	--m3-state-layers-dark-on-secondary-fixed-variant-opacity-08: rgba(
		74,
		68,
		88,
		0.08
	);
	--m3-state-layers-dark-on-secondary-fixed-variant-opacity-12: rgba(
		74,
		68,
		88,
		0.12
	);
	--m3-state-layers-dark-on-secondary-fixed-variant-opacity-16: rgba(
		74,
		68,
		88,
		0.16
	);

	/* MD3 / DARK / STATE LAYERS / TERTIARY */
	--m3-state-layers-dark-tertiary-opacity-08: rgba(239, 184, 200, 0.08);
	--m3-state-layers-dark-tertiary-opacity-12: rgba(239, 184, 200, 0.12);
	--m3-state-layers-dark-tertiary-opacity-16: rgba(239, 184, 200, 0.16);
	--m3-state-layers-dark-on-tertiary-opacity-08: rgba(73, 37, 50, 0.08);
	--m3-state-layers-dark-on-tertiary-opacity-12: rgba(73, 37, 50, 0.12);
	--m3-state-layers-dark-on-tertiary-opacity-16: rgba(73, 37, 50, 0.16);
	--m3-state-layers-dark-tertiary-container-opacity-08: rgba(99, 59, 72, 0.08);
	--m3-state-layers-dark-tertiary-container-opacity-12: rgba(99, 59, 72, 0.12);
	--m3-state-layers-dark-tertiary-container-opacity-16: rgba(99, 59, 72, 0.16);
	--m3-state-layers-dark-on-tertiary-container-opacity-08: rgba(
		255,
		216,
		228,
		0.08
	);
	--m3-state-layers-dark-on-tertiary-container-opacity-12: rgba(
		255,
		216,
		228,
		0.12
	);
	--m3-state-layers-dark-on-tertiary-container-opacity-16: rgba(
		255,
		216,
		228,
		0.16
	);
	--m3-state-layers-dark-tertiary-fixed-opacity-08: rgba(255, 216, 228, 0.08);
	--m3-state-layers-dark-tertiary-fixed-opacity-12: rgba(255, 216, 228, 0.12);
	--m3-state-layers-dark-tertiary-fixed-opacity-16: rgba(255, 216, 228, 0.16);
	--m3-state-layers-dark-on-tertiary-fixed-opacity-08: rgba(49, 17, 29, 0.08);
	--m3-state-layers-dark-on-tertiary-fixed-opacity-12: rgba(49, 17, 29, 0.12);
	--m3-state-layers-dark-on-tertiary-fixed-opacity-16: rgba(49, 17, 29, 0.16);
	--m3-state-layers-dark-tertiary-fixed-dim-opacity-08: rgba(
		239,
		184,
		200,
		0.08
	);
	--m3-state-layers-dark-tertiary-fixed-dim-opacity-12: rgba(
		239,
		184,
		200,
		0.12
	);
	--m3-state-layers-dark-tertiary-fixed-dim-opacity-16: rgba(
		239,
		184,
		200,
		0.16
	);
	--m3-state-layers-dark-on-tertiary-fixed-variant-opacity-08: rgba(
		99,
		59,
		72,
		0.08
	);
	--m3-state-layers-dark-on-tertiary-fixed-variant-opacity-12: rgba(
		99,
		59,
		72,
		0.12
	);
	--m3-state-layers-dark-on-tertiary-fixed-variant-opacity-16: rgba(
		99,
		59,
		72,
		0.16
	);

	/* MD3 / DARK / STATE LAYERS / ERROR */
	--m3-state-layers-dark-error-opacity-08: rgba(242, 184, 181, 0.08);
	--m3-state-layers-dark-error-opacity-12: rgba(242, 184, 181, 0.12);
	--m3-state-layers-dark-error-opacity-16: rgba(242, 184, 181, 0.16);
	--m3-state-layers-dark-on-error-opacity-08: rgba(242, 184, 181, 0.08);
	--m3-state-layers-dark-on-error-opacity-12: rgba(242, 184, 181, 0.12);
	--m3-state-layers-dark-on-error-opacity-16: rgba(242, 184, 181, 0.16);
	--m3-state-layers-dark-error-container-opacity-08: rgba(96, 20, 16, 0.08);
	--m3-state-layers-dark-error-container-opacity-12: rgba(96, 20, 16, 0.12);
	--m3-state-layers-dark-error-container-opacity-16: rgba(96, 20, 16, 0.16);

	/* MD3 / DARK / STATE LAYERS / SURFACE */
	--m3-state-layers-dark-surface-dim-opacity-08: rgba(20, 18, 24, 0.08);
	--m3-state-layers-dark-surface-dim-opacity-12: rgba(20, 18, 24, 0.12);
	--m3-state-layers-dark-surface-dim-opacity-16: rgba(20, 18, 24, 0.16);
	--m3-state-layers-dark-surface-opacity-08: rgba(20, 18, 24, 0.08);
	--m3-state-layers-dark-surface-opacity-12: rgba(20, 18, 24, 0.12);
	--m3-state-layers-dark-surface-opacity-16: rgba(20, 18, 24, 0.16);
	--m3-state-layers-dark-surface-bright-opacity-08: rgba(59, 56, 62, 0.08);
	--m3-state-layers-dark-surface-bright-opacity-12: rgba(59, 56, 62, 0.12);
	--m3-state-layers-dark-surface-bright-opacity-16: rgba(59, 56, 62, 0.16);
	--m3-state-layers-surface-container-lowest-opacity-08: rgba(15, 13, 19, 0.08);
	--m3-state-layers-surface-container-lowest-opacity-12: rgba(15, 13, 19, 0.12);
	--m3-state-layers-surface-container-lowest-opacity-16: rgba(15, 13, 19, 0.16);
	--m3-state-layers-surface-container-low-opacity-08: rgba(29, 27, 32, 0.08);
	--m3-state-layers-surface-container-low-opacity-12: rgba(29, 27, 32, 0.12);
	--m3-state-layers-surface-container-low-opacity-16: rgba(29, 27, 32, 0.16);
	--m3-state-layers-surface-container-opacity-08: rgba(33, 31, 38, 0.08);
	--m3-state-layers-surface-container-opacity-12: rgba(33, 31, 38, 0.12);
	--m3-state-layers-surface-container-opacity-16: rgba(33, 31, 38, 0.16);
	--m3-state-layers-surface-container-high-opacity-08: rgba(43, 41, 48, 0.08);
	--m3-state-layers-surface-container-high-opacity-12: rgba(43, 41, 48, 0.12);
	--m3-state-layers-surface-container-high-opacity-16: rgba(43, 41, 48, 0.16);
	--m3-state-layers-surface-container-highest-opacity-08: rgba(
		54,
		52,
		59,
		0.08
	);
	--m3-state-layers-surface-container-highest-opacity-12: rgba(
		54,
		52,
		59,
		0.12
	);
	--m3-state-layers-surface-container-highest-opacity-16: rgba(
		54,
		52,
		59,
		0.16
	);
	--m3-state-layers-dark-surface-opacity-08: rgba(20, 18, 24, 0.08);
	--m3-state-layers-dark-surface-opacity-12: rgba(20, 18, 24, 0.12);
	--m3-state-layers-dark-surface-opacity-16: rgba(20, 18, 24, 0.16);
	--m3-state-layers-dark-on-surface-opacity-08: rgba(230, 224, 233, 0.08);
	--m3-state-layers-dark-on-surface-opacity-12: rgba(230, 224, 233, 0.12);
	--m3-state-layers-dark-on-surface-opacity-16: rgba(230, 224, 233, 0.16);
	--m3-state-layers-dark-on-surface-variant-opacity-08: rgba(
		202,
		196,
		208,
		0.08
	);
	--m3-state-layers-dark-on-surface-variant-opacity-12: rgba(
		202,
		196,
		208,
		0.12
	);
	--m3-state-layers-dark-on-surface-variant-opacity-16: rgba(
		202,
		196,
		208,
		0.16
	);
	--m3-state-layers-dark-outline-opacity-08: rgba(147, 143, 153, 0.08);
	--m3-state-layers-dark-outline-opacity-12: rgba(147, 143, 153, 0.12);
	--m3-state-layers-dark-outline-opacity-16: rgba(147, 143, 153, 0.16);
	--m3-state-layers-dark-outline-variant-opacity-08: rgba(73, 69, 79, 0.08);
	--m3-state-layers-dark-outline-variant-opacity-12: rgba(73, 69, 79, 0.12);
	--m3-state-layers-dark-outline-variant-opacity-16: rgba(73, 69, 79, 0.16);
	--m3-state-layers-dark-invere-surface-opacity-08: rgba(230, 224, 233, 0.08);
	--m3-state-layers-dark-invere-surface-opacity-12: rgba(230, 224, 233, 0.12);
	--m3-state-layers-dark-invere-surface-opacity-16: rgba(230, 224, 233, 0.16);
	--m3-state-layers-dark-inverse-on-surface-opacity-08: rgba(50, 47, 53, 0.08);
	--m3-state-layers-dark-inverse-on-surface-opacity-12: rgba(50, 47, 53, 0.12);
	--m3-state-layers-dark-inverse-on-surface-opacity-16: rgba(50, 47, 53, 0.16);
	--m3-state-layers-dark-inverse-primary-opacity-08: rgba(103, 80, 164, 0.08);
	--m3-state-layers-dark-inverse-primary-opacity-12: rgba(103, 80, 164, 0.12);
	--m3-state-layers-dark-inverse-primary-opacity-16: rgba(103, 80, 164, 0.16);
	--m3-state-layers-dark-scrim-opacity-08: rgba(0, 0, 0, 0.08);
	--m3-state-layers-dark-scrim-opacity-12: rgba(0, 0, 0, 0.12);
	--m3-state-layers-dark-scrim-opacity-16: rgba(0, 0, 0, 0.16);
	--m3-state-layers-dark-shadow-opacity-08: rgba(0, 0, 0, 0.08);
	--m3-state-layers-dark-shadow-opacity-12: rgba(0, 0, 0, 0.12);
	--m3-state-layers-dark-shadow-opacity-16: rgba(0, 0, 0, 0.16);

	/* M3 / COMPOSITES / LIGHT */
	--m3-composite-light-primary-passthrough-on-primary-opacity-08: #735eab;
	--m3-composite-light-primary-passthrough-on-primary-opacity-12: #7965af;
	--m3-composite-light-surface-container-low-passthrough-primary-opacity-08: #ebe5f3;
	--m3-composite-light-surface-container-low-passthrough-primary-opacity-12: #e6dff0;
	--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-08: #f7f2fa;
	--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-12: #e2dde5;
	--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-16: #e2dde5;
	--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08: #d8cee8;
	--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12: #d0c6df;
	--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-16: #c8bfd7;
	--m3-composite-light-surface-passthrough-on-surface-variant-opacity-12: #e8e2ea;
	--m3-composite-light-surface-passthrough-on-surface-variant-opacity-08: #f0e9f1;
	--m3-composite-light-surface-container-high-passthrough-primary-opacity-08: #e1daea;
	--m3-composite-light-surface-container-high-passthrough-primary-opacity-12: #dcd4e7;
	--m3-composite-light-primary-container-passthrough-on-primary-container-opacity-08: #dacbf2;
	--m3-composite-light-primary-container-passthrough-on-primary-container-opacity-12: #d2c2ec;
	--m3-composite-light-tertiary-container-passthrough-on-tertiary-container-opacity-08: #efc8d4;
	--m3-composite-light-tertiary-container-passthrough-on-tertiary-container-opacity-12: #e6c0cc;
	--m3-composite-light-surface-container-highest-passthrough-on-surface-opacity-08: #d6d0d9;
	--m3-composite-light-surface-passthrough-on-surface-opacity-08: #ede7f0;
	--m3-composite-light-surface-passthrough-on-surface-opacity-12: #ddd8e0;
	--m3-composite-light-surface-container-highest-passthrough-on-primary-opacity-08: #dcd4e4;
	--m3-composite-light-surface-container-highest-passthrough-on-primary-opacity-12: #d7cfe1;
	--m3-composite-light-surface-container-highest-passthrough-on-surface-variant-opacity-08: #d9d4dd;
	--m3-composite-light-surface-container-highest-passthrough-on-surface-variant-opacity-12: #d3cdd7;
	--m3-composite-light-inverse-on-surface-passthrough-on-surface-variant-opacity-08: #f0eaf1;
	--m3-composite-light-inverse-on-surface-passthrough-on-surface-variant-opacity-12: #e8e1e9;
	--m3-composite-light-on-surface-variant-passthrough-on-surface-variant-opacity-08: #423e45;
	--m3-composite-light-on-surface-variant-passthrough-on-surface-variant-opacity-12: #49464c;
	--m3-composite-light-on-surface-variant-passthrough-on-surface-opacity-08: #e6e1e9;

	/* M3 / COMPOSITES / DARK */
	--m3-composite-dark-surface-container-low-passthrough-on-primary-opacity-08: #2b2832;
	--m3-composite-dark-surface-container-low-passthrough-on-primary-opacity-12: #322e3b;
	--m3-composite-dark-surface-container-low-passthrough-primary-opacity-12: #322e3b;
	--m3-composite-dark-primary-passthrough-on-primary-opacity-08: #c4aff4;
	--m3-composite-dark-primary-passthrough-on-primary-opacity-12: #bea9ee;
	--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-08: #1e1c23;
	--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-12: #1a181f;
	--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-16: #1c1a21;
	--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08: #575065;
	--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12: #5d566b;
	--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-16: #635d72;
	--m3-composite-dark-surface-container-low-passthrough-on-surface-variant-opacity-08: #2b292e;
	--m3-composite-dark-surface-container-low-passthrough-on-surface-variant-opacity-12: #322f35;
	--m3-composite-dark-surface-container-high-passthrough-primary-opacity-08: #383541;
	--m3-composite-dark-primary-container-passthrough-on-primary-container-opacity-08: #5b4494;
	--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08: #575065;
	--m3-composite-dark-tertiary-container-passthrough-on-tertiary-container-opacity-08: #6f4854;
	--m3-composite-dark-surface-container-high-passthrough-primary-opacity-12: #3f3b49;
	--m3-composite-dark-primary-container-passthrough-on-primary-container-opacity-12: #624b99;
	--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12: #5d566b;
	--m3-composite-dark-tertiary-container-passthrough-on-tertiary-container-opacity-12: #764e5b;
	--m3-composite-dark-surface-container-highest-passthrough-on-surface-opacity-08: #444249;
	--m3-composite-dark-surface-passthrough-on-surface-opacity-08: #2d2b30;
	--m3-composite-dark-surface-passthrough-on-surface-opacity-12: #353338;
	--m3-composite-dark-on-surface-variant-passthrough-on-surface-variant-opacity-12: #d0cbd3;
	--m3-composite-dark-on-surface-variant-passthrough-on-surface-variant-opacity-08: #d8d2db;
	--m3-composite-dark-inverse-on-surface-passthrough-on-surface-variant-opacity-12: #2a282e;
	--m3-composite-dark-inverse-on-surface-passthrough-on-surface-variant-opacity-08: #222127;
	--m3-composite-dark-surface-container-highest-passthrough-on-primary-opacity-12: #484453;
	--m3-composite-dark-surface-container-highest-passthrough-on-primary-opacity-08: #423f4b;
	--m3-composite-dark-surface-container-highest-passthrough-on-surface-variant-opacity-08: #424047;
	--m3-composite-dark-surface-container-highest-passthrough-on-surface-variant-opacity-12: #48454d;
	--m3-composite-dark-on-surface-variant-passthrough-on-surface-opacity-08: #2d2b30;
}

/* ==========COMPONENTS========== */

.component {
	background-color: #f8af50;
	width: 5rem;
	height: 5rem;
}

.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden;
}

/* ==========TYPOGRAPHY========== */

.text,
.text-display,
.text-headline,
.text-title-large,
.text-label,
.text-body {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}

.text-display {
	font-size: 5.7rem;
	line-height: 6.4rem;
	letter-spacing: -0.025rem;
}

.text-display-large {
	font-size: 5.7rem;
	line-height: 6.4rem;
	letter-spacing: -0.025rem;
}

.text-display-medium {
	font-size: 4.5rem;
	line-height: 5.2rem;
}

.text-display-small {
	font-size: 3.6rem;
	line-height: 4.4rem;
}

.text-headline {
	font-weight: 40rem;
}

.text-headline-large {
	font-size: 3.2rem;
	line-height: 4rem;
}

.text-headline-medium {
	font-size: 2.8rem;
	line-height: 3.6rem;
}

.text-headline-small {
	font-size: 2.4rem;
	line-height: 3.2rem;
}

.text-title-large {
	font-size: 2.2rem;
	line-height: 2.8rem;
}

.text-title-medium {
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2.4rem;
	letter-spacing: 0.015rem;
}

.text-title-small {
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.01rem;
}

.text-label,
.text-label-large,
.text-label-medium,
.text-label-small {
	font-weight: 500;
}

.text-label-large {
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.01rem;
}

.text-label-medium {
	font-size: 1.2rem;
	line-height: 1.6rem;
}

.text-label-small {
	font-size: 1.1rem;
	line-height: 1.6rem;
}

.text-body,
.text-body-large,
.text-body-medium,
.text-body-small {
	font-weight: 400;
}

.text-body-large {
	font-size: 1.6rem;
	line-height: 2.4rem;
	letter-spacing: 0.05rem;
}

.text-body-medium {
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.025rem;
}

.text-body-small {
	font-size: 1.2rem;
	line-height: 1.6rem;
	letter-spacing: 0.04rem;
}

/* ==========BUTTONS==========*/

.button {
	box-sizing: border-box;
	display: flex;
	gap: 0.8rem;
	padding: 0rem 1.6rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 10rem;
	transition: background-color 0.3s, box-shadow 0.3s;
	border: 0;
	width: fit-content;
	height: 4rem;
	white-space: nowrap;
}

.button text {
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: 0.01rem;
}

.button-with-icon {
	flex-direction: row;
	padding: 0rem 0.9rem;
	gap: 0.8rem;
}

.button-text {
	background-color: transparent;
	padding: 1rem 1.2rem;
}

.button-disabled {
	opacity: 38%;
	pointer-events: none;
}

.button-tonal:focus {
	box-shadow: none;
}

.button-tonal:active {
	box-shadow: none;
}

/* BUTTONS / LIGHT THEME */
.button-filled.button-light-theme {
	background-color: var(--m3-sys-light-primary);
}

.button-filled.button-light-theme > * {
	color: var(--m3-sys-light-on-primary);
}

.button-filled:hover.button-light-theme,
.button-filled:focus.button-light-theme,
.button-filled:active.button-light-theme {
	box-shadow: none;
}
.button-filled:hover.button-light-theme {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-08
	);
	box-shadow: var(--m3-elevation-light-1);
}
.button-filled:focus.button-light-theme {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}
.button-filled:active.button-light-theme {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}

.button-outlined.button-light-theme {
	background-color: var(--m3-sys-light-surface);
	border: 0.1rem solid var(--m3-sys-light-outline);
}

.button-outlined.button-light-theme > * {
	color: var(--m3-sys-light-primary);
}

.button-outlined:hover.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}
.button-outlined:active.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}
.button-outlined:focus.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
	border: 0.1rem solid var(--m3-sys-light-primary);
}

.button-text.button-light-theme > * {
	color: var(--m3-sys-light-primary);
}

.button-text.button-with-icon {
	padding: 1rem 1.6rem 1rem 1.2rem;
}

.button-text:hover.button-light-theme,
.button-text:focus.button-light-theme,
.button-text:active.button-light-theme {
	background-color: none;
}
.button-text:hover.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}
.button-text:focus.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}
.button-text:active.button-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.button-elevated.button-light-theme {
	background-color: var(--m3-sys-light-surface-container-low);
	box-shadow: var(--m3-elevation-light-1);
}

.button-elevated.button-light-theme > * {
	color: var(--m3-sys-light-primary);
}

.button-elevated:hover.button-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-primary-opacity-08
	);
	box-shadow: var(--m3-elevation-light-2);
}
.button-elevated:focus.button-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-primary-opacity-08
	);
	box-shadow: var(--m3-elevation-light-1);
}
.button-elevated:active.button-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-primary-opacity-12
	);
	box-shadow: var(--m3-elevation-light-1);
}

.button-tonal.button-light-theme {
	background-color: var(--m3-sys-light-secondary-container);
}

.button-tonal.button-light-theme > * {
	color: var(--m3-sys-light-on-secondary-container);
}

.button-tonal:hover.button-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
	box-shadow: var(--m3-elevation-light-1);
}
.button-tonal:focus.button-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}
.button-tonal:active.button-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

/* BUTTONS / DARK THEME */

.button-filled.button-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

.button-filled.button-dark-theme > * {
	color: var(--m3-sys-dark-on-primary);
}

.button-filled:hover.button-dark-theme,
.button-filled:focus.button-dark-theme,
.button-filled:active.button-dark-theme {
	box-shadow: none;
}
.button-filled:hover.button-dark-theme {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-08
	);
	box-shadow: var(--m3-elevation-dark-1);
}
.button-filled:focus.button-dark-theme {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}
.button-filled:active.button-dark-theme {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}

.button-outlined.button-dark-theme {
	background-color: var(--m3-sys-dark-surface);
	border: 0.1rem solid var(--m3-sys-dark-outline);
}

.button-outlined.button-dark-theme > * {
	color: var(--m3-sys-dark-primary);
}

.button-outlined:hover.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}
.button-outlined:focus.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
	border: 0.1rem solid var(--m3-sys-dark-primary);
}
.button-outlined:active.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.button-text.button-dark-theme > * {
	color: var(--m3-sys-dark-primary);
}

.button-text:hover.button-dark-theme,
.button-text:focus.button-dark-theme,
.button-text:active.button-dark-theme {
	background-color: none;
}
.button-text:hover.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}
.button-text:focus.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}
.button-text:active.button-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.button-elevated.button-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-low);
	box-shadow: var(--m3-elevation-dark-1);
}

.button-elevated.button-dark-theme > * {
	color: var(--m3-sys-dark-primary);
}

.button-elevated:hover.button-dark-theme,
.button-elevated:focus.button-dark-theme,
.button-elevated:active.button-dark-theme {
	background-color: none;
}
.button-elevated:hover.button-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-on-primary-opacity-08
	);
	box-shadow: var(--m3-elevation-dark-2);
}
.button-elevated:focus.button-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-primary-opacity-12
	);
}
.button-elevated:active.button-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-on-primary-opacity-12
	);
}

.button-tonal.button-dark-theme {
	background-color: var(--m3-sys-dark-secondary-container);
}

.button-tonal.button-dark-theme > * {
	color: var(--m3-sys-dark-on-secondary-container);
}

.button-tonal:hover.button-dark-theme,
.button-tonal:focus.button-dark-theme,
.button-tonal:active.button-dark-theme {
	background-color: none;
}
.button-tonal:hover.button-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
	box-shadow: var(--m3-elevation-dark-1);
}
.button-tonal:focus.button-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}
.button-tonal:active.button-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}
.button-tonal:disabled.button-dark-theme {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-12);
	color: var(--m3-sys-dark-on-surface);
}

/* ==========ICONS========== */

.material-symbols {
	user-select: none;
	pointer-events: none;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.material-symbols-filled {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ICONS / LIGHT THEME */

/* ==========SWITCHES========== */
.switch {
	display: flex;
	min-width: 5.2rem;
	max-width: 5.2rem;
	min-height: 3.2rem;
	max-height: 3.2rem;
	user-select: none;
	cursor: pointer;
}

.switch-track {
	width: 100%;
	border-radius: 33%/50%;
	transition: all 250ms ease-in-out;
}

.switch-track-deselected {
	border-radius: 10rem;
}

.switch-handle {
	border-radius: 100%;
	transition: all 250ms ease-in-out;
}

.switch-handle-selected {
	width: 46.155%;
	height: 75%;
	margin: 7.69% 46.155%;
}

.switch-handle-deselected.switch-handle-without-icon {
	width: 30.77%;
	height: 53%;
	margin: 14% 13%;
}

.switch-handle-deselected.switch-handle-with-icon {
	width: 46.155%;
	height: 75%;
	margin: 7.69% 5%;
}

.switch-handle-overlay {
	display: flex;
	width: 166%;
	height: 166%;
	background-color: transparent;
	border-radius: 100%;
	transform: translate(-20%, -20%);
	align-items: center;
	justify-content: center;
}

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

.switch-track-disabled.switch-track-deselected {
	border-radius: 3.5rem;
}

/* SWITCH / ICON */
.icon-on-switch {
	display: flex;
	margin: 0 auto;
	align-items: center;
	scale: 80%;
	transform: translateX(0.1rem);
}

/* SWITCH / ICON / DISABLED */
.icon-on-switch-disabled {
	display: none;
}

/* SWITCHES / LIGHT */
.switch-track-selected.switch-track-light-theme {
	background-color: var(--m3-sys-light-primary);
}

.switch-track-deselected.switch-track-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
	border: 0.2rem solid var(--m3-sys-light-outline);
}

.switch-handle-selected.switch-handle-light-theme {
	background-color: var(--m3-sys-light-on-primary);
}

.switch-handle-deselected.switch-handle-light-theme {
	background-color: var(--m3-sys-light-outline);
}

.switch-handle-deselected.switch-handle-disabled.switch-handle-light-theme {
	background-color: var(--m3-sys-light-on-surface);
	opacity: 38%;
}

.switch-handle-deselected:hover.switch-handle-light-theme {
	background-color: var(--m3-sys-light-on-surface-variant);
}

.switch-handle-overlay:hover.switch-handle-overlay-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}

.switch-track-disabled.switch-track-selected.switch-track-light-theme {
	background-color: var(--m3-state-layers-light-on-surface-opacity-12);
}

.switch-track-disabled.switch-track-deselected.switch-track-light-theme {
	border: 0.2rem solid var(--m3-state-layers-light-on-surface-opacity-12);
	background-color: var(--m3-state-layers-light-surface-variant-opacity-12);
}

.icon-on-switch-selected.icon-on-switch-light-theme {
	color: var(--m3-sys-light-on-primary-container);
}

.icon-on-switch-deselected.icon-on-switch-light-theme {
	color: var(--m3-sys-light-on-primary);
}

/* SWITCHES / DARK */
.switch-track-selected.switch-track-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

.switch-track-deselected.switch-track-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
	border: 0.2rem solid var(--m3-sys-dark-outline);
}

.switch-handle-selected.switch-handle-dark-theme {
	background-color: var(--m3-sys-dark-on-primary);
}

.switch-handle-deselected.switch-handle-dark-theme {
	background-color: var(--m3-sys-dark-outline);
}

.switch-handle-deselected.switch-handle-disabled.switch-handle-dark-theme {
	background-color: var(--m3-sys-dark-on-surface);
	opacity: 38%;
}

.switch-handle-deselected:hover.switch-handle-dark-theme {
	background-color: var(--m3-sys-dark-on-surface-variant);
}

.switch-handle-overlay:hover.switch-handle-overlay-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}

.switch-track-disabled.switch-track-selected.switch-track-dark-theme {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-12);
}

.switch-track-disabled.switch-track-deselected.switch-track-dark-theme {
	border: 0.2rem solid var(--m3-state-layers-dark-on-surface-opacity-12);
	background-color: var(--m3-state-layers-dark-surface-variant-opacity-12);
}

.icon-on-switch-selected.icon-on-switch-dark-theme {
	color: var(--m3-sys-dark-on-primary-container);
}

.icon-on-switch-deselected.icon-on-switch-dark-theme {
	color: var(--m3-sys-dark-surface-container-highest);
}

.icon-on-switch-deselected.icon-on-switch-disabled {
	display: flex;
}

/* ==========CHECKBOXES========== */
.checkbox {
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 0.2rem;
	margin: 1.1rem;
	transition: all 250ms ease-in-out;
	border: 0.2rem solid transparent;
	display: flex;
	box-sizing: content-box;
	cursor: pointer;
}

.icon-on-checkbox {
	display: flex;
	margin: 0 auto;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
}

.checkbox-overlay {
	width: 5rem;
	height: 5rem;
	background-color: transparent;
	border-radius: 100%;
	transform: translate(-33%, -33%);
	position: absolute;
}

.checkbox-disabled {
	opacity: 38%;
	pointer-events: none;
}

/* CHECKBOXES / LIGHT */
.checkbox-default.checkbox-light-theme {
	background-color: var(--m3-sys-light-primary);
}

.checkbox-error.checkbox-light-theme {
	background-color: var(--m3-sys-light-error);
}

.checkbox-error.checkbox-light-theme .icon-on-checkbox {
	color: var(--m3-sys-light-on-error);
}

.checkbox-deselected.checkbox-light-theme {
	background-color: transparent;
	border: 0.2rem solid var(--m3-sys-light-on-surface-variant);
}

.checkbox-deselected.checkbox-error.checkbox-light-theme {
	border: 0.2rem solid var(--m3-sys-light-error);
}

.checkbox-light-theme .icon-on-checkbox {
	color: var(--m3-sys-light-on-primary);
}

.checkbox-default.checkbox-light-theme > .checkbox-overlay:hover {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}

.checkbox-default.checkbox-light-theme > .checkbox-overlay:focus {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.checkbox-default.checkbox-light-theme > .checkbox-overlay:active {
	background-color: var(--m3-state-layers-light-primary-opacity-16);
}

.checkbox-error.checkbox-light-theme > .checkbox-overlay:hover {
	background-color: var(--m3-state-layers-light-error-opacity-08);
}

.checkbox-error.checkbox-light-theme > .checkbox-overlay:focus {
	background-color: var(--m3-state-layers-light-error-opacity-12);
}

.checkbox-error.checkbox-light-theme > .checkbox-overlay:active {
	background-color: var(--m3-state-layers-light-error-opacity-16);
}

/* CHECKBOXES / DARK */

.checkbox-dark-theme .icon-on-checkbox {
	color: var(--m3-sys-dark-on-primary);
}
.checkbox-default.checkbox-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

.checkbox-error.checkbox-dark-theme {
	background-color: var(--m3-sys-dark-error);
}

.checkbox-deselected.checkbox-dark-theme {
	background-color: transparent;
	border: 0.2rem solid var(--m3-sys-dark-on-surface-variant);
}

.checkbox-deselected.checkbox-error.checkbox-dark-theme {
	border: 0.2rem solid var(--m3-sys-dark-error);
}

.checkbox-error.checkbox-dark-theme .icon-on-checkbox {
	color: var(--m3-sys-dark-on-error);
}

.checkbox-default.checkbox-dark-theme > .checkbox-overlay:hover {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}

.checkbox-default.checkbox-dark-theme > .checkbox-overlay:focus {
	background-color: var(---m3-state-layers-dark-primary-opacity-12);
}

.checkbox-default.checkbox-dark-theme > .checkbox-overlay:active {
	background-color: var(--m3-state-layers-dark-primary-opacity-16);
}

.checkbox-error.checkbox-dark-theme > .checkbox-overlay:hover {
	background-color: var(--m3-state-layers-dark-error-opacity-08);
}

.checkbox-error.checkbox-dark-theme > .checkbox-overlay:focus {
	background-color: var(--m3-state-layers-dark-error-opacity-12);
}

.checkbox-error.checkbox-dark-theme > .checkbox-overlay:active {
	background-color: var(--m3-state-layers-dark-error-opacity-16);
}

/* ==========BADGES========== */
.badge {
	border-radius: 10rem;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	position: relative;
}

.badge-small {
	width: 0.6rem;
	height: 0.6rem;
}

.badge-single-digit {
	display: inline-block;
}

.badge-multiple-digits {
	display: inline-block;
}

.badge-label-text {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	margin: 0 auto;
	user-select: none;
}

.badge-label-text-single-digit {
	font-weight: bold;
}

.badge-label-text-multiple-digit {
	font-weight: normal;
}

/* BADGES / LIGHT */
.badge-light-theme {
	background-color: var(--m3-sys-light-error);
}

.badge-light-theme .badge-label-text {
	color: var(--m3-sys-light-on-error);
}

/* BADGES / DARK */
.badge-dark-theme {
	background-color: var(--m3-sys-dark-error);
}

.badge-dark-theme .badge-label-text {
	color: var(--m3-sys-dark-on-error);
}

/* ==========RADIO BUTTONS========== */
input[type="radio"] {
	cursor: pointer;
	appearance: none;
	background-color: transparent;
	margin: 0;
	width: 2rem;
	height: 2rem;
	margin: 1rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	transition: all 300ms;
}

.radio-button {
	display: flex;
	width: fit-content;
}

/* RADIO BUTTONS / DISABLED */
.radio-button-disabled {
	pointer-events: none;
}

/* RADIO BUTTONS / DOT */
input[type="radio"]::before {
	content: "";
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	margin: 0 auto;
}

/* RADIO BUTTONS / DOT / CHECKED */
input[type="radio"]:checked::before {
	transform: scale(1);
}

/* RADIO BUTTONS / LIGHT */
input[type="radio"].radio-button-input-light-theme::before {
	background-color: var(--m3-sys-light-primary);
}

input[type="radio"].radio-button-input-light-theme {
	border: 0.2rem solid var(--m3-sys-light-on-surface-variant);
}

input[type="radio"]:checked.radio-button-input-light-theme {
	border: 0.2rem solid var(--m3-sys-light-primary);
}

input[type="radio"].radio-button-input-disabled.radio-button-input-light-theme {
	border: 0.2rem solid var(--m3-sys-light-on-surface);
	opacity: 38%;
}

input[type="radio"].radio-button-input-disabled.radio-button-input-light-theme::before {
	background-color: var(--m3-sys-light-on-surface);
}

.radio-button-light-theme:hover {
	border-radius: 50%;
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}

.radio-button-light-theme:focus {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.radio-button-light-theme:active {
	background-color: var(--m3-state-layers-light-primary-opacity-16);
}

/* RADIO BUTTONS / DARK */
input[type="radio"].radio-button-input-dark-theme::before {
	background-color: var(--m3-sys-dark-primary);
}

input[type="radio"].radio-button-input-dark-theme {
	border: 0.2rem solid var(--m3-sys-light-outline-variant);
}

input[type="radio"]:checked.radio-button-input-dark-theme {
	border: 0.2rem solid var(--m3-sys-dark-primary);
}

input[type="radio"].radio-button-input-disabled.radio-button-input-dark-theme {
	border: 0.2rem solid var(--m3-sys-dark-on-surface);
	opacity: 38%;
}

input[type="radio"].radio-button-input-disabled.radio-button-input-dark-theme::before {
	background-color: var(--m3-sys-dark-on-surface);
}

.radio-button-dark-theme:hover {
	border-radius: 50%;
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}

.radio-button-dark-theme:focus {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.radio-button-dark-theme:active {
	background-color: var(--m3-state-layers-dark-primary-opacity-16);
}

/* ==========HORIZONTAL DIVIDERS========== */
.horizontaldivider {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.horizontaldivider-inset-right {
	background-color: red;
}

.horizontaldivider-inset-left {
	background-color: red;
}

/* HORIZONTAL DIVERS / LIGHT */
.horizontaldivider-bar-light-theme {
	background-color: var(--m3-sys-light-outline-variant);
}

/* HORIZONTAL DIVERS / DARK */
.horizontaldivider-bar-dark-theme {
	background-color: var(--m3-sys-dark-outline-variant);
}

/* ==========VERTICAL DIVIDERS========== */
.verticaldivider {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.verticaldivider-inset-top {
	background-color: red;
}

.verticaldivider-inset-bottom {
	background-color: red;
}

/* VERTICAL DIVIDERS / LIGHT */
.verticaldivider-bar-light-theme {
	background-color: var(--m3-sys-light-outline-variant);
}
/* VERTICAL DIVIDERS / DARK */
.verticaldivider-bar-dark-theme {
	background-color: var(--m3-sys-dark-outline-variant);
}

/* ==========CHIPS========== */
.chip {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 0.8rem;
	border: 0;
	height: 3.2rem;
	width: fit-content;
	background-color: transparent;
	transition: background-color 0.3s, box-shadow 0.3s;
}

/* ==========INPUT-CHIPS========== */
.inputchip.inputchip-selected {
	border: none;
}

.avatar-on-inputchip {
	border-radius: 50%;
	scale: 1.15;
	margin-right: 0.8rem;
}

.label-on-inputchip {
	margin: 0rem 0.4rem;
}

.inputchip-one-items {
	padding: 0rem 0.8rem;
}

.inputchip-two-items {
	gap: 0.2rem;
	padding: 0rem 0.6rem;
}

.inputchip-three-items {
	gap: 0.2rem;
	padding: 0rem 0.4rem;
}

/* INPUT-CHIPS / LIGHT */
.inputchip.inputchip-light-theme {
	border: 0.1rem solid var(--m3-sys-light-outline);
	color: var(--m3-sys-light-on-surface-variant);
}

.inputchip:hover.inputchip-light-theme {
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-variant-opacity-08
	);
}

.inputchip:focus.inputchip-light-theme {
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-variant-opacity-12
	);
	border: 0.1rem solid var(--m3-sys-light-on-surface-variant);
}

.inputchip.inputchip-selected.inputchip-light-theme {
	color: var(--m3-sys-light-on-secondary-container);
	background-color: var(--m3-sys-light-secondary-container);
}

.inputchip:hover.inputchip-selected.inputchip-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on
	);
}

.inputchip:focus.inputchip-selected.inputchip-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.inputchip:active.inputchip-deselected.inputchip-light-theme {
	background-color: var(#dad4db);
	box-shadow: var(--m3-elevation-light-3);
}

.inputchip:active.inputchip-selected.inputchip-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-16
	);
	box-shadow: var(--m3-elevation-light-3);
}

.inputchip.inputchip-light-theme > div > .inputchip-icon-trailing {
	color: var(--m3-sys-light-on-surface-variant);
}

.inputchip-selected.inputchip-light-theme > div > .inputchip-icon-trailing {
	color: var(--m3-sys-light-on-secondary-container);
}

.inputchip.inputchip-light-theme > div > .inputchip-icon-leading {
	color: var(--m3-sys-light-primary);
}

.inputchip.inputchip-deselected.inputchip-light-theme > .avatar-on-inputchip {
	background-color: var(--m3-sys-light-on-surface-variant);
	color: var(--m3-sys-light-on-primary);
}

.inputchip.inputchip-selected.inputchip-light-theme > .avatar-on-inputchip {
	background-color: var(--m3-sys-light-on-secondary-container);
	color: var(--m3-sys-light-on-secondary);
}

/* INPUT-CHIPS / DARK */
.inputchip.inputchip-dark-theme {
	border: 0.1rem solid var(--m3-sys-dark-outline);
	color: var(--m3-sys-dark-on-surface-variant);
}

.inputchip:hover.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-08
	);
}

.inputchip:focus.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
	border: 0.1rem solid var(--m3-sys-dark-on-surface-variant);
}

.inputchip.inputchip-selected.inputchip-dark-theme {
	color: var(--m3-sys-dark-on-secondary-container);
	background-color: var(--m3-sys-dark-secondary-container);
}

.inputchip:hover.inputchip-selected.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.inputchip:focus.inputchip-selected.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.inputchip:active.inputchip-deselected.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-16
	);
	box-shadow: var(--m3-elevation-dark-3);
}

.inputchip:active.inputchip-selected.inputchip-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-16
	);
	box-shadow: var(--m3-elevation-dark-3);
}

.inputchip.inputchip-dark-theme > div > .inputchip-icon-trailing {
	color: var(--m3-sys-dark-on-surface-variant);
}

.inputchip-selected.inputchip-dark-theme > div > .inputchip-icon-trailing {
	color: var(--m3-sys-dark-on-secondary-container);
}

.inputchip.inputchip-dark-theme > div > .inputchip-icon-leading {
	color: var(--m3-sys-dark-primary);
}

.inputchip.inputchip-deselected.inputchip-dark-theme > .avatar-on-inputchip {
	background-color: var(--m3-sys-dark-on-surface-variant);
	color: var(--m3-sys-dark-on-primary);
}

.inputchip.inputchip-selected.inputchip-dark-theme > .avatar-on-inputchip {
	background-color: var(--m3-sys-dark-on-secondary-container);
	color: var(--m3-sys-dark-on-secondary);
}

/* ==========ASSIST-CHIPS========== */

.assistchip {
	padding: 0rem 1.6rem;
}

.assistchip-disabled {
	opacity: 38%;
}

.assistchip-with-icon {
	gap: 0.8rem;
	padding: 0rem 0.9rem;
}

/* ASSIST-CHIPS / LIGHT */
.assistchip.assistchip-light-theme {
	color: var(--m3-sys-light-on-surface);
	border: 0.1rem solid var(--m3-sys-light-outline);
}

.assistchip:hover.assistchip-light-theme {
	color: var(--m3-sys-light-on-surface);
	border: 0.1rem solid var(--m3-sys-light-outline);
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-variant-opacity-08
	);
}

.assistchip:focus.assistchip-light-theme {
	color: var(--m3-sys-light-on-surface);
	border: 0.1rem solid var(--m3-sys-light-on-surface);
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-variant-opacity-12
	);
}

.assistchip:active.assistchip-light-theme {
	color: var(--m3-sys-light-on-surface);
	border: 0.1rem solid var(--m3-sys-light-outline);
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-variant-opacity-12
	);
}

.assistchip.assistchip-elevated.assistchip-light-theme {
	border: none;
	color: var(--m3-sys-light-on-surface);
	background-color: var(--m3-sys-light-surface-container-low);
	box-shadow: var(--m3-elevation-light-1);
}

.assistchip:hover.assistchip-elevated.assistchip-light-theme {
	border: none;
	color: var(--m3-sys-light-on-surface);
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-08
	);
	box-shadow: var(--m3-elevation-light-1);
}

.assistchip:focus.assistchip-elevated.assistchip-light-theme {
	border: none;
	color: var(--m3-sys-light-on-surface);
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-12
	);
	box-shadow: var(--m3-elevation-light-1);
}

.assistchip:active.assistchip-elevated.assistchip-light-theme {
	border: none;
	color: var(--m3-sys-light-on-surface);
	background-color: var(
		--m3-composite-light-surface-container-low-passthrough-on-surface-variant-opacity-12
	);
	box-shadow: var(--m3-elevation-light-2);
}

.assistchip.assistchip-light-theme > div > .icon-on-assistchip {
	color: var(--m3-sys-light-primary);
}

.favicon-on-assistchip {
	width: 1.2rem;
	height: 1.4rem;
}

/* ASSIST-CHIPS / DARK */
.assistchip.assistchip-dark-theme {
	color: var(--m3-sys-dark-on-surface);
	border: 0.1rem solid var(--m3-sys-dark-outline);
}

.assistchip:hover.assistchip-dark-theme {
	color: var(--m3-sys-dark-on-surface);
	border: 0.1rem solid var(--m3-sys-dark-outline);
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-08
	);
}

.assistchip:focus.assistchip-dark-theme {
	color: var(--m3-sys-dark-on-surface);
	border: 0.1rem solid var(--m3-sys-dark-on-surface);
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-12
	);
}

.assistchip:active.assistchip-dark-theme {
	color: var(--m3-sys-dark-on-surface);
	border: 0.1rem solid var(--m3-sys-dark-outline);
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-variant-opacity-12
	);
}

.assistchip.assistchip-elevated.assistchip-dark-theme {
	border: none;
	color: var(--m3-sys-dark-on-surface);
	background-color: var(--m3-sys-dark-surface-container-low);
	box-shadow: var(--m3-elevation-dark-1);
}

.assistchip:hover.assistchip-elevated.assistchip-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-on-surface-variant-opacity-08
	);
}

.assistchip:focus.assistchip-elevated.assistchip-dark-theme {
	border: none;
	color: var(--m3-sys-dark-on-surface);
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-on-surface-variant-opacity-12
	);
	box-shadow: var(--m3-elevation-dark-1);
}

.assistchip:active.assistchip-elevated.assistchip-dark-theme {
	border: none;
	color: var(--m3-sys-dark-on-surface);
	background-color: var(
		--m3-composite-dark-surface-container-low-passthrough-on-surface-variant-opacity-12
	);
	box-shadow: var(--m3-elevation-dark-2);
}

.assistchip.assistchip-dark-theme > div > .icon-on-assistchip {
	color: var(--m3-sys-dark-primary);
}

/* ==========STACKED CARDS========== */
.stacked-card {
	max-width: 36rem;
	height: auto;
	overflow: clip;
	border-radius: 1.2rem;
}

.stacked-card-header {
	box-sizing: border-box;
	height: 7.2rem;
	display: flex;
	align-items: center;
	padding: 1.2rem 0.4rem;
}

.stacked-card-media {
	box-sizing: border-box;
	max-width: 36rem;
	overflow: hidden;
}

.stacked-card-text-content {
	box-sizing: border-box;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.6rem;
	gap: 3.2rem;
	overflow: clip;
}

.stacked-card-header-content {
	display: flex;
	gap: 1.6rem;
	max-width: 29.2rem;
	width: 100%;
}

.stacked-card-header-content-monogram-initial {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stacked-card-header-content-text {
	display: flex;
	flex-direction: column;
	max-width: 23.6rem;
}

.stacked-card-header-content-text-header {
	text-align: left;
}

.stacked-card-header-icon-button {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.stacked-card-text-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.6rem;
	gap: 3.2rem;
	overflow: clip;
}

.stacked-card-text-content-headline {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0rem;
	max-width: 32.8rem;
	text-align: left;
}

.stacked-card-text-content-supporting-text > .text {
	text-align: left;
}

.stacked-card-text-content-actions {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0rem;
	gap: 0.8rem;
}

.stacked-card-header-content-text-header,
.stacked-card-header-content-text-subheader,
.stacked-card-text-content-headline-title,
.stacked-card-text-content-headline-subhead,
.stacked-card-text-content-supporting-text-text {
	overflow: clip;
	text-overflow: ellipsis;
}

.stacked-card-media {
	box-sizing: border-box;
	max-width: 36rem;
	height: 18.8rem;
	overflow: hidden;
}

.stacked-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stacked-card-text-content-supporting-text {
	width: 100%;
	max-width: 32.8rem;
	overflow: auto;
}

.stacked-card-text-content-supporting-text-text {
	width: 100%;
	max-width: 32.8rem;
}

/* STACKED CARDS / LIGHT */
.stacked-card-light-theme {
	color: var(--m3-sys-light-on-surface);
}
.stacked-card-outlined.stacked-card-light-theme {
	border: 0.1rem solid var(--m3-sys-light-outline-variant);
}

.stacked-card-filled.stacked-card-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
}

.stacked-card-outlined.stacked-card-light-theme {
	border: 0.1rem solid var(--m3-sys-light-outline-variant);
	background-color: var(--m3-sys-light-surface);
}

.stacked-card-elevated.stacked-card-light-theme {
	background-color: var(--m3-sys-light-surface-container-low);
	box-shadow: var(--m3-elevation-light-1);
}

.stacked-card-header-content-monogram-initial-light-theme {
	background-color: var(--m3-sys-light-primary);
}

.stacked-card-header-content-monogram-initial-light-theme > .text {
	color: var(--m3-sys-light-surface);
}

.stacked-card-text-content-headline-subhead.stacked-card-light-theme {
	color: var(--m3-sys-light-on-surface-variant);
}

.stacked-card-text-content-supporting-text-text-light-theme {
	color: var(--m3-sys-light-on-surface-variant);
}

/* STACKED CARDS / DARK */
.stacked-card-dark-theme {
	color: var(--m3-sys-dark-on-surface);
}

.stacked-card-outlined.stacked-card-dark-theme {
	border: 0.1rem solid var(--m3-sys-dark-outline-variant);
	background-color: var(--m3-sys-dark-surface);
}

.stacked-card-elevated.stacked-card-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-low);
	box-shadow: var(--m3-elevation-dark-1);
}

.stacked-card-filled.stacked-card-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.stacked-card-header-content-monogram-initial-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

.stacked-card-header-content-monogram-initial-dark-theme > .text {
	color: var(--m3-sys-dark-surface);
}

.stacked-card-text-content-headline-subhead.stacked-card-dark-theme {
	color: var(--m3-sys-dark-on-surface-variant);
}

.stacked-card-text-content-supporting-text-text-dark-theme {
	color: var(--m3-sys-dark-on-surface-variant);
}

/* ==========HORIZONTAL CARDS========== */

.horizontal-card {
	max-width: 36rem;
	height: auto;
	overflow: clip;
	border-radius: 1.2rem;
}

.horizontal-card-header {
	box-sizing: border-box;
	height: 8rem;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.horizontal-card-header-content {
	display: flex;
	align-items: center;
	max-width: 28rem;
	gap: 1.6rem;
	padding: 1.6rem;
	overflow: auto;
}

.horizontal-card-header-media {
	box-sizing: border-box;
	max-width: 8rem;
	overflow: hidden;
}

.horizontal-card-header-content-monogram-initial {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.horizontal-card-header-media {
	max-width: 8rem;
	height: 8rem;
}

.horizontal-card-header-media img {
	max-width: 8rem;
	height: 8rem;
	object-fit: cover;
}

.horizontal-card-header-content-text {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 19.2rem;
	height: auto;
}

.horizontal-card-header-content-text-header {
	max-width: 19.2rem;
	height: 2.4rem;
	text-align: left;
	overflow: clip;
	text-overflow: ellipsis;
}

.horizontal-card-header-content-text-subhead {
	max-width: 19.2rem;
	height: 2rem;
	text-align: left;
	overflow: clip;
	text-overflow: ellipsis;
}

/* HORIZONTAL CARDS / LIGHT */

.horizontal-card-light-theme .horizontal-card-header-content-text-header {
	color: var(--m3-sys-light-on-surface);
}

.horizontal-card-light-theme .horizontal-card-header-content-text-subhead {
	color: var(--m3-sys-light-on-surface-variant);
}

.horizontal-card-outlined.horizontal-card-light-theme {
	border: 0.1rem solid var(--m3-sys-light-outline-variant);
	background-color: var(--m3-sys-light-surface);
}

.horizontal-card-header-content-monogram-initial.horizontal-card-header-content-monogram-initial-light-theme {
	color: var(--m3-sys-light-surface);
	background-color: var(--m3-sys-light-primary);
}

.horizontal-card-elevated.horizontal-card-light-theme {
	background-color: var(--m3-sys-light-surface-container-low);
	box-shadow: var(--m3-elevation-light-1);
}

.horizontal-card-filled.horizontal-card-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
}

/* HORIZONTAL CARDS / DARK */

.horizontal-card-dark-theme .horizontal-card-header-content-text-header {
	color: var(--m3-sys-dark-on-surface);
}

.horizontal-card-dark-theme .horizontal-card-header-content-text-subhead {
	color: var(--m3-sys-dark-on-surface-variant);
}

.horizontal-card-outlined.horizontal-card-dark-theme {
	border: 0.1rem solid var(--m3-sys-dark-outline-variant);
	background-color: var(--m3-sys-dark-surface);
}

.horizontal-card-header-content-monogram-initial.horizontal-card-header-content-monogram-initial-dark-theme {
	color: var(--m3-sys-dark-surface);
	background-color: var(--m3-sys-dark-primary);
}

.horizontal-card-elevated.horizontal-card-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-low);
	box-shadow: var(--m3-elevation-dark-1);
}

.horizontal-card-filled.horizontal-card-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
}

/* ==========FABs========== */
.fab {
	border: none;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	flex-shrink: 0;
}

.fab > .fab-inner-circle {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	opacity: 0;
}

.fab:hover > .fab-inner-circle {
	transform: translate(-50%, -50%) scale(2);
	opacity: 1;
}

.fab-small {
	width: 4rem;
	height: 4rem;
	border-radius: 1.2rem;
}

.fab-small > .fab-inner-circle {
	width: 2rem;
	height: 2rem;
}

.fab-medium {
	width: 5.6rem;
	height: 5.6rem;
	border-radius: 1.6rem;
}

.fab-medium > .fab-inner-circle {
	width: 3.3rem;
	height: 3.3rem;
}

.fab-large {
	width: 9.6rem;
	height: 9.6rem;
	border-radius: 1.6rem;
}

.fab-large > .fab-inner-circle {
	width: 4.8rem;
	height: 4.8rem;
}

.fab-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
}

/* FABS / LIGHT */

.fab-surface.fab-light-theme,
.fab-primary.fab-light-theme,
.fab-secondary.fab-light-theme,
.fab-tertiary.fab-light-theme {
	box-shadow: var(--m3-elevation-light-3);
}

.fab-surface:hover.fab-light-theme,
.fab-primary:hover.fab-light-theme,
.fab-secondary:hover.fab-light-theme,
.fab-tertiary:hover.fab-light-theme {
	box-shadow: var(--m3-elevation-light-4);
}

.fab-surface:focus.fab-light-theme,
.fab-primary:focus.fab-light-theme,
.fab-secondary:focus.fab-light-theme,
.fab-tertiary:focus.fab-light-theme {
	box-shadow: var(--m3-elevation-light-3);
}

.fab-surface.fab-light-theme > * {
	color: var(--m3-sys-light-primary);
}

.fab-primary.fab-light-theme > * {
	color: var(--m3-sys-light-on-primary-container);
}

.fab-secondary.fab-light-theme > * {
	color: var(--m3-sys-light-on-secondary-container);
}

.fab-tertiary.fab-light-theme > * {
	color: var(--m3-sys-light-on-tertiary-container);
}

.fab-surface.fab-light-theme,
.fab-surface:hover.fab-light-theme,
.fab-surface:focus.fab-light-theme,
.fab-surface:not(.extended-fab):active.fab-light-theme,
.fab-surface:active.fab-light-theme > .fab-inner-circle {
	background-color: var(--m3-sys-light-surface-container-high);
}

.fab-primary.fab-light-theme,
.fab-primary:hover.fab-light-theme,
.fab-primary:focus.fab-light-theme,
.fab-primary:not(.extended-fab):active.fab-light-theme,
.fab-primary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(--m3-sys-light-primary-container);
}

.fab-secondary.fab-light-theme,
.fab-secondary:hover.fab-light-theme,
.fab-secondary:focus.fab-light-theme,
.fab-secondary:not(.extended-fab):active.fab-light-theme,
.fab-secondary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(--m3-sys-light-secondary-container);
}

.fab-tertiary.fab-light-theme,
.fab-tertiary:hover.fab-light-theme,
.fab-tertiary:focus.fab-light-theme,
.fab-tertiary:not(.extended-fab):active.fab-light-theme,
.fab-tertiary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(--m3-sys-light-tertiary-container);
}

.fab-surface:hover.fab-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-high-passthrough-primary-opacity-08
	);
}

.fab-primary:hover.fab-light-theme {
	background-color: var(
		--m3-composite-light-primary-container-passthrough-on-primary-container-opacity-08
	);
}

.fab-secondary:hover.fab-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.fab-tertiary:hover.fab-light-theme {
	background-color: var(
		--m3-composite-light-tertiary-container-passthrough-on-tertiary-container-opacity-08
	);
}

.fab-surface:focus.fab-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-high-passthrough-primary-opacity-12
	);
}

.fab-primary:focus.fab-light-theme {
	background-color: var(
		--m3-composite-light-primary-container-passthrough-on-primary-container-opacity-12
	);
}

.fab-secondary:focus.fab-light-theme {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.fab-tertiary:focus.fab-light-theme {
	background-color: var(
		--m3-composite-light-tertiary-container-passthrough-on-tertiary-container-opacity-12
	);
}

.fab-surface:active.fab-light-theme > .fab-inner-circle {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.fab-primary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(
		--m3-state-layers-light-on-primary-container-opacity-12
	);
}

.fab-secondary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(
		--m3-state-layers-light-on-secondary-container-opacity-12
	);
}

.fab-tertiary:active.fab-light-theme > .fab-inner-circle {
	background-color: var(
		--m3-state-layers-light-on-tertiary-container-opacity-12
	);
}

/* FABS / DARK */

.fab-surface.fab-dark-theme,
.fab-primary.fab-dark-theme,
.fab-secondary.fab-dark-theme,
.fab-tertiary.fab-dark-theme {
	box-shadow: var(--m3-elevation-dark-3);
}

.fab-surface:hover.fab-dark-theme,
.fab-primary:hover.fab-dark-theme,
.fab-secondary:hover.fab-dark-theme,
.fab-tertiary:hover.fab-dark-theme {
	box-shadow: var(--m3-elevation-dark-4);
}

.fab-surface:focus.fab-dark-theme,
.fab-primary:focus.fab-dark-theme,
.fab-secondary:focus.fab-dark-theme,
.fab-tertiary:focus.fab-dark-theme {
	box-shadow: var(--m3-elevation-dark-3);
}

.fab-surface.fab-dark-theme > * {
	color: var(--m3-sys-dark-primary);
}

.fab-primary.fab-dark-theme > * {
	color: var(--m3-sys-dark-on-primary-container);
}

.fab-secondary.fab-dark-theme > * {
	color: var(--m3-sys-dark-on-secondary-container);
}

.fab-tertiary.fab-dark-theme > * {
	color: var(--m3-sys-dark-on-tertiary-container);
}

.fab-surface.fab-dark-theme,
.fab-surface:hover.fab-dark-theme,
.fab-surface:focus.fab-dark-theme,
.fab-surface:not(.extended-fab):active.fab-dark-theme,
.fab-surface:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-sys-dark-surface-container-high);
}

.fab-primary.fab-dark-theme,
.fab-primary:hover.fab-dark-theme,
.fab-primary:focus.fab-dark-theme,
.fab-primary:not(.extended-fab):active.fab-dark-theme,
.fab-primary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-sys-dark-primary-container);
}

.fab-secondary.fab-dark-theme,
.fab-secondary:hover.fab-dark-theme,
.fab-secondary:focus.fab-dark-theme,
.fab-secondary:not(.extended-fab):active.fab-dark-theme,
.fab-secondary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-sys-dark-secondary-container);
}

.fab-tertiary.fab-dark-theme,
.fab-tertiary:hover.fab-dark-theme,
.fab-tertiary:focus.fab-dark-theme,
.fab-tertiary:not(.extended-fab):active.fab-dark-theme,
.fab-tertiary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-sys-dark-tertiary-container);
}

.fab-surface:hover.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-high-passthrough-primary-opacity-08
	);
}

.fab-primary:hover.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-primary-container-passthrough-on-primary-container-opacity-08
	);
}

.fab-secondary:hover.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.fab-tertiary:hover.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-tertiary-container-passthrough-on-tertiary-container-opacity-08
	);
}

.fab-surface:focus.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-high-passthrough-primary-opacity-12
	);
}

.fab-primary:focus.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-primary-container-passthrough-on-primary-container-opacity-12
	);
}

.fab-secondary:focus.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.fab-tertiary:focus.fab-dark-theme {
	background-color: var(
		--m3-composite-dark-tertiary-container-passthrough-on-tertiary-container-opacity-12
	);
}

.fab-surface:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.fab-primary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(--m3-state-layers-dark-on-primary-container-opacity-12);
}

.fab-secondary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(
		--m3-state-layers-dark-on-secondary-container-opacity-12
	);
}

.fab-tertiary:active.fab-dark-theme > .fab-inner-circle {
	background-color: var(
		--m3-state-layers-dark-on-tertiary-container-opacity-12
	);
}

/* ==========EXTENDED FABS========== */
.extended-fab {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1.6rem 2rem 1.6rem 1.6rem;
	gap: 1.2rem;
	border-radius: 1.6rem;
	min-width: 10.7rem;
	height: 5.6rem;
	width: fit-content;
}

/* ==========NAVIGATION RAILS========== */
.navigation-rail {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 8rem;
	z-index: 998;
	display: flex;
	align-items: center;
	padding: 1rem;
	height: 100%;
	flex-direction: column;
	padding-top: 4.4rem;
	padding-bottom: 5.6rem;
	gap: 4rem;
	transition: left 0.3s ease-in-out;
	left: -8rem;
}

.navigation-rail-active {
	left: 0;
}

.navigation-rail-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 10.8rem;
	transition: height 0.125s ease-in-out;
	padding-top: 3rem;
}

.icons-on-navigation-rail::-webkit-scrollbar {
	display: none; /* CHROME */
}

.icons-on-navigation-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	overflow-x: hidden;
	justify-content: flex-start;
	transition: height 0.3s ease-in-out;
	overflow-y: auto;
	scroll-behavior: smooth;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.icon-container-on-navigation-rail {
	cursor: pointer;
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	max-width: 8rem;
	height: 5.6rem;
}

.label-on-navigation-rail {
	text-align: center;
	user-select: none;
	white-space: nowrap;
}

.icon-on-navigation-rail {
	width: 5.6rem;
	display: flex;
	justify-content: center;
	border-radius: 10rem;
	align-items: center;
}

.big-icon-on-navigation-rail {
	height: 5.6rem;
}

.small-icon-on-navigation-rail {
	height: 3.2rem;
}

/* NAVIGATION RAILS / LIGHT */
.navigation-rail-light-theme {
	background-color: var(--m3-sys-light-secondary-container);
}

.label-on-navigation-rail-light-theme,
.icon-on-navigation-rail-light-theme {
	color: var(--m3-sys-light-on-secondary-container);
}

.inactive-icon-container-on-navigation-rail.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: transparent;
}

.inactive-icon-container-on-navigation-rail:hover.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(--m3-state-layers-light-on-surface-opacity-08);
}

.inactive-icon-container-on-navigation-rail:focus.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(--m3-state-layers-light-on-surface-opacity-12);
}

.inactive-icon-container-on-navigation-rail:active.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(--m3-state-layers-light-on-surface-opacity-12);
}

.active-icon-container-on-navigation-rail.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(--m3-sys-light-secondary-container);
}

.active-icon-container-on-navigation-rail:hover.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.active-icon-container-on-navigation-rail:focus.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.active-icon-container-on-navigation-rail:active.icon-container-on-navigation-rail-light-theme
	.icon {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

/* NAVIGATION RAILS / DARK */

.navigation-rail-dark-theme {
	background-color: var(--m3-sys-dark-secondary-container);
}

.label-on-navigation-rail-dark-theme,
.icon-on-navigation-rail-dark-theme {
	color: var(--m3-sys-dark-on-secondary-container);
}

.inactive-icon-container-on-navigation-rail:hover.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-08);
}

.active-icon-container-on-navigation-rail.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-sys-dark-secondary-container);
}
.inactive-icon-container-on-navigation-rail.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: transparent;
}

.inactive-icon-container-on-navigation-rail:hover.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-08);
}

.inactive-icon-container-on-navigation-rail:focus.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-12);
}

.inactive-icon-container-on-navigation-rail:active.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-12);
}

.active-icon-container-on-navigation-rail.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(--m3-sys-dark-secondary-container);
}

.active-icon-container-on-navigation-rail:hover.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.active-icon-container-on-navigation-rail:focus.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.active-icon-container-on-navigation-rail:active.icon-container-on-navigation-rail-dark-theme
	.icon {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

/* ==========BOTTOM APP BARS========== */
.bottom-app-bar {
	display: flex;
	width: 100%;
	height: 8rem;
	align-items: center;
	padding: 0rem 1.6rem 0rem 0.4rem;
	overflow: hidden;
	justify-content: space-between;
	z-index: 500;
	position: sticky;
}

.icons-on-bottom-app-bar {
	display: flex;
}

.icon-container-on-bottom-app-bar {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	flex-shrink: 0;
	border-radius: 50%;
}

.label-on-bottom-app-bar {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* BOTTOM APP BARS / LIGHT */
.bottom-app-bar.bottom-app-bar-light-theme {
	background-color: var(--m3-sys-light-surface-container);
}

.icon-on-bottom-app-bar.icon-on-bottom-app-bar-light-theme {
	color: var(--m3-sys-light-on-surface-variant);
}

.icon-container-on-bottom-app-bar:hover.icon-container-on-bottom-app-bar-light-theme {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-08);
}

.icon-container-on-bottom-app-bar:focus.icon-container-on-bottom-app-bar-light-theme {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-container-on-bottom-app-bar:active.icon-container-on-bottom-app-bar-light-theme {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

/* BOTTOM APP BARS / DARK */
.bottom-app-bar.bottom-app-bar-dark-theme {
	background-color: var(--m3-sys-dark-surface-container);
}

.label-on-bottom-app-bar.label-on-bottom-app-bar-dark-theme,
.icon-on-bottom-app-bar.icon-on-bottom-app-bar-dark-theme {
	color: var(--m3-sys-dark-on-surface-variant);
}

.icon-container-on-bottom-app-bar:hover.icon-container-on-bottom-app-bar-dark-theme {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-08);
}

.icon-container-on-bottom-app-bar:focus.icon-container-on-bottom-app-bar-dark-theme {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-container-on-bottom-app-bar:active.icon-container-on-bottom-app-bar-bar-dark-theme {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

/* ==========CAROUSEL========== */

.carousel {
	display: flex;
	flex-direction: row;
	overflow-x: hidden;
	position: relative;
	scroll-behavior: smooth;
	padding: 0.8rem 1.6rem;
	gap: 0.8rem;
}

.carousel-item {
	position: relative;
	user-select: none;
	transition: width 0.5s ease-in-out;
	box-sizing: border-box;
	padding: 0;
	flex-shrink: 0;
	overflow: hidden;
}
.carousel-item img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: 2.8rem;
}

.carousel-container {
	display: flex;
	align-items: center;
}

.carousel-item-regular {
	width: 18.8rem;
	height: 20.5rem;
}

.carousel-item-small {
	width: 12rem;
}
.carousel-item-extra-small {
	width: 5.6rem;
}

.upper-label-on-carousel-item {
	position: absolute;
	bottom: 4.3rem;
	left: 1.6rem;
}

.lower-label-on-carousel-item {
	position: absolute;
	bottom: 1.6rem;
	left: 1.6rem;
}

.element-on-carousel-item {
	position: absolute;
	color: var(--m3-ref-neutral-neutral100);
	white-space: nowrap;
}

/* ==========TOP APP BARS========== */

.top-app-bar {
	display: flex;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	right: 0;
	height: 6.4rem;
	width: 100%;
	flex-direction: row;
	align-items: baseline;
	padding: 0.8rem 1rem;
	text-align: left;
	flex-direction: column;
	transition: background-color 0.1s ease-out;
}

.top-app-bar .icon {
	font-size: 3rem;
}

.title-on-top-app-bar {
	flex: 1;
	width: 100%;
}

.top-app-bar-small-centered {
	text-align: center;
}

.right-container-on-top-app-bar {
	display: flex;
	flex-direction: row;
}

.left-container-on-top-app-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.top-app-bar-medium {
	height: 11.6rem;
	gap: 0.4rem;
}

.top-app-bar-large > .text,
.top-app-bar-medium > .text {
	padding-left: 1.6rem;
}

.top-app-bar-large {
	height: 16rem;
	gap: 4rem;
}

/* TOP APP BAR / LIGHT THEME */

.top-app-bar.top-app-bar-light-theme {
	background-color: var(--m3-sys-light-surface);
	color: var(--m3-sys-light-on-surface-variant);
}

.top-app-bar-on-scroll.top-app-bar-light-theme {
	background-color: var(--m3-sys-light-surface-container);
}

.title-on-top-app-bar.typography-light-theme {
	color: var(--m3-sys-light-on-surface);
}

/* TOP APP BAR / DARK THEME */

.top-app-bar.top-app-bar-dark-theme {
	background-color: var(--m3-sys-dark-surface);
	color: var(--m3-sys-dark-on-surface-variant);
}

.top-app-bar-on-scroll.top-app-bar-dark-theme {
	background-color: var(--m3-sys-dark-surface-container);
}

.title-on-top-app-bar.typography-dark-theme {
	color: var(--m3-sys-dark-on-surface);
}

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

.tooltip {
	display: flex;
	flex-direction: column;
	max-width: 31.2rem;
	min-height: 8.8rem;
	border-radius: 1.2rem;
	gap: 0.8rem;
	padding: 0rem 0rem 0.8rem;
	overflow: auto;
	z-index: 5;
	text-align: left;
	justify-content: space-around;
}

.tooltip-content {
	padding: 1.2rem 1.6rem 0.4rem;
	gap: 0.4rem;
}

.tooltip-actions {
	padding: 0rem 0.8rem;
	gap: 0.8rem;
	display: flex;
}

.tooltip-with-action-buttons {
	min-height: 13.6rem;
}

.tooltip-plain {
	min-height: auto;
	height: fit-content;
	box-shadow: none;
	text-align: center;
	width: fit-content;
	max-width: 20rem;
}

.tooltip-plain-singleline {
	white-space: nowrap;
	width: fit-content;
	max-width: 100%;
}

.tooltip-with-trigger-component {
	position: absolute;
	pointer-events: none;
	max-width: 10rem;
}

/* TOOLTIPS / LIGHT */
.tooltip.tooltip-light-theme {
	background-color: var(--m3-sys-light-surface-container);
	box-shadow: var(--m3-elevation-light-2);
	color: var(--m3-sys-light-on-surface-variant);
}

.tooltip-plain.tooltip-light-theme {
	background-color: var(--m3-sys-light-inverse-surface);
	color: var(--m3-sys-light-inverse-on-surface);
}

/* TOOLTIPS / DARK */

.tooltip.tooltip-dark-theme {
	background-color: var(--m3-sys-dark-surface-container);
	box-shadow: var(--m3-elevation-dark-2);
	color: var(--m3-sys-dark-on-surface-variant);
}

.tooltip-plain.tooltip-dark-theme {
	background-color: var(--m3-sys-dark-inverse-surface);
	color: var(--m3-sys-dark-inverse-on-surface);
}

/* ==========TEXT FIELDS ========== */

.text-field {
	display: flex;
	flex-direction: column;
	width: 21rem;
	min-height: 5.6rem;
	transition: all 0.4s ease-in-out;
}

.icon-on-text-field {
	width: 4.8rem;
	height: 5.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-field-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 0rem;
	padding: 0.4rem 0rem 0.4rem 1.6rem;
}

.text-field-input {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 2.4rem;
	letter-spacing: 0.05rem;
	border: none;
	background-color: transparent;
	flex: 1;
	padding: 0;
}

.text-field-container {
	display: flex;
	flex: 1;
}

.text-field-active-indicator {
	width: 21rem;
	height: 0.1rem;
}

.text-field > * {
	text-align: left;
}

.text-field-with-leading-icon > div > .text-field-content {
	padding-left: 0rem;
}

.text-field-filled {
	border-radius: 0.4rem 0.4rem 0rem 0rem;
}

.text-field-disabled {
	pointer-events: none;
	opacity: 38%;
}

.text-field-outlined {
	border-radius: 0.4rem;
}

.label-on-text-field-outlined {
	position: absolute;
	transform: translate(1.5rem, -0.9rem);
	padding: 0rem 0.5rem 0rem 0.5rem;
}

.text-field-active-indicator {
	transition: all 0.2s ease-in-out;
	height: 0.1rem;
	border: none;
	box-shadow: none;
	transform: translateY(-0.1rem);
}

.text-field-active-indicator-error,
.text-field-active-indicator-active {
	height: 0.2rem;
	border: none;
	transform: translateY(-0.2rem);
}

.text-field-supporting-text {
	text-align: left;
}

.text-field-supporting-text.text-field-supporting-text-light-theme {
	padding: 0.4rem 1.6rem 0rem 1.6rem;
}

.icon-button.trailing-icon-on-text-field {
	height: 5.6rem;
}

/* TEXT FIELDS / LIGHT */

.text-field-light-theme.text-field-error .label-on-text-field {
	color: var(--m3-sys-light-error);
}

.text-field-light-theme.text-field-error .trailing-icon-on-text-field {
	color: var(--m3-sys-light-error);
}

.text-field-light-theme .icon-on-text-field {
	color: var(--m3-sys-light-on-surface-variant);
}

.text-field-light-theme .label-on-text-field-outlined {
	background-color: var(--m3-sys-light-surface);
}

.text-field-light-theme .text-field-input {
	color: var(--m3-sys-light-on-surface);
}

.text-field-light-theme .label-on-text-field {
	color: var(--m3-sys-light-on-surface);
}

.text-field-outlined:hover.text-field-light-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-light-on-surface);
}

.text-field-outlined.text-field-error.text-field-light-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-light-error) !important;
}

.text-field-outlined.text-field-active.text-field-light-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-light-primary) !important;
}

.text-field-outlined.text-field-light-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-light-outline);
	background-color: var(--m3-sys-light-surface);
}

.text-field-filled.text-field-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
}

.text-field-filled:hover.text-field-light-theme {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-surface-opacity-08
	);
}

.text-field-active-indicator.text-field-active-indicator-light-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-light-on-surface-variant);
}
.text-field-active-indicator-active.text-field-active-indicator-light-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-light-primary);
}

.text-field-active-indicator-error.text-field-active-indicator-light-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-light-error);
}

/* TEXT FIELDS / DARK */

.text-field-dark-theme.text-field-error .label-on-text-field {
	color: var(--m3-sys-dark-error);
}

.text-field-dark-theme.text-field-error .trailing-icon-on-text-field {
	color: var(--m3-sys-dark-error);
}

.text-field-dark-theme .icon-on-text-field {
	color: var(--m3-sys-dark-on-surface-variant);
}

.text-field-dark-theme .label-on-text-field-outlined {
	background-color: var(--m3-sys-dark-surface);
}

.text-field-dark-theme .text-field-input {
	color: var(--m3-sys-dark-on-surface);
}

.text-field-dark-theme .label-on-text-field {
	color: var(--m3-sys-dark-on-surface);
}

.text-field-outlined:hover.text-field-dark-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-dark-on-surface);
}

.text-field-outlined.text-field-error.text-field-dark-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-dark-error) !important;
}

.text-field-outlined.text-field-active.text-field-dark-theme {
	box-shadow: inset 0 0 0 0.2rem var(--m3-sys-dark-primary) !important;
}

.text-field-outlined.text-field-dark-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-light-outline);
	background-color: var(--m3-sys-dark-surface);
}

.text-field-filled.text-field-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.text-field-filled:hover.text-field-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-surface-opacity-08
	);
}

.text-field-active-indicator.text-field-active-indicator-dark-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-dark-on-surface-variant);
}

.text-field-active-indicator-active.text-field-active-indicator-dark-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-dark-primary);
}

.text-field-active-indicator-error.text-field-active-indicator-dark-theme {
	box-shadow: inset 0 0 0 0.1rem var(--m3-sys-dark-error);
}

/* ========== LISTS ========== */

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.list-scroll {
	height: auto;
	overflow: clip;
	overflow-y: scroll;
	width: 100%;
}

.list-item {
	display: flex;
	flex-direction: column;
	position: relative;
	max-width: 36rem;
	overflow: hidden;
	transition: background-color 0.2s ease-in-out;
	width: 100%;
}

.list-item-state-layer {
	display: flex;
	flex-grow: 1;
	gap: 1.6rem;
}

.list-item-3-line {
	height: 8.8rem;
}

.list-item-2-line {
	height: 7.2rem;
}

.list-item-1-line {
	height: 5.6rem;
}

.list-item-content {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: left;
	flex: 1;
}

.list-item-3-line .list-item-state-layer {
	padding: 1.2rem 2.4rem 1.2rem 1.6rem;
}

.list-item-2-line .list-item-state-layer {
	padding: 0.8rem 2.4rem 0.8rem 1.6rem;
}

.list-item-1-line .list-item-state-layer {
	padding: 0.8rem 2.4rem 0.8rem 1.6rem;
}

.list-item-3-line .text {
	max-height: 4rem;
	overflow: clip;
}

.list-item-2-line .text {
	max-height: 2rem;
	overflow: clip;
}

.list-item-1-line .text {
	max-height: 2.4rem;
	overflow: clip;
}

.list-item-2-line .list-item-leading-element {
	display: flex;
	align-items: center;
}

.list-item-1-line .list-item-leading-element {
	display: flex;
	align-items: center;
}

.list-item-leading-element-monogram {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.list-item-leading-element-monogram .text {
	font-weight: bold;
}

.list-item-leading-element {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.list-item-trailing-element {
	display: flex;
	justify-content: center;
	overflow: hidden;
	align-items: center;
}

.list-item-leading-element-image-small {
	width: 5.6rem;
	height: 5.6rem;
}

.list-item img {
	max-width: 100%;
}

.list-item-1-line .list-item-leading-element-image-small {
	max-width: 4rem;
	height: 4rem;
}

.list-item-3-line .list-item-leading-element-image-big {
	max-width: 11.4rem;
	height: 6.4rem;
}

.list-item-2-line .list-item-leading-element-image-big {
	max-width: 8.8rem;
	height: 4.8rem;
}

.list-item-1-line .list-item-leading-element-image-big {
	max-width: 6.4rem;
	height: 3.6rem;
}

.list-item-trailing-element-icon-interactable {
	cursor: pointer;
}

.list-item-inner-circle {
	width: 2rem;
	height: 2rem;
	pointer-events: none;
}

.list-item .list-item-inner-circle {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	opacity: 0;
}

.list-item:hover .list-item-inner-circle {
	transform: translate(-50%, -50%) scale(2);
	opacity: 1;
}

/* LIST ITEMS / LIGHT THEME */

.list-item-light-theme {
	background-color: var(--m3-sys-light-surface);
}

.list-item:hover.list-item-light-theme {
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-opacity-08
	);
}

.list-item:focus.list-item-light-theme {
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-opacity-12
	);
}

.list-item:active.list-item-light-theme {
	background-color: var(
		--m3-composite-light-surface-passthrough-on-surface-opacity-08
	);
}

.list-item-light-theme.list-item-with-divider {
	border-bottom: 0.1rem solid var(--m3-sys-light-outline-variant);
}

.list-item-light-theme .list-item-leading-element-monogram {
	background-color: var(--m3-sys-light-primary-container);
	color: var(--m3-sys-light-on-primary-container);
}

.list-item-light-theme .title-on-list-item {
	color: var(--m3-sys-light-on-surface);
}

.list-item-light-theme .supporting-text-on-list-item {
	color: var(--m3-sys-light-on-surface-variant);
}

.list-item-light-theme .list-item-inner-circle {
	background-color: var(--m3-state-layers-light-on-surface-opacity-08);
}

/* LIST ITEMS / DARK THEME */

.list-item-dark-theme {
	background-color: var(--m3-sys-dark-surface);
}

.list-item:hover.list-item-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-opacity-08
	);
}

.list-item:focus.list-item-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-opacity-12
	);
}

.list-item:active.list-item-dark-theme {
	background-color: var(
		--m3-composite-dark-surface-passthrough-on-surface-opacity-08
	);
}

.list-item-dark-theme.list-item-with-divider {
	border-bottom: 0.1rem solid var(--m3-sys-dark-outline-variant);
}

.list-item-dark-theme .list-dark-leading-element-monogram {
	background-color: var(--m3-sys-dark-primary-container);
	color: var(--m3-sys-dark-on-primary-container);
}

.list-item-dark-theme .title-on-list-item {
	color: var(--m3-sys-dark-on-surface);
}

.list-item-dark-theme .supporting-text-on-list-item {
	color: var(--m3-sys-dark-on-surface-variant);
}

.list-item-dark-theme .list-item-inner-circle {
	background-color: var(--m3-state-layers-dark-on-surface-opacity-08);
}

/* ==========DIALOGS========== */
.dialog {
	display: none;
	flex-direction: column;
	align-items: center;
	padding: 0;
	width: 31.2rem;
	border-radius: 2.8rem;
	border: none;
	overflow: hidden;
	max-width: 100vw;
}

.dialog .text {
	text-align: left;
}

.dialog-visible {
	display: flex;
}

.dialog-text-content {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
	padding: 2.4rem 2.4rem 0rem;
}

.dialog-actions {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-direction: row-reverse;
	padding: 2.4rem 2.4rem 2.4rem 0.8rem;
	gap: 0.8rem;
}

.dialog-actions .button {
	flex: 1;
	max-width: 7.7rem;
}

.dialog-divider {
	padding: 1.6rem 0rem 0rem;
}

/* DIALOGS / LIGHT THEME */
.dialog-light-theme {
	background: var(--m3-sys-light-surface-container-high);
}

.dialog-light-theme .title-on-dialog {
	color: var(--m3-sys-light-on-surface);
}

.dialog-light-theme .supporting-text-on-dialog {
	color: var(--m3-sys-light-on-surface-variant);
}

.dialog-light-theme .icon-on-dialog {
	color: var(--m3-sys-light-secondary);
}

/* DIALOGS / DARK THEME */
.dialog-dark-theme {
	background: var(--m3-sys-dark-surface-container-high);
}

.dialog-dark-theme .title-on-dialog {
	color: var(--m3-sys-dark-on-surface);
}

.dialog-dark-theme .supporting-text-on-dialog {
	color: var(--m3-sys-dark-on-surface-variant);
}

.dialog-dark-theme .icon-on-dialog {
	color: var(--m3-sys-dark-secondary);
}

/* ==========SIDE SHEETS========== */
.side-sheet {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 32rem;
	z-index: 1000;
	overflow-y: auto;
	display: flex;
	padding-top: 6.4rem;
	transition-duration: 0.4s;
	transition: transform 0.3s ease-in-out;
	transform: translateX(92%);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.side-sheet-active {
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-duration: 0.8s;
	transform: translateX(0);
}

@media (max-width: 768px) {
	.side-sheet {
		visibility: hidden;
	}
}
.arrow-on-side-sheet {
	position: absolute;
	left: -0.4rem;
	top: 50%;
}

.side-sheet-header {
	display: flex;
	padding: 1.2rem 1.2rem 1.6rem 2.4rem;
	block-size: fit-content;
	width: 100%;
}

.side-sheet-icon {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.title-on-side-sheet {
	display: flex;
	align-items: center;
	flex: 1;
}

.side-sheet-icon-container {
	cursor: pointer;
}

.side-sheet-content {
	padding-left: 3rem;
	padding-right: 3rem;
	height: 100%;
}

/* SIDE SHEETS / LIGHT THEME */

.side-sheet-light-theme {
	background-color: var(--m3-sys-light-surface-container);
	border-left: 0.1rem solid var(--m3-sys-light-outline-variant);
	color: var(--m3-sys-light-on-surface-variant);
}

/* SIDE SHEETS / DARK THEME */

.side-sheet-dark-theme {
	background-color: var(--m3-sys-dark-surface-container);
	border-left: 0.1rem solid var(--m3-sys-dark-outline-variant);
	color: var(--m3-sys-dark-on-surface-variant);
}

/* ==========SLIDERS========== */

.slider-container {
	min-width: 18rem;
	max-width: 18rem;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 0.4rem;
	outline: none;
	opacity: 0.7;
	border-radius: 0.4rem;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.slider::-moz-range-thumb {
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.slider-thumb-overlay {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-25%, -125%);
	transition: opacity 0.3s ease-in-out;
}

.slider-thumb-overlay-active {
	opacity: 1;
}

.slider-thumb-tooltip {
	opacity: 0;
	width: fit-content;
	transform: translate(-10%, -85%);
	transition: opacity 0.6s ease-in-out;
}

.slider-teardrop {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0 50% 50% 50%;
	transform: rotate(225deg);
}

.slider-value {
	transform: translate(0%, -125%);
	user-select: none;
	text-align: center;
}

.slider-thumb-tooltip-active {
	opacity: 1;
}

.slider-thumb {
	user-select: none;
	pointer-events: none;
	position: relative;
	width: 2rem;
	height: 2rem;
	top: 1.7rem;
	border-radius: 50%;
	z-index: 1;
}

/* SLIDERS / LIGHT THEME */

.slider-value-light-theme {
	color: var(--m3-sys-light-on-primary);
}

.slider-thumb-overlay-light-theme {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}

.slider-teardrop-light-theme {
	background-color: var(--m3-sys-light-primary);
}

.slider-thumb-light-theme {
	background-color: var(--m3-sys-light-primary);
}

/* SLIDERS / DARK THEME */

.slider-value-dark-theme {
	color: var(--m3-sys-dark-on-primary);
}

.slider-thumb-overlay-dark-theme {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}

.slider-teardrop-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

.slider-thumb-dark-theme {
	background-color: var(--m3-sys-dark-primary);
}

/* ==========SNACKBARS========== */
.snackbar {
	width: 34.4rem;
	height: fit-content;
	border-radius: 0.4rem;
	position: fixed;
	top: 90%;
	left: 50%;
	transform: translate(-40%, -50%);
	z-index: 5000;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	padding: 1.4rem 1.6rem;
	gap: 0.4rem;
	text-align: left;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
}

.snackbar-container {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 768px) {
	.snackbar {
		width: 80%;
		transform: translate(-50%, -50%);
	}
}

.snackbar-active {
	pointer-events: all;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

.message-on-snackbar {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.actions-on-snackbar {
	display: flex;
	flex-direction: row;
}

.icon-button-on-snackbar {
	width: 4rem !important;
	height: 4rem !important;
}

/* SNACKBARS / LIGHT THEME */

.snackbar-light-theme {
	background-color: var(--m3-sys-light-inverse-surface);
	color: var(--m3-sys-light-inverse-on-surface);
}

.snackbar-light-theme .button .text {
	color: var(--m3-sys-light-inverse-primary);
}

.snackbar-light-theme .button:hover {
	background-color: var(--m3-state-layers-light-inverse-primary-opacity-08);
}

.snackbar-light-theme .button:focus {
	background-color: var(--m3-state-layers-light-inverse-primary-opacity-12);
}

.snackbar-light-theme .button:active {
	background-color: var(--m3-state-layers-light-inverse-primary-opacity-12);
}

.snackbar-light-theme .icon-button-on-snackbar {
	color: var(--m3-sys-light-inverse-on-surface) !important;
}

/* SNACKBARS / DARK THEME */

.snackbar-dark-theme {
	background-color: var(--m3-sys-dark-inverse-surface);
	color: var(--m3-sys-dark-inverse-on-surface);
}

.snackbar-dark-theme .button .text {
	color: var(--m3-sys-dark-inverse-primary);
}

.snackbar-dark-theme .button:hover {
	background-color: var(--m3-state-layers-dark-inverse-primary-opacity-08);
}

.snackbar-dark-theme .button:focus {
	background-color: var(--m3-state-layers-dark-inverse-primary-opacity-12);
}

.snackbar-dark-theme .button:active {
	background-color: var(--m3-state-layers-dark-inverse-primary-opacity-12);
}

.snackbar-dark-theme .icon-button-on-snackbar {
	color: var(--m3-sys-dark-inverse-on-surface) !important;
}

/* ==========ICON BUTTONS========== */

.icon-button {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.icon-button-disabled {
	opacity: 38%;
	pointer-events: none;
}

/* ICON BUTTONS / LIGHT THEME */

.icon-button.icon-button-light-theme.icon-button-standard {
	color: var(--m3-sys-light-on-surface-variant);
	background-color: transparent;
}

.icon-button.icon-button-light-theme.icon-button-standard:hover {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-08);
}

.icon-button.icon-button-light-theme.icon-button-standard:focus {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}
.icon-button.icon-button-light-theme.icon-button-standard:active {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-filled {
	color: var(--m3-sys-light-on-primary);
	background-color: var(--m3-sys-light-primary);
}

.icon-button.icon-button-light-theme.icon-button-filled:hover {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-filled:focus {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-filled:active {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal {
	color: var(--m3-sys-light-on-secondary-container);
	background-color: var(--m3-sys-light-secondary-container);
}

.icon-button.icon-button-light-theme.icon-button-tonal:hover {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal:focus {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal:active {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined {
	background-color: transparent;
	color: var(--m3-sys-light-on-surface-variant);
	border: 0.1rem solid var(--m3-sys-light-outline);
}

.icon-button.icon-button-light-theme.icon-button-outlined:hover {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-08);
}

.icon-button.icon-button-light-theme.icon-button-outlined:focus {
	border-radius: none;
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-outlined:active {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-deselected {
	color: var(--m3-sys-light-on-surface-variant);
	background-color: transparent;
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-deselected:hover {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-08);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-deselected:focus {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-deselected:active {
	background-color: var(--m3-state-layers-light-on-surface-variant-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-selected {
	color: var(--m3-sys-light-primary);
	background-color: transparent;
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-selected:hover {
	background-color: var(--m3-state-layers-light-primary-opacity-08);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-selected:focus {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-standard.icon-button-selected:active {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-deselected {
	color: var(--m3-sys-light-primary);
	background-color: var(--m3-sys-light-surface-container-highest);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-deselected:active {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-selected {
	color: var(--m3-sys-light-on-primary);
	background-color: var(--m3-sys-light-primary);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-selected:hover {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-selected:focus {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-filled.icon-button-selected:active {
	background-color: var(
		--m3-composite-light-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-deselected {
	color: var(--m3-sys-light-on-secondary-container);
	background-color: var(--m3-sys-light-surface-container-highest);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-deselected:active {
	background-color: var(
		--m3-composite-light-surface-container-highest-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-selected {
	color: var(--m3-sys-light-on-secondary-container);
	background-color: var(--m3-sys-light-secondary-container);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-selected:hover {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-selected:focus {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-tonal.icon-button-selected:active {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-deselected {
	color: var(--m3-sys-light-on-surface-variant);
	background-color: var(--m3-sys-light-inverse-on-surface);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-light-inverse-on-surface-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-light-inverse-on-surface-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-deselected:active {
	background-color: var(
		--m3-composite-light-inverse-on-surface-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-selected {
	color: var(--m3-sys-light-inverse-on-surface);
	background-color: var(--m3-sys-light-inverse-surface);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-selected:hover {
	background-color: var(
		--m3-composite-light-on-surface-variant-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-selected:focus {
	background-color: var(
		--m3-composite-light-on-surface-variant-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-light-theme.icon-button-outlined.icon-button-selected:active {
	background-color: var(
		--m3-composite-light-on-surface-variant-passthrough-on-surface-variant-opacity-12
	);
}

/* ICON BUTTONS / DARK THEME */

.icon-button.icon-button-dark-theme.icon-button-standard {
	color: var(--m3-sys-dark-on-surface-variant);
	background-color: transparent;
}

.icon-button.icon-button-dark-theme.icon-button-standard:hover {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-08);
}

.icon-button.icon-button-dark-theme.icon-button-standard:focus {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-standard:active {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-filled {
	color: var(--m3-sys-dark-on-primary);
	background-color: var(--m3-sys-dark-primary);
}

.icon-button.icon-button-dark-theme.icon-button-filled:hover {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled:focus {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled:active {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal {
	color: var(--m3-sys-dark-on-secondary-container);
	background-color: var(--m3-sys-dark-secondary-container);
}

.icon-button.icon-button-dark-theme.icon-button-tonal:hover {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal:focus {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal:active {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined {
	background-color: transparent;
	color: var(--m3-sys-dark-on-surface-variant);
	border: 0.1rem solid var(--m3-sys-dark-outline);
}

.icon-button.icon-button-dark-theme.icon-button-outlined:hover {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-08);
}

.icon-button.icon-button-dark-theme.icon-button-outlined:focus {
	border-radius: none;
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-outlined:active {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-deselected {
	color: var(--m3-sys-dark-on-surface-variant);
	background-color: transparent;
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-deselected:hover {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-08);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-deselected:focus {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-deselected:active {
	background-color: var(--m3-state-layers-dark-on-surface-variant-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-selected {
	color: var(--m3-sys-dark-primary);
	background-color: transparent;
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-selected:hover {
	background-color: var(--m3-state-layers-dark-primary-opacity-08);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-selected:focus {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-standard.icon-button-selected:active {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-deselected {
	color: var(--m3-sys-dark-primary);
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-deselected:active {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-selected {
	color: var(--m3-sys-dark-on-primary);
	background-color: var(--m3-sys-dark-primary);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-selected:hover {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-selected:focus {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-filled.icon-button-selected:active {
	background-color: var(
		--m3-composite-dark-primary-passthrough-on-primary-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-deselected {
	color: var(--m3-sys-dark-on-secondary-container);
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-deselected:active {
	background-color: var(
		--m3-composite-dark-surface-container-highest-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-selected {
	color: var(--m3-sys-dark-on-secondary-container);
	background-color: var(--m3-sys-dark-secondary-container);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-selected:hover {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-selected:focus {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-tonal.icon-button-selected:active {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-deselected {
	color: var(--m3-sys-dark-on-surface-variant);
	background-color: var(--m3-sys-dark-inverse-on-surface);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-deselected:hover {
	background-color: var(
		--m3-composite-dark-inverse-on-surface-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-deselected:focus {
	background-color: var(
		--m3-composite-dark-inverse-on-surface-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-deselected:active {
	background-color: var(
		--m3-composite-dark-inverse-on-surface-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-selected {
	color: var(--m3-sys-dark-inverse-on-surface);
	background-color: var(--m3-sys-dark-inverse-surface);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-selected:hover {
	background-color: var(
		--m3-composite-dark-on-surface-variant-passthrough-on-surface-variant-opacity-08
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-selected:focus {
	background-color: var(
		--m3-composite-dark-on-surface-variant-passthrough-on-surface-variant-opacity-12
	);
}

.icon-button.icon-button-dark-theme.icon-button-outlined.icon-button-selected:active {
	background-color: var(
		--m3-composite-dark-on-surface-variant-passthrough-on-surface-variant-opacity-12
	);
}

/* ==========SEGMENTED BUTTONS========== */
.segmented-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.3s, box-shadow 0.3s;
	white-space: nowrap;
	min-width: 10.8rem;
	height: 4rem;
	padding: 1rem 1.2rem;
	gap: 0.8rem;
	width: fit-content;
}

.segmented-button-left {
	border-radius: 10rem 0rem 0rem 10rem;
}

.segmented-button-right {
	border-radius: 0rem 10rem 10rem 0rem;
}

.segmented-button-group {
	display: flex;
}

/* SEGMENTED BUTTONS / LIGHT THEME */

.segmented-button-deselected.segmented-button-light-theme {
	background-color: var(--m3-sys-light-secondary-container);
	border: 0.1rem solid var(--m3-sys-light-outline);
	color: var(--m3-sys-light-on-secondary-container);
}

.segmented-button-deselected.segmented-button-light-theme:hover {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.segmented-button-deselected.segmented-button-light-theme:focus {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.segmented-button-deselected.segmented-button-light-theme:active {
	background-color: var(
		--m3-composite-light-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.segmented-button-selected.segmented-button-light-theme {
	background-color: transparent;
	border: 0.1rem solid var(--m3-sys-light-outline);
	color: var(--m3-sys-light-on-surface);
}

.segmented-button-selected.segmented-button-light-theme:hover {
	background-color: var(
		--m3-state-layers-light-on-secondary-container-opacity-08
	);
}

.segmented-button-selected.segmented-button-light-theme:focus {
	background-color: var(
		--m3-state-layers-light-on-secondary-container-opacity-12
	);
}

.segmented-button-selected.segmented-button-light-theme:active {
	background-color: var(
		--m3-state-layers-light-on-secondary-container-opacity-12
	);
}

/* SEGMENTED BUTTONS / DARK THEME */

.segmented-button-deselected.segmented-button-dark-theme {
	background-color: var(--m3-sys-dark-secondary-container);
	border: 0.1rem solid var(--m3-sys-dark-outline);
	color: var(--m3-sys-dark-on-secondary-container);
}

.segmented-button-deselected.segmented-button-dark-theme:hover {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-08
	);
}

.segmented-button-deselected.segmented-button-dark-theme:focus {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.segmented-button-deselected.segmented-button-dark-theme:active {
	background-color: var(
		--m3-composite-dark-secondary-container-passthrough-on-secondary-container-opacity-12
	);
}

.segmented-button-selected.segmented-button-dark-theme {
	background-color: transparent;
	border: 0.1rem solid var(--m3-sys-dark-outline);
	color: var(--m3-sys-dark-on-surface);
}

.segmented-button-selected.segmented-button-dark-theme:hover {
	background-color: var(
		--m3-state-layers-dark-on-secondary-container-opacity-08
	);
}

.segmented-button-selected.segmented-button-dark-theme:focus {
	background-color: var(
		--m3-state-layers-dark-on-secondary-container-opacity-12
	);
}

.segmented-button-selected.segmented-button-dark-theme:active {
	background-color: var(
		--m3-state-layers-dark-on-secondary-container-opacity-12
	);
}

/* ========== MENUS ========== */

.menu {
	position: fixed;
	display: flex;
	flex-direction: column;
	width: fit-content;
	border-radius: 0.4rem;
	left: -80rem;
	top: 5.6rem;
	transition: left 0.3s ease-in-out;
	z-index: 90;
	cursor: pointer;
}

.menu-active {
	left: 8rem;
}

.menu .menu {
	position: absolute;
	left: 100%;
	top: 0;
	border-left: none;
}

.menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 20rem;
	height: 5.6rem;
	user-select: none;
	transition: width 0.3s ease-in-out;
}

.menu-item-disabled {
	opacity: 38%;
	pointer-events: none;
}

.menu-item-state-layer {
	display: flex;
	flex-grow: 1;
	gap: 1.2rem;
	padding-left: 1.2rem;
}

.menu-item-content {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: left;
	flex: 1;
}

.menu-item-leading-icon {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.menu-item-trailing-icon {
	display: flex;
	justify-content: center;
	overflow: hidden;
	align-items: center;
}

.menu-item-inner-circle {
	width: 2rem;
	height: 2rem;
	pointer-events: none;
	display: none;
}

.menu-item .menu-item-inner-circle {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	opacity: 0;
}

.menu-item:active .menu-item-inner-circle {
	transform: translate(-50%, -50%) scale(2);
	opacity: 1;
}

.menu-item:hover {
	width: 20.1rem;
}

/* MENU ITEM / LIGHT THEME */

.menu-light-theme {
	border: 0.1rem solid var(--m3-sys-light-outline-variant);
	background-color: var(--m3-sys-light-surface-container);
}

.menu-item:hover.menu-item-light-theme:hover {
	background-color: var(
		--m3-composite-light-on-surface-variant-passthrough-on-surface-opacity-08
	);
}

.menu-item:focus.menu-item-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
}

.menu-item:active.menu-item-light-theme {
	background-color: var(--m3-sys-light-surface-container-highest);
}

.menu-light-theme .menu-item-with-divider {
	border-bottom: 0.1rem solid var(--m3-sys-light-outline-variant);
}

.menu-item-light-theme .menu-item-inner-circle {
	background-color: var(--m3-state-layers-light-primary-opacity-12);
}

.menu-item-light-theme .label-on-menu-item {
	color: var(--m3-sys-light-on-surface);
}

.menu-item-light-theme .menu-item-leading-icon {
	color: var(--m3-sys-light-on-surface-variant);
}

.menu-item-light-theme .menu-item-trailing-icon > * > * {
	color: var(--m3-sys-light-on-surface-variant);
}

/* MENU ITEM / DARK THEME */

.menu-dark-theme {
	border: 0.1rem solid var(--m3-sys-dark-outline-variant);
	background-color: var(--m3-sys-dark-surface-container);
}

.menu-item:hover.menu-item-dark-theme {
	background-color: var(
		--m3-composite-dark-on-surface-variant-passthrough-on-surface-opacity-08
	);
}

.menu-item:focus.menu-item-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.menu-item:active.menu-item-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-highest);
}

.menu-dark-theme .menu-item-with-divider {
	border-bottom: 0.1rem solid var(--m3-sys-dark-outline-variant);
}

.menu-item-dark-theme .menu-item-inner-circle {
	background-color: var(--m3-state-layers-dark-primary-opacity-12);
}

.menu-item-dark-theme .label-on-menu-item {
	color: var(--m3-sys-dark-on-surface);
}

.menu-item-dark-theme .menu-item-leading-icon {
	color: var(--m3-sys-dark-on-surface-variant);
}

.menu-item-dark-theme .menu-item-trailing-icon > * > * {
	color: var(--m3-sys-dark-on-surface-variant);
}

/* ========== NAVIGATION DRAWERS ========== */

.navigation-drawer {
	overflow-y: auto;
	position: fixed;
	z-index: 900;
	left: -90rem;
	transition: left 0.3s ease-in-out;
	height: 100%;
	padding: 1.2rem;
	display: flex;
	cursor: pointer;
	padding-top: 5.6rem;
}

.navigation-drawer-active {
	left: 0;
}

.navigation-drawer-item {
	display: flex;
	border-radius: 100rem;
	white-space: nowrap;
	padding: 1.6rem 2.4rem 1.6rem 1.6rem;
	height: 5.6rem;
}

.navigation-drawer-state-layer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.2rem;
	text-align: left;
	justify-content: center;
	width: 100%;
}

.label-on-navigation-drawer {
	flex: 1;
}

.navigation-drawer-item-interactive {
	cursor: pointer;
}

.navigation-drawer-item-noninteractive {
	pointer-events: none;
}

.icon-on-navigation-drawer {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* NAVIGATION DRAWER / LIGHT THEME */

.navigation-drawer-light-theme {
	background-color: var(--m3-sys-light-surface-container-low);
}

.navigation-drawer-item-light-theme {
	background-color: var(--m3-sys-light-surface-container-low);
	color: var(--m3-sys-light-on-surface-variant);
}

.navigation-drawer-item-light-theme:hover {
	background-color: var(--m3-sys-light-secondary-container);
	color: var(--m3-sys-light-on-secondary-container);
}

/* NAVIGATION DRAWER / DARK THEME */

.navigation-drawer-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-low);
}

.navigation-drawer-item-dark-theme {
	background-color: var(--m3-sys-dark-surface-container-low);
	color: var(--m3-sys-dark-on-surface-variant);
}

.navigation-drawer-item-dark-theme:hover {
	background-color: var(--m3-sys-dark-secondary-container);
	color: var(--m3-sys-dark-on-secondary-container);
}