.container {
    max-width: 100%; /* Override to make it more flexible */
    padding-left: 20px !important; /* Reduce default padding */
    padding-right: 20px !important; /* Reduce default padding */
}


/* Override Bootstrap table classes with custom colors */
.summary-table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 12px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
}

.summary-table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 12px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

.summary-table {
    margin-bottom: 10px; /* Adds space between the table and the button */
}

/* Column widths */
.summary-table th:nth-child(1), .summary-table td:nth-child(1) {
    width: 6.5%; 
}

.summary-table th:nth-child(2), .summary-table td:nth-child(2) {
    width: 6.5%; 
}

.summary-table th:nth-child(3), .summary-table td:nth-child(3) {
    width: 6.5%;  
}

.summary-table th:nth-child(4), .summary-table td:nth-child(4) {
    width: 6.5%;  
}

.summary-table th:nth-child(5), .summary-table td:nth-child(5) {
    width: 6.5%;  
}

.summary-table th:nth-child(6), .summary-table td:nth-child(6) {
    width: 6.5%;  
}

.summary-table th:nth-child(7), .summary-table td:nth-child(7) {
    width: 6.5%;  
}

.summary-table th:nth-child(8), .summary-table td:nth-child(8) {
    width: 6.5%;  
}

.summary-table th:nth-child(9), .summary-table td:nth-child(9) {
    width: 6.57%;  
}

.summary-table th:nth-child(10), .summary-table td:nth-child(10) {
    width: 6.5%;  
}

.summary-table th:nth-child(11), .summary-table td:nth-child(11) {
    width: 6.5%;  
}

.summary-table th:nth-child(12), .summary-table td:nth-child(12) {
    width: 6.5%;  
}

.summary-table th:nth-child(13), .summary-table td:nth-child(13) {
    width: 6.5%;  
}

.summary-table th:nth-child(14), .summary-table td:nth-child(14) {
    width: 6.5%;  
}

.summary-table th:nth-child(15), .summary-table td:nth-child(15) {
    width: 6.5%;  
}

#statusFilterOptions li {   
    font-size: 10px !important;
    /* padding: 5px 10px; */
}

/* #statusFilterDropdown {
    min-width: 200px !important;
} */

.dropdown-menu {
    max-height: calc(10px * 12 * 1.45); 
    overflow-y: auto;
    min-width: 220px;  
    font-size: 12px;
};

.dropdown-menu li {
    font-size: 12px;
}

.filter-search {
    height: 22px; 
    padding: 2px 6px;  
    font-size: 12px;  
}

td .dropdown {
    display: flex;           /* Use flex to control the alignment */
    justify-content: center; /* Center horizontally within the cell */
    align-items: center;     /* Center vertically within the cell */
   /* height: 100%;            /* Ensure it uses the full height of the cell */
}

.table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
    position: sticky !important;
}

.table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

/* Adjust hover effect to override Bootstrap's default */
.table tbody tr:hover {
    background-color: #f1f1f1 !important; /* Light gray background on hover */
}

/* Ensure the custom coloring for job status works */
.status-completed {
    background-color: lightgreen !important; /* Light green for completed jobs */
    color: black !important; /* Black text */
}

.status-error {
    background-color: lightcoral !important; /* Light red for jobs with errors */
    color: black !important; /* Black text */
}

.status-pending {
    background-color: lightblue !important; /* Light blue for pending jobs */
    color: black !important; /* Black text */
}

/* Column widths */
.table th:nth-child(1), .table td:nth-child(1) {
    width: 5%; 
}

.table th:nth-child(2), .table td:nth-child(2) {
    width: 6%; 
}

.table th:nth-child(3), .table td:nth-child(3) {
    width: 26%;  
}

.table th:nth-child(4), .table td:nth-child(4) {
    width: 14%;  
}

.table th:nth-child(5), .table td:nth-child(5) {
    width: 12%; 
}

.table th:nth-child(6), .table td:nth-child(6) {
    width: 14% 
}

.table th:nth-child(7), .table td:nth-child(7) {
    width: 4%; 
}

/* Override Bootstrap table classes with custom colors */
.status-proc-nested-table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
}

.status-proc-nested-table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

