/* Hero-Overlay Text */

.hero-overlay {
    width: 100%;
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 992px) {
    
    .hero-overlay {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .hero-overlay h1 {
        text-shadow: 5px 5px 25px var(--bs-white);
        font-size: 3.75rem;
    }
}
/* Skip Links for Accessibility */

.skip-links {
    z-index: 9999;
}

.skip-link {
    top: -100px;
    left: 6px;
    white-space: nowrap;
    outline: 2px solid var(--bs-white);
    outline-offset: 2px;
    transition: top 0.4s ease;
}

.skip-link:nth-child(2) {
    left: 160px !important;
}

.skip-link:focus {
    top: 6px !important;
}

/* font-size reset and controlling */

@media (min-width: 922px) /* breakpoint lg */ 
{ 
    body {
        font-size: var(--template-fs-5);
    }
}

/* Logo Responsive */

#logo { 
    max-width: 200px;
}

@media (min-width: 768px) /* breakpoint md */ 
{
    #logo {
        max-width: 270px;
    }
}

/* Animationload Modal wrapper */

.cc-wrapper {
    -webkit-transition: opacity 1s ease 0s;
    transition: opacity 1s ease 0s;
}

.cc-wrapper.modal-open {
    opacity: 0.5 !important;
    pointer-events: none;
}

/* Hero Shot */

#heroshot {
    max-height: 456px;
    object-position: center;
    aspect-ratio: 5 / 2;
}

/* Searchbar */

input::placeholder {
  color: rgb(var(--bs-primary-rgb)) !important;
  opacity: 1 !important;
}

#job-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Dropdown Menu Filter */

.ui-multiselect span.ui-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    padding: 0;
    background-color: transparent;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block !important;
}

.ui-multiselect span.ui-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    color: rgb(var(--bs-primary-rgb));
    font-size: 1.25rem;
}

.ui-multiselect.ui-state-active span.ui-icon::before,
.ui-multiselect:hover span.ui-icon::before {
    color: var(--bs-white);
}

.ui-multiselect-header ul li {
    padding: 0 1.25rem;
    display: none;
}

button.ui-multiselect {
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(var(--bs-primary-rgb));
    padding: 11px 1.25rem;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    color: rgb(var(--bs-primary-rgb));
}

button.ui-multiselect.ui-state-active,
button.ui-multiselect:focus,
button.ui-multiselect:hover {
    background-color:var(--bs-tertiary-bg);
    color: var(--bs-white);
}

.ui-multiselect-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    text-align: left;
    background: var(--bs-white);
    border-top: 0;
    max-width: 100%;
    border-radius: 0;
    border: 1px solid rgb(var(--bs-primary-rgb));
    border-top-width: 0;
}

.ui-multiselect-checkboxes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-helper-reset {
    margin: 0;
}

.ui-multiselect-checkboxes label {
    display: block;
    border: 0px solid transparent;
    padding: 6px 0;
    margin-left: 5px;
    text-align: left;
    color: rgb(var(--bs-primary-rgb));
}

.ui-multiselect-checkboxes label input {
    display: none !important;
}

.ui-multiselect-checkboxes li {
    clear: both;
    padding: 7px 15px 8px 15px;
    border-bottom: 1px solid rgb(var(--bs-light-rgb));
    margin: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.ui-multiselect-checkboxes li:hover {
    background: rgb(var(--bs-light-rgb));
}

.ui-multiselect-checkboxes label,
input+label {
    cursor: pointer;
}

.ui-corner-all input[type=checkbox]+span {
    cursor: pointer;
    padding: 0;
    color: rgb(var(--bs-primary-rgb));
    text-align: left
}

/* job card hover */

.job-list-item,
.job-list-item h2,
.job-list-item svg,
.job-list-item * {
    transition: all 0.4s ease-in-out;
}
.job-list-item:hover {
    background-color: var(--bs-tertiary-bg) !important;
}
.job-list-item:hover h2 {
    color: rgb(var(--bs-secondary-rgb)) !important;
}
.job-list-item:hover *:not(h2):not(svg) {
    color: var(--bs-white) !important;
    opacity: 1 !important;
}
.job-list-item:hover svg[data-icon="arrow-right"] * {
    stroke: rgb(var(--bs-secondary-rgb)) !important;
    fill: rgb(var(--bs-secondary-rgb)) !important;
}

/* pagination arrow hover */

.btn-light:hover .fa-arrow-left,
.btn-light:hover .fa-arrow-right {
  color: rgb(var(--bs-secondary-rgb)) !important;
  transition: all 0.4s ease-in-out;
}

/* Pagination Active Page Styling */
.page.active {
  background-color: rgb(var(--bs-primary-rgb)) !important;
  border-color: rgb(var(--bs-primary-rgb)) !important;
  color: var(--bs-white) !important;
}

/* Icon Unsolicited Application */

.application-icon {
    max-width: 120px;
    max-height: 120px;
}

    @media (min-width: 576px) {
        .application-icon {
                max-width: 95px;
                max-height: 95px;
            }
        }

/* Footer Link Styles */

.footer-link a {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.footer-link a:hover,
.footer-link:focus {
  color: rgb(var(--bs-secondary-rgb)) !important;
}