.container {
  background-color: #101214;
  height: 100vh;
  width: auto;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  position: fixed;
  overflow: scroll;
  top: 0;
  left: 0;
}

/* --------------------------------------------------------- Top Bar ---------------------------------------------- */

.lgmvplogo {
  height: 100px;
}

.title {
  font-size: 22px;
  margin: auto 0;
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  position: absolute;
  right: 0;
  margin: 0 0 0.5rem 0;
}

.topbar {
  display: flex;
  position: initial;
}

.navitem {
  background: none !important;
  border: none !important;
  width: 6.5vw !important;
  color: #fff !important;
  font-size: 16px;
  border-radius: 0 0 3px 3px !important;
}

.navitem:hover {
  color: #0d8f81 !important;
}

.tab--selected {
  color: #101214 !important;
  background: #fff !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1520px) {

  .topbar {
    display: grid;
  }

  .title {
    display: none !important;
  }

  .lgmvplogo {
    margin: 0 auto !important;
  }

  .nav {
    position: relative;
    width: 100%;
  }

  .navitem {
    padding: 1rem !important;
    width: 100% !important;
    border-radius: 3px !important;
  }
}

/* --------------------------------------------------------- Sections ---------------------------------------------- */

.item {
  width: 100%;
  margin: 0.5rem 1rem;
  padding: 0 1rem;
  background-color: #212529;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.smallitem {
  width: 30%;
  margin: 0.5rem 1rem;
  padding: 0 1rem;
  background-color: #212529;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.inner {
  background-color: #17191C;
  border-radius: 3px;
  box-shadow:
    inset 0 16px 16px rgba(0, 0, 0, 0.05),
    inset 0 8px 8px rgba(0, 0, 0, 0.10),
    inset 0 4px 4px rgba(0, 0, 0, 0.15),
    inset 0 2px 2px rgba(0, 0, 0, 0.20),
    inset 0 1px 1px rgba(0, 0, 0, 0.25);



}

.listtitle {

  justify-content: stretch;
  text-align: center;
}

.row {
  display: flex;
  justify-content: stretch;
}

.row2 {
  display: flex;
  justify-content: stretch;
}

.halfcolumn {
  width: 100%;
  margin-right: 1rem;
}

.quartcolumn {
  width: 25%;
  margin-right: 1rem;
  text-align: justify;
  display: inline-flex;
}

.thirdcolumn {
  width: 47%;
  margin-right: 1rem;
  text-align: justify;
  display: inline-flex;
}

@media (max-width: 1280px) {
  .row {
    display: grid;
  }

  .item {
    width: auto;
  }

  .smallitem {
    width: auto;
  }

  .halfcolumn {
    width: 100%;
  }

  .quartcolumn {
    width: 100%;
  }

  .thirdcolumn {
    width: 100%;
  }
}

/* --------------------------------------------------------- Footer ---------------------------------------------- */

.footer {
  position: initial;
  height: 75px;
  width: 100vw;
  bottom: 0;
  display: inline-flex;
}

.sponsor {
  height: 75px;
  margin: 0 1rem 0 0;
}

.foottext {
  font-size: 16px;
  margin: auto 1rem;
  color: #fff;
  text-decoration: none;
}

.footlinks {
  list-style-type: none;
  position: absolute;
  right: 0;
  margin: 0;
  height: 75px;
  display: inline-flex;
}

@media (max-width: 600px) {

  .sponsor,
  .footer,
  .footlinks {
    height: 30px;
  }
}

/* --------------------------------------------------------- Textboxes ---------------------------------------------- */

.subtitle {
  font-size: 20px;
  color: #fff;
}

.text {
  font-size: 16px;
  color: #fff;
}

.text p {
  margin: 1rem 0 0 0;
}

.subtext {
  font-size: 18px;
  color: #fff;
  margin: 1rem auto;
  text-align: center;
}

.calc {
  font-size: 26px;
  color: #39ab7e;
  margin: 1rem auto;
}

.eYbLCt {
  font-size: 18px !important;
  color: #fff;
  margin: 1rem auto;
}

.alert {
  font-style: italic;
  font-size: 16px;
  color: #edef5d;
}

