/* Banner. */
header, .main header {background-image: none; padding: 0}
header hgroup {font-size: 4vw; line-height: 1.1; text-align: center}
.main header hgroup {font-size: 6vw} /* Larger on the main page */
header hgroup h1 {font-size: 100%; margin: 0; padding: 0}
header hgroup h1 img {display: block; padding: 0.5em 0;
  height: 3em; width: 100%; object-fit: contain}
.main header hgroup h1 img {height: 2.5em} /* Not as much larger as the font */
header h2, header h3 {font-size: 50%;
  width: 48%; margin: 0; padding: 0}
header h2 {float: left; color: hsl(0,80%,45%); text-align: right;
  padding-right: 1em;
  background: radial-gradient(circle at 100% 50%, currentcolor,
    currentcolor 0.5em, transparent 0.5em)}
header h3 {float: left; color: hsl(205,80%,30%); text-align: left;
  padding-left: 1em;
  background: radial-gradient(circle at 0% 50%, currentcolor,
    currentcolor 0.5em, transparent 0.5em)}
header h2, header h3 {width: 50%; box-sizing: border-box}
.main header h2 {color: hsl(205,80%,30%)} /* Reverse colors on the main page */
.main header h3 {color: hsl(0,80%,45%)}

/* Video link */
a.videolink {display: block; margin: 1.2rem 0 0 0;
  background: #eee 3em 50% / 4em auto no-repeat
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdib3g9IjAgMCA0IDQiIGhlaWdodD0iNCIgd2lkdGg9IjQiPjxjaXJjbGUgZmlsbD0iIzAwMDAwMDY2IiBjeD0iMiIgY3k9IjIiIHI9IjEuNyIvPjxwYXRoIGZpbGw9IiNmZmZmZmY2NiIgZD0iTSAxLjMgMSBsIDIgMSAtMiAxIHoiLz48L3N2Zz4K);
  padding: 1.2em 1.2em 1.2em 10em; text-decoration: none;
  position: relative}
a[href].videolink:hover {filter: brightness(120%); outline: medium solid}
@media not print {
  section:nth-of-type(2n+2) a.videolink {background-color: hsl(204,69%,15%)}
}

/* Different sizes for different categories of sponsors. * /
.platinum.sponsors {font-size: 2.75em}
.media.sponsors {font-size: 2.5em}
.exhibitor.sponsors {font-size: 2.25em}
/**/
#sponsors h3 {font-style: normal; font-weight: inherit; font-size: smaller;
  padding-top: 0}

/* A list with large icons instead of bullets. The icon must be an IMG
   or SVG and must be the first child of the LI. */
.with-icons {list-style: none}
.with-icons > * {clear: left; margin-left: 4em}
.with-icons > * > img:first-child, .with-icons > * > svg:first-child {
  object-fit: contain; height: 1em;
  float: left; font-size: 2em; width: 1em; margin: 0 0 0.25em -2em}

/* Inherit default fill color for SVG from context instead of black. */
svg {fill: currentColor}

/* Do not reduce the font size in the card on the venue page and make
   the card less tall. */
#intro .cards > * {font-size: 100%; height: 17em}
@media print {
  #intro .cards > * > *:nth-child(1) {height: 17em}
  #intro .cards > * {height: auto; min-height: 17em}
}

/* class=five-columns transposes a table of five columns (such as the
   schedule at a glance) when the screen is narrow. Spanned rows or
   columns are not supported. If transpose.js has already transposed
   the table, then the class "landscape" will have been replaced by
   "portrait". The rules below thus only need to apply if the window
   is narrow and the class "landscape" is still present. (The script
   transpose.js acts when the window becomes 512px or narrower.)
*/
.five-columns {table-layout: fixed; background: none; color: inherit}
.five-columns td:first-child, #schedule th:first-child {white-space: normal}
.five-columns td, .five-columns th {height: auto; vertical-align: top;
  padding: 0}
.five-columns * + td, .five-columns * + th {
  border-left: solid 0.5em transparent}
