body {
    font-family: sans-serif;
    margin: 0;
    padding: 1rem;
}

form {
    margin: 3rem;
    width: 90%;
    max-width: 40rem;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.26);
    background-color: #f9f9f9;
}

button {
    cursor: pointer;
    padding: 0.5rem 1.5rem;
    border-radius: 12px;
    background-color: blueviolet;
    color: white;
    border: 1px solid blueviolet;
}

button:hover,
button {
    background-color: indigo;
    border-color: indigo;
}

.form-control {
    margin-bottom: 1rem;
}

.form-control input {  
    width: 100%;
    padding: 0.25rem;
    font: inherit;
    border-radius: 6px;
    border: 1px solid #ccc;
    display: block;
}

.form-control input:focus {
    outline: none;
    border-color: rgb(189, 146, 228);
    box-shadow: 0 0 4px rgba(138, 43, 226, 0.5);
    font-weight: bold;
} 
.form-control label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;
}

.errorlist {
    color: rgb(148, 8, 8);
    margin: .5rem .5rem;
    padding: 0;
    list-style: none;
}

.errors input {
    border-color: rgb(118, 5, 5);
    background-color: rgba(202, 122, 122, 0.1);
}

.errors label {
    color: rgb(148, 8, 8);
}

nav {
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background-color: #c9aa63;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    border-radius: 8px;
}

.navbar-brand {
    margin-top: 5px;
}

.navbar-brand img {
    height: 50px;
    width: auto;
}

.right-aligned-item {
    margin-left: auto;

}

.logout {
    display: inline-block;
    vertical-align: text-top;
    background-color: #d1cfca;
    box-shadow: none;
    margin: 0;
    width: 100%;
    justify-content: flex-end;
    padding: 10px 15px;
    border-radius: none;
}

.nav-welcome {
    font-size: 1.5rem;
    margin-right: 1rem;
}   

.logout-button {
    font-size: 1rem;
    background-color: rgba(210, 204, 204, 0.26);
    border: none;
}

.logout-button:hover,
.logout-button:focus {
    opacity: 0.7;
}

#cart-total {
    font-size: 1.5rem;
    margin-left: 0.5rem;
    color: #c90e0e;
}

/* General table styling */
table {
  width: 100%; /* Make the table take full width of its container */
  border-collapse: collapse; /* Collapse cell borders into a single border */
  margin: 20px 0; /* Add some space above and below the table */
  font-family: Arial, sans-serif; /* Set a consistent font */
}

/* Table header styling */
thead th {
  background-color: #333; /* Dark background for headers */
  color: white; /* White text for headers */
  padding: 10px; /* Add padding inside header cells */
  text-align: left; /* Align header text to the left */
  border-bottom: 2px solid #555; /* A subtle border at the bottom of the header */
}

/* Table data cell styling */
tbody td {
  padding: 8px 10px; /* Add padding inside data cells */
  border-bottom: 1px solid #ddd; /* Light border between rows */
  text-align: left; /* Align data text to the left */
}

/* Alternating row colors (zebra striping) */
tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray background for even rows */
}

/* Hover effect for rows */
tbody tr:hover {
  background-color: #e0e0e0; /* Slightly darker background on hover */
}

/* Styling for the last row in the table body */
tbody tr:last-child {
  border-bottom: none; /* Remove the bottom border from the last row */
}

/* Optional: Add a border-radius and box-shadow to the entire table for a softer look */
table {
  border-radius: 8px;
  overflow: hidden; /* Ensures border-radius is visible */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.prod-text {
    font-size: 0.8rem;
}