:root {
  --color0: #009cfe;
  --color1: #d47e63;
  --color2: #96cb70;
  --color3: #50b0b4;
  --color4: #50b0b4;
}

/* ------------------------------------------------------------ *\
  Chart
\* ------------------------------------------------------------ */
.mapboxgl-canvas {}
.chart__legend_show.hidden {
  opacity: .5;
}
.chart__legend_show {cursor:pointer;}
.chart { width: 100%; padding: 0 5px; }
.chart .chart__head { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 40px; }
.chart .chart__head h6 { margin-bottom: 10px; text-transform: uppercase }
.chart .chart__head h6 span { display: block; }
.chart .chart__head h3 { text-transform: uppercase; margin: 0; }
.chart .chart__head-content { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; }
.chart .chart__head-actions { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; }
.chart .chart__head-actions { text-align: right; }
.chart .chart__legend { }
.chart .chart__legend ul { list-style: none; margin: 0; padding: 0; }
.chart .chart__legend ul li { display: inline-block; vertical-align: middle; font-size: 16px; text-transform: uppercase;  background: none;  padding: 0 5px 0 0 }
.chart .chart__legend ul li ~ li { margin-left: 20px; }
.chart .chart__legend ul span { display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  position: relative;
  top: -2px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #fff;}
  .chart .chart__legend ul span:before {
    content: "\2713";
    position: absolute;
    font-size: 15px;
    color:#fff;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
    margin: auto;
  }
  .chart .chart__legend ul li.chart__legend_show.hidden span:before {
    opacity: 0;
  }
.chart_selector ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chart_selector ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    text-transform: uppercase;
    background: none;
    padding: 0 5px 0 0;
}


.chart_selector ul li ~ li {
    margin-left: 20px;
}

