/* Inherited values
--border-radius: 2px;
--layout: row;
--font-mono: Monaco, "Andale Mono", "Roboto Mono", Consolas, monospace;
--font-regular: Open Sans,sans-serif;
--scroll-bar-width: 8px;
--nav-item-padding: 7px 16px 7px 10px;
--resp-area-height: 400px;
--font-size-small: 14px;
--font-size-mono: 15px;
--font-size-regular: 16px;
--dialog-z-index: 1000;
--focus-shadow: 0 0 0 1px transparent, 0 0 0 3px rgba(70, 142, 195, 0.4);
--bg: #FFFFFF;
--bg2: #fafafa;
--bg3: #f0f0f0;
--light-bg: #d2d2d2;
--fg: #303A46;
--fg2: #414b57;
--fg3: #4e5864;
--light-fg: #76808c;
--selection-bg: #414b57;
--selection-fg: #fafafa;
--overlay-bg: rgba(0, 0, 0, 0.4);
--border-color: #d9d9d9;
--light-border-color: #e8e8e8;
--code-border-color: transparent;
--input-bg: #ffffff;
--placeholder-color: #8a94a0;
--hover-color: #fafafa;
--red: #F06560;
--light-red: #fff0f0;
--pink: #990055;
--light-pink: #ffb2b2;
--green: #690;
--light-green: #fbfff0;
--blue: #47AFE8;
--light-blue: #eff8fd;
--orange: #FF9900;
--light-orange: #fff5e6;
--yellow: #827717;
--light-yellow: #fff5cc;
--purple: #786FF1;
--brown: #D4AC0D;
--header-bg: #F6F9FD;
--header-fg: #000;
--header-color-darker: #e2e5e9;
--header-color-border: #ffffff;
--nav-bg-color: #F6F9FD;
--nav-text-color: #303A46;
--nav-hover-bg-color: #F6F9FD;
*/

:root, :host {
  --border-color: #E6EBF1 !important;
  --blue: #3e79b3 !important;
  --link-color: var(--blue);
  --header-color: #f6f9fd !important;
  /* --nav-bg-color: none !important; */
  --primary-color: #468ec3 !important;
  --text-color: #303a46 !important;
  --light-text-color: var(--fg3);
  /* --bg: #ffffff !important; */
  --bg: none !important;

  --root-font-size: 1rem !important;
  --font-size-regular: calc(var(--root-font-size));
  --font-size-small: calc(var(--font-size-regular) * 14 / 15) !important;
  --font-size-mono: calc(var(--font-size-regular) - 1px) !important;
  --font-size-code: calc(var(--font-size-regular) * 13 / 15) !important;

  --resp-area-height: 10em;


  --scroll-bar-width: initial !important;/*0.5rem;*/

  letter-spacing: 0.02rem !important;
  --inline-code-fg: #c7254e;
  --inline-code-bg: #f9f2f4;

  --pgap: 1em;

  --code-bg: var(--bg2) !important;
  --code-border-color: var(--border-color) !important;
  --header-total-height: 5rem;
  --header-padding: 0.875rem;
  --header-inner-height: calc(var(--header-total-height) - var(--header-padding)*2);

  --header-gap: var(--header-padding); /* gap between header and content */
  --main-width: 50rem;
  --main-padding: 3rem;

  /* --nav-bg-color: #f6f9fd !important; */
  --nav-bg-color: white; 
  /*var(--text-color) !important; #303a46 !important;*/
  --nav-text-color: var(--text-color); 
  --nav-link-color: var(--nav-text-color);
  /*--nav-bar-width: calc(min(18.25rem, max(25rem, calc(1vw/(18.25rem  + var(--main-width)) * 18.25rem))));*/
  --nav-bar-width: 18.25rem;
  --nav-hover-text-color: var(--nav-link-color) !important;
  --nav-hover-bg-color: var(--nav-bg-color) !important;
  /* --nav-item-padding: 0.5rem 1rem 0.5rem 0.7rem; */
  --nav-item-padding-left: 2.8rem; 
  --nav-item-padding-right: 1rem;
  --nav-item-spacing: 1.6em;
  --nav-secondary-item-spacing: 0.6em;
  --nav-title-padding-top: 1rem;
  --nav-title-spacing-bottom: 1rem;
  --nav-item-half-spacing: calc(var(--nav-item-spacing)*0.5);
  --nav-tertiary-item-indent: 1em;
  --nav-secondary-item-half-spacing: calc(var(--nav-secondary-item-spacing)*0.5);
  --nav-item-padding: var(--nav-item-half-spacing) var(--nav-item-padding-right) var(--nav-item-half-spacing) var(--nav-item-padding-left);
  --nav-title-border-spacing: 0.5em;

  --heading-padding-top: 10px;

  /* TODO: fix this */
  --tineye-logo-width: 25rem;

  --header-bg-color: white; /* none; f7fbfd;*/
  --header-text-color: var(--text-color);
  /*--header-bg-color: var(--nav-bg-color);*/
  /*--header-text-color: var(--nav-text-color);*/
  --total-width: calc(var(--nav-bar-width) + var(--main-width));

  --header-bg-z-index: 1;
  --tineye-logo-z-index: 3;
  --nav-z-index: 2;
  --header-z-index: var(--nav-z-index);
}

