@modalidth: 800px;
@modalHeight: 367px;
@modalPadding: 0;
@OperWith: 26px;
@primaryColor: #FF8C26;

.planSelectorModal {
  .u-checkbox-wrapper,
  .u-transfer-list-header-selected > span:first-child {
    display: none;
  }

  .u-modal-dialog {
    width: @modalidth !important;
    padding: 0 !important;
  }

  .u-modal-body {
    height: @modalHeight !important;
    background: #F4F4F4;
    padding: 0 @modalPadding;
  }

  .u-modal-footer {
    button {
      border-radius: 4px;
      background: #fff;
      color: #000;

      &.ok {
        color: #fff;
        background: @primaryColor;
        border: none;
      }
    }
  }

  .u-transfer {
    height: 100%;
    padding: 0 16px;
    width: @modalidth - 2 - @modalPadding * 2 !important;
  }

  .u-transfer-list {
    // 2 + 17 + 32 modal panding
    // 26 u-transfer-operation
    width: (@modalidth - 2 - 16 * 2 - @OperWith) / 2;
    height: @modalHeight;
    background: #FFFFFF;
    border: 0;
    height: 100%;

    .u-transfer-list-body {
      background: none;
    }

    .u-transfer-list-header {
      background: #F4F4F4;
      border: 0;
    }

    .u-transfer-list-header-title {
      left: 0;
      font-weight: bold;
      font-size: 14px;

      .btn {
        float: right;
        cursor: pointer;
        color: #999999;
        margin-right: -15px;

        &.enabled {
          color: #32ABF9;
        }
      }
    }

    .LazyLoad.is-visible {
      height: auto !important;
    }

    .u-checkbox {
      display: none;
    }

    .u-transfer-list-content {
      padding: 12px 8px;
      border-radius: 4px 4px 0 0;
      background: #fff;

      > div {
        height: auto !important;
      }

      ul > div {
        margin: 8px 0;

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .u-transfer-list-content-item {
      padding: 8px 12px;
      background: #F4F4F4;
      border-radius: 4px;

      > span {
        display: block;
        padding: 0;
      }

      .planitem {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        line-height: 18px;
        position: relative;

        .no {
          padding: 12px 12px 12px 0;
          font-size: 14px;
          font-weight: bold;
          line-height: 100%;
        }

        .titlearea {
          flex: 1;
          width: 100%;
          display: block;

          .title {
            display: block;
          }

          .description {
            color: #666;
            font-size: 13px;
            width: 100%;
            margin-top: 8px;
            display: block;
            word-wrap: break-word;
            word-break: normal;
            white-space: normal;
          }
        }

        .extra {
          position: absolute;
          right: 0;
        }
      }
    }
  }

  .u-transfer-operation {
    width: @OperWith;
    margin: 0;

    > button {
      display: none;
    }
  }
}