body {
  background-color: #008080;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 48px;
  margin-top: 50px;
}

p {
  font-size: 24px;
  margin: 20px 0;
}

button,
input[type="submit"],
a.button {
  display: inline-block;
  margin-top: 0px;
  padding: 20px 40px;
  background-color: #fff;
  color: #008080;
  width: 275px;
  text-decoration: none;
  font-size: 19px;
  font-weight: bold;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
a.button:hover {
  background-color: #008080;
  color: #fff;
}

/* Navigation bar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #008080;
  padding: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}

nav a:hover {
  text-decoration: underline;
}

nav .logo {
  font-size: 36px;
  font-weight: bold;
}

nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav .menu a {
  margin: 0 10px;
}

@media only screen and (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  nav .logo {
    margin-bottom: 10px;
  }

  nav .menu {
    margin-top: 10px;
  }
  .input-group .form-control {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
    font-size: 17px;
  }
  .input-group {
   flex-wrap: wrap;
   justify-content: center;
  }

  nav .menu a {
    display: block;
    margin: 10px 0;
  }
}

@media only screen and (max-width: 768px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  nav .menu {
    margin: 10px 0;
  }

  nav .menu a {
    margin: 10px;
  }
}

.linklist {
  border-collapse: collapse;
  margin: 50px auto;
  width: 90%;
  border: 2px solid black;
}

.linklist thead {
  background-color: #008080;
  color: #fff;
  font-weight: bold;
}

.linklist th,
.linklist td {
  padding: 10px;
  border: 2px solid black;
  text-align: center;
}

.linklist tbody tr {
  padding: 20px;
  border-bottom: 2px solid black;
}
.linklist tbody tr:hover {
  background-color: #f2f2f2;
  color: #008080;
}
.linklist tbody td:last-child {
  text-align: center;
}
.form-control {
 font-size: 24px;
 width: 50%;
 margin: 20px 0;
 display: inline-block;
 margin-right: 10px; /* adjust spacing between input and button as needed */
 }
 .dataTables_label {
  padding: 5px;
  border-radius: 5px;
}
.textbox {
  background-color: white;
  border: 4px solid #ccc;
  align: center;
  width: 75%;
  height: 200px;
  padding-top: 5px;
  margin: 0;
}
.display-box {
  background-color: white;
  align: center;
  width: 5%;
  height: 30px;
  padding-top: 0px;
  margin: 0;
}
input, textarea {
  width: 25%;
  padding: 3px;
  margin-bottom: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
  background-color: #fff;
  color: #008080;
  border: 2px solid #008080;
  border-radius: 5px;
}

textarea {
  resize: vertical;
  height: 100px; /* Adjust the height as needed */
}

.input-group {
  display: flex;
  flex-direction: column;
}

.textarea-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* General Styles */
body.complaints-page {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f9f9f9;
  line-height: 1.6;
}

h1.complaints-page {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* Link Hover Effect */
a.complaints-page {
  text-decoration: none;
  color: #007BFF;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #0056b3;
}

/* Complaints Table Styles */
.complaints-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 8px; /* Rounded edges */
  overflow: hidden; /* Ensure rounded corners apply to inner content */
}

.complaints-table th, .complaints-table td {
  padding: 12px 15px;
  text-align: left;
  color: #1d1d1d;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

.complaints-table th {
  background-color: #007BFF;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}

.complaints-table tr:hover {
  background-color: #f1f1f1;
}

.complaints-table td a {
  color: #007BFF;
  font-weight: bold;
}

.complaints-table td a:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* Add a striped table effect */
.complaints-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Add Button Section */
.add-complaint {
  text-align: center;
  margin-top: 20px;
}

.add-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s ease-in-out;
}

.add-button:hover {
  background-color: #0056b3;
}

/* Complaints Page */
body.complaints-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.complaints-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}
body.complaints-page h1 {
  color: black;
}

/* Edit Complaint Page */
body.edit-complaint-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.edit-complaint-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}  


