/* GRAPHICS */

.donutCard {
  height: 360px;
  background: white;
  color: #76ba0a;
  overflow-x: hidden;
  overflow-y: hidden;
  display: inline-block;
  /* padding-right: 10px;
  padding-left: 10px; */
}

.donutCard .header {
  width: inherit;
  height: 15%;
  padding-top: 17px;
  margin-left: -10px;
}

.barsCard {
  /*width: 777px;
  height: 350px;*/
  background: white;
  color: #76ba0a;
  overflow-x: hidden;
  display: inline-block;
  margin-right: 15px;
  overflow-y: hidden;
}

.barsCard .header .left {
  width: 55%;
  height: 12%;
  padding-top: 17px;
  float: left;
  padding-left: 54px;
  padding-bottom: 10px;
}

.barsCard .header .right {
  width: 45%;
  height: 12%;
  padding-top: 20px;
  float: right;
}

.barsCard .header .labels {
  margin-left: 10px;
}

.barsCard .header .labels .square {
  width: 15px;
  height: 15px;
  float: left;
  margin-left: 10px;
}

.barsCard .header .labels .text {
  float: left;
  font-size: 8px;
  color: #333;
  margin-top: 2.5px;
  margin-left: 2px;
}

.barsCard .barContainer {
  width: 1146px;
  margin: 0;
  float: left;
}

.barsCard .sidebar {
  width: 145px;
  background: #4c4c4c;
  height: 53px;
  float: left;
  font-size: 14px;
  padding-top: 5px;
  margin-top: 27px;
}

.barsCard .sidebar .title {
  color: white;
  width: 80%;
  margin: 0 auto;
  font-size: 90%;
}

.barsCard .sidebar .subtitle {
  color: white;
  width: 80%;
  margin: 0 auto;
}

.barsCard .sidebar .rotatedSquare {
  width: 10px;
  height: 10px;
  position: absolute;
  margin-left: -5px;
  margin-top: -3px;
  background: #4c4c4c;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.rotate {
  -ms-transform: rotate(225deg);
  /* IE 9 */
  -webkit-transform: rotate(225deg);
  /* Chrome, Safari, Opera */
  transform: rotate(225deg);
}

.rotate-donut {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.absoluteLine {
  position: absolute;
  margin-top: -254px;
  margin-left: 31px;
  width: 563px;
  height: 249px;
}

.absoluteStackedBar {
  position: absolute;
  margin-top: -243px;
  margin-left: 0px;
  width: 601px;
  height: 238px;
}

.barsChart {
  width: 600px;
  height: 260px;
}

.stackedBarsChart {
  width: 600px;
  height: 249px;
  margin-top: 10px;
}

.hidden {
  visibility: hidden;
}

.dashedLine {
  border: none;
  border-top: 3px dashed #333;
  height: 1px;
  width: 755px;
  position: absolute;
  z-index: 2;
  margin-left: 63px;
}

.dashedLine .text {
  width: 150px;
  height: 20px;
  font-size: 10px;
  margin-left: 764px;
  margin-top: -10px;
  color: #383838;
  position: absolute;
}

.orangeBg {
  background: #ffb702;
}

.darkGrayBg {
  background: #3b3b3b;
}

.greenBg {
  background: #62BB46;
}

.criticalBg {
  background: rgb(211,18,69);
}

.blueBg {
  background: #31a9ef;
}

.bottomTitle {
  font-size: 18px;
  width: 90%;
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
  position: static;
}

.bottomTitleSubIndex {
  font-size: 12px;
  width: 90%;
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-weight: 300;
  position: static;
}

.bottomSubTitle {
  font-size: 12px;
  width: 90%;
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-weight: 300;
  color: #333;
}

.bottomSubTitleSubIndex {
  font-size: 8px;
}

.greenText {
  color: #62BB46;
}

.orangeText {
  color: #ffb702;
}

.darkGrayText {
  color: #3b3b3b;
}

.criticalText {
  color: rgb(211,18,69);
}

.blueText {
  color: #31a9ef;
}

.donutsHeaderLabel {
  font-family: 'Helvetica';
  font-weight: 500;
  font-size: 16px;
  color: white;
  display: inline-block;
}

.barsHeaderLabel {
  font-family: 'Helvetica';
  font-weight: 1000;
  font-size: 16px;
  margin-left: 15px;
  width: 400px;
  color: #5b5b5b;
  display: inline-block;
}

.colors {
  color: rgba(0, 102, 209, 0.98);
  color: #469de0;
  color: rgba(176, 23, 23, 0.97);
  color: #ce625a;
}

.donutContainer {
  margin-top: 20px;
  width: 380px;
  /* margin-left: -53px; */
  position: relative;
}

.goalLine {
  position: absolute;
  width: 21px;
  margin-left: 262px;
  margin-top: 100px;
  z-index: 2;
  border: none;
  border-top: 1px dotted #333;
  height: 1px;
}

.goalLine .text {
  width: 15px;
  height: 10px;
  font-size: 7px;
  margin-left: 25px;
  margin-top: -6px;
  color: #383838;
  position: absolute;
}

.barsContainer {
  margin-top: 20px;
  margin-left: 20px;
  width: 600px;
  height: 300px;
}

.shadow {
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.05);
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.inlineBlock {
  display: inline-block;
  margin-right: 50px;
}

.bottomTitle {
  font-size: 18px;
  width: 90%;
  position: relative;
  margin: 0 auto 5px auto;
  text-align: center;
  font-weight: 500;
  position: static;
  min-height: 25px;
}

.bottomSubTitle {
  font-size: 12px;
  width: 90%;
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-weight: 300;
  color: #333;
}

.graphic-image {
  position: absolute;
  margin-left: 30px;
  width: 90px;
  height: 90px;
  top: 50px;
  left: 116px;
}

.bottomLabelsWrapper {
  width: 100%;
  padding-left: 14% !important;
  height: 15px;
  margin: 8px auto;
  font-size: 12px;
}

.bottom-labels-wrapper-four {
  width: 100%;
  padding-left: 3%;
  height: 15px;
  margin: 8px auto;
  font-size: 12px;
}

.bottom-labels-wrapper-pumps {
  width: 100%;
  padding-left: 18% !important;
  height: 15px;
  margin: 8px auto;
  font-size: 12px;
}

.bottomLabel .square {
  width: 15px;
  height: 15px;
  position: relative;
  top: 4px;
}

.bottomLabel .text {
  margin-right: 7px;
  font-size: .75em;
  color: #333;
  margin-top: 2.5px;
  /*margin-left: 2px;*/
}

.bottomLabel .data-number {
  margin-right: 10px;
  font-size: .8em;
  color: #333;
  margin-top: 0;
  margin-left: 0px;
  min-width: 9px;
}

.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
  list-style-type: none;
  margin-top: 5px;
  text-align: center;
  /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
  -webkit-padding-start: 0;
  /* Webkit */
  -moz-padding-start: 0;
  /* Mozilla */
  padding-left: 0;
  /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
}

