.token.cdata,
.token.comment,
.token.doctype,
.token.prolog,
.token.punctuation {
  color: #6d6d6d
}

.token.namespace {
  opacity: .7
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
  color: #a30008
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: #005a38
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
  color: #1b1b1b
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #005282
}

.token.class-name,
.token.function {
  color: #db000e
}

.token.important,
.token.regex,
.token.variable {
  color: #c53c00
}

.token.bold,
.token.important {
  font-weight: 700
}

.token.italic {
  font-style: italic
}

.token.entity {
  cursor: help
}

*,
:after,
:before {
  box-sizing: border-box
}

ol[class],
ul[class] {
  padding: 0
}

blockquote,
body,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
h5,
li,
ol[class],
p,
ul[class] {
  margin: 0
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5
}

ol[class],
ul[class] {
  list-style: none
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}

img {
  max-width: 100%;
  display: block
}

article>*+* {
  margin-top: 1em
}

button,
input,
select,
textarea {
  font: inherit
}

@media(prefers-reduced-motion:reduce) {
  * {
    -webkit-animation-duration: .01ms !important;
    animation-duration: .01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

html {
  background-color: #fff;
  box-sizing: border-box;
  color: #1b1b1b
}

body {
  font-family: arial, x-locale-body, sans-serif;
  letter-spacing: -.0027777778rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 100%;
  line-height: 1.75
}

img {
  height: auto
}

@font-face {
  font-display: swap;
  font-family: zillaslab;
  font-style: normal;
  font-weight: 700;
  src: url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/ZillaSlab-Bold.subset.0beac26b.woff2") format("woff2"), url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/ZillaSlab-Bold.subset.72026b3c.woff") format("woff")
}

@font-face {
  font-display: swap;
  font-family: zillaslab;
  font-style: normal;
  font-weight: 400;
  src: url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/ZillaSlab-Regular.subset.ce3a756d.woff2") format("woff2"), url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/ZillaSlab-Regular.subset.7e4c05c9.woff") format("woff")
}

h1,
h2,
h3,
h4,
h5 {
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  letter-spacing: .035rem;
  line-height: 1.2
}

h3,
h4,
h5 {
  font-weight: 400
}

h4,
h5 {
  line-height: 1.2
}

h1 {
  font-size: 1.802rem
}

@media (min-width:47.9385em) {
  h1 {
    font-size: 3.052rem
  }
}

h2 {
  font-size: 1.602rem
}

@media (min-width:47.9385em) {
  h2 {
    font-size: 2.441rem
  }
}

h3 {
  font-size: 1.424rem
}

@media (min-width:47.9385em) {
  h3 {
    font-size: 1.953rem
  }
}

h4 {
  font-size: 1.266rem
}

@media (min-width:47.9385em) {
  h4 {
    font-size: 1.563rem
  }
}

h5 {
  font-size: 1.125rem
}

@media (min-width:47.9385em) {
  h5 {
    font-size: 1.25rem
  }
}

p {
  margin-bottom: 24px
}

.smaller-text {
  font-size: .9rem
}

.tiny-text {
  font-size: .75rem
}

.slab-highlight {
  background-color: #1b1b1b;
  color: #fff;
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  font-weight: 400;
  max-width: -webkit-max-content;
  max-width: max-content;
  padding: 0 6px
}

.readable-line-length {
  max-width: 45rem;
  max-width: 85ch
}

a:link,
a:visited {
  color: #005282;
  text-decoration: none
}

a:link:active,
a:link:focus,
a:link:hover,
a:visited:active,
a:visited:focus,
a:visited:hover {
  text-decoration: underline
}

blockquote {
  max-width: 45rem;
  max-width: 85ch;
  font-size: 1.125rem;
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  font-weight: 400;
  margin-bottom: 24px
}

@media (min-width:47.9385em) {
  blockquote {
    font-size: 1.25rem
  }
}

