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

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

  .keyboard {
    .icon-sousuo {
      opacity: 0.75;
    }
  }

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

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

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

        &[disabled] {
          background: #dfe1e6;
        }
      }
    }
  }

  .kb {
    display:flex;
    align-items: center;
    padding: 16px 16px 0;
    z-index: 2;
    position: relative;
    width: 100%;

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

      &[disabled] {
        background: #dfe1e6;
      }
    }

    .more{
      background: #fff;
      border: 1px solid #D2D2D7;
      border-radius: 4px;
      float: right;
      margin: 0;

      &:not(:last-child){ 
        margin: 0 0 0 16px;
      }
    }

    .keyboard {
      width: 270px;
      display: inline-block;
    }

    button {
      display: inline-block;
      vertical-align: baseline;
      margin: 0 16px;
      border-radius: 4px;
    }
    .product-saomiao {
      color    : #666666;
      font-size: 18px;
      margin-left: -22px;
      z-index: 2;
      height: 28px;
      line-height: 30px;
      background: #FFF;
    }
  }

  .extra {
    padding: 8px 16px;
    font-size: 12px;

    > span {
      color: red;
    }
  }

  .tabs {
    padding: 0 16px;
    height: 100%;
    margin-top: -64px;
    padding-top: 64px;

    .u-tabs-bar {
      margin-bottom: 0;
    }

    .u-tabs-tab {
      font-size: 16px;
      color: #333333;

      &.u-tabs-tab-active {
        color: #FF8C25;
      }
    }

    .u-tabs-ink-bar {
      background-color: #FF8C25;
    }

    .u-tabs-content,
    .u-tabs-tabpane {
      height: 100%;
    }

    .u-tabs-content {
      margin-top: -41px;
      padding-top: 41px;
    }

     .more{
      background: #fff;
      border: 1px solid #D2D2D7;
      border-radius: 4px;
      float: right;
      margin: 0;

      &:not(:last-child){ 
        margin: 0 0 0 16px;
      }
    }
  }

  .content {
    height: 100%;
    margin-top: -64px;
    padding-top: 64px;

    .table {
      height: 100%;
      margin: 0 16px;
    }

    &.showExtra {
      margin-top: -82px;
      padding-top: 82px;

      .tabs {
        margin-top: -82px;
        padding-top: 82px;
      }
    }

    &.hasTabs{
      margin-top: 0;
      padding-top: 0;

      .table { 
        margin: 0;
      }
    }

    .tabinfo {
      color: red;
      float: left;
      line-height: 32px;
    }
  }
}