/* Complaints Page */
body.complaints-page input[type="text"],
body.complaints-page input[type="email"],
body.complaints-page textarea,
body.complaints-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Edit Complaint Page */
body.edit-complaint-page input[type="text"],
body.edit-complaint-page input[type="email"],
body.edit-complaint-page textarea,
body.edit-complaint-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Add Complaint Page */
body.add-complaint-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.add-complaint-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* Add Complaint Page */
body.add-complaint-page input[type="text"],
body.add-complaint-page input[type="email"],
body.add-complaint-page textarea,
body.add-complaint-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}


/* Add Complaint Page */
body.add-complaint-page textarea {
  resize: vertical;
  height: 120px;
}

body.add-complaint-page button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

body.add-complaint-page button:hover {
  background-color: #0056b3;
}
  /* Add Complaint Page Specific Styles */
  .add-complaint-page {
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
  }
  
  .add-complaint-page h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* Add Complaint Form */
  .add-complaint-form form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .add-complaint-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
  }
  
  .add-complaint-form input[type="text"],
  .add-complaint-form input[type="email"],
  .add-complaint-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  .add-complaint-form textarea {
    resize: vertical;
    height: 120px;
  }
  
  .add-complaint-form button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  
  .add-complaint-form button:hover {
    background-color: #0056b3;
  }
  

/* Complaints Page */
body.complaints-page textarea {
  resize: vertical;
  height: 120px;
}

body.complaints-page button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

body.complaints-page button:hover {
  background-color: #0056b3;
}

/* Edit Complaint Page */
body.edit-complaint-page textarea {
  resize: vertical;
  height: 120px;
}

body.edit-complaint-page button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

body.edit-complaint-page button:hover {
  background-color: #0056b3;
}
 
.edit-button:hover {
  background-color: #218838;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .complaints-table table {
      font-size: 14px;
  }

  .complaints-table th, .complaints-table td {
      padding: 8px 10px;
  }

  h1 {
      font-size: 20px;
  }

  .add-button {
      font-size: 14px;
      padding: 8px 16px;
  }
}
/* Edit Complaint Page Specific Styles */
.edit-complaint-page {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  margin: 20px;
  line-height: 1.6;
}

.edit-complaint-page h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* Edit Complaint Form */
.edit-complaint-form form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.edit-complaint-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.edit-complaint-form input[type="text"],
.edit-complaint-form input[type="email"],
.edit-complaint-form textarea,
.edit-complaint-form select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.edit-complaint-form textarea {
  resize: vertical;
  height: 120px;
}

.edit-complaint-form button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.edit-complaint-form button:hover {
  background-color: #0056b3;
}

/* "Back to Complaints" Button */
.back-to-complaints {
  text-align: center;
  margin-top: 20px;
}

.back-to-complaints .add-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s ease-in-out;
}

.back-to-complaints .add-button:hover {
  background-color: #0056b3;
}

/* "Back to Complaints" Button */
.back-to-complaints {
  text-align: center;
  margin-top: 20px;
}

.back-to-complaints .add-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s ease-in-out;
}

.back-to-complaints .add-button:hover {
  background-color: #0056b3;
}
/* Filters Section */
.filters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-box input {
  padding: 10px;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 16px;
}

.status-filter {
  display: flex;
  align-items: center;
}

.status-filter label {
  margin-right: 10px;
  font-weight: bold;
}

