.home-page {
  // padding: 0 16px 16px;
  min-width: 1100px;
  position: relative;
  z-index:3;
  .g2-tooltip-marker {
    border-radius: 50% !important;
  }
  .home-title {
    color: #333;
    padding-left:28px;
    font-size:16px;
    font-weight:bold;
    position: relative;
    padding-top:16px;
    &::before{
      width:4px;
      height:12px;
      content:'';
      background-image: linear-gradient(#2966FF 83.5%, #0ACCA4 16.5%);
      display:inline-block;
      position: absolute;
      left:16px;
      top:22px;
    }
  }
  @font-face {
    font-family: 'number';
    src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
  }
  .home-tip {
    height: 40px;
    background: #FFE7E7;
    margin-bottom: 16px;
    .content {
      font-size: 14px;
      color: #666666;
      font-weight: 400;
      line-height: 40px;
      padding-left: 16px;
      .renew-btn {
        display: inline-block;
        width: 80px;
        height: 28px;
        background: #FF4F4F;
        border-radius: 2px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        .renew-popover {
          display: none;
          position: absolute;
          z-index: 1000;
          width: 276px;
          height: 294px;
          transform: translate(-98px,13px);
          box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
          background-color: white;
          background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
          background-repeat: no-repeat;
          background-size: cover;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 22px;
          box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
          .popover-arrow {
            position: absolute;
            display: block;
            width: 8.48528137px;
            height: 8.48528137px;
            background: 0 0;
            border-style: solid;
            border-width: 4.24264069px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            top: -4px;
            border-top-color: #fff;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: #fff;
            box-shadow: -2px -2px 5px #0000000f;
          }
          .qrcode {
            width: 182px;
            height: 204px;
            background-color: white;
            margin: 28px auto 16px auto;
            img {
              width: 150px;
              height: 150px;
              margin: 16px 16px 8px 16px;
            }
          }
        }
        &:hover .renew-popover {
          display: block;
        }
      }
    }
  }
  .data-wrap{
    background: #FFF;
    .data-box {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      .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: 14px;
            line-height: 18px;
            color: #333;
            font-weight:500;
          }
        }
        .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-wrap{
    background: #FFF;
    margin-top:16px;
    .study-box {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      .study-item {
        position: relative;
        height: 414px;
        background: #fff;
        width: ~'calc(50% - 8px)';
        padding: 16px;
        overflow: hidden;
        .study-title {
          font-size: 14px;
          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: #2966FF;
                &::after {
                  position: absolute;
                  width: 24px;
                  height: 2px;
                  content: '';
                  background: #2966FF;
                  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: #2966FF;
            }
          }
          &.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 16px 32px 26px;
    .study-title {
      font-size: 14px;
      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: #2966FF;
          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;
  }
}