style.css

code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
#scrollBtn {
  position: fixed;  bottom: 20px;  right: 30px;  z-index: 99;  border: none;  outline: none;  background-color: red;  color: white;  cursor: pointer;  padding: 15px;  border-radius: 10px;  font-size: 18px}
/* Code blocks */
pre[class*="language-"] {
  padding: 0.8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}

pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%, 0.08);
  background: linear-gradient(
    to right,
    hsla(24, 20%, 50%, 0.1) 70%,
    hsla(24, 20%, 50%, 0)
  );
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before,
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: 0.4em;
  left: 0.6em;
  min-width: 1em;
  padding: 0 0.5em;
  background-color: hsla(24, 20%, 50%, 0.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: 0.3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: 0.4em;
}

html body {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  overflow: initial;
  box-sizing: border-box;
  word-wrap: break-word;
}

html body > :first-child {
  margin-top: 0;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 16px;
  color: #000;
}

html body h1 {
  font-size: 2.25em;
  font-weight: 300;
  padding-bottom: 0.3em;
}

html body h2 {
  font-size: 1.75em;
  font-weight: 400;
  padding-bottom: 0.3em;
}

html body h3 {
  font-size: 1.5em;
  font-weight: 500;
}

html body h4 {
  font-size: 1.25em;
  font-weight: 600;
}

html body h5 {
  font-size: 1.1em;
  font-weight: 600;
}

html body h6 {
  font-size: 1em;
  font-weight: 600;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5 {
  font-weight: 600;
}

html body h5 {
  font-size: 1em;
}

html body h6 {
  color: #5c5c5c;
}

html body strong {
  color: #000;
}

html body del {
  color: #5c5c5c;
}

html body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

html body a {
  color: #08c;
  text-decoration: none;
}

html body a:hover {
  color: #00a3f5;
  text-decoration: none;
}

html body img {
  max-width: 100%;
}

html body > p {
  margin-top: 0;
  margin-bottom: 16px;
  word-wrap: break-word;
}

html body > ul,
html body > ol {
  margin-bottom: 16px;
}

html body ul,
html body ol {
  padding-left: 2em;
}

html body ul.no-list,
html body ol.no-list {
  padding: 0;
  list-style-type: none;
}

html body ul ul,
html body ul ol,
html body ol ol,
html body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

html body li {
  margin-bottom: 0;
}

html body li.task-list-item {
  list-style: none;
}

html body li > p {
  margin-top: 0;
  margin-bottom: 0;
}

html body .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.8em;
  vertical-align: middle;
}

html body .task-list-item-checkbox:hover {
  cursor: pointer;
}

html body blockquote {
  margin: 16px 0;
  font-size: inherit;
  padding: 0 15px;
  color: #5c5c5c;
  background-color: #f0f0f0;
  border-left: 4px solid #d6d6d6;
}

html body blockquote > :first-child {
  margin-top: 0;
}

html body blockquote > :last-child {
  margin-bottom: 0;
}

html body hr {
  height: 4px;
  margin: 32px 0;
  background-color: #d6d6d6;
  border: 0 none;
}

html body table {
  margin: 10px 0 15px 0;
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

html body table th {
  font-weight: bold;
  color: #000;
}

html body table td,
html body table th {
  border: 1px solid #d6d6d6;
  padding: 6px 13px;
}

html body dl {
  padding: 0;
}

html body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

html body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

html body code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.85em !important;
  color: #000;
  background-color: #f0f0f0;
  border-radius: 3px;
  padding: 0.2em 0;
}

html body code::before,
html body code::after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

