custom.css

/* Google Font import */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap");

html {
  font-family: "Inter", sans-serif;
}
/* 
* {
  transition-duration: 0.15s !important;
  transition-delay: 0ms !important;
} */

/* reduce italic slant */
/* em {
  font-style: normal;
  font-variation-settings: "slnt" -10;
} */

/* useful for debugging, targeting an element */
/* .prose {
  border: 1px solid red !important;
}

.not-prose {
  border: 1px solid lime !important;
} */

.max-w-8xl {
  max-width: 104rem !important;
}

.max-w-6xl {
  max-width: 78rem !important;
}

.h-\[calc\(100\%-10rem\)\] {
  height: 100%;
}

/* Pills */
.pill {
  display: inline-flex;
  margin: 12px 0px;
  padding: 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 200% */
  text-transform: uppercase;
}

/* Colored pills for release notes */

.pill-green {
  background-color: #40ca5a;
  color: #1a5615;
}

.pill-orange {
  background-color: #fcb069;
  color: #5b3a1d;
}
.pill-blue {
  background-color: #8ec2ff;
  color: #0f407b;
}

.pill-purple {
  background-color: #b7b2ff;
  color: #272269;
}

/* Gray pill for error categories */

.pill-gray {
  margin: 0px 12px 0px 0px;
  background-color: #f5f3f5;
  color: #2d0f37;
}

/* Colors for homepage cards */
.background-color-yellow {
  background-color: #ffd260;
}

.background-color-yellow:hover {
  background-color: #370971;
  /* transition:  .1s ease-in-out */ /* For smooth transition to other colors */
}

.background-color-yellow:hover svg path:first-child {
  fill: #ffd260;
  /* transition:  .1s ease-in-out */ /*  For smooth transition to other colors */
}
.background-color-yellow:hover svg path:last-child {
  stroke: #ffd260;
  /* transition:  .1s ease-in-out */ /*  For smooth transition to other colors */
}

.background-color-lavander {
  background-color: #b7b2ff;
}

.background-color-lavander:hover {
  background-color: #12282f;
}

.background-color-lavander:hover svg path:first-child {
  fill: #b7b2ff;
}
.background-color-lavander:hover svg path:last-child {
  stroke: #b7b2ff;
}

/*  */
/* Navigation */
/*  */

#search-bar-entry span {
  color: inherit;
}

#topbar-cta-button * {
  color: #fcb069 !important;
  border: unset;
}

:is(.dark #navbar > div:nth-child(2) .dark\:border-primary-light) {
  border-color: white;
}

/*  */
/* API parameter */
/* comments in case of debugging */
/*  */

/* Api parameter - Name */
.flex.font-mono.text-sm .font-bold.text-primary.dark\:text-primary-light {
  /* border: 3px solid lime !important; */
  font-size: 15px;
}

/* Api parameter - Type pill */
.flex.font-mono.text-sm
  .font-bold.text-primary.dark\:text-primary-light
  ~ div
  > div {
  /* border: 3px solid pink !important; */
  color: rgb(var(--gray-600));
}
html.dark
  .flex.font-mono.text-sm
  .font-bold.text-primary.dark\:text-primary-light
  ~ div
  > div {
  color: rgb(var(--gray-200));
}

/* Api parameter - Description */
/* html.dark .flex.font-mono.text-sm .font-bold.text-primary.dark\:text-primary-light~div>div { */
/* .flex.font-mono.text-sm { */

/* .flex.font-mono.text-sm~.mt-4.prose-sm.prose-gray.dark\:prose-invert>p { */
.flex.font-mono.text-sm ~ .mt-4.prose-sm.prose-gray.dark\:prose-invert > ul,
.flex.font-mono.text-sm ~ .mt-4.prose-sm.prose-gray.dark\:prose-invert > ol,
.flex.font-mono.text-sm ~ .mt-4.prose-sm.prose-gray.dark\:prose-invert > p {
  /* border: 3px solid blue !important; */
  font-size: 15px;
  line-height: 1.5rem;
}

/* Links */

.prose :where(a:not(.card)):not(:where([class~="not-prose"] *)) {
  color: inherit;
  border-bottom-color: #2d0f37;
}

html.dark .prose :where(a:not(.card)):not(:where([class~="not-prose"] *)) {
  color: inherit;
  border-bottom-color: white;
}

