:root {
  --background: #fafafa;
  --background-main: white;
  --background-nav: #efeded;
  --background-paper: #eee;
  --background-input: white;
  --background-warning: #ffbfbd;
  --background-assertion: #f5f5f5;
  --foreground: black;
  --border: #999;
  --border-search: #363636;
  --border-input: #ccc;
  --main: #00cc21;
  --link: #2f6fad;
  --link-warning: #0a5297;
  --support-no-background: #b94a48;
  --support-no-foreground: #fff;
  --support-yes-background: #03a678;
  --support-yes-foreground: #000;
  --support-partial-background: #e9c906;
  --support-partial-foreground: #000;
  --support-unknown-background: #e7e7e7;
  --support-unknown-foreground: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --background-main: black;
    --background-nav: #151212;
    --background-paper: #111;
    --background-input: #303030;
    --background-warning: #420200;
    --background-assertion: #0a0a0a;
    --foreground: white;
    --border: #666;
    --border-search: #c9c9c9;
    --border-input: #333;
    --link: #50a3f4;
    --link-warning: #50a3f4;
  }
}

html {
  background-color: var(--background);
  color: var(--foreground);
}
body {
  padding: 0;
  margin: 0;
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: var(--link);
}

main:focus:not(.show-focus-outline) {
  outline: none;
}

td.support-case {
  color: var(--foreground);
  text-align: center;
  min-width: 5em;
  max-width: 5em;
}

td.support-case a {
  color: inherit;
}
td.support-case.n, td.support-case.no, .expectation-summary .no {
  background-color: var(--support-no-background);
  color: var(--support-no-foreground);
}
td.support-case.y, td.support-case.ye, .expectation-summary .ye {
  background-color: var(--support-yes-background);
  color: var(--support-yes-foreground);
}
td.support-case.p, td.support-case.pa, .expectation-summary .pa,
td.support-case.k, td.support-case.kn, .expectation-summary .kn {
  background-color: var(--support-partial-background);
  color: var(--support-partial-foreground);
}
td.support-case.u, td.support-case.un, .expectation-summary .un {
  background-color: var(--support-unknown-background);
  color: var(--support-unknown-foreground);
}

span.output-result {
  padding: .1em .25em;
}
span.output-result.fail {
  background-color: var(--support-no-background);
  color: var(--support-no-foreground);
}
span.output-result.pass {
  background-color: var(--support-yes-background);
  color: var(--support-yes-foreground);
}
span.output-result.partial {
  background-color: var(--support-partial-background);
  color: var(--support-partial-foreground);
}
span.output-result.unknown {
  background-color: var(--support-unknown-background);
  color: var(--support-unknown-foreground);
}

table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

table, td, th {
  border: 1px solid var(--border);
}

td {
  padding: .2em;
}

th {
  text-align: left;
}

th, td {
  padding: .25em .25em;
}

th {
  background-color: var(--background-paper);
}

thead th {
  text-align: center;
}

input {
  background-color: var(--background-input);
  color: var(--foreground);
  border: 1px solid var(--border);
}


/* CSS GRID LAYOUT */
.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
  line-height: 1.5em;
}


main, header, footer {
  max-width: calc(5vw * 2 + 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 5vw;
  padding-right: 5vw;
}

main {
  display: block;
  min-height: 15em;
  padding-bottom: 1em;
}

header {
  padding-top: .25em;
}

main, header {
  background-color: var(--background-main);
}

body {
  border-top: 4px solid var(--main);
}

.site-title {
  font-size: 2em;
}

nav {
  background-color: var(--background-nav);
}

nav ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  max-width: 40em;
  margin-bottom: 0;
  flex-wrap: wrap;
}

nav ul li {
  margin: 0;
  padding: .5em;
}

nav ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.content-wrapper {
  display: block;
}

@media (min-width: 1441px) {
  .content-wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    grid-template-areas:"content sidebar";
  }
}

footer {
  border-top: 2px solid var(--border);
}

.beta-warning {
  background-color: var(--background-warning);
  width: 100%;
  padding: .5em;
  box-sizing: border-box;
}

.beta-warning a, .beta-warning a:visited {
  color: var(--link-warning);
}

.beta-warning > p {
  margin-top: 0;
  margin-bottom: 0;
}

/* caution */

.caution {
  border-left: .5em solid var(--support-partial-background);
  width: 100%;
  padding: .5em;
  box-sizing: border-box;
}

.caution p {
  margin-top: 0;
  margin-bottom: 0;
}

.caution h3 {
  margin-top: 0;
}

.current-support-container {
  padding: .25em .5em;
  background-color: var(--background-nav);
  border-radius: .2em;
}

.current-support-container p {
  margin: 0;
}

.current-support-container.ye, .support-case.yes {
  background-color: var(--support-yes-background);
  color: var(--support-yes-foreground);
}

.current-support-container.no, .support-case.no {
  background-color: var(--support-no-background);
  color: var(--support-no-foreground);
}

.current-support-container.pa, .support-case.pa,
.current-support-container.kn, .support-case.kn {
  background-color: var(--support-partial-background);
  color: var(--support-partial-foreground);
}

.current-support-container.un, .support-case.un {
  background-color: var(--support-unknown-background);
  color: var(--support-unknown-foreground);
}

.skip-nav {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}

a.skip-nav:active,
a.skip-nav:focus,
a.skip-nav:hover {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  background-color: var(--background);
  padding:1em;
}

a.back {
  display: block;
  margin-bottom: 1em;
}

p.note, .call-out {
  background-color: var(--background-paper);
  padding: .25em .5em;
  margin-top: .25em;
}

