.Filter_page{ .filterBtnStyle{ display: inline-block; font-size: 12px; cursor: pointer; transition: 0.5s; margin-left: 20px; padding: 5px 10px; border-radius: 5px; } .newProductPage{ padding:20px 0; background-color: var(--themeUltraLight); min-height: 80vh; } .searchMainConArea{ grid-template-columns: 350px 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; grid-template-columns: auto 20px; border-bottom: 0.1px solid var(--themeLightColor); padding: 10px 0; } .slideArrowIcon{ aspect-ratio: 1/1; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; } .filterUrl{ list-style-type: none; } .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: 99; 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; } } }.Filter_page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }