.category-877 {
    font-family: 'Roboto', sans-serif;
}

.contractor_filter_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #000;

    padding: 20px 40px;
    border-radius: 8.4px;
}

.contractor_filter_container 
:is(.contractor_filter_region, .contractor_listing_tier, .contractor_search) {
    width: 100%;
    border-radius: 4.2px;
}

:is(.contractor_filter_region, #masonRegistrationOne, #contractRegistrationOne) .selectize-control{
    line-height: 0;
}

.selectize-input :is(#contractor_region-selectized, #mason_region-selectized) {
    font-size: 1rem !important;
    color: #000 !important;
}

:is(.contractor_filter_region, .contractor_form_modal_registration, .mason_form_modal_registration) .selectize-input .item {
    font-size: 1rem !important;
    color: #000 !important;

    padding: 5px !important;
}

.contractor_filter_region :is(#contractor_region-selectized, #mason_region-selectized){
    padding: 5px !important;
    width: 100px !important;

    -webkit-appearance: none;
    -moz-appearance: none;
}

:is(#contractor_region-selectized, #mason_region-selectized){
    padding: 5px !important;
    width: 100px !important;

    -webkit-appearance: none;
    -moz-appearance: none;
}

:is(#contractorLocation-selectized, #masonLocation-selectized){
    padding: 7px !important;
    width: 100px !important;

    font-size: 1rem;
}
/* 
:is(#masonRegistrationOne, #contractRegistrationOne) .selectize-input :is(.items, .has-items) {
    border-radius: 8px !important;
    padding: 10px !important;
} */

:is(#masonRegistrationOne, #contractRegistrationOne) .selectize-control .items {
    border-radius: 8px !important;
    padding: 10px !important;
}



#mason_tier,
#contractor_tier {
    padding: 10px;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M22.1812%2010.861L13.6499%2019.3922L5.11865%2010.861%27%20stroke%3D%27%23E8C204%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat 95% center #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#contractor_search,
#mason_search  {
    appearance: none;
    padding: 10px;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.6702%2021.9515C17.6175%2021.9515%2021.628%2017.941%2021.628%2012.9937C21.628%208.04644%2017.6175%204.03589%2012.6702%204.03589C7.72295%204.03589%203.7124%208.04644%203.7124%2012.9937C3.7124%2017.941%207.72295%2021.9515%2012.6702%2021.9515Z%22%20stroke%3D%22%23FDD209%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M19.0049%2019.3282L24.1876%2024.511%22%20stroke%3D%22%23FDD209%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat 95% center #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selectize-control.single .selectize-input, .selectize-dropdown.single {
    border: none;
    background: white !important;
}

.contractor_filter_region .selectize-input::after {
    /* display: none !important; */
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.35%2015.1265C16.2347%2015.1265%2017.7625%2013.5987%2017.7625%2011.714C17.7625%209.82934%2016.2347%208.30151%2014.35%208.30151C12.4653%208.30151%2010.9375%209.82934%2010.9375%2011.714C10.9375%2013.5987%2012.4653%2015.1265%2014.35%2015.1265Z%22%20stroke%3D%22%23E7D71E%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M22.8813%2011.7141C22.8813%2019.3922%2014.3501%2025.3641%2014.3501%2025.3641C14.3501%2025.3641%205.81885%2019.3922%205.81885%2011.7141C5.81885%209.45148%206.71767%207.28153%208.31759%205.68161C9.91751%204.08169%2012.0875%203.18286%2014.3501%203.18286C16.6127%203.18286%2018.7827%204.08169%2020.3826%205.68161C21.9825%207.28153%2022.8813%209.45148%2022.8813%2011.7141V11.7141Z%22%20stroke%3D%22%23E7D71E%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center #ffffff !important;
    background-size: 1rem;
    padding: 5px !important;
    -webkit-appearance: none;
    -moz-appearance: none;

    border-style: none !important;
    border-width: 0 !important;
    border-color: none !important;

    width: 25px !important;
    height: 25px !important;

    top: 25% !important;
    right: 5% !important;
}

.contractor_card_listing_container,
.mason_card_listing_container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    /* height: 50vh; */
}

.contractor_card_listing_card {
    display: flex;
    gap: 12px;
    width: 49%;
    height: 150px;  
    max-height: 200px;
    border: 1px solid #BABABA;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;

    transition: all 0.3s ease-out;
}

.contractor_card_listing_card:hover {
    background-color: #FFEB00;
    border: 1px solid #FFEB00;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.contractor_card_listing_card:hover span{
    color: #000000;
}

