:root {
  --w3c-classic: #005a9c;
  --w3c-blue: #036;
  --wai-green: #005a6a;
  --off-black: #1d1d1d;
  --dk-grey: #3b3b3b;
  --faded-red: #c0272d;
  --red-subtle: #f1d0e1;
  --light-blue: #196cac;
  --dk-blue: #091832;
  --gold: #eed009;
  --gold-light: rgba(238, 208, 9, .35);
  --ocean: #00818d;
  --cloudy: #bccbd3;
  --cloudy-subtle: #d0e1f1;
  --grey: #686868;
  --line-grey: #ddd;
  --trans-line-grey: hsla(0, 0%, 87%, .32);
  --off-white: #f2f2f2;
  --body-bg: #fafafc;
  --lt-off-white: #fafafa;
  --pure-white: #fff;
  --white-transparent: hsla(0, 0%, 100%, .92);
  --visited-link: #606;
  --footer-grey: #efefef
}

.no-display,
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap
}

.no-display.focusable:active,
.no-display.focusable:focus,
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit
}

@font-face {
  font-family: Noto Sans;
  src: url(../fonts/notosans/notosans-regular.woff2) format("woff2"), url(../fonts/notosans/notosans-regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Sans;
  src: url(../fonts/notosans/notosans-italic.woff2) format("woff2"), url(../fonts/notosans/notosans-italic.woff) format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: fallback
}

@font-face {
  font-family: Noto Sans;
  src: url(../fonts/notosans/notosans-bold.woff2) format("woff2"), url(../fonts/notosans/notosans-bold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Sans;
  src: url(../fonts/notosans/notosans-bolditalic.woff2) format("woff2"), url(../fonts/notosans/notosans-bolditalic.woff) format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: fallback
}

@font-face {
  font-family: Noto Sans Mono;
  src: url(../fonts/notosansmono/notosansmono-regular.woff2) format("woff2"), url(../fonts/notosansmono/notosansmono-regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Sans Mono;
  src: url(../fonts/notosansmono/notosansmono-bold.woff2) format("woff2"), url(../fonts/notosansmono/notosansmono-bold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Naskh Arabic Minimal;
  src: url(../fonts/notonaskh/regular-minimal.woff2) format("woff2"), url(../fonts/notonaskh/regular-minimal.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Naskh Arabic Minimal;
  src: url(../fonts/notonaskh/bold-minimal.woff2) format("woff2"), url(../fonts/notonaskh/bold-minimal.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Naskh Arabic;
  src: url(../fonts/notonaskh/regular.woff2) format("woff2"), url(../fonts/notonaskh/regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: Noto Naskh Arabic;
  src: url(../fonts/notonaskh/bold.woff2) format("woff2"), url(../fonts/notonaskh/bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: fallback
}

html {
  background-color: #f2f2f2;
  background-color: var(--off-white)
}

@media print {
  html {
    font-size: 12pt;
    background-color: #fff
  }
}

body {
  font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif;
  line-height: 1.5;
  font-size: 16px;
  font-size: 1rem;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  background-color: #fafafc;
  background-color: var(--body-bg);
  color: #1d1d1d;
  color: var(--off-black);
  padding: 0;
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  margin: 0 auto;
  max-width: 1250px
}

@supports (display:grid) {
  body {
    max-width: none;
    margin: 0
  }
}

@media print {
  body {
    color: #000;
    background-color: #fff;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
  }
}

:lang(ar) {
  font-family: Noto Naskh Arabic, Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif
}

.langlist :lang(ar),
.languagelist :lang(ar) {
  font-family: Noto Naskh Arabic Minimal, Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif
}

code {
  font-size: 1em;
  font-family: Noto Sans Mono, monospace
}

a {
  color: #036;
  color: var(--w3c-blue)
}

a:focus,
a:hover {
  color: #005a6a;
  color: var(--wai-green)
}

a:visited {
  color: #606;
  color: var(--visited-link)
}

a.stealthy-link {
  text-decoration: none;
  color: inherit
}

a.stealthy-link:focus,
a.stealthy-link:hover,
a.stealthy-link:visited {
  color: inherit
}

@media print {
  a {
    color: #000
  }

  a[href^="#"]:after {
    content: "(⇘ " attr(href) ")"
  }

  a[href^=http]:after {
    content: " (" attr(href) ")"
  }

  a[href^="/WAI/"]:after {
    content: " (https://www.w3.org" attr(href) ")"
  }
}

[tabindex]:not([tabindex="-1"]):focus,
a:focus,
button:focus,
input:focus,
select:focus:focus,
textarea:focus {
  outline-color: currentColor;
  outline-offset: 2px;
  outline: 2px solid
}

.able-media-container,
.media-wrapper {
  position: relative;
  padding-top: 56.25%
}

.able-media-container .img,
.able-media-container iframe,
.able-media-container video,
.media-wrapper .img,
.media-wrapper iframe,
.media-wrapper video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none
}

.contentarea {
  position: relative
}

[dir=ltr] img.symbol {
  float: right
}

[dir=rtl] img.symbol {
  float: left
}

[dir=ltr] img.symbol {
  margin-left: 1em
}

[dir=rtl] img.symbol {
  margin-right: 1em
}

img.symbol {
  margin-bottom: 1em
}

figure {
  margin: 0 0 1em
}

figcaption {
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--line-grey);
  margin-bottom: .5em
}

.button,
button {
  border-radius: 5px;
  display: inline-block;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px 12px;
  border: 2px solid #005a6a;
  border: 2px solid var(--wai-green);
  font-size: 13px;
  font-size: .8125rem;
  line-height: 1.4;
  background-color: #005a6a;
  background-color: var(--wai-green);
  text-decoration: none;
  font-weight: 700
}

.button,
.button:visited,
button,
button:visited {
  color: #fff;
  color: var(--pure-white)
}

.button.button-nobg,
button.button-nobg {
  background: transparent
}

.button.button-nobg:focus,
.button.button-nobg:hover,
button.button-nobg:focus,
button.button-nobg:hover {
  background-color: transparent;
  border-color: #fff;
  border-color: var(--pure-white)
}

.button.button-noborder,
button.button-noborder {
  border-color: transparent
}

.button.button-noborder:focus,
.button.button-noborder:hover,
button.button-noborder:focus,
button.button-noborder:hover {
  border-color: #fff;
  border-color: var(--pure-white)
}

.button.button-small,
button.button-small {
  padding: 2px 4px
}

.button.button-inline,
button.button-inline {
  padding: 0
}

.button:focus,
.button:hover,
.stealthy-link:focus span.button,
.stealthy-link:hover span.button,
button:focus,
button:hover {
  background-color: #036;
  background-color: var(--w3c-blue);
  color: #fff;
  color: var(--pure-white)
}

.button:focus,
.button:hover,
button:focus,
button:hover {
  border-color: #036;
  border-color: var(--w3c-blue)
}

.button:focus,
button:focus {
  outline-color: #036;
  outline-color: var(--w3c-blue)
}

.button:disabled,
button:disabled {
  opacity: .75;
  text-decoration: line-through
}

.button-secondary {
  background-color: #fff;
  background-color: var(--pure-white);
  color: #005a6a;
  color: var(--wai-green)
}

.button-secondary:visited {
  color: #036;
  color: var(--w3c-blue)
}

.button-secondary:visited:focus,
.button-secondary:visited:hover {
  color: #fff;
  color: var(--pure-white)
}

.button-backtotop {
  position: fixed;
  cursor: pointer;
  bottom: 16px;
  right: 16px;
  left: auto
}

[dir=rtl] .button-backtotop {
  right: auto;
  left: 16px
}

.button-backtotop {
  opacity: .85;
  border-radius: 100px;
  background-color: #036;
  background-color: var(--w3c-blue);
  border-color: #036;
  border-color: var(--w3c-blue);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .5s linear
}

.button-backtotop.active,
.button-backtotop:focus {
  opacity: 1
}

.button-backtotop svg {
  vertical-align: -1px
}

[dir=ltr] .button-backtotop.inline {
  float: right
}

[dir=rtl] .button-backtotop.inline {
  float: left
}

.button-backtotop.inline {
  position: static
}

@media print {
  .button-backtotop {
    display: none
  }
}

[dir=ltr] .button-menu {
  margin-left: auto
}

[dir=rtl] .button-menu {
  margin-right: auto
}

.button-menu {
  text-transform: uppercase;
  background-color: #fff;
  background-color: var(--pure-white);
  color: #036;
  color: var(--w3c-blue);
  border-color: #eed009;
  border-color: var(--gold)
}

.button-menu:focus,
.button-menu:hover {
  border-color: #fff;
  border-color: var(--pure-white);
  background-color: #eed009;
  background-color: var(--gold);
  color: #1d1d1d;
  color: var(--off-black)
}

.button-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -8px
}

.button-group .button,
.button-group button {
  min-width: 7em;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  margin: 8px
}

mark {
  background-color: rgba(238, 208, 9, .35);
  background-color: var(--gold-light)
}

p {
  margin: 1em 0
}

.showhidebutton {
  display: inline;
  background: transparent;
  color: inherit;
  border-color: transparent;
  font-weight: 400
}

[dir=ltr] .showhidebutton:after {
  margin-left: .5em
}

[dir=rtl] .showhidebutton:after {
  margin-right: .5em
}

.showhidebutton:after {
  display: inline-block;
  background-color: #036;
  background-color: var(--w3c-blue);
  color: #fff;
  color: var(--pure-white);
  content: "–";
  font-weight: 700;
  padding: .3em;
  border-radius: 3px;
  width: 1em;
  height: 1em;
  line-height: 1em
}

.showhidebutton:focus:after,
.showhidebutton:hover:after {
  color: #036;
  color: var(--w3c-blue);
  background-color: #fff !important;
  background-color: var(--pure-white) !important
}

.showhidebutton[aria-expanded=false]:after {
  content: "+"
}

blockquote {
  font-style: italic;
  margin-bottom: 1em
}

blockquote cite {
  display: block;
  font-style: normal;
  padding-left: 32px;
  padding-left: 2rem
}

[dir=ltr] blockquote cite:before {
  margin-left: -32px;
  margin-left: -2rem
}

[dir=rtl] blockquote cite:before {
  margin-right: -32px;
  margin-right: -2rem
}

blockquote cite:before {
  content: "— ";
  font-weight: 700;
  width: 32px;
  width: 2rem;
  display: inline-block
}

[dir=ltr] blockquote p:first-of-type:before {
  margin-left: -.75ch
}

[dir=rtl] blockquote p:first-of-type:before {
  margin-right: -.75ch
}

blockquote p:first-of-type:before {
  content: "“"
}

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

blockquote p:last-of-type:after {
  content: "”"
}

blockquote.special {
  text-align: center
}

[dir=ltr] blockquote.pull {
  margin-left: 64px;
  margin-left: 4rem
}

[dir=rtl] blockquote.pull {
  margin-right: 64px;
  margin-right: 4rem
}

[dir=ltr] blockquote.pull {
  border-left: 2px solid var(--line-grey)
}

[dir=rtl] blockquote.pull {
  border-right: 2px solid var(--line-grey)
}

[dir=ltr] blockquote.pull {
  border-left: 2px solid #ddd
}

[dir=rtl] blockquote.pull {
  border-right: 2px solid #ddd
}

blockquote.pull {
  position: relative;
  font-size: 20px;
  font-size: 1.25rem;
  padding-left: 1ch;
  border: 1px solid transparent;
  color: #036;
  color: var(--w3c-blue);
  font-weight: 700
}

blockquote.pull.left,
blockquote.pull.right {
  max-width: 256px;
  max-width: 16rem
}

[dir=ltr] blockquote.pull.right {
  float: right
}

[dir=ltr] blockquote.pull.left,
[dir=rtl] blockquote.pull.right {
  float: left
}

[dir=rtl] blockquote.pull.left {
  float: right
}

[dir=ltr] blockquote.pull.left {
  margin-right: 32px;
  margin-right: 2rem
}

[dir=rtl] blockquote.pull.left {
  margin-left: 32px;
  margin-left: 2rem
}

[dir=ltr] blockquote.pull p:first-of-type:before {
  margin-left: -1.25ch
}

[dir=rtl] blockquote.pull p:first-of-type:before {
  margin-right: -1.25ch
}

blockquote.pull p:first-of-type:before {
  font-size: 80px;
  font-size: 5rem;
  position: absolute;
  left: 0;
  top: -.25ch
}

blockquote.pull cite {
  margin-top: 8px;
  margin-top: .5rem;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  color: #1d1d1d;
  color: var(--off-black)
}

blockquote.pull.alt-1 {
  color: #005a9c;
  color: var(--w3c-classic)
}

blockquote.pull.alt-2 {
  color: #005a6a;
  color: var(--wai-green)
}

blockquote.pull.alt-3 {
  color: #1d1d1d;
  color: var(--off-black)
}

.box {
  border: 1px solid #ddd;
  border: solid 1px var(--line-grey);
  margin-top: 16px;
  background-color: #fff;
  background-color: var(--pure-white)
}

.box+.box#toc {
  margin-top: 0;
  border-top: 0
}

.box.box-space-above {
  margin-top: 90px
}

.box-h {
  padding: 8px 16px;
  color: #005a6a;
  color: var(--wai-green)
}

@media print {
  .box-h {
    color: #000
  }
}

.box-h {
  font-weight: 700;
  background-color: #f2f2f2;
  background-color: var(--off-white)
}

.box-h h1,
.box-h h2,
.box-h h3,
.box-h h4,
.box-h h5,
.box-h h6 {
  border: none;
  font-size: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  display: inline-block
}

@supports (all:unset) {

  .box-h h1,
  .box-h h2,
  .box-h h3,
  .box-h h4,
  .box-h h5,
  .box-h h6 {
    all: unset
  }
}

.box-h-large {
  font-size: 20px;
  font-size: 1.25rem;
  color: #036;
  color: var(--w3c-blue);
  padding-bottom: 7px;
  font-weight: 400;
  border-bottom: 1px solid #ddd;
  border-bottom: solid 1px var(--line-grey)
}

[dir=ltr] .box-h-icon svg {
  margin-right: 4px
}

[dir=rtl] .box-h-icon svg {
  margin-left: 4px
}

.box-i:after,
.box-i:before {
  content: " ";
  display: table
}

.box-i:after {
  clear: both
}

.box-i {
  padding: 8px 16px;
  font-size: 14/16 * 16px;
  font-size: 14/16 * 1rem
}

.box-i>:first-child {
  margin-top: 0
}

.box-i>:last-child {
  margin-bottom: 0
}

.box.box-list .box-i ol,
.box.box-list .box-i ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.box.box-linklist .box-i {
  padding: 0
}

.box.box-simple .box-i {
  padding: 2px 8px 8px
}

.box.box-simple .box-h-simple {
  padding: 8px 8px 2px;
  background-color: transparent;
  line-height: 1.57
}

.box.box-simple.box-aside .box-i,
.box.box-simple .box-h-simple {
  font-size: 14px;
  font-size: .875rem
}

.box.box-highlighted {
  background-color: #d0e1f1;
  background-color: var(--cloudy-subtle)
}

.box.box-highlighted .box-h-highlighted {
  color: #091832;
  color: var(--dk-blue);
  border-bottom: 1px solid #ddd;
  border-bottom: solid 1px var(--line-grey);
  background-color: #fff;
  background-color: var(--pure-white)
}

@media (min-width:35em) {

  .box.box-left,
  .box.box-right {
    width: 33%;
    margin-top: -9px
  }

  .box.box-left.box-simple,
  .box.box-right.box-simple {
    margin-top: -3px
  }

  [dir=ltr] .box.box-left {
    clear: left
  }

  [dir=rtl] .box.box-left {
    clear: right
  }

  [dir=ltr] .box.box-left {
    float: left
  }

  [dir=rtl] .box.box-left {
    float: right
  }

  [dir=ltr] .box.box-left {
    margin-right: 1em
  }

  [dir=rtl] .box.box-left {
    margin-left: 1em
  }

  [dir=ltr] .box.box-right {
    clear: right
  }

  [dir=rtl] .box.box-right {
    clear: left
  }

  [dir=ltr] .box.box-right {
    float: right
  }

  [dir=rtl] .box.box-right {
    float: left
  }

  [dir=ltr] .box.box-right {
    margin-left: 1em
  }

  [dir=rtl] .box.box-right {
    margin-right: 1em
  }
}

@media print {
  #helpimprove {
    display: none
  }
}

.breadcrumb {
  font-size: 13px;
  font-size: .8125rem;
  background-color: #fff;
  background-color: var(--pure-white);
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--line-grey);
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 32px
}

.breadcrumb ul {
  margin: 0;
  padding: 0;
  grid-column: 2/10
}

.breadcrumb ul li {
  display: inline-block;
  margin: 0;
  padding: 0
}

.breadcrumb ul li:after {
  content: " / ";
  color: #005a6a;
  color: var(--wai-green);
  white-space: pre-wrap
}

.breadcrumb ul li:last-child:after {
  content: "";
  display: none
}

.breadcrumb a {
  color: #036;
  color: var(--w3c-blue)
}

@media print {
  .breadcrumb a:after {
    content: ""
  }
}

.breadcrumb [aria-current=page] {
  font-weight: 700;
  text-decoration: none
}

.content {
  display: grid;
  grid-area: content;
  grid-template-columns: repeat(6, minmax(0, 120px));
  grid-column-gap: 32px
}

.content>* {
  grid-column: 1/5;
  grid-auto-flow: dense
}

.content {

  &>.ref-side,
  >& .aside,
  >& .demo-side {
    grid-column: 5/7;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.2
  }

  &>.ref-side p:first-of-type,
  >& .aside p:first-of-type,
  >& .demo-side p:first-of-type {
    margin-top: 0
  }
}

.content.wide {
  grid-template-columns: repeat(8, minmax(0, 120px));
  grid-column-start: navigation;
  grid-column-end: content
}

.content.wide>* {
  grid-column: 3/9
}

.content.wide .sn-contents {
  grid-column: 1/3;
  grid-row: 1/99
}

[dir=ltr] .example-bar {
  padding-left: 32px
}

[dir=ltr] .example-bar,
[dir=rtl] .example-bar {
  padding-right: 32px
}

[dir=rtl] .example-bar {
  padding-left: 32px
}

.example-bar {
  display: -ms-flexbox;
  display: flex
}

@supports (display:grid) {
  .example-bar {
    display: grid;
    grid-column-gap: 32px;
    padding: 0;
    max-width: none
  }
}

.example-bar {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.example-bar>* {
  grid-column: 2/7
}

[dir=ltr] .example-bar .eg {
  border-right: 2px solid var(--wai-green)
}

[dir=rtl] .example-bar .eg {
  border-left: 2px solid var(--wai-green)
}

[dir=ltr] .example-bar .eg {
  border-right: 2px solid #005a6a
}

[dir=rtl] .example-bar .eg {
  border-left: 2px solid #005a6a
}

.example-bar .eg {
  grid-column: 1/2;
  grid-row: 1/99;
  text-align: right;
  padding: 0 8px;
  font-weight: 700;
  font-style: italic;
  color: #005a6a;
  color: var(--wai-green)
}

[dir=ltr] .example-sheet {
  padding-right: 32px
}

[dir=rtl] .example-sheet {
  padding-left: 32px
}

.example-sheet {
  display: -ms-flexbox;
  display: flex;
  padding-inlne-start: 32px
}

@supports (display:grid) {
  .example-sheet {
    display: grid;
    grid-column-gap: 32px;
    padding: 0;
    max-width: none
  }
}

.example-sheet {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.example-sheet .example-sheet-inner {
  grid-column: 2/6;
  background-color: #fff;
  background-color: var(--pure-white);
  padding: 16px 32px
}

.decision-tree {
  list-style: none;
  margin: 1em 0;
  padding: 0
}

.decision-tree>li {
  border: 2px solid #bccbd3;
  border: 2px solid var(--cloudy);
  border-top: none;
  margin-bottom: 0
}

.decision-tree>li>strong {
  display: block;
  padding: 1em .5em
}

.decision-tree>li:first-child {
  border-top: 2px solid #bccbd3;
  border-top: 2px solid var(--cloudy)
}

.decision-tree>li>ul {
  padding: 0;
  list-style: none;
  border-top: 1px dotted #bccbd3;
  border-top: 1px dotted var(--cloudy)
}

@supports (display:flex) {
  .decision-tree>li>ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch
  }
}

.decision-tree>li>ul>li {
  text-indent: 0;
  box-sizing: border-box;
  font-weight: 400;
  margin-bottom: 0
}

@supports (display:flex) {
  .decision-tree>li>ul>li {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%
  }
}

.decision-tree>li>ul>li {
  padding: .5em
}

@supports (display:flex) {
  .decision-tree>li>ul>li:nth-child(odd) {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%
  }
}

.decision-tree>li>ul>li:nth-child(odd):last-child {
  display: block;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%
}

.decision-tree>li>ul>li ul {
  padding: 0;
  margin: 0
}

.decision-tree>li>ul>li li {
  padding: 0;
  padding-bottom: .5em;
  margin-bottom: .5em;
  border-bottom: 1px solid #3b3b3b;
  border-bottom: 1px solid var(--dk-grey);
  list-style: none
}

.decision-tree>li>ul>li li>em {
  display: block;
  padding-left: 1.5em;
  position: relative;
  margin-top: .25em;
  font-style: normal
}

[dir=ltr] .decision-tree>li>ul>li li>em:before {
  margin-left: -1.5em
}

[dir=rtl] .decision-tree>li>ul>li li>em:before {
  margin-right: -1.5em
}

.decision-tree>li>ul>li li>em:before {
  position: absolute;
  content: "";
  top: .2em
}

.decision-tree>li>ul>li li:last-child {
  border-bottom-style: none;
  padding-bottom: 0;
  margin-bottom: 0
}

.decision-tree .yes {
  background-color: #d0e1f1;
  background-color: var(--cloudy-subtle);
  border-bottom: none
}

[dir=ltr] .decision-tree .yes li {
  margin-left: 1em
}

[dir=rtl] .decision-tree .yes li {
  margin-right: 1em
}

.decision-tree .yes li {
  list-style: disc
}

.decision-tree .yes li:only-child {
  list-style: none
}

[dir=ltr] .decision-tree .no {
  border-right: 1px dotted var(--cloudy)
}

[dir=rtl] .decision-tree .no {
  border-left: 1px dotted var(--cloudy)
}

[dir=ltr] .decision-tree .no {
  border-right: 1px dotted #bccbd3
}

[dir=rtl] .decision-tree .no {
  border-left: 1px dotted #bccbd3
}

.decision-tree .no {
  background-color: #f1d0e1;
  background-color: var(--red-subtle);
  border-bottom: none;
  position: relative
}

[dir=ltr] .decision-tree .no:after {
  margin-left: -8px;
  margin-left: -.5rem
}

[dir=rtl] .decision-tree .no:after {
  margin-right: -8px;
  margin-right: -.5rem
}

.decision-tree .no:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: hsla(0, 0%, 47%, 0);
  border-top-color: #f1d0e1;
  border-top-color: var(--red-subtle);
  border-width: 16px;
  border-width: 1rem;
  z-index: 500
}

[dir=ltr] .doc-note h1:before {
  margin-right: 8px
}

[dir=rtl] .doc-note h1:before {
  margin-left: 8px
}

.doc-note h1:before {
  background-color: #eed009;
  background-color: var(--gold);
  color: #091832;
  color: var(--dk-blue);
  display: inline-block;
  padding: 4px 8px;
  margin-top: -8px;
  font-size: 14px;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  vertical-align: middle;
  border-radius: 3px
}

.doc-note-box {
  border: 2px solid #eed009;
  border: 2px solid var(--gold);
  padding: 8px;
  background-color: #fff;
  background-color: var(--pure-white);
  margin-bottom: 20px
}

.doc-note-box p:first-child {
  margin-top: 0
}

.doc-note-box p:last-child {
  margin-bottom: 0
}

.doc-draft h1:before {
  content: "Draft"
}

.doc-archived h1:before {
  content: "Archived"
}

.doc-deprecated h1:before {
  content: "Deprecated";
  background-color: #c0272d;
  background-color: var(--faded-red);
  color: #fff;
  color: var(--pure-white)
}

.doc-deprecated .doc-note-box {
  border-color: #c0272d;
  border-color: var(--faded-red)
}

.doc-note-translation {
  font-size: 13px;
  font-size: .8125rem
}

.doc-note-translation p {
  margin-top: 5px;
  margin-bottom: 5px
}

.doc-note-translation p:first-of-type {
  margin-top: 0
}

.doc-note-translation p:last-child {
  margin-bottom: 0
}

.criterion {
  margin-bottom: 4em;
  background-color: #fff;
  background-color: var(--pure-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  box-shadow: 1px 1px 4px -4px #000;
  padding: 1em
}

.criterion__answers {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  -ms-flex-direction: column;
  flex-direction: column
}

.criterion__answers label {
  font-size: 90%;
  display: block;
  color: #1d1d1d;
  color: var(--off-black);
  font-weight: 400;
  margin-bottom: .125em
}

.criterion__answers label:after {
  content: ":"
}

.criterion__answers select {
  margin-right: 1em
}

.criterion__answers>div:first-child {
  -ms-flex: 1;
  flex: 1
}

.criterion__answers>div:last-child {
  -ms-flex: 3;
  flex: 3
}

.criterion__answers textarea {
  width: 100%;
  font-family: Noto Sans Mono, monospace
}

@media (min-width:35em) {
  .criterion__answers {
    -ms-flex-direction: row;
    flex-direction: row
  }
}

.criterion-header {
  margin-bottom: 1em
}

.criterion-header h3 {
  font-weight: 400;
  display: inline
}

.criterion-header__level {
  font-size: 13px;
  font-size: .8125rem;
  font-style: normal;
  margin: 0 1.5em 0 .5em;
  vertical-align: middle;
  white-space: nowrap
}

.observation {
  margin-top: 1em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}

@media (min-width:35em) {
  .observation {
    margin-top: 0
  }
}

.observation__header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-order: -1;
  order: -1
}

@media (min-width:35em) {
  .observation__header {
    -ms-flex-direction: row;
    flex-direction: row
  }
}

.observation label {
  margin-right: .5em
}

.observation select {
  margin-bottom: 1.5em
}

.observation__meta {
  margin-left: auto;
  font-size: smaller;
  -ms-flex-item-align: baseline;
  align-self: baseline
}

details {
  padding-left: 32px;
  padding-left: 2rem
}

[dir=ltr] summary {
  margin-left: -32px;
  margin-left: -2rem
}

[dir=rtl] summary {
  margin-right: -32px;
  margin-right: -2rem
}

summary {
  cursor: pointer;
  display: block
}

summary::-webkit-details-marker {
  display: none
}

[dir=ltr] summary>:first-child:before {
  margin-right: 8px;
  margin-right: .5rem
}

[dir=rtl] summary>:first-child:before {
  margin-left: 8px;
  margin-left: .5rem
}

summary>:first-child:before {
  content: "+";
  display: inline-block;
  border-radius: 5px;
  width: 20.8px;
  width: 1.3rem;
  height: 20.8px;
  height: 1.3rem;
  line-height: .9;
  background: #fff;
  background: var(--pure-white);
  color: #005a6a;
  color: var(--wai-green);
  border: 2px solid #005a6a;
  border: 2px solid var(--wai-green);
  text-align: center;
  font-weight: 700
}

summary:focus>:first-child:before,
summary:hover>:first-child:before {
  background: #036;
  background: var(--w3c-blue);
  border-color: #036;
  border-color: var(--w3c-blue);
  color: #fff;
  color: var(--pure-white)
}

details[open]>summary>:first-child:before {
  content: "–"
}

details>div:after {
  content: "";
  display: block;
  clear: both
}

.excol-all {
  margin: 16px 0
}

figure.shrink-wrap {
  box-sizing: border-box;
  background-color: #fff;
  background-color: var(--pure-white);
  width: -webkit-min-content;
  width: min-content;
  max-width: 100%;
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  border-radius: 3px;
  padding: 10px
}

@media (min-width:47.5em) {
  figure.shrink-wrap .figcontent {
    display: -ms-flexbox;
    display: flex
  }

  figure.shrink-wrap .figcontent>* {
    -ms-flex: 1;
    flex: 1
  }
}

figure.shrink-wrap img {
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  max-width: none !important
}

figure.shrink-wrap figcaption {
  font-weight: 400;
  border: none;
  margin: 0
}

.page-footer,
.site-footer {
  font-size: 14px;
  font-size: .875rem
}

@media print {

  .page-footer,
  .site-footer {
    font-size: 8pt
  }
}

.page-footer,
.site-footer {
  padding-top: 16px;
  padding-bottom: 16px
}

.page-footer p:first-of-type,
.site-footer p:first-of-type {
  margin-top: 0
}

.page-footer p:last-of-type,
.site-footer p:last-of-type {
  margin-bottom: 0
}

.page-footer {
  margin-top: 32px;
  background-color: #efefef;
  background-color: var(--footer-grey)
}

.page-footer .inner {
  grid-area: content
}

.site-footer {
  margin-top: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #3b3b3b;
  background-color: var(--dk-grey);
  color: #fff;
  color: var(--pure-white)
}

@media print {
  .site-footer {
    background-color: #efefef;
    background-color: var(--footer-grey);
    color: #3b3b3b;
    color: var(--dk-grey);
    border-top: 1px solid #3b3b3b;
    border-top: 1px solid var(--dk-grey)
  }
}

.site-footer a {
  color: #fff;
  color: var(--pure-white)
}

.site-footer a:focus,
.site-footer a:hover {
  color: #eed009;
  color: var(--gold)
}

@media print {
  .site-footer a {
    color: #000
  }
}

@media print {
  .site-footer a:after {
    display: none
  }
}

.site-footer a.largelink {
  color: #eed009;
  color: var(--gold);
  font-size: 20px;
  font-size: 1.25rem;
  text-decoration: none
}

@media print {
  .site-footer a.largelink {
    color: #3b3b3b;
    color: var(--dk-grey);
    font-size: 12pt
  }
}

.site-footer a.largelink:focus,
.site-footer a.largelink:hover {
  text-decoration: underline
}

.site-footer ul a {
  text-decoration: none
}

.site-footer ul a:focus,
.site-footer ul a:hover {
  text-decoration: underline
}

.site-footer .footer-list-header {
  font-weight: 700;
  border-bottom: 1px solid hsla(0, 0%, 87%, .32);
  border-bottom: 1px solid var(--trans-line-grey);
  padding: 4px 0
}

.site-footer .about {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between
}

@media print {
  .site-footer .about {
    grid-column-end: q4-end;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: end;
    align-items: flex-end
  }

  .site-footer .about p {
    margin: 0
  }
}

@media print {
  .site-footer>:not(.about) {
    display: none
  }
}

.page-footer+.site-footer {
  margin-top: 0
}

.site-footer ul {
  margin: 0;
  padding: 0
}

.site-footer ul li {
  list-style: none
}

.site-footer .social {
  margin-top: 1em;
  margin-bottom: 1em
}

@media print {
  .site-footer .social {
    display: none
  }
}

.site-footer .social svg {
  vertical-align: middle;
  font-size: 2em
}

.site-footer .social a {
  color: #fff;
  color: var(--pure-white);
  text-decoration: none
}

.site-footer .social a:focus svg,
.site-footer .social a:hover svg {
  color: #eed009;
  color: var(--gold)
}

.site-footer .social .button {
  border: 1px solid #fff;
  border: 1px solid var(--pure-white)
}

.site-footer .social ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center
}

[dir=ltr] .site-footer .social ul li {
  margin-right: 1em
}

[dir=rtl] .site-footer .social ul li {
  margin-left: 1em
}

.footnotes {
  margin-top: 60px
}

.footnotes ol {
  font-size: 13.6px;
  font-size: .85rem
}

input,
select,
textarea {
  font-size: 1em;
  font-family: inherit
}

input[type=search] {
  -webkit-appearance: none
}

fieldset {
  margin: 0 0 32px;
  margin: 0 0 2rem;
  padding: 0
}

input:not([type=checkbox]):not([type=radio]),
textarea {
  border: 1px solid #686868;
  border: 1px solid var(--grey)
}

input:not([type=checkbox]):not([type=radio]):focus,
input:not([type=checkbox]):not([type=radio]):hover,
textarea:focus,
textarea:hover {
  border: 1px solid #036;
  border: 1px solid var(--w3c-blue)
}

& ::-webkit-input-placeholder {
  color: #767676;
  font-style: italic;
  opacity: 1
}

& :-moz-placeholder,
& ::-moz-placeholder {
  color: #767676;
  font-style: italic;
  opacity: 1
}

& :-ms-input-placeholder {
  color: #767676;
  font-style: italic;
  opacity: 1
}

.field {
  padding: 4px;
  margin: 0 0 32px;
  margin: 0 0 2rem;
  outline: 2px solid transparent;
  outline-offset: 5px;
  transition: outline-offset .2s linear
}

.field label {
  display: block
}

.field input:not([type=checkbox]):not([type=radio]),
.field textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px
}