/* Adjust hover effect to override Bootstrap's default */
.status-proc-nested-table tbody tr:hover {
    background-color: #f1f1f1 !important; /* Light gray background on hover */
}

/* Column widths */
.status-proc-nested-table th:nth-child(1), .status-proc-nested-table td:nth-child(1) {
    width: 2%; 
}

.status-proc-nested-table th:nth-child(2), .status-proc-nested-table td:nth-child(2) {
    width: 10%; 
}

.status-proc-nested-table th:nth-child(3), .status-proc-nested-table td:nth-child(3) {
    width: 7%;  
}

.status-proc-nested-table th:nth-child(4), .status-proc-nested-table td:nth-child(4) {
    width: 10%;  
}

.status-proc-nested-table th:nth-child(5), .status-proc-nested-table td:nth-child(5) {
    width: 20%;  
}

.status-proc-nested-table th:nth-child(6), .status-proc-nested-table td:nth-child(6) {
    width: 2%;  
}

.action-buttons-container {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); /* Two buttons per row */ 
    gap: 5px; /* Space between buttons */
    justify-content: center !important;
    align-items: center !important;
}

/* Explicit button styles */
.action-buttons-container .btn {
    background-color: grey;  /* Button background color */
    color: white;  /* Button text color */
    padding: 10px;  /* Padding for the button */
    border-radius: 5px;  /* Rounded corners */
    border: 1px solid black;  /* Add border outline */
    width: 100%;  /* Ensure buttons take full width of grid column */
    text-align: center; /* Center text inside buttons */
}

.action-buttons-container .btn:hover {
    background-color: darkgrey;  /* Change button color on hover */
    cursor: pointer;  /* Pointer cursor on hover */
}


/* Override Bootstrap table classes with custom colors */
.job-detail-table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
}

.job-detail-table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

/* Adjust hover effect to override Bootstrap's default */
.job-detail-table tbody tr:hover {
    background-color: #f1f1f1 !important; /* Light gray background on hover */
}

/* Column widths */
.job-detail-table th:nth-child(1), .job-detail-table td:nth-child(1) {
    width: 4%; 
}

.job-detail-table th:nth-child(2), .job-detail-table td:nth-child(2) {
    width: 8%; 
}

.job-detail-table th:nth-child(3), .job-detail-table td:nth-child(3) {
    width: 3%;  
}

.job-detail-table th:nth-child(4), .job-detail-table td:nth-child(4) {
    width: 3%;  
}

.job-detail-table th:nth-child(5), .job-detail-table td:nth-child(5) {
    width: 3%;  
}

.job-detail-table th:nth-child(6), .job-detail-table td:nth-child(6) {
    width: 4%;  
}

.job-detail-table th:nth-child(7), .job-detail-table td:nth-child(7) {
    width: 4%;  
}

.job-detail-table th:nth-child(8), .job-detail-table td:nth-child(8) {
    width: 28%;  
}

.job-detail-table th:nth-child(9), .job-detail-table td:nth-child(9) {
    width: 5%;  
}

/* Override Bootstrap table classes with custom colors */
.process-detail-table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
    position: sticky !important;
}

.process-detail-table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

/* Adjust hover effect to override Bootstrap's default */
.process-detail-table tbody tr:hover {
    background-color: #f1f1f1 !important; /* Light gray background on hover */
}

/* Column widths */
.process-detail-table th:nth-child(1), .process-detail-table td:nth-child(1) {
    width: 5%; 
}

.process-detail-table th:nth-child(2), .process-detail-table td:nth-child(2) {
    width: 5%; 
}

.process-detail-table th:nth-child(3), .process-detail-table td:nth-child(3) {
    width: 4%;  
}

.process-detail-table th:nth-child(4), .process-detail-table td:nth-child(4) {
    width: 5%;  
}

.process-detail-table th:nth-child(5), .process-detail-table td:nth-child(5) {
    width: 5%;  
}

.process-detail-table th:nth-child(6), .process-detail-table td:nth-child(6) {
    width: 4%;  
}

.process-detail-table th:nth-child(7), .process-detail-table td:nth-child(7) {
    width: 4%;  
}

.process-detail-table th:nth-child(8), .process-detail-table td:nth-child(8) {
    width: 5%;  
}

