body {
  padding: 0;
  margin: 0;
}
h1 {
  font-weight: 900;
  font-size: 22px;
  line-height: 29px;
  margin: 0;
  padding: 0;
}
h6 {
  font-weight: 900;
  font-size: 22px;
  line-height: 29px;
}
p {
  font-size: 22px;
  line-height: 29px;
}
li button {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}
button, a {
  font-size: 22px;
  line-height: 29px;
  text-decoration: underline;
  background: transparent;
  text-align: right;
  border: none;
  padding: 0;
}

header {
  padding: 24px 0 24px 24px;
}
  #header-title {
    text-decoration: none;
    padding-left: 24px;
    position: relative;
  }
    #header-title:before {
      background-image: url(../assets/arrow.svg);
      content: '';
      position: absolute;
      width: 20px;
      height: 24px;
      background-repeat: no-repeat;
      transform: rotate(-90deg);
      left: 0;
      display: flex;
    }
    #header-title h1 {
      font-weight: 500;
    }

  /* remove back arrow in header when no charts are open. */
  body:not(.open) #header-title:before  {
    opacity: 0;
    transition: .2s ease-in-out;
  }
  body.open #header-title:before  {
    opacity: 1;
    transition: .2s ease-in-out;
  }

  body.open #layer1 {
    overflow: hidden;
  }
  body.open article.row:not(.goBack) {
    display: block !important;
  }
  body.open article.row.open {
    border-bottom: 2px solid #000000;
  }
    body.open article.row.open .info-wpr {
      min-height: auto !important;
    }
  body.open article.row:not(.open) .info-wpr {
    display: none !important;
    visibility: hidden;
  }
  button.goBack {
    padding: 16px 30px 40px;
    cursor: pointer;
  }
    button.goBack img {
      margin-right: 10px;
    }
  body.open article.row:not(.open) {
    padding: 0 !important;
  }

#layer1 {
  height: calc(100% - 77px);
  display: flex;
  flex-direction: column;
}
  #layer1 .row {
    padding: 16px 24px;
    flex-grow: 1;
    transition: .2s ease-in-out;
    display: table;
  }
    #layer1 .row .info-wpr {
      padding: 0 24px;
      display: flex;
      width: 100%;
      height: 100%;
      gap: 10px;
      text-decoration: none;
      cursor: pointer;
    }
      #layer1 .row .info-wpr * {
        margin: 0;
        flex: 1;
        text-align: left;
      }
      #layer1 .row .info-wpr .action {
        text-decoration: underline;
        text-align: right;
      }
        #layer1 .row .info-wpr .action .mobile {
          text-align: right !important;
        }
    #layer1 .row.open {
      padding: 24px 24px 0;
    }
    #layer1 .row.open .info-wpr {
      display: none;
      visibility: hidden;
    }
    /* #close-layer2 {
      text-decoration: none !important;
    }
      #close-layer2 svg {
        height: 25px;
        width: auto;
        margin-right: 16px;
      } */

    .row.goBack {
      display: table !important;
      height: 63px;
    }
    .row #close-layer2 {
      padding: 16px 20px;
      width: 100%;
      text-align: left;
    }
    .row.last-row #close-layer2 {
      background: rgb(62, 62, 63);
      position: absolute;
      bottom: 0;
      margin-left: -24px;
      border-top: 2px solid #000000;
    }
    .row.last-row #layer2 {
      height: calc(100% - 63px) !important;
    }

#layer1 .row .info-wpr * {
  color: #000000;
}

#layer1 .row:first-child .info-wpr *,
#layer1 .row:first-child #list *,
#layer1 .row:nth-child(3n+4) .info-wpr *,
#layer1 .row:nth-child(3n+4) #list * {
  color: #ffffff;
}

/* #layer1 .row:first-child .action button svg path,
#layer1 .row:nth-child(3n+4) .action button svg path {
  fill: #ffffff;
} */

