.overview-container {
  padding: 10px;

  .overview-left {
    display: inline-block;
    width: 70%;
    vertical-align: top;
  }

  .overview-right {
    display: inline-block;
    width: 30%;
    vertical-align: top;
  }

  .overview-item {
    padding: 5px;

    .ant-card {
      .ant-card-head {
        height: 40px;
        padding: 0 16px;
        line-height: 40px;
      }

      .ant-card-head-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: bold;
      }

      .ant-card-body {
        padding: 16px;
      }
    }
  }

  .overview-tubeequipnum {
    .overview-tubeequipnum-left {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }

    .overview-tubeequipnum-right {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }
  }

  .overview-task {
    .overview-task-item {
      display: inline-block;
      width: 25%;
      vertical-align: top;
    }
  }

  .overview-accountinfo {
    .overview-accountinfo-item {
      display: inline-block;
      width: 33.3%;
      vertical-align: top;

      .left {
        display: none;
      }

      .right {
        span {
          display: block;
          text-align: center;

          &.value {
            font-size: 13px;
            color: #0099CC;
          }
        }
      }
    }
  }

  .overview-item-chart {
    .overview-alarm-chart {
      display: inline-block;
      width: 28%;
      vertical-align: middle;
    }

    .overview-alarm-item {
      display: inline-block;
      width: 18%;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;

      span {
        display: inline-block;
        width: 12px;
        height: 10px;
        background: red;
        margin-right: 3px;
      }

      &.first {
        border-right: 1px solid #DDD;
        border-left: 1px solid #DDD;

        .value {
          color: #0099CC;

          &:hover {
            cursor: pointer;
          }
        }

        span {
          background: #0099CC;
        }
      }

      &.second {
        border-right: 1px solid #DDD;

        .value {
          color: #ff9900;

          &:hover {
            cursor: pointer;
          }
        }

        span {
          background: #ff9900;
        }
      }

      &.third {
        .value {
          color: #009966;

          &:hover {
            cursor: pointer;
          }
        }

        span {
          background: #009966;
        }
      }
    }
  }

  .overview-item-chart {
    .overview-prototypeequip-chart {
      display: inline-block;
      width: 28%;
      vertical-align: middle;
    }

    .overview-prototypeequip-item {
      display: inline-block;
      width: 24%;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;

      span {
        display: inline-block;
        width: 12px;
        height: 10px;
        background: red;
        margin-right: 3px;
      }

      &.title {
        width: 12%;
      }

      &.first {
        border-right: 1px solid #DDD;
        border-left: 1px solid #DDD;
        width: 30%;

        .value {
          color: #0099CC;

          &:hover {
            cursor: pointer;
          }
        }

        span {
          background: #0099CC;
        }
      }

      &.second {
        width: 30%;

        .value {
          color: #ff9900;

          &:hover {
            cursor: pointer;
          }
        }

        span {
          background: #ff9900;
        }
      }
    }
  }
}

%special-overview-style {

  .ant-card-body {
    height: 142px;
    padding: 16px;

    .overview-item-chart {
      padding-top: 12px;
    }
  }
}

.overview-alarm {
  @extend %special-overview-style;
}

.overview-equipinterface {
  @extend %special-overview-style;
}

.overview-equipprotocol {
  @extend %special-overview-style;
}

.overview-prototypeequip {
  @extend %special-overview-style;
}
