@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;
}

.helpButton {
  display: none;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  overflow-y: auto;
}

body {
  background-color: #0a0a0a;
}

.breadcrumb-component_list_lastitem,
.mx-2 {
  color: #fff !important;
}

span.breadcrumb-component_list_lastitem {
  max-width: none;
}

.final-wrapper {
  position: relative;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
}

.final-wrapper .top-container .infographic-title {
  font-size: 2rem;
  color: #fff;
  font-family: "AkkuratLL-Bold";
  margin: 0.5rem 0 0.5rem 1rem;
}

.final-wrapper .hero-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  height: 94.1vh;
}

.final-wrapper .hero-container .price-dial-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 100%;
}

.final-wrapper .hero-container .price-dial-container .frame-dial {
  width: 100%;
  height: 100%;
}

.final-wrapper .hero-container .bunker {
  position: relative;
  width: 65%;
  height: 100%;
}

.final-wrapper .hero-container .bunker .bunker-frame {
  width: 100%;
  height: 100%;
}