html body pre > code {
  padding: 0;
  margin: 0;
  font-size: 0.85em !important;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

html body .highlight {
  margin-bottom: 16px;
}

html body .highlight pre,
html body pre {
  padding: 1em;
  overflow: auto;
  font-size: 0.85em !important;
  line-height: 1.45;
  border: #d6d6d6;
  border-radius: 3px;
}

html body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

html body pre code,
html body pre tt {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

html body pre code:before,
html body pre tt:before,
html body pre code:after,
html body pre tt:after {
  content: normal;
}

html body p,
html body blockquote,
html body ul,
html body ol,
html body dl,
html body pre {
  margin-top: 0;
  margin-bottom: 16px;
}

html body kbd {
  color: #000;
  border: 1px solid #d6d6d6;
  border-bottom: 2px solid #c7c7c7;
  padding: 2px 4px;
  background-color: #f0f0f0;
  border-radius: 3px;
}

@media print {
  html body {
    background-color: #fff;
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body h5,
  html body h6 {
    color: #000;
    page-break-after: avoid;
  }

  html body blockquote {
    color: #5c5c5c;
  }

  html body pre {
    page-break-inside: avoid;
  }

  html body table {
    display: table;
  }

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

  html body pre,
  html body code {
    word-wrap: break-word;
    white-space: pre;
  }
}

.markdown-preview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.markdown-preview .pagebreak,
.markdown-preview .newpage {
  page-break-before: always;
}

.markdown-preview pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

.markdown-preview pre.line-numbers > code {
  position: relative;
}

.markdown-preview pre.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1em;
  font-size: 100%;
  left: 0;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

.markdown-preview .mathjax-exps .MathJax_Display {
  text-align: center !important;
}

.markdown-preview:not([for="preview"]) .code-chunk .btn-group {
  display: none;
}

.markdown-preview:not([for="preview"]) .code-chunk .status {
  display: none;
}

.markdown-preview:not([for="preview"]) .code-chunk .output-div {
  margin-bottom: 16px;
}

.scrollbar-style::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-style::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

.scrollbar-style::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(150, 150, 150, 0.66);
  border: 4px solid rgba(150, 150, 150, 0.66);
  background-clip: content-box;
}

html body[for="html-export"]:not([data-presentation-mode]) {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}

html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
  position: relative;
  top: 0;
}

@media screen and (min-width: 914px) {
  html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
    padding: 2em calc(50% - 457px + 2em);
  }
}

@media screen and (max-width: 914px) {
  html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
    padding: 2em;
  }
}

@media screen and (max-width: 450px) {
  html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
    font-size: 14px !important;
    padding: 1em;
  }
}

@media print {
  html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
    display: none;
  }
}

html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
  position: fixed;
  bottom: 8px;
  left: 8px;
  font-size: 28px;
  cursor: pointer;
  color: inherit;
  z-index: 99;
  width: 32px;
  text-align: center;
  opacity: 0.4;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  #sidebar-toc-btn {
  opacity: 1;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  padding: 32px 0 48px 0;
  font-size: 14px;
  box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
  box-sizing: border-box;
  overflow: auto;
  background-color: inherit;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar {
  width: 8px;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(150, 150, 150, 0.66);
  border: 4px solid rgba(150, 150, 150, 0.66);
  background-clip: content-box;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  a {
  text-decoration: none;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  ul {
  padding: 0 1.6em;
  margin-top: 0.8em;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  li {
  margin-bottom: 0.8em;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  ul {
  list-style-type: none;
}

html
  body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
  .markdown-preview {
  left: 300px;
  width: calc(100% - 300px);
  padding: 2em calc(50% - 457px - 150px);
  margin: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 1274px) {
  html
    body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
    .markdown-preview {
    padding: 2em;
  }
}

@media screen and (max-width: 450px) {
  html
    body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc]
    .markdown-preview {
    width: 100%;
  }
}

html
  body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc])
  .markdown-preview {
  left: 50%;
  transform: translateX(-50%);
}

html
  body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc])
  .md-sidebar-toc {
  display: none;
}

.breadcrumbs-container,
.document-toc-container,
.language-toggle,
.on-github,
.page-footer,
.page-header-main,
nav.sidebar,
ul.prev-next {
  display: none !important;
}

.main-page-content,
.main-page-content pre {
  padding: 2px;
}

.main-page-content pre {
  border-left-width: 2px;
}

