ul.regions
  width: 100%
  margin: 0
  padding: 0
  z-index: 1500
  display: flex
  position: absolute
  flex-wrap: wrap
  font-size: normal
  list-style: none
  justify-content: space-around
  background-image: linear-gradient(white, transparent)
  li
    &.selected
      border: solid 6px lightgray
      display: inline-block
    a
      padding: 0.3em
      display: block
      white-space: nowrap
    &:hover li, li.selected
      display: block
  ul
    padding: 0
    position: absolute
    box-shadow: 0 4px 4px gray
    li
      border: solid thin #eee
      display: none
      background-color: white
  em.fa.fa-times
    float: right
    font-size: larger
    margin-left: 0.3em

html.no-js ul.regions li#near-me
  display: none

html.iframe main > ul.regions
  display: none

.field.region
  .radios
    z-index: 100
    flex-grow: 0
    text-align: left
    background-color: white
    .radios
      display: inline
      min-width: 12em
    label
      display: none
      min-width: 100%
  &:hover > .radios, label:hover + .radios, .radios:hover
    z-index: 1000
    position: absolute
    box-shadow: 0 0 0.1em black
    & > .region > label, & > label
      display: inline-block
    .radios
      position: absolute
  &:hover > .radios, & > label:hover + .radios, & > .radios:hover
    margin-left: 10em
    transition-duration: unset
  input:checked + label
    display: inline-block

// Override for the missing quebec flag!
.flag-icon-ca-qc
  background-image: image-url(regions/CA-QC)

table.list.dates
  th, td
    padding: 0 0.6em

  .sparkline
    padding: 0