body {
    background-color: #f4f4f4!important;
  }
  
.background-image {
    position: relative; /* Ensure the pseudo-element is positioned relative to the section */
    background-image: url('../images/partner-banner3.png'); /* Adjust the path as necessary */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 64, 107, 0.7); /* #1e406b with 50% opacity */
    z-index: 1; /* Ensure the overlay is above the background image */
}

.background-image > * {
    position: relative;
    z-index: 2; /* Ensure the content is above the overlay */
}


body.htmx-request #htmx-spinner {
    display: block;
  }


.form{

    position: relative;
}

.form .fa-search{

    position: absolute;
    top:10px;
    left: 20px;
    color: #9ca3af;

}

.form span{

        position: absolute;
    right: 17px;
    top: 6px;
    padding: 2px;
    border-left: 1px solid #d1d5db;

}

.left-pan{
    padding-left: 7px;
}

.left-pan i{
   
   padding-left: 10px;
}

.form-input{

    height: 100%;
    text-indent: 1px;
    border-radius: 10px;
}
.btn-primary {
    height: 100%; /* Match the height of the button to the input fields */
    padding: 0 20px; /* Adjust padding as needed */
    line-height: normal; /* Ensure the text inside the button is vertically centered */
}
.form-input:focus{

    box-shadow: none;
    border:none;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}
.search-container {
    flex: 1;
    margin: 0 10px; /* Adjust margin as needed */
}
.pagination .page-link {
    cursor: pointer;
}

/* Ensure the input field and icon are snug together */
.input-group {
    display: flex;
    align-items: center; /* Ensures icon and input are vertically aligned */
}

/* Remove unnecessary padding from the icon */
.input-group .input-group-text {
    padding: 0.25rem 0.5rem; /* Adjust this if needed */
    margin: 0; /* Ensure no extra margin */
}

/* Ensure input takes the full available space */
.input-group .form-control {
    flex: 1 1 auto;  /* Input takes remaining space */
}

/* Optional: Adjust icon size if needed */
.input-group-text i {
    font-size: 1rem;  /* You can make the icon smaller */
}
/* Ensure modal dialog takes full width without margins */
.modal-xl .modal-dialog {
    max-width: 95%!important;
    width: 95%!important;
    margin: 0!important;
    padding: 0!important; /* Remove padding if necessary */
  }
  
  /* Ensure modal content fills the modal dialog */
  .modal-xl .modal-content {
    height: 90vh!important;
    border-radius: 0!important; /* Remove rounded corners for full-width appearance */
    overflow: hidden!important; /* Prevent content overflow */
  }
  
  /* Optional: Remove padding from modal body */
  .modal-xl .modal-body {
    padding: 1rem; /* Adjust as needed */
  }

.modal {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#modal-top {
    padding:1em;

}
#modal-top h5, 
#modal-top .card-text, 
#modal-top i {
    
    font-family: "Montserrat", sans-serif;
    font-size: 1.0em;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#748496;
}

.branch-card-text{
    
    font-family: "Montserrat", sans-serif;
    font-size: 1.0em;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#748496;
}

.contactform {
    padding: 2%;
}
.contactform input::placeholder{
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#748496;
}
.contactform textarea::placeholder{
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#748496;
}
.nav-link {
  color:#243759!important;
}

.montserrat-semibold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }
.montserrat-normal {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }
.montserrat-light {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.job-card-pill {
    background-color:#243759!important;
    color:white;
}

/* Style the "X" button to align properly */
#clear-location {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show the clear button only when there's input */
.input-group .btn {
    border-left: none;
}

/* Optional: Adjust button size to match input height */
#clear-location {
    padding: 0 0.5rem;
}

/* Optional: Change cursor to pointer on hover */
#clear-location:hover {
    cursor: pointer;
}

/* General tab styling */
.nav-tabs .nav-link {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: #555; /* Default text color */
    background-color: #f8f9fa; /* Background color */
    border: 1px solid transparent;
    padding: 10px 15px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px; /* Slightly rounded corners */
}