.field input:not([type=checkbox]):not([type=radio]):focus,
.field textarea:focus {
  border-color: #005a9c;
  border-color: var(--w3c-classic);
  background-color: #edf4fa
}

.field input:not([type=checkbox]):not([type=radio]):focus ::-webkit-input-placeholder,
.field textarea:focus ::-webkit-input-placeholder {
  color: #545554
}

.field input:not([type=checkbox]):not([type=radio]):focus :-moz-placeholder,
.field input:not([type=checkbox]):not([type=radio]):focus ::-moz-placeholder,
.field textarea:focus :-moz-placeholder,
.field textarea:focus ::-moz-placeholder {
  color: #545554
}

.field input:not([type=checkbox]):not([type=radio]):focus :-ms-input-placeholder,
.field textarea:focus :-ms-input-placeholder {
  color: #545554
}

.field[focus-within] {
  background-color: #edf4fa;
  outline-color: currentColor;
  outline-offset: 2px
}

.field:focus-within {
  background-color: #edf4fa;
  outline-color: currentColor;
  outline-offset: 2px
}

.field[focus-within] input:focus {
  outline: none;
  background-color: #fff !important;
  background-color: var(--pure-white) !important
}

.field:focus-within input:focus {
  outline: none;
  background-color: #fff !important;
  background-color: var(--pure-white) !important
}

