/* Override the background “layer” of the Dashboard button */
#topbar-cta-button span.bg-primary-dark {
  background-color: #0B0077 !important;
}

/* Dark-mode override */
html.dark #topbar-cta-button span.bg-primary-dark {
  background-color: #BAB3FF1A !important;
  border-color: #BAB3FF;
  border-width: 1px;
}

/* Add 1px border to content images only (exclude navigation logo) */
main img,
article img,
.content img,
[data-content] img {
  border: 1px solid #E8EAED !important;
}

/* Ensure rounded content images maintain their border */
main img.rounded,
article img.rounded,
.content img.rounded,
[data-content] img.rounded {
  border: .5px solid #E8EAED !important;
}

/* Exclude navigation logo specifically */
.nav-logo,
img.nav-logo {
  border: none !important;
}





/* Reset anchor icon hover styles to match Anthropic's implementation */

/* Target the anchor container */
.nav-anchor:hover .mr-4.rounded-md.p-1.shadow-sm {
  /* Match the hover background color of navigation links */
  background: rgba(17, 24, 39, 0.05) !important; /* bg-gray-600/5 */
  background-color: rgba(17, 24, 39, 0.05) !important;
  color: #1f2937 !important; /* text-gray-900 for light mode */
  /* Explicitly maintain border and shadow */
  --tw-ring-opacity: 1 !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  filter: none !important;
}

/* Dark mode version */
.dark .nav-anchor:hover .mr-4.rounded-md.p-1.shadow-sm {
  /* Match the hover background color of navigation links */
  background: rgba(229, 231, 235, 0.05) !important; /* dark:bg-gray-200/5 */
  background-color: rgba(229, 231, 235, 0.05) !important;
  color: #d1d5db !important; /* text-gray-300 for dark mode */
  /* Explicitly maintain border and shadow */
  --tw-ring-opacity: 1 !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  filter: none !important;
}

/* Override the group-hover:ring-0 class */
.group:hover .group-hover\:ring-0 {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgba(17, 24, 39, 0.05) !important; /* ring-gray-950/5 */
}

.dark .group:hover .group-hover\:ring-0 {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgba(55, 65, 81, 0.4) !important; /* dark:ring-gray-700/40 */
}

/* Target the SVG directly on hover */
.nav-anchor:hover .secondary-opacity.group-hover\:fill-primary-dark.group-hover\:bg-white {
  background-color: currentColor !important;
  fill: none !important;
}

/* Light mode hover color */
.nav-anchor:hover .secondary-opacity {
  background-color: #1f2937 !important; /* text-gray-900 */
}

/* Dark mode hover color */
.dark .nav-anchor:hover .secondary-opacity {
  background-color: #d1d5db !important; /* text-gray-300 */
}

/* Override any inline styles that might be applied dynamically */
.nav-anchor .mr-4.rounded-md.p-1.shadow-sm[style*="background"] {
  background: inherit !important;
  background-color: inherit !important;
}

.nav-anchor:hover .mr-4.rounded-md.p-1.shadow-sm[style*="background"] {
  background: rgba(17, 24, 39, 0.05) !important; /* bg-gray-600/5 */
  background-color: rgba(17, 24, 39, 0.05) !important;
}

.dark .nav-anchor:hover .mr-4.rounded-md.p-1.shadow-sm[style*="background"] {
  background: rgba(229, 231, 235, 0.05) !important; /* dark:bg-gray-200/5 */
  background-color: rgba(229, 231, 235, 0.05) !important;
}

/* Ensure the icon's background color inherits from text color */
.nav-anchor:hover .h-4.w-4.secondary-opacity {
  background-color: currentColor !important;
}


/* Custom CSS for breadcrumbs */

/* Text color for breadcrumb links in light mode */
.inline-flex.items-center.gap-1\.5.text-sm.text-gray-500 a {
  color: #0070FA !important; /* Primary color */
}

/* Text color for breadcrumb links on hover in light mode */
.inline-flex.items-center.gap-1\.5.text-sm.text-gray-500 a:hover {
  color: #0B0077 !important; /* Dark color for hover state */
}

/* Text color for breadcrumb links in dark mode */
html.dark .inline-flex.items-center.gap-1\.5.text-sm a {
  color: #BAB3FF !important; /* Light color for dark mode */
}

/* Text color for breadcrumb links on hover in dark mode */
html.dark .inline-flex.items-center.gap-1\.5.text-sm a:hover {
  color: white !important; /* White for hover state in dark mode */
}

/* Chevron icon color in light mode */
.lucide.lucide-chevron-right {
  stroke: #0070FA !important; /* Primary color */
}

