@kompasid/lit-web-components 0.9.27 → 0.9.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts +1 -1
  2. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js +36 -24
  3. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map +1 -1
  4. package/dist/tailwind/tailwind.js +19 -0
  5. package/dist/tailwind/tailwind.js.map +1 -1
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/package.json +1 -1
  8. package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts +37 -26
  9. package/src/components/kompasid-menu-side-bar/readme.md +1 -1
  10. package/tailwind/tailwind.ts +19 -0
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts CHANGED
@@ -12,7 +12,7 @@ export declare class KompasMenuSideBar extends LitElement {
12
12
  dataExternal: DataExternalLink[];
13
13
  dataSidebar: DataSideBarLink;
14
14
  showNavBar: boolean;
15
- expandedSlug: string | null;
15
+ expandedSlugs: string[];
16
16
  hasSlotContent: boolean;
17
17
  connectedCallback(): Promise<void>;
18
18
  firstUpdated(): void;
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js CHANGED
@@ -27,7 +27,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
27
27
  lainnya: [],
28
28
  };
29
29
  this.showNavBar = false;
30
- this.expandedSlug = null;
30
+ this.expandedSlugs = [];
31
31
  this.hasSlotContent = false;
32
32
  }
33
33
  // Fetch data when the component is connected to the DOM
@@ -107,7 +107,15 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
107
107
  return Array.isArray(item.children) && item.children.length > 0;
108
108
  }
109
109
  toggleChildren(item) {
110
- this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
110
+ const { slug } = item;
111
+ if (this.expandedSlugs.includes(slug)) {
112
+ // close it
113
+ this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug);
114
+ }
115
+ else {
116
+ // open it
117
+ this.expandedSlugs = [...this.expandedSlugs, slug];
118
+ }
111
119
  }
112
120
  hasBundleAccess(item) {
113
121
  if (item.name === 'Kompas One')
@@ -148,10 +156,10 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
148
156
  >
149
157
  <!-- Label / Link area -->
150
158
  <div
151
- class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
159
+ class="flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer"
152
160
  >
153
161
  <div
154
- class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
162
+ class="w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3"
155
163
  role="button"
156
164
  tabindex="0"
157
165
  @click=${(e) => this.rubricClicked(item, e)}
@@ -171,7 +179,9 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
171
179
  />
172
180
  </div>`
173
181
  : ''}
174
- <span class="font-bold">${decodeSpecialChars(item.name)}</span>
182
+ <span class="font-bold text-grey-600 text-base"
183
+ >${decodeSpecialChars(item.name)}</span
184
+ >
175
185
  ${timedContent((_a = item.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = item.redDot.end) !== null && _b !== void 0 ? _b : '')
176
186
  ? html `<span
177
187
  class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
@@ -182,17 +192,17 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
182
192
  ${hasChild
183
193
  ? html `
184
194
  <span
185
- class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
195
+ class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400"
186
196
  @click=${(e) => {
187
197
  e.stopPropagation();
188
- this.toggleChildren(item); // 🚨 chevron khusus toggle
198
+ this.toggleChildren(item); // chevron khusus toggle
189
199
  }}
190
200
  @keydown=${(e) => {
191
201
  if (e.key === 'Enter')
192
202
  this.toggleChildren(item);
193
203
  }}
194
204
  >
195
- ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlug === item.slug
205
+ ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlugs.includes(item.slug)
196
206
  ? 'chevron-up'
197
207
  : 'chevron-down', 12, 12))}
198
208
  </span>
@@ -202,7 +212,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
202
212
  </div>
203
213
 
204
214
  <!-- Children list -->
205
- ${hasChild && this.expandedSlug === item.slug
215
+ ${hasChild && this.expandedSlugs.includes(item.slug)
206
216
  ? html `<div
207
217
  class="${padClass.includes('px-6')
208
218
  ? 'pt-1 pb-2 space-y-1 text-black'
@@ -214,7 +224,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
214
224
  <div
215
225
  role="button"
216
226
  tabindex="0"
217
- class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
227
+ class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
218
228
  @click=${() => this.rubricClicked(child)}
219
229
  @keydown=${(e) => {
220
230
  if (e.key === 'Enter')
@@ -222,7 +232,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
222
232
  }}
223
233
  >
224
234
  <div
225
- class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8"
235
+ class="w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2"
226
236
  >
227
237
  ${decodeSpecialChars(child.name)}
228
238
  ${timedContent((_a = child.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = child.redDot.end) !== null && _b !== void 0 ? _b : '')
@@ -230,12 +240,13 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
230
240
  class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
231
241
  ></span>`
232
242
  : ''}
233
- </div>
234
- <span class="ml-auto text-grey-400">
235
- ${child.external
243
+
244
+ <span class="absolute right-0 text-grey-400">
245
+ ${child.external
236
246
  ? unsafeSVG(getFontAwesomeIcon('fas', 'external-link', 16, 16))
237
247
  : ''}
238
- </span>
248
+ </span>
249
+ </div>
239
250
  </div>
240
251
  `;
241
252
  })}
@@ -249,7 +260,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
249
260
  return null; // skip if empty data
250
261
  return html `
251
262
  ${title
252
- ? html `<span class="text-sm text-grey-400 ${padClass} font-normal"
263
+ ? html `<span class="text-sm text-grey-400 ${padClass} font-normal mx-2"
253
264
  >${title}</span
254
265
  >`
255
266
  : null}
@@ -346,7 +357,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
346
357
  <span
347
358
  role="button"
348
359
  tabindex="0"
349
- class="font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
360
+ class="hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
350
361
  @click=${this.closeNavSidebar}
351
362
  @keydown=${(e) => {
352
363
  if (e.key === 'Enter')
@@ -365,11 +376,12 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
365
376
  ${item.icon &&
366
377
  Array.isArray(item.icon) &&
367
378
  item.icon.length >= 2
368
- ? html `<div class="flex mr-2 text-brand-1">
379
+ ? html `<div class="flex mr-2 text-[#666666]">
369
380
  ${unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))}
370
381
  </div>`
371
382
  : ''}
372
- <span class="font-sans text-xs text-[#666666]"
383
+ <span
384
+ class="font-sans font-normal text-xs hover:text-[#222222] text-[#666666]"
373
385
  >${item.name}</span
374
386
  >
375
387
  ${item.isNew
@@ -384,25 +396,25 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
384
396
  : null}
385
397
 
386
398
  <!-- Bundle Section -->
387
- ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}
399
+ ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}
388
400
  ${this.dataSidebar.bundles.length > 0
389
401
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
390
402
  : null}
391
403
 
392
404
  <!-- Feature Section -->
393
- ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}
405
+ ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}
394
406
  ${this.dataSidebar.feature.length > 0
395
407
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
396
408
  : null}
397
409
 
398
410
  <!-- Category (Redaksional) -->
399
- ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-6')}
411
+ ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-4')}
400
412
  ${this.dataSidebar.category.length > 0
401
413
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
402
414
  : null}
403
415
 
404
416
  <!-- Others (Lainnya) -->
405
- ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}
417
+ ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}
406
418
  </div>
407
419
  </nav>
408
420
  `;
@@ -464,7 +476,7 @@ __decorate([
464
476
  ], KompasMenuSideBar.prototype, "showNavBar", void 0);
465
477
  __decorate([
466
478
  state()
467
- ], KompasMenuSideBar.prototype, "expandedSlug", void 0);
479
+ ], KompasMenuSideBar.prototype, "expandedSlugs", void 0);
468
480
  KompasMenuSideBar = __decorate([
469
481
  customElement('kompasid-menu-side-bar')
470
482
  ], KompasMenuSideBar);
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE1D,qCAAqC;AACrC,OAAO,EACL,kBAAkB,EAClB,gBAAgB,GAIjB,MAAM,4BAA4B,CAAA;AAG5B,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAsCL;;;WAGG;QAE0B,WAAM,GAAG,KAAK,CAAA;QACd,qBAAgB,GAAG,KAAK,CAAA;QACzB,wBAAmB,GAAG,EAAE,CAAA;QAE3C,iBAAY,GAAuB,EAAE,CAAA;QACrC,gBAAW,GAAoB;YACtC,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;SACZ,CAAA;QACQ,eAAU,GAAG,KAAK,CAAA;QAClB,iBAAY,GAAkB,IAAI,CAAA;QAC3C,mBAAc,GAAG,KAAK,CAAA;IAoaxB,CAAC;IAlaC,wDAAwD;IACxD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAA;IACvB,CAAC;IAED,YAAY;;QACV,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAA;QACnD,MAAM,aAAa,GAAG,IAAK,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAE5D,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAA;IAChD,CAAC;IAEO,mBAAmB;;QACzB,OAAO,MAAA,IAAI,CAAC,mBAAmB,0CAC3B,KAAK,CAAC,GAAG,EACV,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,mBAAmB;;QACzB,OAAO,MAAA,IAAI,CAAC,mBAAmB,0CAC3B,KAAK,CAAC,GAAG,EACV,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,aAAa,CAAC,OAA0B;QAC9C,OAAO,OAAO;aACX,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;aACrB,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,OAAO;oBACL,GAAG,CAAC;oBACJ,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;iBACvD,CAAA;aACF;YACD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,OAAO;oBACL,GAAG,CAAC;oBACJ,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;iBACvD,CAAA;aACF;YACD,OAAO,CAAC,CAAA;QACV,CAAC,CAAC,CAAA;IACN,CAAC;IAED,kDAAkD;IAC1C,KAAK,CAAC,QAAQ;QACpB,IAAI;YACF,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAC1C,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,CAAC;gBACzC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC;aACxC,CAAC,CAAA;YAEF,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;YAC3B,IAAI,CAAC,WAAW,GAAG;gBACjB,GAAG,MAAM;gBACT,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC;aAC5C,CAAA;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAA;SAC5C;IACH,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAA;IACpC,CAAC;IAEO,aAAa,CAAC,IAAqB,EAAE,KAAa;QACxD,IAAI,KAAK;YAAE,KAAK,CAAC,eAAe,EAAE,CAAA;QAElC,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;QAEhD,wDAAwD;QACxD,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,EAAE;YAC5B,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YAChC,OAAM;SACP;QAED,8BAA8B;QAC9B,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;SAC1B;IACH,CAAC;IAEO,WAAW,CAAC,IAAqB;QACvC,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IACjE,CAAC;IAEO,cAAc,CAAC,IAAqB;QAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAA;IACxE,CAAC;IAEO,eAAe,CAAC,IAAqB;QAC3C,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY;YAAE,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAA;QACjE,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY;YAAE,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAA;QACjE,OAAO,IAAI,CAAA,CAAC,mCAAmC;IACjD,CAAC;IAEO,kBAAkB,CAAC,IAAqB;;QAC9C,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAA;QAE1C,+CAA+C;QAC/C,IAAI,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC7B,kDAAkD;YAClD,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC5C,OAAO,KAAK,CAAA;aACb;YACD,OAAO,IAAI,CAAA,CAAC,uBAAuB;SACpC;QAED,2DAA2D;QAC3D,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAC1B,OAAO,IAAI,CAAA;SACZ;QAED,sEAAsE;QACtE,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YAC3C,OAAO,KAAK,CAAA;SACb;QAED,0CAA0C;QAC1C,OAAO,KAAK,CAAA;IACd,CAAC;IAEO,UAAU,CAAC,IAAS,EAAE,QAAgB;;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA;;;yEAG0D,QAAQ;;;;;;;;;;uBAU1D,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;yBACvC,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;QACpD,CAAC;;gBAEC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;6BAEO,IAAI,CAAC,OAAO;6BACZ,IAAI,CAAC,IAAI;;;;;yBAKb;YACT,CAAC,CAAC,EAAE;wCACoB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrD,YAAY,CAAC,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,GAAG,mCAAI,EAAE,CAAC;YAC5D,CAAC,CAAC,IAAI,CAAA;;2BAEK;YACX,CAAC,CAAC,EAAE;;;cAGN,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;;;6BAGS,CAAC,CAAQ,EAAE,EAAE;gBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA,CAAC,2BAA2B;YACvD,CAAC;+BACU,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;YAClD,CAAC;;sBAEC,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI;gBAC7B,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,cAAc,EAClB,EAAE,EACF,EAAE,CACH,CACF;;iBAEJ;YACH,CAAC,CAAC,IAAI;;;;;UAKV,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI;YAC3C,CAAC,CAAC,IAAI,CAAA;uBACO,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAChC,CAAC,CAAC,gCAAgC;gBAClC,CAAC,CAAC,sCAAsC;;gBAExC,MAAM,CACN,MAAA,IAAI,CAAC,QAAQ,mCAAI,EAAE,EACnB,CAAC,CAAkB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAC9B,CAAC,KAAsB,EAAE,EAAE;;gBAAC,OAAA,IAAI,CAAA;;;;;6BAKnB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;+BAC7B,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;wBAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;gBACrD,CAAC;;;;;wBAKG,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;wBAC9B,YAAY,CACZ,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,EACxB,MAAA,KAAK,CAAC,MAAM,CAAC,GAAG,mCAAI,EAAE,CACvB;oBACC,CAAC,CAAC,IAAI,CAAA;;mCAEK;oBACX,CAAC,CAAC,EAAE;;;wBAGJ,KAAK,CAAC,QAAQ;oBACd,CAAC,CAAC,SAAS,CACP,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,CACnD;oBACH,CAAC,CAAC,EAAE;;;iBAGX,CAAA;aAAA,CACF;mBACI;YACT,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB,EAAE,KAAY,EAAE,QAAgB;QACxE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA,CAAC,qBAAqB;QACnE,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA,sCAAsC,QAAQ;eAC7C,KAAK;YACR;YACJ,CAAC,CAAC,IAAI;QACN,MAAM,CACN,KAAK,EACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CACxC;KACF,CAAA;IACH,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAA;IACH,CAAC;IAEO,eAAe;QACrB,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;iBAME,IAAI,CAAC,gBAAgB;mBACnB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;;;UAGC,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;;yCAEyB,IAAI,CAAC,MAAM;gBAClC,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,cAAc;;kBAEhB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;;;iFAGmB,IAAI;iBAClE,MAAM;gBACP,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,cAAc;;;;aAIrB;YACH,CAAC,CAAC,EAAE;;;;gBAIE,IAAI,CAAC,UAAU;YACrB,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,QAAQ;;;;;mBAKD,IAAI,CAAC,eAAe;qBAClB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4Bc,IAAI,CAAC,eAAe;2BAClB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;;kBAEC,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;cAMxD,MAAM,CACN,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;2BACC,IAAI,CAAC,GAAG;;sBAEb,IAAI,CAAC,IAAI;YACX,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA;4BACA,SAAS,CACT,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC/C;+BACI;YACT,CAAC,CAAC,EAAE;;yBAED,IAAI,CAAC,IAAI;;sBAEZ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,WAAW,EAAE,SAAS;YACvD,CAAC,CAAC,EAAE;;;eAGX,CACF;;YAED,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAClB,aAAa,EACb,IAAI,CAAC,WAAW,CAAC,QAAQ,EACzB,MAAM,CACP;YACC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;;;KAGtE,CAAA;IACH,CAAC;;AA1dM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;IACD,QAAQ;CACT,CAAA;AAO4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAe;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAAyB;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAyB;AAE3C;IAAR,KAAK,EAAE;uDAAsC;AACrC;IAAR,KAAK,EAAE;sDAKP;AACQ;IAAR,KAAK,EAAE;qDAAmB;AAClB;IAAR,KAAK,EAAE;uDAAmC;AAvDhC,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CA4d7B;SA5dY,iBAAiB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\n// Importing the data fetch functions\nimport {\n fetchExternalLinks,\n fetchSidebarData,\n DataExternalLink,\n DataSideBarLink,\n DataSideBarItem,\n} from './SidebarDataController.js'\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n static styles = [\n css`\n .slide-side-enter-active,\n .slide-side-leave-active {\n transition: all 0.3s ease-out;\n }\n .slide-side-enter,\n .slide-side-leave-to {\n transform: translateX(-100%);\n }\n /* end: transisi buat sidebar */\n .nuxt-link-exact-active {\n @apply text-brand-1;\n }\n .menu-menu-sidebar {\n z-index: 99999;\n }\n /* Force scrollbar to always show (for debugging) */\n .menu-menu-sidebar::-webkit-scrollbar {\n width: 4px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n /* existing styles */\n `,\n TWStyles,\n ]\n\n /**\n * Props\n * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n */\n\n @property({ type: Boolean }) isDark = false\n @property({ type: Boolean }) isProductionMode = false\n @property({ type: String }) subscriptionPackage = ''\n\n @state() dataExternal: DataExternalLink[] = []\n @state() dataSidebar: DataSideBarLink = {\n bundles: [],\n feature: [],\n category: [],\n lainnya: [],\n }\n @state() showNavBar = false\n @state() expandedSlug: string | null = null\n hasSlotContent = false\n\n // Fetch data when the component is connected to the DOM\n async connectedCallback() {\n super.connectedCallback()\n await this.loadData()\n }\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector('slot')\n const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n this.hasSlotContent = assignedNodes.length > 0\n }\n\n private hasKompasOnePackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-one'))\n }\n\n private hasKompasProPackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-pro'))\n }\n\n private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n return bundles\n .filter(b => b.isShow)\n .map(b => {\n if (b.name === 'Kompas One') {\n return {\n ...b,\n children: this.hasKompasOnePackage() ? b.children : [],\n }\n }\n if (b.name === 'Kompas Pro') {\n return {\n ...b,\n children: this.hasKompasProPackage() ? b.children : [],\n }\n }\n return b\n })\n }\n\n // Function to load the data using async API calls\n private async loadData() {\n try {\n const [extData, sbData] = await Promise.all([\n fetchExternalLinks(this.isProductionMode),\n fetchSidebarData(this.isProductionMode),\n ])\n\n this.dataExternal = extData\n this.dataSidebar = {\n ...sbData,\n bundles: this.filterBundles(sbData.bundles),\n }\n } catch (error) {\n console.error('Error loading data:', error)\n }\n }\n\n private toggleNavSidebar(e: Event) {\n e.stopPropagation()\n this.showNavBar = !this.showNavBar\n }\n\n private rubricClicked(item: DataSideBarItem, event?: Event): void {\n if (event) event.stopPropagation()\n\n const isDropdown = this.shouldOpenDropdown(item)\n\n // Kalau bukan dropdown tapi ada href, langsung redirect\n if (!isDropdown && item.href) {\n window.location.href = item.href\n return\n }\n\n // Kalau dropdown, toggle anak\n if (isDropdown) {\n this.toggleChildren(item)\n }\n }\n\n private hasChildren(item: DataSideBarItem): boolean {\n return Array.isArray(item.children) && item.children.length > 0\n }\n\n private toggleChildren(item: DataSideBarItem) {\n this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n }\n\n private hasBundleAccess(item: DataSideBarItem): boolean {\n if (item.name === 'Kompas One') return this.hasKompasOnePackage()\n if (item.name === 'Kompas Pro') return this.hasKompasProPackage()\n return true // default non-subscription bundles\n }\n\n private shouldOpenDropdown(item: DataSideBarItem): boolean {\n const hasChild = item.children?.length > 0\n\n // 🔹 1. Parent dengan children + toExpand true\n if (hasChild && item.toExpand) {\n // kalau user nggak punya akses → redirect ke href\n if (!this.hasBundleAccess(item) && item.href) {\n return false\n }\n return true // punya akses → expand\n }\n\n // 🔹 2. Parent dengan children + tidak ada href → dropdown\n if (hasChild && !item.href) {\n return true\n }\n\n // 🔹 3. Parent dengan children + toExpand false + ada href → redirect\n if (hasChild && !item.toExpand && item.href) {\n return false\n }\n\n // 🔹 4. Item biasa tanpa child → redirect\n return false\n }\n\n private renderItem(item: any, padClass: string) {\n const hasChild = this.hasChildren(item)\n\n return html`\n <div class=\"w-full font-sans text-black\">\n <div\n class=\"flex items-center justify-between text-sm font-medium ${padClass}\"\n >\n <!-- Label / Link area -->\n <div\n class=\"flex items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3\"\n role=\"button\"\n tabindex=\"0\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(item, e)\n }}\n >\n ${item.iconSrc\n ? html`<div class=\"flex\">\n <img\n src=\"${item.iconSrc}\"\n alt=\"${item.name}\"\n width=\"20\"\n height=\"20\"\n class=\"block\"\n />\n </div>`\n : ''}\n <span class=\"font-bold\">${decodeSpecialChars(item.name)}</span>\n ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n\n ${hasChild\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleChildren(item) // 🚨 chevron khusus toggle\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleChildren(item)\n }}\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.expandedSlug === item.slug\n ? 'chevron-up'\n : 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n </div>\n\n <!-- Children list -->\n ${hasChild && this.expandedSlug === item.slug\n ? html`<div\n class=\"${padClass.includes('px-6')\n ? 'pt-1 pb-2 space-y-1 text-black'\n : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n >\n ${repeat(\n item.children ?? [],\n (c: DataSideBarItem) => c.slug,\n (child: DataSideBarItem) => html`\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${() => this.rubricClicked(child)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(child, e)\n }}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot.start ?? '',\n child.redDot.end ?? ''\n )\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n <span class=\"ml-auto text-grey-400\">\n ${child.external\n ? unsafeSVG(\n getFontAwesomeIcon('fas', 'external-link', 16, 16)\n )\n : ''}\n </span>\n </div>\n `\n )}\n </div>`\n : ''}\n </div>\n `\n }\n\n private renderSection(title: string | null, items: any[], padClass: string) {\n if (!items || items.length === 0) return null // skip if empty data\n return html`\n ${title\n ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal\"\n >${title}</span\n >`\n : null}\n ${repeat(\n items,\n item => item.slug,\n item => this.renderItem(item, padClass)\n )}\n `\n }\n\n private renderChips() {\n return html`\n <div\n class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n style=\"background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n `\n }\n\n private closeNavSidebar() {\n console.log('closing sidebar')\n this.showNavBar = false\n }\n\n render() {\n return html`\n <!-- Toggle Button -->\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n <slot></slot>\n ${!this.hasSlotContent\n ? html`\n <div\n class=\"h-4 inline-flex ${this.isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n </div>\n <span\n class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n .isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n Menu\n </span>\n `\n : ''}\n </div>\n <!-- Sidebar Menu -->\n <nav\n class=${this.showNavBar\n ? 'fixed inset-0 z-[100] flex h-screen'\n : 'hidden'}\n >\n <!-- Overlay -->\n <div\n class=\"absolute inset-0 bg-[#00000066]\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n ></div>\n\n <!-- Sidebar Content -->\n <div\n class=\"relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n style=\"width:312px;\"\n >\n <!-- Logo and Close Button -->\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center w-full\"\n >\n <div\n ref=\"logo-kompas\"\n class=\"flex items-center justify-between p-6 w-full\"\n >\n <a href=\"/\" class=\"flex h-9 w-9\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n alt=\"Kompas.id\"\n scale=\"0\"\n class=\"block w-full\"\n />\n </a>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n </div>\n <!-- External Links -->\n <div class=\"flex flex-wrap px-6\">\n ${repeat(\n this.dataExternal,\n item => item.name,\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n <div class=\"cursor-pointer flex items-center pb-4\">\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`<div class=\"flex mr-2 text-brand-1\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>`\n : ''}\n <span class=\"font-sans text-xs text-[#666666]\"\n >${item.name}</span\n >\n ${item.isNew\n ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n : ''}\n </div>\n </a>\n `\n )}\n </div>\n ${this.dataExternal.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Bundle Section -->\n ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}\n ${this.dataSidebar.bundles.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Feature Section -->\n ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}\n ${this.dataSidebar.feature.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Category (Redaksional) -->\n ${this.renderSection(\n 'Redaksional',\n this.dataSidebar.category,\n 'px-6'\n )}\n ${this.dataSidebar.category.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Others (Lainnya) -->\n ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}\n </div>\n </nav>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\n// Importing the data fetch functions\nimport {\n fetchExternalLinks,\n fetchSidebarData,\n DataExternalLink,\n DataSideBarLink,\n DataSideBarItem,\n} from './SidebarDataController.js'\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n static styles = [\n css`\n .slide-side-enter-active,\n .slide-side-leave-active {\n transition: all 0.3s ease-out;\n }\n .slide-side-enter,\n .slide-side-leave-to {\n transform: translateX(-100%);\n }\n /* end: transisi buat sidebar */\n .nuxt-link-exact-active {\n @apply text-brand-1;\n }\n .menu-menu-sidebar {\n z-index: 99999;\n }\n /* Force scrollbar to always show (for debugging) */\n .menu-menu-sidebar::-webkit-scrollbar {\n width: 4px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n /* existing styles */\n `,\n TWStyles,\n ]\n\n /**\n * Props\n * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n */\n\n @property({ type: Boolean }) isDark = false\n @property({ type: Boolean }) isProductionMode = false\n @property({ type: String }) subscriptionPackage = ''\n\n @state() dataExternal: DataExternalLink[] = []\n @state() dataSidebar: DataSideBarLink = {\n bundles: [],\n feature: [],\n category: [],\n lainnya: [],\n }\n @state() showNavBar = false\n @state() expandedSlugs: string[] = []\n hasSlotContent = false\n\n // Fetch data when the component is connected to the DOM\n async connectedCallback() {\n super.connectedCallback()\n await this.loadData()\n }\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector('slot')\n const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n this.hasSlotContent = assignedNodes.length > 0\n }\n\n private hasKompasOnePackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-one'))\n }\n\n private hasKompasProPackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-pro'))\n }\n\n private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n return bundles\n .filter(b => b.isShow)\n .map(b => {\n if (b.name === 'Kompas One') {\n return {\n ...b,\n children: this.hasKompasOnePackage() ? b.children : [],\n }\n }\n if (b.name === 'Kompas Pro') {\n return {\n ...b,\n children: this.hasKompasProPackage() ? b.children : [],\n }\n }\n return b\n })\n }\n\n // Function to load the data using async API calls\n private async loadData() {\n try {\n const [extData, sbData] = await Promise.all([\n fetchExternalLinks(this.isProductionMode),\n fetchSidebarData(this.isProductionMode),\n ])\n\n this.dataExternal = extData\n this.dataSidebar = {\n ...sbData,\n bundles: this.filterBundles(sbData.bundles),\n }\n } catch (error) {\n console.error('Error loading data:', error)\n }\n }\n\n private toggleNavSidebar(e: Event) {\n e.stopPropagation()\n this.showNavBar = !this.showNavBar\n }\n\n private rubricClicked(item: DataSideBarItem, event?: Event): void {\n if (event) event.stopPropagation()\n\n const isDropdown = this.shouldOpenDropdown(item)\n\n // Kalau bukan dropdown tapi ada href, langsung redirect\n if (!isDropdown && item.href) {\n window.location.href = item.href\n return\n }\n\n // Kalau dropdown, toggle anak\n if (isDropdown) {\n this.toggleChildren(item)\n }\n }\n\n private hasChildren(item: DataSideBarItem): boolean {\n return Array.isArray(item.children) && item.children.length > 0\n }\n\n private toggleChildren(item: DataSideBarItem) {\n const { slug } = item\n if (this.expandedSlugs.includes(slug)) {\n // close it\n this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug)\n } else {\n // open it\n this.expandedSlugs = [...this.expandedSlugs, slug]\n }\n }\n\n private hasBundleAccess(item: DataSideBarItem): boolean {\n if (item.name === 'Kompas One') return this.hasKompasOnePackage()\n if (item.name === 'Kompas Pro') return this.hasKompasProPackage()\n return true // default non-subscription bundles\n }\n\n private shouldOpenDropdown(item: DataSideBarItem): boolean {\n const hasChild = item.children?.length > 0\n\n // 🔹 1. Parent dengan children + toExpand true\n if (hasChild && item.toExpand) {\n // kalau user nggak punya akses → redirect ke href\n if (!this.hasBundleAccess(item) && item.href) {\n return false\n }\n return true // punya akses → expand\n }\n\n // 🔹 2. Parent dengan children + tidak ada href → dropdown\n if (hasChild && !item.href) {\n return true\n }\n\n // 🔹 3. Parent dengan children + toExpand false + ada href → redirect\n if (hasChild && !item.toExpand && item.href) {\n return false\n }\n\n // 🔹 4. Item biasa tanpa child → redirect\n return false\n }\n\n private renderItem(item: any, padClass: string) {\n const hasChild = this.hasChildren(item)\n\n return html`\n <div class=\"w-full font-sans text-black\">\n <div\n class=\"flex items-center justify-between text-sm font-medium ${padClass}\"\n >\n <!-- Label / Link area -->\n <div\n class=\"flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n >\n <div\n class=\"w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3\"\n role=\"button\"\n tabindex=\"0\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(item, e)\n }}\n >\n ${item.iconSrc\n ? html`<div class=\"flex\">\n <img\n src=\"${item.iconSrc}\"\n alt=\"${item.name}\"\n width=\"20\"\n height=\"20\"\n class=\"block\"\n />\n </div>`\n : ''}\n <span class=\"font-bold text-grey-600 text-base\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n\n ${hasChild\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleChildren(item) // chevron khusus toggle\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleChildren(item)\n }}\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.expandedSlugs.includes(item.slug)\n ? 'chevron-up'\n : 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n </div>\n\n <!-- Children list -->\n ${hasChild && this.expandedSlugs.includes(item.slug)\n ? html`<div\n class=\"${padClass.includes('px-6')\n ? 'pt-1 pb-2 space-y-1 text-black'\n : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n >\n ${repeat(\n item.children ?? [],\n (c: DataSideBarItem) => c.slug,\n (child: DataSideBarItem) => html`\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"flex items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n @click=${() => this.rubricClicked(child)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(child, e)\n }}\n >\n <div\n class=\"w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot.start ?? '',\n child.redDot.end ?? ''\n )\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n\n <span class=\"absolute right-0 text-grey-400\">\n ${child.external\n ? unsafeSVG(\n getFontAwesomeIcon('fas', 'external-link', 16, 16)\n )\n : ''}\n </span>\n </div>\n </div>\n `\n )}\n </div>`\n : ''}\n </div>\n `\n }\n\n private renderSection(title: string | null, items: any[], padClass: string) {\n if (!items || items.length === 0) return null // skip if empty data\n return html`\n ${title\n ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal mx-2\"\n >${title}</span\n >`\n : null}\n ${repeat(\n items,\n item => item.slug,\n item => this.renderItem(item, padClass)\n )}\n `\n }\n\n private renderChips() {\n return html`\n <div\n class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n style=\"background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n `\n }\n\n private closeNavSidebar() {\n console.log('closing sidebar')\n this.showNavBar = false\n }\n\n render() {\n return html`\n <!-- Toggle Button -->\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n <slot></slot>\n ${!this.hasSlotContent\n ? html`\n <div\n class=\"h-4 inline-flex ${this.isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n </div>\n <span\n class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n .isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n Menu\n </span>\n `\n : ''}\n </div>\n <!-- Sidebar Menu -->\n <nav\n class=${this.showNavBar\n ? 'fixed inset-0 z-[100] flex h-screen'\n : 'hidden'}\n >\n <!-- Overlay -->\n <div\n class=\"absolute inset-0 bg-[#00000066]\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n ></div>\n\n <!-- Sidebar Content -->\n <div\n class=\"relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n style=\"width:312px;\"\n >\n <!-- Logo and Close Button -->\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center w-full\"\n >\n <div\n ref=\"logo-kompas\"\n class=\"flex items-center justify-between p-6 w-full\"\n >\n <a href=\"/\" class=\"flex h-9 w-9\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n alt=\"Kompas.id\"\n scale=\"0\"\n class=\"block w-full\"\n />\n </a>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n </div>\n <!-- External Links -->\n <div class=\"flex flex-wrap px-6\">\n ${repeat(\n this.dataExternal,\n item => item.name,\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n <div class=\"cursor-pointer flex items-center pb-4\">\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`<div class=\"flex mr-2 text-[#666666]\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>`\n : ''}\n <span\n class=\"font-sans font-normal text-xs hover:text-[#222222] text-[#666666]\"\n >${item.name}</span\n >\n ${item.isNew\n ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n : ''}\n </div>\n </a>\n `\n )}\n </div>\n ${this.dataExternal.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Bundle Section -->\n ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}\n ${this.dataSidebar.bundles.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Feature Section -->\n ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}\n ${this.dataSidebar.feature.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Category (Redaksional) -->\n ${this.renderSection(\n 'Redaksional',\n this.dataSidebar.category,\n 'px-4'\n )}\n ${this.dataSidebar.category.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Others (Lainnya) -->\n ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}\n </div>\n </nav>\n `\n }\n}\n"]}
package/dist/tailwind/tailwind.js CHANGED
@@ -672,6 +672,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
672
672
  margin-right: 1.5rem;