/*  */
/* Typography */
/*  */

html.dark #header .dark\:text-primary-light {
  color: white;
}

#content-container {
  text-wrap: pretty;
}

/* h1 */

@media (min-width: 640px) {
  .sm\:text-3xl {
    font-size: 40px;
    line-height: 48px;
  }
}

code.language-ruby,
code.language-dotnet,
code.language-python,
code.language-java {
  color: #fff;
}

code.language-php span,
code.language-ruby span {
  color: #fff;
}

.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

:is(.dark .prose strong) {
  color: inherit;
}

#text {
  color: #fff;
}

.dark .card-header h2,
.dark .card-body p {
  color: #2d0f37;
}

html:not(.dark) .prose {
  color: #2d0f37;
}

html.dark .prose {
  color: white;
}

html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700,
html:not(.dark) .text-gray-800,
html:not(.dark) .text-gray-900 {
  color: #2d0f37;
}

html.dark .dark\:text-gray-200,
html.dark .dark\:text-gray-300 {
  color: white;
}

h1 {
  font-weight: 800;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: 600 !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: white;
}
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
  color: #2d0f37;
}

.resize-text {
  /* For lists in kyb-local */
  font-size: 15px;
}

code.language-ruby,
code.language-python,
code.language-java {
  color: #fff;
}

code.language-php span,
code.language-ruby span {
  color: #fff;
}

#text {
  color: #fff;
}

.dark .card-header h2,
.dark .card-body p {
  color: #2d0f37;
}

/*  */
/* Lists */
/*  */

.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
  color: inherit;
}

/*  */
/* Block Quote */
/*  */

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  border-color: #2d0f37;
  color: #2d0f37;
}

:is(.dark .prose blockquote) {
  border-color: white;
  color: white;
}

/*  */
/* Sidebar */
/*  */

html #sidebar {
  text-wrap: pretty;
}
html #sidebar li {
  transition: 0.15s;
}

html.dark #sidebar .dark\:text-gray-400 p {
  color: rgb(159, 158, 160);
}

/* Links */
:is(.dark .prose a) {
  color: white;
}

:is(.dark .dark\:decoration-gray-500) {
  text-decoration-color: inherit;
}

/* Per Design Light Highlight */
/* html:not(.dark) #sidebar a.bg-primary\/10.text-primary {
  background: #2d0f37 !important;
  color: white !important;
} */

/*  */
/* Unordered List */
/*  */

.prose :where(ul > li):not(:where([class~="not-prose"] *)):before {
  content: "•";
  width: 3px;
  height: auto;
  position: relative;
  top: 0;
  line-height: 100%;
  left: -20px;
  margin-right: -9px;
  background-color: transparent !important;
}

.prose
  :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding-left: 1.95em !important;
}

/*  */
/* Cards */
/*  */

.card,
.card * {
  transition-duration: 150ms;
}

.card div.h-6.w-6 {
  width: auto;
  height: auto;
}

.dark .card:not(.card-variation) {
  background: rgb(20, 23, 23);
  border: none;
}

.dark .card:not(.card-variation):hover {
  background-color: #2d2e2f;
}

.card:not(.card-variation):not(.sdk-card) > div {
  /* background-color: brown !important; */
  padding: 1.5rem;
}

.card:not(.card-variation) p {
  /* border: 1px solid red; */
  font-size: 16px;
  margin-top: 1rem;
}

.card.shadow-md {
  box-shadow: unset;
}

/* Card variation */

.card-variation .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-variation.background-color-yellow:hover .card-header > h2 {
  color: #ffd260;
  /* transition:  .1s ease-in-out */ /*  For smooth transition to other colors */
}

.card-variation.background-color-lavander:hover .card-header > h2 {
  color: #b7b2ff;
}

.card-variation .card-header > h2 {
  font-size: 1.5rem;
}

.card-variation .card-body {
  margin-top: 76px;
}

.card-variation .card-body p {
  line-height: 24px;
}

.card-variation.background-color-yellow:hover .card-body p {
  color: #ffd260;
  /* transition:  .1s ease-in-out */ /*  For smooth transition to other colors */
}

.card-variation.background-color-lavander:hover .card-body p {
  color: #b7b2ff;
}

/* Home page SDK card divs */
.sdk-card {
  background-color: #f5f3f5;
  padding-top: 1.5rem;
}

