@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
[data-action] {
	cursor: pointer;
}

html, body { height: 100%; }
body {
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	font-family: var(--font-sans);
	font-weight: 400;
	font-style: normal;
	color: var(--color-gray-700);
	background-color: var(--color-gray-50);
	-moz-osx-font-smoothing: grayscale;
  	-webkit-font-smoothing: antialiased;
	transition: background-color var(--anim-duration) ease;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-500) var(--color-gray-200);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--color-gray-200);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-500);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-600);
}

/* Variables */
:root {
	--color-red-50:#fef2f2;
    --color-red-100:#fee2e2;
    --color-red-200:#fecaca;
    --color-red-300:#fca5a5;
    --color-red-400:#f87171;
    --color-red-500:#ef4444;
    --color-red-600:#dc2626;
    --color-red-700:#b91c1c;
    --color-red-800:#991b1b;
    --color-red-900:#7f1d1d;
    --color-red-950:oklch(.258 .092 26.042);
    --color-orange-50:#fffaf0;
    --color-orange-100:#feebc8;
    --color-orange-200:#fbd38d;
    --color-orange-300:#f6ad55;
    --color-orange-400:#ed8936;
    --color-orange-500:#dd6b20;
    --color-orange-600:#c05621;
    --color-orange-700:#9c4221;
    --color-orange-800:#7b341e;
    --color-orange-900:#652b19;
    --color-orange-950:oklch(.266 .079 36.259);
    --color-amber-50:oklch(.987 .022 95.277);
    --color-amber-100:oklch(.962 .059 95.617);
    --color-amber-200:oklch(.924 .12 95.746);
    --color-amber-300:oklch(.879 .169 91.605);
    --color-amber-400:oklch(.828 .189 84.429);
    --color-amber-500:oklch(.769 .188 70.08);
    --color-amber-600:oklch(.666 .179 58.318);
    --color-amber-700:oklch(.555 .163 48.998);
    --color-amber-800:oklch(.473 .137 46.201);
    --color-amber-900:oklch(.414 .112 45.904);
    --color-amber-950:oklch(.279 .077 45.635);
    --color-yellow-50:#fffbeb;
    --color-yellow-100:#fef3c7;
    --color-yellow-200:#fde68a;
    --color-yellow-300:#fcd34d;
    --color-yellow-400:#fbbf24;
    --color-yellow-500:#f59e0b;
    --color-yellow-600:#d97706;
    --color-yellow-700:#b45309;
    --color-yellow-800:#92400e;
    --color-yellow-900:#78350f;
    --color-yellow-950:oklch(.286 .066 53.813);
    --color-lime-50:oklch(.986 .031 120.757);
    --color-lime-100:oklch(.967 .067 122.328);
    --color-lime-200:oklch(.938 .127 124.321);
    --color-lime-300:oklch(.897 .196 126.665);
    --color-lime-400:oklch(.841 .238 128.85);
    --color-lime-500:oklch(.768 .233 130.85);
    --color-lime-600:oklch(.648 .2 131.684);
    --color-lime-700:oklch(.532 .157 131.589);
    --color-lime-800:oklch(.453 .124 130.933);
    --color-lime-900:oklch(.405 .101 131.063);
    --color-lime-950:oklch(.274 .072 132.109);
    --color-green-50:#ecfdf5;
    --color-green-100:#d1fae5;
    --color-green-200:#a7f3d0;
    --color-green-300:#6ee7b7;
    --color-green-400:#34d399;
    --color-green-500:#10b981;
    --color-green-600:#059669;
    --color-green-700:#047857;
    --color-green-800:#065f46;
    --color-green-900:#064e3b;
    --color-green-950:oklch(.266 .065 152.934);
    --color-emerald-50:oklch(.979 .021 166.113);
    --color-emerald-100:oklch(.95 .052 163.051);
    --color-emerald-200:oklch(.905 .093 164.15);
    --color-emerald-300:oklch(.845 .143 164.978);
    --color-emerald-400:oklch(.765 .177 163.223);
    --color-emerald-500:oklch(.696 .17 162.48);
    --color-emerald-600:oklch(.596 .145 163.225);
    --color-emerald-700:oklch(.508 .118 165.612);
    --color-emerald-800:oklch(.432 .095 166.913);
    --color-emerald-900:oklch(.378 .077 168.94);
    --color-emerald-950:oklch(.262 .051 172.552);
    --color-teal-50:#f0fdfa;
    --color-teal-100:#ccfbf1;
    --color-teal-200:#99f6e4;
    --color-teal-300:#5eead4;
    --color-teal-400:#2dd4bf;
    --color-teal-500:#14b8a6;
    --color-teal-600:#0d9488;
    --color-teal-700:#0f766e;
    --color-teal-800:#115e59;
    --color-teal-900:#134e4a;
    --color-teal-950:oklch(.277 .046 192.524);
    --color-cyan-50:#ecfeff;
    --color-cyan-100:#cffafe;
    --color-cyan-200:#a5f3fc;
    --color-cyan-300:#67e8f9;
    --color-cyan-400:#22d3ee;
    --color-cyan-500:#06b6d4;
    --color-cyan-600:#0891b2;
    --color-cyan-700:#0e7490;
    --color-cyan-800:#155e75;
    --color-cyan-900:#164e63;
    --color-cyan-950:oklch(.302 .056 229.695);
    --color-sky-50:oklch(.977 .013 236.62);
    --color-sky-100:oklch(.951 .026 236.824);
    --color-sky-200:oklch(.901 .058 230.902);
    --color-sky-300:oklch(.828 .111 230.318);
    --color-sky-400:oklch(.746 .16 232.661);
    --color-sky-500:oklch(.685 .169 237.323);
    --color-sky-600:oklch(.588 .158 241.966);
    --color-sky-700:oklch(.5 .134 242.749);
    --color-sky-800:oklch(.443 .11 240.79);
    --color-sky-900:oklch(.391 .09 240.876);
    --color-sky-950:oklch(.293 .066 243.157);
    --color-blue-50:#eff6ff;
    --color-blue-100:#dbeafe;
    --color-blue-200:#bfdbfe;
    --color-blue-300:#93c5fd;
    --color-blue-400:#60a5fa;
    --color-blue-500:#3b82f6;
    --color-blue-600:#2563eb;
    --color-blue-700:#1d4ed8;
    --color-blue-800:#1e40af;
    --color-blue-900:#1e3a8a;
    --color-blue-950:oklch(.282 .091 267.935);
    --color-indigo-50:#eef2ff;
    --color-indigo-100:#e0e7ff;
    --color-indigo-200:#c7d2fe;
    --color-indigo-300:#a5b4fc;
    --color-indigo-400:#818cf8;
    --color-indigo-500:#6366f1;
    --color-indigo-600:#4f46e5;
    --color-indigo-700:#4338ca;
    --color-indigo-800:#3730a3;
    --color-indigo-900:#312e81;
    --color-indigo-950:oklch(.257 .09 281.288);
    --color-violet-50:oklch(.969 .016 293.756);
    --color-violet-100:oklch(.943 .029 294.588);
    --color-violet-200:oklch(.894 .057 293.283);
    --color-violet-300:oklch(.811 .111 293.571);
    --color-violet-400:oklch(.702 .183 293.541);
    --color-violet-500:oklch(.606 .25 292.717);
    --color-violet-600:oklch(.541 .281 293.009);
    --color-violet-700:oklch(.491 .27 292.581);
    --color-violet-800:oklch(.432 .232 292.759);
    --color-violet-900:oklch(.38 .189 293.745);
    --color-violet-950:oklch(.283 .141 291.089);
    --color-purple-50:#f5f3ff;
    --color-purple-100:#ede9fe;
    --color-purple-200:#ddd6fe;
    --color-purple-300:#c4b5fd;
    --color-purple-400:#a78bfa;
    --color-purple-500:#8b5cf6;
    --color-purple-600:#7c3aed;
    --color-purple-700:#6d28d9;
    --color-purple-800:#5b21b6;
    --color-purple-900:#4c1d95;
    --color-purple-950:oklch(.291 .149 302.717);
    --color-fuchsia-50:oklch(.977 .017 320.058);
    --color-fuchsia-100:oklch(.952 .037 318.852);
    --color-fuchsia-200:oklch(.903 .076 319.62);
    --color-fuchsia-300:oklch(.833 .145 321.434);
    --color-fuchsia-400:oklch(.74 .238 322.16);
    --color-fuchsia-500:oklch(.667 .295 322.15);
    --color-fuchsia-600:oklch(.591 .293 322.896);
    --color-fuchsia-700:oklch(.518 .253 323.949);
    --color-fuchsia-800:oklch(.452 .211 324.591);
    --color-fuchsia-900:oklch(.401 .17 325.612);
    --color-fuchsia-950:oklch(.293 .136 325.661);
    --color-pink-50:#fdf2f8;
    --color-pink-100:#fce7f3;
    --color-pink-200:#fbcfe8;
    --color-pink-300:#f9a8d4;
    --color-pink-400:#f472b6;
    --color-pink-500:#ec4899;
    --color-pink-600:#db2777;
    --color-pink-700:#be185d;
    --color-pink-800:#9d174d;
    --color-pink-900:#831843;
    --color-pink-950:oklch(.284 .109 3.907);
    --color-rose-50:oklch(.969 .015 12.422);
    --color-rose-100:oklch(.941 .03 12.58);
    --color-rose-200:oklch(.892 .058 10.001);
    --color-rose-300:oklch(.81 .117 11.638);
    --color-rose-400:oklch(.712 .194 13.428);
    --color-rose-500:oklch(.645 .246 16.439);
    --color-rose-600:oklch(.586 .253 17.585);
    --color-rose-700:oklch(.514 .222 16.935);
    --color-rose-800:oklch(.455 .188 13.697);
    --color-rose-900:oklch(.41 .159 10.272);
    --color-rose-950:oklch(.271 .105 12.094);
    --color-slate-50:oklch(.984 .003 247.858);
    --color-slate-100:oklch(.968 .007 247.896);
    --color-slate-200:oklch(.929 .013 255.508);
    --color-slate-300:oklch(.869 .022 252.894);
    --color-slate-400:oklch(.704 .04 256.788);
    --color-slate-500:oklch(.554 .046 257.417);
    --color-slate-600:oklch(.446 .043 257.281);
    --color-slate-700:oklch(.372 .044 257.287);
    --color-slate-800:oklch(.279 .041 260.031);
    --color-slate-900:oklch(.208 .042 265.755);
    --color-slate-950:oklch(.129 .042 264.695);
    --color-gray-50:  #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;
    --color-gray-950:oklch(.13 .028 261.692);
    --color-zinc-50:oklch(.985 0 0);
    --color-zinc-100:oklch(.967 .001 286.375);
    --color-zinc-200:oklch(.92 .004 286.32);
    --color-zinc-300:oklch(.871 .006 286.286);
    --color-zinc-400:oklch(.705 .015 286.067);
    --color-zinc-500:oklch(.552 .016 285.938);
    --color-zinc-600:oklch(.442 .017 285.786);
    --color-zinc-700:oklch(.37 .013 285.805);
    --color-zinc-800:oklch(.274 .006 286.033);
    --color-zinc-900:oklch(.21 .006 285.885);
    --color-zinc-950:oklch(.141 .005 285.823);
    --color-neutral-50:oklch(.985 0 0);
    --color-neutral-100:oklch(.97 0 0);
    --color-neutral-200:oklch(.922 0 0);
    --color-neutral-300:oklch(.87 0 0);
    --color-neutral-400:oklch(.708 0 0);
    --color-neutral-500:oklch(.556 0 0);
    --color-neutral-600:oklch(.439 0 0);
    --color-neutral-700:oklch(.371 0 0);
    --color-neutral-800:oklch(.269 0 0);
    --color-neutral-900:oklch(.205 0 0);
    --color-neutral-950:oklch(.145 0 0);
    --color-stone-50:oklch(.985 .001 106.423);
    --color-stone-100:oklch(.97 .001 106.424);
    --color-stone-200:oklch(.923 .003 48.717);
    --color-stone-300:oklch(.869 .005 56.366);
    --color-stone-400:oklch(.709 .01 56.259);
    --color-stone-500:oklch(.553 .013 58.071);
    --color-stone-600:oklch(.444 .011 73.639);
    --color-stone-700:oklch(.374 .01 67.558);
    --color-stone-800:oklch(.268 .007 34.298);
    --color-stone-900:oklch(.216 .006 56.043);
    --color-stone-950:oklch(.147 .004 49.25);
    --color-black:#000;
    --color-white:#fff;

	/* Primary colors */
	--color-primary: #4285f4;
	--color-primary-hover: #3578d6;
	--color-primary-light: #7aabfa;

    /* Border */
    --border-color: #e4e4e7;
    --border-style: solid;
    /* Border-radius */
	--radius-full: 50%;
	--radius-s: 0.188rem;  /* 3px */
    --radius-sm: 0.25rem;  /* 4px */
	--radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem;   /* 8px */
	--radius-xl: 0.75rem;  /* 12px */
	--radius-4xl: 2rem;  /* 32px */
	/* Alert colors */
	--alert-info-color: #004f99;
	--alert-info-bg: #f5faff;
	--alert-success-color: #1e4620;
	--alert-success-bg: #edf7ed;
	--alert-warning-color: #663c00;
	--alert-warning-bg: #fff4e5;
	--alert-error-color: #5f2120;
	--alert-error-bg: #fdeded;
	/* Spacing */
	--spacing: 0.25rem;
	/* Font */
	--font-sans: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--font-kanit: "Kanit", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	/* Font size */
	--text-2xs: 0.625rem; /* 10px */
	--text-2xs--line-height: calc(1.25 / 0.625);
	--text-xs: 0.75rem; /* 12px */
	--text-xs--line-height: calc(1.25 / 0.75);
	--text-sm: 0.875rem; /* 14px */
	--text-sm--line-height: calc(1.25 / 0.875);
	--text-base: 1rem; /* 16px */
	--text-base--line-height: calc(1.5 / 1);
	--text-lg: 1.125rem;
    --text-lg--line-height:calc(1.75/1.125);
	--text-xl: 1.25rem; /* 20px */
    --text-xl--line-height:calc(1.75/1.125);
}