.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: smaller;
  cursor: default;
}

.chart-legend li span,
.bar-legend li span,
.line-legend li span,
.pie-legend li span,
.radar-legend li span,
.polararea-legend li span,
.doughnut-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* news */
.cover{
  position: absolute;
  width: 100%;
  height: 270px;
  z-index: 100;
}

.chart-bar{
  padding-left: 50px;
  padding-right: 20px;
}

.legend-bar-chart-left{
  float: left;
  position: absolute;
  margin-left: -40px;
  margin-top: 130px;
  color: #5b5b5b;
  font-size: 12px;

    /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.legend-bar-chart-right{
  width: 201px !important;  
  float: right !important;
  font-size: 12px;
  margin-top: -183px !important;
  position: relative;
  margin-right: -85px;
  color: #5b5b5b;

  /* Safari */
  -webkit-transform: rotate(-270deg);

  /* Firefox */
  -moz-transform: rotate(-270deg);

  /* IE */
  -ms-transform: rotate(-270deg);

  /* Opera */
  -o-transform: rotate(-270deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.legends-bar-chart{
  padding-right: 30px;
}

.legends-bar-chart .ng-scope{
  float: right;
}

.labels-horseshoe{
  display: table-cell;
  margin: 3px 0;
}

.text-labels {
  display: table;
  width: 100%;
}

.bottomLabel{
  display: inline;
  overflow: auto;
  margin: 0;
  padding: 0;
}

ul.bottomLabel li{
  display: inline-table;
  margin: 0;
  padding: 0;
}

.showLineLabel{
  background: rgb(255,255,255); /* Old browsers */
  background: -webkit-linear-gradient(rgba(255,255,255,1) 48%, rgba(0,0,0,1) 54%, rgba(255,255,255,1) 60%) !important;
  background: -moz-linear-gradient(rgba(255,255,255,1) 48%, rgba(0,0,0,1) 54%, rgba(255,255,255,1) 60%) !important;
  background: -o-linear-gradient(rgba(255,255,255,1) 48%, rgba(0,0,0,1) 54%, rgba(255,255,255,1) 60%) !important;
  background: linear-gradient(rgba(255,255,255,1) 48%, rgba(0,0,0,1) 54%, rgba(255,255,255,1) 60%) !important; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important; /* IE6-9 */
}

.line-history-dashboard {
  width: 570px !important;
  height: 320px !important;
}

.line-history-dashboard-large {
  width: 800px !important;
  height: 450px !important;
}


.graph-buttons button{
  margin-left: -4px !important;
  background-color: #3b3b3b;
  border: none;
}

.graph-buttons button:hover{
  background-color: #DFDFDF;
}

.graph-buttons button:first-child{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.graph-buttons button:last-child{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.button-selected{
  background-color: #959797 !important;
}

.cross-legend {
  text-decoration: line-through !important;
}

.edit-in-place span {
  cursor: pointer;
}

.edit-in-place input {
  display: none;
}

.edit-in-place.active span {
  display: none;
}

.edit-in-place.active input {
  display: inline-block;
}