.fancybox-margin {
  margin-right: 0px;
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog,
.token.punctuation {
  color: #626262;
}

.token.namespace {
  opacity: 0.7;
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
  color: #95353a;
}

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

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

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #00458b;
}

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

.token.important,
.token.regex,
.token.variable {
  color: #c25100;
}

.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;
}

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

body {
  font-family: arial, x-locale-body, sans-serif;
  letter-spacing: -0.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(/static/media/ZillaSlab-Bold.subset.0beac26b.woff2) format("woff2"),
    url(/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(/static/media/ZillaSlab-Regular.subset.ce3a756d.woff2)
      format("woff2"),
    url(/static/media/ZillaSlab-Regular.subset.7e4c05c9.woff) format("woff");
}

h1,
h2,
h3 {
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  line-height: 1.2;
  border-radius: 10px;
}

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;
  background-color: #e3d6d6;
  border-radius: 10px;
  color: #fff;
  font-family: zillaslab, palatino, "Palatino Linotype", serif;
  font-weight: 400;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 0 6px;
  margin: 24px 0;
}

@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: 0.9rem;
}

.tiny-text {
  font-size: 0.75rem;
}

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

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

a:link,
a:visited {
  color: #00458b;
  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, #00458b, #83d0f2);
  content: "";
  display: block;
  height: 5px;
  margin-bottom: 12px;
}

blockquote:after {
  margin-top: 12px;
}

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

a {
  color: #00458b;
  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:after {
  background: transparent url(/static/media/external.e091ac5d.svg) 0 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 16px;
  margin-left: 3px;
  width: 16px;
}

.highlighted-link-state {
  background-color: #00458b;
  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: #1e7f9d;
}

.deprecated,
.warning {
  fill: #b49e35;
}

.obsolete {
  fill: #95353a;
}

.callout {
  background-color: #c2e8f9;
  border-radius: 6px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-bottom: 24px;
  max-width: -webkit-max-content;
  max-width: -moz-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: #212121;
}

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

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

.neutral {
  color: #1e7f9d;
}

.warning {
  color: #b49e35;
}

.error {
  color: #95353a;
}

.success {
  color: #276738;
}

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

.notecard a:link,
.notecard a:visited {
  color: #212121;
  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: 12px;
}

.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.success {
  background-color: #ebf8e1;
  border-color: #367b48;
  color: #212121;
}

.notecard.success.inline:before,
.notecard.success h3:before,
.notecard.success h4:before {
  background: transparent url(/static/media/check-mark.41c8922e.svg) 0 0
    no-repeat;
}

.notecard.note {
  background-color: #dcf4ff;
}

.notecard.note.inline:before,
.notecard.note h3:before,
.notecard.note h4:before {
  background: transparent url(/static/media/file.05b73caf.svg) 0 0 no-repeat;
}

.notecard.draft,
.notecard.experimental,
.notecard.secure,
.notecard.warning {
  background-color: #fef1b6;
  border-color: #e1c542;
  color: #212121;
}

.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(/static/media/exclamation-triangle.d21c8a03.svg) 0
    0 no-repeat;
}

.notecard.experimental h3:before,
.notecard.experimental h4:before {
  background-image: url(/static/media/flask.5eb757fe.svg);
}

.notecard.draft h3:before,
.notecard.draft h4:before {
  background-image: url(/static/media/pencil.75d89c00.svg);
}

.notecard.secure h3:before,
.notecard.secure h4:before {
  background-image: url(/static/media/lock.f9055252.svg);
}

.notecard.deprecated,
.notecard.negative,
.notecard.obsolete {
  background-color: #ffbdbd;
  border-color: #d0454c;
  color: #212121;
}

.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(/static/media/trash.181dbb93.svg) 0 0 no-repeat;
}

.notecard.deprecated h3:before,
.notecard.deprecated h4:before {
  background-image: url(/static/media/thumbs-down.41ba190c.svg);
}

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

.badge a {
  color: #212121;
}

.html-version,
.optional,
.readonly {
  border-left: 5px solid #fff;
}

.optional,
.readonly {
  border-color: #212121;
}

.html-version {
  border-color: #367b48;
}