.five-columns p {margin: 0; padding-bottom: 0.3em}
.five-columns p + p {padding-top: 0.3em; border-top: 1px solid}
section:nth-of-type(2n+1) .five-columns b {font-weight: inherit;
  color: #ad2030}
.five-columns th {text-align: center}
@media (max-width: 512px) {
  .five-columns {table-layout: auto}
  .five-columns td, .five-columns th {border-width: 1.2rem 0.8rem}
  .five-columns * + td, .five-columns * + th {border-left: none}
  @supports (grid: subgrid / subgrid) {
    .five-columns.landscape {display: grid; gap: 1.2rem 0.8rem;
      grid: auto auto auto auto auto / auto;
      grid-auto-flow: row; grid-auto-columns: auto}
    .five-columns.landscape thead, .five-columns.landscape tbody {
      grid-row-start: 1;
      grid-row-end: -1; display: grid; grid: subgrid / auto; gap: 1em;
      grid-auto-flow: row; grid-auto-columns: auto}
    .five-columns.landscape tr {grid-row-start: 1; grid-row-end: -1;
      display: grid; grid: subgrid / subgrid}
    .five-columns.landscape td,
    .five-columns.five-columns.landscape td:nth-child(2),
    .five-columns.landscape th {border: none}
  }
}

/* Blockquote elements on health.html */
blockquote {margin-left: 1em; margin-right: 0; font-style: italic}
@media (min-width: 46em) {blockquote {margin-left: 3em}}
blockquote h4 {font-weight: normal}

/* If the first element on a card is not an image, but an A element
   with an image inside, the image is stretched like the A element. */
.cards > * > a:first-child > img {display: block; width: 100%; height: 100%}

/* On the health.html page, the card images should be shown in full. */
#test-centers .cards > * > a:first-child > img {object-fit: contain;
  padding: 1em; box-sizing: border-box}

/* The schedules on the schedule.html page have a class of calendar,
   to create a 2D calendar view on wide screens; and a class of
   buttons to show each event as a button on smaller screens. */
.calendar {hyphens: auto}
.calendar > time {display: none}
.calendar > a {display: block}
.calendar.buttons > a {font-weight: inherit}
.calendar.buttons > a b:last-of-type {display: block} /* Meeting name */
.legend {display: inline-block; padding: 0.1em 0.5em; background: #103852;
  color: white; font-size: 90%; line-height: 1.05}
.online.online {background: hsla(60,85%,15%,1.0)}
.special.special {background: hsla(120,85%,15%,1.0)}
.tentative.tentative {background: hsla(270,30%,15%,1.0)}
.calendar i, .legend i {position: absolute; overflow: hidden;
  width: 0; height: 0; overflow-wrap: normal}
.calendar.calendar.calendar a abbr, .legend.picto {font-size: 90%;
  line-height: 1;
  background: red; color: #fff; padding: 0.15em 0.3em; border-radius: 0.5em;
  margin: 0 0.1em}
.calendar abbr.picto::before, .legend.picto::before {margin-right: 0;
  font-size-adjust: none /* 1.0 causes different effects in different FF? */}