/* Links */
a {
	text-decoration: none;
	color: var(--color-primary);
	transition: color var(--anim-duration) ease;
}

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-family: var(--font-kanit);
	font-weight: 400;
	line-height: 1.2;
}
h1.title { 
	font-size: 2rem;
	font-weight: 300;
	margin-bottom: 0;
}

/* Use a medium font-weight for <strong> emphasis */
strong {
  font-weight: 500;
}

/* Paragraphs */
p {
	margin-bottom: 1rem;
}
p:last-child {
	margin-bottom: 0;
}

/* Lists */
ul.list {
	list-style: none;
	margin-bottom: 1rem;
}
ul.list li::before {
  content: "\2714"; 
  color: currentColor; 
  margin-right: 0.5em; 
}

/* SELECTS */
select {
	width: 100%;
	cursor: pointer;
}

select, 
textarea {
	font-family: var(--font-sans);
	width: 100%;
	color: var(--color-gray-400);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--color-gray-100);
	padding: 0.688rem 0.5rem;
}

/* INPUTS */
input, textarea {
	width: 100%;
	color: var(--color-gray-400);
	font-size: 0.875rem;
	line-height: 1.125rem;
	padding: 0.625rem;
	background-color: var(--color-gray-50);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-sizing: border-box;
	transition: color var(--anim-duration) ease, border-color var(--anim-duration) ease, box-shadow var(--anim-duration) ease;
}
textarea:focus,
input:focus {
	color: #495057;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-gray-700); /* Or any text color you need */
	-webkit-box-shadow: 0 0 0 30px white inset !important;
    caret-color: auto;
    background-color: transparent !important;
}
input,
button {
	font-family: var(--font-sans);
}
button:focus,
textarea:focus,
input:focus {
	outline: none;
}

