/**************
  **********
  ******
  */
/* LEGACY PHANTOM COMPATIBILITY BLOCK
   YOU NEED TO REMOVE THIS CODE, BUT FIRST REPLACE ITS USE IN JSP FILES.
*/

/*
  Color vars are intentionally disabled here to verify skin-token ownership.
  Active tokens now come from /phantom/assets/skins/FNB/fnb_theme_tokens.css.
*/
/* :root {
  --background: #FFFFFF;
  --page: #F6F6F6;
  --foreground: #FFFFFF;
  --icon-container: #D3DCDC;
  --paper: #FFFFFF;
  --paper-rgb: 255, 255, 255;
  --highlight: #FA791F;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --error: #BA1D1B;
  --glass: rgba(255, 255, 255, 0);
  --success: #1C6B32;
  --base: #FA791F;
  --universal: #949494;
  --action-super-light: #FFE7D7;
  --action-extra-dark: #924913;
  --action-ultra-light: #FBC9A5;
  --action-ultra-dark: #62300C;
  --action-extra-light: #F8AF79;
  --action-light: #F6944C;
  --action-dark: #C36119;
  --primary-super-light: #B0D8D8;
  --primary-extra-dark: #005C5C;
  --primary-ultra-light: #85CCCC;
  --primary-ultra-dark: #193435;
  --primary-extra-light: #5FC1C1;
  --primary-light: #33ADAD;
  --primary-base: #009999;
  --primary-dark: #007A7A;
  --ghost-super-light: #E9E9E9;
  --ghost-extra-dark: #383D3E;
  --ghost-ultra-light: #BEC3C3;
  --ghost-ultra-dark: #202124;
  --ghost-extra-light: #A9AFB0;
  --ghost-light: #8C9495;
  --ghost-base: #6F797B;
  --ghost-dark: #40484A;
} */

/* Legacy background colors */
.bg-b { background-color: var(--background); }
.bg-pg { background-color: var(--page); }
.bg-f { background-color: var(--foreground); }
.bg-ic { background-color: var(--icon-container); }
.bg-pap { background-color: var(--paper); }
.bg-h { background-color: var(--highlight); }
.bg-i { background-color: var(--ink); }
.bg-e { background-color: var(--error); }
.bg-g { background-color: var(--glass); }
.bg-s { background-color: var(--success); }
.bg-base { background-color: var(--base); }
.bg-u { background-color: var(--universal); }

.bg-asl { background-color: var(--action-super-light); }
.bg-aed { background-color: var(--action-extra-dark); }
.bg-aul { background-color: var(--action-ultra-light); }
.bg-aud { background-color: var(--action-ultra-dark); }
.bg-ael { background-color: var(--action-extra-light); }
.bg-al { background-color: var(--action-light); }
.bg-ad { background-color: var(--action-dark); }

.bg-psl { background-color: var(--primary-super-light); }
.bg-ped { background-color: var(--primary-extra-dark); }
.bg-pul { background-color: var(--primary-ultra-light); }
.bg-pud { background-color: var(--primary-ultra-dark); }
.bg-pel { background-color: var(--primary-extra-light); }
.bg-pl { background-color: var(--primary-light); }
.bg-pb { background-color: var(--primary-base); }
.bg-pd { background-color: var(--primary-dark); }

.bg-gsl { background-color: var(--ghost-super-light); }
.bg-ged { background-color: var(--ghost-extra-dark); }
.bg-gul { background-color: var(--ghost-ultra-light); }
.bg-gud { background-color: var(--ghost-ultra-dark); }
.bg-gel { background-color: var(--ghost-extra-light); }
.bg-gl { background-color: var(--ghost-light); }
.bg-gb { background-color: var(--ghost-base); }
.bg-gd { background-color: var(--ghost-dark); }

/* Legacy text colors */
.text-b { color: var(--background); }
.text-pg { color: var(--page); }
.text-f { color: var(--foreground); }
.text-ic { color: var(--icon-container); }
.text-pap { color: var(--paper); }
.text-h { color: var(--highlight); }
.text-i { color: var(--ink); }
.text-e { color: var(--error); }
.text-g { color: var(--glass); }
.text-s { color: var(--success); }
.text-brand-base { color: var(--base); }
.text-u { color: var(--universal); }

.text-asl { color: var(--action-super-light); }
.text-aed { color: var(--action-extra-dark); }
.text-aul { color: var(--action-ultra-light); }
.text-aud { color: var(--action-ultra-dark); }
.text-ael { color: var(--action-extra-light); }
.text-al { color: var(--action-light); }
.text-ad { color: var(--action-dark); }

.text-psl { color: var(--primary-super-light); }
.text-ped { color: var(--primary-extra-dark); }
.text-pul { color: var(--primary-ultra-light); }
.text-pud { color: var(--primary-ultra-dark); }
.text-pel { color: var(--primary-extra-light); }
.text-pl { color: var(--primary-light); }
.text-pb { color: var(--primary-base); }
.text-pd { color: var(--primary-dark); }

.text-gsl { color: var(--ghost-super-light); }
.text-ged { color: var(--ghost-extra-dark); }
.text-gul { color: var(--ghost-ultra-light); }
.text-gud { color: var(--ghost-ultra-dark); }
.text-gel { color: var(--ghost-extra-light); }
.text-gl { color: var(--ghost-light); }
.text-gb { color: var(--ghost-base); }
.text-gd { color: var(--ghost-dark); }

/* Legacy layout/component aliases */
.items_6 .card, .items_3 .card { flex: 0 0 calc(33.33% - 0.666rem); }
.items_4 .card { flex: 0 0 calc(50% - 0.5rem); }
.items_5 .row_1 .card { flex: 0 0 calc(50% - 0.5rem); }
.items_5 .row_2 .card { flex: 0 0 calc(33.33% - 0.666rem); }

.base-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1440px) {
  .base-container { padding-left: 5%; padding-right: 5%; }
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ht-8 { height: 2rem; }

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

/* ------------------------------------------------------------------
   TEMPORARY COMPATIBILITY ALIASES
   Keep these aliases only while migrating JSP classes to standard names.
   Remove each alias after all JSP usages are replaced.

   Mapping:
   - pd-1-b -> pb-1
   - pd-5-t -> pt-5
   - pd-5-b -> pb-5
   - text-ink -> text-i
   - mg-1 -> m-1
   - mg-2-t -> mt-2
   - mg-4-t -> mt-4
------------------------------------------------------------------- */
.pd-1-b { padding-bottom: 0.25rem; }
.pd-5-t { padding-top: 1.25rem; }
.pd-5-b { padding-bottom: 1.25rem; }
.text-ink { color: var(--ink); }
.mg-1 { margin: 0.25rem; }
.mg-2-t { margin-top: 0.5rem; }
.mg-4-t { margin-top: 1rem; }
.vAlignMiddle { vertical-align: middle; }
.template { width: 100%; }

/* Tailwind-parity utility used by existing templates */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-8 { height: 2rem; }

/* Forms template compatibility (migrated from inline styles in forms.jsp) */
.take-up-section {
  margin-top: 2rem;
  padding: 1rem;
}
.take-up-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.take-up-panel {
  padding: 1.5rem;
  border-radius: var(--radius-component, var(--radius-xl, 0.75rem));
}
.take-up-panel.take-up-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.take-up-section .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.take-up-section .links,
.take-up-section .contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.take-up-section .contact-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-component, var(--radius-xl, 0.75rem));
}
@media (min-width: 600px) {
  .take-up-grid {
    flex-direction: column;
  }
  .contact-info-block {
    flex-direction: row;
    gap: 1.5rem;
  }
  .contact-info-block > * {
    flex: 1;
  }
}
@media (min-width: 768px) {
  .take-up-grid {
    flex-direction: row;
  }
  .take-up-panel.take-up-left,
  .take-up-panel.take-up-right {
    flex: 1;
  }
  .take-up-panel.take-up-form {
    flex: 2;
  }
}

