@charset "UTF-8";
/** Design Tokens - Radius, Border Width, Spacing */

:root {
  /* Radius */
  --radius-0: 0;
  --radius-2: .2rem;
  --radius-4: .4rem;
  --radius-6: .6rem;
  --radius-8: .8rem;
  --radius-12: 1.2rem;
  --radius-16: 1.6rem;
  --radius-24: 2.4rem;
  --radius-32: 3.2rem;
  --radius-full: 100%;

  /* Border Width */
  --border-0: 0;
  --border-1: .1rem;
  --border-1hf: 1.5rem;
  --border-2: .2rem;
  --border-4: .4rem;
  --border-8: .8rem;

  /* Spacing */
  --spacing-0: 0;
  --spacing-2: .2rem;
  --spacing-4: .4rem;
  --spacing-6: .6rem;
  --spacing-8: .8rem;
  --spacing-10: 1rem;
  --spacing-12: 1.2rem;
  --spacing-16: 1.6rem;
  --spacing-20: 2rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;
  --spacing-40: 4rem;
  --spacing-48: 4.8rem;
  --spacing-64: 6.4rem;
  --spacing-80: 8rem;
  --spacing-96: 9.6rem;
  --spacing-128: 12.8rem;
  --spacing-160: 16rem;
  --spacing-192: 19.2rem;
  --spacing-224: 22.4rem;
  --spacing-256: 25.6rem;
}

:root {
  --flex-gap-2: 0.2rem;
  --flex-gap-4: 0.4rem;
  --flex-gap-6: 0.6rem;
  --flex-gap-8: 0.8rem;
  --flex-gap-10: 1.0rem;
  --flex-gap-12: 1.2rem;
  --flex-gap-16: 1.6rem;
  --flex-gap-20: 2.0rem;
  --flex-gap-24: 2.4rem;
  --flex-gap-32: 3.2rem;
  --flex-gap-40: 4.0rem;
  --flex-gap-48: 4.8rem;
  --flex-gap-64: 6.4rem;
  --flex-gap-80: 8.0rem;
  --flex-gap-96: 9.6rem;
  --flex-gap-128: 12.8rem;
  --flex-gap-160: 16.0rem;
  --flex-gap-192: 19.2rem;
  --flex-gap-224: 22.4rem;
  --flex-gap-256: 25.6rem;
}

/* Padding Utilities */
.pd-t-0   { padding-top: var(--spacing-0)!important; }
.pd-r-0   { padding-right: var(--spacing-0)!important; }
.pd-b-0   { padding-bottom: var(--spacing-0)!important; }
.pd-l-0   { padding-left: var(--spacing-0)!important;}
.pd-y-0   { padding-top: var(--spacing-0)!important; padding-bottom: var(--spacing-0)!important; }
.pd-x-0   { padding-left: var(--spacing-0)!important; padding-right: var(--spacing-0)!important; }