html {
    font-size: 15px;
}

body, #header, #rapidocwrapper {
    margin: 0;
    padding: 0;
}


/* #header { */
/*     position: relative; */
/*     height: var(--header-inner-height); */
/*     background-color: green; */
/*     width: 100%; */
/* } */

/* Override some responsive stuff from RApidoc */
.section-gap--read-mode {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

section {
    padding-bottom: 0 !important;
}

#the-main-body:before {
    display: block;
    position: fixed;
    content: '';
    width: var(--total-width);
    z-index: var(--header-bg-z-index);
    height: var(--header-total-height);
    margin: 0 calc((100% - var(--total-width))/2);
    padding: 0;
    background-color: var(--header-bg-color);
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
}


@container (min-width: 801px) {
    #the-main-body, .top-right-nav {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .top-right-nav:before, .top-right-nav:after {
        display: block;
        content: '';
        flex-grow: 1;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        flex-basis: 0;
    }
    .top-right-nav {
        font-weight: bold;
    }
    /* .top-right-nav:before { */
    /*     flex-basis: var(--tineye-logo-width); */ 
    /* } */
    /* .top-right-nav:after { */
    /*     flex-basis: 0; */
    /* } */

    #the-main-body > * {
        flex-grow: 1;
        max-width: none ! important;
        flex-basis: max-content;
    }

    .nav-bar {
        display: flex;
        align-items: end;
        flex-direction: column;
    }
    .side-nav-title {
        max-width: var(--tineye-logo-width);
        width: var(--tineye-logo-width) !important;
        margin-right: calc(var(--nav-bar-width) - var(--tineye-logo-width));
        height: var(--header-total-height) !important;
        box-sizing: border-box;
    }
    .nav-bar > * {
        max-width: var(--nav-bar-width);
        width: var(--nav-bar-width) !important;
        box-sizing: border-box;
    }
    main.main-content {
        height: calc(100vh - var(--header-height));
        overflow: auto;
        margin-top: var(--header-total-height);
        padding-top: var(--header-gap) !important;
        position: relative;
        flex-basis: calc(var(--main-width));
    }

    .top-right-nav > ul {
      max-width: var(--total-width);
      padding: 0;
      padding-left: var(--tineye-logo-width);
      box-sizing: border-box;
      list-style-type: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-basis: var(--total-width); 
      flex-grow: 0;
      font-size: calc(var(--font-size-regular) * 7 / 8);
    }
    .top-right-nav > ul > li {
      flex-grow: 0;
      text-decoration: none;
      padding-left: 1rem;
      padding-right: 1rem;
      flex-basis: max-content;
    }
    .top-right-nav > ul > li.break,
    .top-right-nav > ul:not(:has(li.break)):before {
        content: " ";
        flex-grow: 1;
        width: 0;
        padding: 0;
    }
}


main.main-content {
    scroll-padding-top: calc(var(--header-gap) - var(--heading-padding-top));
}

/* Generally Unhelpful content */
.hide-in-small-screen {
    visibility: hidden;
    min-width: 0 !important;
}
#overview {
    position: relative;
}
#api-info .m-btn {
    width: auto !important;
    min-width: initial !important;
    display: block;
    position: absolute;
    right: 1em;
    top: var(--header-gap);
    background-color: var(--primary-color);
    color: var(--primary-color-invert);
}
@container (max-width: 930px) {
    #api-info .m-btn {
        position: static !important;
    }
}
/* hack - only show one download openai spec button */
#api-info .m-btn:first-child + .m-btn:last-child {
    display: none;
}

