npm - @kompasid/lit-web-components - Versions diffs - 0.9.18 → 0.9.19 - Mend

@kompasid/lit-web-components 0.9.18 → 0.9.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts +3 -0
package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +78 -33
package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
package/dist/tailwind/tailwind.js +0 -15
package/dist/tailwind/tailwind.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +1 -1
package/src/components/kompasid-grace-period/KompasGracePeriod.ts +82 -35
package/tailwind/tailwind.css +5 -15
package/tailwind/tailwind.ts +0 -15

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts CHANGED Viewed

@@ -54,6 +54,9 @@ export declare class KompasGracePeriod extends LitElement {
     private maxGracePeriod;
     private subscriptionPage;
     private checkoutPage;
+    private tempTextEachDay;
+    private tempButtonA;
+    private tempButtonB;
     private getCountdownGracePeriod;
     private redirectToKnowledgeBase;
     private redirectToBerlangganan;

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js CHANGED Viewed

@@ -59,54 +59,74 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         this.maxGracePeriod = 7;
         this.subscriptionPage = 'https://www.kompas.id/berlangganan';
         this.checkoutPage = 'https://checkoutv2.kompas.id';
+        this.tempTextEachDay = [];
+        this.tempButtonA = {
+            url: '',
+            text: '',
+        };
+        this.tempButtonB = {
+            url: '',
+            text: '',
+        };
     }
     getCountdownGracePeriod() {
         const { totalGracePeriod } = this;
         const { maxGracePeriod } = this;
-        if (totalGracePeriod === 7) {
-            return html `
-        <p>
-          Anda dalam
-          <a
-            href="#"
-            class="text-orange-500 underline font-bold cursor-pointer"
-            @click=${this.redirectToKnowledgeBase}
-          >
-            hari terakhir
-          </a>
-          masa tenggang langganan. Segera perbarui paket langganan untuk tetap
-          mengakses konten premium tanpa batas.
-        </p>
-      `;
-        }
         return html `
-      <p>
-        Masa tenggang langganan Anda tersisa
-        <a
-          href="#"
-          class="text-orange-500 underline font-bold cursor-pointer"
-          @click=${this.redirectToKnowledgeBase}
-        >
-          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
-        >. Segera perbarui paket langganan untuk tetap mengakses konten premium
-        tanpa batas.
-      </p>
+      <p
+        class="message-gp"
+        .innerHTML=${this.tempTextEachDay[maxGracePeriod - totalGracePeriod + 1 - 1]}
+      ></p>
     `;
+        // comment old html
+        // if (totalGracePeriod === 7) {
+        //   return html`
+        //     <p>
+        //       Anda dalam
+        //       <a
+        //         href="#"
+        //         class="text-orange-500 underline font-bold cursor-pointer"
+        //         @click=${this.redirectToKnowledgeBase}
+        //       >
+        //         hari terakhir
+        //       </a>
+        //       masa tenggang langganan. Segera perbarui paket langganan untuk tetap
+        //       mengakses konten premium tanpa batas.
+        //     </p>
+        //   `
+        // }
+        // return html`
+        //   <p>
+        //     Masa tenggang langganan Anda tersisa
+        //     <a
+        //       href="#"
+        //       class="text-orange-500 underline font-bold cursor-pointer"
+        //       @click=${this.redirectToKnowledgeBase}
+        //     >
+        //       ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
+        //     >. Segera perbarui paket langganan untuk tetap mengakses konten premium
+        //     tanpa batas.
+        //   </p>
+        // `
     }
     redirectToKnowledgeBase() {
         window.open('https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/', '_blank');
     }
     redirectToBerlangganan() {
+        const { url = '' } = this.tempButtonB;
         this.dataLayeronPerbaruiLanggananButton();
         this.sendGtmEvent('subscribe_button_clicked', true);
-        const url = `${this.subscriptionPage}?open_from=Grace_Period`;
-        window.open(url);
+        const urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`;
+        window.open(urlComputed);
     }
     redirectToCheckout() {
+        const { url = '' } = this.tempButtonA;
         this.dataLayeronPerbaruiLanggananButton();
         const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        window.open(`${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`);
+        const defaultPath = url ||
+            `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`;
+        window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`);
     }
     getGtmParams(excludeSubscriptionParams = false) {
         const gtmParams = {};
@@ -169,6 +189,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     }
     gracePeriodTemplate() {
         const { isColumn, isBackgroundOnContentOnly } = this;
+        const { text: textA = '' } = this.tempButtonA;
+        const { text: textB = '' } = this.tempButtonB;
         const wrapperColumnClass = isColumn
             ? 'rounded-lg'
             : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4';
@@ -198,14 +220,14 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
                   @click=${this.redirectToCheckout}
                   class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
                 >
-                  Perbarui Langganan
+                  ${textA || 'Perbarui Langganan'}
                 </button>
                 <div class="md:block hidden">
                   <button
                     @click=${this.redirectToBerlangganan}
                     class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
                   >
-                    Paket Lainnya
+                    ${textB || 'Paket Lainnya'}
                   </button>
                 </div>
                 <div class="md:hidden block">
@@ -213,7 +235,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
                     @click=${this.redirectToBerlangganan}
                     class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
                   >
-                    Lihat Paket Lainnya
+                    ${textB || 'Lihat Paket Lainnya'}
                   </button>
                 </div>
               </div>
@@ -223,6 +245,13 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     `;
     }
     async connectedCallback() {
+        // Constructing the URL with parameters
+        const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`;
+        const response = await fetch(endpoint);
+        const result = await response.json();
+        this.tempTextEachDay = result.message;
+        this.tempButtonA = result.buttonA;
+        this.tempButtonB = result.buttonB;
         super.connectedCallback();
         this.sendGtmEvent('paywall_viewed');
         this.dataLayeronGracePeriod();
@@ -250,6 +279,13 @@ KompasGracePeriod.styles = [
         height: 100%;
         width: 100%;
       }
+      .message-gp > a {
+        color: #db5d00;
+        text-decoration-line: underline;
+        font-weight: 700;
+        cursor: pointer;
+      }
     `,
     TWStyles,
 ];
@@ -328,6 +364,15 @@ __decorate([
 __decorate([
     state()
 ], KompasGracePeriod.prototype, "checkoutPage", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempTextEachDay", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempButtonA", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempButtonB", void 0);
 KompasGracePeriod = __decorate([
     customElement('kompasid-grace-period')
 ], KompasGracePeriod);

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod 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 TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property isEpaper = is paywall opened in epaper page\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n * property tracker_epaper_edition = the edition of epaper viewed by user\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam\n <a\n href=\"#\"\n class=\"text-orange-500 underline font-bold cursor-pointer\"\n @click=${this.redirectToKnowledgeBase}\n >\n hari terakhir\n </a>\n masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n mengakses konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <a\n href=\"#\"\n class=\"text-orange-500 underline font-bold cursor-pointer\"\n @click=${this.redirectToKnowledgeBase}\n >\n ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const url = `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(url)\n }\n\n private redirectToCheckout(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`\n )\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain \|\| 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type \|\| 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n const { isColumn, isBackgroundOnContentOnly } = this\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n Perbarui Langganan\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n Paket Lainnya\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n Lihat Paket Lainnya\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod 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 .message-gp > a {\n color: #db5d00;\n text-decoration-line: underline;\n font-weight: 700;\n cursor: pointer;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property isEpaper = is paywall opened in epaper page\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n * property tracker_epaper_edition = the edition of epaper viewed by user\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n @state() private tempTextEachDay = []\n @state() private tempButtonA: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n @state() private tempButtonB: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n return html`\n <p\n class=\"message-gp\"\n .innerHTML=${this.tempTextEachDay[\n maxGracePeriod - totalGracePeriod + 1 - 1\n ]}\n ></p>\n `\n // comment old html\n // if (totalGracePeriod === 7) {\n // return html`\n // <p>\n // Anda dalam\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // hari terakhir\n // </a>\n // masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n // mengakses konten premium tanpa batas.\n // </p>\n // `\n // }\n // return html`\n // <p>\n // Masa tenggang langganan Anda tersisa\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n // >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n // tanpa batas.\n // </p>\n // `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n const { url = '' } = this.tempButtonB\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const urlComputed = url \|\| `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(urlComputed)\n }\n\n private redirectToCheckout(): void {\n const { url = '' } = this.tempButtonA\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n const defaultPath =\n url \|\|\n `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`\n\n window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain \|\| 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type \|\| 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n const { isColumn, isBackgroundOnContentOnly } = this\n\n const { text: textA = '' } = this.tempButtonA\n\n const { text: textB = '' } = this.tempButtonB\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n ${textA \|\| 'Perbarui Langganan'}\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Paket Lainnya'}\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Lihat Paket Lainnya'}\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n // Constructing the URL with parameters\n const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`\n const response = await fetch(endpoint)\n const result = await response.json()\n this.tempTextEachDay = result.message\n this.tempButtonA = result.buttonA\n this.tempButtonB = result.buttonB\n\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}

package/dist/tailwind/tailwind.js CHANGED Viewed

@@ -1062,11 +1062,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 80rem;
   }
