/* Global Styles */
body {
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* Style the container for the calculator */
#calculator-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Section Titles */
#calculator-container h2 {
  margin-bottom: 10px;
}

/* Flexbox for input fields and labels */
section div {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* Ensures the labels are aligned and spaced properly */
label {
  flex: 1; /* Takes available width */
  font-size: 16px;
}

/* Ensures the inputs line up consistently */
input, select {
  flex: 1; /* Takes remaining space */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Specific styling for number inputs */
input[type="number"] {
  width: 100%;
}

/* Specific styling for range inputs */
input[type="range"] {
  width: 100%; /* Make the slider full width */
  margin-top: 10px; /* Add some space above the slider */
  padding: 0;
}

/* Spacing for the value display */
span {
  margin-left: 10px; /* Space between the slider and the displayed value */
}

/* Reserve space for the slider value */
.slider-value {
  display: inline-block; /* Keep it inline */
  width: 40px; /* Set a fixed width (adjust as needed) */
  margin-left: 10px; /* Space between the slider and the value */
  text-align: right; /* Align text to the right */
  font-size: 16px; /* Match the font size of your inputs */
}

/* Tooltip styling */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  color: #4CAF50; /* Match the primary theme color */
  margin-top: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px; /* Increased width for better readability */
  background-color: #333; /* Darker background for better contrast */
  color: #fff; /* White text for better readability */
  text-align: center;
  border-radius: 8px; /* Softer border radius */
  padding: 10px; /* Increased padding for better spacing */
  position: absolute;
  z-index: 1;
  bottom: 150%; /* Adjusted position above the tooltip */
  left: 50%;
  margin-left: -125px; /* Center the tooltip */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Smooth transition */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  font-size: 14px; /* Increase font size for readability */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Optional: Add an arrow pointing down */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; /* Position the arrow below the tooltip box */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent; /* Arrow pointing down */
}

/* Button styles */
button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

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

/* Results section */
#results {
  margin-top: 20px;
}

.navbar {
  overflow: hidden;
  background-color: #fff;
  border-bottom: 1px solid #333333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav-right {
  float: right;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #f4f4f4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #555555;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.topnav-right {
  float: right;
}

/* Style the container for the form */
form {
  max-width: 400px;
  margin: 0 auto; /* Center the form */
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Style for the labels and inputs to stack */
form label {
  display: block; /* Ensures each label is on a new line */
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
}

form input {
  width: 100%; /* Inputs take full width of the form */
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Style the button */
form button {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background-color: #45a049;
}

/* Optional: Styling for the error message */
em {
  color: red;
  display: block;
  margin-bottom: 10px;
}

/* Center the h1 and add spacing */
h1 {
  text-align: center;
  margin: 20px 0; /* Adds space above and below the heading */
  padding: 0 20px; /* Adds padding on the left and right */
}

/* About Page: Employee container with horizontal scrolling */
#employee-container {
  display: flex;
  overflow-x: auto;
  padding: 20px;
  white-space: nowrap;
  justify-content: center; /* Centers the container */
  margin: 0 auto; /* Centers the container horizontally */
  width: 80%; /* Adjust as needed */
}

/* Each employee profile */
.employee-profile {
  flex: 0 0 auto;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-right: 15px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 200px; /* Ensures a max width for the profile */
  word-wrap: break-word; /* Ensures text wraps within the profile */
  white-space: normal; /* Allows wrapping */
}

/* Employee description */
.description {
  font-size: 12px;
  margin-top: 10px;
  color: #777;
  word-wrap: break-word; /* Ensures text wraps to the next line */
  white-space: normal; /* Ensures wrapping for long words */
}

/* Employee images */
.employee-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Makes the image a circle */
  object-fit: cover;
  margin-bottom: 10px;
}

/* Employee name */
.employee-profile h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

/* Employee job title */
.employee-profile p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* Events Section Styles */
#events-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#events-container h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #333;
}

.event {
  position: relative; /* Allows the absolute positioning of child elements */
  margin-bottom: 30px; /* Spacing between events */
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Event Title */
.event-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #4CAF50;
}

/* Event Date */
.event-date {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

/* Event Description */
.event-description {
  font-size: 16px;
  margin-bottom: 15px;
  color: #666;
  line-height: 1.5;
}

/* Event Details/Requirements */
.event-details {
  background-color: #eee;
  padding: 10px;
  border-left: 4px solid #4CAF50;
  font-size: 14px;
  color: #555;
  border-radius: 4px;
}

/* Updated Button styles for the events page */
.button {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.enroll {
  background-color: #4CAF50; /* Matches the theme */
  color: white;
}

.unenroll {
  background-color: #f28b82; /* Soft red shade for unenroll */
  color: white;
}

.button:hover {
  opacity: 0.9; /* Slight opacity on hover */
}

/* Add specific hover effect for the unenroll button */
.unenroll:hover {
  background-color: #e57373; /* A lighter shade of red for hover */
}

/* Attendee count box styling */
.attendee-count {
  position: absolute; /* Allows positioning in the top right */
  top: 20px; /* Adjust based on your layout */
  right: 20px; /* Adjust based on your layout */
  background-color: #f9f9f9; /* Background color for the box */
  border: 1px solid #ddd; /* Border for the box */
  border-radius: 5px; /* Rounded corners */
  padding: 10px 15px; /* Padding around the text */
  font-weight: bold; /* Make the text bold */
  color: #333; /* Text color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
  z-index: 10; /* Ensure it stays on top */
}