@import users

html, *
  font-family: "Open Sans", Arial, sans-serif
  --back-color: #f2f2f2
  --a-link-color: blue
  --a-visited-color: blue

body
  padding: 0
  min-width: 320px

.container
  padding: 0
  overflow: hidden

.row
  div
    padding: 0
    .section-content
      *
        margin-left: auto
        margin-right: auto
        max-width: 767px
      figure.diagram-container
        max-width: 1000px
      @media screen and (max-width: 767px)
        max-width: 100%
        padding: 0 5px

@media screen and (max-width: 767px)
  .button-group
    flex-direction: row
    button:not(:first-child)
      border-left: 1px solid var(--button-group-border-color)
      border-top: 0

.right-menu
  float: right
  @media screen and (max-width: 767px)
    .info-container
      p
        margin-right: 5px

a.right-menu
  &:link, &:visited, &:hover
    color: black

#settings, #contactForm
  max-width: 767px
  @media screen and (max-width: 767px)
    max-width: 100vw

#emailSent
  color: blue
  display: none

footer
  height: 77px
  background-color: #000033
  div
    line-height: 77px
    a
      margin: 0 10px 0 0
      display: inline-block
      &:visited, &:link
        color: white
    p
      margin: 0 0 0 10px
      display: inline-block
      color: white
      text-decoration: underline
  @media screen and (max-width: 767px)
    height: 43px
    div
      line-height: 43px

a
  text-decoration: underline

.text-center
  text-align: center

.smallpad
  padding: 5px

.emphasis
  font-style: italic

.clickable
  cursor: pointer

.clearer
  clear: both

.red
  color: #cc3300

.purple
  color: purple

.smallfont
  font-size: 0.8em

.bigfont
  font-size: 1.2em

.bold
  font-weight: bold

[type="checkbox"].modal+div .card
  max-width: 767px
  max-height: 100vh
[type="checkbox"].modal+div .card.small-modal
  max-width: 320px
[type="checkbox"].modal+div .card.big-modal
  max-width: 90vw