:root {
	--gap-0: 0rem;
	--gap-1: 0.25rem;
	--gap-2: 0.5rem;
	--gap-3: 0.75rem;
	--gap-4: 1rem;
	--gap-6: 1.5rem;
	--gap-8: 2rem;
	--gap-12: 3rem;
}

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

/* -----------------------------
   Basic Flexbox utilities
   -----------------------------*/
.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}

.flex-row {
	flex-direction: row
}

.flex-row-reverse {
	flex-direction: row-reverse
}

.flex-col {
	flex-direction: column
}

.flex-col-reverse {
	flex-direction: column-reverse
}

.flex-wrap {
	flex-wrap: wrap
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse
}

.flex-nowrap {
	flex-wrap: nowrap
}

.items-start {
	align-items: flex-start
}

.items-center {
	align-items: center
}

.items-end {
	align-items: flex-end
}

.items-baseline {
	align-items: baseline
}

.items-stretch {
	align-items: stretch
}

.justify-start {
	justify-content: flex-start
}

.justify-center {
	justify-content: center
}

.justify-end {
	justify-content: flex-end
}

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

.justify-around {
	justify-content: space-around
}

.justify-evenly {
	justify-content: space-evenly
}

.content-start {
	align-content: flex-start
}

.content-center {
	align-content: center
}

.content-end {
	align-content: flex-end
}

.content-between {
	align-content: space-between
}

.content-around {
	align-content: space-around
}

.self-auto {
	align-self: auto
}

.self-start {
	align-self: flex-start
}

.self-center {
	align-self: center
}

.self-end {
	align-self: flex-end
}

.self-stretch {
	align-self: stretch
}

.order-1 {
	order: 1
}

.order-2 {
	order: 2
}

.order-3 {
	order: 3
}

.order-4 {
	order: 4
}

.order-5 {
	order: 5
}

.order-6 {
	order: 6
}

.order-first {
	order: -9999
}

.order-last {
	order: 9999
}

.order-none {
	order: 0
}

/* Flex grow/shrink/basis */
.flex-1 {
	flex: 1 1 0%
}

.flex-auto {
	flex: 1 1 auto
}

.flex-initial {
	flex: 0 1 auto
}

.flex-none {
	flex: none
}

.grow {
	flex-grow: 1
}

.grow-0 {
	flex-grow: 0
}

.shrink {
	flex-shrink: 1
}

.shrink-0 {
	flex-shrink: 0
}

/* Basis common */
.basis-0 {
	flex-basis: 0%
}

.basis-auto {
	flex-basis: auto
}

.basis-1\/2 {
	flex-basis: 50%
}

.basis-1\/3 {
	flex-basis: 33.333333%
}

.basis-2\/3 {
	flex-basis: 66.666667%
}

.basis-1\/4 {
	flex-basis: 25%
}

.basis-3\/4 {
	flex-basis: 75%
}

.basis-full {
	flex-basis: 100%
}

/* Gap utilities (uses CSS gap for flex and grid) */
.gap-0 {
	gap: var(--gap-0)
}

.gap-1 {
	gap: var(--gap-1)
}

.gap-2 {
	gap: var(--gap-2)
}

.gap-3 {
	gap: var(--gap-3)
}

.gap-4 {
	gap: var(--gap-4)
}

.gap-6 {
	gap: var(--gap-6)
}

.gap-8 {
	gap: var(--gap-8)
}

.gap-12 {
	gap: var(--gap-12)
}

.row-gap-4 {
	row-gap: var(--gap-4)
}

.col-gap-4 {
	column-gap: var(--gap-4)
}

/* -----------------------------
   Basic Grid utilities
   -----------------------------*/
.grid {
	display: grid
}

.inline-grid {
	display: inline-grid
}

.grid-flow-row {
	grid-auto-flow: row
}

.grid-flow-col {
	grid-auto-flow: column
}

.grid-flow-row-dense {
	grid-auto-flow: row dense
}

.grid-flow-col-dense {
	grid-auto-flow: column dense
}

/* Grid columns (1..12) */
.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr))
}

.grid-cols-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr))
}

