/*Need font here*/

.clear {
  clear: both;
}
.graph-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}
.graph-wrapper p {
  margin: 0 0 1em 0;
  width: auto;
}
.dd-charts-wrapper {
  background: #ffffff;
  -webkit-box-shadow: 0 1px 2px 0px #ababab;
  box-shadow: 0 1px 2px 0px #ababab;
  padding: 20px;
  margin-bottom: 30px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dd-charts-wrapper {
    -webkit-box-shadow: 0 1px 2px 2px #ababab;
    box-shadow: 0 1px 2px 2px #ababab;
  }
}
/* //dd-data-tabs */
.dd-data-tabs {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 0;
}
.dd-data-tabs ul {
  list-style: outside none none;
  margin: 0 0 0 -1px;
  padding: 0;
  width: 100%;
  overflow: hidden;
}
.dd-data-tabs > ul > li {
  border-radius: 10px 10px 0 0;
  margin: 0 1px;
  overflow: hidden;
  text-align: center;
  min-width: 160px;
  background-color: #999999;
  float: left;
}
.dd-data-tabs > ul > li:hover {
  background-color: #fe5236;
  color: #fff;
}
.dd-data-tabs > ul > li > a {
  display: block;
  line-height: 18px;
  padding: 20px;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}
.dd-data-tabs > ul > li.active-tab {
  background-color: #6a6acc;
}
.dd-data-tabs > ul > li ul {
  border: 1px solid #dddddd;
  border-radius: 0;
  color: #fff;
  display: none;
  font-size: 16px;
  line-height: 26px;
  padding: 0px;
  position: absolute;
  left: 0;
  text-align: left;
  width: 100%;
  z-index: 1;
  background-color: #6a6acc;
}
.dd-data-tabs > ul > li ul li:first-child {
  padding: 10px 10px 5px 10px;
}
.dd-data-tabs > ul > li ul li.active {
  background-color: #4f4faf;
}
.dd-data-tabs > ul > li ul li {
  padding: 5px 10px;
}
.dd-data-tabs > ul > li ul li:last-child {
  background-color: #cacaca;
  padding: 0px 10px;
  text-align: center;
}
.dd-data-tabs > ul > li ul li span.close-arrow {
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: -9999px;
  cursor: pointer;
}
.dd-data-tabs > ul > li ul li span.close-arrow {
  width: 30px;
  margin: 0 auto;
  background-image: url(../images/close-arrow-data.png);
  display: block;
}
/* //dd-data-tabs end */

.graph-wrapper h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 22px;
  padding-bottom: 15px;
  margin: 1em 0 0.25em;
}

