.statistics-header {
  padding: rem(20);

  @include media-breakpoint-up(sm) {
    padding: rem(30);
  }

  @include media-breakpoint-up(lg) {
    padding: rem(43) rem(50) rem(32);
  }
}

.charts-section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding-top: rem(50);
  position: relative;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    padding-top: 0;
  }

  body:not(.charts-rendered) &,
  &.charts-loading {
    .filters {
      transform: none;
    }

    .loader {
      background: $clr-white;
      height: 100%;
    }
  }

  &.single-training {
    flex-direction: column;
    padding-top: 0;

    @include media-breakpoint-up(lg) {
      min-height: rem(290);
    }

    .top-section {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-bottom: rem(20);

      .filters {
        position: static;
      }
    }
  }

  .canvas-container {
    position: relative;

    .content-box__title {
      font-size: rem(16);
      line-height: 1.1;
      margin-bottom: rem(5);

      @include media-breakpoint-up(sm) {
        font-size: rem(18);
      }
    }
  }

  canvas {
    max-width: 100%;
  }

  .left-col {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin-bottom: rem(30);
    width: 100%;

    @include media-breakpoint-up(md) {
      justify-content: flex-start;
      flex-direction: column;
      flex: 1 0 rem(180);
      max-width: rem(180);
      margin-bottom: 0;
      padding-top: rem(90);
    }

    @include media-breakpoint-up(lg) {
      flex: 1 0 rem(230);
      max-width: rem(230);
      padding-top: rem(53);
    }

    .canvas-container {
      flex: 1 0 50%;
      max-width: rem(130);
      margin: 0 rem(15);

      @include media-breakpoint-up(lg) {
        flex: 1 0 auto;
        max-width: rem(145);
        margin: 0;
      }

      + .canvas-container {
        @include media-breakpoint-up(md) {
          margin-top: rem(10);
        }
      }
    }

    canvas {
      height: auto !important;
      margin: 0 auto;
      width: 100% !important;
    }
  }

  .right-col {
    @include media-breakpoint-up(md) {
      flex: 1 0 calc(100% - 180px);
      max-width: calc(100% - 180px);
      width: 100%;
    }

    @include media-breakpoint-up(lg) {
      flex: 1 0 calc(100% - 230px);
      max-width: calc(100% - 230px);
    }

    .canvas-container {
      background: $clr-gray-light;
      border-radius: rem(10);
      max-width: rem(880);
      padding: rem(20) rem(20) rem(15) rem(15);
    }

    canvas {
      height: rem(200) !important;
      width: 100% !important;

      @include media-breakpoint-up(md) {
        height: rem(318) !important;
      }

      @include media-breakpoint-up(lg) {
        height: rem(350) !important;
      }
    }
  }

  .top-section {
    @include media-breakpoint-up(md) {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      margin-bottom: rem(20);
      position: relative;
      z-index: 1;
    }

    @include media-breakpoint-up(lg) {
      flex-direction: row;
      justify-content: space-between;
    }

    .content-box__title {
      font-size: rem(16);
      font-weight: $font-weight-bold;
      margin-bottom: rem(20);

      @include media-breakpoint-up(lg) {
        margin-bottom: 0;
      }
    }

    .filters {
      display: flex;
      position: absolute;
      right: 0;
      top: 0;

      @include media-breakpoint-up(md) {
        position: static;
      }

      @include media-breakpoint-up(xl) {
        transform: translate(rem(30));
      }

      .form-item {
        margin-bottom: 0;

        + .form-item {
          margin-left: rem(10);
        }
      }

      .ajax-progress {
        display: none;
      }

      .form-item-month {
        .bootstrap-select {
          > .dropdown-toggle {
            min-width: rem(145);

            &:after {
              content: '\f10f' !important;
            }
          }

          > .dropdown-menu {
            border: 1px solid $clr-desktop-button-color;
            border-top: none;
            transform: translateY(33px) !important;
          }
        }
      }
    }

    .bootstrap-select {
      > .dropdown-toggle {
        min-width: rem(113);
        padding-right: rem(5);
      }
    }
  }

  .bottom-section {
    align-items: center;
    display: flex;
    justify-content: space-around;

    @include media-breakpoint-up(sm) {
      justify-content: center;
    }

    .canvas-container {
      flex: 1 0 calc(50% - 10px);
      max-width: rem(130);
      margin: 0 rem(5);

      @include media-breakpoint-up(sm) {
        margin: 0 rem(25);
      }

      @include media-breakpoint-up(md) {
        flex: 1 0 auto;
        max-width: rem(200);
        margin: 0 rem(50);
      }
    }

    canvas {
      height: auto !important;
      margin: 0 auto;
      width: 100% !important;
    }
  }
}

.user-metrics-content {
  margin-top: rem(30);

  @include media-breakpoint-up(sm) {
    display: flex;
    justify-content: space-between;
  }

  @include media-breakpoint-up(md) {
    margin-top: rem(55);
  }

  .user-metric {
    align-items: center;
    background: $clr-gray-light;
    border-radius: rem(10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: rem(20);
    padding: rem(16);
    text-align: center;

    @include media-breakpoint-up(sm) {
      flex: 0 0 31%;
      margin-bottom: 0;
      padding: rem(5) rem(16);
    }

    @include media-breakpoint-up(xl) {
      flex: 0 0 24.5%;
      padding: rem(16);
    }
  }

  .user-metric-value {
    font-size: rem(32);
    font-weight: $font-weight-extrabold;
    margin-bottom: rem(5);

    @include media-breakpoint-up(md) {
      font-size: rem(43);
      margin-bottom: rem(10);
    }
  }

  .user-metric-label {
    font-size: rem(14);
    font-weight: $font-weight-bold;
    text-transform: uppercase;

    @include media-breakpoint-up(md) {
      font-size: rem(16);
    }
  }
}
