@import '../../includes/variables';

&-users-wrapper {
  margin: 30px 0 0 -15px;

  @media all and (max-width: $screen-sm-max) {
    margin: 30px -15px 0 -15px;
  }

  .twofas-users {
    background: $TF_Admin_Box_Background_Color;
    border: 1px solid $TF_Admin_Box_Border_Color;
    height: 365px;
    padding: 15px;

    @media all and (max-width: 640px) {
      height: 200px;
    }

    @media all and (max-width: 480px) {
      height: auto;
    }

    .chart-container {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 15px 0;

      @media all and (max-width: $screen-md-max) {
        padding: 30px 0;
      }

      @media all and (max-width: $screen-sm-max) {
        padding: 15px 0;
      }

      @media all and (max-width: 480px) {
        padding: 10px 0 0 0;
      }
    }

    canvas,
    iframe {
      max-height: 100%;
      max-width: 70%;
      float: left;
      margin-left: -15%;

      @media all and (min-width: $screen-md) and (max-width: $screen-md-max) {
        width: 64%;
      }

      @media all and (max-width: 480px) {
        max-width: 100%;
        margin-left: 0;
        float: none;
      }
    }

    #js-legend {
      width: 30%;
      float: left;
      font-size: 12px;

      @media all and (min-width: $screen-md) and (max-width: $screen-md-max) {
        width: 36%;
      }

      @media all and (max-width: 480px) {
        float: none;
        width: 100%;
      }

      ul {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;

        @media all and (max-width: 480px) {
          text-align: center;
        }

        li {
          padding: 5px;
          margin: 0;

          @media all and (max-width: 480px) {
            display: inline-block;
          }

          span {
            display: inline-block;
            height: 10px;
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}