/* Hover effect for inactive tabs */
.nav-tabs .nav-link:hover {
    background-color: #e2e6ea;
    color: #333;
}

/* Styling for active tab */
.nav-tabs .nav-link.active {
    color: #fff!important; /* White text */
    background-color: #748496!important; /* Active tab background color */
    border-color: #748496 #748496 #fff; /* Top, sides, and bottom border */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 0.9rem;
}

/* Add a border under the tab list */
.nav-tabs {
    border-bottom: 2px solid #ddd;
}

/* Adjust padding between tabs */
.nav-item {
    margin-right: 5px;
}

.applynow {
    background-color: #243759!important;
    color: white!important;
    border: none!important;
    padding: 10px 20px!important;
    border-radius: 15px!important;
    font-family: "Montserrat", sans-serif!important;
    font-optical-sizing: auto!important;
    font-weight: 600!important;
    font-style: normal!important;
    font-size: 1.0rem!important;
    cursor: pointer!important;
}
.applynow:hover {
    background-color: #e2e6ea!important;
    color: #243759!important;
}

.nowhiringtext {
    padding-top:2%;
    padding-bottom: 2%;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 1.2rem;
    color: #243759;
}      

#searchbutton {
    
    font-family: "Montserrat", sans-serif!important;
    font-optical-sizing: auto!important;
    font-weight: 500!important;
    font-style: normal!important;
    font-size: 1.0rem!important;
    border-radius: 10px!important;
}


#resetbutton {
    background-color:#717788;
    font-family: "Montserrat", sans-serif!important;
    font-optical-sizing: auto!important;
    font-weight: 500!important;
    font-style: normal!important;
    font-size: 1.0rem!important;
    border-radius: 10px!important;
}
#resetbutton:hover {
    background-color: #55668b!important;
    color: white!important;
}


#contactForm {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#contactForm .form-label {
    font-weight: 500;
}

#contactForm .btn {
    padding: 10px 20px;
    font-size: 1rem;
}

.form-label{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #243759!important;
}

.loading-indicator {
    display: none;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 999;
  }
  
  .loading-indicator.htmx-request {
    display: block !important;
  }

  .page-link-loading-indicator {
    display: none;
  }
  
  /* When an HTMX request starts, htmx adds .htmx-request to the indicator */
  .page-link-loading-indicator.htmx-request {
    display: inline-block !important;
  }
/* Hide all spinners by default */
.spinner {
    display: none;
}

/* Show the spinner when it has the 'htmx-request' class */
.spinner.htmx-request {
    display: inline-block !important;
}

/* Hide the button label when the spinner is visible */
.spinner.htmx-request + .button-label {
    display: none;
}

/* Optional: Visually disable the button during the request */
.applynow.htmx-request {
    pointer-events: none;
    opacity: 0.7; /* Provides a visual cue that the button is disabled */
}


.card-body.jobcard:hover {
    background-color: #243759;
    color: white;
    border-radius: 0.75rem;
    overflow: hidden;

}

.card-body.jobcard:hover .job-card-pill.badge {
    background-color: #708598!important;
    color: white; /* Change the title color when hovering over the card */
}

.card-body.jobcard:hover .btn.btn-outline-primary  {
    background-color: #708598!important;
    color: white!important; /* Change the title color when hovering over the card */
}

.card-text.jobcard-text {
    font-size:1em;
    color:#243759;
}

.card-text.jobcard-text.jobcard-text:hover {
    font-size:1em;

}

#apply_now_button {
    background-color: white !important;
    color: #243759 !important;
    border: 2px solid #243759 !important;
    padding: 12px 24px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    min-width: 150px !important;
}

