main{
    display: -webkit-flex;
    display: flex;
    flex-direction: column;

}
.searchTools{
    justify-content: space-between;
    align-items: center;
}
.justExistButtonDiv{
    position: relative;
    align-items: center;
    padding: 5px 10px 5px 5px;
}
.justExist{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.justExistToggle{
   width: 36px;
   height: 20px;
    background-color: var(--blackClrOp1);
    border-radius: 15px;
    position: relative;
    pointer-events: none;
    z-index: 0;
    transition: background-color .4s;
}
.justExistToggle::after{
    width: 16px;
    height: 16px;
    top: 2px;
    position: absolute;
    border-radius: 50%;
    content: "";
    left: 2px;
    background-color: var(--bgClr);
    transition: transform .4s;
}
.justExist:checked + .justExistToggle
{
    background-color: var(--txtSecendaryClr);
}
.justExist:checked + .justExistToggle::after{
    transform: translateX(16px);
}
.sortMenuContainer{
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--lineBlack1ClrOp1);
    z-index: 986;
    display: none;
    animation : fadein .6s;
    cursor: pointer;
}
.sortMenu{
    width: 86%;
    height: 90%;
    background-color: var(--bgClr);
    z-index: 987;
    border-radius: 7px;
    display: -ms-grid;
    display: -moz-grid;
    display: grid;
    grid-template-rows: 40px 1fr 40px;
    padding: 15px;
    gap: 10px;
    max-width: 450px;
    cursor: default;
}
.showFilterBtn{
    position: relative;
    padding: 3px 28px 3px 10px;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: right 6px center;
    background-image: url("/src/filter.svg");
}
.activeFilterMenu{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.sortMenuHeader{
    align-items: center;
    justify-content: space-between;   
}
.sortMenuTitle{
    padding-right: 28px;
    background-image: url("/src/sort.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right center;
}
.menuCloserBtn{
    background-image: url("/src/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px;
}
.sortMenuOptions{
    overflow-y: auto;
    padding: 10px 0;
    border-bottom: 1px solid var(--blackClrOp2);
    border-top: 1px solid var(--blackClrOp2);
}
.sortInput{
    opacity: 0;
    display: none;
}
.sortLabel{
    padding: 3px 30px 3px 10px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-image: url("/src/circle.svg");
    background-position: right 6px center;
    cursor: pointer;
    width: fit-content;
}

.sortInput:checked + .sortLabel{
    background-image: url("/src/circleFill.svg");
}
/* resultListContainer */
.noResultDiv{
    max-width: 450px;
    margin: 10px auto 80px;
    align-items: center;
}
.noResultImg{
    height: 300px;
    width: 300px;
    aspect-ratio: 1/1;
}
.noResultText{
    margin-top: -20px;
}
.backToMain{
    width: fit-content;
    padding: 7px 75px 7px 50px;
    margin-top: 20px;
    background-color: var(--blackClrOp4);
    border-radius: 7px;
    background-image: url("/src/link.svg");
    background-position: right 45px center;
    background-repeat: no-repeat;
    background-size: 20px;
    transition: border .6s;
    border: 1px dashed var(--blackClrOp2);
}
.backToMain:hover{
    border: 1px dashed #222;
}
/* offerContainer */
.offerContainer{
    width: 100% !important;
}
/* resultList */
.resultList{
    grid-template-columns: 1fr 1fr;
    gap: 10px 10px;
    margin-top: 15px;
}
.resultListItem{
    width: 100%;
    position: relative;
    padding: 15px;
    background-color: var(--blackClrOp7);
    border-radius: 7px;
    border: 1px solid var(--blackClrOp4);
}

@media screen  and (min-width:769px){
    main{
        display:-ms-grid;
        display: -moz-grid;
        display: grid;
        grid-template-columns: 2fr .8fr;
        align-items: flex-start;
        gap: 50px;
    }
    .searchTools{
        flex-direction: column;
        align-items: unset;
        justify-content: unset;
        position: sticky;
        top: 99px;
        padding: 10px;
        border-radius: 7px ;
        background-color: var(--blackClrOp7);
        border: 1px solid var(--blackClrOp3);
        order : 1;
        margin-top: 10px;
        height: calc( 100vh - 120px );
        overflow-y: auto;
    }
    .showFilterBtn{
        display: none;
    }
    .justExistButtonDiv{
        justify-content: space-between;
    }
    .activeFilterMenu{
        display: none;
    }
    .resultList{
        margin-top: 10px;
    }
    /* sortMenuContainer */
    .sortMenuContainer{
        position: unset !important;
        display: -webkit-flex;
        display: flex;
        padding: 0;
        background-color: transparent;
        width: unset;
        height: unset;
        justify-content: unset;
        align-items: unset;
        flex-direction: column;
    }
    .sortMenu{
        position: unset !important; 
        width: unset;
        height: unset;
        background-color: transparent;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .sortMenuHeader{
        display: none;
    }
    .sortLabel{
        padding: 3px 20px 3px 10px;
        background-position: right 0px center;
    }
}
@media screen and (min-width:968px) {
    main{
        grid-template-columns: 3.5fr 1fr;
    }
    .resultList{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px 15px;
    }
}