.Filter_page{ .filterBtnStyle { display: inline-block; font-size: 12px; cursor: pointer; transition: 0.5s; margin-left: 20px; padding: 5px 10px; border-radius: 5px; } .filterUrl { list-style-type: none; max-height: 300px; overflow: auto; } .newProductPage { padding: 20px 0; background-color: var(--themeUltraLight); min-height: 80vh; } .searchMainConArea { grid-template-columns: 250px auto; } .searchPageLeft { } .filtersHeading { font-weight: 600; font-size: 16px; } .filterBoxes { padding: 0 10px; background-color: #ffffff; box-shadow: 0 0 1px #000000aa; margin-bottom: 10px; } .filterSlideGrid { display: grid; align-items: center; grid-template-columns: auto 30px; border-bottom: 0.1px solid var(--themeLightColor); padding: 10px 0; } .slideArrowIcon { background-color: var(--btnColor); border-radius: 5px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .liGrid { padding: 10px 0; border-bottom: 0.1px solid var(--themeLightColor); display: grid; grid-template-columns: 18px auto 15px; font-size: 14px; gap: 10px; cursor: pointer; } .filterUrl li a { text-decoration: none; color: #000000; } .keywordSearch { padding: 10px 0; } .keywordSearch input { padding: 10px; border: 0.1px solid #00000019; width: calc(100% - 22px); } .pathList { font-size: 12px; list-style-type: none; padding: 10px 0; } .pathList li { display: inline-block; } .pathList li a { text-decoration: none; color: #000000; } .searchPageHeading { font-weight: 600; font-size: 20px; } .totalProd { font-weight: normal; font-size: 12px; } .sortingTypes { list-style-type: none; display: flex; align-items: center; gap: 10px; } .sortingTypes li { display: inline-block; font-size: 14px; cursor: pointer; transition: 0.5s; } .sortingHeading { font-weight: bold; } .sortingOpt { padding: 10px; } .sortingTypes li:hover { background-color: var(--themeColor); color: #ffffff; } .activeOpt { background-color: var(--themeColor); color: #ffffff; } .productLoading .loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid var(--themeColor); /* Blue */ border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 900px) { .mobileFilterBtn { position: fixed; bottom: 0; z-index: 9; background-color: #ffffff; padding: 10px; width: calc(100% - 20px); } .fiterShow { border: 1px solid var(--themeColor); background-color: var(--themeColor); padding: 5px 10px; width: 100%; color: #ffffff; border-radius: 5px; } .sortShow { border: 1px solid var(--themeColor); background-color: transparent; padding: 5px 10px; width: 100%; color: var(--themeColor); border-radius: 5px; } .mobileFilterBtn .grid { grid-template-columns: 1fr 1fr; } .searchMainConArea { grid-template-columns: 1fr; } .sortingTypes { background-color: #ffffff; flex-direction: column; width: 200px; padding: 20px; position: relative; } .sortingTypes li { width: -webkit-fill-available; text-align: center; } .sortingAreaCon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; } .sortingArea { width: 100%; position: fixed; top: 0; left: 0; z-index: 99; background-color: #00000019; height: 100vh; display: none; } .searchPageLeft { display: none; position: fixed; top: 0; left: 0; height: 100vh; background-color: #ffffff; overflow: auto; width: 100%; z-index: 999; padding-bottom: 100px; } .pathList { text-align: left; padding: 0 0 10px 0; } .nameAndPath { gap: 0; } .sortingClose { width: 30px; height: 30px; position: absolute; top: -16px; right: -16px; background-color: #ffffff; border: 1px solid var(--themeColor); border-radius: 50%; display: flex; justify-content: center; align-items: center; } #productListArea { grid-template-columns: 1fr 1fr; } .filterSubmit { border: 1px solid var(--themeColor); background-color: var(--themeColor); padding: 5px 10px; width: calc(100% - 20px); color: #ffffff; border-radius: 5px; margin: 10px auto; position: fixed; bottom: 0; left: 10px; } .newProductPage { padding-bottom: 100px; } } @media only screen and (max-width: 900px){ .searchPageRight .gap30{ gap: 10px; } } }.Filter_page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }