@kompasid/lit-web-components 0.7.0 → 0.7.1

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.d.ts

@@ -77,6 +77,10 @@ export declare class KompasMeteredWallRegister extends LitElement {
      * template button register
      */
     private registerButtonTemplate;
+    /**
+     * mengarahkan ke page checkout promo
+     */
+    private redirectToCTAUrl;
     /**
      * mengarahkan ke page register
      */

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js

@@ -32,6 +32,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
                 description: '',
                 lastArticle: { title: '', description: '' },
             },
+            ctaUrl: '',
+            ctaText: '',
         };
         /**
          * Props
@@ -75,6 +77,25 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         this.tracker_metered_wall_balance = 0;
         this.tracker_page_domain = '';
         this.next_param = 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini';
+        /**
+         * mengarahkan ke page checkout promo
+         */
+        this.redirectToCTAUrl = () => {
+            const params = new URLSearchParams(window.location.href);
+            const newUrl = new URL(this.textTemplate.ctaUrl);
+            const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get('referrer');
+            this.pushToDataLayer('mrw_clicked');
+            if (!referrer) {
+                newUrl.searchParams.append('referrer', params.toString());
+                window.location.href = newUrl.toString();
+            }
+            else {
+                const currentReferrerValue = newUrl.searchParams.get('referrer');
+                const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`;
+                newUrl.searchParams.set('referrer', updatedReferrerValue);
+                window.location.href = newUrl.toString();
+            }
+        };
         /**
          * mengarahkan ke page register
          */
@@ -90,15 +111,22 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      * menentukan template yang akan di render
      */
     setTemplate(prop, mode = 'default') {
-        let template = '';
-        // dynamicMode dibuat agar typescript bisa akses data lastArticle
         const dynamicMode = this.textTemplate[mode];
-        if ('lastArticle' in dynamicMode) {
-            const lastArticleMode = dynamicMode;
-            template = lastArticleMode.lastArticle[prop] || '';
-        }
-        else {
-            template = dynamicMode[prop] || '';
+        let template = '';
+        if (typeof dynamicMode === 'object' && dynamicMode !== null) {
+            // Check if dynamicMode has a lastArticle object and if the prop exists within it
+            if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {
+                const value = dynamicMode.lastArticle[prop];
+                if (typeof value === 'string') {
+                    template = value;
+                }
+            }
+            else if (prop in dynamicMode) {
+                const value = dynamicMode[prop];
+                if (typeof value === 'string') {
+                    template = value;
+                }
+            }
         }
         return template;
     }
@@ -180,11 +208,12 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             ${this.registerButtonTemplate()}
           </div>
         </div>
-        <div class="flex justify-center">
+        <div
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+        >
           <img
             alt="metered-wall-register"
             src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
-            class="h-40 w-40 md:w-full md:h-full"
           />
         </div>
         <button
@@ -209,12 +238,21 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      */
     registerButtonTemplate() {
         return html `
-      <button
-        @click=${this.redirectToRegister}
-        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
-      >
-        Daftar Akun
-      </button>
+      <div>
+        ${!this.textTemplate.ctaUrl
+            ? html `<button
+              @click=${this.redirectToRegister}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+            >
+              Daftar Akun
+            </button>`
+            : html `<button
+              @click=${this.redirectToCTAUrl}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]"
+            >
+              ${this.textTemplate.ctaText}
+            </button>`}
+      </div>
     `;
     }
     /**

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n\n      .btn-regis {\n        margin-left: 16px;\n        width: 127px;\n      }\n\n      .banner-content {\n        gap: 55px;\n      }\n\n      .cont-banner-content {\n        justify-content: space-evenly;\n      }\n\n      .expanded-btn {\n        width: 127px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    default: { title: '', lastArticle: { title: '' } },\n    expand: {\n      title: '',\n      description: '',\n      lastArticle: { title: '', description: '' },\n    },\n  }\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n  @property({ type: Boolean }) isDesktop = false\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'default'\n  ): string {\n    let template = ''\n\n    // dynamicMode dibuat agar typescript bisa akses data lastArticle\n    const dynamicMode = this.textTemplate[mode]\n\n    if ('lastArticle' in dynamicMode) {\n      const lastArticleMode = dynamicMode as {\n        lastArticle: { [key: string]: string }\n      }\n      template = lastArticleMode.lastArticle[prop] || ''\n    } else {\n      template = dynamicMode[prop] || ''\n    }\n    return template\n  }\n\n  private checkIsDesktop() {\n    if (window.innerWidth >= 960) {\n      this.isDesktop = true\n    } else {\n      this.isDesktop = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div>\n        <div\n          class=\"${this.isDesktop\n            ? 'cont-banner-content'\n            : 'justify-between'} flex flex-row\"\n        >\n          <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n              ${this.isDesktop\n                ? html`<div class=\"ml-4\"></div>\n                    ${this.registerButtonTemplate()}`\n                : null}\n            </div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"md:self-center mt-4\">\n          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n        </div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n            ${this.registerButtonTemplate()}\n          </div>\n        </div>\n        <div class=\"flex justify-center\">\n          <img\n            alt=\"metered-wall-register\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n            class=\"h-40 w-40 md:w-full md:h-full\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 ${this.isDesktop\n            ? null\n            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <button\n        @click=${this.redirectToRegister}\n        class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n      >\n        Daftar Akun\n      </button>\n    `\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n    this.checkIsDesktop()\n  }\n\n  private async loadData() {\n    const req = await fetch(\n      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    this.textTemplate = await req.json()\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto relative\">\n                <div>${this.bannerTemplate()}</div>\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}
+{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n\n      .btn-regis {\n        margin-left: 16px;\n        width: 127px;\n      }\n\n      .banner-content {\n        gap: 55px;\n      }\n\n      .cont-banner-content {\n        justify-content: space-evenly;\n      }\n\n      .expanded-btn {\n        width: 127px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    default: { title: '', lastArticle: { title: '' } },\n    expand: {\n      title: '',\n      description: '',\n      lastArticle: { title: '', description: '' },\n    },\n    ctaUrl: '',\n    ctaText: '',\n  }\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n  @property({ type: Boolean }) isDesktop = false\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'default'\n  ): string {\n    interface LastArticle {\n      [key: string]: string\n    }\n    interface DynamicMode {\n      lastArticle?: LastArticle\n      [key: string]: string | LastArticle | undefined\n    }\n    const dynamicMode = this.textTemplate[mode] as DynamicMode | string\n\n    let template: string = ''\n\n    if (typeof dynamicMode === 'object' && dynamicMode !== null) {\n      // Check if dynamicMode has a lastArticle object and if the prop exists within it\n      if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {\n        const value = dynamicMode.lastArticle[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      } else if (prop in dynamicMode) {\n        const value = dynamicMode[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      }\n    }\n\n    return template\n  }\n\n  private checkIsDesktop() {\n    if (window.innerWidth >= 960) {\n      this.isDesktop = true\n    } else {\n      this.isDesktop = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div>\n        <div\n          class=\"${this.isDesktop\n            ? 'cont-banner-content'\n            : 'justify-between'} flex flex-row\"\n        >\n          <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n              ${this.isDesktop\n                ? html`<div class=\"ml-4\"></div>\n                    ${this.registerButtonTemplate()}`\n                : null}\n            </div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"md:self-center mt-4\">\n          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n        </div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n            ${this.registerButtonTemplate()}\n          </div>\n        </div>\n        <div\n          class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto\"\n        >\n          <img\n            alt=\"metered-wall-register\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 ${this.isDesktop\n            ? null\n            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <div>\n        ${!this.textTemplate.ctaUrl\n          ? html`<button\n              @click=${this.redirectToRegister}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n            >\n              Daftar Akun\n            </button>`\n          : html`<button\n              @click=${this.redirectToCTAUrl}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]\"\n            >\n              ${this.textTemplate.ctaText}\n            </button>`}\n      </div>\n    `\n  }\n\n  /**\n   * mengarahkan ke page checkout promo\n   */\n  private redirectToCTAUrl = (): void => {\n    const params = new URLSearchParams(window.location.href)\n    const newUrl = new URL(this.textTemplate.ctaUrl)\n    const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get(\n      'referrer'\n    )\n    this.pushToDataLayer('mrw_clicked')\n    if (!referrer) {\n      newUrl.searchParams.append('referrer', params.toString())\n      window.location.href = newUrl.toString()\n    } else {\n      const currentReferrerValue = newUrl.searchParams.get('referrer')\n      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n      newUrl.searchParams.set('referrer', updatedReferrerValue)\n      window.location.href = newUrl.toString()\n    }\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n    this.checkIsDesktop()\n  }\n\n  private async loadData() {\n    const req = await fetch(\n      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    this.textTemplate = await req.json()\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto relative\">\n                <div>${this.bannerTemplate()}</div>\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}

package/dist/src/components/kompasid-metered-wall-register/types.d.ts

@@ -13,4 +13,6 @@ export interface meteredRegisterContent {
         };
         title: string;
     };
+    ctaUrl: string;
+    ctaText: string;
 }

package/dist/src/components/kompasid-metered-wall-register/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n  expand: {\n    lastArticle: {\n      title: string\n      description: string\n    }\n    title: string\n    description: string\n  }\n  default: {\n    lastArticle: {\n      title: string\n    }\n    title: string\n  }\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n  expand: {\n    lastArticle: {\n      title: string\n      description: string\n    }\n    title: string\n    description: string\n  }\n  default: {\n    lastArticle: {\n      title: string\n    }\n    title: string\n  }\n  ctaUrl: string\n  ctaText: string\n}\n"]}

package/dist/tailwind/tailwind.js

@@ -834,10 +834,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 1rem;
   }
 
-  .h-40 {
-    height: 10rem;
-  }
-
   .h-5 {
     height: 1.25rem;
   }
@@ -987,6 +983,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
+  .w-\\[165px\\] {
+    width: 165px;
+  }
+
+  .min-w-\\[165px\\] {
+    min-width: 165px;
+  }
+
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1007,6 +1011,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 20rem;
   }
 
+  .max-w-\\[165px\\] {
+    max-width: 165px;
+  }
+
   .flex-none {
     flex: none;
   }
@@ -1525,6 +1533,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -1919,6 +1932,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 2rem;
     }
 
+    .md\\:my-auto {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
     .md\\:mb-0 {
       margin-bottom: 0px;
     }
@@ -1979,15 +1997,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 68px;
     }
 
-    .md\\:h-full {
-      height: 100%;
-    }
-
     .md\\:h-max {
       height: -moz-max-content;
       height: max-content;
     }
 
+    .md\\:max-h-\\[220px\\] {
+      max-height: 220px;
+    }
+
     .md\\:min-h-\\[244px\\] {
       min-height: 244px;
     }
@@ -2036,10 +2054,22 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 100%;
     }
 
+    .md\\:w-auto {
+      width: auto;
+    }
+
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
 
+    .md\\:max-w-\\[200px\\] {
+      max-width: 200px;
+    }
+
     .md\\:max-w-full {
       max-width: 100%;
     }

package/dist/tailwind/tailwind.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAu1E1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n  /*\n! tailwindcss v3.3.3 | 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.\n*/\n\n  html {\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: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,\n      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n      'Noto Color Emoji';\n    /* 4 */\n    font-feature-settings: normal;\n    /* 5 */\n    font-variation-settings: normal;\n    /* 6 */\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. 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-size: 1em;\n    /* 2 */\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    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  [type='button'],\n  [type='reset'],\n  [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] {\n    display: none;\n  }\n\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  }\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  }\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  .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  .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-auto {\n    margin-left: auto;\n    margin-right: auto;\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  .ml-0 {\n    margin-left: 0px;\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-4 {\n    margin-left: 1rem;\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-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-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  .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-16 {\n    height: 4rem;\n  }\n\n  .h-2 {\n    height: 0.5rem;\n  }\n\n  .h-2\\\\.5 {\n    height: 0.625rem;\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-40 {\n    height: 10rem;\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-\\\\[49px\\\\] {\n    height: 49px;\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  .w-1\\\\/2 {\n    width: 50%;\n  }\n\n  .w-1\\\\/3 {\n    width: 33.333333%;\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-16 {\n    width: 4rem;\n  }\n\n  .w-2 {\n    width: 0.5rem;\n  }\n\n  .w-2\\\\.5 {\n    width: 0.625rem;\n  }\n\n  .w-2\\\\/3 {\n    width: 66.666667%;\n  }\n\n  .w-20 {\n    width: 5rem;\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-\\\\[296px\\\\] {\n    width: 296px;\n  }\n\n  .w-\\\\[328px\\\\] {\n    width: 328px;\n  }\n\n  .w-auto {\n    width: auto;\n  }\n\n  .w-full {\n    width: 100%;\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  .cursor-pointer {\n    cursor: pointer;\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-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-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  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .whitespace-nowrap {\n    white-space: nowrap;\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-blue-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 200 253 / var(--tw-border-opacity));\n  }\n\n  .border-brand-1 {\n    --tw-border-opacity: 1;\n    border-color: rgb(0 85 154 / var(--tw-border-opacity));\n  }\n\n  .border-dark-6 {\n    --tw-border-opacity: 1;\n    border-color: rgb(46 46 46 / var(--tw-border-opacity));\n  }\n\n  .border-dark-8 {\n    --tw-border-opacity: 1;\n    border-color: rgb(136 136 136 / var(--tw-border-opacity));\n  }\n\n  .border-dark-9 {\n    --tw-border-opacity: 1;\n    border-color: rgb(35 35 35 / var(--tw-border-opacity));\n  }\n\n  .border-green-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(106 195 34 / var(--tw-border-opacity));\n  }\n\n  .border-green-500 {\n    --tw-border-opacity: 1;\n    border-color: rgb(80 167 24 / var(--tw-border-opacity));\n  }\n\n  .border-grey-100 {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 255 255 / var(--tw-border-opacity));\n  }\n\n  .border-grey-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(238 238 238 / var(--tw-border-opacity));\n  }\n\n  .border-grey-300 {\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  }\n\n  .border-grey-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(153 153 153 / var(--tw-border-opacity));\n  }\n\n  .border-white {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 255 255 / var(--tw-border-opacity));\n  }\n\n  .border-yellow-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 204 0 / var(--tw-border-opacity));\n  }\n\n  .bg-\\\\[\\\\#2C2C2C\\\\] {\n    --tw-bg-opacity: 1;\n    background-color: rgb(44 44 44 / var(--tw-bg-opacity));\n  }\n\n  .bg-black {\n    --tw-bg-opacity: 1;\n    background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(225 240 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(147 200 253 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-600 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(3 86 168 / var(--tw-bg-opacity));\n  }\n\n  .bg-brand-1 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(0 85 154 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-3 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(37 37 37 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-4 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 30 30 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-5 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(18 18 18 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-6 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(46 46 46 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(151 219 83 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-400 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(106 195 34 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(80 167 24 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(221 221 221 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-600 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(51 51 51 / var(--tw-bg-opacity));\n  }\n\n  .bg-orange-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 238 204 / var(--tw-bg-opacity));\n  }\n\n  .bg-white {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-yellow-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 220 63 / var(--tw-bg-opacity));\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-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-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 {\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .py-0\\\\.5 {\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\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 {\n    padding-left: 0px;\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-2 {\n    padding-left: 0.5rem;\n  }\n\n  .pl-4 {\n    padding-left: 1rem;\n  }\n\n  .pl-px {\n    padding-left: 1px;\n  }\n\n  .pr-14 {\n    padding-right: 3.5rem;\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-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  .text-end {\n    text-align: end;\n  }\n\n  .font-sans {\n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,\n      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n      'Noto Color Emoji';\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-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));\n  }\n\n  .text-\\\\[\\\\#FFFFFF\\\\] {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .text-black {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n  }\n\n  .text-blue-300 {\n    --tw-text-opacity: 1;\n    color: rgb(90 171 252 / var(--tw-text-opacity));\n  }\n\n  .text-blue-500 {\n    --tw-text-opacity: 1;\n    color: rgb(4 104 203 / var(--tw-text-opacity));\n  }\n\n  .text-blue-600 {\n    --tw-text-opacity: 1;\n    color: rgb(3 86 168 / var(--tw-text-opacity));\n  }\n\n  .text-brand-1 {\n    --tw-text-opacity: 1;\n    color: rgb(0 85 154 / var(--tw-text-opacity));\n  }\n\n  .text-dark-5 {\n    --tw-text-opacity: 1;\n    color: rgb(18 18 18 / var(--tw-text-opacity));\n  }\n\n  .text-dark-6 {\n    --tw-text-opacity: 1;\n    color: rgb(46 46 46 / var(--tw-text-opacity));\n  }\n\n  .text-dark-7 {\n    --tw-text-opacity: 1;\n    color: rgb(224 224 224 / var(--tw-text-opacity));\n  }\n\n  .text-green-300 {\n    --tw-text-opacity: 1;\n    color: rgb(151 219 83 / var(--tw-text-opacity));\n  }\n\n  .text-green-400 {\n    --tw-text-opacity: 1;\n    color: rgb(106 195 34 / var(--tw-text-opacity));\n  }\n\n  .text-green-500 {\n    --tw-text-opacity: 1;\n    color: rgb(80 167 24 / var(--tw-text-opacity));\n  }\n\n  .text-grey-100 {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .text-grey-300 {\n    --tw-text-opacity: 1;\n    color: rgb(221 221 221 / var(--tw-text-opacity));\n  }\n\n  .text-grey-400 {\n    --tw-text-opacity: 1;\n    color: rgb(153 153 153 / var(--tw-text-opacity));\n  }\n\n  .text-grey-500 {\n    --tw-text-opacity: 1;\n    color: rgb(102 102 102 / var(--tw-text-opacity));\n  }\n\n  .text-grey-600 {\n    --tw-text-opacity: 1;\n    color: rgb(51 51 51 / var(--tw-text-opacity));\n  }\n\n  .text-orange-400 {\n    --tw-text-opacity: 1;\n    color: rgb(255 122 0 / var(--tw-text-opacity));\n  }\n\n  .text-orange-500 {\n    --tw-text-opacity: 1;\n    color: rgb(219 93 0 / var(--tw-text-opacity));\n  }\n\n  .text-white {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .underline {\n    text-decoration-line: underline;\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  .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  .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\\\\: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\\\\: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-8 {\n      margin-top: 2rem;\n      margin-bottom: 2rem;\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\\\\:mt-0 {\n      margin-top: 0px;\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-full {\n      height: 100%;\n    }\n\n    .md\\\\:h-max {\n      height: -moz-max-content;\n      height: max-content;\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-full {\n      width: 100%;\n    }\n\n    .md\\\\:max-w-\\\\[137px\\\\] {\n      max-width: 137px;\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\\\\:justify-start {\n      justify-content: flex-start;\n    }\n\n    .md\\\\:justify-center {\n      justify-content: center;\n    }\n\n    .md\\\\:gap-2 {\n      gap: 0.5rem;\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-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-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\\\\:self-center {\n      align-self: center;\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 {\n      padding-top: 0.25rem;\n      padding-bottom: 0.25rem;\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-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-3 {\n      padding-top: 0.75rem;\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\\\\:mt-2 {\n      margin-top: 0.5rem;\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\\\\: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\\\\: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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAq3E1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n  /*\n! tailwindcss v3.3.3 | 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.\n*/\n\n  html {\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: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,\n      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n      'Noto Color Emoji';\n    /* 4 */\n    font-feature-settings: normal;\n    /* 5 */\n    font-variation-settings: normal;\n    /* 6 */\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. 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-size: 1em;\n    /* 2 */\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    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  [type='button'],\n  [type='reset'],\n  [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] {\n    display: none;\n  }\n\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  }\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  }\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  .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  .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-auto {\n    margin-left: auto;\n    margin-right: auto;\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  .ml-0 {\n    margin-left: 0px;\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-4 {\n    margin-left: 1rem;\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-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-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  .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-16 {\n    height: 4rem;\n  }\n\n  .h-2 {\n    height: 0.5rem;\n  }\n\n  .h-2\\\\.5 {\n    height: 0.625rem;\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-\\\\[49px\\\\] {\n    height: 49px;\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  .w-1\\\\/2 {\n    width: 50%;\n  }\n\n  .w-1\\\\/3 {\n    width: 33.333333%;\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-16 {\n    width: 4rem;\n  }\n\n  .w-2 {\n    width: 0.5rem;\n  }\n\n  .w-2\\\\.5 {\n    width: 0.625rem;\n  }\n\n  .w-2\\\\/3 {\n    width: 66.666667%;\n  }\n\n  .w-20 {\n    width: 5rem;\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-\\\\[296px\\\\] {\n    width: 296px;\n  }\n\n  .w-\\\\[328px\\\\] {\n    width: 328px;\n  }\n\n  .w-auto {\n    width: auto;\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .w-\\\\[165px\\\\] {\n    width: 165px;\n  }\n\n  .min-w-\\\\[165px\\\\] {\n    min-width: 165px;\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  .max-w-\\\\[165px\\\\] {\n    max-width: 165px;\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  .cursor-pointer {\n    cursor: pointer;\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-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-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  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .whitespace-nowrap {\n    white-space: nowrap;\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-blue-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 200 253 / var(--tw-border-opacity));\n  }\n\n  .border-brand-1 {\n    --tw-border-opacity: 1;\n    border-color: rgb(0 85 154 / var(--tw-border-opacity));\n  }\n\n  .border-dark-6 {\n    --tw-border-opacity: 1;\n    border-color: rgb(46 46 46 / var(--tw-border-opacity));\n  }\n\n  .border-dark-8 {\n    --tw-border-opacity: 1;\n    border-color: rgb(136 136 136 / var(--tw-border-opacity));\n  }\n\n  .border-dark-9 {\n    --tw-border-opacity: 1;\n    border-color: rgb(35 35 35 / var(--tw-border-opacity));\n  }\n\n  .border-green-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(106 195 34 / var(--tw-border-opacity));\n  }\n\n  .border-green-500 {\n    --tw-border-opacity: 1;\n    border-color: rgb(80 167 24 / var(--tw-border-opacity));\n  }\n\n  .border-grey-100 {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 255 255 / var(--tw-border-opacity));\n  }\n\n  .border-grey-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(238 238 238 / var(--tw-border-opacity));\n  }\n\n  .border-grey-300 {\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  }\n\n  .border-grey-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(153 153 153 / var(--tw-border-opacity));\n  }\n\n  .border-white {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 255 255 / var(--tw-border-opacity));\n  }\n\n  .border-yellow-400 {\n    --tw-border-opacity: 1;\n    border-color: rgb(255 204 0 / var(--tw-border-opacity));\n  }\n\n  .bg-\\\\[\\\\#2C2C2C\\\\] {\n    --tw-bg-opacity: 1;\n    background-color: rgb(44 44 44 / var(--tw-bg-opacity));\n  }\n\n  .bg-black {\n    --tw-bg-opacity: 1;\n    background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(225 240 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(147 200 253 / var(--tw-bg-opacity));\n  }\n\n  .bg-blue-600 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(3 86 168 / var(--tw-bg-opacity));\n  }\n\n  .bg-brand-1 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(0 85 154 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-3 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(37 37 37 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-4 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 30 30 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-5 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(18 18 18 / var(--tw-bg-opacity));\n  }\n\n  .bg-dark-6 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(46 46 46 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(151 219 83 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-400 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(106 195 34 / var(--tw-bg-opacity));\n  }\n\n  .bg-green-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(80 167 24 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(221 221 221 / var(--tw-bg-opacity));\n  }\n\n  .bg-grey-600 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(51 51 51 / var(--tw-bg-opacity));\n  }\n\n  .bg-orange-100 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 238 204 / var(--tw-bg-opacity));\n  }\n\n  .bg-white {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  }\n\n  .bg-yellow-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 220 63 / var(--tw-bg-opacity));\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-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-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 {\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .py-0\\\\.5 {\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\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  .px-5 {\n    padding-left: 1.25rem;\n    padding-right: 1.25rem;\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 {\n    padding-left: 0px;\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-2 {\n    padding-left: 0.5rem;\n  }\n\n  .pl-4 {\n    padding-left: 1rem;\n  }\n\n  .pl-px {\n    padding-left: 1px;\n  }\n\n  .pr-14 {\n    padding-right: 3.5rem;\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-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  .text-end {\n    text-align: end;\n  }\n\n  .font-sans {\n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,\n      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n      'Noto Color Emoji';\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-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));\n  }\n\n  .text-\\\\[\\\\#FFFFFF\\\\] {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .text-black {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n  }\n\n  .text-blue-300 {\n    --tw-text-opacity: 1;\n    color: rgb(90 171 252 / var(--tw-text-opacity));\n  }\n\n  .text-blue-500 {\n    --tw-text-opacity: 1;\n    color: rgb(4 104 203 / var(--tw-text-opacity));\n  }\n\n  .text-blue-600 {\n    --tw-text-opacity: 1;\n    color: rgb(3 86 168 / var(--tw-text-opacity));\n  }\n\n  .text-brand-1 {\n    --tw-text-opacity: 1;\n    color: rgb(0 85 154 / var(--tw-text-opacity));\n  }\n\n  .text-dark-5 {\n    --tw-text-opacity: 1;\n    color: rgb(18 18 18 / var(--tw-text-opacity));\n  }\n\n  .text-dark-6 {\n    --tw-text-opacity: 1;\n    color: rgb(46 46 46 / var(--tw-text-opacity));\n  }\n\n  .text-dark-7 {\n    --tw-text-opacity: 1;\n    color: rgb(224 224 224 / var(--tw-text-opacity));\n  }\n\n  .text-green-300 {\n    --tw-text-opacity: 1;\n    color: rgb(151 219 83 / var(--tw-text-opacity));\n  }\n\n  .text-green-400 {\n    --tw-text-opacity: 1;\n    color: rgb(106 195 34 / var(--tw-text-opacity));\n  }\n\n  .text-green-500 {\n    --tw-text-opacity: 1;\n    color: rgb(80 167 24 / var(--tw-text-opacity));\n  }\n\n  .text-grey-100 {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .text-grey-300 {\n    --tw-text-opacity: 1;\n    color: rgb(221 221 221 / var(--tw-text-opacity));\n  }\n\n  .text-grey-400 {\n    --tw-text-opacity: 1;\n    color: rgb(153 153 153 / var(--tw-text-opacity));\n  }\n\n  .text-grey-500 {\n    --tw-text-opacity: 1;\n    color: rgb(102 102 102 / var(--tw-text-opacity));\n  }\n\n  .text-grey-600 {\n    --tw-text-opacity: 1;\n    color: rgb(51 51 51 / var(--tw-text-opacity));\n  }\n\n  .text-orange-400 {\n    --tw-text-opacity: 1;\n    color: rgb(255 122 0 / var(--tw-text-opacity));\n  }\n\n  .text-orange-500 {\n    --tw-text-opacity: 1;\n    color: rgb(219 93 0 / var(--tw-text-opacity));\n  }\n\n  .text-white {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n  }\n\n  .underline {\n    text-decoration-line: underline;\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  .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  .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\\\\: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\\\\: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-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\\\\:mt-0 {\n      margin-top: 0px;\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-full {\n      width: 100%;\n    }\n\n    .md\\\\:w-auto {\n      width: auto;\n    }\n\n    .md\\\\:w-\\\\[165px\\\\] {\n      width: 165px;\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-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\\\\:justify-start {\n      justify-content: flex-start;\n    }\n\n    .md\\\\:justify-center {\n      justify-content: center;\n    }\n\n    .md\\\\:gap-2 {\n      gap: 0.5rem;\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-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-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\\\\:self-center {\n      align-self: center;\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 {\n      padding-top: 0.25rem;\n      padding-bottom: 0.25rem;\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-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-3 {\n      padding-top: 0.75rem;\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\\\\:mt-2 {\n      margin-top: 0.5rem;\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\\\\: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\\\\: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"]}