body {
  --max-width: 75vw;
  display: flex;
  background-color: #f8f5f3;
  align-items: center;
  flex-direction: column;
  /* font-family: 'Inter', sans-serif; */
  width: 100vw;
  /* height: 500vh; */
}

.section_01_viz_dumbbell {
  background-color: #f8f5f3;
  width: 80%;
  height: 82em;
  /* margin: auto; */
  margin-top: -2vh;
  text-align: center;
  /* margin-bottom: vh; */
  /* height: auto; */
  /* border: 1px solid #73AD21; */
}

.tooltipDumb {
  position: absolute;
  text-align: center;
  padding: 0.8rem;
  background: #ffffff;
  color: #313639;
  border: 1px solid #313639;
  border-radius: 3px;
  pointer-events: none;
  font-size: 1rem;
  height: 35px;
  /* display: block; */
  /* visibility: visible; */
}

/* CSS Start - Dumbbell Chart */
line.between {
  stroke: #a3c4dc;
  stroke-width: 6;
}

.axis text {
  font: 12px sans-serif;
}

g.axis path {
  display: none;
}

g.axis line {
  stroke-width: 3;
  stroke-dasharray: 1 0;
}

text.higher {
  font: 11px sans-serif;
}

text.moneyText {
  font: 12px sans-serif;
}

text.legendE {
  font: 13px sans-serif;
}

text.legendS {
  font: 13px sans-serif;
}

stop.begin {
  stop-color: #ffc700;
}

stop.end {
  stop-color: #ff4397;
}

.tooltipDumb {
  position: absolute;
  text-align: center;
  padding: 0.8rem;
  background: #ffffff;
  color: #313639;
  border: 1px solid #313639;
  border-radius: 5px;
  pointer-events: none;
  font-size: 1rem;
  height: 35px;
}

/* CSS End - Dumbbell Chart */
.section_03_viz_barChart {
  background-color: #f8f5f3;
  width: 80%;
  /* height: 47em; */
  /* margin-top: -140px; */
  /* margin-left: 230px; */
  text-align: center;
  /* height: auto; */
  /* border: 1px solid #73AD21; */
}

/* button CSS */
button {
  margin: 30 -25px auto;
  width: 150px;
  height: 40px;
  text-align: center;
  margin-left: 0.8em;
  font-size: 22px;
  /* margin: 0 10px 10px; */
  background-color: rgb(253, 249, 239);
  border-radius: 10px;
}

button:focus {
  background: rgb(252, 205, 117);
  outline: none;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
  -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
  box-shadow: inset 0px 0px 5px #c1c1c1;
}

#container {
  background-color: #f8f5f3;
  overflow: hidden;
  /* width: 2000px; */
  width: 80%;
  margin: auto;
  height: 1150px;

  /* text-align: center; */
}

.MapContainer {
  /* float: left;
            background-color: #F6F1EC;
            width: 1600px;
            height: 1000px; */
  background-color: #f8f5f3;
  overflow: hidden;
  width: 2000px;
  margin: auto;
  transform: scale(0.95);
}

.Icons {
  float: left;
  background-color: #f8f5f3;
  width: 170px;
  height: 800px;
}

text.bottomText {
  font: 12px sans-serif;
}

text.topText {
  font: 12px sans-serif;
}

.map {
  float: left;
  background-color: #f8f5f3;
  width: 1600px;
  height: 800px;
}

.barContainer {
  float: left;
  background-color: #f8f5f3;
  width: 1450px;
  height: 700px;
}

.bar {
  position: relative;
  float: left;
  background: transparent;
  /* width: 1450px;
            height: 700px; */
  left: 420px;
  top: -100px;
}

#Top {
  display: block;
}

#Bottom {
  display: none;
}

#life1980 {
  display: none;
}

#life1985 {
  display: none;
}

#life1990 {
  display: none;
}

#life1995 {
  display: none;
}

#life2000 {
  display: none;
}

#life2005 {
  display: none;
}

#life2010 {
  display: none;
}

#life2014 {
  display: none;
}

#changeMap {
  display: block;
}

.tooltipMap {
  position: absolute;
  text-align: center;
  padding: 0.8rem;
  background: #ffffff;
  color: #313639;
  border: 1px solid #313639;
  border-radius: 5px;
  pointer-events: none;
  font-size: 1rem;
}

