* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --light-blue: #2491b8;
  --accent-blue: #2c6acc;
  --batt-color: green;
  --light-grey: #d3d3d3;
  --background: #eee;
  --nav-color: #2491b8;
  --font-dark: #222;

  /* dark mode */
  /* --header: #151E28; */
  /* --background: #1A2A3C; */
}

body {
  /* background-color: rgb(205, 205, 205); */
  background-color: var(--background);
  width: 100%;
}

h1,
h3,
h4,
h5,
h6 {
  color: var(--font-dark);
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--nav-color);
  color: var(--font-color);
  /*   position: sticky;
    top: 0; */
  padding: 0 60px;
  height: 80px;
}

.center-element {
  margin: 0 auto; /* Center the element */
}

.right-align {
  text-align: right; /* Push the right element to the right */
  margin-right: 40px;
}

.right-element {
  margin-left: auto; /* Push the right element to the right */
}

nav img {
  padding-left: 50px;
}

nav ul {
  margin-bottom: 0;
}

nav ul li {
  display: inline-block;
  padding: 0 0 0 30px;
}

nav ul li a {
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  color: var(--font-dark);
}

nav ul li a:hover {
  color: var(--light-grey);
  transition: 0.5s;
}

.page-container {
  /* height: 100vh; */
  background-color: var(--background);
  flex-wrap: wrap;
  margin: 20px;
}

.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: var(--background);
  /* text-align: right; */
}

.search-table th {
  padding: 6px 10px;
  background-color: var(--light-grey);
}

.input-group {
  margin-top: 20px;
}

.search-input {
  margin-left: 5vw;
}

.search-results {
  margin-right: 5vw;
}

.mb-5 {
  margin-bottom: 0px;
  /* not working */
}

.csv {
  display: flex;
  gap: 30px;
}

.csv-sample {
  min-width: 300px;
  margin-top: 1rem; /* Adjust the value as needed */
  background-color: #d3d3d3;
  padding: 8px;
  line-height: 1.5rem;
}

.myChart {
  background-color: white;
  /* color: var(--light-grey); */
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
  padding: 20px;
  margin: 15px 40px;
  border-radius: 5px;
  width: 100%; /* Maximum width for the chart */
  max-height: 45vh; /* Maximum height for the chart */
  min-width: 400px;
  min-height: 200px; /* Minimum height for the chart */
}

.input-group {
  width: 400px;
}

.info h6 {
  margin: 10px 0 20px 40px;
}

.data-tbl {
  font-size: 0.85em;
  table-layout: fixed;
  /* width: 100%; */
  background-color: white;
  margin: 10px 40px;
  text-align: left;
  border-collapse: collapse;
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
  border-radius: 5px;
  overflow: hidden; /* without this the background color fill of the header row would extend beyound the curved corners*/
  line-height: 1.5rem;
}

/* https://codepen.io/dbssticky/pen/XWPWGzm */
/* pad all header and cell elements, becasue it's 2023, and we all love whitespace */

th,
td {
  padding: 6px 10px;
}

/* give the header row a colour fill */
th {
  background-color: var(--light-grey);
  /* color: var(--font-color); */
  vertical-align: top;
  line-height: 1.5rem;
}

/* column spacing */
th:nth-child(1) {
  width: 2rem;
}

/* th:nth-child(2) {
    width: 70px;
} */

th:nth-child(6) {
  width: 8%;
}

/* set "tank fill %", to a fixed width */
th:nth-child(10) {
  width: 12%;
}

/* set column 1 to no word-wrap and use ellipsis */
td:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* define the style of the outside of the progress indicator, no border, just a simple drop-shadow. I'm using custom HTML elements, by default they are spans, hence the 'display: block' setting here. And in other places below */
progress-meter {
  display: block;
  height: 20px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 1px;
  margin-right: 2rem;
  position: relative;
}

/* define the style of the inside of the progress indicator, the height matches its container, the width has to match the actual progress */
level-percent {
  display: block;
  height: 100%;
  border-radius: 5px;
  width: calc(
    var(--progress) * 1%
  ); /* the value of "--progress" is defined in the HTML. I know, it's neat right? the HTML is where the content should go after all  */
  background-color: var(
    --light-blue
  ); /* this will NOT be used if the progress is 100%, see below  */
  font-size: 70%;
  color: grey;
}

batt-percent {
  display: block;
  height: 100%;
  border-radius: 5px;
  width: calc(
    var(--progress) * 1%
  ); /* the value of "--progress" is defined in the HTML. I know, it's neat right? the HTML is where the content should go after all  */
  background-color: var(
    --batt-color
  ); /* this will NOT be used if the progress is 100%, see below  */
  font-size: 70%;
  color: grey;
}

/* set the inside of the indicator to red when "--progress" < 30 ? needs JS */
/* progress-percent[style="--progress: < 60"] {
    background-color: red;
  } */

/* create a counter and reset its value to "--progress", then display this progress as a value.*/
level-percent::after {
  counter-reset: percent var(--progress);
  content: counter(percent) "%";
  position: absolute;
  right: -2rem;
  bottom: -0.9rem;
}

batt-percent::after {
  counter-reset: percent var(--progress);
  content: counter(percent) "%";
  position: absolute;
  right: -2rem;
  bottom: -0.9rem;
}

.page-container .signin {
  margin: auto;
}

.signin {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 600px;
}

.signin button {
  margin: 20px 10px;
}

.signin input {
  margin: 0 10px;
}

#loadingSpinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Flash message container */
.messages {
  margin-top: 20px;
}

/* Flash message styles */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
}