/* GENERAL FORMATTING */
/**********************/

/* Buttons */
.m-btn {
    box-shadow: none !important;
}

/* Code blocks */
.example-panel {
    background-color: var(--code-bg);
    font-size: var(--font-size-code) !important;
}
.json-tree {
    font-size: var(--font-size-code) !important;
}

code {
    background-color: inherit !important;
    color: var(--fg3) !important;
    font-family: var(--font-mono) !important;
    display: inline !important;
    font-weight: 600;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

pre {
    padding: 0.75em !important;
    white-space: pre-wrap;
    border-radius: var(--border-radius) !important;
}
pre code, pre code *, .toolbar-btn:has(+ pre) {
    font-weight: normal;
    font-size: var(--font-size-code) !important;
    line-height: 1.5em !important;
}


/* ersatz copy icon :: TODO: get a file for this */
/* We have to guess what buttion is the copy icon */

.toolbar-btn:has(+ pre), .toolbar-btn {
    top: 0.5rem !important;
    right: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
.toolbar-btn:has(+pre), .toolbar-btn {
    visibility: hidden;
}
.toolbar-btn:has(+ pre),
.toolbar-btn:has(+ pre)::before,
.toolbar-btn:has(+ pre)::after {
    position: absolute;
    text-overflow: hidden;
    display: block;
    height: 1em;
    width: 0.75em;
    min-width: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.toolbar-btn:has(+ pre)::before {
    visibility: visible;
    content: "";
    top: 0px;
    right: 0px;
    border-left: 0;
    border-bottom: 0;
}
.toolbar-btn:has(+ pre)::after {
    visibility: visible;
    content: "";
    top: 3px;
    right: 3px;
}

.tag.title {
  text-transform: none !important;
  clear: both;
   padding-bottom: 1rem;
}
.operations-root {
  max-width: var(--main-width);
  padding-left: var(--main-padding);
  padding-right: var(--main-padding);
}
p {
  letter-spacing: 0.02em !important;
  line-height: 1.5em !important;
}
h2,
h3,
.m-markdown > *,
.m-markdown > p:not(:first-child),
.m-markdown-small > p:not(:first-child) {
  margin-block-start: 0em !important;
  margin-top: 0em !important;
}
.m-markdown > *, .m-markdown > p:not(:last-child),
.m-markdown-small > p:not(:last-child)
{
  margin-bottom: var(--pgap) !important;
  margin-block-end: var(--pgap) !important;
}
img, figure {
    margin: 0;
}

/* Turn AUTHENTICATION into Authentication */
#auth .sub-title:first-child {
    text-transform: lowercase;
}
#auth .sub-title:first-child::first-letter {
    text-transform: uppercase;
}

.divider {
    /* border: 0 !important; */
    border-top: 1px solid var(--border-color) !important;
}

section.section-gap--read-mode {
    border-top: 0 !important;
    padding-top: 0;
}

/* to get links to scrolle, we have to decorate in a funny place */
*:has( + section[part="section-tag"]),
#api-description *:has(+ h1) {
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: var(--header-gap);
}
#api-description *:has(+ h1) {
    padding-bottom: calc(var(--pgap) + var(--heading-padding-top));
}


/* .title.tag, .divider, #auth .sub-title:first-child { */
/*     /1* border-top: 1px dotted var(--border-color) !important; *1/ */
/* } */
/* .title.tag, #auth .sub-title:first-child { */
/*     padding-top: 1rem; */
/* } */

h1, .title, #auth .sub-title:first-child {
    font-size: 1.8rem !important;
}
h2, .sub-title {
  font-size: 1.4rem;
}
h3,
h4 {
  font-size: 1.125rem;
}

/* split spacing title and padding to make scroll-padding work nicely */

.title,
.sub-title,
h1,
h2,
h3,
h4 {
  padding-top: var(--heading-padding-top);
  font-weight: 600 !important;
  line-height: 1.5em;
}
a
a:link,
a:visited,
a:active,
{
  text-decoration: none;
  color: var(--link-color);
}
a:hover {
  text-decoration: underline;
}

/* Styles outside of rapidoc componens */
/***************************************/