.graph-wrapper .country_details p {
  color: #000000;
}
.graph-wrapper .country_details h1 {
  font-size: 30px;
  line-height: 40px;
  color: #404040;
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin: 0 0 20px 0;
}
.mf-wrapper {
  position: absolute;
  bottom: 67px;
  width: 100%;
  font-size: 11px;
}
.mf-wrapper .gndr-m {
  float: right;
  color: #4db6c1;
  height: 25px;
  padding: 22px 0 0 0;
  background: url(../images/icon-male.png) center 0 no-repeat;
}
.mf-wrapper .gndr-f {
  float: left;
  color: #ff4a4a;
  height: 22px;
  padding: 22px 0 0 0;
  background: url(../images/icon-female.png) center 0 no-repeat;
}
.pyramid-graph .source .chart-labels {
  font-size: 11px;
  position: absolute;
  bottom: 60px;
}
.pyramid-graph .source .chart-labels.females-grp {
  left: 0;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform-origin: 11px 12px;
}
.pyramid-graph .source .chart-labels.males-grp {
  right: 0;
  transform: rotate(450deg);
  -webkit-transform: rotate(450deg);
  transform-origin: 164px 12px;
}
.bar-life-expect p {
  text-align: left;
}
.bar-life-expect p input[type="text"] {
  color: #122a39;
  font-size: 24px;
}
.bar-life-expect svg text.chart-title,
.bar-position svg text.chart-title {
  font-size: 16px;
  color: #122a39;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

.graph-wrapper .graph-row-pyramid {
  display: flex;
  margin-bottom: 20px;
  min-height: 540px;
}
.graph-row-pyramid .pyramid-graph {
  width: 62%;
  min-height: 544px;
  margin-right: 2%;
  float: left;
  position: relative;
  text-align: center;
}
.graph-row-pyramid .pyramid-graph .source {
  position: absolute;
  top: 0px;
  left: 2%;
  right: 2%;
  margin: 0 auto;
  width: 90%;
}
.graph-row-pyramid .pyramid-graph .source svg {
  margin-left: -16px;
}
.graph-row-pyramid .pyramid-graph h3 {
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
.pyramid-graph .pyramid-xaxis-text {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  font-size: 11px;
  color: #808080;
  text-align: center;
}
.pyramid-graph .chart-labels.females-grp {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  font-weight: 400;
  color: #808080;
  margin: 0;
  font-size: 14px;
}
.gauge-charts {
  width: 36%;
  float: right;
}
.bar-life-expect {
  width: 100%;
  height: 290px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.life_expectancy_chart {
  overflow: hidden;
  height: 210px;
}

.total_fertility_chart {
  overflow: hidden;
  height: 210px;
}
.bar-life-expect h3,
.bar-position h3 {
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
}
.bar-gender {
  width: 100%;
  min-height: 260px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.guage-chart-value-label {
  box-shadow: 2px 2px 6px #888888;
  display: block;
  width: 65%;
  margin: 5px auto;
  padding: 2px;
  color: #ffffff;
}
.life_expectancy_chart .guage-chart-value-label {
  background-image: linear-gradient(to right, #2182e1, #328feb, #459df3);
  font-size: 14px;
}
.total_fertility_chart .guage-chart-value-label {
  background-image: linear-gradient(to right, #3aac8f, #3dc6a3, #46cdaa);
  font-size: 14px;
}
.bar-gender .bar-position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.life_expectancy_chart svg.gauge g,
.total_fertility_chart svg.gauge g {
  transform: translate(160px, 148px);
}

.life_expectancy_chart svg.gauge g.label text,
.total_fertility_chart svg.gauge g.label text {
  fill: #808080;
  font-size: 14px;
  font-weight: 400;
}

.graph-wrapper .ui-widget.ui-widget-content {
  background: #eee;
  background: linear-gradient(to bottom, #ddd -50%, #fff 150%);
  border: 1px solid #ccc;
  border-radius: 16px;
  -moz-border-radius: 16px;
}
.graph-wrapper .ui-widget-header {
  border: 1px solid #619bcf;
  background: #6a6ccf;
  background: #ffae00;
  color: #333333;
  font-weight: bold;
}
.graph-wrapper .ui-slider .ui-slider-range {
  border: 1px solid #fff;
}
.graph-wrapper .ui-slider-horizontal .ui-slider-handle {
  top: -0.8em;
  margin-left: -0.6em;
  border-radius: 60px;
  width: 2em;
  height: 2em;
  outline: none;
  cursor: move;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 3px solid #fff;
  background: #ffffff;
  background: #ff4d29;
  font-weight: normal;
  color: #454545;
}
.source div.label {
  visibility: hidden;
}
#pp_year_slider_range {
  margin-bottom: 50px;
}
.wrapper_bar_pie {
  display: flex;
}

.healthy-bar-position {
  position: relative;
}
.healthy-bar-position p {
  width: 80%;
}
.filter_selection {
  min-height: 35px;
}
.dropdown-wrap {
  position: absolute;
  right: 0px;
  top: 0px;
}
.healthy-bar-gender .dropdown-wrap {
  top: 25px;
}
.dropdown-wrap div,
.slct-agegroup {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
}
.dropdown-wrap div select,
.slct-agegroup select {
  background: url(../images/dropdown_arow_data.png) 90% 14px no-repeat #bddeff;
  color: #4c4c4c;
  font-size: inherit;
  padding: 0.6em 1em;
  padding-right: 2.5em;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: "";
  /*Hiding the select arrow for firefox*/
  -moz-appearance: none;
  /*Hiding the select arrow for chrome*/
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50px;
  border: 2px #fff solid;
  outline: 0;
  -webkit-box-shadow: 0px 8px 20px -6px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0px 8px 20px -6px rgba(0, 0, 0, 0.18);
  box-shadow: 0px 8x 20px -6px rgba(0, 0, 0, 0.18);
  line-height: 1.2em;
}
/*Hiding the select arrow for IE10*/
.dropdown-wrap div select::-ms-expand,
.slct-agegroup select::-ms-expand {
  display: none;
}
.dropdown-wrap div::before,
.custom-dropdown::after,
.slct-agegroup::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
.dropdown-wrap div::before,
.slct-agegroup::before {
  /*  Custom dropdown arrow cover */
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
}
.dropdown-wrap div::after,
.slct-agegroup::after {
  color: rgba(0, 0, 0, 0.6);
}
.dropdown-wrap div select[disabled],
.slct-agegroup select[disabled] {
  color: rgba(0, 0, 0, 0.25);
}

.fltr-radio-btn {
  width: 100%;
  overflow: hidden;
}
.fltr-radio-btn label {
  width: 24%;
  float: left;
  margin: 0 1% 0 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.dd-data-tabs label {
  width: 100%;
}
/* Radio Button css */
.fltr-radio-btn [type="radio"]:checked,
.fltr-radio-btn [type="radio"]:not(:checked),
.dd-data-tabs [type="radio"]:checked,
.dd-data-tabs [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.fltr-radio-btn [type="radio"]:checked + label,
.fltr-radio-btn [type="radio"]:not(:checked) + label,
.dd-data-tabs [type="radio"]:checked + label,
.dd-data-tabs [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #808080;
  text-align: left;
}
.fltr-radio-btn [type="radio"]:checked + label:before,
.fltr-radio-btn [type="radio"]:not(:checked) + label:before,
.dd-data-tabs [type="radio"]:checked + label:before,
.dd-data-tabs [type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #cccccc;
  border-radius: 100%;
  background: #ffffff;
}
.fltr-radio-btn [type="radio"]:checked + label:after,
.fltr-radio-btn [type="radio"]:not(:checked) + label:after,
.dd-data-tabs [type="radio"]:checked + label:after,
.dd-data-tabs [type="radio"]:not(:checked) + label:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #f7941e;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.fltr-radio-btn [type="radio"]:not(:checked) + label:after,
.dd-data-tabs [type="radio"]:not(:checked) + label:after {
  background-color: #cccccc;
}
.fltr-radio-btn [type="radio"]:not(:checked) + label:hover::after,
.dd-data-tabs [type="radio"]:not(:checked) + label:hover:after {
  background-color: #f7941e;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* //Radio Button css end */
/* //overview rand slider */
.range-slide-wrapper {
  border-top: 1px #ccc solid;
  padding: 20px 0 60px 0;
  background: #ffffff;
  position: relative;
}
.range-slide-wrapper .range-year-wrap {
  width: 65%;
  margin: 0 auto;
  position: relative;
}
.range-slide-wrapper span.range-text {
  float: left;
  color: #000000;
}
.range-slide-wrapper .range-year-wrap::before {
  content: "1950";
  position: absolute;
  left: 9%;
  top: 0px;
  color: #808080;
}
.range-slide-wrapper .range-year-wrap::after {
  content: "2100";
  position: absolute;
  right: 6%;
  top: 0px;
  color: #808080;
}
#pp_year_slider_range {
  width: 66%;
  margin: 2px auto;
}
.range-selected-text {
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -56px;
  text-align: center;
  color: #122a39;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}
#amount {
  margin-right: -85px;
}
/* //overview rand slider end*/

#hle_bar,
#hle_bar_sixty {
  position: relative;
  width: 550px;
  height: 400px;
  margin: 0 auto;
}
#hle_pie,
#hle_pie_sixty {
  width: 30%;
  float: right;
}
#hle_title h2 span {
  color: #fe5236;
  display: inline;
}
#hle_pie h4,
#hle_pie_sixty h4 {
  font-family: "Roboto", sans-serif;
  color: #000000;
  font-size: 15px;
  padding-bottom: 15px;
  margin: 0;
  font-weight: normal;
}
#hle_pie svg,
#hle_pie_sixty svg {
  margin-top: 26px;
  margin-left: 20px;
}
#hle_table table.legend,
#hle_table_sixty table.legend {
  width: 30%;
}
#hle_table table.legend tr,
#hle_table table.legend td,
#hle_table_sixty table.legend tr,
#hle_table_sixty table.legend td {
  border-bottom: 1px #ccc solid;
  color: #808080;
}
#hle_table table.legend tr:last-child,
#hle_table table.legend tr:last-child td,
#hle_table_sixty table.legend tr:last-child,
#hle_table_sixty table.legend tr:last-child td {
  border-bottom: 0;
}
#hle_table table.legend td:nth-child(1),
#hle_table_sixty table.legend td:nth-child(1) {
  width: 4%;
  max-width: 100px;
  text-align: center;
}
#hle_table table.legend td:nth-child(2),
#hle_table_sixty table.legend td:nth-child(2) {
  width: 32%;
}
#hle_table table.legend td:nth-child(3),
#hle_table_sixty table.legend td:nth-child(3) {
  width: 32%;
  border-left: 1px #ccc solid;
  border-top: 0;
}
#hle_table table.legend td:nth-child(4),
#hle_table_sixty table.legend td:nth-child(4) {
  width: 32%;
}
#hle_bar svg .x.axis {
  height: 100px;
}

