/* ----- Basic styles ----- */ /* button #62646a; .btn-lrg-standard:active { } */ /* background-color: #fff; (white) font-color: #62646a; filter-header: color: #222325; font-size: 16px; font-weight: 600; height: 24px; line-height: 24px; filter-context: color: #7a7d85; font-size: 16px; font-weight: 400; height: 18px; line-height: 24px; button: background-color: #168b53; color: #ffffff; font-size: 14px; font-weight: 700; height: 34px; line-height: 14px box-header-footer: background-color: #168b53; color: #ffffff; font-size: 14px; font-weight: 700; height: 34px; line-height: 14px box-content: background-color: #fff; (white) font-color: #62646a; /* The ::selection pseudo-element is a CSS selector that targets the portion of an element that has been selected by the user. For example, if a user highlights a portion of a paragraph of text, the ::selection pseudo-element allows you to style the appearance of the highlighted portion. In this example, the ::selection pseudo-element is used to target any portion of text that has been selected, and apply a yellow background color to it. */ /* ::selection { background: #d5d4d2; color: #fff; text-shadow: none; } .btn-standard { background-color: #1dbf73; color: #fff; } .btn-standard:hover { background-color: #3fca89; color: #fff; } .btn-standard:active { background-color: #19a463; color: #fff; } */ /* ::root is a CSS pseudo-class selector that matches the root element of the document, which is usually the element. The ::root pseudo-class selector is often used to define global CSS variables or custom properties. */ :root { --typeBasePrimary: "Twentieth Century"; --typeBaseFallback: sans-serif; /*--fontNormal: Source Sans Pro, Twentieth Century, sans-serif;*/ --fontNormal: Mulish,Helvetica Neue,Helvetica,Arial,Roboto,sans-serif; /*--fontNormal: Helvetica, Arial, sans-serif;*/ /*--color-body-text: #000000;*/ /*--color-body-text: #62646a;*/ --color-body-text: #686868; --color-body: #ffffff; /*--color-bg: lightgray;*/ --color-bg: #dfffff; --textSizeXS: 0.75rem; --textSizeS: 0.875rem; --textSizeM: 1rem; --textSizeL: 1.25rem; --textSizeXl: 1.625rem; --weightNormal: 400; --weightMedium: 500; --weightBold: 500; --weightHeavy: 700; --colorAnnouncement: #000000; --colorAnnouncementText: #ffffff; --colorTextBody: #686868; --colorPrice: #1c1d1d; --colorTextSavings: #ff4f33; --colorSaleTag: #000000; --colorSaleTagText: #ffffff; --colorSearchBarBackground: #ffffff; --colorSearchBarText: #686868; --colorPopupBackground: #ffffff; --colorPopupText: #686868; --colorButtonBackground: rgb(128, 128, 128); --colorButtonText: #ffffff; --colorButtonTextHover: black; --colorLabelDiscountBackground: lightgray; /* yellow;*/ --colorIconBackground: white; --colorSectionHeaders: rgba(0, 0, 0, 0.35); --colorSectionLine: rgba(0, 0, 0, 0.35); --colorHeaderBackground: #ffffff; --colorHeaderText: #ffffff; --colorProductsBackground: lightgray; --colorProductBackground: #ffffff; --colorBoxBorderHover: #000000; --colorFilterHeader: #222325; --colorFilterContext: #7a7d85; --colorLoader: #f3f3f3; /* Light grey */ --colorLoaderWheel: lightgray; --colorBoxBorder: #e5e5e5; --colorBoxShadow: rgba(35, 75,132, .2); --colorOverlay: #afd9ee; /*--colorFooterBackground: #4267b2;*/ --colorFooterBackground: #ffffff; --colorFooterText: #000000; --colorFooterLink: #000000;; /* --colorFooterBackground: #000000; --colorFooterText: #ffffff; --colorFooterLink: #ffffff; */ --colorDebugBackground: #e5e5e5; --colorDebugText: red; --hover-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /*--hover-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.3);*/ --ph-form-circle-margin-right: 15px; --ph-form-circle-background-color: var(--colorIconBackground); --ph-form-circle-display: inline-block; --ph-form-circle-border-radius: 60px; --ph-form-circle-box-shadow: 0 0 2px #888; --ph-form-circle-padding: .4em .4em; --ph-form-square-margin-right: 15px; --ph-form-square-background-color: var(--colorIconBackground); --ph-form-square-display: inline-block; --ph-form-square-border-radius: 10px; --ph-form-square-box-shadow: 0 0 2px #888; --ph-form-square-padding: .4em .4em; } .dark-theme { --typeBasePrimary: "Twentieth Century"; --typeBaseFallback: sans-serif; --fontNormal: Source Sans Pro, Twentieth Century, sans-serif; --color-body-text: #d1d1d1; /* Light grey for body text */ --color-body: #1e1e1e; /* Dark background color */ --color-bg: #1e1e1e; /* Dark background color */ --colorAnnouncement: #ff4f33; /* Orange for announcements */ --colorAnnouncementText: #ffffff; --colorTextBody: #d1d1d1; /* Light grey for text body */ --colorPrice: #ff4f33; /* Orange for price */ --colorTextSavings: #ff4f33; /* Orange for savings text */ --colorSaleTag: #ffffff; /* White for sale tag background */ --colorSaleTagText: #000000; /* Black for sale tag text */ --colorSearchBarBackground: #313131; --colorSearchBarText: #1e1e1e; --colorPopupBackground: #313131; --colorPopupText: #1e1e1e; --colorLabelDiscountBackground: yellow; --colorIconBackground: black; --colorSectionHeaders: rgba(255, 255, 255, 0.35); /* Semi-transparent white for section headers */ --colorSectionLine: rgba(255, 255, 255, 0.35); /* Semi-transparent white for section lines */ --colorHeaderBackground: #1e1e1e; /* Dark background color for headers */ --colorHeaderText: #ffffff; /* White text color for headers */ --colorFilterHeader: #000000; /* Black for filter headers */ --colorFilterContext: #7a7d85; /* Light grey for filter context */ --colorLoader: #282828; /* Dark grey for loader background */ --colorLoaderWheel: #000000; --colorBoxBorder: #000000; /* Black for box borders */ --colorBoxShadow: rgba(0, 0, 0, 0.2); /* Semi-transparent black for box shadows */ --colorOverlay: #313131; /* Dark grey for disabled parent background */ --colorFooterBackground: #000000; /* Dark background color for footer */ --colorFooterText: #ffffff; /* White text color for footer */ --colorFooterLink: #ffffff; /* White color for footer links */ --colorDebugBackground: #313131; /* Dark grey for debug background */ --colorDebugText: red; /* Red for debug text */ --hover-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.3); } #header { position: relative; text-align:center; padding:10px; margin-top:7px; margin-bottom:7px; /*background-color: var(--colorHeaderBackground);*/ background-color: var(--color-bg); } #products { /*background-color: var(--colorProductsBackground);*/ background-color: var(--color-bg); } #content { background-color: var(--color-bg); padding: 3px; } .content-header { margin: 3px; } .content-centered { width: 90%; /* 80% width to leave 10% space on both left and right */ margin-left: auto; /* Automatically calculate the left margin */ margin-right: auto; /* Automatically calculate the right margin */ } #price_list_container { } .to-shop-price { height: 25px; margin: 3px; background: white; color: black; cursor: pointer; } .to-shop-price:hover { } /* button { background: var(--colorButtonBackground); color: var(--colorButtonText); border: none; border-radius: 10px; font-size: 16px; font-weight: 400; padding: 5px; } button:hover { color: var(--colorButtonTextHover); cursor: pointer; } */ #price_list { /*background-color: lightgray;*/ } .price_list_item { /*background-color: white;*/ } #price_list .empty { font-style: italic; text-align: center; } #priceChart { height:400px; width:100%; background-color: white; border: 1px solid #fff; /* white border */ border-radius: 10px; /*max-width:600px;*/ } body { font-family: var(--fontNormal); /*font: 400 14px "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif;*/ /*font-size: 14px;*/ font-size: .875rem; font-weight: 400; line-height: 1.2; /*background-color: var(--color-body);*/ background-color: var(--color-bg); color: var(--color-body-text); -webkit-font-smoothing: antialiased; margin: 0; padding: 0; /*min-width: 360px;*/ min-height: 100vh; /*height: 100%;*/ } .left { float: left; } .right { float: right; } .flex-push-right { margin-left: auto; } .bold { font-weight: 700; /* bold */ } .box { border: var(--colorBoxBorder) solid 1px; border-radius: 4px; } .box-shadow { box-shadow: 0 3px 4px 0 var(--colorBoxShadow); } img { /* An image has fixed dimensions and if it is larger than the viewport will cause a scrollbar. A common way to deal with this problem is to give all images a max-width of 100%. This will cause the image to shrink to fit the space it has, should the viewport size be smaller than the image. */ max-width: 100%; display: block; } /* Truncate line (clamp line) https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css https://css-tricks.com/almanac/properties/l/line-clamp/ https://stackoverflow.com/questions/53386455/how-to-toggle-truncate-text-in-javascript

Lorem ipsum dolor sit amet, ...

*/ .truncate-2-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; height: 2.5em; /* Always show 2 lines, also if it only need one. */ } .truncate-2-line-none { overflow: hidden; text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: none; /* number of lines to show */ -webkit-box-orient: vertical; } /** Line with text **/ .hr-sect { display: flex; flex-basis: 100%; align-items: center; color: var(--colorSectionHeaders); margin: 2px 0; } .hr-sect::before, .hr-sect::after { content: ""; flex-grow: 1; background: var(--colorSectionLine); height: 1px; font-size: 0; line-height: 0; margin: 0 8px; } .hr-line { width: 75%; font-size: 15px; } .last-update-info { font-size: 15px; text-align: center; } .last-update-info::before { content: ""; display: block; width: 100%; border-top: 1px solid gray; /* Adjust border properties as needed */ margin: 0 auto; /* Center the
horizontally */ margin-bottom: 10px; /* Add some space between the
and the

*/ } /* .scrollable { height: 300px; overflow-y: scroll; overflow-x:hidden; }*/ #overlay { display:none; position: fixed; top: 0; left: 0; background: var(--colorOverlay); opacity: .5; z-index: 998; height: 100%; width: 100%;} #popup { position: absolute; z-index: 999; } /* ----- Responsive UI ----- */ * { box-sizing: border-box; } .col-container { display: table; width: 100%; } .col { display: table-cell; padding: 10px; margin-bottom:7px; } .filter { width: 280px; border-right: var(--colorBoxBorder) solid 1px; } .debugImageLoadingView, #debugImageLoadingView { background-color: var(--colorDebugBackground); border: var(--colorDebugText) solid 1px; /*border-radius: 4px;*/ text-align: left; padding: 5px; /*margin-top:7px;*/ line-height: 50%; font-size: xx-small; position: fixed; top: 2px; right: 2px; /* Positioning from the right edge */ /*width: 100%;*/ z-index: 9999999997; opacity:.4; color: #000; /* black */ max-height: 150px; min-height: 50px; min-width: 300px; /*overflow-y: scroll; overflow:auto;*/ /* Your existing styles */ overflow-y: scroll; /* Allow vertical scrolling */ animation: autoscroll 5s linear infinite; /* Start the autoscroll animation */ } @keyframes autoscroll { 0% { /* Start scrolling from the top */ scroll-behavior: auto; scroll-top: 0; } 100% { /* Scroll to the bottom */ scroll-behavior: smooth; scroll-top: 100%; } } .debugOutput, #debugOutput { background-color: var(--colorDebugBackground); border: var(--colorDebugText) solid 1px; /*border-radius: 4px;*/ text-align: left; padding: 5px; /*margin-top:7px;*/ line-height: 50%; font-size: xx-small; position: fixed; bottom: 2px; /*width: 100%;*/ z-index: 9999999997; opacity:.9; color: #000; /* black */ max-height: 150px; min-height: 50px; min-width: 300px; overflow-y: scroll; overflow:auto; } .debugIcon .ph-x-circle { font-size: 10px; /* Set the size of the icon */ position: absolute; bottom:5px; left:5px; border: none; } .debugIcon .ph-trash { font-size: 10px; /* Set the size of the icon */ position: absolute; bottom:5px; right:5px; border: none; } #debugOpen { display: none; } .debugOpen .ph { position: absolute; bottom:10px; left:10px; border: none; } div.content-container { display: flex; flex-direction: column; padding: 5px; border: var(--colorBoxBorder) solid 1px; } /* ----- Breadcrumb ----- */ #breadcrumb-container { width: 100%; } #breadcrumb { display: flex; flex-direction: row; white-space: nowrap; } ul#breadcrumb { list-style: none; margin: 0; padding: 0; white-space: nowrap; /* Prevent line breaks */ overflow: hidden; /* Hide overflowing items */ } ul#breadcrumb li { display: inline-block; /* Add padding and margin if desired */ } #breadcrumb-container ul li a:hover { /*box-shadow: var(--hover-shadow);*/ } ul#breadcrumb li:not(:last-child):after { content: "/"; margin: 0 5px; /* Adjust spacing between items */ color: #999; /* Add desired color for separators */ } /* ----- Flex containers ----- */ .Container-Filter { display: flex; /*justify-content: flex-start; /* Align items to the left */ /*width: 100%;*/ /*height: 100%;*/ /*background-color: white;*/ } .ProductFilter { background-color: white; border-radius: 10px /*height: 100%;*/ } #ProductFilter { margin: 5px; display: none; /*width: 200px;*/ /*background-color: red;*/ } #ProductFilter:not(:empty) { /* Add your styles for the non-empty #Filter here */ display: block; /* hide if empty */ } #ProductFilter:empty /* , #Filter:empty > .Filter:empty */{ display: none; /* hide if empty */ } /* ----- Flex containers ----- */ .flex-container { display: flex; flex-flow: row wrap; width: 100%; } .flex-container-center { display: flex; flex-direction: column; align-items: center; width: 100%; } .flex-container-left { display: flex; align-items: center; /* Center all items vertically */ justify-content: flex-start; /* Align items to the left */ /*height: 50px; /* Full viewport height for demo purposes */ padding: 0 16px; /* Optional: Add padding if needed */ /*align-items: left;/*flex-direction: column;*/ /*width: 100%;*/ } .flex-item { display: flex; /* align-items: center; /* Center vertically within the label */ margin-right: 16px; /* Optional: Add space between items */ white-space: nowrap; /* Prevent label text from wrapping */ } .flex-container-right { width: 100%; display: flex; margin-right: auto; align-items: right;/*flex-direction: column;*/ /*width: 100%;*/ padding-left: 10px; } .checkbox { display: flex; align-items: center; } .checkbox input[type="checkbox"] { margin-right: 8px; /* Adjust spacing between checkbox and label text */ } /*.flex-container-right { display: flex; justify-content: space-between; align-items: center; } .flex-container-right .checkbox { display: flex; align-items: center; } .flex-container-right label { display: flex; align-items: center; } .flex-container-right input[type="checkbox"] { margin-right: 20px; /* Adjust this value as needed for spacing */ /*} */ .flex-container-left > * { width: 100%; text-align: left; } .row { -webkit-flex-direction: row; flex-direction: row; } .flex-column-container { display: flex; flex-direction: column; } .flex-row-container { display: flex; flex-flow: row wrap; } .filterListAttribute { margin: 5px; cursor: pointer; background-color: var(--colorProductBackground); border: var(--colorBoxBorder) solid 1px; border-radius: 5px; padding: 5px; } /* ----- Product/Category/Sitemap/Price ----- */ [class*=“-flex-container“] { /* base button properties */ display: flex; flex-direction: column; border: transparent 1px solid ; cursor: pointer; } .filter-flex-container { display: flex; flex-direction: column; } .product-price-flex-container { padding: 10px; /* width: 350px; height: 400px;*/ } .product-flex-container { background-color: var(--colorProductBackground); margin: 5px; padding: 0px; flex: 1 1 180px; /* Initial flex properties with minimum width of 200px */ min-width: 180px; /* Minimum width of 200px */ max-width: 250px; /* Maximum width of 240px */ display: flex; justify-content: center; align-items: center; /* Add a flex-direction property */ flex-direction: column; height: 300px; /*border: 1px solid #fff; /* white border */ border-radius: 10px; } button { background: var(--colorButtonBackground); color: var(--colorButtonText); border: none; border-radius: 10px; font-size: 16px; font-weight: 400; padding: 5px; } button:hover { color: var(--colorButtonTextHover); cursor: pointer; } .product-flex-container button { width: 100%; margin: 0 5px; } .product-flex-container button:hover { /*border-bottom: #a99567 1px solid;*/ } .product-to-shop-bottom { display: flex; align-items: center; justify-content: center; height: 25px; width: 100%; background-color: #7a7d85; border-radius: 4px; text-align: center; } .product-to-shop-bottom:hover { box-shadow: var(--hover-shadow); } .product-to-shop-bottom a { font-weight: bold; color: white; } .product-to-shop-bottom a:hover { font-weight: bold; color: black; } .product-fixed { /*width: 170px; /* Fixed width for product-fixed */ width: 100%; /* Fixed width for product-fixed */ display: flex; flex-direction: column; justify-content: space-between; height: 100%; /* Set the height of product-fixed to 100% */ position: relative; /* Set position to relative for absolute positioning inside */ } .category-flex-container { background-color: var(--colorProductBackground); margin: 7px; padding: 10px; width: 240px; min-height: 260px; border: 1px solid #fff; /* white border */ border-radius: 10px; font-weight: 400; /* normal */ align-items: center; text-align: center; } .category-flex-container img{ /*object-fit: contain;*/ max-width: 100%; max-height: 100%; height: 200px; display: flex; text-align: center; align-items: center; justify-content: center; /* Center the content horizontally */ } .category-small-flex-container { background-color: var(--colorProductBackground); margin: 3px; padding: 10px; flex: 1 1 100px; /* Initial flex properties with minimum width of 200px */ min-width: 100px; /* Minimum width of 200px */ max-width: 150px; /* Maximum width of 240px */ font-weight: 400; /* normal */ font-size: small; /*border: 1px solid #fff; /* white border */ border-radius: 10px; display: flex; text-align: center; align-items: center; } .category-small-flex-container img{ object-fit: contain; max-width: 100%; max-height: 100%; height: 120px; } .category_image_container { /*display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;*/ } .category_image_container img { /*object-fit: contain; max-width: 100%; max-height: 100%; width: auto;*/ } .product-flex-container:hover, .category-flex-container:hover, .category-small-flex-container:hover { box-shadow: var(--hover-shadow); /*border: var(--colorBoxBorderHover) solid 1px; border-radius: 0px;*/ } .product-flex-container:active, .category-flex-container:active, .category-small-flex-container:active { background-color: lightgray; } .flex-left-right { /* Horizontal alignment*/ display: flex; justify-content: space-between; } .product-price { font-size: large; font-weight: 700; /* bold */ } .box-center { display: flex; align-items: center; justify-content: center; } .box-left-right { /*Vertical alignment*/ display: flex; align-content: space-between; } .center { margin: 0; position: absolute; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui_btn { border-radius: 4px; background: white; color:black; /*border: none;*/ /*border: 1px solid black;*/ /*background-color: white;*/ color: black; padding: 5px 20px; margin-bottom: 10px; margin-top: 0; cursor: pointer; } .btn { border-radius: 4px; background: #1dbf73; color: #fff; border: none; /*border: 1px solid black; background-color: white; color: black; */ padding: 0 20px; margin-top:10px; cursor: pointer; } .load_more { border-radius: 4px; background: #1dbf73; color: #fff; border: none; padding: 10px 20px; margin-top:10px; cursor: pointer; font-size: 20px; align-items: center; justify-content: center; } /* Gray */ .default { /*border-color: #e7e7e7; color: black;*/ } .default:hover { /*background: #e7e7e7; background: #e7e7e7;*/ background: #3fca89; color: #fff; } /* ----- Product image container -----*/ .product_image_container { /*position: relative; display: flex; justify-content: center; overflow: hidden; width: 210px;*/ position: absolute; top: 0; left: 0; height: 80%; width: 100%; /* Occupy 100% width of the parent product-fixed */ display: flex; justify-content: center; /* Center the content horizontally */ align-items: center; /* Center the content vertically */ /*border: var(--colorBoxBorder) solid 1px;*/ border-radius: 10px; } .product_text_container { width: 100%; /* Occupy 100% width of the parent product-fixed */ text-align: center; /* Center the content horizontally */ position: absolute; bottom: 0; left: 0; padding: 10px; /* Add padding for better spacing */ background-color: rgba(255, 255, 255, 0.8); /* Optional background color for better visibility */ border-radius: 10px; } .product_image { max-height: 200px; /* Maximum width of 240px */ } .product_image_container img { object-fit: contain; /*max-width: 100%; max-height: 100%; width: auto; height: 245px;*/ } .product_price_image_container { width: 250px; padding: 10px; position: relative; display: flex; justify-content: center; /* Center the content horizontally */ align-items: center; /* Center the content vertically */ } .product_price_image_container .icon_add_buylist, .product_image_container .icon_add_buylist { position: absolute; top:5px; left:5px; } /* .product_price_image_container .icon_discount, .product_image_container .icon_discount { position: absolute; top: 5px; left: 40px; padding: 5px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background-color: var(--colorLabelDiscountBackground); opacity: 0.5; }*/ .product_price_image_container .icon_discount, .product_image_container .icon_discount { position: absolute; top: 5px; left: 40px; font-size: 0.8rem; font-weight: 200; color: #fff; background-color: #f56026; border-radius: 50%; display: block; z-index: 8; line-height: 34px; height: 34px; width: 34px; text-align: center; /*opacity: 0.8;*/ } .product_price_image_container .icon_add_wish, .product_image_container .icon_add_wish { position: absolute; top:5px; right:5px; } .icon_shadow:hover { box-shadow: var(--hover-shadow); border-radius: 5px; } .product-category { color: #949494; font-size: 11px; height: 12px; text-transform: uppercase; text-align: center; margin-bottom: 5px; } .product-text { text-align: left; padding: 0px; margin: 0px; } /***************** Carousel *****************/ .carousel { position: relative; width: 100%; /* Full-page width */ overflow: hidden; } .carousel-track-container { overflow: hidden; position: relative; width: 100%; /* Full width */ white-space: nowrap; } .carousel-track { display: flex; /* Use flex to lay out items horizontally */ gap: 10px; padding: 10px 0; } .carousel-slide { background-color: var(--colorProductBackground); border-radius: 20px; display: flex; justify-content: center; align-items: center; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 5px 15px; /* 5px top/bottom, 10px left/right */ margin-right: 10px; /* Space between items */ font-weight: var(--weightMedium); font-size: var(--textSizeM); } .carousel-slide a { text-decoration: none; color: black; font-weight: 700; margin: 5px; } .carousel-slide:hover { box-shadow: var(--hover-shadow); } .carousel-btn { position: absolute; top: 50%; transform: translateY(-46%); background: rgba(0, 0, 0, 0.3); /* Transparent */ border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0; /* No padding */ z-index: 8; display: none; border-radius: 50%; /* Makes buttons perfectly round */ width: 30px; /* Fixed width */ height: 30px; /* Fixed height */ line-height: 30px; /* Centers text vertically */ text-align: center; /* Centers text horizontally */ transition: background 0.3s ease; } .carousel-btn:hover { background: rgba(0, 0, 0, 0.5); /* Slightly darker on hover */ } .carousel-btn.prev { left: 10px; } .carousel-btn.next { right: 10px; } .carousel-btn:focus { outline: none; } .carousel:hover .carousel-btn { display: block; } /***************** *****************/ .icon { margin-right: 15px; /*margin: 10px;*/ position: relative; /* Add relative positioning to the container */ } .icon::after { content: attr(title); /* Set the content to the value of the title attribute */ display: block; text-align: center; font-size: 14px; /* Adjust font size as needed */ color: red; margin-top: 5px; /* Adjust spacing between icon and text as needed */ position: absolute; bottom: 0px; /* Adjust vertical positioning as needed */ left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Center horizontally */ } i.ph.ph-form-circle { /*margin-right: 15px; background-color: var(--colorIconBackground); display: inline-block; border-radius: 60px; box-shadow: 0 0 2px #888; padding: .4em .4em;*/ margin-right: var(--ph-form-circle-margin-right); background-color: var(--ph-form-circle-background-color); display: var(--ph-form-circle-display); border-radius: var(--ph-form-circle-border-radius); box-shadow: var(--ph-form-circle-box-shadow); padding: var(--ph-form-circle-padding); } /* i.ph.ph-form { @apply --ph-form-circle; }*/ i.ph.ph-form-square { margin-right: var(--ph-form-square-margin-right); background-color: var(--ph-form-square-background-color); display: var(--ph-form-square-display); border-radius: var(--ph-form-square-border-radius); box-shadow: var(--ph-form-square-box-shadow); padding: var(--ph-form-square-padding); } i.ph.ph-form { margin-right: var(--ph-form-square-margin-right); margin-bottom: 5px; background-color: var(--ph-form-square-background-color); display: var(--ph-form-square-display); border-radius: var(--ph-form-square-border-radius); box-shadow: var(--ph-form-square-box-shadow); padding: var(--ph-form-square-padding); } i.ph.ph-form:hover { box-shadow: var(--hover-shadow); } .ph { font-size: 30px; cursor: pointer; user-select: none; } .ph-05x{font-size:0.5em} .ph-1x{font-size:1em} .ph-1-5x{font-size:1.4em} .ph-2x{font-size:2em} .ph-3x{font-size:3em} .ph-4x{font-size:4em} .ph-5x{font-size:5em} .ph-6x{font-size:6em} .ph-7x{font-size:7em} /* spinner animation */ .ph-spinner { display: inline-block; animation: spin 2s linear infinite; /* Apply the spin animation directly to the ph-spinner class */ } @keyframes spin { 0% { transform: rotate(0deg); /* Start at 0 degrees */ } 100% { transform: rotate(360deg); /* End at 360 degrees (full rotation) */ } } /* Number in right top corner: */ .ph[data-count]{ position:relative; } .ph[data-count]:after{ position: absolute; right: -.3em; top: -.3em; content: attr(data-count); padding: .5em; border-radius: 10em; line-height: .9em; color: #fff; /*white*/ background: rgba(255,0,0,.75); text-align: center; min-width: 1em; font: normal .4em sans-serif; } .fa { cursor: pointer; user-select: none; } .fa:hover { color: gray; cursor: pointer; } i.fa.ph-form- ph-form-circle { background-color: var(--colorIconBackground); display: inline-block; border-radius: 60px; box-shadow: 0 0 2px #888; padding: .6em .7em; } /* Number in right top corner: */ .fa[data-count]{ position:relative; } .fa[data-count]:after{ /*position: absolute;*/ right: -.3em; top: -.3em; content: attr(data-count); padding: .5em; border-radius: 10em; line-height: .9em; color: #fff; /*white*/ background: rgba(255,0,0,.75); text-align: center; min-width: 1em; /*font: bold .5em sans-serif;*/ /*font: bold .5em sans-serif;*/ font-size: .5em; font-weight: bold; } .fa { cursor: pointer; user-select: none; } /* Wish icon animation (Heart-icon) */ @keyframes icon-pulse-click { 0% { transform:scale(1); } 50% { transform:scale(1.50); } 100% { transform:scale(1); } } .heart { color:red; } /* Icon positions (Home & Sitemap) */ /*home-btn{ position: absolute; left: 20px; top: 20px; } .sitemap-btn{ position: absolute; right: 20px; top: 20px; } .wish-btn{ position: absolute; right: 50px; top: 20px; }*/ /* ----- Filter/Attribute section ----- */ button.attrHeader { background-color: #fff; /*white*/ color: #222325; font-weight : 700; cursor: pointer; padding: 5px; border: none; text-align: left; outline: none; /*font-size: 14px;*/ overflow: hidden; width: 100%; } button.attrHeader:hover { /*background-color: #6ce9d7;*/ color: #7a7d85; } button.attrHeader.active { background-color: #fff; /*white*/ } button.attrHeader:after { content: '\002B'; /* '+' */ color: #000; /* black */ font-weight: 700; /* bold */ float: right; margin-left: 5px; } button.attrHeader.active:after { content: "\2212"; /* '-' */ } div.attrPanel { padding: 0 18px; background-color: whitesmoke; max-height: 0; overflow: hidden; transition: max-height .2s ease-out; } p.attrHelpText { cursor: pointer; margin-bottom: 0; } p.attrHelpTextOpenClose { cursor: pointer; } input[type=checkbox], input[type=radio ] { margin: 8px; transform: scale(1.5); } input[type=checkbox]:hover, input[type=radio]:hover { cursor: pointer; } /* ----- Search bar Style ----- */ .wrapper { position: relative; /*display: flex;*/ /*max-width: 700px;*/ } .search { border: var(--colorBoxBorder) solid 3px; border-radius: 20px; height: 40px; width: 100%; padding: 2px 23px 2px 35px; outline: 0; /*background-color: var(--color-bg);*/ /*background-color: #fff; /*white*/ background-color: var(--colorSearchBarBackground); font-size: 20px; margin-left: 0px; } .search:hover, .search:focus { /*border: 1px solid #009688;*/ /*background-color: #fff; /*white*/ color: var(--color-body-text); box-shadow: var(--hover-shadow); } .search-icon { position: absolute; font-size: 20px; top: 50%; transform: translateY(-50%); left: 12px; cursor: pointer; } .back-icon { position: absolute; font-size: 20px; top: 50%; transform: translateY(-50%); left: 12px; cursor: pointer; visibility: hidden; } .search-help-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 12px; font-size: 20px; cursor: pointer; visibility: visible; } .clear-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 55px; font-size: 20px; cursor: pointer; visibility: hidden; } .search-icon-right { position: absolute; font-size: 20px; top: 50%; transform: translateY(-50%); right: 100px; cursor: pointer; visibility: hidden; } .clear-icon::after, .search-icon-right::after { content: ''; display: block; width: 1px; height: 1em; background-color: var(--color-body-text); position: absolute; top: 50%; transform: translateY(-50%); right: -10px; /*Adjust the distance from the icon as needed*/ } /****************** HISTORY ******************/ .history-flex-container { padding: 0; margin: 0; list-style: none; display: flex; height: 60px; } .history-flex-container:hover { background-color: gray; } .history-flex-link:hover { cursor:pointer; } .history-flex-delete:hover { cursor:pointer; } .history-space-between { justify-content: space-between; } .history-no-wrap{ white-space: nowrap; } .history-flex-item { padding: 5px; /*width: 60px;*/ height: 50px; /*margin: 5px;*/ line-height: 50px; /*font-size: 2em;*/ text-align: center; } .history-flex-item img { width:50px; height:50px; } /****************** AUTOCOMPLETE ******************/ .autocomplete-container { display: none; border: var(--colorBoxBorder) solid 1px; border-radius: 5px; height: auto; width: 500px; background-color: var(--colorSearchBarBackground); color: var(--color-body-text); padding: 0; position: absolute; top: 45px; left: 0; cursor: pointer; z-index: 11; } .autocomplete-container i.ph { font-size: 1.2em; } .autocomplete-container a:link { color: var(--color-body-text); } .autocomplete-container i { color: var(--color-body-text); } .autocomplete-container a { color: var(--color-body-text); } .AutoCompleteItemProduct{ position: relative; text-align: left; text-decoration: none; padding: 10px; height:50px; } .AutoCompleteItem:hover, .AutoCompleteItemProduct:hover { box-shadow: var(--hover-shadow); background-color: whitesmoke; cursor:pointer; } .AutoCompletePrice { position: absolute; right: 10px; bottom: 5px; font-size: 18px; /*color: #000; /* black */ font-weight: 700; /* bold */ } .AutoCompleteItem{ position: relative; text-align: left; text-decoration: none; padding: 8px; } .AutoCompleteHistoryTime { /*position: relative; vertical-align: middle; horizontal-align: right;*/ position: absolute; right: 10px; top: 8px; /*color: #000; /* black */ font-weight: 400; /* normal */ } .AutoCompleteImage { position: absolute; left: 5px; top: 0; width: 60px; height: 45px; } .AutoCompleteText { position: absolute; left: 70px; top: 0; /*color: #000; /* black */ } /* ----- Rating star ----- */ .full { color: red; } .rating { position: relative; display:inline-block; } .rate { white-space: nowrap; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 2; } .popupMenu { display: none; background: gray; border-radius: 10px; } .popupMenuContent { background: #fff; /*white*/ /* overflow-y: scroll; /* This will always display a scrollbar */ overflow-y: auto; /*This will only display a scrollbar if the content overflows */ /*border: lightgray 1px solid;*/ padding: 5px; border-radius: 10px 10px 0 0; border-color: blue; } .UrlPopup { /*display: none;*/ background-color: lightgray; position: absolute; left: 0; bottom: 0; } a:link { text-decoration: none; color: #222325; font-weight : 400; } a:visited { text-decoration: none; } a:hover { text-decoration: none; /*text-decoration: underline;*/ color: #7a7d85; } /****************************/ .price-filter-button { margin: 5px; cursor: pointer; padding: 10px; } .shop_price_box { margin: 2px 0; width: 100%; cursor: pointer; border: var(--colorBoxBorder) solid 1px; background-color: white; border-radius: 5px; padding: 5px 10px; } .shop_price_box:hover { box-shadow: var(--hover-shadow); } .shop_logo_container { display: flex; align-items: center; height: 100vh; /* Set the height of the container to 100% of the viewport height */ overflow: hidden; /* Hide any overflow content */ } .shop_logo_in_shop { /*height: 20vh; /* Set the height of the image to 20% of its parent's height */ height: 50px; /* Set the height of the image to 20% of its parent's height */ max-width: 100%; /* Make sure the image doesn't exceed the container's width */ margin-bottom: 15px; } .shop_logo { height: 30px; width: auto; margin-bottom: 5px; } .shop_text_truncated { /*flex: 1;*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stock_info { float: left; width: 80px; white-space: nowrap; } /* https://www.w3schools.com/howto/howto_css_loader.asp */ .loader_wheel { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; /*border: 12px solid var(--colorLoader); border-top: 12px solid var(--colorLoaderWheel); */ border-radius: 50%; width: 70px; height: 70px; animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } .loader_center { margin: 0 auto; } footer { color: var(--colorFooterText); background-color: var(--colorFooterBackground); padding:10px; margin-top:7px; width:100%; } #footer a { color: var(--colorFooterLink); background-color: transparent; /*text-decoration: none;*/ } #footer a:hover { cursor: pointer; } .footer-info-list { margin-right: 2rem } .footer-info-list li { list-style-type: none; } .footer-info-list li:first-child { pointer-events: none; } .footer-info-list a { text-decoration: none; } .footer-info-list a:hover { text-decoration: underline; } .footer-info-list li:not(:last-child) { margin-bottom: .375rem } .footer-social-list li { list-style-type: none; } .footer-social-list a { text-decoration: none; } .footer-social-list a:hover { text-decoration: none; } .footer-social-list li:not(:last-child) { margin-bottom: .625rem } .inner-head { list-style-type: none; padding: 0; margin: 0; } .inner-list li { list-style-type: none; padding: 0; margin: 0; } .announcement-bar { padding: 10px 10px; background-color: var(--colorAnnouncement); display: flex; } /*.announcement-text*/ .announcement-bar div { flex:1; text-align: center; color: var(--colorAnnouncementText); } .slider { width: 100%; overflow: hidden; } .slide { width: 100%; padding: 0 20px; box-sizing: border-box; display: none; font-weight: bold; } .slide.active { display: block; } .flex-menu-container { display: flex; justify-content: space-between; } .flex-menu-left { align-self: flex-start; } .flex-menu-right { align-self: flex-end; } .no_products_in_shop { font-style: italic; font-size: 16px; /* You can adjust the font size as needed */ font-weight: bold; /* You can adjust the font weight as needed */ color: #333; } .price_notice { font-style: italic; font-weight: bold !important; color: red !important; } .admin_entry_cmds { font-style: italic; /*font-size: 16px; /* You can adjust the font size as needed */ font-weight: bold; /* You can adjust the font weight as needed */ color: red !important; cursor: pointer; } /*----------- Show big image as modal -----------*/ .bi-modal-container { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; text-align: center; } .bi-modal-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* Align text content inside the div */ position: relative; top: 50%; transform: translateY(-50%); background-color: white; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } #bi-fullScreenImage .bi-fullScreenImage { height: 80vh; max-width: 100%; max-height: 80vh; } .bi-close-button { position: absolute; top: 10px; right: 10px; font-size: 30px; cursor: pointer; } /* Styles for next and previous icons */ .bi-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; cursor: pointer; color: black; /* Icon color */ } .bi-next-icon { right: 40px; } .bi-prev-icon { left: 40px; } .DescText { /*display: -webkit-box; -webkit-line-clamp: ; /* Show only 3 lines initially -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: antialiased; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 5;*/ } .DescTextShowButton { position: absolute; bottom: 0; /* Align to the bottom of the visible area */ right: 0; /* Position at the right edge */ /*background: white; /* Match the background color */ border: none; background-color: var(--color-bg); /* White background */ color: black; /* Black text */ text-decoration: underline; /* Underline the text */ cursor: pointer; font-size: 1.2em; padding: 0; } .DescWrapper { position: relative; display: -webkit-box; -webkit-line-clamp: 4; /* Show 4 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; } /*----------- -----------*/ #categoryDescriptionId p { margin: 0; padding: 0; } @media (min-width: 0) { } @media (max-width: 360px) { .product-fixed { width: 135px; /* Fixed width for product-fixed */ } .product-flex-container { flex: 1 1 135px; /* Initial flex properties with minimum width of 200px */ min-width: 135px; /* Minimum width of 200px */ max-width: 172px; /* Maximum width of 240px */ margin: 3px; } .category-flex-container { flex: 1 1 135px; /* Initial flex properties with minimum width of 200px */ min-width: 135px; /* Minimum width of 200px */ max-width: 172px; /* Maximum width of 240px */ margin: 3px; } .category-small-flex-container { flex: 1 1 100px; /* Initial flex properties with minimum width of 200px */ min-width: 100px; /* Minimum width of 200px */ max-width: 150px; /* Maximum width of 240px */ } .product_price_container { flex-direction: column; /* Change layout to columns */ } .product_price_image_container { flex: 1; width: 100%; align-items: center; text-align: center; justify-content: center; position: relative; } .stockInfo span{ display: none; } .stockInfo img { display: block; } .filter { display: none; } } .fa-size { font-size: 2.5vw; } @media (min-width: 370px) { ._fa { font-size: 10.0vw; } } @media (min-width: 768px) { ._fa { font-size: 1.5rem; } } @media (max-width: 768px) { .product-fixed { width: 170px; /* Fixed width for product-fixed */ } .product-flex-container { flex: 1 1 170px; /* Initial flex properties with minimum width of 200px */ min-width: 170px; /* Minimum width of 200px */ max-width: 250px; /* Maximum width of 240px */ margin: 3px; } .category-flex-container { flex: 1 1 170px; /* Initial flex properties with minimum width of 200px */ min-width: 170px; /* Minimum width of 200px */ max-width: 250px; /* Maximum width of 240px */ margin: 3px; } .category-small-flex-container { flex: 1 1 100px; /* Initial flex properties with minimum width of 200px */ min-width: 100px; /* Minimum width of 200px */ max-width: 150px; /* Maximum width of 240px */ } .product_price_container { flex-direction: column; /* Change layout to columns */ } .product_price_image_container { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .stockInfo span { display: block; } .stockInfo img { display: none; } .col { display: block; width: 100%; } .filter { display: none; } i.ph { font-size: 20px; } i.ph.ph-form { margin-right: 7px; margin-bottom: 5px; } } @media (min-width: 1025px) { } @media (max-width: 1444px) { } /* @media only screen and (max-width: 550px) { // For mobile phones: .col { display: block; width: 100%; } .filter { display: none; } } */ /* // Tablet Landscape @media screen and (max-width: 1060px) { #primary { width:67%; } #secondary { width:30%; margin-left:3%;} } // Tabled Portrait @media screen and (max-width: 768px) { #primary { width:100%; } #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } } */ /* div.filter { float:left; width:300px; height: 100%; margin: auto; padding: 10px; border: 1px solid black; }*/ .hidden { display: none; } .custom-link { /*color: blue;*/ text-decoration: underline; font-weight: bold; font-style: italic; } .custom-link:hover { cursor: pointer; } .welcome_header { position: relative; font-size: 20px; text-align: left; padding: 0 20px; background-color: var(--ph-form-square-background-color); /*border: 1px solid #fff;*/ border-radius: 10px; } .welcome_button { position: absolute; top: 5px; right: 8px; font-size: 15px; font-weight: 400; font-style: italic; } .welcome_button:hover { font-weight: 800; cursor: pointer; } #loadMoreButton { /* Remove flex styles */ display: block; margin: 0 auto; /* Center the button horizontally */ text-align: center; /* Center the button text */ width: fit-content; /* Make the button width fit its content */ padding: 20px; } .icon-emaerke-logo { background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMzU2IDEzNjEnPjxyZWN0IHg9JzEuMTcnIHk9JzEuMDUnIHdpZHRoPScxMzUyLjk1JyBoZWlnaHQ9JzEzNTIuOTUnIHJ4PScyMTcuMTcnIGZpbGw9JyM0MmMwZjAnLz48cGF0aCBkPSdNMzU0LjYgMTEwMi43cS0xOC4zNSAwLTI5LjczLTExLjU1LTExLjM4LTExLjU1LTExLjM5LTMwLjc2VjEwNThhNTEuNTIgNTEuNTIgMCAwIDEgNS0yMyAzNy43OCAzNy43OCAwIDAgMSAxMy45My0xNS43NiAzNi44OSAzNi44OSAwIDAgMSAyMC01LjYzcTE3LjU1IDAgMjcuMTEgMTEuMTkgOS41NiAxMS4xOSA5LjQ4IDMxLjd2Ny43OGgtNTYuMDdxLjg3IDEwLjYzIDcuMSAxNi44M2EyMS4zNyAyMS4zNyAwIDAgMCAxNS42OCA2LjE5cTEzLjI1IDAgMjEuNTktMTAuNzJsMTAuNCA5LjkyYTM0LjcxIDM0LjcxIDAgMCAxLTEzLjc4IDEyIDQzLjEgNDMuMSAwIDAgMS0xOS4zMiA0LjJ6bS0yLjMxLTczLjU4YTE2LjIzIDE2LjIzIDAgMCAwLTEyLjgxIDUuNTVxLTQuODkgNS41Ny02LjI0IDE1LjQ4SDM3MHYtMS40M3EtLjYzLTkuNjctNS4xNS0xNC42NC00LjUyLTQuOTctMTIuNTYtNC45NnptODkuMTQgMzAuNjRoLTQxLjY3di0xNS41Nmg0MS42N3ptMzQuMDUtNDQuNTMuNTYgOXE5LTEwLjU2IDI0Ljc2LTEwLjU2IDE3LjIyIDAgMjMuNTggMTMuMTggOS4zNi0xMy4xOCAyNi4zNS0xMy4xOCAxNC4yMSAwIDIxLjE1IDcuODYgNi45NCA3Ljg2IDcuMTEgMjMuMTd2NTYuNDRINTU5Ljd2LTU1Ljg4cTAtOC4xOC0zLjU3LTEyLTMuNTctMy44Mi0xMS44My0zLjgxYTE2LjA2IDE2LjA2IDAgMCAwLTEwLjc2IDMuNTQgMTguNjMgMTguNjMgMCAwIDAtNS44MyA5LjI0bC4wOCA1OC45SDUwOC41di01Ni41M3EtLjM5LTE1LjE2LTE1LjQ4LTE1LjE3LTExLjU4IDAtMTYuNDMgOS40NXY2Mi4yM2gtMTkuMjh2LTg1Ljg4em0yMTIuOTYgODcuNDdxLTIwLjA5IDAtMzEuMTktMTIuNzhhMzMuNDYgMzMuNDYgMCAwIDEtMTMuNjUgOS40NCA1MS44OCA1MS44OCAwIDAgMS0xOS4xMyAzLjM0cS0xNCAwLTIxLjkxLTd0LTcuOTQtMTkuMzdxMC0xMi41MiA5LjQ1LTE5LjM2dDI3Ljk0LTYuODNoMTUuMTZ2LTUuNjNxMC03LjIzLTMuNzctMTEuMzJ0LTEwLjc2LTQuMDhxLTcuMjEgMC0xMS43OSAzLjUzYTEwLjcxIDEwLjcxIDAgMCAwLTQuNTYgOC43N2wtMTkuMjEtMS41MXEwLTExLjU4IDEwLTE4LjkzdDI1LjY4LTcuMzRxMTcuNyAwIDI2LjUxIDEwLjU2IDEwLjQtMTAuNzMgMjYuMjctMTAuNTYgMTYuODMgMCAyNi4yOCAxMC4yOCA5LjQ1IDEwLjI4IDkuNDQgMjguOTN2MTAuODdoLTU1LjEycS43MSAxMSA2Ljc0IDE3LjMxIDYuMDMgNi4zMSAxNi42NyA2LjI3YTQwIDQwIDAgMCAwIDE5LjM3LTQuNjFsNC44NC0yLjY5IDUuOCAxMy4xN2E0MS40MiA0MS40MiAwIDAgMS0xMy44NSA3IDU4Ljc4IDU4Ljc4IDAgMCAxLTE3LjI3IDIuNTR6bS02MC4yNC0xNC42MWEyNS4zNSAyNS4zNSAwIDAgMCAxMC0yLjM0IDMwLjMgMzAuMyAwIDAgMCA5LTUuNzV2LTE2LjU5aC0xNS41OXEtOC4yNS4xNS0xMyAzLjkzYTExLjQ3IDExLjQ3IDAgMCAwLTQuNzYgOS4zMiAxMC4zNiAxMC4zNiAwIDAgMCAzLjY5IDguM3EzLjY3IDMuMTMgMTAuNjYgMy4xM3ptNTcuMzgtNTlhMTYuNzQgMTYuNzQgMCAwIDAtMTIuODkgNS40N3EtNS4wNiA1LjQ5LTYuMzEgMTUuNTZoMzUuODd2LTIuMzhxMC05LTQuMzItMTMuODEtNC4zMi00LjgxLTEyLjM1LTQuODF6bTk1LjQyIDMuNzZhNDguMSA0OC4xIDAgMCAwLTcuODYtLjY0cS0xMy4yNiAwLTE3Ljg2IDEwLjE2djU4Ljc0SDczNnYtODUuODhoMTguNGwuNDggOS42cTctMTEuMTkgMTkuMzYtMTEuMTlhMTguMSAxOC4xIDAgMCAxIDYuODMgMS4xMXptNDAuMDcgMzEuNDMtOC41NyA4LjgxdjI4aC0xOS4yOXYtMTIxLjloMTkuMjl2NzAuMzNsNi03LjU0IDIzLjc0LTI2Ljc1aDIzLjE3TDgzMy41NCAxMDUxbDM1LjMyIDUwLjA5aC0yMi4zMXptOTMuMTkgMzguNDJxLTE4LjMzIDAtMjkuNzMtMTEuNTUtMTEuNC0xMS41NS0xMS4zOS0zMC43NlYxMDU4YTUxLjY1IDUxLjY1IDAgMCAxIDUtMjMgMzcuNzggMzcuNzggMCAwIDEgMTMuODYtMTUuNzMgMzYuOSAzNi45IDAgMCAxIDIwLTUuNjNxMTcuNTQgMCAyNy4xIDExLjE5IDkuNTYgMTEuMTkgOS41NyAzMS42N3Y3Ljc4aC01Ni4wOHEuODcgMTAuNjMgNy4xIDE2LjgzYTIxLjM3IDIxLjM3IDAgMCAwIDE1LjY4IDYuMTlxMTMuMjYgMCAyMS41OS0xMC43MmwxMC40IDkuOTJhMzQuNjggMzQuNjggMCAwIDEtMTMuNzcgMTIgNDMuMTggNDMuMTggMCAwIDEtMTkuMzMgNC4yem0tMi4zLTczLjU4YTE2LjI1IDE2LjI1IDAgMCAwLTEyLjgyIDUuNTVxLTQuODkgNS41Ny02LjIzIDE1LjQ4aDM2Ljc1di0xLjQzcS0uNjQtOS42Ny01LjE2LTE0LjY0LTQuNTItNC45Ny0xMi41LTQuOTZ6bTc1Ljg4LTM0Ljc3djIwLjg4SDEwMDN2MTQuMjhoLTE1LjE2djQ4cTAgNC45MiAxLjk0IDcuMWMxLjMgMS40NiAzLjYxIDIuMTggNyAyLjE4YTI5LjU4IDI5LjU4IDAgMCAwIDYuNzQtLjc5djE0LjkyYTQ3LjM2IDQ3LjM2IDAgMCAxLTEyLjcgMS44M3EtMjIuMjEgMC0yMi4yMi0yNC41M3YtNDguNjZoLTE0LjE4di0xNC4yOGgxNC4xM3YtMjAuOTN6bS03MDMtMzk1LjkzSDE2OS40MmExMS4xOSAxMS4xOSAwIDAgMS05LjU2LTE3YzE3LTI3Ljc1IDU4LjUxLTg1LjQ2IDEzNy41MS0xNDMuMTlsLjE1LS4xMmMyLjY4LTIuMzYgODUuOTMtNzUgMjMyLjYzLTEwNC45MyAwIDAgMjAzLjU2LTQ4IDQwMC4yNiA0My4yOCAwIDAgMTY0LjU1IDgyLjE0IDIzMy4zMSAyMDUuMzhhMTEuMiAxMS4yIDAgMCAxLTkuODIgMTYuNjFoLTQ5LjJhNDQuNTcgNDQuNTcgMCAwIDEtMzguOC0yMi40NWMtMTQuNDctMjUuNDctNDYuNDctNjkuNjItMTExLjkyLTExNi41MSAwIDAtMTE4LjI4LTg3LjM0LTMwMy44NC02OC45MSAwIDAtMTA1Ljc3IDcuNzEtMTkzLjE3IDYyLjUxbC0uMTkuMWMtMi40NSAxLjE4LTU1LjU1IDI3LjUxLTEzMi44NSAxMjYuMjRhNDkuNjEgNDkuNjEgMCAwIDEtMzkuMDkgMTguOTl6bTc1Mi45MyA0NS40NmgxMTUuNDFhMTEuMTkgMTEuMTkgMCAwIDEgOS41NiAxN2MtMTcgMjcuNzQtNTguNDkgODUuNDQtMTM3LjQ1IDE0My4xNWEyLjIzIDIuMjMgMCAwIDAtLjI0LjE5Yy0zLjM1IDMtODYuNTIgNzUuMS0yMzIuNiAxMDQuOSAwIDAtMjAzLjU1IDQ4LTQwMC4yNi00My4yOCAwIDAtMTY0LjU1LTgyLjEzLTIzMy4zMS0yMDUuMzhhMTEuMiAxMS4yIDAgMCAxIDkuODItMTYuNjFoNDkuMjFhNDQuNTUgNDQuNTUgMCAwIDEgMzguNzkgMjIuNDNjMTQuNDggMjUuNDcgNDYuNDcgNjkuNjMgMTExLjkyIDExNi41MSAwIDAgMTE4LjI4IDg3LjMzIDMwMy44NCA2OC45MSAwIDAgMTA1LjcxLTcuNzEgMTkzLjEtNjIuNDZsLjMyLS4xOGMzLjE1LTEuNTMgNTYtMjguMTkgMTMyLjc5LTEyNi4yMmE0OS42OCA0OS42OCAwIDAgMSAzOS4xLTE4Ljk2em0tMjU5LjU4IDI2LjE3YTM5LjY4IDM5LjY4IDAgMCAwLTMyLjM5IDE3Yy05LjIgMTMuMi0yNS42OSAzMC42OS01MiAzOS4wOSAwIDAtNjMuNTQgMjMtMTEwLjI4LTMwLjQ4bDI0MC42MS0xMDhhMjAuMjEgMjAuMjEgMCAwIDAgMTAuNDItMjUuMzUgMTgyLjc1IDE4Mi43NSAwIDAgMC0xNzctMTE3LjM4Yy05Ni4xOCAzLjIxLTE3NC4xIDgxLjkxLTE3Ni40MiAxNzguMTJBMTgyLjczIDE4Mi43MyAwIDAgMCA4MzggNjgyLjcxYTEwIDEwIDAgMCAwLTkuNTYtMTIuOTJ6bS0yMTkuMjctNDEuMjhhMTAyLjU0IDEwMi41NCAwIDAgMSAxODEuNDYtNjUuNDZsLTE4MC4yNCA4MS4zM2ExMDMuNzMgMTAzLjczIDAgMCAxLTEuMjItMTUuODd6JyBmaWxsPScjZmZmJy8+PC9zdmc+) no-repeat; height: 40px; width: 40px; } /* Add margin and rounded corners to the select element */ .filterLayoutItems select { margin: 10px; border-radius: 5px; /* Adjust the radius as needed */ padding: 5px; /* Optional: for better spacing inside the dropdown */ border: 1px solid #ccc; /* Optional: for a visible border */ } /* Additional optional styles for better appearance */ .filterLayoutItems select:focus { outline: none; border-color: #007BFF; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Optional: add shadow on focus */ } .filterLayout { display: flex; flex-wrap: wrap; flex-basis: 100%; /*align-items: flex-start; /* Align items to the top when wrapping */ /*gap: 8px; /* Adjust the gap between items as needed */ } .filterLayoutItems { display: flex; align-items: center; /*gap: 5px; /* Adjust the gap between label and input/select as needed */ /*box-sizing: border-box; /*margin-right: 5px; /* Add gap on the right side of each item */ margin: 0 15px 0 0; /* 2px top and bottom, 15px right, 0 left */ height: 2.2em; /* Set a fixed height to reduce the item height */ } .text-filter-container { display: flex; align-items: center; gap: 5px; /* Adjust the gap between input and icons as needed */ } .text-filter-container { display: flex; padding: 5px; align-items: center; background-color: white; } .text-filter-container input { width: 100%; border: none; outline: none; padding-left: 5px; /* Space for the search icon */ box-sizing: border-box; } .text-filter-container i { padding-left: 10px; /* Space for the search icon */ } #sort-options:hover, .text-filter-container:hover, .text-filter-container.selected { box-shadow: var(--hover-shadow); } .ph-x:hover, .ph-magnifying-glass:hover { color: var(--colorButtonTextHover); cursor: pointer; } #DescriptionId { margin: 10px; margin-top: 0; } #DescriptionId h1, #DescriptionId h2, #DescriptionId h3, #DescriptionId p { margin-bottom: 5px; /*margin: 0;*/ } #DescriptionId h1 + p, #DescriptionId h2 + p, #DescriptionId h3 + p { margin-top: 10px; /* Add a small margin if needed */ } svg .svg-path { fill: green; /* Change fill color */ stroke: orange; /* Change stroke color */ stroke-width: 2px; /* Change stroke width */ } /* Price - Slider */ /* Styles for the price input container */ .price-input { display: flex; align-items: center; /* Center align vertically */ /*justify-content: center; /* Center align horizontally */ width: 40%; font-size: 19px; color: #555; } .price-field { display: flex; align-items: center; /* Center align vertically within each price-field */ margin-bottom: 22px; } .price-field input { height: 35px; font-size: 15px; font-family: "DM Sans", sans-serif; border-radius: 9px; text-align: center; border: 0px; background: #e4e4e4; } .price-input span { margin: 0 10px; /* Add horizontal spacing */ font-size: 19px; color: #555; align-self: center; /* Ensure span is vertically centered */ } /* Remove Arrows/Spinners */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .slider-container { width: 100%; } .slider-container { height: 6px; position: relative; background: #e4e4e4; border-radius: 5px; } .slider-container .price-slider { height: 100%; left: 25%; right: 15%; position: absolute; border-radius: 5px; background: #01940b; } .range-input { position: relative; } .range-input input { position: absolute; width: 100%; height: 5px; background: none; top: -5px; pointer-events: none; cursor: pointer; -webkit-appearance: none; } /* Styles for the range thumb in WebKit browsers */ input[type="range"]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 70%; background: #555; pointer-events: auto; -webkit-appearance: none; } @media screen and (max-width: 768px) { .price-input { flex-direction: column; align-items: center; } .price-field { margin-bottom: 10px; } }