.line {
  height: 100%;
  width: 100%;
  position: relative;
  border: 1px solid #E2E5EC;
  border-radius: 4px;
  .chart-drawing {
    height: 100%;
    width: 100%;
    div:nth-of-type(2) {
      .cn-chart-tooltip {
        display: flex;
        justify-content: space-between;
        .cn-chart-tooltip-box {
          .cn-chart-tooltip__color.cn-chart-tooltip-value {
            font-family: NotoSansHans-Medium;
            font-size: 12px;
            color: #353636;
            line-height: 12px;
            font-weight: 500;
          }
        }
      }
    }
  }
  .line-select {
    line-height: 24px;
    top: 20px;
    right: 20px;
    display: flex;
    position: absolute;
    .line-select-metric,.line-select-reference-line {
      display: flex;
      span {
        font-size: 12px;
        color: #575757;
        font-weight: 400;
        margin-right: 3px;
      }
      .line-select__operation {
        height: 24px;
        margin-left: 3px;
        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
        border-radius: 2px;
        .option__select {
          pointer-events:none;
          .el-input__inner {
            width: 80px;
            height: 24px;
            padding-left: 4px;
            line-height: 24px;
            font-size: 12px;
            color: #2C72C6;
            font-weight: 400;
          }
          .el-input__suffix {
            display: flex;
            .el-input__suffix-inner {
              line-height: 24px;
              .el-select__caret {
                line-height: 24px;
                width: 16px;
                color: #575757;
              }
            }
          }
        }
        .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;
        }
      }
    }
    .line-select-reference-line {
      margin-left: 20px;
    }
  }
  .line-value {
    position: absolute;
    top: 20px;
    left: 27px;
    display: flex;
    .line-value-mpackets {
      margin-right: 30px;
      display: flex;
      flex-direction: column;
      span:nth-of-type(1) {
        font-family: 'Helvetica-Bold';
        font-size: 28px;
        color: #353636;
        margin-right: 4px;
      }
      span:nth-of-type(2) {
        font-size: 12px;
        color: #575757;
        font-weight: 400;
      }
      .table-below-box--inactivated.line-value-mpackets-name {
        color: #ccc;
        div:nth-of-type(1) {
          background-color: #ccc !important;
        }
      }
      .line-value-mpackets-name {
        position: relative;
        display: flex;
        .mpackets-name {
          flex: 1;
          padding-left: 17px;
        }
        .total,.inbound,.outbound,.internal,.other {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          margin-top: -7px;
        }
        .total {
          background: #00A7AB;
        }
        .inbound {
          background: #7FA054;
        }
        .outbound {
          background: #35ADDA;
        }
        .internal {
          background: #E48F3E;
        }
        .other {
          background: #98709B;
        }
      }
    }
  }
}