#hle_bar_sixty svg .x.axis .tick,
#hle_bar_sixty svg .bar,
#hle_bar svg .x.axis .tick,
#hle_bar svg .bar {
  font-size: 12px;
  fill: #808080;
}
.healthy-bar-gender {
  background: #ffffff;
  display: none;
}
.healthy-bar-gender h2 {
  margin: 0 10px 0 0;
  display: inline;
}
.healthy-bar-gender table.legend {
  margin: 0;
}
.investment_chart_title {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #404040;
  margin-bottom: 15px;
}

#family_plannig {
  padding: 0 0 15px 0;
  display: table;
}
#family_plannig .col-8 {
  width: 65%;
  float: left;
  padding: 0 1% 0 0;
  margin-right: 1%;
}
#family_plannig .col-4 {
  width: 32%;
  float: left;
  padding: 0 0 0 1%;
}
.switcher-btns-wrapper {
  margin-bottom: 20px;
}
.switcher-btns-wrapper .switch-btn {
  background-color: #d8d8d8;
  background-image: url(../images/button-transparent-icons.png);
  background-repeat: no-repeat;
  border: 0 none;
  border-radius: 6px;
  font-size: 14px;
  height: 46px;
  margin: 0 5px 0 0;
  padding: 0 10px 0 50px;
  outline: none;
  text-align: left;
  text-transform: uppercase;
}
.switcher-btns-wrapper .switch-btn.active {
  background-color: #9e9ef0;
}
.switcher-btns-wrapper .switch-btn.map {
  background-position: 8px 7px;
}
.switcher-btns-wrapper .switch-btn.graph {
  background-position: 8px -84px;
}
#family_plannig .col-8 .fp_map_block {
  width: 100%;
  float: left;
  margin-bottom: 50px;
}
#family_plannig .col-8 .fp_fgm_block {
  width: 100%;
  margin: 0 1%;
  display: none;
}
#family_plannig .col-4 .woid_block {
  width: 100%;
  margin: 23% 0 15% 0;
}
.chart-graph-info-block h4 {
  font-weight: normal;
  margin: 0 0 5px;
}
#empowerment-woid-chart {
  text-align: center;
  padding: 20px 0 20px 0;
  position: relative;
  margin: 0 auto 30px;
  max-width: 280px;
}
#family_plannig h3,
.fp_fgm_block h3,
.woid_block h3 {
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
}
.cmw-pie-chart {
  width: 22%;
  float: left;
  margin: 0 1%;
  position: relative;
  z-index: 2;
  text-align: center;
}
#gender-equality-block {
  display: flex;
  flex-wrap: wrap;
}
.child-mrg-block {
  width: 48%;
  margin: 0 1%;
  float: left;
  position: relative;
  display: block;
}
#child-mrg {
  position: relative;
  text-align: center;
  min-height: 350px;
}
#child-mrg svg {
  padding: 30px 0 0 100px;
}
#child-mrg .tooltip {
  padding: 12px;
  background: #ffffff;
  color: #000;
  border-radius: 8px;
  border: 1px #ccc solid;
  position: absolute;
  left: 5% !important;
  top: -20px;
  display: none;
  font-weight: normal;
  font-size: 12px;
  opacity: 1;
  width: 60%;
  text-align: center;
}
#child-mrg .tooltip .label {
  color: #000000;
  font-size: 12px;
}
#child-mrg .tooltip .count b {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
#empowerment_gender_equality_child_mrg {
  text-align: center;
}
#adolescent_birth_rate {
  width: 100%;
  margin: 0 auto;
  float: left;
}
#empowerment_gender_equality_adolscent_birth_rate {
  width: 100%;
  margin: 0;
  height: 27rem;
}
#empowerment_gender_equality_fgm_chart g.legend {
  transform: translate(0, 20px);
}
.chart_sequence_wrapper {
  width: 60%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}
