.popout-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%; /* Increase width for larger screens */
  height: 100%;
  background-color: #fff;
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(0); /* Ensure visibility by default */
  transition: transform 0.3s ease-in-out;
  z-index: 1000; /* Ensures it is above other elements */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .popout-panel {
    width: 100%; /* Use full width for smaller screens */
    height: 100%; /* Cover full height */
    left: 0; /* Ensure it appears on the left for mobile */
    right: unset; /* Override right alignment */
  }

  .schools-offering {
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
  }
}

/* Close button adjustments for mobile */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  z-index: 1001; /* Keep button above the panel */
}

/* Job Description and Expected Tasks section */
.section {
  margin-bottom: 20px;
}

.job-description,
.expected-tasks {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* Expected Tasks Styling */
.expected-tasks {
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-top: 20px;
}

.expected-tasks ul {
  list-style-position: inside; /* Move the bullets inside, aligning them with text */
  padding-left: 20px; /* Add space between the bullet and the text */
  margin: 0;
  text-align: left; /* Align the text to the left */
}

.expected-tasks li {
  margin-bottom: 15px; /* Space between each task */
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 1rem;
}

/* Title and task text styling */
.expected-tasks h3 {
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

.expected-tasks p {
  font-size: 1rem;
  color: #666;
}

/* Schools section: Grid layout with clear separation */
.schools-offering {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Adjust the minimum size of each column */
  gap: 20px; /* Space between columns */
  margin-top: 20px;
  width: 100%; /* Ensure it uses full width of its container */
  text-align: center;
  justify-content: center; /* Centers grid elements horizontally */
}

.no-schools-message {
  text-align: center;
  width: 100%;
  grid-column: 1 / -1; /* Forces the message to span all columns */
  justify-self: center; /* Centers text horizontally */
  align-self: center; /* Centers text vertically */
  font-style: italic; /* Optional: Stylize the message */
  padding: 20px 0; /* Adds spacing */
}

.schools-offering .school-card {
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.schools-offering .school-card div {
  margin-bottom: 8px;
}

.school-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Salary Data Section */
.salary-data {
  margin-top: 20px;
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.salary-data table {
  width: 60%;
  border-collapse: collapse;
  margin: 0 auto 20px; /* This centers the table */
}

.salary-data th, .salary-data td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.salary-data th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.salary-data td {
  font-size: 1rem;
  text-align: center; 
}

.salary-data td:last-child {
  text-align: center;
}

/* Economic Projections Section */
.economic-projections {
  margin-top: 20px;
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.economic-projections ul {
  padding-left: 20px;
  list-style-position: inside;
  font-size: 1rem;
  margin: 0;
}

.economic-projections li {
  margin-bottom: 10px;
}

/* Loan Repayment Section Styling */
.loan-repayment-container {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
}

.loan-repayment-fields label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1rem;
}

.loan-repayment-fields input,
.loan-repayment-fields select {
  height: 40px;
  padding: 0 10px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.loan-repayment-fields button {
  width: 100%;
  padding: 12px;
  height: 45px;
  margin-top: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  text-align: center;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.loan-repayment-fields button:hover {
  background-color: #45a049;
}

.loan-repayment-fields button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.loan-repayment-fields {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loan-repayment-fields input,
.loan-repayment-fields select,
.loan-repayment-fields button {
  margin-top: 5px;
  margin-bottom: 10px;
}

.loan-repayment-fields h3 {
  text-align: center;
  margin-bottom: 20px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  text-align: right; /* Centers the button text */
}

/* Comparison Section Styling */
.school-comparison-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Dynamic columns */
  gap: 20px; /* Space between cards */
  margin-top: 20px;
  width: 100%; /* Ensure it uses full width of its container */
}

.school-comparison {
  display: grid;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.school-comparison h4 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Section Title Styling */
h3 {
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}


a {
  color: #1a73e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Fix for overflow issue */
html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}