.process-detail-table th:nth-child(9), .process-detail-table td:nth-child(9) {
    width: 5%;  
}

.process-detail-table th:nth-child(10), .process-detail-table td:nth-child(10) {
    width: 5%;  
}

.process-detail-table th:nth-child(11), .process-detail-table td:nth-child(11) {
    width: 20%;  
}

.process-detail-table th:nth-child(12), .process-detail-table td:nth-child(12) {
    width: 5%;  
}

/* Override Bootstrap table classes with custom colors */
.dependency-table thead th {
    background-color: #347d83 !important;  /* Blue background for table headers */
    color: white !important;  /* White text for better contrast */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd;  /* Light border for header cells */
}

.dependency-table tbody td {
    background-color: #f8f9fa !important; /* Light gray background for table cells */
    color: black !important; /* Black text */
    font-size: 14px;  /* Slightly larger font size for headers */
    border: 1px solid #ddd; /* Light border for table cells */
}

/* Adjust hover effect to override Bootstrap's default */
.dependency-table tbody tr:hover {
    background-color: #f1f1f1 !important; /* Light gray background on hover */
}

/* Column widths */
.dependency-table th:nth-child(1), .dependency-table td:nth-child(1) {
    width: 3%; 
}

.dependency-table th:nth-child(2), .dependency-table td:nth-child(2) {
    width: 3%; 
}

.dependency-table th:nth-child(3), .dependency-table td:nth-child(3) {
    width: 3%;  
}

.dependency-table th:nth-child(4), .dependency-table td:nth-child(4) {
    width: 3%;  
}

.dependency-row {
    margin-bottom: 5px; /* Adjust the value as needed for more or less spacing */
}

#loadingOverlay {
    display: none; /* Hidden by default */
}

#loadingOverlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #414344 !important;
}
#loadingText {
    font-size: 1.25rem;
    color: #414344 !important;
}

/* Log Table Styling (matches job/status table) */
.log-table thead th {
    background-color: #347d83 !important;  /* Status-style blue */
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

.log-table tbody td {
    background-color: #f8f9fa !important;
    border: 1px solid #ddd;
    vertical-align: top;
    word-break: break-word;
    white-space: pre-wrap;
}

.log-table tbody tr:hover {
    background-color: #e8f1f3;
}

/* Column widths */
.log-table th:nth-child(1),
.log-table td:nth-child(1) {
    width: 70%;
    max-width: 700px;
    overflow-wrap: break-word;
}

.log-table th:nth-child(2),
.log-table td:nth-child(2) {
    width: 5%;
    text-align: left;
}
.log-table th:nth-child(3),
.log-table td:nth-child(3),
.log-table th:nth-child(4),
.log-table td:nth-child(4) {
    width: 10%;
    text-align: left;
}

/* Wrapper for scrollable table */
.table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
}

/* Optional: Improve spacing and alignment for filters/buttons */
#log .form-label {
    font-weight: 600;
}
/********************************************************************************************************/

/* profilePage Styling */
#profilePage {
    display: flex;
    justify-content: flex-start; 
    max-width: 100%; 
    margin: 30px auto;
    padding: 20px;
}

/* Tile Styles */
.tile {
    width: 280px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.tile:focus {
    outline: 2px solid #347d83; /* Provide focus indication for accessibility */
}

/* .tile:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
} */

.tile-header {
    font-size: 14px;
    font-weight: bold; 
    color: #414344;
    text-align: center;
}

/* Expanded Tile Content */
.tile-content {
    margin-top: 15px;
    display: none;
}

.tile-content.expanded {
    display: block;
    animation: fadeIn 0.3s ease-in-out; /* Smooth expansion animation */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Password Requirements Styling */
.requirements-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #555;
}

.requirements-list li {
    font-size: 14px;
    color: #414344;
}

.requirements-list li.valid {
    color: green;
}

.requirements-list i {
    margin-right: 5px;
}

/* Password Progress Bar Styling */
.password-progress-bar {
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin-top: 10px;
    overflow: hidden;
}

.password-progress-bar .progress {
    height: 4px;
    width: 0;
    background-color: green;
    transition: width 0.3s ease-in-out;
}

/* Update Password Button Styling */
#submitPasswordChange {
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#submitPasswordChange:hover {
    background-color: #333;
}