#explanation_empowerment_gender_equality_child_mrg,
#explanation_empowerment_gender_equality_women_violence {
  position: absolute;
  text-align: center;
  color: #666;
  z-index: -1;
  left: -2px;
  right: 0;
  margin: 0 auto;
  top: 50%;
  font-size: 25px;
}
#gender_equality {
  display: none;
}
#gender_equality h3 {
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  display: inline;
  font-weight: 700;
}
#fgm {
  width: 48%;
  margin: 0 1%;
  float: left;
}
#empowerment_gender_equality_fgm_chart {
  text-align: center;
}
#empowerment_gender_equality_fgm_chart g.x.axis g.tick text,
#empowerment_gender_equality_fgm_chart g.y.axis g.tick text {
  fill: #808080;
}
#empowerment_gender_equality_fgm_chart g.legend {
  fill: #808080;
  font-size: 12px;
}
#women_violence {
  float: left;
  width: 48%;
  margin: 0 1%;
}
#empowerment_gender_equality_women_violence {
  text-align: center;
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}
#women_violence p {
  text-align: left;
}
.fp-fgm-chart g.legend {
  font-size: 12px;
  fill: #808080;
}
.fp-fgm-chart g.x.axis g.tick text[fill="#000"],
.fp-fgm-chart g.y.axis g.tick text[fill="#000"] {
  fill: #808080;
}
#empowerment_gender_equality_adolscent_birth_rate g.x.axis g.tick text,
#empowerment_gender_equality_adolscent_birth_rate g.y.axis g.tick text {
  fill: #808080;
}
#empowerment_gender_equality_adolscent_birth_rate g.legend {
  fill: #808080;
  font-size: 12px;
}
#empowerment_gender_equality_adolscent_birth_rate g.g {
  font-size: 12px;
}

/*---Employment chart css start here---*/
#employment_chart .employment-filter-wrapper {
  margin: 5px 0 15px;
}
#employment_chart .filter-label {
  float: left;
  line-height: 18px;
  margin: 0 15px 8px 0;
}
#employment_chart .rd-btn-agegroup {
  float: left;
  width: 90%;
}
#employment_chart .radio-btn-box {
  float: left;
  margin: 0 15px 12px 0;
  overflow: unset;
  width: auto;
}
#employment_chart .radio-btn-box label {
  margin: 0;
  width: auto;
}
#employment_chart {
  background: #ffffff;
  -webkit-box-shadow: 0 1px 2px 0px #ababab;
  box-shadow: 0 1px 2px 0px #ababab;
  padding: 20px;
  margin-bottom: 30px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #employment_chart {
    -webkit-box-shadow: 0 1px 2px 2px #ababab;
    box-shadow: 0 1px 2px 2px #ababab;
  }
}
#employment_chart h2 {
  margin: 0 0 15px 0;
}
#empowerment_gender_equality_child_mrg g.x.axis g.tick text,
#empowerment_gender_equality_child_mrg g.y.axis g.tick text {
  fill: #808080;
}
#empowerment_gender_equality_child_mrg g.legend {
  fill: #808080;
  font-size: 12px;
}
#unemployment_by_age_and_sex {
  width: 48%;
  float: left;
  margin-bottom: 50px;
}
#working_poverty {
  width: 48%;
  float: left;
  margin: 0 0 50px 2%;
}
#labour_force_participation {
  margin: 0;
}
#unemployment_and_vulnerability {
  display: none;
}
#lfp-chart-heading h3.goals-chart-heading {
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  margin: 0 5px 10px 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  display: inline;
}
#lfp-chart-heading {
  padding-bottom: 15px;
}
#education-chart {
  background: #ffffff;
  -webkit-box-shadow: 0 1px 2px 0px #ababab;
  box-shadow: 0 1px 2px 0px #ababab;
  padding: 20px;
  margin-bottom: 30px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #education-chart {
    -webkit-box-shadow: 0 1px 2px 2px #ababab;
    box-shadow: 0 1px 2px 2px #ababab;
  }
}
#education-chart h2 {
  margin: 0 0 15px 0;
}
#education-group-bar-chart text.highcharts-title {
  font-size: 20px !important;
  fill: #000000 !important;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
}
#education-group-bar-chart g.legend {
  fill: #808080;
  font-size: 12px;
}
#education-interactive-bar-chart g.x.axis g.tick text,
#education-interactive-bar-chart g.y.axis g.tick text {
  fill: #808080;
}
#education-interactive-bar-chart g.legend {
  fill: #808080;
  font-size: 12px;
}
#education_group_bar {
  width: 48%;
  margin: 0 1%;
  float: left;
  position: relative;
}
#education_interactive_group_bar {
  width: 48%;
  margin: 0 1%;
  float: right;
}
#education_interactive_group_bar:after {
  clear: both;
}
#education_literacy_group_bar h3,
#education-literacy-bar-chart text.highcharts-title {
  font-size: 20px !important;
  line-height: 26px;
  color: #000000 !important;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  display: inline;
}
#employment-neet text.highcharts-title {
  font-size: 20px !important;
  line-height: 26px;
  color: #000000 !important;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
}
.labor_force_participation g.x.axis g.tick text,
.labor_force_participation g.y.axis g.tick text {
  fill: #808080;
  font-size: 12px;
}
.labor_force_participation g text.yaxis-label.goals-chart-heading {
  fill: #808080;
  color: #808080;
  font-size: 12px;
}
.trans-goals .age-group lable {
  color: #000000;
}
#education-interactive-bar-chart {
  text-align: center;
  position: relative;
  padding: 20px 0 0 0;
}
#education_group_bar h3,
#education_interactive_group_bar h3 {
  font-size: 20px !important;
  line-height: 26px;
  color: #000000 !important;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: "Roboto", sans-serif;
  text-align: center;
  display: inline;
}
#education-interactive-bar-chart .tooltip {
  text-align: left;
}
#education-interactive-bar-chart svg.legend {
  width: 100%;
  height: 100px;
}
#education-interactive-bar-chart svg.legend g text {
  fill: #808080;
  font-size: 12px;
}
#education-interactive-bar-chart svg.pie {
  margin: 0 auto;
}
#labour_force_participation .trans-goals {
  position: relative;
}
#empowerment_gender_equality_child_mrg svg g text,
#empowerment_gender_equality_adolscent_birth_rate svg g text,
#empowerment_gender_equality_fgm_chart svg g text,
#empowerment-bar-chart svg text {
  fill: #808080;
  color: #808080;
  font-size: 12px;
}
.dd-pg-chart-container h3 + .source-info-wrapper {
  position: relative;
  top: -4px;
  left: 0;
}
.dd-pg-chart-container h2 + .source-info-wrapper {
  position: relative;
  top: -2px;
  left: 0;
}
/* code for the tooltip START */
.d3-tip {
  font-weight: normal;
  font-size: 12px;
  padding: 12px;
  background: #ffffff;
  color: #000;
  border-radius: 8px;
  border: 1px #ccc solid;
  position: absolute;
  left: 30% !important;
  top: 0;
  display: none;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
/* code for the tooltip END */

#education_literacy_group_bar {
  display: none;
  width: 100%;
}
#employment-neet {
  padding-bottom: 50px;
}
#population-trend-15-24 svg g > text.animate-data {
  font-size: 12px;
  letter-spacing: -1px;
}
.trans-goals .age-group {
  position: relative;
}
.violence_value {
  font-family: "RamaGothicM-Heavy", Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat",
    "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  fill: #1072b8;
}
#empowerment_gender_equality_adolscent_birth_rate {
  height: 20rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 0;
}
path.color_woid0,
path.color_ipv0 {
  fill: #51d0af;
}
path.color_woid1,
path.color_ipv1 {
  fill: #217bd1;
}
path.color0 {
  fill: #1072b8;
}
path.color1 {
  fill: #35526b;
}

/*---checkbox css start here---*/
.dd-chk-container {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  margin: 0 12px 12px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dd-chk-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.dd-chk-container .checkbox-style {
  border: 1px solid #cccccc;
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #f5f5f5;
}
.dd-chk-container:hover input ~ .checkbox-style {
  background-color: #ccc;
}
.dd-chk-container [type="checkbox"]:checked + .checkbox-style {
  background-color: #f7941e;
  border: 1px #f7941e solid;
  transition: 0.5s;
}
.checkbox-style:after {
  content: "";
  width: 6px;
  height: 12px;
  margin-left: 4px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: 0.1s;
  position: absolute;
  display: none;
}
.dd-chk-container input:checked ~ .checkbox-style:after {
  display: block;
}
.source-text-block {
  color: #000000;
  font-size: 10px;
  margin: 20px 0 0;
}
#empowerment-map .mappop-over {
  padding: 10px;
  background-color: #fff;
  border: 1px #ccc solid;
}

.mappop-over .country-name {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 12px;
}

#child-mrg .source-text-block {
  text-align: left;
}
#child-mrg .source-text-block {
  margin: 10px 0 30px 0;
}
#fgm .source-text-block {
  margin: -4px 0 0 0;
  text-align: left;
}

#investment_health,
#investment_education,
#investment_social_protection,
#investment_real_economy {
  position: relative;
}
#investment_health .d3tooltip,
#investment_education .d3tooltip,
#investment_social_protection .d3tooltip,
#investment_real_economy .d3tooltip {
  position: absolute;
  border: 1px #ccc solid;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  z-index: 100;
  font-size: 12px;
  color: #000;
  left: 0px !important;
  display: none;
  top: 50px !important;
}
.source-info-wrapper {
  width: 20px;
  height: 20px;
  border: 1px #686bce solid;
  border-radius: 70px;
  display: inline-block;
  margin-left: 2px;
}
.source-info-wrapper .infobx {
  width: 20px;
  height: 20px;
  border-radius: 70px;
  position: relative;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
.source-info-wrapper .infobx .info-popover {
  min-width: 200px;
  padding: 10px;
  border: 1px #686bce solid;
  position: absolute;
  left: -100px;
  bottom: 32px;
  display: none;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background: #000;
  z-index: 100;
  text-align: left;
}
.source-info-wrapper .infobx .info-popover .arowbx {
  min-width: 200px;
  position: relative;
}
.infobx .info-popover .arowbx p:last-child {
  margin: 0;
}
.infobx .info-popover .arowbx:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 20px #000;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  margin: 0 auto;
}
.source-info-wrapper .infobx:hover .info-popover {
  display: block;
}
.range-year-wrap .source-info-wrapper {
  position: absolute;
  right: -15px;
  top: 0;
}
.range-year-wrap .source-info-wrapper {
  position: absolute;
  right: -15px;
  top: 0;
}
#empowerment-map-chart .map-lbl-text {
  display: block;
  font-size: 12px;
  margin-right: 15px;
}
.labor_force_participation .xaxis-label {
  font-size: 12px;
  color: #808080;
}
#uav_block1,
#uav_block3 {
  padding: 20px 0 0 0;
  position: relative;
}
#uav_block1 .tooltip_uav_block1_chart,
#uav_block3 .tooltip_uav_block3_chart {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  position: absolute;
  left: 10% !important;
  top: -25px !important;
  z-index: 100;
  background: #ffffff;
  display: none;
  color: #000000;
}

