.content-box
  padding: 30px
  background: $white
  border: 1px solid $border
  border-radius: 4px
  width: 100%
  min-height: 50px
  margin-bottom: 30px

  .content-box-header
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 10px

    h2
      padding: 0
      margin: 0
      display: inline

    h3
      display: inline
      text-transform: none
      padding: 0
      margin: 0

  hr
    margin: 10px 0

  .container-item
    border: 1px solid #DFE2E5
    background: #FAFBFC
    border-radius: 4px

    .p-content
      font-size: 13px
      padding: 10px 0

    .container-header
      font-size: 14px
      border-bottom: 1px solid #DFE2E5
      padding: 10px
      font-weight: $weight-bold

    .container-data
      padding: 10px
      background: $white
      border-bottom-left-radius: 4px
      border-bottom-right-radius: 4px
      display: block

      &.border-bottom
        border-bottom: 1px solid #DFE2E5

      .data-info
        display: flex
        justify-content: space-between
        font-size: 12px
        padding: 2px 0
        border-bottom: 1px solid #f1f3f5

      .label-txt
        min-width: 20px

      .data-txt
        min-width: 20px
        padding-right: 10px

  .info-data-container
    display: flex
    align-items: center
    height: 30px
    font-size: 14px
    justify-content: space-between

    .label-txt
      color: $color
      min-width: 50px
      font-size: 13px
      font-weight: $weight-semibold

    .data-txt
      color: $color-secondary
      min-width: 20px
      text-align: center

  .data-progress-container
    height: 4px
    border-radius: 2px
    width: 100%
    background: #E2E7EE
    position: relative
    margin: 0 20px

    .data-progress-bar
      height: 4px
      border-radius: 2px
      position: absolute
      left: 0
      top: 0

    &.green

      .data-progress-bar
        background-image: linear-gradient(90deg, #2BB415 2%, #5AD946 98%)

    &.purple

      .data-progress-bar
        background-image: linear-gradient(-90deg, #9D90E4 2%, #8261E6 98%)

.line-chart-top-content
  padding: 0
  display: flex
  align-items: center
  justify-content: space-between
  margin-bottom: 10px

  h2
    margin: 0
    padding: 0

  .line-chart-legend
    display: flex
    align-items: center
    font-size: 13px

    .dot
      display: inline-block
      width: 8px
      height: 8px
      border-radius: 50%
      margin: 0 10px

      &.green
        border: 2px solid #2BB415

      &.red
        border: 2px solid #f03e3e

.line-chart-container
  width: 100%
  height: 200px

  .axis
    font-family: $font-family-regular

    .domain
      stroke: transparent

    .tick

      line
        stroke: transparent

      text
        fill: $text

    &.axis--y

      .tick

        line
          stroke: #DFE2E5
          stroke-width: 1

.progress-chart
  width: 240px
  height: 240px
  display: block
  margin: 0 auto

.datepickers-container
  display: flex
  justify-content: flex-end

  .ngx-datepicker-input
    display: block
    float: left
    border-radius: 4px
    margin-left: 10px
    width: 120px !important
    background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
    color: $color-secondary !important
    font-size: 12px !important
    border: 1px solid $border !important
    cursor: pointer

  .day-unit

    &.is-selected
      background: $green !important

.ion-power
  margin-right: 4px !important
  margin-top: 4px