.shoppingCartContent
  background-color: $douvLightBlue
  padding-bottom: 120px

  .form
    font-size: 0

  .titleHolder
    width: 100%
    margin-top: 60px
    background-color: white
    border-left: solid 15px $douvYellow
    color: $douvDarkBlue
    font-weight: bold
    padding-left: column(0.5)
    margin-bottom: 75px
    box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.05)

    h1
      font-size: 30px
      line-height: 80px

  .subtitleHolder
    padding-left: column(0.5)

    h4
      color: $douvBlue
      letter-spacing: 0.09px

  .shoppingcartItemList
    width: column(7.5, 12)
    padding-right: column(0.5, 12)
    color: $douvBlue

    input
      display: none

    > ul
      list-style: none
      margin: 0
      padding: 0

      > li
        display: block
        width: 100%
        min-height: 300px
        margin-bottom: 60px
        background-color: white
        position: relative
        border-radius: 3.354px
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05)

        &:before
          content: ''
          display: block
          position: absolute
          left: 0
          top: 0
          height: 100%
          width: 150px
          background-color: $douvBlue
          border-radius: 3.354px 0 0 3.354px

        .deleteButton
          position: absolute
          top: 10px
          right: 10px
          border-radius: 3px
          border: solid 1px $douvYellow
          color: $douvYellow
          text-decoration: none
          padding: 0 9px 5px 9px
          font-size: 1.4em
          line-height: 1.1em

          &:hover
            background-color: $douvYellow
            color: white

        .left
          height: 100%
          width: column(2, 7)
          padding: 60px 0 60px column(0.5, 7)

          img
            width: 100%
            height: 100%
            z-index: 1

        .right
          width: column(4.5, 7)
          padding: 40px 0 40px column(0.5, 7)

          h3
            color: $douvBlue
            font-size: 26px
            margin: 0

          h4
            font-size: 14px
            margin: 0

            p
              font-size: 14px
              margin: 0

            a
              text-decoration: none
              font-weight: bold
              font-size: 16px
              color: $douvBlue
              padding-bottom: 2px
              border-bottom: solid 2px $douvYellow
              transition: color 0.3s
              &:hover
                color: $douvYellow

          .order-box
            border: solid 2px $douvLightGray
            padding: 8px
            border-radius: 5px
            margin: 20px 0
            height: 66px
            width: 180px
            +inline-flex(space-between, center)

            .amount-label
              font-weight: bold
              font-size: 14px
              color: $douvBlue
              margin-left: 5px

            .amount-box
              border-radius: 5px
              background-color: $douvLightGray20
              display: inline-block
              padding: 0 15px 0 30px
              width: 110px
              +flex(space-evenly, center)

              .amount
                display: inline-block
                font-weight: bold
                font-size: 30px
                color: $douvBlue
                margin: 0
                padding: 0
                width: 100%
                background-color: transparent
                border: none
                text-align: right

              .amount-changers
                display: inline-block
                height: 100%
                width: 10px

                a
                  border-radius: 3px
                  border: solid 2px $douvYellow
                  color: $douvYellow
                  text-decoration: none
                  padding: 5px 0 8px 0
                  width: 16px
                  line-height: 0
                  height: 16px
                  +flex(space-around, center)
                  margin: 5px 0
                  transition: color 0.2s, background-color 0.2s

                  &:hover
                    background-color: $douvYellow
                    color: white

    a.button
      float: right
      span
        margin: 0 5px 0 15px
        font-size: 24px
        line-height: 0
        position: relative
        top: 1px

  .shoppingCartInfoBar
    width: column(4.5, 12)
    background-color: white
    padding: column(0.5, 12)
    color: $douvBlue
    border-radius: 3.354px
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05)

    label, input, textarea
      width: 100%
      display: block
      margin-bottom: 20px

    label
      font-weight: bold
      font-size: 14px

    .date-separator
      display: inline-block
      width: 15px
      border: solid 1px $douvBlue
      float: left
      margin: 5% 3.4% -5% 3.4%

    input, textarea
      border: none
      background-color: $douvLightGray20
      border-bottom: solid 1px $douvLightGray
      padding: 11px 8px
      font-size: 14px

      &:focus
        box-shadow: none
        outline: none
        border-bottom: solid 1px $douvYellow
        color: #8c8c8c

      &[type=date]
        width: 45%
        font-size: 14px
        font-family: "Titillium Web", sans-serif
        padding-left: 40px

        +placeholder
          color: $douvLightGray

        &::-webkit-inner-spin-button
          display: none

        &#from
          //position: relative
          float: left

          &:before
            content: "van"
            display: block
            position: absolute
            margin-left: -28px
            margin-top: -1px
            width: 40px
            height: 20px
            color: $douvBlue
            font-size: 14px

        &#till
          //position: relative
          float: right
          &:before
            content: "tot"
            display: block
            position: absolute
            margin-left: -28px
            margin-top: -1px
            width: 40px
            height: 20px
            color: $douvBlue
            font-size: 14px

      +placeholder
        font-size: 14px
        font-family: $douvTextFont
        color: $douvLightGray

    .submit
      width: column(1.5, 3.5)
      padding-right: 40px

      &:after
        line-height: 1.5em


    .email
      clear: both

+browser(Firefox)
  .shoppingCartContent
    .shoppingCartInfoBar
      input[type=date]
        &:before
          margin-top: 6px !important

+respond-to-width(1300)
  .shoppingCartContent
    .shoppingCartInfoBar
      .date-separator
        display: none
      input[type=date]
        width: 100%

+respond-to-width(840)
  header
    height: 60px
  .shoppingCartContent
    .shoppingCartInfoBar
      width: 100%
      .date-separator
        display: inline-block
        margin: 3.5% 3.4% -5% 3.4%
      input[type=date]
        width: 45%
    .shoppingcartItemList
      width: 100%
      padding-right: 0
      margin-bottom: 30px

+respond-to-width(600)
  .shoppingCartContent
    .shoppingcartItemList
      ul
        li
          &:before
            display: none

          .deleteButton
            z-index: 10

          .left
            background-color: transparent
            width: 100%
            img
              width: 92%
          .right
            width: 100%

            .info-link
              display: inline-block
              margin-left: 20px

+respond-to-width(435)
  .shoppingCartContent
    width: 100%
    padding-bottom: 0
    .titleHolder
      margin-top: 0
    .shoppingcartItemList
      ul
        li
          .right
            .info-link
              display: block
              margin-left: 0