@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-weight: normal;
   font-style: normal;
}

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


body {
   background: rgb(0, 0, 0);
   font-family: "AkkuratLL-Regular";
}

html {
   overflow-y: auto;
}

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

p {
   font-weight: lighter;
   font-family: 'AkkuratLL-Light';
   font-size: 100%;
   margin-block-start: 0;
   margin-block-end: 0;
}

.old-version-link {
   color: #edf86f;
   margin-left: 2%;
}

.old-version-link a {
   color: #edf86f;
}
.title,
.lastUpdate,
#helperText,
.symbol-code,
.y1-avg, .y2-avg,
.know-more {
   color: #FFF;
}

/* Everything else */

@media (max-width: 446px) {
   .top-navigation-container {
      margin-left: 2%;
      margin-right: 2%;
      z-index: 1;
      position: relative;
   }

   .top-navigation-container .logo {
      height: 2rem;
      margin-right: 1%;
   }

   .top-navigation-container .middle {
      flex-direction: column;
      align-items: baseline;
      flex-basis: 50%;
   }

   .top-navigation-container .middle .title {
      font-family: "AkkuratLL-Bold";
      font-size: 1.5rem;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-bottom: 0.25rem;
      margin-top: 1%;
   }

   .top-navigation-container .controls {
      display: flex;
      padding-top: 2%;
      padding-bottom: 2%;
      float: left;
   }

   .top-navigation-container .controls #newSymbol {
      cursor: pointer;
      color: #edf86f;
   }

   .top-navigation-container .controls #newSymbol:hover {
      text-decoration: underline;
   }

   .top-navigation-container .controls #reset {
      cursor: pointer;
      color: #edf86f;
      justify-content: flex-end;
      padding-right: 20px;
   }

   .top-navigation-container .controls #reset:hover {
      text-decoration: underline;
   }

   .top-navigation-container #containBurger {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      width: 100%;
      align-items: center;
   }

   .top-navigation-container #containBurger #helperText {
      flex: 1;
      text-align: right;
      z-index: 2;
      padding: 0 .5rem 0 0;
      cursor: pointer;
   }

   /* hamburger start ------------->> */

   /* Hamburger styles */
   .top-navigation-container #containBurger .hamburger {
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: auto;
   }

   .top-navigation-container #containBurger .hamburger > div {
      position: relative;
      background: #edf86f;
      height: 2px;
      width: 50%;
      z-index: 3;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger > div::before,
   .top-navigation-container #containBurger .hamburger > div::after {
      content: '';
      position: absolute;
      background: #edf86f;
      top: -10px;
      width: 100%;
      height: 2px;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger div::after {
      top: 10px;
   }

   .top-navigation-container #containBurger .hamburger.active div {
      background: transparent;
   }

   .top-navigation-container #containBurger .hamburger.active div::before {
      top: 0;
      transform: rotate(45deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .hamburger.active div::after {
      top: 0;
      transform: rotate(135deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .ham-menu {
      right: 0;
      top: 0;
      position: fixed;
      background: rgb(0, 0, 0);
      width: 0%;
      height: 100vh;
      z-index: 2;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active {
      width: 100%;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: fixed;
      top: 30%;
      height: 50%;
      padding-inline-start: 0%;
      width: -webkit-fill-available;
      visibility: hidden;
      justify-content: space-between;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul {
      transition: visibility 0.4s ease;
      transition-delay: 0.1s;
      visibility: visible;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul > li {
      list-style: none;
      font-family: "AkkuratLL-Light";
      color: #edf86f;
      text-decoration: none;
      font-size: 1rem;
      font-weight: lighter;
      padding-top: 1%;
      padding-bottom: 1%;
      padding-left: 6%;
      cursor: pointer;
      border-bottom: 0.25px #666666;
      border-bottom-style: solid;
      border-width: 100%;
      transition: all 0.3s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul > li:hover {
      color: #fff;
   }

   /* hamburger end  ------------->> */
}

@media (min-width: 447px) and (max-width: 1199px) {
   .top-navigation-container {
      margin-left: 2%;
      margin-right: 2%;
      z-index: 1;
   }

   .top-navigation-container .logo {
      height: 4rem;
      margin-right: 1%;
   }

   .top-navigation-container .middle {
      flex-direction: column;
      align-items: baseline;
      flex-basis: 50%;
   }

   .top-navigation-container .middle .title {
      font-family: "AkkuratLL-Bold";
      font-size: 2rem;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-bottom: 0.25rem;
      margin-top: 1%;
   }

   .top-navigation-container .controls {
      display: flex;
      padding-top: 2%;
      float: left;
   }

   .top-navigation-container .controls #newSymbol {
      cursor: pointer;
      color: #edf86f;
   }

   .top-navigation-container .controls #newSymbol:hover {
      text-decoration: underline;
   }

   .top-navigation-container .controls #reset {
      cursor: pointer;
      color: #edf86f;
      justify-content: flex-end;
      padding-right: 20px;
   }

   .top-navigation-container .controls #reset:hover {
      text-decoration: underline;
   }

   .top-navigation-container #containBurger {
      float: right;
      display: flex;
      min-width: fit-content;
      flex: 1;
      align-items: center;
      z-index: 1;
   }

   .top-navigation-container #containBurger #helperText {
      flex: 1;
      text-align: right;
      z-index: 3;
      padding: 0 .5rem 0 0;
      cursor: pointer;
   }

   /* hamburger start ------------->> */

   /* Hamburger styles */
   .top-navigation-container #containBurger .hamburger {
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
   }

   .top-navigation-container #containBurger .hamburger > div {
      position: relative;
      background: #edf86f;
      height: 2px;
      width: 40%;
      z-index: 3;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger > div::before,
   .top-navigation-container #containBurger .hamburger > div::after {
      content: '';
      position: absolute;
      background: #edf86f;
      top: -10px;
      width: 100%;
      height: 2px;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger div::after {
      top: 10px;
   }

   .top-navigation-container #containBurger .hamburger.active div {
      background: transparent;
   }

   .top-navigation-container #containBurger .hamburger.active div::before {
      top: 0;
      transform: rotate(45deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .hamburger.active div::after {
      top: 0;
      transform: rotate(135deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .ham-menu {
      right: 0;
      top: 0;
      position: fixed;
      background: rgb(0, 0, 0);
      width: 0%;
      height: 100vh;
      z-index: 2;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active {
      width: 42%;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: fixed;
      top: 40%;
      height: 50%;
      padding-inline-start: 0%;
      width: -webkit-fill-available;
      visibility: hidden;
      justify-content: space-between;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul {
      transition: visibility 0.4s ease;
      transition-delay: 0.1s;
      visibility: visible;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul > li {
      list-style: none;
      font-family: "AkkuratLL-Light";
      color: #edf86f;
      text-decoration: none;
      font-size: 1rem;
      font-weight: lighter;
      padding-top: 1%;
      padding-bottom: 1%;
      padding-left: 6%;
      cursor: pointer;
      border-bottom: 0.25px #666666;
      border-bottom-style: solid;
      border-width: 100%;
      transition: all 0.3s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul > li:hover {
      color: #fff;
   }

   /* hamburger end  ------------->> */
}
@media (min-width: 1200px) {
   .top-navigation-container {
      display: flex;
      flex-basis: 25%;
      margin-left: 20px;
      margin-top: 1%;
      margin-right: 20px;
      align-items: center;
      justify-content: space-between;
   }

   .top-navigation-container .logo {
      height: 4rem;
      margin-right: 1%;
      padding-left: 1%;
      flex-basis: 5%;
   }

   .top-navigation-container .middle {
      flex-direction: column;
      align-items: baseline;
      flex-basis: 50%;
   }

   .top-navigation-container .middle .title {
      font-family: "AkkuratLL-Bold";
      font-size: 2rem;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-bottom: 0.25rem;
      margin-top: 1%;
   }

   .top-navigation-container .controls {
      z-index: 2;
      display: flex;
      flex-basis: 25%;
      margin-left: 20px;
      margin-top: 1%;
      margin-right: 20px;
      align-items: center;
      justify-content: space-between;
   }

   .top-navigation-container .controls #newSymbol {
      display: flex;
      min-width: fit-content;
      cursor: pointer;
      color: #edf86f;
   }

   .top-navigation-container .controls #newSymbol:hover {
      text-decoration: underline;
   }

   .top-navigation-container .controls #reset {
      display: flex;
      min-width: fit-content;
      flex: 1;
      cursor: pointer;
      color: #edf86f;
      justify-content: flex-end;
      padding-right: 20px;
   }

   .top-navigation-container .controls #reset:hover {
      text-decoration: underline;
   }

   .top-navigation-container #containBurger {
      display: flex;
      min-width: fit-content;
      margin-left: 20px;
      margin-top: 1%;
      margin-right: 20px;
      flex: 1;
      align-items: center;
   }

   .top-navigation-container #containBurger #helperText {
      flex: 1;
      text-align: right;
      z-index: 3;
      padding: 0 .5rem 0 0;
      cursor: pointer;
   }

   /* Hamburger styles */
   .top-navigation-container #containBurger .hamburger {
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
   }

   .top-navigation-container #containBurger .hamburger > div {
      position: relative;
      background: #edf86f;
      height: 2px;
      width: 50%;
      z-index: 3;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger > div::before,
   .top-navigation-container #containBurger .hamburger > div::after {
      content: '';
      position: absolute;
      background: #edf86f;
      top: -10px;
      width: 100%;
      height: 2px;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .hamburger div::after {
      top: 10px;
   }

   .top-navigation-container #containBurger .hamburger.active div {
      background: transparent;
   }

   .top-navigation-container #containBurger .hamburger.active div::before {
      top: 0;
      transform: rotate(45deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .hamburger.active div::after {
      top: 0;
      transform: rotate(135deg);
      background: #edf86f;
   }

   .top-navigation-container #containBurger .ham-menu {
      right: 0;
      top: 0;
      position: fixed;
      background: rgb(0, 0, 0);
      width: 0;
      height: 100%;
      z-index: 2;
      transition: all 0.4s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active {
      width: 26.5%;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 35%;
      padding-inline-start: 0%;
      width: -webkit-fill-available;
      visibility: hidden;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul {
      transition: visibility 0.4s ease;
      transition-delay: 0.1s;
      visibility: visible;
   }

   .top-navigation-container #containBurger .ham-menu > div > ul > li {
      list-style: none;
      font-family: "AkkuratLL-Light";
      color: #edf86f;
      text-decoration: none;
      font-size: 1.25rem;
      font-weight: lighter;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 6%;
      cursor: pointer;
      border-bottom: 0.25px #666666;
      border-bottom-style: solid;
      border-width: 100%;
      transition: all 0.3s ease;
   }

   .top-navigation-container #containBurger .ham-menu.ham-menu-active > div > ul > li:hover {
      color: #fff;
   }
}


