@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 18, sass/screen.scss */
.chart {
  float: left;
  position: relative;
  padding: 30px;
  margin: 20px;
  border: 1px solid #cecece; }
  /* line 52, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  .chart div, .chart span, .chart applet, .chart object, .chart iframe,
  .chart h1, .chart h2, .chart h3, .chart h4, .chart h5, .chart h6, .chart p, .chart blockquote, .chart pre,
  .chart a, .chart abbr, .chart acronym, .chart address, .chart big, .chart cite, .chart code,
  .chart del, .chart dfn, .chart em, .chart img, .chart ins, .chart kbd, .chart q, .chart s, .chart samp,
  .chart small, .chart strike, .chart strong, .chart sub, .chart sup, .chart tt, .chart var,
  .chart b, .chart u, .chart i, .chart center,
  .chart dl, .chart dt, .chart dd, .chart ol, .chart ul, .chart li,
  .chart fieldset, .chart form, .chart label, .chart legend,
  .chart table, .chart caption, .chart tbody, .chart tfoot, .chart thead, .chart tr, .chart th, .chart td,
  .chart article, .chart aside, .chart canvas, .chart details, .chart embed,
  .chart figure, .chart figcaption, .chart footer, .chart header, .chart hgroup,
  .chart menu, .chart nav, .chart output, .chart ruby, .chart section, .chart summary,
  .chart time, .chart mark, .chart audio, .chart video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline; }
  /* line 55, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  .chart table {
    border-collapse: collapse;
    border-spacing: 0; }
  /* line 57, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  .chart caption, .chart th, .chart td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle; }
  /* line 59, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  .chart q, .chart blockquote {
    quotes: none; }
    /* line 103, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
    .chart q:before, .chart q:after, .chart blockquote:before, .chart blockquote:after {
      content: "";
      content: none; }
  /* line 61, ../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  .chart a img {
    border: none; }
  /* line 27, sass/screen.scss */
  .chart.nodata .nodata-text {
    display: block; }
  /* line 32, sass/screen.scss */
  .chart .nodata-text {
    display: none;
    z-index: 100;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center; }
    /* line 42, sass/screen.scss */
    .chart .nodata-text:before {
      content: 'NO DATA';
      color: #888785;
      line-height: 235px; }
  /* line 49, sass/screen.scss */
  .chart .trafficlight {
    color: #827E7D;
    font-size: 10px;
    line-height: 10px;
    margin-top: 30px;
    width: 450px;
    min-height: 135px; }
    /* line 50, sass/screen.scss */
    .chart .trafficlight ul {
      padding: 0px; }
    /* line 51, sass/screen.scss */
    .chart .trafficlight li {
      list-style: none; }
    /* line 59, sass/screen.scss */
    .chart .trafficlight .graph {
      width: 80px;
      display: table-cell;
      vertical-align: middle; }
      /* line 64, sass/screen.scss */
      .chart .trafficlight .graph ul {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto; }
        /* line 69, sass/screen.scss */
        .chart .trafficlight .graph ul .idle {
          background: white url("../images/idle.png") no-repeat; }
        /* line 70, sass/screen.scss */
        .chart .trafficlight .graph ul .blue {
          background: white url("../images/blue.png") no-repeat; }
        /* line 71, sass/screen.scss */
        .chart .trafficlight .graph ul .yellow {
          background: white url("../images/yellow.png") no-repeat; }
        /* line 72, sass/screen.scss */
        .chart .trafficlight .graph ul .orange {
          background: white url("../images/orange.png") no-repeat; }
        /* line 73, sass/screen.scss */
        .chart .trafficlight .graph ul .red {
          background: white url("../images/red.png") no-repeat; }
        /* line 75, sass/screen.scss */
        .chart .trafficlight .graph ul li {
          margin: 1px;
          border: none;
          height: 15px;
          width: 15px;
          float: left; }
    /* line 87, sass/screen.scss */
    .chart .trafficlight ul {
      display: table; }
      /* line 89, sass/screen.scss */
      .chart .trafficlight ul li {
        border-bottom: solid #d9d9d9 1px; }
        /* line 91, sass/screen.scss */
        .chart .trafficlight ul li .description {
          display: table-cell;
          padding: 10px 20px 10px 50px;
          width: 200px; }
  /* line 102, sass/screen.scss */
  .chart .axis line {
    fill: none;
    stroke: #D9D9D9;
    shape-rendering: crispEdges; }
  /* line 107, sass/screen.scss */
  .chart .axis path, .chart .axis.x line {
    fill: none; }
  /* line 110, sass/screen.scss */
  .chart .axis text {
    fill: #827E7D;
    font-size: 10px; }
  /* line 116, sass/screen.scss */
  .chart .axis.y1right line {
    stroke: none; }
  /* line 119, sass/screen.scss */
  .chart .axis.y1right text {
    fill: #fc6f1b; }
  /* line 129, sass/screen.scss */
  .chart .legend text {
    font-size: 11px; }
  /* line 133, sass/screen.scss */
  .chart .chart-title {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    margin: 30px 0 0 30px; }
  /* line 143, sass/screen.scss */
  .chart .listdropdown {
    width: 150px;
    height: 271px; }
    /* line 146, sass/screen.scss */
    .chart .listdropdown ol {
      padding: 10px 0; }
    /* line 150, sass/screen.scss */
    .chart .listdropdown a {
      color: black;
      text-decoration: none;
      white-space: nowrap; }
  /* line 158, sass/screen.scss */
  .chart .legend ul {
    overflow: hidden; }
  /* line 160, sass/screen.scss */
  .chart .legend li {
    clear: both;
    display: table-row; }
    /* line 163, sass/screen.scss */
    .chart .legend li .box:first-child {
      width: 15px !important; }
    /* line 166, sass/screen.scss */
    .chart .legend li .box {
      padding: 0px 5px;
      display: table-cell;
      vertical-align: middle; }
    /* line 172, sass/screen.scss */
    .chart .legend li .remove {
      display: none;
      background: url("../images/diagcross.png") no-repeat center center; }
  /* line 179, sass/screen.scss */
  .chart.table {
    padding: 0;
    font-size: 10px; }
    /* line 180, sass/screen.scss */
    .chart.table .tablehighlight {
      font-weight: bold;
      background-color: #eeeeee; }
    /* line 186, sass/screen.scss */
    .chart.table > div {
      clear: none !important; }
    /* line 187, sass/screen.scss */
    .chart.table tr {
      height: 30px; }
    /* line 190, sass/screen.scss */
    .chart.table .fixedcol {
      float: left; }
      /* line 192, sass/screen.scss */
      .chart.table .fixedcol td {
        text-align: left;
        cursor: pointer; }
      /* line 196, sass/screen.scss */
      .chart.table .fixedcol .isurl.tablehighlight {
        background-color: #039FE3;
        color: white; }
        /* line 200, sass/screen.scss */
        .chart.table .fixedcol .isurl.tablehighlight .table.cell.data {
          position: relative; }
        /* line 203, sass/screen.scss */
        .chart.table .fixedcol .isurl.tablehighlight .table.cell.data:after {
          content: '▶';
          position: absolute;
          top: 0px;
          right: 10px;
          color: #767676;
          font-size: 10px;
          margin: 5px 0; }
    /* line 214, sass/screen.scss */
    .chart.table .datacolumns {
      overflow: auto;
      float: left; }
      /* line 217, sass/screen.scss */
      .chart.table .datacolumns td, .chart.table .datacolumns th {
        text-align: center;
        white-space: nowrap;
        padding: 0 2px !important; }
    /* line 223, sass/screen.scss */
    .chart.table .dragarea {
      background-color: #fafafa; }
      /* line 226, sass/screen.scss */
      .chart.table .dragarea .draghandle {
        background-color: #767676; }
    /* line 235, sass/screen.scss */
    .chart.table thead tr {
      background-color: #eeeeee;
      color: #767676; }
      /* line 238, sass/screen.scss */
      .chart.table thead tr td, .chart.table thead tr th {
        font-size: 14px;
        cursor: pointer; }
      /* line 242, sass/screen.scss */
      .chart.table thead tr th:hover, .chart.table thead tr .ordered {
        background-color: #DBDEDE; }
      /* line 245, sass/screen.scss */
      .chart.table thead tr .ordered div:after {
        content: '▼';
        float: right;
        color: #767676;
        font-size: .4em;
        margin: 5px 0; }
      /* line 252, sass/screen.scss */
      .chart.table thead tr .ordered.asc div:after {
        content: "▲"; }
    /* line 262, sass/screen.scss */
    .chart.table tbody tr td:first-child div span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    /* line 272, sass/screen.scss */
    .chart.table th, .chart.table td {
      font-size: 14px; }
    /* line 277, sass/screen.scss */
    .chart.table .cell.data.nodata {
      color: lightgray;
      font-size: 10px; }
    /* line 281, sass/screen.scss */
    .chart.table .cell.data * {
      float: left; }
  /* line 287, sass/screen.scss */
  .chart#indicator-selector {
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin: 21px;
    margin-bottom: -17px;
    background-color: #eeeeee; }
    /* line 294, sass/screen.scss */
    .chart#indicator-selector:hover {
      background-color: #039FE3; }
    /* line 297, sass/screen.scss */
    .chart#indicator-selector span {
      font-size: 16px;
      font-weight: bold; }
    /* line 302, sass/screen.scss */
    .chart#indicator-selector #indicator-list {
      position: absolute;
      z-index: 1000;
      background-color: #eeeeee;
      width: 100%;
      margin-top: 10px;
      left: 0;
      display: none;
      border: 1px solid #cecece;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0px; }
      /* line 314, sass/screen.scss */
      .chart#indicator-selector #indicator-list ul, .chart#indicator-selector #indicator-list li {
        list-style: none; }
      /* line 317, sass/screen.scss */
      .chart#indicator-selector #indicator-list li {
        padding: 5px 10px; }
        /* line 319, sass/screen.scss */
        .chart#indicator-selector #indicator-list li:hover {
          background-color: #039FE3;
          color: white; }
      /* line 324, sass/screen.scss */
      .chart#indicator-selector #indicator-list.open {
        display: block; }
    /* line 329, sass/screen.scss */
    .chart#indicator-selector:before {
      content: '▼';
      float: right;
      color: #767676;
      font-size: .6em;
      margin: 5px 0; }
    /* line 336, sass/screen.scss */
    .chart#indicator-selector.open:before {
      content: '▲'; }
  /* line 343, sass/screen.scss */
  .chart .legend {
    position: absolute !important;
    top: 70px;
    bottom: 20px;
    right: 20px;
    display: table-cell; }
    /* line 350, sass/screen.scss */
    .chart .legend ul {
      vertical-align: middle; }
      /* line 353, sass/screen.scss */
      .chart .legend ul li .box {
        width: 15px;
        padding: 0;
        line-height: 15px;
        position: relative; }
        /* line 359, sass/screen.scss */
        .chart .legend ul li .box:first-child {
          padding-right: 5px; }
        /* line 362, sass/screen.scss */
        .chart .legend ul li .box:last-child {
          padding-left: 5px; }
        /* line 366, sass/screen.scss */
        .chart .legend ul li .box svg {
          position: absolute;
          top: -3px; }
    /* line 374, sass/screen.scss */
    .chart .legend .geoitemform {
      display: none; }
    /* line 378, sass/screen.scss */
    .chart .legend .name {
      color: #827E7D;
      font-size: 10px;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8px;
      line-height: 10px; }

/* line 392, sass/screen.scss */
.charttooltip.tooltip-bottom {
  position: absolute;
  padding: 5px;
  top: 20px;
  left: 0px;
  margin-top: -18px;
  border: 1px solid white;
  background-color: #888785;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px;
  box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px; }
  /* line 402, sass/screen.scss */
  .charttooltip.tooltip-bottom .label, .charttooltip.tooltip-bottom .value, .charttooltip.tooltip-bottom .key {
    float: left;
    color: white;
    line-height: 12px; }
/* line 409, sass/screen.scss */
.charttooltip.tooltip-line {
  border-left: #888785 1px dashed; }
/* line 413, sass/screen.scss */
.charttooltip.tooltip {
  position: relative;
  padding: 5px;
  border: 1px solid white;
  background-color: #888785;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px;
  box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px; }
  /* line 420, sass/screen.scss */
  .charttooltip.tooltip .label, .charttooltip.tooltip .value, .charttooltip.tooltip .key {
    color: white;
    line-height: 12px; }
  /* line 425, sass/screen.scss */
  .charttooltip.tooltip .label {
    display: none; }
  /* line 429, sass/screen.scss */
  .charttooltip.tooltip .key {
    display: none; }
  /* line 431, sass/screen.scss */
  .charttooltip.tooltip:after {
    position: absolute;
    left: 0px;
    bottom: -8px;
    content: "";
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: #888785 transparent transparent #888785; }
  /* line 440, sass/screen.scss */
  .charttooltip.tooltip:before {
    position: absolute;
    left: -1px;
    bottom: -10px;
    content: "";
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #fff transparent transparent #fff; }

/* line 452, sass/screen.scss */
.chartinfobox {
  position: absolute;
  background: white url("../images/info-idle.png") no-repeat center;
  bottom: 5px;
  right: 10px;
  width: 20px;
  height: 20px; }
  /* line 459, sass/screen.scss */
  .chartinfobox:hover {
    background: white url("../images/info-rollover.png") no-repeat center; }

/* line 461, sass/screen.scss */
.chartinfomessage {
  position: absolute;
  z-index: 10;
  left: 0;
  border: 1px solid #cecece !important;
  background-color: white;
  width: 470px;
  left: 20px;
  right: 20px;
  bottom: 10px; }
  /* line 472, sass/screen.scss */
  .chartinfomessage p {
    padding: 10px; }