.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);
}

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

.button:focus {
    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;
  } 
}