.status-filter select {
  padding: 8px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Optional: Adding spacing between the filters and table */
.complaints-table table {
  margin-top: 20px;
}
.complaints-table td:nth-child(3) {
  max-width: 300px; /* Adjust this value based on your design */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.complaints-summary {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.summary-box {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  color: white;
}

.open { background-color: red; }
.in-progress { background-color: orange; }
.resolved { background-color: green; }
.specific-page .button-container {
  display: flex;
  gap: 10px; /* Adjust spacing between buttons */
}

.specific-page button {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
 button[name="action"][value="update"] {
  background-color: #4CAF50; /* Green */
  color: white;
}

.specific-page button[name="action"][value="delete"] {
  background-color: #f44336; /* Red */
  color: white;
}
.complaintsmenu {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  padding: 20px;
}

.complaintsmenu a {
  color: black;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}
/* General Styles for the Pages */
body.quizpage {
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #1c1c1c; /* Dark background for a game-show vibe */
  color: #fefefe; /* Light text for readability */
}

/* Header Styling */
h1.quizpage {
  color: #f39c12; /* Gold color for premium, game-show feel */
  font-size: 50px;
  margin-top: 20px;
  font-weight: bold;
}

/* Styling for the Quiz Page */
#question {
  font-size: 32px;
  margin-top: 40px;
  color: #f39c12; /* Bright gold for question text */
  font-weight: bold;
}

/* Buttons styling (options) */
.quizpage button {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #3498db; /* Blue for vibrant look */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin: 10px 0; /* Add vertical spacing between buttons */
  width: 80%; /* You can adjust the width to fit your layout */
}

.quizpage button {
  background-color: #3498db; /* Red for quiz page */
  font-weight: bold;
  border: 2px solid #c0392b;
}

.quizpage button:hover {
  background-color: #c0392b;
  transform: scale(1.05);
}
/* Styling for the Player Name and Score */
#playerDisplay {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  color: #f39c12; /* Gold text for player name */
  font-family: 'Arial', sans-serif;
}

#score {
  font-size: 28px;
  font-weight: bold;
  margin-top: 20px;
  color: #e74c3c; /* Red for the score to stand out */
}

/* Leaderboard Style */
#leaderboard {
  color: #ffffff;
  margin-top: 40px;
}

#leaderboard ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0;
  margin: 0;
  font-size: 20px;
}

/* Styling for the GIF Image */
#reactionImage {
  display: none;
  position: fixed; /* Use fixed positioning to avoid overlap */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* Adjust to cover a decent portion of the screen */
  max-width: 500px; /* Limit maximum width for larger screens */
  z-index: 10; /* Ensure the GIF stays on top */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adding shadow for more emphasis */
}

/* Styling the Quiz Container */
#quiz-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #34495e; /* Dark gray background for quiz area */
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  width: 80%;
  margin: 0 auto;
  z-index: 1; /* Keeps quiz content in front of GIF */
  padding-bottom: 120px; /* Add more padding to avoid overlap with GIF */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  #reactionImage {
      width: 80%; /* Larger GIF on smaller screens */
      max-width: 100%; /* Allow full width on very small screens */
  }

  #quiz-container {
      width: 90%; /* Wider container for smaller screens */
      padding-bottom: 150px; /* More padding for smaller screens */
  }
}

@media (max-width: 480px) {
  #reactionImage {
      width: 90%; /* Even larger GIF on very small screens */
  }

  #quiz-container {
      width: 95%; /* Almost full width on very small screens */
      padding-bottom: 180px; /* Extra padding for very small screens */
  }
}

/* Styling for the Leaderboard */
#leaderboard h2 {
  font-size: 36px;
  color: #f39c12; /* Gold color for the leaderboard title */
  font-weight: bold;
  margin-bottom: 20px;
}
/* Styling for the Player Input Page */
#playerInput {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Full viewport height to center vertically */
  text-align: center;
  margin: 0;
  padding: 0;
}

#playerInput p {
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}

#playerInput input {
  padding: 15px;
  font-size: 32px;
  border: 2px solid #3498db;
  border-radius: 5px;
  width: 300px; /* Width of the input box */
  height: 50px; /* Height of the input box */
  text-align: center;
  margin-bottom: 20px; /* Space between input and button */
}

#playerInput button {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#playerInput button:hover {
  background-color: #27ae60;
  transform: scale(1.05);
}

#playerInput button:active {
  transform: scale(1);
}

/* Ensuring proper alignment and spacing */
#quiz-container, #playerInput {
  margin-top: 20px;
}

/* Styling for the Leaderboard on the Results Page */
#leaderboard ul li {
  background-color: #2c3e50; /* Dark background for leaderboard entries */
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-size: 24px;
  color: #ecf0f1; /* Light color for the leaderboard text */
}

#leaderboard ul li:hover {
  background-color: #34495e; /* Slight hover effect for leaderboard entries */
}

/* Positioning to Avoid GIF Overlap with Content */
#quiz-container {
  position: relative;
  padding-bottom: 80px; /* Adding space for the GIF */
}

#reactionImage {
  width: 70%; /* Making GIF larger */
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Adding depth */
}
/* Styling for the 'Start Quiz' button on the player name input page */
.start-quiz-btn {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #2ecc71; /* Green for a different look */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-top: 20px; /* Space above the button */
  width: auto; /* Make the button's width adapt to its content */
  max-width: 300px; /* Limit the button's maximum width */
  display: inline-block; /* Keeps the button inline and adjusts to content */
}

.start-quiz-btn:hover {
  background-color: #27ae60; /* Darker green on hover */
  transform: scale(1.05);
}

.start-quiz-btn:active {
  transform: scale(1);

}
.filters {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
align-items: center;
}

.search-box input {
padding: 10px;
width: 300px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 16px;
}

.status-filter {
display: flex;
align-items: center;
}

.status-filter label {
margin-right: 10px;
font-weight: bold;
}

.status-filter select {
padding: 8px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ddd;
}

/* ==================== */
/* Complaints Summary */
/* ==================== */
.complaints-summary {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}

.summary-box {
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
color: white;
}

.open { background-color: #dc3545; } /* Red */
.in-progress { background-color: #ffc107; } /* Orange */
.resolved { background-color: #28a745; } /* Green */

/* Complaints Page */
body.complaints-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.complaints-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}
body.complaints-page h1 {
  color: black;
}

/* Edit Complaint Page */
body.edit-complaint-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.edit-complaint-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}  


/* Complaints Page */
body.complaints-page input[type="text"],
body.complaints-page input[type="email"],
body.complaints-page textarea,
body.complaints-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Edit Complaint Page */
body.edit-complaint-page input[type="text"],
body.edit-complaint-page input[type="email"],
body.edit-complaint-page textarea,
body.edit-complaint-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Add Complaint Page */
body.add-enquiry-page form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.add-enquiry-page label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* Add Complaint Page */
body.add-enquiry-page input[type="text"],
body.add-enquiry-page input[type="email"],
body.add-enquiry-page textarea,
body.add-enquiry-page select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}


/* Add Complaint Page */
body.add-enquiry-page textarea {
  resize: vertical;
  height: 120px;
}

body.add-enquiry-page button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

body.add-enquiry-page button:hover {
  background-color: #0056b3;
}
  /* Add Complaint Page Specific Styles */
  .add-enquiry-page {
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
  }
  
  .add-enquiry-page h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* Add Complaint Form */
  .add-enquiry-form form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .add-enquiry-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
  }
  
  .add-enquiry-form input[type="text"],
  .add-enquiry-form input[type="email"],
  .add-enquiry-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  .add-complaint-form textarea {
    resize: vertical;
    height: 120px;
  }
  
  .add-complaint-form button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  
  .add-complaint-form button:hover {
    background-color: #0056b3;
  }
  /* General Styles for the Enquiries Management Page */
.enquiries-management-page {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
  color: #333; /* Set default text color to dark gray for better contrast */
}

.enquiries-management-page header {
  background-color: #C4BF83;
  color: white;
  padding: 1.5rem;
  text-align: center;
}

.enquiries-management-page header h1 {
  margin: 0;
  font-size: 2rem;
}

.enquiries-management-page main {
  padding: 2rem;
}

.enquiries-management-page .enquiry-form {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #333; /* Ensure text inside form is readable */
}

.enquiries-management-page .form-section {
  margin-bottom: 2rem;
}

.enquiries-management-page form legend {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #333;
}

.enquiries-management-page label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: block;
}

.enquiries-management-page input, 
.enquiries-management-page select, 
.enquiries-management-page textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fafafa; /* Light background for input fields */
  color: #333; /* Ensure text is dark for readability */
}

.enquiries-management-page textarea {
  resize: vertical;
}

