@font-face { font-family: cove; src: url('coves_light.otf'); } 
@font-face { font-family: cove-bold; src: url('coves_bold.otf'); } 
@font-face { font-family: moon; src: url('moon.otf'); } 
.content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: wrap-reverse;
  padding-top: 20px;
}
.globe {
  margin: 0 auto;
  display: block;
  width: 770px;
  height: 770px;
  fill: #0D5163;
  filter: url("#yellow-glow");
  /* padding-right: 50px; */
}
.water {
    /* background: radial-gradient(circle at 100px 100px, #5cabff, #000);; */
  }

  .land {
    /* fill: #A98B6F; */
    stroke: #FFF;
    stroke-width: 0.7px;
  }

  .land:hover {
    fill: lightsalmon;
    stroke-width: 1px;
  }

  .focused {
    fill: lightsalmon !important;
  }

  select {
    /* position: absolute;
    top: 20px;
    left: 580px; */
    border: solid #ccc 1px;
    padding: 3px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    height: 40px;
    margin-left: 30px;
    font-size: 14px;

  }

  .countryTooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: #fff;
    padding: 5px;
    text-align: left;
    border: solid #ccc 1px;
    font-size: 14px;
    font-family: sans-serif;
  }

  header {
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    margin: 0 auto;
    font-family: cove-bold, sans-serif;
  }

  .title {
    font-size: 60px;
    color: #062C35;
    margin: 0;
  }
  .title-cont {
    padding-left: 5px;
    display: block;
  }
  .personal-links {
    width: 180px;
    display: flex;
    justify-content: space-between;
    font-size: 35px;
    padding-right: 25px;
    color: #062C35;
  }

  .link {
    color: #062C35;
  }

  body {
    /* background: url("https://jasperumc.org/wp-content/uploads/2018/10/wallpaper-cream-white-pattern-background-light-line-texture-x-rhwallherecom-ivory-off-paper-picture-free-1.jpg"); */
    background-size: cover;
    background-color: white;
    
  }

  .select-text {
    font-size: 32px;
    font-family: cove, sans-serif;
    display: flex;
    align-items: center;
    color: #062C35;
    margin: 0px;
    padding-bottom: 20px;
    padding-left: 20px;
    
  }

  .select-cont {
    /* padding-left: 100px; */
  }

  .show-content-cont {
    width: 550px;
    height: 650px;
    background-color: white;
    padding: 0px 25px;
    box-shadow: 3px 3px 1px #E3C0A9, 5px 5px 10px 5px #E3C0A9;
    margin-right: 20px;
    
  }

  .intro {
    font-size: 22px;
    text-align: justify;
    font-family: cove, sans-serif;
    margin: 10px 0px;
  }



  .show-content-cont h1 {
    width: 100%;
    font-size: 45px;
    font-family: cove-bold, sans-serif;
    color: #062C35;
    margin: 0px;
    padding-top: 10px;

  }

.show-content-p {
  font-size: 18px; 
  font-family: cove, sans-serif;
  color: #062C35;
}

.show-content-total {
  font-size: 22px;
  color: #062C35;
  /* padding-left: 20px; */
}
.percent {
  font-family: Verdana, sans-serif;
  font-size: 16px;
}

.no-data {
  font-size: 40px;
  font-family: cove, sans-serif;
  color: #062C35;
  text-align: center;
  margin-top: 50px;

}

.chart {
  padding: 10px 50px;
}

.bar {
  fill: #D6D2BA;
}
.bar:hover {
  fill: lightsalmon;
}

.axis text {
  font: 10px sans-serif;
  color: #062C35;
}

.axis path,
.axis line {
  fill: none;
  color: #062C35;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.highlight {
  background: linear-gradient(180deg,rgba(227,192,169,0) 60%, #FFD0AE 50%);
  font-family: cove-bold, sans-serif;
  color: #062C35;
}