[dir=ltr] .group>.field {
  margin-left: 32px;
  margin-left: 2rem
}

[dir=rtl] .group>.field {
  margin-right: 32px;
  margin-right: 2rem
}

.group>.field {
  margin-bottom: 8px;
  margin-bottom: .5rem
}

.radio-field {
  display: -ms-flexbox;
  display: flex;
  padding: 4px;
  margin: 0 0 8px;
  border-radius: 3px
}

[dir=ltr] .radio-field input {
  margin-right: .5em
}

[dir=rtl] .radio-field input {
  margin-left: .5em
}

.radio-field input {
  -ms-flex: 0 0 1em;
  flex: 0 0 1em;
  width: 1em;
  height: 1em
}

.radio-field input:checked+label {
  font-weight: 700;
  color: #091832;
  color: var(--dk-blue)
}

.radio-field:focus,
.radio-field:hover {
  background-color: #196cac;
  background-color: var(--light-blue);
  color: #fff
}

.radio-field:focus :checked+label,
.radio-field:hover :checked+label {
  color: inherit
}

.radio-field label {
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  cursor: pointer
}

fieldset {
  border: none
}

legend {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700
}

@media (min-width:35em) {
  .searchform {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
  }
}

[dir=ltr] .searchform label {
  text-align: right
}

[dir=rtl] .searchform label {
  text-align: left
}

.searchform label {
  -ms-flex: 1;
  flex: 1
}

[dir=ltr] .searchform input {
  margin-left: 10px
}

[dir=rtl] .searchform input {
  margin-right: 10px
}

.searchform input {
  -ms-flex: 4;
  flex: 4
}

[dir=ltr] .searchform button {
  margin-left: 10px
}

[dir=rtl] .searchform button {
  margin-right: 10px
}

.searchform button {
  -ms-flex: 1;
  flex: 1
}

.default-container,
.default-grid {
  padding: 0 32px
}

@media (min-width:35em) {

  .default-container,
  .default-grid {
    padding: 0
  }
}

.default-grid {
  padding: 0 16px
}

@media (min-width:60em) {
  [dir=ltr] .default-grid {
    padding-left: 32px
  }

  [dir=ltr] .default-grid,
  [dir=rtl] .default-grid {
    padding-right: 32px
  }

  [dir=rtl] .default-grid {
    padding-left: 32px
  }

  .default-grid {
    padding: 0;
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .default-grid {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: [complete-start] minmax(16px, 1fr) [navigation-start] repeat(2, minmax(0, 130px)) [navigation-end content-start] repeat(6, minmax(0, 130px)) [content-end] minmax(16px, 1fr) [complete-end]
    }
  }

  .default-grid.breadcrumb,
  .default-grid.page-footer {
    padding-top: 16px;
    padding-bottom: 16px
  }

  .default-grid .inner {
    grid-column-start: navigation-start;
    grid-column-end: content-end
  }

  .default-grid.page-footer .inner {
    grid-area: content
  }
}

@media print {
  .default-grid {
    display: block
  }
}

@supports (display:grid) {
  .compact-grid {
    grid-template-columns: [complete-start] minmax(16px, 1fr) [navigation-start] repeat(2, minmax(0, 50px)) [navigation-end content-start] repeat(6, minmax(0, 110px)) [content-end] minmax(16px, 1fr) [complete-end]
  }
}

@media (min-width:60em) {
  [dir=ltr] .grid-3 {
    padding-left: 32px
  }

  [dir=ltr] .grid-3,
  [dir=rtl] .grid-3 {
    padding-right: 32px
  }

  [dir=rtl] .grid-3 {
    padding-left: 32px
  }

  .grid-3 {
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .grid-3 {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }
  }

  .grid-3.nogap {
    grid-column-gap: 0
  }
}

.grid-3 .col1,
.grid-3 .from-col1 {
  grid-column-start: 1
}

.grid-3 .col1,
.grid-3 .to-col1 {
  grid-column-end: 2
}

.grid-3 .col2,
.grid-3 .from-col2 {
  grid-column-start: 2
}

.grid-3 .col2,
.grid-3 .to-col2 {
  grid-column-end: 3
}

.grid-3 .col3,
.grid-3 .from-col3 {
  grid-column-start: 3
}

.grid-3 .col3,
.grid-3 .to-col3 {
  grid-column-end: 4
}

@media (min-width:60em) {
  [dir=ltr] .grid-4 {
    padding-left: 32px
  }

  [dir=ltr] .grid-4,
  [dir=rtl] .grid-4 {
    padding-right: 32px
  }

  [dir=rtl] .grid-4 {
    padding-left: 32px
  }

  .grid-4 {
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .grid-4 {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }
  }

  .grid-4.nogap {
    grid-column-gap: 0
  }
}

.grid-4 .col1,
.grid-4 .from-col1 {
  grid-column-start: 1
}

.grid-4 .col1,
.grid-4 .to-col1 {
  grid-column-end: 2
}

.grid-4 .col2,
.grid-4 .from-col2 {
  grid-column-start: 2
}

.grid-4 .col2,
.grid-4 .to-col2 {
  grid-column-end: 3
}

.grid-4 .col3,
.grid-4 .from-col3 {
  grid-column-start: 3
}

.grid-4 .col3,
.grid-4 .to-col3 {
  grid-column-end: 4
}

.grid-4 .col4,
.grid-4 .from-col4 {
  grid-column-start: 4
}

.grid-4 .col4,
.grid-4 .to-col4 {
  grid-column-end: 5
}

@media (min-width:60em) {
  [dir=ltr] .grid-6 {
    padding-left: 32px
  }

  [dir=ltr] .grid-6,
  [dir=rtl] .grid-6 {
    padding-right: 32px
  }

  [dir=rtl] .grid-6 {
    padding-left: 32px
  }

  .grid-6 {
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .grid-6 {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: repeat(6, minmax(0, 1fr))
    }
  }
}

.grid-6 .col1,
.grid-6 .from-col1 {
  grid-column-start: 1
}

.grid-6 .col1,
.grid-6 .to-col1 {
  grid-column-end: 2
}

.grid-6 .col2,
.grid-6 .from-col2 {
  grid-column-start: 2
}

.grid-6 .col2,
.grid-6 .to-col2 {
  grid-column-end: 3
}

.grid-6 .col3,
.grid-6 .from-col3 {
  grid-column-start: 3
}

.grid-6 .col3,
.grid-6 .to-col3 {
  grid-column-end: 4
}

.grid-6 .col4,
.grid-6 .from-col4 {
  grid-column-start: 4
}

.grid-6 .col4,
.grid-6 .to-col4 {
  grid-column-end: 5
}

.grid-6 .col5,
.grid-6 .from-col5 {
  grid-column-start: 5
}

.grid-6 .col5,
.grid-6 .to-col5 {
  grid-column-end: 6
}

.grid-6 .col6,
.grid-6 .from-col6 {
  grid-column-start: 6
}

.grid-6 .col6,
.grid-6 .to-col6 {
  grid-column-end: 7
}

.grid-6 .col1,
.grid-6 .col2,
.grid-6 .col3,
.grid-6 .col4,
.grid-6 .col5,
.grid-6 .col6,
.grid-6 .from-col2,
.grid-6 .from-col3,
.grid-6 .from-col4,
.grid-6 .from-col5,
.grid-6 .from-col6,
.grid-6.from-col1 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  -ms-flex-positive: 1;
  flex-grow: 1
}

[dir=ltr] .grid-6 .col2,
[dir=ltr] .grid-6 .col3,
[dir=ltr] .grid-6 .col4,
[dir=ltr] .grid-6 .col5,
[dir=ltr] .grid-6 .col6,
[dir=ltr] .grid-6 .from-col2,
[dir=ltr] .grid-6 .from-col3,
[dir=ltr] .grid-6 .from-col4,
[dir=ltr] .grid-6 .from-col5,
[dir=ltr] .grid-6 .from-col6 {
  margin-left: 32px
}

[dir=rtl] .grid-6 .col2,
[dir=rtl] .grid-6 .col3,
[dir=rtl] .grid-6 .col4,
[dir=rtl] .grid-6 .col5,
[dir=rtl] .grid-6 .col6,
[dir=rtl] .grid-6 .from-col2,
[dir=rtl] .grid-6 .from-col3,
[dir=rtl] .grid-6 .from-col4,
[dir=rtl] .grid-6 .from-col5,
[dir=rtl] .grid-6 .from-col6 {
  margin-right: 32px
}

@supports (display:grid) {

  [dir=ltr] .grid-6 .col2,
  [dir=ltr] .grid-6 .col3,
  [dir=ltr] .grid-6 .col4,
  [dir=ltr] .grid-6 .col5,
  [dir=ltr] .grid-6 .col6,
  [dir=ltr] .grid-6 .from-col2,
  [dir=ltr] .grid-6 .from-col3,
  [dir=ltr] .grid-6 .from-col4,
  [dir=ltr] .grid-6 .from-col5,
  [dir=ltr] .grid-6 .from-col6 {
    margin-left: 0
  }

  [dir=rtl] .grid-6 .col2,
  [dir=rtl] .grid-6 .col3,
  [dir=rtl] .grid-6 .col4,
  [dir=rtl] .grid-6 .col5,
  [dir=rtl] .grid-6 .col6,
  [dir=rtl] .grid-6 .from-col2,
  [dir=rtl] .grid-6 .from-col3,
  [dir=rtl] .grid-6 .from-col4,
  [dir=rtl] .grid-6 .from-col5,
  [dir=rtl] .grid-6 .from-col6 {
    margin-right: 0
  }
}

.grid-6.from-col1.to-col6 {
  width: 100%
}

[dir=ltr] .grid-three-five .col1,
[dir=ltr] .grid-three-five .col2 {
  padding-left: 16px
}

[dir=ltr] .grid-three-five .col1,
[dir=ltr] .grid-three-five .col2,
[dir=rtl] .grid-three-five .col1,
[dir=rtl] .grid-three-five .col2 {
  padding-right: 16px
}

[dir=rtl] .grid-three-five .col1,
[dir=rtl] .grid-three-five .col2 {
  padding-left: 16px
}

@media (min-width:35em) {
  [dir=ltr] .grid-three-five {
    padding-left: 32px
  }

  [dir=ltr] .grid-three-five,
  [dir=rtl] .grid-three-five {
    padding-right: 32px
  }

  [dir=rtl] .grid-three-five {
    padding-left: 32px
  }

  .grid-three-five {
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .grid-three-five {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: [complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]
    }

    @media (min-width:35em) {
      .grid-three-five {
        grid-template-columns: [complete-start] minmax(16px, 1fr) [three-start] repeat(3, minmax(0, 130px)) [three-end five-start] repeat(5, minmax(0, 130px)) [five-end] minmax(16px, 1fr) [complete-end]
      }
    }
  }

  .grid-three-five .col1,
  .grid-three-five .col2 {
    padding: 0
  }
}

.grid-three-five .col1,
.grid-three-five .col2 {
  -ms-flex-negative: 1;
  flex-shrink: 1
}

[dir=ltr] .grid-three-five .col1 {
  margin-right: 32px
}

[dir=rtl] .grid-three-five .col1 {
  margin-left: 32px
}

.grid-three-five .col1 {
  -ms-flex-preferred-size: 35%;
  flex-basis: 35%;
  grid-column-start: three-start;
  grid-column-end: three-end
}

@supports (display:grid) {
  [dir=ltr] .grid-three-five .col1 {
    margin-right: 0
  }

  [dir=rtl] .grid-three-five .col1 {
    margin-left: 0
  }
}

.grid-three-five .col2 {
  -ms-flex-preferred-size: 61%;
  flex-basis: 61%;
  grid-column-start: five-start;
  grid-column-end: five-end
}

.grid-three-five .col12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  grid-column-start: three-start;
  grid-column-end: five-end
}

[dir=ltr] .grid-five-three .col1,
[dir=ltr] .grid-five-three .col2 {
  padding-left: 16px
}

[dir=ltr] .grid-five-three .col1,
[dir=ltr] .grid-five-three .col2,
[dir=rtl] .grid-five-three .col1,
[dir=rtl] .grid-five-three .col2 {
  padding-right: 16px
}

[dir=rtl] .grid-five-three .col1,
[dir=rtl] .grid-five-three .col2 {
  padding-left: 16px
}

@media (min-width:35em) {
  [dir=ltr] .grid-five-three {
    padding-left: 32px
  }

  [dir=ltr] .grid-five-three,
  [dir=rtl] .grid-five-three {
    padding-right: 32px
  }

  [dir=rtl] .grid-five-three {
    padding-left: 32px
  }

  .grid-five-three {
    display: -ms-flexbox;
    display: flex
  }

  @supports (display:grid) {
    .grid-five-three {
      display: grid;
      grid-column-gap: 32px;
      padding: 0;
      max-width: none;
      grid-template-columns: [complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]
    }

    @media (min-width:35em) {
      .grid-five-three {
        grid-template-columns: [complete-start] minmax(16px, 1fr) [five-start] repeat(5, minmax(0, 130px)) [five-end three-start] repeat(3, minmax(0, 130px)) [three-end] minmax(16px, 1fr) [complete-end]
      }
    }
  }

  .grid-five-three .col1,
  .grid-five-three .col2 {
    padding: 0
  }
}

.grid-five-three .col1,
.grid-five-three .col2 {
  -ms-flex-negative: 1;
  flex-shrink: 1
}

[dir=ltr] .grid-five-three .col1 {
  margin-right: 32px
}

[dir=rtl] .grid-five-three .col1 {
  margin-left: 32px
}

.grid-five-three .col1 {
  -ms-flex: 1 1 62%;
  flex: 1 1 62%;
  grid-column-start: five-start;
  grid-column-end: five-end
}

@supports (display:grid) {
  [dir=ltr] .grid-five-three .col1 {
    margin-right: 0
  }

  [dir=rtl] .grid-five-three .col1 {
    margin-left: 0
  }
}

.grid-five-three .col2 {
  -ms-flex: 1 1 37%;
  flex: 1 1 37%;
  grid-column-start: three-start;
  grid-column-end: three-end
}

.grid-five-three .col12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  grid-column-start: five-start;
  grid-column-end: three-end
}

[dir=ltr] .grid-4q {
  padding-left: 32px
}

[dir=ltr] .grid-4q,
[dir=rtl] .grid-4q {
  padding-right: 32px
}

[dir=rtl] .grid-4q {
  padding-left: 32px
}

.grid-4q {
  display: -ms-flexbox;
  display: flex
}

@supports (display:grid) {
  .grid-4q {
    display: grid;
    grid-column-gap: 32px;
    padding: 0;
    max-width: none;
    grid-template-columns: [complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end]
  }

  .grid-4q.site-footer {
    padding-top: 16px;
    padding-bottom: 16px
  }

  @media (min-width:60em) {
    .grid-4q {
      grid-template-columns: [complete-start] minmax(16px, 1fr) [content-start q1-start] repeat(2, minmax(0, 130px)) [q1-end q2-start] repeat(2, minmax(0, 130px)) [q2-end q3-start] repeat(2, minmax(0, 130px)) [q3-end q4-start] repeat(2, minmax(0, 130px)) [q4-end content-end] minmax(16px, 1fr) [complete-end]
    }
  }
}

