#toggleChartBtn {
  margin-top: 20px;
}
.#{$prefix}-togglechart {
  padding: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
  &-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    canvas {
      width: 400px !important;
      height: 400px !important;
    }
    .#{$prefix}-grade {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .#{$prefix}-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 5px;
        span {
          color: rgba(var(--wpt-lms-black), 0.75);
        }
        p {
          margin: 0;
          font-weight: 600;
        }
      }
    }
  }
}