blockquote:after,
blockquote:before {
  background-image: linear-gradient(90deg, #005282, #83bfff);
  content: "";
  display: block;
  height: 5px;
  margin-bottom: 12px
}

blockquote:after {
  margin-top: 12px
}

blockquote p:last-of-type {
  margin-bottom: 0
}

a {
  color: #005282;
  text-decoration: none
}

a:focus,
a:hover {
  text-decoration: underline
}

a code {
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none
}

a.external,
a.external:after {
  display: inline-block
}

a.external:after {
  background: transparent url("") 0 0 no-repeat;
  background-size: 16px;
  content: "";
  height: 16px;
  margin-left: 3px;
  width: 16px
}

.highlighted-link-state {
  background-color: #005282;
  color: #fff
}

dl dt {
  font-weight: 700
}

dl dd {
  margin: 0 24px 24px
}

.flex-list {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 24px;
  gap: 24px
}

.flex-list.styled {
  margin: 24px 0;
  padding-left: 48px
}

.flex-list li {
  flex-basis: 45%
}

ul.flex-list.styled li {
  list-style-type: disc
}

ol.flex-list.styled li {
  list-style-type: decimal
}

.icon {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 21px;
  content: "";
  display: inline-block;
  height: 21px;
  margin-right: 6px;
  vertical-align: sub;
  width: 21px
}

h2 .icon,
h3 .icon,
h4 .icon {
  margin-left: 6px;
  vertical-align: middle
}

.experimental,
.non-standard {
  fill: #0072b3
}

.deprecated,
.warning {
  fill: #575000
}

.obsolete {
  fill: #a30008
}

.callout {
  background-color: #bbd8ff;
  border-radius: 6px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-bottom: 24px;
  max-width: -webkit-max-content;
  max-width: max-content;
  padding: 24px 24px 0
}

.callout p {
  max-width: 45rem;
  max-width: 85ch
}

.callout h4 {
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  background-color: transparent;
  color: #1b1b1b
}

.callout .button {
  max-width: inherit;
  width: 100%
}

@media (min-width:47.9385em) {
  .callout .button {
    max-width: -webkit-max-content;
    max-width: max-content;
    width: inherit
  }
}

.neutral {
  color: #0072b3
}

.warning {
  color: #575000
}

.error {
  color: #a30008
}

.success {
  color: #005a38
}

.badge {
  background-color: #f4f4f4;
  border-radius: 6px;
  margin-right: 6px;
  padding: 0 12px
}

.badge a {
  color: #f4f4f4
}

.spec-living,
.spec-standard {
  color: #005282
}

.spec-cr,
.spec-pr,
.spec-rec,
.spec-rfc {
  color: #005a38
}

.spec-draft,
.spec-lc,
.spec-wd {
  color: #922a00
}

.spec-ed,
.spec-obsolete {
  color: #a30008
}

pre {
  border-left: 6px solid #005282;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 24px;
  max-width: 100%;
  overflow: auto;
  padding: 24px;
  width: 100%
}

code,
pre {
  background-color: #f4f4f4
}

code {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: consolas, "Liberation Mono", courier, monospace;
  padding: 0 3px;
  white-space: nowrap;
  word-wrap: break-word
}

pre code {
  white-space: pre
}

.notranslate code {
  background-color: transparent
}

.example-bad {
  background-color: #fae4e5;
  border-color: #ff7d7e
}

.example-good {
  background-color: #d0f1de;
  border-color: #009e66
}

kbd {
  background: linear-gradient(180deg, #f4f4f4, #d5d5d5);
  background-color: #f4f4f4;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  box-shadow: 0 1px 2px 1px #d5d5d5;
  font-family: consolas, "Liberation Mono", courier, monospace;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  margin: 3px;
  padding: 4px 6px;
  white-space: nowrap
}

table kbd {
  margin: 6px
}

.button,
a.button {
  background-color: #005282;
  border: 2px solid #005282;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-weight: 700;
  max-width: -webkit-max-content;
  max-width: max-content;
  min-height: 45px;
  padding: 10px 20px;
  text-decoration: none
}

.button:focus,
.button:hover,
a.button:focus,
a.button:hover {
  background-color: #0072b3;
  border-color: #0072b3
}

.button:active,
a.button:active {
  background-color: #005282;
  border-color: #005282
}

.button:active,
.button:focus,
.button:hover,
a.button:active,
a.button:focus,
a.button:hover {
  text-decoration: none
}

.outline,
a.outline {
  background-color: #fff;
  border-color: #0072b3;
  color: #0072b3
}

.outline:focus,
.outline:hover,
a.outline:focus,
a.outline:hover {
  color: #fff
}

.danger,
a.danger {
  background-color: #a30008;
  border: 2px solid #a30008;
  color: #fff
}

.danger:focus,
.danger:hover,
a.danger:focus,
a.danger:hover {
  background-color: #db000e;
  border-color: #db000e
}

.danger:active,
a.danger:active {
  background-color: #a30008;
  border-color: #a30008
}

.danger.outline,
a.danger.outline {
  background-color: #fff;
  border-color: #db000e;
  color: #db000e
}

.danger.outline:focus,
.danger.outline:hover,
a.danger.outline:focus,
a.danger.outline:hover {
  background-color: #db000e;
  border-color: #db000e;
  color: #6d6d6d
}

.danger.outline:active,
a.danger.outline:active {
  background-color: #db000e;
  border-color: #db000e
}

.positive,
a.positive {
  background-color: #005a38;
  border: 2px solid #005a38;
  color: #fff
}

.positive:focus,
.positive:hover,
a.positive:focus,
a.positive:hover {
  background-color: #007d50;
  border-color: #007d50
}

.positive:active,
a.positive:active {
  background-color: #005a38;
  border-color: #005a38
}

.positive.outline,
a.positive.outline {
  background-color: #fff;
  border-color: #007d50;
  color: #007d50
}

.positive.outline:focus,
.positive.outline:hover,
a.positive.outline:focus,
a.positive.outline:hover {
  background-color: #007d50;
  border-color: #007d50;
  color: #6d6d6d
}

.positive.outline:active,
a.positive.outline:active {
  background-color: #007d50;
  border-color: #007d50
}

.light,
a.light {
  background-color: #fff;
  border: 2px solid #fff;
  color: #1b1b1b
}

.light:focus,
.light:hover,
a.light:focus,
a.light:hover {
  background-color: #f4f4f4;
  border-color: #f4f4f4
}

.light:active,
a.light:active {
  background-color: #fff;
  border-color: #fff
}

.light.outline,
a.light.outline {
  background-color: transparent;
  border-color: #fff;
  color: #fff
}

.light.outline:focus,
.light.outline:hover,
a.light.outline:focus,
a.light.outline:hover {
  background-color: #fff;
  border-color: #fff;
  color: #1b1b1b
}

.light.outline:active,
a.light.outline:active {
  background-color: #fff;
  border-color: #fff
}

.inactive,
a.inactive {
  background-color: #8a8a8a;
  border: 2px solid #8a8a8a;
  color: #f4f4f4;
  cursor: default
}

.inactive:active,
.inactive:focus,
.inactive:hover,
a.inactive:active,
a.inactive:focus,
a.inactive:hover {
  background-color: #8a8a8a;
  border-color: #8a8a8a
}

.inactive:focus,
.inactive:hover,
a.inactive:focus,
a.inactive:hover {
  color: #bababa;
  text-decoration: none
}

.minimal,
a.minimal {
  display: inline-block;
  font-size: .9rem;
  font-weight: 400;
  min-height: inherit;
  padding: 3px 6px
}

@media (min-width:47.9385em) {

  .minimal,
  a.minimal {
    padding: 0 6px
  }
}

.icon-button svg {
  fill: currentColor;
  height: 22px;
  margin-right: 10px;
  vertical-align: text-bottom;
  width: 22px
}

.icon-button.right svg {
  margin-left: 10px;
  margin-right: 0
}

.ghost {
  background: none;
  border: 0;
  color: #005282;
  cursor: pointer;
  text-decoration: underline
}

.ghost:focus,
.ghost:hover {
  text-decoration: none
}

form .field-group {
  margin-bottom: 20px
}

form .field-group.inline {
  display: inline-block;
  margin-right: 20px
}

form .field-note {
  color: #343434;
  font-size: .9rem
}

fieldset {
  border: 0;
  margin: 20px 0;
  padding-bottom: 0
}

fieldset.bordered {
  border: 1px solid #a4a4a4
}

legend.highlighted {
  background-color: #1b1b1b;
  color: #fff;
  padding: 10px 4px
}

legend.highlighted code {
  background-color: transparent
}

legend.emphasized {
  font-weight: 700;
  padding: 10px 0
}

label {
  display: block;
  margin-bottom: 5px
}

label.inline {
  display: inline-block
}

[type=email],
[type=password],
[type=text],
[type=url],
textarea {
  border: 1px solid #a4a4a4;
  border-radius: 4px;
  padding: 5px 10px
}

[type=email]:active,
[type=email]:focus,
[type=password]:active,
[type=password]:focus,
[type=text]:active,
[type=text]:focus,
[type=url]:active,
[type=url]:focus {
  border-color: #0072b3;
  box-shadow: 1px 1px 1px #0072b3;
  outline: 0
}

[type=email].valid,
[type=password].valid,
[type=text].valid,
[type=url].valid {
  border-color: #007d50;
  outline: 2px dashed #007d50;
  outline-offset: 3px
}

[type=email].valid:active,
[type=email].valid:focus,
[type=password].valid:active,
[type=password].valid:focus,
[type=text].valid:active,
[type=text].valid:focus,
[type=url].valid:active,
[type=url].valid:focus {
  box-shadow: 1px 1px 1px #007d50
}

[type=email].invalid,
[type=password].invalid,
[type=text].invalid,
[type=url].invalid {
  border-color: #ff4044;
  outline: 2px dashed #ff4044;
  outline-offset: 3px
}

[type=email].invalid:active,
[type=email].invalid:focus,
[type=password].invalid:active,
[type=password].invalid:focus,
[type=text].invalid:active,
[type=text].invalid:focus,
[type=url].invalid:active,
[type=url].invalid:focus {
  box-shadow: 1px 1px 1px #ff4044
}

textarea {
  min-height: 120px;
  min-width: 350px
}

table {
  border: 1px solid #a4a4a4;
  font-size: .9rem;
  overflow-x: auto;
  width: 100%
}

@media (min-width:47.9385em) {
  table {
    font-size: 1rem
  }
}

table th {
  background-color: #d5d5d5
}

table td,
table th {
  border: 0;
  border-bottom: 1px solid #a4a4a4
}

table td {
  background-color: #f4f4f4
}

table td,
table th {
  border-left: 1px solid #a4a4a4;
  padding: 12px;
  text-align: left
}

table td:first-child,
table th:first-child {
  border-left: 0;
  min-width: 150px
}

@media (min-width:63.9385em) {

  table td:first-child,
  table th:first-child {
    min-width: 200px
  }
}

table tr:last-child td {
  border-bottom: 0
}

table pre {
  background-color: #6d6d6d
}

table caption {
  font-size: 1.125rem;
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  letter-spacing: .035rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 12px
}

@media (min-width:47.9385em) {
  table caption {
    font-size: 1.25rem
  }
}

.properties,
table {
  border-collapse: collapse;
  margin-bottom: 24px
}

.properties code,
table code {
  background-color: transparent;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto
}

.properties {
  max-width: 45rem;
  max-width: 85ch;
  border: 2px solid #005282;
  border-left-width: 6px;
  width: 100%
}

.properties td,
.properties th {
  background-color: #f4f4f4;
  border: 0;
  border-top: 2px solid #005282;
  display: block;
  padding: 12px;
  vertical-align: top
}

@media (min-width:63.9385em) {

  .properties td,
  .properties th {
    display: table-cell
  }
}

@media (min-width:63.9385em) {
  .properties th {
    min-width: 30%
  }
}

.page-overlay {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 90px;
  width: 100%;
  z-index: 300
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px
}

.hide {
  visibility: hidden
}

.hidden {
  display: none
}

.show-flex {
  display: flex
}

.sample-code-frame {
  border: 1px solid #0072b3;
  border-left: 6px solid #005282;
  margin: 0 0 12px;
  padding: 12px;
  width: 100%
}

.inline {
  display: inline-block
}

.page-wrapper {
  margin: 0 auto;
  max-width: 1400px;
  width: 100%
}

@supports(display:grid) {
  .page-wrapper.document-page {
    grid-template-columns: 70% 30%
  }

  @media (min-width:63.9385em) {
    .page-wrapper.document-page {
      grid-template-columns: minmax(25%, 75%) minmax(75%, 25%);
      grid-template-rows: repeat(3, auto) -webkit-max-content 1fr;
      grid-template-rows: repeat(3, auto) max-content 1fr
    }
  }

  .document-page .breadcrumb-locale-container,
  .document-page .document-toc-container,
  .document-page .generic-loading,
  .document-page .localized-content-note,
  .document-page .main-content,
  .document-page .metadata,
  .document-page .page-header,
  .document-page .sidebar {
    grid-column: 1/3
  }

  .document-page .page-header {
    grid-row: 1/2
  }

  .document-page .breadcrumb-locale-container {
    grid-row: 2/3
  }

  .document-page .localized-content-note {
    grid-row: 3/4
  }

  .document-page .document-toc-container {
    grid-row: 4/5
  }

  @media (min-width:63.9385em) {
    .document-page .document-toc-container {
      grid-column: 1/2
    }
  }

  .document-page .main-content {
    grid-row: 5/6
  }

  @media (min-width:63.9385em) {
    .document-page .main-content {
      grid-column: 2/3;
      grid-row: 4/6
    }
  }

  .document-page .sidebar {
    grid-row: 6/7
  }

  @media (min-width:63.9385em) {
    .document-page .sidebar {
      grid-column: 1/2;
      grid-row: 5/6
    }
  }

  .document-page .metadata {
    grid-row: 7/8
  }
}

@supports(display:grid) {
  .page-wrapper {
    display: grid;
    grid-template-columns: 100%
  }

  .standard-page {
    max-width: inherit
  }

  .standard-page .page-content-container,
  .standard-page .page-header {
    grid-column: 1/2
  }

  .standard-page .page-header {
    grid-row: 1/2
  }

  .standard-page .titlebar-container {
    grid-row: 2/3
  }

  .standard-page .page-content-container {
    display: grid;
    grid-row: 3/4;
    grid-template-columns: 100%;
    padding: 24px
  }

  @media (min-width:74.9375em) {
    .standard-page .page-content-container {
      margin: 0 auto;
      max-width: 1400px;
      width: 100%
    }
  }
}

@media (min-width:63.9385em) {
  .blog-feed {
    flex-basis: 65%
  }
}

.blog-feed h3 {
  background-color: transparent;
  padding: 0
}

.blog-feed ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.blog-feed ul li {
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 12px
}

.blog-feed .post-meta {
  font-size: .9rem;
  font-style: italic
}

@media (min-width:63.9385em) {
  .contribute {
    flex-basis: 35%
  }
}

.contribute h2 {
  margin-bottom: 24px
}

@media (min-width:47.9385em) {
  .contribute h2 {
    font-size: 1.953rem
  }
}

.contribute ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.contribute ul li {
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 12px
}

.hero {
  background-color: #83bfff;
  padding: 24px;
  position: relative
}

@media (min-width:47.9385em) {
  .hero {
    background: #83bfff url("") 0 0 repeat;
    background-size: cover;
    padding: 75px 48px 48px
  }
}

@media (min-width:63.9385em) {
  .hero {
    padding-bottom: 72px
  }
}

.hero-content {
  margin: 0 auto;
  max-width: 63.9375em;
  position: relative
}

.hero-content h1 {
  background-color: #1b1b1b;
  color: #fff;
  font-size: 1.602rem;
  font-weight: 400;
  margin: 0 auto 24px;
  text-align: center
}

@media (min-width:63.9385em) {
  .hero-content h1 {
    font-size: 2.441rem;
    margin-bottom: 48px;
    max-width: 750px
  }
}

.hero-content ul {
  list-style: none;
  margin: 0;
  padding: 0
}

@media (min-width:63.9385em) {
  .hero-content ul {
    display: flex;
    justify-content: space-around
  }
}

.hero-content ul li {
  flex-basis: 35%;
  position: relative
}

@media (min-width:63.9385em) {
  .hero-content ul li {
    flex-basis: 25%
  }
}

.hero-content a {
  border-bottom: 2px solid #1b1b1b;
  color: #1b1b1b;
  display: inline-block;
  padding: 12px 0;
  width: 100%
}

.hero-content a:after {
  background: transparent url("") 0 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 16px;
  position: absolute;
  right: 6px;
  top: 19px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 16px
}

.hero-content a:focus:after,
.hero-content a:hover:after {
  right: 4px
}

.home-content-container {
  margin: 0 auto;
  max-width: 1400px;
  padding: 24px;
  position: relative
}

@media (min-width:63.9385em) {
  .home-content-container {
    grid-gap: 24px;
    gap: 24px;
    display: flex;
    margin: 48px auto
  }
}

.generic-loading {
  -webkit-animation: slow-pulse 2s infinite normal;
  animation: slow-pulse 2s infinite normal;
  align-items: center;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  display: flex;
  justify-content: center;
  width: 100%
}

.bc-github-link {
  margin: 6px 0
}

@media (min-width:63.9385em) {
  .bc-github-link {
    float: right;
    white-space: pre-line
  }
}

.bc-table {
  background-color: #f4f4f4;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%
}

.bc-table abbr {
  cursor: help;
  text-decoration: none
}

.bc-table td,
.bc-table th {
  border-bottom: 0 solid transparent;
  border-left: 1px solid #1b1b1b;
  border-right: 0;
  border-top: 1px solid #1b1b1b;
  padding: 0;
  position: relative;
  text-align: center
}

.bc-table th {
  background-color: transparent;
  border-left: 0;
  border-right: 1px solid #1b1b1b;
  overflow: hidden;
  padding: 6px
}

.bc-table thead {
  display: none
}

@media (min-width:63.9385em) {
  .bc-table thead {
    display: table-header-group
  }
}

.bc-table thead td {
  border-left: 0;
  border-right: 2px solid #1b1b1b;
  border-top: 0;
  overflow: hidden
}

@media (min-width:63.9385em) {
  .bc-table thead td {
    width: 200px
  }
}

.bc-table .bc-table-row-header {
  padding: 12px 6px
}

.bc-table .bc-table-row-header code {
  text-decoration: none
}

.bc-table tbody td,
.bc-table tbody th {
  border-left: 0;
  border-right: 0;
  display: block;
  max-width: 100%;
  text-align: left;
  width: 100%
}

.bc-table tbody th {
  padding: 0
}

@media (min-width:63.9385em) {
  .bc-table tbody th {
    border-right: 2px solid #1b1b1b;
    display: table-cell;
    font-weight: 400;
    overflow: hidden;
    width: 200px
  }
}

@media (min-width:63.9385em) {
  .bc-table tbody td {
    border-right: 1px solid #1b1b1b;
    display: table-cell;
    overflow: hidden;
    padding: 12px 6px;
    text-align: center;
    vertical-align: middle
  }
}

.bc-table tbody tr:nth-child(2n) {
  background-color: #f4f4f4
}

.bc-table tbody dl {
  max-width: 100%
}

.bc-table .bc-browser-name {
  display: inline-block;
  padding: 6px;
  width: 75%
}

@media (min-width:63.9385em) {
  .bc-table .bc-browser-name {
    display: none
  }
}

.bc-table .new {
  color: #a30008
}

@media (min-width:63.9385em) {
  .bc-table-web thead th:nth-child(7) {
    border-right: 1px solid #1b1b1b
  }

  .bc-table-web td:nth-child(8),
  .bc-table-web thead th:nth-child(8) {
    border-left: 1px solid #1b1b1b
  }
}

.bc-platforms th {
  border-bottom: 2px solid #1b1b1b;
  border-left: 1px solid #1b1b1b;
  border-right: 1px solid #1b1b1b;
  border-top: 0;
  padding: 6px 0;
  width: auto
}

.bc-platforms th:nth-child(2) {
  border-left: 0
}

.bc-platforms span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px
}

.bc-platforms .bc-platform-desktop:before,
.bc-platforms .bc-platform-mobile:before,
.bc-platforms .bc-platform-server:before {
  background-size: 24px;
  content: "";
  display: inline-block;
  height: 24px;
  margin-top: 12px;
  width: 24px
}

.bc-platforms .bc-platform-desktop:before {
  background-image: url("")
}

.bc-platforms .bc-platform-mobile:before {
  background-image: url("")
}

.bc-platforms .bc-platform-server:before {
  background-image: url("")
}

.bc-icons {
  display: inline-block;
  vertical-align: text-top
}

.bc-icons i:before,
.legend-icons:before {
  background-size: 18px;
  display: inline-block;
  height: 18px;
  line-height: 1;
  margin-left: 5px;
  margin-right: 4px;
  width: 18px
}

.ic-footnote:before {
  background-image: url("");
  content: ""
}

.ic-non-standard:before {
  background-image: url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/exclamation-triangle.d21c8a03.svg");
  content: ""
}

.ic-deprecated:before {
  background-image: url("");
  content: ""
}

.ic-experimental:before {
  background-image: url("");
  content: ""
}

.ic-prefix {
  display: inline-block;
  margin-right: 5px
}

.ic-prefix:before {
  color: #1b1b1b;
  content: "-x-";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}

.ic-disabled:before {
  background-image: url("");
  content: ""
}

.ic-altname:before {
  background-image: url("");
  content: ""
}

.bc-supports {
  border: 1px solid #1b1b1b;
  display: inline-block;
  min-width: 120px;
  padding: 6px;
  position: relative;
  text-align: center
}

.bc-supports-yes {
  background-color: #d0f1de
}

.bc-supports-partial {
  background-color: #f8cac5;
  background-image: linear-gradient(to bottom right, rgba(144, 99, 18, .2) 0, rgba(144, 99, 18, .2) 1px, transparent 0, transparent 67px, rgba(144, 99, 18, .2) 0, rgba(144, 99, 18, .2) 73px, transparent 0, transparent 138px, rgba(144, 99, 18, .2) 0, rgba(144, 99, 18, .2) 144px, transparent 0);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100px 100px
}

.bc-supports-no,
.bc-supports-partial,
.bc-supports-unknown,
.bc-supports-yes,
.bc-table .bc-history {
  color: #1b1b1b
}

.bc-supports-no {
  background-color: #f8c9ca;
  background-image: linear-gradient(to bottom right, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 1px, transparent 0, transparent 67px, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 73px, transparent 0, transparent 138px, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 144px, transparent 0), linear-gradient(to bottom left, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 1px, transparent 0, transparent 67px, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 73px, transparent 0, transparent 138px, rgba(94, 3, 6, .1) 0, rgba(94, 3, 6, .1) 144px, transparent 0);
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-size: 100px 100px, 100px 100px;
  font-weight: 700
}

.bc-supports-unknown {
  background-color: #f4f4f4
}

.bc-browsers th {
  border-top: 0;
  height: 200px;
  padding: 6px 0;
  vertical-align: bottom
}

.bc-browsers th:nth-child(2) {
  border-left: 0
}

.bc-browsers .bc-head-txt-label {
  bottom: 0;
  display: inline-block;
  font-weight: 400;
  height: 20px;
  margin: 0 0 24px 12px;
  padding: 0;
  text-align: left;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left;
  transform-origin: left;
  white-space: nowrap;
  width: 20px
}

.bc-browsers .bc-head-txt-label:before {
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  left: -28px;
  top: 1.5px;
  position: absolute;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.bc-head-icon-chrome:before,
.bc-head-icon-chrome_android:before,
.bc-head-icon-edge:before,
.bc-head-icon-edge_mobile:before,
.bc-head-icon-firefox:before,
.bc-head-icon-firefox_android:before,
.bc-head-icon-ie:before,
.bc-head-icon-nodejs:before,
.bc-head-icon-opera:before,
.bc-head-icon-opera_android:before,
.bc-head-icon-safari:before,
.bc-head-icon-safari_ios:before,
.bc-head-icon-samsunginternet_android:before,
.bc-head-icon-webview_android:before {
  background-size: 20px;
  height: 24px;
  width: 20px
}

.bc-browsers .bc-head-icon-chrome:before,
.bc-browsers .bc-head-icon-chrome_android:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-edge:before,
.bc-browsers .bc-head-icon-edge_mobile:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-firefox:before,
.bc-browsers .bc-head-icon-firefox_android:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-ie:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-opera:before,
.bc-browsers .bc-head-icon-opera_android:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-safari:before,
.bc-browsers .bc-head-icon-safari_ios:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-webview_android:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-samsunginternet_android:before {
  background-image: url("")
}

.bc-browsers .bc-head-icon-nodejs:before {
  background-image: url("")
}

tr.bc-history {
  background-color: #f4f4f4;
  display: none
}

tr.bc-history td {
  border-right: 0
}

@media (min-width:63.9385em) {
  tr.bc-history {
    display: table-row
  }
}

tr.bc-history .bc-notes-wrapper {
  text-align: left
}

@media (min-width:74.9375em) {
  tr.bc-history .bc-notes-wrapper {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 24px;
    gap: 24px
  }
}

tr.bc-history dl.bc-notes-list {
  background-color: #f4f4f4;
  display: flex;
  flex-flow: column;
  grid-gap: 24px;
  gap: 24px;
  justify-content: space-between;
  max-width: 100%;
  padding: 12px
}

@media (min-width:74.9375em) {
  tr.bc-history dt {
    flex: 0 1 10%
  }
}

tr.bc-history dd {
  font-weight: 400;
  margin: 12px 0;
  min-height: 24px;
  text-align: left
}

@media (min-width:74.9375em) {
  tr.bc-history dd {
    flex: 1 1 25%;
    margin: inherit;
    padding: 0
  }
}

dl.bc-history-mobile {
  background-color: #f4f4f4;
  display: block;
  padding: 12px
}

@media (min-width:63.9385em) {
  dl.bc-history-mobile {
    display: none
  }
}

dl.bc-history-mobile dd {
  margin: 12px 0
}

.bc-history-link {
  display: none
}

@media (min-width:47.9385em) {
  .bc-history-link {
    background: transparent url("") 50% no-repeat;
    background-size: 16px;
    border: 0;
    border-bottom: 1px solid #1b1b1b;
    border-radius: 0;
    box-shadow: none;
    color: #1b1b1b;
    cursor: pointer;
    display: block;
    font-size: .75rem;
    height: 16px;
    padding: 12px;
    position: relative;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 100%
  }
}

@media (min-width:63.9385em) {
  .bc-history-link {
    bottom: 0;
    left: 0;
    margin: 12px 0 0;
    padding: 0;
    position: absolute;
    z-index: 300
  }
}

.bc-history-link-inverse {
  border: 0;
  border-top: 1px solid #1b1b1b;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg)
}

.bc-legend {
  margin: 48px 0
}

.bc-legend dl.bc-legend-items-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 48px;
  gap: 48px;
  line-height: 1.2;
  max-width: inherit
}

.bc-legend dl.bc-legend-items-container .bc-legend-item {
  flex-basis: 100%
}

@media (min-width:47.9385em) {
  .bc-legend dl.bc-legend-items-container .bc-legend-item {
    flex-basis: 45%
  }
}

.bc-legend dl.bc-legend-items-container dd,
.bc-legend dl.bc-legend-items-container dt {
  display: inline-block;
  margin: 0;
  max-width: 275px;
  min-height: 30px;
  min-width: 30px
}

.bc-legend dl.bc-legend-items-container dt {
  margin-right: 12px;
  vertical-align: bottom
}

.bc-legend abbr {
  cursor: help;
  display: inline-block
}

.bc-legend .bc-supports {
  display: inline-block;
  min-height: 30px;
  min-width: 30px
}

.offscreen,
.only-icon span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px
}

