@import '../common-view/index.scss';
.op-table-wrapper {
  overflow: auto;

  .op-table {
    width: 100%;
    border-spacing: 0px;
    table-layout: fixed;
    word-wrap: break-word;

    th.lock-select,
    td.lock-select {
      overflow: visible;
      position: sticky;
      left: 0;
      text-align: center;
      background-color: #ffffff;
    }

    th.lock-left,
    td.lock-left {
      overflow: visible;
      position: sticky;
      left: 0;
      text-align: center;
      background-color: #ffffff;
      box-shadow: 5px 0 5px -3px #c7d3e1;

      &.lock-left-has-select {
        left: 50px;
      }
    }

    th.lock-right,
    td.lock-right {
      overflow: visible;
      position: sticky;
      right: 0;
      text-align: center;
      background-color: #ffffff;
      box-shadow: -5px 0 5px -3px #c7d3e1;
    }

    &.auto-width {
      table-layout: auto;

      .op-table-header th,
      tbody td {
        white-space: nowrap;
      }
    }

    .op-table-header {
      position: sticky;
      top: -1px;
      z-index: 10;

      th {
        border: 0;
        border-bottom: 1px solid #c7d3e1;
        background-color: #d7eafe;
        font-size: 20px;
        font-weight: 500;
        padding: 12px;
        color: #2d4d6c;
      }
    }

    tr.selected {
      border-radius: 8px;
      td {
        background-color: #196ee6 !important;
        color: #ffffff !important;
        // box-shadow: -5px 0 5px -3px #0159d5;
        &.operate-table-cell__first {
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        &.operate-table-cell__last {
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }

    tr.complete,
    tr.completed {
      td {
        color: rgba(20, 61, 102, 0.5);
      }
    }

    tr th:first-child,
    tr td:first-child {
      padding-left: 10px;
    }
    tr th:last-child,
    tr td:last-child {
      padding-right: 10px;
    }

    tbody {
      tr {
        &:hover {
          td {
            background-color: #ebebeb;
          }
        }
      }

      td {
        border: 0;
        border-bottom: 1px solid #c7d3e1;
        padding: 12px;
        font-size: 20px;
        color: #2d4d6c;
      }

      .pkStatus {
        color: #fe3824;
      }
    }

    .td-align-right {
      text-align: right;
    }
    .td-align-left {
      text-align: left;
    }
    .td-align-center {
      text-align: center;
    }
  }
}
.op-table-title {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #196ee6;
  margin: 10px 0;
  > div:last-child {
    color: #6683a6;
  }
}

.op-table-group {
  .op-table-group-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    .op-table-title {
      flex: 1;
      font-size: 20px;
    }
  }

  .op-table-group-title-icon {
    display: flex;
    margin-right: 16px;
    transition: transform 100ms linear;

    &.transform {
      transform: rotate(90deg);
    }
  }
}

.op-table-count {
  display: flex;
  margin-bottom: 8px;
  .count-item {
    display: flex;
    align-items: baseline;
    font-size: 24px;
    .item-label {
      display: flex;
      color: #6683a6;
      cursor: pointer;
    }
    .item-value {
      font-size: 54px;
      color: #26364d;
      margin-right: 10px;
    }
    .cn-next-icon .cn-next-icon-remote.item-icon {
      width: 30px;
      font-size: 30px;
      cursor: pointer;
      &.icon-green {
        color: #00bf29;
      }
      &.icon-black {
        color: black;
      }
    }
  }

  .count-item + .count-item {
    margin-left: 5%;
  }
}

.op-table-image {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100px;
  max-height: 100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  &.loading {
  }
  img {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
  }
}

.op-image-dialog {
  text-align: left;
  .op-dialog-inner-content {
    .item-image {
      @extend .op-table-image;
      max-width: 600px;
      max-height: 400px;
    }
  }
}

.op-pagination-con {
  padding: 16px 0;
  display: flex;
  justify-content: flex-end;
  .#{$css-prefix}pagination-size-selector + .#{$css-prefix}pagination-pages {
    margin-left: 8px;
  }
  // .#{$css-prefix}pagination .#{$css-prefix}pagination-size-selector-title {
  //   font-size: 18px;
  // }
  // .#{$css-prefix}input .#{$css-prefix}input-text-field {
  //   height: 48px;
  //   line-height: 48px;
  //   font-size: 24px;
  // }
  // .#{$css-prefix}pagination-size-selector-dropdown .#{$css-prefix}select-inner {
  //   border-color: #143666;
  // }
}