/* -------------------------------------------------- LAYOUT STYLES -------------------------------------------------- */
.w-full {
	width: 100% !important;
}

.w-1-4{
	width: 25% !important;
}

.w-1-3{
	width: 33.33% !important;
}

.w-1-2{
	width: 50% !important;
}

.w-3-4{
	width: 75% !important;
}

.h-full {
	height: 100% !important;
}

.min-w-full {
	min-width: 100% !important;
}

.min-h-full {
	min-height: 100% !important;
}

.min-w-0 {
	min-width: 0 !important;
}

.min-h-0 {
	min-height: 0 !important;
}

.w-auto {
	widthh: auto !important;
}

.h-auto {
	height: auto !important;
}

.w-fit {
	width: fit-content !important;
}

.h-fit {
	height: fit-content !important;
}

.w-control {
	width: 520px;
}

.w-10 {
	width: 10px !important;
}

.w-24 {
	width: 24px !important;
}

.w-28 {
	width: 28px !important;
}

.w-36 {
	width: 36px !important;
}

.w-40 {
	width: 40px !important;
}

.w-64 {
	width: 64px !important;
}

.w-80 {
	width: 80px !important;
}

.w-160 {
	width: 160px !important;
}

.w-164 {
	width: 164px !important;
}

.w-180 {
	width: 180px !important;
}

.w-200 {
	width: 200px !important;
}

.w-280 {
	width: 280px !important;
}

.w-320 {
	width: 320px !important;
}

.w-480 {
	width: 480px !important;
}

.h-24 {
	height: 24px !important;
}

.h-28 {
	height: 28px !important;
}

.h-36 {
	height: 36px !important;
}

.h-40 {
	height: 40px !important;
}

.h-80vh {
	height: 80vh !important;
}

.h-10 {
	height: 10px !important;
}

.h-48 {
	height: 64px !important;
}

.h-64 {
	height: 64px !important;
}

.h-164 {
	height: 164px !important;
}

.object-contain {
	object-fit: contain !important;
}

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

.block {
	display: block !important;
}

.inline-block {
	display: inline-block !important;
}

.hide {
	display: none !important;
}

.inline {
	display: inline !important;
}

.flex {
	display: flex !important;
}

.grid {
	display: grid !important;
}

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

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

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

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

.col-span-1 {
	grid-column: span 1/span 1 !important;
}

.col-span-2 {
	grid-column: span 2/span 2 !important;
}

.z-1 {
	z-index: 1 !important;
}

.none {
	display: none !important;
}

.flex-1 {
	flex: 1 !important;
}

.flex-row {
	flex-direction: row !important;
}

.flex-col {
	flex-direction: column !important;
}

.flex-wrap {
	flex-wrap: wrap !important;
}

.flex-nowrap {
	flex-wrap: nowrap !important;
}

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

.justify-start {
	justify-content: flex-start !important;
}

.justify-end {
	justify-content: flex-end !important;
}

.justify-center {
	justify-content: center !important;
}

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

.justify-around {
	justify-content: space-around !important;
}

.justify-evenly {
	justify-content: space-evenly !important;
}

.justify-items-start {
	justify-items: start !important;
}

.justify-items-end {
	justify-items: end !important;
}

.justify-items-center {
	justify-items: center !important;
}

.items-start {
	align-items: flex-start !important;
} 

.items-end {
	align-items: flex-end !important;
} 

.items-center {
	align-items: center !important;
} 

.items-stretch {
	align-items: stretch !important;
}

.static {
	position: static !important;
}

.fixed {
	position: fixed !important;
}

.absolute {
	position: absolute !important;
}

.relative {
	position: relative !important;
}