.top-right-nav {
  margin: 0;
  padding: 0;
  /* todo: work out extra width for internal margin/padding */
  position: fixed;
  width: 100%;
  z-index: var(--nav-z-index);
  top: 0;
  left: 0;
  /* display: none; */
  height: var(--header-total-height);
}

main > slot:first-child {
    z-index: var(--header-z-index);
}

.top-right-nav > ul,
.top-right-nav > ul > li,
.top-right-nav > ul a,
.top-right-nav > ul a :link,
.top-right-nav > ul a :visited,
.top-right-nav > ul a :active {
  color: var(--link-color);
  text-decoration: none;
}
.top-right-nav > ul a :hover {
  text-decoration: underline;
}

/* HEader of nav-bar */
.nav-bar, .side-nav, .side-nav-title {
    overflow: visible;
    text-overflow: visible;
}
.side-nav {
  padding-left: 3rem;
  margin-left: 0;
}
.side-nav div {
  padding-left: 0;
  padding-right: 1rem;
}
.side-nav,
.side-nav-title {
  font-size: 1.7rem;
  /* font-weight: 600; */
  line-height: 2rem;
}

.side-nav-title {
  padding: var(--header-padding) var(--header-padding) var(--header-padding) 2.5rem;
  display: flex;
  align-items: top;
  z-index: var(--tineye-logo-z-index);
  height: var(--header-total-height);
  box-sizing: border-box;
}
.side-nav-title a {
  width: var(--tineye-logo-width);
  color: var(--header-text-color);
  text-decoration: none;
}
.side-nav-title a :link,
.side-nav-title a :visited,
.side-nav-title a :active {
  color: var(--header-text-color);
}
.side-nav-title a :hover {
  text-decoration: underline;
}
.side-nav-title a img {
  max-height: var(--header-inner-height);
  margin-right: 0.125rem;
  /* baseline is at pixel 78, full height is 104 */
  margin-bottom: calc(var(--header-inner-height)/104 * (78 - 104));
}



/* Navigation bar */
/******************/

/* make links easy to click (wide) */
.nav-scroll div {
  padding-left: 0;
  padding-right: 0;
}
.nav-scroll div[data-action="navigate"], .nav-scroll-link {
  width: 100%;
  padding-left: var(--nav-item-padding-left);
  padding-right: var(--nav-item-padding-right);
  box-sizing: border-box;
}
.nav-scroll-link a, .nav-scroll-link a:link {
    text-decoration: none; 
    width: 100%;
    display: inline-block;
}
.nav-bar-tag {
    text-transform: initial;
    font-weight: normal;
}
.nav-bar-path, .nav-bar-h2, .nav-bar-h3, .nav-bar-h1{
    font-size: var(--font-size-small) !important;
}
.nav-bar-tag, .nav-bar-tag *, .nav-bar-h1, .nav-bar-h1 * {
    font-weight: 600;
    color: var(--light-text-color) !important;
}
.small-font .mono-font, .mono-font .small-font, .small-font.mono-font {
    font-size: var(--font-size-code) !important;
    letter-spacing: .25px;
}
.nav-method {
    font-weight: inherit !important;
}
/* Re-name the "Operations" section */
#link-operations-top div {
    display: none !important;
}
#link-operations-top::before {
    visibility: visible;
    text-align: left;
    content: "API Reference";
    font-weight: bold;
    font-size: var(--font-size-regular) !important;
}
.nav-bar {
  max-width: var(--nav-bar-width);
  min-width: var(--nav-bar-width);
  display: flex;
  background-color: transparent;
}
.nav-scroll {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--header-gap);
  background-color: var(--nav-bg-color);
  overflow: hidden;
}
.nav-bar-h2,
.nav-bar-h3,
.nav-bar-path
{
  padding-left: calc(var(--nav-item-padding-left) + var(--nav-tertiary-item-indent)) !important;
  margin-left: 0;
}
.nav-scroll div[data-action="navigate"].nav-bar-path  {
    padding-left: var(--nav-item-padding-left);
    margin-left: 0;
}
.nav-scroll .nav-bar-tag {
    padding-top: var(--nav-item-spacing);
    padding-bottom: var(--nav-secondary-item-half-spacing);
}

/* remove some spacing in places where it's nicer not to have it 
 *
 * After the overview header
 * After the API Reference headers
 * Between sections without any paths
 *
 * */