.grid-4q.nogap {
  grid-template-columns: [complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end]
}

@media (min-width:60em) {
  .grid-4q.nogap {
    grid-template-columns: [complete-start] minmax(16px, 1fr) [content-start q1-start] repeat(2, minmax(0, 158px)) [q1-end q2-start] repeat(2, minmax(0, 158px)) [q2-end q3-start] repeat(2, minmax(0, 158px)) [q3-end q4-start] repeat(2, minmax(0, 158px)) [q4-end content-end] minmax(16px, 1fr) [complete-end]
  }
}

.grid-4q.nogap {
  grid-column-gap: 0
}

[dir=ltr] .grid-4q .q1-start {
  margin-right: 32px
}

[dir=rtl] .grid-4q .q1-start {
  margin-left: 32px
}

.grid-4q .q1-start {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  grid-column-start: q1-start
}

[dir=ltr] .grid-4q .q2-start {
  margin-right: 32px
}

[dir=rtl] .grid-4q .q2-start {
  margin-left: 32px
}

.grid-4q .q2-start {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  grid-column-start: q2-start
}

[dir=ltr] .grid-4q .q3-start {
  margin-right: 32px
}

[dir=rtl] .grid-4q .q3-start {
  margin-left: 32px
}

.grid-4q .q3-start {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  grid-column-start: q3-start
}

[dir=ltr] .grid-4q .q4-start {
  margin-right: 32px
}

[dir=rtl] .grid-4q .q4-start {
  margin-left: 32px
}

.grid-4q .q4-start {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  grid-column-start: q4-start
}

.grid-4q .q1-end {
  grid-column-end: q1-end
}

.grid-4q .q2-end {
  grid-column-end: q2-end
}

.grid-4q .q3-end {
  grid-column-end: q3-end
}

[dir=ltr] .grid-4q .q4-end {
  margin-right: 0
}

[dir=rtl] .grid-4q .q4-end {
  margin-left: 0
}

.grid-4q .q4-end {
  grid-column-end: q4-end
}

.grid-4q .q1-start.q2-end,
.grid-4q .q2-start.q3-end,
.grid-4q .q3-start.q4-end {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%
}

.grid-4q .q1-start.q3-end,
.grid-4q .q2-start.q4-end {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%
}

[dir=ltr] .grid-4q.nogap .q1-start,
[dir=ltr] .grid-4q.nogap .q2-start,
[dir=ltr] .grid-4q.nogap .q3-start,
[dir=ltr] .grid-4q.nogap .q4-start {
  margin-right: 0
}

[dir=rtl] .grid-4q.nogap .q1-start,
[dir=rtl] .grid-4q.nogap .q2-start,
[dir=rtl] .grid-4q.nogap .q3-start,
[dir=rtl] .grid-4q.nogap .q4-start {
  margin-left: 0
}

@supports(display:grid) {

  [dir=ltr] .grid-4q .q1-start,
  [dir=ltr] .grid-4q .q2-start,
  [dir=ltr] .grid-4q .q3-start,
  [dir=ltr] .grid-4q .q4-start {
    margin-right: 0
  }

  [dir=rtl] .grid-4q .q1-start,
  [dir=rtl] .grid-4q .q2-start,
  [dir=rtl] .grid-4q .q3-start,
  [dir=rtl] .grid-4q .q4-start {
    margin-left: 0
  }
}

.leftcol nav {
  -ms-flex-preferred-size: 24.25%;
  flex-basis: 24.25%;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

[dir=ltr] .leftcol main {
  margin-left: 32px
}

[dir=rtl] .leftcol main {
  margin-right: 32px
}

.leftcol main {
  grid-area: content;
  -ms-flex: 1;
  flex: 1
}

@supports (display:grid) {
  [dir=ltr] .leftcol main {
    margin-left: 0
  }

  [dir=rtl] .leftcol main {
    margin-right: 0
  }
}

@media (min-width:35em) {
  [dir=ltr] .grid-line-right {
    border-right: 1px solid var(--line-grey)
  }

  [dir=rtl] .grid-line-right {
    border-left: 1px solid var(--line-grey)
  }

  [dir=ltr] .grid-line-right {
    margin-right: -17px !important
  }

  [dir=rtl] .grid-line-right {
    margin-left: -17px !important
  }

  [dir=ltr] .grid-line-right {
    padding-right: 17px !important
  }

  [dir=rtl] .grid-line-right {
    padding-left: 17px !important
  }

  [dir=ltr] .grid-line-right {
    border-right: 1px solid #ddd
  }

  [dir=rtl] .grid-line-right {
    border-left: 1px solid #ddd
  }
}

@media (min-width:35em) {
  [dir=ltr] .grid-line-left {
    border-left: 1px solid var(--line-grey)
  }

  [dir=rtl] .grid-line-left {
    border-right: 1px solid var(--line-grey)
  }

  [dir=ltr] .grid-line-left {
    margin-left: -16px !important
  }

  [dir=rtl] .grid-line-left {
    margin-right: -16px !important
  }

  [dir=ltr] .grid-line-left {
    padding-left: 16px !important
  }

  [dir=rtl] .grid-line-left {
    padding-right: 16px !important
  }

  [dir=ltr] .grid-line-left {
    border-left: 1px solid #ddd
  }

  [dir=rtl] .grid-line-left {
    border-right: 1px solid #ddd
  }
}

#site-header {
  background-color: #005a9c;
  background-color: var(--w3c-classic);
  color: #fff;
  color: var(--pure-white)
}

@media print {
  #site-header {
    background-color: #f2f2f2;
    background-color: var(--off-white);
    color: #000
  }
}

#site-header {
  padding-top: 3px
}

@supports (display:grid) {
  [dir=ltr] #site-header {
    padding-left: 8px
  }

  [dir=ltr] #site-header,
  [dir=rtl] #site-header {
    padding-right: 8px
  }

  [dir=rtl] #site-header {
    padding-left: 8px
  }
}

#site-header.header-minimal {
  margin-bottom: 32px
}

#site-header a {
  color: #fff;
  color: var(--pure-white)
}

@media print {
  #site-header a {
    color: #005a9c;
    color: var(--w3c-classic)
  }
}

@media print {
  #site-header a:after {
    content: ""
  }
}

.wai {
  line-height: 1.2
}

@media (min-width:35em) {
  .wai {
    vertical-align: middle;
    font-size: 1.5625rem
  }
}

.logos {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  padding: 16px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 60%
}

@supports (display:grid) {
  .logos {
    width: auto
  }
}

.logos .claim {
  font-size: 14px;
  font-size: .875rem;
  font-style: italic
}

.logos .claim:lang(ar) {
  font-style: normal
}

[dir=ltr] .logos .claim {
  margin-left: 16px
}

[dir=rtl] .logos .claim {
  margin-right: 16px
}

[dir=ltr] .logos .claim {
  padding-left: 16px
}

[dir=rtl] .logos .claim {
  padding-right: 16px
}

[dir=ltr] .logos .claim {
  border-left: 1px solid var(--gold)
}

[dir=rtl] .logos .claim {
  border-right: 1px solid var(--gold)
}

[dir=ltr] .logos .claim {
  border-left: 1px solid #eed009
}

[dir=rtl] .logos .claim {
  border-right: 1px solid #eed009
}

.logos .claim {
  color: #fff;
  color: var(--pure-white)
}

@media print {
  .logos .claim {
    color: #005a9c;
    color: var(--w3c-classic)
  }
}

.logos .claim {
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  display: none
}

@media (min-width:35em) {
  .logos .claim {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
  }
}

@media (min-width:23em) {
  [dir=ltr] .home {
    margin-right: 32px
  }

  [dir=rtl] .home {
    margin-left: 32px
  }
}

.home {
  text-decoration: none;
  transition: color .25s ease-in .1s;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

@supports (display:grid) {
  .home {
    -ms-flex: 0;
    flex: 0
  }
}

@media (min-width:60em) {
  [dir=ltr] .home {
    margin-right: 8px
  }

  [dir=rtl] .home {
    margin-left: 8px
  }
}

.home img,
.home svg {
  vertical-align: middle;
  color: inherit;
  fill: currentColor;
  height: 30px
}

@media (min-width:35em) {

  .home img,
  .home svg {
    height: 46px
  }
}

.home {
  [dir=ltr] img {
    padding-right: 8px
  }

  [dir=rtl] img {
    padding-left: 8px
  }
}

.home.w3c {
  border-bottom: 2px solid transparent
}

.home.w3c:hover {
  border-bottom-color: currentColor
}

.home .wai {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center
}

@media (min-width:35em) {
  .home .wai {
    font-size: 1.25rem
  }
}

.home .wai .wa {
  padding-bottom: 2px
}

.home .wai .i {
  border-top: 1px solid #eed009;
  border-top: 1px solid var(--gold);
  padding-top: 2px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.home:focus,
.home:hover {
  text-decoration: underline;
  color: #eed009 !important;
  color: var(--gold) !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0
}

h1,
h2 {
  margin: 60px 0 20px
}

h3 {
  margin: 40px 0 20px
}

h4,
h5,
h6 {
  margin: 20px 0 10px
}

h1,
h2,
h3,
h4 {
  color: #005a6a;
  color: var(--wai-green)
}

@media print {

  h1,
  h2,
  h3,
  h4 {
    color: #000
  }
}

h1 {
  font-size: 24px;
  font-size: 1.5rem
}

@media (min-width:35em) {
  h1 {
    font-size: 2rem
  }
}

@media (min-width:60em) {
  h1 {
    font-size: 2.375rem
  }
}

@media print {
  h1 {
    font-size: 24pt
  }
}

h1 {
  line-height: 1.2;
  font-weight: 400
}

h1,
h1+h2 {
  margin-top: 0
}

h2 {
  font-size: 22px;
  font-size: 1.375rem
}

@media print {
  h2 {
    font-size: 21pt
  }
}

h2 {
  line-height: 1.2;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--line-grey)
}

h2+h3 {
  margin-top: 0
}

h3,
h4 {
  font-size: 18px;
  font-size: 1.125rem
}

@media print {

  h3,
  h4 {
    font-size: 16pt
  }
}

h3,
h4 {
  line-height: 1.4
}

h3+h4 {
  margin-top: 0
}

h4 {
  font-weight: 400
}

@media print {
  h4 {
    font-size: 14pt
  }
}

h4+h5 {
  margin-top: 0
}

h5 {
  font-weight: 700;
  line-height: 1.6;
  font-size: 16px;
  font-size: 1rem
}

@media print {
  h5 {
    font-size: 12pt
  }
}

h5+h6 {
  margin-top: 0
}

h6 {
  font-size: 14px;
  font-size: .875rem
}

@media print {
  h6 {
    font-size: 12pt
  }
}

h6 {
  line-height: 1.8
}

h1.ap:before,
h1.ex:before,
h2.ap:before,
h2.ex:before,
h3.ap:before,
h3.ex:before,
h4.ap:before,
h4.ex:before,
h5.ap:before,
h5.ex:before,
h6.ap:before,
h6.ex:before {
  color: #036 !important;
  color: var(--w3c-blue) !important;
  font-weight: 700
}

h1.ex,
h2.ex,
h3.ex,
h4.ex,
h5.ex,
h6.ex {
  counter-increment: a;
  counter-reset: b
}

h1.ex:before,
h2.ex:before,
h3.ex:before,
h4.ex:before,
h5.ex:before,
h6.ex:before {
  content: "Example " counter(a) ": "
}

h1.ex.inap,
h2.ex.inap,
h3.ex.inap,
h4.ex.inap,
h5.ex.inap,
h6.ex.inap {
  counter-reset: none
}

h1.newap,
h2.newap,
h3.newap,
h4.newap,
h5.newap,
h6.newap {
  counter-reset: b
}

h1.newex,
h2.newex,
h3.newex,
h4.newex,
h5.newex,
h6.newex {
  counter-reset: a
}

h1.first,
h1.newexap,
h2.first,
h2.newexap,
h3.first,
h3.newexap,
h4.first,
h4.newexap,
h5.first,
h5.newexap,
h6.first,
h6.newexap {
  counter-reset: a b
}

h1.ap,
h2.ap,
h3.ap,
h4.ap,
h5.ap,
h6.ap {
  counter-increment: b
}

h1.ap:before,
h2.ap:before,
h3.ap:before,
h4.ap:before,
h5.ap:before,
h6.ap:before {
  content: "Approach " counter(b) ": "
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  color: inherit !important
}

.in-resource h1 {
  margin-bottom: 0
}

.in-resource p {
  margin-top: 0;
  font-style: italic
}

.in-resource-sub {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  font-style: italic
}

.in-resource a:visited {
  color: var(--w3c-dark)
}

#toc+h2,
.tight-page h2 {
  margin-top: 45px
}

[class*=" icon-"],
[class^=icon-] {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor
}

.icon-default {
  width: .9285714285714285em
}

.icon-info {
  width: .8571428571428571em
}

.icon-audio-description {
  width: 3.5em;
  height: 1.75em;
  margin: -.25em
}

.icon-search {
  width: .9287109375em
}

.icon-arrow-left {
  width: .8928571428571428em
}

.icon-arrow-right {
  width: .8214285714285714em
}

.icon-arrow-down,
.icon-arrow-up {
  width: .9285714285714285em
}

.icon-check-circle,
.icon-ex-circle,
.icon-external-link {
  width: .8571428571428571em
}

.icon-readmore {
  width: .7142857142857142em
}

.icon-desktop,
.icon-laptop {
  width: 1.0714285714285714em
}

.icon-tablet {
  width: .6428571428571428em
}

.icon-mobile {
  width: .42857142857142855em
}

.icon-code {
  width: 1.0714285714285714em
}

.icon-fork {
  width: .5714285714285714em
}

.icon-code-file {
  width: .8571428571428571em
}

.icon-cart-plus {
  width: .9285714285714285em
}

.icon-arrow-left-thin {
  width: .8928571428571428em
}

.icon-arrow-right-thin {
  width: .8214285714285714em
}

.icon-arrow-up-thin {
  width: .9285714285714285em
}

.icon-languages {
  height: 1em;
  width: 2.75em;
  vertical-align: -8%
}

.icon-translations {
  height: 1.6em;
  vertical-align: middle
}

img.tiny {
  --img-width: 60px
}

img.mini {
  --img-width: 90px
}

img.small {
  --img-width: 120px
}

img.normal {
  --img-width: 240px
}

img.large {
  --img-width: 480px
}

[dir=ltr] img.left {
  clear: left
}

[dir=rtl] img.left {
  clear: right
}

[dir=ltr] img.left {
  float: left
}

[dir=rtl] img.left {
  float: right
}

[dir=ltr] img.left {
  margin-right: 1em
}

[dir=rtl] img.left {
  margin-left: 1em
}

[dir=ltr] img.right {
  clear: right
}

[dir=rtl] img.right {
  clear: left
}

[dir=ltr] img.right {
  float: right
}

[dir=rtl] img.right {
  float: left
}

[dir=ltr] img.right {
  margin-left: 1em
}

[dir=rtl] img.right {
  margin-right: 1em
}

img.video {
  border-radius: calc(var(--img-width) / 20)
}

main img {
  max-width: 100%
}

main img:not([width]) {
  width: var(--img-width)
}

ul {
  list-style-type: disc
}

ul.alt,
ul.alt ul {
  list-style-type: circle
}

ol li,
ul li {
  margin-bottom: 8px
}

.linklist,
.linklist li {
  margin: 0;
  padding: 0;
  list-style: none
}

.linklist a {
  display: block;
  padding: 4px 16px;
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--line-grey);
  text-decoration: none
}

.linklist a svg {
  height: .65em
}

.linklist a:focus svg,
.linklist a:hover svg {
  color: #c0272d;
  color: var(--faded-red)
}

.linklist a:focus .visual-a,
.linklist a:hover .visual-a {
  text-decoration: underline
}

.linklist li:last-child a {
  border-bottom: none
}

.nolist,
.nolist li {
  margin: 0;
  padding: 0
}

.nolist li {
  list-style: none;
  overflow: auto
}

.withicons {
  --img-width: 240px
}

.withicons.tiny {
  --img-width: 60px
}

.withicons.mini {
  --img-width: 90px
}

.withicons.small {
  --img-width: 120px
}

.withicons.normal {
  --img-width: 240px
}

[dir=ltr] .withicons li.left img {
  float: left
}

