.topic-detail-drawer {
  .card-bar-container {
    background: rgba(86, 110, 230, 0.04) !important;

    .card-bar-colunms {
      background-color: rgba(86, 110, 230, 0);
    }
  }

  .table-suoding {
    font-size: 18px !important;
    color: #556ee6 !important;
    padding: 0 !important;
  }
}

.brokers-tab-container {
  width: 1032px;

  .overview {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 12px;

    .left {
      display: flex;
      align-items: center;
      .info-box {
        display: flex;
        height: 36px;
        padding: 6px 12px;
        border-radius: 6px;
        background: #fff9e6;
        &:first-child {
          margin-right: 36px;
        }
        .info-detail {
          font-size: 14px;
          color: #592d00;
          line-height: 22px;
          &:not(:last-child) {
            margin-right: 24px;
          }
          .num {
            margin-left: 4px;
            font-family: @font-family-bold;
          }
          &-title {
            .desc {
              font-family: @font-family-bold;
            }
            .num {
              font-size: 16px;
            }
          }
        }
      }
    }

    .cases-box {
      display: flex;
      align-items: center;

      .broker-cases {
        display: flex;
        align-items: center;

        .case {
          display: flex;
          align-items: center;
          margin-right: 11px;

          .icon {
            margin-right: 5px;
            width: 8px;
            height: 8px;
            border-radius: 2px;
          }

          .desc {
            font-size: 14px;
            color: #464e56;
            text-align: left;
            line-height: 20px;
          }

          &.case-leader > .icon {
            background: rgba(93, 121, 255, 0.5);
          }

          &.case-isr > .icon {
            background: rgba(70, 78, 86, 0.4);
          }

          &.case-osr > .icon {
            background: rgba(241, 161, 73, 0.4);
          }
        }
      }

      .example-cases {
        display: flex;
        align-items: center;
        margin-left: 20px;

        .desc {
          margin-right: 6px;
          font-size: 12px;
          color: #212529;
          letter-spacing: 0;
          line-height: 18px;
        }

        .cases-detail {
          display: flex;
          align-items: center;

          .case {
            width: 16px;
            height: 16px;
            background: rgba(33, 37, 41, 0.08);
            border-radius: 8px;
            margin-right: 4px;
            font-size: 10px;
            color: #495057;
            text-align: center;
            line-height: 16px;
            user-select: none;

            &.more {
              line-height: 10px;
              cursor: pointer;
            }
          }

          &.cases-detail-popover {
            flex-flow: row wrap;
            width: 180px;

            .case {
              margin-bottom: 6px;
            }
          }

          .dcloud-popover-inner {
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 12px rgba(0, 0, 0, 0.04), 0 6px 10px 0 rgba(0, 0, 0, 0.08);
            border-radius: 8px;

            &-content {
              padding: 10px 8px 4px 8px;
            }
          }

          .dcloud-popover-arrow-content {
            display: none !important;
          }
        }
      }
    }
  }

  .broker-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-height: 200px;

    &-box {
      width: 336px;
      background: rgba(55, 109, 246, 0.04);
      border-radius: 16px;
      margin-right: 12px;
      margin-bottom: 12px;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &-header {
        display: flex;
        justify-content: space-around;
        padding: 14px 12px 12px 12px;

        .header-info {
          .label {
            margin-bottom: 4px;
            font-size: 12px;
            color: #74788d;
            letter-spacing: 0;
            text-align: justify;
            line-height: 12px;
          }

          .value {
            font-family: @font-family-bold;
            font-size: 12px;
            color: #464e56;
            letter-spacing: 0;
            text-align: justify;
            line-height: 12px;

            .unit {
              font-size: 12px;
              color: #74788d;
              letter-spacing: 0;
              text-align: justify;
              line-height: 12px;
            }
          }
        }
      }

      &-detail {
        position: relative;
        width: 324px;
        min-height: calc(100% - 66px);
        margin: 0 6px 6px 6px;
        padding: 12px 12px 0 12px;
        border-radius: 12px;
        background: #ffffff;
        overflow: hidden;

        .partition-list {
          display: flex;
          flex-flow: row wrap;
          width: 100%;
          &-item {
            width: 34px;
            height: 16px;
            margin-bottom: 12px;
            border-radius: 4px;
            text-align: center;
            line-height: 16px;
            transition: all ease-in-out 0.3s;
            cursor: pointer;
            &:not(&:nth-of-type(8n)) {
              margin-right: 4px;
            }
            &-leader {
              background: rgba(85, 110, 230, 0.1);
              color: #556ee6;
              &.partition-active {
                background: #556ee6;
                color: #fff;
              }
            }
            &-isr {
              background: rgba(70, 78, 86, 0.1);
              color: #464e56;
              &.partition-active {
                background: #464e56;
                color: #fff;
              }
            }
            &-osr {
              background: rgba(241, 161, 73, 0.1);
              color: #f1a149;
              &.partition-active {
                background: #f1a149;
                color: #fff;
              }
            }
          }
          &-hover-state {
            .partition-list-item {
              &-leader:not(.partition-active) {
                background-color: #f6f7fd;
                color: #dbe1f8;
              }
              &-isr:not(.partition-active) {
                background-color: #fcfcfc;
                color: #c4c6c9;
              }
              &-osr:not(.partition-active) {
                background-color: #fefaf4;
                color: #f8d6af;
              }
            }
          }
        }
      }
    }
  }
}

.broker-partition-popover {
  .dcloud-popover-arrow {
    display: none;
  }
  .dcloud-popover-inner {
    width: 281px;
    height: 276px;
    border-radius: 12px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 12px rgba(0, 0, 0, 0.04), 0 6px 10px 0 rgba(0, 0, 0, 0.08);
    &-content {
      padding: 0 24px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 48px;

      .title {
        font-family: @font-family-bold;
        font-size: 16px;
        color: #212529;
        line-height: 24px;
      }

      .close-icon {
        font-size: 14px;
        color: #919aac;
      }
    }

    .main {
      .dcloud-list-sm .dcloud-list-item {
        padding: 6px 16px;

        &:nth-child(odd) {
          background: rgba(248, 249, 250, 0.4);
        }

        &-main {
          height: 23px;
          font-size: 13px;
          color: #74788d;
          letter-spacing: 0;
        }

        &-extra {
          margin-left: 0;
          font-family: @font-family-bold;
          font-size: 13px;
          color: #495057;
          letter-spacing: 0;
          text-align: right;
        }
      }
    }
  }
}

.desc-row {
  margin-bottom: 24px;
  .label-col,
  .value-col {
    font-size: 13px;
    line-height: 18px;
  }
  .label-col {
    color: #74788d;
    text-align: right;
  }
  .value-col {
    color: #495057;
  }
}

.messages-query {
  .dcloud-form-item {
    margin-bottom: 0 !important;
  }
}
