/* ==========================================================================
   Forbidden page
   ========================================================================== */

.forbidden-form
  position: relative
  overflow: hidden
  width: 100%
  padding: 60px 0

  +respond-to-width(425)
    padding: 0

  &:before
    content: ''
    position: absolute
    display: block
    left: 0
    bottom: 0
    width: 648px
    height: 648px
    background: url('/img/svg/big_hamer.svg')
    background-size: 130%
    background-position: 170% -25%
    background-repeat: no-repeat

    +respond-to-width(950)
      display: none

  .white-box
    position: relative
    width: column(8, 14)
    background-color: white
    border-radius: 2px
    +flex()

    .left, .right
      width: 50%
      padding: 60px column(1, 9)

      h3
        font-size: 18px
        font-weight: normal
        font-style: italic

      h4
        font-size: 15px
        font-weight: normal
        color: $euroLightGrey

      input
        margin-bottom: 20px

        &[type='submit']
          display: none

      .submit
        label
          border-radius: 5px
          border: none
          font-size: 15px
          width: 150px
          cursor: pointer
          padding: 11.5px 20px
          text-transform: none
          +flex()

    .left
      border-right: solid 1px #E0E1E3

      .submit
        label
          margin-top: 0
          background-color: $blue
          color: white
          &:hover
            color: white
            background-color: lighten($blue, 10%)

          svg
            position: relative

            &:after
              content: '+'
              display: block
              color: white
              top: 0
              right: 0
              width: 5px
              height: 5px

            .cls-1
              opacity: 1

    .right
      .alert
        background-color: rgba(#F95D5D, 0.3)
        display: block
        padding: 5px 10px
        font-size: 13px
        color: #d40606
        border-radius: 5px
        margin-bottom: 15px

      .submit
        label
          background-color: $euroYellow
          color: black
          &:hover
            background-color: lighten($euroYellow, 10%)

          > svg
            .cls-1
              opacity: 1
              fill: black

      a
        font-size: 0.6rem
        color: $euroLightGrey
        text-transform: uppercase
        border-bottom: solid 1px $euroLightGrey
        text-decoration: none
        padding-bottom: 2px
        &:hover
          color: lighten($euroLightGrey, 10%)



+respond-to-width(1280)
  body
    > .content
      &.emptyContent
        padding: 0

  .forbidden-form
    .white-box
      width: column(12, 14)

+respond-to-width(855)
  .forbidden-form
    .white-box
      display: block

      .left, .right
        width: 100%
        padding: 60px column(1, 9)

        h3, h4
          margin-top: 0

      .left
        border-right: none
        border-bottom: solid 1px #E0E1E3

+respond-to-width(425)
  .forbidden-form
    .white-box
      width: 100%