/* Standard Tailwind-style utilities continue below */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*** BORDERS ***/
/*radius*/
.rounded-none	{border-radius: var(--radius-none, 0px);}
.rounded-sm	    {border-radius: var(--radius-sm, 0.125rem);} /* 2px */
.rounded	    {border-radius: var(--radius, 0.25rem);} /* 4px */
.rounded-5      {border-radius: var(--radius-5, 0.3125rem);} /* 5px */
.rounded-md	    {border-radius: var(--radius-md, 0.375rem);} /* 6px */
.rounded-lg	    {border-radius: var(--radius-lg, 0.5rem);} /* 8px */
.rounded-10     {border-radius: var(--radius-10, 0.625rem);} /* 10px */
.rounded-xl	    {border-radius: var(--radius-template, var(--radius-xl, 0.75rem));} /* 12px template default */
.rounded-14     {border-radius: var(--radius-14, 0.875rem);} /* 14px */
.rounded-15     {border-radius: var(--radius-15, 0.9375rem);} /* 15px */
.rounded-2xl	{border-radius: var(--radius-2xl, 1rem);} /* 16px */
.rounded-18     {border-radius: var(--radius-18, 1.125rem);} /* 18px */
.rounded-20     {border-radius: var(--radius-20, 1.25rem);} /* 20px */
.rounded-3xl	{border-radius: var(--radius-3xl, 1.5rem);} /* 24px */
.rounded-25     {border-radius: var(--radius-25, 1.5625rem);} /* 25px */
.rounded-26     {border-radius: var(--radius-26, 1.625rem);} /* 26px */
.rounded-full	{border-radius: var(--radius-full, 9999px);}

/*style*/
.border-solid	{border-style: solid;}
.border-dashed	{border-style: dashed;}
.border-dotted	{border-style: dotted;}
.border-double	{border-style: double;}
.border-hidden	{border-style: hidden;}
.border-none	{border-style: none;}

/*width*/
.border-0	{border-width: 0px;}
.border-2	{border-width: 2px;}
.border-4	{border-width: 4px;}
.border-8	{border-width: 8px;}
.border	{border-width: 1px;}

.border-x-0	{ border-left-width: 0px; border-right-width: 0px;}
.border-x-2	{ border-left-width: 2px; border-right-width: 2px;}
.border-x-4	{ border-left-width: 4px; border-right-width: 4px;}
.border-x-8	{ border-left-width: 8px; border-right-width: 8px;}
.border-x	{ border-left-width: 1px; border-right-width: 1px;}
.border-y-0	{ border-top-width: 0px; border-bottom-width: 0px;}
.border-y-2	{ border-top-width: 2px; border-bottom-width: 2px;}
.border-y-4	{ border-top-width: 4px; border-bottom-width: 4px;}
.border-y-8	{ border-top-width: 8px; border-bottom-width: 8px;}
.border-y	{ border-top-width: 1px; border-bottom-width: 1px;}

.border-t-0	{border-top-width: 0px;}
.border-t-2	{border-top-width: 2px;}
.border-t-4	{border-top-width: 4px;}
.border-t-8	{border-top-width: 8px;}
.border-t	{border-top-width: 1px;}

.border-r-0	{border-right-width: 0px;}
.border-r-2	{border-right-width: 2px;}
.border-r-4	{border-right-width: 4px;}
.border-r-8	{border-right-width: 8px;}
.border-r	{border-right-width: 1px;}

.border-b-0	{border-bottom-width: 0px;}
.border-b-2	{border-bottom-width: 2px;}
.border-b-4	{border-bottom-width: 4px;}
.border-b-8	{border-bottom-width: 8px;}
.border-b	{border-bottom-width: 1px;}

.border-l-0	{border-left-width: 0px;}
.border-l-2	{border-left-width: 2px;}
.border-l-4	{border-left-width: 4px;}
.border-l-8	{border-left-width: 8px;}
.border-l	{border-left-width: 1px;}

/*** CUSTOMISATION ***/

