@media all {

  abbr, acronym, img {border: 0; text-decoration: none;}
  img {max-width: 100%; height: auto;}
  footer a {display: inline-block; margin-left: 15px;}

  li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style: decimal !important;}
  html li.L1, html li.L3, html li.L5, html li.L7, html li.L9 {background: #000;}
  html pre.prettyprint ol {margin-bottom: 0;}
  html pre.prettyprint {white-space: pre-wrap; padding: 18px 10px 10px; background: #000; font-size: 1.1rem; border-radius: 12px;}
  html pre .tag {color: #FEC758;}
  html pre .atn, html pre .pun, html pre .atv {color: #52CEE6;}
  html pre .typ, html pre .lit, html pre .kwd, html pre .com {color: #fff;}
  html pre .kwd {font-weight: normal;}
  html pre.prettyprint.nonums {white-space: pre-wrap; padding: 16px;}

  .data {width: 100%; border-collapse: collapse; border-spacing: 0; margin-top: 40px; margin-bottom: 40px;}
  h3 + .data {margin-top: 0;}
  .data.auto {width: auto;}
  .data th, .data td, .data caption {vertical-align: top; text-align: left; padding-bottom: 1em;}
  .data th, .data td {border: 1px solid #000; padding: .5em;}
  .data hr {padding: 0; background: #eee; margin: 0 0 20px; color: #eee;}
  .data tbody p:last-child {margin-bottom: 0;}

  #logo {margin-top: 10px; display: inline-block;}
  #logo img {width: 200px; height: auto;}
  .nowrap {white-space: nowrap;}
  .ctr {text-align: center;}
  .videoHolder {width: 100%; aspect-ratio: 16 / 9;}
  .videoHolder iframe {display: block; width: 100%; height: 100%;}
  td[data-mobile-prefix="Code Example:"] pre:first-child {margin-top: 0;}

  #home .flexSequence {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
  #home .flexSequence a {width: 22%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 8px 14px; height: 80px; border: 1px solid #f15a29; border-radius: 4px; background: #eee; text-decoration: none;}
  #home .flexSequence a span {display: block; width: 100%; text-align: center;}
  #home .flexSequence a:hover, #home .flexSequence a:focus {background: #fff; color: #000;}
  #home h2 {margin-top: 60px;}

  #menu {visibility: hidden;}
  #menu.mm-menu--opened {visibility: visible;}

}


@media screen {

  body {font: 400 1.2rem/1.4 "Noto Sans", sans-serif; margin: 0; padding: 0;}
  h1 {font: 600 1.7rem/1.3 "Noto Sans", sans-serif; margin: 20px 0 25px;}
  h2 {font: 400 1.6rem/1.3 "Noto Sans", sans-serif; margin: 0 0 25px; color: #f15a29;}
  h3 {font: 500 1.4rem/1.3 "Noto Sans", sans-serif; margin: 35px 0 15px;}
  h4 {font: 500 1.3rem/1.3 "Noto Sans", sans-serif; margin: 35px 0 15px;}
  code {font-weight: 500;}
  input, textarea, option, select {font: 1.2rem/1.4 "Noto Sans",sans-serif;}
  a:focus {outline-offset: 2px; outline: 2px solid blue;}
  header, main, footer, section, aside, article {display: block;}
  header, footer {padding: 10px 0; background: #eee;}
  header {border-bottom: 2px solid #ddd;}
  header > div {display: flex; justify-content: space-between;}
  main {padding: 15px 0 0;}
  footer {border-top: 2px solid #ddd; font-size: 0.8rem;}
  footer img {vertical-align: top; line-height: 1;}
  footer a:focus {outline: 3px dotted #000; outline-offset: 2px;}
  header > div, main, footer > div {margin: 0 auto; max-width: 1200px;}
  main {display: flex; justify-content: space-between;}
  main > article {width: 78%; margin-bottom: 85px;}
  main > article > section ~ section {margin-top: 75px;}
  main > aside {width: 19%;}
  main > aside h2 {font: 600 1.1rem/1.3 "Noto Sans", sans-serif; padding-left: 8px; margin: 0 0 12px;}
  main > aside ul {list-style: none; margin: 0; padding: 0 0 0 8px;}
  main > aside > div {position: sticky; top: 20px;}
  main > aside nav {border: 1px solid #f15a29; border-radius: 4px; padding: 8px 8px 16px; margin-top: 20px;}
  main > aside nav a {color: #6E6C6C; text-decoration: none; line-height: 1.4;}
  main > aside nav a:hover {color: #000;}
  main > aside nav a:focus {color: #000; outline-offset: 2px; outline: 2px solid blue;}  
  main > aside li {margin-bottom: 7px; font-size: .8rem;}  
  main > aside li .active {font-weight: 700; font-size: .85rem; text-decoration: none; color: #000;}
  main li {margin-bottom: 12px;}
  main li:last-child {margin-bottom: 0;}
  main ul ul, main ol ol, main ul ol, main ol ul {margin-top: 12px;}

  #jumpLink {padding: 5px; background: #000; color: #fff; position: absolute; top: -500px; left: -500px; font-size: .9rem; width: 180px; text-align: center;}
  #jumpLink:hover {color: yellow;}
  #jumpLink:focus {top: 5px; left: 5px; z-index: 500;}
  .printOnly {display: none;}
  .codeBlock {position: relative; left: 0; top: 0;}
  .codeBlock > button {cursor: pointer; position: absolute; z-index: 100; top: 10px; right: 10px; border: none; background: #fff; color: #000; border-radius: 12px; padding: 5px;}
  .codeBlock > button:hover, .codeBlock > button:focus {background: #eee; color: #000;}
  #menuTrigger {margin-top: 7px; height: 24px;}
  #menuTrigger:focus {outline: 2px dotted #000; outline-offset: 2px;}
  #menuTrigger img {display: block;}
  .mm-navbar .mm-navbar__title, .mm-navbar .mm-navbar__title span {color: #000;}
  .mm-listitem__text {font-size: 1rem;}
  .mm-listitem__btn:hover, .mm-listitem__btn:focus, .mm-listitem__text:hover, .mm-listitem__text:focus {background: #eee;}
  .mm-navbar {border-color: #f15a29;}
  .mm-navbar .mm-navbar__title span {font-size: 1.1rem; color: #f15a29; font-weight: 700;}
  .mm-searchfield__input input::placeholder {color: #666;}
  .mm-navbar__title {padding: 0;}
  .mm-navbars--top {border-bottom: 1px solid #f15a29;}
  strong {font-weight: 700;}
  .expanded li {margin-bottom: 16px;}
  .data thead th {background: #000; color: #fff;}
  .data thead {position: sticky; top: 0;}
  .data tbody ul, .data tbody ol {padding-left: 20px;}
  .data tbody ul {list-style: square;}
  .continueLink {margin: 60px 0 0;}
  .info h2 ~ h2 {margin-top: 60px;}

  #breadcrumb div {font-size: .9rem;}
  #breadcrumb img {vertical-align: middle;}

}

@media screen and (max-width: 1230px) {

  #menuTrigger {margin-right: 20px;}
  main {display: block;}
  main > article {width: auto; padding: 0 15px;}
  main > aside {width: auto;}
  main > aside > div {position: static;}
  main > aside > div > nav {display: none;}
  main > aside > div > #related, main > aside > div > #breadcrumb {display: block;}
  main > aside > div > #related, main > aside > div > #breadcrumb {margin: 0 15px 25px;}
  #logo, footer div {padding-left: 15px;}

}


@media screen and (max-width: 875px) {

  #home .flexSequence a {width: 48%; margin-bottom: 25px;}

}


@media screen and (min-width: 768px) { 

  .data tbody tr:nth-child(even) th, .data tbody tr:nth-child(even) td {background: #eee;}
  .data tbody ul:first-child, .data tbody ol:first-child {margin-top: 0;}

}


@media screen and (max-width: 768px) { 

  body, html pre.prettyprint {font-size: 1rem;}
  h1 {font-size: 1.5rem;}
  h2 {font-size: 1.4rem;}
  h3 {font-size: 1.3rem;}
  h4 {font-size: 1.2rem;}

  .data thead, .conditionalBreak {display: none;}
  .data tbody th, .data tbody td {display: block; border: 0;}
  .data tbody th + td, .data tbody td + td {padding-bottom: 20px; padding-top: 15px;}
  .data tbody th:before, .data tbody td:before {content: attr(data-mobile-prefix); font-weight: bold; margin-right: 8px;}
  .data tbody th[data-mobile-prefix="Code Example:"]:before, .data tbody td[data-mobile-prefix="Code Example:"]:before {display: block; margin-bottom: 16px;}
  .data tbody th:first-child, .data tbody td:first-child {font-style: italic; font-size: 1.3rem; padding: 12px 0; border-bottom: 2px solid #f15a29;}
  .data tbody th:last-child, .data tbody td:last-child {padding-bottom: 50px;}
  .data tbody tr:last-child th:last-child, .data tbody tr:last-child td:last-child {padding-bottom: 0;}
  .data tbody td + td {padding-left: 0;}
  .data tbody td ul:last-child {margin-bottom: 0;}
  .nowrap {white-space: normal;}
  .prettyprint, .allowBreak {word-break: break-word;}
  .info h2 ~ h2 {margin-top: 25pt;}

  main ol, main ul {padding-left: 20px;}

}

@media screen and (max-width: 450px) {
  #home .flexSequence a {width: 100%; margin-bottom: 15px;}
  #home h2 {margin-top: 40px;}
}


@media print {

  body, h1, h2, h3, h4, h5, input, select, option, textarea {font: 11pt/1.4 georgia,serif;}
  code {font-family: georgia,serif;}
  h1 {font-size: 19pt;}
  h2 {font-size: 17pt;}
  h3 {font-size: 15pt;}
  h4 {font-size: 13pt;}
  h5 {font-size: 12pt;}
  a, pre span, .data th {color: #000 !important;}
  .printOnly {display: block;}
  sup.printOnly {display: inline;}
  #contentArea li {margin: 1em 0;}
  footer {margin-top: 40pt;}
  header, main > aside, #jumpLink, .codeBlock button, .continueLink, #breadcrumb {display: none;}

}