[dir=rtl] .withicons li.left img {
  float: right
}

.withicons li.left img {
  min-width: 60px;
  width: calc(var(--img-width) / 2)
}

@media (min-width:35em) {
  [dir=ltr] .withicons li.left {
    padding-left: calc(var(--img-width) + 20px)
  }

  [dir=rtl] .withicons li.left {
    padding-right: calc(var(--img-width) + 20px)
  }

  [dir=ltr] .withicons li.left img {
    margin-left: calc((var(--img-width) + 20px) * -1)
  }

  [dir=rtl] .withicons li.left img {
    margin-right: calc((var(--img-width) + 20px) * -1)
  }

  .withicons li.left img {
    min-width: auto;
    width: var(--img-width)
  }
}

[dir=ltr] .withicons li.right img {
  float: right
}

[dir=rtl] .withicons li.right img {
  float: left
}

.withicons li.right img {
  min-width: 60px;
  width: calc(var(--img-width) / 2)
}

@media (min-width:35em) {
  [dir=ltr] .withicons li.right {
    padding-right: calc(var(--img-width) + 20px)
  }

  [dir=rtl] .withicons li.right {
    padding-left: calc(var(--img-width) + 20px)
  }

  [dir=ltr] .withicons li.right img {
    margin-right: calc((var(--img-width) + 20px) * -1)
  }

  [dir=rtl] .withicons li.right img {
    margin-left: calc((var(--img-width) + 20px) * -1)
  }

  .withicons li.right img {
    min-width: auto;
    width: var(--img-width)
  }
}

p+ol,
p+ul {
  margin-top: -8px
}

.checkbox {
  list-style-image: url(../images/checkbox.svg)
}

.columns {
  padding: 0
}

[dir=ltr] .columns>* {
  margin-left: 32px
}

[dir=rtl] .columns>* {
  margin-right: 32px
}

.four.columns,
.two.columns {
  column-gap: 32px
}

@media (min-width:35em) {

  .four.columns,
  .two.columns {
    columns: 2
  }
}

.four.columns {
  padding: 0 8px
}

@media (min-width:60em) {
  .four.columns {
    columns: 4
  }
}

.two.small.columns {
  column-gap: 32px
}

@media (min-width:35em) {
  .two.small.columns {
    columns: 1
  }
}

@media (min-width:60em) {
  .two.small.columns {
    columns: 2
  }
}

dl {
  margin: 16px 0
}

dt {
  font-weight: 700
}

.notbold dt {
  font-weight: 400
}

[dir=ltr] dd {
  margin-left: 32px
}

[dir=rtl] dd {
  margin-right: 32px
}

dd+dt {
  margin-top: 8px
}

dl.paragraph-like dd+dt {
  margin-top: 1em
}

ul.sentence,
ul.sentence li {
  font-size: 0;
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none
}

ul.sentence li {
  font-size: 16px;
  font-size: 1rem
}

.page-footer ul.sentence li {
  font-size: 14px;
  font-size: .875rem
}

ul.sentence li:before {
  content: ", "
}

ul.sentence li:first-child:before {
  content: ""
}

ul.sentence li:last-child:before {
  content: ", and "
}

ul.sentence li:last-child:after {
  content: "."
}

ul.sentence li:last-child:nth-child(2):before {
  content: " and ";
  display: inline-block
}

ul.sentence li:last-child:first-child:before {
  content: ""
}

.tool-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

.tool-header a {
  text-decoration: none
}

.tool-header-name {
  font-size: 1.125em;
  line-height: 1
}

.tool-header-logo {
  margin-left: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: start;
  align-self: start
}

.tool-header-logo img {
  display: block;
  margin: .75em 0 .75em .5em;
  height: 1.5em
}

.minimal-header {
  display: -ms-flexbox;
  display: flex;
  margin: 1.2em 0;
  -ms-flex-align: stretch;
  align-items: stretch
}

.minimal-header-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}

.minimal-header .minimal-header-link,
.minimal-header .minimal-header-name,
.minimal-header .minimal-header-subtitle {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center
}

.minimal-header-name {
  -ms-flex: width 0 0px;
  flex: width 0 0
}

.minimal-header-link,
.minimal-header-subtitle {
  -ms-flex: 1 0 0px;
  flex: 1 0 0
}

.minimal-header-name {
  font-size: 1.125em;
  line-height: 1
}

.minimal-header-subtitle {
  margin-top: 8px;
  display: block;
  font-size: .8em
}

.minimal-header-link {
  border-left: 1px solid #eed009;
  border-left: 1px solid var(--gold);
  padding-left: 8px;
  margin-left: 18px;
  display: block;
  font-size: .8em
}

.minimal-header-subtitle {
  font-style: italic
}

.minimal-header-link {
  font-weight: 400;
  margin-right: 16px
}

@media (min-width:60em) {

  .minimal-header-name,
  .tool-header-name {
    font-size: 1.5em
  }

  .minimal-header-link,
  .minimal-header-subtitle {
    font-size: 80%
  }

  .minimal-header-container {
    -ms-flex-direction: row;
    flex-direction: row
  }

  .minimal-header-subtitle {
    margin-top: 0;
    margin-bottom: 0;
    border-left: 1px solid #eed009;
    border-left: 1px solid var(--gold);
    padding-left: 8px;
    margin-left: 18px
  }
}

.minimal-header-logo {
  margin-left: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: start;
  align-self: start
}

.minimal-header-logo img {
  margin: 1px 0;
  height: 1.5em
}

@media (min-width:60em) {
  .minimal-header-logo {
    -ms-flex-direction: row;
    flex-direction: row
  }

  .minimal-header-logo img,
  .tool-header-logo img {
    height: 2em
  }
}

.minimal-header-logo a :nth-child(2) {
  margin-left: -13px
}

.minimal-header-container {
  background-color: #005a9c;
  background-color: var(--w3c-classic)
}

.minimal-header-container>.minimal-header {
  grid-column: navigation-start/content-end
}

.nav {
  grid-column: 2/span 8;
  grid-row: 1;
  overflow: auto;
  background-color: #d0e1f1;
  background-color: var(--cloudy-subtle)
}

.nav ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0;
  padding: 0
}

.nav__item {
  list-style: none;
  margin: 0;
  text-decoration: none
}

.nav__item a {
  display: block;
  font-size: .85em;
  padding: 1em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition-duration: .1s;
  border-bottom: 1px solid transparent
}

.nav__item .active {
  background-color: #fff;
  background-color: var(--pure-white);
  border-bottom: 1px solid #fff;
  border-bottom: 1px solid var(--pure-white)
}

.nav__item a:not(.active):focus,
.nav__item a:not(.active):hover,
.nav__item a:not([aria-current=page]):focus,
.nav__item a:not([aria-current=page]):hover {
  background: #e5f1fc;
  text-decoration: underline;
  -webkit-text-decoration-color: #eed009;
  text-decoration-color: #eed009;
  -webkit-text-decoration-color: var(--gold);
  text-decoration-color: var(--gold);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px
}

.nav__item a:focus {
  outline-offset: -.5em
}

.nav-container {
  background-color: #d0e1f1;
  background-color: var(--cloudy-subtle);
  margin-bottom: 2em
}

.info {
  background-color: #eed009;
  background-color: var(--gold);
  background-image: linear-gradient(180deg, #eed009, color(#eed009 blackness(15%)));
  background-image: linear-gradient(180deg, var(--gold), color(var(--gold) blackness(15%)));
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position: bottom;
  font-weight: 700;
  text-align: center
}

[dir=ltr] .info svg {
  margin-right: 8px
}

[dir=rtl] .info svg {
  margin-left: 8px
}

.info svg {
  font-size: 2em;
  vertical-align: middle;
  margin-top: -.14em
}

#controls {
  background-color: #f2f2f2;
  background-color: var(--off-white);
  padding: 0 8px
}

@media (min-width:35em) {
  [dir=ltr] #controls {
    text-align: right
  }

  [dir=rtl] #controls {
    text-align: left
  }
}

#controls {
  font-size: .8125em
}

#controls>ul {
  padding: 0;
  margin: 0
}

@media (min-width:35em) {
  #controls>ul {
    grid-column-start: navigation;
    grid-column-end: content
  }
}

[dir=ltr] #controls>ul>li {
  margin-left: 4px
}

[dir=rtl] #controls>ul>li {
  margin-right: 4px
}

[dir=ltr] #controls>ul>li {
  padding-left: 4px
}

[dir=rtl] #controls>ul>li {
  padding-right: 4px
}

#controls>ul>li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0
}

@media (min-width:35em) {
  [dir=ltr] #controls>ul>li {
    margin-left: 8px
  }

  [dir=rtl] #controls>ul>li {
    margin-right: 8px
  }

  [dir=ltr] #controls>ul>li {
    padding-left: 8px
  }

  [dir=rtl] #controls>ul>li {
    padding-right: 8px
  }

  #controls>ul>li {
    margin: 0;
    padding: 0
  }
}

[dir=ltr] #controls>ul>li {
  border-left: 1px solid var(--w3c-blue)
}

[dir=rtl] #controls>ul>li {
  border-right: 1px solid var(--w3c-blue)
}

[dir=ltr] #controls>ul>li {
  border-left: 1px solid #036
}

[dir=rtl] #controls>ul>li {
  border-right: 1px solid #036
}

#controls>ul>li:first-child {
  border-left: 0;
  border-right: 0;
  margin: 0;
  padding: 0
}

#controls a {
  color: #036;
  color: var(--w3c-blue);
  text-decoration: none;
  padding: 2px 0
}

#controls a:focus,
#controls a:hover {
  border-bottom: none;
  text-decoration: underline
}

@media print {
  #controls {
    display: none
  }
}

#controls [hidden] {
  display: none !important
}

.languagelist>ul {
  display: inline;
  margin: 0;
  padding: 0
}

.languagelist>ul>li {
  border: none;
  padding: 0;
  margin: 0;
  display: inline-block
}

[dir=ltr] .languagelist>ul>li:first-child {
  margin-right: 4px
}

[dir=rtl] .languagelist>ul>li:first-child {
  margin-left: 4px
}

.languagelist>ul>li:first-child:before {
  display: none;
  margin: 0
}

[dir=ltr] .languagelist>ul>li:before {
  margin-right: 4px
}

[dir=rtl] .languagelist>ul>li:before {
  margin-left: 4px
}

.languagelist>ul>li:before {
  content: "";
  display: inline-block;
  background-color: #005a9c;
  width: 4px;
  height: 4px;
  margin: 0;
  margin-top: -4px;
  vertical-align: middle
}

#showoptions {
  display: inline
}

.mainnav {
  position: relative;
  font-size: 14px;
  font-size: .875rem;
  border-top: 1px solid #005a9c;
  border-top: 1px solid var(--w3c-classic);
  border-bottom: 1px solid #005a9c;
  border-bottom: 1px solid var(--w3c-classic);
  background-color: #036;
  background-color: var(--w3c-blue);
  display: none
}

.mainnav.open {
  display: block
}

@media (min-width:35em) {
  .mainnav {
    display: block
  }
}

@media print {
  .mainnav {
    display: none
  }
}

.mainnav>ul {
  width: 100%;
  max-width: 1268px;
  padding: 0;
  margin: 0 auto !important;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

@media (min-width:35em) {
  .mainnav>ul {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }
}

.mainnav>ul>li {
  display: block;
  position: relative;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1
}

.mainnav>ul>li.active {
  background: #036;
  background: var(--w3c-blue)
}

.mainnav>ul>li.active>a>span {
  border-bottom: 2px solid #eed009 !important;
  border-bottom: 2px solid var(--gold) !important
}

.mainnav>ul>li>a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  color: var(--pure-white);
  text-align: center;
  min-height: 44px;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom: #005a9c;
  border-bottom: var(--w3c-classic)
}

.mainnav>ul>li>a>span {
  display: block;
  border-bottom: 2px solid transparent
}

.mainnav>ul>li>a:focus,
.mainnav>ul>li>a:hover {
  background-color: #091832;
  background-color: var(--dk-blue)
}

.mainnav>ul>li>a:focus>span,
.mainnav>ul>li>a:hover>span,
.mainnav>ul>li>a[aria-current=location]>span,
.mainnav>ul>li>a[aria-current=page]>span {
  border-bottom: 2px solid #eed009;
  border-bottom: 2px solid var(--gold)
}

.mainnav>ul>li>a[aria-current=location]:focus>span,
.mainnav>ul>li>a[aria-current=location]:hover>span,
.mainnav>ul>li>a[aria-current=page]:focus>span,
.mainnav>ul>li>a[aria-current=page]:hover>span {
  border-bottom: 2px solid #fff;
  border-bottom: 2px solid var(--pure-white)
}

[dir=ltr] .mainnav>ul>li+li>a {
  border-left: 1px solid #235a97
}

[dir=rtl] .mainnav>ul>li+li>a {
  border-right: 1px solid #235a97
}

@media (min-width:60em) {
  #openmenu {
    display: none
  }
}

@media print {
  #openmenu {
    display: none
  }
}

@media (min-width:35em) {
  .page-home #openmenu {
    display: none
  }
}

[dir=ltr] .metanav {
  text-align: right
}

[dir=rtl] .metanav {
  text-align: left
}

.metanav {
  width: 100%;
  display: none;
  font-size: .85em
}

.metanav.open {
  display: block
}

@media (min-width:35em) {
  .metanav {
    display: block
  }
}

@media print {
  .metanav {
    display: none
  }
}

.metanav a {
  text-decoration: none
}

.metanav a:focus,
.metanav a:hover,
.metanav a[aria-current=page] {
  text-decoration: underline
}

.metanav>ul {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end
}

.metanav>ul li {
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px
}

@media (min-width:35em) {
  .metanav>ul li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
  }
}

.metanav>ul li:first-child {
  border: 0
}

.metanav>ul li:last-child {
  margin-bottom: 0;
  padding: 0;
  border: 0
}

.metanav>ul li a {
  position: relative;
  min-height: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center
}

.metanav>ul li a:after,
.metanav>ul li a:before {
  position: absolute;
  top: 12px;
  left: -8px;
  bottom: 12px;
  width: 1px;
  background-color: #eed009;
  background-color: var(--gold)
}

[dir=ltr] .metanav>ul li a:before,
[dir=rtl] .metanav>ul li a:after {
  content: ""
}

@media (min-width:35em) {
  [dir=ltr] .metanav>ul li a {
    text-align: right
  }

  [dir=rtl] .metanav>ul li a {
    text-align: left
  }

  .metanav>ul li a {
    width: 100%
  }
}

[dir=ltr] .metanav>ul li:first-child a:before,
[dir=rtl] .metanav>ul li:nth-last-child(2) a:after {
  display: none
}

.metanav form[role=search] {
  background-color: #036;
  background-color: var(--w3c-blue);
  border: 1px solid #fff;
  border: 1px solid var(--pure-white)
}

.metanav form[role=search]>div {
  display: -ms-flexbox;
  display: flex
}

.metanav form[role=search] label {
  text-transform: none;
  font-weight: 400
}

.metanav form[role=search] input {
  box-sizing: border-box;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: #f2f2f2;
  color: var(--off-white);
  height: 100%;
  padding: 5px;
  margin: 0;
  width: 10em
}

.metanav form[role=search] input:focus {
  color: #fff;
  color: var(--pure-white)
}

.metanav form[role=search] input::-webkit-search-decoration {
  display: none
}

.metanav form[role=search] input::-webkit-search-cancel-button,
.metanav form[role=search] input::-webkit-search-results-button {
  filter: invert(100%)
}

.metanav form[role=search] button {
  display: block;
  margin: 0
}

.metanav form[role=search] ::-webkit-input-placeholder {
  color: #fff;
  color: var(--pure-white);
  font-style: italic;
  opacity: 1
}

.metanav form[role=search] :-moz-placeholder,
.metanav form[role=search] ::-moz-placeholder {
  color: #fff;
  color: var(--pure-white);
  font-style: italic;
  opacity: 1
}

.metanav form[role=search] :-ms-input-placeholder {
  color: #fff;
  color: var(--pure-white);
  font-style: italic;
  opacity: 1
}

