@import compass
@import 'colors'

input#exchange_rate
  max-width: 200px

.movement-details
  margin-top: 20px

  .detail
    border-bottom: 1px solid $grayLighter
    padding: 10px 0px
  >li
    .input-append
      .btn
        height: 20px
        margin: 0px
      i
        font-size: 14px
        //width: 12px
        //height: 12px
        //margin: 1px 0px 0px
        display: inline-block
    .hide
      display: none


    .price
      input
        width: 110px

    .quantity
      input
        width: 80px

    .unit
      width: 30px
      display: inline-block

    input.item-name
      width: 400px
      text-align: left

    span.space
      width: 18px
      display: inline-block

    label
      display: inline-block

    .input
      display: inline-block

    .input-append
      margin-bottom: 0px

    .number
      display: inline-block

@media(max-width: 950px)
  .movement-details
    >li
      input.item-name
        width: 300px
      .price, .quantity
        input
          width: 90px

@media(max-width: 767px)
  .movement-details
    .header
      .span2, .span6
        display: none

    >li
      input.item-name
        max-width: 230px !important
      .price, .quantity
        input
          width: 110px

      .visible-phone
        display: inline-block !important

      .input
        width: 100px

      .item
        text-align: right
        input.item-name
          width: 350px

      .number
        width: 120px

      div.item-name
        float: right
        font-size: 120%
        text-align: right
        padding-right: 10px
