$prefix: 'ui-rc' !default;
$antdPrefix: 'ant' !default;
$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
$border-radius: 6px !default;

$primary: #eb4619 !default;

$rowHoverBg: #FBDED6 !default;
$rowSelectedBg: #FEF2EF !default;
$tableBorderColor: #e0e0e0 !default;
$border-selected-color: #0550C5 !default;
$body-color: #ffffff !default;
$cell-selected-bg: #F3F8FF !default;
$cell-index-selected-bg: #1869E6 !default;
$cell-index-focus-bg: #E6EFFD !default;

// 404071

// dark
$tableBorderColorDark: #44485E !default;

$rowHoverBg-Dark: #404071 !default;

$rowSelectedBg-Dark: #25293C !default;

$border-selected-color-Dark: #538ff1 !default;
$cell-index-selected-bg-Dark: #1869E6 !default;

$body-color-Dark: #343e59 !default;

$cell-selected-bg-Dark: #F3F8FF !default;
$cell-index-focus-bg-Dark: #E6EFFD !default;





* {
  box-sizing: border-box;
}


.#{$prefix}-grid {

  // border: 1px solid $tableBorderColor;

  color: #000000de;
  background-color: #ffffff;

  font-size: 14px;
  .toolbar-icon {
    cursor: pointer;
    &:focus {
      outline: none;
    }
  }

  table {
    // border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    // border: 1px solid $tableBorderColor;
  }

  .#{$prefix}-grid-container {

    // border: 1px solid $tableBorderColor;
    // border-right: 0;
    // font-size: 13px;

    // &::after {
    //   content: "";
    //   position: absolute;
    //   top: 0px;
    //   right: 0;
    //   height: 100%;
    //   border-right: 1px solid $tableBorderColor;
    //   pointer-events: none;
    //   z-index: 1;
    // }

    .#{$prefix}-grid-cell {

      padding: 7px 8px;

      &.#{$prefix}-grid-cell-text-center {
        text-align: center;
        justify-content: center;

      }

      &.#{$prefix}-grid-cell-text-right {
        justify-content: flex-end;
        text-align: right;

      }

      &.#{$prefix}-grid-cell-ellipsis {


        .ui-rc_cell-content {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: keep-all;

          &.select-cell {
            padding-right: 18px;
            position: relative;

          }

          .caret-down {
            float: right;
            position: absolute;
            right: 0;

            &::before {
              content: '';
              display: inline-block;
              margin-left: 4px;
              vertical-align: middle;
              width: 0;
              height: 0;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 5px solid #6f7777;
            }
          }

        }

      }

      &.#{$prefix}-grid-cell-wrap {
        white-space: normal;
        // overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
      }

      .#{$prefix}-grid-header-text-wrap {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
      }

    }

    .#{$prefix}-grid-thead {
      // background-color: #ffffff;
      background-color: inherit;
       font-weight: 500;

      .#{$prefix}-grid-cell {
        font-weight: inherit;
        color: #000000E0;

        background-color: inherit;
        border-inline-end: 1px solid $tableBorderColor;
        border-bottom: 1px solid $tableBorderColor;

        &.ui-rc-grid-cell-ellipsis {

          .ui-rc-table-column-title,
          .#{$prefix}-grid-cell-ellipsis {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: keep-all;
          }

        }

        &.ui-rc-grid-cell-wrap {

          .ui-rc-table-column-title,
          .#{$prefix}-grid-cell-text-wrap {
            white-space: normal;
            word-break: break-word;
            overflow: hidden;
          }

        }

        &:hover {
          .ui-rc-header-trigger {

            .ui-rc-table-column-sorter-cancel {
              opacity: 1;

            }

          }
        }


        .#{$prefix}-grid-filter-column {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
          position: relative;
          z-index: 3;
        }

        .ui-rc-header-trigger {
          padding-left: 6px;
          display: flex;
          align-items: center;

          .ui-rc-table-column-sorter-cancel {
            opacity: 0;
          }

        }

        .resizer {

          /* background: rgba(0, 0, 0, 0.5); */
          cursor: col-resize;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 3;
          touch-action: none;
          user-select: none;
          width: 5px;

          // &::before {
          //   content: '';
          //   border-left: 2px solid blue;
          // }
        }

        .resizer.isResizing {
          // &::before {
          //   content: '';
          //   // border-left: 2px solid gray;
          //   border-left: 2px solid rgb(70, 115, 228);
          //   position: absolute;
          //   // height: 50%;
          //   height: 100%;
          //   // top: 25%
          // }

          // background: blue;
          opacity: 1;
        }




      }

    }

    .#{$prefix}-grid-tbody {

      .#{$prefix}-grid-row {
        border-bottom: 1px solid lightgray;
      }

      .#{$prefix}-grid-row {
        display: flex;
        position: absolute;
        width: 100%;
        // background-color: #ffffff;
        background-color: inherit;

        &:hover {
          .#{$prefix}-grid-cell:not(.editable) {
            // background-color: $rowHoverBg;

            &.cell-editable,
            &.#{$prefix}-grid-cell-index,
            &.#{$prefix}-grid-cell-selection {
              // background-color: transparent;
            }

            // &.ui-rc-grid-cell-index {
            //   background-color: #ffffff;
            // }
          }
        }

        &.#{$prefix}-grid-row-selected {

          .#{$prefix}-grid-cell {
            background-color: $rowSelectedBg;
          }

        }

        &.#{$prefix}-grid-row-focus {

          .#{$prefix}-grid-cell {
            background-color: $rowHoverBg;
          }

        }

      }

      .#{$prefix}-grid-cell {
        outline: none;
        border-inline-end: 1px solid $tableBorderColor;

        // background-color: $body-color;
        background-color: inherit;

        &.#{$prefix}-grid-cell-text-wrap {
          .ui-rc_cell-content {
             word-break: break-word;
          }

        }

        &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: keep-all;

        }

        &.#{$prefix}-grid-cell-index-selected {
          background-color: $cell-index-selected-bg !important;
          color: #ffffff;
        }



        &.cell-editable {

          // padding: 0;
          user-select: none;

          &.cell-border-top {

            //border-bottom: 1px solid $border-selected-color;
            &::after {
              content: "";
              position: absolute;
              top: 0px;
              left: 0;
              //right: 0;
              //bottom: 0;
              height: 1px;
              width: 100%;
              border-top: 1px solid $border-selected-color;
              /* line đè lên border gốc */
              pointer-events: none;
              /* không ảnh hưởng đến tương tác */
              z-index: 1;
            }

            // &.ui-rc-grid-cell-fix-left-last {
            //   &::after {
            //     left: -100%;
            //   }
            // }

            // &.ui-rc-grid-cell-fix-right-first {
            //   &::after {
            //     left: 100%;
            //   }
            // }

          }

          &.cell-border-bottom {
            border-bottom: 1px solid $border-selected-color;


          }

          &.cell-border-left {

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              //right: 0;
              //bottom: 0;
              height: 102%;
              width: 1px;
              border-left: 1px solid $border-selected-color;
              /* line đè lên border gốc */
              pointer-events: none;
              /* không ảnh hưởng đến tương tác */
              z-index: 1;
            }
          }

          &.cell-border-right {
            border-inline-end: 1px solid $border-selected-color;

          }

          &.cell-paste-border-top {

            // border-bottom: 1px dashed #949494;
            &::after {
              content: "";
              position: absolute;
              top: 0px;
              left: 0;
              //right: 0;
              //bottom: 0;
              height: 1px;
              width: 100%;
              border-top: 1px dashed #949494;
              /* line đè lên border gốc */
              pointer-events: none;
              /* không ảnh hưởng đến tương tác */
              z-index: 1;
            }

            &.ui-rc-grid-cell-fix-left-last {
              &::after {
                left: -100%;
              }
            }

            &.ui-rc-grid-cell-fix-right-first {
              &::after {
                left: 100%;
              }
            }
          }

          &.cell-paste-border-bottom {
            border-bottom: 1px dashed #949494;
          }

          &.cell-paste-border-left {
            // border-inline-end: 1px dashed #949494;

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              //right: 0;
              //bottom: 0;
              height: 102%;
              width: 1px;
              border-left: 1px dashed #949494;
              /* line đè lên border gốc */
              pointer-events: none;
              /* không ảnh hưởng đến tương tác */
              z-index: 1;
            }
          }

          &.cell-paste-border-right {
            border-inline-end: 1px dashed #949494;
          }

          .dragging-point {
            //visibility: hidden;
            width: 6px;
            height: 6px;
            position: absolute;
            cursor: crosshair;
            right: 0px;
            bottom: 0px;
            //background: red;

            &.hidden {
              display: none;
            }

            .dot-point {
              position: absolute;
              width: 6px;
              height: 6px;
              border-radius: 0px;
              background-color: $border-selected-color;
              bottom: 0;
              right: 0;
            }

          }

        }

        &.cell-editing {
          padding: 0;

          //padding: 0 !important;
          &:focus-visible {
            outline: none;
          }

          .ant-form-item,
          .ant-row.ant-form-item-row,
          .ant-col.ant-form-item-control,
          .ant-form-item-control-input,
          .ant-form-item-control-input-content,
          .ant-input {
            height: 100% !important;
            max-height: unset !important;

            &:focus-visible {
              outline: none;
            }
          }

          textarea.ant-input {
            line-height: 1.8;
          }

          input.be-cell-editing,
          .ant-picker,
          .ui-rc-picker,
          .ui-rc-select-selector,
          .ui-rc-table-select-selector {
            padding-inline: 7px;
          }

          .#{$prefix}-checkbox-wrapper {
            .#{$prefix}-checkbox {
              background-color: red;
            }

            .#{$prefix}-checkbox-input {
              &:focus-visible {
                outline: none;
              }
            }
          }


          .ant-input,
          .ant-picker,
          .ui-rc-picker {
            border-radius: 0;
          }

          // color picker

          .ant-color-picker-trigger {
            height: 100%;
            border-radius: 0;

            .ant-color-picker-color-block {
              height: 100%;
              width: 100%;
            }

          }


          // ------------ select  ---------------

          .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
          .#{$prefix}-select-single .#{$prefix}-select-selector,
          .ui-rc-table-select-selector {

            border-radius: 0 !important;

          }

          .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
            .#{$prefix}-table-select-selector {
              .#{$prefix}-table-select-selection-search-input {
                height: auto;
              }
            }
          }
        }

        &.#{$prefix}-grid-cell-selected {
          background-color: $cell-selected-bg !important;
        }

        &.disable {
          padding: 7px 8px !important;
          background-color: #f0f0f0;
        }

        &.#{$prefix}-grid-cell-command {
          padding: 2px 8px;

          .ui-rc_cell-content {
            display: flex;
          }
        }


        .isValid {
          &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-right: 8px solid red;
            border-bottom: 8px solid transparent;
          }
        }
      }

    }

    .#{$prefix}-grid-tfoot {
      // background-color: rgb(250, 250, 250);

      .#{$prefix}-grid-footer-row {
        border-bottom-width: 1px;
        border-bottom-color: $tableBorderColor;
        border-bottom-style: solid;

        border-top-width: 1px;
        border-top-color: $tableBorderColor;
        border-top-style: solid;

        background-color: #fafafa;

      }

      .#{$prefix}-grid-cell {

        background-color: inherit;

        border-inline-end: 1px solid $tableBorderColor;
        font-weight: 500;
      }
    }

  }



  .#{$prefix}-grid-container {



    &.ui-rc-table-ping-left {

      .#{$prefix}-grid-cell {

        &.cell-editable {


          &.cell-border-top {
          
            &.ui-rc-grid-cell-fix-left-last {
              &::after {
                left: -100%;
              }
            }

          }

          &.cell-paste-border-top {


            &.ui-rc-grid-cell-fix-left-last {
              &::after {
                left: -100%;
              }
            }

            &.ui-rc-grid-cell-fix-right-first {
              &::after {
                left: 100%;
              }
            }
          }

        }



        &.#{$prefix}-grid-cell-fix-left-last {

          &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: -1px;
            width: 30px;
            transform: translateX(100%);
            transition: box-shadow 0.3s;
            content: "";
            pointer-events: none;
            box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
          }


        }



      }

    }

    &.ui-rc-table-ping-right {

      .#{$prefix}-grid-cell {

        &.#{$prefix}-grid-cell-fix-right-first {
          &::after {
            position: absolute;
            top: 0;
            bottom: -1px;
            left: 0;
            width: 30px;
            transform: translateX(-100%);
            transition: box-shadow 0.3s;
            content: "";
            pointer-events: none;
            box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
          }

          &::before {
            content: "";
            position: absolute;
            inset-block: 0;
            inset-inline-start: -1px;
            border-inline-start: 1px solid #e0e0e0;
          }
        }

        &.cell-editable {



          &.cell-border-top {

            // &::after {
            //   content: "";
            //   position: absolute;
            //   top: 0px;
            //   left: 0;
            //   //right: 0;
            //   //bottom: 0;
            //   height: 1px;
            //   width: 100%;
            //   border-top: 1px solid $border-selected-color;
            //   /* line đè lên border gốc */
            //   pointer-events: none;
            //   /* không ảnh hưởng đến tương tác */
            //   z-index: 1;
            // }

            // &.ui-rc-grid-cell-fix-left-last {
            //   &::after {
            //     left: -100%;
            //   }
            // }


            &.ui-rc-grid-cell-fix-right-first {
              &::after {
                left: 100%;
              }
            }

          }


          &.cell-paste-border-top {


            &.ui-rc-grid-cell-fix-left-last {
              &::after {
                left: -100%;
              }
            }

            &.ui-rc-grid-cell-fix-right-first {
              &::after {
                left: 100%;
              }
            }
          }


        }

      }

    }

  }



  // bottom toolbar
  .ui-rc-toolbar-bottom {
    // border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    .be-toolbar-item {
      .toolbar-dropdown-button {
        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
          border-color: #28c76f;
        }

        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
          border-color: #28c76f;

          .ant-btn-icon {
            color: #28c76f;
          }
        }
      }

    }
  }

  .ui-rc-toolbar-bottom_border-bottom {
    border-bottom: 1px solid #e0e0e0;
  }

  .ui-rc-toolbar-bottom {
    position: relative;
    padding: .25rem 1rem;
    background-color: #ffffff;

    // &::before {
    //   content: "";
    //   position: absolute;
    //   border-left: 1px solid #e0e0e0;
    //   height: 100%;
    //   bottom: 0;
    //   left: 0;
    //   //z-index: -1;
    // }

    // &::after {
    //   content: "";
    //   position: absolute;
    //   border-left: 1px solid #e0e0e0;
    //   height: 100%;
    //   bottom: 0;
    //   visibility: visible;
    //   right: 0;
    //   //z-index: -1;
    // }

    .toolbar-button {
      border-radius: 0;

      .ant-btn,
      .ui-rc-btn {
        border-radius: 0;
      }
    }
  }

  .spinner-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background-color: #ffffff80;
  }



}

.#{$prefix}-grid {
  .#{$prefix}-grid-top-toolbar {
    padding: 5px 10px;
    border-inline: 1px solid $tableBorderColor;
    border-top: 1px solid $tableBorderColor;
  }
}



// ------------ paging ---------------




.#{$prefix}-grid {

  .#{$prefix}-pagination {
    // &::before {
    //   content: "";
    //   position: absolute;
    //   border-left: 1px solid $tableBorderColor;
    //   height: 55px;
    //   bottom: 0;
    //   left: 0;
    // }

    // &::after {
    //   content: "";
    //   position: absolute;
    //   border-left: 1px solid $tableBorderColor;
    //   height: 55px;
    //   bottom: 0;
    //   visibility: visible;
    //   right: 0;
    // }

    &.top-pagination {
      border: none;
      padding-top: 0;
      padding-bottom: 0;

      .#{$prefix}-pagination-total-text {
        margin-left: auto;
      }
    }

    padding: 10px;

    border-bottom: 1px solid $tableBorderColor;
    border-inline: 1px solid $tableBorderColor;

  }

  .#{$prefix}-pagination {

    .#{$prefix}-pagination-total-text {
      white-space: nowrap;
    }

    .#{$prefix}-pagination-item-active {
      border-color: $primary;

      &:hover {
        border-color: $primary;

        a {
          color: $primary;
        }
      }

      a {
        color: $primary;
      }
    }

    .#{$prefix}-pagination-jump-prev,
    .#{$prefix}-pagination-jump-next {
      .#{$prefix}-pagination-item-container {
        .#{$prefix}-pagination-item-link-icon {
          color: $primary;
        }
      }
    }
  }
}

// .container {
//   margin: 1rem auto;
// }


.ui-rc-table-row-expand {
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #f0f0f0;
  padding: 0;
  background: #ffffff;
  user-select: none;
  position: relative;
  float: left;
  width: 17px;
  height: 17px;
  line-height: 17px;
  border-radius: 6px;
  transform: scale(0.9411764705882353);
  margin-inline-end: 8px;
}

.ui-rc-table-row-expand-icon {
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #f0f0f0;
  padding: 0;
  background: #ffffff;
  user-select: none;
  position: relative;
  float: left;
  width: 17px;
  height: 17px;
  line-height: 17px;
  border-radius: 6px;
  transform: scale(0.9411764705882353);
}

.ui-rc-table-row-expand-icon::before {
  top: 7px;
  inset-inline-end: 3px;
  inset-inline-start: 3px;
  height: 1px;
}

.ui-rc-table-row-expand-icon::after {
  top: 3px;
  bottom: 3px;
  inset-inline-start: 7px;
  width: 1px;
  transform: rotate(90deg);
}

.ui-rc-table-row-expand-icon::before,
.ui-rc-table-row-expand-icon::after {
  position: absolute;
  background: #000000de;
  transition: transform 0.3s ease-out;
  content: "";

}

.ui-rc-table-row-expand-icon-spaced {
  background: transparent;
  border: 0;
  visibility: hidden;
  margin-inline-end: 8px;
}


.ui-rc-table-row-expand-icon-expanded::after {
  top: 3px;
  bottom: 3px;
  inset-inline-start: 7px;
  width: 1px;
  transform: rotate(90deg);
}

.ui-rc-table-row-expand-icon-collapsed::after {
  transform: rotate(0deg);
}

.ui-rc-table-row-expand-icon-collapsed::before {
  transform: rotate(-180deg);
}


.#{$prefix}-grid-filter-dropdown {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  min-width: 120px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}



.be-popup-container {
  z-index: 1090 !important;
}


// -------------- Checkbox ----------

.#{$prefix}-checkbox-indeterminate {
  &:hover {
    .#{$prefix}-checkbox-inner {
      border-color: $primary !important;
      ;
    }
  }

  .#{$prefix}-checkbox-inner {
    &:after {
      background-color: $primary;
    }
  }
}

//.#{$prefix}-checkbox-input {
//  &:focus-visible {
//    outline: none;
//  }
//}

.#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
  outline: none;
}

.#{$prefix}-checkbox {
  &.#{$prefix}-checkbox-checked {
    &:hover {
      .#{$prefix}-checkbox-inner {
        background-color: $primary;
        border-color: $primary;
      }
    }

    .#{$prefix}-checkbox-inner {
      background-color: $primary;
      border-color: $primary;
    }
  }
}

.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
  .#{$prefix}-checkbox-inner {
    border-color: $primary;
  }
}

.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
  .#{$prefix}-checkbox-inner {
    border-color: $primary;
  }

  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
    .#{$prefix}-checkbox-inner {
      background-color: $primary;
    }
  }
}


// -------------- radio ----------

.ui-rc-radio-wrapper {
  .ui-rc-radio-checked {
    .ui-rc-radio-inner {
      background-color: $primary;
      border-color: $primary;
    }
  }

  &:hover {
    .ui-rc-radio-inner {
      border-color: $primary;
    }
  }
}

// ------------ Tree ---------------

.#{$prefix}-tree {
  .#{$prefix}-tree-checkbox-checked {
    .#{$prefix}-tree-checkbox-inner {
      background-color: $primary;
      border-color: $primary;
    }
  }

  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
    .#{$prefix}-tree-checkbox-inner {
      background-color: $primary;
    }
  }

  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
    .#{$prefix}-tree-checkbox-inner {
      border-color: $primary;
    }
  }
}


// ------------ ant Tree ---------------

.#{$antdPrefix}-tree {
  .#{$antdPrefix}-tree-checkbox-checked {
    .#{$antdPrefix}-tree-checkbox-inner {
      background-color: $primary;
      border-color: $primary;
    }
  }

  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
    .#{$antdPrefix}-tree-checkbox-inner {
      background-color: $primary;
    }
  }

  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
    .#{$antdPrefix}-tree-checkbox-inner {
      border-color: $primary;
    }
  }
}

.ui-rc-pagination {
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  margin: 0;
  padding: .75rem 1rem;
  background-color: #ffffff;

  .ui-rc-pagination-total-text {
    order: 2;
    margin-left: auto;
  }



  &.pagination-template {
    position: relative;


  }



}


// #region theme
// theme

//  ------------light-----------

.#{$prefix}-grid-light {
  background-color: #ffffff;

  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {}
}


// rgb(225 222 245 / 0.12 

.#{$prefix}-grid-dark {
  background-color: $body-color-Dark;
  color: #ffffff;

  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {
    background-color: $body-color-Dark;
    color: #E1DEF5E6;
  }

  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell {
    // background-color: $body-color-Dark;
    // color: #E1DEF5E6;
  }

  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tfoot .ui-rc-grid-cell {
    background-color: #25293C;
    color: #E1DEF5E6;
  }

  &.ui-rc-grid {
    .ui-rc-toolbar-bottom {
      background-color: $body-color-Dark;
      color: #E1DEF5E6;
      border-color: $tableBorderColorDark;
    }
  }

  &.ui-rc-grid .ui-rc-grid-container.ui-rc-table-ping-right .ui-rc-grid-cell.ui-rc-grid-cell-fix-right-first::before {
    border-inline-start-color: $tableBorderColorDark;
  }

  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell.cell-editable {


    &.cell-border-right {
      border-right-color: $border-selected-color-Dark;
    }

    &.cell-border-bottom {
      border-bottom-color: $border-selected-color-Dark;
    }

    &.cell-border-left::before {
      border-color: $border-selected-color-Dark;
    }

    &.cell-border-top::after {
      border-color: $border-selected-color-Dark;
    }
  }

  .ui-rc-pagination {
    background-color: $body-color-Dark;
    color: #E1DEF5E6;

    border-bottom: 1px solid $tableBorderColorDark;
    border-top: 1px solid $tableBorderColorDark;
    border-inline-color: $tableBorderColorDark;

    .ui-rc-pagination-prev {
      .anticon.anticon-left {
        color: #ffffff;
      }
    }

    .ui-rc-pagination-disabled {
      .anticon.anticon-left {
        color: #7d7a7a;
      }
    }

    .ui-rc-pagination-next {
      .anticon.anticon-right {
        color: #ffffff;
      }

      &.ui-rc-pagination-disabled {
        .anticon.anticon-right {
          color: #7d7a7a;
        }
      }

    }
  }

  .ui-rc-toolbar {
    .ui-rc-toolbar-selection-item {
      background-color: #25293C;
      color: #E1DEF5E6;
    }

  }

  &.ui-rc-grid {
    .ui-rc-grid-top-toolbar {
      border-top-color: $tableBorderColorDark;
      border-inline-color: $tableBorderColorDark;

    }
  }

  &.ui-rc-grid .ui-rc-grid-container::after {
    border-right-color: $tableBorderColorDark;
  }

  &.ui-rc-grid {
    .ui-rc-grid-container {
      // border-bottom: 0;
      border-color: $tableBorderColorDark;

      .ui-rc-grid-tbody {
        .ui-rc-grid-row {
          border-bottom-color: $tableBorderColorDark;


        }

        .ui-rc-grid-cell {
          border-inline-end-color: $tableBorderColorDark;
          background-color: $body-color-Dark;
          color: #E1DEF5E6;

          &.ui-rc-grid-cell-selected {

            background-color: #33335d !important;

          }

          &.disable {
            background-color: #272A2F;
          }

          // input
          // .ui-rc-table-select-selector,
          // .ui-rc-select-selector, 
          // .ant-input-outlined,
          // .ant-picker-outlined {
          //   background-color: #272933;
          //   color: #ffffff;

          //   .ui-rc-table-select-selection-placeholder,
          //   .ui-rc-select-selection-placeholder {
          //     color: #797171;
          //   }
          // }
          // .ant-picker-input {

          //   input {
          //     &::placeholder {
          //       color: #797171;
          //     }
          //   }
          // }
          // .ant-input-outlined::placeholder {
          //   color: #797171;
          // }


        }

        .ui-rc-grid-row-selected {
          .ui-rc-grid-cell {
            background-color: $rowSelectedBg-Dark;

            // &.disable {
            //   background-color: #272A2F;
            // }
          }
        }

      }

      .ui-rc-grid-thead {
        .ui-rc-grid-cell {
          border-inline-end-color: $tableBorderColorDark;
          border-bottom-color: $tableBorderColorDark;
        }
      }

      .ui-rc-grid-tfoot {
        .#{$prefix}-grid-footer-row {
          border-bottom-color: $tableBorderColorDark;

          border-top-color: $tableBorderColorDark;



        }

        .ui-rc-grid-cell {
          border-inline-end-color: $tableBorderColorDark;
        }
      }
    }
  }

  .ui-rc-toolbar-bottom_border-bottom {
    border-bottom-color: $tableBorderColorDark;
  }
}