.navigations {
  position: relative;
  grid-column-start: 6;
  grid-column-end: -2;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

.navigations .nava11y {
  display: block
}

.mainnav>ul,
.metanav>ul {
  margin: 0;
  padding: 0
}

.mainnav>ul>li,
.metanav>ul>li {
  list-style: none;
  margin: 0
}

.teaser.news {
  background-color: #fff;
  background-color: var(--pure-white)
}

.announce-box {
  background-color: #fafafa;
  background-color: var(--lt-off-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0;
  border-right: 0;
  padding: 10px 25px !important
}

.announce-box+.announce-box {
  border-top-width: 0
}

.announce-box>:first-child {
  margin-top: 0
}

.announce-box>:last-child {
  margin-bottom: 0
}

.notes {
  font-size: .85em
}

.notes strong:first-child {
  font-weight: 700;
  color: #005a6a;
  color: var(--wai-green)
}

.pager {
  background-color: #fff;
  background-color: var(--pure-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  margin-top: 32px
}

.pager>ul {
  box-sizing: border-box;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px
}

.pager--item,
.pager>ul {
  display: -ms-flexbox;
  display: flex
}

.pager--item {
  -ms-flex: 0 1 50%;
  flex: 0 1 50%
}

.pager--item:only-child {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%
}

.pager--item {
  list-style: none;
  margin: 0
}

.pager--item a:link {
  color: #005a6a;
  color: var(--wai-green);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex: 1 100%;
  flex: 1 100%;
  text-decoration: none;
  -ms-flex-align: center;
  align-items: center
}

.pager--item a:visited {
  color: #606;
  color: var(--visited-link)
}

.pager--item a:focus,
.pager--item a:hover {
  color: #036;
  color: var(--w3c-blue)
}

.pager--item a:active {
  color: #005a6a;
  color: var(--wai-green)
}

[dir=ltr] .pager--item.next a {
  text-align: right
}

[dir=rtl] .pager--item.next a {
  text-align: left
}

.pager--item.next a {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-pack: end;
  justify-content: flex-end
}

.pager--item-icon {
  display: -ms-flexbox;
  display: flex;
  font-size: 33px
}

[dir=ltr] .pager--item-text {
  margin-right: 8px
}

[dir=ltr] .pager--item-text,
[dir=rtl] .pager--item-text {
  margin-left: 8px
}

[dir=rtl] .pager--item-text {
  margin-right: 8px
}

.pager--item-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 auto;
  flex: 1 auto;
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column
}

.pager--item-text-direction {
  color: #1d1d1d;
  color: var(--off-black);
  font-size: 12px;
  font-size: .75rem
}

.pager--item-text-target {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1
}

.pagination {
  margin: 0;
  margin-top: 16px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 2px solid #ddd;
  border-top: 2px solid var(--line-grey)
}

.pagination ul {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  -ms-flex-pack: end;
  justify-content: flex-end
}

[dir=ltr] .pagination li {
  margin-left: 8px
}

[dir=rtl] .pagination li {
  margin-right: 8px
}

.pagination .like-a,
.pagination a {
  padding: 8px 16px;
  border-radius: 4px;
  border: 2px solid #ddd;
  border: 2px solid var(--line-grey)
}

.pagination .is-active .like-a {
  background-color: #036;
  background-color: var(--w3c-blue);
  border-color: #036;
  border-color: var(--w3c-blue);
  color: #fff;
  color: var(--pure-white)
}

.pagination a:focus,
.pagination a:hover {
  background-color: #ddd;
  background-color: var(--line-grey)
}

.progress-bar {
  height: .25em;
  width: 100%;
  background-color: #bccbd3;
  background-color: var(--cloudy);
  position: relative
}

.progress-bar__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #00818d;
  background: var(--ocean);
  transition: width .2s
}

.progress-bar--highcontrast {
  background-color: #fafafc;
  background-color: var(--body-bg);
  border: 1px solid #196cac;
  border: 1px solid var(--light-blue)
}

.progress-bar--highcontrast .progress-bar__progress {
  background-color: #196cac;
  background-color: var(--light-blue)
}

.related-content {
  background-color: #fff;
  background-color: var(--pure-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 100%;
  flex: 1 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 50px
}

.related-content--head {
  -ms-flex-align: center;
  align-items: center;
  background-color: #f2f2f2;
  background-color: var(--off-white);
  border-box-end: 1px solid #ddd;
  border-box-end: 1px solid var(--line-grey);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 48px
}

[dir=ltr] .related-content--head-icon {
  margin-right: 10px
}

[dir=rtl] .related-content--head-icon {
  margin-left: 10px
}

[dir=ltr] .related-content--head-icon {
  margin-left: 19px
}

[dir=rtl] .related-content--head-icon {
  margin-right: 19px
}

.related-content--head-icon {
  height: 22px;
  width: 22px
}

.related-content--head-heading {
  border: none;
  color: #036;
  color: var(--w3c-blue);
  -ms-flex: 1 100%;
  flex: 1 100%;
  font-size: 20px;
  margin: 0;
  padding: 0
}

.related-content--content {
  margin: 0;
  padding: 0
}

.related-content--content-list {
  list-style: none;
  margin: 22px;
  padding: 0
}

.related-content--content-list li {
  font-size: 14px;
  line-height: 2.2em
}

.resource-link {
  font-weight: 400;
  color: #3b3b3b;
  color: var(--dk-grey);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  vertical-align: middle;
  margin: 2px 0;
  padding: 2px 4px;
  border-radius: 5px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 13px;
  font-size: .8125rem;
  line-height: 1.4;
  text-decoration: none
}

.resource-link:hover {
  border-color: #ddd;
  border-color: var(--line-grey)
}

.resource-link:visited {
  color: #3b3b3b;
  color: var(--dk-grey)
}

.resource-link:focus,
.resource-link:hover {
  color: #1d1d1d;
  color: var(--off-black);
  background-color: #f2f2f2;
  background-color: var(--off-white)
}

.resource-link svg {
  margin-right: .25em
}

.resource-link--no-icon {
  background-color: #fff;
  background-color: var(--pure-white);
  padding-left: .75em;
  padding-right: .75em
}

.results-by-category ul {
  margin: 0;
  padding: 0
}

.results-by-category {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  background-color: #f2f2f2;
  background-color: var(--off-white);
  border-radius: .5em
}

@media (min-width:60em) {
  .results-by-category__missing {
    column-count: 2
  }
}

.results-by-category__item {
  list-style: none;
  display: inline-block;
  margin: 1em;
  text-align: center
}

.results-by-category__number {
  font-size: 1.5em;
  display: block;
  margin-bottom: .125em;
  line-height: 1;
  color: #00818d;
  color: var(--ocean)
}

@media (min-width:60em) {
  .results-by-category__number {
    font-size: 3em
  }
}

.results-by-category__label {
  font-size: 1.125em
}

.sidenav {
  grid-area: navigation;
  margin-bottom: 24px;
  display: none
}

.sidenav.open {
  display: block;
  margin-top: 16px
}

@media (min-width:60em) {
  .sidenav {
    display: block
  }
}

@media print {
  .sidenav {
    display: none
  }
}

.sidenav--list>:first-child>a {
  color: #fff;
  color: var(--pure-white);
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 700;
  border-top: none
}

[dir=ltr] .sidenav--list {
  border-left-width: 5px
}

[dir=rtl] .sidenav--list {
  border-right-width: 5px
}

[dir=ltr] .sidenav--list {
  border-right-width: 0
}

[dir=rtl] .sidenav--list {
  border-left-width: 0
}

.sidenav--list {
  background-color: #036;
  background-color: var(--w3c-blue);
  border: 2px solid #036;
  border: 2px solid var(--w3c-blue);
  border-bottom-width: 5px;
  border-top-width: 0;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-size: .8125rem
}

.sidenav--list a {
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  padding: 8px 24px;
  min-height: 44px;
  color: #fff;
  color: var(--pure-white);
  text-decoration: none;
  -ms-flex-align: center;
  align-items: center
}

.sidenav--list a:focus,
.sidenav--list a:hover {
  text-decoration: underline;
  background-color: #f2f2f2;
  background-color: var(--off-white);
  color: #005a6a;
  color: var(--wai-green)
}

.sidenav--list a:focus {
  outline-color: #eed009;
  outline-color: var(--gold)
}

.sidenav--list a span.lang {
  font-weight: 400
}

.sidenav--list li a {
  border-top: 1px solid #005a9c;
  border-top: 1px solid var(--w3c-classic)
}

.sidenav--list {
  .sidenav-head+& {
    border-top: none
  }
}

[dir=ltr] .sidenav--list ul {
  padding-left: 24px
}

[dir=rtl] .sidenav--list ul {
  padding-right: 24px
}

.sidenav--list ul {
  padding: 0;
  margin: 0
}

.sidenav--list a+ul {
  display: none
}

.sidenav--list a[aria-current]+ul {
  display: block
}

.sidenav--list li {
  margin: 0;
  padding: 0;
  list-style: none
}

.sidenav--list ul li:first-child a {
  border-top-color: transparent
}

.sidenav--list a[aria-current=location] {
  padding-bottom: 4px;
  font-weight: 700
}

.sidenav--list a[aria-current=page] {
  font-weight: 700;
  color: #005a6a;
  color: var(--wai-green);
  background-color: #fafafc;
  background-color: var(--body-bg);
  position: relative
}

.sidenav--list a[aria-current=page]:after,
.sidenav--list a[aria-current=page]:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: auto;
  right: 0
}

[dir=rtl] .sidenav--list a[aria-current=page]:after,
[dir=rtl] .sidenav--list a[aria-current=page]:before {
  left: 0;
  right: auto
}

.sidenav--list a[aria-current=page]:after,
.sidenav--list a[aria-current=page]:before {
  border: 1px solid #fff;
  border: 1px solid var(--pure-white);
  opacity: .9
}

.sidenav--list a[aria-current=page]:before {
  top: -2px;
  border-color: transparent #fff #fff transparent;
  border-color: transparent var(--pure-white) var(--pure-white) transparent
}

[dir=rtl] .sidenav--list a[aria-current=page]:before {
  border-color: transparent transparent #fff #fff;
  border-color: transparent transparent var(--pure-white) var(--pure-white)
}

.sidenav--list a[aria-current=page]:after {
  bottom: -2px;
  border-color: #fff #fff transparent transparent;
  border-color: var(--pure-white) var(--pure-white) transparent transparent
}

[dir=rtl] .sidenav--list a[aria-current=page]:after {
  border-color: #fff transparent transparent #fff;
  border-color: var(--pure-white) transparent transparent var(--pure-white)
}

.sidenav-languages {
  font-size: 13px;
  font-size: .8125rem;
  margin-top: 32px;
  margin-top: 2rem;
  border-radius: 3px;
  border: 2px solid #eed009;
  border: 2px solid var(--gold);
  background-color: #fff;
  background-color: var(--pure-white)
}

.sidenav-languages header {
  border-bottom: 2px solid #eed009;
  border-bottom: 2px solid var(--gold);
  padding: 8px 27px;
  font-weight: 700
}

[dir=ltr] .sidenav-languages .langlist {
  padding-left: 27px
}

[dir=rtl] .sidenav-languages .langlist {
  padding-right: 27px
}

.sidenav-languages .langlist {
  list-style-position: inside;
  list-style-type: square;
  color: #005a9c;
  color: var(--w3c-classic)
}

.sidenav-languages .langlist li {
  margin-bottom: 2px
}

[dir=ltr] .sidenav-languages p {
  padding-left: 27px
}

[dir=rtl] .sidenav-languages p {
  padding-right: 27px
}

[dir=ltr] .sidenav-languages p {
  padding-right: 0
}

[dir=rtl] .sidenav-languages p {
  padding-left: 0
}

.sidenav-languages p {
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0;
  border-top: 1px solid #eed009
}

.leftcol .standalone-resource__main {
  grid-column: 2/8;
  grid-row-start: 1
}

.standalone-resource__type-of-guidance {
  display: block;
  font-size: .5em;
  margin-bottom: .25em
}

.leftcol .standalone-resource__sidebar {
  grid-column: 8/10;
  grid-row-start: 1
}

.standalone-resource__sidebar h2 {
  margin-top: 0;
  margin-bottom: 0
}

.standalone-resource__sidebar dd {
  margin-left: 0
}

.standalone-resource__prevnext {
  grid-column: 2/8
}

.list-of-sources {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  grid-gap: 1em;
  gap: 1em
}

.list-of-sources li {
  list-style: none;
  margin-bottom: 0
}

.list-of-sources li a {
  display: block;
  text-decoration: none;
  padding: 1em;
  background: #fff;
  background: var(--pure-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  color: #1d1d1d;
  color: var(--off-black)
}

.list-of-sources li a:hover {
  background-color: #fafafa;
  background-color: var(--lt-off-white)
}

[dir=ltr] caption,
[dir=ltr] table {
  text-align: left
}

[dir=rtl] caption,
[dir=rtl] table {
  text-align: right
}

table {
  border: 1px solid #bccbd3;
  border: 1px solid var(--cloudy);
  border-collapse: collapse;
  margin-bottom: 2em
}

caption {
  font-weight: 700;
  font-size: 18px;
  font-size: 1.125rem;
  color: #005a6a;
  color: var(--wai-green);
  line-height: 1.4;
  margin-bottom: 8px
}

td,
th {
  padding: 12px 18px;
  border: 1px solid #bccbd3;
  border: 1px solid var(--cloudy);
  vertical-align: top
}

.dense td,
.dense th {
  padding: 2px 4px
}

th {
  font-weight: 700;
  color: #fff;
  color: var(--pure-white);
  background-color: #005a6a;
  background-color: var(--wai-green)
}

th a {
  color: inherit
}

th a:focus,
th a:hover {
  color: #eed009;
  color: var(--gold)
}

th a:visited {
  color: inherit
}

td>:first-child,
td>:last-child,
th>:first-child,
th>:last-child {
  margin-top: 0
}

.quiet th {
  background-color: #f2f2f2;
  background-color: var(--off-white);
  color: #036;
  color: var(--w3c-blue)
}

.quiet th a {
  color: inherit
}

.quiet th a:focus,
.quiet th a:hover {
  color: #005a6a;
  color: var(--wai-green)
}

.quiet th a:visited {
  color: inherit
}

.hyphenated {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto
}

.teaser.audiences-inline .title {
  display: block;
  font-size: 36px;
  font-size: 2.25rem
}

.making-web-accessible {
  text-align: center;
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--line-grey);
  -ms-flex-direction: column;
  flex-direction: column
}

.making-web-accessible [hidden] {
  display: none !important
}

.making-web-accessible .inner.hidesection {
  position: relative;
  -ms-flex-order: -1;
  order: -1
}

[dir=ltr] .making-web-accessible .making-web-accessible-box {
  text-align: left
}

[dir=rtl] .making-web-accessible .making-web-accessible-box {
  text-align: right
}

[dir=ltr] .making-web-accessible .mwa-icon {
  margin-right: 16px;
  margin-right: 1rem
}

[dir=rtl] .making-web-accessible .mwa-icon {
  margin-left: 16px;
  margin-left: 1rem
}

.making-web-accessible .mwa-icon {
  width: 65px;
  height: 65px
}

.making-web-accessible .mwa-icon.mwa-icon-book {
  height: 49px;
  padding-top: 16px
}

.making-web-accessible .mwa-icon.mwa-icon-computer {
  height: 57px;
  padding-top: 8px
}

.making-web-accessible .title {
  display: block;
  font-size: 36px;
  font-size: 2.25rem
}

.making-web-accessible .teaser-h h2 {
  margin: 0
}

.making-web-accessible .teaser-h p {
  margin-bottom: 8px;
  margin-bottom: .5rem
}

.making-web-accessible h3 {
  margin-top: 10px;
  font-size: 24px;
  font-size: 1.5rem;
  margin-bottom: 0
}

.making-web-accessible p {
  margin-top: 8px;
  margin-top: .5rem;
  margin-bottom: 0
}

[dir=ltr] .making-web-accessible .showhidebutton {
  float: right
}

[dir=rtl] .making-web-accessible .showhidebutton {
  float: left
}

.making-web-accessible .showhidebutton {
  position: absolute;
  top: -1.35em;
  right: 0
}

.teaser.media-inline .title {
  display: block;
  font-size: 36px;
  font-size: 2.25rem
}

.white-bg {
  background-color: #fff;
  background-color: var(--pure-white)
}

.bordered {
  border: 0;
  border-color: #ddd;
  border-color: var(--line-grey)
}

.teaser.news-teaser .title {
  display: block;
  font-size: 36px;
  font-size: 2.25rem
}

.teaser.news-teaser h3 {
  margin-bottom: 0
}

.teaser.news-teaser p {
  margin: 0
}

.teaser.resource-inline .title {
  display: block;
  font-size: 36px;
  font-size: 2.25rem
}

.teaser {
  padding-top: 32px;
  padding-bottom: 32px
}

.teaser.featured {
  background-size: cover;
  background-position: 50%
}

.teaser.featured .teaser-c {
  background-color: hsla(0, 0%, 100%, .9);
  border-top: 5px solid #c0272d;
  border-top: 5px solid var(--faded-red);
  padding: 16px 32px;
  display: block
}

.teaser-h h2,
.teaser-h h3,
.teaser-h h4,
.teaser-h h5,
.teaser-h h6 {
  margin: 0;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  color: #005a6a;
  color: var(--wai-green);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.2
}

.teaser-h h2.title,
.teaser-h h3.title,
.teaser-h h4.title,
.teaser-h h5.title,
.teaser-h h6.title {
  font-size: 24px;
  font-size: 1.5rem;
  margin: 0;
  margin-top: 10px;
  margin-bottom: 20px
}

@media (min-width:35em) {

  .teaser-h h2.title,
  .teaser-h h3.title,
  .teaser-h h4.title,
  .teaser-h h5.title,
  .teaser-h h6.title {
    font-size: 2rem
  }
}

@media (min-width:60em) {

  .teaser-h h2.title,
  .teaser-h h3.title,
  .teaser-h h4.title,
  .teaser-h h5.title,
  .teaser-h h6.title {
    font-size: 2.375rem
  }
}

.teaser-h .subtitle {
  font-weight: 700;
  margin: 0;
  font-size: 14px;
  font-size: .875rem;
  color: #1d1d1d;
  color: var(--off-black)
}

[dir=ltr] .teaser-h-icon {
  margin-right: 10px
}

[dir=rtl] .teaser-h-icon {
  margin-left: 10px
}

.teaser-h-icon {
  height: 1em;
  width: 1em;
  vertical-align: middle
}

.teaser-h-icon.full {
  display: block;
  height: 1.8em;
  width: 1.8em
}

.teaser-tip {
  text-align: center
}

.teaser-tip .teaser-h h2 {
  font-size: 28px;
  font-size: 1.75rem
}

.teaser-tip .teaser-h svg {
  display: block;
  margin: 0 auto;
  height: 1.75em;
  width: 1.75em
}

.teaser-tip .fakelink {
  margin: 0 auto
}

.fakelink {
  text-decoration: underline;
  position: relative
}

[dir=ltr] .fakelink svg {
  margin-left: 5px
}

[dir=rtl] .fakelink svg {
  margin-right: 5px
}

.fakelink svg {
  width: .75em;
  height: .75em
}

@media (min-width:35em) {
  .teaser-about p {
    font-size: 1.25rem
  }
}

@media (min-width:60em) {
  .teaser-about p {
    font-size: 1.5rem
  }
}

.teaser-about p {
  color: #686868;
  color: var(--grey)
}

.teaser-about .teaser-h h2 {
  font-weight: 700
}

.teaser-media {
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  background-color: var(--pure-white)
}

.teaser-sponsors {
  border-top: 1px solid #ddd;
  border-top: 1px solid var(--line-grey)
}

.area-teaser {
  display: block;
  background-color: #fff;
  background-color: var(--pure-white);
  border: 1px solid #ddd;
  border: 1px solid var(--line-grey);
  margin: -1px;
  padding: 20px 32px
}

@media (min-width:35em) {
  .area-teaser {
    padding: 40px
  }
}

@media (min-width:60em) {
  .area-teaser {
    padding: 60px 40px
  }
}

.area-teaser .teaser-h {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end
}

.area-teaser .teaser-h h2,
.area-teaser .teaser-h h3,
.area-teaser .teaser-h h4,
.area-teaser .teaser-h h5,
.area-teaser .teaser-h h6 {
  margin: 0;
  font-weight: 400
}

.area-teaser .teaser-h-icon {
  margin-bottom: 10px
}

.area-teaser:focus .teaser-h>:not(svg),
.area-teaser:hover .teaser-h>:not(svg) {
  text-decoration: underline
}

.video-card {
  max-width: 100%;
  width: 100%
}

@media (min-width:47.5em) {
  [dir=ltr] .video-card {
    float: right
  }

  [dir=rtl] .video-card {
    float: left
  }

  [dir=ltr] .video-card {
    margin-left: 2em
  }

  [dir=rtl] .video-card {
    margin-right: 2em
  }

  .video-card {
    max-width: 45%
  }
}

.video-card p {
  font-size: small
}

.video-card video {
  max-width: 100%;
  width: 100%;
  height: auto
}

[dir=ltr] .video-card~aside,
[dir=ltr] .video-card~h2,
[dir=ltr] .video-card~hr {
  clear: right
}

[dir=rtl] .video-card~aside,
[dir=rtl] .video-card~h2,
[dir=rtl] .video-card~hr {
  clear: left
}

.video-card .able {
  margin-top: 0
}

.video-link {
  display: inline-block;
  text-decoration: none;
  margin: 10px 0
}

.video-link span {
  display: block;
  text-align: center;
  text-decoration: underline
}

.video-link img {
  width: 240px;
  border-radius: 1rem
}

.video-link-small img {
  width: 120px;
  border-radius: .5rem
}

.video-link-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center
}

