@nsnanocat/preference-panes 0.8.0 → 0.9.0

package/src/browser/panel.css

@@ -1,12 +1,12 @@
 /* 分组列表沿用 Bilibili 设置页的行结构，样式限定在面板内。
  * Grouped rows follow the Bilibili settings layout, scoped to the panel. */
 .pp-panel {
-    --pp-text: #18191c;
-    --pp-background: #f6f7f8;
-    --pp-surface: #fff;
-    --pp-border: #e3e5e7;
-    --pp-muted: #9499a0;
-    --pp-accent: #fb7299;
+    --pp-text: var(--text1);
+    --pp-background: var(--bg2);
+    --pp-surface: var(--bg1);
+    --pp-border: var(--line_regular);
+    --pp-muted: var(--text3);
+    --pp-accent: var(--brand_pink);
     font:
         15px / 1.5 -apple-system,
         BlinkMacSystemFont,
@@ -67,7 +67,7 @@
     width: 44px;
     flex: none;
 }
-.pp-panel button {
+.pp-panel button:not(.v-toggle) {
     font: inherit;
     cursor: pointer;
     border: 0;
@@ -106,64 +106,15 @@
     }
 }
 .pp-fields,
-.pp-choice-page {
+.pp-choice-page,
+.pp-cache-page {
     position: absolute;
     inset: 0;
     overflow: auto;
-    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
+    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));
+    scroll-padding-bottom: var(--pp-keyboard-height, 0px);
     background: var(--pp-background);
 }
-.pp-panel .form-group {
-    margin: 0 0 12px;
-}
-.pp-panel .form-group__title {
-    font-size: 12px;
-    line-height: 17px;
-    font-weight: 400;
-    color: var(--pp-muted);
-    padding-left: 12px;
-    margin: 12px 0 6px;
-}
-.pp-panel .form-group__row {
-    border-radius: 8px;
-    overflow: hidden;
-    background: var(--pp-surface);
-}
-.pp-panel .form-row {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 46px;
-    padding: 12px;
-    border: 0;
-    border-bottom: 1px solid var(--pp-border);
-    background: var(--pp-surface);
-    gap: 12px;
-}
-.pp-panel .form-row:last-child {
-    border-bottom: 0;
-}
-.pp-panel .form-row__text {
-    flex: 1;
-    min-width: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-}
-.pp-panel .form-row__title {
-    font-size: 15px;
-    line-height: 22px;
-    color: var(--pp-text);
-    text-align: left;
-}
-.pp-panel .form-row__subtitle {
-    font-size: 12px;
-    line-height: 18px;
-    color: var(--pp-muted);
-    overflow-wrap: anywhere;
-    margin-top: 2px;
-}
 .pp-choice-link {
     display: flex;
     align-items: center;
@@ -191,60 +142,29 @@
     font-size: 22px;
     flex: none;
 }
