#header {
  padding-bottom: 20px;
  padding-top: 50px;
}
#header h1 {
  font-size: 38px;
  line-height: 44px;
  word-break: break-word;
  max-width: 620px;
}
#header h1:first-letter {
  text-transform: capitalize;
}
@media only screen and (min-width: 760px) {
  #header h1 {
    font-size: 42px;
    line-height: 48px;
  }
}

#breadcrumb {
  line-height: 1.4;
}
#breadcrumb li {
  display: inline;
  word-break: break-all;
}
#breadcrumb li:not(:last-of-type):after {
  content: "/";
  opacity: 0.3;
  margin: 0 5px;
}
#breadcrumb.curved li:first-of-type {
  display: block;
}
#breadcrumb.curved li:first-of-type:first-letter {
  text-transform: capitalize;
}
#breadcrumb.curved li:first-of-type:after {
  content: unset;
}
#breadcrumb a:hover {
  opacity: 0.6;
}
#breadcrumb .selected {
  text-decoration: line-through;
  text-decoration-color: rgba(53, 53, 53, 0.44);
  text-decoration-thickness: 2px;
  opacity: 0.6;
}

.note {
  border: 1px solid #d4d4d4;
  padding: 15px 20px;
  border-radius: 10px;
}
.note .note-title {
  color: #006dce;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(83, 156, 222, 0.0705882353);
  padding: 0 5px;
  margin-right: 10px;
  border-radius: 4px;
  position: relative;
  float: left;
}
.note .note-title svg {
  height: 18px;
  width: 18px;
}

#scroll-up, #share {
  padding: 0;
  background: none;
  border: 0;
}
#scroll-up:hover, #share:hover {
  cursor: pointer;
  opacity: 0.6;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../../../../../fonts/roboto_mono/RobotoMono-Regular.e5ca8c0a.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
details {
  display: block;
}
details > summary {
  padding: 2px 0;
}
details > summary:after {
  content: "+";
  display: inline-block;
  margin-left: 6px;
  opacity: 0.6;
}
details > summary:hover {
  cursor: pointer;
}
details > summary:first-letter {
  text-transform: uppercase;
}
details[open] > summary:after {
  content: "-";
  display: inline-block;
  margin-left: 6px;
  opacity: 0.6;
}

#filter-summary {
  padding-bottom: 47px !important;
  line-height: 1.1;
}
#filter-summary #breadcrumb {
  line-height: 1.5;
}
#filter-summary + * {
  padding: clamp(30px, 6vw, 40px) 0 !important;
}
#filter-summary:after {
  display: none;
}

#header {
  padding-top: 40px;
  padding-bottom: 15px;
}
#header h1 {
  line-height: 1.1;
  font-size: 34px;
}

h2 {
  font-size: 24px !important;
}

#breadcrumb {
  margin-bottom: clamp(30px, 6vw, 40px);
  text-transform: capitalize;
}
#breadcrumb .identifier-segment {
  text-decoration: underline;
}

#panel-wrapper {
  border-bottom: 1px solid #e4e4e4;
}

#sidebar-wrapper {
  border-top: 1px solid #e4e4e4;
}
#sidebar-wrapper #sidebar {
  max-width: 280px;
}
#sidebar-wrapper #sidebar > ul li {
  padding: 2px 0;
}
#sidebar-wrapper #sidebar > ul li:first-letter {
  text-transform: uppercase;
}
#sidebar-wrapper #sidebar > ul li a:hover {
  opacity: 0.6;
}
#sidebar-wrapper #sidebar > ul > li {
  padding: 20px 0;
}
#sidebar-wrapper #sidebar > ul > li + li {
  border-top: 1px solid #e4e4e4;
}
#sidebar-wrapper #sidebar > ul > li li {
  margin-left: 15px;
}
#sidebar-wrapper #sidebar > ul .selected {
  color: #006dce;
  text-decoration: underline;
}

