.dashboard-panel {
  min-width: 300px;
  width: 29.3%;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-top:15px;
  margin-bottom:15px;

  &.x-large { height: 890px; }
  &.large { height: 660px; }
  &.medium { height: 430px; }
  &.small { height: 200px; }

  .panel-heading {
    height: 15%;
    text-align: left;
    max-height: 50px;
    .panel-title {
      font-size: 20px;
    }
  }

  .panel-content {
    height: 85%;
    width: 100%;
    overflow: scroll;

    .graph {
      overflow: hidden;
      width: 100%;
      height: 100%;
      max-height: 500px;
    }

    .list-group-item {
      border: 0px;
      border-radius: 0px;
      height: 50px;

      &:hover {
        background: #ccc;
        color: white;
      }
      .key {
        width: 35%;
        float: left;
        text-align: right;
      }
      .value {
        width: 65%;
        float: left;
        text-align: center;
      }
    }
  }
}

.dashboard-panel {
  min-width: 300px;
  width: 29.3%;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-top:15px;
  margin-bottom:15px;

  &.x-large { height: 890px; .panel-content { height: 95%; }}
  &.large { height: 660px; .panel-content { height: 93%; }}
  &.medium { height: 430px; .panel-content { height: 90%; }}
  &.small { height: 200px; .panel-content { height: 80%; }}

  .panel-heading {
    height: 40px;
    text-align: left;
    .panel-title {
      font-size: 20px;
    }
  }

  .panel-content {
    width: 100%;
    overflow: scroll;

    .graph {
      overflow: hidden;
      width: 100%;
      height: 100%;
      max-height: 500px;
    }

    .list-group-item {
      border: 0px;
      border-radius: 0px;
      height: 50px;

      &:hover {
        background: #ccc;
        color: white;
      }
      .key {
        width: 35%;
        float: left;
        text-align: right;
      }
      .value {
        width: 65%;
        float: left;
        text-align: center;
      }
    }
  }
}

Make sizing better for titles
Make sizing better for titles
