<style>
  .progressPane {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.8;
  }

  .progress {
    height: 1.5em;
    width: 100%;
    background-color: #555;
    position: relative;
  }

  .progressSpacer{
    flex-grow: 1;
  }

  .progress:after {
    content: attr(data-label);
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    top: 5px;
    left: 0;
    right: 0;
  }

  .progress .value {
    background-color: darkcyan;
    display: inline-block;
    height: 100%;
  }

  .progress .valueIndeterminate {
    background-color: darkcyan;
    display: inline-block;
    height: 100%;
    animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
  }


  @keyframes indeterminateAnimation {
    0% {
      transform: translateX(0%) scaleX(0.5);
    }

    50% {
      transform: translateX(50%) scaleX(0.5);
    }

    100% {
      transform: translateX(0%) scaleX(0.5);
    }
  }


  .flexcontainer {
    display: flex;
    flex-wrap: wrap;
  }
  .flexcontainer-rev{
    display: flex;
    flex-wrap: wrap-reverse;
  }
  .subcontainer {
    min-width: 300px;
    max-width: 900px;
    flex-grow: 1;  
    border-style: solid; 
    border-width: 1px; 
    padding: 8px;
  }
  .subcontainercontainer{
    flex-grow: 1;
  }
  
  .plantcontainer {
      flex-grow: 1;
      min-width: 100%;
      border-style: solid;
      border-width: 1px;
      padding: 8px;
    }
  @media (min-width: 350px) {
    .plantcontainer {
      flex-grow: 1;
      min-width: 40%;
      border-style: solid;
      border-width: 1px;
      padding: 8px;
    }
  }
  @media (min-width: 1100px) {
    .plantcontainer {
      flex-grow: 1;
      min-width: 20%;
      border-style: solid;
      border-width: 1px;
      padding: 8px;
    }
  }
  @media (min-width: 2150px) {
    .plantcontainer {
      flex-grow: 1;
      min-width: 200px;
      border-style: solid;
      border-width: 1px;
      padding: 8px;
    }
  }


  
  .plantlist {
    display: flex; 
    flex-wrap: wrap;
  }

  .subtitle {
    flex-grow: 1; 
    text-align: center; 
    font-weight: bold;
  }



</style>


<div class="container-xl">
  <div style="display:flex; flex-wrap: wrap;">
    <div id="firmwareview" class="subcontainer">
    </div>
    <div id="timeview" class="subcontainer">
    </div>
    <div id="batteryview" class="subcontainer">
    </div>
  </div>

  <div class="flexcontainer">
    <div id="network_view" class="subcontainercontainer"></div>
    <div id="lightview" class="subcontainer">
    </div>
    <div id="tankview" class="subcontainer">
    </div>
  </div>

  <h3>Plants:</h3>
  <button id="measure_moisture">Measure Moisture</button>
  <div id="plants" class="plantlist"></div>

  <div class="flexcontainer-rev">
    <div id = "submitview" class="subcontainer">
    </div>
    <div id="fileview" class="subcontainer">
    </div>
  </div>



  <button id="exit">Exit</button>
  <button id="reboot">Reboot</button>

  <script src="bundle.js"></script>
</div>

<div id="progressPane" class="progressPane">
  <div class="progressSpacer"></div>>
  <div id="progressPaneBar" class="progress" data-label="50% Complete">
    <span id="progressPaneSpan" class="value" style="width:100%;"></span>
  </div>
  <div class="progressSpacer"></div>>
</div>