.enquiries-management-page button.submit-button {
  background-color: #081a03;
  color: white;
  padding: 1rem 2rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.enquiries-management-page button.submit-button:hover {
  background-color: #6b0e83;
}

/* Back Button */
.enquiries-management-page .back-button {
  background-color: #ddd;
  padding: 1rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
}

.enquiries-management-page .back-button:hover {
  background-color: #bbb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .enquiries-management-page main {
      padding: 1rem;
  }

  .enquiries-management-page .enquiry-form {
      padding: 1rem;
  }

  .enquiries-management-page label {
      margin-bottom: 0.3rem;
  }

  .enquiries-management-page input, 
  .enquiries-management-page select, 
  .enquiries-management-page textarea {
      padding: 0.5rem;
  }
}
/* General Styles */
body.enquiries-page {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Navigation Bar */
.enquiries-page nav.chaseenquiriesmenu {
  background-color: #C4BF83; 
  padding: 12px 24px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Navigation Bar Add Enquiry */
.enquiries-management-page nav.chaseenquiriesmenu {
  background-color: #C4BF83; 
  padding: 12px 24px; 
  position: fixed;
  z-index: 1000;
  display: flex;
  border-bottom: 2px solid #1c1c1c; /* Added border */
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Floating navbar - initial state (Thinner version) */
.floating-navbar {
  position: relative;  /* Normal position before scrolling */
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto; /* Center the navbar */
  background: #C4BF83; 
  color: white;
  padding: 0.5rem 2rem; /* Reduced padding to make navbar thinner */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Add sticky class when scrolling */
.floating-navbar.sticky {
  position: fixed;  /* Fixed at the top of the screen */
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto; /* Keep it centered */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow when sticky */
  z-index: 1000;
  background: #C4BF83; 
}

/* Prevent content from hiding under navbar */
main {
    margin-top: 80px; /* Adjust based on navbar height */
}


@media (max-width: 768px) {
  .floating-navbar {
      flex-direction: column;
      text-align: center;
      padding: 0.5rem;
  }

  .floating-navbar a {
      display: block;
      padding: 0.75rem;
  }
}
.success-container {
    text-align: center;
    margin-top: 50px;
}

.button-group {
    margin-top: 20px;
}

.btn {
    padding: 10px 15px;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    margin: 5px;
}

.btn-primary {
    background-color: #007bff;
}

.btn-secondary {
    background-color: #6c757d;
}


.enquiries-page nav.chaseenquiriesmenu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  margin: 0 12px;
  transition: color 0.3s ease;
}

.enquiries-page nav.chaseenquiriesmenu a:hover {
  color: #ffcc00; /* Same hover effect as Chase Enquiries */
}

/* Main Content */
.enquiries-page main {
  padding: 24px;
  max-width: 1800px;
  margin: 0 auto;
}

.enquiries-page h1 {
  color: #087272; /* Same green tone as Chase Enquiries */
  text-align: center;
  margin-bottom: 24px;
}

/* Filters Section */
.enquiries-page .filters {
  background-color: #fff;
  padding: 24px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 24px;
}

.enquiries-page .date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-filter label {
  font-weight: bold;
  min-width: 90px;
  color: #333;
}

.date-filter input[type="date"] {
  width: 160px;
  height: 38px;
  padding: 5px;
  border: 1px solid #777;
  border-radius: 6px;
  font-size: 14px;
  transition: border 0.3s ease;
}

.date-filter input[type="date"]:focus {
  border-color: #007070;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

.clear-button, .reset-button {
  background-color: #007070;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}

.clear-button:hover, .reset-button:hover {
  background-color: #004c4c;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

.clear-button:disabled, .reset-button:disabled {
  background-color: #999999;
  cursor: not-allowed;
}

.selected-date {
  font-size: 14px;
  color: #007070;
  font-weight: bold;
}
.enquiries-page .enquiries-table {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  overflow-x: auto; 
  max-width: 100%; 
  display: block; 
}

.enquiries-page table {
  width: 100%;
  max-width: 100%; /* Prevents table from stretching beyond container */
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: auto; /* Allows columns to adjust dynamically */
}

.enquiries-page th, .enquiries-page td {
  padding: 10px 5px;
  border-radius: 8px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  word-wrap: break-word;
}
.enquiries-page td {
  line-height: 4;
}

.enquiries-page th {
  background-color: #C4BF83;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #005555
}
.enquiries-page tbody tr {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.enquiries-page tbody tr:nth-child(even) {
  background-color: #f9f9f9; /
}

.enquiries-page tbody tr:hover {
  background-color: #dbddd4; /* Lighter gray for the hover effect */
}

/* Adjust column widths */
th:nth-child(1), td:nth-child(1) { width: 10%; }
th:nth-child(2), td:nth-child(2) { width: 5%; }
th:nth-child(3), td:nth-child(3) { width: 15%; }
th:nth-child(4), td:nth-child(4) { width: 12%; }
th:nth-child(5), td:nth-child(5) { width: 15%; }
th:nth-child(6), td:nth-child(6) { width: 15%; }
th:nth-child(7), td:nth-child(7) { width: 10%; }
th:nth-child(8), td:nth-child(8) { width: 8%; }
th:nth-child(9), td:nth-child(9) { width: 5%; }
th:nth-child(10), td:nth-child(10) { width: 5%; }

/* Buttons */
.enquiries-page .edit-button, .enquiries-page .add-button {
  background-color: #054223;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}
.enquiries-page .view-button, .enquiries-page .add-button {
  background-color: #db5f69;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}

@media screen and (max-width: 600px) {
  .enquiries-table table {
      display: block;
      width: 100%;
  }

  .enquiries-table thead {
      display: none;
  }

  .enquiries-table tbody tr {
      display: block;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      padding: 10px;
      background: #fff;
  }

  .enquiries-table td {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
  }

  .enquiries-table td::before {
      content: attr(data-label);
      font-weight: bold;
      text-transform: capitalize;
  }
}

@media screen and (max-width: 768px) {
  .filters {
      flex-direction: column; 
      align-items: stretch; /* Ensures full width */
      text-align: left;
  }

  .search-box input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
  }

  .status-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .status-filter {
      width: 100%;
  }

  select {
      width: 100%;
      padding: 10px;
      font-size: 16px;
  }
}
.enquiries-page .edit-button:hover, .enquiries-page .add-button:hover {
  background-color: #6632dd;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}
.enquiries-page .view-button:hover, .enquiries-page .add-button:hover {
  background-color: #f38218;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

.enquiries-page .view-button, .enquiries-page .add-button {
  background-color: #db5f69;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}


/* Add New Enquiry Button */
.enquiries-page .add-complaint {
  text-align: center;
  margin-top: 24px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .enquiries-page .date-filter {
      flex-direction: column;
      align-items: flex-start;
  }

  .enquiries-page .date-filter input[type="date"] {
      width: 100%;
  }

  .enquiries-page .clear-button, .enquiries-page .reset-button {
      width: 100%;
      margin-top: 10px;
  }

  .enquiries-page .enquiries-table {
      overflow-x: auto;
  }
}
/* General Styles */
body.chaseenquiries-page {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Navigation Bar */
nav.chaseenquiriesmenu {
  background-color: #007070;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

nav.chaseenquiriesmenu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  margin: 0 12px;
  transition: color 0.3s ease;
}

nav.chaseenquiriesmenu a:hover {
  color: #ffcc00;
}

/* Main Content */
body.chaseenquiries-page main {
  padding: 24px;
  max-width: 1800px;
  margin: 0 auto;
}

body.chaseenquiries-page h1 {
  color: #087272;
  text-align: center;
  margin-bottom: 24px;
}

/* Date Filters Section */
.chaseenquiries-page .filters {
  background-color: #fff;
  padding: 24px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 24px;
}

.chaseenquiries-page .date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}
.chaseenquiries-page .date-filter {
  display: flex;
  align-items: stretch; /* Ensure all items stretch to the same height */
  gap: 10px;
  flex: 1 1 auto;
  min-width: 250px;
}

.chaseenquiries-page input, textarea {
  width: 25%;
  height: 35px;
  padding: 3px;
  margin-bottom: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
  background-color: #fff;
  color: #008080;
  border: 2px solid #008080;
  border-radius: 5px;
}

.date-filter label {
  padding: 5px;
  font-weight: bold;
  min-width: 100px; /* Set a fixed width for labels */
  color: #333;
  text-align: right; /* Align text to the right for a cleaner look */
  margin-right: 10px; /* Add spacing between label and input */
}

.chaseenquiries-page .date-filter input[type="date"] {
  width: 200px;
  height: 40px;
  padding: 12px 12px;
  border: 1px solid #777;
  border-radius: 6px;
  font-size: 14px;
  transition: border 0.3s ease;
}

.chaseenquiries-page .date-filter input[type="date"]:focus {
  border-color: #007070;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

.chaseenquiries-page .clear-button, .reset-button {
  background-color: #007070;
  color: #fff;
  width: 150px;
  border: none;
  height: 38px; 
  padding: 12px 12px; 
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 120px;
  text-align: center;
  box-sizing: border-box; /* Ensure consistent box sizing */
}


.clear-button:hover, .reset-button:hover {
  background-color: #004c4c;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

.clear-button:disabled, .reset-button:disabled {
  background-color: #999999;
  cursor: not-allowed;
}

.selected-date {
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
}

/* Enquiries Table */
.chaseenquiries-page .enquiries-table {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  width: 100%;
}

.chaseenquiries-page table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Fixed layout ensures consistent column widths */
}

.chaseenquiries-page th, td {
  padding: 25px; 
  text-align: center;
  border: 1px solid #ddd; /* Add borders to columns */
  white-space: nowrap;
}

.chaseenquiries-page th {
  background-color: #007070;
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #005555; /* Add a stronger border at the bottom of the header */
}

.chaseenquiries-page tr:hover {
  background-color: #e0e0e0;
}

.chaseenquiries-page td {
  border-left: 1px solid #887373; 
}

.chaseenquiries-page td:first-child {
  border-left: none; 
}

/* Buttons */
.chaseenquiries-page .edit-button, .add-button {
  background-color: #007070;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}

.chaseenquiries-page .edit-button:hover, .add-button:hover {
  background-color: #004c4c;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .date-filters {
      flex-direction: column;
      align-items: flex-start;
  }

  .date-filter {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
  }

  .date-filter input[type="date"] {
      width: 100%;
  }

  .clear-button, .reset-button {
      width: 5%;
      margin-top: 10px;
  }
}
.status-badge {
  display: inline-block;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 4px;
  color: white;
}

.status-badge.open {
  background-color: #2ecc71; /* Green */
}

.status-badge.in-progress {
  background-color: #5ca034; /* Yellow */
}

.status-badge.closed {
  background-color: #e74c3c; /* Red */
}
.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination button {
  margin: 0 5px;
  background-color: #C4BF83;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}


.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* Make the notes textarea more spacious and stylish */
.notes-textarea {
  width: 100%;
  max-width: 800px;  /* Ensures it doesn’t stretch too wide on large screens */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  resize: vertical;  /* Allows vertical resizing, but not horizontal */
  box-sizing: border-box;
  margin-top: 10px;
  height: 100px;
}

/* Optional: Add some styling for labels */
label[for="notes"] {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* Ensuring the form layout is responsive */
@media (max-width: 768px) {
  .notes-textarea {
      max-width: 100%;  /* Make it responsive for smaller screens */
  }
}

.enquiries-management-page .submit-button {
  background-color: #4CAF50; /* Green background */
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
.enquiries-management-page .submit-button:hover {
  background-color: #45a049;
}
.delete-button {
  background-color: #f44336; /* Red background */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
.delete-button:hover {
  background-color: #da190b;
}
.status-checkboxes {
  display: flex;
  gap: 15px;
  margin: 10px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #dbdbdb;
  border-radius: 4px;
  display: inline-block;
  margin-right: 8px;
  transition: 0.2s;
}

.checkbox-label input:checked + .custom-checkbox {
  background: #C4BF83;
  border-color: #C4BF83;
  box-shadow: 0 0 5px rgba(250, 250, 250, 0.5);
  position: relative;
}

.checkbox-label input:checked + .custom-checkbox::after {
  content: '\2713';
  font-size: 14px;
  color: white;
  position: absolute;
  left: 5px;
  top: 1px;
}
body.salesdataview-page h1 {
  text-align: center;
}

body.salesdataview-page table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
body.salesdataview-page {
  background-color: rgb(255, 255, 255);
}
body.salesdataview-page th,
body.salesdataview-page td {
  padding: 10px 5px;
  border-radius: 8px;
  text-align: center;
  color: black;
  border-bottom: 1px solid #ccc;
  word-wrap: break-word;
}

body.salesdataview-page th {
  background-color: #f2f2f2;
}

body.salesdataview-page form {
  margin-bottom: 20px;
}

body.salesdataview-page select {
  padding: 5px;
}
body.salesdataview-page .view-button {
  background-color: #55a0a0;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 100px;
}

body.salesdataview-page .view-button:hover {
  background-color: #f38218;
  box-shadow: 0 0 5px rgba(0, 112, 112, 0.5);
}