.spec-living,
.spec-standard {
  color: #00458b;
}

.spec-cr,
.spec-pr,
.spec-rec,
.spec-rfc {
  color: #276738;
}

.spec-draft,
.spec-lc,
.spec-wd {
  color: #a14400;
}

.spec-ed,
.spec-obsolete {
  color: #95353a;
}

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

code,
pre {
  background-color: #eee;
}

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

.notranslate code {
  background-color: transparent;
}

.example-bad {
  background-color: #ffeef0;
  border-color: #d0454c;
}

.example-good {
  background-color: #ebf8e1;
  border-color: #529e66;
}

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

table kbd {
  margin: 6px;
}

.button,
a.button {
  background-color: #216b82;
  border: 2px solid #216b82;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-weight: 700;
  max-width: -webkit-max-content;
  max-width: -moz-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: #1e7f9d;
  border-color: #1e7f9d;
}

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

.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: #1e7f9d;
  color: #1e7f9d;
}

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

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

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

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

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

.danger.outline:focus,
.danger.outline:hover,
a.danger.outline:focus,
a.danger.outline:hover {
  background-color: #b54248;
  border-color: #b54248;
  color: #fff;
}

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

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

.positive:focus,
.positive:hover,
a.positive:focus,
a.positive:hover {
  background-color: #367b48;
  border-color: #367b48;
}

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

.positive.outline,
a.positive.outline {
  background-color: #fff;
  border-color: #367b48;
  color: #367b48;
}

.positive.outline:focus,
.positive.outline:hover,
a.positive.outline:focus,
a.positive.outline:hover {
  background-color: #367b48;
  border-color: #367b48;
  color: #fff;
}

.positive.outline:active,
a.positive.outline:active {
  background-color: #367b48;
  border-color: #367b48;
}

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

.light:active,
.light:focus,
.light:hover,
a.light:active,
a.light:focus,
a.light:hover {
  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: #212121;
}

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

.inactive,
a.inactive {
  background-color: #c9c9c9;
  border: 2px solid #c9c9c9;
  color: #626262;
  cursor: default;
}

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

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

.minimal,
a.minimal {
  display: inline-block;
  font-size: 0.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: #00458b;
  cursor: pointer;
  text-decoration: underline;
}

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

.ghost:active {
  background-color: #00458b;
  color: #fff;
}

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

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

form .field-note {
  color: #626262;
  font-size: 0.9rem;
}

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

fieldset.bordered {
  border: 1px solid #8e8e8e;
}

legend.highlighted {
  background-color: #212121;
  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 #8e8e8e;
  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: #1e7f9d;
  box-shadow: 1px 1px 1px #1e7f9d;
  outline: 0;
}

[type="email"].valid,
[type="password"].valid,
[type="text"].valid,
[type="url"].valid {
  border-color: #367b48;
  outline: 2px dashed #367b48;
  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 #367b48;
}

[type="email"].invalid,
[type="password"].invalid,
[type="text"].invalid,
[type="url"].invalid {
  border-color: #b54248;
  outline: 2px dashed #b54248;
  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 #b54248;
}

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

table {
  font-size: 0.9rem;
  overflow-x: auto;
}

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

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

table pre {
  background-color: #fff;
}

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

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

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

.properties td,
.properties th {
  background-color: #fafafa;
  border: 0;
  border-top: 2px solid #00458b;
  display: block;
  padding: 12px;
}

@media (min-width: 63.9385em) {
  .properties td,
  .properties th {
    display: table-cell;
  }
}

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

.standard-table {
  width: 100%;
}

@media (min-width: 63.9385em) {
  .standard-table {
    border-left: 6px solid #276738;
  }
}

.standard-table td,
.standard-table th {
  border: 0;
  border-left: 2px solid #fff;
  padding: 12px;
}

.standard-table td,
.standard-table th {
  background-color: #eee;
  border-bottom: 2px solid #fff;
}

.standard-table tr td:first-child,
.standard-table tr th:first-child {
  border-left: 0;
}

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

