.e-grid,
.e-treegrid {
  font-family: var(--rs-font-family);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  .e-spinner-pane {
    display: none !important; // 隐藏默认的loading spinner
  }
  .e-summarycell {
    padding-right: 36px !important;
  }
  .e-gridheader {
    height: auto;
    border-top: none;
    border-bottom: none;
    padding-right: 16px !important;
    .e-headercell {
      &:first-child {
        padding-left: 8px;
      }
      height: 32px;
      padding: 4px 8px;
      --header-column-width: 0px;
      --header-sort-width: 0px;

      &.e-defaultcursor:first-child + .e-headercell {
        padding-left: 0;
      }

      &.e-freezeleftborder {
        border: none;
      }

      .e-rhandler {
        border-right: 0 !important;
      }

      .e-rsuppress {
        border-right: 0 !important;
      }

      .e-icons.e-columnmenu {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        padding: 4px;
        border-radius: 4px;
        margin: 0;
        float: unset;
      }
      .e-icons.e-filtermenudiv {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        padding: 4px;
        border-radius: 4px;
        margin: 0;
        float: unset;
      }
      .e-headerchkcelldiv .e-checkbox-wrapper {
        .e-icons {
          margin: 0;
          display: none;
          &.e-check,
          &.e-stop {
            display: inline-block;
            color: #fff !important;
            background-color: var(--rs-active-color);
            border-color: var(--rs-active-color);
          }
        }
      }
      &:hover {
        .e-headerchkcelldiv .e-checkbox-wrapper .e-icons {
          display: inline-block;
        }
      }

      .e-headercelldiv {
        height: 24px;
        padding: 4px !important;
        padding-right: calc(
          4px + var(--header-column-width) + var(--header-sort-width)
        ) !important;
        margin: 0 !important;

        border-radius: 4px;

        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;

        color: #44566c;
        font-family: Arial;
        font-size: var(--rs-grid-header-cell-font-size);
        font-weight: 700;

        &:hover {
          background-color: #f6faff;
        }

        &.e-headerchkcelldiv {
          padding: 0 !important;

          .e-checkbox-wrapper {
            width: 100%;
            position: static;

            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;

            .e-label {
              display: none;
            }
          }
        }

        .e-headertext {
          display: block;
          width: 100%;
          overflow: hidden;
        }
      }

      &.e-ellipsistooltip .e-headercelldiv .e-headertext {
        text-overflow: ellipsis;
      }

      .e-sortfilterdiv {
        float: none;
        clear: both;

        width: 16px;
        height: 16px;
        padding: 0;
        margin: 0 !important;

        position: absolute;
        top: 50%;
        right: 32px;
        transform: translateY(-50%);

        &.e-ascending::before,
        &.e-descending::before {
          content: " ";
          display: block;
          width: 16px;
          height: 16px;
          background-image: url("/assets/img/table-sort-arrow.svg");
          background-repeat: no-repeat;
          background-position: center center;
        }

        &.e-ascending::before {
          transform: rotate(180deg);
        }
      }

      &[aria-sort]:not(.e-rightalign):not([aria-sort="none"]) {
        --header-sort-width: 16px;
      }

      &.e-mousepointer {
        --header-column-width: 24px;
      }

      &.e-rightalign {
        .e-headercelldiv {
          justify-content: flex-end;
        }

        &[aria-sort]:not([aria-sort="none"]) .e-headercelldiv {
          padding-left: 20px !important;
        }

        .e-sortfilterdiv {
          right: auto;
          left: 8px;
        }
      }

      .e-headerchkcelldiv + .e-sortfilterdiv {
        display: none;
      }

      .e-columnmenu {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);

        padding: 4px;
        border-radius: 4px;

        &:hover {
          background-color: #edf5ff;
        }

        &::before {
          content: url("/assets/img/table-column-menu.svg");
          display: block;
          width: 16px;
          height: 16px;
        }

        &.e-filtered {
          background-color: rgba(31, 123, 255, 0.1);
        }
      }

      &:not(.e-rcursor):hover .e-rhandler {
        width: 8px;
        border-right: 1px solid #dbe1e7;

        &:hover {
          border-color: #1f7bff;
        }
      }
    }
  }
  .e-rowdragdrop {
    border-bottom: 1px solid #eaedf0;
    border-top: 0;
  }
  .e-rowcell {
    padding: 2px 12px;
    border-top: 0;
    border-bottom: 1px solid #eaedf0;
    color: var(--rs-text-color) !important;
    font-family: Arial;
    font-size: var(--rs-grid-row-cell-font-size);
    font-weight: 400;
    line-height: 24px;
    height: var(--rs-grid-row-height) !important;
    &.e-rightalign {
      padding-right: 36px !important;
    }
    &.e-updatedtd {
      background-color: #edf5ff; // selected bg
    }
    &.e-leftfreeze {
      border-right: none;
      border-left: none;
    }
    &.e-active {
      background-color: #edf5ff; // selected bg
      &.e-gridchkbox {
        .e-checkbox-wrapper {
          display: block;
        }
      }
      .rowcell-menu {
        display: block;
      }
    }
    .rowcell-menu {
      display: none;
    }
    &.e-gridchkbox {
      &.e-active {
        .e-checkbox-wrapper {
          display: flex;
        }
      }
      .e-checkbox-wrapper {
        display: none;
      }
    }

    &.e-gridchkbox {
      .e-checkbox-wrapper {
        width: 100%;
        position: static;

        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;

        .e-label {
          display: none;
        }
        .e-icons.e-check {
          color: #fff !important;
          background-color: var(--rs-active-color);
          border-color: var(--rs-active-color);
        }
      }
      padding: 0;
      &:first-child + .e-rowcell {
        padding-left: 4px;
      }
    }
    &[style*="text-align: right;"] {
      padding-right: 36px;
    }

    .e-treecolumn-container {
      display: flex !important;
      flex-flow: row nowrap;
      align-items: center;

      .e-none {
        flex: none;
        display: block !important;

        &[style*="width: 10px"] {
          width: 12px !important;
        }

        &[style*="width: 4px"] {
          width: 8px !important;
        }
      }

      .e-treegridexpand,
      .e-treegridcollapse {
        flex: none;
        width: 16px;
        height: 16px;

        &::before {
          content: url("/assets/img/grid-menu-arrow-right.svg");
        }
      }
    }
  }
  .e-row
    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-leftfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row
    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-rightfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row
    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-unfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row
    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-fixedfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-leftfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-rightfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-unfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell),
  .e-grid.e-gridhover
    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-fixedfreeze:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell) {
    background-color: var(--rs-grid-row-hover-bg) !important; // hover bg
  }

  td.e-active.e-leftfreeze:not(.e-updatedtd),
  td.e-active.e-unfreeze:not(.e-updatedtd),
  td.e-active.e-rightfreeze:not(.e-updatedtd),
  td.e-active.e-fixedfreeze:not(.e-updatedtd),
  .e-columnselection.e-leftfreeze:not(.e-updatedtd),
  .e-columnselection.e-unfreeze:not(.e-updatedtd),
  .e-columnselection.e-rightfreeze:not(.e-updatedtd),
  .e-columnselection.e-fixedfreeze:not(.e-updatedtd) {
    background-color: #edf5ff; // selected bg
  }
  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
      .e-updatedtd
    ):not(.e-indentcell) {
    &.e-gridchkbox {
      .e-checkbox-wrapper {
        display: flex;
      }
    }
    .rowcell-menu {
      display: block;
    }
  }
  .e-row:not(:hover) {
    kt-grid-action,
    rs-grid-action {
      display: none;
    }
  }

  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
    .e-rowcell.e-active:not(.e-cellselectionbackground):not(.e-updatedtd):not(
      .e-indentcell
    ) {
    background-color: #e4efff !important; //selected + hover bg
  }

  .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: none !important;
  }
  .e-gridcontent {
    flex: 1;
    min-height: 0;
    display: flex;
    .e-content {
      width: 100%;
      height: 100%;
      overflow-y: scroll !important;
      overflow-x: scroll !important;
    }
  }

  .first-action-column {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    width: 100%;

    .first-column-text {
      flex: auto;
      overflow: hidden;
      text-overflow: ellipsis;

      &.flex-text {
        display: flex;
        flex-flow: row nowrap;
      }

      .first-column-alert {
        width: 4px;
        margin-right: 8px;
        color: red;
      }
    }
  }
}

.e-pager {
  padding: 12px 0 0 !important;
  border: 0;
  div {
    vertical-align: middle;
  }
  .e-icons {
    border: none;
    border-radius: 6px;
    padding: 4px !important;

    margin-right: 6px;
    &:hover,
    &.e-focused {
      background-color: #1f7bff0a;
    }
    &.e-disable {
      opacity: 0.3;
      cursor: not-allowed;
    }
    &::before {
      display: block;
      width: 16px;
      height: 16px;
    }
    &.e-first,
    &.e-mfirst {
      @media (max-width: 769px) {
        width: auto;
        min-width: 26px;
      }
      &::before {
        content: url("/assets/img/grid-pager-arrows-left.svg");
      }
    }

    &.e-prev,
    &.e-mprev {
      margin: 0 16px 0 6px;
      @media (max-width: 769px) {
        width: auto;
        min-width: 26px;
      }
      &::before {
        content: url("/assets/img/grid-pager-arrow-left.svg");
      }
    }

    &.e-next,
    &.e-mnext {
      margin: 0 12px 0 10px !important;
      @media (max-width: 769px) {
        width: auto;
        min-width: 26px;
      }
      &::before {
        content: url("/assets/img/grid-pager-arrow-left.svg");
        transform: rotate(180deg);
      }
    }
    &.e-last,
    &.e-mlast {
      @media (max-width: 769px) {
        width: auto;
        min-width: 26px;
      }
      &::before {
        content: url("/assets/img/grid-pager-arrows-left.svg");
        transform: rotate(180deg);
      }
    }
  }
  .e-numericitem {
    color: #44566c;
  }
  .e-pagercontainer {
    border: 0;
    vertical-align: top;
    overflow: visible !important; // 处理mac电脑遮挡

    .e-icons,
    .e-spacing {
      border: none;
      border-radius: 6px;
      padding: 4px;
      margin-right: 6px;
      &:hover,
      &.e-focused {
        background-color: #1f7bff0a;
      }

      &.e-disable {
        opacity: 0.3;
        cursor: not-allowed;
      }
    }

    .e-spacing {
      &.e-pp {
        margin-right: 12px;
      }

      &.e-np {
        margin-left: 12px;
      }

      &.e-pp.e-disable,
      &.e-np.e-disable {
        display: none;
      }
    }

    .e-numericcontainer {
      vertical-align: middle;

      .e-numericitem {
        border: 1px solid transparent;
        padding: 4px;
        min-width: 24px;
        color: #44566c;

        font-family: Arial;
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        &.e-currentitem {
          border-color: #1f7bff66;
          background-color: #fff;
        }
      }
    }
  }
  .e-pagesizes {
    display: inline-block;
    vertical-align: middle;
    .e-pagerdropdown {
      margin: 0 8px 0 6px;
      width: 60px;
      height: 24px;

      .e-input-group {
        height: 24px;
        padding: 0 0 0 8px;

        border-radius: 4px;
        border: 1px solid #eaedf0;
        background-color: #fff;

        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        &.e-icon-anim,
        &:focus-within {
          border-color: #1f7bffb8;
          box-shadow: none;
        }

        &:hover {
          border-color: #1f7bff80;
          box-shadow: 0px 0px 3px 0px #1f7bff66;
        }

        &.e-icon-anim:hover,
        &:not(.e-disabled):focus-within:hover {
          border-color: #1f7bffb8;
        }

        .e-input {
          height: 100%;
          padding: 0 !important;

          color: #062c4f !important;
          font-family: Arial;
          font-size: 11px !important;
          font-style: normal;
          font-weight: 400;
          line-height: 12px;
        }
      }
    }
  }

  .e-pagerconstant {
    vertical-align: middle;
    margin: 0;

    color: #929dab;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
  }
  .e-parentmsgbar {
    color: #929dab;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    @media (max-width: 769px) {
      width: auto !important;
    }
  }
}
.e-grid-menu {
  .e-menu-parent {
    .e-menu-item {
      font-family: var(--rs-font-family);
      font-size: var(--rs-grid-row-cell-font-size);
      color: #44566c;
      &.e-focused,
      &.e-selected {
        background-color: #f6faff;
        color: #44566c;
      }
      .e-icons.e-check {
        background-color: var(--rs-active-color);
        border-color: var(--rs-active-color);
      }
      .e-label {
        font-family: var(--rs-font-family);
        font-size: var(--rs-grid-row-cell-font-size);
        color: #44566c;
      }
    }
  }
}
.e-checkboxfilter.e-filter-popup {
  .e-searchcontainer {
    .e-searchbox {
      .e-input-group {
        box-shadow: none !important;
        .e-searchclear:hover {
          background-color: var(--rs-active-color);
          border-color: var(--rs-active-color);
        }
      }
    }
    .e-checkboxlist {
      .e-ftrchk {
        height: auto;
        line-height: 26px;
        padding: 0;
        padding-left: 8px;
        .e-chk-hidden {
          display: none;
        }
        .e-icons.e-check,
        .e-icons.e-stop {
          background-color: var(--rs-active-color);
          border-color: var(--rs-active-color);
        }
        .e-label {
          font-family: var(--rs-font-family);
          font-size: var(--rs-grid-row-cell-font-size);
          color: #44566c;
        }
        &:hover {
          background-color: #f6faff;
        }
        &.e-chkfocus {
          background-color: #f6faff;
        }
      }
    }
  }
  .e-footer-content {
    display: flex;
    justify-content: flex-end;
    .e-btn {
      font-family: var(--rs-font-family);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      font-style: normal;
      border: 1px solid #adb5bd !important;
      background: transparent !important;
      color: var(--rs-cancel-btn-color) !important;
      height: 32px;
      min-width: 80px;
      padding: 0 10px;
      font-size: 12px;
      border-radius: 4px;
      box-shadow: none !important;
      line-height: normal;
      &.e-primary {
        color: #fff !important;
        border-color: var(--rs-primary-btn-bg) !important;
        background: var(--rs-primary-btn-bg) !important;
        font-weight: 700;
        &:not([disabled]):hover,
        &:not([disabled]):active,
        &:not([disabled]):focus {
          border-color: var(--rs-primary-btn-hover-bg) !important;
          background: var(--rs-primary-btn-hover-bg) !important;
          color: #fff !important;
        }
        &[disabled] {
          color: #fff !important;
          background: var(--rs-primary-btn-bg) !important;
          border-color: var(--rs-primary-btn-bg) !important;
        }
      }
    }
  }
}
.grid-loading {
  .e-gridcontent {
    .e-rowcell {
      border-bottom: 0;
      position: relative;
      color: transparent !important;

      .text-ellipsis,
      .e-checkbox-wrapper,
      img,
      div,
      span,
      .mat-chip-list-wrapper {
        visibility: hidden !important;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: calc(200% + 200px);
        animation: e-shimmer-wave 1s infinite;
        animation-timing-function: ease-in-out;
        background-image: linear-gradient(
          90deg,
          transparent calc(50% - 100px),
          rgb(255, 255, 255) 50%,
          transparent calc(50% + 100px)
        );
        transition: 0.5s;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0px;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        height: 15px;
        border-radius: 4px;
        background: linear-gradient(
            0deg,
            rgba(103, 80, 164, 0.08),
            rgba(103, 80, 164, 0.08)
          ),
          white;
      }
    }
  }
}