.contractor_card_listing_card_content {
    display: flex;
    gap: 15px; 
    width: 100%;
}

.contractor_card_listing_card_content img.card_logo {
    width: 100%;
    height: 100% !important;
    border-radius: 13px;

    object-fit: contain;
    object-position: center;
}

.card_logo_container {
    width: 12rem;
}

.contractor_card_listing_card_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.contractor_card_listing_card_title {
    display: flex;
    align-items: start;
    gap: 10px;
}

.contractor_card_listing_card_title svg {
    width: 30px;
}

.contractor_card_listing_card_title span.title {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    text-transform: capitalize;
    line-height: 1;
}

.contractor_card_listing_card_description {
    display: flex;
    gap: 10px;
}

.contractor_card_listing_card_description :is(.contractor_card_region, .contractor_card_tier) {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.contractor_card_region p {
    display: -webkit-box; /* On précise qu'on veut utiliser webkit-box */
    overflow: hidden; /* On cache tout ce qui peut dépasser */
    -webkit-box-orient: vertical; /* On indique le sens du texte */
    -webkit-line-clamp: 2; /* On donne le nombre de lignes souhaité */
}

.contractor_card_listing_card_description :is(span) {
    font-size: 12px;
    color: #9F9F9F;
}

.contractor_card_listing_card_description :is(p) {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 0;
}



.contractor_single_post_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
    padding: 10px;
}

.c_content_title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c_content_title .single_logo {
    max-width: 80px;
    width: 70px;
}

.c_content_title span{
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.c_content_container {
    display: flex;
    align-items: center;
}

.c_content_details {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.c_content_details span:nth-child(1) {
    font-size: 16px;
    color: #9F9F9F;
    font-weight: normal;
    text-transform: capitalize;
}

.c_content_details .span_child {
    font-size: 18px;
    font-weight: normal !important;
    color: #222222 !important;
}

.c_content_details.list_projects a {
    font-size: 18px;
    font-weight: normal !important;
    color: #222222 !important;
    text-decoration: underline !important;
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.c_content_details span{
    display: flex;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
}


.c_content_details a {
    color: #222222 !important;
    font-size: 20px;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.c_content_details a:hover,
.c_content_details a:active, 
.c_content_details a:focus {
    color: #E8C204 !important;
}

.c_content_title p,
.c_content_details img,
.contractor_card_listing_card_title p,
.contractor_card_tier img {
    display: none;
}

.c_content_title img,
.contractor_card_listing_card_title img {
    width: 30px;
}

.contractor-pagination {
    display: flex;
    justify-content: end;
    gap: 5px;
    width: 100%;
    margin-top: 20px;
}

.pagination-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border: 1px solid #F1F1F1;
    border-radius: 8.4px;
    background-color: white;
    color: #000000;
}

.pagination-btn:hover,
.pagination-btn:active,
.pagination-btn:focus {
    background-color: hsl(0, 0%, 88%);
    color: #000000;
}

.pagination-btn.active {
    border: none;
    background-color: #E8C204;
    color: #fff;
    border-radius: 8.4px;
}

.pagination-btn.active:hover,
.pagination-btn.active:active,
.pagination-btn.active:focus {
    background-color: #E8C204;
    color: #fff;
}

.contractor-pagination span.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;

    width: 41px;
    height: 43px;
}

@media (280px <= width <= 768px) {
    .contractor_filter_container {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        padding: 20px;
    }

    .contractor_card_listing_card {
        width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .contractor_card_listing_card_title span.title {
        font-size: 20px;
    }

    .contractor_card_listing_card_description :is(.contractor_card_region, .contractor_card_tier) {
        width: 35vw;
    }

    .contractor_card_listing_card_description :is(span) {
        font-size: 10px;
    }

    .contractor_card_listing_card_description :is(p) {
        font-size: 15px;
        line-height: 1;
    }

    .contractor-pagination {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .contractor_card_listing_card_content img.card_logo {
        object-fit: contain;
        object-position: center;

        max-height: 80px;
    }

    .contractor_card_listing_card_info {
        width: 65%;
    }


    .contractor_single_post_container {
        gap: 0;
        padding-inline: 10px;
    }

    .c_content_title {
        margin-bottom: 20px;
    }

    .c_content_title span {
        font-size: 30px;
        line-height: 1;
    }

    .c_content_container {
        flex-direction: column;
    }

    .c_content_details {
        width: 100%;
        margin-top: 10px;
    }

    .c_content_details p {
        margin-bottom: 0;
    }

    .c_content_details span{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}