.sticky {
	position: sticky !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-x-visible {
    overflow-x: visible !important;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.overflow-ellipsis {
    text-overflow: ellipsis !important;
}

.overflow-clip {
    text-overflow: clip !important;
}

.truncate {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.truncate.line {
	white-space: unset !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
}

.truncate.line.two {
	-webkit-line-clamp: 2 !important;
}

.truncate.line.three {
	-webkit-line-clamp: 3 !important;
}

.rotate-180 {
	transform: rotate(180deg) !important;
}

/* -------------------------------------------------- SPACING STYLES -------------------------------------------------- */
.gap-none {
	gap: var(--spacing-none) !important;
}

.gap-xs {
	gap: var(--spacing-xs) !important;
}

.gap-sm {
	gap: var(--spacing-sm) !important;
}

.gap-md {
	gap: var(--spacing-md) !important;
}

.gap-lg {
	gap: var(--spacing-lg) !important;
}

.gap-xl {
	gap: var(--spacing-xl) !important;
}

.gap-2xl {
	gap: var(--spacing-2xl) !important;
}

.gap-3xl {
	gap: var(--spacing-3xl) !important;
}

.gap-4xl {
	gap: var(--spacing-4xl) !important;
}

.gap-5xl {
	gap: var(--spacing-5xl) !important;
}

.gap-6xl {
	gap: var(--spacing-6xl) !important;
}

.gap-7xl {
	gap: var(--spacing-7xl) !important;
}

.gap-8xl {
	gap: var(--spacing-8xl) !important;
}

.gap-0 {
	gap: 0 !important;
}

.gap-2 {
	gap: 2px !important;
}

.gap-4 {
	gap: 4px !important;
}

.gap-6 {
	gap: 6px !important;
}

.gap-8 {
	gap: 8px !important;
}

.gap-10 {
	gap: 10px !important;
}

.gap-12 {
	gap: 12px !important;
}

.gap-14 {
	gap: 14px !important;
}

.gap-16 {
	gap: 16px !important;
}

.gap-18 {
	gap: 18px !important;
}

.gap-20 {
	gap: 20px !important;
}

.gap-24 {
	gap: 24px !important;
}

.gap-26 {
	gap: 26px !important;
}

.gap-32 {
	gap: 32px !important;
}

.gap-40 {
	gap: 40px !important;
}

.gap-48 {
	gap: 48px !important;
}

.gap-52 {
	gap: 52px !important;
}

.gap-56 {
	gap: 56px !important;
}

.gap-x-0 {
	column-gap: 0 !important;
}

.gap-y-8 {
	row-gap: 8px !important;
}	

.gap-y-12 {
	row-gap: 12px !important;
}	

.gap-y-16 {
	row-gap: 16px !important;
}

.gap-y-32 {
	row-gap: 32px !important;
}

.p-none {
	padding: var(--spacing-none) !important;
}

.p-xs {
	padding: var(--spacing-xs) !important;
}

.p-sm {
	padding: var(--spacing-sm) !important;
}

.p-md {
	padding: var(--spacing-md) !important;
}

.p-lg {
	padding: var(--spacing-lg) !important;
}

.p-xl {
	padding: var(--spacing-xl) !important;
}

.p-2xl {
	padding: var(--spacing-2xl) !important;
}

.p-3xl {
	padding: var(--spacing-3xl) !important;
}

.p-4xl {
	padding: var(--spacing-4xl) !important;
}

.p-5xl {
	padding: var(--spacing-5xl) !important;
}

.p-6xl {
	padding: var(--spacing-6xl) !important;
}

.p-7xl {
	padding: var(--spacing-7xl) !important;
}

.p-8xl {
	padding: var(--spacing-8xl) !important;
}

.p-0 {
	padding: 0 !important;
}

.p-2 {
	padding: 2px !important;
}

.p-4 {
	padding: 4px !important;
}

.p-6 {
	padding: 6px !important;
}

.p-8 {
	padding: 8px !important;
}

.p-10 {
	padding: 10px !important;
}

.p-12 {
	padding: 12px !important;
}

.p-14 {
	padding: 14px !important;
}

.p-15 {
	padding: 15px !important;
}

.p-16 {
	padding: 16px !important;
}

.p-20 {
	padding: 20px !important;
}

.p-24 {
	padding: 24px !important;
}

.p-32 {
	padding: 32px !important;
}

.p-48 {
	padding: 48px !important;
}

.p-56 {
	padding: 56px !important;
}

.px-none {
	padding-left: var(--spacing-none) !important;
    padding-right: var(--spacing-none) !important;
}

.px-xs {
	padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
}

.px-sm {
	padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
}

.px-md {
	padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

.px-lg {
	padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.px-xl {
	padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
}

.px-2xl {
	padding-left: var(--spacing-2xl) !important;
    padding-right: var(--spacing-2xl) !important;
}

.px-3xl {
	padding-left: var(--spacing-3xl) !important;
    padding-right: var(--spacing-3xl) !important;
}

.px-4xl {
	padding-left: var(--spacing-4xl) !important;
    padding-right: var(--spacing-4xl) !important;
}

.px-5xl {
	padding-left: var(--spacing-5xl) !important;
    padding-right: var(--spacing-5xl) !important;
}

.px-6xl {
	padding-left: var(--spacing-6xl) !important;
    padding-right: var(--spacing-6xl) !important;
}

.px-7xl {
	padding-left: var(--spacing-7xl) !important;
    padding-right: var(--spacing-7xl) !important;
}

.px-8xl {
	padding-left: var(--spacing-8xl) !important;
    padding-right: var(--spacing-8xl) !important;
}

.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.px-2 {
	padding-left: 2px !important;
	padding-right: 2px !important;
}

.px-4 {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.px-6 {
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.px-8 {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.px-10 {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.px-12 {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.px-14 {
	padding-left: 14px !important;
	padding-right: 14px !important;
}

.px-15 {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.px-16 {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

.px-20 {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.px-24 {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.px-32 {
	padding-left: 32px !important;
	padding-right: 32px !important;
}

.px-48 {
	padding-left: 48px !important;
	padding-right: 48px !important;
}

.px-56 {
	padding-left: 56px !important;
	padding-right: 56px !important;
}

.py-none {
	padding-top: var(--spacing-none) !important;
    padding-bottom: var(--spacing-none) !important;
}

.py-xs {
	padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
}

.py-sm {
	padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
}

.py-md {
	padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
}

.py-lg {
	padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
}

.py-xl {
	padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}

.py-2xl {
	padding-top: var(--spacing-2xl) !important;
    padding-bottom: var(--spacing-2xl) !important;
}

.py-3xl {
	padding-top: var(--spacing-3xl) !important;
    padding-bottom: var(--spacing-3xl) !important;
}

.py-4xl {
	padding-top: var(--spacing-4xl) !important;
    padding-bottom: var(--spacing-4xl) !important;
}

.py-5xl {
	padding-top: var(--spacing-5xl) !important;
    padding-bottom: var(--spacing-5xl) !important;
}

.py-6xl {
	padding-top: var(--spacing-6xl) !important;
    padding-bottom: var(--spacing-6xl) !important;
}

.py-7xl {
	padding-top: var(--spacing-7xl) !important;
    padding-bottom: var(--spacing-7xl) !important;
}

.py-8xl {
	padding-top: var(--spacing-8xl) !important;
    padding-bottom: var(--spacing-8xl) !important;
}

.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.py-2 {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.py-4 {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.py-6 {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

.py-8 {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.py-10 {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.py-12 {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.py-14 {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

.py-15 {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.py-16 {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

.py-20 {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

.py-24 {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

.py-32 {
	padding-top: 32px !important;
	padding-bottom: 32px !important;
}

.py-48 {
	padding-top: 48px !important;
	padding-bottom: 48px !important;
}

.py-56 {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

.pt-none {
	padding-top: var(--spacing-none) !important;
}

.pt-xs {
	padding-top: var(--spacing-xs) !important;
}

.pt-sm {
	padding-top: var(--spacing-sm) !important;
}

.pt-md {
	padding-top: var(--spacing-md) !important;
}

.pt-lg {
	padding-top: var(--spacing-lg) !important;
}

.pt-xl {
	padding-top: var(--spacing-xl) !important;
}

.pt-2xl {
	padding-top: var(--spacing-2xl) !important;
}

.pt-3xl {
	padding-top: var(--spacing-3xl) !important;
}

.pt-4xl {
	padding-top: var(--spacing-4xl) !important;
}

.pt-5xl {
	padding-top: var(--spacing-5xl) !important;
}

.pt-6xl {
	padding-top: var(--spacing-6xl) !important;
}

.pt-7xl {
	padding-top: var(--spacing-7xl) !important;
}

.pt-8xl {
	padding-top: var(--spacing-8xl) !important;
}

.pt-0 {
	padding-top: 0 !important;
}

.pt-2 {
	padding-top: 2px !important;
}

.pt-4 {
	padding-top: 4px !important;
}

.pt-6 {
	padding-top: 6px !important;
}

.pt-8 {
	padding-top: 8px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-12 {
	padding-top: 12px !important;
}

.pt-14 {
	padding-top: 14px !important;
}

.pt-15 {
	padding-top: 15px !important;
}

.pt-16 {
	padding-top: 16px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-24 {
	padding-top: 24px !important;
}

.pt-32 {
	padding-top: 32px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-48 {
	padding-top: 48px !important;
}

.pt-56 {
	padding-top: 56px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

.pb-none {
	padding-bottom: var(--spacing-none) !important;
}

.pb-xs {
	padding-bottom: var(--spacing-xs) !important;
}

.pb-sm {
	padding-bottom: var(--spacing-sm) !important;
}

.pb-md {
	padding-bottom: var(--spacing-md) !important;
}

.pb-lg {
	padding-bottom: var(--spacing-lg) !important;
}

.pb-xl {
	padding-bottom: var(--spacing-xl) !important;
}

.pb-2xl {
	padding-bottom: var(--spacing-2xl) !important;
}

.pb-3xl {
	padding-bottom: var(--spacing-3xl) !important;
}

.pb-4xl {
	padding-bottom: var(--spacing-4xl) !important;
}

.pb-5xl {
	padding-bottom: var(--spacing-5xl) !important;
}

.pb-6xl {
	padding-bottom: var(--spacing-6xl) !important;
}

.pb-7xl {
	padding-bottom: var(--spacing-7xl) !important;
}

.pb-8xl {
	padding-bottom: var(--spacing-8xl) !important;
}

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

.pb-2 {
	padding-bottom: 2px !important;
}

.pb-4 {
	padding-bottom: 4px !important;
}

.pb-6 {
	padding-bottom: 6px !important;
}

.pb-8 {
	padding-bottom: 8px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-12 {
	padding-bottom: 12px !important;
}

.pb-14 {
	padding-bottom: 14px !important;
}

.pb-15 {
	padding-bottom: 15px !important;
}

.pb-16 {
	padding-bottom: 16px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-24 {
	padding-bottom: 24px !important;
}

.pb-32 {
	padding-bottom: 32px !important;
}

.pb-48 {
	padding-bottom: 48px !important;
}

.pb-56 {
	padding-bottom: 56px !important;
}

.pb-120 {
	padding-bottom: 120px !important;
}

.pl-none {
	padding-left: var(--spacing-none) !important;
}

.pl-xs {
	padding-left: var(--spacing-xs) !important;
}

.pl-sm {
	padding-left: var(--spacing-sm) !important;
}

.pl-md {
	padding-left: var(--spacing-md) !important;
}

.pl-lg {
	padding-left: var(--spacing-lg) !important;
}

.pl-xl {
	padding-left: var(--spacing-xl) !important;
}

.pl-2xl {
	padding-left: var(--spacing-2xl) !important;
}

.pl-3xl {
	padding-left: var(--spacing-3xl) !important;
}

.pl-4xl {
	padding-left: var(--spacing-4xl) !important;
}

.pl-5xl {
	padding-left: var(--spacing-5xl) !important;
}

.pl-6xl {
	padding-left: var(--spacing-6xl) !important;
}

.pl-7xl {
	padding-left: var(--spacing-7xl) !important;
}

.pl-8xl {
	padding-left: var(--spacing-8xl) !important;
}

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

.pl-2 {
	padding-left: 2px !important;
}

.pl-4 {
	padding-left: 4px !important;
}

.pl-6 {
	padding-left: 6px !important;
}

.pl-8 {
	padding-left: 8px !important;
}

.pl-10 {
	padding-left: 10px !important;
}

.pl-12 {
	padding-left: 12px !important;
}

.pl-14 {
	padding-left: 14px !important;
}

.pl-15 {
	padding-left: 15px !important;
}

.pl-16 {
	padding-left: 16px !important;
}

.pl-18 {
	padding-left: 18px !important;
}

.pl-20 {
	padding-left: 20px !important;
}

.pl-24 {
	padding-left: 24px !important;
}

.pl-32 {
	padding-left: 32px !important;
}

.pl-44 {
	padding-left: 44px !important;
}

.pl-48 {
	padding-left: 48px !important;
}

.pl-56 {
	padding-left: 56px !important;
}

.pr-none {
	padding-right: var(--spacing-none) !important;
}

.pr-xs {
	padding-right: var(--spacing-xs) !important;
}

.pr-sm {
	padding-right: var(--spacing-sm) !important;
}

.pr-md {
	padding-right: var(--spacing-md) !important;
}

.pr-lg {
	padding-right: var(--spacing-lg) !important;
}

.pr-xl {
	padding-right: var(--spacing-xl) !important;
}

.pr-2xl {
	padding-right: var(--spacing-2xl) !important;
}

.pr-3xl {
	padding-right: var(--spacing-3xl) !important;
}

.pr-4xl {
	padding-right: var(--spacing-4xl) !important;
}

.pr-5xl {
	padding-right: var(--spacing-5xl) !important;
}

.pr-6xl {
	padding-right: var(--spacing-6xl) !important;
}

.pr-7xl {
	padding-right: var(--spacing-7xl) !important;
}

.pr-8xl {
	padding-right: var(--spacing-8xl) !important;
}

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

.pr-2 {
	padding-right: 2px !important;
}

.pr-4 {
	padding-right: 4px !important;
}

.pr-6 {
	padding-right: 6px !important;
}

.pr-8 {
	padding-right: 8px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pr-12 {
	padding-right: 12px !important;
}

.pr-14 {
	padding-right: 14px !important;
}

.pr-15 {
	padding-right: 15px !important;
}

.pr-16 {
	padding-right: 16px !important;
}

.pr-18 {
	padding-right: 18px !important;
}

.pr-20 {
	padding-right: 20px !important;
}

.pr-24 {
	padding-right: 24px !important;
}

.pr-32 {
	padding-right: 32px !important;
}

.pr-48 {
	padding-right: 48px !important;
}

.pr-56 {
	padding-right: 56px !important;
}

.m-xs {
	margin: var(--spacing-xs) !important;
}

.m-sm {
	margin: var(--spacing-sm) !important;
}

.m-md {
	margin: var(--spacing-md) !important;
}

.m-lg {
	margin: var(--spacing-lg) !important;
}

.m-xl {
	margin: var(--spacing-xl) !important;
}

.m-2xl {
	margin: var(--spacing-2xl) !important;
}

.m-3xl {
	margin: var(--spacing-3xl) !important;
}

.m-4xl {
	margin: var(--spacing-4xl) !important;
}

.m-5xl {
	margin: var(--spacing-5xl) !important;
}

.m-6xl {
	margin: var(--spacing-6xl) !important;
}

.m-7xl {
	margin: var(--spacing-7xl) !important;
}

.m-8xl {
	margin: var(--spacing-8xl) !important;
}

.m-0 {
	margin: 0 !important;
}

.m-2 {
	margin: 2px !important;
}

.m-4 {
	margin: 4px !important;
}

.m-6 {
	margin: 6px !important;
}

.m-8 {
	margin: 8px !important;
}

.m-10 {
	margin: 10px !important;
}

.m-12 {
	margin: 12px !important;
}

.m-14 {
	margin: 14px !important;
}

.m-15 {
	margin: 15px !important;
}

.m-16 {
	margin: 16px !important;
}

.m-20 {
	margin: 20px !important;
}

.m-24 {
	margin: 24px !important;
}

.m-32 {
	margin: 32px !important;
}

.m-48 {
	margin: 48px !important;
}

.m-56 {
	margin: 56px !important;
}

.mx-xs {
	margin-left: var(--spacing-xs) !important;
	margin-right: var(--spacing-xs) !important;
}

.mx-sm {
	margin-left: var(--spacing-sm) !important;
	margin-right: var(--spacing-sm) !important;
}

.mx-md {
	margin-left: var(--spacing-md) !important;
	margin-right: var(--spacing-md) !important;
}

.mx-lg {
	margin-left: var(--spacing-lg) !important;
	margin-right: var(--spacing-lg) !important;
}

.mx-xl {
	margin-left: var(--spacing-xl) !important;
	margin-right: var(--spacing-xl) !important;
}

.mx-2xl {
	margin-left: var(--spacing-2xl) !important;
	margin-right: var(--spacing-2xl) !important;
}

.mx-3xl {
	margin-left: var(--spacing-3xl) !important;
	margin-right: var(--spacing-3xl) !important;
}

.mx-4xl {
	margin-left: var(--spacing-4xl) !important;
	margin-right: var(--spacing-4xl) !important;
}

.mx-5xl {
	margin-left: var(--spacing-5xl) !important;
	margin-right: var(--spacing-5xl) !important;
}

.mx-6xl {
	margin-left: var(--spacing-6xl) !important;
	margin-right: var(--spacing-6xl) !important;
}

.mx-7xl {
	margin-left: var(--spacing-7xl) !important;
	margin-right: var(--spacing-7xl) !important;
}

.mx-8xl {
	margin-left: var(--spacing-8xl) !important;
	margin-right: var(--spacing-8xl) !important;
}

.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mx-2 {
	margin-left: 2px !important;
	margin-right: 2px !important;
}

.mx-4 {
	margin-left: 4px !important;
	margin-right: 4px !important;
}

.mx-6 {
	margin-left: 6px !important;
	margin-right: 6px !important;
}

.mx-8 {
	margin-left: 8px !important;
	margin-right: 8px !important;
}

.mx-10 {
	margin-left: 10px !important;
	margin-right: 10px !important;
}

.mx-12 {
	margin-left: 12px !important;
	margin-right: 12px !important;
}

.mx-14 {
	margin-left: 14px !important;
	margin-right: 14px !important;
}

.mx-15 {
	margin-left: 15px !important;
	margin-right: 15px !important;
}

.mx-16 {
	margin-left: 16px !important;
	margin-right: 16px !important;
}

.mx-20 {
	margin-left: 20px !important;
	margin-right: 20px !important;
}

.mx-24 {
	margin-left: 24px !important;
	margin-right: 24px !important;
}

.mx-32 {
	margin-left: 32px !important;
	margin-right: 32px !important;
}

.mx-48 {
	margin-left: 48px !important;
	margin-right: 48px !important;
}

.mx-56 {
	margin-left: 56px !important;
	margin-right: 56px !important;
}

.my-xs {
	margin-top: var(--spacing-xs) !important;
	margin-bottom: var(--spacing-xs) !important;
}

.my-sm {
	margin-top: var(--spacing-sm) !important;
	margin-bottom: var(--spacing-sm) !important;
}

.my-md {
	margin-top: var(--spacing-md) !important;
	margin-bottom: var(--spacing-md) !important;
}

.my-lg {
	margin-top: var(--spacing-lg) !important;
	margin-bottom: var(--spacing-lg) !important;
}

.my-xl {
	margin-top: var(--spacing-xl) !important;
	margin-bottom: var(--spacing-xl) !important;
}

.my-2xl {
	margin-top: var(--spacing-2xl) !important;
	margin-bottom: var(--spacing-2xl) !important;
}

.my-3xl {
	margin-top: var(--spacing-3xl) !important;
	margin-bottom: var(--spacing-3xl) !important;
}

.my-4xl {
	margin-top: var(--spacing-4xl) !important;
	margin-bottom: var(--spacing-4xl) !important;
}

.my-5xl {
	margin-top: var(--spacing-5xl) !important;
	margin-bottom: var(--spacing-5xl) !important;
}

.my-6xl {
	margin-top: var(--spacing-6xl) !important;
	margin-bottom: var(--spacing-6xl) !important;
}

.my-7xl {
	margin-top: var(--spacing-7xl) !important;
	margin-bottom: var(--spacing-7xl) !important;
}

.my-8xl {
	margin-top: var(--spacing-8xl) !important;
	margin-bottom: var(--spacing-8xl) !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-2 {
	margin-top: 2px !important;
	margin-bottom: 2px !important;
}

.my-4 {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

.my-6 {
	margin-top: 6px !important;
	margin-bottom: 6px !important;
}

.my-8 {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}

.my-10 {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.my-12 {
	margin-top: 12px !important;
	margin-bottom: 12px !important;
}

.my-14 {
	margin-top: 14px !important;
	margin-bottom: 14px !important;
}

.my-15 {
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}

.my-16 {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

.my-20 {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.my-24 {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

.my-32 {
	margin-top: 32px !important;
	margin-bottom: 32px !important;
}

.my-48 {
	margin-top: 48px !important;
	margin-bottom: 48px !important;
}

.my-56 {
	margin-top: 56px !important;
	margin-bottom: 56px !important;
}

.mt-xs {
	margin-top: var(--spacing-xs) !important;
}

.mt-sm {
	margin-top: var(--spacing-sm) !important;
}

.mt-md {
	margin-top: var(--spacing-md) !important;
}

.mt-lg {
	margin-top: var(--spacing-lg) !important;
}

.mt-xl {
	margin-top: var(--spacing-xl) !important;
}

.mt-2xl {
	margin-top: var(--spacing-2xl) !important;
}

.mt-3xl {
	margin-top: var(--spacing-3xl) !important;
}

.mt-4xl {
	margin-top: var(--spacing-4xl) !important;
}

.mt-5xl {
	margin-top: var(--spacing-5xl) !important;
}

.mt-6xl {
	margin-top: var(--spacing-6xl) !important;
}

.mt-7xl {
	margin-top: var(--spacing-7xl) !important;
}

.mt-8xl {
	margin-top: var(--spacing-8xl) !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-2 {
	margin-top: 2px !important;
}

.mt-4 {
	margin-top: 4px !important;
}

.mt-6 {
	margin-top: 6px !important;
}

.mt-8 {
	margin-top: 8px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-12 {
	margin-top: 12px !important;
}

.mt-14 {
	margin-top: 14px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-16 {
	margin-top: 16px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-24 {
	margin-top: 24px !important;
}

.mt-26 {
	margin-top: 26px !important;
}

.mt-32 {
	margin-top: 32px !important;
}

.mt-34 {
	margin-top: 34px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-42 {
	margin-top: 42px !important;
}

.mt-48 {
	margin-top: 48px !important;
}

.mt-56 {
	margin-top: 56px !important;
}

.mt-64 {
	margin-top: 64px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mb-xs {
	margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
	margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
	margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
	margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
	margin-bottom: var(--spacing-xl) !important;
}

.mb-2xl {
	margin-bottom: var(--spacing-2xl) !important;
}

.mb-3xl {
	margin-bottom: var(--spacing-3xl) !important;
}

.mb-4xl {
	margin-bottom: var(--spacing-4xl) !important;
}

.mb-5xl {
	margin-bottom: var(--spacing-5xl) !important;
}

.mb-6xl {
	margin-bottom: var(--spacing-6xl) !important;
}

.mb-7xl {
	margin-bottom: var(--spacing-7xl) !important;
}

.mb-8xl {
	margin-bottom: var(--spacing-8xl) !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-2 {
	margin-bottom: 2px !important;
}

.mb-4 {
	margin-bottom: 4px !important;
}

.mb-6 {
	margin-bottom: 6px !important;
}

.mb-8 {
	margin-bottom: 8px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-12 {
	margin-bottom: 12px !important;
}

.mb-14 {
	margin-bottom: 14px !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}

.mb-16 {
	margin-bottom: 16px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-24 {
	margin-bottom: 24px !important;
}

.mb-26 {
	margin-bottom: 26px !important;
}

.mb-32 {
	margin-bottom: 32px !important;
}

.mb-34 {
	margin-bottom: 34px !important;
}

.mb-48 {
	margin-bottom: 48px !important;
}

.mb-56 {
	margin-bottom: 56px !important;
}

.mb-64 {
	margin-bottom: 64px !important;
}

.ml-xs {
	margin-left: var(--spacing-xs) !important;
}

.ml-sm {
	margin-left: var(--spacing-sm) !important;
}

.ml-md {
	margin-left: var(--spacing-md) !important;
}

.ml-lg {
	margin-left: var(--spacing-lg) !important;
}

.ml-xl {
	margin-left: var(--spacing-xl) !important;
}

.ml-2xl {
	margin-left: var(--spacing-2xl) !important;
}

.ml-3xl {
	margin-left: var(--spacing-3xl) !important;
}

.ml-4xl {
	margin-left: var(--spacing-4xl) !important;
}

.ml-5xl {
	margin-left: var(--spacing-5xl) !important;
}

.ml-6xl {
	margin-left: var(--spacing-6xl) !important;
}

.ml-7xl {
	margin-left: var(--spacing-7xl) !important;
}

.ml-8xl {
	margin-left: var(--spacing-8xl) !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-2 {
	margin-left: 2px !important;
}

.ml-4 {
	margin-left: 4px !important;
}

.ml-6 {
	margin-left: 6px !important;
}

.ml-8 {
	margin-left: 8px !important;
}

.ml-10 {
	margin-left: 10px !important;
}

.ml-12 {
	margin-left: 12px !important;
}

.ml-14 {
	margin-left: 14px !important;
}

.ml-15 {
	margin-left: 15px !important;
}

.ml-16 {
	margin-left: 16px !important;
}

.ml-18 {
	margin-left: 18px !important;
}

.ml-20 {
	margin-left: 20px !important;
}

.ml-24 {
	margin-left: 24px !important;
}

.ml-32 {
	margin-left: 32px !important;
}

.ml-48 {
	margin-left: 48px !important;
}

.ml-56 {
	margin-left: 56px !important;
}

.mr-xs {
	margin-right: var(--spacing-xs) !important;
}

.mr-sm {
	margin-right: var(--spacing-sm) !important;
}

.mr-md {
	margin-right: var(--spacing-md) !important;
}

.mr-lg {
	margin-right: var(--spacing-lg) !important;
}

.mr-xl {
	margin-right: var(--spacing-xl) !important;
}

.mr-2xl {
	margin-right: var(--spacing-2xl) !important;
}

.mr-3xl {
	margin-right: var(--spacing-3xl) !important;
}

.mr-4xl {
	margin-right: var(--spacing-4xl) !important;
}

.mr-5xl {
	margin-right: var(--spacing-5xl) !important;
}

.mr-6xl {
	margin-right: var(--spacing-6xl) !important;
}

.mr-7xl {
	margin-right: var(--spacing-7xl) !important;
}

.mr-8xl {
	margin-right: var(--spacing-8xl) !important;
}

.mr-xs {
	margin-right: var(--spacing-xs) !important;
}

.mr-sm {
	margin-right: var(--spacing-sm) !important;
}

.mr-md {
	margin-right: var(--spacing-md) !important;
}

.mr-lg {
	margin-right: var(--spacing-lg) !important;
}

.mr-xl {
	margin-right: var(--spacing-xl) !important;
}

.mr-2xl {
	margin-right: var(--spacing-2xl) !important;
}

.mr-3xl {
	margin-right: var(--spacing-3xl) !important;
}

.mr-4xl {
	margin-right: var(--spacing-4xl) !important;
}

.mr-5xl {
	margin-right: var(--spacing-5xl) !important;
}

.mr-6xl {
	margin-right: var(--spacing-6xl) !important;
}

.mr-7xl {
	margin-right: var(--spacing-7xl) !important;
}

.mr-8xl {
	margin-right: var(--spacing-8xl) !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-2 {
	margin-right: 2px !important;
}

.mr-4 {
	margin-right: 4px !important;
}

.mr-6 {
	margin-right: 6px !important;
}

.mr-8 {
	margin-right: 8px !important;
}

.mr-10 {
	margin-right: 10px !important;
}

.mr-12 {
	margin-right: 12px !important;
}

.mr-14 {
	margin-right: 14px !important;
}

.mr-15 {
	margin-right: 15px !important;
}

.mr-16 {
	margin-right: 16px !important;
}

.mr-18 {
	margin-right: 18px !important;
}

.mr-20 {
	margin-right: 20px !important;
}

.mr-24 {
	margin-right: 24px !important;
}

.mr-32 {
	margin-right: 32px !important;
}

.mr-48 {
	margin-right: 48px !important;
}

.mr-56 {
	margin-right: 48px !important;
}

/* -------------------------------------------------- TEXT STYLES -------------------------------------------------- */
.underline {
	text-decoration-line: underline;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.capitalize {
	text-transform: capitalize;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}

.text-justify {
	text-align: justify !important;
}

.regular,
.strong-regular strong {
	font-weight: var(--font-weight-regular) !important
}

.medium {
	font-weight: var(--font-weight-medium) !important
}

.semi-bold {
	font-weight: var(--font-weight-semi-bold) !important
}

.bold {
	font-weight: var(--font-weight-bold) !important
}

.size-headline-l {
	font-size: var(--font-headline-l) !important;
}

.size-headline-m {
	font-size: var(--font-headline-m) !important;
}

.size-headline-s {
	font-size: var(--font-headline-s) !important;
}

.size-title-xl {
	font-size: var(--font-title-xl) !important;
}

.size-title-l {
	font-size: var(--font-title-l) !important;
}

.size-title-m {
	font-size: var(--font-title-m) !important;
}

.size-title-s {
	font-size: var(--font-title-s) !important;
}

.size-body-l {
	font-size: var(--font-body-l) !important;
}

.size-body-m {
	font-size: var(--font-body-m) !important;
}

.size-body-s {
	font-size: var(--font-body-s) !important;
}

.size-detail-l {
	font-size: var(--font-detail-l) !important;
}

.size-detail-s {
	font-size: var(--font-detail-s) !important;
}

.size-10 {
    font-size: 10px !important;
}

.size-11 {
    font-size: 11px !important;
}

.size-12 {
    font-size: 12px !important;
}

.size-13 {
    font-size: 13px !important;
}

.size-14 {
    font-size: 14px !important;
}

.size-15 {
    font-size: 15px !important;
}

.size-16 {
    font-size: 16px !important;
}

.size-17 {
    font-size: 17px !important;
}

.size-18 {
    font-size: 18px !important;
}

.size-19 {
    font-size: 19px !important;
}

.size-20 {
    font-size: 20px !important;
}

.size-21 {
    font-size: 21px !important;
}

.size-22 {
    font-size: 22px !important;
}

.size-23 {
    font-size: 23px !important;
}

.size-24 {
    font-size: 24px !important;
}

.size-28 {
    font-size: 28px !important;
}

.line-134 {
	line-height: var(--font-line-height-134) !important;
}

.line-150 {
	line-height: var(--font-line-height-150) !important;
}

.line-14 {
    line-height: 14px !important;
}

.line-15 {
    line-height: 15px !important;
}

.line-16 {
    line-height: 16px !important;
}

.line-17 {
    line-height: 17px !important;
}

.line-18 {
    line-height: 18px !important;
}

.line-19 {
    line-height: 19px !important;
}

.line-20 {
    line-height: 20px !important;
}

.line-21 {
    line-height: 21px !important;
}

.line-22 {
    line-height: 22px !important;
}

.line-23 {
    line-height: 23px !important;
}

.line-24 {
    line-height: 24px !important;
}

.line-25 {
    line-height: 25px !important;
}

.line-26 {
    line-height: 26px !important;
}

.line-27 {
    line-height: 27px !important;
}

.line-28 {
    line-height: 28px !important;
}

.line-30 {
	line-height: 30px !important;
}

.line-32 {
	line-height: 32px !important;
}

.line-34 {
    line-height: 34px !important;
}

.line-36 {
    line-height: 36px !important;
}

.text-white {
	color: var(--white) !important;
}

.text-white-0 {
	color: var(--white-0) !important;
}

.text-white-10 {
	color: var(--white-10) !important;
}

.text-white-20 {
	color: var(--white-20) !important;
}

.text-white-50 {
	color: var(--white-50) !important;
}

.text-gray-50 {
	color: var(--gray-50) !important;
}

.text-gray-100 {
	color: var(--gray-100) !important;
}

.text-gray-200 {
	color: var(--gray-200) !important;
}

.text-gray-300, .text-secondary-on-dark {
	color: var(--gray-300) !important;
}

.text-gray-400, .text-disabled, .text-placeholder {
	color: var(--gray-400) !important;
}

.text-gray-500, .text-quaternary {
	color: var(--gray-500) !important;
}

.text-gray-600, .text-tertiary {
	color: var(--gray-600) !important;
}

.text-gray-700, .text-informative, .text-steady, .text-secondary {
	color: var(--gray-700) !important;
}

.text-gray-800 {
	color: var(--gray-800) !important;
}

.text-gray-800-0 {
	color: var(--gray-800-0) !important;
}

.text-gray-900, .text-primary {
	color: var(--gray-900) !important;
}

.text-gray-950 {
	color: var(--gray-950) !important;
}

.text-gray-950-0 {
	color: var(--gray-950-0) !important;
}

.text-gray-950-10 {
	color: var(--gray-950-10) !important;
}

.text-gray-950-20 {
	color: var(--gray-950-20) !important;
}

.text-gray-950-60 {
	color: var(--gray-950-60) !important;
}

.text-gray-950-90 {
	color: var(--gray-950-90) !important;
}

.text-black {
	color: var(--black) !important;
}

.text-brand-100, .text-secondary-on-brand {
	color: var(--brand-100) !important;
}

.text-brand-150 {
	color: var(--brand-150) !important;
}

.text-brand-200 {
	color: var(--brand-200) !important;
}

.text-brand-300, .text-disabled-brand-tint {
	color: var(--brand-300) !important;
}

.text-brand-400, .text-brand-on-dark {
	color: var(--brand-400) !important;
}

.text-brand-500,
.text-brand,
.text-success,
.text-descrease,
.text-strong-brand strong {
	color: var(--brand-500) !important;
}

.text-brand-500-25 {
	color: var(--brand-500-25) !important;
}

.text-brand-600, .text-on-secondary-button {
	color: var(--brand-600) !important;
}

.text-brand-700 {
	color: var(--brand-700) !important;
}

.text-brand-800 {
	color: var(--brand-800) !important;
}

.text-brand-900 {
	color: var(--brand-900) !important;
}

.text-red-50 {
	color: var(--red-50) !important;
}

.text-red-800, .text-negative, .text-increase {
	color: var(--red-800) !important;
}

.text-red-800-30 {
	color: var(--red-800-30) !important;
}

.text-orange-50 {
	color: var(--orange-50) !important;
}

.text-orange-500 {
	color: var(--orange-500) !important;
}

.text-orange-700 {
	color: var(--orange-700) !important;
}

.text-orange-700-30 {
	color: var(--orange-700-30) !important;
}

.text-orange-900, .text-notice {
	color: var(--orange-900) !important;
}
	
.text-cus-blue-200 {
	color: var(--cus-blue-200) !important;
}

.text-cus-blue-900 {
	color: var(--cus-blue-900) !important;
}

.text-cus-gray-100 {
	color: var(--cus-gray-100) !important;
}

.text-cus-gray-200 {
	color: var(--cus-gray-200) !important;
}

.text-cus-gray-300 {
	color: var(--cus-gray-300) !important;
}

.text-cus-gray-400 {
	color: var(--cus-gray-400) !important;
}

.text-cus-gray-600 {
	color: var(--cus-gray-600) !important;
}

.text-cus-gray-800 {
	color: var(--cus-gray-800) !important;
}

.text-cus-gray-900 {
	color: var(--cus-gray-900) !important;
}

.text-headline-l {
	font-size: var(--font-headline-l) !important;
	line-height: var(--font-line-height-134) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-headline-m {
	font-size: var(--font-headline-m) !important;
	line-height: var(--font-line-height-134) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-headline-s {
	font-size: var(--font-headline-s) !important;
	line-height: var(--font-line-height-134) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-title-xl {
	font-size: var(--font-title-xl) !important;
	line-height: var(--font-line-height-134) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-title-l {
	font-size: var(--font-title-l) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-title-m {
	font-size: var(--font-title-m) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-title-s {
	font-size: var(--font-title-s) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-body-l {
	font-size: var(--font-body-l) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-body-m {
	font-size: var(--font-body-m) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-body-s {
	font-size: var(--font-body-s) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-detail-l {
	font-size: var(--font-detail-l) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.text-detail-s {
	font-size: var(--font-detail-s) !important;
	line-height: var(--font-line-height-150) !important;
	letter-spacing: var(--font-letter-spacing-2) !important;
}

.letter-028 {
	letter-spacing: -0.28px !important;
}

.letter-032 {
	letter-spacing: -0.32px !important;
}

.letter-036 {
	letter-spacing: -0.36px !important;
}

.letter-040 {
	letter-spacing: -0.4px !important;
}

.letter-048 {
	letter-spacing: -0.48px !important;
}

.letter-052 {
	letter-spacing: -0.52px !important;
}

.letter-060 {
	letter-spacing: -0.6px !important;
}

.letter-068 {
	letter-spacing: -0.68px !important;
}

.letter-075 {
	letter-spacing: -0.75px !important;
}

.letter-080 {
	letter-spacing: -0.8px !important;
}

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

.border-xxs {
	border-radius: var(--radius-xxs);
}

.border-xs {
	border-radius: var(--radius-xs);
}	

.border-sm {
	border-radius: var(--radius-sm);
}	

.border-md {
	border-radius: var(--radius-md);
}	

.border-lg {
	border-radius: var(--radius-lg);
}	

.border-xl {
	border-radius: var(--radius-xl);
}	

.border-2xl {
	border-radius: var(--radius-2xl);
}	

.border-full {
	border-radius: var(--radius-full);
}

.r-8 {
	border-radius: 8px !important;
}

.r-10 {
	border-radius: 10px !important;
}

.r-12 {
	border-radius: 12px !important;
}

.r-14 {
	border-radius: 14px !important;
}

.r-16 {
	border-radius: 16px !important;
}

.r-18 {
	border-radius: 18px !important;
}

.r-20 {
	border-radius: 20px !important;
}

.r-round {
	border-radius: 50% !important;
}

.border-transparent {
	border-color: transparent !important;
}

.border-white {
	border-color: var(--white) !important;
}

.border-white-0 {
	border-color: var(--white-0) !important;
}

.border-white-10 {
	border-color: var(--white-10) !important;
}

.border-white-20 {
	border-color: var(--white-20) !important;
}

.border-white-50 {
	border-color: var(--white-50) !important;
}

.border-gray-50 {
	border-color: var(--gray-50) !important;
}

.border-gray-100, .border-tertiary {
	border-color: var(--gray-100) !important;
}

.border-gray-200, .border-secondary {
	border-color: var(--gray-200) !important;
}

.border-gray-300, .border-primary, .border-disabled {
	border-color: var(--gray-300) !important;
}

.border-gray-400, .border-unselected {
	border-color: var(--gray-400) !important;
}

.border-gray-500 {
	border-color: var(--gray-500) !important;
}

.border-gray-600, .border-accent {
	border-color: var(--gray-600) !important;
}

.border-gray-700 {
	border-color: var(--gray-700) !important;
}

.border-gray-800 {
	border-color: var(--gray-800) !important;
}

.border-gray-800-0 {
	border-color: var(--gray-800-0) !important;
}

.border-gray-900, .border-active-callabo {
	border-color: var(--gray-900) !important;
}

.border-gray-950 {
	border-color: var(--gray-950) !important;
}

.border-gray-950-0 {
	border-color: var(--gray-950-0) !important;
}

.border-gray-950-10 {
	border-color: var(--gray-950-10) !important;
}

.border-gray-950-20 {
	border-color: var(--gray-950-20) !important;
}

.border-gray-950-60 {
	border-color: var(--gray-950-60) !important;
}

.border-gray-950-90 {
	border-color: var(--gray-950-90) !important;
}

.border-black {
	border-color: var(--black) !important;
}

.border-brand-100 {
	border-color: var(--brand-100) !important;
}

.border-brand-200, .border-brand, .border-disabled-brand {
	border-color: var(--brand-200) !important;
}

.border-brand-300 {
	border-color: var(--brand-300) !important;
}

.border-brand-400 {
	border-color: var(--brand-400) !important;
}

.border-brand-500, .border-active {
	border-color: var(--brand-500) !important;
}

.border-brand-500-25 {
	border-color: var(--brand-500-25) !important;
}

.border-brand-600 {
	border-color: var(--brand-600) !important;
}

.border-brand-700 {
	border-color: var(--brand-700) !important;
}

.border-brand-800 {
	border-color: var(--brand-800) !important;
}

.border-brand-900 {
	border-color: var(--brand-900) !important;
}

.border-red-50 {
	border-color: var(--red-50) !important;
}

.border-red-800, .border-negative {
	border-color: var(--red-800) !important;
}

.border-red-800-30 {
	border-color: var(--red-800-30) !important;
}

.border-orange-50 {
	border-color: var(--orange-50) !important;
}

.border-orange-500 {
	border-color: var(--orange-500) !important;
}

.border-orange-700-30 {
	border-color: var(--orange-700-30) !important;
}

.border-orange-900 {
	border-color: var(--orange-900) !important;
}

.border-cus-blue-200 {
	border-color: var(--cus-blue-200) !important;
}

.border-cus-blue-900 {
	border-color: var(--cus-blue-900) !important;
}

.border-cus-gray-100 {
	border-color: var(--cus-gray-100) !important;
}

.border-cus-gray-200 {
	border-color: var(--cus-gray-200) !important;
}

.border-cus-gray-300 {
	border-color: var(--cus-gray-300) !important;
}

.border-cus-gray-400 {
	border-color: var(--cus-gray-400) !important;
}

.border-cus-gray-600 {
	border-color: var(--cus-gray-600) !important;
}

.border-cus-gray-800 {
	border-color: var(--cus-gray-800) !important;
}

.border-cus-gray-900 {
	border-color: var(--cus-gray-900) !important;
}

.border-solid {
	border: 1px solid;
}

.border-right-transparent {
	border-right-color: transparent !important;
}

/* -------------------------------------------------- MISC STYLES -------------------------------------------------- */

.cursor-pointer {
	cursor: pointer !important;
}

.list-disc {
	list-style-type: disc !important;
}

.list-outside {
	list-style-position: outside !important;
}

.list-inside {
	list-style-position: inside !important;
}

/* -------------------------------------------------- SHADOW STYLES -------------------------------------------------- */

.shadow-none {
	box-shadow: none !important;
}

.shadow-1 {
	box-shadow: var(--shadow-1) !important;
}

.shadow-2 {
	box-shadow: var(--shadow-2) !important;
}

.shadow-3 {
	box-shadow: var(--shadow-3) !important;
}

.shadow-4 {
	box-shadow: var(--shadow-1) !important;
}

.cus-shadow-1 {
	box-shadow: var(--cus-shadow-1) !important;
}

.cus-shadow-2 {
	box-shadow: var(--cus-shadow-2) !important;
}

/* -------------------------------------------------- BACKGROUND STYLES -------------------------------------------------- */
.bg-white, .bg-primary, .bg-primary-overlay {
	background-color: var(--white) !important;
}

.bg-white-0 {
	background-color: var(--white-0) !important;
}

.bg-white-10 {
	background-color: var(--white-10) !important;
}

.bg-white-20 {
	background-color: var(--white-20) !important;
}

.bg-white-50 {
	background-color: var(--white-50) !important;
}

.bg-gray-50, .bg-tertiary, .bg-tertiary-fullpage {
	background-color: var(--gray-50) !important;
}

.bg-gray-100, .bg-secondary, .bg-disable, .bg-informative-tint {
	background-color: var(--gray-100) !important;
}

.bg-gray-200 {
	background-color: var(--gray-200) !important;
}

.bg-gray-300 {
	background-color: var(--gray-300) !important;
}

.bg-gray-400, .bg-unselected {
	background-color: var(--gray-400) !important;
}

.bg-gray-500 {
	background-color: var(--gray-500) !important;
}

.bg-gray-600 {
	background-color: var(--gray-600) !important;
}

.bg-gray-700, .bg-dark, .bg-informative-solid {
	background-color: var(--gray-700) !important;
}

.bg-gray-800 {
	background-color: var(--gray-800) !important;
}

.bg-gray-800-0 {
	background-color: var(--gray-800-0) !important;
}

.bg-gray-900, .bg-dark-deverse {
	background-color: var(--gray-900) !important;
}

.bg-gray-950 {
	background-color: var(--gray-950) !important;
}

.bg-gray-950-0 {
	background-color: var(--gray-950-0) !important;
}

.bg-gray-950-10 {
	background-color: var(--gray-950-10) !important;
}

.bg-gray-950-20 {
	background-color: var(--gray-950-20) !important;
}

.bg-gray-950-60 {
	background-color: var(--gray-950-60) !important;
}

.bg-gray-950-90, .bg-gray-overlay {
	background-color: var(--gray-950-90) !important;
}

.bg-black {
	background-color: var(--black) !important;
}

.bg-brand-100, .bg-brand-tint, .bg-success-tint {
	background-color: var(--brand-100) !important;
}

.bg-brand-200, .bg-dark-brand {
	background-color: var(--brand-200) !important;
}

.bg-brand-300 {
	background-color: var(--brand-300) !important;
}

.bg-brand-400 {
	background-color: var(--brand-400) !important;
}

.bg-brand-500, .bg-brand-solid, .bg-success-solid {
	background-color: var(--brand-500) !important;
}

.bg-brand-500-25 {
	background-color: var(--brand-500-25) !important;
}

.bg-brand-600 {
	background-color: var(--brand-600) !important;
}

.bg-brand-700 {
	background-color: var(--brand-700) !important;
}

.bg-brand-800 {
	background-color: var(--brand-800) !important;
}

.bg-brand-900 {
	background-color: var(--brand-900) !important;
}

.bg-red-50, .bg-negative-tint {
	background-color: var(--red-50) !important;
}

.bg-red-800, .bg-negative-solid {
	background-color: var(--red-800) !important;
}

.bg-red-800-30 {
	background-color: var(--red-800-30) !important;
}

.bg-orange-50, .bg-notice-tint {
	background-color: var(--orange-50) !important;
}

.bg-orange-500, .bg-notice-solid {
	background-color: var(--orange-500) !important;
}

.bg-orange-700-30 {
	background-color: var(--orange-700-30) !important;
}

.bg-orange-900 {
	background-color: var(--orange-900) !important;
}

.bg-cus-blue-200 {
	background-color: var(--cus-blue-200) !important;
}

.bg-cus-blue-900 {
	background-color: var(--cus-blue-900) !important;
}

.bg-cus-gray-100 {
	background-color: var(--cus-gray-100) !important;
}

.bg-cus-gray-200 {
	background-color: var(--cus-gray-200) !important;
}

.bg-cus-gray-300 {
	background-color: var(--cus-gray-300) !important;
}

.bg-cus-gray-400 {
	background-color: var(--cus-gray-400) !important;
}

.bg-cus-gray-600 {
	background-color: var(--cus-gray-600) !important;
}

.bg-cus-gray-800 {
	background-color: var(--cus-gray-800) !important;
}

.bg-cus-gray-900 {
	background-color: var(--cus-gray-900) !important;
}

.bg-no-repeat {
	background-repeat: no-repeat !important;
}

/* ------------------------------------------------------------ RESPONSIVE STYLES ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
/* -------------------------------------------------- LAYOUT STYLES -------------------------------------------------- */
	.md-flex {
		display: flex !important;
	}
	
	.md-flex-col {
		flex-direction: column !important;
	}
	
	.md-grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}

	.md-justify-center {
		justify-content: center !important;
	}

	.md-justify-start {
		justify-content: flex-start !important;
	}

/* -------------------------------------------------- SPACING STYLES -------------------------------------------------- */	
	.md-gap-x-0 {
		column-gap: 0 !important;
	}
	
	.md-gap-y-12 {
		row-gap: 12px !important;
	}
	
	.md-px-24 {
		padding-left: 24px !important;
	    padding-right: 24px !important;
	}

	.md-pt-28 {
		padding-top: 28px !important;
	}

	.md-pt-40 {
		padding-top: 40px !important;
	}

	.md-pb-60 {
		padding-bottom: 60px !important;
	}

	.md-pl-40 {
		padding-left: 40px !important;
	}

	.md-pl-44 {
		padding-left: 44px !important;
	}
}
