/* A way to remove the margin 0 auto that is set for most pages */
[class^="DocumentationLayout__ContentWrapper"]:has(div[class^="RippleDocsLanding__RippleDocsLandingContainer"]) {
  margin: initial !important; /* Keep your existing margin rule */
  width: 100% !important; /* Make sure it takes up all available space */
  max-width: 1600px !important; /* <<-- Increase this value to make the content area wider! */
}

/* -- Home nav -- */
#navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7e8;
  font-family: "TT Ripple Bold", sans-serif !important;
}

#search {
  border: 2px solid #d6d9db;
  border-radius: 8px;
  width: 221px;
  height: 24px;
  font-family: "TT Ripple", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: #5e676e;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff;
}

/* ----- This sets the mini-TOC header to bold ----- */
#gatsby-focus-wrapper > div > div > div > div > aside > div > div {
  font-family: "TT Ripple Bold", sans-serif !important;
}

/* ----- This sets the mini-TOC header to bold ----- */
#gatsby-focus-wrapper > div > div > div > aside > div > div {
  font-family: "TT Ripple Bold", sans-serif !important;
}

.external-link::after {
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-left: 10px;
  background-color: currentcolor;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  mask: url("../images/externalLink.svg") no-repeat 100% 100%;
  vertical-align: text-top;
}

/* ----- This configures the admonition icon location ----- */

div.admonition.admonition-info.admonition::before {
  top: 35px;
}
div.admonition.admonition-danger.admonition::before {
  top: 35px;
}
div.admonition.admonition-success.admonition::before {
  top: 35px;
}
div.admonition.admonition-warning.admonition::before {
  top: 35px;
}
div.admonition.admonition-attention.admonition::before {
  top: 35px;
}

div.admonition.admonition-info.admonition {
  margin: 0;
}
div.admonition.admonition-danger.admonition {
  margin: 24px 0 24px 0;
}
div.admonition.admonition-success.admonition {
  margin: 24px 0 24px 0;
}
div.admonition.admonition-warning.admonition {
  margin: 24px 0 24px 0;
}
div.admonition.admonition-attention.admonition {
  margin: 24px 0 24px 0;
}

/* ----- This configures lists in code panels */
.obj.collapsible > li {
  margin: 0;
}

/* ----- This configures arrays in code panels */
.array.collapsible > li {
  margin: 0;
}

code.language-text {
  line-height: 20px;
  padding: 2px 4px 2px 4px !important;
  align-items: center !important;
  border-color: #c9cccf !important;
  border-radius: 4px;
}

td[kind="field"] > span[class="field-name"] {
  /* Sets the width of the API reference field names to provide wider description columns */
  max-width: 30ch !important;
  width: 100% !important;
  display: flow !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

strong {
  font-family: "TT Ripple Bold", sans-serif !important; /* Bold font because weighted TT Ripple doesn't bold enough */
  font-style: normal;
}

strong > em {
  font-family: "TT Ripple Medium Italic", sans-serif !important; /* Medium Italic for referencing API Operations */
}

/* Customize the font within the API tabs */

li[id*="react-tabs-"] {
  font-family: "TT Ripple Bold", sans-serif;
}

button {
  font-family: "TT Ripple Bold", sans-serif;
}

ul ul ul {
  list-style-type: square;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: decimal;
}

ol ::marker {
  font-family: "TT Ripple Bold", sans-serif;
  font-weight: 100;
}

/* JSON response customization */
.token.boolean {
  color: #ffb2c5 !important;
}

.property.token.string {
  /* color: #C7F986 !important; */
}

/* Sidebar HTTP badge details */
div.operation-type {
  width: 48px;
  height: 15px;
  /* text-transform: capitalize; */
}

/* Set the active tab heading to blue and bold for tabbed code blocks */
.code-snippets-tabs .snippets-tabs-headers .tab-header.active {
  color: #003d99 !important;
  font-family: "TT Ripple Bold", sans-serif;
  font-weight: 800;
}

/* Set margin for tabbed code snippets */
div.code-snippets-tabs {
  margin: 8px 0 0 0;
}

/* Remove margin for sidebar sections */
#gatsby-focus-wrapper > div > div > aside > div > ul > span:nth-child(n) {
  margin-left: 0;
}

/* Left-align text box components
[class*='LandingContainer'] > * > [class*='StyledFlexSection'] > [class*='StyledFlexSection'] {
  margin-left: 0 !important;
}

[class*='LandingContainer'] > * > [class*='StyledFlexSection'] {
  margin-left: 0 !important;
}
*/

#gatsby-focus-wrapper > div > div > aside {
  border-right: 1px solid #e5e7e8;
}

a.api-console-href {
  color: #99d8ff !important;
  text-decoration: underline;
}

a.api-console-href:visited {
  color: #ffaf66 !important;
  text-decoration: underline;
}

a.api-console-href:hover {
  color: #33a3ff !important;
  text-decoration: underline;
}

/* Remove margin for component images */

div[data-component-name="ui/Box"] > div > a > div > img {
  margin-left: 0px;
}