.plan1.legend-color {background-color:var(--plan1)}
.plan2.legend-color {background-color:var(--plan2)}
.plan3.legend-color {background-color:var(--plan3)}
.plan4.legend-color {background-color:var(--plan4)}
.plan5.legend-color {background-color:var(--plan5)}
.plan6.legend-color {background-color:var(--plan6)}
.plan7.legend-color {background-color:var(--plan7)}

.legend {text-align:center;margin:10px 0px;line-height:1.2;}
div.legend-color {
  width:10px;
  height:10px;
  margin-right:5px;
  display:inline-block;
}

.legend-entry.custom .legend-color {height:2px;background-color:var(--red);   top: -4px;position: relative;}
#trends .description {
  font-family: var(--font);
  font-size: 14px;
  margin: 10px 0px;
  padding: 0px;
  text-align: left;
  line-height:1.2;
}

.legend-entry {display:inline-block;margin-right:10px;}
.legend-entry:nth-last-of-type() {margin-right:0px;}

.legend-text {display:inline-block;font-family:var(--font);font-size:12px;margin-bottom:0px;}


#title-slide {
    min-height:400px;
}

.bar-name {
  font-size:10px;
  font-family:var(--font)
}

#selector-nav a:hover {background-color: var(--fillopacity);cursor:pointer;text-decoration:none;}
#selector-nav a { 
  color: #FFF;
  /* padding: 10px; */
  margin-left: 5px;
  padding: 9px 20px;
  background-color: var(--fill);
  -webkit-transition: background-color 400ms ease-out;
  -moz-transition: background-color 400ms ease-out;
  -ms-transition: background-color 400ms ease-out;
  -o-transition: background-color 400ms ease-out;
  transition: background-color 400ms ease-out;
}



.pie-label {
    stroke:#FFFFFF;
    stroke-width:0.4px;
    font-size:14px;
}

.bartext {font-size:10px;font-family:var(--font);color:#000;display:none;}

.btn-group {
    width:100%;
    text-align:center;
}
#bars {min-height:232px;}
#bars > div { display: inline-block;max-width:230px; }
#bars .bar-label {margin-bottom:0px;font-family:var(--font);font-size:14px;text-align:center;font-weight:800;margin-left:40px;}
.btn-group button {
    background-color: var(--fill); 
    font-size:18px;
    border:none;
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    margin:1px;
    font-family:var(--font);
    -webkit-transition: background-color 400ms ease-out; -moz-transition: background-color 400ms ease-out; -ms-transition: background-color 400ms ease-out; -o-transition: background-color 400ms ease-out; transition: background-color 400ms ease-out;
  }

  .btn-group button.active {
    background-color:var(--fillopacity);
    cursor:default;
  }
  .btn-group button:nth-of-type(1) {
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
  }
  .btn-group button:last-of-type {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
  }
  
  .btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
  }
  
  /* Clear floats (clearfix hack) */
  .btn-group:after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Add a background color on hover */
  .btn-group button:hover {
    background-color: var(--fillopacity);
  }
@media(max-width:900px) {
  #bars {min-height:464px;}
}
@media (max-width:800px) {
    .pie-label {
        font-size:16px;
    }
}

@media (max-width:700px) {
  .legend {
      text-align:left;
      line-height:1;

  }

  .btn-group button {font-size:14px; padding:8px 16px;}
}

@media (max-width:550px) {
  #bars {margin:0 auto;}
}

@media (max-width:400px) {
  .btn-group button {font-size:14px; padding:6px 8px;}
}