/*==============================================
Supplies bubble chart
================================================*/

.node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--root {
  display: none;
}
/*-------------------------------*/
.node--1 {
  fill: #0C7296;
}

.node--2 {
  fill: #777872;
}

.node--3 {
  fill: #158662;
}
/*-------------------------------*/
.node--1--1 {
  fill: #3ea0c4;
}
.node--1--2 {
  fill: #ffffff;
}
.node--2--1 {
  fill: #b9b4b9;
}
.node--2--2 {
  fill: #ffffff;
}
.node--3--1 {
  fill: #21b68b;
}
.node--3--2 {
  fill: #ffffff;
}
/*-------------------------------*/
.node--leaf {
  fill: white;
}

.supplies-text {
  fill: #000000;
  word-wrap: break-word;
  font-family: "robotoreglar", sans-serif;
  font-size: 14px;
  text-anchor: middle;
}

button.back{
  display:none;
}

#supplies-bubble-chart-container button.back{
  background-color: transparent;
  background-image: url("../images/back-button.png");
  background-position: left top;
  background-repeat: no-repeat;
  border: 0 none;
  color: #1486c0;
  font-size: 22px;
  height: 38px;
  margin: 15px 0;
  outline: medium none;
  padding-left: 16px;
  text-align: center;
  text-transform: capitalize;
  width: 85px;
}

#supplies-bubble-chart-container button.back:hover {
  color: #000000;
}

svg.cir{
  visibility: hidden;
}

#supplies-bubble-chart-container {
  position: relative;
  text-align: center;
}

.supplies-text,
.node--root,
.node--leaf {
  cursor: pointer;
}

div.tooltip {
  background: none #b7bdbb;
  color: #000000;
  padding: 5px 0 0;
  position: absolute;
  text-align: left;
  font-family: "robotoregular";
  font-size: 14px;
  background-color: #ffffff;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 3px 3px 1px #888888;
}
div#no-data{
  color: #818181;
  font-size: 22px;
  margin: 40px 0;
  text-align: center;
}
.tooltip-value{
  color:#766367;
  padding: 0 10px 5px;
}
.tooltip-indicator{
  background: none #e5e4e4;
  padding: 5px 10px;
  margin: -5px 0 0;
  color:#000000;
}
.extreme-outer-text{
  font-size: 18px;
  font-weight: bold;
}
text.node--1-text{
  fill: #0C7296;
}
text.node--2-text{
  fill: #777872;
}
text.node--3-text{
  fill: #158662;
}

.supplies-label-container {
  position: absolute;
  bottom: 50px;
  left: 30px;
  text-align: left;
}

.label-text {
  font-family: 'robotobold', sans-serif;
  font-size: 16px;
  margin: 0 0 5px;
}

.supplies-label-text-1 {
  color: #3ea0c4;
}

.supplies-label-text-2 {
  color: #777872;
}

.supplies-label-text-3 {
  color: #158662;
}

span.node-color-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin: 0 10px 0 0;
}

.supplies-label-text-1 span.node-color-icon {
  background-color: #3ea0c4;
}

.supplies-label-text-2 span.node-color-icon {
  background-color: #777872;
}

.supplies-label-text-3 span.node-color-icon {
  background-color: #158662;
}

@media all and (max-width:768px){
  .extreme-outer-text {
    font-size: 14px !important;
  }
}
@media all and (max-width:420px){
  .extreme-outer-text {
    font-size: 12px !important;
  }
}