@import "./scss/fontface.scss";
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Bold(FaNum).woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb_Medium(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Medium(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Medium(FaNum).woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/woff2/IRANSansWeb_Light(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Light(FaNum).woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/woff2/IRANSansWeb_UltraLight(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_UltraLight(FaNum).woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum).woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
body {
    font: 16px/25px IRANSans;
    color: #717171;
    background-color: #eeeeee;
    overflow-x: hidden;
}
    body * {
        font: 16px/25px IRANSans;
        color: #717171;
    }

    .search * {
        flex-wrap: nowrap
    }
        .filterBox_Title > span{
            font-size:14px;
        }
        .search *::before, .search *::after {
            box-sizing: border-box;
            flex-wrap: wrap
        }

.search.container {
    max-width: 100%;
    width: auto;
    display: block;
    margin: 0
}

.search .main {
    display: block;
    margin: 0 auto;
    width: calc(100% - 40px);
    max-width: 1600px
}

.pseudo, .search-page .chkswitch label::before, .search-page .search-option .filterBox .filterBox_Title::after {
    content: '';
    position: absolute
}

.boxstyle {
    background-color: #fff;
    border: 1px solid #e7e7e7;
    box-shadow: 0 12px 12px 0 rgba(181,181,181,0.1)
}

.flexCenterH {
    display: flex;
    justify-content: center
}

.flexCenterV {
    display: flex;
    align-items: center
}

.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center
}

.overControl {
    overflow: hidden
}

.search-page {
    display: flex;
    flex-wrap: nowrap
}

    .search-page .textlabel {
        font-size: 16px;
        color: #7c7a7a;
        margin-bottom: 10px;
        width: 100%
    }

    .search-page .btn {
        width: 100%;
        display: inline-block;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #2BACE2;
        color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);
        height: 48px
    }

        .search-page .btn:hover {
            box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)
        }

    .search-page .txt, .search-page .ddl, .search-page .txtarea {
        width: 100%;
        padding: 8px 16px;
        background-color: #fbfbfb;
        color: rgba(0,0,0,0.87);
        font-size: 12px;
        border: 1px solid rgba(0,0,0,0.24);
        border-radius: 4px;
        transition: 0.3s ease-in-out
    }

        .search-page .txt:focus, .search-page .ddl:focus, .search-page .txtarea:focus {
            background-color: #fff;
            border-color: #2BACE2
        }

    .search-page .txt, .search-page .ddl {
        height: 39px
    }

    .search-page .ddl {
        padding: 0 5px 0 16px;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background: #fbfbfb url("/basket/images/arrowdown.svg") no-repeat 8px center;
        background-size: 14px auto
    }

    .search-page .txtarea {
        height: 123px;
        resize: none
    }

    .search-page input[type=number]::-webkit-inner-spin-button, .search-page input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .search-page input[type=number] {
        -moz-appearance: textfield
    }

    .search-page .chkswitch {
        position: relative;
        display: inline-block;
        vertical-align: middle
    }

        .search-page .chkswitch input[type=checkbox] {
            -moz-appearance: none;
            -webkit-appearance: none;
            border: 1px solid rgba(0,0,0,0.24);
            border-radius: 30px;
            background-color: #fbfbfb;
            width: 55px;
            height: 23px;
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            transition: 0.4s
        }

        .search-page .chkswitch label {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: rgba(0,0,0,0.87);
            padding: 0 11px;
            cursor: pointer
        }

            .search-page .chkswitch label::before {
                height: 17px;
                width: 17px;
                right: 4px;
                bottom: 4px;
                border: 1px solid #d8d8d8;
                border-radius: 50%;
                background-color: #fff;
                transition: .4s
            }

        .search-page .chkswitch input[type=checkbox]:checked {
            background-color: #2BACE2
        }

            .search-page .chkswitch input[type=checkbox]:checked + label::before {
                -webkit-transform: translateX(-30px);
                -ms-transform: translateX(-30px);
                transform: translateX(-30px)
            }

    .search-page .mobileview {
        display: none;
        cursor: pointer;
        background-color: #e0e0e0;
        color: #424242;
        font-size: 12px;
        padding: 5px 11px;
        border-radius: 4px
    }

    .search-page .search-option {
        width: 20%;
        max-width: 20%;
        min-width: 189px;
        margin-left: 22px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .search-page .search-option .search-option_head {
            display: none;
            padding: 10px
        }

            .search-page .search-option .search-option_head .closeSearch {
                width: 30px;
                height: 30px;
                border: 2px solid #8d8d8d;
                border-radius: 50%;
                cursor: pointer;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                line-height: 1
            }

        .search-page .search-option .filterBox {
            background-color: #fff;
            box-shadow: 0 12px 12px 0 rgba(181,181,181,0.11);
            border: 1px solid #dedede;
            margin: 0 0 10px;
            padding: 6px 0px 0
        }

            .search-page .search-option .filterBox .filterBox_Title {
                padding: 0 15px;
                border-bottom: 1px solid #f2f2f2;
                color: #535353;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                position: relative;
                z-index: 1;
                height: 30px;
            }

                .search-page .search-option .filterBox .filterBox_Title::after {
                    top: 25%;
                    left: 16px;
                    z-index: 2;
                    width: 10px;
                    height: 10px;
                    border-style: solid;
                    border-width: 0 0px 1px 1px;
                    border-color: #535353;
                    transform: rotate(-45deg);
                    transition: all .3s ease-in-out
                }

                .search-page .search-option .filterBox .filterBox_Title .Titlefix {
                    cursor: default
                }

                .search-page .search-option .filterBox .filterBox_Title.toggle-view {
                    border-bottom: none
                }

                    .search-page .search-option .filterBox .filterBox_Title.toggle-view::after {
                        transform: rotate(135deg);
                        top: 36%
                    }

            .search-page .search-option .filterBox .filterBox_content {
                padding: 6px 13px 12px;
                max-height: 333px;
                overflow: auto
            }

        .search-page .search-option .ulCategory {
            list-style: none;
            padding: 10px 0;
        }

            .search-page .search-option .ulCategory li {
                margin-bottom: 5px
            }

            .search-page .search-option .ulCategory a {
                font-size: 12px;
                color: #545454
            }

                .search-page .search-option .ulCategory a:hover {
                    color: #2BACE2
                }

            .search-page .search-option .ulCategory li.active > a {
                font-weight: 600;
                color: #2BACE2
            }

            .search-page .search-option .ulCategory ul {
                display: none;
                padding-right: 13px
            }

            .search-page .search-option .ulCategory::after {
                content: "";
                position: relative;
                z-index: 2;
                height: 5px;
                width: 100%;
                display: block;
                background: #fff
            }

        .search-page .search-option.is-active {
            visibility: visible;
            opacity: 1
        }

    .search-page .search-content {
        flex: 1;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .search-page .search-content .resultOption {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            padding: 10px 5px;
            background-color: #fff;
            box-shadow: 0 12px 12px 0 rgba(181,181,181,0.11);
            border: 1px solid #dedede
        }

            .search-page .search-content .resultOption .sortList {
                display: flex;
                align-items: center
            }

                .search-page .search-content .resultOption .sortList .lbl {
                    font-size: 12px;
                    color: #515151
                }

                .search-page .search-content .resultOption .sortList .ulSortList {
                    display: flex
                }

                    .search-page .search-content .resultOption .sortList .ulSortList li {
                        margin-right: 8px
                    }

                        .search-page .search-content .resultOption .sortList .ulSortList li a {
                            font-size: 12px;
                            color: #515151;
                            padding: 0 10px;
                            border-radius: 5px
                        }

                            .search-page .search-content .resultOption .sortList .ulSortList li a:hover {
                                background-color: #ece9e9
                            }

                            .search-page .search-content .resultOption .sortList .ulSortList li a.active {
                                background-color: #2BACE2;
                                color: #fff
                            }

            .search-page .search-content .resultOption .counter {
                display: flex;
                justify-content: flex-end;
                color: #b7b7b7;
                font-size: 13px
            }

                .search-page .search-content .resultOption .counter .cunt {
                    color: #b7b7b7;
                    font-size: 13px;
                    margin: 0 2px
                }

.searchBox {
    position: relative;
    z-index: 2
}

    .searchBox .close-search-result {
        position: absolute;
        top: -31px;
        left: 15px;
        z-index: 4;
        width: 15px;
        height: 15px;
        cursor: pointer
    }

    .searchBox .resultBox {
        overflow: hidden;
        border-radius: 5px
    }

    .searchBox .searchBox_input {
        position: relative;
        z-index: 2
    }

    .searchBox .searchBox_result {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 3;
        padding: 0px 0px 10px;
        background-color: #fff;
        box-shadow: 0 3px 12px 0 rgba(0,0,0,0.2);
        border-radius: 5px;
        display: none
    }

        .searchBox .searchBox_result a {
            padding: 9px 0;
            display: flex;
            align-items: center
        }

        .searchBox .searchBox_result .lbl {
            font-size: 12px;
            color: #474747
        }

        .searchBox .searchBox_result li {
            padding: 0 12px
        }

            .searchBox .searchBox_result li:hover {
                background: #fafafa
            }

        .searchBox .searchBox_result .ulResultItem {
            position: relative
        }

            .searchBox .searchBox_result .ulResultItem::after {
                content: "";
                position: absolute;
                bottom: -1px;
                right: 0px;
                left: 0;
                width: calc(100% - 33px);
                height: 1px;
                margin: 0 auto;
                background-color: #eceff1
            }

            .searchBox .searchBox_result .ulResultItem li .itemType {
                display: flex;
                align-items: center;
                margin-left: 5px
            }

                .searchBox .searchBox_result .ulResultItem li .itemType .typeIcon {
                    width: 20px;
                    height: 20px;
                    fill: #474747;
                    margin-left: 12px
                }

                .searchBox .searchBox_result .ulResultItem li .itemType img {
                    height: auto !important
                }

            .searchBox .searchBox_result .ulResultItem li .itemCategory.lbl {
                color: #2BACE2
            }

        .searchBox .searchBox_result.is-active {
            display: block
        }

@media only screen and (min-width: 351px) and (max-width: 479px) {
    .search-page {
        flex-wrap: wrap
    }

        .search-page .btnFindBox {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 15px 8px 14px;
            z-index: 10;
            background-color: #f9f9f9
        }

        .search-page .mobileview {
            display: block;
            margin-bottom: 10px
        }

        .search-page .search-option {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            visibility: hidden;
            opacity: 0;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 2;
            background: #f1f1f1
        }

            .search-page .search-option .search-option_head {
                display: flex;
                justify-content: flex-end
            }

            .search-page .search-option .search-option_wrapper {
                height: calc(100vh - 127px);
                padding-bottom: 80px;
                overflow-y: auto;
                padding: 18px 10px 80px
            }

            .search-page .search-option .filterBox {
                border-radius: 6px;
                border: 1px solid #c8c7cc;
                background-color: #fff
            }

                .search-page .search-option .filterBox .filterBox_Title {
                    border-bottom: none;
                    user-select: none;
                }

                    .search-page .search-option .filterBox .filterBox_Title::after {
                        border-width: 1px 1px 0px 0px;
                        top: 36%
                    }

                    .search-page .search-option .filterBox .filterBox_Title .toggle-view {
                        border-bottom: 1px solid #f2f2f2
                    }

                        .search-page .search-option .filterBox .filterBox_Title .toggle-view::after {
                            top: 25%
                        }

                    .search-page .search-option .filterBox .filterBox_Title + .filterBox_content {
                        display: none
                    }

        .search-page .search-content {
            flex: 0 1 auto;
            width: 100%
        }

            .search-page .search-content .resultOption {
                position: relative;
                z-index: 1
            }

                .search-page .search-content .resultOption .sortList {
                    order: 1
                }

                    .search-page .search-content .resultOption .sortList .lbl {
                        width: 100%;
                        border-bottom: 1px solid #e6e6e6;
                        margin-bottom: 10px;
                        padding-bottom: 8px
                    }

                    .search-page .search-content .resultOption .sortList .ulSortList {
                        width: 100%
                    }

                        .search-page .search-content .resultOption .sortList .ulSortList li {
                            width: 33.33%;
                            margin: 0 0 5px
                        }

                            .search-page .search-content .resultOption .sortList .ulSortList li a {
                                text-align: center
                            }

                .search-page .search-content .resultOption .counter {
                    position: absolute;
                    top: -41px;
                    left: 0
                }
}

.c-listing__items {
    margin-top: 20px;
}