.grid-cols-8 {
	grid-template-columns: repeat(8, minmax(0, 1fr))
}

.grid-cols-9 {
	grid-template-columns: repeat(9, minmax(0, 1fr))
}

.grid-cols-10 {
	grid-template-columns: repeat(10, minmax(0, 1fr))
}

.grid-cols-11 {
	grid-template-columns: repeat(11, minmax(0, 1fr))
}

.grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr))
}

/* Column span/start/end */
.col-span-1 {
	grid-column: span 1 / span 1
}

.col-span-2 {
	grid-column: span 2 / span 2
}

.col-span-3 {
	grid-column: span 3 / span 3
}

.col-span-4 {
	grid-column: span 4 / span 4
}

.col-span-5 {
	grid-column: span 5 / span 5
}

.col-span-6 {
	grid-column: span 6 / span 6
}

.col-start-1 {
	grid-column-start: 1
}

.col-start-2 {
	grid-column-start: 2
}

.col-start-3 {
	grid-column-start: 3
}

.col-start-4 {
	grid-column-start: 4
}

.col-end-1 {
	grid-column-end: 1
}

.col-end-2 {
	grid-column-end: 2
}

.col-end-3 {
	grid-column-end: 3
}

.col-end-4 {
	grid-column-end: 4
}

/* auto rows/cols */
.auto-rows-auto {
	grid-auto-rows: auto
}

.auto-rows-min {
	grid-auto-rows: min-content
}

.auto-rows-max {
	grid-auto-rows: max-content
}

.auto-rows-fr {
	grid-auto-rows: minmax(0, 1fr)
}

.auto-cols-auto {
	grid-auto-columns: auto
}

.auto-cols-min {
	grid-auto-columns: min-content
}

.auto-cols-max {
	grid-auto-columns: max-content
}

.auto-cols-fr {
	grid-auto-columns: minmax(0, 1fr)
}

/* Alignment for grid */
.items-start {
	align-items: flex-start
}

.items-center {
	align-items: center
}

.items-end {
	align-items: flex-end
}

.items-stretch {
	align-items: stretch
}

.justify-items-start {
	justify-items: start
}

.justify-items-center {
	justify-items: center
}

.justify-items-end {
	justify-items: end
}

.justify-items-stretch {
	justify-items: stretch
}

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

.place-items-start {
	place-items: start
}

.place-items-end {
	place-items: end
}

.place-items-stretch {
	place-items: stretch
}

.place-content-start {
	place-content: start
}

.place-content-center {
	place-content: center
}

.place-content-end {
	place-content: end
}

.place-content-between {
	place-content: space-between
}

/* Gap utilities reused above work with grid as well */
/* -----------------------------
   Utility helpers
   -----------------------------*/
.hidden {
	display: none
}

.block {
	display: block
}

.inline-block {
	display: inline-block
}

.w-full {
	width: 100%
}

.h-full {
	height: 100%
}

/* -----------------------------
   Responsive variants (sm, md, lg, xl, 2xl)
   For each breakpoint we re-declare the same set but wrapped in media queries.
   NOTE: class names use escaped colon, e.g. .sm\:flex
   -----------------------------*/
/* breakpoints */
@media (min-width:640px) {

	/* sm */
	.sm\:flex {
		display: flex
	}

	.sm\:inline-flex {
		display: inline-flex
	}

	.sm\:flex-row {
		flex-direction: row
	}

	.sm\:flex-col {
		flex-direction: column
	}

	.sm\:flex-wrap {
		flex-wrap: wrap
	}

	.sm\:items-center {
		align-items: center
	}

	.sm\:items-start {
		align-items: flex-start
	}

	.sm\:items-end {
		align-items: flex-end
	}

	.sm\:justify-center {
		justify-content: center
	}

	.sm\:justify-between {
		justify-content: space-between
	}

	.sm\:gap-4 {
		gap: var(--gap-4)
	}

	.sm\:grid {
		display: grid
	}

	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.sm\:col-span-2 {
		grid-column: span 2 / span 2
	}
}

