.title {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;

  left: 50%;
  top: 13.5vh;
  transform: translate(-50%, -50%);
  font-family: "Outfit";
  font-style: normal;
  font-weight: 900;
  font-size: 2.521vw;

  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;

  align-items: center;
  justify-content: center;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* fonts */

@font-face {
  font-family: Outfit;
  src: url(../data/Outfit-VariableFont_wght.ttf);
}

/* rest of the page */

.rectangle {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1360px !important;
  height: 340px;

  overflow: auto;
  font-size: 1.5rem;

  letter-spacing: 0.04em;
  font-style: normal;

  color: 11eE1E;
  display: flex;
  border: 1px solid #000000;
  border-radius: 60px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;

}

.box-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-size: 1.199vw;
  line-height: 22px;
  text-transform: uppercase;
  height: 22px;
  margin-top: 15px;
}

.middle-box-text {
  /* esplications-dans-bulles */
  position: absolute !important;
  font-family: "Outfit" !important;
  font-weight: 200 !important;

  line-height: 120% !important;
  width: 991px !important;
  text-align: center !important;
  letter-spacing: -0.03em !important;
  color: #1e1e1e !important;
  align-items: center !important;
  font-style: normal !important;
  font-weight: 200 !important;
  overflow: hidden !important;

}

#last-message-box {
  position: absolute;
  bottom: 4.8vh;
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-size: 2.083vw;
  line-height: 120%;
  /* identical to box height, or 36px */

  text-align: center;

  /* color: #aaaaaa; */
  color: #AAAAAA;
}

/* to show box when hovering on top of bar chart */
#tooltip {
  position: absolute;
  top: 196.8vh;
  background-color: rgba(251, 251, 251, 0.811);
  border: 1px solid rgb(0, 0, 0);
  padding: 10px;
  border-radius: 25px;
  visibility: hidden;
}

#container {
  margin: 0 auto;
  margin-top: 400px;
  width: 1014px;
  height: 140.96px;
}



.icu-rectangles {
  display: none;
  z-index: 1;
  position: absolute;

  transform: translate(-50%, -50%);
  border-radius: 10.66px;
  width: 344px;
  height: 41px;

  opacity: 0.9;
  justify-content: center;
  text-align: center;
  align-items: center;
  left: 50%;
  margin-top: -50px;
}

.mapbox-title-box-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 35.02px;
  line-height: 44px;
  /* identical to box height */

  text-align: center;
  text-transform: capitalize;
  color: #FFFFFF;
}

.icu-title-box-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 44px;
  /* identical to box height */

  text-align: center;

  color: black;
}

.graph-section-title {
  margin-top: 240px;
  font-style: italic;
  font-weight: 200;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Source Sans Pro";
  font-size: 35.02px;
}

#container {
  margin-top: 410px
}

#rectangle0 {
  margin-top: 220px;
}

#rectangle2 {
  margin-top: 272px
}

#rectangle4 {
  height: 500px;
  margin-top: 300px
}

.anychart-credits {
  display: none;
}

#ac_path_3,
#ac_path_39,
#ac_path_7,
#ac_path_x {
  display: none;
  background-color: transparent;
}

.marker {
  background-image: url("../data/svg/diamond.svg");
  background-size: cover;
  width: 30px;
  height: 37px;
  cursor: pointer;
}

#chart-bra {
  text-align: center;
  display: inline-block;
  align-items: center;
  position: absolute;
  margin: 0 auto;
  /* Center the SVG horizontally */
  display: block;
}

.bar:hover rect {
  stroke: rgb(16, 16, 16);
  stroke-width: 1px;
}

.domain {
  display: none;
}

.popup-text {
  display: inline;
}

.darken-on-hover:hover path {
  fill: #777777;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

#radar-chart {
  width: 100%;
}

a[href^="#"] {
  scroll-behavior: auto;
}

.reference-num {
  font-size: 10px;
}

a[href^="#mapbox-legend"] {
  transition: scroll-margin 2s ease;
  scroll-margin: 100px; /* Adjust this value to control the amount of slowdown */
}
#made-by-div {margin-bottom: 30px; position: relative; text-align: center}

#made-by {
  margin-top: 160px;
  font-weight: bold;
  font-size: 12.857px;
  font-family: "Lato", sans-serif;
  font-weight: 275;
  margin-right: 30px;
}

a:hover u {
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

#aller-loin {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 90px;
}

#last-message-description {
  position: absolute;
  margin-bottom: 12vh;
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 120%;
  /* identical to box height, or 36px */

  color: #aaaaaa;
}

.more-info-text {display: flex;
  width: 451px;
  flex-direction: column;
  flex-shrink: 0;
  /* Body/Small */
  font-size: 15px;
  color: rgb(43, 43, 43);
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0; /* Add this line to remove bottom margin */}

.credits-imgs {width: 179px; height: 179px; margin: 0 45px}


.asterisk-section {color: gray}

.gray-subtitles{color: #7c868e;
  text-align: center;
  font-size: 15.036px;
  font-family: Verdana;
}

.lcz-analytics-titles{text-align: center; font-weight: bold}

.more-info-category{display: flex}

.col-md-6.d-flex.justify-content-center{
  width: 51% !important;
}

/* .row {
  display: flex;
  align-items: center;
} */

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.d-flex {
  display: flex;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.d-inline-block {
  display: inline-block;
}

.justify-content-center {
  justify-content: center;
}

h6 {
  margin-bottom: 15px;
  font-weight: 300;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {

  .more-info-text {font-size: 10px; width: 300px;}
  .popup-text {
    display: none;
  }

  .credits-imgs {
    width: 107px;
    height: 107px;
    flex-shrink: 0;
  }

  /* Your mobile styles here */
  .title {
    font-weight: 500;
    font-size: 20px;
  }

  .box-title {
    margin-top: 20px;
    font-weight: 400;
    font-size: 13px;
  }

  .rectangle {
    text-overflow: ellipsis;
    font-size: 15px;
    letter-spacing: 0.04em;

  }

  .middle-box-text {
    width: 300px;
    margin-top: 40px;
  }

  #last-message-box {
    font-size: 13px;
  }

  .graph-section-title {
    font-size: 15px !important;
    margin-top: 200px;
    width: 100px;
    height: 10.96px;

  }

  .mapbox-title-box-text {
    font-size: 12px;
  }

  #container {
    width: 400px;
    margin-top: 200px;
  }

}


@media only screen and (max-width: 1023px) {

  .more-info-text {
    font-size: 12px;
    width: 400px;
  }

  .popup-text {
    display: none;
  }

  .credits-imgs {
    width: 107px;
    height: 107px;
    flex-shrink: 0;
  }

  /* Your tablet styles here */
  .title {
    font-weight: 500;
    font-size: 24px;
  }

  .box-title {
    margin-top: 30px;
    font-weight: 400;
    font-size: 15px;
  }

  .rectangle {
    text-overflow: ellipsis;
    font-size: 18px;
    letter-spacing: 0.04em;
  }

  .middle-box-text {
    width: 400px;
    font-size: 15px;
    margin-top: 60px;
  }

  #last-message-box {
    font-size: 15px;
  }

  .graph-section-title {
    font-size: 18px;
    margin-top: 250px;
    width: 100%;
    height: 13.15px;
  }

  .mapbox-title-box-text {
    font-size: 14px;
  }

  #container {
    width: 600px;
    margin-top: 250px;
  }
}