[dir=ltr] .video-link-inline img {
  margin-right: 1em
}

[dir=rtl] .video-link-inline img {
  margin-left: 1em
}

.video-link-inline img {
  width: auto;
  height: 2em;
  border-radius: .25rem
}

.video-link-inline {
  [dir=ltr] span {
    text-align: left
  }

  [dir=rtl] span {
    text-align: right
  }
}

.able-wrapper {
  margin: 0;
  padding: 0;
  height: auto;
  box-sizing: content-box !important;
  max-width: none !important
}

.able,
.able-wrapper {
  position: relative;
  width: 100%
}

.able {
  margin: 1em 0;
  z-index: 5000
}

[dir=ltr] .able-column-left {
  float: left
}

[dir=rtl] .able-column-left {
  float: right
}

[dir=ltr] .able-column-right {
  float: left
}

[dir=rtl] .able-column-right {
  float: right
}

.able .able-vidcap-container {
  background-color: #000;
  left: 0;
  margin: 0;
  position: relative;
  top: 0
}

.able-player {
  font-family: inherit;
  background-color: #262626
}

.able-offscreen {
  position: absolute;
  left: -10000px
}

[dir=rtl] .able-offscreen {
  right: -10000px;
  left: auto
}

.able-offscreen {
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.able-media-container audio {
  display: none !important
}

.able-video .able-now-playing {
  display: none
}

.able-controller {
  position: relative;
  border-top: 2px solid #4c4c4c;
  border-bottom: 2px solid #4c4c4c;
  background-color: #464646;
  min-height: 38px;
  padding: 0
}

.able-big-play-button,
.able-poster {
  position: absolute;
  top: 0;
  left: 0
}

.able-big-play-button {
  font-size: 8em;
  opacity: .5;
  filter: alpha(opacity=50);
  color: #fdfdfd;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  z-index: 6500
}

.able-big-play-button:hover {
  opacity: 1;
  filter: alpha(opacity=100)
}

.able-left-controls,
.able-right-controls {
  overflow: visible
}

.able-left-controls button,
.able-right-controls button {
  vertical-align: middle
}

[dir=ltr] .able-left-controls {
  float: left
}

[dir=ltr] .able-right-controls,
[dir=rtl] .able-left-controls {
  float: right
}

[dir=rtl] .able-right-controls {
  float: left
}

.able-black-controls,
.able-black-controls button,
.able-black-controls label {
  color: #000 !important
}

.able-black-controls .able-seekbar {
  border: 2px solid #000
}

.able-black-controls label,
.able-white-controls,
.able-white-controls button {
  color: #fff !important
}

.able-white-controls .able-seekbar {
  border: 2px solid #fff
}

.able-controller button {
  background: none;
  position: relative;
  display: inline-block;
  border-style: none;
  margin: 3px;
  padding: 0;
  font-size: 20px;
  min-width: 24px;
  outline: 2px solid #464646;
  border: none;
  overflow: visible !important;
  z-index: 6600
}

.able-controller button>img,
.able-controller button>span {
  width: 20px;
  margin: 0 auto;
  padding: 0;
  z-index: 6700
}

.able-controller .buttonOff {
  opacity: .5;
  filter: alpha(opacity=50);
  z-index: 6800
}

.able-controller .able-seekbar {
  margin: 0 5px;
  z-index: 6900
}

.able-controller button:focus,
.able-controller button:hover {
  outline-style: solid;
  outline-width: medium
}

.able-controller button:hover {
  outline-color: #8ab839 !important
}

.able-controller button:focus {
  outline-color: #ffbb37 !important
}

.able-seekbar-wrapper {
  display: inline-block;
  vertical-align: middle
}

.able-seekbar {
  position: relative;
  height: .5em;
  border: 1px solid;
  background-color: #000;
  margin: 0 3px;
  border: 2px solid #fff
}

.able-seekbar-loaded {
  background-color: #464646;
  z-index: 5100
}

.able-seekbar-loaded,
.able-seekbar-played {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: .5em
}

.able-seekbar-played {
  background-color: #dadada;
  z-index: 5200
}

.able-seekbar-head {
  display: inline-block;
  position: relative;
  left: 0;
  top: -.45em;
  background-color: #fdfdfd;
  width: .8em;
  height: .8em;
  border: 1px solid;
  border-radius: .8em;
  z-index: 5500
}

.able-volume-slider {
  width: 34px;
  height: 50px;
  background-color: #464646;
  padding: 10px 0;
  position: absolute;
  right: 0;
  top: -74px;
  display: block;
  z-index: 9100
}

.able-volume-track {
  display: block;
  position: relative;
  height: 100%;
  width: 5px;
  margin: 0 auto;
  background-color: #999
}

.able-volume-track.able-volume-track-on {
  background-color: #dadada;
  position: absolute;
  height: 20px;
  top: 30px
}

.able-volume-head {
  display: inline-block;
  background-color: #fdfdfd;
  outline: 1px solid #333;
  position: absolute;
  height: 7px;
  width: 15px;
  left: -5px;
  top: 23px;
  z-index: 9175
}

.able-volume-head:focus,
.able-volume-head:hover {
  background-color: #ffbb37 !important
}

.able-volume-help {
  display: none
}

.able-status-bar {
  height: 1.5em;
  min-height: 1.5em;
  color: #ccc;
  font-size: .9em;
  background-color: transparent;
  padding: .5em .5em .25em
}

[dir=ltr] .able-status-bar span.able-timer {
  text-align: left
}

[dir=rtl] .able-status-bar span.able-timer {
  text-align: right
}

[dir=ltr] .able-status-bar span.able-timer {
  float: left
}

[dir=rtl] .able-status-bar span.able-timer {
  float: right
}

.able-status-bar span.able-timer {
  width: 32%
}

[dir=ltr] .able-status-bar span.able-speed {
  float: left
}

[dir=rtl] .able-status-bar span.able-speed {
  float: right
}

.able-status-bar span.able-speed {
  width: 33%;
  text-align: center
}

[dir=ltr] .able-status {
  float: right
}

[dir=rtl] .able-status {
  float: left
}

.able-status {
  font-style: italic;
  width: 32%;
  text-align: right
}

div.able-captions-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.35em;
  display: block;
  z-index: 6000
}

div.able-captions {
  display: none;
  padding: .15em .25em;
  background-color: #000;
  font-size: 1.1em;
  color: #fff;
  opacity: .75
}

div.able-captions-overlay {
  position: absolute;
  margin: 0;
  bottom: 0
}

div.able-captions-below,
div.able-descriptions {
  position: relative;
  min-height: 2.8em
}

div.able-descriptions {
  color: #ff6;
  background-color: #262626;
  border-top: 1px solid #666;
  margin: 0;
  padding: 3%;
  width: 94%;
  text-align: center
}

div.able-now-playing {
  text-align: center;
  font-weight: 700;
  font-size: 1.1em;
  color: #fff;
  background-color: transparent;
  padding: .5em .5em 1em
}

div.able-now-playing span {
  font-size: .9em
}

div.able-now-playing span span {
  display: block
}

[dir=ltr] div.able-modal-dialog {
  margin-left: auto
}

[dir=ltr] div.able-modal-dialog,
[dir=rtl] div.able-modal-dialog {
  margin-right: auto
}

[dir=rtl] div.able-modal-dialog {
  margin-left: auto
}

div.able-modal-dialog {
  position: absolute;
  height: auto;
  max-width: 90%;
  left: 0;
  right: 0;
  outline: 0 none;
  display: none;
  color: #000;
  background-color: #fafafa;
  box-sizing: content-box !important;
  z-index: 10000
}

div.able-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .5;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  z-index: 9500
}

button.modalCloseButton {
  position: absolute;
  top: 5px;
  right: 5px
}

[dir=ltr] button.modal-button {
  margin-right: 5px
}

[dir=rtl] button.modal-button {
  margin-left: 5px
}

div.able-modal-dialog button:focus,
div.able-modal-dialog button:hover,
div.able-modal-dialog input:focus,
div.able-modal-dialog input:hover {
  outline-style: solid;
  outline-width: 2px
}

div.able-modal-dialog button:hover,
div.able-modal-dialog input:hover {
  outline-color: #8ab839
}

div.able-modal-dialog button:focus,
div.able-modal-dialog input:focus {
  outline-color: #ffbb37
}

div.able-modal-dialog h1 {
  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.2em;
  margin: .75em 0;
  color: #000;
  text-align: center
}

.able-help-div,
.able-prefs-form,
.able-resize-form {
  background-color: #f5f5f5;
  border: medium solid #ccc;
  padding: .5em 1em;
  margin: 0 0 0 1em;
  width: 25em;
  display: none
}

[dir=ltr] .able-prefs-form fieldset {
  margin-left: 0
}

[dir=rtl] .able-prefs-form fieldset {
  margin-right: 0
}

.able-prefs-form fieldset {
  padding-left: 0;
  border: none
}

.able-prefs-form legend {
  color: #000;
  font-weight: 700;
  font-size: 1.1em
}

[dir=ltr] .able-prefs-form fieldset div {
  margin-left: 1em
}

[dir=rtl] .able-prefs-form fieldset div {
  margin-right: 1em
}

.able-prefs-form fieldset div {
  display: table
}

.able-prefs-form fieldset div input {
  display: table-cell;
  width: 1em;
  vertical-align: middle
}

.able-prefs-form fieldset div label {
  display: table-cell;
  padding-left: .5em
}

[dir=ltr] fieldset.able-prefs-keys div {
  float: left
}

[dir=rtl] fieldset.able-prefs-keys div {
  float: right
}

[dir=ltr] fieldset.able-prefs-keys div {
  margin-right: 1em
}

[dir=rtl] fieldset.able-prefs-keys div {
  margin-left: 1em
}

[dir=ltr] div.able-desc-pref-prompt {
  margin-left: 1em !important
}

[dir=rtl] div.able-desc-pref-prompt {
  margin-right: 1em !important
}

div.able-desc-pref-prompt {
  font-weight: 700;
  font-style: italic
}

[dir=ltr] div.able-prefDescFormat>div {
  margin-left: 1.5em
}

[dir=rtl] div.able-prefDescFormat>div {
  margin-right: 1.5em
}

[dir=ltr] .able-prefs-captions label,
[dir=ltr] .able-prefs-captions select {
  float: left
}

[dir=rtl] .able-prefs-captions label,
[dir=rtl] .able-prefs-captions select {
  float: right
}

.able-prefs-captions label,
.able-prefs-captions select {
  display: block;
  margin-bottom: .25em
}

[dir=ltr] fieldset.able-prefs-captions label {
  text-align: right
}

[dir=rtl] fieldset.able-prefs-captions label {
  text-align: left
}

fieldset.able-prefs-captions label {
  width: 6em;
  padding-right: 1em
}

fieldset.able-prefs-captions select {
  width: 10em;
  font-size: .9em;
  border-radius: none
}

.able-prefs-form div.able-captions-sample {
  padding: .5em;
  text-align: center
}

.able-prefs-form h2 {
  margin-top: 0;
  margin-bottom: .5em;
  font-size: 1.1em
}

.able-prefs-form ul {
  margin-top: 0
}

able-prefs-form-keyboard ul {
  list-style-type: none
}

span.able-modkey-alt,
span.able-modkey-ctrl,
span.able-modkey-shift {
  color: #666;
  font-style: italic
}

span.able-modkey {
  font-weight: 700;
  color: #000;
  font-size: 1.1em
}

.able-resize-form h1 {
  font-size: 1.15em
}

.able-resize-form div div {
  margin: 1em
}

.able-resize-form label {
  padding-right: .5em;
  font-weight: 700
}