.e-grid.e-gridhover
  .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover
  .e-row
  tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover:not(.e-rowdrag)
  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover
  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
  .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover:not(.e-rowdrag)
  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
  .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-rtl
  .e-gridhover
  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
  .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover
  .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover
  .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell),
.e-grid.e-gridhover
  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
  .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(
    .e-updatedtd
  ):not(.e-indentcell) {
  background-color: var(--rs-grid-row-hover-bg) !important; // hover bg
}

.e-contextmenu-wrapper .e-contextmenu.e-colmenu,
.e-contextmenu-container .e-contextmenu.e-colmenu {
  padding: 8px 0;
  border: none;

  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);

  .e-menu-item {
    height: 28px;
    padding: 6px 48px 6px 16px;

    color: #44566c;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px;

    &.e-blankicon {
      padding-left: 40px !important;
    }

    &.e-selected,
    &.e-focused {
      background-color: rgba(31, 123, 255, 0.08);
    }

    .e-icons {
      width: 16px;
      height: 16px;
      margin: 0;
      padding: 0;

      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      &::before {
        width: 16px;
        height: 16px;
        line-height: 16px;
      }

      &.e-icon-ascending::before {
        content: url("/assets/img/grid-menu-arrow-up.svg");
      }

      &.e-icon-descending::before {
        content: url("/assets/img/grid-menu-arrow-up.svg");
        transform: rotate(180deg);
      }

      &.e-icon-filter::before {
        content: url("/assets/img/grid-menu-filter.svg");
      }

      &.e-caret {
        position: absolute;
        top: 6px;
        right: 16px;

        &::before {
          content: url("/assets/img/grid-menu-arrow-right.svg");
        }
      }
    }
  }

  & + .e-menu-parent {
    padding: 8px 0;

    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);

    .e-menu-item {
      height: 28px;
      padding: 0 8px;

      &.e-focused {
        background-color: rgba(31, 123, 255, 0.08);
      }

      .e-checkbox-wrapper {
        height: 100%;

        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .e-frame {
          flex: none;
          margin: 5px;
        }

        .e-label {
          margin: 0;
          padding: 0 6px;

          color: #44566c !important;
          font-family: Arial;
          font-size: 11px !important;
          font-style: normal;
          font-weight: 400;
          line-height: 14px;
        }
      }
    }
  }
}