/* Animated label input */
.input-block {
	position: relative;
}
.input-block label {
	position: absolute;
	top: calc(50% - .725rem);
	left: 1rem;
	pointer-events: none;
	background: #fff;
	transition: color var(--anim-duration) ease, border-color var(--anim-duration) ease, box-shadow var(--anim-duration) ease;
}

.input-block input:focus + label,
.input-block input:not(:placeholder-shown) + label {
	z-index: 1;
	color: var(--color-primary);
	top: -.8rem;
	left: .4rem;
	font-size: 0.875rem;
	padding: 0 .4rem;
}
.input-block input::-webkit-input-placeholder{
	color:transparent;
}
.input-block input::-moz-placeholder{
	color:transparent;
}
.input-block input,
.form-control {
	display: block;
	font-family: var(--font-sans);
	width: 100%;
	padding: .562rem .75rem;
	line-height: 1.5;
	background-color: var(--color-white);
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: var(--radius-md);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-block input[disabled],
.form-control[disabled] {
	cursor: not-allowed;
}
.input-block input:focus,
.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* CHECKBOX */
input[type=checkbox] {
	width: 1rem;
	height: 1rem;
}

/* Markdown blocks */
.markdown {
	border-left: 2px solid var(--color-gray-800);
	margin-bottom: 1rem;
	background-color: #f8f8f8;
}

/* <hr> element style */
.separator {
  border: none;
  height: 1px;
  background: var(--color-gray-200);
  margin: .5rem 0;
}

/* Input group */
.input-group {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	position: relative;
	background-color: var(--color-gray-50);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all var(--anim-duration) ease;
}
.input-group.error {
	animation: shake 0.4s;
	-webkit-animation: shake 0.4s;
	border-color: var(--alert-error-color);
}
.input-group.error .icon,
.input-group.error input {
	color: var(--alert-error-color);
}
.input-group:focus-within {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.188rem rgba(0, 123, 255, 0.25);
}
.input-group svg {
	width: 1rem;
  	color: var(--color-gray-500);
	transition: all var(--anim-duration) ease;
}
.input-group input {
	flex: 1;
	width: 100%;
	height: 100%;
	border: none;
	background-color: transparent;
	border-radius: 0;
	transition: inherit;
}
.input-group input:focus {
	color: inherit;
	border-color: inherit;
	outline: 0;
	box-shadow: none;
}
.input-group.input-group-lg {
	height: 3.125rem; /* 50px */
}

/*******************
****** SWITCH ******
********************/

input[type="checkbox"].switch {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

input[type="checkbox"].switch + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 1.5rem;
}

input[type="checkbox"].switch + label::before {
  content: "";
  width: 1.8rem;
  height: .75rem;
  border-radius: .5rem;
  background-color: var(--color-gray-200);
  transition: all 200ms ease-in-out;
}

input[type="checkbox"].switch + label::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  content: "";
  left: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-gray-100);
  border-radius: 50%;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  transform: translateX(0%);
  transition: all 200ms ease-in-out, transform 200ms ease-in-out;
}

