body{
    background-color: #F5F9FD;
}
.searchBox{
    display: flex;
    justify-content: center;
}
.adSquare{
    display: flex;
    flex-direction: row;
}

.filterCol{

    padding: 0px;
    width: 300px;
    padding: 10px;

}
.adCol{
    flex: 1;
    padding: 10px;

}

.Bshow{
    display: block !important;
}
.Dnone{
    display: none !important;
}


.adCard {
    height: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.adDescrip {
    font-size: 0.85em;
}

.time, .jobTitle, .Adcom, .adLoc, .tags .adtag {
    font-size: 0.8em; /* Smaller text for better fit */
}

.filterCol {
    padding: 15px;
}
.jobCardsCol {
    padding: 15px;
}
.adSquare {
    display: flex;
    flex-wrap: wrap;
}
.filterCol, .jobCardsCol {
    display: flex;
    flex-direction: column;
}

/* Ensuring responsive alignment */
@media (max-width: 768px) {
    .adSquare {
        flex-direction: column;
    }
} 


/* job feed */
.catframe {
    background-color: #1337AA;
    margin-top: 67px;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    padding-left: 30px;
    padding-right: 40px;
    padding-top: 3px;
    padding-bottom: 3px;
}

@media (min-width: 1366px) {
    .catframe {
        margin-top: 67px; /* Adjusted for 1366px */
    }
}

@media (min-width: 1850px) {
    .catframe {
        margin-top: 76px; /* Adjusted for 1850px */
        padding-left: 30px;
        padding-right: 40px;
        padding-top: 4px;
        padding-bottom: 3px;
    }
}



.categorylist {
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    display: grid;

}

.category-titles {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* .category-titles {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
*/


/* Media query for hiding the catframe and showing the mobile bar */
@media (max-width: 767px) {
    .catframe {
        display: none;
    }


}



.categorylist::-webkit-scrollbar {
    display: none;
    overflow-x: auto;

}

.category-title {
    font-size:9.96px;
    color: #ff9c00;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0;
    flex: 0 0 auto;
    /* width: 210px; */
    /* margin-left: 50px; */

}

@media (min-width: 1366px) {
    .category-title {
        font-size: 9.96px; /* Increased font size for 1366px */
    }
}

@media (min-width: 1850px) {
    .category-title {
        font-size: 12.8px; /* Further increased font size for 1850px */
    }
}

.selected-category {
    background-color: #ffffff;
    color: #1337AA;
}



.category-title:hover {
    background-color: #ffffff;
    color: #1337AA;
}

.category-title:nth-child(1) {
    margin-left: 22px;
    width: 165px;
}

.category-title:nth-child(2) {
    margin-left: 29px;
    
}

.category-title:nth-child(3) {
    margin-left: 7px;
    
}

@media (min-width: 1366px) {
    .category-title:nth-child(3) {
        margin-left: 7px; /* Adjusted for 1366px */
    }
}

@media (min-width: 1850px) {
    .category-title:nth-child(3) {
        margin-left: 2px; /* Increased for 1850px */
    }
}


.category-title:nth-child(4) {
    margin-left: 4px;
    /* margin: 0 5px; */
}

@media (min-width: 1366px) {
    .category-title:nth-child(4) {
        margin-left: 4px; /* Adjusted for 1366px */
    }
}

@media (min-width: 1850px) {
    .category-title:nth-child(4) {
        margin-left: 2px; /* Increased for 1850px */
    }
}

.category-title:nth-child(5) {
    margin-left: 24px;
    /* margin: 0 5px; */
}

@media (min-width: 1366px) {
    .category-title:nth-child(5) {
        margin-left: 24px; /* Adjusted for 1366px */
    }
}

@media (min-width: 1850px) {
    .category-title:nth-child(5) {
        margin-left: 29px; /* Increased for 1850px */
    }
}

.category-title:nth-child(6) {
    margin-left: 45px;

}

@media (min-width: 1366px) {
    .category-title:nth-child(6) {
        margin-left: 45px; /* Adjusted for 1366px */
    }
}

@media (min-width: 1850px) {
    .category-title:nth-child(6) {
        margin-left: 60px; /* Increased for 1850px */
    }
}

.category-title:nth-child(7) {
    margin-left: 35px;
    /* margin: 0 5px; */
}

/* .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ff9c00;
    font-size: 2em;
    cursor: pointer;
    z-index: 1;
    padding: 10px;
} */

.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
    width: 0;
    height: 0;
    margin-left: 5px;
    margin-right: -10px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 20px solid #fff; 
}

.arrow-btn.left {
    transform: translateY(-50%) rotate(180deg); /* Flip for left arrow */
    left: 0;
}


.arrow-btn.right {
    transform: translate(-50%, -50%);
    right: 0;
}

.arrow-btn:hover {
    /* background-color: #f0f0f0; */
    border-left: 20px solid #FF9C00; 

}

/* Media Query for Smaller Screens */
@media (max-width: 767px) {
    .categorylist {
        padding: 0 20px;
        /* Adjust for smaller screens */
    }

    .category-titles {
        flex-wrap: wrap;
        /* Allow root categories to wrap on smaller screens */
        justify-content: space-between;
        /* Adjust for better alignment */
    }

    .category-title {
        margin-bottom: 10px;
        /* Ensure space between root category items */
        flex: 1 0 15%;
        /* Ensure categories take up smaller space on small screens */
    }

    .category-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .subcategory-group {
        margin-right: 15px;
        flex: 1 0 100%;
        /* Each subcategory takes full width on small screens */
    }

    .subcategory-title {
        font-size: 1em;
    }
}

/* Large Screens */
@media (min-width: 768px) {
    .category-title {
        flex: 1 0 20%;
        /* On large screens, keep category width consistent */
    }

    .subcategory-group {
        flex: 1 0 33%;
        /* Three subcategories per row on medium screens */
    }
}


/* Remove spaces on the left and right */
.container {
    padding: 0;
}

.category-items {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 67px;}

    @media (min-width: 1366px) {
        .category-items {
            gap: 67px; /* Increased gap for 1366px */
        }
    }

     @media (min-width: 1520px) {
        .category-items {
            gap: 42px; /* Increased gap for 1535px */
        }
    }
    
    
    @media (min-width: 1850px) {
        .category-items {
            gap: 50px; /* Further increased gap for 1850px */
        }
    }

@media (max-width: 1366px){

/* Category list items */
.category-items {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 11px;


}

}

.category-items :nth-child(6){
    margin-right: 20px;
}


.form-check.category {
    display: flex;
    justify-content: left;
    align-items: left;
    margin-bottom: -10px;
}

.form-check-label {
    display: flex;
    justify-content: left;
    align-items: left;
    padding: 4px 15px;
    font-size: 0.8em;
    color: black;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: none;
    border-radius: 1px;
    margin-left: 20px;

}

.form-check-label:hover {
    background-color: #f0f0f0;
    color: #1337aa;
    /* font-weight: bold; */
}

.form-check-label.selected {
    background-color: #fff;
    color: #1337aa;
    /* font-weight: bold; */
}

.form-check-input {
    display: none;
}

/* Job Cards */
.jobCardsCol {
    margin-top: 30px;
}

.card.adCard {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    background-color: #fff;
}

.card.adCard:hover {
    transform: scale(1.05);
}

.card-body.adDescrip {
    padding: 15px;
}

.jobTitle {
    font-size: 1.1em;
    font-weight: bold;
    margin: 10px 0;
}

.adcom,
.adLoc {
    font-size: 0.9em;
    color: #555;
}

.time {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 5px;
}

.tags {
    text-align: right;
    margin-top: 10px;
}

.adtag {
    margin-right: 2px;
    font-size: 0.8em;
    padding: 1px 2px;
    border-radius: 2px;
    color: #fff;
}

.adtag#type {
    background-color: #1337aa;
}

.adtag#salary {
    background-color: #28a745;
}