@media (min-width:768px) {

	/* md */
	.md\:flex {
		display: flex
	}

	.md\:inline-flex {
		display: inline-flex
	}

	.md\:flex-row {
		flex-direction: row
	}

	.md\:flex-col {
		flex-direction: column
	}

	.md\:flex-wrap {
		flex-wrap: wrap
	}

	.md\:items-center {
		align-items: center
	}

	.md\:items-start {
		align-items: flex-start
	}

	.md\:items-end {
		align-items: flex-end
	}

	.md\:justify-center {
		justify-content: center
	}

	.md\:gap-3 {
		gap: var(--gap-3)
	}

	.md\:gap-4 {
		gap: var(--gap-4)
	}

	.md\:grid {
		display: grid
	}

	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
	}

	.md\:gap-2 {
		gap: var(--gap-2);
	}
}

@media (min-width:993px) {

	/* lg */
	.lg\:flex {
		display: flex
	}

	.lg\:flex-row {
		flex-direction: row
	}

	.lg\:flex-col {
		flex-direction: column
	}

	.lg\:items-center {
		align-items: center
	}

	.lg\:justify-between {
		justify-content: space-between
	}

	.lg\:gap-4 {
		gap: var(--gap-4)
	}

	.lg\:gap-6 {
		gap: var(--gap-6)
	}

	.lg\:grid {
		display: grid
	}

	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
	}

	.lg\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr))
	}
}

@media (min-width:1280px) {

	/* xl */
	.xl\:flex {
		display: flex
	}

	.xl\:flex-row {
		flex-direction: row
	}

	.xl\:items-center {
		align-items: center
	}

	.xl\:gap-8 {
		gap: var(--gap-8)
	}

	.xl\:grid {
		display: grid
	}

	.xl\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr))
	}

	.xl\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr))
	}
}

@media (min-width:1536px) {

	/* 2xl */
	.2xl\:flex {
		display: flex
	}

	.2xl\:flex-row {
		flex-direction: row
	}

	.2xl\:items-center {
		align-items: center
	}

	.2xl\:gap-12 {
		gap: var(--gap-12)
	}

	.2xl\:grid {
		display: grid
	}

	.2xl\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr))
	}
}

/* -----------------------------
   End of utilities
   -----------------------------*/

/* ========================================
	  Padding Utilities (p, px, py, pt, pr, pb, pl)
	  ======================================== */
.p-0 {
	padding: 0;
}

.p-1 {
	padding: 0.25rem;
}

.p-2 {
	padding: 0.5rem;
}

.p-3 {
	padding: 0.75rem;
}

.p-4 {
	padding: 1rem;
}

.p-6 {
	padding: 1.5rem;
}

.p-8 {
	padding: 2rem;
}

.p-12 {
	padding: 3rem;
}

/* Padding X */
.px-0 {
	padding-left: 0;
	padding-right: 0;
}