input[type="checkbox"].switch:focus + label::before {
  /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
}
input[type="checkbox"].switch:checked + label::before {
  background-color: var(--color-blue-300);
}

input[type="checkbox"].switch:checked + label::after {
  content: "";
  transform: translateX(calc(100% - .2rem));
  background-color: var(--color-primary);
}

input[type="checkbox"].switch:disabled + label {
  color: #777;
}

input[type="checkbox"].switch:disabled + label::before {
  background-color: #CCC;
}

input[type="checkbox"].switch:disabled + label::after {
  background-color: #777;
}

/**************************
********** Badges *********
***************************/

.badge {
	font-size: 0.75rem;
	line-height: 0.75rem;
	font-weight: 500;
	padding: 0.125rem 0.375rem;
	width: fit-content;
	height: fit-content;
	color: var(--color-gray-600);
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
}

/**************************
****** Ripple effect ******
***************************/








/* The container for the dot */
.ripple-container {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
}

/* The solid center dot */
.ripple-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-blue-300);
  border-radius: 50%;
}

/* The animated ripple rings */
.ripple-container::before,
.ripple-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-blue-300);
  opacity: 0.6;
  animation: ripple 2s infinite;
}

.ripple-container::after {
  animation-delay: 1s; /* Stagger the second ring */
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}











/* Button Styling */
.ripple-effect {
	position: relative;
	overflow: hidden;
	outline: none;
	transition: background var(--anim-duration);
	z-index: 1;
  }