673
673
  }
674
674
 
675
+ .mx-8 {
676
+ margin-left: 1.75rem;
677
+ margin-right: 1.75rem;
678
+ }
679
+
675
680
  .mx-auto {
676
681
  margin-left: auto;
677
682
  margin-right: auto;
@@ -1221,6 +1226,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1221
1226
  gap: 0.25rem;
1222
1227
  }
1223
1228
 
1229
+ .gap-2 {
1230
+ gap: 0.5rem;
1231
+ }
1232
+
1224
1233
  .gap-4 {
1225
1234
  gap: 1rem;
1226
1235
  }
@@ -2093,6 +2102,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2093
2102
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
2094
2103
  }
2095
2104
 
2105
+ .hover\\:bg-\\[\\#f4f4f4\\]:hover {
2106
+ --tw-bg-opacity: 1;
2107
+ background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));
2108
+ }
2109
+
2110
+ .hover\\:text-\\[\\#222222\\]:hover {
2111
+ --tw-bg-opacity: 1;
2112
+ color: rgb(34 34 34 / var(--tw-bg-opacity, 1));
2113
+ }
2114
+
2096
2115
  .hover\\:underline:hover {
2097
2116
  text-decoration-line: underline;
2098
2117
  }
package/dist/tailwind/tailwind.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tailwind.js","sourceRoot":"","sources":["../../tailwind/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwnF1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n *,\n ::before,\n ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n /*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*/\n\n /*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n }\n\n ::before,\n ::after {\n --tw-content: '';\n }\n\n /*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured sans font-family by default.\n5. Use the user's configured sans font-feature-settings by default.\n6. Use the user's configured sans font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\n html,\n :host {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n /* 4 */\n font-feature-settings: normal;\n /* 5 */\n font-variation-settings: normal;\n /* 6 */\n -webkit-tap-highlight-color: transparent;\n /* 7 */\n }\n\n /*\n1. Remove the margin in all browsers.\n2. Inherit line-height from html so users can set them as a class directly on the html element.\n*/\n\n body {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n }\n\n /*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\n hr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n }\n\n /*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n /*\nRemove the default font size and weight for headings.\n*/\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\n a {\n color: inherit;\n text-decoration: inherit;\n }\n\n /*\nAdd the correct font weight in Edge and Safari.\n*/\n\n b,\n strong {\n font-weight: bolder;\n }\n\n /*\n1. Use the user's configured mono font-family by default.\n2. Use the user's configured mono font-feature-settings by default.\n3. Use the user's configured mono font-variation-settings by default.\n4. Correct the odd em font sizing in all browsers.\n*/\n\n code,\n kbd,\n samp,\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n /* 1 */\n font-feature-settings: normal;\n /* 2 */\n font-variation-settings: normal;\n /* 3 */\n font-size: 1em;\n /* 4 */\n }\n\n /*\nAdd the correct font size in all browsers.\n*/\n\n small {\n font-size: 80%;\n }\n\n /*\nPrevent sub and sup elements from affecting the line height in all browsers.\n*/\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n /*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\n table {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n }\n\n /*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n /* 1 */\n font-feature-settings: inherit;\n /* 1 */\n font-variation-settings: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n font-weight: inherit;\n /* 1 */\n line-height: inherit;\n /* 1 */\n letter-spacing: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n }\n\n /*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\n button,\n select {\n text-transform: none;\n }\n\n /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\n button,\n input:where([type='button']),\n input:where([type='reset']),\n input:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n }\n\n /*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n :-moz-focusring {\n outline: auto;\n }\n\n /*\nRemove the additional :invalid styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n /*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\n progress {\n vertical-align: baseline;\n }\n\n /*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n /*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n [type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n }\n\n /*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to inherit in Safari.\n*/\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n }\n\n /*\nAdd the correct display in Chrome and Safari.\n*/\n\n summary {\n display: list-item;\n }\n\n /*\nRemoves the default spacing and border for appropriate elements.\n*/\n\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n fieldset {\n margin: 0;\n padding: 0;\n }\n\n legend {\n padding: 0;\n }\n\n ol,\n ul,\n menu {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /*\nReset default styling for dialogs.\n*/\n\n dialog {\n padding: 0;\n }\n\n /*\nPrevent resizing textareas horizontally by default.\n*/\n\n textarea {\n resize: vertical;\n }\n\n /*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n }\n\n input::placeholder,\n textarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n }\n\n /*\nSet the default cursor for buttons.\n*/\n\n button,\n [role='button'] {\n cursor: pointer;\n }\n\n /*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n :disabled {\n cursor: default;\n }\n\n /*\n1. Make replaced elements display: block by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add vertical-align: middle to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n }\n\n /*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n /* Make elements with the HTML hidden attribute stay hidden by default */\n\n [hidden]:where(:not([hidden='until-found'])) {\n display: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .static {\n position: static;\n }\n\n .fixed {\n position: fixed;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .sticky {\n position: sticky;\n }\n\n .inset-0 {\n inset: 0px;\n }\n\n .-bottom-6 {\n bottom: -1.5rem;\n }\n\n .-top-2 {\n top: -0.5rem;\n }\n\n .-top-\\\\[12px\\\\] {\n top: -12px;\n }\n\n .bottom-0 {\n bottom: 0px;\n }\n\n .left-0 {\n left: 0px;\n }\n\n .left-4 {\n left: 1rem;\n }\n\n .right-0 {\n right: 0px;\n }\n\n .top-0 {\n top: 0px;\n }\n\n .z-0 {\n z-index: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-20 {\n z-index: 20;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-\\\\[100\\\\] {\n z-index: 100;\n }\n\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .m-auto {\n margin: auto;\n }\n\n .mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n }\n\n .mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n }\n\n .mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n\n .mx-6 {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n }\n\n .mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n }\n\n .my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n\n .my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n }\n\n .my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n .-ml-2 {\n margin-left: -0.5rem;\n }\n\n .-mt-24 {\n margin-top: -6rem;\n }\n\n .-mt-7 {\n margin-top: -1.75rem;\n }\n\n .mb-0 {\n margin-bottom: 0px;\n }\n\n .mb-1 {\n margin-bottom: 0.25rem;\n }\n\n .mb-2 {\n margin-bottom: 0.5rem;\n }\n\n .mb-3 {\n margin-bottom: 0.75rem;\n }\n\n .mb-4 {\n margin-bottom: 1rem;\n }\n\n .mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .mb-8 {\n margin-bottom: 2rem;\n }\n\n .ml-0\\\\.5 {\n margin-left: 0.125rem;\n }\n\n .ml-1 {\n margin-left: 0.25rem;\n }\n\n .ml-2 {\n margin-left: 0.5rem;\n }\n\n .ml-3 {\n margin-left: 0.75rem;\n }\n\n .ml-8 {\n margin-left: 2rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .mr-10 {\n margin-right: 2.5rem;\n }\n\n .mr-2 {\n margin-right: 0.5rem;\n }\n\n .mr-3 {\n margin-right: 0.75rem;\n }\n\n .mr-3\\\\.5 {\n margin-right: 0.875rem;\n }\n\n .mr-4 {\n margin-right: 1rem;\n }\n\n .mr-6 {\n margin-right: 1.5rem;\n }\n\n .mt-0\\\\.5 {\n margin-top: 0.125rem;\n }\n\n .mt-1 {\n margin-top: 0.25rem;\n }\n\n .mt-2 {\n margin-top: 0.5rem;\n }\n\n .mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .mt-3 {\n margin-top: 0.75rem;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .mt-6 {\n margin-top: 1.5rem;\n }\n\n .mt-8 {\n margin-top: 2rem;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .aspect-video {\n aspect-ratio: 16 / 9;\n }\n\n .h-10 {\n height: 2.5rem;\n }\n\n .h-12 {\n height: 3rem;\n }\n\n .h-14 {\n height: 3.5rem;\n }\n\n .h-16 {\n height: 4rem;\n }\n\n .h-2 {\n height: 0.5rem;\n }\n\n .h-20 {\n height: 5rem;\n }\n\n .h-3 {\n height: 0.75rem;\n }\n\n .h-4 {\n height: 1rem;\n }\n\n .h-5 {\n height: 1.25rem;\n }\n\n .h-6 {\n height: 1.5rem;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .h-9 {\n height: 2.25rem;\n }\n\n .h-\\\\[17px\\\\] {\n height: 17px;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .h-\\\\[76px\\\\] {\n height: 76px;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .w-1\\\\/2 {\n width: 50%;\n }\n\n .w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .w-1\\\\/4 {\n width: 25%;\n }\n\n .w-1\\\\/5 {\n width: 20%;\n }\n\n .w-10 {\n width: 2.5rem;\n }\n\n .w-11\\\\/12 {\n width: 91.666667%;\n }\n\n .w-14 {\n width: 3.5rem;\n }\n\n .w-16 {\n width: 4rem;\n }\n\n .w-2 {\n width: 0.5rem;\n }\n\n .w-2\\\\/3 {\n width: 66.666667%;\n }\n\n .w-20 {\n width: 5rem;\n }\n\n .w-3 {\n width: 0.75rem;\n }\n\n .w-3\\\\/4 {\n width: 75%;\n }\n\n .w-32 {\n width: 8rem;\n }\n\n .w-4 {\n width: 1rem;\n }\n\n .w-40 {\n width: 10rem;\n }\n\n .w-5 {\n width: 1.25rem;\n }\n\n .w-6 {\n width: 1.5rem;\n }\n\n .w-60 {\n width: 15rem;\n }\n\n .w-76 {\n width: 19rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n .w-9 {\n width: 2.25rem;\n }\n\n .w-\\\\[120px\\\\] {\n width: 120px;\n }\n\n .w-\\\\[138px\\\\] {\n width: 138px;\n }\n\n .w-\\\\[216px\\\\] {\n width: 216px;\n }\n\n .w-\\\\[276px\\\\] {\n width: 276px;\n }\n\n .w-\\\\[296px\\\\] {\n width: 296px;\n }\n\n .w-\\\\[328px\\\\] {\n width: 328px;\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .max-w-7xl {\n max-width: 80rem;\n }\n\n .max-w-screen-md {\n max-width: 768px;\n }\n\n .max-w-screen-sm {\n max-width: 640px;\n }\n\n .max-w-xl {\n max-width: 36rem;\n }\n\n .max-w-xs {\n max-width: 20rem;\n }\n\n .flex-none {\n flex: none;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .scroll-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem;\n }\n\n .grid-flow-row {\n grid-auto-flow: row;\n }\n\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n\n .place-items-center {\n place-items: center;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-evenly {\n justify-content: space-evenly;\n }\n\n .gap-1 {\n gap: 0.25rem;\n }\n\n .gap-4 {\n gap: 1rem;\n }\n\n .gap-6 {\n gap: 1.5rem;\n }\n\n .gap-8 {\n gap: 2rem;\n }\n\n .gap-y-2 {\n row-gap: 0.5rem;\n }\n\n .gap-y-4 {\n row-gap: 1rem;\n }\n\n .space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n\n .space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .self-center {\n align-self: center;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .rounded {\n border-radius: 0.25rem;\n }\n\n .rounded-\\\\[10px\\\\] {\n border-radius: 10px;\n }\n\n .rounded-full {\n border-radius: 9999px;\n }\n\n .rounded-lg {\n border-radius: 0.5rem;\n }\n\n .rounded-md {\n border-radius: 0.375rem;\n }\n\n .rounded-sm {\n border-radius: 0.125rem;\n }\n\n .rounded-xl {\n border-radius: 0.75rem;\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: 0.75rem;\n border-bottom-left-radius: 0.75rem;\n }\n\n .border {\n border-width: 1px;\n }\n\n .border-2 {\n border-width: 2px;\n }\n\n .border-b {\n border-bottom-width: 1px;\n }\n\n .border-b-2 {\n border-bottom-width: 2px;\n }\n\n .border-t {\n border-top-width: 1px;\n }\n\n .border-\\\\[\\\\#DDD\\\\] {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(147 200 253 / var(--tw-border-opacity, 1));\n }\n\n .border-brand-1 {\n --tw-border-opacity: 1;\n border-color: rgb(0 85 154 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-6 {\n --tw-border-opacity: 1;\n border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-8 {\n --tw-border-opacity: 1;\n border-color: rgb(136 136 136 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-9 {\n --tw-border-opacity: 1;\n border-color: rgb(35 35 35 / var(--tw-border-opacity, 1));\n }\n\n .border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(106 195 34 / var(--tw-border-opacity, 1));\n }\n\n .border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(80 167 24 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-100 {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-200 {\n --tw-border-opacity: 1;\n border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-300 {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-400 {\n --tw-border-opacity: 1;\n border-color: rgb(153 153 153 / var(--tw-border-opacity, 1));\n }\n\n .border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));\n }\n\n .bg-\\\\[\\\\#00000066\\\\] {\n background-color: #00000066;\n }\n\n .bg-\\\\[\\\\#2C2C2C\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#D71920\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(215 25 32 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#FFFFFF\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(147 200 253 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 86 168 / var(--tw-bg-opacity, 1));\n }\n\n .bg-brand-1 {\n --tw-bg-opacity: 1;\n background-color: rgb(0 85 154 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 37 37 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-5 {\n --tw-bg-opacity: 1;\n background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(151 219 83 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(80 167 24 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 225 207 / var(--tw-bg-opacity, 1));\n }\n\n .bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 220 63 / var(--tw-bg-opacity, 1));\n }\n\n .bg-opacity-75 {\n --tw-bg-opacity: 0.75;\n }\n\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n\n .object-scale-down {\n -o-object-fit: scale-down;\n object-fit: scale-down;\n }\n\n .p-1 {\n padding: 0.25rem;\n }\n\n .p-1\\\\.5 {\n padding: 0.375rem;\n }\n\n .p-2 {\n padding: 0.5rem;\n }\n\n .p-3 {\n padding: 0.75rem;\n }\n\n .p-4 {\n padding: 1rem;\n }\n\n .p-5 {\n padding: 1.25rem;\n }\n\n .p-6 {\n padding: 1.5rem;\n }\n\n .px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .px-1\\\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n }\n\n .px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .px-\\\\[10px\\\\] {\n padding-left: 10px;\n padding-right: 10px;\n }\n\n .px-\\\\[22px\\\\] {\n padding-left: 22px;\n padding-right: 22px;\n }\n\n .py-0\\\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n\n .py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n\n .py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n }\n\n .py-\\\\[5\\\\.6px\\\\] {\n padding-top: 5.6px;\n padding-bottom: 5.6px;\n }\n\n .pb-1 {\n padding-bottom: 0.25rem;\n }\n\n .pb-2 {\n padding-bottom: 0.5rem;\n }\n\n .pb-20 {\n padding-bottom: 5rem;\n }\n\n .pb-3 {\n padding-bottom: 0.75rem;\n }\n\n .pb-32 {\n padding-bottom: 8rem;\n }\n\n .pb-4 {\n padding-bottom: 1rem;\n }\n\n .pb-5 {\n padding-bottom: 1.25rem;\n }\n\n .pb-6 {\n padding-bottom: 1.5rem;\n }\n\n .pb-8 {\n padding-bottom: 2rem;\n }\n\n .pl-0\\\\.5 {\n padding-left: 0.125rem;\n }\n\n .pl-1 {\n padding-left: 0.25rem;\n }\n\n .pl-14 {\n padding-left: 3.5rem;\n }\n\n .pl-2 {\n padding-left: 0.5rem;\n }\n\n .pl-4 {\n padding-left: 1rem;\n }\n\n .pl-8 {\n padding-left: 2rem;\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .pr-1 {\n padding-right: 0.25rem;\n }\n\n .pr-2 {\n padding-right: 0.5rem;\n }\n\n .pr-3 {\n padding-right: 0.75rem;\n }\n\n .pt-0 {\n padding-top: 0px;\n }\n\n .pt-0\\\\.5 {\n padding-top: 0.125rem;\n }\n\n .pt-1 {\n padding-top: 0.25rem;\n }\n\n .pt-10 {\n padding-top: 2.5rem;\n }\n\n .pt-2 {\n padding-top: 0.5rem;\n }\n\n .pt-4 {\n padding-top: 1rem;\n }\n\n .pt-6 {\n padding-top: 1.5rem;\n }\n\n .pt-\\\\[5px\\\\] {\n padding-top: 5px;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-start {\n text-align: start;\n }\n\n .font-sans {\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n }\n\n .font-serif {\n font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n }\n\n .text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .text-\\\\[11px\\\\] {\n font-size: 11px;\n }\n\n .text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .text-xxs {\n font-size: 0.625rem;\n }\n\n .font-bold {\n font-weight: 700;\n }\n\n .font-medium {\n font-weight: 500;\n }\n\n .font-normal {\n font-weight: 400;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .leading-4 {\n line-height: 1rem;\n }\n\n .leading-5 {\n line-height: 1.25rem;\n }\n\n .leading-\\\\[18px\\\\] {\n line-height: 18px;\n }\n\n .leading-\\\\[22px\\\\] {\n line-height: 22px;\n }\n\n .leading-\\\\[30px\\\\] {\n line-height: 30px;\n }\n\n .leading-none {\n line-height: 1;\n }\n\n .leading-normal {\n line-height: 1.5;\n }\n\n .leading-tight {\n line-height: 1.25;\n }\n\n .tracking-wide {\n letter-spacing: 0.025em;\n }\n\n .text-\\\\[\\\\#00559a\\\\] {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#666666\\\\] {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#FFFFFF\\\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-200 {\n --tw-text-opacity: 1;\n color: rgb(147 200 253 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-300 {\n --tw-text-opacity: 1;\n color: rgb(90 171 252 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(4 104 203 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(3 86 168 / var(--tw-text-opacity, 1));\n }\n\n .text-brand-1 {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-5 {\n --tw-text-opacity: 1;\n color: rgb(18 18 18 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-6 {\n --tw-text-opacity: 1;\n color: rgb(46 46 46 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-7 {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n }\n\n .text-green-300 {\n --tw-text-opacity: 1;\n color: rgb(151 219 83 / var(--tw-text-opacity, 1));\n }\n\n .text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(106 195 34 / var(--tw-text-opacity, 1));\n }\n\n .text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(80 167 24 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-100 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-300 {\n --tw-text-opacity: 1;\n color: rgb(221 221 221 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-400 {\n --tw-text-opacity: 1;\n color: rgb(153 153 153 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-500 {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-600 {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-700 {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(255 122 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(219 93 0 / var(--tw-text-opacity, 1));\n }\n\n .text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(174 9 27 / var(--tw-text-opacity, 1));\n }\n\n .text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\n var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n }\n\n .transition {\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .hover\\\\:bg-\\\\[\\\\#f3f4f6\\\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .focus\\\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n @media (min-width: 640px) {\n .sm\\\\:block {\n display: block;\n }\n\n .sm\\\\:inline {\n display: inline;\n }\n\n .sm\\\\:w-3\\\\/4 {\n width: 75%;\n }\n\n .sm\\\\:max-w-lg {\n max-width: 32rem;\n }\n\n .sm\\\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\\\:justify-center {\n justify-content: center;\n }\n\n .sm\\\\:gap-6 {\n gap: 1.5rem;\n }\n\n .sm\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .sm\\\\:px-16 {\n padding-left: 4rem;\n padding-right: 4rem;\n }\n }\n\n @media (min-width: 768px) {\n .md\\\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n\n .md\\\\:my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .md\\\\:my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n }\n\n .md\\\\:my-auto {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .md\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .md\\\\:mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .md\\\\:ml-1 {\n margin-left: 0.25rem;\n }\n\n .md\\\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .md\\\\:mr-5 {\n margin-right: 1.25rem;\n }\n\n .md\\\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .md\\\\:mt-2 {\n margin-top: 0.5rem;\n }\n\n .md\\\\:mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .md\\\\:mt-3 {\n margin-top: 0.75rem;\n }\n\n .md\\\\:mt-4 {\n margin-top: 1rem;\n }\n\n .md\\\\:mt-8 {\n margin-top: 2rem;\n }\n\n .md\\\\:block {\n display: block;\n }\n\n .md\\\\:flex {\n display: flex;\n }\n\n .md\\\\:hidden {\n display: none;\n }\n\n .md\\\\:h-12 {\n height: 3rem;\n }\n\n .md\\\\:h-5 {\n height: 1.25rem;\n }\n\n .md\\\\:h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .md\\\\:h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .md\\\\:max-h-\\\\[220px\\\\] {\n max-height: 220px;\n }\n\n .md\\\\:min-h-\\\\[244px\\\\] {\n min-height: 244px;\n }\n\n .md\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .md\\\\:w-3\\\\/5 {\n width: 60%;\n }\n\n .md\\\\:w-40 {\n width: 10rem;\n }\n\n .md\\\\:w-5\\\\/12 {\n width: 41.666667%;\n }\n\n .md\\\\:w-52 {\n width: 13rem;\n }\n\n .md\\\\:w-\\\\[350px\\\\] {\n width: 350px;\n }\n\n .md\\\\:w-\\\\[370px\\\\] {\n width: 370px;\n }\n\n .md\\\\:w-\\\\[374px\\\\] {\n width: 374px;\n }\n\n .md\\\\:w-\\\\[400px\\\\] {\n width: 400px;\n }\n\n .md\\\\:w-\\\\[580px\\\\] {\n width: 580px;\n }\n\n .md\\\\:w-auto {\n width: auto;\n }\n\n .md\\\\:w-full {\n width: 100%;\n }\n\n .md\\\\:max-w-\\\\[137px\\\\] {\n max-width: 137px;\n }\n\n .md\\\\:max-w-\\\\[200px\\\\] {\n max-width: 200px;\n }\n\n .md\\\\:max-w-\\\\[464px\\\\] {\n max-width: 464px;\n }\n\n .md\\\\:max-w-\\\\[737px\\\\] {\n max-width: 737px;\n }\n\n .md\\\\:max-w-full {\n max-width: 100%;\n }\n\n .md\\\\:max-w-sm {\n max-width: 24rem;\n }\n\n .md\\\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .md\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\\\:flex-row {\n flex-direction: row;\n }\n\n .md\\\\:flex-col {\n flex-direction: column;\n }\n\n .md\\\\:items-start {\n align-items: flex-start;\n }\n\n .md\\\\:items-center {\n align-items: center;\n }\n\n .md\\\\:justify-start {\n justify-content: flex-start;\n }\n\n .md\\\\:justify-center {\n justify-content: center;\n }\n\n .md\\\\:gap-8 {\n gap: 2rem;\n }\n\n .md\\\\:space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1.25rem * var(--tw-space-x-reverse));\n margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0px * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:self-start {\n align-self: flex-start;\n }\n\n .md\\\\:self-end {\n align-self: flex-end;\n }\n\n .md\\\\:rounded {\n border-radius: 0.25rem;\n }\n\n .md\\\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .md\\\\:p-5 {\n padding: 1.25rem;\n }\n\n .md\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .md\\\\:px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n }\n\n .md\\\\:px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .md\\\\:px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .md\\\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .md\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .md\\\\:py-1\\\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n }\n\n .md\\\\:py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .md\\\\:py-3\\\\.5 {\n padding-top: 0.875rem;\n padding-bottom: 0.875rem;\n }\n\n .md\\\\:py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n .md\\\\:pb-4 {\n padding-bottom: 1rem;\n }\n\n .md\\\\:pb-7 {\n padding-bottom: 1.75rem;\n }\n\n .md\\\\:pt-0 {\n padding-top: 0px;\n }\n\n .md\\\\:pt-3 {\n padding-top: 0.75rem;\n }\n\n .md\\\\:pt-5 {\n padding-top: 1.25rem;\n }\n\n .md\\\\:pt-8 {\n padding-top: 2rem;\n }\n\n .md\\\\:text-left {\n text-align: left;\n }\n\n .md\\\\:text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .md\\\\:text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .md\\\\:text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .md\\\\:text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .md\\\\:leading-6 {\n line-height: 1.5rem;\n }\n\n .md\\\\:tracking-normal {\n letter-spacing: 0em;\n }\n }\n\n @media (min-width: 1024px) {\n .lg\\\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\\\:col-span-3 {\n grid-column: span 3 / span 3;\n }\n\n .lg\\\\:col-span-5 {\n grid-column: span 5 / span 5;\n }\n\n .lg\\\\:col-start-10 {\n grid-column-start: 10;\n }\n\n .lg\\\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .lg\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .lg\\\\:mt-0 {\n margin-top: 0px;\n }\n\n .lg\\\\:block {\n display: block;\n }\n\n .lg\\\\:flex {\n display: flex;\n }\n\n .lg\\\\:hidden {\n display: none;\n }\n\n .lg\\\\:min-h-\\\\[220px\\\\] {\n min-height: 220px;\n }\n\n .lg\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .lg\\\\:w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .lg\\\\:w-\\\\[410px\\\\] {\n width: 410px;\n }\n\n .lg\\\\:w-auto {\n width: auto;\n }\n\n .lg\\\\:max-w-7xl {\n max-width: 80rem;\n }\n\n .lg\\\\:grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n\n .lg\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .lg\\\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\\\:flex-col {\n flex-direction: column;\n }\n\n .lg\\\\:items-center {\n align-items: center;\n }\n\n .lg\\\\:justify-end {\n justify-content: flex-end;\n }\n\n .lg\\\\:justify-between {\n justify-content: space-between;\n }\n\n .lg\\\\:gap-0 {\n gap: 0px;\n }\n\n .lg\\\\:gap-8 {\n gap: 2rem;\n }\n\n .lg\\\\:gap-x-6 {\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n }\n\n .lg\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .lg\\\\:px-24 {\n padding-left: 6rem;\n padding-right: 6rem;\n }\n\n .lg\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .lg\\\\:py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n }\n\n .lg\\\\:pb-0 {\n padding-bottom: 0px;\n }\n\n .lg\\\\:pb-6 {\n padding-bottom: 1.5rem;\n }\n }\n\n @media (min-width: 1280px) {\n .xl\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n }\n\n @media (min-width: 1536px) {\n .\\\\32xl\\\\:w-1\\\\/4 {\n width: 25%;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"tailwind.js","sourceRoot":"","sources":["../../tailwind/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2oF1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n *,\n ::before,\n ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n /*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*/\n\n /*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n }\n\n ::before,\n ::after {\n --tw-content: '';\n }\n\n /*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured sans font-family by default.\n5. Use the user's configured sans font-feature-settings by default.\n6. Use the user's configured sans font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\n html,\n :host {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n /* 4 */\n font-feature-settings: normal;\n /* 5 */\n font-variation-settings: normal;\n /* 6 */\n -webkit-tap-highlight-color: transparent;\n /* 7 */\n }\n\n /*\n1. Remove the margin in all browsers.\n2. Inherit line-height from html so users can set them as a class directly on the html element.\n*/\n\n body {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n }\n\n /*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\n hr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n }\n\n /*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n /*\nRemove the default font size and weight for headings.\n*/\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\n a {\n color: inherit;\n text-decoration: inherit;\n }\n\n /*\nAdd the correct font weight in Edge and Safari.\n*/\n\n b,\n strong {\n font-weight: bolder;\n }\n\n /*\n1. Use the user's configured mono font-family by default.\n2. Use the user's configured mono font-feature-settings by default.\n3. Use the user's configured mono font-variation-settings by default.\n4. Correct the odd em font sizing in all browsers.\n*/\n\n code,\n kbd,\n samp,\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n /* 1 */\n font-feature-settings: normal;\n /* 2 */\n font-variation-settings: normal;\n /* 3 */\n font-size: 1em;\n /* 4 */\n }\n\n /*\nAdd the correct font size in all browsers.\n*/\n\n small {\n font-size: 80%;\n }\n\n /*\nPrevent sub and sup elements from affecting the line height in all browsers.\n*/\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n /*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\n table {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n }\n\n /*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n /* 1 */\n font-feature-settings: inherit;\n /* 1 */\n font-variation-settings: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n font-weight: inherit;\n /* 1 */\n line-height: inherit;\n /* 1 */\n letter-spacing: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n }\n\n /*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\n button,\n select {\n text-transform: none;\n }\n\n /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\n button,\n input:where([type='button']),\n input:where([type='reset']),\n input:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n }\n\n /*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n :-moz-focusring {\n outline: auto;\n }\n\n /*\nRemove the additional :invalid styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n /*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\n progress {\n vertical-align: baseline;\n }\n\n /*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n /*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n [type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n }\n\n /*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to inherit in Safari.\n*/\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n }\n\n /*\nAdd the correct display in Chrome and Safari.\n*/\n\n summary {\n display: list-item;\n }\n\n /*\nRemoves the default spacing and border for appropriate elements.\n*/\n\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n fieldset {\n margin: 0;\n padding: 0;\n }\n\n legend {\n padding: 0;\n }\n\n ol,\n ul,\n menu {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /*\nReset default styling for dialogs.\n*/\n\n dialog {\n padding: 0;\n }\n\n /*\nPrevent resizing textareas horizontally by default.\n*/\n\n textarea {\n resize: vertical;\n }\n\n /*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n }\n\n input::placeholder,\n textarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n }\n\n /*\nSet the default cursor for buttons.\n*/\n\n button,\n [role='button'] {\n cursor: pointer;\n }\n\n /*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n :disabled {\n cursor: default;\n }\n\n /*\n1. Make replaced elements display: block by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add vertical-align: middle to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n }\n\n /*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n /* Make elements with the HTML hidden attribute stay hidden by default */\n\n [hidden]:where(:not([hidden='until-found'])) {\n display: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .static {\n position: static;\n }\n\n .fixed {\n position: fixed;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .sticky {\n position: sticky;\n }\n\n .inset-0 {\n inset: 0px;\n }\n\n .-bottom-6 {\n bottom: -1.5rem;\n }\n\n .-top-2 {\n top: -0.5rem;\n }\n\n .-top-\\\\[12px\\\\] {\n top: -12px;\n }\n\n .bottom-0 {\n bottom: 0px;\n }\n\n .left-0 {\n left: 0px;\n }\n\n .left-4 {\n left: 1rem;\n }\n\n .right-0 {\n right: 0px;\n }\n\n .top-0 {\n top: 0px;\n }\n\n .z-0 {\n z-index: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-20 {\n z-index: 20;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-\\\\[100\\\\] {\n z-index: 100;\n }\n\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .m-auto {\n margin: auto;\n }\n\n .mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n }\n\n .mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n }\n\n .mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n\n .mx-6 {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n }\n\n .mx-8 {\n margin-left: 1.75rem;\n margin-right: 1.75rem;\n }\n\n .mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n }\n\n .my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n\n .my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n }\n\n .my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n .-ml-2 {\n margin-left: -0.5rem;\n }\n\n .-mt-24 {\n margin-top: -6rem;\n }\n\n .-mt-7 {\n margin-top: -1.75rem;\n }\n\n .mb-0 {\n margin-bottom: 0px;\n }\n\n .mb-1 {\n margin-bottom: 0.25rem;\n }\n\n .mb-2 {\n margin-bottom: 0.5rem;\n }\n\n .mb-3 {\n margin-bottom: 0.75rem;\n }\n\n .mb-4 {\n margin-bottom: 1rem;\n }\n\n .mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .mb-8 {\n margin-bottom: 2rem;\n }\n\n .ml-0\\\\.5 {\n margin-left: 0.125rem;\n }\n\n .ml-1 {\n margin-left: 0.25rem;\n }\n\n .ml-2 {\n margin-left: 0.5rem;\n }\n\n .ml-3 {\n margin-left: 0.75rem;\n }\n\n .ml-8 {\n margin-left: 2rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .mr-10 {\n margin-right: 2.5rem;\n }\n\n .mr-2 {\n margin-right: 0.5rem;\n }\n\n .mr-3 {\n margin-right: 0.75rem;\n }\n\n .mr-3\\\\.5 {\n margin-right: 0.875rem;\n }\n\n .mr-4 {\n margin-right: 1rem;\n }\n\n .mr-6 {\n margin-right: 1.5rem;\n }\n\n .mt-0\\\\.5 {\n margin-top: 0.125rem;\n }\n\n .mt-1 {\n margin-top: 0.25rem;\n }\n\n .mt-2 {\n margin-top: 0.5rem;\n }\n\n .mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .mt-3 {\n margin-top: 0.75rem;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .mt-6 {\n margin-top: 1.5rem;\n }\n\n .mt-8 {\n margin-top: 2rem;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .aspect-video {\n aspect-ratio: 16 / 9;\n }\n\n .h-10 {\n height: 2.5rem;\n }\n\n .h-12 {\n height: 3rem;\n }\n\n .h-14 {\n height: 3.5rem;\n }\n\n .h-16 {\n height: 4rem;\n }\n\n .h-2 {\n height: 0.5rem;\n }\n\n .h-20 {\n height: 5rem;\n }\n\n .h-3 {\n height: 0.75rem;\n }\n\n .h-4 {\n height: 1rem;\n }\n\n .h-5 {\n height: 1.25rem;\n }\n\n .h-6 {\n height: 1.5rem;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .h-9 {\n height: 2.25rem;\n }\n\n .h-\\\\[17px\\\\] {\n height: 17px;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .h-\\\\[76px\\\\] {\n height: 76px;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .w-1\\\\/2 {\n width: 50%;\n }\n\n .w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .w-1\\\\/4 {\n width: 25%;\n }\n\n .w-1\\\\/5 {\n width: 20%;\n }\n\n .w-10 {\n width: 2.5rem;\n }\n\n .w-11\\\\/12 {\n width: 91.666667%;\n }\n\n .w-14 {\n width: 3.5rem;\n }\n\n .w-16 {\n width: 4rem;\n }\n\n .w-2 {\n width: 0.5rem;\n }\n\n .w-2\\\\/3 {\n width: 66.666667%;\n }\n\n .w-20 {\n width: 5rem;\n }\n\n .w-3 {\n width: 0.75rem;\n }\n\n .w-3\\\\/4 {\n width: 75%;\n }\n\n .w-32 {\n width: 8rem;\n }\n\n .w-4 {\n width: 1rem;\n }\n\n .w-40 {\n width: 10rem;\n }\n\n .w-5 {\n width: 1.25rem;\n }\n\n .w-6 {\n width: 1.5rem;\n }\n\n .w-60 {\n width: 15rem;\n }\n\n .w-76 {\n width: 19rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n .w-9 {\n width: 2.25rem;\n }\n\n .w-\\\\[120px\\\\] {\n width: 120px;\n }\n\n .w-\\\\[138px\\\\] {\n width: 138px;\n }\n\n .w-\\\\[216px\\\\] {\n width: 216px;\n }\n\n .w-\\\\[276px\\\\] {\n width: 276px;\n }\n\n .w-\\\\[296px\\\\] {\n width: 296px;\n }\n\n .w-\\\\[328px\\\\] {\n width: 328px;\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .max-w-7xl {\n max-width: 80rem;\n }\n\n .max-w-screen-md {\n max-width: 768px;\n }\n\n .max-w-screen-sm {\n max-width: 640px;\n }\n\n .max-w-xl {\n max-width: 36rem;\n }\n\n .max-w-xs {\n max-width: 20rem;\n }\n\n .flex-none {\n flex: none;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .scroll-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem;\n }\n\n .grid-flow-row {\n grid-auto-flow: row;\n }\n\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n\n .place-items-center {\n place-items: center;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-evenly {\n justify-content: space-evenly;\n }\n\n .gap-1 {\n gap: 0.25rem;\n }\n\n .gap-2 {\n gap: 0.5rem;\n }\n\n .gap-4 {\n gap: 1rem;\n }\n\n .gap-6 {\n gap: 1.5rem;\n }\n\n .gap-8 {\n gap: 2rem;\n }\n\n .gap-y-2 {\n row-gap: 0.5rem;\n }\n\n .gap-y-4 {\n row-gap: 1rem;\n }\n\n .space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n\n .space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .self-center {\n align-self: center;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .rounded {\n border-radius: 0.25rem;\n }\n\n .rounded-\\\\[10px\\\\] {\n border-radius: 10px;\n }\n\n .rounded-full {\n border-radius: 9999px;\n }\n\n .rounded-lg {\n border-radius: 0.5rem;\n }\n\n .rounded-md {\n border-radius: 0.375rem;\n }\n\n .rounded-sm {\n border-radius: 0.125rem;\n }\n\n .rounded-xl {\n border-radius: 0.75rem;\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: 0.75rem;\n border-bottom-left-radius: 0.75rem;\n }\n\n .border {\n border-width: 1px;\n }\n\n .border-2 {\n border-width: 2px;\n }\n\n .border-b {\n border-bottom-width: 1px;\n }\n\n .border-b-2 {\n border-bottom-width: 2px;\n }\n\n .border-t {\n border-top-width: 1px;\n }\n\n .border-\\\\[\\\\#DDD\\\\] {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(147 200 253 / var(--tw-border-opacity, 1));\n }\n\n .border-brand-1 {\n --tw-border-opacity: 1;\n border-color: rgb(0 85 154 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-6 {\n --tw-border-opacity: 1;\n border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-8 {\n --tw-border-opacity: 1;\n border-color: rgb(136 136 136 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-9 {\n --tw-border-opacity: 1;\n border-color: rgb(35 35 35 / var(--tw-border-opacity, 1));\n }\n\n .border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(106 195 34 / var(--tw-border-opacity, 1));\n }\n\n .border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(80 167 24 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-100 {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-200 {\n --tw-border-opacity: 1;\n border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-300 {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-400 {\n --tw-border-opacity: 1;\n border-color: rgb(153 153 153 / var(--tw-border-opacity, 1));\n }\n\n .border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));\n }\n\n .bg-\\\\[\\\\#00000066\\\\] {\n background-color: #00000066;\n }\n\n .bg-\\\\[\\\\#2C2C2C\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#D71920\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(215 25 32 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#FFFFFF\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(147 200 253 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 86 168 / var(--tw-bg-opacity, 1));\n }\n\n .bg-brand-1 {\n --tw-bg-opacity: 1;\n background-color: rgb(0 85 154 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 37 37 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-5 {\n --tw-bg-opacity: 1;\n background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(151 219 83 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(80 167 24 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 225 207 / var(--tw-bg-opacity, 1));\n }\n\n .bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 220 63 / var(--tw-bg-opacity, 1));\n }\n\n .bg-opacity-75 {\n --tw-bg-opacity: 0.75;\n }\n\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n\n .object-scale-down {\n -o-object-fit: scale-down;\n object-fit: scale-down;\n }\n\n .p-1 {\n padding: 0.25rem;\n }\n\n .p-1\\\\.5 {\n padding: 0.375rem;\n }\n\n .p-2 {\n padding: 0.5rem;\n }\n\n .p-3 {\n padding: 0.75rem;\n }\n\n .p-4 {\n padding: 1rem;\n }\n\n .p-5 {\n padding: 1.25rem;\n }\n\n .p-6 {\n padding: 1.5rem;\n }\n\n .px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .px-1\\\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n }\n\n .px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .px-\\\\[10px\\\\] {\n padding-left: 10px;\n padding-right: 10px;\n }\n\n .px-\\\\[22px\\\\] {\n padding-left: 22px;\n padding-right: 22px;\n }\n\n .py-0\\\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n\n .py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n\n .py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n }\n\n .py-\\\\[5\\\\.6px\\\\] {\n padding-top: 5.6px;\n padding-bottom: 5.6px;\n }\n\n .pb-1 {\n padding-bottom: 0.25rem;\n }\n\n .pb-2 {\n padding-bottom: 0.5rem;\n }\n\n .pb-20 {\n padding-bottom: 5rem;\n }\n\n .pb-3 {\n padding-bottom: 0.75rem;\n }\n\n .pb-32 {\n padding-bottom: 8rem;\n }\n\n .pb-4 {\n padding-bottom: 1rem;\n }\n\n .pb-5 {\n padding-bottom: 1.25rem;\n }\n\n .pb-6 {\n padding-bottom: 1.5rem;\n }\n\n .pb-8 {\n padding-bottom: 2rem;\n }\n\n .pl-0\\\\.5 {\n padding-left: 0.125rem;\n }\n\n .pl-1 {\n padding-left: 0.25rem;\n }\n\n .pl-14 {\n padding-left: 3.5rem;\n }\n\n .pl-2 {\n padding-left: 0.5rem;\n }\n\n .pl-4 {\n padding-left: 1rem;\n }\n\n .pl-8 {\n padding-left: 2rem;\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .pr-1 {\n padding-right: 0.25rem;\n }\n\n .pr-2 {\n padding-right: 0.5rem;\n }\n\n .pr-3 {\n padding-right: 0.75rem;\n }\n\n .pt-0 {\n padding-top: 0px;\n }\n\n .pt-0\\\\.5 {\n padding-top: 0.125rem;\n }\n\n .pt-1 {\n padding-top: 0.25rem;\n }\n\n .pt-10 {\n padding-top: 2.5rem;\n }\n\n .pt-2 {\n padding-top: 0.5rem;\n }\n\n .pt-4 {\n padding-top: 1rem;\n }\n\n .pt-6 {\n padding-top: 1.5rem;\n }\n\n .pt-\\\\[5px\\\\] {\n padding-top: 5px;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-start {\n text-align: start;\n }\n\n .font-sans {\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n }\n\n .font-serif {\n font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n }\n\n .text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .text-\\\\[11px\\\\] {\n font-size: 11px;\n }\n\n .text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .text-xxs {\n font-size: 0.625rem;\n }\n\n .font-bold {\n font-weight: 700;\n }\n\n .font-medium {\n font-weight: 500;\n }\n\n .font-normal {\n font-weight: 400;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .leading-4 {\n line-height: 1rem;\n }\n\n .leading-5 {\n line-height: 1.25rem;\n }\n\n .leading-\\\\[18px\\\\] {\n line-height: 18px;\n }\n\n .leading-\\\\[22px\\\\] {\n line-height: 22px;\n }\n\n .leading-\\\\[30px\\\\] {\n line-height: 30px;\n }\n\n .leading-none {\n line-height: 1;\n }\n\n .leading-normal {\n line-height: 1.5;\n }\n\n .leading-tight {\n line-height: 1.25;\n }\n\n .tracking-wide {\n letter-spacing: 0.025em;\n }\n\n .text-\\\\[\\\\#00559a\\\\] {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#666666\\\\] {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#FFFFFF\\\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-200 {\n --tw-text-opacity: 1;\n color: rgb(147 200 253 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-300 {\n --tw-text-opacity: 1;\n color: rgb(90 171 252 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(4 104 203 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(3 86 168 / var(--tw-text-opacity, 1));\n }\n\n .text-brand-1 {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-5 {\n --tw-text-opacity: 1;\n color: rgb(18 18 18 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-6 {\n --tw-text-opacity: 1;\n color: rgb(46 46 46 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-7 {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n }\n\n .text-green-300 {\n --tw-text-opacity: 1;\n color: rgb(151 219 83 / var(--tw-text-opacity, 1));\n }\n\n .text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(106 195 34 / var(--tw-text-opacity, 1));\n }\n\n .text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(80 167 24 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-100 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-300 {\n --tw-text-opacity: 1;\n color: rgb(221 221 221 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-400 {\n --tw-text-opacity: 1;\n color: rgb(153 153 153 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-500 {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-600 {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-700 {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(255 122 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(219 93 0 / var(--tw-text-opacity, 1));\n }\n\n .text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(174 9 27 / var(--tw-text-opacity, 1));\n }\n\n .text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\n var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n }\n\n .transition {\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .hover\\\\:bg-\\\\[\\\\#f3f4f6\\\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:bg-\\\\[\\\\#f4f4f4\\\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:text-\\\\[\\\\#222222\\\\]:hover {\n --tw-bg-opacity: 1;\n color: rgb(34 34 34 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .focus\\\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n @media (min-width: 640px) {\n .sm\\\\:block {\n display: block;\n }\n\n .sm\\\\:inline {\n display: inline;\n }\n\n .sm\\\\:w-3\\\\/4 {\n width: 75%;\n }\n\n .sm\\\\:max-w-lg {\n max-width: 32rem;\n }\n\n .sm\\\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\\\:justify-center {\n justify-content: center;\n }\n\n .sm\\\\:gap-6 {\n gap: 1.5rem;\n }\n\n .sm\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .sm\\\\:px-16 {\n padding-left: 4rem;\n padding-right: 4rem;\n }\n }\n\n @media (min-width: 768px) {\n .md\\\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n\n .md\\\\:my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .md\\\\:my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n }\n\n .md\\\\:my-auto {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .md\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .md\\\\:mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .md\\\\:ml-1 {\n margin-left: 0.25rem;\n }\n\n .md\\\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .md\\\\:mr-5 {\n margin-right: 1.25rem;\n }\n\n .md\\\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .md\\\\:mt-2 {\n margin-top: 0.5rem;\n }\n\n .md\\\\:mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .md\\\\:mt-3 {\n margin-top: 0.75rem;\n }\n\n .md\\\\:mt-4 {\n margin-top: 1rem;\n }\n\n .md\\\\:mt-8 {\n margin-top: 2rem;\n }\n\n .md\\\\:block {\n display: block;\n }\n\n .md\\\\:flex {\n display: flex;\n }\n\n .md\\\\:hidden {\n display: none;\n }\n\n .md\\\\:h-12 {\n height: 3rem;\n }\n\n .md\\\\:h-5 {\n height: 1.25rem;\n }\n\n .md\\\\:h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .md\\\\:h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .md\\\\:max-h-\\\\[220px\\\\] {\n max-height: 220px;\n }\n\n .md\\\\:min-h-\\\\[244px\\\\] {\n min-height: 244px;\n }\n\n .md\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .md\\\\:w-3\\\\/5 {\n width: 60%;\n }\n\n .md\\\\:w-40 {\n width: 10rem;\n }\n\n .md\\\\:w-5\\\\/12 {\n width: 41.666667%;\n }\n\n .md\\\\:w-52 {\n width: 13rem;\n }\n\n .md\\\\:w-\\\\[350px\\\\] {\n width: 350px;\n }\n\n .md\\\\:w-\\\\[370px\\\\] {\n width: 370px;\n }\n\n .md\\\\:w-\\\\[374px\\\\] {\n width: 374px;\n }\n\n .md\\\\:w-\\\\[400px\\\\] {\n width: 400px;\n }\n\n .md\\\\:w-\\\\[580px\\\\] {\n width: 580px;\n }\n\n .md\\\\:w-auto {\n width: auto;\n }\n\n .md\\\\:w-full {\n width: 100%;\n }\n\n .md\\\\:max-w-\\\\[137px\\\\] {\n max-width: 137px;\n }\n\n .md\\\\:max-w-\\\\[200px\\\\] {\n max-width: 200px;\n }\n\n .md\\\\:max-w-\\\\[464px\\\\] {\n max-width: 464px;\n }\n\n .md\\\\:max-w-\\\\[737px\\\\] {\n max-width: 737px;\n }\n\n .md\\\\:max-w-full {\n max-width: 100%;\n }\n\n .md\\\\:max-w-sm {\n max-width: 24rem;\n }\n\n .md\\\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .md\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\\\:flex-row {\n flex-direction: row;\n }\n\n .md\\\\:flex-col {\n flex-direction: column;\n }\n\n .md\\\\:items-start {\n align-items: flex-start;\n }\n\n .md\\\\:items-center {\n align-items: center;\n }\n\n .md\\\\:justify-start {\n justify-content: flex-start;\n }\n\n .md\\\\:justify-center {\n justify-content: center;\n }\n\n .md\\\\:gap-8 {\n gap: 2rem;\n }\n\n .md\\\\:space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1.25rem * var(--tw-space-x-reverse));\n margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0px * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:self-start {\n align-self: flex-start;\n }\n\n .md\\\\:self-end {\n align-self: flex-end;\n }\n\n .md\\\\:rounded {\n border-radius: 0.25rem;\n }\n\n .md\\\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .md\\\\:p-5 {\n padding: 1.25rem;\n }\n\n .md\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .md\\\\:px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n }\n\n .md\\\\:px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .md\\\\:px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .md\\\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .md\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .md\\\\:py-1\\\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n }\n\n .md\\\\:py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .md\\\\:py-3\\\\.5 {\n padding-top: 0.875rem;\n padding-bottom: 0.875rem;\n }\n\n .md\\\\:py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n .md\\\\:pb-4 {\n padding-bottom: 1rem;\n }\n\n .md\\\\:pb-7 {\n padding-bottom: 1.75rem;\n }\n\n .md\\\\:pt-0 {\n padding-top: 0px;\n }\n\n .md\\\\:pt-3 {\n padding-top: 0.75rem;\n }\n\n .md\\\\:pt-5 {\n padding-top: 1.25rem;\n }\n\n .md\\\\:pt-8 {\n padding-top: 2rem;\n }\n\n .md\\\\:text-left {\n text-align: left;\n }\n\n .md\\\\:text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .md\\\\:text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .md\\\\:text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .md\\\\:text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .md\\\\:leading-6 {\n line-height: 1.5rem;\n }\n\n .md\\\\:tracking-normal {\n letter-spacing: 0em;\n }\n }\n\n @media (min-width: 1024px) {\n .lg\\\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\\\:col-span-3 {\n grid-column: span 3 / span 3;\n }\n\n .lg\\\\:col-span-5 {\n grid-column: span 5 / span 5;\n }\n\n .lg\\\\:col-start-10 {\n grid-column-start: 10;\n }\n\n .lg\\\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .lg\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .lg\\\\:mt-0 {\n margin-top: 0px;\n }\n\n .lg\\\\:block {\n display: block;\n }\n\n .lg\\\\:flex {\n display: flex;\n }\n\n .lg\\\\:hidden {\n display: none;\n }\n\n .lg\\\\:min-h-\\\\[220px\\\\] {\n min-height: 220px;\n }\n\n .lg\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .lg\\\\:w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .lg\\\\:w-\\\\[410px\\\\] {\n width: 410px;\n }\n\n .lg\\\\:w-auto {\n width: auto;\n }\n\n .lg\\\\:max-w-7xl {\n max-width: 80rem;\n }\n\n .lg\\\\:grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n\n .lg\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .lg\\\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\\\:flex-col {\n flex-direction: column;\n }\n\n .lg\\\\:items-center {\n align-items: center;\n }\n\n .lg\\\\:justify-end {\n justify-content: flex-end;\n }\n\n .lg\\\\:justify-between {\n justify-content: space-between;\n }\n\n .lg\\\\:gap-0 {\n gap: 0px;\n }\n\n .lg\\\\:gap-8 {\n gap: 2rem;\n }\n\n .lg\\\\:gap-x-6 {\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n }\n\n .lg\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .lg\\\\:px-24 {\n padding-left: 6rem;\n padding-right: 6rem;\n }\n\n .lg\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .lg\\\\:py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n }\n\n .lg\\\\:pb-0 {\n padding-bottom: 0px;\n }\n\n .lg\\\\:pb-6 {\n padding-bottom: 1.5rem;\n }\n }\n\n @media (min-width: 1280px) {\n .xl\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n }\n\n @media (min-width: 1536px) {\n .\\\\32xl\\\\:w-1\\\\/4 {\n width: 25%;\n }\n }\n`\n"]}