.tooltipBar {
  position: absolute;
  text-align: center;
  padding: 0.8rem;
  /* background: #FFFFFF; */
  color: #313639;
  /* border: 1px solid #313639; */
  border-radius: 5px;
  pointer-events: none;
  font-size: 0.6rem;
  left: 960px;
  top: -340px;
}

.mapButton {
  float: left;
  background-color: #f8f5f3;
  width: 120px;
  position: relative;
  left: 160px;
  top: 180px;
}

.barChosen {
  position: relative;
  left: 60px;
  top: -440px;
  font-size: 20px;
  width: 260px;
}

/* bar */
.Icons2 {
  width: 500px;
  height: 200px;
  margin-top: -5vh;
}

.anybutton {
  position: relative;
  top: 150px;
  left: -100px;
  height: 30px;
  /* position: absolute; */
  z-index: 2;
  font-size: 15px;
  /* background: orange; */
}

.Barchat_button {
  /* position: relative;
    top: 215px;
    left: -445px; */
  /* text-align: left; */
  /* position: absolute; */
  display: flex;
  font-size: 18px;
  padding-left: 17.8vw;
  padding-top: 20vh;
  margin-bottom: -20vh;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.drug_title {
  top: 5.8%;
  left: 5%;
  /* position: absolute; */
  font-size: 40px;
  color: #1c3882;
}

#barjs {
  /* display: flex; */
  justify-content: space-between;
}

/* .tooltip_barjs {
    text-align: center;
    padding: .8rem;
    background: #6d8ebb44;
    font-family: Verdana;
    border: 1px solid #313639;
    border-radius: 5px; */

/* padding: 10px; */
/* position: fixed;
    pointer-events: none;
    font-size: 0.5rem; */
/* left: 10vw;
    top: 10vh;
} */

/* text */

.section_01 {
  display: flex;
  width: 75vw;
  height: 40vh;
  margin-top: 3vh;
  /* margin-bottom: 6vh; */
  margin-left: 10vw;
  margin-right: 10vw;
}

.title_div {
  display: flex;
  flex-direction: column;
  /* position: absolute; */
  color: #3b4257;
  font: 5em Impact, sans-serif;
  font-weight: bold;
  text-align: left;
  /* margin-top: -37.8vh; */
  padding-left: 4vw;
  width: 37.5vw;
  text-shadow: -3px 3px 5px #e0ebf5;
}

.titleshade_div {
  display: flex;
  flex-direction: column;
  position: absolute;
  font: 5em Impact, sans-serif;
  font-weight: bold;
  text-align: left;
  padding-left: 3.8vw;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0.1vw black;
}

.title_design {
  display: flex;
  flex-direction: column;
  color: black;
  font: 1.5em Poppins, sans-serif;
  font-weight: 500;
  text-align: left;
  margin-top: -5vh;
  padding-left: 4vw;
  /* padding-top: 16.8vw; */
  text-shadow: -3px 3px 5px #e0ebf5;
}

.datasource {
  display: flex;
  flex-direction: column;
  /* background-color: #F6F1EC; */
  /* width: 30vw; */
  /* padding-left: 25vw; */
  padding-top: 15vh;
  font: 1.3em Poppins, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #484a4f;
  line-height: 190%;
}

.section_02 {
  /* height: 29em; */
  display: flex;
  width: 75vw;
  margin-top: 3vh;
  /* margin-bottom: 3vh; */
  /* padding-bottom: -19vh; */
  margin-left: 10vw;
  margin-right: 10vw;
}

.section_04 {
  /* height: 29em; */
  display: flex;
  width: 75vw;
  margin-top: 3vh;
  /* margin-bottom: 3vh; */
  /* padding-bottom: -19vh; */
  margin-left: 10vw;
  margin-right: 10vw;
  margin-bottom: 5vh;
}

.mainstory {
  display: flex;
  flex-direction: column;
  /* background-color: #F6F1EC; */
  width: 75vw;
  padding-left: 4vw;
  padding-top: 0vh;
  font: 1.3em Poppins, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #484a4f;
  line-height: 190%;
}

.section_03 {
  /* height: 25.5em; */
  display: flex;
  width: 75vw;
  margin-top: 3vh;
  /* margin-bottom: 3vh; */
  margin-left: 10vw;
  margin-right: 10vw;
}

