/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Basic styles for the body */
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Make sure the page takes full viewport height */
  color: #333; /* Set the default text color to white */
  background-color: white; /* Set a dark background for the body */
}


main {
  flex: 1; /* This ensures the main content area expands to take available space */
  padding: 20px;
  
}

/* Table styles */

/* page table */
.pageTable {
  width: 99%;
  border-collapse: collapse;
  margin: 20px 0;
}

.pageTable th {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
  background-color: #333;
  color: white;
}

.pageTable td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.pageTable th {
  background-color: #444; /* Slightly darker background for table headers */
}

.pageTable td.idField {
  font-size: 9px;
  max-width: 40px;
  overflow: hidden;
}

/* form table */
.formTable {
  border-collapse: collapse;
  border: 0px transparent white;
  padding: 20px 0
}
.formTable td:nth-child(1) {
  padding: 8px 12px;
  border: 0 transparent white;
  text-align: left;
  font-weight: bold;
  color: black;
  font-size: 14px;
}


.formTable td input {
  font-size: 18px !important;
}


/* Header and Footer styles */
header, footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* Styling for the header links (nav) */
header nav {
  display: flex; /* Ensure horizontal layout */
  align-items: left; /* Vertically center the navigation items */
  width: 100%; /* Ensure nav occupies full width of the screen */
  padding: 5px 20px 0 20px; /* Add some padding to top and bottom */
  white-space: nowrap;
}


header a {
  color: white; /* Make all links in the header white */
  text-decoration: none; /* Remove underline from links */
  padding: 8px 12px;
}

header a:hover {
  color: #f0f0f0; /* Lighter color on hover */
}

/* Footer link styles */
footer a {
  color: white; /* Make all links in the footer white */
  text-decoration: none; /* Remove underline from links */
}

footer a:hover {
  color: #f0f0f0; /* Lighter color on hover */
}

/* Footer positioning */
footer {
  margin-top: auto; /* This pushes the footer to the bottom */
}

/* Additional styling for footer if needed */
footer p {
  font-size: 14px;
}

.centered-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* Full height of the viewport */
  background-color: white; /* Light background color */
  margin: 0;
  font-family: Arial, sans-serif;
}

.all-width{
  width: 100%;
  flex: 1;
  height: 100%;
}


.center-to-width {
  margin: 0 auto; /* Centers the div horizontally */
  width: 50%;     /* Set a desired width for the div */
  background-color: white; /* Optional: background color for better visibility */
  text-align: center; /* Optional: centers text inside the div */
}


.search-ctrl{
  min-width: 400px;
  width: 40%;
  font-size: 24px;

}

/* Full-screen overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
}

/* Spinner */
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Prevent interaction */
.no-interaction {
  pointer-events: none; /* Disables all interactions */
}



.container {
      margin-bottom: 20px; /* Adds vertical spacing between containers */
      padding: 30px; /* Optional: Adds internal padding within each container */
    }
    .table.table-striped {
      width: 100%;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      font-size: 14px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .table.table-striped thead {
      background-color: #f8f9fa;
      color: #333;
    }

    .table.table-striped th {
      padding: 12px;
      border-bottom: 2px solid #dee2e6;
      text-align: left;
    }

    .table.table-striped tbody tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .table.table-striped tbody tr:nth-child(odd) {
      background-color: #ffffff;
    }

    .table.table-striped td {
      padding: 10px;
      border-bottom: 1px solid #dee2e6;
    }

    .nested-table {
      width: 100%;
      border-collapse: collapse;
      background-color: #f8f9fa;
      font-size: 13px;
    }

    .nested-table thead {
      background-color: #e9ecef;
    }

    .nested-table th {
      padding: 8px;
      border-bottom: 1px solid #dee2e6;
      text-align: left;
    }

    .nested-table td {
      padding: 8px;
      border-bottom: 1px solid #dee2e6;
    }

    .table.table-striped img {
      max-width: 100px;
      height: auto;
      border-radius: 4px;
    }

    .table.table-striped a {
      color: #007bff;
      text-decoration: none;
    }

    .table.table-striped a:hover {
      text-decoration: underline;
    }

    .btn.btn-danger {
      padding: 6px 12px;
      background-color: #dc3545;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn.btn-danger:hover {
      background-color: #c82333;
    }