body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #ffffff; /* Light grey background */
}

.job-board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Arial', sans-serif;
}

header {
    background-color: #771B61; /* Purple color for the header */
    color: #fff; /* White text */
    padding: 20px 0;
    width: 100%;
    text-align: center;
}

.custom-select-container {
    position: relative;
    width: 100%;
}

.type-ahead-input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.custom-select-options {
    position: absolute;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    display: none;
    z-index: 1000;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.custom-select-options li {
    padding: 8px;
    cursor: pointer;
}

.custom-select-options li:hover {
    background-color: #f0f0f0;
}

@media (max-width: 768px) {
    header {
        padding: 15px 10px; /* Reduced padding */
    }

    header h1 {
        font-size: 24px; /* Smaller font size for mobile */
        margin: 0; /* Remove default margin */
        line-height: 1.2; /* Adjust line height for better readability */
    }

    header p {
        font-size: 14px; /* Smaller font size for subtext */
        margin: 5px 0 0 0; /* Adjust margin */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 20px; /* Even smaller font size for very small screens */
    }

    header p {
        font-size: 12px; /* Smaller font size for subtext on very small screens */
    }
}

.main-content {
    display: flex;
    width: 80%;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.search-filters {
    flex-basis: 25%;
    border-right: 2px solid #e1e1e1;
    padding: 20px;
}

.custom-select {
    position: relative;
    width: 100%;
}

.select-options {
    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;
    max-height: 200px;
    overflow-y: auto;
}

.select-options div {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.select-options div:hover {
    background-color: #f1f1f1;
}

/* Style for the dropdowns */
.search-filters select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    -moz-appearance: none; /* Remove default styling for Mozilla browsers */
    appearance: none; /* Remove default styling to customize the dropdown */
    background-color: #fff;
    font-size: 14px;
}

.search-filters input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    -moz-appearance: none; /* Remove default styling for Mozilla browsers */
    appearance: none; /* Remove default styling to customize the dropdown */
    background-color: #fff;
    font-size: 14px;
}


/* Style for the slider */
.search-filters input[type="range"] {
    width: 100%;
    cursor: pointer;
    margin: 10px 0;
}

/* Style for the button */
.search-filters button {
    background-color: #771b61; /* Match the purple color */
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 20px; /* Give some space from the last filter to the button */
    font-weight: bold;
}

#upmc-logo {
    position: absolute;
    top: 30px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    width: auto;
}


.search-filters select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px;
}

.job-results {
    flex-basis: 75%;
    padding: 20px;
}

.job-results h2 {
    color: #771b61;
    border-bottom: 2px solid #771b61;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.job-results table {
    width: 100%;
    border-collapse: collapse;
}


.job-results th, .job-results td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.job-results th {
    background-color: #f2f2f2;
}

.clickable-row {
    transition: background-color 0.2s;
}

.clickable-row:hover {
    background-color: #f5f5f5;
}

.job-summary {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.job-summary p {
    margin-bottom: 1em;
}

.job-summary ul, .job-summary ol {
    padding-left: 20px;
    margin-bottom: 1em;
}

.job-summary li {
    margin-bottom: 0.5em;
    list-style-position: outside;
}

/* Ensure bullet points are visible */
.job-summary ul {
    list-style-type: disc;
}

.job-summary ul ul {
    list-style-type: circle;
}

.job-summary ol {
    list-style-type: decimal;
}

/* Preserve Unicode characters */
.job-summary span {
    unicode-bidi: embed;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.slider-label {
    font-size: 12px;
    color: #666;
}


#posted-date-slider {
    /* General slider styles remain the same */
}

input[type='range']::-webkit-slider-thumb {
    /* Style the thumb here */
}

input[type='range']::-moz-range-thumb {
    /* Style the thumb here */
}

/* Styles for IE */
input[type='range']::-ms-thumb {
    /* Style the thumb here */
}

/* Responsive design adjustments */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
        width: 95%;
    }

    .search-filters, .job-results {
        flex-basis: auto;
        width: 100%;
    }

    .search-filters {
        border-right: none;
        border-bottom: 2px solid #e1e1e1;
    }

    .search-filters button {
        margin-top: 20px;
    }
}



body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Light grey background */
}

.job-detail-container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff; /* White background for content */
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #333; /* Dark text color for the title */
}

.job-meta p {
    font-size: 14px;
    line-height: 1.6;
}

.apply-now-div {
    display: flex;
    justify-content: space-between;
}
.apply-now {
    background-color: #771b61; /* Purple background color */
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 20px 0;
}

.job-description h3 {
    margin-top: 20px;
}

.job-description ul {
    list-style-type: none; /* Removes the default list styling */
    padding: 0;
}

.job-description ul li:before {
    content: '• '; /* Add a custom bullet point */
    color: #771b61; /* Bullet point color */
    font-weight: bold; /* Bold bullet point */
}


/* Modal Form Styling */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 55%;
    height: 100%;
    overflow-y: auto;
}