/* Ripple Effect */
.ripple {
	position: absolute;
	border-radius: var(--radius-full);
	transform: scale(0);
	background: rgba(0, 0, 0, 0.3);
	z-index: 0;
	animation: ripple-animation 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Ripple Animation */
@keyframes ripple-animation {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Extras */
.hidden { display: none; }
.grayscale { filter: grayscale(100%); }

/* Icons */
.icon {
	color: var(--color-gray-500);
	width: 1rem;
	height: 1rem;
	display: block;
	transition: color var(--anim-duration) ease;
}
svg.icon.sm {
	width: 0.625rem;
	height: 0.625rem;
}
svg.icon.lg {
	width: 1.125rem;
	height: 1.125rem;
}
svg.icon.xl {
	width: 1.25rem;
	height: 1.25rem;
}
.icon.icon-xl {
	width: 1.5rem;
	height: 1.5rem;
}
.icon.icon-xxl {
	width: 2.375rem; /* 38px */
	height: 2.375rem;
}
.icon.icon-xxxl {
	width: 3rem;
	height: 3rem;
}
.ic-flip-h {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.ic-flip-v {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

/* Buttons */
button span {
	pointer-events: none;
}
button {
	font-weight: 500;
	cursor:pointer;
	position: relative;
	overflow: hidden;
	background-color: var(--color-white);
	padding: 0.3rem 0.5rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	transition: background-color var(--anim-duration) ease, color var(--anim-duration) ease, border-color var(--anim-duration) ease, box-shadow var(--anim-duration) ease, opacity var(--anim-duration) ease;
}
.btn:focus:not(:active)::after {
    display: block;
}
.btn[disabled] {
	/*cursor: not-allowed;*/
}
.btn[disabled] .icon {
	color: var(--color-gray-300);
}
.button-wrapper {
	cursor: not-allowed;
}
.button-wrapper button.btn.btn-blank[disabled] {
	pointer-events: none;
}
button .value {
	line-height: 1rem;
}
.btn > * {
	display: inline-block;
	vertical-align: middle;
}
.btn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray-50);
	color: var(--color-gray-700);
	padding: 0.688rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}
.btn-primary .icon {
	color: var(--color-white);
}
.btn.rounded {
	border-radius: var(--radius-full);
}
.btn.dashed {
	outline: 2px dashed var(--color-gray-300);
	outline-offset: -2px;
	border: none;
	background: none;
	border-radius: var(--radius-full);
	text-align: center;
}
.btn.dashed:hover {
	outline-color: var(--color-primary);
	color: var(--color-primary);
}
.btn.invert {
	background-color: var(--color-gray-900);
	color: var(--color-white);
	border-color: var(--color-white);
}
.btn.danger {
	background-color: var(--danger);
	color: var(--color-white);
	border-color: var(--danger);
}
.btn.success {
	background-color: var(--success);
}
.btn.btn-dark {
	background-color: var(--color-gray-800);
	border-color: var(--color-gray-700);
	color: var(--color-gray-100);
}
.btn.btn-dark:hover {
	background-color: var(--color-gray-900);
}
.btn.round {
	padding: 0.313rem;
	border-radius: var(--radius-full);
	width: fit-content;
}
.btn.round svg {
	font-size: 1rem;
}
.btn.round[disabled] {
	background-color: var(--light)!important;
}
.btn.size-mini {
	padding: .375rem .5rem;
}
.btn .counter {
	min-width: 1rem;
	height: 1rem;
	line-height: .825rem;
	font-size: 70%;
	padding: 0 .2rem;
	color: var(--color-gray-600);
	background-color: var(--color-white);
	border: 1px solid var(--border-color);
  	border-radius: var(--radius-sm);
}
.btn-primary .counter {
	border: none;
	background-color: var(--color-primary-light);
	color: currentColor;
	line-height: 1rem;
}
.btn.btn-clear {
	padding: 0;
	background: transparent;
	border: none;
}
button.btn.nostyle {
	border: none;
	background: none;
	padding: 0;
	border-radius: inherit;
}
.btn.btn-blank {
	border-color: transparent;
	background-color: transparent;
}
.btn:hover {
	background-color: var(--color-gray-200);
}
.btn:hover .icon {
	color: var(--color-gray-700);
}
.btn-primary:hover {
	background-color: var(--color-primary-hover);
}
.btn-primary:hover .icon {
	color: var(--color-white);
}
.btn.active {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn-none,
.btn-none:hover {
	background-color: transparent;
	border: none;
	padding: 0;
}
/* Countdown inside button */
.btn .countdown {
	min-width: 2.5rem;
	text-align: left;
}

/* Button and checkbox growing hover effect */
.btn-icon {
	padding: 0;
	width: 2.125rem; /* 34px */
	height: 2.125rem; /* 34px */
	border-radius: var(--radius-full);
}
.btn-icon:hover {
	background: transparent;
}
.btn-icon .icon {
  	position: relative;
  	z-index: 1;
}
.btn-icon::before,
.checkbox-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-gray-200);
	border-radius: var(--radius-full);
	opacity: 0;
	transform: scale(0); /* start invisible */
	transform-origin: center; /* grow from the center out */
	transition: transform var(--anim-duration) ease, opacity var(--anim-duration) ease;
}
.btn-icon:hover::before,
.checkbox-container:hover::before {
	opacity: 1;
  	transform: scale(1); /* expand to fill the button */
}

.checkbox-container {
	display: flex;
	width: 34px;
	height: 34px;
	position: relative;
	align-items: center;
	justify-content: center;
}
.checkbox-container input {
	position: relative;
	z-index: 1;
}

/* Button sizes */
.btn-l {
	padding: 1rem;
}

/* Inverted colors*/
.inverted-light,
.inverted-light .icon {
	color: currentColor;
}

.inverted-dark,
.inverted-dark .icon {
	color: currentColor;
}

/**************************************/

/* Border */
.border {
    border-style: var(--border-style);
    border-width: 1px;
    border-color: var(--border-color);
}
/* Border radius */
.rounded, .rounded-full { border-radius: var(--radius-full); }
.rounded-s { border-radius: var(--radius-s); } /* 0.188rem (3px) */
.rounded-sm { border-radius: var(--radius-sm); } /* 0.25rem (4px) */
.rounded-md { border-radius: var(--radius-md); } /* 0.375rem (6px) */
.rounded-lg { border-radius: var(--radius-lg); } /* 0.5rem (8px) */
.rounded-xl { border-radius: var(--radius-xl); } /* 0.75rem (12px) */
.rounded-4xl { border-radius: var(--radius-4xl); }  /* 2rem (32px) */

/* Display */
.hidden { display: none; }
.block { display: block; }

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

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-visible { overflow: visible; }

/* Position */
.absolute { position: absolute; }
.relative { position: relative; }

/* Pointer events */
.pointer-events-auto { pointer-events: auto; }
.pointer-events-none { pointer-events: none; }

/* top / right / bottom / left */
.inset-0 { inset: 0; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.top-1 { top: var(--spacing); } /* 0.25rem */
.top-2 { top: calc(var(--spacing) * 2); } /* 0.5rem */
.top-4 { top: calc(var(--spacing) * 4); } /* 1rem */

.bottom-1 { bottom: var(--spacing); } /* 0.25rem */
.bottom-2 { bottom: calc(var(--spacing) * 2); } /* 0.5rem */

.right-1 { right: calc(var(--spacing) * 1); } /* 0.25rem */
.right-2 { right: calc(var(--spacing) * 2); } /* 0.5rem */
.right-4 { right: calc(var(--spacing) * 4); } /* 1rem */

/* z-index */
.z-1 { z-index: 1; }
.z-99 { z-index: 99; }
.z-888 { z-index: 888; }
.z-999 { z-index: 999; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }

/* flex-basis */
.basis-full { flex-basis: 100%; }

/* flex-grow */
.grow-0 { flex-grow: 0; }

/* flex-shrink */
.shrink-0 { flex-shrink: 0; }

/* flex-wrap */
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }

/* Grid */
.grid { display: grid; }
/* Grit template columns */
.grid-cols-30-70 { grid-template-columns: minmax(0,3fr) minmax(0,7fr); }
.grid-cols-40-60 { grid-template-columns: minmax(0,4fr) minmax(0,6fr); }
.grid-cols-50-50 { grid-template-columns: minmax(0,5fr) minmax(0,5fr); }
/* Grid column */
.col-span-2 { grid-column: 1 / 3; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Align self */
.self-start {  align-self: flex-start; }
.self-end {  align-self: flex-end; }

/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }

/* Text align */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Gap */
.gap-0 { gap: 0; }
.gap-01 { gap: 0.125rem; } /* 2px */
.gap-1 { gap: calc(var(--spacing) * 1); } /* 4px */
.gap-2 { gap: calc(var(--spacing) * 2); } /* 8px */
.gap-3 { gap: calc(var(--spacing) * 3); } /* 12px */
.gap-4 { gap: calc(var(--spacing) * 4); } /* 16px */
.gap-6 { gap: calc(var(--spacing) * 6); } /* 24px */
.gap-8 { gap: calc(var(--spacing) * 8); } /* 32px */

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: calc(var(--spacing) * 1); } /* 0.25rem */
.p-2 { padding: calc(var(--spacing) * 2); } /* 0.5rem */
.p-4 { padding: calc(var(--spacing) * 4); } /* 1rem */
.p-6 { padding: calc(var(--spacing) * 6); } /* 1.5rem */
.p-8 { padding: calc(var(--spacing) * 8); } /* 2rem */

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: calc(var(--spacing)); }
.pt-2 { padding-top: calc(var(--spacing) * 2); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: calc(var(--spacing)); }
.pr-2 { padding-right: calc(var(--spacing) * 2); }
.pr-4 { padding-right: calc(var(--spacing) * 4); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: calc(var(--spacing)); }
.pb-2 { padding-bottom: calc(var(--spacing) * 2); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: calc(var(--spacing)); }
.pl-2 { padding-left: calc(var(--spacing) * 2); }
.pl-4 { padding-left: calc(var(--spacing) * 4); }

