.df-tpd-overview {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 16px;

  .df-tpd-overview-left {
    width: 30%;
    height: 100%;

    &-map {
      width: 100%;
      height: 300px;
      padding-top: 16px;
      margin-top: 8px;
      border-top: 1px solid #e5e8ef;

      &.blue,
      .dark {
        border-top: 1px solid rgba(47, 172, 255, 0.2);
      }
    }
  }

  .df-tpd-overview-right {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    &-top {
      display: flex;
      gap: 16px;
      height: 45%;

      &-left {
        width: 50%;
        height: 100%;

        &-czz {
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 38px;

          &-top {
            .vm-factor-lg-value_normal {
              color: #1677ff;
            }
          }
        }
      }

      &-right {
        width: 50%;
        height: 100%;
      }
    }

    &-bottom {
      height: 55%;
    }
  }
}