.modal-header {
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

input[type='text'], input[type='file'], input[type='email'] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.modal-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button[type='submit'] {
    background-color: #771b61;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
}

#form-output {
    margin-top: 15px;
    text-align: center;
}

/* Close button for modal */
.close {
    float: right;
    cursor: pointer;
    width: 3%; /* 10% of the width of the modal */
    font-size: 28px;
    font-weight: bold;
    color: #771b61;
    text-align: right;

}

/* Error message styling */
.error-message {
    color: #d9534f; /* Bootstrap danger color for reference */
    text-align: center;
}

/* Success message styling */
.success-message {
    color: #5cb85c; /* Bootstrap success color for reference */
    text-align: center;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}

#application-form label {
    display: block;
    margin-bottom: 5px;
    color: #333; /* Match the site's text color */
}

#application-form button[type="submit"]:hover {
    background-color: darken(#771b61, 40%); /* Slightly darker on hover */
}
.checkbox-container {
    position: relative;
    margin-bottom: 10px; /* Space below the checkbox */
    padding-left: 35px; /* Space for the custom checkbox */
    min-height: 40px; /* Match the height of the input fields */
    display: flex;
    align-items: center; /* Center the label and custom checkbox */
}

/* Style for the custom checkbox label */
.checkbox-label {
    display: inline-block;
    margin-bottom: 0; /* Aligns the label with the checkbox */
    vertical-align: bottom; /* Centers the label vertically */
}
.checkbox-container {
    position: relative;
    margin-bottom: 5px; /* Increased space below the checkbox for consistency */
    padding-left: 45px; /* Adjusted space for the custom checkbox */
    min-height: 40px; /* Match the height of the input fields */
    display: flex;
    align-items: center; /* Center the label and custom checkbox */
}

/* Custom style for the student provider checkbox */
.student-provider-checkbox {
    appearance: none; /* Remove default styling */
    background-color: #fff; /* Background color */
    margin-right: 10px; /* Space between checkbox and label */
    font-size: 20px; /* Size of the custom checkbox */
    line-height: 20px; /* Adjusted line height for vertical centering */
    width: 20px; /* Width of the checkbox */
    height: 20px; /* Height of the checkbox */
    border: 1px solid #ccc; /* Border similar to input fields */
    border-radius: 4px; /* Rounded borders */
    position: absolute; /* Position the checkbox absolutely inside the container */
    left: 0px; /* Adjusted alignment to the left */
    top: 3px; /* Center vertically */
    right: 10px;
}

/* Checkmark for the custom checkbox */
.student-provider-checkbox:checked:after {
    content: '✔'; /* Unicode character for checkmark */
    color: black;
    position: absolute;
    left: 4px; /* Center the checkmark horizontally */
    top: 0px; /* Adjusted for vertical centering */
    font-size: 14px; /* Adjust the size of the checkmark if needed */
}


@media (max-width: 768px) {
    .job-detail-container {
        width: 95%;
    }
}

a {
    color: black;
    text-decoration: none;
}


