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

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

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

/* ==========================================================================
   Pure CSS Flex & Grid Utilities (with broad browser support)
   - Includes vendor prefixes for older browsers
   - Provides sensible fallbacks where possible
   - No JS, no frameworks
   ========================================================================== */

/* -------- Base / Reset (minimal) -------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

/* ==========================================================================
   FLEXBOX
   ========================================================================== */

/* Display */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* Direction */
.flex-row {
  /* old webkit box is always horizontal; emulate row */
  -webkit-box-orient: horizontal; -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-row-reverse {
  -webkit-box-orient: horizontal; -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-col {
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-col-reverse {
  -webkit-box-orient: vertical; -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/* Wrapping */
.flex-wrap     { -ms-flex-wrap: wrap;     flex-wrap: wrap; }
.flex-nowrap   { -ms-flex-wrap: nowrap;   flex-wrap: nowrap; }
.flex-wrap-rev { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

/* Justify Content */
.justify-start   { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.justify-end     { -webkit-box-pack: end;   -ms-flex-pack: end;   justify-content: flex-end; }
.justify-center  { -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }
.justify-between { -ms-flex-pack: justify;  justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

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

/* Align Content (multi-line) */
.content-start   { -ms-flex-line-pack: start;   align-content: flex-start; }
.content-end     { -ms-flex-line-pack: end;     align-content: flex-end; }
.content-center  { -ms-flex-line-pack: center;  align-content: center; }
.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
.content-around  { align-content: space-around; }
.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }

/* Align Self (per item) */
.self-auto     { -ms-flex-item-align: auto;     align-self: auto; }
.self-start    { -ms-flex-item-align: start;    align-self: flex-start; }
.self-end      { -ms-flex-item-align: end;      align-self: flex-end; }
.self-center   { -ms-flex-item-align: center;   align-self: center; }
.self-stretch  { -ms-flex-item-align: stretch;  align-self: stretch; }
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }

/* Flex sizing */
.flex-1   { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; }
.flex-auto{ -ms-flex: 1 1 auto;  flex: 1 1 auto; }
.flex-initial { -ms-flex: 0 1 auto; flex: 0 1 auto; }
.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; }

.grow     { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
.grow-0   { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }

.shrink   { -ms-flex-negative: 1; flex-shrink: 1; }
.shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; }

/* Basis (common sizes) */
.basis-0   { -ms-flex-preferred-size: 0;   flex-basis: 0; }
.basis-auto{ -ms-flex-preferred-size: auto;flex-basis: auto; }
.basis-1-2 { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
.basis-1-3 { -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; }
.basis-2-3 { -ms-flex-preferred-size: 66.6667%; flex-basis: 66.6667%; }
.basis-1-4 { -ms-flex-preferred-size: 25%; flex-basis: 25%; }
.basis-3-4 { -ms-flex-preferred-size: 75%; flex-basis: 75%; }

/* Order */
.order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -9999; order: -9999; }
.order-last  { -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; }
.order-0     { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
.order-1     { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.order-2     { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
.order-3     { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
.order-4     { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }

/* Gaps for FLEX (margin-based fallback for older browsers) */
/* Horizontal gap (when using .flex-row or row wrap) */
.gap-x-0  > * + * { margin-left: 0; }
.gap-x-4  > * + * { margin-left: 1rem; }
.gap-x-8  > * + * { margin-left: 2rem; }
.gap-x-12 > * + * { margin-left: 3rem; }

/* Vertical gap (when using .flex-col) */
.flex-col.gap-y-0  > * + * { margin-top: 0; }
.flex-col.gap-y-2  > * + * { margin-top: .5rem; }
.flex-col.gap-y-4  > * + * { margin-top: 1rem; }
.flex-col.gap-y-8  > * + * { margin-top: 2rem; }

/* ==========================================================================
   GRID
   ========================================================================== */

/* Modern Grid */
.grid {
  display: -ms-grid; /* IE 10/11 (limited) */
  display: grid;
}

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

/* Grid Template Rows (1–6) */
.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)); }

/* 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; }

/* Gap (modern) */
.gap-0  { gap: 0; }
.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-7  { gap: 1.75rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }

.gap-x-2 { column-gap: .5rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }

.gap-y-2 { row-gap: .5rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-6 { row-gap: 1.5rem; }

/* Item placement */
.place-content-center { place-content: center; }
.place-content-between { place-content: space-between; }
.place-items-center { place-items: center; }
.place-items-start  { place-items: start; }
.place-items-end    { place-items: end; }

.justify-items-start  { justify-items: start; }
.justify-items-center { justify-items: center; }
.justify-items-end    { justify-items: end; }
.justify-items-stretch{ justify-items: stretch; }

.content-start   { align-content: start; }
.content-center  { align-content: center; }
.content-end     { align-content: end; }
.content-stretch { align-content: stretch; }

/* Grid item controls */
.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; }

.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; }

.justify-self-start  { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end    { justify-self: end; }
.justify-self-stretch{ justify-self: stretch; }

.align-self-start  { align-self: start; }
.align-self-center { align-self: center; }
.align-self-end    { align-self: end; }
.align-self-stretch{ align-self: stretch; }

/* ==========================================================================
   GRID FALLBACKS FOR VERY OLD BROWSERS (no CSS Grid support)
   Using @supports to swap .grid to flexbox with percentage widths.
   ========================================================================== */
@supports not (display: grid) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  /* Column count fallbacks */
  .grid-cols-1  > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .grid-cols-2  > * { -ms-flex: 0 0 50%;  flex: 0 0 50%;  max-width: 50%; }
  .grid-cols-3  > * { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; }
  .grid-cols-4  > * { -ms-flex: 0 0 25%;  flex: 0 0 25%;  max-width: 25%; }
  .grid-cols-5  > * { -ms-flex: 0 0 20%;  flex: 0 0 20%;  max-width: 20%; }
  .grid-cols-6  > * { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; }
  .grid-cols-7  > * { -ms-flex: 0 0 14.2857%; flex: 0 0 14.2857%; max-width: 14.2857%; }
  .grid-cols-8  > * { -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; max-width: 12.5%; }
  .grid-cols-9  > * { -ms-flex: 0 0 11.1111%; flex: 0 0 11.1111%; max-width: 11.1111%; }
  .grid-cols-10 > * { -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; }
  .grid-cols-11 > * { -ms-flex: 0 0 9.0909%; flex: 0 0 9.0909%; max-width: 9.0909%; }
  .grid-cols-12 > * { -ms-flex: 0 0 8.3333%; flex: 0 0 8.3333%; max-width: 8.3333%; }

  /* Gap fallback using margins (apply to child items) */
  .grid.gap-2   { margin: -.25rem; }
  .grid.gap-4   { margin: -.5rem; }
  .grid.gap-6   { margin: -.75rem; }
  .grid.gap-8   { margin: -1rem; }
  .grid.gap-12  { margin: -1.5rem; }

  .grid.gap-2   > * { padding: .25rem; }
  .grid.gap-4   > * { padding: .5rem; }
  .grid.gap-6   > * { padding: .75rem; }
  .grid.gap-8   > * { padding: 1rem; }
  .grid.gap-12  > * { padding: 1.5rem; }
}

/* ==========================================================================
   UTILITY HELPERS (optional but handy)
   ========================================================================== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }


/* Hide visually but keep accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.flex-scroll {
  display: flex;
  align-items: center;
  overflow-y: auto;
  /* background: linear-gradient(to right, rgb(253 0 0 / 0%) 0, rgb(255 1 1 / 0%) 80%, #e7e7e7 100%) */
}

.flex-scroll > * {
  flex: 0 0 auto;
}
/* 
.flex-scroll::-webkit-scrollbar {
  display: none;
}

.no-scroll::-webkit-scrollbar {
  display: none;
} */


.bg-white {
    background: rgb(255, 255, 255);
}

.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;
}

.counter-with-brackets:before {
  content: "(";
}

.counter-with-brackets:after {
  content: ")";
}

.scrollbox {
	overflow: auto;
	/* max-width: 400px; */
	max-height: 200px;
	/* margin: 50px auto; */
  
  background-image: 
	
    /* Shadows */ 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),
  
/* Shadow covers */ 
    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   

  background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

.scrollbox ul {
  /* max-width: 200%; */
  display: flex;
}
.scrollbox li {
  white-space: nowrap;
}