/* Chevron icon color in dark mode */
html.dark .lucide.lucide-chevron-right {
  stroke: #BAB3FF !important; /* Light color */
}

.mint-absolute {
    position: absolute
}
.mint-relative {
    position: relative
}
.mint-inset-0 {
    inset: 0px
}
.mint-z-10 {
    z-index: 10
}
.mint-ml-1 {
    margin-left: 0.25rem
}
.mint-ml-1\.5 {
    margin-left: 0.375rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-flex {
    display: flex
}
.mint-hidden {
    display: none
}
.mint-h-4 {
    height: 1rem
}
.mint-h-full {
    height: 100%
}
.mint-w-4 {
    width: 1rem
}
.mint-w-full {
    width: 100%
}
.mint-flex-none {
    flex: none
}
.mint-items-center {
    align-items: center
}
.mint-justify-center {
    justify-content: center
}
.mint-rounded-full {
    border-radius: 9999px
}
.mint-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.mint-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.mint-pl-4 {
    padding-left: 1rem
}
.mint-pr-4 {
    padding-right: 1rem
}
.mint-text-center {
    text-align: center
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-leading-6 {
    line-height: 1.5rem
}
.mint-text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.mint-shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:mint-bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity))
}
.dark\:mint-block:is(.dark *) {
    display: block
}
.dark\:mint-hidden:is(.dark *) {
    display: none
}
.dark\:mint-text-gray-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}
.dark\:mint-text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.dark\:hover\:mint-bg-white\/70:hover:is(.dark *) {
    background-color: rgb(255 255 255 / 0.7)
}
@media (min-width: 1024px) {
    .lg\:mint-flex {
        display: flex
    }
}

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}



Welcome to Flex

Flex Documentation

Welcome to Flex! The easiest way to start accepting [HSA](https://www.healthcare.gov/glossary/health-savings-account-hsa/)/[FSA](https://www.healthcare.gov/glossary/flexible-spending-account-fsa/) Payments

Introduction

We are thrilled to have you in our community.

Onboarding

Learn how to set up reimbursement integrations where consumers receive a Letter of Medical Necessity to file for reimbursement.

Reimbursement

Flex's test mode allows you to test your integration without making real charges or payments.

Test Mode

Learn how products and prices function as core resources for your Flex integration.

Overview

How Products and Prices Work

Understand how to structure your business offerings for payments with Flex.

Getting Started

Get Started With Products and Prices

Learn how to create and manage recurring HSA/FSA payments through Flex.

Subscriptions

This guide describes how to sell a fixed-price monthly subscription offering using Flex.

Build a Subscription Integration

Migrate from legacy webhooks to our new webhook system by September 1, 2025.

Webhooks Deprecation

Legacy Webhooks Deprecation

Listen to events at your webhook endpoint to automatically trigger reactions.

Webhook Overview

Learn how to securely verify webhook signatures to ensure they originate from Flex.

Verify Webhooks

Learn about the different event types Flex sends to your webhook endpoint.

Event Types

Understand HSA/FSA payment trends and performance through the Flex Partner Dashboard.

Get Insights Into HSA/FSA as a Channel

Learn how to invite new members to your organization to access the partner dashboard and private documentation.

Invite Users

Learn how to view and manage your products and prices through the Flex dashboard.

Products and Prices

Manage Your Products and Prices

Learn how to view, export, and refund HSA/FSA payments through the Flex dashboard.

HSA/FSA Payments

Manage Your HSA/FSA Payments

Learn how to view and manage customer information through the Flex dashboard.

Customers

Manage Your Customers

Learn the basics of integrating with the Flex API to accept HSA/FSA payments

Introduction to the Flex API

Learn how to request expanded responses with additional information about related objects.

Expanding Resources

Resources to help you succeed with Flex HSA/FSA payments

Marketing HSA/FSA

Keep track of all the latest updates and improvements to Flex.

Updates

Product Updates

Welcome to the home of your new documentation

Start building awesome documentation in under 5 minutes

Quickstart

Development

Text, title, and styling in standard markdown

Markdown Syntax

Code Blocks

Add image, video, and other HTML elements

Images and Embeds

Mintlify gives you complete control over the look and feel of your documentation using the mint.json file

Global Settings

The navigation field in mint.json defines the pages that go in the navigation menu

Navigation

Example section for showcasing API endpoints

Returns all plants from the system that the user has access to

Get Plants

Create Plant

Deletes a single plant based on the ID supplied

Let’s get started

Developer Guides

API Reference

Marketing

Changelog