.chart_selector ul li  span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    position: relative;
    top: -2px;
    text-align: center;
    line-height: 20px;
    border: 1px solid #fff;
}
.chart_selector span:before {
    content: "\2713";
    position: absolute;
    font-size: 15px;
    color: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.chart_selector .hidden span:before {
    opacity: 0;
}
.pbr-chart-main-wrap.hidden {display: none}
.chart .chart__body { padding-bottom: 56%; position: relative; }
.chart .chart__body svg { position: absolute; left: 0; top: 0; overflow: visible; font-size: 13px; color: #fff; }
.chart .chart__body svg path,
.chart .chart__body svg line { fill: none; }
.chart .chart__body svg path.domain { stroke: #fff; }
.chart .chart__body svg line { stroke: #fff; stroke-dasharray: 2; }
.chart .chart__body svg text { fill: #fff; }
.chart .chart__body .x-axis text { stroke: none; }
.chart .chart__body .x-axis .tick:first-child text { display: none; }
/*.chart .chart__body .x-axis .tick:first-of-type line,*/
.chart .chart__body .y-axis .tick:first-of-type line,
.chart .chart__body .y-axis .tick:last-of-type line { stroke-dasharray: 0; }
.chart .chart__body .line { stroke: #fff; stroke-width: 3; }
.chart .chart__body .line.highlight { stroke-width: 10; }
.chart .chart__body .line.hide-line {opacity: 0}
.chart .chart__tooltip { width: 230px; padding: 30px 17px; box-shadow: 0 2px 5px rgba(0,0,0, .25); position: absolute; left: 20px !important; top:  20px !important; z-index: 11; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; margin-left: 30px; margin-top: 30px;     border-radius: 20px; }
.chart .chart__tooltip.visible,
.chart .chart__tooltip.highlight { opacity: 1; visibility: visible; }
.chart .chart__tooltip p { margin: 0; font-size: 14px; }
.chart .chart__tooltip p ~ p { margin-top: 2px; }
.chart .chart__title { text-align: center; font-size: 13px; text-transform: uppercase; padding-top: 5px; }
/*  Chart Colors  */
.chart--red .chart__head h3 { color: #d47e63; }
.chart--red .chart__body circle { fill: #fff; stroke: #d47e63; stroke-width: 2; }
.chart--red .chart__body .line { stroke: #d47e63; }
.chart--red .chart__tooltip { background: #d47e63; }
.chart--red .guide__step { border: 1px solid #d47e63; }
.chart--cyan .chart__head h3 { color: #50b0b4; }
.chart--cyan .chart__body circle { fill: #fff; stroke: #50b0b4; stroke-width: 2; }
.chart--cyan .chart__body .line { stroke: #50b0b4; }
.chart--cyan .chart__tooltip { background: #50b0b4; }
.chart--cyan .guide__step { border: 1px solid #50b0b4; }
.chart--orange .chart__head { margin-bottom: 20px; }
.chart--orange .chart__head h3 { color: #deb864; }
.chart--orange .chart__body .dots circle { fill: #fff; stroke: #3f84af; stroke-width: 2; }
.chart--orange .chart__body .dots ~ .dots circle { stroke: #deb864; }
.chart--orange .chart__body .line { stroke: #deb864; }
.chart--orange .chart__tooltip { background: #deb864; }
.chart--orange .guide__step { border: 1px solid #deb864; }
.chart--green .chart__head h3 { color: #96cb70; }
.chart--green .chart__body circle { fill: #fff; stroke: #96cb70; stroke-width: 2; }
.chart--green .chart__body .line { stroke: #96cb70; }
.chart--green .chart__tooltip { background: #96cb70; }
.chart--green .guide__step { border: 1px solid #96cb70; }
/*  Chart Highlight  */
.chart--red .chart__body .x-axis.highlight text,
.chart--red .chart__body .y-axis.highlight text { fill: #d47e63; }
.chart--red .chart__body .x-axis.highlight--first .tick:first-child line,
.chart--red .chart__body .y-axis.highlight--first .tick:first-child line { stroke: #d47e63; stroke-width: 5; stroke-dasharray: 0; }
.chart--cyan .chart__body .x-axis.highlight text,
.chart--cyan .chart__body .y-axis.highlight text { fill: #50b0b4; }
.chart--cyan .chart__body .x-axis.highlight--first .tick:first-child line,
.chart--cyan .chart__body .y-axis.highlight--first .tick:first-child line { stroke: #50b0b4; stroke-width: 5; stroke-dasharray: 0; }
.chart--orange .chart__body .x-axis.highlight text,
.chart--orange .chart__body .y-axis.highlight text { fill: #deb864; }
.chart--orange .chart__body .x-axis.highlight--first .tick:first-child line,
.chart--orange .chart__body .y-axis.highlight--first .tick:first-child line { stroke: #deb864; stroke-width: 5; stroke-dasharray: 0; }
.chart--green .chart__body .x-axis.highlight text,
.chart--green .chart__body .y-axis.highlight text { fill: #96cb70; }
.chart--green .chart__body .x-axis.highlight--first .tick:first-child line,
.chart--green .chart__body .y-axis.highlight--first .tick:first-child line { stroke: #96cb70; stroke-width: 5; stroke-dasharray: 0; }
/*  Chart Dual Line  */
.chart--dual-line .chart__body g:nth-child(2) .line { stroke: #3f84af; }

/* Tablet Portrait */
@media (max-width: 1023px) {
  .chart { width: 100%; }
  .chart .chart__head h3 { font-size: 27px; }

  .chart .chart__tooltip { margin-left: 20px; margin-top: 20px; }
  .chart .chart__tooltip p { font-size: 12px; }
}

.chart .chart__legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
}




/* ------------------------------------------------------------ *\
  Dropdown
\* ------------------------------------------------------------ */
.dropdown { min-width: 240px; max-width: 300px; display: inline-block; position: relative; z-index: 11; }
.dropdown .dropdown__btn { font-size: 18px;
  text-transform: uppercase;
  padding: 8px 19px;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color .3s ease;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
background: #fff;
color: #182e47; }
.dropdown .dropdown__btn:hover,
.dropdown.highlight .dropdown__btn { border-color: #fff; }
.dropdown .dropdown__btn:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 10px 0 10px; border-color: #182e47 transparent transparent transparent; position: absolute; right: 15px; top: 50%; margin-top: -7px; }
.dropdown .dropdown__options { width: 100%; background: #fff; position: absolute; left: 0; top: 100%; z-index: 10; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.dropdown .dropdown__options ul { display: block; list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; text-align: left; }
.dropdown .dropdown__options a { display: block; padding: 4px 15px; font-size: 14px; color: #5e5d60; transition: color .3s ease; }
.dropdown .dropdown__options .active a { font-weight: 700; }
.dropdown.active .dropdown__options { opacity: 1; visibility: visible; }
/*  Dropdown Colors  */

/* .dropdown--red .dropdown__btn { background: #d47e63; }
.dropdown--red .dropdown__options a:hover,
.dropdown--red .dropdown__options .active a { color: #d47e63; }
.dropdown--cyan .dropdown__btn { background: #50b0b4; }
.dropdown--cyan .dropdown__options a:hover,
.dropdown--cyan .dropdown__options .active a { color: #50b0b4; }
.dropdown--orange .dropdown__btn { background: #deb864; }
.dropdown--orange .dropdown__options a:hover,
.dropdown--orange .dropdown__options .active a { color: #deb864; }
.dropdown--green .dropdown__btn { background: #96cb70; }
.dropdown--green .dropdown__options a:hover,
.dropdown--green .dropdown__options .active a { color: #96cb70; }
*/
.dropdown__options li,.legend-container li {
    margin-bottom: 0;
    padding-left: 0;
    background-image: none;
    background-position: 0% 11px;
    background-repeat: no-repeat;
}
.mapboxgl-control-container {display: none}
/* Media Age lines */
.median_line {
  stroke: rgba(109, 132, 155,.8) !important  ;
  stroke-width: 2;
  opacity: 0;
}

.chart__median_label {
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -20px;
    color:#fff;
    color: rgba('255,255,255,.7')
    /* color: rgba(109, 132, 155,1); */
}
.label_top {display: none}


.chart .chart__body .median_line.hide-line {
    opacity: 0;
}


.prb-embeds-window__embed-code.copied .prb-embeds-window__embed-code-success {
  opacity: 1;
  visibility: visible;
}

.prb-chart-wrap__graph-watermark {
  display: none;
  position: absolute;
  z-index: 100;
  bottom: 22px;
  right: 20px;
  width: 70px;
}

.prb-chart-wrap__graph-watermark a {
  display: block;
  line-height: 0;
}

.prb-chart-wrap__graph-watermark img {
  width: 100%;
}

body.prb-embed-charts .prb-chart-wrap__graph-watermark {
  display: block;
}

.prb-chart-wrap__graph-badge {
  position: absolute;
  left: 26px;
  bottom: 80px;
  z-index: 11;
  min-width: 185px;
  max-width: 250px;
}

.prb-chart-wrap__graph-badge * {
  color: #000000;
  font-family: 'Noto Sans', sans-serif;
  font-size: 10px;
  line-height: 14px;
}

.prb-chart-wrap__graph-badge-container {
  background-color: #FFFFFF;
  border: 1px solid #335887;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 15px 12px 13px;
}

.prb-chart-wrap__graph-badge-list-item {
background: none;
padding: 0 0 14px;
margin: 0;
}

.prb-chart-wrap__graph-badge-list-item:last-of-type {
  padding-bottom: 0;
}

.prb-chart-wrap__graph-badge-list-item-container {
  display: flex;
  align-items: center;
}

.prb-chart-wrap__graph-badge-list-item-color {
  display: inline-block;
  border-radius: 2px;
  width: 20px;
  height: 15px;
  margin-right: 11px;
}

.prb-chart-wrap__graph-badge-list-item-color.no-data {
  background-color: #f1f1f0;
}

.prb-chart-wrap__graph-map {
  display: flex;
  position: relative;
  min-height: 500px;
}

.prb-chart-wrap__graph-map .pbr-chart {
  flex: 1;
}

.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib-inner {
  display: none !important;
}

.prb-chart-wrap__graph-formula {
  display: none;
}

.prb-graph-formula {
  position: absolute;
  top: 155px;
  left: 185px;
  width: 190px;
}

.prb-graph-formula.position-right {
  left: auto;
  right: 22px;
}

.prb-graph-formula * {
  color: #000000;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 19px;
}

.prb-graph-formula sup {
  font-size: 9px;
}





.prb-tooltip-1 {
  background-color: rgb(109, 132, 155);
  border: 1px solid rgb(109, 132, 155);
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
  top: 0;
  color:#fff;
  text-align: center;
  padding: 5px 7px;
  font-size: 12px;
  line-height: 18px;
  pointer-events: none;
  max-width: 123px;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  -webkit-transition: opacity 300ms linear 0s;
  transition: opacity 300ms linear 0s;
}

.prb-tooltip-1.show-el {
  z-index: 100000;
  opacity: 1;
  visibility: visible;
  
}

.prb-tooltip-1.prb-tooltip-2 {
  text-align: initial;
  padding: 12px 19px 10px 16px;
  max-width: none;
}

.prb-tooltip-1.prb-tooltip-2.prb-tooltip-3 {
  font-size: 12px;
  line-height: 11px;
  padding: 8px 10px 11px;
  width: 127px;
  color:#000
}

.prb-tooltip-1__row {
  margin-top: 3px;
}

.prb-tooltip-1__row:first-of-type {
  margin-top: 0;
}

.prb-tooltip-1__row,
.prb-tooltip-1__row * {
  font-size: 12px;
  line-height: 15px;
  color:#fff
}


/* Tablet Portrait */
@media (max-width: 1023px) {
  .dropdown { min-width: 165px; }
  .dropdown .dropdown__btn { font-size: 14px; padding: 8px 46px 10px 11px; }
  .dropdown .dropdown__btn:after { border-width: 10px 7px 0 7px; right: 10px; margin-top: -5px; }
  .dropdown .dropdown__options a { font-size: 12px; }
}

.prb-chart-wrap__graph {
    position: relative;
    min-width: 100%;
    width: 100% !important
}

@media (min-width: 991px){
    .prb-chart-wrap__graph {
        position: relative;
        min-height: 704px;
        min-width: 100%;
        width: 100% !important
    }
    
}

@media (max-width: 991px){
    .prb-chart-wrap__graph {
       margin: 15px auto;
    }
  .scatter_canvas {
     
      max-width: 100%;
      height: auto !important;
  }
  .prb-chart-wrap__graph-badge {
  position: static;
}
}
@media (max-width: 850px) {
  .chart .chart__head {
      display: block;
  }
.chart .chart__head-content,
.chart .chart__head-actions {    -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;}
.chart .chart__head-actions {
    text-align: right;
    text-align: center;
    margin: 20px auto;
}


}


@media (max-width:  768px) {
 .chart .chart__legend ul li {
     display: block;
     vertical-align: middle;
     font-size: 16px;
     text-transform: uppercase;
     background: none;
     padding: 0 5px 0 0;
     margin-left: 0;
 }
 .card.mobile_card {
   overflow-x: hidden
 }
 .card.mobile_card .group {
   max-width: 100%;
 }
 .chart .chart__legend ul li ~ li {
     margin-left: 0;
 }
 
 
 .mapboxgl-canvas {
 max-width: 100%;
     max-width: 100%;
     height: auto !important;
 }
 .prb-chart-wrap__graph-map {
     min-height: 200px;
 }

}

@media (max-width:  700px)
{.chart .chart__tooltip {
  width: 95%;
  left: 0 !important;
  top: -100% !important; }
 
}