.link {
  font-size: 16px;
  cursor: pointer;
  color: #0d8f81;
  text-decoration: none;
  font-weight: bold;
}

.link:hover {
  color: #edef5d;
}

.label {
  font-style: italic;
  font-size: 16px;
  color: #fff;
  margin: 1.5rem auto 0 auto;
}


/* --------------------------------------------------------- About Page ---------------------------------------------- */

.campus {
  border-radius: 3px;
  float: left;
  height: 150px;
  margin: 0.5rem 1rem 0rem 0rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.members {
  border-radius: 3px;
  float: left;
  height: 150px;
  margin: 0rem 1rem 0.5rem 0rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.paper {
  border-radius: 3px;
  height: 250px;
  margin: 1rem 1rem 1rem 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.icon {
  height: 50px;
  border-radius: 3px;
  margin: 1rem 1rem 1rem 0;

}

/* --------------------------------------------------------- Event Page ---------------------------------------------- */

.view {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

.input {
  width: 100%;
  margin: 1rem 0;
  color: #212529;
  border: none;
  background-color: #0d8f81;
  border-radius: 3px;
  font-size: 16px;
  height: 38px;
  padding: 0 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}


.input:hover {
  background-color: #fff;
}

.input:focus {
  background-color: #fff;
}

.view:hover {
  color: #212529;
}

.eventlist {
  width: 100%;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
}

.eventlist th {
  background-color: #212529;
  color: #fff;
}

.eventlist tr {
  background-color: #245668;
}

.eventlist tr:nth-child(even) {
  background-color: #0d8f81;
}

.eventlist tr:hover {
  background-color: #39ab7e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.summarylist {
  width: 100%;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
}

.summarylist th {
  background-color: #212529;
  color: #fff;
}

.summarylist tr {
  background-color: #245668;
}

.summarylist tr:nth-child(even) {
  background-color: #0d8f81;
}

.summarylist tr:hover {
  background-color: #39ab7e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.eventnav {
  text-align: center;
  margin: 0px;
}

.eventnav li {
  width: 15%;
  border-radius: 3px;
  display: inline-block;
  margin: 0.5rem;
}

.eventnav li button {
  cursor: pointer;
  width: 100%;
  padding: 1vh;
  border-radius: 3px;
  background-color: #0d8f81;
  border: none;
  display: inline-block;
  margin: 0.5rem;
  color: #212529;
  font-size: 16px;
}

.eventnav li button:hover {
  background-color: #fff;
  color: #212529;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.list {
  overflow-y: scroll;
  height: 600px;
}

/* --------------------------------------------------------- ML Page ---------------------------------------------- */

.BESSlabel {
  font-size: 16px;
  color: #fff;
  margin: 1rem auto 0 auto;
  text-align: center;
}

.BESSknob {
  text-align: center;
}


/* --------------------------------------------------------- Updated Time ---------------------------------------------- */

.updated {
  cursor: pointer;
  color: #39ab7e;
  font-style: italic;
  font-size: 16px;
}

.updateinfo {
  font-style: italic;
  background-color: #39ab7e;
  color: #212529;
  font-size: 16px;
  padding: 0.5vh 1vh;
  border-radius: 3px;
  transition: height .2s ease-in-out;
  margin: 2vh;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------- Time Picker ---------------------------------------------- */

.DateRangePickerInput {
  background: none;
  border: none;
}

.SingleDatePickerInput {
  border-radius: 3px;
  border: none;
  margin: auto 0.5rem auto 0;
}

.date {
  margin: 0 auto;
  display: table !important;
}

.DateInput_input {
  height: 38px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  color: #212529;
  background-color: #0d8f81;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.DateInput_input:hover {
  border-bottom: 2px solid #0d8f81;
  background-color: #fff;
  color: #212529;
}

.DateInput_input:focus {
  border-bottom: 2px solid #0d8f81;
  background-color: #fff;
  color: #212529;
}

.DateInput {
  background: none;
  width: 120px !important;
}

.DateRangePickerInput_arrow_svg {
  fill: #39ab7e;
  margin: 0 1rem;
}

.DateRangePicker_picker {
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.SingleDatePicker_picker {
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------- Dropdown ---------------------------------------------- */

.dash-dropdown {
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  display: inline-block;
}

.Select-control {
  border: none;
  cursor: pointer;
  font-size: 16px;
  background-color: #0d8f81;
  height: 38px;
}

.Select-control:hover {
  border-bottom: 2px solid #0d8f81 !important;
  background-color: #fff;
  color: #212529;
}

/* ------------------------------------- Multi-select for the PMU streams*/
.Select--multi .Select-value {
  color: #fff;
  background-color: #212529;
}

/* ------------------------------------- Multi-select for the PMU streams*/
.Select--single>.Select-control .Select-value,
.Select-placeholder {
  color: #212529;
}

/* --------------------------------------------------------- Popover ---------------------------------------------- */
.elexonlogo {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.popover {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  color: #101214;
  background-color: #fff !important;
  border-radius: 3px;
  padding: 1vh 2vh;
  transition: height .2s ease-in-out;
  margin: 2vh;
  width: 15%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.popover h1 {
  font-size: 18px;
  font-style: italic;
  color: #0d8f81;
}

.button {
  background-color: #0d8f81;
  width: 100%;
  cursor: pointer;
  color: #212529;
  height: 38px;
  border-radius: 3px;
  border: none;
  font-size: 16px;
  padding: 0 1rem;
  margin: 1rem 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

/* ChatGPT came in clutch... `focus-visible` prevents the button from being focused by the mouse.*/
.button:hover,
.button:focus-visible {
  border-bottom: 2px solid #0d8f81;
  background-color: #fff;
  color: #212529;
}

@media (max-width: 1280px) {

  .dash-dropdown {
    width: 100%;
  }

  .popover {
    width: 80%;
  }

  .input {
    width: 80%;
  }
}

/* --------------------------------------------------------- Digit Input ---------------------------------------------- */

.daq-numericinput--light__input {
  background-color: #0d8f81 !important;
  cursor: pointer;
  color: #212529 !important;
  width: 92% !important;
  height: 38px;
  border-radius: 3px;
  border: none !important;
  font-size: 16px;
  padding: 0 1rem;
  margin: 1rem 1rem 0 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.20),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.10),
    0 16px 16px rgba(0, 0, 0, 0.05);
}

.daq-numericinput--light__input:hover {
  border-bottom: 2px solid #0d8f81 !important;
  background-color: #fff !important;
  color: #212529 !important;
}

.daq-numericinput--light__input:focus {
  border-bottom: 2px solid #0d8f81 !important;
  background-color: #fff !important;
  color: #212529 !important;
}

.react-numeric-input b {
  margin: 1rem 1rem 0 0 !important;
}


/* --------------------------------------------------------- Gauge Styling ---------------------------------------------- */

.dHABtm {
  text-transform: none !important;
  font-size: 18px !important;
}

.jQiWRH {
  font-size: 26px !important;
  font-weight: bold;
}

.gTdnoD .scale {
  font-size: 14px !important;
  fill: rgb(57, 171, 126) !important;

}

.daq-knob--light {
  margin: 0 auto;
  display: table !important;
}

/* --------------------------------------------------------- Adjust Text to Sizing ---------------------------------------------- */

@media (max-width: 540px) {
  .title {
    font-size: 18px;
  }

  .navitem,
  .popover h1,
  .eventnav li button,
  .text,
  .alert,
  .link,
  .label,
  .view,
  .input,
  .eventlist,
  .summarylist,
  .updated,
  .DateInput_input,
  .Select-control,
  .popover,
  .button,
  .daq-numericinput--light__input {
    font-size: 12px;
  }

  .subtitle {
    font-size: 16px;
  }

  .subtext,
  .eYbLCt,
  .dHABtm,
  .foottext {
    font-size: 14px !important;
  }

  .calc {
    font-size: 22px;
  }

  .jQiWRH {
    font-size: 22px !important;
  }

  .gTdnoD .scale {
    font-size: 10px !important;
  }

  .updateinfo {
    width: 80%;
  }

  .DateInput {
    width: 98px !important;
  }
}