.drawerTable {
  .header {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #17181a;
    }

    .btns {
      span {
        display: inline-block;
        cursor: pointer;
        padding: 0 14px;
        height: 24px;
        line-height: 24px;
        background: #fafcff;
        border-radius: 4px;
        font-weight: 400;
        font-size: 14px;
        color: #17181a;
        border: 1px solid #dae2f2;

        &.close {
          color: #fff;
          background: #3377ff;
          margin-left: 8px;
        }
      }
    }
  }
}

.DepartmentCostCalc {
  background: #ffffff;
  border-radius: 4px;

  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 16px;
    background-color: #fff;
    border-bottom: 16px solid #f7f9fc;

    .btnGoup {
      & > span {
        cursor: pointer;
        display: inline-block;
        color: #17181a;
        line-height: 24px;
        padding: 0 14px;
        border-radius: 4px;
        border: 1px solid #dae2f2;
        background: #fafcff;
        margin-right: 8px;
        font-weight: 400;
        font-size: 14px;
        color: #17181a;

        &.onekeyCalcBtn {
          color: #fff;
          background: #3377ff;
        }
      }
    }
  }

  .content {
    padding: 16px;
    padding-top: 0;

    .inner {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;

      .left {
        width: 220px;
        height: calc(100vh - 223px);

        border-radius: 4px;
        padding-top: 8px;
        margin-right: 16px;
        border: 1px solid #dae2f2;
      }

      .right {
        width: calc(100% - 236px);

        .toolBar {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .filterItem {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }

          .back {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #17181a;
            cursor: pointer;

            & > span {
              display: inline-flex;
              justify-content: center;
              align-items: center;
              width: 24px;
              height: 24px;
              background: #fafcff;
              border-radius: 4px;
              margin-right: 8px;
              border: 1px solid #dae2f2;
            }
          }

          .btnGroup {
            & > span {
              cursor: pointer;
              display: inline-block;
              color: #17181a;
              line-height: 24px;
              padding: 0 14px;
              border-radius: 4px;
              border: 1px solid #dae2f2;
              background: #fafcff;
              margin-right: 8px;
              font-weight: 400;
              font-size: 14px;
              color: #17181a;

              &.calc {
                color: #fff;
                background: #3377ff;
                border: none;
              }
            }
          }
        }

        .KCIMTable {
          .hover-row {
            .hover-icon {
              visibility: hidden;
            }

            &:hover {
              .hover-icon {
                visibility: visible;
              }
            }
          }

          .cost-ant-table-header {
            .cost-ant-table-thead {
              .cost-ant-table-cell {
              }
            }
          }

          .cost-ant-table-body {
            .cost-ant-table-row {
              &.has-children {
                td {
                  border-right: none !important;
                }

                .cost-ant-table-cell-with-append {
                  font-weight: bold;
                }
              }

              &.report-font-color-row {
                > td,
                > td.cost-ant-table-cell-fix-left,
                > td.cost-ant-table-cell-fix-right,
                > td.cost-ant-table-cell-fix-left-last,
                > td.cost-ant-table-cell-fix-right-first {
                  color: var(--report-font-color, #17181a) !important;

                  * {
                    color: var(--report-font-color, #17181a) !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