@media not print {
  section:nth-child(2n+2) .legend {background: hsl(0,0%,98%); color: #103852}
  section:nth-of-type(2n+2) .online.online {
    background: hsla(60,99%,90%,1.0)}
  section:nth-of-type(2n+2) .special.special {
    background: hsla(120,85%,93%,1.0)}
  section:nth-of-type(2n+2) .tentative.tentative {
    background: hsla(270,30%,90%,1.0)}
}
.calendar .duplicate-list {display: none; background: none; color: black;
  text-align: left; columns: 2; column-fill: auto; font: inherit; padding: 0}
.calendar .duplicate-list a {display: block; break-inside: avoid;
  background: none}
.duplicate-list abbr {display: none}

@media print, screen and (min-width: 87em) {
  .calendar {display: grid; grid-template-rows: repeat(56, 0.775em);
    grid-template-columns: 4em; grid-auto-columns: 1fr;
    grid-auto-flow: column dense; gap: 0.3em; border: thin solid;
    padding: 0.3em; line-height: 1.05; font-size: small;
    background: hsla(0,0%,50%,0.5);
    overflow-wrap: anywhere; page-break-inside: avoid}
  .calendar time {overflow-wrap: normal} /* Do not break inside HH:MM */
  .calendar > time {display: block; font-weight: bold; font-size: 90%;
    line-height: 1;
    grid-column-start: 1; grid-column-end: 2; grid-row-end: span 2}
  .calendar.buttons > time {background: none; color: inherit; padding: 0;
    text-align: left}
  .calendar.buttons a {font: inherit; text-align: left}
  .calendar > a {text-decoration: none; padding: 0.3em}
  .calendar > a[href]:hover, .calendar > a[href]:focus {outline: none;
    filter: brightness(110%); z-index: 61}
  .calendar > a[href]:hover > *, .calendar > a[href]:focus > * {
    background: inherit}
  .calendar > a.f0700 {grid-row-start: 1; z-index: 1}
  .calendar > a.f0715 {grid-row-start: 2; z-index: 2}
  .calendar > a.f0730 {grid-row-start: 3; z-index: 3}
  .calendar > a.f0745 {grid-row-start: 4; z-index: 4}
  .calendar > a.f0800 {grid-row-start: 5; z-index: 5}
  .calendar > a.f0815 {grid-row-start: 6; z-index: 6}
  .calendar > a.f0830 {grid-row-start: 7; z-index: 7}
  .calendar > a.f0845 {grid-row-start: 8; z-index: 8}
  .calendar > a.f0900 {grid-row-start: 9; z-index: 9}
  .calendar > a.f0915 {grid-row-start: 10; z-index: 10}
  .calendar > a.f0930 {grid-row-start: 11; z-index: 11}
  .calendar > a.f0945 {grid-row-start: 12; z-index: 12}
  .calendar > a.f1000 {grid-row-start: 13; z-index: 13}
  .calendar > a.f1015 {grid-row-start: 14; z-index: 14}
  .calendar > a.f1030 {grid-row-start: 15; z-index: 15}
  .calendar > a.f1045 {grid-row-start: 16; z-index: 16}
  .calendar > a.f1100 {grid-row-start: 17; z-index: 17}
  .calendar > a.f1115 {grid-row-start: 18; z-index: 18}
  .calendar > a.f1130 {grid-row-start: 19; z-index: 19}
  .calendar > a.f1145 {grid-row-start: 20; z-index: 20}
  .calendar > a.f1200 {grid-row-start: 21; z-index: 21}
  .calendar > a.f1215 {grid-row-start: 22; z-index: 22}
  .calendar > a.f1230 {grid-row-start: 23; z-index: 23}
  .calendar > a.f1245 {grid-row-start: 24; z-index: 24}
  .calendar > a.f1300 {grid-row-start: 25; z-index: 25}
  .calendar > a.f1315 {grid-row-start: 26; z-index: 26}
  .calendar > a.f1330 {grid-row-start: 27; z-index: 27}
  .calendar > a.f1345 {grid-row-start: 28; z-index: 28}
  .calendar > a.f1400 {grid-row-start: 29; z-index: 29}
  .calendar > a.f1415 {grid-row-start: 30; z-index: 30}
  .calendar > a.f1430 {grid-row-start: 31; z-index: 31}
  .calendar > a.f1445 {grid-row-start: 32; z-index: 32}
  .calendar > a.f1500 {grid-row-start: 33; z-index: 33}
  .calendar > a.f1515 {grid-row-start: 34; z-index: 34}
  .calendar > a.f1530 {grid-row-start: 35; z-index: 35}
  .calendar > a.f1545 {grid-row-start: 36; z-index: 36}
  .calendar > a.f1600 {grid-row-start: 37; z-index: 37}
  .calendar > a.f1615 {grid-row-start: 38; z-index: 38}
  .calendar > a.f1630 {grid-row-start: 39; z-index: 39}
  .calendar > a.f1645 {grid-row-start: 40; z-index: 40}
  .calendar > a.f1700 {grid-row-start: 41; z-index: 41}
  .calendar > a.f1715 {grid-row-start: 42; z-index: 42}
  .calendar > a.f1730 {grid-row-start: 43; z-index: 43}
  .calendar > a.f1745 {grid-row-start: 44; z-index: 44}
  .calendar > a.f1800 {grid-row-start: 45; z-index: 45}
  .calendar > a.f1815 {grid-row-start: 46; z-index: 46}
  .calendar > a.f1830 {grid-row-start: 47; z-index: 47}
  .calendar > a.f1845 {grid-row-start: 48; z-index: 48}
  .calendar > a.f1900 {grid-row-start: 49; z-index: 49}
  .calendar > a.f1915 {grid-row-start: 50; z-index: 50}
  .calendar > a.f1930 {grid-row-start: 51; z-index: 51}
  .calendar > a.f1945 {grid-row-start: 52; z-index: 52}
  .calendar > a.f2000 {grid-row-start: 53; z-index: 53}
  .calendar > a.f2015 {grid-row-start: 54; z-index: 54}
  .calendar > a.f2030 {grid-row-start: 55; z-index: 55}
  .calendar > a.f2045 {grid-row-start: 56; z-index: 56}
  .calendar > a.f2100 {grid-row-start: 57; z-index: 57}
  .calendar > a.f2115 {grid-row-start: 58; z-index: 58}
  .calendar > a.f2130 {grid-row-start: 59; z-index: 59}
  .calendar > a.f2145 {grid-row-start: 60; z-index: 60}
  .calendar > a.t0700 {grid-row-end: 1}
  .calendar > a.t0715 {grid-row-end: 2}
  .calendar > a.t0730 {grid-row-end: 3}
  .calendar > a.t0745 {grid-row-end: 4}
  .calendar > a.t0800 {grid-row-end: 5}
  .calendar > a.t0815 {grid-row-end: 6}
  .calendar > a.t0830 {grid-row-end: 7}
  .calendar > a.t0845 {grid-row-end: 8}
  .calendar > a.t0900 {grid-row-end: 9}
  .calendar > a.t0915 {grid-row-end: 10}
  .calendar > a.t0930 {grid-row-end: 11}
  .calendar > a.t0945 {grid-row-end: 12}
  .calendar > a.t1000 {grid-row-end: 13}
  .calendar > a.t1015 {grid-row-end: 14}
  .calendar > a.t1030 {grid-row-end: 15}
  .calendar > a.t1045 {grid-row-end: 16}
  .calendar > a.t1100 {grid-row-end: 17}
  .calendar > a.t1115 {grid-row-end: 18}
  .calendar > a.t1130 {grid-row-end: 19}
  .calendar > a.t1145 {grid-row-end: 20}
  .calendar > a.t1200 {grid-row-end: 21}
  .calendar > a.t1215 {grid-row-end: 22}
  .calendar > a.t1230 {grid-row-end: 23}
  .calendar > a.t1245 {grid-row-end: 24}
  .calendar > a.t1300 {grid-row-end: 25}
  .calendar > a.t1315 {grid-row-end: 26}
  .calendar > a.t1330 {grid-row-end: 27}
  .calendar > a.t1345 {grid-row-end: 28}
  .calendar > a.t1400 {grid-row-end: 29}
  .calendar > a.t1415 {grid-row-end: 30}
  .calendar > a.t1430 {grid-row-end: 31}
  .calendar > a.t1445 {grid-row-end: 32}
  .calendar > a.t1500 {grid-row-end: 33}
  .calendar > a.t1515 {grid-row-end: 34}
  .calendar > a.t1530 {grid-row-end: 35}
  .calendar > a.t1545 {grid-row-end: 36}
  .calendar > a.t1600 {grid-row-end: 37}
  .calendar > a.t1615 {grid-row-end: 38}
  .calendar > a.t1630 {grid-row-end: 39}
  .calendar > a.t1645 {grid-row-end: 40}
  .calendar > a.t1700 {grid-row-end: 41}
  .calendar > a.t1715 {grid-row-end: 42}
  .calendar > a.t1730 {grid-row-end: 43}
  .calendar > a.t1745 {grid-row-end: 44}
  .calendar > a.t1800 {grid-row-end: 45}
  .calendar > a.t1815 {grid-row-end: 46}
  .calendar > a.t1830 {grid-row-end: 47}
  .calendar > a.t1845 {grid-row-end: 48}
  .calendar > a.t1900 {grid-row-end: 49}
  .calendar > a.t1915 {grid-row-end: 50}
  .calendar > a.t1930 {grid-row-end: 51}
  .calendar > a.t1945 {grid-row-end: 52}
  .calendar > a.t2000 {grid-row-end: 53}
  .calendar > a.t2015 {grid-row-end: 54}
  .calendar > a.t2030 {grid-row-end: 55}
  .calendar > a.t2045 {grid-row-end: 56}
  .calendar > a.t2100 {grid-row-end: 57}
  .calendar > a.t2115 {grid-row-end: 58}
  .calendar > a.t2130 {grid-row-end: 59}
  .calendar > a.t2145 {grid-row-end: 60}
  /* Rows from 61 are auto-generated and have auto height */
  .calendar > a.t2200 {grid-row-end: 61; border-bottom-style: dashed}
  .calendar > a.t2215 {grid-row-end: 62; border-bottom-style: dashed}
  .calendar > a.t2230 {grid-row-end: 63; border-bottom-style: dashed}
  .calendar > a.t2245 {grid-row-end: 64; border-bottom-style: dashed}

  /* The sort order of the events is not shown in the grid view. */
  .sortorder {display: none}

  @media print {
    body.schedule_page #monday, body.schedule_page #tuesday,
    body.schedule_page #wednesday, body.schedule_page #thursday,
    body.schedule_page #friday {page-break-before: always;
      border-left: none; border-right: none; max-width: none;
      font-size: 1.1vh}
    body.schedule_page select {border: none; background: none; font: inherit}
    .calendar.wide {width: 100%; margin-left: 0}
    .calendar {font-size: 1em; box-sizing: border-box;
      grid-template-rows: repeat(56, calc((84.5vh - 0.3em) / 56 - 0.3em));
      background: 99% 99% / 6% auto no-repeat url(images/qr-schedule.svg)
	#d7dee4}
    .calendar .duplicate-list {display: block; grid-row-start: 45 /*18:00*/;
      grid-row-end: 60 /*21:45*/; grid-column-end: span 9;
      /* The height (15 rows) is used by 'column-fill: auto' */
      height: calc(15 *((86vh - 0.3em) / 56 - 0.3em))}
    #monday .calendar {background-image: url(images/qr-schedule-mon.svg)}
    #tuesday .calendar {background-image: url(images/qr-schedule-tue.svg)}
    #wednesday .calendar {background-image: url(images/qr-schedule-wed.svg)}
    #thursday .calendar {background-image: url(images/qr-schedule-thu.svg)}
    #friday .calendar {background-image: url(images/qr-schedule-fri.svg)}
    .calendar > a {/*box-shadow: 0.1vh 0.2vh 0.3vh #444*/}
    .calendar a span:last-of-type  {color: hsl(0,80%,45%)}
    .calendar > a, .legend {background: hsla(0,0%,100%,1.0); color: inherit;
      border: thin solid #999; border-radius: 0.3em}
    .online.online {background: hsla(60,80%,90%,1.0)}
    .special.special {background: hsla(120,85%,93%,1.0)}
    .tentative.tentative {background: hsla(260,70%,94%,1.0)}
    #monday h2, #tuesday h2, #wednesday h2, #thursday h2, #friday h2 {
      float: left; margin: 0 1em 0.2em 0; padding: 0.3em;
      border: thin solid}
    .corner {display: block}
    #monday, #tuesday, #wednesday, #thursday, #friday {widows: 1; orphans: 1}
  }
  @media print and (max-aspect-ratio: 3/2) {
    body.schedule_page #monday, body.schedule_page #tuesday,
    body.schedule_page #wednesday, body.schedule_page #thursday,
    body.schedule_page #friday {font-size: 0.68vw}
  }
}
@media screen and (min-width: 120em) {
  .calendar {font-size: medium}
}

/* Floormaps. */
#map {page-break-before: always; page-break-after: always}
#map figure {margin: 1em; float: left}
@media print {
  #map h2 {display: none}
  #map figcaption {color: hsl(0,80%,45%); page-break-inside: avoid}
  #map img {max-height: calc(100vh - 4rem)}
}

/* On the breakouts.html page, the DL elements are made more compact. */
dd > p:first-child, dd > ul:first-child, dd > ul:first-child > li:first-child,
dd > ul:first-child > li:first-child > p:first-child {margin-top: 0}
dt {float: left; margin: 0 0.33em 0 0}
dd::after {content: ""; display: block; height: 0; clear: left}
dd {margin-left: 0}
dd ul {contain: content}
/**/

/* Trying with less space between the sections. The following rules
   override the rules in tpac2.css that increase the border between
   sections to 7.2rem on big screens. The border is instead kept at
   3.6rem, the same as on small screens. */
@media screen and (min-width: 46em) and (min-height: 46em),
    screen and (min-width: 56em) {
  section, section:not(.wide), footer {border-top-width: 3.6rem;
    border-bottom-width: 3.6rem}
  .skip {top: -3.6rem}
  footer {min-height: calc(100vh - 7.2rem)}
}
@media screen and (min-width: 46em) and (min-height: 46em) {
  section > .decoration img {margin: -3.6rem 0 1.3rem}
}
@media screen and (min-width: 56em) {
  section > .decoration img {margin: 0}
}
@media screen and (min-width: 56em) {
  @supports (right: calc(100% - 10rem)) {
    /* If the block is a <section>, the image height includes the borders: */
    section > .decoration {height: calc(100% + 7.2rem);
      top: -3.6rem}
    .decoration img {display: block; height: 100%; max-width: none}
    /* If the decorated block is the first thing in a section after the
       skip link, align the image with the top of the section: */
    section > .skip + .decorated > .decoration {top: -3.6rem;
      height: calc(100% + 3.6rem)}
    section > .skip + details.decorated > .decoration {
      height: calc(100% + 7.2rem)}
  }
}