/*** EFFECTS ***/
/*box shadows*/
.shadow-sm	{ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow	{ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md	{ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg	{ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl	{ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl	{ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner	{ box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-none	{ box-shadow: 0 0 #0000; }

/*opacity*/
.opacity-0	{ opacity: 0; }
.opacity-5	{ opacity: 0.05; }
.opacity-10	{ opacity: 0.1; }
.opacity-15	{ opacity: 0.15; }
.opacity-20	{ opacity: 0.2; }
.opacity-25	{ opacity: 0.25; }
.opacity-30	{ opacity: 0.3; }
.opacity-35	{ opacity: 0.35; }
.opacity-40	{ opacity: 0.4; }
.opacity-45	{ opacity: 0.45; }
.opacity-50	{ opacity: 0.5; }
.opacity-55	{ opacity: 0.55; }
.opacity-60	{ opacity: 0.6; }
.opacity-65	{ opacity: 0.65; }
.opacity-70	{ opacity: 0.7; }
.opacity-75	{ opacity: 0.75; }
.opacity-80	{ opacity: 0.8; }
.opacity-85	{ opacity: 0.85; }
.opacity-90	{ opacity: 0.9; }
.opacity-95	{ opacity: 0.95; }
.opacity-100 { opacity: 1;}

/*** FILTERS ***/
/*blur*/
.blur-none	{ filter: none; }
.blur-sm	{ filter: blur(4px); }
.blur	{ filter: blur(8px); }
.blur-md	{ filter: blur(12px); }
.blur-lg	{ filter: blur(16px); }
.blur-xl	{ filter: blur(24px); }
.blur-2xl	{ filter: blur(40px); }
.blur-3xl	{ filter: blur(64px); }

.drop-shadow-sm	{ filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); }
.drop-shadow	{ filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); }
.drop-shadow-md	{ filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); }
.drop-shadow-lg	{ filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }
.drop-shadow-xl	{ filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); }
.drop-shadow-2xl	{ filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); }
.drop-shadow-none	{ filter: drop-shadow(0 0 #0000); }

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

/*Cursor */
.cursor-auto	{ cursor: auto; }
.cursor-default	{ cursor: default; }
.cursor-pointer	{ cursor: pointer; }
.cursor-wait	{ cursor: wait; }
.cursor-text	{ cursor: text; }
.cursor-move	{ cursor: move; }
.cursor-help	{ cursor: help; }
.cursor-none	{ cursor: none; }
.cursor-crosshair	{ cursor: crosshair; }
.cursor-grab	{ cursor: grab; }
.cursor-grabbing	{ cursor: grabbing; }
.cursor-zoom-in	{ cursor: zoom-in; }
.cursor-zoom-out	{ cursor: zoom-out; }

/*scoll behavior*/
.scroll-auto	{ scroll-behavior: auto; }
.scroll-smooth	{ scroll-behavior: smooth; }


/*** LAYOUT ***/
/*align*/
/* Align Self */
.self-auto	{ align-self: auto; }
.self-start	{ align-self: flex-start; }
.self-end	{ align-self: flex-end; }
.self-center	{ align-self: center; }
.self-stretch	{ align-self: stretch; }
.self-baseline	{ align-self: baseline; }

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

/* Align Content */
.content-normal	{ align-content: normal; }
.content-center	{ align-content: center; }
.content-start	{ align-content: flex-start; }
.content-end	{ align-content: flex-end; }
.content-between	{ align-content: space-between; }
.content-around	{ align-content: space-around; }
.content-evenly	{ align-content: space-evenly; }
.content-baseline	{ align-content: baseline; }
.content-stretch	{ align-content: stretch; }


/*flex*/
/* Flex */
.flex-11auto	{ flex: 1 1 auto; }
.flex-auto {flex: auto}
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-100 { flex: 1 0 0; }

.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}


/* Flex Direction */
.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	{ flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex Grow */
.grow	{ flex-grow: 1; }
.grow-0	{ flex-grow: 0; }

/* Flex Shrink */
.shrink	{ flex-shrink: 1; }
.shrink-0	{ flex-shrink: 0; }

/* Flex Basis */
.basis-0	{ flex-basis: 0; }
.basis-1	{ flex-basis: 0.25rem; } /* 4px */
.basis-2	{ flex-basis: 0.5rem; } /* 8px */
.basis-3	{ flex-basis: 0.75rem; } /* 12px */
.basis-4	{ flex-basis: 1rem; } /* 16px */
.basis-5	{ flex-basis: 1.25rem; } /* 20px */
.basis-6	{ flex-basis: 1.5rem; } /* 24px */
.basis-7	{ flex-basis: 1.75rem; } /* 28px */
.basis-8	{ flex-basis: 2rem; } /* 32px */
.basis-9	{ flex-basis: 2.25rem; } /* 36px */
.basis-10	{ flex-basis: 2.5rem; } /* 40px */
.basis-11	{ flex-basis: 2.75rem; } /* 44px */
.basis-12	{ flex-basis: 3rem; } /* 48px */
.basis-14	{ flex-basis: 3.5rem; } /* 56px */
.basis-16	{ flex-basis: 4rem; } /* 64px */
.basis-20	{ flex-basis: 5rem; } /* 80px */
.basis-24	{ flex-basis: 6rem; } /* 96px */
.basis-28	{ flex-basis: 7rem; } /* 112px */
.basis-32	{ flex-basis: 8rem; } /* 128px */
.basis-36	{ flex-basis: 9rem; } /* 144px */
.basis-40	{ flex-basis: 10rem; } /* 160px */
.basis-44	{ flex-basis: 11rem; } /* 176px */
.basis-48	{ flex-basis: 12rem; } /* 192px */
.basis-52	{ flex-basis: 13rem; } /* 208px */
.basis-56	{ flex-basis: 14rem; } /* 224px */
.basis-60	{ flex-basis: 15rem; } /* 240px */
.basis-64	{ flex-basis: 16rem; } /* 256px */
.basis-72	{ flex-basis: 18rem; } /* 288px */
.basis-80	{ flex-basis: 20rem; } /* 320px */
.basis-96	{ flex-basis: 24rem; } /* 384px */
.basis-auto	{ flex-basis: auto; }
.basis-px	{ flex-basis: 1px; }
.basis-0-5	{ flex-basis: 0.125rem; } /* 2px */
.basis-1-5	{ flex-basis: 0.375rem; } /* 6px */
.basis-2-5	{ flex-basis: 0.625rem; } /* 10px */
.basis-3-5	{ flex-basis: 0.875rem; } /* 14px */
.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-2_4	{ flex-basis: 50%; }
.basis-3_4	{ flex-basis: 75%; }
.basis-1_5	{ flex-basis: 20%; }
.basis-2_5	{ flex-basis: 40%; }
.basis-3_5	{ flex-basis: 60%; }
.basis-4_5	{ flex-basis: 80%; }
.basis-1_6	{ flex-basis: 16.666667%; }
.basis-2_6	{ flex-basis: 33.333333%; }
.basis-3_6	{ flex-basis: 50%; }
.basis-4_6	{ flex-basis: 66.666667%; }
.basis-5_6	{ flex-basis: 83.333333%; }
.basis-1_12	{ flex-basis: 8.333333%; }
.basis-2_12	{ flex-basis: 16.666667%; }
.basis-3_12	{ flex-basis: 25%; }
.basis-4_12	{ flex-basis: 33.333333%; }
.basis-5_12	{ flex-basis: 41.666667%; }
.basis-6_12	{ flex-basis: 50%; }
.basis-7_12	{ flex-basis: 58.333333%; }
.basis-8_12	{ flex-basis: 66.666667%; }
.basis-9_12	{ flex-basis: 75%; }
.basis-10_12	{ flex-basis: 83.333333%; }
.basis-11_12	{ flex-basis: 91.666667%; }
.basis-full	{ flex-basis: 100%; }

/*gap*/
.gap-0	{ gap: 0; }
.gap-x-0	{ column-gap: 0; }
.gap-y-0	{ row-gap: 0; }
.gap-px	{ gap: 1px; }
.gap-x-px	{ column-gap: 1px; }
.gap-y-px	{ row-gap: 1px; }
.gap-0-5	{ gap: 0.125rem; } /* 2px */
.gap-x-0-5	{ column-gap: 0.125rem; } /* 2px */
.gap-y-0-5	{ row-gap: 0.125rem; } /* 2px */
.gap-1	{ gap: 0.25rem; } /* 4px */
.gap-x-1	{ column-gap: 0.25rem; } /* 4px */
.gap-y-1	{ row-gap: 0.25rem; } /* 4px */
.gap-1-5	{ gap: 0.375rem; } /* 6px */
.gap-x-1-5	{ column-gap: 0.375rem; } /* 6px */
.gap-y-1-5	{ row-gap: 0.375rem; } /* 6px */
.gap-2	{ gap: 0.5rem; } /* 8px */
.gap-x-2	{ column-gap: 0.5rem; } /* 8px */
.gap-y-2	{ row-gap: 0.5rem; }/* 8px */
.gap-2-5	{ gap: 0.625rem; } /* 10px */
.gap-x-2-5	{ column-gap: 0.625rem; }/* 10px */
.gap-y-2-5	{ row-gap: 0.625rem; } /* 10px */
.gap-3	{ gap: 0.75rem; } /* 12px */
.gap-x-3	{ column-gap: 0.75rem; } /* 12px */
.gap-y-3	{ row-gap: 0.75rem; } /* 12px */
.gap-3-5	{ gap: 0.875rem; } /* 14px */
.gap-x-3-5	{ column-gap: 0.875rem; } /* 14px */
.gap-y-3-5	{ row-gap: 0.875rem; } /* 14px */
.gap-4	{ gap: 1rem; } /* 16px */
.gap-x-4	{ column-gap: 1rem; } /* 16px */
.gap-y-4	{ row-gap: 1rem; } /* 16px */
.gap-5	{ gap: 1.25rem; } /* 20px */
.gap-x-5	{ column-gap: 1.25rem; } /* 20px */
.gap-y-5	{ row-gap: 1.25rem; } /* 20px */
.gap-6	{ gap: 1.5rem; } /* 24px */
.gap-x-6	{ column-gap: 1.5rem; } /* 24px */
.gap-y-6	{ row-gap: 1.5rem; } /* 24px */
.gap-7	{ gap: 1.75rem; } /* 28px */
.gap-x-7	{ column-gap: 1.75rem; } /* 28px */
.gap-y-7	{ row-gap: 1.75rem; } /* 28px */
.gap-8	{ gap: 2rem; } /* 32px */
.gap-x-8	{ column-gap: 2rem; } /* 32px */
.gap-y-8	{ row-gap: 2rem; } /* 32px */
.gap-9	{ gap: 2.25rem; } /* 36px */
.gap-x-9	{ column-gap: 2.25rem; } /* 36px */
.gap-y-9	{ row-gap: 2.25rem; } /* 36px */
.gap-10	{ gap: 2.5rem; } /* 40px */
.gap-x-10	{ column-gap: 2.5rem; } /* 40px */
.gap-y-10	{ row-gap: 2.5rem; } /* 40px */
.gap-11	{ gap: 2.75rem; } /* 44px */
.gap-x-11	{ column-gap: 2.75rem; } /* 44px */
.gap-y-11	{ row-gap: 2.75rem; } /* 44px */
.gap-12	{ gap: 3rem; } /* 48px */
.gap-x-12	{ column-gap: 3rem; } /* 48px */
.gap-y-12	{ row-gap: 3rem; } /* 48px */
.gap-14	{ gap: 3.5rem; } /* 56px */
.gap-x-14	{ column-gap: 3.5rem; } /* 56px */
.gap-y-14	{ row-gap: 3.5rem; } /* 56px */
.gap-16	{ gap: 4rem; } /* 64px */
.gap-x-16	{ column-gap: 4rem; } /* 64px */
.gap-y-16	{ row-gap: 4rem; } /* 64px */
.gap-20	{ gap: 5rem; } /* 80px */
.gap-x-20	{ column-gap: 5rem; } /* 80px */
.gap-y-20	{ row-gap: 5rem; } /* 80px */
.gap-24	{ gap: 6rem; } /* 96px */
.gap-x-24	{ column-gap: 6rem; } /* 96px */
.gap-y-24	{ row-gap: 6rem; } /* 96px */
.gap-28	{ gap: 7rem; } /* 112px */
.gap-x-28	{ column-gap: 7rem; } /* 112px */
.gap-y-28	{ row-gap: 7rem; } /* 112px */
.gap-32	{ gap: 8rem; } /* 128px */
.gap-x-32	{ column-gap: 8rem; } /* 128px */
.gap-y-32	{ row-gap: 8rem; } /* 128px */
.gap-36	{ gap: 9rem; } /* 144px */
.gap-x-36	{ column-gap: 9rem; } /* 144px */
.gap-y-36	{ row-gap: 9rem; } /* 144px */
.gap-40	{ gap: 10rem; } /* 160px */
.gap-x-40	{ column-gap: 10rem; } /* 160px */
.gap-y-40	{ row-gap: 10rem; } /* 160px */
.gap-44	{ gap: 11rem; } /* 176px */
.gap-x-44	{ column-gap: 11rem; } /* 176px */
.gap-y-44	{ row-gap: 11rem; } /* 176px */
.gap-48	{ gap: 12rem; } /* 192px */
.gap-x-48	{ column-gap: 12rem; } /* 192px */
.gap-y-48	{ row-gap: 12rem; } /* 192px */
.gap-52	{ gap: 13rem; } /* 208px */
.gap-x-52	{ column-gap: 13rem; } /* 208px */
.gap-y-52	{ row-gap: 13rem; } /* 208px */
.gap-56	{ gap: 14rem; }  /* 224px */
.gap-x-56	{ column-gap: 14rem; } /* 224px */
.gap-y-56	{ row-gap: 14rem; } /* 224px */
.gap-60	{ gap: 15rem; } /* 240px */
.gap-x-60	{ column-gap: 15rem; } /* 240px */
.gap-y-60	{ row-gap: 15rem; } /* 240px */
.gap-64	{ gap: 16rem; } /* 256px */
.gap-x-64	{ column-gap: 16rem; } /* 256px */
.gap-y-64	{ row-gap: 16rem; } /* 256px */
.gap-72	{ gap: 18rem; } /* 288px */
.gap-x-72	{ column-gap: 18rem; } /* 288px */
.gap-y-72	{ row-gap: 18rem; } /* 288px */
.gap-80	{ gap: 20rem; } /* 320px */
.gap-x-80	{ column-gap: 20rem; } /* 320px */
.gap-y-80	{ row-gap: 20rem; } /* 320px */
.gap-96	{ gap: 24rem; } /* 384px */
.gap-x-96	{ column-gap: 24rem; } /* 384px */
.gap-y-96	{ row-gap: 24rem; } /* 384px */

/*grid*/
/* Grid Column Start / End */
.col-auto	    { grid-column: auto; }

.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-span-7	    { grid-column: span 7 / span 7; }
.col-span-8	    { grid-column: span 8 / span 8; }
.col-span-9	    { grid-column: span 9 / span 9; }
.col-span-10	{ grid-column: span 10 / span 10; }
.col-span-11	{ grid-column: span 11 / span 11; }
.col-span-12	{ grid-column: span 12 / span 12; }

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

.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-start-5	{ grid-column-start: 5; }
.col-start-6	{ grid-column-start: 6; }
.col-start-7	{ grid-column-start: 7; }
.col-start-8	{ grid-column-start: 8; }
.col-start-9	{ grid-column-start: 9; }
.col-start-10	{ grid-column-start: 10; }
.col-start-11	{ grid-column-start: 11; }
.col-start-12	{ grid-column-start: 12; }

.col-start-auto	{ grid-column-start: auto; }

.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; }
.col-end-5	{ grid-column-end: 5; }
.col-end-6	{ grid-column-end: 6; }
.col-end-7	{ grid-column-end: 7; }
.col-end-8	{ grid-column-end: 8; }
.col-end-9	{ grid-column-end: 9; }
.col-end-10	{ grid-column-end: 10; }
.col-end-11	{ grid-column-end: 11; }
.col-end-12	{ grid-column-end: 12; }

.col-end-auto { grid-column-end: auto; }

/* Grid Row Start / End */
.row-auto	{ grid-row: auto; }

.row-span-1  { grid-row: span 1 / span 1; }
.row-span-2	 { grid-row: span 2 / span 2; }
.row-span-3	 { grid-row: span 3 / span 3; }
.row-span-4	 { grid-row: span 4 / span 4; }
.row-span-5	 { grid-row: span 5 / span 5; }
.row-span-6	 { grid-row: span 6 / span 6; }
.row-span-7	 { grid-row: span 7 / span 7; }
.row-span-8	 { grid-row: span 8 / span 8; }
.row-span-9	 { grid-row: span 9 / span 9; }
.row-span-10 { grid-row: span 10 / span 10; }
.row-span-11 { grid-row: span 11 / span 11; }
.row-span-12 { grid-row: span 12 / span 12; }

.row-span-full { grid-row: 1 / -1; }

.row-start-1	{ grid-row-start: 1; }
.row-start-2	{ grid-row-start: 2; }
.row-start-3	{ grid-row-start: 3; }
.row-start-4	{ grid-row-start: 4; }
.row-start-5	{ grid-row-start: 5; }
.row-start-6	{ grid-row-start: 6; }
.row-start-7	{ grid-row-start: 7; }
.row-start-8	{ grid-row-start: 8; }
.row-start-9	{ grid-row-start: 9; }
.row-start-10	{ grid-row-start: 10; }
.row-start-11	{ grid-row-start: 11; }
.row-start-12	{ grid-row-start: 12; }

.row-start-auto	{ grid-row-start: auto; }

.row-end-1	{ grid-row-end: 1; }
.row-end-2	{ grid-row-end: 2; }
.row-end-3	{ grid-row-end: 3; }
.row-end-4	{ grid-row-end: 4; }
.row-end-5	{ grid-row-end: 5; }
.row-end-6	{ grid-row-end: 6; }
.row-end-7	{ grid-row-end: 7; }
.row-end-8	{ grid-row-end: 8; }
.row-end-9	{ grid-row-end: 9; }
.row-end-10	{ grid-row-end: 10; }
.row-end-11	{ grid-row-end: 11; }
.row-end-12	{ grid-row-end: 12; }

.row-end-auto	{ grid-row-end: auto; }

/* Grid Template Columns */
.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)); }

.grid-cols-none	{ grid-template-columns: none; }
.grid-cols-subgrid	{ grid-template-columns: subgrid;}

/* Grid Template Rows */
.grid-rows-1	{ grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2	{ grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3	{ grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4	{ grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5	{ grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6	{ grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-7	{ grid-template-rows: repeat(7, minmax(0, 1fr)); }
.grid-rows-8	{ grid-template-rows: repeat(8, minmax(0, 1fr)); }
.grid-rows-9	{ grid-template-rows: repeat(9, minmax(0, 1fr)); }
.grid-rows-10	{ grid-template-rows: repeat(10, minmax(0, 1fr)); }
.grid-rows-11	{ grid-template-rows: repeat(11, minmax(0, 1fr)); }
.grid-rows-12	{ grid-template-rows: repeat(12, minmax(0, 1fr)); }

.grid-rows-none	{ grid-template-rows: none; }
.grid-rows-subgrid	{ grid-template-rows: subgrid; }

/* Grid Auto Flow*/
.grid-flow-row	{ grid-auto-flow: row; }
.grid-flow-col	{ grid-auto-flow: column; }
.grid-flow-dense	{ grid-auto-flow: dense; }
.grid-flow-row-dense	{ grid-auto-flow: row dense; }
.grid-flow-col-dense	{ grid-auto-flow: column dense; }

/* Grid Auto Columns */
.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); }

/* Grid Auto Rows */
.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); }

/*justify*/
/* Justify Self */
.justify-self-auto	{ justify-self: auto; }
.justify-self-start	{ justify-self: start; }
.justify-self-end	{ justify-self: end; }
.justify-self-center	{ justify-self: center; }
.justify-self-stretch	{ justify-self: stretch; }

/* Justify Items */
.justify-items-start	{ justify-items: start; }
.justify-items-end	{ justify-items: end; }
.justify-items-center	{ justify-items: center; }
.justify-items-stretch	{ justify-items: stretch; }

/* Justify Content */
.justify-normal	{ justify-content: normal; }
.justify-start	{ justify-content: flex-start; }
.justify-end	{ justify-content: flex-end; }
.justify-center	{ justify-content: center; }
.justify-between	{ justify-content: space-between; }
.justify-around	{ justify-content: space-around; }
.justify-evenly	{ justify-content: space-evenly; }
.justify-stretch	{ justify-content: stretch; }



/*order*/
.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-7	{ order: 7; }
.order-8	{ order: 8; }
.order-9	{ order: 9; }
.order-10	{ order: 10; }
.order-11	{ order: 11; }
.order-12	{ order: 12; }
.order-first { order: -9999; }
.order-last	{ order: 9999; }
.order-none	{ order: 0; }

/*
  Sizing and spacing utilities moved to:
  - assets/framework/utilities-sizing.css
  - assets/framework/utilities-spacing.css
*/

/*** TRANSFORMS ***/
/*rotate*/
.rotate-0	{ transform: rotate(0deg); }
.rotate-1	{ transform: rotate(1deg); }
.rotate-2	{ transform: rotate(2deg); }
.rotate-3	{ transform: rotate(3deg); }
.rotate-6	{ transform: rotate(6deg); }
.rotate-12	{ transform: rotate(12deg); }
.rotate-45	{ transform: rotate(45deg); }
.rotate-90	{ transform: rotate(90deg); }
.rotate-180	{ transform: rotate(180deg); }

/*scale*/
.scale-0	{ transform: scale(0); }
.scale-x-0	{ transform: scaleX(0); }
.scale-y-0	{ transform: scaleY(0); }
.scale-50	{ transform: scale(.5); }
.scale-x-50	{ transform: scaleX(.5); }
.scale-y-50	{ transform: scaleY(.5); }
.scale-75	{ transform: scale(.75); }
.scale-x-75	{ transform: scaleX(.75); }
.scale-y-75	{ transform: scaleY(.75); }
.scale-90	{ transform: scale(.9); }
.scale-x-90	{ transform: scaleX(.9); }
.scale-y-90	{ transform: scaleY(.9); }
.scale-95	{ transform: scale(.95); }
.scale-x-95	{ transform: scaleX(.95); }
.scale-y-95	{ transform: scaleY(.95); }
.scale-100	{ transform: scale(1); }
.scale-x-100    { transform: scaleX(1); }
.scale-y-100	{ transform: scaleY(1); }
.scale-105	{ transform: scale(1.05); }
.scale-x-105	{ transform: scaleX(1.05); }
.scale-y-105	{ transform: scaleY(1.05); }
.scale-110	{ transform: scale(1.1); }
.scale-x-110	{ transform: scaleX(1.1); }
.scale-y-110	{ transform: scaleY(1.1); }
.scale-125	{ transform: scale(1.25); }
.scale-x-125	{ transform: scaleX(1.25); }
.scale-y-125	{ transform: scaleY(1.25); }
.scale-150	{ transform: scale(1.5); }
.scale-x-150	{ transform: scaleX(1.5); }
.scale-y-150	{ transform: scaleY(1.5); }

/*skew*/
.skew-x-0	{ transform: skewX(0deg); }
.skew-y-0	{ transform: skewY(0deg); }
.skew-x-1	{ transform: skewX(1deg); }
.skew-y-1	{ transform: skewY(1deg); }
.skew-x-2	{ transform: skewX(2deg); }
.skew-y-2	{ transform: skewY(2deg); }
.skew-x-3	{ transform: skewX(3deg); }
.skew-y-3	{ transform: skewY(3deg); }
.skew-x-6	{ transform: skewX(6deg); }
.skew-y-6	{ transform: skewY(6deg); }
.skew-x-12	{ transform: skewX(12deg); }
.skew-y-12	{ transform: skewY(12deg); }

/*transform origin*/
.origin-center	{ transform-origin: center;}
.origin-top	{ transform-origin: top; }
.origin-top-right	{ transform-origin: top right; }
.origin-right	{ transform-origin: right; }
.origin-bottom-right	{ transform-origin: bottom right; }
.origin-bottom	{ transform-origin: bottom; }
.origin-bottom-left	{ transform-origin: bottom left; }
.origin-left	{ transform-origin: left; }
.origin-top-left { transform-origin: top left; }

/*translate*/
.translate-x-0	{ transform: translateX(0px); }
.translate-y-0	{ transform: translateY(0px); }
.translate-x-px	{ transform: translateX(1px); }
.translate-y-px	{ transform: translateY(1px); }
.translate-x-0-5	{ transform: translateX(0.125rem); }
.translate-y-0-5	{ transform: translateY(0.125rem); }
.translate-x-1	{ transform: translateX(0.25rem); }
.translate-y-1	{ transform: translateY(0.25rem); }
.translate-x-1-5	{ transform: translateX(0.375rem); }
.translate-y-1-5	{ transform: translateY(0.375rem); }
.translate-x-2	{ transform: translateX(0.5rem); }
.translate-y-2	{ transform: translateY(0.5rem); }
.translate-x-2-5	{ transform: translateX(0.625rem); }
.translate-y-2-5	{ transform: translateY(0.625rem); }
.translate-x-3	{ transform: translateX(0.75rem); }
.translate-y-3	{ transform: translateY(0.75rem); }
.translate-x-3-5	{ transform: translateX(0.875rem); }
.translate-y-3-5	{ transform: translateY(0.875rem); }
.translate-x-4	{ transform: translateX(1rem); }
.translate-y-4	{ transform: translateY(1rem); }
.translate-x-5	{ transform: translateX(1.25rem); }
.translate-y-5	{ transform: translateY(1.25rem); }
.translate-x-6	{ transform: translateX(1.5rem); }
.translate-y-6	{ transform: translateY(1.5rem); }
.translate-x-7	{ transform: translateX(1.75rem); }
.translate-y-7	{ transform: translateY(1.75rem); }
.translate-x-8	{ transform: translateX(2rem); }
.translate-y-8	{ transform: translateY(2rem); }
.translate-x-9	{ transform: translateX(2.25rem); }
.translate-y-9	{ transform: translateY(2.25rem); }
.translate-x-10	{ transform: translateX(2.5rem); }
.translate-y-10	{ transform: translateY(2.5rem); }
.translate-x-11	{ transform: translateX(2.75rem); }
.translate-y-11	{ transform: translateY(2.75rem); }
.translate-x-12	{ transform: translateX(3rem); }
.translate-y-12	{ transform: translateY(3rem); }
.translate-x-14	{ transform: translateX(3.5rem); }
.translate-y-14	{ transform: translateY(3.5rem); }
.translate-x-16	{ transform: translateX(4rem); }
.translate-y-16	{ transform: translateY(4rem); }
.translate-x-20	{ transform: translateX(5rem); }
.translate-y-20	{ transform: translateY(5rem); }
.translate-x-24	{ transform: translateX(6rem); }
.translate-y-24	{ transform: translateY(6rem); }
.translate-x-28	{ transform: translateX(7rem); }
.translate-y-28	{ transform: translateY(7rem); }
.translate-x-32	{ transform: translateX(8rem); }
.translate-y-32	{ transform: translateY(8rem); }
.translate-x-36	{ transform: translateX(9rem); }
.translate-y-36	{ transform: translateY(9rem); }
.translate-x-40	{ transform: translateX(10rem); }
.translate-y-40	{ transform: translateY(10rem); }
.translate-x-44	{ transform: translateX(11rem); }
.translate-y-44	{ transform: translateY(11rem); }
.translate-x-48	{ transform: translateX(12rem); }
.translate-y-48	{ transform: translateY(12rem); }
.translate-x-52	{ transform: translateX(13rem); }
.translate-y-52	{ transform: translateY(13rem); }
.translate-x-56	{ transform: translateX(14rem); }
.translate-y-56	{ transform: translateY(14rem); }
.translate-x-60	{ transform: translateX(15rem); }
.translate-y-60	{ transform: translateY(15rem); }
.translate-x-64	{ transform: translateX(16rem); }
.translate-y-64	{ transform: translateY(16rem); }
.translate-x-72	{ transform: translateX(18rem); }
.translate-y-72	{ transform: translateY(18rem); }
.translate-x-80	{ transform: translateX(20rem); }
.translate-y-80	{ transform: translateY(20rem); }
.translate-x-96	{ transform: translateX(24rem); }
.translate-y-96	{ transform: translateY(24rem); }

.translate-x-1_2	{ transform: translateX(50%); }
.translate-x-1_3	{ transform: translateX(33.333333%); }
.translate-x-2_3	{ transform: translateX(66.666667%); }
.translate-x-1_4	{ transform: translateX(25%); }
.translate-x-2_4	{ transform: translateX(50%); }
.translate-x-3_4	{ transform: translateX(75%); }
.translate-x-full, .translate-x_full { transform: translateX(100%); }
.translate-y-1_2	{ transform: translateY(50%); }
.translate-y-1_3	{ transform: translateY(33.333333%); }
.translate-y-2_3	{ transform: translateY(66.666667%); }
.translate-y-1_4	{ transform: translateY(25%); }
.translate-y-2_4	{ transform: translateY(50%); }
.translate-y-3_4	{ transform: translateY(75%); }
.translate-y-full, .translate-y_full { transform: translateY(100%); }

/*** TRANSITIONS AND ANIMATIONS ***/
/*animations*/
.animate-none	{ animation: none; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/*transition delay*/
.delay-0	{ transition-delay: 0s; }
.delay-75	{ transition-delay: 75ms; }
.delay-100	{ transition-delay: 100ms; }
.delay-150	{ transition-delay: 150ms; }
.delay-200	{ transition-delay: 200ms; }
.delay-300	{ transition-delay: 300ms; }
.delay-500	{ transition-delay: 500ms; }
.delay-700	{ transition-delay: 700ms; }
.delay-1000	{ transition-delay: 1000ms; }

/*transition duration*/
.duration-0	    { transition-duration: 0s; }
.duration-75	{ transition-duration: 75ms; }
.duration-100	{ transition-duration: 100ms; }
.duration-150	{ transition-duration: 150ms; }
.duration-200	{ transition-duration: 200ms; }
.duration-300	{ transition-duration: 300ms; }
.duration-500	{ transition-duration: 500ms; }
.duration-700	{ transition-duration: 700ms; }
.duration-1000	{ transition-duration: 1000ms; }

/*transition timing*/
.ease-linear	{ transition-timing-function: linear; }
.ease-in	{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out	{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out	{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }


/*** LINE AND TEXT ***/

/*line clamp*/
/* line clamp */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.line-clamp-6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.line-clamp-none {
    overflow: visible;
    display: block;

    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/*text*/
/* Text Align */
.text-left	{ text-align: left; }
.text-center { text-align: center; }
.text-right	{ text-align: right; }
.text-justify { text-align: justify;}
.text-start	{ text-align: start; }
.text-end	{ text-align: end; }

/* Text Decoration */
.underline	{ text-decoration-line: underline; }
.overline	{ text-decoration-line: overline; }
.line-through	{ text-decoration-line: line-through; }
.no-underline	{ text-decoration-line: none; }

/* Text Decoration Style*/
.decoration-solid	{ text-decoration-style: solid; }
.decoration-double	{ text-decoration-style: double; }
.decoration-dotted	{ text-decoration-style: dotted; }
.decoration-dashed	{ text-decoration-style: dashed; }
.decoration-wavy	{ text-decoration-style: wavy; }

/* Text Transform */
.uppercase	{ text-transform: uppercase; }
.lowercase	{ text-transform: lowercase; }
.capitalize	{ text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Overflow */
.truncate { overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
.text-ellipsis	{ text-overflow: ellipsis; }
.text-clip	{ text-overflow: clip; }

/* Text Wrap */
.text-wrap	{ text-wrap: wrap; }
.text-nowrap	{ text-wrap: nowrap; }
.text-balance	{ text-wrap: balance; }
.text-pretty	{ text-wrap: pretty; }

/* Vertical Align */
.align-baseline	{ vertical-align: baseline; }
.align-top	{ vertical-align: top; }
.align-middle	{ vertical-align: middle; }
.align-bottom	{ vertical-align: bottom; }
.align-text-top	{ vertical-align: text-top; }
.align-text-bottom	{ vertical-align: text-bottom; }
.align-sub	{ vertical-align: sub; }
.align-super	{ vertical-align: super; }



[id] {
  scroll-margin-top: 180px; /* adjust to height of fixed menu */
}

/*
====================================================================
 Tailwind-like utilities (additive)
 --------------------------------------------------------------------
 - These helpers complement what’s already defined above and aim to
   cover frequently used Tailwind classes so templates are easier to
   port. Nothing above is modified; only new utilities are appended.
 - Scope: display, positioning, z-index, overflow, object-fit,
   min/max sizing, typography, accessibility, container and rings.
====================================================================
*/

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

/* Positioning */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Inset utilities (use same spacing scale as padding) */
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.top-1 { top: 0.25rem; }
.right-1 { right: 0.25rem; }
.bottom-1 { bottom: 0.25rem; }
.left-1 { left: 0.25rem; }

.top-2 { top: 0.5rem; }
.right-2 { right: 0.5rem; }
.bottom-2 { bottom: 0.5rem; }
.left-2 { left: 0.5rem; }

.top-3 { top: 0.75rem; }
.right-3 { right: 0.75rem; }
.bottom-3 { bottom: 0.75rem; }
.left-3 { left: 0.75rem; }

.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }

/* Z-index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

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

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* Object-fit and position */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-left { object-position: left; }
.object-center { object-position: center; }
.object-right { object-position: right; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }

/* Min/Max sizing */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-dvh { min-height: 100dvh; }

/* Max widths (approx Tailwind scale) */
.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; }   /* 320px */
.max-w-sm { max-width: 24rem; }   /* 384px */
.max-w-md { max-width: 28rem; }   /* 448px */
.max-w-lg { max-width: 32rem; }   /* 512px */
.max-w-xl { max-width: 36rem; }   /* 576px */
.max-w-2xl { max-width: 42rem; }  /* 672px */
.max-w-3xl { max-width: 48rem; }  /* 768px */
.max-w-4xl { max-width: 56rem; }  /* 896px */
.max-w-5xl { max-width: 64rem; }  /* 1024px */
.max-w-6xl { max-width: 72rem; }  /* 1152px */
.max-w-7xl { max-width: 80rem; }  /* 1280px */
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1440px; }
.max-w-full { max-width: 100%; }

/* Max heights */
.max-h-0 { max-height: 0; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.h-dvh { height: 100dvh; }

/* Typography: font weight and size shortcuts */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

/* Letter spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* List style */
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.list-outside { list-style-position: outside; }

/* Cursor and selection */
.cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; -webkit-user-select: none; }
.select-text { user-select: text; -webkit-user-select: text; }

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Outline/Ring helpers */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.ring-0 { box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
.ring-1 { box-shadow: 0 0 0 1px rgba(59,130,246,.5); }
.ring-2 { box-shadow: 0 0 0 2px rgba(59,130,246,.5); }
.ring-4 { box-shadow: 0 0 0 4px rgba(59,130,246,.5); }
.ring-8 { box-shadow: 0 0 0 8px rgba(59,130,246,.5); }
.ring-offset-2 { outline-offset: 2px; }
.ring-offset-4 { outline-offset: 4px; }

/* Basic color tokens to match common Tailwind defaults */
.bg-transparent { background-color: transparent; }
.text-inherit { color: inherit; }
.text-current { color: currentColor; }
.text-white { color: #fff; }
.text-black { color: #000; }
.fill-current { fill: currentColor; }
.stroke-current { stroke: currentColor; }

/* Responsive utility variants moved to assets/framework/utilities-responsive.css */

/* ------------------------------------------------------------------- */
.-m-0-5 { margin: -0.125rem; }
.-m-1 { margin: -0.25rem; }
.-m-1-5 { margin: -0.375rem; }
.-m-2 { margin: -0.5rem; }
.-m-2-5 { margin: -0.625rem; }
.-m-3 { margin: -0.75rem; }
.-m-3-5 { margin: -0.875rem; }
.-m-4 { margin: -1rem; }
.-m-5 { margin: -1.25rem; }
.-m-6 { margin: -1.5rem; }
.-m-7 { margin: -1.75rem; }
.-m-8 { margin: -2rem; }
.-m-9 { margin: -3rem; }
.-m-10 { margin: -4rem; }
.-m-11 { margin: -5rem; }
.-m-12 { margin: -7.5rem; }

.-mx-0-5 { margin-left: -0.125rem; margin-right: -0.125rem; }
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-1-5 { margin-left: -0.375rem; margin-right: -0.375rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-2-5 { margin-left: -0.625rem; margin-right: -0.625rem; }
.-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; }
.-mx-3-5 { margin-left: -0.875rem; margin-right: -0.875rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mx-7 { margin-left: -1.75rem; margin-right: -1.75rem; }
.-mx-8 { margin-left: -2rem; margin-right: -2rem; }
.-mx-9 { margin-left: -3rem; margin-right: -3rem; }
.-mx-10 { margin-left: -4rem; margin-right: -4rem; }
.-mx-11 { margin-left: -5rem; margin-right: -5rem; }
.-mx-12 { margin-left: -7.5rem; margin-right: -7.5rem; }

.-my-0-5 { margin-top: -0.125rem; margin-bottom: -0.125rem; }
.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.-my-1-5 { margin-top: -0.375rem; margin-bottom: -0.375rem; }
.-my-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.-my-2-5 { margin-top: -0.625rem; margin-bottom: -0.625rem; }
.-my-3 { margin-top: -0.75rem; margin-bottom: -0.75rem; }
.-my-3-5 { margin-top: -0.875rem; margin-bottom: -0.875rem; }
.-my-4 { margin-top: -1rem; margin-bottom: -1rem; }
.-my-5 { margin-top: -1.25rem; margin-bottom: -1.25rem; }
.-my-6 { margin-top: -1.5rem; margin-bottom: -1.5rem; }
.-my-7 { margin-top: -1.75rem; margin-bottom: -1.75rem; }
.-my-8 { margin-top: -2rem; margin-bottom: -2rem; }
.-my-9 { margin-top: -3rem; margin-bottom: -3rem; }
.-my-10 { margin-top: -4rem; margin-bottom: -4rem; }
.-my-11 { margin-top: -5rem; margin-bottom: -5rem; }
.-my-12 { margin-top: -7.5rem; margin-bottom: -7.5rem; }

.-mt-0-5 { margin-top: -0.125rem; }
.-mr-0-5 { margin-right: -0.125rem; }
.-mb-0-5 { margin-bottom: -0.125rem; }
.-ml-0-5 { margin-left: -0.125rem; }

.-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; }
.-mr-2 { margin-right: -0.5rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-ml-2 { margin-left: -0.5rem; }

.-mt-3 { margin-top: -0.75rem; }
.-mr-3 { margin-right: -0.75rem; }
.-mb-3 { margin-bottom: -0.75rem; }
.-ml-3 { margin-left: -0.75rem; }

.-mt-4 { margin-top: -1rem; }
.-mr-4 { margin-right: -1rem; }
.-mb-4 { margin-bottom: -1rem; }
.-ml-4 { margin-left: -1rem; }

.-mt-5 { margin-top: -1.25rem; }
.-mr-5 { margin-right: -1.25rem; }
.-mb-5 { margin-bottom: -1.25rem; }
.-ml-5 { margin-left: -1.25rem; }

.-mt-6 { margin-top: -1.5rem; }
.-mr-6 { margin-right: -1.5rem; }
.-mb-6 { margin-bottom: -1.5rem; }
.-ml-6 { margin-left: -1.5rem; }

.-mt-7 { margin-top: -1.75rem; }
.-mr-7 { margin-right: -1.75rem; }
.-mb-7 { margin-bottom: -1.75rem; }
.-ml-7 { margin-left: -1.75rem; }

.-mt-8 { margin-top: -2rem; }
.-mr-8 { margin-right: -2rem; }
.-mb-8 { margin-bottom: -2rem; }
.-ml-8 { margin-left: -2rem; }

.-mt-9 { margin-top: -3rem; }
.-mr-9 { margin-right: -3rem; }
.-mb-9 { margin-bottom: -3rem; }
.-ml-9 { margin-left: -3rem; }

.-mt-10 { margin-top: -4rem; }
.-mr-10 { margin-right: -4rem; }
.-mb-10 { margin-bottom: -4rem; }
.-ml-10 { margin-left: -4rem; }

.-mt-11 { margin-top: -5rem; }
.-mr-11 { margin-right: -5rem; }
.-mb-11 { margin-bottom: -5rem; }
.-ml-11 { margin-left: -5rem; }

.-mt-12 { margin-top: -7.5rem; }
.-mr-12 { margin-right: -7.5rem; }
.-mb-12 { margin-bottom: -7.5rem; }
.-ml-12 { margin-left: -7.5rem; }

/* ------------------------------------------------------------------
   Extended insets (5–12) + percentage helpers
------------------------------------------------------------------- */
.top-5 { top: 1.25rem; } .right-5 { right: 1.25rem; } .bottom-5 { bottom: 1.25rem; } .left-5 { left: 1.25rem; }
.top-6 { top: 1.5rem; }  .right-6 { right: 1.5rem; }  .bottom-6 { bottom: 1.5rem; }  .left-6 { left: 1.5rem; }
.top-7 { top: 1.75rem; } .right-7 { right: 1.75rem; } .bottom-7 { bottom: 1.75rem; } .left-7 { left: 1.75rem; }
.top-8 { top: 2rem; }    .right-8 { right: 2rem; }    .bottom-8 { bottom: 2rem; }    .left-8 { left: 2rem; }
.top-9 { top: 2.25rem; } .right-9 { right: 2.25rem; } .bottom-9 { bottom: 2.25rem; } .left-9 { left: 2.25rem; }
.top-10 { top: 2.5rem; } .right-10 { right: 2.5rem; } .bottom-10 { bottom: 2.5rem; } .left-10 { left: 2.5rem; }
.top-11 { top: 2.75rem; } .right-11 { right: 2.75rem; } .bottom-11 { bottom: 2.75rem; } .left-11 { left: 2.75rem; }
.top-12 { top: 3rem; }   .right-12 { right: 3rem; }   .bottom-12 { bottom: 3rem; }   .left-12 { left: 3rem; }

.inset-1_2 { inset: 50%; }
.inset-1_3 { inset: 33.333333%; }
.inset-2_3 { inset: 66.666667%; }
.inset-1_4 { inset: 25%; }
.inset-3_4 { inset: 75%; }

.inset-x-1_2 { left: 50%; right: 50%; }
.inset-x-1_3 { left: 33.333333%; right: 33.333333%; }
.inset-x-2_3 { left: 66.666667%; right: 66.666667%; }
.inset-x-1_4 { left: 25%; right: 25%; }
.inset-x-3_4 { left: 75%; right: 75%; }

.inset-y-1_2 { top: 50%; bottom: 50%; }
.inset-y-1_3 { top: 33.333333%; bottom: 33.333333%; }
.inset-y-2_3 { top: 66.666667%; bottom: 66.666667%; }
.inset-y-1_4 { top: 25%; bottom: 25%; }
.inset-y-3_4 { top: 75%; bottom: 75%; }

.top-1_2 { top: 50%; } .right-1_2 { right: 50%; } .bottom-1_2 { bottom: 50%; } .left-1_2 { left: 50%; }
.top-1_3 { top: 33.333333%; } .right-1_3 { right: 33.333333%; } .bottom-1_3 { bottom: 33.333333%; } .left-1_3 { left: 33.333333%; }
.top-2_3 { top: 66.666667%; } .right-2_3 { right: 66.666667%; } .bottom-2_3 { bottom: 66.666667%; } .left-2_3 { left: 66.666667%; }
.top-1_4 { top: 25%; } .right-1_4 { right: 25%; } .bottom-1_4 { bottom: 25%; } .left-1_4 { left: 25%; }
.top-3_4 { top: 75%; } .right-3_4 { right: 75%; } .bottom-3_4 { bottom: 75%; } .left-3_4 { left: 75%; }

/* ------------------------------------------------------------------
   Responsive foundation (mobile-first + extended breakpoints)
------------------------------------------------------------------- */
:root {
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1488px;
  --container-inline: clamp(1.5rem, 0vw, 0rem);
}

/* Override container to be fluid-first and safer on small screens */
.container {
  width: min(100%, var(--bp-2xl));
  margin-left: auto; margin-right: auto;
  padding-left: var(--container-inline); padding-right: var(--container-inline);
}
.container-narrow {
  width: min(100%, 72rem);
  margin-left: auto; margin-right: auto;
  padding-left: var(--container-inline); padding-right: var(--container-inline);
}
.container-wide {
  width: min(100%, 90rem);
  margin-left: auto; margin-right: auto;
  padding-left: var(--container-inline); padding-right: var(--container-inline);
}
.container-fluid {
  width: 100%;
  padding-left: var(--container-inline); padding-right: var(--container-inline);
}

/* Fluid typography helpers */
.text-fluid-sm { font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); line-height: 1.5; }
.text-fluid-base { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.125rem); line-height: 1.55; }
.text-fluid-lg { font-size: clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem); line-height: 1.45; }
.text-fluid-xl { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 2rem); line-height: 1.35; }
.text-fluid-2xl { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.2; }

/* Auto-fit grid helpers for card layouts */
.grid-auto-fit-160 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.grid-auto-fit-200 { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.grid-auto-fit-240 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid-auto-fit-280 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.grid-auto-fit-320 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* Safe-area helpers (notches / dynamic islands) */
.pt-safe { padding-top: max(1rem, env(safe-area-inset-top)); }
.pr-safe { padding-right: max(1rem, env(safe-area-inset-right)); }
.pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.pl-safe { padding-left: max(1rem, env(safe-area-inset-left)); }


/* Responsive utility variants moved to assets/framework/utilities-responsive.css */