@media (min-width:63.9385em) {
  .breadcrumbs-container {
    padding: 12px 24px;
    padding: 0
  }
}

.breadcrumbs-container a {
  align-items: center;
  display: flex
}

.breadcrumbs-container ol {
  list-style: none;
  margin: 0;
  padding: 0
}

.breadcrumbs-container li {
  display: inline-flex;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto
}

.breadcrumbs-container li .breadcrumb,
.breadcrumbs-container li .breadcrumb-current-page {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px
}

@media (min-width:63.9385em) {

  .breadcrumbs-container li .breadcrumb,
  .breadcrumbs-container li .breadcrumb-current-page {
    border: inherit;
    clip: inherit;
    height: inherit;
    margin: inherit;
    overflow: inherit;
    padding: inherit;
    position: inherit !important;
    width: inherit
  }
}

.breadcrumbs-container li .breadcrumb-penultimate:after,
.breadcrumbs-container li .breadcrumb:after {
  background: transparent url("") 0 0 no-repeat;
  background-size: 12px;
  content: "";
  height: 12px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 12px
}

.breadcrumbs-container li .breadcrumb:after {
  display: inline-block
}

.breadcrumbs-container li [property=name] {
  display: inline-block;
  margin: 0 3px
}

.breadcrumbs-container li .breadcrumb-penultimate:before {
  background: transparent url("") 0 0 no-repeat;
  background-size: auto;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 16px
}