.nav-bar-section + .nav-bar-tag-and-paths .nav-bar-tag,
.overview-headers .nav-bar-h1:first-child,
.nav-bar-tag-and-paths:not(:has(.nav-bar-paths-under-tag>*)) + .nav-bar-tag-and-paths .nav-bar-tag
{
    padding-top: var(--nav-secondary-item-half-spacing);
}


.nav-bar-path,
.nav-bar-h1,
.nav-bar-h2,
.nav-bar-h3 {
  padding-top: var(--nav-secondary-item-half-spacing);
  padding-bottom: var(--nav-secondary-item-half-spacing);
  margin: 0;
}

/* Magic to enable subheadings */
.nav-bar-h2  {
    display: none;
}

/* Fold out stuff */
.active + div.nav-bar-h2,
.nav-bar-tag.active + .tag-headers *,
.nav-bar-h2:has(~.active),
.nav-bar-h2.active,
.active ~ .nav-bar-h2 {
  display: block;
  color: var(--nav-text-color);
  /* padding-bottom: var(--nav-item-half-spacing); */
}

/* add extra spacing to bottom part of fold-out headers */
.tag-headers:not(:has(+ .nav-bar-paths-under-tag > *)) *:last-child,
.nav-bar-h2:has(+ .nav-bar-h1),
.nav-bar-h3:has(+ .nav-bar-h1)
{
  padding-bottom: var(--nav-item-spacing) !important; /*var(--nav-secondary-item-spacing);*/
}

.nav-bar-h2:has(~ .nav-bar-h1 ~ .active),
.nav-bar-h2:has(~ .nav-bar-h1.active),
.active ~ .nav-bar-h1 ~ .nav-bar-h2 {
    display: none
}

.left-bar {
    border: 0 !important;
}
/* .nav-scroll .active { */
/*      color: var(--nav-hover-text-color) !important; */
/* } */
.nav-bar-tag:has(+ .tag-headers > .active),
.nav-bar-tag.active,
.nav-bar-path.active *:not(.nav-method):not(:has(.nav-method)),
.nav-bar-h1:has(~ .nav-bar-h2.active):not(:has(~ .nav-bar-h1 ~ .nav-bar-h2.active)),
.nav-bar-h1.active {
    /* excludes the underline from the nav-method, where is super ugly */
     /* text-decoration: underline !important; */
     font-weight: 600;
}
.nav-scroll span, .nav-scroll ::slotted(* span) {
    display: inline-block;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: normal;
}
.nav-bar-tag:not(:has(+ .tag-headers *)):after,
.nav-bar-h1:not(:has(+ *)):after,
.nav-bar-h1:has(+ .nav-bar-h1):after {
    content: none !important;
}

.nav-bar-path {
  font-size: var(--font-size-small);
}
.key .key-label {
    font-size: var(--font-size-small);
}
.nav-bar h5, .nav-bar ::slotted(* h5) {
  text-transform: none;
  font-weight: 700;
}
.nav-bar *, .nav-bar ::slotted(*) {
    color: var(--nav-link-color);
}

/* titles */
.nav-bar-info,
.nav-bar-info:hover,
.nav-bar-info.active,
.nav-bar-section,
.nav-bar-section:hover,
.nav-bar-section.active {
    color: var(--nav-text-color);
    padding-top: var(--nav-title-padding-top);
    padding-bottom: var(--nav-title-border-spacing);
    margin-bottom: var(--nav-title-spacing-bottom);
    width: 100%;
    font-weight: 600;

    border-bottom: 1px solid var(--border-color) !important;

    padding-left: 0 !important;
    margin-left: var(--nav-item-padding-left);
}



.nav-bar div[data-action="navigate"]:hover:not(:has(*)),
.nav-bar div[data-action="navigate"]:hover *:not(:has(*)):not(.nav-method),
.top-right-nav a:hover {
    /* excludes the underline from the nav-method, where is super ugly */
     /* text-decoration: underline !important; */
    text-decoration: underline;
}
.nav-bar a {
  /* color: var(--text-color); */
  color: var(--nav-link-color); 
  text-decoration: none;
}

/* Request an Response sections */
/********************************/

/* attempt to impose more consistent formatting */
 
