.container {
  width: 1023px;
  height: 345px;
  background: rgba(57, 122, 183, 0.2);
  border-radius: 20px;

  .title {
    color: rgb(203, 237, 255);
    font-family: 'DingTalk JinBuTi';
    font-size: 22px;
    font-weight: 400;
    line-height: 26px;
    padding: 20px 0 0 24px;
  }

  .content {
    display: flex;
    // padding: 20px;
    height: calc(100% - 66px);

    .chart {
      padding: 56px 28px 0 35px;
    }

    .legend {
      // width: 50%;
      display: flex;
      gap: 15px;
      // padding-left: -28px;
      margin-left: -48px;
      padding-top: 59px;

      .legendColumn {
        display: flex;
        flex-direction: column;
        gap: 19px;

        .legendItem {
          width: 331px;
          height: 38px;
          background: rgba(41, 181, 255, 0.12);
          border-radius: 7px;
          display: flex;
          align-items: center;
          padding: 0 12px;

          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
          }

          .info {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .type {
              color: #BCCEE9;
              font-family: '思源黑体';
              font-size: 16px;
              min-width: 80px;
            }

            .value {
              color: #FFFFFF;
              font-family: 'D-DIN';
              font-size: 16px;
              margin: 0 10px;

              .unit {
                color: #BCCEE9;
                font-family: '思源黑体';
                margin-left: 4px;
              }
            }

            .percentage {
              color: #BCCEE9;
              font-size: 16px;
              min-width: 60px;
              text-align: right;
            }
          }
        }
      }
    }
  }
} 