.dark .sdk-card p {
  color: #dfdee0;
}

/* Tables CSS */
table {
  border: none;
  /* border-radius: 12px; */
  font-size: 15px !important;
  line-height: 1.5rem !important;
}

.prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: #2d0f37;
}

.dark .prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: white;
}

.header {
  /* background-color: rgb(248, 248, 248); */
  vertical-align: middle;
  text-align: left;
  /* border-right: none;
    border-left: none; */
  padding: 10px 16px;
  font-weight: 600;
}

.header-compact {
  vertical-align: middle;
  text-align: left;
  font-weight: 600;
}

.compact {
  white-space: nowrap;
}

.table-content {
  padding: 10px 16px;
  vertical-align: top;
}

.table-content p {
  margin-top: 0;
}

.table-content p:last-child {
  margin-bottom: 0;
}

td:first-child,
th:first-child,
.dark td:first-child,
.dark th:first-child {
  border-left: none;
}

td:last-child,
th:last-child,
.dark td:last-child,
.dark th:last-child {
  border-right: none;
}

th {
  /* border-right: 1px solid #F5F3F5;
    border-left: 1px solid #F5F3F5; */
  border-right: 1px solid #d0d3d0;
  border-left: 1px solid #d0d3d0;
  border-bottom: 1px solid #d0d3d0;
  border-collapse: collapse;
}

td {
  /* border-bottom: 1px solid #F5F3F5;
    border-right: 1px solid #F5F3F5; */
  border-bottom: 1px solid #d0d3d0;
  border-right: 1px solid #d0d3d0;
  border-left: none;
  /* border: 0 1px 1px 1px solid #d0d3d0; */ /* Cleaner CSS - use this or the separate three */
  border-collapse: collapse;
}

.dark td {
  border-bottom: 1px solid #4e5251;
  border-right: 1px solid #4e5251;
  border-left: none;
}

.dark th {
  border-bottom: 1px solid #4e5251;
  border-right: 1px solid #4e5251;
  /* border-right: 1px solid #88908e; */
}

/* .dark .header-column .header {
    border-bottom:1px solid #4e5251;
} */

.header-column .header {
  vertical-align: top;
}

/* give rowspan left border */
.row-span {
  border-right: none;
  border-left: 1px solid #d0d3d0;
}

.dark .row-span {
  border-right: none;
  border-left: 1px solid #4e5251;
}

.no-borders {
  border: hidden !important;
}

/* table-of-contents */
html:not(.dark) #table-of-contents .text-primary {
  color: #fcb069;
}

/* Currencies Table */

.currenciesTable {
  height: 80vh;
  border-collapse: separate;
  border-spacing: 0;
  /* border: 1px solid #d0d3d0; */
}

.currenciesTable td {
  border-bottom: 1px solid #d0d3d0;
  border-right: 1px solid #d0d3d0;
  border-left: none;
  border-collapse: collapse;
}

.dark .currenciesTable td {
  border-bottom: 1px solid #4e5251;
  border-right: 1px solid #4e5251;
}

.currenciesTable .header {
  border: 1px solid #d0d3d0;
  border-top: none;
  border-left: none;
  background-color: #f3f5f3 !important;
}

.dark .currenciesTable .header {
  border: 1px solid #4e5251;
  border-top: none;
  border-left: none;
  background-color: #171919 !important;
}

/* Freeze first column  */
.currenciesTable thead tr:first-child th:first-child,
.currenciesTable tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* .currenciesTable thead tr:last-child th:last-child,
.currenciesTable tbody th:last-child, {
    border-right: none;
} */

/* .currenciesTable thead tr:last-child th:last-child,
.currenciesTable tbody th:last-child,
.currenciesTable td:last-child, 
.currenciesTable th:last-child, 
.currenciesTable .dark thead tr:last-child th:last-child,
.currenciesTable .dark tbody th:last-child,
.currenciesTable .dark td:last-child, 
.currenciesTable .dark th:last-child {
    border-right: none; 
}  */

/* Freeze first row */
.currenciesTable thead {
  position: sticky;
  top: 0;
  z-index: 2; /* Ensure it stays above other content */
  /* background-color: #F3F5F3; */
}

.dark .currenciesTable thead {
  position: sticky;
  top: 0;
  z-index: 2; /* Ensure it stays above other content */
}

.header-normal-weight {
  font-weight: normal;
}

