// Menu:

#menuBar
  background: linear-gradient(#e66465, #9198e5)
  height: 29px
  margin-bottom: 10px
  @media screen and (max-width: 767px)
    height: 100%
    margin-bottom: 0
  @media screen and (min-width: 768px)
    width: 100%
    overflow: hidden

a#homeLink
  margin-left: 10px
  margin-top: 2px
  color: black
  display: inline-block
  @media screen and (max-width: 767px)
    display: block
    margin: 5px 0 0 12px

.info-container
  display: inline-block
  vertical-align: top
  padding: 0
  box-sizing: border-box
  a
    text-decoration: none
    color: black
  a, p
    display: inline-block
    padding: 0 3px
    border: 1px solid black;
    margin: 1px 0 0 15px
    @media screen and (max-width: 767px)
      margin-top: 10px
      display: block

#userMenu, #settings
  @media screen and (min-width: 768px)
    float: right
  .info-container
    p
      padding: 0 3px
      margin: 1px 0 0 15px

#flagMenu
  @media screen and (min-width: 768px)
    margin-top: 1px
    float: right
  margin: 0 15px
  @media screen and (max-width: 767px)
    margin: 25px 5px 0 15px
  img
    display: inline-block
    margin: 0
    height: 25px

label.drawer-toggle
  padding: 0
  &::before
    font-size: 2em;
    max-height: 32px;
    top: -7px;
    left: 5px

// Game section:

td.highlight-lm
  background-color: plum

button.play
  height: 24px
  margin: 0
  padding: 0 10px 24px 10px
  box-sizing: border-box
  border: 1px solid brown
button.play.spaceleft
  margin-left: 15px
button.play.spaceright
  margin-right: 15px
button.play.big-spaceleft
  margin-left: 25px
button.play.big-spaceright
  margin-right: 25px

.aboveboard-wrapper
  width: 80vh
  margin: 0 auto
  @media screen and (max-width: 767px)
    width: 100%
    margin: 0

button.above-board
  margin-left: 15px
  margin-right: 15px

i.material-icons
  font-size: 24px

.indic-left
  border: 1px solid brown
  float: left
  margin: 0 0 var(--universal-margin) 10vh
  @media screen and (max-width: 767px)
    margin-left: 20px

.indic-right
  border: 1px solid brown
  float: right
  margin: 0 10vh var(--universal-margin) 0
  @media screen and (max-width: 767px)
    margin-right: 20px

.my-chatmsg
  color: black

.opp-chatmsg
  color: blue

// TODO: this fix is not good (button height 0 if chat overflow window height)
#sendChatBtn
  min-height: 42px

.connected
  background-color: green

.disconnected
  background-color: red

.white-turn
  background-color: white

.black-turn
  background-color: black

button.playing
  background-color: #ffcc99
  &:hover
    background-color: #ffcc99

button.seek
  background-color: #cc99ff
  &:hover
    background-color: #cc99ff

#fen-string
  margin-top: 0
  margin-bottom: 10px

#pgn-game
  margin-top: 0
  margin-bottom: 0

#downloadBtn
  display: block
  margin-left: auto
  margin-right: auto

#pgn-div > a
  display: none

//#fen-div > p
  margin-left: 0
  margin-right: 0

#modal-eog+div .card
  overflow: hidden

#actions
  margin: 10px 0

// Rules section:


// Problems section:

.newproblem-form input, .newproblem-form textarea
  width: 100%

.emphasis
  font-style: italic

#newpbInstructions
  margin-bottom: var(--universal-margin);

.center-btn
  margin-left: 40%

//TODO?
.center-inline
  text-align: center
.center-block
  margin-left: auto
  margin-right: auto

.mistake-newproblem
  color: #663300

#solution-div h3
  background-color: lightgrey
  padding: 3px 5px

.newproblem-form, .newproblem-preview
  max-width: 90%

#problemControls
  width: 75%
  margin: 0 auto
  @media screen and (max-width: 767px)
    width: 100%
    margin: 0

.problem
  margin: 10px 0

.only-mine
  background-color: yellow
  &:hover
    background-color: yellow