body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.main-body-element {
  background-color: #f5f5f5;
  padding: 1em 2em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Slight shadow for depth */
  /* max-width: 800px; You can adjust this */
  margin: 1em 2em; /* Centered on the page */
}

/* Allow the content div to grow to fill available space */
.content {
  flex: 1 0 auto;
}

.for-testing {
  color: #f44336;
}

/* Navbar (including footer)*/

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
}

.navbar-left,
.navbar-center,
.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-logo {
  width: 100px;
  height: auto;
}

.navbar-center a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.navbar-center a:hover {
  background-color: #555;
}

.login-btn,
.logout-btn {
  margin-left: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-btn {
  background-color: #4CAF50;
  color: white;
}

.logout-btn {
  background-color: #f44336;
  color: white;
}

.login-btn:hover {
  background-color: #45a049;
}

.logout-btn:hover {
  background-color: #da190b;
}

/* Footer */

footer div {
  flex-direction: column;
}

footer p,
footer a {
    color: white;
    margin: 3px 0;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ddd;
}

/* Ensure the body and html elements take up the full viewport height */
html, body {
  height: 100%;
  margin: 0;
}

.sticky-footer {
  flex-shrink: 0;
}

/* Forms */

.form-title {
  text-align: center;
}

.page-title {
    color: white;
    background-color: #1976d2;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    margin: 40px;
}

.control-form {
    padding: 0 40px;
    border-radius: 5px;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.5em
}

.form-row button,
.form-row input[type="submit"] {
    padding: 7px 15px;
    background-color: #1b75bb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 0.5em
}

.form-row button:hover,
.form-row input[type="submit"]:hover {
    background-color: #555;
}

.output {
    margin-top: 20px;
}

.success-output {
    color: green;
    margin-bottom: 10px;
}

.error-output {
    color: #f44336;
}

.form-row label {
  margin-right: 1rem;  /* Space between label and the input div */
  flex: 1;
}

.form-input-and-text {
  /* flex-grow: 1;  Take up available width */
  flex: 2;
  display: flex;
}

.form-input-and-text input,
.form-input-and-text select {
  box-sizing: border-box;  /* Ensure padding and borders are inside the width */
  padding: 5px;
  border: 1px solid #aaa;
  border-radius: 5px;
}

.form-input-and-text p {
  margin: 0 1em;
  padding: 4px;
  color: #555;
}

/* home page */

.home-content-container {
  background-color: #f5f5f5; /* Light gray background for readability */
  padding: 1em 2em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Slight shadow for depth */
  max-width: 800px; /* You can adjust this */
  margin: 2em auto; /* Centered on the page */
}

.home-content-title {
  color: #333; /* Dark gray */
  margin-bottom: 1em;
}

.home-content-text {
  color: #555; /* Medium gray */
  margin-bottom: 1em;
  line-height: 1.6;
  font-size: 1em;
}

.swap-cards {
  display: flex;
  flex-wrap: wrap; /* This allows the cards to wrap to the next row if they don't fit in the container width */
  gap: 1rem; /* Spacing between cards */
}

.swap-card {
  flex: 0 0 auto; /* This makes sure the cards don't grow or shrink but retain their size */
  border: 1px solid #ccc; /* Optional: Adding a light border around each card */
  padding: 10px; /* Optional: Some padding inside each card for better appearance */
  box-sizing: border-box; /* Ensures padding and border are included in the width and height calculations */
  width: calc(20% - 1rem); /* 20% for 5 cards in a row, minus the gap. Adjust as necessary. */
  border-radius: 0.75em;
}

.swap-card-title {
  text-align: center;
  margin:0;
}


/* Media Queries for Mobile Responsiveness */
@media (max-width: 1200px) {
  body {
    font-size: 16px; /* Increase font size for better readability on smaller screens */
  }

  .main-body-element {
    align-items: center; /* Center the content horizontally */
    padding: 1rem;
    margin: 1rem;
    max-width: 100%; /* Ensure the element doesn't exceed the screen width */
  }

  .form-row {
    flex-direction: column;
    align-items: center; /* Center the form rows vertically */
  }

  .form-row label {
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: center; /* Center the labels */
  }

  .form-input-and-text {
    flex: 1;
    justify-content: center; /* Center the input fields and text */
  }

  .form-row button {
    padding: 10px 20px;
    font-size: 1rem;
  }
}
.connect-vehicle-btn {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-top: 1em;
  margin-bottom: 40px;
}

.connect-vehicle-btn:hover {
  background-color: #45a049;
}

.connect-vehicle-btn-container {
  text-align: center;
}