/* Ensures that elements do not exceed the width of small screens */
*, *:before, *:after {
    box-sizing: border-box;
  }
  
  /* Responsive design adjustments for mobile devices */
  @media (max-width: 768px) {
      header {
          padding: 15px 5px; /* Reduced padding */
          font-size: 20px; /* Larger font size for better readability */
      }

      img {
        display: none;
    }


        /* Align the width of all input and select elements */
        .search-filters input[type="text"],
        .search-filters select,
        .search-filters input[type="range"],
        .search-filters button {
            box-sizing: border-box; /* Include padding and border in the element's total width */
            width: 100%; /* Set a common width */
            margin-bottom: 10px; /* Standardize the space below elements */
        }
    
        /* Search button specific styles */
        .search-filters button {
            padding: 12px; /* Increase padding for a touch-friendly interface */
            font-size: 16px; /* Increase font size for readability */
        }
    
    
    /* Make sure the box-sizing rule is applied globally to ensure consistency */
    *, *:before, *:after {
        box-sizing: border-box;
    }

    /* Adjust the job results area */
    .job-results {
        font-size: 14px; /* Smaller font size for content */
        padding: 0 5px; /* Reduce padding to fit the screen */
    }

    /* Make table scrollable horizontally on small screens */
    .job-results table {
        width: 100%;
        border-collapse: collapse;
    }

    .job-results th,
    .job-results td {
        padding: 8px; /* Adjust padding */
        border-bottom: 1px solid #ddd; /* Add bottom border for separation */
    }

    /* Ensure table is not wider than the screen and is scrollable */
    .job-results table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust the heading to be smaller on mobile */
    .job-results h2 {
        font-size: 18px; /* Smaller font size for mobile */
    }

    /* Adjust button styling for mobile */
    .search-filters button,
    button[type='submit'] {
        font-size: 16px; /* Larger font size for readability */
        padding: 12px; /* Larger padding for a touch-friendly interface */
    }

  
      .main-content,
      .job-detail-container,
      .modal-content {
          width: calc(100% - 20px); /* Full width with padding accounted for */
          margin: 10px; /* Add margin to all sides */
          box-shadow: none; /* Remove box shadow for a cleaner look */
      }
  
      .search-filters,
      .job-results,
      .search-filters button,
      button[type='submit'] {
          width: 100%; /* Full width */
          margin-bottom: 10px; /* Add some space between the filters and results */
      }
  
      .search-filters {
          border-bottom: 1px solid #e1e1e1; /* Add a subtle separator */
      }
  
      .job-results table {
          width: 100%; /* Ensure table is not wider than the screen */
          overflow-x: auto; /* Enable horizontal scrolling for tables */
      }
  
      /* Adjustments to form fields and buttons for better touch interaction */
      select,
      input[type="text"],
      input[type="file"],
      input[type="email"],
      input[type="checkbox"],
      button,
      .modal-input {
          padding: 12px; /* Increase padding for better touch targets */
          font-size: 16px; /* Increase font size for readability */
          margin-bottom: 15px; /* Increase margin bottom for spacing */
      }
  
      /* Adjust the logo size and position */
      #upmc-logo {
          height: 40px; /* Adjust the logo height for mobile */
          top: 10px;
          left: 10px;
      }
  
      /* Adjust the close button size and alignment for modals */
      .close {
          font-size: 24px;
          right: 10px; /* Align to the right with some padding */
          top: 10px; /* Align to the top with some padding */
      }
    }
      /* Additional adjustments for very small screens, such as in landscape mode on phones */
      @media (max-width: 480px) {
          header {
              font-size: 18px; /* Smaller font size for very small screens */
          }
  
          /* Adjust the form field text size for even better readability */
          select,
          input[type="text"],
          input[type="file"],
          input[type="email"],
          input[type="checkbox"],
          button,
          .modal-input {
              font-size: 18px; /* Slightly larger font size for readability */
          }
  
          /* Adjust padding and margins for a tighter layout */
          .main-content,
          .job-detail-container,
          .modal-content {
              margin: 5px; /* Smaller margin */
              padding: 10px; /* Smaller padding */
          }
      }
  
/* Remove the blue outline on focus for inputs and selects */
input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none; /* Removes the default blue outline */
    /* Optionally, add your own focus styles here */
}

/* iOS Safari specific styles for input and select elements */
/* Change the text field color */
input[type="text"],
input[type="email"],
input[type="date"],
select {
    -webkit-appearance: none; /* Removes default iOS styling */
    border: 1px solid #ccc; /* Example border style */
    border-radius: 4px; /* Example border radius */
    /* Add other styles to match your design */
}

/* Change the select dropdown arrow color */
select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23yourHexColorHere" ... </svg>');
    /* Make sure to replace "%23yourHexColorHere" with your hex color code, 
       preceded by '%23' which is the url encoded "#" symbol */
}

/* Change the background color of select and input elements if needed */
input[type="text"],
input[type="email"],
input[type="date"],
select {
    background-color: #fff; /* Change to the desired background color */
}

/* For the range slider, you may want to style the thumb and track */
input[type="range"] {
    /* Example styles for the track */
    background: grey;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Example styles for the thumb */
    background: #771b61;
}

.back-link {
    display: block;
    text-align: center;
    font-size: 0.9em;
    margin-top: 10px;
    color: #003087;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

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

#job-count {
    margin: 0;
}

.upmc-careers-button {
    background-color: #771B61;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

.upmc-careers-button:hover {
    background-color: #8a2a7b;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #job-count {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .upmc-careers-button {
        font-size: 14px;
        padding: 8px 15px;
    }
}

@media (max-width: 480px) {
    #job-count {
        font-size: 16px;
    }

    .upmc-careers-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

.banner {
    background-image: url('/assets/HighRes_1232386538.jpg');
    background-size: cover;
    background-position: center;
    height: 650px;
    width: 100%; /* Ensure the banner spans the full width */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.banner-text {
    padding: 30px;
    border-radius: 10px;
    max-width: 80%;
    text-align: center; /* Center the text */
    margin: 0 auto; /* Center the div */
}

.banner-text h2 {
    color: black;
    font-size: 30px;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
}
.additional-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.additional-links a {
    color: #6b1f5f;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 16px;
}

.additional-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .banner {
        height: 300px;
    }

    .banner-text h2 {
        font-size: 18px;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .upmc-careers-button {
        margin-top: 10px;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pagination button {
    background-color: #771B61; /* UPMC purple */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination span {
    margin: 0 10px;
    font-size: 16px;
}

.go-back-btn {
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 10px 15px;
    background-color: #771B61;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
}

/* Responsive adjustments for the new elements */
@media (max-width: 768px) {
    .go-back-btn {
        top: 2px;
        left: 10px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .notification {
        width: 90%;
        font-size: 14px;
    }
}

footer {
    background-color: #f5f5f5;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #666;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-content span {
        margin-bottom: 5px;
    }
}