#totals-container {
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      justify-content: space-around; /* Space icons evenly */
      align-items: center;
  }

  .total-item {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .total-item i {
      font-size: 2.5em;
      color: #000; /* Green color for icons */
      margin-bottom: 10px;
  }

  .total-item span {
      font-size: 1.4em;
      font-weight: bold;
      color: #007BFF;
  }

  /* Specific color styling for paid and unpaid amounts */
  .paid span {
      color: #28a745; /* Green for paid amount */
  }

  .unpaid span {
      color: #dc3545; /* Red for unpaid amount */
  }

  /* Responsive design */
  @media (max-width: 600px) {
      .total-item i {
          font-size: 2em;
      }
      .total-item span {
          font-size: 1.2em;
      }
  }

/* Styling for the device cards */
.device-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 10px;
width: 90px;
text-align: center;
font-family: Arial, sans-serif;
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
/* Prevent cards from shrinking */
}

/* Hover effect for the device card */
.device-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Device name styling */
.device-name {
min-height: 32px;
max-width: 90px;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
font-size: 1em;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}

/* Session rate styling */
.device-rate {
font-size: 1.2em;
color: #666;
margin-bottom: 15px;
}

/* Button to select a device */
.select-button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 1em;
width: 100%;
}

/* Hover effect for the button */
.select-button:hover {
background-color: #0056b3;
}

/* Layout for device cards */
#deviceButtons {
display: flex;
flex-direction: row;
padding: 10px;
overflow-x: auto;
/* Enable horizontal scrolling */
white-space: nowrap;
/* Ensure cards stay in a single row */
scroll-behavior: smooth;
/* Smooth scrolling */
}

.pay-button {
background-color: #28a745;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
.session-message{
  text-align: start;
  font-size: 1em;
  color: #666;
}
.paid-message {
font-weight: bold;
color: #28a745;
}

/* Styling for session boxes */
.session-box {
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 400px;
}

.session-item-container{
  border: 2px dashed #444;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
font-family: 'Courier New', Courier, monospace;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 400px;
margin: 10px auto;
}

.session-device {
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
}

.session-time,
.session-amount {
font-size: 0.9em;
color: #555;
}

/* Styling for the container */
#todaySessions {
display: flex;
flex-direction: column;
align-items: center;
}

/* Styling for totals */
#totals {
margin-top: 20px;
font-family: 'Courier New', Courier, monospace;
font-size: 1em;
font-weight: bold;
}

/* Overall page styling */
body {
background-color: #f4f4f9;
font-family: Arial, sans-serif;
text-align: center;
}

h2 {
color: #333;
}

/* Media queries for mobile screens */
@media (max-width: 768px) {
.device-card {
  max-width: 100%;
}

.session-item-container {
  width: 90%;
}

.select-button {
  font-size: 0.9em;
}

#totals {
  font-size: 0.9em;
}
}

@media (max-width: 480px) {
.device-card {
  padding: 10px;
}

.device-name,
.device-rate {
  font-size: 0.9em;
}

.select-button {
  font-size: 0.8em;
}

.session-box {
  text-align: center;
}
}