/* -------- Main content here - Grid ------------->> */
.mainContent {
   clear: both;
   margin-top: 0px;
   z-index: 9995;
   margin-block-start: 0;
   margin-block-end: 0;
}

.mainContent .rectangle {
   float: right;
   margin-bottom: 100px;
   margin-right: 2%;
   width: 250px;
   height: 11px;
   background: linear-gradient(to right, #8f001c, #f1a649, #125e1f);
}

.mainContent #label {
   font-size: xx-small;
   margin-top: 1px;
   margin-left: 0px;
}

.mainContent .grid {
   display: grid;
   grid-gap: 2px;
   grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
   grid-auto-rows: 4rem;
   grid-auto-flow: dense;
   margin-top: 2%;
   margin-bottom: 2%;
   margin-left: 2%;
   margin-right: 2%;
}

.mainContent .grid-item {
   float: left;
}

.mainContent .tile {
   border-radius: 0px;
   font-size: 100%;
   cursor: pointer;
   position: relative;
   opacity: 100%;
}

.mainContent .tile:hover {
   transform: scale(1.00);
   opacity: 40%;
}

.mainContent .open:hover {
   transition: transform 0s;
   transform: scale(1);
   opacity: 100%;
}

.mainContent .tileContent {
   text-align: center;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   overflow: hidden;
}