/*---employment section tooltip css---*/
.emp-chart-tooltip {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  padding: 5px 10px;
  width: 210px;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  line-height: 16px;
}
.emp-chart-tooltip .emp-tooltip-triangle {
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  margin-top: -12px;
  margin-bottom: 2px;
  height: 8px;
  width: 100%;
}
.emp-chart-tooltip.female .emp-tooltip-triangle {
  background-image: url("../images/emp-chart-tooltip-triangle-fm.png");
}
.emp-chart-tooltip.male .emp-tooltip-triangle {
  background-image: url("../images/emp-chart-tooltip-triangle-ml.png");
}
.emp-chart-tooltip b {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 11px;
  font-weight: normal;
  line-height: 16px;
}
.emp-chart-tooltip.female {
  border: 1px solid #ff4a4a;
}
.emp-chart-tooltip.male {
  border: 1px solid #4cb6c1;
}
.no-data-available {
  width: 100%;
  min-height: 215px;
  margin: 0 0 20px;
  display: block;
  background: url("../images/no-data-available.gif") no-repeat center center;
  background-size: contain;
  position: relative;
}
.tooltip-adolescent-birth-rate,
.tooltip-educational-attainment,
.woid-tooltip,
.ipv-tooltip {
  padding: 12px;
  background: #ffffff;
  color: #000;
  border-radius: 8px;
  border: 1px #ccc solid;
  position: absolute;
  left: 1% !important;
  top: 0;
  display: none;
  font-weight: normal;
  font-size: 12px;
}
.tooltip-adolescent-birth-rate .label,
.tooltip-educational-attainment .label,
.woid-tooltip .label,
.ipv-tooltip .label {
  color: #000;
  font-size: 12px;
}
#education-interactive-bar-chart .tooltip-educational-attainment {
  top: -32px !important;
  left: 5% !important;
  right: 5% !important;
  width: 90%;
  padding: 12px !important;
}
.woid-tooltip,
.ipv-tooltip {
  top: -110px !important;
  left: 5% !important;
  right: 5% !important;
  width: 85%;
  padding: 12px !important;
}
.ipv-tooltip {
  width: 75%;
  top: -52px !important;
}
.no-data-available .source-info-wrapper {
  position: absolute;
  left: 59%;
  bottom: 85%;
  z-index: 100;
}

/* country list css start here */
.page-data-demographic-dividend .graph-wrapper .country_details h1 {
  margin-bottom: 25px;
}
.page-data-demographic-dividend .graph-wrapper .country_details .country-region-box {
  margin: 25px 0;
}
.page-data-demographic-dividend .graph-wrapper .country_details .country-region-box .popover a,
.page-data-demographic-dividend .graph-wrapper .country_details .country-region-box .popover span.info {
  display: block;
}
.page-data-demographic-dividend .graph-wrapper .country_details .country-region-box .popover .info {
  float: none;
  color: #7b686d;
  font-size: 10px;
  line-height: 2em;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover {
  display: none;
  z-index: 2000;
  position: absolute;
  border-radius: 3px;
  top: 92px;
  background: #ffffff;
  -moz-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.15);
  padding: 20px 5% 5px 5%;
  width: 90%;
}
.page-data-demographic-dividend .graph-wrapper .country_details .close-thepopover {
  width: 15px;
  height: 15px;
  border: 1px #d8d8d8 solid;
  border-radius: 80%;
  position: absolute;
  right: 12px;
  top: 12px;
  color: #c5c5c5;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover .pinguelo {
  position: absolute;
  left: 5px;
  top: -13px;
  width: 32px;
  height: 18px;
  background: url(../images/pinguelopopover.png) no-repeat center center;
  display: block;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #316789;
  line-height: 18px;
  margin-top: 0;
  margin-bottom: 1em;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover h3 a {
  color: #df8312;
  pointer-events: none;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
  float: left;
  width: 100%;
  list-style: none;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  margin: 0 1.5em 1.5em 0;
  padding-left: 1.5em;
  line-height: 1.2em;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover li {
  width: 225px;
  display: inline-block;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover li a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #0091ca;
  line-height: 16px;
}
/* country list css end here */

/* // menu right side of demographic devidend */
#menu-country-open {
  position: fixed;
  right: -10px;
  top: 225px;
  cursor: pointer;
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  opacity: 0.71;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1000;
  font-size: 14px;
}
#menu-country-open .open-menu__icon {
  width: 14px;
  height: 1px;
  background: #fff;
  margin-right: 20px;
  position: relative;
}
#menu-country-open .open-menu__icon:after,
#menu-country-open .open-menu__icon:before {
  position: absolute;
  content: "";
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid;
  border-radius: 50%;
}
#menu-country-open .open-menu__icon:after,
#menu-country-open .open-menu__icon:before {
  position: absolute;
  content: "";
  top: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid;
  border-radius: 50%;
}
#menu-country-open .open-menu__icon:after {
  right: -8px;
}
#menu-country-open .open-menu__icon:before {
  background: #fff;
  left: -9px;
}
#menu-country-open .menu__nav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 100px 20%;
}
#country-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 33%;
  max-width: 575px;
  background: #ff4a4a;
  color: #fff;
  z-index: 1000;
  transition: transform 0.5s ease;
  transform: translateX(575px);
}
#country-menu.open {
  transform: translateX(0);
}
#country-menu .menu__close {
  text-transform: uppercase;
  position: absolute;
  top: 40px;
  right: 0;
  cursor: pointer;
  transform: rotate(90deg);
  transform-origin: bottom;
  padding-left: 30px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 100;
  color: #fff;
}
#country-menu .menu__close:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 25px;
  background: #fff;
  top: 3px;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: top;
}
#country-menu .menu__close:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 25px;
  background: #fff;
  top: 3px;
  left: 17px;
  transform: rotate(45deg);
  transform-origin: top;
}
#country-menu .menu__nav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 100px 20%;
}
#country-menu .menu__list {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-height: 650px;
}
#country-menu .menu__item {
  position: relative;
  padding: 5px 0;
}
#country-menu .menu__list:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: 6px;
  width: 1px;
  bottom: 15px;
  top: 15px;
  background: #fff;
  opacity: 0.3;
}
#country-menu .menu__link {
  display: block;
  padding-left: 40px;
  font-family: EB Garamond, serif;
  font-size: 25px;
  line-height: 1.2;
  color: #fff;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s ease-out;
}
#country-menu .menu__item.active .menu__link,
#country-menu .menu__item:hover .menu__link {
  opacity: 1;
}
#country-menu .menu__item:after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  background: #ff8585;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background 0.3s ease-out;
}
/* // menu right side of demographic devidend end */
#working_poverty .decent_work_text,
#unemployment_by_age_and_sex .decent_work_text {
  text-align: center;
}
.uav_block1_chart g.tick text,
.uav_block3_chart g.tick text {
  fill: #808080;
}
#empowerment_gender_equality_adolscent_birth_rate svg:not(:root) {
  overflow: auto;
}
.dd-checkbox-wrapper {
  padding: 15px 0;
}
#empowerment-bar-chart,
#empowerment-residence-bar-chart,
#empowerment-quential-bar-chart {
  position: relative;
  height: 650px;
}
#empowerment-bar-chart .tooltip-wealth-residence,
#empowerment-residence-bar-chart .tooltip-wealth-residence,
#empowerment-quential-bar-chart .tooltip-wealth-residence {
  padding: 12px;
  background: #ffffff;
  color: #000;
  border-radius: 8px;
  border: 1px #ccc solid;
  position: absolute;
  left: 15% !important;
  right: 15% !important;
  top: 0;
  display: none;
  font-weight: normal;
  font-size: 12px;
  z-index: 10;
  text-align: center;
}
.life_expectancy_chart svg,
.total_fertility_chart svg {
  margin-left: 15px;
}
.range-selected-text span.notes {
  display: block;
  font-size: 12px;
  color: #808080;
}