/* 'param-...' classes come from request
 * 'td', 'tr', 'key' type classes come from Response

/* Consistent formatting of parameter names and types */
.key, .key span.key-label,
.param-name, .param-name:after {
    font-weight: 600;
    padding: 0;
    margin: 0;
}
.param-name: {
    display: inline-block;
}
.param-name:after {
    content: ": ";
    float: right;
    white-space: pre;
}
.key span {
    font-weight: normal;
}

/* Re-order body parameters over query string in request section */
.request-panel > div {
    display: flex;
    flex-flow: column;
}
.request-panel > div > div {
    order: 1;
}
.request-panel > div > div.request-body-container {
    order: 0;
}
.key, .request-panel .m-table .tr > .td:first-child {
    width: 15rem;
}
.expanded-all-descr .tr {
    flex-flow: column;
    position: relative;
}

/* Consistent formatting of parameter names and types */
.key, .key span.key-label,
.param-name, .param-name:after {
    font-weight: 600;
    padding: 0;
    margin: 0;
}
.param-name, .param-type {
    display: inline-block;
    font-family: var(--font-mono);
}
.param-name:after {
    content: ": ";
    float: right;
    white-space: pre;
}
.key span {
    font-weight: normal;
}
/* used for constraints - treat b as em */
.expanded-all-descr .key-descr b {
    font-weight: normal;
    font-style: italic;
}
.key-descr {
    color: var(--fg);
}
.key-descr div,
.param-constraint {
  font-style: normal;
  /* font-family: var(--font-mono); */
  color: var(--fg3);
  text-align: left;
}
.key-descr div span,
.param-constraint span {
  font-weight: normal !important;
  font-style: italic;
  color: var(--fg3);
}


/* Request parameter table (.request-panel .m-table) - restructure as if they were divs */
.request-panel .m-table {
    border: 0;
    border-left: 1px dotted var(--border-color);
    display: block;
}
.request-panel .m-table tr, .m-table tr > td {
    border: 0;
    display: block;
    padding: 0;
    margin: 0
}
.request-panel .m-table tr {
    padding-left: 12px;
}
.request-panel .m-table tr[title] > td:first-child {
    padding-bottom: 0.5em;
}
.request-panel .m-table tr[title] {display: flex; width: 100%;}
.request-panel .m-table tr:not([title]) td:first-child:not([colspan=2]) {
    /* emptoy cell */
    display: none;
}
.request-panel .m-table tr:not([title]) {
    display: block;
    margin-bottom: var(--pgap)
}
.request-panel .m-table tr:not([title]) > td {
    display: flex;
    gap: 0.25em;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
}
.request-panel .m-table tr[title] {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
}
.request-panel .m-table tr[title] > td{
    /* width: auto !important; */
    display: inline-block;
    width: initial !important;
    flex: 40%;
    flex-shrink: 0;
    flex-grow: 1;
    padding-left: 0;
    min-width: 200px;
    text-align: left;
}
/* param constraints always get their own line */
.request-panel .m-table tr[title] > td:has(.param-constraint) {
    flex-basis: 80% !important;
}
.request-panel .m-table tr[title] > td:first-child {
    max-width: 15rem !important;
    width: auto !important;
}

/* empty constraints section */
.request-panel .m-table tr[title] > td:last-child:not(:has(*))
{
    display: none;
}


/* Request: send the description down below the examples */
.request-panel .m-table tr:not([title]) > td {
    flex-shrink: 0;
    flex-grow: 0;
}
.request-panel .m-table tr:not([title]) > td > span:not(:first-child) {
    color: var(--fg3);
}
.request-panel .m-table tr:not([title]) > td > *:first-child {
    margin-top: 0.5em;
    order: 2;
    min-width: 100%;
}
.request-panel .m-table tr:not([title]) > td > span:not(:first-child) {
    font-style: italic;
    font-weight: normal !important;
}


/* Response - only reformat the multiline version */
/* mostly messing with padding to add gaps between elements,
 * but now between elements and open/close brackets.
*/
.expanded-all-descr .key-descr > *  {
    margin-top: 0.25rem;
}

