/* Message Box Styling */
.main-container{
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 15px;
}
@media only screen and (min-width: 1400px) {
  .main-container{
      max-width: 1342px;
      margin-left: auto;
      margin-right: auto;
  }
}
.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  display: none; /* Hidden by default */
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.message-box p {
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.message-box button {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.message-box button:hover {
  background-color: #45a049;
}

/* Table specific styles for responsiveness and appearance */
.table-container {
  overflow-x: auto; /* Ensures horizontal scrolling on small screens if table is too wide */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  background-color: #ffffff; /* bg-white */
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Ensures table doesn't get too squished on small screens */
}

th,
td {
  padding: 1rem; /* p-4 */
  text-align: left;
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

th {
  background-color: #e5e7eb; /* bg-gray-200 */
  font-weight: 600; /* font-semibold */
  color: #374151; /* text-gray-700 */
  text-transform: uppercase;
  font-size: 0.875rem; /* text-sm */
}

tbody tr:nth-child(even) {
  background-color: #f9fafb; /* bg-gray-50 for zebra striping */
}

tbody tr:hover {
  background-color: #f3f4f6; /* bg-gray-100 on hover */
}

.text-gray-900 {
  color: #111827;
}
.text-gray-700 {
  color: #374151;
}
.text-sm {
  font-size: 0.875rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.text-center {
  text-align: center;
}
.text-lg {
  font-size: 1.125rem;
}
.text-gray-600 {
  color: #4b5563;
}

/* Apply Button Styles */
.apply-button {
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.375rem; /* rounded-md */
  font-weight: 600; /* font-semibold */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: none;
  white-space: nowrap; /* Prevent button text from wrapping */
  color: #ffffff; /* text-white */
}

/* Specific button colors for dynamic rendering */
.bg-blue-600 {
  background-color: #2563eb;
}
.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.bg-green-600 {
  background-color: #059669;
}
.hover\:bg-green-700:hover {
  background-color: #047857;
}

.bg-yellow-600 {
  background-color: #d97706;
}
.hover\:bg-yellow-700:hover {
  background-color: #b45309;
}

.bg-red-600 {
  background-color: #dc2626;
}
.hover\:bg-red-700:hover {
  background-color: #b91c1c;
}

.bg-purple-600 {
  background-color: #7c3aed;
}
.hover\:bg-purple-700:hover {
  background-color: #6d28d9;
}

.bg-indigo-600 {
  background-color: #4f46e5;
}
.hover\:bg-indigo-700:hover {
  background-color: #4338ca;
}

.main-container > .heading {
  padding: 20px 0px;
}

#messageText{
  color: #ffffff;
}