/*----*/
html body {
  background: #fff;
}
.page-data-demographic-dividend {
  font-size: 14px;
}
.page-data-demographic-dividend * {
  box-sizing: initial;
}
.page-data-demographic-dividend.max-wrapper {
  box-sizing: content-box;
  max-width: 980px;
  margin: auto;
  padding: 25px 25px 0;
}
.page-data-demographic-dividend .graph-wrapper .country-region-box {
  margin: 25px 0;
}
.page-data-demographic-dividend .graph-wrapper .popover {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 100%;
  border: none;
  box-shadow: none;
  z-index: 9;
}
.page-data-demographic-dividend .graph-wrapper .btn.pencil {
  background: url("../images/pencil.png") left 4px no-repeat;
  padding: 0;
  padding-left: 20px;
  text-align: left;
}
.page-data-demographic-dividend .graph-wrapper .popover .btn {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0090c9;
  line-height: 16px;
  text-transform: none;
}
.page-data-demographic-dividend .dd-charts-wrapper h3 {
  text-align: left;
}
#country-menu {
  z-index: 2000;
}

@media only screen and (max-width: 900px) {
  .page-data-demographic-dividend .fltr-radio-btn label {
    width: 25%;
  }
}

@media only screen and (max-width: 767px) {
  .page-data-demographic-dividend .dd-data-tabs > ul > li {
    border-radius: 0;
    width: 100%;
    min-width: 160px;
    float: none;
    border-bottom: 1px #ffffff solid;
  }
  .page-data-demographic-dividend .dd-data-tabs > ul > li > a {
    padding: 15px 20px;
    text-align: left;
  }
  .page-data-demographic-dividend .graph-wrapper .graph-row-pyramid {
    flex-wrap: wrap;
  }
  .page-data-demographic-dividend .graph-row-pyramid .pyramid-graph {
    width: 100%;
    float: none;
    margin: 0;
  }
  .page-data-demographic-dividend .gauge-charts {
    width: 100%;
    float: none;
    margin-top: 25px;
  }
  .page-data-demographic-dividend .range-slide-wrapper span.range-text {
    float: none;
    color: #000000;
    text-align: left;
    display: block;
    margin-bottom: 10px;
  }
  .page-data-demographic-dividend .range-slide-wrapper .range-year-wrap {
    width: 98%;
  }
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover {
    width: 99%;
  }
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .page-data-demographic-dividend .dd-charts-wrapper {
    padding: 10px;
  }
  #menu-country-open {
    right: 0;
    top: 19px;
    transform: rotate(0deg);
    opacity: 0.71;
    z-index: 2000;
    position: relative;
    width: 100px;
    float: right;
  }
  #country-menu {
    width: 100%;
  }
  #country-menu .menu__nav {
    padding: 100px 10%;
  }
  #country-menu .menu__link {
    font-size: 22px;
  }
  .page-data-demographic-dividend .range-slide-wrapper .range-year-wrap::after {
    font-size: 11px;
    right: 0%;
  }
  .page-data-demographic-dividend .range-slide-wrapper .range-year-wrap::before {
    left: 0%;
    font-size: 11px;
  }
  .page-data-demographic-dividend .range-year-wrap .source-info-wrapper {
    position: absolute;
    right: -6px;
    top: -30px;
  }
  .pyramid-graph .source svg g.rule1 text {
    -ms-transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    -webkit-transform-origin: 0% 97%;
    transform-origin: 0% 97%;
    -ms-transform-origin: 0% 97%;
    font-size: 10px;
  }
  .pyramid-graph .source svg g.rule2 text {
    -ms-transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    -webkit-transform-origin: 0% 97%;
    transform-origin: 0% 97%;
    -ms-transform-origin: 0% 97%;
    font-size: 10px;
  }
  .graph-row-pyramid .pyramid-graph .source svg {
    margin-left: 0;
  }
}

