html, body
  margin: 0
  padding: 0
  //width: 100%
  //height: 100%
body
  overflow-x: hidden
  @media #{$small-only}
    font-size: 14px
#ember-app-container
  background-image: image-url('theme1/wall-bg.jpg')
  background-repeat: repeat
  padding-top: $top-menu-height
  //height: 100%
  > .ember-view
    // application-view
    //height: 100%

.main-section
  +panel($bg:rgba(200,200,200,0.8))
  position: absolute
  padding: 0
  margin: 0
  width: 100%
  top: $top-menu-height
  bottom: 0
  overflow-y: scroll
  -webkit-overflow-scrolling: touch
  .main-section-content
    //nothing
span.icon
  @extend .fa
  @extend .fa-lg
  &.needs-help
    @extend .fa-bell
  &.needs-payment
    @extend .fa-money
  &.scan-qr
    @extend .fa-qrcode
#notice
  a
    color: white
li
  span.currency
    float: right

span.loading
  @extend .fa
  @extend .fa-spinner
  @extend .fa-spin
  &.medium
    @extend .fa-lg
  &.large
    @extend .fa-2x

.supplier-name + .table-number
  padding-left: 0.3em

.hide
  display: none !important