/* custom table */
/* IMPOSSIBLE TO SOLVE THE TH TR ALIGNMENT PROBLEM */
/* IMPOSSIBLE TO EDIT THE TR HEIGHT LIMIT*/ 
/* FUCK EDITING ANY CSS */


.custom-table thead th {
  background-color: #31343d;
  color: #ffffff; 
  text-transform: capitalize; /* Capitalizes the first letter of each word */
}

.example-table thead th {
  background-color: #e7e9ee;
  color: #474444;
  text-transform: capitalize;
}

.validated-table thead th {
  background-color: #31343d;
  color: #ffffff; 
  text-transform: capitalize;
}


/* Custom Upload Wrapper */
.custom-upload-wrapper {
  height: auto;
  max-height: 400px;
  overflow-y: auto; /* Enables scrolling if there are many files */
  padding: 10px;
}

/* Individual file item */
.file-item {
  border: 1px solid #ddd; /* Border around each file item */
  border-radius: 4px;
  display: inline-block; /* Align items side by side */
  margin: 5px; /* Space between items */
  padding: 10px;
  width: calc(25% - 10px); /* Four items per row, accounting for margin */
  box-sizing: border-box; /* Include padding and border in the width */
  vertical-align: top; /* Align items to the top */
  background-color: #f9f9f9; /* Slight gray background */
  height: 100px;
}

/* The remove button */
.file-remove-btn {
  display: block; /* Full-width block element */
  margin-top: 10px; /* Space from the file name */
  background-color: #ff4d4d; /* Red background for the remove button */
  color: white; /* White text color */
  text-align: center;
  border: none;
  border-radius: 4px;
  padding: 5px 10px; /* Padding on top and bottom, left and right */
  cursor: pointer;
  margin-bottom: 5px; /* Margin at the bottom */
}

/* Style for the file input area */
.custom-upload-area {
  text-align: center; /* Center the text inside the upload area */
  cursor: pointer; /* Change cursor to indicate clickable area */
  background-color: #eee; /* Light gray background */
  border: 2px dashed #ccc; /* Dashed border */
  border-radius: 4px;
  padding: 20px; /* Padding inside the upload area */
  margin-bottom: 10px; /* Space below the upload area */
}

/* Style when a file is being dragged over the area */
.custom-upload-area.dragover {
  background-color: #c8e6c9; /* Light green background to indicate drag over */
  border-color: #4caf50; /* Green border */
}


/* Notifications */
.notification-area {
  position: fixed;
  top: 10%; /* Adjust as needed */
  right: 10px;
  width: 300px;
  max-height: 30%;
  overflow-y: auto;
  z-index: 1050;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.success {
  background-color: #d4edda;
}

.notification-item.info {
  background-color: #d1ecf1;
}

.notification-item.warning {
  background-color: #fff3cd;
}

.notification-item.error {
  background-color: #f8d7da;
}

.close-notification {
  background: none;
  border: none;
  font-size: 1.2rem;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}