.home-page {
  padding: 0 16px 16px;
  min-width: 1100px;
  .g2-tooltip-marker {
    border-radius: 50% !important;
  }
  .home-title {
    height: 44px;
    line-height: 44px;
    color: #999;
  }
  @font-face {
    font-family: 'number';
    src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
  }
  .data-box {
    display: flex;
    justify-content: space-between;
    .data-item {
      position: relative;
      height: 156px;
      background: #fff;
      width: ~'calc(16.67% - 8px)';
      padding: 16px;
      &.course-data {
        width: ~'calc(50% - 24px)';
      }
      .header {
        display: flex;
        .header-icon {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
        .header-word {
          display: inline-block;
          font-size: 12px;
          line-height: 18px;
          color: #999;
        }
      }
      .data-number {
        font-family: 'number';
        font-size: 28px;
        color: #333;
        margin-top: 24px;
      }
      .data-footer {
        margin-top: 12px;
        .footer-word {
          font-size: 12px;
          color: #999;
          margin-right: 8px;
        }
        .iconfont {
          font-size: 12px;
          margin-right: 4px;
          color: #EC4B35;
        }
        .footer-number {
          font-size: 12px;
          color: #999;
        }
      }
      .course-box {
        border-radius: 4px;
        background: #FAFAFA;
        height: 124px;
        width: 66%;
        position: absolute;
        right: 16px;
        top: 16px;
        padding: 8px 24px 0;
        .course-item {
          display: inline-block;
          width: 50%;
          padding: 4px 0 12px;
          .course-title {
            font-size: 12px;
            color: #999;
          }
          .data {
            display: flex;
            align-items: flex-end;
            .course-number {
              font-size: 16px;
              font-family: 'number';
              margin-right: 16px;
            }
            .course-word {
              font-size: 12px;
              color: #999;
              margin-right: 8px;
            }
            .iconfont {
              font-size: 12px;
              margin-right: 4px;
              color: #EC4B35;
            }
            .add-number {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
  .study-box {
    display: flex;
    justify-content: space-between;
    .study-item {
      position: relative;
      height: 414px;
      background: #fff;
      width: ~'calc(50% - 8px)';
      padding: 16px;
      overflow: hidden;
      .study-title {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        line-height: 22px;
        margin-bottom: 12px;
        .iconfont {
          font-size: 14px;
          color: #BFBFBF;
          margin-left: 4px;
        }
        .tip {
          font-size: 14px;
          color: #999999;
          margin-left: 8px;
          font-weight: 400;
        }
      }
      .study-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        .study-tab {
          .tab {
            position: relative;
            padding-right: 24px;
            color: #666;
            cursor: pointer;
            &.selected {
              color: #FDB513;
              &::after {
                position: absolute;
                width: 24px;
                height: 2px;
                content: '';
                background: #FDB513;
                border-radius: 1px;
                left: 9px;
                bottom: -4px;
              }
            }
          }
        }
        .study-select {
          .select-word {
            color: #999;
            margin-right: 8px;
          }
        }
      }
      .table-item {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        &.odd {
          background: #FAFAFA;
        }
        .table-image {
          width: 24px;
          height: 24px;
        }
        .table-number {
          width: 15%;
          color: #999;
          padding: 0 16px;
          text-align: center;
        }
        .table-data {
          width: 55%;
          padding: 0 16px;
          .table-name {
            color: #333;
            line-height: 20px;
            margin-bottom: 2px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .table-tag {
            line-height: 17px;
            color: #999;
            font-size: 12px;
          }
        }
        .table-study {
          width: 30%;
          color: #999;
          padding: 0 16px;
        }
      }
      .study-empty {
        margin-top: 102px;
        img {
          display: block;
          width: 100px;
          height: 100px;
          margin: 0 auto 8px;
        }
        div {
          text-align: center;
          color: #333;
        }
      }
      .circle-box {
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .big-circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 204px;
          height: 204px;
          border-radius: 102px;
          background: #F1F3F6;
          margin-top: -20px;
          .small-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 124px;
            height: 124px;
            border-radius: 62px;
            background: #fff;
            .tip-box {
              text-align: center;
            }
          }
        }
      }
      .circle-tip {
        position: absolute;
        left: 70%;
        padding-left: 16px;
        &.unfinished {
          top: 152px;
          .spot {
            background: #5289FA;
          }
        }
        &.finished {
          top: 232px;
          .spot {
            background: #FFBB54;
          }
        }
        .spot {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 4px;
          top: 20px;
          left: 0;
        }
        .number {
          color: #333;
          font-size: 16px;
          margin-bottom: 2px;
        }
        .word {
          color: #999;
        }
      }
    }
  }
  .study-chart {
    width: 100%;
    height: 432px;
    background: #fff;
    padding: 16px;
    margin-top: 16px;
    padding-bottom: 32px;
    .study-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      line-height: 22px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      .study-select {
        font-weight: 400;
        font-size: 14px;
        .select-word {
          color: #999;
          margin-right: 8px;
        }
      }
    }
    .chart-tip {
      display: flex;
      justify-content: space-between;
      div {
        color: #999;
        .iconfont {
          color: #bfbfbf;
          font-size: 14px;
          margin-left: 4px;
        }
      }
    }
    .chart-bottom-tip {
      display: flex;
      justify-content: center;
      .tip-item {
        display: flex;
        align-items: center;
        color: #666;
        .student-dot {
          background: #5289FA;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .time-dot {
          background: #FEB613;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
  }
}

.g2-tooltip {
  background-color: #fff !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05) !important;
  opacity: 0.9;
  .g2-tooltip-title {
    margin-top: 0 !important;
    color: #999;
    font-size: 14px;
  }
  .g2-tooltip-list {
    li,span {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666 !important;
    }
  }
}

.data-plan-tooltip {
  max-width: none !important;
  .ant-tooltip-inner {
    white-space: nowrap;
    max-width: none !important;
  }
}