.webform-submission-apply-form {
  max-width: rem-calc(560);
  margin: 0 auto;

  .js-form-item {
    @include media-breakpoint-up(md) {
      margin-bottom: rem-calc(24);
    }

    label {
      color: $text-colors-text-secondary;

      @include media-breakpoint-up(md) {
        font-size: rem-calc(16);
        font-weight: $font-weight-semibold;
        line-height: rem-calc(24);
        letter-spacing: rem-calc(-1);
        margin-bottom: rem-calc(12);
      }
    }

    .form-control {
      border: 1px solid transparent;
      color: #929292;
      font-size: rem-calc(16);
      font-weight: $font-weight-semibold;
      line-height: rem-calc(24);
      letter-spacing: rem-calc(-1);
      padding: rem-calc(11) $padding-padding-md;

      &:hover {
        border: 1px solid $primary-colors-primary;
      }

      &:active,
      &:focus {
        border: 1px solid $primary-colors-primary;
      }
    }
  }

  .checkbox {
    padding-left: 0;

    input {
      visibility: hidden;
      height: 1px;
      position: absolute;

      &:checked {
        ~ label::before {
          font-family: $font-fontawesome;
          content: "\f00c";
          background-color: $primary-colors-primary;
        }

        ~ label:hover::before {
          box-shadow: 0 0 0 3px $background-colors-background-primary;
        }
      }
    }

    label {
      padding-left: rem-calc(26);
      position: relative;
      cursor: pointer;

      &::before {
        content: "";
        left: 0;
        top: rem-calc(3);
        border-radius: rem-calc(4);
        border: 1px solid $primary-colors-primary;
        height: rem-calc(18);
        width: rem-calc(18);
        position: absolute;
        color: $primary-colors-primary-contrast;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: rem-calc(12);
        transition: all 0.3s ease;
      }

      &:hover::before {
        box-shadow: 0 0 0 3px $background-colors-background-secondary;

      }
    }
  }

  .form-actions {
    margin-bottom: 0;

    [type="submit"] {
      width: 100% !important;
      margin-right: 0 !important;
      background-position: right 24px center;

      @include media-breakpoint-up(md) {
        background-position: right 235px center;
      }

      &:hover,
      &:active,
      &:focus {
        background-image: url('../images/arrow-right-long.svg');
        background-position: right 24px center;
        background-repeat: no-repeat;
        border: 0;

        @include media-breakpoint-up(md) {
          background-position: right 235px center;
        }
      }
    }
  }
}

[class*=bg-]:has(.webform-submission-apply-form) {
  &::before {
    background-image: url('../images/red-lines-left.svg'), url('../images/red-lines-right.svg');
    background-repeat: no-repeat;
    background-position: bottom 40px left -364px, top 40px right -75px;
    background-size: 150px 34px;


    @include media-breakpoint-up(md) {
      background-position: bottom 80px left -150px, top 80px right 0;
      background-size: 343px 64px;
    }

    @include media-breakpoint-up(xl) {
      background-position: bottom 80px left 0, top 80px right 0;
    }
  }
}