@media (min-width:63.9385em) {
  .breadcrumbs-container li .breadcrumb-penultimate:before {
    display: none
  }
}

.breadcrumbs-container li .breadcrumb-penultimate:after {
  display: none
}

@media (min-width:63.9385em) {
  .breadcrumbs-container li .breadcrumb-penultimate:after {
    display: inline-block
  }
}

.breadcrumbs-container li:last-child a:link,
.breadcrumbs-container li:last-child a:visited {
  color: #1b1b1b
}

ul.language-toggle {
  display: flex;
  position: relative;
  text-align: right;
  top: -3px
}

@media (min-width:47.9385em) {
  ul.language-toggle {
    justify-content: flex-end;
    text-align: inherit;
    top: -2px
  }
}

ul.language-toggle .icon {
  margin: 0
}

ul.language-toggle li {
  max-height: 24px
}

ul.language-toggle .language-icon {
  display: inline-block;
  min-width: 50px;
  width: auto
}

ul.language-toggle .language-icon.default {
  min-width: 100px
}

@media (min-width:47.9385em) {
  ul.language-toggle .language-icon {
    min-width: 100px
  }
}

ul.language-toggle .language-icon:before {
  background: transparent url("") 0 0 no-repeat;
  content: "";
  display: inline-block;
  height: 29px;
  vertical-align: middle;
  width: 28px
}

