/* this */

.table-container {
  overflow-x: auto;
}

/* Default styles for the table */
.calendar {
  width: 100%;
  padding: 10px;
  /* Add other styles as needed */
}

/* Styles for smaller screens (Mobile devices) */
@media (max-width: 767px) {
/* Adjust table styles for smaller screens here */

.btn-sm {
font-size: 12px;
}
.table td,
.table th,
.table .btn {
 padding: 5px;
 margin: 0;
 }

.calendar {
 width: 100%;
 padding: 10px;
}

.btn-sm {
  font-size: 10px;
}

}

.booked-btn {
  background-color: rgb(236, 8, 8) !important;
  color: white;
  padding: 6px 12px; 
  font-size: 14px; 
}

/* Custom styles for the buttons */
.btn-booking {
  background-color: rgb(21, 138, 31); 
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-booking:hover {
  transform: scale(1.1);
    background-color: rgb(21, 138, 31); 
    color: white;
}

.btn-week {
    background-color: rgb(21, 138, 31);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-right: 20px;
}

.btn-week:hover {
    transform: scale(1.1);
    background-color: rgb(21, 138, 31);
    color: white;
}

.btn-week2 {
    background-color: rgb(21, 138, 31);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-week2:hover {
    transform: scale(1.1);
    background-color: rgb(21, 138, 31);
    color: white;
}


  .btn-logout {
  background-color: rgb(240, 5, 5); 
  color: white;
  border: none; 
  cursor: pointer;
  transition: transform 0.2s ease;
    margin-right: 5px;
  }

  .btn-logout:hover {
      transform: scale(1.1);
      background-color: rgb(240, 5, 5); 
      color: white;
    }



/* Reduce font size for the table */
table {
    font-size: 13px;
}

/* Reduce font size for the button text */
.btn-sm {
    font-size: 12px;
}

/* Remove unnecessary margins and padding */
.table td,
.table th,
.table .btn {
    padding: 10px;
    margin: 0;
}

/* Abbreviate the day names in the table header */
.table thead th {
    text-transform: uppercase;
}

/* Truncate button text if it's too long */
.btn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Adjust table cell height to make rows more compact */
.table td {
    height: 10px;
}

/* Custom CSS for the "Unavailable" buttons */
.unavailable-btn {
  pointer-events: none;
  /* You can add more styles to customize the appearance of the "Unavailable" buttons */
  /* For example, you can set a different background color or text color */
  background-color: gray;
  color: white;
}