.px-1 {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.px-12 {
	padding-left: 3rem;
	padding-right: 3rem;
}

/* Padding Y */
.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* Padding Individual */
.pt-0 {
	padding-top: 0;
}

.pt-1 {
	padding-top: 0.25rem;
}

.pt-2 {
	padding-top: 0.5rem;
}

.pt-3 {
	padding-top: 0.75rem;
}

.pt-4 {
	padding-top: 1rem;
}

.pt-6 {
	padding-top: 1.5rem;
}

.pt-8 {
	padding-top: 2rem;
}

.pt-12 {
	padding-top: 3rem;
}

.pr-0 {
	padding-right: 0;
}

.pr-1 {
	padding-right: 0.25rem;
}

.pr-2 {
	padding-right: 0.5rem;
}

.pr-3 {
	padding-right: 0.75rem;
}

.pr-4 {
	padding-right: 1rem;
}

.pr-6 {
	padding-right: 1.5rem;
}

.pr-8 {
	padding-right: 2rem;
}

.pr-12 {
	padding-right: 3rem;
}

.pb-0 {
	padding-bottom: 0;
}

.pb-1 {
	padding-bottom: 0.25rem;
}

.pb-2 {
	padding-bottom: 0.5rem;
}

.pb-3 {
	padding-bottom: 0.75rem;
}

.pb-4 {
	padding-bottom: 1rem;
}

.pb-6 {
	padding-bottom: 1.5rem;
}

.pb-8 {
	padding-bottom: 2rem;
}

.pb-12 {
	padding-bottom: 3rem;
}

.pl-0 {
	padding-left: 0;
}

.pl-1 {
	padding-left: 0.25rem;
}

.pl-2 {
	padding-left: 0.5rem;
}

.pl-3 {
	padding-left: 0.75rem;
}

.pl-4 {
	padding-left: 1rem;
}

.pl-6 {
	padding-left: 1.5rem;
}

.pl-8 {
	padding-left: 2rem;
}

.pl-12 {
	padding-left: 3rem;
}

/* Margin */
.m-0 {
	margin: 0;
}

.m-1 {
	margin: 0.25rem;
}

.m-2 {
	margin: 0.5rem;
}

.m-3 {
	margin: 0.75rem;
}

.m-4 {
	margin: 1rem;
}

.m-5 {
	margin: 1.25rem;
}

.m-6 {
	margin: 1.5rem;
}

.m-8 {
	margin: 2rem;
}

.m-10 {
	margin: 2.5rem;
}

.m-12 {
	margin: 3rem;
}

.m-16 {
	margin: 4rem;
}

.m-20 {
	margin: 5rem;
}

.m-24 {
	margin: 6rem;
}

/* Margin X */
.mx-0 {
	margin-left: 0;
	margin-right: 0;
}

.mx-1 {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.mx-2 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.mx-4 {
	margin-left: 1rem;
	margin-right: 1rem;
}

/* Margin Y */
.my-0 {
	margin-top: 0;
	margin-bottom: 0;
}

.my-1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.my-2 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Margin individual */
.mt-1 {
	margin-top: 0.25rem;
}

.mr-1 {
	margin-right: 0.25rem;
}

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

.ml-1 {
	margin-left: 0.25rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

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

/* Padding */
.p-0 {
	padding: 0;
}

.p-1 {
	padding: 0.25rem;
}

.p-2 {
	padding: 0.5rem;
}

.p-3 {
	padding: 0.75rem;
}

.p-4 {
	padding: 1rem;
}

.p-5 {
	padding: 1.25rem;
}

.p-6 {
	padding: 1.5rem;
}

.p-8 {
	padding: 2rem;
}

.p-10 {
	padding: 2.5rem;
}

/* Padding X */
.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Padding Y */
.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Padding individual */
.pt-4 {
	padding-top: 1rem;
}

.pb-6 {
	padding-bottom: 1.5rem;
}

/* sm ≥ 640px */
@media (min-width: 640px) {
	.sm\:m-4 {
		margin: 1rem;
	}

	.sm\:p-4 {
		padding: 1rem;
	}

	.sm\:mt-6 {
		margin-top: 1.5rem;
	}

	.sm\:p-3 {
		padding: 0.75rem;
	}

	.sm\:px-8 {
		padding-left: 2rem;
		padding-right: 2rem;
	}

}

/* md ≥ 768px */
@media (min-width: 768px) {
	.md\:m-6 {
		margin: 1.5rem;
	}

	.md\:p-6 {
		padding: 1.5rem;
	}

	.md\:mt-10 {
		margin-top: 2.5rem;
	}

	.md\:p-4 {
		padding: 1rem;
	}

	.md\:p-8 {
		padding: 2rem;
	}
}

/* lg ≥ 1024px */
@media (min-width: 1024px) {
	.lg\:m-8 {
		margin: 2rem;
	}

	.lg\:p-10 {
		padding: 2.5rem;
	}
}

/* xl ≥ 1280px */
@media (min-width: 1280px) {
	.xl\:m-10 {
		margin: 2.5rem;
	}

	.xl\:p-12 {
		padding: 3rem;
	}
}

/* 2xl ≥ 1536px */
@media (min-width: 1536px) {
	.2xl\:m-16 {
		margin: 4rem;
	}

	.2xl\:p-16 {
		padding: 4rem;
	}
}