ul.language-toggle .language-icon:after {
  content: "|";
  display: inline-block;
  margin: 0 6px
}

ul.language-toggle.single-option {
  justify-content: flex-end
}

ul.language-toggle.single-option .language-icon:after {
  display: none
}

.show-desktop {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px
}

@media (min-width:47.9385em) {
  .show-desktop {
    border: inherit;
    clip: inherit;
    height: inherit;
    overflow: inherit;
    padding: inherit;
    position: inherit !important;
    width: inherit;
    margin: 0
  }
}

.document-toc {
  font-size: 1rem;
  padding: 6px 24px;
  position: relative
}

@media (min-width:47.9385em) {
  .document-toc {
    padding: 0 24px
  }
}

@media (min-width:63.9385em) {
  .document-toc {
    margin-top: 24px
  }
}

.document-toc h2 {
  display: none
}

@media (min-width:74.9375em) {
  .document-toc h2 {
    display: block;
    font-size: 1.563rem
  }
}

.document-toc .toc-trigger-mobile {
  border: 0;
  color: #005282;
  font-weight: 400;
  padding: 12px 0;
  text-align: left;
  width: 100%
}

@media (min-width:74.9375em) {
  .document-toc .toc-trigger-mobile {
    display: none
  }
}

.document-toc .toc-trigger-mobile:before {
  background: transparent url("") 0 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  transition: -webkit-transform .2s ease-in;
  transition: transform .2s ease-in;
  transition: transform .2s ease-in, -webkit-transform .2s ease-in;
  vertical-align: sub;
  width: 16px
}

@media (min-width:74.9375em) {
  .document-toc .toc-trigger-mobile:before {
    display: none
  }
}

.document-toc .toc-trigger-mobile[aria-expanded=true]:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.document-toc ul {
  background-color: #fff;
  border: 2px solid #005282;
  display: none;
  list-style: none;
  padding: 0 24px;
  position: absolute;
  top: 65px;
  z-index: 300
}

@media (min-width:74.9375em) {
  .document-toc ul {
    background-color: inherit;
    border: 0;
    display: block;
    padding-left: 0;
    position: inherit;
    top: inherit;
    width: auto;
    z-index: inherit
  }
}

.document-toc ul li {
  line-height: 1.2;
  margin: 20px 0
}

@media (min-width:74.9375em) {
  .document-toc ul li {
    margin: 10px 0
  }
}

.document-toc .show-toc {
  display: block
}

.sidebar {
  font-size: .9rem;
  padding: 24px
}

.sidebar h4 {
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  font-size: 1.563rem;
  margin-bottom: 24px
}

.sidebar ol {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%
}

@media (min-width:47.9385em) {

  .sidebar ol ol,
  .sidebar ol ul {
    padding-left: 12px
  }
}

.sidebar li,
.sidebar summary {
  margin-bottom: 12px
}

.sidebar a {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto
}

.sidebar code {
  background-color: transparent
}

.sidebar summary {
  cursor: pointer
}

.sidebar details {
  margin: 24px 0
}

.sidebar .icon {
  background-size: 18px;
  height: 18px;
  width: 18px
}

.sidebar .icon-experimental,
.sidebar .icon-nonstandard {
  color: #005282
}

.sidebar .icon-deprecated {
  color: #a30008
}

.language-menu {
  margin-top: 24px
}

.language-menu fieldset {
  padding: 0
}

.language-menu legend {
  font-size: 1.266rem;
  font-weight: 700
}

@media (min-width:63.9385em) {
  .language-menu legend {
    font-size: 1.563rem
  }
}

