.tq-monitor {

  .monitor-item {
    border: 2px solid #666666;
    display: inline-block;
    border-radius: 4px;
    color: #666666;
    margin: 2px;
    padding: 2px;
    width: auto;
    min-width: 60px;
    text-align: center;
    vertical-align: middle;
    opacity: 0.75;

    &:hover {
      opacity: 1;

      .monitor-value {
        opacity: 1;
      }

      .monitor-icon {
        opacity: 1;
      }
    }

    .monitor-value {
      margin-bottom: 0;
    }
  }

  &.xs {
    font-size: 12px;

    .monitor-item {
      border: 0;
      border-bottom: 2px solid #666666;
      border-radius: 0;
      padding: 0;
    }
  }

  &.sm {
    font-size: 16px;
  }

  &.md {
    font-size: 20px;
  }
}

.monitor-icon {
  display: inline-block;
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "\f10c";
  }

  &.time:before {
    content: "\f017";
  }

  &.cost:before {
    content: "\f155";
  }

  &.scope:before {
    content: "\f0e4";
  }
}