/* 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;
}

.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

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

Essential steps to complete after implementing Flex HSA/FSA payments.

Post Implementation Checklist

Post-Implementation Checklist

Resources to help you market HSA/FSA payments to your customers.

Marketing Resources

Guidelines for properly marketing HSA/FSA eligibility.

Messaging HSA/FSA

Best practices for marketing HSA/FSA payments.

Best Practices

Marketing Best Practices

Best practices for marketing HSA/FSA payment acceptance during Q4.

Q4 Marketing Guide

How to use the Flex Shopify Theme App Extension to add HSA/FSA badges to your store.

Shopify Marketing

Shopify Theme App Extension

HSA/FSA landing page templates and FAQs for your website.

Website Templates

HSA/FSA email templates for your marketing campaigns.

Email Templates

HSA/FSA social media templates for your marketing campaigns.

Social Templates

Social Media Templates

Marketing assets to help you promote HSA/FSA.

Ad Templates

Flex components for Webflow websites to promote HSA/FSA payments

Webflow Assets

Common customer questions about HSA/FSA payments.

HSA/FSA Questions

Common customer questions about Letters of Medical Necessity

LOMN Questions

Letter of Medical Necessity Questions

Common customer questions about HSA/FSA reimbursements

Reimbursement Questions

HSA/FSA Reimbursement Questions

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