span.fixed.inset-0.pointer-events-none { background-repeat: no-repeat; background-size: cover; background-position: left -400px !important; } h1, h2, h3, h4, h5, h6 { line-height: 120% !important; letter-spacing: -0.02em !important; /* font-family: Aeonik; */ font-weight: 500 !important; } .table { width: 100%; table-layout: fixed; border-collapse: collapse; } .table th, .table td { text-align: left; word-wrap: break-word; } .table th:first-child, .table td:first-child { width: 30%; max-width: 30%; } .table th:not(:first-child), .table td:not(:first-child) { width: calc(70% / (var(--cols) - 1)); } ol ol { list-style-type: decimal !important; } :root { --tooltip-link-color: #b3a7ff; --bg: #fff; --text: #262626; --muted: #6b7280; --border: #e5e7eb; --accent: #2563eb; --section-icon-bg: #eef2ff; --card-bg: #fff; --card-shadow: rgba(0, 0, 0, 0.08); --input-bg: #fff; --input-border: #d1d5db; --input-placeholder: #9ca3af; --dash-color: #e9eaec; } .dark { --tooltip-link-color: #6742d5; --bg: #0f1115; --text: #e5e7eb; --muted: #a3a3a3; --border: #262a33; --accent: #60a5fa; --section-icon-bg: #1b1f2a; --card-bg: #151923; --card-shadow: rgba(255, 255, 255, 0.06); --input-bg: #141825; --input-border: #2a3140; --input-placeholder: #6b7280; --dash-color: rgba(255, 255, 255, 0.14); } .pipeline-wrapper { position: relative; width: 100%; max-width: 1202px; aspect-ratio: 1202 / 424; margin-bottom: 100px; } .pipeline-img { position: absolute; inset: 0; width: 100%; height: auto; display: block; } .pipeline-dim-circle { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255, 255, 255, 0.6); pointer-events: none; transition: background 0.15s ease; } .dark .pipeline-dim-circle { background: rgba(0, 0, 0, 0.5); } .pipeline-hotspot { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; border-bottom: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pipeline-hotspot:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .dark .pipeline-hotspot:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .frame { margin: 20px 0; } /* Default (light mode) */ a[href^="http"]:not([href="https://auth0.com"])::after { margin-left: 4px; position: relative; top: 1px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } /* Dark mode */ .dark a[href^="http"]:not([href="https://auth0.com"])::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } /* reset for other places */ #footer a[href^="http"]::after, #navbar a[href^="http"]::after, #sidebar-content a[href^="http"]::after, a.no_external_icon[href^="http"]::after, a.card[href^="http"]::after { content: none !important; } .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom: 1px solid #000; font-weight: 500; } .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom: 1px solid #fff; } .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])), .dark .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom-width: 2px; } a strong { font-weight: 700 !important; } #navigation-items::-webkit-scrollbar { width: 4px; } #navigation-items::-webkit-scrollbar-track { background: transparent; } #navigation-items::-webkit-scrollbar-thumb { background: #888888ae; border-radius: 4px; } #navigation-items { scrollbar-width: thin; /* options: auto | thin | none */ scrollbar-color: #888 transparent; } #content-container h5, #content-container h6 { font-weight: 700; } #content-container h5:not(.callout h5), #content-container h6:not(.callout h6) { margin-top: 36px !important; } .sdk_banner_container { background: linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); background-image: url("/images/library/header_bg.svg"), linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } .quickstart_banner_container { background: linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); background-image: url("/images/library/header-bg.svg"), linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } #navbar > div:nth-child(2) { background-color: transparent !important; backdrop-filter: blur(20px); transition: background-color 0.2s ease, backdrop-filter 0.2s ease; } /* Opaque state - solid background */ #navbar[data-is-opaque="true"] > div:nth-child(2) { background-color: rgb(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); } /* Dark mode opaque state */ .dark #navbar[data-is-opaque="true"] > div:nth-child(2) { background-color: rgba(15, 17, 21, 0.75) !important; } /* Transparent state - just blur */ #navbar[data-is-opaque="false"] > div:nth-child(2) { background-color: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(20px); } /* Dark mode transparent state */ .dark #navbar[data-is-opaque="false"] > div:nth-child(2) { background-color: transparent !important; backdrop-filter: blur(20px); } /* Replace navigation border elements with dashed lines */ #navigation-items .px-1.py-3, .sidebar-group .px-1.py-3, .sidebar-groups .px-1.py-3 { /* Clear existing padding and convert to dashed line */ padding: 0 !important; height: 2px; width: 100%; background: repeating-linear-gradient( to right, var(--dash-color, #ccc) 0px, var(--dash-color, #ccc) 8px, transparent 8px, transparent 16px ) !important; margin: 20px 0 !important; } #navigation-items .px-1.py-3 > *, .sidebar-group .px-1.py-3 > *, .sidebar-groups .px-1.py-3 > * { display: none; } /* [data-callout-type="note"] [data-component-part="callout-icon"] svg { display: none; } [data-callout-type="note"] [data-component-part="callout-icon"]::before { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzIxYmFmYiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTMuNjYsODIuMzRsLTU2LTU2QTgsOCwwLDAsMCwxNTIsMjRINTZBMTYsMTYsMCwwLDAsNDAsNDBWMjE2YTE2LDE2LDAsMCwwLDE2LDE2SDIwMGExNiwxNiwwLDAsMCwxNi0xNlY4OEE4LDgsMCwwLDAsMjEzLjY2LDgyLjM0Wk0xNjAsNTEuMzEsMTg4LjY5LDgwSDE2MFpNMjAwLDIxNkg1NlY0MGg4OFY4OGE4LDgsMCwwLDAsOCw4aDQ4VjIxNlptLTMyLTgwYTgsOCwwLDAsMS04LDhIOTZhOCw4LDAsMCwxLDAtMTZoNjRBOCw4LDAsMCwxLDE2OCwxMzZabTAsMzJhOCw4LDAsMCwxLTgsOEg5NmE4LDgsMCwwLDEsMC0xNmg2NEE4LDgsMCwwLDEsMTY4LDE2OFoiPjwvcGF0aD48L3N2Zz4="); display: block; background-repeat: no-repeat; background-size: contain; position: relative; top: -4px; } */ .glossary_h2 { margin-bottom: 0 !important; } .glossary_h3 { margin-top: 30px !important; } .glossary_list li { list-style-type: none !important; padding-left: 0 !important; } .glossary_list li:before { content: none; } .label { display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; background: transparent; } .label-danger { border: 1px solid #e74c3c; /* red */ color: #e74c3c; } .label-primary { border: 1px solid #3498db; /* blue */ color: #3498db; } .breadcrumb-list { display: flex; flex-wrap: wrap; } .breadcrumb-item { white-space: nowrap; } .z-10.absolute.w-full.h-full.border-b.border-gray-100, #sidebar-content, .dark #sidebar-content { border-color: transparent !important; } /* TOC LEFT LINE REMOVED */ #table-of-contents-content li a { border-left-width: 0 !important; } #topbar-cta-button a span { background-color: #000 !important; } .dark #topbar-cta-button a span { background-color: #fff !important; color: #000 !important; } #topbar-cta-button a svg { display: none; } .navbar-link a, .dark .navbar-link a { background-color: #fff; border: 1px solid #cecdca !important; padding-top: 7px; padding-bottom: 7px; } .dark .navbar-link a { background-color: rgb(255 255 255 / 0.1); border-color: #454545 !important; } .dark .navbar-link a:hover { background-color: rgba(255, 255, 255, 0.007); } .topbar-right-container ul.flex.items-center > li { order: 10; } /* baseline */ .topbar-right-container ul.flex.items-center > li:nth-child(1) { order: 1; } /* Log In */ .topbar-right-container ul.flex.items-center > li:nth-child(3) { order: 2; } /* Sign Up (mobile) */ .topbar-right-container ul.flex.items-center > li:nth-child(4) { order: 2; } /* Sign Up (desktop) */ .topbar-right-container ul.flex.items-center > li:nth-child(2) { order: 3; } /* Contact Sales */ ul.flex.items-center > li > a[href*="/u/login"] { order: 1; /* Log In */ background-color: transparent !important; border-color: transparent !important; } #code-snippet-feedback-button svg { display: none !important; } #code-snippet-feedback-button::after { content: ""; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(156 163 175)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } #code-snippet-feedback-button:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107 114 128)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .libraries_card { display: flex; flex-direction: column; justify-content: space-between; } .login_list li::before { content: none; } .login_list h2 { margin: 0 !important; } .login_list a { border-bottom: none !important; } .libraries_cards a svg { width: 12px !important; height: 12px !important; } /* Default (light mode) — keep your existing */ [data-component-part="tooltip-content"] { text-align: left !important; padding: 6px 14px !important; border-radius: 4px !important; } [data-component-part="tooltip-content"] .flex { justify-content: flex-start !important; } /* Dark mode overrides */ .dark [data-component-part="tooltip-content"] { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; } /* Link override in dark mode */ [data-component-part="tooltip-content"] a { color: var(--tooltip-link-color) !important; text-align: left !important; opacity: 1; transition: opacity 0.2s ease-in-out; } [data-component-part="tooltip-content"] a:hover { opacity: 0.7; } .prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration: none !important; } .dark #sidebar-group a img { background-color: transparent !important; } /* .sidebar-group a { background-color: #efefef !important; } .dark .sidebar-group a { background-color: #282828 !important; } */ .nav-tabs a[href="/"] { display: none; } .dark .card, .dark .accordion, .dark .accordion-group { border-color: #9e9e9e; } .card:hover { background-color: rgb(var(--gray-100)); } .dark .card:hover { background-color: rgb(var(--gray-800)); } /* LINKS COLOR */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: #191919 !important; } .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):visited, .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { color: #3f59e4 !important; } /* DARK LINKS COLOR */ .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: #efede9 !important; } .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):visited, .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { color: #99a7f1 !important; } /* CALLOUT LINKS COLOR */ .prose .callout a { color: inherit !important; } /* TABS */ .dark .tabs ul { border-color: #9e9e9e; } /* TABS item hover effect */ .cursor-pointer .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { border-color: #191919 !important; } .dark .cursor-pointer .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { border-color: #9e9e9e !important; }

Read…	To learn…
Light and Dark themes	How to choose your preferred theme.
Auth0 Dashboard Login Session Management	How to manage Auth0 Dashboard sessions.

Auth0 Onboarding

Learn the Basics

Configure Auth0

Plan and Design

Auth0 AI