.adtag#jobworktype {
    background-color: #ff9c00;
}

/* Pagination */
.paginationBox {
    text-align: center;
    margin-bottom: 25px;

}
.paginationBox button{
    width: 130px;
}

.paginationBox span{
    width: 130px;
}


.pagination .page-item.active .page-link {
    background-color: #FEC304;
    border-color: #FEC304;
}

.pagination .page-link {
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0 5px;
}

/* Search Filters */
.filters {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    /* margin-bottom: -5px; */
}

.filters select {
    width: 20%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    /* margin-top: 5px; */
}

/* Job Cards */
.job-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 10px;
    padding: 0px 0 10px 0;
}

@media (max-width: 1629px) {
    .job-cards {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
}

@media (max-width: 1560px) {
    .job-cards {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
}

@media (max-width: 1366px) {
    .job-cards {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
}

@media (max-width: 1320px) {
    .job-cards {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}

@media (max-width: 1009px) {
    .job-cards {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .job-cards {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 576px) {
    .job-cards {
        grid-template-columns: minmax(200px, 1fr);
    }
}


.job-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 2px 4px rgba(158, 158, 158, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 721px) {
    .job-card {
        height: 75px; /* Ensures same height at 1366px */
    }
}




@media (min-width: 1850px) {
    .job-card {
        height: 91px; /* Increases height at 1850px */
    }
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
}

.job-card-content {
    display: flex;
    justify-content: space-between;
}

.left-col {
    flex: 1;
}

/* .right-col {
    text-align: right;
    flex: 0.45;
} */

.job-card .time {
    font-size: 7.11px;
    color: #008B3A;
    margin-bottom: 0;
}

@media (min-width: 1366px) {
    .job-card .time {
        font-size: 7.11px; /* Ensures same size at 1366px */
    }
}

@media (min-width: 1520px) {
    .job-card .time {
        font-size: 8px; /* Increases font size at 1535px */
    }
}

@media (min-width: 1850px) {
    .job-card .time {
        font-size: 10px; /* Increases font size at 1850px */
    }
}

.job-card .job-id {
    font-size: 7.11px;
    color: #1759FF;
    margin-bottom: 0;
}

@media (min-width: 1366px) {
    .job-card .job-id {
        font-size: 7.11px; /* Ensures same size at 1366px */
    }
}

@media (min-width: 1500px) {
    .job-card .job-id {
        font-size: 8px; /* Increases font size at 1535px */
    }
}

@media (min-width: 1850px) {
    .job-card .job-id {
        font-size: 10px; /* Increases font size at 1850px */
    }
}

.job-card .title {
    font-size: 9.24px;
    /* font-weight: bold; */
    color: #02175B;
    margin-bottom: 0;
}


@media (min-width: 1366px) {
    .job-card .title {
        font-size: 9.24px; /* Ensures same size at 1366px */
    }
}

@media (min-width: 1520px) {
    .job-card .title {
        font-size: 10.4px; /* Increases font size at 1535px */
    }
}

@media (min-width: 1850px) {
    .job-card .title {
        font-size: 13px; /* Increases font size at 1900px */
    }
}

.job-card .company {
    font-size: 7.82px;
    color: #7F7F80;
    margin-bottom: 0;
    padding: 0;
    /* font-weight: bold; */
}

@media (min-width: 1366px) {
    .job-card .company{
        font-size: 7.82px; /* Ensures same size at 1366px */
    }
}


@media (min-width: 1520px) {
    .job-card .company{
        font-size: 8.8px; /* Increases font size at 1535px */
    }
}

@media (min-width: 1850px) {
    .job-card .company{
        font-size: 11px; /* Increases font size at 1900px */
    }
}


.job-card .location {
    font-size: 6.4px;
    color: #1759FF;
    margin-bottom: 5px;
}

@media (min-width: 1366px) {
    .job-card .location{
        font-size: 6.4px; /* Ensures same size at 1366px */
    }
}

@media (min-width: 1520px) {
    .job-card .location{
        font-size: 7.2px; /* Increases font size at 1536px */
    }
}

@media (min-width: 1850px) {
    .job-card .location{
        font-size: 9px; /* Increases font size at 1900px */
    }
}

/* mobile font sizes */

@media (max-width: 720px) {
    .job-card .time {
        font-size: 10px; 
    }
}

@media (max-width: 720px) {
    .job-card .job-id {
        font-size: 10px; 
    }
}

@media (max-width: 720px) {
    .job-card .title {
        font-size: 13px; 
    }
}

@media (max-width: 720px) {
    .job-card .company{
        font-size: 11px; 
    }
}

@media (max-width: 720px) {
    .job-card .location{
        font-size: 9px; 
    }
}

.job-card .tags {
    margin-top: 0;
    margin-bottom: 10px;

}

.job-card .tags span {
    display: inline-block;
    margin-right: 1px;
    padding: 2px 3px;
    font-size: 0.65em;
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
}

.job-card .tags .type {
    background-color: #1337aa;
}

.job-card .tags .work-type {
    background-color: #ff9c00;
}

.job-card .tags .jobmarket {
    background-color: #28a745;
}

@media (max-width: 576px) {
    .job-card {
        padding: 2px 5px 2px 5px;
        height: 91px;
    }

    .job-card .tags {
        margin-top: -5px;
    }

    .job-card .tags span {
        padding: 1px 2px;
    }

    .job-card .time {
        margin-bottom: 0;
    }

    .job-card .title {
        margin-bottom: 0;
    }

    .job-card .company {
        margin-bottom: 0;
    }

    .job-card .location {
        margin-bottom: 0;
    }




}

*,
*::before,
*::after {
    box-sizing: border-box;

}

.job-card .title,
.job-card .location,
.job-card .company {
    position: relative;
    /* font-size: 1.1em; */
    margin-bottom: 0;
    max-width: 200px;
}

@media (max-width: 1366px) {
    .job-card .title,
    .job-card .location,
    .job-card .company {
        max-width: 180px;
    }
    
}

/* Text Truncation */
.truncate-text {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tooltip Positioning */
.tooltip {
    z-index: 1050 !important;
    max-width: 200px;
    word-wrap: break-word;
}

/* Optionally, you can style the tooltip further */
.tooltip-inner {
    background-color: #333;
    color: #fff;
    font-size: 0.85em;
    padding: 5px 10px;
}

.filters-container-wrapper {
    position: relative;
    top: 0;
}

.filters-container {
    width: 100%;
    border-top: 3px solid #1337aa;
    border-bottom: 3px solid #1337aa;
    display: flex;
    justify-content: space-between;
    padding: 5px 0 0 0;
    flex-wrap: wrap;
    background-color: #fff;
    background: #fff;
    border: 1px solid #ddd;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Initially hide the collapsed bar */
.collapsed-bar {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px;
    justify-content: center;
    transition: top 0.3s ease;
}



/* Responsive behavior for collapsing */
@media (max-width: 768px) {
    .filters-container-wrapper {
        position: relative;
        top: 0;
        zoom:90%
    }
    
    .filters-container {
        position: fixed;
        top: calc(100px + 50px);
        left: 0;
        z-index: 999;
        transition: transform 0.3s ease;
        top: 165px;

    }

    /* Initially hide the filters container */
    .filters-container.hidden {
        display: none;
    }

    /* Initially hide the collapsed bar */
    .collapsed-bar {
        display: none;
        position: fixed;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 10px;
        justify-content: center;
        transition: top 0.3s ease;
    }

    /* Show collapsed bar when it is active */
    .collapsed-bar.visible {
        display: flex;
        top: 132px;

    }
}




.filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.filters select {
    flex: 1;
    padding: 8px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-width: 180px;
    border: 3px solid #ff9c00;
}

.filters select:hover {
    border-color: #1337aa;
}

.search-form input{
    font-size: 13px;
}

label.selectLabel{
   font-size: small;
}
.clearCol{
    padding-right: 50px;
}

@media (min-width: 1630px) {
    .filters{
        width: 48%;
    }
    .filter-col:last-child {
       
        width: 300px;
    }
 

}
@media (max-width: 1556px) {

.clearCol{
    padding-right: 30px;
}
}

@media (max-width: 1542px) {
    .filters-container {
        display: flex;
        flex-wrap: nowrap; 
        justify-content: space-between;
        align-items: center;
    }
    .filters {
        display: flex;
        justify-content: center;
        gap: 5px;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        /* justify-content: space-evenly; */
        align-items: center;
        padding-bottom: 3px;

    }
    .searchBarFrame{
        width: 250px;
    }
    .search-form input{
        font-size: 13px;
    }
   
}

@media (max-width: 1322px){
    .clearCol{
        padding-right: 0;
    }
}

@media (max-width: 1162px) {
    .searchBarFrame{
        width: 450px;
    }
    .search-form input{
        font-size: 13px;
    }
   
    
}

@media (max-width: 460px) {
    .searchBarFrame{
        width: 415px;
    }
    .search-form input{
        font-size: 13px;
    }
    
}
@media (max-width: 391px) {
    .searchBarFrame{
        width: 380px;
    }
  
}

@media (max-width: 376px) {
    .searchBarFrame{
        width: 380px;
    }
  
}

.filter-labels {
    font-size: 12px;
}
.search-font{
    font-size: 12px;
}

/* 1162 */
@media (max-width: 1162px) {
  
    .filters-container {
        flex-direction: column;
        align-items: center;
        /* gap: 10px; */
    }

    .filters {
        width: 100%;
        justify-content: center;
        gap: 5px;
        margin-right: 10px;
        padding-bottom: 3px;

    }

    .filters select {
        width: 100%;
        /* margin-bottom: 2px; */
    }

    .jobTypeFilters {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
    }
    .filter-labels {
        font-size: 10px;
    }

    .filter-col {
        width: 100%;
        margin-top: 2px;
        margin-bottom: 0px;
    }
    label.selectLabel{
        display: none !important;
    }
    .clearBtn{
        margin-top: -20px;
        
    }

}


@media (max-width: 992px) {


    .filters-container {
        flex-direction: column;
        align-items: center;
        /* gap: 10px; */
    }

    .filters {
        width: 100%;
        justify-content: center;
        gap: 5px;
        margin-right: 10px;
        padding-bottom: 3px;
    }

    .filters select {
        width: 100%;
        /* margin-bottom: 2px; */
    }


    .jobTypeFilters {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
    }

    .filter-col {
        width: 100%;
        margin-top: 2px;
        margin-bottom: 0px;
    }
    .searchBox {
        margin-top: 2px;
    }
}


@media (max-width: 768px) {

    .filters-container {
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        /* gap: 10px; */
    }

    .filters {
        width: 100%;
        justify-content: center;
        gap: 1px;
        margin-right: 10px;
    }

    .filters select {
        width: 100%;
        margin-bottom: 2px;
    }

    .jobTypeFilters {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
         align-items: center;
    }

    .filter-col {
        width: 100%;
        margin-top: 2px;
        margin-bottom: 0px;
    }
    .searchBox {
        margin-top: 2px;
    }
    .clearBtn{
        margin-top: 0px;
    }
}
@media (max-width: 767px) {
    .filters-container {
        flex-direction: column;
        align-items: center;
        margin-top: -15px;
        /* gap: 10px; */
    }
}



@media (max-width: 576px) {
    .filters {
        width: 100%;
        justify-content: center;
        gap: 5px 2px;
        margin-bottom: 4px;
        margin-right: 0px;
    }

    .filters select {
        width: 100%;
        /* margin-bottom: 5px; */
        font-size: 11px;
    }

    .jobTypeFilters {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin-top: 2px;
        margin-bottom: 2px; */
    }
    

    .filter-col {
        width: 100%;
        /* margin-bottom: 10px; */
    }

    .searchBox {
        margin-top: 8px;
    }

    .filters-container {
        gap: 0;
        padding-top: 0;


    }
    
}


.jobTypeFilters {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 15px 1px;
    align-items: right;
    padding: 0;
    /* margin-top: 5px;
    margin-bottom: 5px; */
}


@media screen and (max-width: 576px) {
    .filters select {
        width: 100%; 
        padding: 8px; 
    }
 
}

.filters select:hover {
    border-color: #1337aa;
}

.fixed-cat-header {
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 500px;
    width: 100%;
    z-index: 1000;
    background: none;

}


/* .container-fluid {
    padding-top: 12%;
    margin-top: 12%;
    transition: all 0.3s ease;
} */

.no-spacing {
    padding-top: 0 !important;
    margin-top: 200px !important;
}

/* @media (min-width: 1745px) and (max-width: 1919px) {
    .container-fluid {
        padding-top: 7%;
        margin-top: 7%;
        transition: all 0.3s ease;
    }
} */

@media (min-width: 769px) {
    .container-fluid {
        margin-top: 30px;
    }
}

/* 
@media (min-width: 1920px) {
    .container-fluid {
        margin-top: 20px;
    }
}

@media (max-width: 1680px) {
    .container-fluid {
        margin-top: 50px;
    }
}

@media (max-width: 1640px) {
    .container-fluid {
        margin-top: 50px;
    }
}

@media (max-width: 1560px) {
    .container-fluid {
        margin-top: 70px;
    }
}
@media (max-width: 1400px) {
    .container-fluid {
        margin-top: 80px;
    }
}

@media (max-width: 1366px) {
    .container-fluid {
        margin-top: 90px;
    }
}

@media (max-width: 1335px) {
    .container-fluid {
        margin-top: 100px;
    }
}

@media (max-width: 1300px) {
    .container-fluid {
        margin-top: 100px;
    }
}

@media (max-width: 1230px) {
    .container-fluid {
        margin-top: 100px;
    }
}

@media (max-width: 1200px) {
    .container-fluid {
        margin-top:  100px;
    }
}

@media (max-width: 1162px) {
    .container-fluid {
        margin-top: 100px;
    }
}

@media (max-width: 1100px) {
    .container-fluid {
        margin-top: 120px;
    }
}


@media (max-width: 1032px) {
    .container-fluid {
        margin-top: 120px;
    }
}
@media (max-width: 980px) {
    .container-fluid {
        margin-top: 120px;
    }
}

@media (max-width: 940px) {
    .container-fluid {
        margin-top: 140px;
    }
}

@media (max-width: 870px) {
    .container-fluid {
        margin-top: 140px;
    }
}

@media (max-width: 794px) {
    .container-fluid {
        margin-top: 140px;
    }
} */

@media (max-width: 768px) {
    .container-fluid {
        margin-top: 25px;
    }
    .filters-container {
        margin-top: 95px;
    }
}

@media (max-width: 767px) {
    .container-fluid {
        margin-top: 100px;
    }
    .filters-container {
        top: 55px;
    }
}

@media (max-width: 762px) {
    .container-fluid {
        margin-top: 145px;
    }
    .filters-container {
        top: 55px;
    }
}

@media (max-width: 757px) {
    .container-fluid {
        margin-top: 145px;
    }
    .filters-container {
        top: 55px;
    }
}

@media (max-width: 740px) {
    .container-fluid {
        margin-top: 145px;
    }
}

@media (max-width: 700px) {
    .container-fluid {
        margin-top: 150px;
    }
}

@media (max-width: 696px) {
    .container-fluid {
        margin-top: 150px;
    }
}

@media (max-width: 648px) {
    .container-fluid {
        margin-top: 150px;
    }
}

@media (max-width: 626px) {
    .container-fluid {
        margin-top: 150px;
    }
}

@media (max-width: 602px) {
    .container-fluid {
        margin-top: 125px;
    }
}

@media (max-width: 598px) {
    .container-fluid {
        margin-top: 125px;
    }
}

@media (max-width: 590px) {
    .container-fluid {
        margin-top: 135px;
    }
}

@media (max-width: 574px) {
    .container-fluid {
        margin-top: 135px;
    }
}

@media (max-width: 552px) {
    .container-fluid {
        margin-top: 135px;
    }
}



@media (max-width: 520px) {
    .container-fluid {
        margin-top: 135px;
    }
}


@media (max-width: 485px) {
    .container-fluid {
        margin-top: 135px;
    }
}

@media (max-width: 470px) {
    .container-fluid {
        margin-top: 135px;
    }
}

@media (max-width: 456px) {
    .container-fluid {
        margin-top: 135px;
    }
}

@media (max-width: 453px) {
    .container-fluid {
        margin-top: 145px;
    }
}

@media (max-width: 448px) {
    .container-fluid {
        margin-top: 145px;
    }
}

@media (max-width: 436px) {
    .container-fluid {
        margin-top: 145px;
    }
}


@media (max-width: 421px) {
    .container-fluid {
        margin-top: 170px;
        --bs-gutter-x: 0;
    }
}

@media (max-width: 416px) {
    .container-fluid {
        margin-top: 170px;
        --bs-gutter-x: 0;
    }
}



@media (max-width: 396px) {
    .container-fluid {
        margin-top: 170px;
    }
}


@media (max-width: 384px) {
    .container-fluid {
        margin-top: 170px;
    }
}

@media (max-width: 372px) {
    .container-fluid {
        margin-top: 170px;
    }
}

@media (max-width: 352px) {
    .container-fluid {
        margin-top: 170px;
    }
}

@media (max-width: 345px) {
    .container-fluid {
        margin-top: 170px;
    }
}

@media (max-width: 337px) {
    .container-fluid {
        margin-top: 170px;
    }
}

@media (max-width: 330px) {
    .container-fluid {
        margin-top: 235px;
    }
}



@media (max-width: 318px) {
    .container-fluid {
        margin-top: 235px;
    }
}

@media (max-width: 309px) {
    .container-fluid {
        margin-top: 235px;
    }
}

@media (max-width: 298px) {
    .container-fluid {
        margin-top: 235px;
    }
}

@media (max-width: 282px) {
    .container-fluid {
        margin-top: 245px;
    }
}

@media (max-width: 250px) {
    .container-fluid {
        margin-top: 270px;
    }
}





.filter-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
    padding-left: 20px;
    border-right: 1px solid #ccc;
}


@media (max-width: 364px) {
    .filter-col{
        padding-right: 5px;
    }
    
    
}

.filter-col:first-child {
    border-left: 1px solid #ccc;
    /* padding-left: 20px; */
}

.filter-col:last-child {
    border-right: 1px solid #ccc;
    padding-left: 20px;
}

.jobTypeFilters label {
    font-size: 12px;
    white-space: nowrap;
    line-height: 0;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* .jobTypeFilters label:hover {
    color: #1337aa;
    font-weight: bold;
} */

.jobTypeFilters input {
    margin-right: 8px;
}

.tooltip-jobmarket {
    position: absolute;
    background-color: red;
    color: white;
    padding: 5px;
    font-size: 12px;
    border-radius: 4px;
    display: none;
    z-index: 10;
    bottom: -35px;
    right: 110px; 
    transform: translateX(100%); 
    white-space: nowrap;
}

/* 475 screen */
@media screen and (max-width: 475px) {
    .tooltip-jobmarket {
       font-size: 9px;
       bottom: -45px;
       right:80px;
      white-space: wrap;
      width: 100px;
      height: auto;
    }
}


@media (max-width: 434px) {
    .filter-col {
        padding-right: 5px;
        padding-left: 5px;
    }
  
    
    
    
}

/* mobile */

.selected-category-mobile {
    background-color: #ffffff;
    color: #081d6d;
    width: 100%;
    max-width: 400px; 
    height: 35px;
    border-radius: 5px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0 10px;
}



.mobile-category-bar {
    background-color: #061e6d;
    margin-top: 62px;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    color: white;
    padding: 15px;

}

.mobile-dropdown-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 15px;
    width: 100%;
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}


.finger img {
    width: 40px;
    cursor: pointer;
    margin-top: -10px;
    margin-right: 10px
}

.finger span{
    font-size: 15px
}

.mobile-dropdown-content {
    display: none;
    position: absolute;
    top: 92%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    z-index: 9999;
    /* padding-bottom: 100px; */
    line-height: 1.1;
}
@media (max-width: 1570px) {
    .jobTypeFilters label {
        font-size: 10px;
    }
    /* .jobTypeFilters input {
        margin-right: 2px;
    } */
    .filter-labels {
        font-size: 10px;
    }
    .mb-1366 {
        margin-bottom: 0.05rem !important;
    }
    /* .search-font{
        font-size: 7.82px;
    } */
    
}

@media (max-width: 1366px) {
    .jobTypeFilters label {
        font-size: 7.82px;
    }
    .jobTypeFilters input {
        margin-right: 2px;
    }
    .filter-labels {
        font-size: 7.82px;
    }
    .mb-1366 {
        margin-bottom: 0.05rem !important;
    }
    .search-font{
        font-size: 7.82px;
    }
    
}



@media (max-width: 653px) {
   
    .mobile-dropdown-btn {
        font-size: 14px;  
  
    } 
    
   .finger span{
        font-size: 13px;  

   }
   
}

@media (max-width: 590px) {
    
    .mobile-dropdown-content {

        top: 85%;
    }
    .mobile-dropdown-btn {
        font-size: 12px; 
        
    }
    
    .finger{
        margin-top: -10px;

        
    }
    .jobmarket{
        margin-top: 10px;
    }
    .filter-col:last-child {
        border-right: none;
        padding-left: 5px;
    }
    .filter-col:first-child{
        border-left: none;
    }
    .jobTypeFilters label {
        font-size: 12px;
    }
   
   
}

@media (max-width: 576px) {
    .finger span{
        font-size: 11px;  

   }
   .finger{
    margin-top: 0px;
   }
}
@media (max-width: 515px) {
    .finger span{
        font-size: 10px;  

   }
   .finger{
    margin-top: 0px;
   }
}

@media (max-width: 484px) {
    .finger span{
        font-size: 13px;  

   }
   .finger{
    margin-top: -10px;
   }
}

@media (max-width: 397px) {
    .mobile-dropdown-btn {
        font-size: 12px; 
        
    }
    .finger{
        margin-top: -8px;

    }
   
    .filter-col {
    
        padding-right: 5px;
        padding-left: 5px;
    }

    .filter-col:last-child {
        border-right: none;
        padding-left: 5px;
    }
    .filter-col:first-child{
        border-left: none;
    }
    .jobmarket{
        margin-top: 10px;
    }
 
}

@media (max-width: 384px) {
    .mobile-dropdown-btn {
        font-size: 12px; 
        
    }
    .finger{
        margin-top: -5px;

    }
    .finger span{
     font-size: 11px;   
 }
 .filter-col {
  
    padding-right: 5px;
    padding-left: 5px;
}
 
  
 }
 @media (max-width: 352px) {
    .mobile-dropdown-content {

        line-height: 1.25;
    }
    
    .filter-col {
  
        padding-right: 5px;
        padding-left: 5px;
    }



.finger span{
 font-size: 9px;   
}
    
 }


 
@media (max-width: 336px) {
    .mobile-dropdown-btn {
        font-size: 12px; 
        
    }
   
    .finger span{
     font-size: 9px;   
    }

    .finger img{
        width: 30px;  
    }
    .filter-col {
    
        padding-right: 5px;
        padding-left: 5px;
    }
    
  
 }

 


.mobile-dropdown-icon {
    margin-left: 12px;
    font-size: 12px;
}



.mobile-main-categories {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-category-item {
    margin-bottom: 10px;
}

.mobile-category-label {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #1137cd;
}

.mobile-sub-category-list {
    list-style-type: none;
    padding-left: 20px;
    margin-top: 5px;
    display: none;
    color: #081d6d;
    font-size: smaller;
}

.mobile-sub-category-list li {
    margin-bottom: 5px;
}

@media (min-width: 1163px) and (max-width: 1200px) {
    .mb-custom {
        margin-bottom: 0 !important;
    }
}

select:disabled {
    border-color: rgb(190, 190, 190) !important; /* Change border to blue */
    background-color: #e9f2fd; /* Optional: Light blue background */
}
/* Main dropdown styles */
.dropdown-menu {
    background-color: #e9f8ff;
    white-space: normal;
    width: 200px;
    max-height: 500px;
    overflow-y: auto;
    font-size: 11apx;
    border: 1px solid #ddd; /* Add border for better visibility */
    border-radius: 5px; /* Slight rounding for better aesthetics */
}

/* Submenu positioning */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Submenu appears below the parent item */
    left: 0; /* Align submenu with the parent */
    margin-top: 0; /* No additional margin */
    background-color: #dbfff7;
    max-height: 800px;
    overflow-y: auto;
    white-space: normal;
    min-width: 210px; /* Ensure consistent width */
    z-index: 1000; /* Ensure it stays on top */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
}

/* Hover behavior for desktop */
@media (min-width: 768px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block; /* Show submenu on hover */
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .dropdown-submenu > .dropdown-menu {
        position: static; /* Prevent absolute positioning for mobile */
        margin-top: 0.5rem;
        left: 0;
        min-width: 225px; /* Adjust width for mobile */
    }

    .dropdown-submenu {
        position: relative; /* Ensure submenu is positioned properly */
    }

    /* Submenu toggles on mobile */
    .dropdown-submenu > .dropdown-menu.show {
        display: block; /* Show submenu when toggled */
    }

    /* Arrow and layout adjustments */
    .dropdown-submenu > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px; /* Better padding for touchscreens */
    }

    .dropdown-arrow {
        margin-left: 8px;
        font-size: 0.8rem;
        cursor: pointer;
        transform: rotate(0deg); /* Default arrow rotation */
        transition: transform 0.2s ease; /* Smooth rotation transition */
    }

    /* Default state (hidden) */
.sublocation-menu {
    display: none;
}

/* Shown when toggled */
.sublocation-menu.show {
    display: block;
}

/* Arrow rotation */
.dropdown-arrow {
    transition: transform 0.3s ease;
}

.dropdown-arrow.open {
    transform: rotate(180deg);
}

    
}



/*  */


@media (max-width: 768px) {
    .filters-container-wrapper {
        display: block;
    }
}

@media (min-width: 768px) {
    .filters-container-wrapper {
        display: none;
    }

    .visible {
        display: block; /* or another appropriate display value */
    }
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.job-card-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Internet Explorer, Edge, and Firefox */
.job-card-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* width: 300px; height: 600px; overflow: hidden; position: relative; */
@media (min-width: 1600px) {

    .right-banner{
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
        border-radius: 10px;
    }
}

@media (min-width: 1500px) {

    .right-banner{
        width: 100%;
        height:600px;
        overflow: hidden;
        position: relative;
    }
}

@media (max-width: 1500px) {

    .right-banner{
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
    }
}

@media (max-width: 1400px) {

    .right-banner{
        width: 97%;
        height: 400px;
        overflow: hidden;
        position: relative;
    }
}

@media (max-width: 1300px) {

    .right-banner{
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
    }
}


@media (max-width: 1200px) {
    .right-banner {
        width: 100%;
        height: 400px;
    }
}

@media (max-width: 992px) {
    .right-banner {
        width: 100%;
        height: 400px;
    }
}

@media (max-width: 767px) {
    .right-banner {
        display: none; 
    }
}

@media (max-width: 602px) {
    .label-responsive {
        display: none;
    }
}
.left-sidebar::-webkit-scrollbar {
    display: none;
}

@media (min-width: 577px) and (max-width: 767px) {
    .job-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }

    .banner-box {
        grid-column: span 2;
        background: #F5F9FD; 
        /* padding: 10px;  */
        border-radius: 10px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 
    }

    .banner-img {
        width: 100%;
        height: auto;
        display: block; 
    }
}

.pinned-jobs-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    position: sticky;
    background-color: #F5F9FD;
    top: 0;
    z-index: 10;
}


@media (min-width: 768px) {

div.job-cards.job-card-container {
    min-height: 20vh; /* Minimum height when few jobs exist */
    max-height: 62vh; /* Maximum height to prevent overflow */
    overflow-y: auto;
    }
}


@media (min-width: 1300px) {

    div.job-cards.job-card-container {
        min-height: 20vh; /* Minimum height when few jobs exist */
        max-height: 68vh; /* Maximum height to prevent overflow */
        overflow-y: auto;
        }
    }
    
    @media (min-width: 1400px) {

        div.job-cards.job-card-container {
            min-height: 20vh; /* Minimum height when few jobs exist */
            max-height: 72vh; /* Maximum height to prevent overflow */
            overflow-y: auto;
            }
        }
@media (min-width: 1900px) {

    div.job-cards.job-card-container {
        min-height: 20vh; /* Minimum height when few jobs exist */
        max-height: 68vh; /* Maximum height to prevent overflow */
        overflow-y: auto;
    }
    

}
.pinned-job {
    background-color: #FFECCF;
}


@media (max-width: 1629px) {
    .pinned-jobs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1560px) {
    .pinned-jobs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 1200px) {
    .pinned-jobs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .pinned-jobs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
   
    .job-card-container {
        height: auto !important; /* Allow container to expand */
        overflow-y: visible !important; /* Enable page scrolling */
    }
    .pinned-jobs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .job-card-container {
        height: auto !important; /* Allow container to expand */
        overflow-y: visible !important; /* Enable page scrolling */
    }

    .pinned-jobs-container {
        grid-template-columns: 1fr; /* Full width */
        position: relative; /* Remove sticky behavior */
    }
}

.pagination-wrapper {
    width: 100%; /* Full width */
    background-color: #f8f9fa; /* Light gray background */
    padding: 15px 0; /* Add spacing */
    border-radius: 8px; /* Rounded corners */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Align vertically */
    margin-top: 20px; /* Adds space above */
}

.paginationBox {
    width: auto; /* Prevent stretching */
    text-align: center; /* Ensure inline elements stay centered */
}

.pagination {
    display: inline-flex; /* Prevent full-width stretching */
}
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.fade-out {
    opacity: 1;
    animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 768px) {
    .transparent-job-card {
        width: 90%;  /* Adjust width */
        height: 140px; /* Adjust height */
        max-width: 5000px; /* Max width limit */
        padding: 15px; /* Adjust spacing */
    }
}

@media (max-width: 1366px) {
    .transparent-job-card {
        width: 90%;  /* Adjust width */
        height: 140px; /* Adjust height */
        max-width: 5000px; /* Max width limit */
        padding: 15px; /* Adjust spacing */
    }
}

@media (min-width: 1367px) {
    .transparent-job-card {
        width: 90%;  /* Adjust width */
        height: 140px; /* Adjust height */
        max-width: 5000px; /* Max width limit */
        padding: 15px; /* Adjust spacing */
    }
}

@media (min-width: 1850px) {
    .transparent-job-card {
        width: 90%;  /* Adjust width */
        height: 197px; /* Adjust height */
        max-width: 5000px; /* Max width limit */
        padding: 15px; /* Adjust spacing */
    }
}


/* radio button select color */

.jobTypeFilters label span {
    border-radius: 999px;

}

/* Selected style — only background color changes */
.jobTypeFilters input[type="checkbox"]:checked + span,
.jobTypeFilters input[type="radio"]:checked + span {
    color: inherit; /* Keep original text color */
}

.workTypeFilters label span {
    padding: 2px 8px;
    border-radius: 999px;
}

.workTypeFilters input[type="checkbox"]:checked + span {
    color: #007bff; /* same blue text */
}

/* Optional: remove checkbox spacing */
.workTypeFilters input[type="checkbox"] {
    margin-right: 5px;
}

/* .jobTypeFilters label span {
    padding: 2px 8px;
    border-radius: 999px;
    transition: background-color 0.3s, color 0.3s;
} */

.jobTypeFilters input[type="checkbox"]:checked + span,
.jobTypeFilters input[type="radio"]:checked + span {
    background-color: #e6f4ff;
    color: #007bff;
}


/* Default style */
.location-select {
    background-color: rgb(255, 255, 255);
    transition: background-color 0.3s ease;
}

/* When a location is selected */
.location-select:valid {
    background-color: #e6f4ff; /* Light blue */
}

/* Default look */
.industry-select {
    background-color: white;
    transition: background-color 0.3s ease;
}

/* Only turns blue when user selects a real option */
.industry-select:valid {
    background-color: #e6f4ff; /* Light blue */
}

.joblevel-select {
    background-color: white;
    transition: background-color 0.3s ease;
}

.joblevel-select:valid {
    background-color: #3eabe7a8; /* Light blue when something is selected */
}







/* Pagination wrapper */
.customPaginationBox nav {
    display: flex;
    justify-content: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Pagination list */
.customPaginationBox .pagination {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Base button style (for both links and spans) */
.customPaginationBox .page-link {
    width: 93px;                 /* Ensures equal width for all buttons */
    height: 25px;                /* Equal height */
    padding: 0;                  /* Remove inner padding for centering */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff;
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
}

/* Hover effect */
.customPaginationBox .page-link:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Active page */
.customPaginationBox .page-item.active .page-link {
    background-color: #28a745;
    color: white;
    pointer-events: none;
}

/* Disabled state (for prev/next on ends) */
.customPaginationBox .page-item.disabled .page-link {
    background-color: #e0e0e0;
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
}

/* Optional: Add soft shadow and smooth edges */
.customPaginationBox .page-link {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Hover effect */
.location-option:hover {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Submenu should only open to the side */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu:hover .sublocation-menu {
    display: block;
}

.sublocation-menu {
    display: none;
    z-index: 1000;
}



/* Show sublist only on hover */
.hover-reveal-sublist {
    display: none;
}

.hover-reveal-group:hover .hover-reveal-sublist {
    display: block;
}

/* Hover styling */
.location-option:hover {
    background-color: #0d6efd !important;
    color: white !important;
}

.location-option:focus {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Arrow style */
.dropdown-arrow {
    font-size: 0.75rem;
    margin-left: auto;
}

/* When an item is selected, apply light blue bg (like your image) */
.bg-select-active {
    background-color: #e9f8ff !important;
}

/* Hover styling for dropdown options */
.location-option:hover {
    background-color: #3eabe7a8 !important;
    
}

/* Only the select box turns blue on selection */
.bg-select-active {
    background-color: #e9f8ff !important;
}

/* When dropdown is open, keep options white */
select.form-select option {
    background-color: white;
}



/* Blue background for the selected box */
.bg-select-active {
    background-color: #3eabe7a8 !important;
}

/* Native select hover workaround (only affects focus styling) */
select.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Optional: visually style sublocation options */
select.form-select option {
    padding-left: 8px;
}

select.form-select option[value^="—"] {
    font-style: italic;
    padding-left: 20px;
}




/* Apply blue bold text when radio is checked */
.jobmarket input[type="radio"]:checked + * {
    color: #0d6efd; /* Bootstrap primary blue */
    
}
.filter-col input[type="checkbox"]:checked + span {
    color: #0d6efd; /* Bootstrap blue */
    
}

.filter-col input[type="radio"]:checked + span {
    color: #0d6efd;      /* Bootstrap blue */
       /* Bold */
}

.bg-selected {
    background-color: #3eabe7a8 !important;
}

.bg-selected1 {
    background-color: #1337aa !important;
}


.preview-selected {
    background-color: #3eabe7a8 !important; /* Bootstrap primary */
}



.location-button {
    width: 100%;
    /* max-width: 300px; default size */
}

/* Medium devices (≥576px) */
/* @media (min-width: 576px) {
    .location-button {
        max-width: 350px;
    }
} */

/* @media (max-width: 3px) {
    .location-button {
        max-width: 187px;
    }
} */


@media (max-width: 379px) {
    .location-button {
        max-width: 187px;
    }
}


@media (max-width: 369px) {
    .location-button {
        max-width: 187px;
    }
}

@media (max-width: 354px) {
    .location-button {
        max-width: 186px;
    }
}

@media (max-width: 352px) {
    .location-button {
        max-width: 185px;
    }
}

@media (max-width: 351px) {
    .location-button {
        max-width: 182px;
    }
}

@media (max-width: 350px) {
    .location-button {
        max-width: 180px;
    }
}

@media (max-width: 348px) {
    .location-button {
        max-width: 179px;
    }
}

@media (max-width: 346px) {
    .location-button {
        max-width: 177px;
    }
}

@media (max-width: 344px) {
    .location-button {
        max-width: 175px;
    }
}

@media (max-width: 343px) {
    .location-button {
        max-width: 173px;
    }
}

@media (max-width: 342px) {
    .location-button {
        max-width: 172px;
    }
}

@media (max-width: 341px) {
    .location-button {
        max-width: 171px;
    }
}

@media (max-width: 340px) {
    .location-button {
        max-width: 170px;
    }
}

@media (max-width: 339px) {
    .location-button {
        max-width: 169px;
    }
}

@media (max-width: 338px) {
    .location-button {
        max-width: 168px;
    }
}

@media (max-width: 337px) {
    .location-button {
        max-width: 167px;
    }
}

@media (max-width: 336px) {
    .location-button {
        max-width: 165px;
    }
}

@media (max-width: 335px) {
    .location-button {
        max-width: 164px;
    }
}

@media (max-width: 334px) {
    .location-button {
        max-width: 161px;
    }
}

@media (max-width: 333px) {
    .location-button {
        max-width: 161px;
    }
}

@media (max-width: 331px) {
    .location-button {
        max-width: 160px;
    }
}

@media (max-width: 330px) {
    .location-button {
        max-width: 340px;
    }
}

/* @media (max-width: 328px) {
    .location-button {
        max-width: 157px;
    }
}

@media (max-width: 327px) {
    .location-button {
        max-width: 156px;
    }
}

@media (max-width: 326px) {
    .location-button {
        max-width: 155px;
    }
} 

@media (max-width: 325px) {
    .location-button {
        max-width: 153px;
    }
}

@media (max-width: 323px) {
    .location-button {
        max-width: 151px;
    }
}

@media (max-width: 322px) {
    .location-button {
        max-width: 150px;
    }
}

@media (max-width: 320px) {
    .location-button {
        max-width: 148px;
    }
}

@media (max-width: 319px) {
    .location-button {
        max-width: 340px;
    }
} */





/* short loaction size  */

/* @media (max-width: 317px) {
    .location-button {
        max-width: 340px;
    }
}




@media (max-width: 417px) {
    .jobmarket {
        width: 200px;
    }
}

@media (max-width: 420px) {
    .jobmarket {
        width: 200px;
    }
}

@media (max-width: 434px) {
    .jobmarket {
        width: 170px;
    }
}

@media (min-width: 338px) {
    .jobmarket {
        width: 165px;
    }
}

@media (min-width: 336px) {
    .jobmarket {
        width: 165px;
    }
}


@media (min-width: 334px) {
    .jobmarket {
        width: 168px;
    }
}

@media (min-width: 333px) {
    .jobmarket {
        width: 162px;
    }
}

@media (min-width: 331px) {
    .jobmarket {
        width: 162px;
    }
} */





@media (max-width: 333px) {
    .filters {
        width: 100%;
        justify-content: center;
        gap: 5px 0px;
        margin-bottom: 4px;
        margin-right: 0px;
    }
}

.custom-blue-radio input[type="radio"]:checked {
    accent-color: #0d6efd; /* Bootstrap Primary Blue */
}

.custom-blue-checkbox input[type="checkbox"] {
    accent-color: #0d6efd; /* Bootstrap blue */
}