.able-resize-form input[type=text] {
  font-size: 1em
}

.able-resize-form input[readonly] {
  color: #aaa
}

.able-window-toolbar {
  background-color: #464646;
  min-height: 15px;
  padding: 10px;
  border-style: solid;
  border-width: 0 0 1px
}

.able-draggable:hover {
  cursor: move
}

.able-window-toolbar .able-button-handler-preferences {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5em;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  z-index: 9300
}

.able-window-toolbar .able-button-handler-preferences:focus,
.able-window-toolbar .able-button-handler-preferences:hover {
  outline-style: solid;
  outline-width: medium
}

.able-window-toolbar .able-button-handler-preferences:hover {
  outline-color: #8ab839 !important
}

.able-window-toolbar .able-button-handler-preferences:focus {
  outline-color: #ffbb37 !important
}

.able-window-toolbar .able-popup {
  position: absolute;
  cursor: default;
  right: 0;
  top: 0;
  display: block
}

.able-drag {
  border: 2px dashed #f90;
  cursor: move
}

.able-resizable {
  position: absolute;
  width: 16px;
  height: 16px;
  padding: 5px 0 0 5px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  background: transparent 100% 100% url(../ableplayer/images/wingrip.png) no-repeat
}

.able-sign-window {
  position: relative;
  margin: 1em;
  z-index: 8000
}

.able-sign-window video {
  width: 100%
}

.able-sign-window:focus {
  outline: none
}

div.able-chapters-div {
  padding: 0
}

div.able-chapters-div .able-chapters-heading {
  margin: 1em .75em;
  font-size: 1.1em;
  font-weight: 700
}

div.able-chapters-div ul {
  list-style-type: none;
  padding-left: 0
}

div.able-chapters-div ul li {
  max-width: 100%;
  padding: 0;
  height: 2em
}

[dir=ltr] div.able-chapters-div button {
  text-align: left
}

[dir=rtl] div.able-chapters-div button {
  text-align: right
}

div.able-chapters-div button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: #000;
  font-size: 1em;
  padding: .15em 1em
}

div.able-chapters-div li.able-current-chapter {
  background-color: #000 !important
}

div.able-chapters-div li.able-current-chapter button {
  color: #fff !important
}

div.able-chapters-div li.able-focus {
  background-color: #4c4c4c
}

div.able-chapters-div button::-moz-focus-inner,
div.able-chapters-div button:focus,
div.able-chapters-div button:hover {
  border: 0;
  outline: none;
  color: #fff !important
}

.able-alert,
.able-tooltip {
  position: absolute;
  padding: 5px 10px;
  border-color: #000;
  border-width: 1px;
  color: #000 !important;
  background-color: #ccc;
  border-radius: 5px;
  display: block
}

.able-alert {
  background-color: #ffc;
  box-shadow: 0 0 16px #262626;
  z-index: 9400
}

.able-popup {
  z-index: 9200
}

.able-tooltip {
  z-index: 9000
}

.able-popup {
  position: absolute;
  margin: 0;
  padding: 0;
  border-color: #000;
  border-width: 1px;
  background-color: #000;
  opacity: .85;
  border-radius: 5px;
  display: block;
  cursor: default;
  list-style: none
}

ul.able-popup {
  list-style-type: none
}

.able-popup li {
  padding: .25em 1em .25em .25em;
  margin: 1px;
  color: #fff
}

.able-popup li.able-focus {
  background-color: #ccc;
  color: #000
}

.able-popup-captions li {
  padding-left: 1em
}

.able-popup-captions li[aria-checked=true] {
  padding-left: 0
}

.able-popup-captions li[aria-checked=true]:before {
  content: "\2713  "
}

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  height: 400px;
  z-index: 7000;
  outline: none;
  padding-bottom: 25px;
  background-color: #fff
}

.able-transcript {
  position: relative;
  overflow-y: scroll;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #fff;
  height: 350px
}

.able-transcript div {
  margin: 1em 0
}

.able-transcript-heading {
  font-size: 1.4em;
  font-weight: 700
}

.able-transcript-chapter-heading {
  font-size: 1.2em;
  font-weight: 700
}

.able-transcript div.able-transcript-desc {
  background-color: #fee;
  border: thin solid #336;
  font-style: italic;
  padding: 1em
}

.able-transcript .able-unspoken {
  font-weight: 700
}

.able-transcript .able-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px)
}

.able-highlight {
  background: #ff6
}

.able-previous {
  background: #000 !important;
  font-style: italic
}

.able-transcript span:active,
.able-transcript span:focus,
.able-transcript span:hover {
  background: #cf6;
  cursor: pointer
}

[dir=ltr] .able-window-toolbar label {
  margin-right: 10px
}

[dir=rtl] .able-window-toolbar label {
  margin-left: 10px
}

.able-window-toolbar label {
  color: #fff
}

.able-controller button:focus,
.able-controller button:hover,
.able-controller input:focus,
.able-controller input:hover,
.able-seekbar-head:focus,
.able-seekbar-head:hover,
.able-window-toolbar input:focus,
.able-window-toolbar input:hover,
.able-window-toolbar select:focus,
.able-window-toolbar select:hover {
  outline-style: solid;
  outline-width: 2px
}

.able-controller button:focus,
.able-controller input:focus,
.able-seekbar-head:focus,
.able-window-toolbar input:focus,
.able-window-toolbar select:focus {
  outline-color: #ffbb37
}

.able-controller button:hover,
.able-controller input:hover,
.able-seekbar-head:hover,
.able-window-toolbar input:hover,
.able-window-toolbar select:hover {
  outline-color: #8ab839
}

[dir=ltr] .able-window-toolbar .transcript-language-select-wrapper {
  float: right
}

[dir=rtl] .able-window-toolbar .transcript-language-select-wrapper {
  float: left
}

.able-window-toolbar .transcript-language-select-wrapper {
  padding-right: 30px
}

.able-playlist {
  list-style-type: none;
  margin: 0;
  background-color: #fff;
  padding: 5px 0
}

.able-playlist li {
  background-color: #ddd;
  margin: 5px;
  padding: 0;
  border: 2px solid #aaa;
  border-radius: 5px;
  -moz-border-radius: 5px
}

.able-playlist li button {
  border: none;
  color: #000;
  background-color: transparent;
  font-size: 1em;
  width: 100%;
  padding: 5px 10px;
  text-align: left
}

.able-playlist li button:active,
.able-playlist li button:focus,
.able-playlist li button:hover {
  background-color: #ffeeb3;
  color: #000;
  text-decoration: none;
  outline: none
}

.able-playlist li button::-moz-focus-inner {
  border: 0
}

.able-playlist li button img {
  width: 100px;
  float: left;
  margin-right: 10px
}

.able-playlist li.able-current {
  background-color: #340449;
  border-color: #230330
}

.able-playlist li.able-current button {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  outline: none
}

.able-playlist li.able-current button:active,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:hover {
  color: #000
}

.able-search-results ul li {
  font-size: 1.1em;
  margin-bottom: 1em
}

.able-search-results-time {
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer
}

.able-search-results-time:active,
.able-search-results-time:focus,
.able-search-results-time:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none
}

.able-search-results-text {
  padding-left: 1em
}

.able-search-term {
  background-color: #ffc;
  font-weight: 700
}

#able-vts-instructions {
  margin-bottom: 1.5em;
  padding: 1em;
  border: 1px solid #999;
  width: 720px;
  max-width: 90%
}

#able-vts fieldset {
  margin: 1em;
  border: none
}

#able-vts fieldset legend {
  color: #000;
  font-weight: 700
}

[dir=ltr] #able-vts fieldset div {
  float: left
}

[dir=rtl] #able-vts fieldset div {
  float: right
}

#able-vts fieldset div {
  padding-right: 1em
}

[dir=ltr] #able-vts table {
  clear: left
}

[dir=rtl] #able-vts table {
  clear: right
}

#able-vts table,
#able-vts table td,
#able-vts table th {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: .5em .75em
}

#able-vts table th.actions {
  min-width: 140px
}

#able-vts table td button {
  width: auto;
  padding: 0;
  margin: 2px
}

#able-vts table td button svg {
  width: 16px;
  height: 16px
}

#able-vts table button:hover svg {
  fill: #c00
}

tr.kind-chapters,
tr.kind-subtitles {
  background-color: #fff
}

tr.kind-descriptions {
  background-color: #fee
}

tr.kind-chapters {
  background-color: #e6ffe6
}

.able-vts-dragging {
  background-color: #ffc
}

div#able-vts-icon-credit {
  margin: 1em
}

div#able-vts-alert {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  border: 2px solid #666;
  background-color: #ffc;
  padding: 1em;
  font-weight: 700;
  z-index: 9400
}

button#able-vts-save {
  font-size: 1em;
  padding: .25em;
  border-radius: 5px;
  margin-bottom: 1em;
  font-weight: 700
}

button#able-vts-save:focus,
button#able-vts-save:hover {
  color: #fff;
  background-color: #060
}

#able-vts textarea,
.able-vts-output-instructions {
  width: 720px;
  max-width: 90%
}

#able-vts textarea {
  height: 200px
}

.able-clipped,
.able-screenreader-alert {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important
}

.able-error {
  display: block;
  background: #ffc;
  border: 2px solid #000;
  color: red;
  margin: .75em;
  padding: .5em
}

.able-fallback {
  display: block;
  text-align: center;
  border: 2px solid #335;
  background-color: #eee;
  color: #000;
  font-weight: 700;
  font-size: 1.1em;
  padding: 1em;
  margin-bottom: 1em;
  max-width: 500px;
  width: 95%
}

[dir=ltr] .able-fallback div,
[dir=ltr] .able-fallback p,
[dir=ltr] .able-fallback ul {
  text-align: left
}

[dir=rtl] .able-fallback div,
[dir=rtl] .able-fallback p,
[dir=rtl] .able-fallback ul {
  text-align: right
}

.able-fallback li {
  font-weight: 400
}

.able-fallback img {
  width: 90%;
  margin: 1em auto;
  opacity: .3
}

.able-fallback img.able-poster {
  position: relative
}

button svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor
}

@font-face {
  font-family: able;
  src: url(../ableplayer/button-icons/fonts/able.eot?dqripi);
  src: url(../ableplayer/button-icons/fonts/able.eot?dqripi#iefix) format("embedded-opentype"), url(../ableplayer/button-icons/fonts/able.ttf?dqripi) format("truetype"), url(../ableplayer/button-icons/fonts/able.woff?dqripi) format("woff"), url(../ableplayer/button-icons/fonts/able.svg?dqripi#able) format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

[class*=" icon-"],
[class^=icon-] {
  font-family: able !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-play:before {
  content: "\f04b"
}

.icon-pause:before {
  content: "\f04c"
}

.icon-stop:before {
  content: "\f04d"
}

.icon-restart:before {
  content: "\e900"
}

.icon-rewind:before {
  content: "\e603"
}

.icon-forward:before {
  content: "\e604"
}

.icon-previous:before {
  content: "\e901"
}

.icon-next:before {
  content: "\e902"
}

.icon-slower:before {
  content: "\f0dd"
}

.icon-faster:before {
  content: "\f0de"
}

.icon-turtle:before {
  content: "\e904"
}

.icon-rabbit:before {
  content: "\e905"
}

.icon-ellipsis:before {
  content: "\e903"
}

.icon-pipe:before {
  content: "\e600"
}

.icon-captions:before {
  content: "\e601"
}

.icon-descriptions:before {
  content: "\e602"
}

.icon-sign:before {
  content: "\e60a"
}

.icon-volume-mute:before {
  content: "\e606"
}

.icon-volume-soft:before {
  content: "\e60c"
}

.icon-volume-medium:before {
  content: "\e605"
}

.icon-volume-loud:before {
  content: "\e60b"
}

.icon-volume-up:before {
  content: "\e607"
}

.icon-volume-down:before {
  content: "\e608"
}

.icon-chapters:before {
  content: "\e609"
}

.icon-transcript:before {
  content: "\f15c"
}

.icon-preferences:before {
  content: "\e60d"
}

.icon-close:before {
  content: "\f00d"
}

.icon-fullscreen-expand:before {
  content: "\f065"
}

.icon-fullscreen-collapse:before {
  content: "\f066"
}

.icon-help:before {
  content: "\f128"
}

.your-report {
  grid-column: 8/span 2;
  grid-row-start: 2;
  align-self: start;
  justify-self: end;
  padding: 1em 0;
  border: 1px solid transparent;
  outline: none
}

.your-report--expanded {
  background: #efefef;
  background: var(--footer-grey);
  box-shadow: 0 2px 8px -7px #000;
  border-color: #ddd;
  border-color: var(--line-grey);
  margin-bottom: 2em;
  padding: 1em
}

.your-report__heading {
  font-weight: 700;
  font-size: 1em;
  margin: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

.your-report__heading-pre {
  display: block;
  font-weight: 400;
  color: #091832;
  color: var(--dk-blue)
}

.your-report__import:focus+.your-report__import-label {
  outline-offset: 2px;
  outline: 2px solid transparent;
  transition: outline-offset .2s linear;
  border-color: #036;
  border-color: var(--w3c-blue);
  outline-color: #036;
  outline-color: var(--w3c-blue)
}

.your-report__progress-by-principle {
  columns: 2;
  column-gap: 1.5em;
  margin: 2.25em 0 1.75em;
  padding: 0
}

.your-report__description {
  margin-bottom: .5em
}

.your-report__showhide {
  border-width: 1px;
  border-color: #ddd;
  border-color: var(--line-grey);
  font-weight: 400;
  background-color: transparent;
  color: #1d1d1d;
  color: var(--off-black);
  padding: 0 6px;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  margin-bottom: 2px;
  margin-top: 2px
}

.your-report__showhide:hover {
  border-color: currentColor
}

.your-report__showhide svg {
  fill: transparent
}

.your-report__showhide svg:first-child {
  margin: 0 .25em 0 -.25em
}

.your-report__showhide svg:last-child {
  margin: 0 -.25em 0 .25em
}

.your-report .progress {
  margin-bottom: 1em;
  list-style: none
}

.your-report .principle__name {
  color: #1d1d1d;
  color: var(--off-black);
  font-weight: 700;
  text-decoration: none
}

.your-report .principle__name:hover span {
  text-decoration: underline
}

.your-report .progress__principle {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: .125em
}

.your-report .progress__part {
  font-size: .65em;
  margin-left: auto
}

pre {
  white-space: pre-wrap
}

.highlight {
  font-size: 16px;
  font-size: 1rem;
  color: #036;
  color: var(--w3c-blue);
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-font-feature-settings: "liga", "clig off";
  font-feature-settings: "liga", "clig off";
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures
}

.highlight .c {
  color: #3b3b3b;
  color: var(--dk-grey)
}

.highlight .err,
.highlight .g {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .k {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .l,
.highlight .n {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .o {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .x {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .p {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .cm {
  color: #3b3b3b;
  color: var(--dk-grey)
}

.highlight .cp {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .c1 {
  color: #3b3b3b;
  color: var(--dk-grey)
}

.highlight .cs,
.highlight .gd {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .ge {
  color: #036;
  color: var(--w3c-blue);
  font-weight: 700
}

.highlight .gh,
.highlight .gr {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .gi {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .go,
.highlight .gp,
.highlight .gs {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .gs {
  font-weight: 700
}

.highlight .gu {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .gt {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .kc {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .kd {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .kn,
.highlight .kp {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .kr {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .kt {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .ld {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .m,
.highlight .s {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .na {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .nb {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .nc {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .no {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .nd {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .ne,
.highlight .ni {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .nf {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .nl,
.highlight .nn,
.highlight .nx,
.highlight .py {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .nt,
.highlight .nv {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .ow {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .w {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .sb {
  color: #3b3b3b;
  color: var(--dk-grey)
}

.highlight .sc {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .sd {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .s2 {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .se {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .sh {
  color: #036;
  color: var(--w3c-blue)
}

.highlight .si,
.highlight .sx {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .sr {
  color: #c0272d;
  color: var(--faded-red)
}

.highlight .s1,
.highlight .ss {
  color: #005a6a;
  color: var(--wai-green)
}

.highlight .bp,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: #005a9c;
  color: var(--w3c-classic)
}

.highlight .il {
  color: #005a6a;
  color: var(--wai-green)
}

:not(.highlight) code {
  -webkit-font-feature-settings: "liga", "clig off";
  font-feature-settings: "liga", "clig off";
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures;
  color: #036;
  color: var(--w3c-blue)
}

/*# sourceMappingURL=style.css.map */