.pd-t-2   { padding-top: var(--spacing-2); }
.pd-r-2   { padding-right: var(--spacing-2); }
.pd-b-2   { padding-bottom: var(--spacing-2); }
.pd-l-2   { padding-left: var(--spacing-2); }
.pd-y-2   { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.pd-x-2   { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }

.pd-t-4   { padding-top: var(--spacing-4); }
.pd-r-4   { padding-right: var(--spacing-4); }
.pd-b-4   { padding-bottom: var(--spacing-4); }
.pd-l-4   { padding-left: var(--spacing-4); }
.pd-y-4   { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.pd-x-4   { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

.pd-t-6   { padding-top: var(--spacing-6); }
.pd-r-6   { padding-right: var(--spacing-6); }
.pd-b-6   { padding-bottom: var(--spacing-6); }
.pd-l-6   { padding-left: var(--spacing-6); }
.pd-y-6   { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.pd-x-6   { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

.pd-t-8   { padding-top: var(--spacing-8); }
.pd-r-8   { padding-right: var(--spacing-8); }
.pd-b-8   { padding-bottom: var(--spacing-8); }
.pd-l-8   { padding-left: var(--spacing-8); }
.pd-y-8   { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.pd-x-8   { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

.pd-t-10  { padding-top: var(--spacing-10); }
.pd-r-10  { padding-right: var(--spacing-10); }
.pd-b-10  { padding-bottom: var(--spacing-10); }
.pd-l-10  { padding-left: var(--spacing-10); }
.pd-y-10  { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.pd-x-10  { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }

.pd-t-12  { padding-top: var(--spacing-12); }
.pd-r-12  { padding-right: var(--spacing-12); }
.pd-b-12  { padding-bottom: var(--spacing-12); }
.pd-l-12  { padding-left: var(--spacing-12); }
.pd-y-12  { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.pd-x-12  { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }

.pd-t-16  { padding-top: var(--spacing-16); }
.pd-r-16  { padding-right: var(--spacing-16); }
.pd-b-16  { padding-bottom: var(--spacing-16); }
.pd-l-16  { padding-left: var(--spacing-16); }
.pd-y-16  { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.pd-x-16  { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }

.pd-t-20  { padding-top: var(--spacing-20); }
.pd-r-20  { padding-right: var(--spacing-20); }
.pd-b-20  { padding-bottom: var(--spacing-20); }
.pd-l-20  { padding-left: var(--spacing-20); }
.pd-y-20  { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.pd-x-20  { padding-left: var(--spacing-20); padding-right: var(--spacing-20); }

.pd-t-24  { padding-top: var(--spacing-24); }
.pd-r-24  { padding-right: var(--spacing-24); }
.pd-b-24  { padding-bottom: var(--spacing-24); }
.pd-l-24  { padding-left: var(--spacing-24); }
.pd-y-24  { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }
.pd-x-24  { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }

.pd-t-32  { padding-top: var(--spacing-32); }
.pd-r-32  { padding-right: var(--spacing-32); }
.pd-b-32  { padding-bottom: var(--spacing-32); }
.pd-l-32  { padding-left: var(--spacing-32); }
.pd-y-32  { padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); }
.pd-x-32  { padding-left: var(--spacing-32); padding-right: var(--spacing-32); }

.pd-t-40  { padding-top: var(--spacing-40); }
.pd-r-40  { padding-right: var(--spacing-40); }
.pd-b-40  { padding-bottom: var(--spacing-40); }
.pd-l-40  { padding-left: var(--spacing-40); }
.pd-y-40  { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
.pd-x-40  { padding-left: var(--spacing-40); padding-right: var(--spacing-40); }

.pd-t-48  { padding-top: var(--spacing-48); }
.pd-r-48  { padding-right: var(--spacing-48); }
.pd-b-48  { padding-bottom: var(--spacing-48); }
.pd-l-48  { padding-left: var(--spacing-48); }
.pd-y-48  { padding-top: var(--spacing-48); padding-bottom: var(--spacing-48); }
.pd-x-48  { padding-left: var(--spacing-48); padding-right: var(--spacing-48); }

.pd-t-64  { padding-top: var(--spacing-64); }
.pd-r-64  { padding-right: var(--spacing-64); }
.pd-b-64  { padding-bottom: var(--spacing-64); }
.pd-l-64  { padding-left: var(--spacing-64); }
.pd-y-64  { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); }
.pd-x-64  { padding-left: var(--spacing-64); padding-right: var(--spacing-64); }

.pd-t-80  { padding-top: var(--spacing-80); }
.pd-r-80  { padding-right: var(--spacing-80); }
.pd-b-80  { padding-bottom: var(--spacing-80); }
.pd-l-80  { padding-left: var(--spacing-80); }
.pd-y-80  { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
.pd-x-80  { padding-left: var(--spacing-80); padding-right: var(--spacing-80); }

.pd-t-96  { padding-top: var(--spacing-96); }
.pd-r-96  { padding-right: var(--spacing-96); }
.pd-b-96  { padding-bottom: var(--spacing-96); }
.pd-l-96  { padding-left: var(--spacing-96); }
.pd-y-96  { padding-top: var(--spacing-96); padding-bottom: var(--spacing-96); }
.pd-x-96  { padding-left: var(--spacing-96); padding-right: var(--spacing-96); }

.pd-t-128 { padding-top: var(--spacing-128); }
.pd-r-128 { padding-right: var(--spacing-128); }
.pd-b-128 { padding-bottom: var(--spacing-128); }
.pd-l-128 { padding-left: var(--spacing-128); }
.pd-y-128 { padding-top: var(--spacing-128); padding-bottom: var(--spacing-128); }
.pd-x-128 { padding-left: var(--spacing-128); padding-right: var(--spacing-128); }

.pd-t-160 { padding-top: var(--spacing-160); }
.pd-r-160 { padding-right: var(--spacing-160); }
.pd-b-160 { padding-bottom: var(--spacing-160); }
.pd-l-160 { padding-left: var(--spacing-160); }
.pd-y-160 { padding-top: var(--spacing-160); padding-bottom: var(--spacing-160); }
.pd-x-160 { padding-left: var(--spacing-160); padding-right: var(--spacing-160); }

.pd-t-192 { padding-top: var(--spacing-192); }
.pd-r-192 { padding-right: var(--spacing-192); }
.pd-b-192 { padding-bottom: var(--spacing-192); }
.pd-l-192 { padding-left: var(--spacing-192); }
.pd-y-192 { padding-top: var(--spacing-192); padding-bottom: var(--spacing-192); }
.pd-x-192 { padding-left: var(--spacing-192); padding-right: var(--spacing-192); }

.pd-t-224 { padding-top: var(--spacing-224); }
.pd-r-224 { padding-right: var(--spacing-224); }
.pd-b-224 { padding-bottom: var(--spacing-224); }
.pd-l-224 { padding-left: var(--spacing-224); }
.pd-y-224 { padding-top: var(--spacing-224); padding-bottom: var(--spacing-224); }
.pd-x-224 { padding-left: var(--spacing-224); padding-right: var(--spacing-224); }

.pd-t-256 { padding-top: var(--spacing-256); }
.pd-r-256 { padding-right: var(--spacing-256); }
.pd-b-256 { padding-bottom: var(--spacing-256); }
.pd-l-256 { padding-left: var(--spacing-256); }
.pd-y-256 { padding-top: var(--spacing-256); padding-bottom: var(--spacing-256); }
.pd-x-256 { padding-left: var(--spacing-256); padding-right: var(--spacing-256); }


/* Margin Utilities */
.mg-t-0   { margin-top: var(--spacing-0); }
.mg-r-0   { margin-right: var(--spacing-0); }
.mg-b-0   { margin-bottom: var(--spacing-0); }
.mg-l-0   { margin-left: var(--spacing-0); }
.mg-y-0   { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.mg-x-0   { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }

.mg-t-2   { margin-top: var(--spacing-2); }
.mg-r-2   { margin-right: var(--spacing-2); }
.mg-b-2   { margin-bottom: var(--spacing-2); }
.mg-l-2   { margin-left: var(--spacing-2); }
.mg-y-2   { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.mg-x-2   { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }

.mg-t-4   { margin-top: var(--spacing-4); }
.mg-r-4   { margin-right: var(--spacing-4); }
.mg-b-4   { margin-bottom: var(--spacing-4); }
.mg-l-4   { margin-left: var(--spacing-4); }
.mg-y-4   { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.mg-x-4   { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }

.mg-t-6   { margin-top: var(--spacing-6); }
.mg-r-6   { margin-right: var(--spacing-6); }
.mg-b-6   { margin-bottom: var(--spacing-6); }
.mg-l-6   { margin-left: var(--spacing-6); }
.mg-y-6   { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.mg-x-6   { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }

.mg-t-8   { margin-top: var(--spacing-8); }
.mg-r-8   { margin-right: var(--spacing-8); }
.mg-b-8   { margin-bottom: var(--spacing-8); }
.mg-l-8   { margin-left: var(--spacing-8); }
.mg-y-8   { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.mg-x-8   { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }

.mg-t-10  { margin-top: var(--spacing-10); }
.mg-r-10  { margin-right: var(--spacing-10); }
.mg-b-10  { margin-bottom: var(--spacing-10); }
.mg-l-10  { margin-left: var(--spacing-10); }
.mg-y-10  { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
.mg-x-10  { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }

.mg-t-12  { margin-top: var(--spacing-12); }
.mg-r-12  { margin-right: var(--spacing-12); }
.mg-b-12  { margin-bottom: var(--spacing-12); }
.mg-l-12  { margin-left: var(--spacing-12); }
.mg-y-12  { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.mg-x-12  { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }

.mg-t-16  { margin-top: var(--spacing-16); }
.mg-r-16  { margin-right: var(--spacing-16); }
.mg-b-16  { margin-bottom: var(--spacing-16); }
.mg-l-16  { margin-left: var(--spacing-16); }
.mg-y-16  { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.mg-x-16  { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }

.mg-t-20  { margin-top: var(--spacing-20); }
.mg-r-20  { margin-right: var(--spacing-20); }
.mg-b-20  { margin-bottom: var(--spacing-20); }
.mg-l-20  { margin-left: var(--spacing-20); }
.mg-y-20  { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.mg-x-20  { margin-left: var(--spacing-20); margin-right: var(--spacing-20); }

.mg-t-24  { margin-top: var(--spacing-24); }
.mg-r-24  { margin-right: var(--spacing-24); }
.mg-b-24  { margin-bottom: var(--spacing-24); }
.mg-l-24  { margin-left: var(--spacing-24); }
.mg-y-24  { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }
.mg-x-24  { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }

.mg-t-32  { margin-top: var(--spacing-32); }
.mg-r-32  { margin-right: var(--spacing-32); }
.mg-b-32  { margin-bottom: var(--spacing-32); }
.mg-l-32  { margin-left: var(--spacing-32); }
.mg-y-32  { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }
.mg-x-32  { margin-left: var(--spacing-32); margin-right: var(--spacing-32); }

.mg-t-40  { margin-top: var(--spacing-40); }
.mg-r-40  { margin-right: var(--spacing-40); }
.mg-b-40  { margin-bottom: var(--spacing-40); }
.mg-l-40  { margin-left: var(--spacing-40); }
.mg-y-40  { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
.mg-x-40  { margin-left: var(--spacing-40); margin-right: var(--spacing-40); }

.mg-t-48  { margin-top: var(--spacing-48); }
.mg-r-48  { margin-right: var(--spacing-48); }
.mg-b-48  { margin-bottom: var(--spacing-48); }
.mg-l-48  { margin-left: var(--spacing-48); }
.mg-y-48  { margin-top: var(--spacing-48); margin-bottom: var(--spacing-48); }
.mg-x-48  { margin-left: var(--spacing-48); margin-right: var(--spacing-48); }

.mg-t-64  { margin-top: var(--spacing-64); }
.mg-r-64  { margin-right: var(--spacing-64); }
.mg-b-64  { margin-bottom: var(--spacing-64); }
.mg-l-64  { margin-left: var(--spacing-64); }
.mg-y-64  { margin-top: var(--spacing-64); margin-bottom: var(--spacing-64); }
.mg-x-64  { margin-left: var(--spacing-64); margin-right: var(--spacing-64); }

.mg-t-80  { margin-top: var(--spacing-80); }
.mg-r-80  { margin-right: var(--spacing-80); }
.mg-b-80  { margin-bottom: var(--spacing-80); }
.mg-l-80  { margin-left: var(--spacing-80); }
.mg-y-80  { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.mg-x-80  { margin-left: var(--spacing-80); margin-right: var(--spacing-80); }

.mg-t-96  { margin-top: var(--spacing-96); }
.mg-r-96  { margin-right: var(--spacing-96); }
.mg-b-96  { margin-bottom: var(--spacing-96); }
.mg-l-96  { margin-left: var(--spacing-96); }
.mg-y-96  { margin-top: var(--spacing-96); margin-bottom: var(--spacing-96); }
.mg-x-96  { margin-left: var(--spacing-96); margin-right: var(--spacing-96); }

.mg-t-128 { margin-top: var(--spacing-128); }
.mg-r-128 { margin-right: var(--spacing-128); }
.mg-b-128 { margin-bottom: var(--spacing-128); }
.mg-l-128 { margin-left: var(--spacing-128); }
.mg-y-128 { margin-top: var(--spacing-128); margin-bottom: var(--spacing-128); }
.mg-x-128 { margin-left: var(--spacing-128); margin-right: var(--spacing-128); }

.mg-t-160 { margin-top: var(--spacing-160); }
.mg-r-160 { margin-right: var(--spacing-160); }
.mg-b-160 { margin-bottom: var(--spacing-160); }
.mg-l-160 { margin-left: var(--spacing-160); }
.mg-y-160 { margin-top: var(--spacing-160); margin-bottom: var(--spacing-160); }
.mg-x-160 { margin-left: var(--spacing-160); margin-right: var(--spacing-160); }

.mg-t-192 { margin-top: var(--spacing-192); }
.mg-r-192 { margin-right: var(--spacing-192); }
.mg-b-192 { margin-bottom: var(--spacing-192); }
.mg-l-192 { margin-left: var(--spacing-192); }
.mg-y-192 { margin-top: var(--spacing-192); margin-bottom: var(--spacing-192); }
.mg-x-192 { margin-left: var(--spacing-192); margin-right: var(--spacing-192); }

.mg-t-224 { margin-top: var(--spacing-224); }
.mg-r-224 { margin-right: var(--spacing-224); }
.mg-b-224 { margin-bottom: var(--spacing-224); }
.mg-l-224 { margin-left: var(--spacing-224); }
.mg-y-224 { margin-top: var(--spacing-224); margin-bottom: var(--spacing-224); }
.mg-x-224 { margin-left: var(--spacing-224); margin-right: var(--spacing-224); }

.mg-t-256 { margin-top: var(--spacing-256); }
.mg-r-256 { margin-right: var(--spacing-256); }
.mg-b-256 { margin-bottom: var(--spacing-256); }
.mg-l-256 { margin-left: var(--spacing-256); }
.mg-y-256 { margin-top: var(--spacing-256); margin-bottom: var(--spacing-256); }
.mg-x-256 { margin-left: var(--spacing-256); margin-right: var(--spacing-256); }

.radius-0   { border-radius: var(--radius-0); }
.radius-2   { border-radius: var(--radius-2); }
.radius-4   { border-radius: var(--radius-4); }
.radius-6   { border-radius: var(--radius-6); }
.radius-8   { border-radius: var(--radius-8); }
.radius-12  { border-radius: var(--radius-12); }
.radius-16  { border-radius: var(--radius-16); }
.radius-24  { border-radius: var(--radius-24); }
.radius-32  { border-radius: var(--radius-32); }
.radius-full { border-radius: var(--radius-full); }

.flex-col-2   {gap: var(--flex-gap-2); }
.flex-col-4   {gap: var(--flex-gap-4); }
.flex-col-6   {gap: var(--flex-gap-6); }
.flex-col-8   {gap: var(--flex-gap-8); }
.flex-col-10  {gap: var(--flex-gap-10); }
.flex-col-12  {gap: var(--flex-gap-12); }
.flex-col-16  {gap: var(--flex-gap-16); }
.flex-col-20  {gap: var(--flex-gap-20); }
.flex-col-24  {gap: var(--flex-gap-24); }