.expanded-all-descr .key-descr {
    padding-top: 0;
    min-width: 0;
    display: block;
    /* padding-left: 1rem; */
}
.expanded-all-descr .tr {
    padding-bottom: var(--pgap);
}
.expanded-all-descr .tr.expanded,
.expanded-all-descr .tr.collapsed {
    padding-bottom: 0 !important;
}
.expanded-all-descr  .inside-bracket {
    display: block;
    padding-left: 0;
    padding-right: 0;
}
.expanded-all-descr  .expanded + .inside-bracket {
    padding-top: var(--pgap);
}
.expanded-all-descr .expanded:has(.key-descr:empty) + .inside-bracket {
    padding-top: 0;
}
.expanded-all-descr .expanded + .inside-bracket:not(:has(*)) {
    padding: 0;
}
.expanded-all-descr .key-descr {
    display: flex;
    flex-direction: column;
}
.expanded-all-descr .m-markdown-small {
    order: 2;
}
.expanded-all-descr .expanded.object > .key-descr,
.expanded-all-descr .expanded.array > .key-descr,
.expanded-all-descr .expanded.array-of-object > .key-descr > *
.expanded-all-descr .inside-bracket {
    border-left: 1px dotted var(--border-color);
    padding-left: 12px;
}
.expanded-all-descr .inside-bracket .tr .td.key-descr > * {
    border: 0;
    padding-left: 0;
}
.expanded-all-descr .close-bracket {
    padding-bottom: var(--pgap);
}
.expanded-all-descr .inside-bracket > div:last-child,
.expanded-all-descr .inside-bracket > .collapsed + .inside-bracket:nth-last-child(2) {
    padding-bottom: 0 !important;
}


/* + and - drop down links */
/* allow for positioning of open-bracket */
.key { position: relative; }
.expanded-all-descr .open-bracket::before {
    margin-left: 0.25em; 
    display: inline-block;
    width: 24px;
    margin-left: -24px;
    left: 0;
    border-radius: 3px;
    text-align: center;
    background-color: var(--bg);
    padding: 0;
    position: absolute;
    color: var(--fg3);
}
.expanded-all-descr .collapsed .open-bracket::before { content: "+" }
.expanded-all-descr .expanded .open-bracket::before { content: "-"}
/* Don't do at top level */
.expanded-all-descr > .tr > .td > .open-bracket::before { content: initial !important; }
/* We treat the penultimate inside-bracket like a last-child
 * because the close-bracket follows
 */
/* .expanded-all-descr  .inside-bracket > .tr:first-child { */
/*     margin-top: -var(--pgap); */
/* } */
.expanded-all-descr .tr.collapsed .key-descr {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
}
.expanded-all-descr .tr.collapsed + .inside-bracket {
    display: block;
    padding-top: 0;
    padding-bottom: var(--pgap);
    border: 0;
}
.expanded-all-descr .tr.collapsed + .inside-bracket > * {
    display: none;
}

/* Hide subsidiary expansion toggles - they get confusing */
.tree .tr > .td span.descr-expand-toggle {
    display: none;
}


/* Styling for Content */
/***********************/

/* alternative marks on unorderded lists */
div.checkmark, div.exes {
    /* this div is just to apply the class */
    display: inline;
}
.checkmark li, li.checkmark, .exes li, li.exes {
  list-style-type: none;
  clear: left;
}
.checkmark li::before,
li.checkmark::before,
.exes li::before,
li.exes::before {
   float: left;
   font-weight: bold;
   font-size: 1.7em;
   margin: 0 0 0 -1em;
   padding: 0;
   border: 0;
   width: 1em;
}
.checkmark li::before,
li.checkmark::before {
   content: '✓';
   color: #92d4e6;
}
.exes li::before,
li.exes::before {
    content: "✕";
    color: #ed5252;
}

.overlay-container {
    display: inline-block;
}

.pi {
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
    vertical-align: middle;
}