p.note h4, .call-out h4 {
  margin-top: 0;
}

p .inline-quote {
  font-style: italic;
}

.responsive-table {
  overflow-x: auto;
}

.responsive-table table {
  width: 100%;
}

.search-container .search-controls .input {
  grid-area: search-input;
}

.search-container {
  margin-top: 1em;
}

#feature-search-description {
  margin-top: 0;
}

.search-container .search-controls .input {
  display: inline-block;
  width: 100%;
}

.search-container .search-controls label {
  display: block;
}

.search-container .search-controls input.search {
  display: inline-block;
  width: 100%;
  font-size: 2em;
  padding: .25em .5em;
  border: 3px solid var(--border-search);
  box-sizing: border-box;
}

.search-container .search-controls .submit {
  width: 100%;
  text-align: right;
}

.search-container form button {
  border: 3px solid var(--background-nav);
  background-color: var(--background-nav);
  padding: .25em .5em;
  font-size: 1em;
  color: var(--foreground);
}

.search-results {
  margin-top: 1em;
}

.search-results td {
  text-align: center;
  color: var(--foreground);
}

.search-results td.no {
  background-color: var(--support-no-background);
  color: var(--support-no-foreground);
}

.search-results td.ye {
  background-color: var(--support-yes-background);
  color: var(--support-yes-foreground);
}

.search-results td.pa, .search-results td.kn {
  background-color: var(--support-partial-background);
  color: var(--support-partial-foreground);
}

.search-results td.un {
  background-color: var(--support-unknown-background);
  color: var(--support-unknown-foreground);
}

.search-results .result {
  background-color: var(--background);
  padding: .5em;
  margin-bottom: .5em;
}

.search-results .result h3 {
  font-size: 1.5em;
  margin-top: .1em;
  margin-bottom: .5em;
}
.search-results .result h4 {
  font-size: 1.2em;
  margin-top: .1em;
}

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

form.stacked-form label {
  display: block;
}

form.stacked-form input,
  form.stacked-form textarea,
  form.stacked-form select {
  display: block;
  padding: .5em;
  margin-top: .25em;
  margin-bottom: .25em;
  border: 1px solid var(--border-input);
  box-sizing: border-box;
  width: 100%;
}

form.stacked-form select {
  padding: 0;
}

form.stacked-form select {
  height: 2em;
}

form.stacked-form .control {
  margin-bottom: .75em;
}

#run-test-container {
  margin-left: .5em;
  padding-left: 1em;
  border-left: 2px solid var(--border-input);
}

dt {
  font-weight: bold;
}

dl.inline dt:before {
  content: "";
  display: block;
}
dl.inline dt, dl.inline dd {
  display: inline;
}
dl.inline dd {
  margin-left: 0;
}

summary h2,
summary h3,
summary h4,
summary h5,
summary h6 {
  display: inline;
}

details.indent {
  border-left: 1px solid black;
  margin-top: .5em;
  margin-left: .5em;
  padding-left: .5em;
}

form.testing-pref {
  margin-left: .5em;
  margin-bottom: 1em;
  border-left: 1px solid var(--border-input);
  padding-left: .5em;

}

form.testing-pref p {
  margin-top: .25em;
  margin-bottom: .25em;
}

.assertion-container {
  background-color: var(--background-assertion);
  margin-bottom: 1.5em;
  padding: .5em 1em .5em 1em;
  overflow: auto; /* tables are wide; helpful for mobile */
}

pre.test-html {
  overflow: auto; /* tables are wide; helpful for mobile */
  max-width: 650px;
}

a.jump {
  font-size: .75em;
  margin-bottom: 1em;
  display: block;
}

.support-summary-by-at {
  margin-bottom: 0;
}

th .feature-title {
  font-weight: normal
}

.summary-matrix th.assertion {
  min-width: 15em;
  max-width: 15em;
}

.summary-matrix th.feature {
  font-size: 1.25em;
  padding: .5em;
}

a.back-to-top {
  display: block;
  text-align: center;
}

fieldset.assertion {
  border: none;
  padding-left: 0;
}

fieldset.assertion > legend, .submit-test-result legend {
  font-size: 1.5em;
  font-weight: bold;
}

fieldset.assertion fieldset {
  margin-bottom: 1em;
}

ul.link-list li a {
  line-height: 1.5em;
}

.support-summary-table {
  margin-bottom: 1em;
}

table caption {
  text-align: left;
  font-weight: bold;
  line-height: 2em;
  font-size: .75em;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background-color: var(--background-paper);
  padding: .25em .25em;
}

table.support-table caption {
  font-size: 1.5em;
}

th a .applied_to {
  display: block;
  font-size: .75em;
}

.expectation-summary {
  font-size: .75em;
  width: 100%;
}

.expectation-summary ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
  line-height: 2em;
}

.expectation-summary li {
  color: var(--foreground);
  display: inline-block;
  padding: .5em .25em;
  border-radius: .25em;
  margin-left: .25em;
  margin-right: .25em;
  border: 1px solid #000;
  font-size: .8em;
  line-height: .8em;
}

.search-results .summary-container {
  font-size: .6em;
  font-weight: normal;
}

.search-results .at-container {
  background-color: var(--background-paper);
}

.search-results .at-container h4 {
  margin-top: .1em;
  margin-bottom: .1em;
}

.version-combinations > * {
  margin:0;
  font-weight: 400;
}

.open-test-page {
  padding: .33em;
  border: 2px solid #000;
  border-radius: .25em;
  font-size: 1.33em;
  display: inline-block;
}