/*********************sort by**********************/
#x4d12{display: flex;align-items: center;justify-content: flex-start;padding: 8px;background: #f2f2f2;}
.x4d13{ width: 100%; }
.x4s6::before{background: url(../img/icons/sort-up.svg)no-repeat;content: "";background-position: center;display: block;width: 26px;height: 26px;background-size: 15px 24px;margin-right: 0px;}
.x4s6{color: var(--therd-text-color);text-transform: uppercase;font-size: 12px;font-weight: 400;font-family: Arial, Helvetica, sans-serif;display: flex;align-items: center;margin-right: 10px;width: 14%;}
.x4bt1{font-family:Arial, Helvetica, sans-serif;font-size: 13px;text-transform: uppercase;background: transparent;border: none;color: var(--therd-text-color);font-weight: 500;margin:  0 10px;}
#x4d14{display: flex;align-items: center;}
.x4s8{width: 17px;margin: 0 5px;height: 17px;}  
.x4s8.active {filter: invert(60%) sepia(85%) saturate(1065%) hue-rotate(166deg) brightness(101%) contrast(102%)}

/************************hide from csss*************************/
.x4in1:focus::placeholder {opacity: 0;}
.x4in2:focus::placeholder {opacity: 0;}
#x4d15{display: none;}
.zf1{display: block;}
.x4d16{display: flex;justify-content: space-between;margin: 0 15px;}
.x4d17{padding:4px 0;width: 32.8%;}
.x4lb1{display: flex;justify-content: center;position: unset; color: #000;font-family: var(--font-1);text-transform: uppercase;font-weight: 600;font-size: 15px;}
.x4d18{width: 100%;margin: 27px 0;position: relative;}
.x4in1{padding: 14px;border: 1px solid #c3c3c5;background: #ffff;color: #000; text-align: center;font-size: 15px;width: 100%;text-transform: capitalize;}
.x4d19{position: relative;display: flex;justify-content: space-between;}
.x4d20{position: relative;margin: 27.1px 0;    display: flex;justify-content: space-between;}
.x4in2:focus,
.x4in2:valid{background: #eef5f8;border: 2px solid var(--second-text-color);color: var(--second-text-color);font-weight: 600;}
.x4in2{font-style: italic;text-align: center;padding: 15px 10px;width: 48%;color: #000;font-weight: bold;font-size: 15px;text-transform: capitalize;border: 1px solid #c3c3c5;opacity: 75%;background: #ffff;}
.x4s9{margin-top: 18px;}
.x4d21{width: 48%;position: relative;}
.x4in3{text-align: center;padding: 15px 10px;color: #000;font-size: 15px;text-transform: capitalize;border: 1px solid #c3c3c5;opacity: 75%;width: 100%;background: #ffff;}
#x4d22{width: 100%;background: #f9f9f9;padding: 18px 0 0;border-top: 5px solid var(--second-text-color);margin-top: -90px;z-index: 2;position: relative;}
#x4d23{display: flex;justify-content: space-between;margin: 0 15px;flex-wrap: wrap;}
.x4i7{width: 8px;position: absolute;top: 22px;bottom: 0;right: 11px;}
.x4l1{padding:10px;cursor: pointer;color: var(--text-color);text-transform: capitalize;font-family: var(--font-1);font-weight: 400;font-size: 17px;}
.x4l1:hover{background: #F2F2F2;}
.x4u1{text-align: justify;position: relative;margin-top: 10px;background: #fff;box-shadow: 0 0 3px rgba(0,0,0,0.1);display: none;position: absolute;z-index: 1;width: 100%;}
.x4d24{display: flex;justify-content: center;padding: 15px 0 22px;}
.x4bt2{text-align:center; background: transparent;color: var(--second-text-color);padding: 6px 9px;border: 2px solid var(--second-text-color);font-size: 15px;text-transform: uppercase;width: 12%;font-family: var(--font-1);font-weight: 400;margin: 0 5px;}
.x4bt2:hover{color: #fff;background: #29aae3;transition:  4s all; cursor: pointer;}
.x4d27{display: flex;flex-wrap: wrap;flex-direction: column;}
#x4bt3:hover{opacity:60%;background: var(--second-text-color);}
#x4bt3{background: var(--second-text-color);color: #fff;}
.x4d25{display: flex;align-items:center;line-height: 2;}
.x4d25 input[type="checkbox"] {border: 3px solid #666;}

#x4d25, #x4d244{position: relative;}
.x4i102{width: 36px; height: 36px; position: absolute; right: -74px; bottom: -35px; z-index: 1000;}


.x4in4{width: 14px;height: 14px;}
.x4lb2{ width: max-content; margin: 0 12px;text-transform: uppercase;font-weight: 400;color: #666;font-size: 13px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}
.x4lb3{display: flex;padding: 10px 0; justify-content: center;position: unset;color: #000;font-family: var(--font-1);text-transform: uppercase;font-weight: 600;font-size: 15px;}
.x4d110{display: none;border: 1px solid #c1c1c1;margin: 0 35px 28px;padding: 6px;}
.x4in2:focus, .x4in2:valid {background: #eef5f8;border: 2px solid var(--second-text-color);color: var(--second-text-color);font-weight: 600;}
.x4d26{flex-direction: row;justify-content: center;align-items: center;}
.x4d100 {
    margin: 6px 10px;
}

/* Sort-Icon DropDown Menu */
    /* Container for the icon and the dropdown */
    .dropdown-container11 {
        /* position: relative; */
        position: absolute;
        right: 80px;
        bottom: 61px;
        display: inline-block;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content11 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 80px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 100;
        right: -41px;
        bottom: -41px;
    }

    /* Dropdown menu items */
    .dropdown-content11 a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color of dropdown links on hover */
    .dropdown-content11 a:hover {
        background-color: #f1f1f1;
    }

    /* Show the dropdown menu on hover */
    .dropdown-container11:hover .dropdown-content11 {
        display: block;
    }

    #x4bt1111{padding: 13px 0;}

/* Sort-Icon DropDown Menu */


/**********************media screen******************/

@media screen and (max-width:907px) {
    .x4d17{width: 100%;}
    .x4d16{flex-wrap: wrap;}
    .x4bt2{width: 165px;}
    .x4d13{display: flex;justify-content: space-between;}
    #x4d1777{margin-top: 20px;}
}

@media screen and (max-width:707px) {
    #x4d12{display: block;}
    #x4d14,.x4s6{margin: 18px 0;width: 100%;}
    .x4d13{flex-direction: column;place-items: baseline;}
    .x4bt1{padding: 13px 0;}
  
}

@media screen and (max-width:640px){
    #x4d25{padding-bottom: 50px;}
    .dropdown-container11{bottom: 45px;}
    .dropdown-content11{bottom: -35px;}
    #x4bt1111{padding: 8px 0;}
    .x4d24{padding: 15px 0 55px;}
}

/* @media screen and (max-width:630px){
    .dropdown-content11{right: -70px; bottom: -68px;}
    #x4bt1111{padding: 8px 0;}
    .x4bt2{width: 120px;}
}

@media screen and (max-width:490px){
    .x4bt2{width: 85px;font-size: 11px;}
}

@media screen and (max-width:380px){
    .x4bt2{width: 68px;font-size: 9px;}
} */