#anchors-wrapper {
  padding: clamp(30px, 6vw, 40px) 0;
  border-top: 1px solid #e4e4e4;
}
#anchors-wrapper h2 {
  font-size: 16px !important;
  margin-bottom: 8px;
}
#anchors-wrapper li {
  padding: 2px 0;
  position: relative;
}
#anchors-wrapper a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 1019px) {
  #docs-content-wrapper {
    display: flex;
    flex-flow: column;
    padding: 0 clamp(20px, 6vw, 46px);
  }
}
@media screen and (min-width: 500px) {
  #filter-summary {
    padding-bottom: 0 !important;
  }
}
@media screen and (min-width: 1020px) {
  #docs-content-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr minmax(0, 680px) 1fr;
  }
  #docs-content-wrapper > * {
    grid-column: 3;
  }
  #sidebar-wrapper {
    display: block;
    border-right: 1px solid #e4e4e4;
    border-top: unset;
    width: 250px;
    position: fixed;
    left: 0;
    bottom: 0;
    top: 65px;
  }
  #sidebar-wrapper #sidebar {
    position: sticky;
    top: 65px;
    height: calc(100vh - 65px);
    overflow-y: auto;
    scrollbar-width: none;
    /* Track */
    /* Handle */
  }
  #sidebar-wrapper #sidebar::-webkit-scrollbar {
    width: 5px;
  }
  #sidebar-wrapper #sidebar::-webkit-scrollbar-track {
    background: #e7e7e7;
  }
  #sidebar-wrapper #sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border: 1px solid #888;
    border-radius: 24px;
  }
  #sidebar-wrapper #sidebar:hover {
    scrollbar-width: auto;
  }
  #sidebar-wrapper #sidebar > ul > li {
    padding: 20px clamp(20px, 6vw, 46px);
  }
}
@media screen and (min-width: 1300px) {
  #docs-content-wrapper {
    grid-template-columns: 280px minmax(46px, 1fr) minmax(0, 680px) 300px minmax(46px, 1fr);
  }
  #sidebar-wrapper {
    width: 280px;
  }
  #anchors-wrapper {
    grid-column: 4;
    grid-row: 1/5;
    position: sticky;
    top: 65px;
    padding: 48px 0 60px 40px;
    box-sizing: border-box;
    border: unset;
    align-self: start;
  }
  #anchors-wrapper li {
    padding: 2px 0;
    position: relative;
  }
  #anchors-wrapper a:hover {
    opacity: 0.6;
  }
  #anchors-wrapper > div {
    border-left: 1px solid #e4e4e4;
    padding-left: 40px;
  }
}
code {
  background: #efefef;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.875rem;
}

.tabbed-code-wrapper {
  border-radius: 10px;
  overflow: hidden;
  background: #2c3240;
  margin: 6px 0;
}
.tabbed-code-wrapper .code-wrapper-header {
  border-bottom: 1px solid rgba(57, 65, 81, 0.5882352941);
  background: #292f3c;
  color: #c3c7ce;
  padding: 6px 20px;
  display: flex;
  gap: 15px;
}
.tabbed-code-wrapper .code-wrapper-header button {
  border: 0;
  padding: 0;
  background: unset;
}
.tabbed-code-wrapper .code-wrapper-header button.selected {
  text-decoration: underline;
}
.tabbed-code-wrapper .code-wrapper-header button:hover {
  cursor: pointer;
}
.tabbed-code-wrapper .code-wrapper-header button:hover:not(.selected) {
  opacity: 0.6;
}
.tabbed-code-wrapper .code-wrapper-header button.tab {
  color: #c3c7ce;
}
.tabbed-code-wrapper .code-wrapper-header button:not(.tab) {
  color: #858a93;
}
.tabbed-code-wrapper .code-wrapper-header button:not(.tab):before {
  content: "/ ";
  opacity: 0.6;
}
.tabbed-code-wrapper .code-wrapper-content:not(.selected) {
  display: none;
}
.tabbed-code-wrapper .code-wrapper-content pre {
  color: #c3c7ce;
  padding: 15px 20px;
  overflow-x: auto;
  margin: 0;
  display: flex;
  box-sizing: border-box;
}
.tabbed-code-wrapper .code-wrapper-content pre code {
  padding: 0;
  background: unset;
  border: unset;
  margin: unset;
}
.tabbed-code-wrapper .code-wrapper-content pre code .hljs-comment {
  color: #949aa6;
}
.tabbed-code-wrapper .code-wrapper-content pre code.language-json {
  color: #c3c7ce;
}
.tabbed-code-wrapper .code-wrapper-content pre code.language-json .hljs-attr {
  color: #eeba78;
}
.tabbed-code-wrapper .code-wrapper-content pre code.language-json .hljs-string {
  color: #99ca75;
}

