#confirmation-popup
  &.hidden
    display: none

.input-holder
  &.error
    input
      border: 1px solid red
.error-msg
  display: block
  font-size: 10pt
  color: red

#checkout
  text-align: center


  //style for cart
  #cart-wrapper
    width: 600px
    text-align: left

    .amount
      width: 200px
      input
        margin-left: 10px
        width: 20px

    .cart-line
      width: 100%
      border-top-color: black

    .delete
      float: right

    .discount
      float: left
      width: 280px

    .product-price
      .label
        text-align: right
        margin-right: 10px

    .sub-total
      span
        float: right


    a
      color: $darkGrey

    ul
      padding: 20px 0
      list-style-type: none
      border-top: dashed 1px $lightGrey
      border-bottom: dashed 1px $lightGrey

      span
        display: inline-block

      .title
        width: 200px


    //style for form of persons data
  #form-wrapper
    width: 300px
    margin-top: 100px

    input
      float: right

    select
      float: right

    label
      float: left
  //delete popup
  #confirmation-popup
    background-color: rgb(40, 40, 40)
    background-color: rgba(0, 0, 0, 0.8)
    position: fixed
    width: 100%
    height: 100%
    top: 0px
    left: 0px
    z-index: 1000

    .popup-message
      position: fixed
      width: 400px
      height: 100px
      left: 0
      right: 0
      top: 0
      bottom: 0
      margin-right: auto
      margin-left: auto
      margin-top: auto
      margin-bottom: auto
      background-color: #fff
      color: $darkGrey
      padding: 50px
      text-align: center

      .button
        margin: 20px 30px

+media-query(800px)
  #checkout
    #cart-wrapper
      width: 400px
      .amount
        width: 100px
        input
          margin-left: 5px
          width: 10px
      ul
        .title
          width: 100px