/* @import must come before any rule blocks (CSS spec) */ @import url('/style.css'); /* ── LIGHT MODE variables (:root) ────────────────────────────────── */ :root { /* Brand */ --tz-primary: #10b981; --tz-primary-deep: #10526A; --tz-primary-deep-hover: #0d3f52; /* Backgrounds */ --tz-bg: #ffffff; --tz-bg-hero: #e8f9f2; --tz-bg-navbar: #F7FAFC; --tz-bg-dev-badge: rgba(255, 255, 255, 0.88); /* Icon & interactive */ --tz-bg-icon: #eaf3f7; --tz-bg-icon-active: #d1e8f0; --tz-bg-row-active: #edfaf3; --tz-bg-item-hover: #f1f9fc; --tz-bg-item-active: #eaf3f7; --tz-bg-done: #f1f5f9; --tz-bg-badge: rgba(16, 82, 106, 0.07); --tz-bg-preview: linear-gradient(160deg, #b2ecf5 0%, #c8f5dc 100%); /* Text */ --tz-text-heading: #0f172a; --tz-text-body: #334155; --tz-text-subtitle: #475569; --tz-text-muted: #64748b; --tz-text-subtle: #94a3b8; --tz-text-badge: #4b5563; --tz-text-primary: #10526A; --tz-text-link-hover: #1d4ed8; --tz-text-placeholder:#cbd5e1; /* Borders */ --tz-border: #e8edf1; --tz-border-div: #e2e8f0; --tz-border-row: #edf2f7; --tz-border-subtle: #f1f5f9; --tz-border-dev-badge: rgba(16, 82, 106, 0.18); /* Accent */ --tz-green: #10b981; --tz-green-light: #6ee7b7; --tz-green-processing: #059669; --tz-green-processing-bg: #d1fae5; --tz-prim-line-start: #6ee7b7; --tz-prim-line-end: #79a9b1; /* Card hover */ --tz-border-card-hover: #d1e4ec; --tz-bg-hover-alt: #f8fafc; --tz-primary-icon: var(--tz-primary); /* Icon color */ --primary-400: #10b981; --tz-icon-color: var(--primary-400); /* Button background */ --primary-600: #26536B; --tz-primary-btn: var(--primary-600); /* Pulse */ --tz-pulse-1: rgba(15, 45, 61, 0.45); --tz-pulse-2: rgba(15, 45, 61, 0); /* Sidebar */ --tz-bg-sidebar: #F7FAFC; --tz-sb-header-size: 11px; --tz-sb-header-color: #94a3b8; --tz-sb-hover-bg: rgba(0, 0, 0, 0.06); --tz-sb-divider-color: #e2e8f0; /* Gradient */ --tz-hero-accent-gradient: linear-gradient(90deg, #10526A 0%, #10b981 100%); /* ===================================================================== Typography — global type scale Standard: getting-started/overview/overview.mdx. Every kind of text on that page (and every other page's headings/body copy/UI labels) reads its size/weight/line-height/letter-spacing directly off one of these tiers — nothing hardcodes a literal. Add a new component to an existing tier rather than introducing another one-off value. Same values in light & dark — only color (--tz-text-*) changes between themes. ===================================================================== */ /* Weight */ --tz-fw-regular: 400; --tz-fw-medium: 500; --tz-fw-semibold: 600; --tz-fw-bold: 700; /* Line-height */ --tz-lh-tight: 1.1; /* hero title */ --tz-lh-snug: 1.3; /* diagram node title/description */ --tz-lh-snug-alt: 1.35; /* list/tab item title */ --tz-lh-normal: 1.45; /* card description */ --tz-lh-relaxed: 1.5; /* list/tab item description, table */ --tz-lh-loose: 1.6; /* body copy, subtitles, panel description */ /* Letter-spacing */ --tz-ls-tight: -0.03em; /* hero title */ --tz-ls-snug: -0.02em; /* h1/h2 headings */ --tz-ls-wide: 0.01em; /* eyebrow badge */ --tz-ls-wider: 0.05em; /* uppercase sidebar section header */ /* Font-size — the only sizes used anywhere on the site */ --tz-fs-display: 3rem; /* 48px — marketing hero headline */ --tz-fs-display-tablet: 2.25rem; /* 36px, <=900px */ --tz-fs-display-mobile: 1.75rem; /* 28px, <=600px */ --tz-fs-display-mobile-sm: 1.5rem; /* 24px, <=480px */ --tz-fs-heading-1: 1.85rem; /* 29.6px — page/platform title */ --tz-fs-heading-1-mobile: 1.5rem; /* 24px, <=640px, matches Mintlify's own H1 breakpoint */ --tz-fs-heading-2: 1.6rem; /* 25.6px — section title */ --tz-fs-heading-2-mobile: 1.35rem; /* 21.6px, <=600px */ --tz-fs-heading-3: 1.25rem; /* 20px — sub-section/panel title */ --tz-fs-heading-4: 14px; /* card/list/component titles */ --tz-fs-paragraph: 1.0625rem; /* 17px — prose body, subtitles */ --tz-fs-paragraph-mobile: 0.9375rem; /* 15px, <=600px */ --tz-fs-paragraph-mobile-sm: 0.875rem; /* 14px, <=480px */ --tz-fs-label: 14.5px; /* buttons, links, list/tab titles */ --tz-fs-description: 13px; /* secondary/supporting text */ --tz-fs-caption: 12px; /* smallest micro text */ } /* ── DARK MODE variable overrides (html.dark beats :root specificity) */ html.dark { /* Brand */ --tz-primary: #10b981; --tz-primary-deep: #4db8d1; --tz-primary-deep-hover: #67c8de; /* Backgrounds */ --tz-bg: #0f1117; --tz-bg-hero: #0f1117; --tz-bg-navbar: var(--tz-bg); --tz-bg-dev-badge: rgba(15, 17, 23, 0.9); /* Icon & interactive */ --tz-bg-icon: #1a2235; --tz-bg-icon-active: #1e3a50; --tz-bg-row-active: #0a1f18; --tz-bg-item-hover: #161b27; --tz-bg-item-active: #1a2235; --tz-bg-done: #161b27; --tz-bg-badge: rgba(77, 184, 209, 0.1); --tz-bg-preview: linear-gradient(160deg, #0c1a26 0%, #081510 100%); /* Text */ --tz-text-heading: #f1f5f9; --tz-text-body: #cbd5e1; --tz-text-subtitle: #94a3b8; --tz-text-muted: #94a3b8; --tz-text-subtle: #94a3b8; --tz-text-badge: #94a3b8; --tz-text-primary: #4db8d1; --tz-text-link-hover: #7dd3e8; --tz-text-placeholder:#475569; /* Borders */ --tz-border: rgba(255, 255, 255, 0.1); --tz-border-div: rgba(255, 255, 255, 0.08); --tz-border-row: rgba(255, 255, 255, 0.06); --tz-border-subtle: rgba(255, 255, 255, 0.05); --tz-border-dev-badge: rgba(77, 184, 209, 0.2); /* Accent */ --tz-green-processing: #34d399; --tz-green-processing-bg: rgba(16, 185, 129, 0.12); /* Card hover */ --tz-border-card-hover: rgba(77, 184, 209, 0.35); --tz-bg-hover-alt: #161b27; --tz-primary-icon: #7dd3e8; --primary-400: #10b981; --tz-icon-color: var(--primary-400); /* Button background */ --primary-600: #26536B; --tz-primary-btn: var(--primary-600); /* Pulse */ --tz-pulse-1: rgba(77, 184, 209, 0.45); --tz-pulse-2: rgba(77, 184, 209, 0); /* Sidebar */ --tz-bg-sidebar: transparent; --tz-sb-hover-bg: rgba(255, 255, 255, 0.07); --tz-sb-divider-color: rgba(255, 255, 255, 0.06); } /* ── Coming Soon tabs (Ramps & TazaMatch) ────────────────────────── */ a[href^="/Ramps"], a[href^="/TazaMatch"] { opacity: 0.45 !important; cursor: not-allowed !important; position: relative !important; } a[href^="/Ramps"]::after, a[href^="/TazaMatch"]::after { content: "Coming Soon"; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tz-text-heading); color: var(--tz-bg); font-size: var(--tz-fs-caption); font-weight: var(--tz-fw-medium); padding: 4px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 9999; } a[href^="/Ramps"]:hover::after, a[href^="/TazaMatch"]:hover::after { opacity: 1; } /* ── Navbar background ───────────────────────────────────────────── */ #navbar { background-color: var(--tz-bg-navbar) !important; background: var(--tz-bg-navbar) !important; } /* Compact navbar at 1024–1399px: hide icons so 11 tabs fit on one row */ @media (min-width: 1024px) and (max-width: 1399px) { #navbar > div + div a svg, #navbar > nav a svg { display: none !important; } #navbar > div + div a, #navbar > nav a { padding-left: 10px !important; padding-right: 10px !important; font-size: var(--tz-fs-description) !important; white-space: nowrap !important; } #navbar > div + div, #navbar > nav { gap: 0 !important; } } .dark #navbar { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } /* ── Content prose links ─────────────────────────────────────────── */ .prose a:not(:is(.not-prose *)), [data-mint-prose] a:not(:is(.not-prose *)), article a:not(:is(.not-prose *)) { color: var(--tz-primary) !important; font-weight: inherit !important; text-decoration: none !important; border-bottom: none !important; } .prose a:not(:is(.not-prose *)):hover, [data-mint-prose] a:not(:is(.not-prose *)):hover, article a:not(:is(.not-prose *)):hover { color: var(--tz-primary) !important; text-decoration: none !important; border-bottom: 2px solid var(--tz-primary) !important; } .dark .prose a, .dark [data-mint-prose] a, .dark article a { color: var(--tz-primary) !important; font-weight: var(--tz-fw-semibold) !important; } .dark .prose a:hover, .dark [data-mint-prose] a:hover, .dark article a:hover { color: var(--tz-primary) !important; } [data-callout] a, [class*="callout"] a, [class*="admonition"] a, [class*="alert"] a, .warning a, .note a, .tip a, .info a { color: inherit !important; font-weight: var(--tz-fw-bold) !important; text-decoration: none !important; } /* ── Content typography (all other pages) ──────────────────────── Applies the type tokens defined above (standard: getting-started/ overview/overview.mdx) to Mintlify's native prose elements, so every page's headings and body copy share the same type system as the standard page. :not(:where([class~="not-prose"],[class~="not-prose"] *)) mirrors Mintlify's own prose scoping so Card/Accordion internals (marked not-prose) are left untouched — they don't yet have a matching token. */ #page-title { font-size: var(--tz-fs-heading-1) !important; font-weight: var(--tz-fw-bold) !important; letter-spacing: var(--tz-ls-snug) !important; } @media (max-width: 640px) { #page-title { font-size: var(--tz-fs-heading-1-mobile) !important; } } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-heading-1) !important; font-weight: var(--tz-fw-bold) !important; letter-spacing: var(--tz-ls-snug) !important; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-heading-2) !important; font-weight: var(--tz-fw-bold) !important; letter-spacing: var(--tz-ls-snug) !important; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-heading-3) !important; font-weight: var(--tz-fw-semibold) !important; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-heading-4) !important; font-weight: var(--tz-fw-semibold) !important; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)), .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-paragraph) !important; line-height: var(--tz-lh-loose) !important; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)), [data-mint-prose] :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)), article :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: var(--tz-fs-description) !important; line-height: var(--tz-lh-relaxed) !important; } /* ── Sidebar ─────────────────────────────────────────────────────── */ .sidebar-group-header { font-size: var(--tz-sb-header-size) !important; font-weight: var(--tz-fw-semibold) !important; letter-spacing: var(--tz-ls-wider) !important; color: var(--tz-sb-header-color) !important; text-transform: uppercase !important; padding-top: 18px !important; padding-bottom: 6px !important; line-height: var(--tz-lh-normal) !important; } #sidebar-content a { border-radius: 6px !important; transition: background-color 0.12s ease !important; } #sidebar-content a:not([data-active="true"]):not([aria-current="page"]):not([class*="text-primary"]):hover { background-color: var(--tz-sb-hover-bg) !important; color: #374151 !important; } #sidebar-content a[data-active="true"], #sidebar-content a[aria-current="page"], #sidebar-content a[class*="text-primary"] { color: var(--primary-400) !important; } /* Icon uses CSS mask-image — background-color drives color, not currentColor */ #sidebar-content a[data-active="true"] svg, #sidebar-content a[aria-current="page"] svg, #sidebar-content a[class*="text-primary"] svg { background-color: var(--primary-400) !important; } #sidebar-content a[data-active="true"]:hover, #sidebar-content a[aria-current="page"]:hover, #sidebar-content a[class*="text-primary"]:hover { background-color: var(--tz-sb-hover-bg) !important; color: var(--primary-400) !important; } .dark #sidebar-content a:not([data-active="true"]):not([aria-current="page"]):not([class*="text-primary"]):hover { background-color: var(--tz-sb-hover-bg) !important; color: #9ca3af !important; } .dark #sidebar-content a[data-active="true"], .dark #sidebar-content a[aria-current="page"], .dark #sidebar-content a[class*="text-primary"] { color: var(--primary-400) !important; } .dark #sidebar-content a[data-active="true"]:hover, .dark #sidebar-content a[aria-current="page"]:hover, .dark #sidebar-content a[class*="text-primary"]:hover { background-color: var(--tz-sb-hover-bg) !important; color: var(--primary-400) !important; } /* Thin divider between sidebar sections via ::before; negative insets bleed past px-7 padding */ div.text-sm.relative > div.mt-6.lg\:mt-8 { position: relative !important; padding-top: 14px !important; } div.text-sm.relative > div.mt-6.lg\:mt-8::before { content: "" !important; position: absolute !important; top: 0 !important; left: -1.75rem !important; right: -1.75rem !important; height: 1px !important; background: var(--tz-sb-divider-color) !important; transform: scaleY(0.5) !important; transform-origin: top !important; } /* ── "On this page" TOC — left rail + active marker ────────────────── Mintlify's palm theme already puts a border-color utility (.border-primary) on the active entry's , but ships no border-width alongside it, so nothing renders without this. One border on the outer

draws a continuous rail spanning every heading (including nested ones, since a box border wraps its full content height); each

overlays a 2px segment on top of it that's colored only while active. */ #table-of-contents-content.toc { border-left: 1px solid var(--tz-border-div) !important; } #table-of-contents-content.toc .toc-item > a { position: relative !important; border-left: 2px solid transparent !important; margin-left: -1px !important; transition: border-color 0.15s ease !important; } #table-of-contents-content.toc .toc-item[data-depth="0"] > a { padding-left: 0.75rem !important; } #table-of-contents-content.toc .toc-item[data-depth="1"] > a { padding-left: 1.75rem !important; } #table-of-contents-content.toc .toc-item[data-active="true"] > a { border-left-color: var(--primary-400) !important; } /* ── Native / */ .card [data-component-part="card-icon"] svg { background-color: var(--primary-400) !important; } .card.group:hover { border-color: var(--primary-400) !important; } .card:hover #card-link-arrow-icon { color: var(--primary-400) !important; } /* Move collapsible chevron to the right; order:999 avoids collision with style.css order:1/2/3 */ #sidebar-content button[aria-expanded], #sidebar-content [role="button"][aria-expanded] { display: flex !important; width: 100% !important; } #sidebar-content button[aria-expanded] > div:has(> svg.transition-transform), #sidebar-content [role="button"][aria-expanded] > div:has(> svg.transition-transform) { order: 999 !important; } /* ── Dark mode overrides */ html.dark .tz-prim-node, html.dark .tz-ptabs, html.dark .tz-ptabs-nav, html.dark .tz-ptabs-arrow, html.dark .tz-ptabs-body, html.dark .tz-ptabs-content { background: #0f1117 !important; background-color: #0f1117 !important; } html.dark .tz-cap-card { background: #0f1117 !important; background-color: #0f1117 !important; } html.dark .tz-cap-card:hover { background: #161b27 !important; background-color: #161b27 !important; } html.dark .tz-hero { background-color: #0f1117 !important; } html.dark .tz-hero-title, html.dark .tz-platform-title, html.dark .tz-cap-title, html.dark .tz-ptabs-item-title, html.dark .tz-res-col-title, html.dark .tz-uc-title, html.dark .tz-prim-title, html.dark .tz-trusted-label { color: #f1f5f9 !important; } html.dark .tz-hero-subtitle, html.dark .tz-platform-subtitle, html.dark .tz-cap-desc, html.dark .tz-ptabs-item-desc, html.dark .tz-uc-desc, html.dark .tz-res-link, html.dark .tz-prim-desc { color: #cbd5e1 !important; } html.dark .tz-cap-card, html.dark .tz-ptabs { border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .tz-ptabs-nav, html.dark .tz-ptabs-body { border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .tz-ptabs-tab--active { color: var(--primary-400) !important; border-bottom-color: var(--primary-400) !important; } html.dark .tz-ptabs-item:hover { background: #161b27 !important; } html.dark .tz-ptabs-item--active { background: #1a2235 !important; } .sidebar-group-header { font-size: var(--tz-sb-header-size) !important; font-weight: var(--tz-fw-semibold) !important; letter-spacing: var(--tz-ls-wider) !important; color: var(--tz-sb-header-color) !important; text-transform: uppercase !important; padding-top: 18px !important; padding-bottom: 6px !important; line-height: var(--tz-lh-normal) !important; } #sidebar-content a { border-radius: 6px !important; transition: background-color 0.12s ease !important; } #sidebar-content a:not([data-active="true"]):not([aria-current="page"]):not([class*="text-primary"]):hover { background-color: var(--tz-sb-hover-bg) !important; color: #374151 !important; /* gray-700 = resting, no shift */ } #sidebar-content a[data-active="true"]:hover, #sidebar-content a[aria-current="page"]:hover, #sidebar-content a[class*="text-primary"]:hover { background-color: var(--tz-sb-hover-bg) !important; } .dark #sidebar-content a:not([data-active="true"]):not([aria-current="page"]):not([class*="text-primary"]):hover { background-color: var(--tz-sb-hover-bg-dark) !important; color: #9ca3af !important; /* gray-400 = resting, no shift */ } .dark #sidebar-content a[data-active="true"]:hover, .dark #sidebar-content a[aria-current="page"]:hover, .dark #sidebar-content a[class*="text-primary"]:hover { background-color: var(--tz-sb-hover-bg-dark) !important; } /* ── MUI-style accordions (Accordion / AccordionGroup, site-wide) ─ Mirrors MUI's "outlined" Accordion: flat bordered card, chevron on the right (not Mintlify's default left caret), divider between the header and the panel. Targets Mintlify's own data-component-part hooks so it applies to every without touching content. */ .accordion-group, .accordion { border: 1px solid var(--tz-border) !important; border-radius: 10px !important; box-shadow: none !important; } .accordion-group > .accordion + .accordion { border-top: 1px solid var(--tz-border) !important; } .accordion-group > .accordion { border: 0 !important; border-radius: 0 !important; } /* Summary row — MUI AccordionSummary spec: 48px min-height, 0/16px padding, content vertically centered rather than padded */ [data-component-part="accordion-button"] { position: relative !important; overflow: hidden !important; min-height: 48px !important; padding: 0 16px !important; border-radius: 0 !important; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } [data-component-part="accordion-button"]:hover { background-color: var(--tz-bg-item-hover) !important; } [data-component-part="accordion-button"]:focus-visible { outline: 2px solid var(--tz-primary) !important; outline-offset: -2px !important; background-color: var(--tz-bg-item-hover) !important; } /* Press feedback standing in for MUI's ripple (no click-tracking JS available here, so it blooms from center rather than the cursor) */ [data-component-part="accordion-button"]::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--tz-text-heading) 0%, transparent 65%); opacity: 0; transform: scale(0.3); pointer-events: none; transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); } [data-component-part="accordion-button"]:active::after { opacity: 0.06; transform: scale(1); transition: transform 50ms linear, opacity 50ms linear; } [data-component-part="accordion-title"] { color: var(--tz-text-heading) !important; font-weight: var(--tz-fw-medium) !important; } [data-component-part="accordion-description"] { color: var(--tz-text-muted) !important; } /* Optional leading icon stays put, before the title */ [data-component-part="accordion-icon"] { order: 0; flex-shrink: 0; } /* Title fills the row so the toggle lands flush right, MUI-style */ [data-component-part="accordion-title-container"] { order: 1; flex: 1 1 auto !important; } /* Move the toggle from the left (Mintlify default) to the right, and redraw it as a down chevron that rotates a full 180° open, matching MUI's ExpandMoreIcon (Mintlify's own caret only turns 90°, right to down, so it's replaced rather than just repositioned) */ [data-component-part="accordion-caret-right"] { order: 999 !important; flex-shrink: 0 !important; margin-left: 12px !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; } [data-component-part="accordion-caret-right"] > * { display: none !important; } [data-component-part="accordion-caret-right"]::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--tz-text-muted); border-bottom: 2px solid var(--tz-text-muted); transform: rotate(45deg); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } [data-component-part="accordion-button"][aria-expanded="true"] [data-component-part="accordion-caret-right"]::after { transform: rotate(225deg); } /* Content panel — MUI AccordionDetails spec: 8px/16px/16px padding — plus a divider under the header, aligned with its padding */ [data-component-part="accordion-content"] { margin: 0 !important; padding: 8px 16px 16px !important; border-top: 1px solid var(--tz-border) !important; } /* ── Coverage page market accordions (.tz-coverage) ─────────────── */ /* Title + description on one row: country left, summary right, colored */ .tz-coverage [data-component-part="accordion-title-container"] { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; } .tz-coverage [data-component-part="accordion-title"] { flex: 0 0 auto; } .tz-coverage [data-component-part="accordion-description"] { margin-left: auto !important; font-size: var(--tz-fs-description); font-weight: var(--tz-fw-medium); text-align: right; color: var(--tz-text-primary) !important; }

Create Customer