@media (max-width: 767px) and (min-width: 640px) {
  .page-data-demographic-dividend .bar-life-expect {
    width: 46%;
    height: 290px;
    float: left;
    margin: 0 2%;
  }
  .page-data-demographic-dividend .bar-life-expect {
    width: 46%;
    height: 290px;
    float: left;
    margin: 0 2%;
  }
  .page-data-demographic-dividend .bar-gender {
    width: 46%;
    min-height: 260px;
    float: left;
    margin: 0 2%;
  }
  .page-data-demographic-dividend .gauge-charts .bar-gender {
    margin-top: 0;
  }
  .page-data-demographic-dividend .guage-chart-value-label {
    width: 53%;
  }
}

@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 414px) and (device-width: 736px) {
  .page-data-demographic-dividend .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .page-data-demographic-dividend .range-selected-text {
    position: relative;
    bottom: -10px;
  }
  .page-data-demographic-dividend .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .page-data-demographic-dividend .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}

@media only screen and (max-width: 480px) {
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover {
    width: 96%;
  }
  .page-data-demographic-dividend .graph-wrapper .country_details .thepopover ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .page-data-demographic-dividend .stickOnmobile {
    background: none repeat scroll 0 0 orange;
    height: 145px;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-top: 1px #ccc solid;
  }
  .page-data-demographic-dividend .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
  }
  .page-data-demographic-dividend .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 50px 10px;
  }
  .page-data-demographic-dividend .healthy-bar-position .dropdown-wrap {
    position: relative;
    top: auto;
  }
  .page-data-demographic-dividend .wrapper_bar_pie {
    padding-top: 50px;
  }
  .page-data-demographic-dividend .range-selected-text {
    width: 90%;
    bottom: -65px;
  }
}

@media only screen and (-webkit-device-pixel-ratio: 2) and (device-height: 375px) and (device-width: 667px) {
  .stickOnmobile {
    height: 130px;
  }
  .stickOnmobile.active {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    width: 100%;
    background: #fff;
  }
  .stickOnmobile .range-slide-wrapper {
    padding: 20px 10px 25px 10px;
  }
}

.chart-graph-info-block {
  display: block;
}
.chart-graph-info-block p {
  display: inline;
}
.dash-sec-content .bar-position h3 {
  text-align: left;
}

.page-data-demographic-dividend .breadcrumb {
  padding: 20px 0 20px 0;
  background: url(/modules/custom/unfpa_global_dashboard/images/bg_bread.png) left bottom repeat-x;
}

@media (max-width: 1100px) {
  .path-data .page-data-demographic-dividend.max-wrapper {
    padding: 25px 10px 0;
  }
  .path-data #menu-country-open {
    top: 145px;
    z-index: 10;
  }
}
@media (max-width: 800px) {
  .path-data #menu-country-open {
    top: 60px;
  }
  .path-data .block-unfpa-global-demographic-dividend .dropdown-wrap {
    position: relative;
    text-align: left;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .page-data-demographic-dividend .breadcrumb {
    display: none;
  }
  .page-data-demographic-dividend .graph-wrapper .country_details h1 {
    padding-right: 110px;
  }
}
@media (max-width: 700px) {
  .path-data #menu-country-open {
    top: 30px;
  }
  .path-data .overview-charts .stickOnmobile {
    padding-bottom: 20px;
  }
  #investment_health .source-info-wrapper .infobx .info-popover {
    left: -15px;
  }
  #investment_health .source-info-wrapper .infobx .info-popover .arowbx:after {
    margin: 0;
    left: -5px;
  }
  #investment_real_economy .source-info-wrapper .infobx .info-popover {
    right: -20px;
    left: auto;
  }
  #investment_real_economy .source-info-wrapper .infobx .info-popover .arowbx:after {
    margin: 0;
    left: auto;
    right: 0;
  }
  #women_violence .source-info-wrapper .infobx .info-popover {
    left: -10px !important;
  }
  #women_violence .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: -10px !important;
    right: auto !important;
  }
  #education_group_bar .source-info-wrapper .infobx .info-popover {
    left: -90px !important;
  }
  #education_group_bar .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: 69px !important;
    right: auto !important;
  }
}
@media (max-width: 480px) {
  .page-data-demographic-dividend .graph-wrapper .country_details h1 {
    padding-right: 0;
    margin-top: 40px;
  }
  #wrapper-empowerment-map .source-info-wrapper .infobx .info-popover {
    width: 100px;
    min-width: 1px;
    left: -40px;
  }
  #wrapper-empowerment-map .source-info-wrapper .infobx .info-popover .arowbx {
    width: 90px;
    min-width: 1px;
  }
  #wrapper-empowerment-map .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: 22%;
  }

  #vulnerably_employed_people_by_sex div .source-info-wrapper .infobx .info-popover {
    width: 100px;
    min-width: 1px;
    left: -40px;
  }
  #vulnerably_employed_people_by_sex div .source-info-wrapper .infobx .info-popover .arowbx {
    width: 90px;
    min-width: 1px;
  }
  #vulnerably_employed_people_by_sex div .source-info-wrapper .infobx .info-popover .arowbx:after {
    left: 22%;
  }
}
@media (max-width: 400px) {
  .path-data .block-unfpa-global-demographic-dividend .dropdown-wrap {
    position: absolute;
  }
  .path-data #menu-country-open {
    top: 35px;
  }
}

.country-region-box .popover a.btn::after,
.country-region-box .popover a.btn:hover::after {
  height: 0;
}