body {
    font-family: Arial, sans-serif;
}

.login-container, .dashboard-container {
    width: 90%;
    max-width: 1200px; /* Increased max-width for dashboard-container */
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

button, .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    border: none;
    cursor: pointer;
}

.btn {
    width: 100%;
    box-sizing: border-box;
}

.flash {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.flash.error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px; /* Smaller font size for table */
}

th, td {
    border: 1px solid #ddd;
    padding: 15px; /* Adjusted padding */
    text-align: left;
}

tr:nth-child(even) {background-color: #f2f2f2;}

th {
    background-color: #04AA6D;
    color: white;
    padding: 8px; /* Slightly larger padding for header */
}

.btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #343a40;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn-back:hover {
    background-color: #0056b3;
}

.label-dark-red {
    color: darkred;
    font-weight: bold;
}

/* Add this to your CSS file */
.input-number {
    width: 100%;
    max-width: 400px;
    height: 40px;
    font-size: 16px; /* Adjust as needed for bigger text */
    font-weight: bold;
    border: 1px solid #ccc; /* Optional: adds a border to the input */
    border-radius: 4px; /* Optional: rounds the corners of the input field */
    padding: 5px 10px; /* Adds some padding inside the input field */
}

.update-button {
    height: 40px;
    cursor: pointer;
}

.orders-money, .time-elapsed {
    font-weight: bold;
    font-size: 20px;
}

/* New or modified styles */

/* Make 'Sales:' and 'time-elapsed' text larger */
.orders-money {
    color: #333; /* Default text color, adjust as needed */
}

/* Adjust 'Yesterday Sales:', 'Last Week Sales:', and 'Last Month Sales:' to not be green */
.standard-text {
    color: #333; /* Default text color */
    font-weight: normal;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: space-around; /* Space items nicely */
    gap: 20px; /* Space between items */
}

.a {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: space-around;/* Align items to the start (left) */
    gap: 20px; /* Space between items */
}

#summary-container {
    margin-bottom: 20px;
}

.summary-flexbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    width: auto; /* Adjust based on content */
    margin: 0 auto 20px; /* Added bottom margin */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-width: 100%; /* Limit the maximum width */
    text-align: center; /* Centers the text inside the flex item */
}

.summary-item {
    display: flex; /* Align items in a row */
    align-items: center;
    gap: 10px; /* Space between items */
    flex-wrap: wrap; /* Ensure content wraps on small screens */
    width: 100%; /* Full width to fit the container */
    border-bottom: 1px solid #ddd;  /* Optional: adds a border between items */
}

.mystery-drink-message {
    display: block; /* Forces the element to behave like a block element, starting on a new line */
    width: 100%; /* Ensures it takes up the full width of the parent container */
    text-align: left; /* Left-aligns the text */
}

.location-name strong {
    color: blue;
    font-weight: bold;
    font-size: 1.5em; /* Adjust the size as needed */
}

.orders-money {
    color: green;
    font-weight: bold;
}

.last-order-time {
    color: black; /* Default color, can omit if black is already the default */
}


.time-elapsed.green { color: green; }
.time-elapsed.orange { color: orange; }
.time-elapsed.red { color: red; }

.status.online_colour {
    color: rgb(21, 221, 55); /* or use a specific hex code like #90ee90 */
}

.btn-delete {
    background-color: #ff4c4c;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.btn-delete:hover {
    background-color: #ff1a1a;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bold-green {
    color: green;
    font-weight: bold;
}

.highlighted {
    border: 2px solid green;
}

.form-group {
    margin-bottom: 15px;
}