@import 'nib'

global-reset()

html, body, input, select, textarea, button
  font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif
  line-height: 18px
  color: #4d4d4d

html
  font-size: 100%
  max-height: 100%
  -webkit-text-size-adjust: 100%

body
  background: darken(white, 13%)
  margin: 0
  position: relative
  z-index: 0
  overflow-y: auto

#surface
  display: flex
  flex-direction: column
  min-height: 100vh
  overflow: hidden

#content
  position: relative
  flex: 1

div::selection
  background: transparent

h1
  font-size: 22px
  line-height: 1.2em
  margin: 0 0 10px

h2
  font-size: 18px
  line-height: 1.2em
  margin: 0 0 9px

h3, h4, h5, h6
  font-size: 16px
  line-height: 1.25em
  margin: 0 0 6px

.quiet, .quiet a
  color: #8c8c8c

.error, .error a
  color: #eb3800

.no-items-message
  color: darken(white, 60%)
  margin: 30px 0
  text-align: center

.warning
  background: #f0ecdb
  border-radius: 3px
  color: #aa8f09
  padding: 6px 8px

  a
    color: #aa8f09

a
  color: inherit
  cursor: pointer
  text-decoration: none

  &.is-disabled,
  &.is-disabled:hover
    cursor: default
    text-decoration: none

p
  a
    text-decoration: underline

table, p
  margin-bottom: 8px

pre
  margin: 15px 0
  white-space: pre
  max-height: 516px

pre,
code,
tt
  font-family: lucida console, monospace
  line-height: 1.25em

blockquote
  margin: 8px 0 8px 8px
  border-left: 1px solid #ccc
  color: #666
  padding: 0 0 0 8px

hr
  height: 1px
  border: 0
  border: none
  width: 100%
  background: #dbdbdb
  color: #dbdbdb
  margin: 15px 0
  padding: 0

table, td, th
  vertical-align: top
  border-top: 1px solid #ccc
  border-left: 1px solid #ccc

td, th
  padding: 5px
  border-right: 1px solid #ccc
  border-bottom: 1px solid #ccc

th
  font-weight: 700

thead
  background: #fff
  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)

tbody
  background-color: #fff

dl, dt
  margin-bottom: 8px

dd
  margin: 0 0 16px 24px

.edit
  display: none
  position: relative

.editable .current
  cursor: pointer

.editable.editing
  cursor: auto

.edits-warning, .edits-error
  display: none
  clear: both

.editing .edit
  display: block
  float: left
  padding-bottom: 9px
  z-index: 100
  width: 100%

.editing .edits-warning
  display: none!important

.editing .edit .field,
.editing .edit .field:active
  background: rgba(0, 0, 0, .03)
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .1)
  border-color: rgba(0, 0, 0, .15)
  margin-bottom: 4px

.edit-heavy .field
  font-size: 15px
  font-weight: 700
  line-height: 18px

.ui-draggable-dragging
  z-index: 200

.board-backgrounds-list

  .board-background-select
    box-sizing: border-box
    display: block
    float: left
    width: 50%
    padding-top: 12px
    position: relative
    z-index: 1

    &:nth-child(-n + 2)
      padding-top: 0

    &:nth-child(2n)
      padding-left: 6px

    &:nth-child(2n+1)
      padding-right: 6px

    .background-box
      border-radius: 3px
      background-size: cover
      display: block
      height: 74px
      position: relative
      width: 100%
      cursor: pointer
      display: flex
      align-items: center
      justify-content: center

      i.fa-check
        font-size: 25px
        color: white

.new-comment
  position: relative
  margin: 0 0 20px 38px

  .member
    opacity: .7
    position: absolute
    top: 1px
    left: -38px

  &.focus
    .member
      opacity: 1

    .helper
      display: inline-block

    .new-comment-input
      min-height: 108px
      color: #4d4d4d
      cursor: auto
      overflow: hidden
      word-wrap: break-word

  .too-long
    margin-top: 8px

.new-comment-input
  background-color: #fff
  border: 0
  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
  color: #8c8c8c
  height: 36px
  margin: 4px 4px 6px 0
  padding: 9px 11px
  width: 100%

  &:hover,
  &:focus
    background-color: #fff
    box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
    border: 0
    cursor: pointer

  &:focus
    cursor: auto

.atMention
  background: #dbdbdb
  border-radius: 3px
  padding: 1px 4px
  margin: -1px 0
  display: inline-block

  &.me
    background: #cfdfe8

.big-message
  display: block
  margin: 75px auto
  text-align: center
  max-width: 600px

  h1
    font-size: 26px
    margin-bottom: 24px

  p
    font-size: 18px
    line-height: 22px

.gutter
  margin-left: 38px

@keyframes fadeIn
  from
    opacity: 0

@keyframes flexGrowIn
  from
    flex-basis: 0