319 lines
6.4 KiB
CSS
319 lines
6.4 KiB
CSS
.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 */
|
|
} |