.clear {
  clear: both;
}
.graph-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}
.graph-wrapper p {
  margin: 0 0 1.0em 0;
}
.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: 'robotobold',sans-serif;
  font-size: 14px;
  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: 'robotobold',sans-serif;
  color: #000000;
  font-size: 22px;
  padding-bottom: 15px;
}
.graph-wrapper .country_details {
  padding: 5px 0 10px 0;
}
.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: 'robotobold',sans-serif;
  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: 'robotobold',sans-serif;
}

.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: 'robotoregular',sans-serif;
}
.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;
}
.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: 'robotoregular',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: 50%;
  margin: 5px auto;
  padding: 2px;
  color: #ffffff;
}
.life_expectancy_chart .guage-chart-value-label {
  background-image: linear-gradient(to right, #2182E1, #328FEB, #459DF3);
}
.total_fertility_chart .guage-chart-value-label {
  background-image: linear-gradient(to right, #3AAC8F, #3DC6A3, #46CDAA);
}
.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;
}

.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: -.8em;
  margin-left: -.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: .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);
}
/*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,.6);
}
.dropdown-wrap div select[disabled],
.slct-agegroup select[disabled] {
  color: rgba(0,0,0,.25);
}

.fltr-radio-btn {
  width: 100%;
  overflow: hidden;
}
.fltr-radio-btn label {
  width: 14%;
  float: left;
  margin: 0 1% 0 0;
}
.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: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}
.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: #122a39;
  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 {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.fltr-radio-btn [type="radio"]:checked + label:after,
.dd-data-tabs [type="radio"]:checked + label:after {
  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: 'robotoregular',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: 'robotoregular',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: 'robotoregular',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;
  width: 60%;
  text-align: center;
}
#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 10px 0 0;
  padding: 0 0 15px 0;
  font-family: 'robotoregular',sans-serif;
  display: inline;
}
#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: 'robotoregular',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: 'robotoregular',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 10px 0 0;
  padding: 0 0 15px 0;
  font-family: 'robotoregular',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: 'robotoregular',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: 'robotoregular',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;
}

/* 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 #122a39;
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #ececec;
}
.dd-chk-container:hover input ~ .checkbox-style {
  background-color: #ccc;
}
.checkbox-style:after {
  content: '';
  background-color: #122a39;
  position: absolute;
  display: none;
}
.dd-chk-container input:checked ~ .checkbox-style:after {
  display: block;
}
.dd-chk-container .checkbox-style:after {
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border: 0 none;
}
.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: 'robotobold', sans-serif;
  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;
}
.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: 'robotoregular', 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: 'robotobold', sans-serif;
  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;
}
#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;
}
.page-data-demographic-dividend .graph-wrapper .country_details .thepopover {
  display: none;
  z-index: 3;
  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: 'robotobold';
  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;
}
.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;
}
.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: 'robotobold';
  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: .71;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1000;
}
#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: 7px;
  height: 7px;
  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 .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__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: .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: .3;
  transition: opacity .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 .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;
}