span.fixed.inset-0.pointer-events-none { background-repeat: no-repeat; background-size: cover; background-position: left -400px !important; } .table { width: 100%; table-layout: fixed; } .table th, .table td { width: 1%; text-align: left; word-wrap: break-word; } ol ol { list-style-type: decimal !important; } :root { --tooltip-link-color: #3f59e4; --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 { --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; /* border-radius: 0 !important; */ } /* .frame img, .frame div { border-radius: 0 !important; } */ table th { text-align: left; } .prose a:is(.dark *):not(.callout *):not(.libraries_cards *), .prose a strong:is(.dark *) { color: #99a7f1 !important; } .prose a:not(.callout *) { color: #3f59e4; } /* 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='%233F59E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } /* Hover (light mode, thicker stroke) */ /* a[href^="http"]:not([href="https://auth0.com"]):hover::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='%233F59E4' stroke-width='3' 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='%2399A7F1' 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; } /* .dark a[href^="http"]:not([href="https://auth0.com"]):hover::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='%2399A7F1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E"); } */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom: 1px solid #3f59e4; font-weight: 500; } .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom: 1px solid #99a7f1; } .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; /* font-weight: 600; */ } a strong { font-weight: 700 !important; } #navigation-items::-webkit-scrollbar { width: 4px; /* adjust this value */ } #navigation-items::-webkit-scrollbar-track { background: transparent; /* or any color */ } #navigation-items::-webkit-scrollbar-thumb { background: #888888ae; /* scrollbar color */ border-radius: 4px; } #navigation-items { scrollbar-width: thin; /* options: auto | thin | none */ scrollbar-color: #888 transparent; /* thumb color | track color */ } #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; /* anchor the waves to the right */ 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; /* anchor the waves to the right */ 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: rgb(255 255 255 / 0.1) !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: 0 !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; }

Auth0 Onboarding

Learn the Basics

Configure Auth0

Plan and Design

Auth0 AI