/* Responsive menu - hidden with hamburger */
@container (max-width: 800px) {
    #api-info .m-btn {
        position: initial;
    }
    #the-main-body {
        display: flex;
        height: 100vh;
        overflow: auto;
        flex-direction: column;
    }
    .nav-bar > *, .side-nav-title {
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box;
        margin-right: 0;
    }
    .nav-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: initial;
        z-index: var(--nav-z-index);
        flex-shrink: 0;
        flex-grow: 0;
    }

    /* Collapsed Menus */
    .nav-scroll {
        /* display: none seems to stop clicks from working, so we'll just hide vertically */
        padding-top: 0;  /* padding prevents shrinking to zero height */
        max-height: 0px;
        flex-grow: 0;
        overflow: hidden;
    }
    .main-content {
        flex-basis: min-content;
        flex-shrink: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-height: min-content;
        /* box-sizing: border-box; */
    }
    main > .main-content-inner--read-mode {
        padding-top: var(--header-gap);
        min-height: 0;
        height: 0;
        flex-grow: 1;
        flex-basis: 0;
    }

    main *::slotted(.top-right-nav) {
        display: none !important;
    }


    /* Menu visible conditions */
    /* Note that menu items come from two places, */
    /*     .nav-scroll (set by rapidoc) */
    /*     .top-right-nav (inside the slot) */
    /* These have to both be set up in the right way. In particular, for */
    /* the links to work, they have to remain visible while they are active, */
    /* rather than disappearing as soon as the hamburger button loses focus, */
    /* so we need to included them in all the queries. */

    #the-main-body:has(.nav-bar:focus, .nav-scroll *:active, main > slot:first-child:active) {
        position: absolute;
    }
    #the-main-body:has(.nav-bar:focus, .nav-scroll *:active, main > slot:first-child:active) .nav-scroll {
        display: block;
        padding-top: var(--header-gap);
        padding-bottom: var(--nav-item-spacing);
        max-height: initial;
    }
    #the-main-body:has(.nav-bar:focus, .nav-scroll *:active, main > slot:first-child:active) *::slotted(.top-right-nav) {
        z-index: var(--header-z-index);
        visibility: visible !important;
        overflow: initial !important;
        display: block !important;
        height: initial !important; /* override overridden value */
        min-height: initial !important;
        flex-basis: initial !important;
        /* flex-basis: min-content; */
        top: 0;
        left: initial;
        position: sticky !important;
    }
    #the-main-body:has(.nav-bar:focus,  .nav-scroll *:active, main > slot:first-child:active) main {
        overflow: hidden;
    }
    #the-main-body:has(.nav-bar:focus,  .nav-scroll *:active, main > slot:first-child:active):before {
        position: absolute;
    }
    #the-main-body:has(.nav-bar:focus,  .nav-scroll *:active, main > slot:first-child:active) .nav-bar:before {
        display: none;
    }

    /* Menu buttons
     *
     * Because we use .nav-bar:focus to expand the menu, 
     * we use .nav-bar:before as the hamburger
     * and .side-nav-title:before as the cancel button
     * */
    .nav-bar:before, .side-nav-title:before {
        position: absolute;
        top: var(--header-padding);
        right: var(--header-padding);
        font-size: 2rem;
        width: var(--header-inner-height);
        height: var(--header-inner-height);
        line-height: var(--header-inner-height);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
        height: var(--header-inner-height);
        background-color: var(--header-bg-color);
        display: block;
        color: var(--header-text-color);
        cursor: pointer; 
    }
    .nav-bar:before {
        z-index: calc(var(--tineye-logo-z-index) + 1);
        content: "☰"; /* trigram for heaven looks like hamburger */
        background-color: var(--header-bg-color);
    }
    .side-nav-title:before {
        z-index: var(--tineye-logo-z-index); 
        content: "×"; 
        font-weight: bold;
        background-color: var(--header-bg-color);
    }

    /* Layout top-right-nav as additional elements in the side menu */
    .top-right-nav, 
    .top-right-nav > ul,
    .top-right-nav > ul > li,
    .top-right-nav > ul a,
    .top-right-nav > ul a :link,
    .top-right-nav > ul a :visited,
    .top-right-nav > ul a :active {
      background-color: var(--nav-bg-color);
      color: var(--nav-link-color);
    }
    .top-right-nav li a, .top-right-nav li:not(:has(a)) {
        display: block;
        width: 100%;
        padding: var(--nav-item-padding) !important;
    }
    .top-right-nav, .top-right-nav > ul, .top-right-nav > ul > li {
        position: static;
        height: initial;
        padding: 0;
        margin: 0;
    }
    .top-right-nav {
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 0;
        border-bottom: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
    }
    .top-right-nav > ul {
        flex: auto;
        display: block;
        position: static;
        padding-left: 0;
        padding-right: 0;
    }
    .top-right-nav > ul > li {
        margin: 0;
        margin: 0;
    }
    .top-right-nav > ul > li.break:not(:first-child) {
        border-top: 1px solid var(--border-color);
    }
    .top-right-nav > ul > li.break {
        height: 0;
        padding: 0 !important;
    }
}