page-stream-join-task {
  display: block;

  ul {
    margin-bottom: 0;
  }

  select-multiple {
    flex: 1;

    .select-selection__rendered {
      overflow-y: auto;
      max-height: 68px;
    }
  }

  select-multiple, sharp-selector {
    border: none !important;
    padding: 0 !important;
  }

  .day-data {
    padding: 0;
  }

  .remark {
    margin-right: 0 !important;
    padding: 0;

    label {
      padding:0 25px 0 64px;
    }
  }

  .no-flex {
    flex: none !important;
  }

  .red::after {
    content: '*';
    color: red;
    vertical-align: text-top;
  }

  .join-form {
    background-color: white;
    padding: 15px;
  }

  .form {
    display: flex;
    margin: 10px 0;

    .group {
      flex: 1;
      display: flex;
      align-items: center;

      .partition-num {
        margin-left: 10px;
      }

      label {
        text-align: right;
        margin-right: 10px;
      }

      .form-control {
        flex: 1;
      }
    }
  }

  .config {
    .agg-field {
      flex: 0.7;
      margin-top: 15px;

      .field {
        margin-right: 45px;

        p {
          flex: 1;
          margin: 0;
          margin-right: 10px;
        }
      }

      li {
        display: flex;
        align-items: center;
        margin-top: 5px;

        .form-control {
          margin-right: 10px;
        }
      }
    }

    [for="output"] {
      padding-left: 39px;
    }

    [for="input"] {
      padding-left: 53px;
    }

    .group:nth-child(even) {
      & > label {
        width: 150px;
      }
    }
  }

  .step-box {
    display: block;
    margin-top: 10px;

    .step-hint {
      font-weight: bold;
      padding: 20px 0 10px 0;
      color: #111;
    }

    label {
      display: inline-block;
      width: 115px;
    }

    select, input, .form-control {
      flex: none !important;
      width: 200px;
      min-width: 100px;
      max-width: 500px;
    }
  }

  .step-1-box {
    select, input, .form-control {
      max-width: 300px;
    }
  }

  .step-2-box {
    select, input, .form-control {
      width: 100px;
      max-width: 100px;
      margin-right: 10px;
    }
  }

  .step-3-box {
    .inline-symbol {
      width: 50px;
      text-align: center;
    }

    .temp-form {
      margin: 0;
      padding: 0;

      .form-control {
        border: none;
        text-align: center;
      }
    }

    .flex-form-control {
      width: 450px;
    }
  }

  .cat-group {
    display: flex;

    .cat-right {
      font-size: 0;

      .splicing-box {
        display: inline-block;
        margin: 0;
        padding: 0;
        vertical-align: top;
        position: relative;
        left: 0;
        color: #6CF7FF;

        &.splicing-box-1 {
          width: 120px;
          height: 46px;
          top: 26px;
          border: 2px solid #6CF7FF;
          border-left: none;
        }

        &.splicing-box-2 {
          width: 100px;
          height: 51px;
          top: 0;
          border-bottom: 2px solid #6CF7FF;
        }

        &.splicing-box-3 {
          padding-top: 42px;

          .fa {
            font-size: 16px;
          }
        }
      }
    }

    .cat-end {
      margin-left: 10px;

      label {
        width: auto;
      }

      .form {
        margin-top: 34px;

        .form-control {
          width: auto;
          min-width: 90px;
          max-width: 180px;
        }
      }
    }
  }

  .form-group {
    &>div {
      vertical-align: top;
    }
  }
}