/**
 * AllergyAware
 * http://wordpress.org/themes
 *
 * Copyright (c) 2014 John Bousfield
 * Licensed under the GPLv2+ license.
 */
/* Metrics */
.nav-background {
  background: url('../../assets/images/bg-blue-dark.png');
}
#metrics-header {
  background: url('../../assets/images/bg-blue.png');
  position: relative;
  font-size: 12pt;
}
#metrics-header .intro-img {
  text-align: center;
  margin-top: 45px;
}
#metrics-header .intro-line {
  margin-top: 15px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 60px;
  font-weight: 300;
  line-height: 72px;
  color: #fff;
}
@media (max-width: 990px) {
  #metrics-header .intro-line {
    font-size: 48px;
    line-height: 54px;
  }
}
@media (max-width: 768px) {
  #metrics-header .intro-line {
    font-size: 32px;
    line-height: 36px;
  }
}
#metrics-header .intro-copy {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  text-align: center;
}
@media (max-width: 768px) {
  #metrics-header .intro-copy {
    font-size: 18px;
    line-height: 24px;
  }
}
.form-group label {
  margin-right: 10px;
}
.form-element {
  margin-right: 35px;
}
#reportrange {
  background: #fff;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.metrics-container {
  position: relative;
  font-size: 12pt;
}
.metrics-container .btn-input {
  display: block;
}
.metrics-container .btn-input .btn.form-control {
  text-align: left;
}
.metrics-container .btn-input .btn.form-control span:first-child {
  left: 10px;
  overflow: hidden;
  position: absolute;
  right: 25px;
}
.metrics-container .btn-input .btn.form-control .caret {
  margin-top: -1px;
  position: absolute;
  right: 10px;
  top: 50%;
}
.metrics-container .nav-pills > li.active > a {
  background: #4AA0BE;
}
.metrics-container .nav-pills a {
  color: #4AA0BE;
}
.metrics-container a {
  color: #4AA0BE;
}
.metrics-container .report-header {
  color: #808080;
  padding-bottom: 25px;
  font-size: 24px;
  font-weight: 300;
  border-bottom: 1px solid #ccc;
}
@media (max-width: 768px) {
  .metrics-container .report-header {
    font-size: 18px;
    line-height: 24px;
  }
}
.metrics-container .report-header span {
  font-weight: 400;
}
.metrics-container .metrics-header {
  color: #808080;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
}
@media (max-width: 768px) {
  .metrics-container .metrics-header {
    font-size: 18px;
    line-height: 24px;
  }
}
.metrics-container .metrics-dataline {
  margin-top: 10px;
  color: #000;
}
.metrics-container .metrics-chart-bar {
  margin-bottom: 35px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  padding: 20px;
}
.metrics-container .metrics-chart-bar a:link,
.metrics-container .metrics-chart-bar a:visited {
  text-decoration: none;
  font-weight: 400;
}
.metrics-container .metrics-chart-bar a:hover {
  color: #5bc0de;
  text-decoration: none;
  font-weight: 400;
}
.metrics-container .metrics-chart-bar .province-chart {
  margin: 10px 20px 20px 20px;
  padding-bottom: 15px;
  border: 1px solid #ccc;
  background: #fff;
}
.metrics-container .metrics {
  color: #000;
  font-size: 16px;
  font-weight: 300;
}
.metrics-container .survey-question-option {
  color: #000;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 2px;
  text-align: right;
}
@media (max-width: 768px) {
  .metrics-container .survey-question-option {
    text-align: left;
  }
}
.metrics-container .survey-question-stem {
  color: #808080;
  font-size: 18px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 10px;
}
.metrics-container .survey-item {
  margin-top: 10px;
}
@media (max-width: 480px) {
  .metrics-container .survey-item {
    margin-top: 20px;
  }
}
.metrics-container .survey-bar {
  background: #ffc375;
  border: 1px solid #e7A257;
  height: 24px;
  position: relative;
  margin-bottom: 5px;
}
.metrics-container .survey-alt-bar {
  background: #5bc0de;
  border: 1px solid #28a4c9;
  height: 24px;
  position: relative;
  margin-bottom: 20px;
}
.metrics-container .survey-role-bar {
  background: #5bc0de;
  border: 1px solid #28a4c9;
  height: 24px;
  position: relative;
}
.metrics-container .survey-bar-value {
  position: absolute;
  right: -130px;
  width: 120px;
  border: 0px solid #000;
  text-align: left;
}
.metrics-container .course-started-bar {
  background: #ffc375;
  border: 1px solid #e7A257;
  height: 24px;
  position: relative;
}
.metrics-container .course-completed-bar {
  background: #4ad956;
  border: 1px solid #21ac3c;
  height: 24px;
  position: relative;
}
.metrics-container .course-certificates-bar {
  background: #5bc0de;
  border: 1px solid #28a4c9;
  height: 24px;
  position: relative;
}