.code-wrapper {
  margin: 6px 0;
  position: relative;
}
.code-wrapper button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 16px 19px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}
.code-wrapper button img {
  height: 20px;
  width: 20px;
  background: #2c3240;
}
.code-wrapper button:not(.copied) .copied-to-clipboard {
  display: none;
}
.code-wrapper button.copied .copy-to-clipboard {
  display: none;
}
.code-wrapper pre {
  border-radius: 10px;
  background: #2c3240;
  color: #c3c7ce;
  padding: 15px 20px;
  overflow-x: auto;
  margin: 0;
  display: flex;
  box-sizing: border-box;
}
.code-wrapper pre code {
  padding: 0;
  background: unset;
  border: unset;
  margin: unset;
}
.code-wrapper pre code .hljs-comment {
  color: #949aa6;
}
.code-wrapper pre code.language-json {
  color: #c3c7ce;
}
.code-wrapper pre code.language-json .hljs-attr {
  color: #eeba78;
}
.code-wrapper pre code.language-json .hljs-string {
  color: #99ca75;
}

.avatar-generic {
  background: #eee;
  text-transform: capitalize;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  left: 0;
  top: 0;
  border-radius: 12px !important;
  position: absolute;
}
.avatar-generic:hover {
  opacity: unset !important;
}

.avatar-custom {
  display: inline-flex;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  border-radius: 12px;
  overflow: hidden;
  position: absolute;
}
.avatar-custom:hover {
  opacity: unset !important;
}
.avatar-custom img {
  width: 100%;
}

main section, main .section {
  padding: clamp(30px, 6vw, 40px) 0;
  border-top: 1px solid #e4e4e4 !important;
}
main section h2 + ul li, main .section h2 + ul li {
  min-height: 32px;
}
main section h2 + ul li ul, main .section h2 + ul li ul {
  margin-top: 8px;
  margin-left: 26px;
}
main section.flex, main .section.flex {
  gap: 20px;
}
main section a, main .section a {
  color: #006dce;
  text-decoration: underline;
}
main section a code, main .section a code {
  color: #3c4247;
  text-decoration: underline;
  text-decoration-color: #f8f8f8;
  padding: 1px 5px;
}
main section h1 > a, main section h2 > a, main section h3 > a, main section h4 > a, main section h5 > a, main section h6 > a, main .section h1 > a, main .section h2 > a, main .section h3 > a, main .section h4 > a, main .section h5 > a, main .section h6 > a {
  color: #33373c;
  text-decoration: unset;
}
main section h2, main section h3, main section h4, main section h5, main section h6, main .section h2, main .section h3, main .section h4, main .section h5, main .section h6 {
  position: relative;
}
main section h2 a, main section h3 a, main section h4 a, main section h5 a, main section h6 a, main .section h2 a, main .section h3 a, main .section h4 a, main .section h5 a, main .section h6 a {
  display: inline-block;
}
main section h2 a:before, main section h3 a:before, main section h4 a:before, main section h5 a:before, main section h6 a:before, main .section h2 a:before, main .section h3 a:before, main .section h4 a:before, main .section h5 a:before, main .section h6 a:before {
  content: "#";
  font-weight: normal;
  color: #5493cd;
  display: none;
  position: absolute;
  left: -0.8em;
}
main section h2 a:hover:before, main section h3 a:hover:before, main section h4 a:hover:before, main section h5 a:hover:before, main section h6 a:hover:before, main .section h2 a:hover:before, main .section h3 a:hover:before, main .section h4 a:hover:before, main .section h5 a:hover:before, main .section h6 a:hover:before {
  display: inline-block;
}
main section > ul, main .section > ul {
  list-style: disc;
  padding-left: 25px;
}
main section > ul ul, main .section > ul ul {
  padding-left: 25px;
  list-style: circle;
}

details > summary {
  list-style: none;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}