/* remember to replace the fonts reference */
/* 
@font-face {
  font-family: "AkkuratLL-Regular";
  src: url("../akkurat/AkkuratLL-Regular.otf") format("opentype");
}

@font-face {
  font-family: "AkkuratLL-Light";
  src: url("../akkurat/AkkuratLL-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AkkuratLL-Italic";
  src: url("../akkurat/AkkuratLL-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AkkuratLL-Bold";
  src: url("../akkurat/AkkuratLL-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
} */

/* remember to replace the fonts reference */

 @font-face {
  font-family: "AkkuratLL-Regular";
  src: url("/content/dam/spglobal/commodity-insights/en/content-design/infographics/common/fonts/AkkuratLL-Regular.otf")
    format("opentype");
}

@font-face {
  font-family: "AkkuratLL-Light";
  src: url("/content/dam/spglobal/commodity-insights/en/content-design/infographics/common/fonts/AkkuratLL-Light.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AkkuratLL-Italic";
  src: url("/content/dam/spglobal/commodity-insights/en/content-design/infographics/common/fonts/AkkuratLL-Italic.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AkkuratLL-Bold";
  src: url("/content/dam/spglobal/commodity-insights/en/content-design/infographics/common/fonts/AkkuratLL-Bold.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
} 

html {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: #0a0a0a;
  color: #fff;
  font-family: "AkkuratLL-Regular";
  line-height: normal !important;
}

/* #AFtitle {
  display: flex;
  align-items: center;
  
} */

#AFtitle {
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  gap: 12px;              
  margin-bottom: 20px;
  margin-left: 10%;   
}

#AFtitleText > h2 {
  font-family: "AkkuratLL-Bold";
  font-size: clamp(0.875rem, 0.5625rem + 0.7813vw, 1.5rem) !important;
}

#AFcontainer {
  aspect-ratio: 16 / 9;
  height: 85dvh;
  position: relative;
  display: flex;
  gap: 32px;
  min-height: 0;
  min-width: 0;
  justify-self: center;
}

#AFlogoContainer {
  margin-right: 1em;
}

.AFlogo {
  max-width: 100%;
  height: 3em;
  padding: 0.5em;
}

p {
  font-family: "AkkuratLL-Regular";
  line-height: normal;
  font-size: small;
  margin-left: 0;
  margin-right: 0.75em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

#left,
#right {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#left {
  flex-basis: 60%;
  margin-left: 2em;
}

#right {
  flex-basis: 40%;
  overflow: auto;
  padding-left: 2em;
  padding-right: 3em;
}

#left svg {
  width: 100%;
  height: 100%;
  display: block;
}

#AFsvg-wrapper {
  position: relative;
}

#AFoverlay-svg {
  position: absolute;
  top: 0;
  left: 0;
}

footer {
  padding: 1rem;
  text-align: left;
}

footer p {
  font-size: 1rem;
}

#herodotus,
#eratos,
#senegal,
#cotedi,
#kwanza,
#SAF,
#sout,
#rovuma,
#tanzania {
  cursor: pointer;
}

#herodotus:hover rect,
#eratos:hover rect,
#senegal:hover rect,
#cotedi:hover rect,
#kwanza:hover rect,
#saf:hover rect,
#sout:hover rect,
#rovuma:hover rect,
#tanzania:hover rect {
  opacity: 0.5;
}

#herodotusPoly:hover polygon,
#eratosPoly:hover polygon,
#senegalPoly:hover polygon,
#cotediPoly:hover polygon,
#kwanzaPoly:hover polygon,
#SAFPoly:hover polygon,
#soutPoly:hover polygon,
#rovumaPoly:hover polygon,
#tanzaniaPoly:hover polygon {
  opacity: 0.5;
  cursor: pointer;
}

#herodotus:hover,
#eratos:hover,
#senegal:hover,
#cotedi:hover,
#kwanza:hover,
#saf:hover,
#sout:hover,
#rovuma:hover,
#tanzania:hover {
  text-decoration: underline;
}

#modalTitle {
  font-family: "akkuratLL-Bold";
  font-size: clamp(0.5em, 4vw, 1em);
  line-height: normal !important;
}

#modalP {
  font-family: "akkuratLL-Regular";
  font-size: clamp(0.25em, 4vw, 0.75em);
  line-height: normal !important;
}

#modalGraph1 {
  width: 100%;
  height: auto;
  overflow: hidden;
}

#modalGraph1 img {
  max-width: 100%;
  height: auto;
}

#highImpactWells {
  cursor: default;
}

#AFcloseBtn {
  display: none;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #edf86f;
  padding-right: 1.25em;
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #edf86f;
  border-radius: 5px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #333333;
}

.helpButton {
  display: none;
}