/* Hide elements but keep them in code */
.hide {
  display: none;
}

/*  */
/* Release Notes page */
/*  */

.release-notes-cards .card h2 {
  margin-top: 0px;
  /* line-height: 32px;
  font-weight: 600;
  margin-bottom: 16px; */
}

/* Date */

.release-notes-cards .date,
.release-notes-cards sup {
  font-size: 12px;
  line-height: 20px;
  color: #505453;
  font-weight: 500;
  top: unset;
}

html.dark #content-container .release-notes-cards .date,
html.dark #content-container .release-notes-cards sup {
  color: rgb(159, 158, 160);
}

.release-notes-cards .card ul {
  padding-left: 24px;
}

.release-notes-cards .card li {
  position: relative;
  list-style-type: disc;
  font-size: 15px;
}

.release-notes-cards .pill {
  margin-top: 1.2em !important;
}

/* .release-notes-page
  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.2em !important;
} */

.release-notes-page
  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.2em !important;
}

.release-notes-page .pill {
  margin-top: 1.2em !important;
}

/*  */
/* Accordions */
/*  */

html.dark #content-area button.dark:hover\:bg-white\/5 {
  background-color: rgb(20, 23, 23);
}

html.dark #content-area button.dark:hover\:bg-white\/5:hover {
  background-color: #2d2e2f;
}

#content-area .dark\:bg-codeblock > button p {
  font-weight: 600;
}

html.dark #content-area div[role="listitem"].border {
  background-color: rgb(20, 23, 23);
  /* border: 3px solid lime !important; */
  /* for debugging */
  border: none;
}

.bar-of-progress {
  color: #fcb069 !important;
}

.bar-of-progress .glow {
  box-shadow: #fcb069 3px 0px 2px 0px !important;
}

html.dark .bar-of-progress {
  color: #fcb069 !important;
}

html.dark .bar-of-progress .glow {
  box-shadow: #fcb069 3px 0px 2px 0px !important;
}

.bar-of-progress:after {
  box-shadow: 0px 0px 0px 0px !important;
}

/*  */
/* Callouts */
/*  */

/* .my-4.px-5.py-4.overflow-hidden.rounded-xl.border.border-amber-500\/20.bg-amber-50\/50.dark\:border-amber-500\/30.dark\:bg-amber-500\/10 {  */
/* line above, specific to one callout; line below is generic */
/* .my-4.px-5.py-4.overflow-hidden.rounded-xl.border .text-sm { */
/* border: 3px solid lime !important; // debug if targeting fails */
/* previous targetings above */
.text-sm.prose {
  font-size: 15px;
  line-height: 1.5rem;
}

/*  */
/* Code */
/*  */

/* Inline code */

:is(.dark :not(pre) > code) {
  border-color: #2d2e2f;
  /* border-color: transparent; */
  background-color: rgb(20, 23, 23);
}

/* Code block */

/* not-prose relative overflow-hidden bg-[#0F1117] dark:bg-codeblock rounded-xl dark:ring-1 dark:ring-gray-800/50 */

.not-prose.dark\:bg-codeblock.rounded-xl {
  background: rgb(20, 23, 23);
}

.not-prose.dark\:bg-codeblock.rounded-xl svg.fill-gray-700 {
  fill: rgb(var(--gray-400));
}

.not-prose.dark\:bg-codeblock.rounded-xl > div:first-child {
  background: #2d2e2f;
}

.not-prose.dark\:bg-codeblock.rounded-xl
  > div:first-child
  > .flex.overflow-x-auto {
  overflow-y: hidden;
}

/* API call code */

/* .relative.flex-1.flex.gap-2.min-w-0.rounded-lg.items-center.cursor-pointer.p-1\.5 .text-sm {
  font-size: 12px;
  line-height: 16px;
} */
/* reduces text in HTTP method + endpoint component */

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
html.dark::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

/*  */
/* Tooltip */
/*  */

.z-50.bg-tooltip.max-w-\[16rem\].text-center.text-gray-50.text-xs.px-1\.5.py-1.rounded-lg.border.border-gray-50.dark\:border-gray-500 {
  font-size: 14px;
  line-height: 1.5rem;
}

/* Hide card icon */

.lucide-arrow-up-right {
  visibility: hidden;
}

/* Hide footer */

footer {
  visibility: hidden;
}