.ssm-chartbar {
  background-color: #fff;
  padding: 16px;

  .m-hd {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    & > label {
      font-size: var(--title-default-size, 16px);
    }

    & > span {
      font-size: var(--desc-default-size, 12px);
      color: #ccc;
      margin-top: 5px;
    }
  }

  .m-bd {
    display: flex;
    flex-direction: column;
    max-height: 272px;
    overflow: scroll;
    position: relative;

    .m-no {
      display: flex;
      position: absolute;
      z-index: 9;
      width: 100%;
      justify-content: center;
      align-items: center;
      top: 0;
      bottom: 0;
      flex-direction: column;

      & > img {
        width: 128px;
        height: 128px;
      }

      & > span {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
      }
    }

    & > section {
      height: 272px;
    }

    .highcharts-point {
      fill: var(--clr-main);
    }

    .highcharts-xaxis-labels {
      width: 100% !important;

      & > span {
        width: 100% !important;
        display: flex !important;
        padding: 0 10px;
        box-sizing: border-box;

        & > span:nth-child(1) {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 10px;
        }
      }
    }

    & > .m-img {
      width: 100%;
      height: calc(100vw / 2.23) !important;
      border-radius: 4px;
      overflow: hidden;

      &.np {
        margin: 0 calc(10px - 26px);
        margin: 0 -16px;
        width: calc(100% + (26px - 10px) * 2) !important;
        border-radius: 0 !important;
      }

      &.no-margin {
        margin-bottom: calc(-26px - 10px);
      }
    }

    & > p {
      display: -webkit-box;
      /* ! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin: 12px 0 0;
      font-weight: var(--font-weight, initial);
      font-size: var(--content-default-size, 15px);
      color: #000;
    }
  }

  .m-ft {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 0;

    .m-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ccc;
      height: 36px;
      width: 80px;
      border-radius: 40px;
      cursor: pointer;

      &.sel {
        background: #edf6fe;
        color: var(--clr-main);
      }
    }
  }
}

.sp-margin {
  padding: 0;

  .g-wb_tl {
    padding: calc(26px - 10px) calc(26px - 10px) 0 calc(26px - 10px);
  }

  .m-bd {
    & > p {
      padding: 0 calc(26px - 10px);
      margin-bottom: calc(26px - 10px);
    }
  }
}