.page-overlay {
  background-color: rgba(0, 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 #1e7f9d;
  border-left: 6px solid #00458b;
  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(4, auto) -webkit-max-content 1fr;
      grid-template-rows: repeat(4, auto) max-content 1fr;
    }
  }

  .document-page .breadcrumb-locale-container,
  .document-page .document-toc-container,
  .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 .document-toc-container {
    grid-row: 3/4;
  }

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

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

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

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

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

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

@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 #eee;
  margin-bottom: 12px;
}

.blog-feed .post-meta {
  font-size: 0.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 #eee;
  margin-bottom: 12px;
}

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

@media (min-width: 47.9385em) {
  .hero {
    background: #83d0f2 url(/static/media/home-masthead-background.da81e367.svg)
      0 0 repeat;
    background-size: cover;
    padding: 125px 48px 48px;
  }

  .hero:before {
    background: transparent url(/static/media/hero-dino.a7764ae8.png) 0 0
      no-repeat;
    background-size: 245px 200px;
    content: "";
    display: block;
    height: 200px;
    left: calc(50% - 122px);
    position: absolute;
    top: 24px;
    width: 245px;
  }
}

@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: #212121;
  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 #212121;
  color: #212121;
  display: inline-block;
  padding: 12px 0;
  width: 100%;
}

.hero-content a:after {
  background: transparent url(/static/media/arrow.e1de8ede.svg) 0 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 16px;
  position: absolute;
  right: 6px;
  top: 19px;
  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;
  }
}

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

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

.bc-table {
  background-color: #eee;
  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 #212121;
  border-right: 0;
  border-top: 1px solid #212121;
  padding: 6px;
  position: relative;
  text-align: center;
}

.bc-table th {
  background-color: transparent;
  border-left: 0;
  border-right: 1px solid #212121;
  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 #212121;
  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 #212121;
    display: table-cell;
    font-weight: 400;
    overflow: hidden;
    width: 200px;
  }
}

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

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

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

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

.bc-table .new {
  color: #95353a;
}

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

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

.bc-platforms th {
  border-bottom: 2px solid #212121;
  border-left: 1px solid #212121;
  border-right: 1px solid #212121;
  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(/static/media/desktop.ef3ee89a.svg);
}

.bc-platforms .bc-platform-mobile:before {
  background-image: url(/static/media/mobile.70f1afec.svg);
}

.bc-platforms .bc-platform-server:before {
  background-image: url(/static/media/server.ad489c4d.svg);
}

.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(/static/media/asterisk.0770455e.svg);
  content: "";
}

.ic-history:before {
  background-image: url(/static/media/chevron.f472b7ac.svg);
  content: "";
}

.ic-non-standard:before {
  background-image: url(/static/media/exclamation-triangle.d21c8a03.svg);
  content: "";
}

.ic-deprecated:before {
  background-image: url(/static/media/thumbs-down.41ba190c.svg);
  content: "";
}

.ic-experimental:before {
  background-image: url(/static/media/flask.5eb757fe.svg);
  content: "";
}

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

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

.ic-disabled:before {
  background-image: url(/static/media/flag.9056cd9b.svg);
  content: "";
}

.ic-altname:before {
  background-image: url(/static/media/fork.a92d65c0.svg);
  content: "";
}

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

.bc-supports-yes {
  background-color: #ebf8e1;
}

.bc-supports-partial {
  background-color: #ffd9bd;
  background-image: linear-gradient(
    to bottom right,
    rgba(144, 99, 18, 0.2) 0,
    rgba(144, 99, 18, 0.2) 1px,
    transparent 0,
    transparent 67px,
    rgba(144, 99, 18, 0.2) 0,
    rgba(144, 99, 18, 0.2) 73px,
    transparent 0,
    transparent 138px,
    rgba(144, 99, 18, 0.2) 0,
    rgba(144, 99, 18, 0.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: #212121;
}

.bc-supports-no {
  background-color: #ffbdbd;
  background-image: linear-gradient(
      to bottom right,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.1) 1px,
      transparent 0,
      transparent 67px,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.1) 73px,
      transparent 0,
      transparent 138px,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.1) 144px,
      transparent 0
    ),
    linear-gradient(
      to bottom left,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.1) 1px,
      transparent 0,
      transparent 67px,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.1) 73px,
      transparent 0,
      transparent 138px,
      rgba(94, 3, 6, 0.1) 0,
      rgba(94, 3, 6, 0.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: #eee;
}

