form.profile-form {
  // Affiliation field.
  .field--name-field-group-affiliation,
  .field--name-field-other-affiliations {
    // Hide a misplaced success msg from Drupal not related to this field.
    .alert-success {
      display: none !important;
    }

    .table-responsive {
      overflow: hidden;
    }

    // Hide weight button.
    .btn.tabledrag-toggle-weight {
      display: none;
    }

    .clearfix {
      background: none;
    }

    table {
      border-collapse: separate;
      border-spacing: 0 12px;

      td,
      th {
        border: none;
      }

      thead {
        display: none;
      }

      tbody {
        tr {

          &:hover {
            background: #f3f3f3;
          }
        }

        td {
          padding-bottom: 1.75rem;

          &:nth-last-child(2)  {
            width: auto;
            text-align: right;
            padding-left: 0;
            padding-right: 0;

            button {
              border: none !important;
              background: none;
              width: 100%;
              padding-right: 16px;
              padding-left: 20px;
              position: relative;
              font-weight: 600;

              [dir='rtl'] & {
                padding-right: 20px;
                padding-left: 16px;
              }

              &::before {
                content: '';
                display: block;
                height: 16px;
                width: 16px;
                background-image: url('../images/icon-basket.svg');
                background-size: contain;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);

                [dir='rtl'] & {
                  right: 0;
                  left: auto;
                }
              }
            }
          }

          label {
            display: block;
          }

          .input-group {
            max-width: none;
          }

          .form-type-select {
            flex: none;
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 100%;

            .select2-container {
              .select2-selection {
                padding-left: 40px;
                position: relative;

                &:before {
                  content: '';
                  display: block;
                  height: 16px;
                  width: 16px;
                  padding: 2px;
                  background-color: #808080;
                  background-image: url('../images/sign.svg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 12px;
                  background-blend-mode: overlay;
                  position: absolute;
                  left: 12px;
                  top: 11px;
                }
              }
            }

            .input-group {
              max-width: 100%;
              width: 100%;

              .select-wrapper {
                max-width: calc(100% - 60px);
              }
            }
          }

          &.field-multiple-drag {
            width: 22px;
            max-width: 100%;
            padding: 2.3rem .25rem 0 1rem;
            text-align: center;
            vertical-align: top;

            [dir='rtl'] & {
              padding-right: 1rem;
              padding-left: .25rem;
            }

            .tabledrag-handle {
              position: static;
              width: 22px;
              padding: 0;
              margin: 0 auto;

              span:before {
                top: auto;
              }
            }

            + td {
              padding-left: .25rem;
              padding-top: 1.75rem;
              max-width: calc(100vw - 220px);

              @media (min-width: 600px) {
                max-width: 324px;
              }

              [dir='rtl'] & {
                padding-right: 1rem;
                padding-left: .25rem;
              }
            }
          }
        }
      }

      #ief-ajax-wrapper-0 {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }

  .field--name-field-group-affiliation {
    table {
      tbody {
        td:nth-last-child(2) {
          width: 110px;
          position: relative;
        }
      }
    }
    &.has-multiple-items {
      padding-top: 32px;
      position: relative;

      table {
        tr:first-child {
          td {
            &:first-child {
              border-bottom: 5px solid #343434;
              border-left: 5px solid #343434;

              [dir='rtl'] & {
                border-right: 5px solid #343434;
                border-left: none;
              }
            }

            &:nth-child(2) {
              border-bottom: 5px solid #343434;
            }

            &:nth-child(3) {
              border-bottom: 5px solid #343434;
              border-right: 5px solid #343434;

              [dir='rtl'] & {
                border-left: 5px solid #343434;
                border-right: none;
              }
            }
          }
        }
      }

      &::after {
        content: '';
        width: 100%;
        height: 32px;
        position: absolute;
        background: #343434;
        top: 12px;
      }
    }
  }

  .field--name-field-affiliation-function,
  .field--name-field-affiliation-org-name,
  .field--name-field-affiliation-org-function {
    .form-type-textfield {
      &:before {
        content: '';
        display: block;
        height: 16px;
        width: 16px;
        padding: 2px;
        background-color: #808080;
        background-image: url('../images/people.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px;
        background-blend-mode: overlay;
        position: absolute;
        left: 12px;
        top: 11px;
        z-index: 1;
      }

      label {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }

      .form-text {
        padding-left: 40px;
        position: relative;
      }
    }
  }

  .field--name-field-affiliation-org-function {
    .form-type-textfield {
      &:before {
        background-image: url('../images/sign.svg');
      }
    }
  }

  .field--name-field-affiliation-org-name {
    .form-type-textfield {
      margin-bottom: 8px;
    }
  }

  .field--name-field-affiliation-function {
    margin-top: 8px;
  }

  fieldset {
    position: relative;

    &:has(.field--type-group-affiliation.has-multiple-items) {
      &::after,
      &::before {
        display: block;
      }
    }

    &::after {
      content: attr(data-primary-text);
      position: absolute;
      color: white;
      top: 39px;
      left: 30px;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      display: none;

      [dir='rtl'] & {
        left: auto;
        right: 30px;
      }
    }

    &::before {
      content: attr(data-secondary-text);
      position: absolute;
      color: white;
      top: 39px;
      left: auto;
      right: 30px;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      display: none;
      z-index: 1;

      [dir='rtl'] & {
        right: auto;
        left: 30px;
      }

      @media(min-width: 620px) {
        right: calc(100% - 544px);

        [dir='rtl'] & {
          left: calc(100% - 544px);
          right: auto;
        }
      }
    }
  }

  .field--name-field-other-affiliations {
    .paragraphs-subform {
      max-width: calc(100vw - 240px);

      @media (min-width: 600px) {
        max-width: 360px;
      }
    }
    .paragraph-type {
      display: none;
    }

    .paragraphs-actions {
      & > button {
        display: none;
      }

      .paragraphs-dropdown {
        .paragraphs-dropdown-toggle,
        .paragraphs-dropdown-actions button:not(:first-child) {
          display: none;
        }

        .paragraphs-dropdown-actions {
          display: block;
          top: 6px;
          right: 0;
          border: none;
          background: transparent;
          box-shadow: none;

          button:first-child {
            border: none !important;
            background: none;
            width: 110px;
            padding-right: 16px;
            padding-left: 20px;
            position: relative;
            text-align: center;

            [dir='rtl'] & {
              padding-right: 20px;
              padding-left: 16px;
            }

            &::before {
              content: '';
              display: block;
              height: 16px;
              width: 16px;
              background-image: url('../images/icon-basket.svg');
              background-size: contain;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);

              [dir='rtl'] & {
                right: 0;
                left: auto;
              }
            }
          }
        }
      }
    }
  }
}