#layer2 {
  /* margin-top: 16px; */
  display: flex;
  width: 100%;
}
  #layer2 #list {
    height: 100%;
    flex: 1;
  }
    #layer2 #list ul {
      padding-left: 24px;
      margin-top: 0;
      list-style: none;
      height: 100%;
      overflow: auto;
      direction: rtl;
      text-align: left;
    }
      #layer2 #list ul::-webkit-scrollbar {
        width: 3px;
      }
      #layer2 #list ul::-webkit-scrollbar-track {
        background: rgba(18, 81, 103, 0.2);
      }
      #layer2 #list ul::-webkit-scrollbar-thumb {
        background-color: #ffffff;
      }
      #layer2 #list ul li button {
        text-align: left;
      }
  #layer2 #chart {
    overflow: hidden;
    position: relative;
    flex: 3;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-bottom: none;
  }
    #layer2 #chart #left-controls {
      position: absolute;
      z-index: 1;
      border: 2px solid #000000;
      margin: 5px;
      padding: 10px;
      background-color: #ffffff;
      left: 0;
    }
      #layer2 #chart #left-controls * {
        color: black;
      }
      #layer2 #chart #left-controls #initiatives form {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
        #layer2 #chart #left-controls #initiatives label {
          color: black;
          display: flex;
        }
        #layer2 #chart #left-controls #initiatives input {
          margin: 0 5px 0 0;
          -webkit-appearance: none;
          appearance: none;
          font: inherit;
          color: currentColor;
          width: 1.15em;
          height: 1.15em;
          border-radius: 50%;
          border: 5px solid;
          display: grid;
          place-content: center;
        }
          #layer2 #chart #left-controls #initiatives input#ogmp {
            border-color:#F8CB44;
            background-color: #B69637;
          }
          #layer2 #chart #left-controls #initiatives input#mgp {
            border-color:#BE98FE;
            background-color: #9976D4;
          }
          #layer2 #chart #left-controls #initiatives input#ogci {
            border-color:#F57DBB;
            background-color: #CE639A;
          }
          input.checked {
            background-color: #000000;
          }
    #layer2 #chart #right-controls {
      right:0;
      position: absolute;
      z-index: 1;
    }
    #layer2 #chart #bottom-controls {
      position: absolute;
      z-index: 1;
      margin: 5px;
      padding: 5px;
      right: 0;
      bottom: 0;
    }
      #layer2 #chart #bottom-controls #zoom {
        display: flex;
        flex-direction: column;
        width: fit-content;
      }
    #layer2 #chart .chart {
      min-height: 100%;
      min-width: 100%;
      /* top: 50%;
      left: 50%; */
      position: relative;
      /* transform: translateX(-50%) translateY(-50%); */
    }
    #layer2 li button {
      text-decoration: none;
    }
    #layer2 li button:hover {
      text-decoration: underline;
    }
    #layer2 #list li.active button {
      text-decoration: underline;
    }

    #layer2 #list li .sub-data {
      border: 2px solid #000000;
      padding: 10px;
      background-color: #ffffff;
      opacity: 0;
      display: none;
      visibility: hidden;
      position: absolute;
      z-index: 1;
      right: 30px;
    }
    #layer2 #list li.active .sub-data {
      opacity: 1;
      display: flex;
      visibility: visible;
      flex-direction: row-reverse;
      grid-column-gap: 30px;
    }
    #layer2 #list li .sub-data * {
      color: #000000 !important;
    }
      #layer2 #list li .sub-data h6 {
        padding: 0;
        margin: 0;
        padding-bottom: 10px;
      }
      #layer2 #list li .sub-data p {
        padding: 0;
        margin: 0;
        font-size: 18px;
        line-height: 22px;
        position: relative;
      }
        #layer2 #list li .sub-data p::before {
          left: 0;
        }
      #layer2 #list li .sub-data h1 {
        padding: 0;
        margin: 0;
      }
      #layer2 #list li .sub-data .initiatives {
        padding-top: 10px;
      }
      #layer2 #list li .sub-data .initiatives p {
        margin-left: 24px;
      }
      #layer2 #list li .sub-data .initiatives p::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        border-radius: 100%;
        transform: translateX(-24px);
      }
      #layer2 #list li .sub-data .initiatives p.OGMP::before {
        background-color: #F8CB44;
      }
      #layer2 #list li .sub-data .initiatives p.MGP::before {
        background-color: #BE98FE;
      }
      #layer2 #list li .sub-data .initiatives p.OGCI::before {
        background-color: #911D47;
      }
      #layer2 #list li .sub-data button {
        height: fit-content;
      }




/* RESPONSIVE STYLES */
.mobile {
  display: none;
}
/* IPAD AIR OR BELOW */
@media only screen and (max-width: 820px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: inherit;
  }
  h1, h6, p {
    font-size: 20px;
    line-height: 26px;
  }
  header {
    display: block;
    padding: 10px 24px;
    margin: 0;
  }
  header button#header-title {
    margin-left: 0;
  }
  header svg {
    display: none;
    visibility: hidden;
  }
  #layer1 * {
    font-size: 15px;
    line-height: 20px;
  }
  #layer1 .info-wpr,
  #layer1 .info-wpr * {
    padding: 0 !important;
  }
  #layer1 .name, #layer1 .production  {
    flex: 1;
  }
  #layer2 #list ul {
    padding-right: 0;
  }
  #layer2 #list li .sub-data {
    position: relative;
    top: 0 !important;
    right: 0;
    margin: 5px 0;
    flex-direction: row-reverse;
    column-gap: 30px;
  }
    #layer2 #list li .sub-data {
      height: fit-content;
    }
  #layer2 #chart {
    display: none;
    visibility: hidden;
  }
}