.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;
  transform: rotate(-90deg);
  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;
  position: absolute;
  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(/static/media/chrome.4c570865.svg);
}

.bc-browsers .bc-head-icon-edge:before,
.bc-browsers .bc-head-icon-edge_mobile:before {
  background-image: url(/static/media/edge.40018f6a.svg);
}

.bc-browsers .bc-head-icon-firefox:before,
.bc-browsers .bc-head-icon-firefox_android:before {
  background-image: url(/static/media/firefox.51d8a59c.svg);
}

.bc-browsers .bc-head-icon-ie:before {
  background-image: url(/static/media/internet-explorer.cf17782c.svg);
}

.bc-browsers .bc-head-icon-opera:before,
.bc-browsers .bc-head-icon-opera_android:before {
  background-image: url(/static/media/opera.a0ab0c50.svg);
}

.bc-browsers .bc-head-icon-safari:before,
.bc-browsers .bc-head-icon-safari_ios:before {
  background-image: url(/static/media/safari.3679eb31.svg);
}

.bc-browsers .bc-head-icon-webview_android:before {
  background-image: url(/static/media/android.7d9bf320.svg);
}

.bc-browsers .bc-head-icon-samsunginternet_android:before {
  background-image: url(/static/media/samsung-internet.6fd7f423.svg);
}

.bc-browsers .bc-head-icon-nodejs:before {
  background-image: url(/static/media/nodejs.bb93afa7.svg);
}

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

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

.bc-history dl {
  display: flex;
  flex-flow: column;
  grid-gap: 24px;
  gap: 24px;
  margin: 20px;
  max-width: 85%;
}

.bc-history .bc-notes-wrapper {
  align-items: center;
  display: flex;
}

.bc-history dt {
  max-height: 48px;
}

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

.bc-history-mobile {
  display: block;
  padding: 12px;
}

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

.bc-history-link {
  display: none;
}

@media (min-width: 47.9385em) {
  .bc-history-link {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-top: 1px solid #212121;
    box-shadow: none;
    color: #212121;
    cursor: pointer;
    display: block;
    font-size: 0.75rem;
    height: 12px;
    margin: 12px 0 0;
    padding: 12px;
    width: 100%;
  }

  .bc-history-link:before {
    background: transparent url(/static/media/triangle.e8097649.svg) 0 0
      no-repeat;
    background-size: 16px;
    content: "";
    display: block;
    height: 16px;
    margin: 0 auto;
    transform: rotate(180deg);
    width: 16px;
  }
}

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

  .bc-history-link:before {
    background-size: 12px;
    height: 12px;
    width: 12px;
  }
}

.bc-history-link-inverse:before {
  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: middle;
}

.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(/static/media/chevron.f472b7ac.svg) 0 0 no-repeat;
  background-size: 12px;
  content: "";
  height: 12px;
  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(/static/media/chevron.f472b7ac.svg) 0 0 no-repeat;
  background-size: auto;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  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: #212121;
}

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(/static/media/language.9e1dde1b.svg) 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: #00458b;
  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(/static/media/triangle.e8097649.svg) 0 0 no-repeat;
  background-size: 16px;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  transform: rotate(90deg);
  transform-origin: 50%;
  transition: transform 0.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 {
  transform: rotate(180deg);
}

.document-toc ul {
  background-color: #fff;
  border: 2px solid #216b82;
  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: 0.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;
}

.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: 6px;
}

@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: #eee;
  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 .last-modified-date {
  margin-bottom: 0;
}

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

  50% {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

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

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

@media (min-width: 47.9385em) {
  .breadcrumb-locale-container {
    margin: 12px 0;
  }
}

@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;
}

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