#paystubs_button {
    background-color: white !important;
    color: #243759 !important;
    border: 2px solid #243759 !important;
    padding: 12px 24px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    min-width: 150px !important;
}

  /* Primary button styles */
  .btn.btn-primary.onboarding {
    background-color: #243759 !important;
    border-color: #243759 !important;
    color: #f4f4f4 !important;
  }
  
  /* Hover state for primary button */
  .btn.btn-primary.onboarding:hover {
    background-color: #708598 !important;
    border-color: #708598 !important;
  }
  
  /* Outline button (e.g., for change link) */
  .btn-outline-dark {
    border-color: #243759;
    color: #243759;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Hover for outline button */
  .btn-outline-dark:hover {
    background-color: #243759;
    color: #f4f4f4;
  }
  
  .my-indicator{
    display:none;
}
.htmx-request .my-indicator{
    display:inline;
}
.htmx-request.my-indicator{
    display:inline;
}

.page-link {
    color: #243759 !important; /* Your preferred non-active color */
  }

.page-item.active .page-link {
    background-color: #243759 !important;
    color: #fff !important; /* Make the text white for better contrast */
    border-color: #243759 !important; /* Match the border to the background if needed */
  }

  .btn-outline-primary {
    color: #243759 !important; /* Text color */
    border-color: #243759 !important; /* Outline (border) color */
  }
  
  .btn-outline-primary:hover {
    background-color: #243759 !important;
    color: #fff !important; /* On hover, text should be white for contrast */
  }
  
  .detailapply {
    background-color: #243759!important;
    color: white!important;
    border: none!important;
    padding: 10px 20px!important;
    border-radius: 15px!important;
    font-family: "Montserrat", sans-serif!important;
    font-weight: 600!important;
    font-size: 1.0rem!important;
    cursor: pointer!important;
  }
  
  /* Hover effect */
  .detailapply:hover {
    background-color: #708598!important;
    color: #fff!important; /* Ensure text is readable on hover color */
  }

  /* Less pronounced 'Back to Listings' button */
.detailback {
    background-color: #717788!important; /* A more muted color */
    color: white!important;
    border: none!important;
    padding: 10px 20px!important;
    border-radius: 15px!important; /* Same shape */
    font-family: "Montserrat", sans-serif!important;
    font-weight: 600!important;
    font-size: 1.0rem!important;
    cursor: pointer!important;
  }
  
  /* Hover effect for back button */
  .detailback:hover {
    background-color: #55668b!important; /* Slightly darker muted color */
    color: #fff!important;
  }

  .detail-scrollable-description {
    max-height: 500px; /* Adjust as needed */
    overflow-y: auto;
  }


/* Use the same class name or rename `background-image` to `background-video`. 
   Shown here as .background-video. */

   .background-video {
    position: relative;
    /* Fallback image for older browsers or if video fails to load: */
    background-image: url('../images/partner-banner3.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* If you rely on Bootstrap's .container sizing, fine. 
       If you want it to stretch full width, you'd remove .container. */
  }
  
  /* The tinted overlay: 
     This is the same style as your original .background-image::before. */
  .background-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 64, 107, 0.9);/* Your existing overlay color */
    z-index: 1; /* Sits above the fallback image, but behind the text. */
  }
  
  /* The absolutely positioned <video> behind everything, 
     but still "under" the overlay. */
  .background-video .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    /* 
       Because .container has a default max-width in Bootstrap, 
       you'll see "video-bg" match that container's box unless we force width/height. 
       So let's set it to fill the entire .background-video. 
    */
    width: 100%;
    height: 100%;
  
    object-fit: cover; /* Stretches the video proportionally, like background-size: cover. */
    z-index: 0;        /* Under the overlay (z-index:1) and under text (z-index:2). */
    display: block;    /* Just to avoid any inline weirdness. */
    overflow: hidden;
  }
  
  /* 
     Ensure direct children (like .row) appear above the overlay, 
     i.e. z-index: 2. 
  */
  .background-video > *:not(video) {
    position: relative;
    z-index: 2;
  }