.cn-panel2 {
  position: relative;
  .panel__time {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    display: flex;
    &>div {
      margin-left: 10px;
    }
  }
  .chart-list {
    &>.vue-grid-layout>.vue-grid-item {
      &>.panel-chart {
        border: 1px solid $--chart-box-border-color;
        background-color: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: column;
        &.panel-chart--title-chart {
          border: none;
          background-color: transparent;
          box-shadow: none;
        }
        .chart-header {
          display: flex;
          justify-content:space-between;
          align-items:center;
          padding: 10px 20px 10px 18px;
          flex: 0 0 40px;

          font-size: 16px;
          color: $--color-text-primary;
          transition: all 0.2s;

          &.chart-header--float {
            position: absolute;
            width: 100%;
            z-index: 100;
            box-sizing: border-box;
            height: 10px;
            opacity: 0;
            transition: all linear .2s;

            &:hover {
              height: 47px;
              opacity: 1;
            }
          }
          &.chart-header--title-chart {
            font-size: 20px;
            color: #333;
            padding: 0;
            border-bottom: none;
          }
          .chart-header__title {
            max-width: calc(100% - 100px);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            &.chart-header__title--block {
              color: #1890FF;
              font-weight: bold;
              font-size: 16px;
            }

            .arrow-icon {
              display: inline-block;
              transform: rotate(0);
              transition: all linear .2s;

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

              i {
                font-size: 12px;
                color: #999;
              }
            }
          }
          .chart-header__tools {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .header__operation-btn {
              margin-left: 12px;
              cursor: pointer;
              color: #999;
            }
            .chart-header__tool {
              margin-left: 20px;
              cursor: pointer;

              .tool__icon {
                font-size: 14px;
                color: $--color-text-primary;
              }
              .cn-chart-dropdown {
                position: absolute;
                top: 44px;
                right: 0;
                left: unset;
                transform-origin: center top;
                z-index: 1000;
                width: 180px;
                li {
                  padding-left: 15px !important;
                  padding-right: 0 !important;
                  width: calc(100% - 15px);
                  text-align: left;
                  i {
                    margin-right: 10px;
                  }
                  &:hover i {
                    color: $--color-primary;
                  }
                }
              }
            }
          }
          .chart-header-error{
            position: absolute;
            left: 0;
            top: -1px;
          }
          .header__operations {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .header__operation-btn {
              margin-left: 12px;
              cursor: pointer;
              color: #999;
            }

            .header__operation.header__operation--table {
              display: flex;
              align-items: center;
              height: 22px;
              margin-left: 10px;
              color: $--color-primary;
              border: 1px solid $--color-primary;
              border-radius: $--border-radius-primary;

              .option__button {
                display: flex;
                align-items: center;
                height: 100%;
                padding: 0 5px;
                cursor: pointer;
                background-color: white;
                transition: all linear .2s;
              }
              .option__button:hover {
                background-color: #EFF2F5;
              }
              .option__button.icon-group-item:first-of-type:not(:last-of-type) {
                padding: 0 5px 0 0;
              }
              .option__button.icon-group-item:last-of-type:not(:first-of-type) {
                padding: 0 0 0 5px;
              }
              .option__select {
                .el-input__inner {
                  width: 80px;
                  padding-right: 20px;
                  border: none;
                  height: 100%;
                  line-height: 20px;
                  color: $--color-primary;
                }
                .el-input__prefix > div {
                  font-weight: normal;
                  line-height: 19px;
                  color: $--color-primary;
                }
                .el-input__suffix {
                  display: flex;
                  .el-input__suffix-inner {
                    line-height: 14px;
                    .el-select__caret {
                      line-height: 14px;
                      width: 16px;
                      color: $--color-primary;
                    }
                  }
                }
              }
              .option__select.select-column {
                .el-input__inner {
                  width: 86px;
                  padding-left: 8px;
                }
              }
              .icon-group-divide {
                height: 14px;
                width: 1px;
                background-color: $--color-primary;
              }
              i {
                font-size: 12px;
              }
            }
          }
        }
        &>.cn-chart {
          position: relative;
          border-radius: 2px;
          flex-grow: 1;
          overflow: hidden;
          width: 100%;
          .chart-drawing {
            height: 100%;
            width: 100%;
          }
          &>.cn-chart__echarts,&>.cn-chart__table {
            .cn-chart__header {
              border-bottom: 1px solid $--content-right-background-color;
              .header__operations {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .header__operation.header__operation--echarts {
                  display: flex;
                  align-items: center;
                  height: 22px;
                  margin-left: 10px;
                  color: $--color-primary;
                  border: 1px solid $--color-primary;
                  border-radius: $--border-radius-primary;

                  .option__button {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 0 5px;
                    cursor: pointer;
                    background-color: white;
                    transition: all linear .2s;
                  }
                  .option__button:hover {
                    background-color: #EFF2F5;
                  }
                  .option__button.icon-group-item:first-of-type:not(:last-of-type) {
                    padding: 0 5px 0 0;
                  }
                  .option__button.icon-group-item:last-of-type:not(:first-of-type) {
                    padding: 0 0 0 5px;
                  }
                  .option__select {
                    .el-input__inner {
                      width: 120px;
                      padding-right: 20px;
                      border: none;
                      height: 100%;
                      line-height: 20px;
                      color: $--color-primary;
                    }
                    .el-input__prefix > div {
                      font-weight: normal;
                      line-height: 19px;
                      color: $--color-primary;
                    }
                    .el-input__suffix {
                      display: flex;
                      .el-input__suffix-inner {
                        line-height: 14px;
                        .el-select__caret {
                          line-height: 14px;
                          width: 16px;
                          color: $--color-primary;
                        }
                      }
                    }
                  }
                  .option__select.select-column {
                    .el-input__inner {
                      width: 86px;
                      padding-left: 8px;
                    }
                  }
                  .icon-group-divide {
                    height: 14px;
                    width: 1px;
                    background-color: $--color-primary;
                  }
                  i {
                    font-size: 12px;
                  }
                }
              }
            }
          }
          &>.cn-chart__block {
            .cn-chart {
              border: 1px solid #E7EAED;
            }
            /* detail页面block下的五连图的标题样式改变 */
            .cn-chart__group .cn-chart__echarts {
              .cn-chart__header {
                border-bottom: none !important;

                .header__title {
                  font-size: 14px !important;
                  color: #3976CB !important;
                }
              }
            }
          }
          &>.cn-chart__title {
            display: flex;
            align-items: center;
            font-size: 20px;
            padding-left: 10px;
            color: #333;
            background-color: transparent;
            box-shadow: none;
            border: none;
          }
          &>.cn-chart__tabs {
            padding: 10px 25px 10px 15px;

            .el-tabs__nav-wrap::after {
              height: 1px;
            }
            &>.el-tabs__header {
              margin-bottom: 10px;
            }
            &>.el-tabs__content {
              height: calc(100% - 40px);
              .el-tab-pane {
                .panel-chart {
                  border: none;
                  .chart-header,.cn-chart {
                    border: none;
                  }
                }

              }
            }
          }
          &>.cn-chart__echarts {
            .cn-chart__body {
              overflow: hidden auto;

              .el-table {
                padding: 0 10px;

                &:before {
                  height: 0;
                }
                thead {
                  color: #333;
                }
                th.is-leaf, td {
                  border-bottom: none;
                }
                th {
                  padding-bottom: 5px;
                }
                td {
                  padding: 4px 0;
                  color: #333;
                }
              }
            }
            .cn-chart__body.pie-with-table {
              flex-basis: 40%;
            }
            .cn-chart__footer.pie-with-table {
              flex-basis: 60%;
              padding: 10px 30px 30px;
            }
          }
          &>.pie-table {
            font-size: 14px;
            color: #333333;
            font-weight: 500;

            .el-table__header-wrapper {
              .cell {
                color: #333;
              }
            }
            .el-table__expanded-cell[class*=cell] {
              padding: 0;
            }

            .expand-table .el-table__body .el-table__row:last-of-type td {
              border: none;
            }
            .expand-table {
              font-weight: 400;
              color: #606266;

              .el-table__body-wrapper {
                height: auto !important;
              }
            }
          }
          .chart-table-pagination.el-pagination {
            padding: 12px 0 9px 0;
            text-align: center;
            height: 100%;
            width: 100%;

            .el-pagination__jump {
              margin-left: 10px;
            }
          }
        }
        .chart__legend {
          width: calc(100% - 40px);
          border: 1px solid #E7EAED;
          color: #5f6368;
          margin: auto;
          margin-bottom: 15px;

          .chart__table-top {
            width: 100%;
            height: 30px;
            border-bottom: #E7EAED 1px solid;
            display: flex;

            div {
              font-size: 13px;
              line-height: 28px;
              color: $--color-primary;
            }
          }
          .chart__table-below {
            height: 240px;
            width: 100%;
            font-size: 13px;
          }
          .table-below-box {
            width: 100%;
            display: flex;
            align-items: center;
            line-height: 24px;
          }
          .table-below-box:hover {
            background-color: #f9f9f9;
            border: 0;
            color: #383838;
          }
          .table__below-color {
            width: 27px;
            height: 7px;
            flex-shrink: 0;
            padding-left: 10px;

            div {
              height: 100%;
              width: 100%;
              border-radius: 24%;
            }
          }
          .table__below-title {
            padding: 0 6px;
            flex-shrink: 1;
            flex-grow: 1;
            overflow: hidden;
            min-width: 200px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .table__below-statistics {
            width: 80px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .table-below-box:not(.chart__table-top) {
            cursor: pointer;
          }
          .table-below-box.table-below-box--inactivated {
            color: #ccc;
            .table__below-color div {
              background-color: #ccc !important;
            }
          }
        }
      }
    }
  }
}

.entity-detail-tool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 10px 0;
  padding: 0 20px;
  height: 60px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
  border-radius: 2px;

  .cn-icon-arrow-left-circle {
    color: $--color-primary;
    font-size: 20px;
  }
}

.chart-error-popper{
  word-wrap:break-word;
  word-break:break-word;
  border: 1px solid #e02f44;
  min-width: 180px !important;
  max-width: 280px !important;
}

.chart-error-popper.el-popper.is-light {
  background: #e02f44;
  border: 1px solid #e02f44;
}
.chart-error-popper.el-popover.el-popper {
  color:white;
}

.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
  border-color: #e02f44;
  background: #e02f44;
  bottom:0px;
}

.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
  border-color: #e02f44;
  background: #e02f44;
}

.chart-info-corner {
  color: #767980;
  cursor: pointer;
  position: absolute;
  display: none;
  left: 0;
  width: 28px;
  height: 28px;
  z-index: 2;
  top: 0;
}
.chart-info-corner--error {
  display: block;
  color: #fff;
}
.chart-info-corner--error .chart-info-corner-inner {
  border-left: 28px solid #e02f44;
  border-right: none;
  border-bottom: 28px solid rgba(0,0,0,0);
}
.chart-info-corner-inner {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}
.chart-info-corner .fa {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 65%;
  z-index: 3;
  font-style: normal;
}
.cn-chart-icon-warning:before {
  content: "!";
  font-weight:normal;
}
.ip-detail-as {
  color: #999;
  font-size: 12px;
  padding-left: 10px;
}

.option-popper {
  .el-select-dropdown__item {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
  }
}