/* Margin */
.m-1 { margin: calc(var(--spacing) * 1); } /* 0.25rem */
.m-2 { margin: calc(var(--spacing) * 2); } /* 0.5rem */
.m-4 { margin: calc(var(--spacing) * 4); } /* 1rem */
.m-6 { margin: calc(var(--spacing) * 6); } /* 1.5rem */
.m-8 { margin: calc(var(--spacing) * 8); } /* 2rem */

.m-auto { margin: auto; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

.mt-1 { margin-top: calc(var(--spacing) * 1); } /* 0.25rem */
.mt-2 { margin-top: calc(var(--spacing) * 2); } /* 0.5rem */
.mt-3 { margin-top: calc(var(--spacing) * 3); } /* 0.75rem */
.mt-4 { margin-top: calc(var(--spacing) * 4); } /* 1rem */
.mt-6 { margin-top: calc(var(--spacing) * 6); } /* 1.5rem */

/* Negative margin */
.-mt-2 {margin-top: calc(var(--spacing) * -2);} /* margin top -0.5rem */
.-mt-4 {margin-top: calc(var(--spacing) * -4);} /* margin top -1rem */
.-ml-2 {margin-left: calc(var(--spacing) * -2);} /* margin left -0.5rem */
.-mr-2 {margin-right: calc(var(--spacing) * -2);} /* margin right -0.5rem */

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: calc(var(--spacing) * 1); } /* 0.25rem */
.ml-2 { margin-left: calc(var(--spacing) * 2); } /* 0.5rem */
.ml-3 { margin-left: calc(var(--spacing) * 3); } /* 0.75rem */
.ml-4 { margin-left: calc(var(--spacing) * 4); } /* 1rem */

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: calc(var(--spacing) * 1); } /* 0.25rem */
.mr-2 { margin-right: calc(var(--spacing) * 2); } /* 0.5rem */
.mr-3 { margin-right: calc(var(--spacing) * 3); } /* 0.75rem */
.mr-4 { margin-right: calc(var(--spacing) * 4); } /* 1rem */

.mb-1 { margin-bottom: calc(var(--spacing) * 1); } /* 0.25rem */
.mb-2 { margin-bottom: calc(var(--spacing) * 2); } /* 0.5rem */
.mb-4 { margin-bottom: calc(var(--spacing) * 4); } /* 1rem */
.mb-6 { margin-bottom: calc(var(--spacing) * 6); } /* 1.5rem */
.mb-8 { margin-bottom: calc(var(--spacing) * 8); } /* 2rem */

/* Width */
.w-fit { width: fit-content; }
.w-max { width: max-content; }
.w-100, .w-full { width: 100%; }