.language-menu select {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px
}

@media (min-width:47.9385em) {
  .language-menu select {
    display: inline-block;
    vertical-align: text-top
  }
}

@media (min-width:63.9385em) {
  .language-menu select {
    width: inherit
  }
}

.language-menu .button {
  max-width: inherit
}

.metadata {
  background-color: #f4f4f4;
  margin: 48px 0;
  padding: 24px
}

.metadata-content-container {
  margin: 0 auto;
  max-width: 1400px
}

.metadata-content-container a:link,
.metadata-content-container a:visited {
  text-decoration: underline
}

.metadata-content-container .on-github {
  margin-bottom: 24px
}

.metadata-content-container .on-github ul li {
  margin-bottom: 8px
}

.metadata-content-container .last-modified-date {
  margin-bottom: 0
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }

  50% {
    opacity: .5
  }

  to {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  50% {
    opacity: .5
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes slow-pulse {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes slow-pulse {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.breadcrumb-locale-container {
  align-items: center;
  background-color: #f4f4f4;
  display: flex;
  padding: 12px 24px
}

@media (min-width:63.9385em) {
  .breadcrumb-locale-container {
    margin: 24px 0 0
  }
}

.breadcrumb-locale-container .breadcrumbs-container {
  flex-basis: 80%
}

@media (min-width:47.9385em) {
  .breadcrumb-locale-container .breadcrumbs-container {
    flex-basis: 55%
  }
}

@media (min-width:74.9375em) {
  .breadcrumb-locale-container .breadcrumbs-container {
    flex-basis: 75%
  }
}

.breadcrumb-locale-container .language-toggle {
  flex-basis: 20%
}

@media (min-width:47.9385em) {
  .breadcrumb-locale-container .language-toggle {
    flex-basis: 45%
  }
}

@media (min-width:74.9375em) {
  .breadcrumb-locale-container .language-toggle {
    flex-basis: 25%
  }
}

.breadcrumb-locale-container .breadcrumbs-container:last-child {
  flex-basis: 100%
}

.breadcrumb-locale-container .language-toggle:only-child {
  flex-basis: 100%;
  justify-content: flex-end
}

.notecard {
  border-left: 6px solid #0072b3;
  margin: 0 0 24px;
  padding: 12px
}

.notecard a:link,
.notecard a:visited {
  color: #1b1b1b;
  text-decoration: underline
}

.notecard a:focus,
.notecard a:hover {
  text-decoration: none
}

.notecard h3,
.notecard h4 {
  background-color: inherit;
  color: inherit;
  display: inline-block;
  font-family: arial, x-locale-body, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 6px;
  padding: 0
}

@media (min-width:47.9385em) {

  .notecard h3,
  .notecard h4 {
    font-size: 1.25rem
  }
}

.notecard.inline:before,
.notecard h3:before,
.notecard h4:before {
  background-repeat: no-repeat;
  background-size: 18px;
  content: "";
  display: inline-block;
  height: 21px;
  margin-right: 6px;
  position: relative;
  top: 2px;
  width: 20px
}

.notecard p {
  margin-bottom: 6px
}

.notecard p:last-child {
  margin-bottom: 0
}

.notecard.inline {
  font-weight: 400;
  margin: 6px;
  padding: 3px 6px
}

.notecard.inline:before {
  top: 5px
}

.notecard.inline p {
  display: inline-block;
  margin-bottom: 0
}

.notecard.neutral {
  background-color: #ddeaff;
  color: #005282
}

.notecard.neutral.inline:before,
.notecard.neutral h3:before,
.notecard.neutral h4:before {
  background: transparent url("") 0 0 no-repeat
}

.notecard.success {
  background-color: #d0f1de;
  border-color: #007d50;
  color: #1b1b1b
}

.notecard.success.inline:before,
.notecard.success h3:before,
.notecard.success h4:before {
  background: transparent url("") 0 0 no-repeat
}

.notecard.note {
  background-color: #ddeaff
}

.notecard.note.inline:before,
.notecard.note h3:before,
.notecard.note h4:before {
  background: transparent url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/file.05b73caf.svg") 0 0 no-repeat
}

.notecard.draft,
.notecard.experimental,
.notecard.secure,
.notecard.warning {
  background-color: #fbec74;
  border-color: #cbbd30;
  color: #1b1b1b
}

.notecard.draft.inline:before,
.notecard.draft h3:before,
.notecard.draft h4:before,
.notecard.experimental.inline:before,
.notecard.experimental h3:before,
.notecard.experimental h4:before,
.notecard.secure.inline:before,
.notecard.secure h3:before,
.notecard.secure h4:before,
.notecard.warning.inline:before,
.notecard.warning h3:before,
.notecard.warning h4:before {
  background: transparent url("urn:scrapbook:download:error:https://www.hostcli.com/static/media/exclamation-triangle.d21c8a03.svg") 0 0 no-repeat
}

.notecard.experimental h3:before,
.notecard.experimental h4:before {
  background-image: url("")
}

.notecard.draft h3:before,
.notecard.draft h4:before {
  background-image: url("")
}

.notecard.secure h3:before,
.notecard.secure h4:before {
  background-image: url("")
}

.notecard.deprecated,
.notecard.negative,
.notecard.obsolete {
  background-color: #f8c9ca;
  border-color: #fba3a4;
  color: #1b1b1b
}

.notecard.deprecated.inline:before,
.notecard.deprecated h3:before,
.notecard.deprecated h4:before,
.notecard.negative.inline:before,
.notecard.negative h3:before,
.notecard.negative h4:before,
.notecard.obsolete.inline:before,
.notecard.obsolete h3:before,
.notecard.obsolete h4:before {
  background: transparent url("") 0 0 no-repeat
}

.notecard.deprecated h3:before,
.notecard.deprecated h4:before {
  background-image: url("")
}

.localized-content-note {
  border-left: 0
}

.localized-content-note.inline {
  margin: 0;
  padding: 12px 24px
}

@media (min-width:63.9385em) {
  .main-content {
    margin-top: 24px
  }
}

.only-in-en-us span {
  font-size: .9rem
}

a.page-not-created {
  color: #a30008;
  cursor: not-allowed
}

.main-page-content {
  padding: 12px 24px 24px
}

.main-page-content figure {
  margin-bottom: 24px
}

.main-page-content ul li {
  margin-bottom: 8px
}

.main-page-content .example-bad,
.main-page-content .example-good {
  padding: 0 24px;
  position: relative
}

.main-page-content .example-bad:after,
.main-page-content .example-good:after {
  background-size: 24px;
  content: "";
  display: block;
  height: 24px;
  position: absolute;
  right: 13px;
  top: 3px;
  width: 24px
}

.main-page-content .example-bad:after {
  background-color: #a30008;
  -webkit-mask-image: url("");
  mask-image: url("")
}

.main-page-content .example-good:after {
  background-color: #002011;
  -webkit-mask-image: url("");
  mask-image: url("")
}

.main-page-content .code-example {
  position: relative
}

.main-page-content .code-example .copy-icon {
  background: #f4f4f4 url("") 50% no-repeat;
  background-position: 61% 45%;
  background-size: 16px;
  border: 1px solid #f4f4f4;
  border-radius: 6px;
  cursor: pointer;
  height: 36px;
  margin: 0;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 8px;
  vertical-align: middle;
  width: 33px;
  z-index: 100
}

@media (min-width:74.9375em) {
  .main-page-content .code-example .copy-icon {
    opacity: .4
  }

  .main-page-content .code-example .copy-icon:focus,
  .main-page-content .code-example .copy-icon:hover {
    background-color: #d5d5d5;
    opacity: 1
  }
}

.main-page-content .code-example .copy-icon-message {
  background: #1b1b1b;
  border-radius: 6px;
  color: #fff;
  display: none;
  font-size: .9rem;
  opacity: 1;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 15px;
  z-index: 100
}

.main-page-content .code-example:focus .copy-icon,
.main-page-content .code-example:hover .copy-icon {
  opacity: 1
}

.main-page-content .code-example .show {
  display: block
}

.main-page-content .code-example .example-bad,
.main-page-content .code-example .example-good {
  padding: 24px
}

.main-page-content .code-example .example-bad:after,
.main-page-content .code-example .example-good:after {
  right: 44px;
  top: 13px
}

@media (min-width:63.9385em) {
  .main-page-content {
    margin-bottom: 48px;
    padding: 0 24px 24px
  }
}

.main-page-content h1 {
  word-break: break-word
}

.main-page-content h2,
.main-page-content h3,
.main-page-content h4,
.main-page-content h5 {
  margin-top: 0
}

.main-page-content dl,
.main-page-content ol,
.main-page-content p,
.main-page-content ul {
  max-width: 45rem;
  max-width: 85ch
}

.main-page-content a {
  text-decoration: underline
}

.main-page-content a:focus,
.main-page-content a:hover {
  text-decoration: none
}

.main-page-content a:active {
  background-color: #005282;
  color: #fff
}

.main-page-content a:active code {
  background-color: transparent
}

.main-page-content a[id^=attr-]:link,
.main-page-content a[id^=attr-]:visited {
  color: #1b1b1b;
  text-decoration: none
}

.main-page-content a[id^=attr-]:focus,
.main-page-content a[id^=attr-]:hover {
  text-decoration: underline
}

.main-page-content a[id^=attr-]:active {
  color: #fff
}

.main-page-content [aria-current] {
  color: #1b1b1b;
  font-weight: 700;
  text-decoration: none
}

.main-page-content h2,
.main-page-content h3 {
  margin-bottom: 12px
}

.main-page-content h2 a:link,
.main-page-content h2 a:visited,
.main-page-content h3 a:link,
.main-page-content h3 a:visited {
  color: #1b1b1b;
  text-decoration: none
}

.main-page-content h2 a:focus,
.main-page-content h2 a:hover,
.main-page-content h3 a:focus,
.main-page-content h3 a:hover {
  color: #1b1b1b;
  text-decoration: underline
}

.main-page-content h2 a:active,
.main-page-content h3 a:active {
  background-color: transparent
}

.main-page-content table {
  margin-bottom: 48px
}

.main-page-content .inline.optional,
.main-page-content .inline.readonly {
  background-color: #f4f4f4
}

@media (min-width:47.9385em) {

  .main-page-content .prev-next,
  .main-page-content .prevnext {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px
  }
}

.main-page-content .prev-next a.button,
.main-page-content .prevnext a.button {
  margin-bottom: 12px;
  max-width: inherit
}

@media (min-width:47.9385em) {

  .main-page-content .prev-next a.button,
  .main-page-content .prevnext a.button {
    margin-bottom: inherit
  }
}

.main-page-content .index {
  -webkit-columns: 300px;
  columns: 300px;
  margin-bottom: 24px
}

@media (min-width:63.9385em) {
  .main-page-content .index {
    margin-bottom: 48px
  }
}

.main-page-content .index .icon-experimental,
.main-page-content .index .icon-nonstandard {
  color: #005282
}

.main-page-content .index .icon-deprecated {
  color: #a30008
}

.main-page-content iframe {
  max-width: 100%
}

.main-page-content iframe:not(.sample-code-frame) {
  border: 0
}

.interactive {
  background-color: #f4f4f4;
  border: 1px solid #d5d5d5;
  color: #1b1b1b;
  padding: 10px;
  width: 100%
}

.a11y-nav {
  position: absolute;
  top: -20em;
  width: 100%;
  z-index: 300
}

.a11y-nav a {
  background-color: hsla(0, 0%, 100%, .9);
  font-weight: 700;
  left: 0;
  padding: 12px;
  position: absolute;
  right: 0;
  text-align: center
}

.a11y-nav a:focus,
.a11y-nav a:hover {
  box-shadow: 3px 3px 5px #f4f4f4;
  text-decoration: none;
  top: 20em
}

.logo {
  display: block;
  height: 35px;
  width: 170px
}

@media (min-width:47.9385em) {
  .logo {
    height: 55px;
    width: 200px
  }
}

@media (min-width:74.9375em) {
  .logo {
    flex-basis: 250px;
    height: inherit
  }
}

.page-footer-logo {
  margin-bottom: 24px
}

.page-footer {
  background-color: #1b1b1b;
  color: #fff;
  padding: 48px 24px;
  position: relative;
  z-index: 9999
}

.page-footer .content-container {
  margin: 0 auto;
  max-width: 1400px
}

.page-footer a {
  color: #fff
}

.page-footer ul a {
  display: block;
  padding: 10px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.page-footer .social {
  align-items: center;
  display: flex
}

.page-footer .social h4 {
  font-size: 1.25rem;
  font-weight: 400;
  margin: inherit;
  margin-right: 10px
}

.page-footer .social li {
  display: inline-block;
  margin-right: 10px
}

.page-footer .social ul {
  -webkit-padding-start: 6px;
  padding-inline-start: 6px
}

.page-footer .social-icon:before {
  background-size: 18px;
  content: "";
  display: inline-block;
  -webkit-filter: invert(1);
  filter: invert(1);
  height: 18px;
  vertical-align: sub;
  width: 18px
}

.page-footer .twitter:before {
  background: transparent url("") 0 0 no-repeat
}

.page-footer .github:before {
  background: transparent url("") 0 0 no-repeat
}

.page-footer .instagram:before {
  background: transparent url("") 0 0 no-repeat
}

.page-footer .footer-license {
  margin: 10px 0
}

@media (min-width:47.9385em) {
  .page-footer .footer-license {
    border-top: 1px solid #f4f4f4;
    margin: 50px 0 30px;
    padding: 30px 0 0
  }
}

@media (min-width:47.9385em) {
  .page-footer .footer-legal {
    padding-bottom: 20px
  }
}

.page-footer .footer-legal li {
  display: inline-block
}

.page-footer .footer-legal a {
  display: block;
  padding: 0 20px 0 0
}

@supports(display:grid) {
  .content-container {
    display: grid
  }

  .content-container .footer-legal,
  .content-container .footer-license,
  .content-container .link-list-mdn,
  .content-container .link-list-moz,
  .content-container .page-footer-logo {
    grid-column: 1/3
  }

  .content-container .page-footer-logo {
    grid-row: 1/2
  }

  .content-container .link-list-mdn {
    grid-row: 2/3
  }

  @media (min-width:47.9385em) {
    .content-container .link-list-mdn {
      grid-column: 1/2
    }
  }

  .content-container .link-list-moz {
    grid-row: 3/4
  }

  @media (min-width:47.9385em) {
    .content-container .link-list-moz {
      grid-column: 2/3;
      grid-row: 2/3
    }
  }

  .content-container .social-mdn {
    grid-column: 1/2;
    grid-row: 4/5
  }

  .content-container .social-moz {
    grid-column: 2/3;
    grid-row: 4/5
  }

  .content-container .footer-license {
    grid-row: 6/7
  }

  .content-container .footer-legal {
    grid-row: 7/8
  }
}

ul.main-menu {
  background-color: #fff;
  box-sizing: border-box;
  font-weight: 700;
  width: 100%
}

@media (min-width:47.9385em) {
  ul.main-menu {
    display: flex;
    justify-content: space-between;
    width: inherit
  }

  ul.main-menu li:last-child {
    flex-basis: inherit
  }
}

@media (min-width:74.9375em) {
  ul.main-menu {
    justify-content: space-around
  }

  ul.main-menu li {
    flex-basis: inherit
  }
}

ul.main-menu li ul {
  background-color: #fff;
  display: none;
  margin: 0;
  padding: 6px 0
}

@media (min-width:47.9385em) {
  ul.main-menu li ul {
    border: 1px solid #a4a4a4;
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 #8a8a8a
  }
}

ul.main-menu li ul a {
  display: block;
  padding: 6px 16px;
  width: 100%
}

ul.main-menu li ul a:focus,
ul.main-menu li ul a:hover {
  background-color: #0072b3;
  color: #fff;
  text-decoration: none;
  outline: none
}

@media (min-width:47.9385em) {
  ul.main-menu li ul a {
    width: unset
  }
}

ul.main-menu li ul li {
  width: 100%
}

@media (min-width:47.9385em) {
  ul.main-menu li ul li {
    width: unset
  }
}

ul.main-menu .top-level-entry-container {
  position: relative
}

ul.main-menu ul.show {
  display: block
}

@media (min-width:47.9385em) {
  ul.main-menu ul.show {
    min-width: 220px;
    min-width: -webkit-max-content;
    min-width: max-content;
    position: absolute;
    top: 45px;
    z-index: 300
  }
}

ul.main-menu .top-level-entry {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 10px 15px 0;
  text-align: left;
  width: 100%
}

@media (min-width:47.9385em) {
  ul.main-menu .top-level-entry {
    padding: 12px 12px 12px 0;
    width: unset
  }
}

ul.main-menu .top-level-entry:before {
  background: transparent url("") 0 0 no-repeat;
  background-size: 12px;
  content: "";
  display: inline-block;
  font-size: .75rem;
  height: 12px;
  margin-right: 6px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 12px
}

ul.main-menu .top-level-entry[aria-expanded=true]:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

ul.main-menu.show {
  display: block
}

@media (min-width:47.9385em) {
  ul.main-menu.show {
    display: flex
  }
}

@media (min-width:47.9385em) {

  ul.main-menu.nojs .top-level-entry-container:focus ul,
  ul.main-menu.nojs .top-level-entry-container:hover ul {
    min-width: 220px;
    min-width: -webkit-max-content;
    min-width: max-content;
    position: absolute;
    top: 45px;
    z-index: 300;
    display: block
  }

  .feedback {
    right: 0
  }
}

@media (min-width:47.9385em)and (min-width:74.9375em) {
  .feedback {
    right: inherit
  }
}

@media (min-width:47.9385em) {
  .page-overlay {
    display: none
  }
}

.header-search {
  background-color: #fff
}

@media (min-width:47.9385em) {
  .header-search {
    height: 40px;
    min-width: 80px;
    width: inherit
  }
}

.header-search .search-widget {
  margin: 24px 0;
  position: relative;
  width: 100%
}

@media (min-width:47.9385em) {
  .header-search .search-widget {
    margin: 12px 0;
    min-width: 80px
  }
}

@media (min-width:74.9375em) {
  .header-search .search-widget {
    margin: 0
  }
}

.header-search input.search-input-field {
  border: 2px solid #1b1b1b;
  color: #1b1b1b;
  min-width: 60px;
  padding: 6px 12px;
  width: 100%
}

.header-search .server-error {
  color: #a30008;
  font-size: .9rem;
  margin: 0
}

.header-search .search-results {
  background-color: #fff;
  border: 2px solid #1b1b1b;
  border-radius: 0 0 6px 6px;
  border-top: 0;
  box-shadow: 0 2px 8px 0 #8a8a8a;
  left: 0;
  position: absolute;
  top: 42px;
  width: 100%;
  z-index: 300
}

.header-search .search-results .indexing-warning {
  color: #b4a700
}

.header-search .search-results div {
  padding: 6px
}

.header-search .search-results .nothing-found {
  font-style: italic
}

.header-search .search-results .fuzzy-engaged {
  font-size: .75rem
}

.header-search .search-results .result-item {
  border-bottom: 1px solid #f4f4f4;
  word-break: break-word
}

.header-search .search-results .result-item.highlight,
.header-search .search-results .result-item:hover {
  background-color: #f4f4f4
}

.header-search .search-results .result-item:focus,
.header-search .search-results .result-item:hover {
  cursor: pointer
}

.header-search .search-results div:last-child {
  border-bottom: 0
}

.header-search .search-results mark {
  background-color: #e6d75b
}

.header-search .search-results small {
  overflow-wrap: break-word
}

.header-search .search-results a {
  text-overflow: ellipsis
}

.header-search .search-results div.searchindex-error {
  color: #a30008
}

.search-form {
  position: relative
}

input.search-input-field {
  -webkit-appearance: none;
  border-width: 0;
  padding: 6px 36px 6px 12px
}

input.search-input-field:focus,
input.search-input-field:invalid {
  box-shadow: none;
  outline: none
}

.search-button {
  background: #fff url("") 0 0 no-repeat;
  height: 21px;
  padding: 12px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 21px
}

.search-button:active {
  background-color: transparent
}

.main-menu-toggle {
  background: none;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 24px
}

.main-menu-toggle:before {
  background: transparent url("") 0 0 no-repeat;
  background-size: 21px;
  content: "";
  display: block;
  height: 21px;
  width: 21px
}

.main-menu-toggle.expanded:before {
  background-image: url("")
}

@media (min-width:47.9385em) {
  .main-menu-toggle {
    display: none
  }
}

.page-header {
  margin: 0 auto;
  max-width: 1400px;
  padding: 36px 24px 24px;
  position: relative;
  width: 100%
}

@media (min-width:47.9385em) {
  .page-header {
    display: flex;
    flex-flow: column;
    padding-bottom: 12px
  }
}

@media (min-width:74.9375em) {
  .page-header {
    flex-flow: row
  }
}

.page-header-main {
  background-color: #fff;
  display: none;
  left: 0;
  padding: 0 24px 24px;
  position: absolute;
  top: 90px;
  width: 100%;
  z-index: 9999
}

@media (min-width:47.9385em) {
  .page-header-main {
    display: block;
    grid-template-columns: 70% 30%;
    left: inherit;
    padding: 0;
    position: relative;
    top: inherit;
    z-index: inherit
  }

  @supports(display:grid) {
    .page-header-main {
      align-items: center;
      display: grid
    }
  }
}

@media (min-width:74.9375em) {
  .page-header-main {
    grid-template-columns: 2fr 1fr
  }
}

.page-header-main .header-search,
.page-header-main .main-nav {
  grid-column: 1/2
}

.page-header-main .main-nav {
  grid-row: 2/3
}

.page-header-main .header-search {
  grid-row: 1/2
}

@media (min-width:47.9385em) {
  .page-header-main .main-nav {
    grid-column: 1/3;
    grid-row: 1/2
  }

  .page-header-main .header-search {
    grid-column: 1/2;
    grid-row: 2/3
  }
}

@media (min-width:74.9375em) {

  .page-header-main .header-search,
  .page-header-main .main-nav {
    grid-row: 1/2
  }

  .page-header-main .main-nav {
    grid-column: 1/2
  }

  .page-header-main .header-search {
    grid-column: 2/3
  }
}

.show {
  display: block
}

@supports(display:grid) {
  .show {
    display: grid
  }
}

.site-search {
  min-height: 500px
}

.query-string {
  font-style: italic
}

.page-not-found p {
  margin-top: 50px
}

.page-not-found .fallback-document p {
  margin-top: 12px
}

.page-not-found .fallback-document .fallback-link {
  font-size: 1.25rem
}

/*# sourceMappingURL=main.64e7220c.chunk.css.map */