#return-form-wrapper
  font-size: 20px

  .intro-block
    padding: 45px 40px

    h2
      font-size: 1em
      line-height: 1.2em
      color: $blue
      margin: 0 0 20px

    p
      margin: 1em 0
      font-size: 0.8em
      line-height: 0.95em
      color: $grey

  .form-wrapper
    padding: 0 40px 45px

    form

      .required-icon
        font-size: 14px
        color: $darkOrange


      hr.dashed
        border: none
        border-bottom: 1px dashed $light-grey

      h3
        font-size: 1em
        line-height: 1.2em
        color: $blue
        margin: 0 0 20px

      .input-holder
        position: relative
        float: none
        margin-right: 0

        p.label
          display: block
          font-size: 0.7em
          line-height: 0.8em
          +bold
          margin-bottom: 10px
          color: $grey

        &.ordernumber-holder
          max-width: 400px

        .input-file-placeholder
          position: relative
          padding: 8px
          min-height: 35px
          +flex(space-between, center)
          border: 1px solid #d6cfc9
          border-radius: 4px
          cursor: pointer

          input[type="file"]
            position: absolute
            width: 100%
            height: 100%
            opacity: 0

          label
            text-transform: none
            +type-basic
            +flex(flex-start, center)
            margin: 0
            padding-right: 120px
            color: rgba($grey, 0.6)
            letter-spacing: 0
            font-size: 0.7em
            line-height: 0.85em
            cursor: pointer

          span
            position: absolute
            right: 0
            top: 0
            +flex(center, center)
            height: 100%
            width: 120px
            border-radius: 4px
            background-color: $grey
            font-size: 0.7em
            line-height: 0.85em
            color: white
            +semibold
            cursor: pointer
            transition: background-color 0.2s

          &:hover
            span
              background-color: darken($grey, 8%)

      label:not(.radio-label)
        font-size: 0.7em
        line-height: 0.8em
        margin-bottom: 10px
        text-transform: none
        letter-spacing: 0

      input[type="number"], input[type="file"]
        padding: 0 8px
        width: 100%
        height: 32px
        border: 1px solid #d6cfc9
        border-radius: 4px
        +type-basic

      input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, input[type="file"]
        font-size: 0.7em
        line-height: 0.85em
 
        +placeholder
          color: rgba($grey, 0.6)

      textarea
        padding: 16px 8px

      .input-wrapper
        +flex(flex-start, flex-start)

        .input-holder
          max-width: 135px

          + .input-holder
            margin-left: 15px

      .radio-wrapper
        +flex(space-between, center)

        + .radio-wrapper
          margin-top: 10px

        input
          width: 14px
        label
          width: calc(100% - 30px)
          margin: 0
          text-transform: none
          +regular
          font-size: 0.8em
          line-height: 0.95em
          color: $grey
          letter-spacing: 0

          b
            +bold

      #search-order
        opacity: 1
        padding-bottom: 15px
        border-bottom: 1px dashed $light-grey
        transition: opacity 0.3s
        &.inactive
          opacity: 0.6
          pointer-events: none
          user-select: none
          user-focus: none
          cursor: not-allowed

        .info-button
          position: absolute
          right: -11px
          top: 10px
          +flex(center, center)
          width: 21px
          height: 21px
          background-color: $blue
          border-radius: 100%
          color: white
          font-size: 0.6em
          cursor: help

          .tooltip
            display: block
            position: absolute
            right: -130px
            top: -115px
            width: 280px
            height: 100px
            color: rgba($grey, 0.7)
            text-align: center
            font-size: 1.2em
            line-height: 1.5em
            padding: 20px
            background-color: white
            box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2)
            opacity: 0
            pointer-events: none
            transform: translate3d(0, -10px, 0)
            transition: transform 0.4s, opacity 0.4s

            &:after
              content: ''
              position: absolute
              right: 130px
              bottom: -10px
              width: 0
              height: 0
              border-style: solid
              border-width: 10px 10px 0 10px
              border-color: #ffffff transparent transparent transparent

          &:hover
            .tooltip
              opacity: 1
              transform: translate3d(0,0,0)


      #order-information-validation
        padding: 30px 0

        &.hide
          display: none

        p
          display: none
          margin: 0
          font-size: 0.8em
          line-height: 0.95em

          &.show
            +flex(flex-start, center)
            margin-bottom: 30px

          &:before
            content: ''
            display: inline-block
            margin-right: 15px
            @extend %icon-sprite

        .success
          color: $green
          &:before
            +icon-sprite(0, 2, 16px, 16px)

        .false
          color: $errorRed
          &:before
            +icon-sprite(0, 7, 16px, 16px)

        .btn
          height: auto
          padding: 12px 35px 12px 20px
          font-size: 0.7em
          line-height: 0.65em
          opacity: 0.2
          transition: opacity 0.3s

          &.enabled
            opacity: 1

      #orderinfoformpart
        display: none

        &.show
          display: block
          margin-top: 30px

        #articlesselector
          margin-bottom: 45px

          .returnproducts
            width: 100%

            th, td
              &:nth-child(1), &:nth-child(2)
                text-align: left

              &:nth-child(3), &:nth-child(4)
                text-align: right

            thead
              border-bottom: 1px solid $grey

              th
                font-size: 0.75em
                line-height: 0.95em
                color: $grey
                padding: 5px 0

            tbody
              tr
                padding: 16px 0
                border-bottom: 1px solid rgba($light-grey, 0.4)

              td
                padding: 16px 0
                font-size: 0.85em
                line-height: 1em
                color: $grey
                vertical-align: top

                span, p
                  font-size: 0.85em
                  line-height: 1.4em
                  color: $grey
                  margin: 0

                &:nth-child(1)
                  p
                    display: inline-block
                    margin-left: 15px

                  .yes-text
                    display: none

                  &.enabled
                    .yes-text
                      display: inline-block

                    .no-text
                      display: none

                &:nth-child(2)
                  span
                    color: $blue
                    +bold

                &:nth-child(4)

                  .wrapper
                    +flex(flex-end, center)

                  .value
                    display: inline-block
                    width: 30px
                    text-align: center

                  .button
                    width: 21px
                    height: 18px
                    +flex(center, center)
                    background-color: $blue
                    border-radius: 4px
                    cursor: pointer

                    &:after
                      content: ''
                      @extend %icon-sprite
                      +icon-sprite(0, 0, 5px, 8px)
                      display: inline-block

                    &.less
                      &:after
                        transform: scale3d(-1, 1, 1)

        #returnreasonselector
          display: none

          &.show
            display: block
            margin-bottom: 30px

          h4
            margin: 0 0 20px
            color: $grey
            font-size: 0.8em
            line-height: 0.9em
            +bold

        #actiontopsselector
          display: none
          padding-bottom: 10px

          &.show
            display: block
            padding-top: 30px
            border-top: 1px dashed $light-grey

          .tops-action-selectors
            padding-bottom: 30px
            border-bottom: 1px dashed $light-grey
            margin-bottom: 30px

          #returnforknownfilterformpart, #returnforunknownfilterformpart, #returnforrefundformpart
            display: none

            &.show
              display: block

          #returnforknownfilterformpart
            .input-holder
              max-width: 400px

          #returnforrefundformpart, #returnforunknownfilterformpart
            p:not(.label), h4
              font-size: 0.85em
              line-height: 1.5em
              color: $blue
              margin: 0
              max-width: 465px
              +regular
              font-weight: 400

          #returnforrefundformpart
            padding-bottom: 20px


          #returnforunknownfilterformpart
            h4
              margin-bottom: 30px

            .input-holder
              max-width: 400px

            .input-grouper
              +flex(space-between, flex-start)
              max-width: 400px

              .input-holder
                width: calc((100% - 30px) / 3 )

            #unknownfilterphoto-wrapper
              .input-file-placeholder
                position: relative

              .info-button
                position: absolute
                right: -11px
                top: -10px
                +flex(center, center)
                width: 21px
                height: 21px
                background-color: $blue
                border-radius: 100%
                color: white
                font-size: 0.6em
                cursor: help
              .tooltip
                display: block
                position: absolute
                right: -130px
                top: -130px
                width: 280px
                height: 115px
                color: rgba($grey, 0.7)
                text-align: center
                font-size: 1.2em
                line-height: 1.5em
                padding: 20px
                background-color: white
                box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2)
                opacity: 0
                pointer-events: none
                transform: translate3d(0, -10px, 0)
                transition: transform 0.4s, opacity 0.4s

                &:after
                  content: ''
                  position: absolute
                  right: 130px
                  bottom: -10px
                  width: 0
                  height: 0
                  border-style: solid
                  border-width: 10px 10px 0 10px
                  border-color: #ffffff transparent transparent transparent

              &:hover
                .tooltip
                  opacity: 1
                  transform: translate3d(0,0,0)

        #damagedformpart
          display: none
          border-top: 1px dashed $light-grey
          padding-top: 30px

          &.show
            display: block
            margin-bottom: 30px

          .input-holder
            max-width: 400px

        #notes
          display: none
          border-top: 1px dashed $light-grey
          padding-top: 30px
          margin-bottom: 30px

          &.show
            display: block
            margin-bottom: 30px

          .input-holder
            max-width: 400px

            >p
              font-size: 0.7em
              opacity: 0.5
              margin-bottom: 10px

        .btn.return_submit
          height: auto
          padding: 12px 35px 12px 20px
          font-size: 0.7em
          line-height: 0.65em
          opacity: 0.2
          transition: opacity 0.3s

          &.enabled
            opacity: 1