.w-1 { width: var(--spacing); }
.w-2 { width: calc(var(--spacing)*2); }
.w-3 { width: calc(var(--spacing)*3); }
.w-4 { width: calc(var(--spacing)*4); }
.w-5 { width: calc(var(--spacing)*5); }
.w-6 { width: calc(var(--spacing)*6); }
.w-7 { width: calc(var(--spacing)*7); }
.w-8 { width: calc(var(--spacing)*8); }
.w-9 { width: calc(var(--spacing)*9); }
.w-10 { width: calc(var(--spacing)*10); }
.w-15 { width: calc(var(--spacing)*15); }
.w-25 { width: calc(var(--spacing)*25); }
.w-30 { width: calc(var(--spacing)*30); }
.w-40 { width: calc(var(--spacing)*40); }
.w-50 { width: calc(var(--spacing)*50); }

/* Height */
.h-fit { height: fit-content; }
.h-100, .h-full { height: 100%; }

.h-1 { height: var(--spacing); }
.h-2 { height: calc(var(--spacing)*2); }
.h-3 { height: calc(var(--spacing)*3); }
.h-4 { height: calc(var(--spacing)*4); }
.h-5 { height: calc(var(--spacing)*5); }
.h-6 { height: calc(var(--spacing)*6); }
.h-7 { height: calc(var(--spacing)*7); }
.h-8 { height: calc(var(--spacing)*8); }
.h-9 { height: calc(var(--spacing)*9); }
.h-10 { height: calc(var(--spacing)*10); }
.h-20 { height: calc(var(--spacing)*20); }
.h-25 { height: calc(var(--spacing)*25); }

/* Min height */
.min-h-60 { min-height: 60px; }
.min-h-100 { min-height: 100px; }
.min-h-160 { min-height: 160px; }
.min-h-200 { min-height: 200px; }
.min-h-300 { min-height: 300px; }
.min-h-350 { min-height: 350px; }

/* Min width */

.min-w-100 { min-width: 100px; }
.min-w-160 { min-width: 160px; }
.min-w-200 { min-width: 200px; }
.min-w-250 { min-width: 250px; }
.min-w-300 { min-width: 300px; }
.min-w-350 { min-width: 350px; }

/* Max width */
.max-w-200 { max-width: 200px; }
.max-w-300 { max-width: 300px; }
.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }

/* Max height */
.max-h-200 { max-height: 200px; }
.max-h-250 { max-height: 250px; }

/* Interactivity - resize */
.resize-none { resize: none; }

/* Font size */
.text-2xs {
	font-size: var(--text-2xs); /* 0.625rem (10px) */ 
	line-height: var(--text-2xs--line-height); /* calc(1.25 / 0.625) */
}
.text-xs {
	font-size: var(--text-xs); /* 0.75rem (12px) */ 
	line-height: var(--text-xs--line-height); /* calc(1.25 / 0.75) */
}
.text-sm {
	font-size: var(--text-sm); /* 0.875rem (14px) */ 
	line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */
}
.text-lg {
	font-size: var(--text-lg); /* 1.125rem (18px) */ 
	line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */
}
.text-xl {
	font-size: var(--text-xl); /* 1.25rem (20px) */ 
	line-height: var(--text-xl--line-height); /* calc(1.75 / 1.125) */
}

/* Line height */
.leading-none {
	line-height: 1;
}

/* Font weight */
.font-medium {
	font-weight: 500;
}
.font-semibold {
	font-weight: 600;
}
.card .row {
	display: grid;
	grid-template-columns: minmax(0,4fr) minmax(0,6fr);
	padding: 0.25rem 0;
}
.card .row:first-child {
	padding-top: 0;
}
.card .row:last-child {
	border-bottom: unset;
	padding-bottom: 0;
}
.card .row.noline {
	border-bottom: unset;
}
/* Row */
.row {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	min-height: 1.875rem;
	gap: .5rem;
}
.row.title {
	min-height: initial;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.row .label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.25rem;
}
.row .value {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
}
.col {
	flex: 1 0 0%;
}
[class^="col-"] {
  flex: 0 0 auto;
}

/* Colors */
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-gray-500 { color: var(--color-gray-500); }
.text-yellow-400 { color: var(--color-yellow-400); }
.text-yellow-500 { color: var(--color-yellow-500); }
.text-orange-400 { color: var(--color-orange-400); }

/* Background colors */
.bg-white { background-color: var(--color-white); }
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-green-500 { background-color: var(--color-green-500); }

.bg-menu { background-color: rgba(68, 68, 68, 0.1); }

/* Glassmorphism */
.glass {
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.8);
}
.glass.glass-dark {
	background: rgba(0, 0, 0, 0.3);
	border-color: rgba(0, 0, 0, 0.1);
}

/* list-style-type */
.list-decimal { list-style-type: decimal; }
.list-none { list-style-type: none; }