.chartTitle {
  /* height: 25.5em; */
  /* display: flex; */
  width: 75vw;
  text-align: center;
  font: 2.1em Poppins, sans-serif;
  font-weight: 900;
  margin-top: 12vh;
  color: #7c87c0;
  /* margin: auto; */
  /* margin-bottom: 3vh; */
  /* margin-left: 20vw;
    margin-right: 20vw; */
}

.chartLine {
  display: flex;
  width: 35vw;
  margin-top: 1vh;
  /* margin-bottom: 3vh; */
  margin-left: 20vw;
  margin-right: 20vw;
}

.chartDetail {
  display: flex;
  flex-direction: column;
  /* background-color: #F6F1EC; */
  width: 40vw;
  margin-top: -0.5vh;
}

.chartDetail_1 {
  display: flex;
  flex-direction: column;
  width: 40vw;
  margin-right: -8vw;
}

.chartDetail_2 {
  display: flex;
  flex-direction: column;
  width: 40vw;
  margin-left: -8vw;
}

.chartDetail_3 {
  display: flex;
  flex-direction: column;
  width: 40vw;
  margin-right: -5vw;
}

.chartDetail_4 {
  display: flex;
  flex-direction: column;
  width: 40vw;
  margin-left: -5vw;
}

.script_div {
  color: #484a4f;
  font: 1.1em Poppins, sans-serif;
  width: 60vw;
  text-align: justify;
  line-height: 200%;
}

.svg_background {
  background-color: #f6f1ec;
  width: 80%;
  margin: auto;
}

.section_top {
  background-color: #f6f1ec;
  width: 80%;
  margin: auto;
  text-align: center;
  height: 85em;
  /* border: 1px solid rgb(67, 46, 229); */
}

.section_map {
  background-color: #f6f1ec;
  width: 80%;
  margin: auto;
  text-align: center;
  height: 94em;
  /* border: 1px solid rgb(67, 46, 229); */
}

.subtitle_div {
  position: absolute;
  color: #7c87c0;
  font: 3em Impact, sans-serif;
  font-weight: bold;
}

.line-1 {
  position: absolute;
  left: 19vw;
  border-top: 3px solid #848cbc;
  width: 37vw;
}

.subtitle2nd_div {
  color: #484a4f;
  font: 1.4em Poppins, sans-serif;
  width: 60vw;
  text-align: justify;
  line-height: 200%;
}

/* Chart 3 */
.anybutton {
  position: relative;
  top: 150px;
  left: -100px;
  height: 30px;
  /* position: absolute; */
  z-index: 2;
  font-size: 15px;
  /* background: orange; */
}

.button1 {
  top: -70px;
  left: 650px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button1:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button2 {
  top: -70px;
  left: 870px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button3 {
  top: -70px;
  left: 1080px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button3:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button4 {
  top: 5px;
  left: 650px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button4:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button5 {
  top: 5px;
  left: 870px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button5:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button6 {
  top: 5px;
  left: 1080px;
  width: 150px;
  height: 50px;
  background: #fcf9f0;
  position: absolute;
  border: none;
  color: black;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.button6:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button_text {
  position: absolute;
  top: 7195px;
  left: 560px;
  text-align: left;
  /* text-anchor:start; */
  /* position: absolute; */
  font-size: 20px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.drug_title {
  top: 5.8%;
  left: 5%;
  /* position: absolute; */
  font-size: 40px;
  color: #1c3882;
}

#barjs {
  /* display: flex; */
  justify-content: space-between;
}

.tooltip {
  background-color: #f7f7f7;
  font-size: 0.8rem;
  font-family: Verdana;
  text-align: center;
  border-radius: 5px;
  /* border: 1px solid #313639; */
  /* padding: 10px; */
  /* position: fixed;
    left: 10vw;
    top: 10vh; */
  padding: 10px;
  position: fixed;
}

.backButton {
  margin: 30 -25px auto;
  width: 200px;
  height: 70px;
  text-align: center;
  margin-left: 0.8em;
  font-size: 22px;
  /* margin: 0 10px 10px; */
  background-color: rgb(253, 249, 239);
  border-radius: 10px;
  margin-left: 60vw;
  margin-top: 3vh;
}