-  .max-w-max {
-    max-width: -moz-max-content;
-    max-width: max-content;
-  }
   .max-w-screen-md {
     max-width: 768px;
   }
@@ -1453,11 +1448,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
   }
-  .bg-\\[\\#E1F0FF\\] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
-  }
   .bg-\\[\\#FFFFFF\\] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -1695,11 +1685,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 1.25rem;
   }
-  .py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
   .py-\\[5\\.6px\\] {
     padding-top: 5.6px;
     padding-bottom: 5.6px;

package/dist/tailwind/tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tailwind.js","sourceRoot":"","sources":["../../tailwind/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqoF1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n ,\n ::before,\n ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n /\n! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com\n/\n\n /\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n/\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n /* 1 /\n border-width: 0;\n / 2 /\n border-style: solid;\n / 2 /\n border-color: currentColor;\n / 2 /\n }\n\n ::before,\n ::after {\n --tw-content: '';\n }\n\n /\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured sans font-family by default.\n5. Use the user's configured sans font-feature-settings by default.\n6. Use the user's configured sans font-variation-settings by default.\n7. Disable tap highlights on iOS\n/\n\n html,\n :host {\n line-height: 1.5;\n / 1 /\n -webkit-text-size-adjust: 100%;\n / 2 /\n -moz-tab-size: 4;\n / 3 /\n -o-tab-size: 4;\n tab-size: 4;\n / 3 /\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n / 4 /\n font-feature-settings: normal;\n / 5 /\n font-variation-settings: normal;\n / 6 /\n -webkit-tap-highlight-color: transparent;\n / 7 /\n }\n\n /\n1. Remove the margin in all browsers.\n2. Inherit line-height from html so users can set them as a class directly on the html element.\n/\n\n body {\n margin: 0;\n / 1 /\n line-height: inherit;\n / 2 /\n }\n\n /\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n/\n\n hr {\n height: 0;\n / 1 /\n color: inherit;\n / 2 /\n border-top-width: 1px;\n / 3 /\n }\n\n /\nAdd the correct text decoration in Chrome, Edge, and Safari.\n/\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n /\nRemove the default font size and weight for headings.\n/\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /\nReset links to optimize for opt-in styling instead of opt-out.\n/\n\n a {\n color: inherit;\n text-decoration: inherit;\n }\n\n /\nAdd the correct font weight in Edge and Safari.\n/\n\n b,\n strong {\n font-weight: bolder;\n }\n\n /\n1. Use the user's configured mono font-family by default.\n2. Use the user's configured mono font-feature-settings by default.\n3. Use the user's configured mono font-variation-settings by default.\n4. Correct the odd em font sizing in all browsers.\n/\n\n code,\n kbd,\n samp,\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n / 1 /\n font-feature-settings: normal;\n / 2 /\n font-variation-settings: normal;\n / 3 /\n font-size: 1em;\n / 4 /\n }\n\n /\nAdd the correct font size in all browsers.\n/\n\n small {\n font-size: 80%;\n }\n\n /\nPrevent sub and sup elements from affecting the line height in all browsers.\n/\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n /\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n/\n\n table {\n text-indent: 0;\n / 1 /\n border-color: inherit;\n / 2 /\n border-collapse: collapse;\n / 3 /\n }\n\n /\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n/\n\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n / 1 /\n font-feature-settings: inherit;\n / 1 /\n font-variation-settings: inherit;\n / 1 /\n font-size: 100%;\n / 1 /\n font-weight: inherit;\n / 1 /\n line-height: inherit;\n / 1 /\n letter-spacing: inherit;\n / 1 /\n color: inherit;\n / 1 /\n margin: 0;\n / 2 /\n padding: 0;\n / 3 /\n }\n\n /\nRemove the inheritance of text transform in Edge and Firefox.\n/\n\n button,\n select {\n text-transform: none;\n }\n\n /\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n/\n\n button,\n input:where([type='button']),\n input:where([type='reset']),\n input:where([type='submit']) {\n -webkit-appearance: button;\n / 1 /\n background-color: transparent;\n / 2 /\n background-image: none;\n / 2 /\n }\n\n /\nUse the modern Firefox focus style for all focusable elements.\n/\n\n :-moz-focusring {\n outline: auto;\n }\n\n /\nRemove the additional :invalid styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n/\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n /\nAdd the correct vertical alignment in Chrome and Firefox.\n/\n\n progress {\n vertical-align: baseline;\n }\n\n /\nCorrect the cursor style of increment and decrement buttons in Safari.\n/\n\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n /\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n/\n\n [type='search'] {\n -webkit-appearance: textfield;\n / 1 /\n outline-offset: -2px;\n / 2 /\n }\n\n /\nRemove the inner padding in Chrome and Safari on macOS.\n/\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n /\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to inherit in Safari.\n/\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n / 1 /\n font: inherit;\n / 2 /\n }\n\n /\nAdd the correct display in Chrome and Safari.\n/\n\n summary {\n display: list-item;\n }\n\n /\nRemoves the default spacing and border for appropriate elements.\n/\n\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n fieldset {\n margin: 0;\n padding: 0;\n }\n\n legend {\n padding: 0;\n }\n\n ol,\n ul,\n menu {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /\nReset default styling for dialogs.\n/\n\n dialog {\n padding: 0;\n }\n\n /\nPrevent resizing textareas horizontally by default.\n/\n\n textarea {\n resize: vertical;\n }\n\n /\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n/\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n opacity: 1;\n / 1 /\n color: #9ca3af;\n / 2 /\n }\n\n input::placeholder,\n textarea::placeholder {\n opacity: 1;\n / 1 /\n color: #9ca3af;\n / 2 /\n }\n\n /\nSet the default cursor for buttons.\n/\n\n button,\n [role='button'] {\n cursor: pointer;\n }\n\n /\nMake sure disabled buttons don't get the pointer cursor.\n/\n\n :disabled {\n cursor: default;\n }\n\n /\n1. Make replaced elements display: block by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add vertical-align: middle to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n/\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n / 1 /\n vertical-align: middle;\n / 2 /\n }\n\n /\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n/\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n / Make elements with the HTML hidden attribute stay hidden by default /\n\n [hidden]:where(:not([hidden='until-found'])) {\n display: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .static {\n position: static;\n }\n\n .fixed {\n position: fixed;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .sticky {\n position: sticky;\n }\n\n .inset-0 {\n inset: 0px;\n }\n\n .-bottom-6 {\n bottom: -1.5rem;\n }\n\n .-top-2 {\n top: -0.5rem;\n }\n\n .-top-\\\\[12px\\\\] {\n top: -12px;\n }\n\n .bottom-0 {\n bottom: 0px;\n }\n\n .left-0 {\n left: 0px;\n }\n\n .left-4 {\n left: 1rem;\n }\n\n .right-0 {\n right: 0px;\n }\n\n .top-0 {\n top: 0px;\n }\n\n .z-0 {\n z-index: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-20 {\n z-index: 20;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-\\\\[100\\\\] {\n z-index: 100;\n }\n\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .m-6 {\n margin: 1.5rem;\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-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n }\n\n .my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n\n .my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n }\n\n .my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n .-ml-2 {\n margin-left: -0.5rem;\n }\n\n .-mt-24 {\n margin-top: -6rem;\n }\n\n .-mt-7 {\n margin-top: -1.75rem;\n }\n\n .mb-0 {\n margin-bottom: 0px;\n }\n\n .mb-1 {\n margin-bottom: 0.25rem;\n }\n\n .mb-2 {\n margin-bottom: 0.5rem;\n }\n\n .mb-3 {\n margin-bottom: 0.75rem;\n }\n\n .mb-4 {\n margin-bottom: 1rem;\n }\n\n .mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .mb-8 {\n margin-bottom: 2rem;\n }\n\n .ml-0\\\\.5 {\n margin-left: 0.125rem;\n }\n\n .ml-1 {\n margin-left: 0.25rem;\n }\n\n .ml-2 {\n margin-left: 0.5rem;\n }\n\n .ml-3 {\n margin-left: 0.75rem;\n }\n\n .ml-8 {\n margin-left: 2rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .mr-10 {\n margin-right: 2.5rem;\n }\n\n .mr-2 {\n margin-right: 0.5rem;\n }\n\n .mr-3 {\n margin-right: 0.75rem;\n }\n\n .mr-3\\\\.5 {\n margin-right: 0.875rem;\n }\n\n .mr-4 {\n margin-right: 1rem;\n }\n\n .mr-6 {\n margin-right: 1.5rem;\n }\n\n .mt-0\\\\.5 {\n margin-top: 0.125rem;\n }\n\n .mt-1 {\n margin-top: 0.25rem;\n }\n\n .mt-2 {\n margin-top: 0.5rem;\n }\n\n .mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .mt-3 {\n margin-top: 0.75rem;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .mt-6 {\n margin-top: 1.5rem;\n }\n\n .mt-8 {\n margin-top: 2rem;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .aspect-video {\n aspect-ratio: 16 / 9;\n }\n\n .h-10 {\n height: 2.5rem;\n }\n\n .h-12 {\n height: 3rem;\n }\n\n .h-14 {\n height: 3.5rem;\n }\n\n .h-16 {\n height: 4rem;\n }\n\n .h-2 {\n height: 0.5rem;\n }\n\n .h-20 {\n height: 5rem;\n }\n\n .h-3 {\n height: 0.75rem;\n }\n\n .h-4 {\n height: 1rem;\n }\n\n .h-5 {\n height: 1.25rem;\n }\n\n .h-6 {\n height: 1.5rem;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .h-9 {\n height: 2.25rem;\n }\n\n .h-\\\\[17px\\\\] {\n height: 17px;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .h-\\\\[76px\\\\] {\n height: 76px;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .w-1\\\\/2 {\n width: 50%;\n }\n\n .w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .w-1\\\\/4 {\n width: 25%;\n }\n\n .w-1\\\\/5 {\n width: 20%;\n }\n\n .w-10 {\n width: 2.5rem;\n }\n\n .w-11\\\\/12 {\n width: 91.666667%;\n }\n\n .w-14 {\n width: 3.5rem;\n }\n\n .w-16 {\n width: 4rem;\n }\n\n .w-2 {\n width: 0.5rem;\n }\n\n .w-2\\\\/3 {\n width: 66.666667%;\n }\n\n .w-20 {\n width: 5rem;\n }\n\n .w-3 {\n width: 0.75rem;\n }\n\n .w-3\\\\/4 {\n width: 75%;\n }\n\n .w-32 {\n width: 8rem;\n }\n\n .w-4 {\n width: 1rem;\n }\n\n .w-40 {\n width: 10rem;\n }\n\n .w-5 {\n width: 1.25rem;\n }\n\n .w-6 {\n width: 1.5rem;\n }\n\n .w-60 {\n width: 15rem;\n }\n\n .w-76 {\n width: 19rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n .w-9 {\n width: 2.25rem;\n }\n\n .w-\\\\[120px\\\\] {\n width: 120px;\n }\n\n .w-\\\\[138px\\\\] {\n width: 138px;\n }\n\n .w-\\\\[216px\\\\] {\n width: 216px;\n }\n\n .w-\\\\[276px\\\\] {\n width: 276px;\n }\n\n .w-\\\\[296px\\\\] {\n width: 296px;\n }\n\n .w-\\\\[312px\\\\] {\n width: 312px;\n }\n\n .w-\\\\[328px\\\\] {\n width: 328px;\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .max-w-7xl {\n max-width: 80rem;\n }\n\n .max-w-max {\n max-width: -moz-max-content;\n max-width: max-content;\n }\n\n .max-w-screen-md {\n max-width: 768px;\n }\n\n .max-w-screen-sm {\n max-width: 640px;\n }\n\n .max-w-xl {\n max-width: 36rem;\n }\n\n .max-w-xs {\n max-width: 20rem;\n }\n\n .flex-none {\n flex: none;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .scroll-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem;\n }\n\n .grid-flow-row {\n grid-auto-flow: row;\n }\n\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n\n .place-items-center {\n place-items: center;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-evenly {\n justify-content: space-evenly;\n }\n\n .gap-1 {\n gap: 0.25rem;\n }\n\n .gap-4 {\n gap: 1rem;\n }\n\n .gap-6 {\n gap: 1.5rem;\n }\n\n .gap-8 {\n gap: 2rem;\n }\n\n .gap-y-2 {\n row-gap: 0.5rem;\n }\n\n .gap-y-4 {\n row-gap: 1rem;\n }\n\n .space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n\n .space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .self-center {\n align-self: center;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .rounded {\n border-radius: 0.25rem;\n }\n\n .rounded-\\\\[10px\\\\] {\n border-radius: 10px;\n }\n\n .rounded-full {\n border-radius: 9999px;\n }\n\n .rounded-lg {\n border-radius: 0.5rem;\n }\n\n .rounded-md {\n border-radius: 0.375rem;\n }\n\n .rounded-sm {\n border-radius: 0.125rem;\n }\n\n .rounded-xl {\n border-radius: 0.75rem;\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: 0.75rem;\n border-bottom-left-radius: 0.75rem;\n }\n\n .border {\n border-width: 1px;\n }\n\n .border-2 {\n border-width: 2px;\n }\n\n .border-b {\n border-bottom-width: 1px;\n }\n\n .border-b-2 {\n border-bottom-width: 2px;\n }\n\n .border-t {\n border-top-width: 1px;\n }\n\n .border-\\\\[\\\\#DDD\\\\] {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(147 200 253 / var(--tw-border-opacity, 1));\n }\n\n .border-brand-1 {\n --tw-border-opacity: 1;\n border-color: rgb(0 85 154 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-6 {\n --tw-border-opacity: 1;\n border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-8 {\n --tw-border-opacity: 1;\n border-color: rgb(136 136 136 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-9 {\n --tw-border-opacity: 1;\n border-color: rgb(35 35 35 / var(--tw-border-opacity, 1));\n }\n\n .border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(106 195 34 / var(--tw-border-opacity, 1));\n }\n\n .border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(80 167 24 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-100 {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-200 {\n --tw-border-opacity: 1;\n border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-300 {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-400 {\n --tw-border-opacity: 1;\n border-color: rgb(153 153 153 / var(--tw-border-opacity, 1));\n }\n\n .border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));\n }\n\n .bg-\\\\[\\\\#2C2C2C\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#E1F0FF\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#FFFFFF\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#e1f0ff\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(147 200 253 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 86 168 / var(--tw-bg-opacity, 1));\n }\n\n .bg-brand-1 {\n --tw-bg-opacity: 1;\n background-color: rgb(0 85 154 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 37 37 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-5 {\n --tw-bg-opacity: 1;\n background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(151 219 83 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(80 167 24 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 225 207 / var(--tw-bg-opacity, 1));\n }\n\n .bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 220 63 / var(--tw-bg-opacity, 1));\n }\n\n .bg-opacity-75 {\n --tw-bg-opacity: 0.75;\n }\n\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n\n .object-scale-down {\n -o-object-fit: scale-down;\n object-fit: scale-down;\n }\n\n .p-1 {\n padding: 0.25rem;\n }\n\n .p-1\\\\.5 {\n padding: 0.375rem;\n }\n\n .p-2 {\n padding: 0.5rem;\n }\n\n .p-3 {\n padding: 0.75rem;\n }\n\n .p-4 {\n padding: 1rem;\n }\n\n .p-5 {\n padding: 1.25rem;\n }\n\n .p-6 {\n padding: 1.5rem;\n }\n\n .px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .px-1\\\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n }\n\n .px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .px-\\\\[10px\\\\] {\n padding-left: 10px;\n padding-right: 10px;\n }\n\n .px-\\\\[22px\\\\] {\n padding-left: 22px;\n padding-right: 22px;\n }\n\n .py-0\\\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n\n .py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n\n .py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n }\n\n .py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n .py-\\\\[5\\\\.6px\\\\] {\n padding-top: 5.6px;\n padding-bottom: 5.6px;\n }\n\n .pb-1 {\n padding-bottom: 0.25rem;\n }\n\n .pb-2 {\n padding-bottom: 0.5rem;\n }\n\n .pb-20 {\n padding-bottom: 5rem;\n }\n\n .pb-3 {\n padding-bottom: 0.75rem;\n }\n\n .pb-32 {\n padding-bottom: 8rem;\n }\n\n .pb-4 {\n padding-bottom: 1rem;\n }\n\n .pb-5 {\n padding-bottom: 1.25rem;\n }\n\n .pb-6 {\n padding-bottom: 1.5rem;\n }\n\n .pb-8 {\n padding-bottom: 2rem;\n }\n\n .pl-0\\\\.5 {\n padding-left: 0.125rem;\n }\n\n .pl-1 {\n padding-left: 0.25rem;\n }\n\n .pl-11 {\n padding-left: 2.75rem;\n }\n\n .pl-14 {\n padding-left: 3.5rem;\n }\n\n .pl-2 {\n padding-left: 0.5rem;\n }\n\n .pl-4 {\n padding-left: 1rem;\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .pr-1 {\n padding-right: 0.25rem;\n }\n\n .pr-2 {\n padding-right: 0.5rem;\n }\n\n .pr-3 {\n padding-right: 0.75rem;\n }\n\n .pt-0 {\n padding-top: 0px;\n }\n\n .pt-0\\\\.5 {\n padding-top: 0.125rem;\n }\n\n .pt-1 {\n padding-top: 0.25rem;\n }\n\n .pt-10 {\n padding-top: 2.5rem;\n }\n\n .pt-2 {\n padding-top: 0.5rem;\n }\n\n .pt-4 {\n padding-top: 1rem;\n }\n\n .pt-6 {\n padding-top: 1.5rem;\n }\n\n .pt-\\\\[5px\\\\] {\n padding-top: 5px;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-start {\n text-align: start;\n }\n\n .font-sans {\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n }\n\n .font-serif {\n font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n }\n\n .text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .text-\\\\[11px\\\\] {\n font-size: 11px;\n }\n\n .text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .text-xxs {\n font-size: 0.625rem;\n }\n\n .font-bold {\n font-weight: 700;\n }\n\n .font-medium {\n font-weight: 500;\n }\n\n .font-normal {\n font-weight: 400;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .leading-4 {\n line-height: 1rem;\n }\n\n .leading-5 {\n line-height: 1.25rem;\n }\n\n .leading-\\\\[18px\\\\] {\n line-height: 18px;\n }\n\n .leading-\\\\[22px\\\\] {\n line-height: 22px;\n }\n\n .leading-\\\\[30px\\\\] {\n line-height: 30px;\n }\n\n .leading-none {\n line-height: 1;\n }\n\n .leading-normal {\n line-height: 1.5;\n }\n\n .leading-tight {\n line-height: 1.25;\n }\n\n .tracking-wide {\n letter-spacing: 0.025em;\n }\n\n .text-\\\\[\\\\#00559a\\\\] {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#333\\\\] {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#666666\\\\] {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#FFFFFF\\\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-200 {\n --tw-text-opacity: 1;\n color: rgb(147 200 253 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-300 {\n --tw-text-opacity: 1;\n color: rgb(90 171 252 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(4 104 203 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(3 86 168 / var(--tw-text-opacity, 1));\n }\n\n .text-brand-1 {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-5 {\n --tw-text-opacity: 1;\n color: rgb(18 18 18 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-6 {\n --tw-text-opacity: 1;\n color: rgb(46 46 46 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-7 {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n }\n\n .text-green-300 {\n --tw-text-opacity: 1;\n color: rgb(151 219 83 / var(--tw-text-opacity, 1));\n }\n\n .text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(106 195 34 / var(--tw-text-opacity, 1));\n }\n\n .text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(80 167 24 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-100 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-300 {\n --tw-text-opacity: 1;\n color: rgb(221 221 221 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-400 {\n --tw-text-opacity: 1;\n color: rgb(153 153 153 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-500 {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-600 {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-700 {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(255 122 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(219 93 0 / var(--tw-text-opacity, 1));\n }\n\n .text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(174 9 27 / var(--tw-text-opacity, 1));\n }\n\n .text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .transition {\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .hover\\\\:bg-\\\\[\\\\#f3f4f6\\\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .focus\\\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n @media (min-width: 640px) {\n .sm\\\\:block {\n display: block;\n }\n\n .sm\\\\:inline {\n display: inline;\n }\n\n .sm\\\\:w-3\\\\/4 {\n width: 75%;\n }\n\n .sm\\\\:max-w-lg {\n max-width: 32rem;\n }\n\n .sm\\\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\\\:justify-center {\n justify-content: center;\n }\n\n .sm\\\\:gap-6 {\n gap: 1.5rem;\n }\n\n .sm\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .sm\\\\:px-16 {\n padding-left: 4rem;\n padding-right: 4rem;\n }\n }\n\n @media (min-width: 768px) {\n .md\\\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n\n .md\\\\:my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .md\\\\:my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n }\n\n .md\\\\:my-auto {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .md\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .md\\\\:mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .md\\\\:ml-1 {\n margin-left: 0.25rem;\n }\n\n .md\\\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .md\\\\:mr-5 {\n margin-right: 1.25rem;\n }\n\n .md\\\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .md\\\\:mt-2 {\n margin-top: 0.5rem;\n }\n\n .md\\\\:mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .md\\\\:mt-3 {\n margin-top: 0.75rem;\n }\n\n .md\\\\:mt-4 {\n margin-top: 1rem;\n }\n\n .md\\\\:mt-8 {\n margin-top: 2rem;\n }\n\n .md\\\\:block {\n display: block;\n }\n\n .md\\\\:flex {\n display: flex;\n }\n\n .md\\\\:hidden {\n display: none;\n }\n\n .md\\\\:h-12 {\n height: 3rem;\n }\n\n .md\\\\:h-5 {\n height: 1.25rem;\n }\n\n .md\\\\:h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .md\\\\:h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .md\\\\:max-h-\\\\[220px\\\\] {\n max-height: 220px;\n }\n\n .md\\\\:min-h-\\\\[244px\\\\] {\n min-height: 244px;\n }\n\n .md\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .md\\\\:w-3\\\\/5 {\n width: 60%;\n }\n\n .md\\\\:w-40 {\n width: 10rem;\n }\n\n .md\\\\:w-5\\\\/12 {\n width: 41.666667%;\n }\n\n .md\\\\:w-52 {\n width: 13rem;\n }\n\n .md\\\\:w-\\\\[350px\\\\] {\n width: 350px;\n }\n\n .md\\\\:w-\\\\[370px\\\\] {\n width: 370px;\n }\n\n .md\\\\:w-\\\\[374px\\\\] {\n width: 374px;\n }\n\n .md\\\\:w-\\\\[400px\\\\] {\n width: 400px;\n }\n\n .md\\\\:w-\\\\[580px\\\\] {\n width: 580px;\n }\n\n .md\\\\:w-auto {\n width: auto;\n }\n\n .md\\\\:w-full {\n width: 100%;\n }\n\n .md\\\\:max-w-\\\\[137px\\\\] {\n max-width: 137px;\n }\n\n .md\\\\:max-w-\\\\[200px\\\\] {\n max-width: 200px;\n }\n\n .md\\\\:max-w-\\\\[464px\\\\] {\n max-width: 464px;\n }\n\n .md\\\\:max-w-\\\\[737px\\\\] {\n max-width: 737px;\n }\n\n .md\\\\:max-w-full {\n max-width: 100%;\n }\n\n .md\\\\:max-w-sm {\n max-width: 24rem;\n }\n\n .md\\\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .md\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\\\:flex-row {\n flex-direction: row;\n }\n\n .md\\\\:flex-col {\n flex-direction: column;\n }\n\n .md\\\\:items-start {\n align-items: flex-start;\n }\n\n .md\\\\:items-center {\n align-items: center;\n }\n\n .md\\\\:justify-start {\n justify-content: flex-start;\n }\n\n .md\\\\:justify-center {\n justify-content: center;\n }\n\n .md\\\\:gap-8 {\n gap: 2rem;\n }\n\n .md\\\\:space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1.25rem * var(--tw-space-x-reverse));\n margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0px * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:self-start {\n align-self: flex-start;\n }\n\n .md\\\\:self-end {\n align-self: flex-end;\n }\n\n .md\\\\:rounded {\n border-radius: 0.25rem;\n }\n\n .md\\\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .md\\\\:p-5 {\n padding: 1.25rem;\n }\n\n .md\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .md\\\\:px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n }\n\n .md\\\\:px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .md\\\\:px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .md\\\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .md\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .md\\\\:py-1\\\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n }\n\n .md\\\\:py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .md\\\\:py-3\\\\.5 {\n padding-top: 0.875rem;\n padding-bottom: 0.875rem;\n }\n\n .md\\\\:py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n .md\\\\:pb-4 {\n padding-bottom: 1rem;\n }\n\n .md\\\\:pb-7 {\n padding-bottom: 1.75rem;\n }\n\n .md\\\\:pt-0 {\n padding-top: 0px;\n }\n\n .md\\\\:pt-3 {\n padding-top: 0.75rem;\n }\n\n .md\\\\:pt-5 {\n padding-top: 1.25rem;\n }\n\n .md\\\\:pt-8 {\n padding-top: 2rem;\n }\n\n .md\\\\:text-left {\n text-align: left;\n }\n\n .md\\\\:text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .md\\\\:text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .md\\\\:text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .md\\\\:text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .md\\\\:leading-6 {\n line-height: 1.5rem;\n }\n\n .md\\\\:tracking-normal {\n letter-spacing: 0em;\n }\n }\n\n @media (min-width: 1024px) {\n .lg\\\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\\\:col-span-3 {\n grid-column: span 3 / span 3;\n }\n\n .lg\\\\:col-span-5 {\n grid-column: span 5 / span 5;\n }\n\n .lg\\\\:col-start-10 {\n grid-column-start: 10;\n }\n\n .lg\\\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .lg\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .lg\\\\:mt-0 {\n margin-top: 0px;\n }\n\n .lg\\\\:block {\n display: block;\n }\n\n .lg\\\\:flex {\n display: flex;\n }\n\n .lg\\\\:hidden {\n display: none;\n }\n\n .lg\\\\:min-h-\\\\[220px\\\\] {\n min-height: 220px;\n }\n\n .lg\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .lg\\\\:w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .lg\\\\:w-\\\\[410px\\\\] {\n width: 410px;\n }\n\n .lg\\\\:w-auto {\n width: auto;\n }\n\n .lg\\\\:max-w-7xl {\n max-width: 80rem;\n }\n\n .lg\\\\:grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n\n .lg\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .lg\\\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\\\:flex-col {\n flex-direction: column;\n }\n\n .lg\\\\:items-center {\n align-items: center;\n }\n\n .lg\\\\:justify-end {\n justify-content: flex-end;\n }\n\n .lg\\\\:justify-between {\n justify-content: space-between;\n }\n\n .lg\\\\:gap-0 {\n gap: 0px;\n }\n\n .lg\\\\:gap-8 {\n gap: 2rem;\n }\n\n .lg\\\\:gap-x-6 {\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n }\n\n .lg\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .lg\\\\:px-24 {\n padding-left: 6rem;\n padding-right: 6rem;\n }\n\n .lg\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .lg\\\\:py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n }\n\n .lg\\\\:pb-0 {\n padding-bottom: 0px;\n }\n\n .lg\\\\:pb-6 {\n padding-bottom: 1.5rem;\n }\n }\n\n @media (min-width: 1280px) {\n .xl\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n }\n\n @media (min-width: 1536px) {\n .\\\\32xl\\\\:w-1\\\\/4 {\n width: 25%;\n }\n }\n`\n"]}
1	+ {"version":3,"file":"tailwind.js","sourceRoot":"","sources":["../../tailwind/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsnF1B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TWStyles = css`\n ,\n ::before,\n ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(4 104 203 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n\n /\n! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com\n/\n\n /\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n/\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n /* 1 /\n border-width: 0;\n / 2 /\n border-style: solid;\n / 2 /\n border-color: currentColor;\n / 2 /\n }\n\n ::before,\n ::after {\n --tw-content: '';\n }\n\n /\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured sans font-family by default.\n5. Use the user's configured sans font-feature-settings by default.\n6. Use the user's configured sans font-variation-settings by default.\n7. Disable tap highlights on iOS\n/\n\n html,\n :host {\n line-height: 1.5;\n / 1 /\n -webkit-text-size-adjust: 100%;\n / 2 /\n -moz-tab-size: 4;\n / 3 /\n -o-tab-size: 4;\n tab-size: 4;\n / 3 /\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n / 4 /\n font-feature-settings: normal;\n / 5 /\n font-variation-settings: normal;\n / 6 /\n -webkit-tap-highlight-color: transparent;\n / 7 /\n }\n\n /\n1. Remove the margin in all browsers.\n2. Inherit line-height from html so users can set them as a class directly on the html element.\n/\n\n body {\n margin: 0;\n / 1 /\n line-height: inherit;\n / 2 /\n }\n\n /\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n/\n\n hr {\n height: 0;\n / 1 /\n color: inherit;\n / 2 /\n border-top-width: 1px;\n / 3 /\n }\n\n /\nAdd the correct text decoration in Chrome, Edge, and Safari.\n/\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n /\nRemove the default font size and weight for headings.\n/\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /\nReset links to optimize for opt-in styling instead of opt-out.\n/\n\n a {\n color: inherit;\n text-decoration: inherit;\n }\n\n /\nAdd the correct font weight in Edge and Safari.\n/\n\n b,\n strong {\n font-weight: bolder;\n }\n\n /\n1. Use the user's configured mono font-family by default.\n2. Use the user's configured mono font-feature-settings by default.\n3. Use the user's configured mono font-variation-settings by default.\n4. Correct the odd em font sizing in all browsers.\n/\n\n code,\n kbd,\n samp,\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;\n / 1 /\n font-feature-settings: normal;\n / 2 /\n font-variation-settings: normal;\n / 3 /\n font-size: 1em;\n / 4 /\n }\n\n /\nAdd the correct font size in all browsers.\n/\n\n small {\n font-size: 80%;\n }\n\n /\nPrevent sub and sup elements from affecting the line height in all browsers.\n/\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n /\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n/\n\n table {\n text-indent: 0;\n / 1 /\n border-color: inherit;\n / 2 /\n border-collapse: collapse;\n / 3 /\n }\n\n /\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n/\n\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n / 1 /\n font-feature-settings: inherit;\n / 1 /\n font-variation-settings: inherit;\n / 1 /\n font-size: 100%;\n / 1 /\n font-weight: inherit;\n / 1 /\n line-height: inherit;\n / 1 /\n letter-spacing: inherit;\n / 1 /\n color: inherit;\n / 1 /\n margin: 0;\n / 2 /\n padding: 0;\n / 3 /\n }\n\n /\nRemove the inheritance of text transform in Edge and Firefox.\n/\n\n button,\n select {\n text-transform: none;\n }\n\n /\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n/\n\n button,\n input:where([type='button']),\n input:where([type='reset']),\n input:where([type='submit']) {\n -webkit-appearance: button;\n / 1 /\n background-color: transparent;\n / 2 /\n background-image: none;\n / 2 /\n }\n\n /\nUse the modern Firefox focus style for all focusable elements.\n/\n\n :-moz-focusring {\n outline: auto;\n }\n\n /\nRemove the additional :invalid styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n/\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n /\nAdd the correct vertical alignment in Chrome and Firefox.\n/\n\n progress {\n vertical-align: baseline;\n }\n\n /\nCorrect the cursor style of increment and decrement buttons in Safari.\n/\n\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n /\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n/\n\n [type='search'] {\n -webkit-appearance: textfield;\n / 1 /\n outline-offset: -2px;\n / 2 /\n }\n\n /\nRemove the inner padding in Chrome and Safari on macOS.\n/\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n /\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to inherit in Safari.\n/\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n / 1 /\n font: inherit;\n / 2 /\n }\n\n /\nAdd the correct display in Chrome and Safari.\n/\n\n summary {\n display: list-item;\n }\n\n /\nRemoves the default spacing and border for appropriate elements.\n/\n\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n fieldset {\n margin: 0;\n padding: 0;\n }\n\n legend {\n padding: 0;\n }\n\n ol,\n ul,\n menu {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /\nReset default styling for dialogs.\n/\n\n dialog {\n padding: 0;\n }\n\n /\nPrevent resizing textareas horizontally by default.\n/\n\n textarea {\n resize: vertical;\n }\n\n /\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n/\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n opacity: 1;\n / 1 /\n color: #9ca3af;\n / 2 /\n }\n\n input::placeholder,\n textarea::placeholder {\n opacity: 1;\n / 1 /\n color: #9ca3af;\n / 2 /\n }\n\n /\nSet the default cursor for buttons.\n/\n\n button,\n [role='button'] {\n cursor: pointer;\n }\n\n /\nMake sure disabled buttons don't get the pointer cursor.\n/\n\n :disabled {\n cursor: default;\n }\n\n /\n1. Make replaced elements display: block by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add vertical-align: middle to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n/\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n / 1 /\n vertical-align: middle;\n / 2 /\n }\n\n /\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n/\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n / Make elements with the HTML hidden attribute stay hidden by default /\n\n [hidden]:where(:not([hidden='until-found'])) {\n display: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .static {\n position: static;\n }\n\n .fixed {\n position: fixed;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .sticky {\n position: sticky;\n }\n\n .inset-0 {\n inset: 0px;\n }\n\n .-bottom-6 {\n bottom: -1.5rem;\n }\n\n .-top-2 {\n top: -0.5rem;\n }\n\n .-top-\\\\[12px\\\\] {\n top: -12px;\n }\n\n .bottom-0 {\n bottom: 0px;\n }\n\n .left-0 {\n left: 0px;\n }\n\n .left-4 {\n left: 1rem;\n }\n\n .right-0 {\n right: 0px;\n }\n\n .top-0 {\n top: 0px;\n }\n\n .z-0 {\n z-index: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-20 {\n z-index: 20;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-\\\\[100\\\\] {\n z-index: 100;\n }\n\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .m-6 {\n margin: 1.5rem;\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-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n }\n\n .my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n\n .my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n }\n\n .my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n .-ml-2 {\n margin-left: -0.5rem;\n }\n\n .-mt-24 {\n margin-top: -6rem;\n }\n\n .-mt-7 {\n margin-top: -1.75rem;\n }\n\n .mb-0 {\n margin-bottom: 0px;\n }\n\n .mb-1 {\n margin-bottom: 0.25rem;\n }\n\n .mb-2 {\n margin-bottom: 0.5rem;\n }\n\n .mb-3 {\n margin-bottom: 0.75rem;\n }\n\n .mb-4 {\n margin-bottom: 1rem;\n }\n\n .mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .mb-8 {\n margin-bottom: 2rem;\n }\n\n .ml-0\\\\.5 {\n margin-left: 0.125rem;\n }\n\n .ml-1 {\n margin-left: 0.25rem;\n }\n\n .ml-2 {\n margin-left: 0.5rem;\n }\n\n .ml-3 {\n margin-left: 0.75rem;\n }\n\n .ml-8 {\n margin-left: 2rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .mr-10 {\n margin-right: 2.5rem;\n }\n\n .mr-2 {\n margin-right: 0.5rem;\n }\n\n .mr-3 {\n margin-right: 0.75rem;\n }\n\n .mr-3\\\\.5 {\n margin-right: 0.875rem;\n }\n\n .mr-4 {\n margin-right: 1rem;\n }\n\n .mr-6 {\n margin-right: 1.5rem;\n }\n\n .mt-0\\\\.5 {\n margin-top: 0.125rem;\n }\n\n .mt-1 {\n margin-top: 0.25rem;\n }\n\n .mt-2 {\n margin-top: 0.5rem;\n }\n\n .mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .mt-3 {\n margin-top: 0.75rem;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .mt-6 {\n margin-top: 1.5rem;\n }\n\n .mt-8 {\n margin-top: 2rem;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .aspect-video {\n aspect-ratio: 16 / 9;\n }\n\n .h-10 {\n height: 2.5rem;\n }\n\n .h-12 {\n height: 3rem;\n }\n\n .h-14 {\n height: 3.5rem;\n }\n\n .h-16 {\n height: 4rem;\n }\n\n .h-2 {\n height: 0.5rem;\n }\n\n .h-20 {\n height: 5rem;\n }\n\n .h-3 {\n height: 0.75rem;\n }\n\n .h-4 {\n height: 1rem;\n }\n\n .h-5 {\n height: 1.25rem;\n }\n\n .h-6 {\n height: 1.5rem;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .h-9 {\n height: 2.25rem;\n }\n\n .h-\\\\[17px\\\\] {\n height: 17px;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .h-\\\\[76px\\\\] {\n height: 76px;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .w-1\\\\/2 {\n width: 50%;\n }\n\n .w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .w-1\\\\/4 {\n width: 25%;\n }\n\n .w-1\\\\/5 {\n width: 20%;\n }\n\n .w-10 {\n width: 2.5rem;\n }\n\n .w-11\\\\/12 {\n width: 91.666667%;\n }\n\n .w-14 {\n width: 3.5rem;\n }\n\n .w-16 {\n width: 4rem;\n }\n\n .w-2 {\n width: 0.5rem;\n }\n\n .w-2\\\\/3 {\n width: 66.666667%;\n }\n\n .w-20 {\n width: 5rem;\n }\n\n .w-3 {\n width: 0.75rem;\n }\n\n .w-3\\\\/4 {\n width: 75%;\n }\n\n .w-32 {\n width: 8rem;\n }\n\n .w-4 {\n width: 1rem;\n }\n\n .w-40 {\n width: 10rem;\n }\n\n .w-5 {\n width: 1.25rem;\n }\n\n .w-6 {\n width: 1.5rem;\n }\n\n .w-60 {\n width: 15rem;\n }\n\n .w-76 {\n width: 19rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n .w-9 {\n width: 2.25rem;\n }\n\n .w-\\\\[120px\\\\] {\n width: 120px;\n }\n\n .w-\\\\[138px\\\\] {\n width: 138px;\n }\n\n .w-\\\\[216px\\\\] {\n width: 216px;\n }\n\n .w-\\\\[276px\\\\] {\n width: 276px;\n }\n\n .w-\\\\[296px\\\\] {\n width: 296px;\n }\n\n .w-\\\\[312px\\\\] {\n width: 312px;\n }\n\n .w-\\\\[328px\\\\] {\n width: 328px;\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .max-w-7xl {\n max-width: 80rem;\n }\n\n .max-w-screen-md {\n max-width: 768px;\n }\n\n .max-w-screen-sm {\n max-width: 640px;\n }\n\n .max-w-xl {\n max-width: 36rem;\n }\n\n .max-w-xs {\n max-width: 20rem;\n }\n\n .flex-none {\n flex: none;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .scroll-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem;\n }\n\n .grid-flow-row {\n grid-auto-flow: row;\n }\n\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n\n .place-items-center {\n place-items: center;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-evenly {\n justify-content: space-evenly;\n }\n\n .gap-1 {\n gap: 0.25rem;\n }\n\n .gap-4 {\n gap: 1rem;\n }\n\n .gap-6 {\n gap: 1.5rem;\n }\n\n .gap-8 {\n gap: 2rem;\n }\n\n .gap-y-2 {\n row-gap: 0.5rem;\n }\n\n .gap-y-4 {\n row-gap: 1rem;\n }\n\n .space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n\n .space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .self-center {\n align-self: center;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .rounded {\n border-radius: 0.25rem;\n }\n\n .rounded-\\\\[10px\\\\] {\n border-radius: 10px;\n }\n\n .rounded-full {\n border-radius: 9999px;\n }\n\n .rounded-lg {\n border-radius: 0.5rem;\n }\n\n .rounded-md {\n border-radius: 0.375rem;\n }\n\n .rounded-sm {\n border-radius: 0.125rem;\n }\n\n .rounded-xl {\n border-radius: 0.75rem;\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: 0.75rem;\n border-bottom-left-radius: 0.75rem;\n }\n\n .border {\n border-width: 1px;\n }\n\n .border-2 {\n border-width: 2px;\n }\n\n .border-b {\n border-bottom-width: 1px;\n }\n\n .border-b-2 {\n border-bottom-width: 2px;\n }\n\n .border-t {\n border-top-width: 1px;\n }\n\n .border-\\\\[\\\\#DDD\\\\] {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(147 200 253 / var(--tw-border-opacity, 1));\n }\n\n .border-brand-1 {\n --tw-border-opacity: 1;\n border-color: rgb(0 85 154 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-6 {\n --tw-border-opacity: 1;\n border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-8 {\n --tw-border-opacity: 1;\n border-color: rgb(136 136 136 / var(--tw-border-opacity, 1));\n }\n\n .border-dark-9 {\n --tw-border-opacity: 1;\n border-color: rgb(35 35 35 / var(--tw-border-opacity, 1));\n }\n\n .border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(106 195 34 / var(--tw-border-opacity, 1));\n }\n\n .border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(80 167 24 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-100 {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-200 {\n --tw-border-opacity: 1;\n border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-300 {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n }\n\n .border-grey-400 {\n --tw-border-opacity: 1;\n border-color: rgb(153 153 153 / var(--tw-border-opacity, 1));\n }\n\n .border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n }\n\n .border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));\n }\n\n .bg-\\\\[\\\\#2C2C2C\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#FFFFFF\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-\\\\[\\\\#e1f0ff\\\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(147 200 253 / var(--tw-bg-opacity, 1));\n }\n\n .bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 86 168 / var(--tw-bg-opacity, 1));\n }\n\n .bg-brand-1 {\n --tw-bg-opacity: 1;\n background-color: rgb(0 85 154 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 37 37 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-5 {\n --tw-bg-opacity: 1;\n background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));\n }\n\n .bg-dark-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(151 219 83 / var(--tw-bg-opacity, 1));\n }\n\n .bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(80 167 24 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n }\n\n .bg-grey-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));\n }\n\n .bg-orange-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));\n }\n\n .bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 225 207 / var(--tw-bg-opacity, 1));\n }\n\n .bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n .bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 220 63 / var(--tw-bg-opacity, 1));\n }\n\n .bg-opacity-75 {\n --tw-bg-opacity: 0.75;\n }\n\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n\n .object-scale-down {\n -o-object-fit: scale-down;\n object-fit: scale-down;\n }\n\n .p-1 {\n padding: 0.25rem;\n }\n\n .p-1\\\\.5 {\n padding: 0.375rem;\n }\n\n .p-2 {\n padding: 0.5rem;\n }\n\n .p-3 {\n padding: 0.75rem;\n }\n\n .p-4 {\n padding: 1rem;\n }\n\n .p-5 {\n padding: 1.25rem;\n }\n\n .p-6 {\n padding: 1.5rem;\n }\n\n .px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .px-1\\\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n }\n\n .px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .px-\\\\[10px\\\\] {\n padding-left: 10px;\n padding-right: 10px;\n }\n\n .px-\\\\[22px\\\\] {\n padding-left: 22px;\n padding-right: 22px;\n }\n\n .py-0\\\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n }\n\n .py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n\n .py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n }\n\n .py-\\\\[5\\\\.6px\\\\] {\n padding-top: 5.6px;\n padding-bottom: 5.6px;\n }\n\n .pb-1 {\n padding-bottom: 0.25rem;\n }\n\n .pb-2 {\n padding-bottom: 0.5rem;\n }\n\n .pb-20 {\n padding-bottom: 5rem;\n }\n\n .pb-3 {\n padding-bottom: 0.75rem;\n }\n\n .pb-32 {\n padding-bottom: 8rem;\n }\n\n .pb-4 {\n padding-bottom: 1rem;\n }\n\n .pb-5 {\n padding-bottom: 1.25rem;\n }\n\n .pb-6 {\n padding-bottom: 1.5rem;\n }\n\n .pb-8 {\n padding-bottom: 2rem;\n }\n\n .pl-0\\\\.5 {\n padding-left: 0.125rem;\n }\n\n .pl-1 {\n padding-left: 0.25rem;\n }\n\n .pl-11 {\n padding-left: 2.75rem;\n }\n\n .pl-14 {\n padding-left: 3.5rem;\n }\n\n .pl-2 {\n padding-left: 0.5rem;\n }\n\n .pl-4 {\n padding-left: 1rem;\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .pr-1 {\n padding-right: 0.25rem;\n }\n\n .pr-2 {\n padding-right: 0.5rem;\n }\n\n .pr-3 {\n padding-right: 0.75rem;\n }\n\n .pt-0 {\n padding-top: 0px;\n }\n\n .pt-0\\\\.5 {\n padding-top: 0.125rem;\n }\n\n .pt-1 {\n padding-top: 0.25rem;\n }\n\n .pt-10 {\n padding-top: 2.5rem;\n }\n\n .pt-2 {\n padding-top: 0.5rem;\n }\n\n .pt-4 {\n padding-top: 1rem;\n }\n\n .pt-6 {\n padding-top: 1.5rem;\n }\n\n .pt-\\\\[5px\\\\] {\n padding-top: 5px;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-start {\n text-align: start;\n }\n\n .font-sans {\n font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;\n }\n\n .font-serif {\n font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n }\n\n .text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .text-\\\\[11px\\\\] {\n font-size: 11px;\n }\n\n .text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .text-xxs {\n font-size: 0.625rem;\n }\n\n .font-bold {\n font-weight: 700;\n }\n\n .font-medium {\n font-weight: 500;\n }\n\n .font-normal {\n font-weight: 400;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .leading-4 {\n line-height: 1rem;\n }\n\n .leading-5 {\n line-height: 1.25rem;\n }\n\n .leading-\\\\[18px\\\\] {\n line-height: 18px;\n }\n\n .leading-\\\\[22px\\\\] {\n line-height: 22px;\n }\n\n .leading-\\\\[30px\\\\] {\n line-height: 30px;\n }\n\n .leading-none {\n line-height: 1;\n }\n\n .leading-normal {\n line-height: 1.5;\n }\n\n .leading-tight {\n line-height: 1.25;\n }\n\n .tracking-wide {\n letter-spacing: 0.025em;\n }\n\n .text-\\\\[\\\\#00559a\\\\] {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#333\\\\] {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#666666\\\\] {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-\\\\[\\\\#FFFFFF\\\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-200 {\n --tw-text-opacity: 1;\n color: rgb(147 200 253 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-300 {\n --tw-text-opacity: 1;\n color: rgb(90 171 252 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(4 104 203 / var(--tw-text-opacity, 1));\n }\n\n .text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(3 86 168 / var(--tw-text-opacity, 1));\n }\n\n .text-brand-1 {\n --tw-text-opacity: 1;\n color: rgb(0 85 154 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-5 {\n --tw-text-opacity: 1;\n color: rgb(18 18 18 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-6 {\n --tw-text-opacity: 1;\n color: rgb(46 46 46 / var(--tw-text-opacity, 1));\n }\n\n .text-dark-7 {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n }\n\n .text-green-300 {\n --tw-text-opacity: 1;\n color: rgb(151 219 83 / var(--tw-text-opacity, 1));\n }\n\n .text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(106 195 34 / var(--tw-text-opacity, 1));\n }\n\n .text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(80 167 24 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-100 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-300 {\n --tw-text-opacity: 1;\n color: rgb(221 221 221 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-400 {\n --tw-text-opacity: 1;\n color: rgb(153 153 153 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-500 {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-600 {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n }\n\n .text-grey-700 {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(255 122 0 / var(--tw-text-opacity, 1));\n }\n\n .text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(219 93 0 / var(--tw-text-opacity, 1));\n }\n\n .text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(174 9 27 / var(--tw-text-opacity, 1));\n }\n\n .text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n .transition {\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform,\n filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n .hover\\\\:bg-\\\\[\\\\#f3f4f6\\\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n }\n\n .hover\\\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .focus\\\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n @media (min-width: 640px) {\n .sm\\\\:block {\n display: block;\n }\n\n .sm\\\\:inline {\n display: inline;\n }\n\n .sm\\\\:w-3\\\\/4 {\n width: 75%;\n }\n\n .sm\\\\:max-w-lg {\n max-width: 32rem;\n }\n\n .sm\\\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\\\:justify-center {\n justify-content: center;\n }\n\n .sm\\\\:gap-6 {\n gap: 1.5rem;\n }\n\n .sm\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .sm\\\\:px-16 {\n padding-left: 4rem;\n padding-right: 4rem;\n }\n }\n\n @media (min-width: 768px) {\n .md\\\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n\n .md\\\\:my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .md\\\\:my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n }\n\n .md\\\\:my-auto {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .md\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .md\\\\:mb-5 {\n margin-bottom: 1.25rem;\n }\n\n .md\\\\:ml-1 {\n margin-left: 0.25rem;\n }\n\n .md\\\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .md\\\\:mr-5 {\n margin-right: 1.25rem;\n }\n\n .md\\\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .md\\\\:mt-2 {\n margin-top: 0.5rem;\n }\n\n .md\\\\:mt-2\\\\.5 {\n margin-top: 0.625rem;\n }\n\n .md\\\\:mt-3 {\n margin-top: 0.75rem;\n }\n\n .md\\\\:mt-4 {\n margin-top: 1rem;\n }\n\n .md\\\\:mt-8 {\n margin-top: 2rem;\n }\n\n .md\\\\:block {\n display: block;\n }\n\n .md\\\\:flex {\n display: flex;\n }\n\n .md\\\\:hidden {\n display: none;\n }\n\n .md\\\\:h-12 {\n height: 3rem;\n }\n\n .md\\\\:h-5 {\n height: 1.25rem;\n }\n\n .md\\\\:h-\\\\[68px\\\\] {\n height: 68px;\n }\n\n .md\\\\:h-max {\n height: -moz-max-content;\n height: max-content;\n }\n\n .md\\\\:max-h-\\\\[220px\\\\] {\n max-height: 220px;\n }\n\n .md\\\\:min-h-\\\\[244px\\\\] {\n min-height: 244px;\n }\n\n .md\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .md\\\\:w-3\\\\/5 {\n width: 60%;\n }\n\n .md\\\\:w-40 {\n width: 10rem;\n }\n\n .md\\\\:w-5\\\\/12 {\n width: 41.666667%;\n }\n\n .md\\\\:w-52 {\n width: 13rem;\n }\n\n .md\\\\:w-\\\\[350px\\\\] {\n width: 350px;\n }\n\n .md\\\\:w-\\\\[370px\\\\] {\n width: 370px;\n }\n\n .md\\\\:w-\\\\[374px\\\\] {\n width: 374px;\n }\n\n .md\\\\:w-\\\\[400px\\\\] {\n width: 400px;\n }\n\n .md\\\\:w-\\\\[580px\\\\] {\n width: 580px;\n }\n\n .md\\\\:w-auto {\n width: auto;\n }\n\n .md\\\\:w-full {\n width: 100%;\n }\n\n .md\\\\:max-w-\\\\[137px\\\\] {\n max-width: 137px;\n }\n\n .md\\\\:max-w-\\\\[200px\\\\] {\n max-width: 200px;\n }\n\n .md\\\\:max-w-\\\\[464px\\\\] {\n max-width: 464px;\n }\n\n .md\\\\:max-w-\\\\[737px\\\\] {\n max-width: 737px;\n }\n\n .md\\\\:max-w-full {\n max-width: 100%;\n }\n\n .md\\\\:max-w-sm {\n max-width: 24rem;\n }\n\n .md\\\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .md\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\\\:flex-row {\n flex-direction: row;\n }\n\n .md\\\\:flex-col {\n flex-direction: column;\n }\n\n .md\\\\:items-start {\n align-items: flex-start;\n }\n\n .md\\\\:items-center {\n align-items: center;\n }\n\n .md\\\\:justify-start {\n justify-content: flex-start;\n }\n\n .md\\\\:justify-center {\n justify-content: center;\n }\n\n .md\\\\:gap-8 {\n gap: 2rem;\n }\n\n .md\\\\:space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1.25rem * var(--tw-space-x-reverse));\n margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .md\\\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0px * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n }\n\n .md\\\\:self-start {\n align-self: flex-start;\n }\n\n .md\\\\:self-end {\n align-self: flex-end;\n }\n\n .md\\\\:rounded {\n border-radius: 0.25rem;\n }\n\n .md\\\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .md\\\\:p-5 {\n padding: 1.25rem;\n }\n\n .md\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .md\\\\:px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n }\n\n .md\\\\:px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n .md\\\\:px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n\n .md\\\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .md\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .md\\\\:py-1\\\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n }\n\n .md\\\\:py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n\n .md\\\\:py-3\\\\.5 {\n padding-top: 0.875rem;\n padding-bottom: 0.875rem;\n }\n\n .md\\\\:py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n .md\\\\:pb-4 {\n padding-bottom: 1rem;\n }\n\n .md\\\\:pb-7 {\n padding-bottom: 1.75rem;\n }\n\n .md\\\\:pt-0 {\n padding-top: 0px;\n }\n\n .md\\\\:pt-3 {\n padding-top: 0.75rem;\n }\n\n .md\\\\:pt-5 {\n padding-top: 1.25rem;\n }\n\n .md\\\\:pt-8 {\n padding-top: 2rem;\n }\n\n .md\\\\:text-left {\n text-align: left;\n }\n\n .md\\\\:text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n\n .md\\\\:text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n\n .md\\\\:text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .md\\\\:text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n\n .md\\\\:text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n\n .md\\\\:leading-6 {\n line-height: 1.5rem;\n }\n\n .md\\\\:tracking-normal {\n letter-spacing: 0em;\n }\n }\n\n @media (min-width: 1024px) {\n .lg\\\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\\\:col-span-3 {\n grid-column: span 3 / span 3;\n }\n\n .lg\\\\:col-span-5 {\n grid-column: span 5 / span 5;\n }\n\n .lg\\\\:col-start-10 {\n grid-column-start: 10;\n }\n\n .lg\\\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .lg\\\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .lg\\\\:mt-0 {\n margin-top: 0px;\n }\n\n .lg\\\\:block {\n display: block;\n }\n\n .lg\\\\:flex {\n display: flex;\n }\n\n .lg\\\\:hidden {\n display: none;\n }\n\n .lg\\\\:min-h-\\\\[220px\\\\] {\n min-height: 220px;\n }\n\n .lg\\\\:w-1\\\\/2 {\n width: 50%;\n }\n\n .lg\\\\:w-1\\\\/3 {\n width: 33.333333%;\n }\n\n .lg\\\\:w-\\\\[410px\\\\] {\n width: 410px;\n }\n\n .lg\\\\:w-auto {\n width: auto;\n }\n\n .lg\\\\:max-w-7xl {\n max-width: 80rem;\n }\n\n .lg\\\\:grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n\n .lg\\\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .lg\\\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\\\:flex-col {\n flex-direction: column;\n }\n\n .lg\\\\:items-center {\n align-items: center;\n }\n\n .lg\\\\:justify-end {\n justify-content: flex-end;\n }\n\n .lg\\\\:justify-between {\n justify-content: space-between;\n }\n\n .lg\\\\:gap-0 {\n gap: 0px;\n }\n\n .lg\\\\:gap-8 {\n gap: 2rem;\n }\n\n .lg\\\\:gap-x-6 {\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n }\n\n .lg\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .lg\\\\:px-24 {\n padding-left: 6rem;\n padding-right: 6rem;\n }\n\n .lg\\\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n\n .lg\\\\:py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n }\n\n .lg\\\\:pb-0 {\n padding-bottom: 0px;\n }\n\n .lg\\\\:pb-6 {\n padding-bottom: 1.5rem;\n }\n }\n\n @media (min-width: 1280px) {\n .xl\\\\:px-0 {\n padding-left: 0px;\n padding-right: 0px;\n }\n }\n\n @media (min-width: 1536px) {\n .\\\\32xl\\\\:w-1\\\\/4 {\n width: 25%;\n }\n }\n`\n"]}