.main-content.loading-document-placeholder {
  animation: slow-pulse 2s infinite normal;
  fill: #eee;
  min-height: 55vh;
  width: 100%;
}

@media (min-width: 63.9385em) {
  .main-content.loading-document-placeholder {
    grid-column: 1/3;
    margin: 24px auto;
    max-width: 1400px;
    min-height: 75vh;
    width: 50%;
  }
}

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

a.new,
a.page-not-created {
  color: #d0454c;
  cursor: not-allowed;
}

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

@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 h2 code,
.main-page-content h3 code {
  background-color: transparent;
  text-decoration: none;
}

.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: #00458b;
  color: #fff;
}

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

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

@media (min-width: 47.9385em) {
  .main-page-content h2 {
    margin-bottom: 36px;
  }
}

.main-page-content h2 a:link,
.main-page-content h2 a:visited {
  color: #212121;
}

.main-page-content h2 a:active {
  background-color: transparent;
  color: #00458b;
}

.main-page-content h3 a:link,
.main-page-content h3 a:visited {
  color: #fff;
}

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

.main-page-content h2 a:link,
.main-page-content h2 a:visited,
.main-page-content h3 a:link,
.main-page-content h3 a:visited,
.main-page-content h4 a:link,
.main-page-content h4 a:visited {
  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,
.main-page-content h4 a:focus,
.main-page-content h4 a:hover {
  text-decoration: underline;
}

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

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

@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;
}

.main-page-content iframe {
  border: 0;
  height: 800px !important;
  width: 800px !important;
}

.archived {
  background-color: #fef1b6;
  padding: 6px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
}

.archived p {
  margin: 0;
}

.interactive {
  background-color: #eee;
  border: 1px solid #eaf2f4;
  color: #212121;
  height: 550px;
  padding: 10px;
  width: 100%;
}

@media (min-width: 63.9385em) {
  .interactive {
    height: 390px;
  }
}

.interactive.interactive-js {
  height: 490px;
}

.interactive.taller {
  height: 692px;
}

.interactive.shorter {
  height: 410px;
}

.interactive.tabbed {
  height: 430px;
}

.no-js .interactive {
  background-color: #f8f8f8;
  height: 240px;
}

.interactive.tabbed-shorter {
  height: 375px;
}

.interactive.tabbed-standard {
  height: 445px;
}

.interactive.tabbed-taller {
  height: 655px;
}

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

.a11y-nav a {
  background-color: hsla(0, 0%, 100%, 0.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 #eee;
  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: #212121;
  color: #fff;
  padding: 48px 24px;
}

.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 svg {
  height: 18px;
  vertical-align: sub;
  width: 18px;
}

.page-footer .social svg path {
  fill: #fff;
}

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

@media (min-width: 47.9385em) {
  .page-footer .footer-license {
    border-top: 1px solid #eee;
    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;
  }
}

.dropdown-container {
  position: relative;
}

.dropdown-container .dropdown-menu-label {
  align-items: center;
  border: 0;
  color: #212121;
  display: flex;
  flex-direction: row;
  font-weight: 700;
  padding: 0;
  white-space: nowrap;
}

.dropdown-container .dropdown-menu-items {
  background-color: #fff;
  display: none;
  flex-direction: column;
  margin: 12px 0;
  min-width: 100%;
}

@media (min-width: 47.9385em) {
  .dropdown-container .dropdown-menu-items {
    border: 1px solid #8e8e8e;
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 #c9c9c9;
    position: absolute;
    right: 0;
    z-index: 300;
  }
}

.dropdown-container .dropdown-menu-items a,
.dropdown-container .dropdown-menu-items button {
  color: #212121;
  display: inline-block;
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.dropdown-container .dropdown-menu-items a:focus,
.dropdown-container .dropdown-menu-items a:hover,
.dropdown-container .dropdown-menu-items button:focus,
.dropdown-container .dropdown-menu-items button:hover {
  background-color: #1e7f9d;
  color: #fff;
  text-decoration: none;
}

.dropdown-container .show {
  display: block;
}

.auth-container {
  margin-top: 12px;
}

@media (min-width: 74.9375em) {
  .auth-container {
    margin-top: 0;
  }
}

.avatar {
  border-radius: 50%;
  height: 40px;
  pointer-events: none;
  width: 40px;
}

.avatar-username {
  margin-left: 6px;
}

@media (min-width: 74.9375em) {
  .avatar-username {
    display: none;
  }
}

a.signin-link {
  color: #212121;
  font-weight: 700;
}

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 #8e8e8e;
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 #c9c9c9;
  }
}

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: #1e7f9d;
  color: #fff;
  text-decoration: 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: -moz-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(/static/media/triangle.e8097649.svg) 0 0 no-repeat;
  background-size: 12px;
  content: "";
  display: inline-block;
  font-size: 0.75rem;
  height: 12px;
  margin-right: 6px;
  transform: rotate(90deg);
  width: 12px;
}