-.pp-input {
-    font: inherit;
-    color: var(--pp-text);
-    background: var(--pp-surface);
-    border: 1px solid var(--pp-border);
-    border-radius: 6px;
-    padding: 8px;
-    min-width: 0;
-    max-width: 45%;
+.pp-editor {
+    flex: none;
     width: 45%;
+    min-width: 0;
 }
-select.pp-input {
-    text-overflow: ellipsis;
-    font-size: 13px;
+.pp-search {
+    width: 100%;
+    margin-bottom: 12px;
 }
 .pp-panel .pp-multiline {
     display: block;
 }
-.pp-multiline .pp-input {
-    max-width: 100%;
+.pp-multiline .pp-editor {
     width: 100%;
     margin-top: 10px;
 }
-.pp-switch {
-    appearance: none;
-    -webkit-appearance: none;
-    position: relative;
-    flex: none;
-    width: 32px;
-    height: 20px;
-    max-width: none;
+.pp-panel [hidden] {
+    display: none !important;
+}
+.pp-panel .v-toggle {
     border: 0;
-    border-radius: 15px;
     padding: 0;
-    background: #c9ccd0;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.pp-switch::before {
-    content: "";
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: white;
-    transition: transform 0.2s;
-}
-.pp-switch:checked {
-    background: var(--pp-accent);
-}
-.pp-switch:checked::before {
-    transform: translateX(12px);
+    flex: none;
 }
 .pp-choice {
     justify-content: space-between;
@@ -283,27 +203,13 @@ select.pp-input {
     color: inherit;
     text-decoration: underline;
 }
-.pp-maintenance {
-    margin-top: 24px;
-}
-.pp-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-.pp-actions button,
 .pp-error button {
     min-height: 44px;
     padding: 8px 12px;
     border-radius: 6px;
     background: var(--pp-surface);
 }
-.pp-panel .pp-danger {
-    color: #e45656;
-}
 .pp-cache {
-    max-height: 320px;
-    overflow: auto;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
@@ -328,29 +234,3 @@ select.pp-input {
     outline: 2px solid var(--pp-accent);
     outline-offset: -2px;
 }
-@media (prefers-color-scheme: dark) {
-    .pp-panel {
-        --pp-text: #e3e5e7;
-        --pp-background: #17181a;
-        --pp-surface: #232427;
-        --pp-border: #343538;
-    }
-}
-:root[data-theme="dark"] .pp-panel {
-    --pp-text: #e3e5e7;
-    --pp-background: #17181a;
-    --pp-surface: #232427;
-    --pp-border: #343538;
-}
-:root[data-theme="light"] .pp-panel {
-    --pp-text: #18191c;
-    --pp-background: #f6f7f8;
-    --pp-surface: #fff;
-    --pp-border: #e3e5e7;
-}
-@media (prefers-reduced-motion: reduce) {
-    .pp-panel .pp-switch,
-    .pp-panel .pp-switch::before {
-        transition: none;
-    }
-}

package/src/browser/panel.mjs

@@ -1,5 +1,6 @@
+import { ActionMenu } from "./ActionMenu.mjs";
 import { createPreferencesClient } from "./client.mjs";
-import { errorView, icon, element as node, resourceURL } from "./components.mjs";
+import { errorView, fieldControl, icon, element as node, requestConfirmation, resourceURL } from "./components.mjs";
 import { Navigation } from "./Navigation.mjs";
 
 /**
@@ -20,6 +21,15 @@ export function mountPanel(root, catalog) {
     back.setAttribute("aria-label", "返回");
     back.type = "button";
     const heading = node("h1", "pp-title", title);
+    const handlers = new Map();
+    const menuItems = [
+        { id: "viewCaches", label: "查看缓存" },
+        { id: "clearCaches", label: "清空缓存", destructive: true },
+        { id: "reset", label: "重置模块", destructive: true },
+    ];
+    const menu = new ActionMenu(id => runAction(id));
+    const trailing = node("span", "pp-nav-spacer");
+    trailing.append(menu.element);
     const brand = node("div", "pp-brand");
     const logo = node("span", "pp-brand-icon");
     logo.setAttribute("aria-hidden", "true");
@@ -30,20 +40,26 @@ export function mountPanel(root, catalog) {
     const toast = node("div", "pp-toast");
     toast.setAttribute("role", "status");
     toast.hidden = true;
-    header.append(back, brand, node("span", "pp-nav-spacer"));
+    header.append(back, brand, trailing);
     shell.append(header, viewport, toast);
     root.append(shell);
     // 嵌入模式向宿主发布导航状态，宿主不读取或修改模块内部 DOM。
     // Embedded mode publishes navigation state without host reads or mutations of the module DOM.
     const publishNavigation = () => {
+        const actions = handlers.size ? menuItems : [];
+        menu.update(actions, saving);
         const frame = window.frameElement;
         if (!frame?.dataset.preferencePanes) return;
         frame.dispatchEvent(
             new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:change", {
-                detail: { title: heading.textContent, module: catalog.module.module, busy: saving, canGoBack: !back.disabled },
+                detail: { title: heading.textContent, module: catalog.module.module, busy: saving, canGoBack: !back.disabled, actions },
             }),
         );
     };
+    const onAction = event => {
+        if (!saving && handlers.has(event.detail)) runAction(event.detail);
+    };
+    window.frameElement?.addEventListener("preferencepanes:action", onAction);
     let timer,
         navigation,
         generation = 0,
@@ -83,6 +99,19 @@ export function mountPanel(root, catalog) {
         }, 2400);
     };
     const client = createPreferencesClient({ catalog, notify });
+    /**
+     * 两种菜单入口共用异步错误处理，包含宿主确认框错误。
+     * Share async error handling between both menus, including host-dialog errors.
+     * @param {string} id 操作标识 / Action identifier.
+     * @returns {Promise<void>} 操作已处理 / Action handled.
+     */
+    async function runAction(id) {
+        try {
+            await handlers.get(id)();
+        } catch (error) {
+            notify({ kind: "error", message: error.message });
+        }
+    }
     /**
      * 打开模块并忽略已过期的异步结果。
      * Open a module and ignore stale asynchronous results.
@@ -114,6 +143,14 @@ export function mountPanel(root, catalog) {
         const { definition, values } = client.snapshot(active);
         heading.textContent = definition.metadata?.name || active;
         const view = node("section", "pp-fields");
+        const search = node("input", "");
+        search.type = "search";
+        search.placeholder = "搜索设置项";
+        search.setAttribute("aria-label", "搜索设置");
+        const searchField = fieldControl(search);
+        searchField.classList.add("pp-search");
+        view.append(searchField);
+        const searchRows = [];
         /**
          * 挂载后执行的多行高度更新
          * Textarea sizing callbacks run after mounting.
@@ -188,7 +225,7 @@ export function mountPanel(root, catalog) {
             const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
             const group = match?.[1] ?? "通用";
             if (!groups.has(group)) {
-                const section = node("section", "form-group");
+                const section = node("section", "form-group form-group--has-title");
                 const rows = node("div", "form-group__row");
                 section.append(node("h2", "form-group__title", group), rows);
                 groups.set(group, rows);
@@ -216,7 +253,7 @@ export function mountPanel(root, catalog) {
             let eventName = "change";
             switch (true) {
                 case Boolean(field.options) && field.type !== "array": {
-                    const select = node("select", "pp-input");
+                    const select = node("select", "");
                     select.setAttribute("aria-label", field.name);
                     field.options.forEach((option, index) => {
                         const item = node("option", "", option.label);
@@ -226,7 +263,7 @@ export function mountPanel(root, catalog) {
                     write = value => {
                         select.selectedIndex = field.options.findIndex(option => option.key === value);
                     };
-                    row.append(select);
+                    row.append(fieldControl(select));
                     read = () => field.options[select.selectedIndex]?.key;
                     break;
                 }
@@ -272,9 +309,27 @@ export function mountPanel(root, catalog) {
                     };
                     break;
                 }
+                case field.type === "boolean": {
+                    const toggle = node("button", "v-toggle v-toggle--small form-row__toggle");
+                    toggle.type = "button";
+                    toggle.setAttribute("role", "switch");
+                    toggle.setAttribute("aria-label", field.name);
+                    toggle.append(node("span", "v-toggle__circle"));
+                    write = value => {
+                        toggle.setAttribute("aria-checked", String(value === true));
+                        toggle.classList.toggle("v-toggle--closed", value !== true);
+                    };
+                    read = () => toggle.getAttribute("aria-checked") === "true";
+                    toggle.onclick = () => {
+                        write(!read());
+                        toggle.dispatchEvent(new window.Event("change", { bubbles: true }));
+                    };
+                    row.append(toggle);
+                    break;
+                }
                 default: {
                     const multiline = field.control === "textarea" || field.type === "array";
-                    const input = node(multiline ? "textarea" : "input", "pp-input");
+                    const input = node(multiline ? "textarea" : "input", "");
                     if (multiline) row.classList.add("pp-multiline");
                     input.setAttribute("aria-label", field.name);
                     if (field.placeholder) input.placeholder = field.placeholder;
@@ -296,33 +351,23 @@ export function mountPanel(root, catalog) {
                         input.addEventListener("input", grow);
                         growingInputs.push(grow);
                     }
-                    if (field.type === "boolean") {
-                        input.type = "checkbox";
-                        input.classList.add("pp-switch");
-                        input.setAttribute("role", "switch");
-                        write = value => {
-                            input.checked = value === true;
-                        };
-                        read = () => input.checked;
-                    } else {
-                        eventName = "input";
-                        if (!multiline) input.type = field.type === "number" ? "number" : "text";
-                        write = value => {
-                            input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
-                            grow();
-                        };
-                        read = () => {
-                            switch (field.type) {
-                                case "array":
-                                    return JSON.parse(input.value);
-                                case "number":
-                                    return input.value === "" ? Number.NaN : Number(input.value);
-                                default:
-                                    return input.value;
-                            }
-                        };
-                    }
-                    row.append(input);
+                    eventName = "input";
+                    if (!multiline) input.type = field.type === "number" ? "number" : "text";
+                    write = value => {
+                        input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
+                        grow();
+                    };
+                    read = () => {
+                        switch (field.type) {
+                            case "array":
+                                return JSON.parse(input.value);
+                            case "number":
+                                return input.value === "" ? Number.NaN : Number(input.value);
+                            default:
+                                return input.value;
+                        }
+                    };
+                    row.append(fieldControl(input, multiline));
                     break;
                 }
             }
@@ -352,18 +397,25 @@ export function mountPanel(root, catalog) {
             });
             if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
             groups.get(group).append(row);
+            searchRows.push({ row, text: [field.name, field.key, field.description, ...(field.options ?? []).map(option => option.label)].join(" ").toLocaleLowerCase() });
         }
-        const maintenance = node("section", "pp-maintenance");
-        maintenance.append(node("h2", "pp-title", "模块数据"));
-        const actions = node("div", "pp-actions");
-        const cacheView = node("button", "", "查看 Caches");
-        const cacheClear = node("button", "", "清空 Caches");
-        const reset = node("button", "pp-danger", "重置模块");
+        const empty = node("p", "pp-description", "没有匹配的设置项");
+        empty.hidden = true;
+        empty.setAttribute("role", "status");
+        view.append(empty);
+        search.oninput = () => {
+            const words = search.value.trim().toLocaleLowerCase().split(/\s+/);
+            for (const { row, text } of searchRows) row.hidden = !words.every(word => text.includes(word));
+            for (const rows of groups.values()) rows.parentElement.hidden = [...rows.children].every(row => row.hidden);
+            empty.hidden = searchRows.some(({ row }) => !row.hidden);
+        };
+        const cachePage = node("section", "pp-cache-page");
         const output = node("pre", "pp-cache");
-        output.hidden = true;
+        output.textContent = "暂无缓存";
         output.setAttribute("aria-label", "Caches 内容");
-        for (const button of [cacheView, cacheClear, reset]) button.type = "button";
-        cacheView.onclick = () => {
+        cachePage.append(output);
+        editors.set("$caches", { node: cachePage, title: "缓存" });
+        handlers.set("viewCaches", () => {
             if (saving) return;
             let value;
             return perform(
@@ -377,29 +429,25 @@ export function mountPanel(root, catalog) {
                 },
                 () => {
                     output.textContent = value === undefined ? "暂无缓存" : JSON.stringify(value, null, 2);
-                    output.hidden = false;
-                    cacheView.textContent = "刷新 Caches";
+                    navigation.open("$caches");
                 },
             );
-        };
-        cacheClear.onclick = () => {
+        });
+        handlers.set("clearCaches", async () => {
             if (saving) return;
-            if (!window.confirm(`清空 ${active} 的全部 Caches？`)) return;
+            if (!(await requestConfirmation(window, `清空 ${active} 的全部 Caches？`)) || destroyed || saving) return;
             return perform(
                 () => client.clearCaches(active),
                 () => {
                     output.textContent = "暂无缓存";
                 },
             );
-        };
-        reset.onclick = () => {
+        });
+        handlers.set("reset", async () => {
             if (saving) return;
-            if (!window.confirm(`重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) return;
+            if (!(await requestConfirmation(window, `重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) || destroyed || saving) return;
             return perform(() => client.reset(active), controls);
-        };
-        actions.append(cacheView, cacheClear, reset);
-        maintenance.append(actions, output);
-        view.append(maintenance);
+        });
         navigation?.destroy();
         navigation = new Navigation(viewport, view, key => editors.get(key)?.node);
         navigation.addEventListener("change", updateNavigation);
@@ -425,6 +473,8 @@ export function mountPanel(root, catalog) {
          */
         destroy() {
             destroyed = true;
+            menu.destroy();
+            window.frameElement?.removeEventListener("preferencepanes:action", onAction);
             navigation?.destroy();
             generation++;
             if (active && !saving) client.leave(active);

package/src/browser/vendor/b-style.min.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+/*!
+ * @bilibili/b-style(v4.0.1)
+ * @file: b-style.min.css
+ * 一套帮助快速交作业的样式库，支持css、less、sass和stylus。
+ */
+:root{--b_brand_pink:var(--brand_pink, #FF6699);--b_brand_pink_thin:var(--brand_pink_thin, #FFECF1);--b_brand_blue:var(--brand_blue, #00AEEC);--b_brand_blue_thin:var(--brand_blue_thin, #DFF6FD);--b_stress_red:var(--stress_red, #F85A54);--b_stress_red_thin:var(--stress_red_thin, #FEECEA);--b_success_green:var(--success_green, #2AC864);--b_success_green_thin:var(--success_green_thin, #E4F8EA);--b_operate_orange:var(--operate_orange, #FF7F24);--b_operate_orange_thin:var(--operate_orange_thin, #FFF0E3);--b_pay_yellow:var(--pay_yellow, #FFB027);--b_pay_yellow_thin:var(--pay_yellow_thin, #FFF6E4);--b_bg1:var(--bg1, #FFFFFF);--b_bg2:var(--bg2, #F6F7F8);--b_bg3:var(--bg3, #F1F2F3);--b_bg1_float:var(--bg1_float, #FFFFFF);--b_bg2_float:var(--bg2_float, #F1F2F3);--b_bg3_float:var(--bg3_float, #F1F2F3);--b_graph_bg_thin_float:var(--graph_bg_thin_float, #F6F7F8);--b_graph_bg_regular_float:var(--graph_bg_regular_float, #F1F2F3);--b_text_white:var(--text_white, #FFFFFF);--b_text1:var(--text1, #18191C);--b_text2:var(--text2, #61666D);--b_text3:var(--text3, #9499A0);--b_text4:var(--text4, #C9CCD0);--b_text_link:var(--text_link, #00699D);--b_text_notice:var(--text_notice, #FA9600);--b_line_light:var(--line_light, #F1F2F3);--b_line_regular:var(--line_regular, #E3E5E7);--b_line_bold:var(--line_bold, #C9CCD0);--b_graph_white:var(--graph_white, #FFFFFF);--b_graph_bg_bright:var(--graph_bg_bright, #FFFFFF);--b_graph_bg_thin:var(--graph_bg_thin, #F6F7F8);--b_graph_bg_regular:var(--graph_bg_regular, #F1F2F3);--b_graph_bg_thick:var(--graph_bg_thick, #E3E5E7);--b_graph_weak:var(--graph_weak, #C9CCD0);--b_graph_medium:var(--graph_medium, #9499A0);--b_graph_bold:var(--graph_bold, #61666D);--b_graph_icon:var(--graph_icon, #61666D);--b_shadow:var(--shadow, #000000);--b_text_black:#000000;--bg_cover:rgba(0, 0, 0, 0.25);--xs:5px;--sm:10px;--md:15px;--lg:20px;--xl:25px;--xxl:30px;--br_xs:550px;--br_sm:800px;--br_md:1050px;--br_lg:1300px;--br_xl:1550px;--fs_1:20px;--fs_2:18px;--fs_3:16px;--fs_4:14px;--fs_5:12px;--fs_6:10px;--lh_xs:1;--lh_sm:1.25;--lh_md:1.5;--lh_lg:1.75;--lh_xl:2;--fs_sm_plus:1px;--fs_lg_plus:10px;--b_gutter:16px;--b_gutter_sm:10px;--b_gutter_md:20px;--b_gutter_lg:30px;--b_radius:4px;--b_radius_sm:3px;--b_radius_md:8px;--b_radius_lg:12px;--box_shadow:0 1px 4px rgba(0, 0, 0, 0.2);--box_shadow_sm:0 2px 6px rgba(0, 0, 0, 0.2);--box_shadow_md:0 3px 8px rgba(0, 0, 0, 0.2);--box_shadow_lg:0 4px 10px rgba(0, 0, 0, 0.2);--b_wp_mb:480px;--b_border:1px solid var(--b_line_regular);--b_ft_family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.hide{display:none!important}.show{display:block!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.float_none{float:none!important}.float_left{float:left!important}.float_right{float:right!important}.clearfix::after,.clearfix::before{content:"";display:table}.clearfix::after{clear:both}.list_style_none{list-style:none!important}.pe_none{pointer-events:none!important}.pe_auto{pointer-events:auto!important}.cs_auto{cursor:auto!important}.cs_none{cursor:none!important}.cs_default{cursor:default!important}.cs_pointer{cursor:pointer!important}.cs_not_allowed{cursor:not-allowed!important}.u_select_auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.u_select_none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.u_select_all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.u_drag_auto{-webkit-user-drag:auto!important}.u_drag_none{-webkit-user-drag:none!important}.u_drag_element{-webkit-user-drag:element!important}.opacity_0{opacity:0!important}.opacity_1{opacity:1!important}.opacity_d25{opacity:.25!important}.opacity_d50{opacity:.5!important}.opacity_d75{opacity:.75!important}.box_shadow{-webkit-box-shadow:var(--box_shadow)!important;box-shadow:var(--box_shadow)!important}.box_shadow_sm{-webkit-box-shadow:var(--box_shadow_sm)!important;box-shadow:var(--box_shadow_sm)!important}.box_shadow_md{-webkit-box-shadow:var(--box_shadow_md)!important;box-shadow:var(--box_shadow_md)!important}.box_shadow_lg{-webkit-box-shadow:var(--box_shadow_lg)!important;box-shadow:var(--box_shadow_lg)!important}.box_shadow_none{-webkit-box-shadow:none!important;box-shadow:none!important}.outline_none{outline:0!important}.object_fit_cover{-o-object-fit:cover!important;object-fit:cover!important}.object_fit_contain{-o-object-fit:contain!important;object-fit:contain!important}.object_fit_fill{-o-object-fit:fill!important;object-fit:fill!important}.object_fit_none{-o-object-fit:none!important;object-fit:none!important}.object_fit_initial{-o-object-fit:initial!important;object-fit:initial!important}.b_full_page{width:100vw;height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.b_wrapper_mb{width:100%;max-width:var(--b_wp_mb);margin:0 auto}.b_wrapper{width:100vw;padding:0 var(--md)}.b_wrapper_sm{width:100vw;padding:0 var(--sm)}.b_ft_family{font-family:var(--b_ft_family)!important}.bd_0,.bd_none{border:none!important}.bt_0,.bt_none{border-top:none!important}.br_0,.br_none{border-right:none!important}.bb_0,.bb_none{border-bottom:none!important}.bl_0,.bl_none{border-left:none!important}.bd_1{border:var(--b_border)!important}.bt_1{border-top:var(--b_border)!important}.br_1{border-right:var(--b_border)!important}.bb_1{border-bottom:var(--b_border)!important}.bl_1{border-left:var(--b_border)!important}.bw_1{border-width:1px!important}.bw_2{border-width:2px!important}.bw_3{border-width:3px!important}.bw_4{border-width:4px!important}.bw_5{border-width:5px!important}.bc_brand_pink{border-color:var(--b_brand_pink)!important}.bc_brand_blue{border-color:var(--b_brand_blue)!important}.bc_stress_red{border-color:var(--b_stress_red)!important}.bc_success_green{border-color:var(--b_success_green)!important}.bc_operate_orange{border-color:var(--b_operate_orange)!important}.bc_pay_yellow{border-color:var(--b_pay_yellow)!important}.bc_line_light{border-color:var(--b_line_light)!important}.bc_line_regular{border-color:var(--b_line_regular)!important}.bc_line_bold{border-color:var(--b_line_bold)!important}.bc_light{border-color:var(--b_bg1)}.bc_dark{border-color:var(--b_shadow)}.bc_transparent{border-color:transparent!important}.bs_solid{border-style:solid!important}.bs_dashed{border-style:dashed!important}.bs_dotted{border-style:dotted!important}.bs_double{border-style:double!important}.bd_radius{border-radius:var(--b_radius)!important}.bd_radius_0{border-radius:0!important}.bd_radius_sm{border-radius:var(--b_radius_sm)!important}.bd_radius_md{border-radius:var(--b_radius_md)!important}.bd_radius_lg{border-radius:var(--b_radius_lg)!important}.bd_radius_50{border-radius:50%!important}.b_text{color:var(--b_text1);line-height:var(--lh_sm)}.b_text:not(h1,h2,h3,h4,h5,h6){margin:var(--sm) 0;font-size:var(--fs_4);font-weight:400}h1.b_text,h2.b_text,h3.b_text,h4.b_text,h5.b_text,h6.b_text{margin:var(--md) 0 var(--sm);font-weight:700}h1.b_text{font-size:var(--fs_1)}h2.b_text{font-size:var(--fs_2)}h3.b_text{font-size:var(--fs_3)}h4.b_text{font-size:var(--fs_4)}h5.b_text{font-size:var(--fs_5)}h6.b_text{font-size:var(--fs_6)}.brand_pink{color:var(--b_brand_pink)!important}.brand_blue{color:var(--b_brand_blue)!important}.stress_red{color:var(--b_stress_red)!important}.success_green{color:var(--b_success_green)!important}.operate_orange{color:var(--b_operate_orange)!important}.pay_yellow{color:var(--b_pay_yellow)!important}.brand_pink_thin{color:var(--b_brand_pink_thin)!important}.brand_blue_thin{color:var(--b_brand_blue_thin)!important}.stress_red_thin{color:var(--b_stress_red_thin)!important}.success_green_thin{color:var(--b_success_green_thin)!important}.operate_orange_thin{color:var(--b_operate_orange_thin)!important}.pay_yellow_thin{color:var(--b_pay_yellow_thin)!important}.text_white{color:var(--b_text_white)!important}.text_black{color:var(--b_text_black)!important}.text1{color:var(--b_text1)!important}.text2{color:var(--b_text2)!important}.text3{color:var(--b_text3)!important}.text4{color:var(--b_text4)!important}.text_link{color:var(--b_text_link)!important}.text_notice{color:var(--b_text_notice)!important}.graph_white{color:var(--b_graph_white)!important}.graph_weak{color:var(--b_graph_weak)!important}.graph_medium{color:var(--b_graph_medium)!important}.graph_bold{color:var(--b_graph_bold)!important}.graph_icon{color:var(--b_graph_icon)!important}.co_light{color:var(--b_text_white)!important}.co_dark{color:var(--b_text_black)!important}.co_transparent{color:transparent!important}.bg_brand_pink{background:var(--b_brand_pink)!important}.bg_brand_blue{background:var(--b_brand_blue)!important}.bg_stress_red{background:var(--b_stress_red)!important}.bg_success_green{background:var(--b_success_green)!important}.bg_operate_orange{background:var(--b_operate_orange)!important}.bg_pay_yellow{background:var(--b_pay_yellow)!important}.bg_brand_pink_thin{background:var(--b_brand_pink_thin)!important}.bg_brand_blue_thin{background:var(--b_brand_blue_thin)!important}.bg_stress_red_thin{background:var(--b_stress_red_thin)!important}.bg_success_green_thin{background:var(--b_success_green_thin)!important}.bg_operate_orange_thin{background:var(--b_operate_orange_thin)!important}.bg_pay_yellow_thin{background:var(--b_pay_yellow_thin)!important}.bg_bg1{background:var(--b_bg1)!important}.bg_bg2{background:var(--b_bg2)!important}.bg_bg3{background:var(--b_bg3)!important}.bg_bg1_float{background:var(--b_bg1_float)!important}.bg_bg2_float{background:var(--b_bg2_float)!important}.bg_bg3_float{background:var(--b_bg3_float)!important}.bg_graph_bg_bright{background:var(--b_graph_bg_bright)!important}.bg_graph_bg_thin{background:var(--b_graph_bg_thin)!important}.bg_graph_bg_regular{background:var(--b_graph_bg_regular)!important}.bg_graph_bg_thick{background:var(--b_graph_bg_thick)!important}.bg_light{background:var(--b_bg1)!important}.bg_dark{background:var(--b_shadow)!important}.bg_cover{background:var(--bg_cover)!important}.bg_transparent{background:0 0!important}.d_block{display:block!important}.d_inline{display:inline!important}.d_inline_block{display:inline-block!important}.d_flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d_inline_flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}.d_table{display:table!important}.d_table_row{display:table-row!important}.d_table_cell{display:table-cell!important}.flex_row,.flex_start{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_between{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_around{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_col,.flex_col_start{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_col_center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_col_end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_col_between{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_col_around{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_inline{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}.flex_wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex_nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex_auto{-webkit-box-flex:1!important;-ms-flex:auto!important;flex:auto!important}.flex_shrink_0{-ms-flex-negative:0!important;flex-shrink:0!important}.row_reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.col_reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.wrap_reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify_start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify_center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify_end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify_between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify_around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.items_stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.items_start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.items_center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.items_end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.items_baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.content_stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.content_start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.content_center{-ms-flex-line-pack:center!important;align-content:center!important}.content_end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.content_between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.content_around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.self_stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}.self_auto{-ms-flex-item-align:auto!important;align-self:auto!important}.self_start{-ms-flex-item-align:start!important;align-self:flex-start!important}.self_center{-ms-flex-item-align:center!important;align-self:center!important}.self_end{-ms-flex-item-align:end!important;align-self:flex-end!important}.self_baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.order_0{-webkit-box-ordinal-group:1!important;-ms-flex-order:0!important;order:0!important}.order_n1{-webkit-box-ordinal-group:0!important;-ms-flex-order:-1!important;order:-1!important}.order_1{-webkit-box-ordinal-group:2!important;-ms-flex-order:1!important;order:1!important}.order_2{-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important}.order_3{-webkit-box-ordinal-group:4!important;-ms-flex-order:3!important;order:3!important}.order_4{-webkit-box-ordinal-group:5!important;-ms-flex-order:4!important;order:4!important}.order_5{-webkit-box-ordinal-group:6!important;-ms-flex-order:5!important;order:5!important}.order_6{-webkit-box-ordinal-group:7!important;-ms-flex-order:6!important;order:6!important}.order_7{-webkit-box-ordinal-group:8!important;-ms-flex-order:7!important;order:7!important}.order_8{-webkit-box-ordinal-group:9!important;-ms-flex-order:8!important;order:8!important}.order_9{-webkit-box-ordinal-group:10!important;-ms-flex-order:9!important;order:9!important}.order_10{-webkit-box-ordinal-group:11!important;-ms-flex-order:10!important;order:10!important}.order_11{-webkit-box-ordinal-group:12!important;-ms-flex-order:11!important;order:11!important}.order_12{-webkit-box-ordinal-group:13!important;-ms-flex-order:12!important;order:12!important}.ov_visible{overflow:visible!important}.ov_hidden{overflow:hidden!important}.ov_hidden_x{overflow-x:hidden!important}.ov_hidden_y{overflow-y:hidden!important}.ov_auto{overflow:auto!important;-webkit-overflow-scrolling:touch}.ov_auto_x{overflow-x:auto!important;-webkit-overflow-scrolling:touch}.ov_auto_y{overflow-y:auto!important;-webkit-overflow-scrolling:touch}.ov_scroll{overflow:scroll!important;-webkit-overflow-scrolling:touch}.ov_scroll_x{overflow-x:scroll!important;-webkit-overflow-scrolling:touch}.ov_scroll_y{overflow-y:scroll!important;-webkit-overflow-scrolling:touch}.ov_overlay{overflow:overlay!important}.ov_overlay_x{overflow-x:overlay!important}.ov_overlay_y{overflow-y:overlay!important}.p_static{position:static!important}.p_relative{position:relative!important}.p_absolute{position:absolute!important}.p_fixed{position:fixed!important}.p_sticky{position:sticky!important}.p_center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.p_center_x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.p_center_y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.p_middle{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.p_middle_x{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto}.p_middle_y{position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto}.p_cover{position:absolute;top:0;left:0;width:100%;height:100%}.p_cover_fixed{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999}.z_index_auto{z-index:auto!important}.z_index_1{z-index:1!important}.z_index_n1{z-index:-1!important}.z_index_999{z-index:999!important}.xy_auto{top:auto!important;right:auto!important;bottom:auto!important;left:auto!important}.xy_0{top:0!important;right:0!important;bottom:0!important;left:0!important}.x_auto{left:auto!important;right:auto!important}.x_0{left:0!important;right:0!important}.y_auto{top:auto!important;bottom:auto!important}.y_0{top:0!important;bottom:0!important}.t_auto{top:auto!important}.t_0{top:0!important}.t_xs{top:var(--xs)!important}.t_sm{top:var(--sm)!important}.t_md{top:var(--md)!important}.t_lg{top:var(--lg)!important}.t_xl{top:var(--xl)!important}.t_xxl{top:var(--xxl)!important}.t_1{top:1px!important}.t_2{top:2px!important}.t_3{top:3px!important}.t_4{top:4px!important}.t_5{top:5px!important}.t_50{top:50%!important}.t_n1{top:-1px!important}.t_n2{top:-2px!important}.t_n3{top:-3px!important}.t_n4{top:-4px!important}.t_n5{top:-5px!important}.t_n50{top:-50%!important}.r_auto{right:auto!important}.r_0{right:0!important}.r_xs{right:var(--xs)!important}.r_sm{right:var(--sm)!important}.r_md{right:var(--md)!important}.r_lg{right:var(--lg)!important}.r_xl{right:var(--xl)!important}.r_xxl{right:var(--xxl)!important}.r_1{right:1px!important}.r_2{right:2px!important}.r_3{right:3px!important}.r_4{right:4px!important}.r_5{right:5px!important}.r_50{right:50%!important}.r_n1{right:-1px!important}.r_n2{right:-2px!important}.r_n3{right:-3px!important}.r_n4{right:-4px!important}.r_n5{right:-5px!important}.r_n50{right:-50%!important}.b_auto{bottom:auto!important}.b_0{bottom:0!important}.b_xs{bottom:var(--xs)!important}.b_sm{bottom:var(--sm)!important}.b_md{bottom:var(--md)!important}.b_lg{bottom:var(--lg)!important}.b_xl{bottom:var(--xl)!important}.b_xxl{bottom:var(--xxl)!important}.b_1{bottom:1px!important}.b_2{bottom:2px!important}.b_3{bottom:3px!important}.b_4{bottom:4px!important}.b_5{bottom:5px!important}.b_50{bottom:50%!important}.b_n1{bottom:-1px!important}.b_n2{bottom:-2px!important}.b_n3{bottom:-3px!important}.b_n4{bottom:-4px!important}.b_n5{bottom:-5px!important}.b_n50{bottom:-50%!important}.l_auto{left:auto!important}.l_0{left:0!important}.l_xs{left:var(--xs)!important}.l_sm{left:var(--sm)!important}.l_md{left:var(--md)!important}.l_lg{left:var(--lg)!important}.l_xl{left:var(--xl)!important}.l_xxl{left:var(--xxl)!important}.l_1{left:1px!important}.l_2{left:2px!important}.l_3{left:3px!important}.l_4{left:4px!important}.l_5{left:5px!important}.l_50{left:50%!important}.l_n1{left:-1px!important}.l_n2{left:-2px!important}.l_n3{left:-3px!important}.l_n4{left:-4px!important}.l_n5{left:-5px!important}.l_n50{left:-50%!important}.w_auto{width:auto!important}.w_0{width:0!important}.w_xs{width:var(--xs)!important}.w_sm{width:var(--sm)!important}.w_md{width:var(--md)!important}.w_lg{width:var(--lg)!important}.w_xl{width:var(--xl)!important}.w_xxl{width:var(--xxl)!important}.w_25{width:25%!important}.w_50{width:50%!important}.w_75{width:75%!important}.w_100{width:100%!important}.w_br_xs{width:var(--br_xs)!important}.w_br_sm{width:var(--br_sm)!important}.w_br_md{width:var(--br_md)!important}.w_br_lg{width:var(--br_lg)!important}.w_br_xl{width:var(--br_xl)!important}.w_25vw{width:25vw!important}.w_50vw{width:50vw!important}.w_75vw{width:75vw!important}.w_100vw{width:100vw!important}.min_w_100{min-width:100%!important}.min_w_100vw{min-width:100vw!important}.min_w_br_xs{min-width:var(--br_xs)!important}.min_w_br_sm{min-width:var(--br_sm)!important}.min_w_br_md{min-width:var(--br_md)!important}.min_w_br_lg{min-width:var(--br_lg)!important}.min_w_br_xl{min-width:var(--br_xl)!important}.max_w_100{max-width:100%!important}.max_w_100vw{max-width:100vw!important}.max_w_br_xs{max-width:var(--br_xs)!important}.max_w_br_sm{max-width:var(--br_sm)!important}.max_w_br_md{max-width:var(--br_md)!important}.max_w_br_lg{max-width:var(--br_lg)!important}.max_w_br_xl{max-width:var(--br_xl)!important}.h_auto{height:auto!important}.h_0{height:0!important}.h_xs{height:var(--xs)!important}.h_sm{height:var(--sm)!important}.h_md{height:var(--md)!important}.h_lg{height:var(--lg)!important}.h_xl{height:var(--xl)!important}.h_xxl{height:var(--xxl)!important}.h_25{height:25%!important}.h_50{height:50%!important}.h_75{height:75%!important}.h_100{height:100%!important}.h_25vh{height:25vh!important}.h_50vh{height:50vh!important}.h_75vh{height:75vh!important}.h_100vh{height:100vh!important}.min_h_100{min-height:100%!important}.min_h_100vh{min-height:100vh!important}.max_h_100{max-height:100%!important}.max_h_100vh{max-height:100vh!important}.mg_0_auto{margin:0 auto!important}.mg_auto{margin:auto!important}.mx_auto{margin-left:auto!important;margin-right:auto!important}.my_auto{margin-top:auto!important;margin-bottom:auto!important}.mg_0{margin:0!important}.mg_xs{margin:var(--xs)!important}.mg_sm{margin:var(--sm)!important}.mg_md{margin:var(--md)!important}.mg_lg{margin:var(--lg)!important}.mg_xl{margin:var(--xl)!important}.mg_xxl{margin:var(--xxl)!important}.mx_0{margin-left:0!important;margin-right:0!important}.mx_xs{margin-left:var(--xs)!important;margin-right:var(--xs)!important}.mx_sm{margin-left:var(--sm)!important;margin-right:var(--sm)!important}.mx_md{margin-left:var(--md)!important;margin-right:var(--md)!important}.mx_lg{margin-left:var(--lg)!important;margin-right:var(--lg)!important}.mx_xl{margin-left:var(--xl)!important;margin-right:var(--xl)!important}.mx_xxl{margin-left:var(--xxl)!important;margin-right:var(--xxl)!important}.my_0{margin-top:0!important;margin-bottom:0!important}.my_xs{margin-top:var(--xs)!important;margin-bottom:var(--xs)!important}.my_sm{margin-top:var(--sm)!important;margin-bottom:var(--sm)!important}.my_md{margin-top:var(--md)!important;margin-bottom:var(--md)!important}.my_lg{margin-top:var(--lg)!important;margin-bottom:var(--lg)!important}.my_xl{margin-top:var(--xl)!important;margin-bottom:var(--xl)!important}.my_xxl{margin-top:var(--xxl)!important;margin-bottom:var(--xxl)!important}.mt_auto{margin-top:auto!important}.mt_0{margin-top:0!important}.mt_xs{margin-top:var(--xs)!important}.mt_sm{margin-top:var(--sm)!important}.mt_md{margin-top:var(--md)!important}.mt_lg{margin-top:var(--lg)!important}.mt_xl{margin-top:var(--xl)!important}.mt_xxl{margin-top:var(--xxl)!important}.mt_1{margin-top:1px!important}.mt_2{margin-top:2px!important}.mt_3{margin-top:3px!important}.mt_4{margin-top:4px!important}.mt_n1{margin-top:-1px!important}.mt_n2{margin-top:-2px!important}.mt_n3{margin-top:-3px!important}.mt_n4{margin-top:-4px!important}.mt_nxs{margin-top:calc(var(--xs) * -1)!important}.mt_nsm{margin-top:calc(var(--sm) * -1)!important}.mt_nmd{margin-top:calc(var(--md) * -1)!important}.mt_nlg{margin-top:calc(var(--lg) * -1)!important}.mt_nxl{margin-top:calc(var(--xl) * -1)!important}.mt_nxxl{margin-top:calc(var(--xxl) * -1)!important}.mr_auto{margin-right:auto!important}.mr_0{margin-right:0!important}.mr_xs{margin-right:var(--xs)!important}.mr_sm{margin-right:var(--sm)!important}.mr_md{margin-right:var(--md)!important}.mr_lg{margin-right:var(--lg)!important}.mr_xl{margin-right:var(--xl)!important}.mr_xxl{margin-right:var(--xxl)!important}.mr_1{margin-right:1px!important}.mr_2{margin-right:2px!important}.mr_3{margin-right:3px!important}.mr_4{margin-right:4px!important}.mr_n1{margin-right:-1px!important}.mr_n2{margin-right:-2px!important}.mr_n3{margin-right:-3px!important}.mr_n4{margin-right:-4px!important}.mr_nxs{margin-right:calc(var(--xs) * -1)!important}.mr_nsm{margin-right:calc(var(--sm) * -1)!important}.mr_nmd{margin-right:calc(var(--md) * -1)!important}.mr_nlg{margin-right:calc(var(--lg) * -1)!important}.mr_nxl{margin-right:calc(var(--xl) * -1)!important}.mr_nxxl{margin-right:calc(var(--xxl) * -1)!important}.mb_auto{margin-bottom:auto!important}.mb_0{margin-bottom:0!important}.mb_xs{margin-bottom:var(--xs)!important}.mb_sm{margin-bottom:var(--sm)!important}.mb_md{margin-bottom:var(--md)!important}.mb_lg{margin-bottom:var(--lg)!important}.mb_xl{margin-bottom:var(--xl)!important}.mb_xxl{margin-bottom:var(--xxl)!important}.mb_1{margin-bottom:1px!important}.mb_2{margin-bottom:2px!important}.mb_3{margin-bottom:3px!important}.mb_4{margin-bottom:4px!important}.mb_n1{margin-bottom:-1px!important}.mb_n2{margin-bottom:-2px!important}.mb_n3{margin-bottom:-3px!important}.mb_n4{margin-bottom:-4px!important}.mb_nxs{margin-bottom:calc(var(--xs) * -1)!important}.mb_nsm{margin-bottom:calc(var(--sm) * -1)!important}.mb_nmd{margin-bottom:calc(var(--md) * -1)!important}.mb_nlg{margin-bottom:calc(var(--lg) * -1)!important}.mb_nxl{margin-bottom:calc(var(--xl) * -1)!important}.mb_nxxl{margin-bottom:calc(var(--xxl) * -1)!important}.ml_auto{margin-left:auto!important}.ml_0{margin-left:0!important}.ml_xs{margin-left:var(--xs)!important}.ml_sm{margin-left:var(--sm)!important}.ml_md{margin-left:var(--md)!important}.ml_lg{margin-left:var(--lg)!important}.ml_xl{margin-left:var(--xl)!important}.ml_xxl{margin-left:var(--xxl)!important}.ml_1{margin-left:1px!important}.ml_2{margin-left:2px!important}.ml_3{margin-left:3px!important}.ml_4{margin-left:4px!important}.ml_n1{margin-left:-1px!important}.ml_n2{margin-left:-2px!important}.ml_n3{margin-left:-3px!important}.ml_n4{margin-left:-4px!important}.ml_nxs{margin-left:calc(var(--xs) * -1)!important}.ml_nsm{margin-left:calc(var(--sm) * -1)!important}.ml_nmd{margin-left:calc(var(--md) * -1)!important}.ml_nlg{margin-left:calc(var(--lg) * -1)!important}.ml_nxl{margin-left:calc(var(--xl) * -1)!important}.ml_nxxl{margin-left:calc(var(--xxl) * -1)!important}.pd_0{padding:0!important}.pd_xs{padding:var(--xs)!important}.pd_sm{padding:var(--sm)!important}.pd_md{padding:var(--md)!important}.pd_lg{padding:var(--lg)!important}.pd_xl{padding:var(--xl)!important}.pd_xxl{padding:var(--xxl)!important}.px_0{padding-left:0!important;padding-right:0!important}.px_xs{padding-left:var(--xs)!important;padding-right:var(--xs)!important}.px_sm{padding-left:var(--sm)!important;padding-right:var(--sm)!important}.px_md{padding-left:var(--md)!important;padding-right:var(--md)!important}.px_lg{padding-left:var(--lg)!important;padding-right:var(--lg)!important}.px_xl{padding-left:var(--xl)!important;padding-right:var(--xl)!important}.px_xxl{padding-left:var(--xxl)!important;padding-right:var(--xxl)!important}.py_0{padding-top:0!important;padding-bottom:0!important}.py_xs{padding-top:var(--xs)!important;padding-bottom:var(--xs)!important}.py_sm{padding-top:var(--sm)!important;padding-bottom:var(--sm)!important}.py_md{padding-top:var(--md)!important;padding-bottom:var(--md)!important}.py_lg{padding-top:var(--lg)!important;padding-bottom:var(--lg)!important}.py_xl{padding-top:var(--xl)!important;padding-bottom:var(--xl)!important}.py_xxl{padding-top:var(--xxl)!important;padding-bottom:var(--xxl)!important}.pt_0{padding-top:0!important}.pt_xs{padding-top:var(--xs)!important}.pt_sm{padding-top:var(--sm)!important}.pt_md{padding-top:var(--md)!important}.pt_lg{padding-top:var(--lg)!important}.pt_xl{padding-top:var(--xl)!important}.pt_xxl{padding-top:var(--xxl)!important}.pt_1{padding-top:1px!important}.pt_2{padding-top:2px!important}.pt_3{padding-top:3px!important}.pt_4{padding-top:4px!important}.pr_0{padding-right:0!important}.pr_xs{padding-right:var(--xs)!important}.pr_sm{padding-right:var(--sm)!important}.pr_md{padding-right:var(--md)!important}.pr_lg{padding-right:var(--lg)!important}.pr_xl{padding-right:var(--xl)!important}.pr_xxl{padding-right:var(--xxl)!important}.pr_1{padding-right:1px!important}.pr_2{padding-right:2px!important}.pr_3{padding-right:3px!important}.pr_4{padding-right:4px!important}.pb_0{padding-bottom:0!important}.pb_xs{padding-bottom:var(--xs)!important}.pb_sm{padding-bottom:var(--sm)!important}.pb_md{padding-bottom:var(--md)!important}.pb_lg{padding-bottom:var(--lg)!important}.pb_xl{padding-bottom:var(--xl)!important}.pb_xxl{padding-bottom:var(--xxl)!important}.pb_1{padding-bottom:1px!important}.pb_2{padding-bottom:2px!important}.pb_3{padding-bottom:3px!important}.pb_4{padding-bottom:4px!important}.pl_0{padding-left:0!important}.pl_xs{padding-left:var(--xs)!important}.pl_sm{padding-left:var(--sm)!important}.pl_md{padding-left:var(--md)!important}.pl_lg{padding-left:var(--lg)!important}.pl_xl{padding-left:var(--xl)!important}.pl_xxl{padding-left:var(--xxl)!important}.pl_1{padding-left:1px!important}.pl_2{padding-left:2px!important}.pl_3{padding-left:3px!important}.pl_4{padding-left:4px!important}.text_center{text-align:center!important}.text_right{text-align:right!important}.text_left{text-align:left!important}.text_justify{text-align:justify!important}.text_dec_none{text-decoration:none!important}.text_underline{text-decoration:underline}.text_through{text-decoration:line-through}.text_italic{font-style:italic}.text_lowercase{text-transform:lowercase}.text_uppercase{text-transform:uppercase}.text_capitalize{text-transform:capitalize}.hover_blue:hover{color:var(--b_brand_blue)!important}.hover_pink:hover{color:var(--b_brand_pink)!important}.hover_underline:hover{text-decoration:underline!important}.text_nowrap{white-space:nowrap!important}.text_wrap{white-space:normal!important}.text_break{word-break:break-all!important;word-wrap:break-word!important}.text_ellipsis{max-width:100%;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text_ellipsis_2l{max-width:100%;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.text_ellipsis_3l{max-width:100%;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical}.fw_300{font-weight:300!important}.fw_400{font-weight:400!important}.fw_700{font-weight:700!important}.fw_bold{font-weight:700!important}.fw_border{font-weight:bolder!important}.fw_lighter{font-weight:lighter!important}.lh_xs{line-height:var(--lh_xs)!important}.lh_sm{line-height:var(--lh_sm)!important}.lh_md{line-height:var(--lh_md)!important}.lh_lg{line-height:var(--lh_lg)!important}.lh_xl{line-height:var(--lh_xl)!important}.fs_1{font-size:var(--fs_1)!important}.fs_2{font-size:var(--fs_2)!important}.fs_3{font-size:var(--fs_3)!important}.fs_4{font-size:var(--fs_4)!important}.fs_5{font-size:var(--fs_5)!important}.fs_6{font-size:var(--fs_6)!important}.fs_1x,.fs_sm1{font-size:calc(var(--fs_1) + var(--fs_sm_plus))!important}.fs_2x,.fs_sm2{font-size:calc(var(--fs_2) + var(--fs_sm_plus))!important}.fs_3x,.fs_sm3{font-size:calc(var(--fs_3) + var(--fs_sm_plus))!important}.fs_4x,.fs_sm4{font-size:calc(var(--fs_4) + var(--fs_sm_plus))!important}.fs_5x,.fs_sm5{font-size:calc(var(--fs_5) + var(--fs_sm_plus))!important}.fs_6x,.fs_sm6{font-size:calc(var(--fs_6) + var(--fs_sm_plus))!important}.fs_1xx,.fs_lg1{font-size:calc(var(--fs_1) + var(--fs_lg_plus))!important}.fs_2xx,.fs_lg2{font-size:calc(var(--fs_2) + var(--fs_lg_plus))!important}.fs_3xx,.fs_lg3{font-size:calc(var(--fs_3) + var(--fs_lg_plus))!important}.fs_4xx,.fs_lg4{font-size:calc(var(--fs_4) + var(--fs_lg_plus))!important}.fs_5xx,.fs_lg5{font-size:calc(var(--fs_5) + var(--fs_lg_plus))!important}.fs_6xx,.fs_lg6{font-size:calc(var(--fs_6) + var(--fs_lg_plus))!important}.transform_none{-webkit-transform:none!important;transform:none!important}.translateX_50{-webkit-transform:translateX(50%)!important;transform:translateX(50%)!important}.translateY_50{-webkit-transform:translateY(50%)!important;transform:translateY(50%)!important}.translateX_n50{-webkit-transform:translateX(-50%)!important;transform:translateX(-50%)!important}.translateY_n50{-webkit-transform:translateY(-50%)!important;transform:translateY(-50%)!important}.rotate_45{-webkit-transform:rotate(45deg)!important;transform:rotate(45deg)!important}.rotate_90{-webkit-transform:rotate(90deg)!important;transform:rotate(90deg)!important}.rotate_180{-webkit-transform:rotate(180deg)!important;transform:rotate(180deg)!important}.rotate_360{-webkit-transform:rotate(360deg)!important;transform:rotate(360deg)!important}.rotate_n45{-webkit-transform:rotate(-45deg)!important;transform:rotate(-45deg)!important}.rotate_n90{-webkit-transform:rotate(-90deg)!important;transform:rotate(-90deg)!important}.rotate_n180{-webkit-transform:rotate(-180deg)!important;transform:rotate(-180deg)!important}.rotate_n360{-webkit-transform:rotate(-360deg)!important;transform:rotate(-360deg)!important}.scale_sm{-webkit-transform:scale(1.05)!important;transform:scale(1.05)!important}.scale_md{-webkit-transform:scale(1.1)!important;transform:scale(1.1)!important}.scale_lg{-webkit-transform:scale(1.15)!important;transform:scale(1.15)!important}.scale_nsm{-webkit-transform:scale(.95)!important;transform:scale(.95)!important}.scale_nmd{-webkit-transform:scale(.9)!important;transform:scale(.9)!important}.scale_nlg{-webkit-transform:scale(.85)!important;transform:scale(.85)!important}.ts_none{-webkit-transition:all 0 ease 0!important;transition:all 0 ease 0!important}.ts_all{-webkit-transition:all .5s!important;transition:all .5s!important}.ts_all_fast{-webkit-transition:all .2s!important;transition:all .2s!important}.ts_all_slow{-webkit-transition:all .8s!important;transition:all .8s!important}.tf_ease{-webkit-transition-timing-function:ease!important;transition-timing-function:ease!important}.tf_linear{-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important}.tf_ease_in{-webkit-transition-timing-function:ease-in!important;transition-timing-function:ease-in!important}.tf_ease_out{-webkit-transition-timing-function:ease-out!important;transition-timing-function:ease-out!important}.tf_ease_in_out{-webkit-transition-timing-function:ease-in-out!important;transition-timing-function:ease-in-out!important}.v_align_top{vertical-align:top!important}.v_align_middle{vertical-align:middle!important}.v_align_bottom{vertical-align:bottom!important}.v_align_baseline{vertical-align:baseline!important}.v_align_tt{vertical-align:text-top!important}.v_align_tb{vertical-align:text-bottom!important}