@import '../../../../index.less';
@import '~antd/es/style/themes/default.less';

@prefix: ~'@{bigscreen-prefix}-outpatient-summarize-month';

.@{prefix} {

  .ant-col {
    .col-style();
  }

  .yu-yue-lv {
    margin-top: calc(25/@bigscreen-base-height * 100vh);
    text-align: center;

    .value {
      font-family: 'DS-DIGIB-BOLD';
      color: @digi-color;
      font-size: calc(60/@bigscreen-base-width * 100vw);
    }

    .onvalue {
      .no-wrap();
      font-size: calc(30/@bigscreen-base-width * 100vw);
      margin-left: calc(30/@bigscreen-base-width * 100vw);
    }
  }

  .gua-hao-lei-xing {
    margin-top: calc(20/@bigscreen-base-height * 100vh);

    .ant-col {
      border-right: unset;
    }

    .bars {
      display: inline-flex;
      width: 100%;

      .bar {
        display: inline-block;
        height: calc(50/@bigscreen-base-height * 100vh);
        line-height: $height;
        font-size: calc(25/@bigscreen-base-width * 100vw);
        text-align: center;
      }
    }

    .legends {
      text-align: left;

      >span {
        font-size: calc(30/@bigscreen-base-width * 100vw);
        margin-right: calc(60/@bigscreen-base-width * 100vw);

        &:last-child {
          margin-right: unset;
        }
      }

      .legend {
        width: calc(16/@bigscreen-base-width * 100vw);
        height: $width;
        display: inline-block;
        vertical-align: middle;
        margin-right: calc(10/@bigscreen-base-width * 100vw);
      }
    }

    .bar-1 {
      background-color: rgba(31, 244, 255, 60%);
    }

    .bar-2 {
      background-color: rgba(152, 255, 31, 60%);
    }

    .bar-3 {
      background-color: rgba(255, 152, 31, 60%);
    }

    .bar-4 {
      background-color: rgba(255, 57, 31, 60%);
    }
  }
}