ul.main-menu .top-level-entry[aria-expanded="true"]:before {
  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: -moz-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 #212121;
  color: #212121;
  min-width: 60px;
  padding: 6px 12px;
  width: 100%;
}

.header-search .server-error {
  color: #95353a;
  font-size: 0.9rem;
  margin: 0;
}

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

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

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

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

.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: #e1c542;
}

.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: #95353a;
}

.search-form {
  position: relative;
}

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

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

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

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

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

.main-menu-toggle.expanded:before {
  background-image: url(/static/media/menu-close.4a632075.svg);
}

@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 {
      display: grid;
      align-items: center;
    }
  }
}

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

.page-header-main .auth-container,
.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;
}

.page-header-main .auth-container {
  grid-row: 3/4;
}

@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;
  }

  .page-header-main .auth-container {
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: flex-end;
  }
}

@media (min-width: 74.9375em) {
  .page-header-main .auth-container,
  .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;
  }

  .page-header-main .auth-container {
    grid-column: 3/4;
  }
}

.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;
}

.mdn-cta-container {
  display: none;
}

@media (min-width: 47.9385em) {
  .mdn-cta-container {
    background-image: linear-gradient(90deg, #83d0f2, #ebf8e1);
    bottom: 0;
    display: block;
    height: 190px;
    padding: 24px;
    position: fixed;
    width: 100%;
    z-index: 9999;
  }

  .mdn-cta-container .mdn-cta-title {
    margin: 0;
    position: relative;
  }

  .mdn-cta-container .mdn-cta-title h2 {
    background-color: #212121;
    color: #fff;
    display: inline-block;
    font-size: 1.953rem;
    font-weight: 400;
    padding: 0 12px;
  }

  .mdn-cta-container .mdn-cta-copy {
    margin: 12px 0;
  }
}

@media (min-width: 47.9385em) and (min-width: 74.9375em) {
  .mdn-cta-container .mdn-cta-copy {
    margin-bottom: 0;
  }
}

@media (min-width: 47.9385em) {
  .mdn-cta-container .button {
    border: 2px solid #212121;
  }

  .mdn-cta-container .button:active,
  .mdn-cta-container .button:focus,
  .mdn-cta-container .button:hover {
    border: 2px solid #212121;
    background-color: #212121;
    color: #fff;
  }
}

@media (min-width: 47.9385em) {
  .mdn-cta-container .mdn-cta-close {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

@media (min-width: 63.9385em) {
  .mdn-cta-container {
    height: 150px;
    padding: 0 24px;
  }

  .mdn-cta-container .mdn-cta-content {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 1400px;
  }

  .mdn-cta-container .mdn-cta-content-container {
    display: flex;
    flex-basis: 80%;
    flex-flow: column;
  }
}

.mdn-cta-container .mdn-cta-button-container {
  position: relative;
}

@media (min-width: 63.9385em) {
  .mdn-cta-container .mdn-cta-button-container {
    flex-basis: 20%;
    margin: 0;
  }
}

/*# sourceMappingURL=main.1218d9f5.chunk.css.map */