.loading-overlay {
	color: var(--color-gray-500);
    font-size: 1rem;
	background: var(--color-white);
	position: absolute;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.loading-overlay svg {
	width: 3rem;
	height: 3rem;
	color: var(--color-gray-300);
}

/* No data */
.no-data-container {
	position: absolute;
	z-index: 99;
	inset: 0;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.no-data-container button.close {
	position: absolute;
	top: 1rem;
	right: 1rem;
}
.no-data-container svg.icon {
  width: 2rem;
  height: 2rem;
}
.no-data-container .line1 {
  font-size: 1rem;
  font-weight: 500;
}

/* Status icon */
.status-icon {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-gray-300);
}
.status-icon.status-1 {
	background-color: var(--success);
}
.status-icon.status-2 {
	background-color: var(--warning);
}
.status-icon.status-3 {
	background-color: var(--danger);
}

/* DROPBOX */
.dropbox {
	position: relative;
	font-weight: 500;
	line-height: 1rem;
	border-radius: var(--radius-xl);
	background: var(--color-gray-100);
	padding: 1.5rem;
	outline: 2px dashed var(--color-gray-400);
	outline-offset: -10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	transition: background-color var(--anim-duration) ease, outline-color var(--anim-duration) ease, color var(--anim-duration) ease;
}
.dropbox.uploading,
.dropbox.dropbox-active {
	outline-color: var(--color-primary);
	background-color: #e9eefb;
}
.dropbox.dropbox-active .icon {
	color: var(--color-primary);
}
.dropbox .info {
	font-size: .7rem;
	line-height: .8rem;
	color: var(--color-gray-500);
}
.progress-bar-container {
	width: 100%;
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	padding: 2px;
}
.progress-bar-container .progress-bar {
	background-color: var(--color-primary);
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: .7rem;
}

/* Menu navigation */
.menu-nav {
	list-style-type: none;
	background-color: rgba(68, 68, 68, 0.1);
	border-radius: var(--radius-4xl);
	overflow: hidden;
}
.menu-nav li .btn .label {
	flex: 1;
}
.menu-nav li:last-child .btn::before {
	content: unset;
}
.menu-nav li .btn {
	width: 100%;
	text-align: left;
	padding: 0.625rem 1.125rem;
	border-radius: unset;
	color: initial;
	border: none;
}
.menu-nav li .btn::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 1.125rem;
	right: 1.125rem;
	height: 1px;
	background-color: rgba(68, 68, 68, 0.1);
}
.menu-nav li .btn::after {
	content: "›"; /* or "\203A" or "›" */
	position: absolute;
	right: 1.125rem;
	font-size: 1.5rem;
	color: currentColor;
	opacity: 0.5;
	pointer-events: none; 
}
.menu-nav li .btn:hover,
.menu-nav li .btn:focus {
	background: none;
}
.menu-nav li .btn:focus {
	border-color: transparent;
	color: unset;
}
.menu-nav li .icon-container {
	display: flex;
	align-items: center;
  	justify-content: center;
	background-color: rgba(255, 255, 255, 0.5);
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.5rem;
	border-radius: var(--radius-full);
	box-sizing: border-box;
}

/* Responsive */
@media (max-width: 768px) {
	body,
	input,
	select,
	textarea,
	button {
		font-size: 1rem;
	}
}


[type=checkbox],
[type=radio] {
  color-adjust:exact;
  --tw-shadow:0 0 #0000;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#fff;
  background-origin:border-box;
  border-color:#6b7280;
  border-width:1px;
  color:#1c64f2;
  display:inline-block;
  flex-shrink:0;
  height:1rem;
  padding:0;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  vertical-align:middle;
  width:1rem
}
[type=checkbox] {
  border-radius: var(--radius-sm);
}
[type=radio] {
  border-radius:100%
}
/*[type=checkbox]:focus,
[type=radio]:focus {
  --tw-ring-inset:var(--tw-empty);
  --tw-ring-offset-width:2px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:#1c64f2;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
  outline:2px solid transparent;
  outline-offset:2px
}*/
.dark [type=checkbox]:checked,
.dark [type=radio]:checked,
[type=checkbox]:checked,
[type=radio]:checked {
  background-color:currentColor;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-color:transparent
}
[type=checkbox]:checked {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")
}
[type=radio]:checked {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}
[type=checkbox]:indeterminate {
  background-color:currentColor;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
  background-position:50%;
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-color:transparent
}
[type=checkbox]:indeterminate:focus,
[type=checkbox]:indeterminate:hover {
  background-color:currentColor;
  border-color:transparent
}

/* Password validator */
.validator {
	opacity: 0;
	max-height: 0;
  	padding: 0 1rem;
  	overflow: hidden;
  	transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin-top 0.3s ease;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--text-xs);
	line-height: var(--text-xs--line-height);
	width: 100%;
}
.validator.active {
	display: flex;
	max-height: 500px;
	padding: 1rem;
}
.validator .title {
	font-weight: 600;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}
.validator .item {
	color: var(--color-gray-400);
	transition: color var(--anim-duration) ease;
}
.validator .item.valid {
	color: var(--color-green-600);
}
.validator .item::before {
	content: "✖";
	display: inline-block;
	width: 1rem;
	text-align: center;
	margin-right: 0.5rem;
}
.validator .item.valid::before {
	content: "✔";
}

/* Code container */
#code-container input {
	max-width: 4rem;
	height: 4rem;
	font-size: 2.25rem;
    line-height: 2.25rem;
	font-weight: 800;
	text-align: center;
	background-color: var(--color-white);
	color: var(--color-gray-800);
}

/* Overrides */
.flex.hidden { display: none; }


/**************
**** PILL *****
***************/
/* <div class="scroll-pill absolute right-4 bottom-2"></div>*/
/* The outer pill shape */
.scroll-pill {
	width: 20px;
	height: 30px;
	border: 2px solid var(--color-gray-500);
	border-radius: var(--radius-xl);
	display: flex;
	justify-content: center;
	padding-top: 3px;
}

/* The moving dot */
.scroll-pill:after {
	content: '';
	width: 6px;
	height: 6px;
	background-color: var(--color-gray-600);
	border-radius: var(--radius-full);
	animation: scroll-loop 2s infinite ease-in-out;
}

/* The Animation */
@keyframes scroll-loop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}