/*
This doesn't work very well because it hides the content inside the box but not the box border.

.component-inner-container[data-component-id="6tzfggrrwhq1"] { visibility: hidden }
*/
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* Two column system metrics */
.metric {
  width: 50%;
  float: left;
  border-width: 0 !important;
}
.custom-metrics-container {
  overflow: auto;
}
/* Add "currently" before metrics value */
.metric-average:before {
  content: "currently "
}
/* Show icons instead of text */
/*
.icon-indicator {
  display: inline-block !important;
}
.component-status {
  display: none !important;
}
*/
/* Show component status legend */
/*
.component-statuses-legend {
  display: block !important;
}
*/
/* Change status words (overridden by status icons if set) */
/*
div.status-green > span.component-status {
  visibility: hidden;
  position: relative;
}
div.status-green > span.component-status:after {
    visibility: visible;
    position: absolute;
  	  right: 0;
    content: "Green";
}
div.status-yellow > span.component-status {
  visibility: hidden;
  position: relative;
}
div.status-yellow > span.component-status:after {
    visibility: visible;
    position: absolute;
  	  right: 0;
    content: "Yellow";
}
div.status-orange > span.component-status {
  visibility: hidden;
  position: relative;
}
div.status-orange > span.component-status:after {
    visibility: visible;
    position: absolute;
  	  right: 0;
    content: "Orange";
}
div.status-red > span.component-status {
  visibility: hidden;
  position: relative;
}
div.status-red > span.component-status:after {
    visibility: visible;
    position: absolute;
  	  right: 0;
    content: "Red";
}
div.status-blue > span.component-status {
  visibility: hidden;
  position: relative;
}
div.status-blue > span.component-status:after {
    visibility: visible;
    position: absolute;
  	  right: 0;
    content: "Blue";
}
*/
.incident-title > small {
    color: black;
}
.incident-title > a:hover {
    color: #999;
}