.mainContent .open {
   grid-column-end: span 5;
   grid-row-end: span 5;
   z-index: 1;
   animation: open 1000ms;
   opacity: 100%;
}

.mainContent .symbol-code {
   display: block;
   font-size: 0.67em;
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.mainContent .open .symbol-code {
   font-family: "AkkuratLL-Light";
   font-size: 1.608em;
   margin: 1.25rem 0 0 1.25rem;
   top: 0;
   left: 0;
   position: relative;
   transform: translate(0, 0);
   color: rgb(214, 0, 42);
}

.mainContent .tile .symbol-name {
   font-family: "AkkuratLL-Light";
   font-weight: lighter;
   font-size: 1em;
   margin: 0.83em 0 0 0;
   color: rgb(255, 255, 255);
}

.mainContent .tile .filtered {
   opacity: 40%;
}

.mainContent .lightBG {
   color: #431600;
}

.mainContent .open .lightBG {
   color: rgb(214, 0, 42);
}

.mainContent .open .y1-avg,
.mainContent .open .y2-avg {
   font-family: "AkkuratLL-Light";
   font-weight: lighter;
   font-size: 0.8em;
}

.mainContent .open .y1-avg {
   margin: 0.83em 0 0 0;
}

.mainContent .open .y2-avg {
   margin: 0.4em 0 0 0;
}

.mainContent .open .tileContent {
   text-align: left;
}

.mainContent .tile .average-title,
.mainContent .tile .method-guide-qr-title {
   font-size: 100%;
   color: rgb(214, 0, 42);
   margin: 0.83em 0 2px;
}

.mainContent .details {
   display: none;
   line-height: 100%;
   overflow: hidden;
   margin-top: 0px;
}

.mainContent .details .info {
   font-family: 'AkkuratLL-Light';
   font-size: 100%;
   text-align: left;
   padding-left: 20px;
   padding-right: 20px;
}

.mainContent .qr {
   position: relative;
   flex-direction: row;
   margin: 0.83em 1.875rem 0 0;
}

.mainContent .qrDiv {
   display: flex;
   float: left;
}

.mainContent .qrDiv .know-more {
   font-family: "AkkuratLL-Light";
   display: flex;
   font-size: .8em;
   width: 6.875rem;
   align-items: flex-end;
}

.mainContent .open .details {
   display: block;
   height: 100%;
}

.mainContent .open .tileContent {
   position: relative;
   width: 100%;
   height: 100%;
   background-color: #000000;
}

/* -------- Grid End ------------->> */