@media (min-width: 768px) { body.prevent-scroll { position: fixed; width: 100%; } } /*noinspection CssNonIntegerLengthInPixels*/ @media (max-width: 767.98px) { body.prevent-scroll { overflow: hidden; overscroll-behavior: none; } } /* @view-transition { navigation: auto; types: slide, forwards; }*/ /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body:not(.prevent-scroll) #wrapper, body:not(.prevent-scroll) .catProdImage, body:not(.prevent-scroll) .prodSwiper { animation: none; transition: none; opacity: 1; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .grecaptcha-badge { visibility: hidden; } /* a11y test with other cursor on elements */ /* a, button,img, input, .heart, .horizontalButton { cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42.5 42.5' style='enable-background:new 0 0 42.5 42.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23020203;%7D%0A%3C/style%3E%3Cg id='Layer_2_00000063599381509172047520000013983714913230437527_'%3E%3Cg id='cursor_and_circle'%3E%3Cpath class='st0' d='M23.3,26.8L27.6,42c0.4,1.6,2.6,1.9,3.4,0.4l3.5-6.7l6.7-3.5c1.4-0.8,1.1-3-0.4-3.4l-15.2-4.3 c-1-0.3-2,0.3-2.3,1.3C23.2,26.1,23.2,26.5,23.3,26.8z'/%3E%3Cpath class='st0' d='M33,6.7c-7.1-7.1-18.6-7.1-25.7,0s-7.1,18.6,0,25.7c3.4,3.4,8,5.3,12.8,5.3c1.4,0,2.7-0.1,4-0.5l-1.5-5.4 c-0.8,0.2-1.7,0.3-2.5,0.3c-6.9,0-12.6-5.7-12.6-12.6S13.2,7,20.1,7s12.6,5.7,12.6,12.6c0,1.6-0.3,3.1-0.9,4.6l5.4,1.5 C39.6,19.1,37.9,11.7,33,6.7L33,6.7z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16, pointer !important; } */ /* :is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; --outline-offset: -5px; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); } button:focus { outline: max(2px, 0.08em) solid currentColor; outline-offset: -5px; } @supports selector(:focus-visible) { button:focus { outline: none; } button:focus-visible { outline: max(2px, 0.08em) solid currentColor; outline-offset: -7px; } } */ #mobilecheck { display: block; } /*.resize-animation-stopper * { animation: none !important; transition: none !important; animation-play-state: paused !important; transition-duration: 0s !important;}*/ #cookie-law { position: fixed; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,8); color: #fff; z-index: 999999; font-size: .8em;padding: 20px 10px;box-shadow: 0 -9px 7px 4px rgba(194,194,194,.5); /*animation-duration: .7s; animation-fill-mode: both; animation-name: bounceInBottom;*/ } #cookie-law.hide { display: none !important; } #cookie-law:focus { outline: 2px solid #000; } #cookie-law a { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } #cookie-law a:focus, #cookie-law a:focus-visible { outline: 1px solid #fff; text-decoration: underline; } #cookie-law a.btn { cursor: pointer; border: 0; background-color:#fff; padding: 10px 40px; border-radius: 3px; color: var(--default-text-color); font-size: 16px;} #cookie-law a.btn:focus, #cookie-law a.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #cookie-law .container { display: flex; align-items: center; padding: 20px 20px; } #skiplinks { left: 10px; position: absolute; top: 6px; z-index: 9999; } #skiplinks a { display: block; position: absolute; top: -500px; background-color: #000; color:#fff; } #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {background-color: #000; color: #fff; display: inline-block; font-weight: 600; left: 0; padding: 10px; position: absolute; top: 0; white-space: nowrap; outline: 2px solid #fff; box-shadow: 4px 4px 0 #000; } body.stickyheader #topBar.hide #skiplinks a:focus, body.stickyheader #topBar.hide #skiplinks a:hover, body.stickyheader #topBar.hide #skiplinks a:active { transform: translateY(36px); } .skiplinkWrapper { position: absolute; } .skiplinkWrapper a { position: absolute; height: 0; width: 0; overflow: hidden; } .skiplinkWrapper a:focus, .skiplinkWrapper a:hover, .skiplinkWrapper a:active {background-color: #000; color: #fff; display: inline-block; left: 0; padding: 15px; border-radius: 33px; white-space: nowrap; position: relative; height: auto; width: auto; overflow: auto; top: -35px; z-index: 12; outline: 2px solid #000; outline-offset: 2px; } /*[inert] > * { opacity: .4; }*/ /* Don't EVER NEVER use filter: blur on this, causes weird behaviours on slide-outs for example ... */ input::placeholder { color: #ccc; } input:focus::placeholder { color: transparent; } input { -webkit-user-select: text; } input[readonly] { background-color: #ebebeb; } input[type=text]:focus { outline: 1px solid #333; background-color: #f7f7f7; } input[type=radio]:focus + label, input[type=checkbox]:focus + label { /*box-shadow: 0 0 2px 2px var(--activeSelectionColor); transition: box-shadow 0.30s ease-in-out*/} .styled-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; outline: 0; font: inherit; height: 3em; padding: 0 4em 0 1em; background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7812 1.25L13.1875 0.625C13.0312 0.46875 12.7812 0.46875 12.6562 0.625L7 6.28125L1.3125 0.625C1.1875 0.46875 0.9375 0.46875 0.78125 0.625L0.1875 1.25C0.03125 1.375 0.03125 1.625 0.1875 1.78125L6.71875 8.3125C6.875 8.46875 7.09375 8.46875 7.25 8.3125L13.7812 1.78125C13.9375 1.625 13.9375 1.375 13.7812 1.25Z' fill='%23000000'/%3E%3C/svg%3E%0A") no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.1) 3em, rgba(255, 255, 255, 1) 3em); border-radius: 0.25em; box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2); cursor: pointer; width: 100%; color: var(--default-text-color); } .styled-select select option { color: inherit; background-color: #fff; } .styled-select select:focus { outline: 1px solid #000; } .styled-select select::-ms-expand { display: none; } .styled-select select:focus-visible { outline: var(--default-focus-visible-outline); } .ajaxTempFocus:focus-visible { outline: 1px solid #000; } /* .fadeitem {opacity: 1; transition: opacity .3s; transition-delay: .2s;} .fadeitem.faded {opacity: .3;} */ .fadescrollcontainer { position: relative; } .fadescrollcontainer-left:before { content: ""; position: absolute; top: 0; left: -5px; width: 10%; height: 100%; background: linear-gradient(to right, #dcdcdc, transparent); } .fadescrollcontainer-right:after { content: ""; position: absolute; top: 0; right: -5px; width: 10%; height: 100%; background: linear-gradient(to left, #dcdcdc, transparent); } table { width: 100% !important; } .textSmall {font-size: 84%;} .textBig {font-size: 130%;} .textUnderline {text-decoration: underline;} .textItalic {font-style: italic;} .textBold {font-weight: 600;} .textNormal {font-weight: 300;} .textSmallLight {font-size: 80%; color: #545454;} .textLightItalic {color: #7c7c7c;font-style: italic;} .textRight {text-align: right;} .textCenter {text-align: center;} .textLeft {text-align: left;} .dispNone {display: none;} .grey {color: #525252;} .green {color: #009900} .orange {color: #ea6a00 !important;} .onlyBig {display: none !important; } .onlySmall {display: block !important; } .close {display: none !important;} .open {display: block !important;} .sitemapLine { background: url(../images/line.gif) repeat-y; } .sitemapHline { background: url(../images/hline.gif) repeat-x; } .requiredPill { color: #fff; font-size: .7rem; font-weight: 600; display: inline-block; line-height: normal; padding: 3px 5px; vertical-align: middle; border-radius: 14px; background-color: #8b420b; } .standardformat table { border-collapse: collapse; width: 100%; background-color: #ffffff; } .standardformat table tbody { border-bottom: 2px solid #5e5e5e; } .standardformat th, .standardformat td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } .standardformat th { background-color: #f2f2f2; } .standardformat tr:nth-child(even) { background-color: #f9f9f9; } .standardformat tr { transition: all .3s ease-in-out; } .standardformat tr:hover { transform: scale(1.04); background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.4); outline: none !important; } .info, .error { position: relative; padding: 20px 10px 20px 50px; border: 1px solid #ccc; background: #fff; margin: 15px 0; } .info { border: 1px solid #9ac39d; background: #e7f6e8; color: #02830b; border-radius: 2px; } .info:before { content: '\2713'; font-size: 32px; font-weight: 500; left: 10px; position: absolute; top: 10%; color: #02830b; } .error { border: 1px solid var(--error-color); background: #f2e7e7; color: var(--error-color); } .error:before { content: '!'; font-size: 40px; font-weight: 500; left: 17px; position: absolute; top: 7%; color: var(--error-color); } .error h2 { margin: 0; padding: 0; color: var(--error-color); } .observe { color: var(--error-color); border: 1px dashed var(--error-color); } ul.checked li { display: list-item; position: relative; padding: 2px 0 2px 20px; } ul.checked li:before { content: '>'; position: absolute; left: 3px; top: -4px; height: inherit; color: #25c793; } #contentWrapper { padding: 0; } #contentWrapper h1 { word-wrap: break-word; hyphens: auto; } #mypagesInfo { margin: 10px 0; background-color: #f1f1f1; padding: 20px; } #contentWrapper.myPages h2 { padding-top: 10px; padding-bottom: 13px; } #contentWrapper.myPages h3:not(.productListContainer article h3):not(.userLists h3) { font-size: 1.2rem; margin-bottom: 10px; padding-top: 0; } #navInformation { background-color: #fff; border-radius: 0; } .standardPageContainer .innerFill { padding: 10px; } .standardPageContainer { display: block; padding-left: 0; margin-bottom: 0; } .standardPageContainer ul { list-style-type: disc; margin-left: 20px;} .standardPageContainer li { display: list-item; list-style-type: disc; position: relative; padding: 8px 0 2px 0; } .standardPageContainer h2 { text-align: left; } .standardPageContainer h3 { padding: 1.2em 0 .6em; font-weight: 600;} .standardPageContainer p { padding: .6em 0; word-wrap: break-word;} .standardPageContainer h2 + p { padding-top: 0; } #userPage #myPageWrapper { padding: 15px 0; } .formRow ul li { list-style-type: none; } .formRow ul { list-style-type: none; margin-left: 0; } /*noinspection CssInvalidPropertyValue*/ .infotext { background-color: #fff; text-wrap: pretty; padding: 10px; } #prodDesc .accordion-tabs .infotext { background-color: transparent; } .infotextInner { display: flex; gap: 30px; } .infotextInner .col10 { flex-basis: 65%; } .infotextInner .col20 { flex: 1; isolation: isolate; } .col20 img { margin: 50px 0; mix-blend-mode: multiply; } .col20 img:first-child { margin-top: 0; } .col10 img.keepintext { float: left; margin-right: 10px; } .col20 .byline { display: block; margin-top: -40px; font-size: .8rem; } .infotext .col10 > h2:first-of-type { padding-top: 0; } .infotext h2 { text-align: left; } .compoundSection h2 { padding: 10px 0; margin-top: 30px; } .compoundSection h3 { font-size: 1.2rem; } .compoundSection table { border: 1px solid #cdcdcd; padding: 5px; } .compoundSection table td { padding: 3px 0; } @media (min-width: 768px) { .infotext { background-color: #fff; } .compoundSection h2 { margin-top: 0; } .compoundWrapper.twoColumns { display: flex; gap: 20px; flex-wrap: wrap; } .compoundWrapper.twoColumns .compoundSection { flex: 1 1 48%; padding: 20px 0; } } .standardPageContainer .infopages ul { list-style-type: none; margin-left: 0; } .standardPageContainer .infopages ul li { padding: 0; list-style-type: none; } .standardPageContainer .infopages ul li a { position: relative; display: block; padding: 10px 5px 10px 15px; color: #fff; } .standardPageContainer .infopages ul li.active > a { background-color: #d3d3d3; } .standardPageContainer .infopages ul.info_sub_level_1 li a { margin-left: 0; transition: all 0.30s ease-in-out; color: var(--default-text-color); } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon { position: absolute; right: 4px; top: 7px; } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon { border: 0; cursor: pointer; width: 28px; height: 28px; background-color: #f6f6f6; transition: all 0.3s ease; border-radius: 100%; } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:before, .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:after { content: ""; display: block; width: 9px; height: 1px; background: #333; position: absolute; top: 50%; transition: transform .5s; transform: translate3d(0,-50%,0);; } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:before { right: 13px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; transform: rotate(45deg); } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:after { right: 7px; transform: rotate(-45deg); } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:hover, .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:focus-visible { background-color: #f7f7f7; } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon[aria-expanded=true]:before { transform: rotate(-45deg); } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon[aria-expanded=true]:after { transform: rotate(45deg); } .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:hover, .standardPageContainer .infopages ul.info_sub_level_1 li button.menu_sub_icon:focus { color: #abd3f1; cursor: pointer; filter: drop-shadow(0 0 1px #fff); } .standardPageContainer .infopages ul.info_sub_level_1 > li > a { ; } .standardPageContainer .infopages ul.info_sub_level_2 li a { padding-left: 40px; background-color: #eaeaea; } .standardPageContainer .infopages ul.info_sub_level_2 li.active > a, .standardPageContainer .infopages ul.info_sub_level_2 li a:hover, .standardPageContainer .infopages ul.info_sub_level_2 li a:focus { background-color: #e3e3e3; } .standardPageContainer .infopages ul.info_sub_level_2 li.active > a:after, .standardPageContainer .infopages ul.info_sub_level_3 li.active > a:after { left: 100%; top: 50%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(227, 227, 227, 0); border-left-color: #e3e3e3; border-width: 10px; margin-top: -10px; } .standardPageContainer .infopages ul.info_sub_level_3 li a { padding-left: 60px; background-color: #eaeaea; } .standardPageContainer .infopages ul.info_sub_level_3 li.active > a, .standardPageContainer .infopages ul.info_sub_level_3 li a:hover, .standardPageContainer .infopages ul.info_sub_level_3 li a:focus { background-color: #e3e3e3; } .standardPageContainer .infopages ul.info_sub_level_4 li a { padding-left: 80px; background-color: #eaeaea; } .standardPageContainer .infopages ul.info_sub_level_4 li.active > a, .standardPageContainer .infopages ul.info_sub_level_4 li a:hover, .standardPageContainer .infopages ul.info_sub_level_4 li a:focus { background-color: #e3e3e3; } .infopagesection { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .infopagesection .infocont { background-color: #fff; padding: 10px; max-width: 170px; } .infopagesection.nomax { justify-content: space-evenly; background-color: #fff; margin: 20px 0; } .infopagesection.nomax .infocont { max-width:none; flex: 1; } .infopagesection.nomax .infocont h3 { text-align: left; } .infopagesection .infocont h3 { font-weight: 600; text-align: center; min-height: 45px; } .infopagesection .infocont img { display: flex; max-height: 300px; width: auto; margin-bottom: 10px } .standardPageContainer #category-wrapper > #category-subcategories { display: block !important; padding: 0 10px; } #informationPage #contentWrapper { padding: 0 15px; } #contentWrapper h1 { word-wrap: break-word; hyphens: auto; } #backbutton { display: inline-block; background-color: #41434e; color: #fff; width: 50px; height: 50px; text-align: center; position: fixed; bottom:1em; right: 1em; transition: background-color .3s, opacity .5s; opacity: 0; z-index: 1000; border-radius: 20px 4px 20px 4px; border: 1px solid #262935 } #backbutton::after { content: "\203A"; font-weight: normal; font-style: normal; font-size: 2em; line-height: 43px; color: #fff; transform: rotate(-90deg); display: inline-flex; margin-left: -7px; margin-top: 2px; } #backbutton:hover { cursor: pointer; background-color: #262935; } #backbutton:active { background-color: #262935; } #backbutton.show { opacity: .8; } .btnTriggerInfoPopupCashier { cursor: pointer; border: 2px solid #b1e2f9; background-color: #eff6f9; padding: 5px 10px; font-size: .8em; border-radius: 20px; margin-top: 5px; display: flex; align-items: center; gap: 6px; } .btnTriggerInfoPopupCashier:hover, .btnTriggerInfoPopupCashier:focus-visible { background-color: #95BED1; } .btnTriggerInfoPopupCashier svg { width: 20px; height: 20px; } .md_switch { display: inline-flex; align-items: center; cursor: pointer; width: 100%; margin: 0; justify-content: center; font-size: .7em; color: #9e9e9e; } .md_switch .md_switch__toggle { position: relative; cursor: pointer; } .md_switch [type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .md_switch .md_switch__toggle::before, .md_switch .md_switch__toggle::after { content: ''; display: block; margin: 0 3px; transition: all 100ms cubic-bezier(0.4, 0.0, 0.2, 1); background: #fff; } .md_switch .md_switch__toggle::after { background: #4e4e4e; } .md_switch .md_switch__toggle::before { height: 1.3em; width: 3em; border-radius: 0.65em; opacity: 1; } .md_switch .md_switch__toggle::after { position: absolute; top: 50%; transform: translate(0, -50%); height: 1.7em; width: 1.7em; border-radius: 50%; } .md_switch [type=checkbox]:focus+.md_switch__toggle { /*outline: #5d9dd5 solid 1px; box-shadow: 0 0 8px #5e9ed6;*/ } .md_switch [type=checkbox]:disabled+.md_switch__toggle { cursor: not-allowed; filter: grayscale(100%); opacity: 0.6; } .md_switch [type=checkbox]:disabled+.md_switch__toggle::after { box-shadow: none; } .md_switch [type=checkbox]:checked+.md_switch__toggle::before { background: #d7d7d7; } .md_switch [type=checkbox]:checked+.md_switch__toggle::after{ background: #b30ab3; } .md_switch [type=checkbox]:checked+.md_switch__toggle::after { transform: translate(calc(3em - 100%), -50%); } .dialog-backdrop.active { display: block; z-index: 100; visibility: visible; } .dialog-backdrop.active.search { z-index: 1;} .dialog-backdrop { background: rgba(0, 0, 0, 0.4); visibility: hidden; } .dialog-backdrop { display: none; position: fixed; overflow-y: auto; top: 0; right: 0; bottom: 0; left: 0; } #top-banner { position: relative; padding: 0 10px;} /*#top-banner h1 { margin: 10px 0 10px 0; }*/ #top-banner h1 { margin-bottom: 0;} #top-banner .inner { background-size: cover; min-height: 290px; position: relative; overflow: hidden; animation: banner-fade-in 250ms ease-in; background-position: center; margin-bottom: 10px; } .collapsed { position: relative; max-height: 200px; overflow: hidden; padding-bottom: 15px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .expand { max-height: 1000px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);} .fadeout { /*display: none;*/ height: 4em; left: 0; position: absolute; bottom: 0; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%,var(--wrapper-bg-color) 100%); z-index: 1; } .bodytext { /*margin: 10px 0 30px 0;*/ padding: 10px; overflow-x: auto; } .bodytext h2 { padding: .5em 0 0; } .bodytext.collapsed.expand { max-height: 9999px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); padding-bottom: 50px; } .bodytext .cpToggle { display: none; position: absolute; /*left: 50%;*/ bottom: 0; /*transform:translate3d(-50%,0,0);*/ z-index: 2;} .bodytext .cpToggle button { font-weight: 700; border: 0; background-color: var(--button-alternative-color); padding: 10px 15px; border-radius: 20px; align-items: center; width: max-content; cursor: pointer; transition: background-color .3s ease-in; } .bodytext .cpToggle button span { color: #fff; } .bodytext .cpToggle button:hover, .bodytext .cpToggle button:focus { background-color: #fff; color:#000; outline: 2px solid #000; outline-offset: 2px;} .bodytext .cpToggle button:hover span, .bodytext .cpToggle button:focus span { color: #000; } .bodytext .cpToggle button:focus-visible { outline: 1px solid #000;} .bodytext p { padding: 8px 0;} .bodytext .category-listing-image + h2 { padding: 0; } .bodytext h2:not(:first-of-type) { padding-top: 10px; } #category-bodytext-lower .container { position: relative; background-color: #f6f6f5; border-radius: 7px; margin-top: 2em; } #category-bodytext-lower .container:after, #category-bodytext-lower .container:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } #category-bodytext-lower .container:after { border-color: rgba(236, 224, 231, 0); border-bottom-color: #fbfbfb; border-width: 15px; margin-left: -15px; } #category-bodytext-lower .container:before { border-color: rgba(236, 224, 231, 0); border-bottom-color: #fbfbfb; border-width: 21px; margin-left: -21px; } #index-bodytext .container { position: relative; background-color: #f6f6f5; border-radius: 7px; margin-top: 2em; padding: 0 2em 32px; } .requiredStar { display: inline; } .formRow { display: flex; flex-direction: column; margin-bottom: 25px; align-items: flex-start; } .formRow label { display: block; margin: 3px 0; word-break: break-word;} .formRow input[type=text], .formRow input[type=password], textarea { padding: 10px 3px; resize: vertical; overflow: auto; } .formRow select { background-color:#fff; } .isLoggedInBox{ margin-bottom:25px; } input[aria-invalid=false] { /*outline: 1px solid green;*/ } input[aria-invalid=true] { outline: 1px solid red; background-color: #feefef; } .fielderror { display: none; color: red; } .fielderror p { margin: 0; font-size: .8em; position: relative; } .fielderror strong:before { content: "!"; display: inline-flex; border: 2px solid red; width: 18px; align-items: center; justify-content: center; height: 18px; border-radius: 10px; margin-right: 5px; position: absolute; top: -30px; left: -22px; } input[type=text].field-ok, textarea.field-ok { border: 1px solid green; background-color: #f5fff5; } input[type=text].field-ok ~ div:before { content: "\2714 \fe0e"; color: green; position: absolute; top: -34px; left: -17px; } input[type=text].field-ok ~ div p { display: none; } input[type=text].field-ok ~ div { display: block !important; content: ""; position: relative; } .chkBoxWrapper { display: flex; align-items: center; } .chkBoxWrapper input { margin-right: 10px; -ms-transform: scale(1.5); transform: scale(1.5); padding: 10px; margin-left: 5px; } #footer { content-visibility: auto; contain-intrinsic-size: auto var(--footer-height-mobile); contain: content; display: flex; flex-wrap: wrap; background-color: #151a13; color: #f6f1e5; width: 100%;font-size: .9em; margin-top: auto; } #footer a {transition: all 0.33s ease; color: #f6f1e5; padding: 5px 0;margin: 5px 0; /* a11y test -> */ /*min-height: 44px;*/ display: block; align-items: center; width: 100%; text-decoration: underline;} #footer a:hover {text-decoration: underline; padding-left: 10px; } #footer a:focus-visible { text-decoration:underline; outline: 1px solid #f6f1e5;} #footer h2 { color: #fff; } #footer h3 { margin-top: 15px; font-size: 1.4em; font-weight: 700; } #footerLogos { padding: 20px 0; display: flex; flex-basis: 100%; background-color: #fff; } #footerLogos .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; } #footerLogos a { margin: 0 40px; } #footerNewsletter { background-color: #141c12; padding: 30px 0; display: flex; flex-direction: column; flex-basis: 100%; align-items: center; justify-content: center; } #footerNewsletter h3 { color: #dddddd; font-size: 1.3em; font-weight: 700; margin-bottom: 25px; padding: 0; } #footerNewsletter.anchortrigger { background-color: #202020; animation-name: pulse; animation-duration: 1.2s; animation-iteration-count: 3; } #ajaxNL { display: flex; flex-direction: row; flex-wrap: wrap; align-items: end; justify-content: center; margin: 0 20%; } #ajaxNL .newsletter-field { width: 100%; padding: 10px; border: 1px solid #303030; } #ajaxNL .newsletter-field:focus-visible { outline: var(--default-focus-visible-outline); } #ajaxNL .nlSubmit { border: 0; margin-top: 15px; padding: 10px 20px; border-radius: 30px; background-color: #0f4b66; color: #fff; flex-basis: 45%; } #ajaxNL .nlContainer { display: flex; flex-wrap: wrap; } #ajaxNL .nlContainer label { flex-basis: 100%; } #footerContent { padding: 40px 0 0 0; display: flex; flex-basis: 100%; } #footerContent .container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; flex-direction: column; } #footerContent .container .fcol { width: 100%; } #footerContent .fcol.fcol3 a img {display: inline-block; vertical-align: middle; margin-right: 5px;} #footerContent .fcol.fcol3 a:last-child img { margin-right: 0; } #footerContent h3, #footerContent h4 { color: #f6f1e5; font-size: 1.2em;font-weight: 600;margin-bottom: 10px;margin-top: 5px;padding: 0;} #footerContent ul { line-height: 1.4em; margin-bottom: 20px; } #footerContent li { display: block;} #footerBottom { padding: 40px 0; display: flex; font-size: .9em; flex-basis: 100%;} #footerBottom .container { display: block; text-align: center; width: 100%; padding: 3em 0 0 0; border-top: 1px solid #0d0d0d; } #footer .footerPartner { min-height: 90px; padding: 15px 0; width: 100%; background-color: #fdfdfd; display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } #footer .footerPartner img { max-height: 18px; width: auto; } @media (min-width: 900px) { #footer .footerPartner img { max-height: 30px; } } @media (max-width: 1500px) { #footerContent, #footerNewsletter { padding: 15px; } } .spotWishlist { position: absolute; top: 5px; right: 5px; width: 48px; height: 48px; background-color: transparent; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; z-index: 3; } .productListContainer .spotWishlist { top: 3px; right: 3px; } /*.spotWishlist span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }*/ .spotWishlist button svg { fill: #d2d2d2; } .spotWishlist button { cursor: pointer; background: rgba(255,255,255,.7); /*filter: drop-shadow(0 0 0.12em #333);*/ width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 100%; } .spotWishlist button[aria-pressed=true] { /*filter: drop-shadow(0 0 0.12em #333);*/ } .spotWishlist button:hover, .spotWishlist button:focus-visible { background-color: #f7f7f7; } .spotWishlist button:focus, .spotWishlist button[aria-pressed=true] svg { fill: #b10000; } .spotWishlist button:active { outline: none; } .spotWishlist button:focus-visible { outline: var(--default-focus-visible-outline); border-radius: 100%; outline-offset: 0; } .spotWishlist use { outline: none !important; } .productImageContainer .spotWishlist button { display: flex; align-items: center; justify-content: center; } .heart { cursor: pointer; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .heart-button .heart-flip:after { --pseudo-border-radius: 0 calc(var(--base) / 2) calc(var(--base) / 2) 0; --pseudo-left: 100%; --pseudo-origin: 0; filter: brightness(var(--pseudo-filter-second, 100%)); transform: translateX(-4%) rotateY(var(--pseudo-rotate-second, 0deg)) translateZ(0); } .spotWishlist button[aria-pressed=true] .heart .heart-flip, .heart-button.active .heart-flip { --rotate: 45deg; --pseudo-filter: 100%; --pseudo-filter-second: 50%; --pseudo-rotate: 0deg; --pseudo-rotate-second: 90deg; --heart-background: var(--active); } .heart { display: flex; background: none; border: none; padding: 0;} .spotWishlist button[aria-pressed=true] .heart:active { --button-scale: .95; } .wishList { display: flex; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wishList svg use { /*fill: transparent;*/ fill: rgba(255,255,255,1); stroke: var(--default-text-color); stroke-width: 1.2; transition: all 0.33s ease; } .wishList:hover svg use, .wishList:focus-visible svg use{ fill: #e4efe8; } .wishList[aria-pressed=true] svg use { fill:#000; stroke: var(--default-text-color); opacity: 0; transform: scale(0.33); transform-origin: center; } .wishList[aria-pressed=true] svg use { stroke: #fff; } .wishList[aria-pressed=true] svg use { opacity: 1; transform: none; transition: all 0.5s cubic-bezier(0.19, 2.41, 0.45, 0.94); } .wishList svg { width: 27px; height: 27px; overflow: visible !important; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wishlist ul { margin:0; padding:0; list-style:none; } .wishlist li { margin-right:20px; float:left; } .wishContainer { width: 450px; float: left; border: 1px dashed #ccc; min-height: 180px; position: relative; } .wishContainer .inner { margin: 10px; } .wishContainer .image { float: left; width: 100px; } .wishContainer .infobox { float: left; padding-left: 15px; width: 250px; } .wishContainer .infobox h3 { min-height: 40px; } .wishContainer .infobox .observe { margin-bottom: 10px; padding: 5px; } .wishContainer .infobox .price { padding-left: 0; font-weight: 600; } .wishContainer .infobox .actions { position: absolute; bottom: 10px; margin-right: 15px; } .wishContainer .infobox .actions input { margin-right: 20px; } /* Category product */ /*.productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); grid-gap: 10px; }*/ /*.productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); grid-gap: 10px; }*/ .productListContainer { content-visibility: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); grid-gap: 1em; margin-bottom: 40px; contain: content; /* [contain] for better scroll performance */ background-color: var(--subtile-bg); /*padding: 1em;*/ border-radius: .5em; } #cashierPage .productListContainer, #changePage .productListContainer { background-color: var(--cashier-bg); } .productListContainer {grid-auto-rows: minmax(0, 407px);} .productListContainer.withbuybuttons {grid-auto-rows: minmax(0, var(--productlistcontaner-article-height));} .productListContainer article { content-visibility: auto; contain-intrinsic-size: auto var(--productlistcontaner-article-height); contain: strict; display: flex; flex-direction: column; width: auto; height: auto; margin: 0;position: relative; background-color: #fff /*var(--dark-contrast-color)*/; transition: all .2s ease-in-out; border-radius: 7px; border: 1px solid var(--dark-contrast-color); } .productListContainer article:hover { /*box-shadow: inset 0 0 11px 3px rgb(0 0 0 / 5%), 1px 1px 1px 0 rgb(0 0 0 / 10%)*/ } .productListContainer.withbuybuttons article { content-visibility: auto; contain-intrinsic-size: auto var(--productlistcontaner-article-height); } .productListContainer article.listProduct:hover { box-shadow: 3px 3px 4px rgb(124 124 124 / 40%); } .productListContainer article .symbolContainer { max-width: 150px; } .productListContainer article .symbol { transform: scale(.8); margin: 2px 0 1px 0; transform-origin: top left; } .productListContainer article .catProdImage { flex: 1; background-color: /*var(--dark-contrast-color)*/ #fff; padding-top: 10px; isolation: isolate; position: relative; /*background: radial-gradient(circle,rgba(255,255,255,0) 50%,#f2f2f2 100%);*/ /* <-- Experimantal with the blend mode below */ /* background: linear-gradient(0,hsla(1,0%,100%,.1) 20%,rgba(0,0,0,.06));*/ height: 240px; display: flex; justify-content: center; /* align-items: flex-start; */ align-items: center; margin-bottom: 10px; overflow: hidden; /* This is the space we need for the absolute positioned href! (see below) */ } .productListContainer article .itemsLeft { position: absolute; right: 10px; background-color: rgba(255,255,255,.8); padding: 9px; border: 1px dashed; bottom: 10px; font-weight: 600; font-size: .9rem; border-radius: 100%; width: 40px; height: 40px;} .productListContainer article .configSpot {position: absolute; top: -95px; background-color: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: 5px 10px; letter-spacing: .08rem; font-weight: normal; display: flex; align-items: center; } .productListContainer article .configSpot svg { width: 20px; height: 20px; fill: #fff; margin-right: 10px; transform: rotate(-30deg); } .productListContainer article .catProdImage img { object-position: center center; /*max-height: 240px; width: auto; */ /* <-- Remove this to get bigger images */ max-height: none; height: auto; width: auto; object-fit: contain; transition: 0.6s ease; /*-webkit-backface-visibility: hidden;*/ /*mix-blend-mode: multiply;*/} .productListContainer article .catProdImage img.config { width: 70%; } .productListContainer article .catProdImage .innerImage { display: flex; flex-direction: column; gap: 17px; margin-top: 0; margin-bottom: auto; } .productListContainer article:hover img { transform:translate3d(0,0,0) scale(.9); /*-webkit-backface-visibility: hidden;*/ } .productListContainer article .catProdInner { flex: 1; padding: 0 10px; position: relative; } .productListContainer article .assocNames {display: flex; flex-wrap: wrap; justify-content: center; height: 30px; align-items: baseline;font-size: .6em; color: #7e7e7e; padding-top: 7px; } .productListContainer article .assocNames .assocName { padding: 0 2px; } .productListContainer article .productPrice { position: relative; display: flex; flex: 1; flex-basis: 100%; align-items: center; font-size: 1.1em; font-weight: 600; flex-direction: row; gap: .7em;} .productListContainer article .productPrice .pricePrefix { font-size: .7em; } .productListContainer article .from_price { width: 100%; height: 15px; font-size: .6em; color: #404040; position: absolute; top: -9px; } .productListContainer article .priceOld { color: #3c3c3c; font-weight: 500; display: flex; /*flex-basis: 100%;*/ } .productListContainer article .priceNew { display: flex; /*flex-basis: 100%;*/ } .productListContainer article .shortText { font-size: .75em; margin-top: 5px; height: 40px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 5px; } .productListContainer article .stockStatus { font-size: .7em; line-height: 18px; font-weight: 100; display: flex; flex: 1; } .productListContainer article .rating { justify-content: center; align-items: center; display: flex; font-size: .8em; height: 20px;} .productListContainer article .rating svg { width: 15px; } .productListContainer article .assocnr { position: absolute; bottom: 5px; left: 10px; font-size: .7em; color: #3b7dde; font-weight: 600; } .productListContainer article .stockstatustext svg { width: 9px; height: 9px; } .productListContainer article .stockStatus .deliverydays { display: none; } .productListContainer article .cpCatProductRowL { z-index: 1; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: .8em; } .productListContainer article .cpCatProductRowL select { padding: 8px 10px; border-radius: 11px; width: 80%; } .productListContainer article .productBuy { display: flex; justify-content: space-between; align-items: center; padding: .5em; } .productListContainer article .productBuy form > div { display: flex; align-items: center; justify-content: center; position: relative;} .productListContainer article .productBuy .notify { width: 100%; } .productListContainer article .productBuy .catProdSubmitDiv { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; width: 100%; margin-top: .5em; min-height: 2em;} .productListContainer article .productBuy .button:not(.selectlink):not(.notifyme) { display: flex; justify-content: center; align-items: center; transition: all .3s ease-in-out; background-color: var(--positive-contrast); width: 2.3em; height: 2.3em; padding: .5em !important; border-radius: 100%; margin-top: -1.3em; } .productListContainer article .productBuy .button:hover, .productListContainer article .productBuy .button:focus-visible { transform: scale(1.2) } .productListContainer article .productBuy .button.reserve span { font-size: .7em; } .productListContainer article .productBuy .button svg { fill: #fff; width: 21px; height: 21px; } .productListContainer article .productBuy .button span { display: flex; align-items: center; justify-content: center; } .productListContainer article .productBuy .button.selectlink { z-index: 0; padding: .4em 1em !important; font-size: .8em; margin-right: 0; margin-left: auto; margin-top: -4em; } .productListContainer article .productBuy .button.notifyme { position: relative; background-color: #fff; color: var(--button-default-color); border: 2px solid var(--button-default-color); margin-right: 0; margin-left: auto; margin-top: -4em; padding: .4em 1em !important; font-size: .8em; font-weight: 500; z-index: 1; } .productListContainer article .productBuy .button.notifyme:hover, .productListContainer article .productBuy .button.notifyme:focus-visible { background-color: #FAFFFC; } .productListContainer article .productBuy .button:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 2px; box-shadow: var(--default-focus-visible-box-shadow); } .productListContainer article .productBuy .minorderunit { font-size: .8rem; font-weight: normal; margin-left: 5px; } .productListContainer article a:hover, .productListContainer article a:focus { text-decoration: none; outline: 0;} .productListContainer article a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 250ms ease; border-radius: 7px; border: 1px solid transparent;} .productListContainer article h3 { font-size: .9em; /*font-weight: 600;*/ text-align: center; padding: 0 5px;} .productListContainer article h3 { min-height: 35px; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .productListContainer article > a:hover::after { border-radius: 7px; border: 1px solid #ccc; /*box-shadow: rgb(0 0 0 / 19%) 0 -1px 2px inset, rgb(0 0 0 / 23%) 0 4px 4px inset;*/ } .productListContainer article > a:focus-visible::after { /*outline: 2px solid black; outline-offset: -2px;*/ /*box-shadow: rgba(0,0,0,.2) 0 0 4px inset, rgba(0,0,0,.07) 0 4px 12px inset*/ border: 2px solid #000; border-radius: 7px; } .productListContainer article .selectlink { position: relative; top: auto; left: auto; height: auto; width: auto; padding: 5px 15px; } .productListContainer article a.linkToCashier { z-index: 2; text-align: center; position: absolute; bottom: -27px; background-color: #535353; padding: 3px 15px; font-size: .9em; border-radius: 20px; color: #fff; } .productListContainer article:hover .selectlink, .productListContainer article:focus .selectlink { background-color: var(--button-default-color-hover); transition: var(--transition-bg-color); border-color: #000; color: #fff; } .productListContainer article button.btnloader:after { border-left-color: #fff; border-top-color: #fff; position: absolute; left: auto !important; top: auto !important; right: 29px !important; } .productListContainer article a.btnloader:after { border-left-color: #838383; border-top-color: #838383; top: 10px; left: 4px; } .productListContainerHorizontal { display: flex; flex: 1; } .productListContainerHorizontal article { background-color: #363636; display: flex; flex: 1; position: relative; padding: 20px; } .productListContainerHorizontal article a { display: flex; align-items: center;} .productListContainerHorizontal article .catProdImage { display: flex; order: 10; width: 168px; min-height: 130px; } .productListContainerHorizontal article { display: flex; order: 20; padding: 15px; } .productListContainerHorizontal article h3 { font-weight: 600; order: 20; } .productListContainerHorizontal article .rating { position: absolute; top: -30px; display: none; } .productListContainerHorizontal article .symbolContainer { display: none; } .productListContainerHorizontal article .ribbon-wrap { display: none; } .productListContainerHorizontal article img { border-radius: 23px; } .productListContainerHorizontal article .productBuy { display: none; flex-wrap: wrap; } .productListContainerHorizontal article .assocNames { display: flex; flex-wrap: wrap; color: #b7b7b7; font-size: .7em; flex-basis: 100%; padding-top: 10px; } .productListContainerHorizontal article .catProdInner { display: flex; order: 30; position: absolute; left: 205px; bottom: 30px; flex-wrap: wrap;} .productListContainerHorizontal article .catProdInner .productPrice { align-items: center; justify-content: flex-start; display: flex; flex-wrap: wrap; } .productListContainerHorizontal article .catProdInner .productPrice .from_price { color: #b7b7b7; } .productListContainerHorizontal article .catProdInner .productPrice .priceOld { flex-basis: 100%; color: #fff; } .productListContainerHorizontal article .catProdInner .productPrice .priceNew { flex-basis: 100%; font-weight: 600; font-size: 1.3em; } .productListContainerHorizontal article .catProdInner .shortText, .productListContainerHorizontal article .catProdInner .stockStatus { display: none; } .productListContainer .symbolContainer { top: 5px; } .productListContainer .symbol.listSymbols, .productImageContainer .symbol.listSymbols{ flex-basis: 100%; justify-content: flex-start; padding-left: 17px; } .productListContainer article span.attrRef, .productImageContainer span.attrRef{ margin-right: 0; margin-left: auto; position: relative; } .productListContainer article span.attrRef .attrRefInner, .productImageContainer span.attrRef .attrRefInner { width: 30px; height: 30px; display: block; transition: all .3s ease; } .productListContainer article span.attrRef .attrRefInner.hex, .productImageContainer span.attrRef .attrRefInner.hex { border-radius: 100%; } .productListContainer article span.attrRef .attrRefInner.url, .productImageContainer span.attrRef .attrRefInner.url { background-size: contain; background-repeat: no-repeat; background-position: center; } .productListContainer article span.attrRef .attrRefInner.text, .productImageContainer span.attrRef .attrRefInner.text { width: auto; background-color: rgb(24 64 77 / 80%); border-radius: 4px; padding: 5px 7px; height: auto; font-size: .9em; color: #fff; font-weight: 600; margin-top: 5px; } .horizontalScrollWrapper { position: relative; } .horizontalScrollWrapper.active:after, .horizontalScrollWrapper.active:before { content: ""; position: absolute; z-index: 1; top: auto; bottom: 15px; pointer-events: none; width: 8%; height: calc(var(--productlistcontaner-article-height) + 29px); } .horizontalScrollWrapper.active:not(.fullNext):after { right: 0; background-image: linear-gradient(to right, rgba(255,255,255,0), var(--wrapper-bg-color) 85%); } .horizontalScrollWrapper.active:not(.fullPrev):before { left: 0; background-image: linear-gradient(to left, rgba(255,255,255,0), var(--wrapper-bg-color) 85%);} #cashierPage .horizontalScrollWrapper.active:not(.fullNext):after, #cashierChange .horizontalScrollWrapper.active:not(.fullNext):after{ background-image: linear-gradient(to right, rgba(255,255,255,0), var(--cashier-bg) 85%); } #cashierPage .horizontalScrollWrapper.active:not(.fullPrev):before, #cashierChange .horizontalScrollWrapper.active:not(.fullPrev):before{ background-image: linear-gradient(to left, rgba(255,255,255,0), var(--cashier-bg) 85%); } /*.horizontalScrollWrapper h2 { border-bottom: 1px solid var(--border-color-to-wrapper-bg); margin-bottom: 25px; }*/ .horizontalScroll { display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); cursor: grab; gap: 1rem;grid-auto-flow: column;grid-auto-columns: 78%;padding: 0 1rem 1rem;overflow-x: auto; /*noinspection CssUnknownProperty*/ overscroll-behavior-inline: contain;/*scroll-snap-type: inline mandatory;*/scroll-padding-inline: 1rem;} .horizontalScroll * {scroll-snap-align: start;} .horizontalScroll { scroll-behavior: smooth; } .horizontalButton { position: absolute; z-index: 2; top: 50%; padding: 48px 20px; display: flex; align-items: center; transform: translateY(-50%); border: 1px solid rgba(0, 0, 0, .3); background-color: rgba(255, 255, 255, .3); border-radius: 40px; cursor: pointer; } .horizontalNext { right: 0; } .horizontalPrev { left: 0; } .horizontalButton.hide { opacity: .1; pointer-events: none; cursor: default ; } .horizontalButton:before { content: " "; width: 40px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 30px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; cursor: pointer;} .horizontalButton:before {transform: rotate(90deg); } .horizontalButton.horizontalNext:before {transform: rotate(-90deg); } .productListContainer.withbuybuttons.horizontalScroll { grid-template-columns: repeat(auto-fill, minmax(278px, 1fr)) !important; grid-auto-columns: 278px; padding-top: 10px; } @media (min-width: 768px) { .horizontalScroll { overflow-x: hidden; } } #dealOfTheDay { display: flex; flex-wrap: wrap; } #dealOfTheDay .textArea { display: flex; background-color: #2c2c2c; flex-basis: 100%; justify-content: center; align-items: center; color: #fff; padding: 15px; } #dealOfTheDay .dealText { text-align: center; color: #fff;} #dealOfTheDay .dealText h2 { font-size: 1.9em; padding: 0; margin: 0 0 10px 0; text-align: center; color: #fff; } #notit { display: flex; padding: 1.2em 5%; flex-direction: column; overflow: auto; background-color: #e7e3e0; border-radius: 7px; } #notit h2 { text-align: left; padding: 0 0 15px; font-size: 1.2em; } #notit ul {list-style-type: disc; margin-left: 15px;} #notit ul li {margin: 10px 0;} #prodMisc #notit { max-height: 400px; margin-bottom: 10px; } #prodMisc #notit h2 { border-bottom: 0; margin-bottom: 0; padding-bottom: 5px; } #notit.disclaimer { background-color: #fff; color: #000; border: 8px solid #000; border-radius: 0; font-weight: 600; font-size: 1.2em; text-align: center; margin-top: 1em; } #categoryContent #notit.disclaimer { margin-bottom: 1em; margin-top: 0; } #prodMisc #notit.disclaimer p { margin: 0; } .notify18 { margin-top: 1em; transition: all ease-in-out .3s; } .notify18:hover { transform: scale(1.5); } .ribbon-wrap { width: 100%; height: 188px; position: absolute; top: -1px; left: 1px; overflow: hidden; } .ribbon1 { font-size: .8em; width: 200px; height: 32px; line-height: 32px; position: absolute; top: 30px; right: -50px; z-index: 2; overflow: hidden; transform: rotate(45deg); background: #000; text-align: center; color: #fff; } .ribbon3 { background: #cac6ba none repeat scroll 0 0; color: #595037; font-size: 0.75em; height: 25px; left: 0; line-height: 25px; padding-left: 15px; position: absolute; top: 53%; width: 111px; z-index: 2; } .ribbon3:before, .ribbon3:after { content: ""; position: absolute; } .ribbon3:before { border-bottom: 6px solid #9e957c; border-left: 7px solid transparent; height: 0; top: -5.5px; width: 0; } .ribbon3:after { border-bottom: 12px solid transparent; border-left: 9px solid #cac6ba; border-top: 13px solid transparent; height: 0; right: -8.5px; width: 0; } .symbolContainer { pointer-events: none; z-index: 2; max-width: 500px; left: 5px; display: flex; flex-wrap: wrap; align-items: center; width: 100%; position: absolute; top: 5px; line-height: normal; text-align: left; background-repeat: no-repeat; } .symbol {position: relative; top: 0; display:flex; justify-content: center; align-items: center; /*width: 60px; height: 60px;*/ margin: 0 10px 10px 0; } .subscriptionSpot { position: absolute; top: 14px; font-size: .8em; background-color: #ccc; padding: 5px 10px; border-radius: 30px; } .spotSale { display: inline-block; background-color: var(--sale-color); color: #fff; position: relative; text-align: center; top: 0; z-index: 1; left: 0; font-size: 1.2em; margin-bottom: 15px; font-weight: 600; padding: .5em 1em; border-radius: 11px; } .spotSale em {display: none;} .spotSale .smalltext { font-size: .85em; } .spotNew { position: relative; width: 80px; height: 35px; line-height: 35px; display: block; background-color: #35cb07; color: #434343; font-weight: 600; font-size: 14px; z-index: 2; text-align: center; text-transform: uppercase; pointer-events: none; margin-bottom: 5px; border-radius: 11px; } .spot3for2 { pointer-events: none; background-color: #ea4f36; color: #fff; border: 3px solid #fff; line-height: 50px; padding: 0; text-align: center; width: 76px; height: 76px; font-size: 1em; text-transform: uppercase; position: absolute; bottom: 42%; right: 15px; left: auto; z-index: 2; outline: 1px solid #e04c34; } .spot3for2 .line1 { cursor: default; position: absolute; left: 10px; font-size: 11px; font-weight: 600; top: -4px; } .spot3for2 .line2 { cursor: default; position: absolute; top: -4px; right: 19px; font-size: 28px; font-weight: 600; } .spot3for2 .line3 { cursor: default; position: absolute; top: 36px; font-size: 10px; width: 36px; left: 6px; line-height: 11px; text-align: right; font-weight: 600; } .spot3for2 .line4 { cursor: default; font-size: 28px; font-weight: 600; position: absolute; top: 22px; right: 9px; } .productImageContainer .spot3for2 { bottom: 78px; right: 27px; } .tooltip:before, .tooltip:after { position: absolute; transition: 0.3s; opacity: 0; pointer-events: none; z-index: 50; font-size: .9em;} .tooltip:before { content: attr(data-tooltip); background-color: #333; width: max-content; color: #fff; padding: 3px 10px; } .tooltip:after { content: ""; position: absolute; border-width: 12px; border-style: solid; } .tooltip:before, .tooltip[data-position=botttom]:before, .tooltip:after, .tooltip[data-position=botttom]:before { left: 50%; bottom: -12px; } .tooltip:before, .tooltip[data-position=botttom]:before { transform: translate(-50%, 100%); } .tooltip:after, .tooltip[data-position=botttom]:before { border-color: transparent transparent #333 transparent; transform: translate(-50%); } .tooltip[data-position=top]:before, .tooltip[data-position=top]:after { top: -12px; bottom: initial; } .tooltip[data-position=top]:before { transform: translate(-50%, -100%); } .tooltip[data-position=top]:after { border-color: #333 transparent transparent transparent; } .tooltip[data-position=left]:before, .tooltip[data-position=left]:after { top: 50%; bottom: initial; right: -12px; left: initial; } .tooltip[data-position=left]:before { transform: translate(100%, -50%);} .tooltip[data-position=left]:after {border-color: transparent #333 transparent transparent; transform: translate(0, -50%); } .tooltip[data-position=right]:before, .tooltip[data-position=right]:after { top: 50%; bottom: initial;left: -13px; right: initial; } .tooltip[data-position=right]:before { transform: translate(-100%, -50%); } .tooltip[data-position=right]:after { border-color: transparent transparent transparent #333;transform: translate(0, -50%); } .tooltip:hover:before, .tooltip:hover:after {opacity: 1;} .accordion-wrapper h2, .accordion-wrapper h3 { display: flex; flex-basis: 100%; margin:0; padding:0 0 3px 0; font-size:1em; font-weight: 600; } .accordion-wrapper h3 button, .accordion-wrapper h2 button { display: flex; align-items: center; flex-basis: 100%; border: 0; padding: 15px 10px; font-size: 1.1em; border-bottom: 1px solid #ccc; cursor: pointer; background-color: #f7f7f7; border-radius: 8px; margin: 0 .5em;} .accordion-wrapper h3 button:focus-visible, .accordion-wrapper h2 button:focus-visible { outline-offset: -2px; } .accordion-wrapper button svg { width: 24px; height: 24px; margin-left: auto; } .accordion-wrapper button[aria-expanded=true] svg { fill: red; } .accordion-wrapper .infotext { background-color: transparent; } /* Medium button */ .mediumButton { background-color: var(--activeSelectionColor); color: #fff; cursor: pointer; font-size: 0.9em; padding: 10px 20px; transition: all 400ms ease 0s; display: inline-block; border-radius: 20px; } .mediumButton:hover, .mediumButton:focus { color: #fff; background-color: var(--activeSelectionColor-hover); } .mediumButton.dark { background-color: #636363; } .mediumButton.dark:hover, .mediumButton.dark:focus { color: #fff; background-color: #333; } /* Small button */ .smallButton { margin-left: 3px; } .smallButton a span { display: none; } .smallButton a { background-color: var(--button-alternative-color); transition: var(--transition-bg-color); border-radius: 100%; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; padding: 10px; } .smallButton a:hover, .smallButton a:focus { color: #fff; background-color: var(--button-alternative-color-hover); } .smallButton a:focus-visible { outline: var(--default-focus-visible-outline); } .smallButton svg { width:20px; height: 20px; fill: #fff;} /* Index related */ #indexCampaign { background-color: var(--subtile-bg); padding: 20px 0; } #indexCampaign .campaigninfo { background-color: #fff; padding: 20px; } #indexCampaign .campaigninfo h2 { padding-top: 0; } #indexCampaign .container .productListContainer { margin: 10px 0 0; padding: 0; } #indexCampaign .campaignbutton { display: flex; justify-content: center; margin: 10px 0; } #indexCampaign .campaignbutton a { background-color: var(--button-action-color); color: #fff; padding: 10px 15px; border-radius: 30px; font-weight: 500; margin: 10px 0; transition: background-color .3s; } #indexCampaign .campaignbutton a:hover, #indexCampaign .campaignbutton a:focus { background-color: var(--button-action-color-hover); } #indexSlideShow { position: relative; overflow: hidden; } #indexSlideShow img { width: 100%; max-height: calc(98vh - var(--topBarMinHeight)); object-fit: cover;} #indexSlideShow.slider_mobile { /*min-height: 200px;*/ } #indexSlideShow.slider_desktop { /*min-height: 520px;*/ } #indexSlideShow .swiper-slide {justify-content: normal; align-items: normal; display: block !important; } #indexSlideShow a:focus-visible { outline: 2px solid black; outline-offset: -6px; display: block; } .swiper-pagination-progressbar {top: auto !important; bottom: 0;} .swiper-pagination-fraction { background-color: rgba(255,255,255,.7); padding: 4px 0; bottom: 0 !important; } @media only screen and (max-width: 1200px) and (min-width: 768px) { #indexSlideShow.slider_desktop { min-height: auto; } } @media only screen and (min-width: 2300px) { /*#indexSlideShow.slider_desktop { min-height: 760px; }*/ } #pageIndex { } #pageIndex h1 { display: flex; align-items: center; margin: .7em 0; } #pageIndex .indexh1 { background-color: #353535 ; margin: 0; max-width: none; display: flex; align-items: center; justify-content: center; color: #fff; } #pageIndex .indexh1 > .bodytext { margin: 0; } #indexUspArea, #indexUspArea2 { margin: 0 0 5px 0; } #indexLowerUspArea { margin: 40px 0; } #indexUspArea .uspPlate p, #indexUspArea2 .uspPlate p, #indexLowerUspArea .uspPlate p {margin: 0; padding: 0; /*line-height: 0;*/ } .uspPlate a { display: block; } .uspPlate a:focus-visible { outline: 2px solid #000 !important; opacity: .8; outline-offset: -3px; } #indexUspArea .uspRow1, #indexUspArea2 .uspRow1, #indexLowerUspArea .uspRow1 { display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between; align-items: stretch; /*gap: 10px;*/ } #indexUspArea .uspRow1 .uspPlate { flex: 1 1 100%; } #indexUspArea2 .uspRow1 .uspPlate, #indexLowerUspArea .uspRow1 .uspPlate{ flex: 1 1 49%; } #indexUspArea .uspRow1 .uspPlate img, #indexUspArea2 .uspRow1 .uspPlate img, #indexLowerUspArea .uspRow1 .uspPlate img { width: 100%; height: auto; } #indexUspArea .uspRow2, #indexUspArea2 .uspRow2 { display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between; align-items: stretch; /*gap: 10px; margin: 10px 0;*/ } #indexUspArea .uspRow2 .uspPlate, #indexUspArea2 .uspRow2 .uspPlate{ flex: 1 1 49%; /*min-width: 200px;*/ } #indexUspArea .uspRow2 .uspPlate img, #indexUspArea2 .uspRow2 .uspPlate img { width: 100%; height: auto; } #indexUspArea .uspRow2 .uspPlate a, #indexUspArea2 .uspRow2 .uspPlate a { outline-offset: -2px !important; } #indexImagesFromCategories { } /*#indexImagesFromCategories h2 { border-bottom: 1px solid #ccc; margin-bottom: 20px; }*/ #indexImagesFromCategories > .container { background-color: white; margin: 20px auto 0; border-radius: 20px; } #indexImagesFromCategories .catWrapper { display: flex; flex-wrap: wrap; } #indexImagesFromCategories .catItem { flex:0 0 47%; max-width: 47%; margin-bottom: 15px; } #indexImagesFromCategories .catItem a { position: relative; display: flex; flex-direction: column; text-align: center; font-weight: 600; width: 100%; } #indexImagesFromCategories .catItem .imagewrap { margin-bottom: 10px; } #indexImagesFromCategories .catItem .image { height: 125px; margin-bottom: 10px; align-items: center; display: flex; justify-content: center; } #indexImagesFromCategories .catItem img { max-width: 100%; max-height: 100%; /*max-width: 100%; height: auto;*/ /*max-width: fit-content;*/ flex-basis: content; width: auto; height: auto; } #indexImagesFromCategories .catItem .header { word-wrap: break-word; word-break: break-word; color: #4a4a4a; line-height: 2rem; } #indexImagesFromCategories h3 { font-size: 1em; padding: 0; } #indexTopSellers{ } #indexTopSellersFromCategories { margin: 20px 0;} #indexTopSellersFromCategories .catLink {font-size: .9em;margin-top: -6px;margin-bottom: 5px;} #indexTopSellersFromCategories .catLink a {background-color: #0f4b66;border-radius: 10px;padding: 2px 9px;color: #fff;} #indexTopSellersFromCategories .catLink a:hover {background-color: #0f4b66;} #indexTopSellersFromCategories .catLink { display: flex; justify-content: center; margin: 10px 0; } #indexTopSellersFromCategories .catLink a { background-color: var(--activeSelectionColor); color: #fff; padding: 10px 15px; border-radius: 30px; font-weight: 500; margin: 10px 0; transition: background-color .3s; } #indexTopSellersFromCategories .catLink a:hover, #indexTopSellersFromCategories .catLink a:focus { background-color: var(--activeSelectionColor-hover);} .uspPlate .inner { position: relative; display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; } .uspPlate .inner .bannerImg { display: flex; width: 100%; background-repeat: no-repeat; background-size: cover; height: 100%; } .uspPlate .inner .bannerImg p { display: block; line-height: normal !important; margin-bottom: 5px !important; } .uspPlate .inner .bannerImg .bannerText a { display: block; background-color: #fff; padding: 5px 10px; border-radius: 30px; flex-basis: 100%; margin-top: 24px; text-align: center; border: 1px solid #333; } .uspPlate .inner .bannerText { text-align: center; background-color: rgba(255, 255, 255, .8); position: relative; top: 50%; display: flex; flex-wrap: wrap; transform: translateY(-50%) translateX(-50%); left: 50%; padding: 15px; align-items: center; justify-content: center; font-size: 1.1em; width: 70%; } .uspPlate .inner.onlyTextContent { background-color: #0f4b66; color: #fff; font-size: 1.2em; padding: 20px; min-height: 60px; } /*.inner.onlyImageContent p img { height: 100% !important; width: auto !important; position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; }*/ .inner.onlyImageContent p { height: 100%; overflow: hidden; flex: 1; } .inner.onlyImageContent p a { height: 100%; position: relative; } #pageIndex .bodytext h2 { margin: 15px 0 0 0; text-align: left; padding: 10px 0 5px; } .panelRelations { display: flex; gap: 10px; margin-bottom: 10px; } .panelRelations p { flex: 1; } .panelRelations img { width: 100%; height: auto; } /* Mini cart - Slide down */ body.foldCart #miniCart { visibility: hidden; position: absolute; top: 50%; right: 3px; width: 100%; background-color: #fff; color: #000; box-shadow: 0 1px 4px rgba(50,50,50,.3); max-height: 0; overflow: hidden; z-index: 200; transition: max-height .4s, visibility .4s; transition-delay: .15s; } body.foldCart #miniCart.fold { visibility: visible; max-height: 80vh; border-radius: 0.5rem;} body.foldCart #miniCart h3 { display: none; } body.foldCart #miniCart .cashierProducts.cashier-form { overflow: auto; max-height: 46vh; margin-bottom: 14px; background-color: #fff; padding: 20px 15px 15px 0; } body.foldCart #miniCart .inner { padding: 0 0 15px 15px; } /* Mini cart - Slide from right (also see fixes in kodmyran.js and miniCart.class.php Search for "slideInFromRight") */ body.slideInCartFromRight #miniCart { visibility: hidden; position: fixed; top: 0; right: 0; overflow: hidden; padding: 0; background-color: #fff; box-shadow: 0 1px 4px rgba(50,50,50,.3); opacity: .4; z-index: 200; width: 85vw; height: 100%; transform: translate3d(100%, 0, 0); transition: all ease-in-out .3s; } body.stickyheader.slideInCartFromRight #topBar.hide #miniCart, body.stickyheader.slideInCartFromRight #topBar.allmostall #miniCart{ } body.slideInCartFromRight #miniCart.fold { visibility: visible; transform: translate3d(0,0,0); opacity: 1; box-shadow: -8px 0 29px rgba(0,0,0,.35); } body.slideInCartFromRight #miniCart .inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 0;} body.slideInCartFromRight #miniCart .inner > h3 { padding: 0 15px; background-color: var(--top-menu-bg-color); color:var(--top-menu-text-color); margin-bottom: 8px; font-weight: 600; min-height: var(--modal-close-width-height); font-size: 1.1em; align-items: center; display: flex; } body.slideInCartFromRight #miniCart .cashierProducts.cashier-form table { height: 100%; } body.slideInCartFromRight #miniCart .cashierProducts.cashier-form { background-color: #fff; height: 100%; } body.slideInCartFromRight #miniCart .cashierProducts.cashier-form tbody { overflow-y: auto; } body.slideInCartFromRight #miniCart .cashier-form table tr { overflow: hidden; } body.slideInCartFromRight #miniCart .cashier-form { display: block; overflow: hidden; } body.slideInCartFromRight #miniCart .miniCartButtns { margin-top: auto; margin-bottom: 0; background-color: #dfdfdf; height: 100px; align-items: center; display: flex; justify-content: space-between; padding: 0 13px; width: 100%; gap: 7%; } body.slideInCartFromRight #miniCart .miniCartButtns .textLeft, body.slideInCartFromRight #miniCart .miniCartButtns .textRight { flex: 1; display: flex; } body.slideInCartFromRight #miniCart .miniCartButtns .button { font-size: .9em; padding: 14px 5px !important; width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; margin: 0; left: 0; top: 0; } body.slideInCartFromRight #miniCart .miniCartButtns .button.toCashier { background-color: var(--positive-contrast); } body.slideInCartFromRight #miniCart .miniCartButtns .button.toCashier:hover, body.slideInCartFromRight #miniCart .miniCartButtns .button.toCashier:focus-visible { background-color: #318818; } body.slideInCartFromRight .dialog-backdrop.minicart { /*z-index: 10;*/ z-index: 12; } @media (min-width: 900px) { body.slideInCartFromRight #miniCart { max-width: 650px; } } .cartIsEmpty .hideIfCartEmpty { display: none; } .emptyCart { display: flex; justify-content: center; padding: 30px; } .emptyCart .inner { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; text-align: center; } .emptyCart .inner svg { width: 200px; height: 200px; margin-bottom: 40px; } .emptyCart .inner p { font-size: 1.5rem; } .emptyCart .inner a:hover { text-decoration: underline; } #miniCartUpSell { margin-top: 1em; background-color: #f5f1ec; padding: 10px; } #miniCart:after { bottom: 100%; right: 77px; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; } #miniCart .cashier-form table { white-space: nowrap; word-wrap: break-word; display: flex; flex-direction: column; flex-wrap: wrap; } #miniCart .cashier-form table td { white-space: normal; text-overflow: ellipsis; } #miniCart .cashier-form table td a { display: flex;} #miniCart .cashier-form table td .mspec { font-weight: 100; margin: 4px 0; background-color: #f8f8f8; padding: 5px 10px; font-size: .9em; border-radius: 10px } #miniCart .cashier-form table td .options { font-weight: 100; margin: 4px 0; background-color: #f8f8f8; padding: 5px 10px; font-size: .9em; border-radius: 10px } #miniCart .cashier-form table th { } #miniCart .cashier-form table tr { display: flex; border-bottom: 1px solid #b1b1b1; padding: 15px; } #miniCart .cashier-form table tr:last-of-type { margin-bottom: 0; } #miniCart .cashier-form table tr.total {justify-content: flex-end; padding: 10px; background-color: #f7f7f7; margin: 10px 0; } #miniCart .cashier-form table tr.total td:first-of-type { padding-right: 17px; } #miniCart .cashier-form table tr.total td:last-of-type { /*padding-right: 30px;*/ } #miniCart .cashier-form table td.col1 { align-items: center; justify-content: center; display: flex; width: 15%; } #miniCart .cashier-form table td.col2 { align-items: center; display: flex; /* flex: 1; */ flex-wrap: wrap; flex-basis: 67%; } #miniCart .cashier-form table td.col3 { align-items: flex-end; justify-content: right; display: flex; width: auto; font-size: .9em; flex: 1; padding-bottom: 7px; font-weight: 600; } #miniCart .cashier-form .name { font-size: .8em; font-weight: 600; padding-bottom: 15px; width: 100%; } #miniCart .cashier-form .cartQtyWrapper { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 30px; padding: 5px; justify-content: center; } #miniCart .cashier-form .cartQtyWrapper .cartQty { min-width: 60px; font-size: .9em; display: flex; flex: 1; justify-content: center; padding: 0 25px; text-align: center; } #miniCart .cashier-form button.cartPlus, #miniCart .cashier-form button.cartMinus { cursor: pointer; border: 0; display: flex; flex: none; background-color: #6a6a6a; border-radius: 100%; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; } #miniCart .cashier-form button.cartPlus { background-color: #000; } #miniCart .cashier-form button.cartPlus:hover, #miniCart .cashier-form button.cartPlus:focus, #miniCart .cashier-form button.cartMinus:hover, #miniCart .cashier-form button.cartMinus:focus { /*background-color: var(--activeSelectionColor-hover);*/ } #miniCart .cashier-form button.cartMinus:focus-visible, #miniCart .cashier-form button.cartMinus:focus-visible, #miniCart .cashier-form button.cartPlus:focus-visible, #miniCart .cashier-form button.cartPlus:focus-visible, #miniCart .cashier-form button.cartRemove:focus-visible {outline: 2px solid #000; outline-offset: 2px; } #miniCart .cashier-form button.cartRemove { cursor: pointer; border: 0; background-color: transparent; border-radius: 100%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin: 0 0 0 auto; } #miniCart .cashier-form button svg { max-width: 19px; max-height: 19px; } #miniCart .cashier-form button.cartRemove:hover svg { fill: #333; } #miniCart .cashier-form button.cartRemove:hover { border-color: #333; } #miniCart .button-confirm { padding: 10px 20px; margin: 0 5px 5px 0; } #miniCart .button-confirm:focus, #miniCart .button-confirm:focus-visible { outline: 2px solid #000; outline-offset: 2px; } #miniCart a { position: relative; } #miniCart table .btnloader:after { border-left-color: #838383; border-top-color: #838383; position: absolute; } .structuralcontent { font-weight: normal; padding: 10px 15px; background-color: #f6f6f6; border-radius: 10px; margin-top: 5px; } .structuralcontent ul { list-style-type: disc; margin-left: 12px; font-size: .9em; } .structuralcontent ul li { padding: 3px 0; display: flex;} .structuralcontent ul li .sAmount { padding-right: 10px; } .structuralcontent ul li .sName { width: 82%; } .structuralcontent h3 { font-weight: 600; } /* Ajax loader */ /*#ajaxLoader { width: 200px; height: 200px; position: fixed; top:-100%; right:-100%; left:-100%; bottom:-100%; margin:auto; z-index:1000; animation: animajaxloader 1.2s linear infinite; display: none; animation-play-state: paused; }*/ #ajaxLoader { font-size: 1px; width: 100%; height: 100%; position: fixed; top:-100%; right:-100%; left:-100%; bottom:-100%; margin:auto; z-index:1000; color: transparent; animation: animajaxloader 1.2s linear infinite; display: none; animation-play-state: paused;} #ajaxLoader.active, #ajaxLoader.active .axloader::before, #ajaxLoader.active .axloader::after { animation-play-state: running; } .axloader { position: absolute; top: calc(50% - 42px); left: calc(50% - 42px); width: 84px; height: 84px; border-radius: 50%; perspective: 800px; } .axloader .inner { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .axloader .inner.one { left: 0; top: 0; animation: rotate-one 1s linear infinite; border-bottom: 3px solid #000; } .axloader .inner.two { right: 0; top: 0; animation: rotate-two 1s linear infinite; border-right: 3px solid #000; } .axloader .inner.three { right: 0; bottom: 0; animation: rotate-three 1s linear infinite; border-top: 3px solid #000; } .prodpagelinks { margin: 15px 0 5px; } .prodpagelinks ul { display: flex; flex-wrap: wrap; gap: 10px; } .prodpagelinks li { flex-basis: 100%; } .prodpagelinks a { padding: 10px 10px; background-color: var(--button-alternative-color); transition: var(--transition-bg-color); border-radius: var(--border-radius-small-tag-2); color: #fff; font-size: .85em; display: flex; align-items: center; justify-content: center; } .prodpagelinks a:after { content: " "; display: inline-flex; width: 12px; height: 12px; margin-left: 7px; font-size: 20px; font-weight: 600; order:2; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='612.02px' height='612.02px' viewBox='0 0 612.02 612.02' style='enable-background:new 0 0 612.02 612.02;' xml:space='preserve'%3E%3Cg%3E%3Cg id='_x35__11_'%3E%3Cg%3E%3Cpath stroke='white' fill='white' d='M596.96,269.674L342.381,15.094c-20.079-20.079-52.644-20.079-72.723,0c-20.079,20.079-20.079,52.644,0,72.723 L487.852,306.01L269.658,524.202c-20.079,20.079-20.079,52.644,0,72.723s52.644,20.079,72.723,0L596.96,342.346 C617.039,322.317,617.039,289.753,596.96,269.674z M290.858,254.258L88.744,41.238c-20.309-21.378-53.204-21.378-73.513,0 s-20.309,56.058,0,77.462l165.371,174.289L15.231,467.278c-20.309,21.379-20.309,56.083,0,77.462s53.204,21.379,73.513,0 L290.858,331.72C311.167,310.342,311.167,275.662,290.858,254.258z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 10px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; transform: rotate(90deg); } .prodpagelinks a:hover, .prodpagelinks a:focus {background-color: var(--button-alternative-color-hover); text-decoration: none; } .prodpagelinks a:focus-visible { outline: var(--default-focus-visible-outline);; } #prodDocuments { margin-bottom: 25px; } #prodDocuments ul { margin: 5px; padding: 0; list-style-type: none; } #prodDocuments ul li { display: list-item; position: relative; padding: 6px 0; color: #aaa; } #prodDocuments ul li svg { width: 18px; height: 18px; margin-right: 5px; } #prodDocuments ul li a { display: inline-flex; align-items: center; word-break: break-word; border-bottom: 1px solid #afafaf;} #prodDocuments ul li a:hover, #prodDocuments ul li a:focus { color: var(--link-default-hover-color); border-bottom: 1px solid var(--link-default-hover-color); } #prodDocuments ul li a:focus-visible {outline: var(--default-focus-visible-outline);} #prodDocuments ul li:hover svg { fill: var(--link-default-hover-color); } #prodRelCat { margin: 0 0 25px 0; } #prodRelCat h2 { padding: 15px 0 5px 4px; } #prodRelCat ul { margin: 0 5px; padding: 0; list-style-type: none; font-size: .9em; } #prodRelCat ul li { display: list-item; position: relative; padding: 6px 0; color: #595959; word-break: break-all; margin-bottom: 5px;} #prodRelCat ul li.liHidden { display: none; } #prodRelCat ul li.liHidden.expanded { display: list-item; } #prodRelCat ul li svg { margin-right: 5px; } #prodRelCat ul li a { background-color: #dbdbdb; padding: .2em; border-radius: 8px; } #prodRelCat ul li a:hover, #prodRelCat ul li a:focus { color: var(--link-default-hover-color); border-bottom: 1px solid var(--link-default-hover-color); } #prodRelCat ul li a:focus-visible {outline: var(--default-focus-visible-outline);} #prodRelCat ul li:hover svg { fill: var(--link-default-hover-color); } #prodRelCat ul li:hover { color: var(--link-default-hover-color); } .bracketPrices table { border-collapse: collapse; } .bracketPrices td { padding: 5px 3px; } .bracketPrices td div { display: flex; } .bracketPrices .nWidth { min-width: 30px; text-align: center;} .bracketPrices .nWidth:first-of-type { } .bracketPrices .nUnit { font-size: .8rem; display: flex; align-items: end; color: #464646; } .bracketPrices tr.currentLevel .nUnit { color: #fff; } .bracketPrices .nSplit { width: 15px; text-align: center; } .bracketPrices tr.currentLevel { position: relative; background-color: #525252; color: #fff; animation: fadein 2s;} .bracketPrices tr.currentLevel > td::before { content: " "; border-right: 2px solid #6c6c6c;border-top: 2px solid #6c6c6c; width: 8px; height: 8px; transform: rotate(45deg); display: block; position: absolute; left: -11px; top: 10px; } /*.bracketPrices tr.currentLevel > td:nth-child(2) { color: #e45400; }*/ .bracketPrice { border-bottom: 2px dashed #333; } .bracketPrice:after { color: #6c6c6c; content: attr(data-bracket-text); position: absolute; background-color: rgb(231 231 231 / 90%); font-size: .4em; font-weight: normal; padding: 10px; top: -40px; left: 0; } .bracketPrice:before { top: -6px; left: 53px; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border: 10px solid transparent; border-top-color: #e7e7e7; margin-left: -10px; } .bracketPrice:hover:after { } .bracketNotice { background-color: #e8e8e8; padding: 8px 10px; font-size: .8em; margin-bottom: 10px; } .bracketNotice span { font-weight: 600; } #brandRow {display: flex; margin-top: 15px; } #brandRow h4 { font-weight: normal; } #brandRow .brndName, #brandRow .brndSeries { padding: 10px; background-color: #f7f7f7; flex: 1; } #brandRow .brndSeries { background-color: #ececec; } #brandRow .brndSeries a { text-decoration: underline; } #brandRow .data { font-weight: 600; } .toggleButton { border: 0; border-bottom: 1px solid transparent; background-color: transparent; margin: 6px 5px; color: #AF150D; font-weight: 600; } .toggleButton:focus, .toggleButton:hover { border-bottom: 1px solid #AF150D; cursor: pointer; } .toggleButton:focus { outline: none; } .toggleButton .more { font-size: .9em; } .relLink {display: inline; position: relative;} .relLink a:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #prodAttributes { margin-bottom: 25px; } #prodAttributes table a { background-color: #0552b6; color: #fff; padding: 3px 8px; border-radius: 10px; } #prodAttributes table a:hover, #prodAttributes table a:focus-visible { background-color: var(--link-default-hover-color); } #prodAttributes table a:focus-visible { outline: var(--default-focus-visible-outline); } table.resp.zebra { width: 100%; border-spacing: 0; margin: 5px 0 } table.resp.zebra:nth-of-type(odd) { background: var(--wrapper-bg-color); } table.resp.zebra tbody tr:nth-of-type(even) { background: var(--dark-contrast-color); } table.resp.zebra th { padding: 8px 14px; } table.resp.zebra th { font-weight: 700; font-size: 0.8rem; margin: 0; max-width: 800px; line-height: inherit; color: #151515; } table.resp.zebra tr td div { max-height: 0; box-sizing: border-box; overflow: hidden; transition: max-height .3s, padding-top .3s, opacity .3s; padding:0 8px; opacity: .3; } table.resp.zebra tr td:last-child { font-weight: 700; } table.resp.zebra tr.active td div, table.resp.zebra tr.expanded td div { max-height: 100px; opacity: 1; transition: max-height .3s, padding-top .3s, opacity .6s; padding: 8px 0; } table.resp.zebra td:first-of-type { min-width: 7em; width: 30%; } .coll { display: flex; flex-wrap: wrap; gap: 4px; max-height: none !important; } .extrainfo { margin: 0 0 20px 0;} .extra_row { margin-bottom: 5px; } .extrainfo .extra_head { min-width: 7em; width: 30%; display: inline-block; } .storerating {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #f7f7f7; padding: 20px 0 10px 0; margin-top: 15px; } .storeratingText {flex-basis: 100%; font-size: .8em; justify-content: center; display: flex; padding: 10px 0; text-align: center; } .storerating h2 { flex-basis: 100%; text-align: center; font-weight: 600; margin-bottom: 10px; padding: 0; font-size: 1em;} .storerating .stars svg { fill: #0075bf; } .storerating .averageRating { margin-right: 10px; background-color: #f0f0f0; border-radius: 20px; font-size: .9em; padding: 5px; font-weight: 600; } .storerating .ratingText { font-size: .9em; margin-left: 10px;} .storerating .cover { background: #f7f7f7; } #prodReviews .container, #footerReviews .container { display: flex; flex-wrap: wrap; position: relative; padding: 10px; gap: 15px; justify-content: center; } #prodReviews h2 { display: flex; width: 100%; justify-content: center; } #prodReviews .colRew, #footerReviews .colRew { display: flex; justify-content: center; flex-basis: 100%; position: relative; gap: 15px; } @media (min-width: 768px) { #footerReviews .container .colRew { flex-basis: 24%; min-width: 300px; } } #prodReviews .colRew.revAnsw { margin-top: 10px;} #prodReviews .colRew.revAnsw:after { bottom: 100%; left: 50%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(241, 241, 241, 0); border-bottom-color: #f1f1f1; border-width: 15px; margin-left: -15px; } #divAllReviews { width: 100%; display: flex; flex-wrap: wrap; gap: 15px;} #divAllReviews.collapsed { display: none; } #productReviewBtnMore { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0 0; } #productReviewBtn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0; } #jsRevWritecontainer { width: 100%; display: flex; flex-wrap: wrap; padding: 20px; } #jsRevWritecontainer.collapsed { display: none; } #jsRevWritecontainer header { display: flex; width: 100%; justify-content: center; } #jsRevWritecontainer .formRow input[type=text], #jsRevWritecontainer textarea { width: 100%; } #jsRatingsBtn { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 20px 0; } #jsRatingsBtn ul { display: inline; } #jsRatingsBtn span { font-size: .8em; display: none; } #jsRatingsBtn:hover, #jsRatingsBtn:focus{ text-decoration: none; } .productReviewWrite { background-color: #f7f7f7; margin-top: 5px !important; } #prodReviews .innerFill{ background-color: transparent; border: none; padding: 0; } #footerReviews { background-color: transparent; } #prodReviews .lRev, #footerReviews .lRev { text-align: center; display: flex; flex-wrap: wrap; width: 100%; max-width: 600px; justify-content: flex-start; padding: 15px; position: relative; background-color: #f7f7f7;} #prodReviews .lRevName, #footerReviews .lRevName { font-weight: 600; margin-top: 5px; flex-basis: 100%; } #prodReviews .lRevName h3, #footerReviews .lRevName h3 { font-weight: normal; text-align: left; font-size: .8em; } #prodReviews .lRevGrade, #footerReviews .lRevGrade { font-size: .8em; } #prodReviews .lRevText, #footerReviews .lRevText { position: relative; padding: 10px 0; text-align: left; flex-basis: 100%; } #prodReviews .lRevDate, #footerReviews .lRevDate { font-size: .8em; color: #545454; flex-basis: 100%; text-align: left; } #divTellAFriend { background-color: #f7f7f7; } .single { margin: .5em 0; font-size: .8rem; } .chart { position: relative; } #lowestDailyTableWrapper { background-color: #f9f9f9; padding: 10px; margin-top: 10px; } #btnExpandDailyTable { padding: 10px 10px; background-color: var(--button-alternative-color); transition: var(--transition-bg-color); border-radius: var(--border-radius-small-tag-2); color: #fff; font-size: .85em; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; } #btnExpandDailyTable:hover, #btnExpandDailyTable:focus { background-color: var(--button-alternative-color-hover); text-decoration: none; } #btnExpandDailyTable:focus-visible { outline: var(--default-focus-visible-outline); } #lowestDailyTable { font-size: .9em; } #lowestDailyTable th { text-align: left; } #lowestDailyTable th, #lowestDailyTable td { padding: 4px; position: relative; } #lowestDailyTable tr:hover{ background-color: #f7f7f7; outline: 1px solid #333; outline-offset: 2px; } #lowestDailyTable .low { background-color: #d3d3d3; } #lowestDailyTable .high { background-color: #d3d3d3; } #lowestDailyTable .high td:first-of-type:before { position: absolute; content: " "; opacity: .5;width: 8px; height: 8px; left: -10px; top: 50%; transform: translateY(-50%) rotate(180deg);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; } #lowestDailyTable .low td:first-of-type:before { position: absolute; content: " "; opacity: .5; width: 8px; height: 8px; left: -10px; top: 50%; transform: translateY(-50%);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; } .expandContent[aria-hidden = true] { display: none; } .expandContent { display: flex; } .reviewGroup { font-size: 0; unicode-bidi: bidi-override; direction: rtl; } .reviewGroup * { font-size: 1.7rem; } .reviewGroup > input { display: none; } .reviewGroup > input + label { display:-moz-inline-stack; display:inline-block; *display:inline; overflow: hidden; text-indent: 9999px; width: .9em; white-space: nowrap; cursor: pointer; } .reviewGroup > input + label:before { display:-moz-inline-stack; display:inline-block; *display:inline; text-indent: -9999px; content: "\2606"; color: #888; } .reviewGroup > input:checked ~ label:before, .reviewGroup > input + label:hover ~ label:before, .reviewGroup > input + label:hover:before { content: "\2605"; color: #f9d100; } .reviewGroup > .star-cb-clear + label { text-indent: -9999px; width: .5em; margin-left: -.5em; } .reviewGroup > .star-cb-clear + label:before { width: .5em; } .reviewGroup:hover > input + label:before { content: "\2606"; color: #888; text-shadow: none; } .reviewGroup:hover > input + label:hover ~ label:before, .reviewGroup:hover > input + label:hover:before { content: "\2605"; color: #f9d100; } .rating { display: flex; justify-content: center; align-items: center; } .colRew .rating .cover { background-color: #f7f7f7; } .rating li { display:-moz-inline-stack; display:inline-block; *display:inline; position: relative; width: .9em; color: #525252; font-size: 1.6em; line-height: .9em; vertical-align: bottom; } .rating.grade-1 li:nth-child(-n+1), .rating.grade-2 li:nth-child(-n+2), .rating.grade-3 li:nth-child(-n+3), .rating.grade-4 li:nth-child(-n+4), .rating.grade-5 li:nth-child(-n+5) { color: #c94100; } .revVerified { background-color: #226244; display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 8px; color: #fff; margin-top: 5px; font-size: .7rem; position: absolute; right: 15px; top: 15px; } /* Contact/FAQ-page */ #contactForm label { font-weight: normal; } #toggleFaq {} .divQuestions .faqHeader { font-size: 0.85em; } .divQuestions .faqQuestionFold { font-size: 0.88em; } .divQuestions li { margin-bottom: 4px; list-style: none; } #faqWrapper h3 { font-weight: normal; border-bottom: medium none; margin-bottom: 0; padding: 0 0 5px; margin-left: 13px; } #faqWrapper h3 a { font-weight: normal; position: relative; display: block; } #faqWrapper h3 a:before { color: #AF150D; content: "+"; /* \203A */ font-size: 18px; left: -14px; position: absolute; top: -2px; font-weight: 600; } .faqQuestionFold { background: #f2f2f2 none repeat scroll 0 0; margin-bottom: 10px; margin-top: 8px; padding: 5px 10px; position: relative; } .faqQuestionFold:after, .faqQuestionFold:before { bottom: 100%; left: 5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .faqQuestionFold:after { border-color: rgba(247, 247, 247, 0); border-bottom-color: #f1f1f1; border-width: 10px; margin-left: -10px; } #faqSubHeader { font-weight: 600; padding-top: 10px; } .toggleFaqDiv { margin-top: 5px; } /* popupProductInfo (popup showing info about config product contained products) */ .popupProd { text-align: left; padding:5px; overflow: auto; } .popupProd table { width: 100% !important; } .popupProd td, .popupProd th { padding: 5px; font-size: .9em; } .popupProd p:first-child { padding:0; margin:0; } .popupProductInfo { max-width: 800px !important; } .popupProdInfo h3 { font-weight: 700; margin-bottom: 5px; margin-top: 5px; } .popupProductInfo em { font-weight:600; font-style:normal; display:block; } .popupProductInfo p { margin-top:10px; } .popupProductInfo #notifyEmail { display: block; height: 38px; width: 100%; padding: 5px; margin: 5px auto auto; } .popupProductInfo .popupProdImage { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .popupProductInfo .popupProdPrice { flex-basis: 100%; font-size: 1.5rem; margin-top: 20px; } .popupProductInfo .popupProdLink { display: flex; margin-top: 20px; text-decoration: underline; color: var(--button-default-color); } .popupProductInfo .extraInfo { font-size: .9em; } .popupProductInfo .extraInfo h2 { font-size: 1.3em; padding: .3em 0; } @media (min-width: 768px) { .popupProductInfo .popupProd { display: flex; flex-wrap: wrap; } .popupProductInfo .popupProdImage { display: flex; justify-content: center; flex-basis: 340px; align-items: flex-start; } .popupProductInfo .popupProdInfo { flex-wrap: wrap; display: flex; flex: 1; place-self: flex-start; padding: 0 35px; } } #fav-footer{ margin: 25px 0; background-color: whitesmoke; padding: 15px; } #fav-footer #wishlink { width: calc(100% - 100px); margin-right: 7px; line-height: 45px; font-size: 1.2em; padding-left: 7px; } #copyLink { border: 0; background-color: #47484d; width: 40px; height: 40px; border-radius: 100%; display: flex; align-items: center; justify-content: center; } #copyLink svg { fill: #fff; width: 20px; } .copyWrapper {display: flex; align-items: center; } .button { font-family: var(--std-font-family); background-color: hsl(0 0% 60% / 1); background-repeat: repeat-x; background-size: 100% auto; color: var(--button-default-text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; /*display:-moz-inline-stack; display:inline-block;*/ line-height: 24px; padding: 6px 10px; text-align: center; text-decoration: none; /*vertical-align: middle;*/ text-shadow: none; -webkit-appearance: none; outline:none; position: relative; border: 1px solid transparent; border-radius: var(--border-radius-btn); z-index: 2; transition: var(--transition-bg-color); } .button:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 2px; } .button:active { outline: none; -moz-user-select: none; transform: translate3d(0,2px,0);; } .button.bigBuy { padding: 10px 11px !important; font-weight: 600; font-size: 1.3em; width: 100%; height: var(--big-buy-height); position: relative; overflow: hidden; letter-spacing: .03em; transition: all 200ms ease-in-out 0s; background-color: var(--positive-contrast); color: #fff; } .button.bigBuy:hover, .button.bigBuy:focus-visible { background-color: #318818;} .button.bigBuy:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 2px; box-shadow: var(--default-focus-visible-box-shadow); } .button.button-confirm.buybutton, .button.button-confirm.selectlink { padding: 12px 25px !important; font-weight: 500; font-size: 1em; position: relative; overflow: hidden; letter-spacing: .03em; } .button.button-confirm.jsAddOk svg { opacity: 0; } .button.button-confirm.jsAddOk:after, .button.button-confirm.jsAddOk:focus:after, .button.button-confirm-black.jsAddOk:after, .button.button-confirm-black.jsAddOk:focus:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='405' height='405' viewBox='0 0 405.3 405.3'%3E%3Cpath d='M393.4 124.4L179.6 338.2c-15.8 15.8-41.5 15.8-57.4 0L11.9 227.8c-15.8-15.8-15.8-41.5 0-57.4 15.8-15.8 41.5-15.8 57.4 0l81.7 81.7L336 67.1c15.8-15.8 41.5-15.8 57.4 0C409.2 82.9 409.2 108.6 393.4 124.4z' stroke='white' fill='white'%3E%3C/path%3E%3C/svg%3E"); content: ""; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; left: 0; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .productListContainer .button.button-confirm.jsAddOk:after { background-size: 18px; } .button.button-confirm.bigBuy.jsAddOk:after, .button.button-confirm.bigBuy.jsAddOk:focus:after, .button.button-confirm-black.bigBuy.jsAddOk:after, .button.button-confirm-black.bigBuy.jsAddOk:focus:after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='405' height='405' viewBox='0 0 405.3 405.3'%3E%3Cpath d='M393.4 124.4L179.6 338.2c-15.8 15.8-41.5 15.8-57.4 0L11.9 227.8c-15.8-15.8-15.8-41.5 0-57.4 15.8-15.8 41.5-15.8 57.4 0l81.7 81.7L336 67.1c15.8-15.8 41.5-15.8 57.4 0C409.2 82.9 409.2 108.6 393.4 124.4z' stroke='white' fill='white'%3E%3C/path%3E%3C/svg%3E"); content: ""; position: absolute; transition: all 200ms ease 0s; width: 100%; left: 0; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.button-confirm.jsAddFail:after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='123.05px' height='123.05px' viewBox='0 0 123.05 123.05' style='enable-background:new 0 0 123.05 123.05;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='white' stroke='white' d='M121.325,10.925l-8.5-8.399c-2.3-2.3-6.1-2.3-8.5,0l-42.4,42.399L18.726,1.726c-2.301-2.301-6.101-2.301-8.5,0l-8.5,8.5 c-2.301,2.3-2.301,6.1,0,8.5l43.1,43.1l-42.3,42.5c-2.3,2.3-2.3,6.1,0,8.5l8.5,8.5c2.3,2.3,6.1,2.3,8.5,0l42.399-42.4l42.4,42.4 c2.3,2.3,6.1,2.3,8.5,0l8.5-8.5c2.3-2.3,2.3-6.1,0-8.5l-42.5-42.4l42.4-42.399C123.625,17.125,123.625,13.325,121.325,10.925z'/%3E%3C/g%3E%3C/svg%3E"); background-color: #cc4c3f; color: #fff; content: " "; font-size: 1em; height: 100%; left: 0; line-height: 37px; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; border-radius: 30px; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.jsAddOk, .button.jsAddFail, .button.jsAddOk:hover, .button.jsAddFail:hover, .button.jsAddOk:focus, .button.jsAddFail:focus { color: transparent !important; } .button.jsAddOk { color: transparent !important; transition: all 200ms ease-in-out 0s; transform: scale(1.04); } .button.jsAddOk span { color: transparent !important; } .button.button-confirm.bigBuy.jsAddFail:after { line-height: 48px; } .button.big { padding: 15px 20px !important; font-weight: 500; font-size: 1.3em; } .button:hover, .button:focus { background-color: hsl(0 0% 53% / 1); color: #fff; background-position: 0 -15px; text-decoration: none; transition: all 200ms ease-in-out 0s; } .button.button-disabled, .button:disabled { border-color: #E1E1E1; box-shadow: none; cursor: default; font-style: italic; text-shadow: none; opacity: .5;} input.button-confirm, button.button-confirm, a.button-confirm, span.button-confirm{ background-size: 100% auto; border: 1px solid transparent; color: #fff; background-color: var(--button-default-color); transition: var(--transition-bg-color); font-size: 1em; } .button-confirm span { color: #fff; } .button-confirm:hover, .button-confirm:focus, .button-confirm:hover, .button-confirm:hover, .button-confirm:focus { background-color: var(--button-default-color-hover); /*transition: var(--transition-bg-color); border-color: #000; color: #fff;*/ } input.button-confirm-black, button.button-confirm-black, a.button-confirm-black{ background-size: 100% auto; background-color: #545454; font-size: 1em; } input.button-confirm-black:hover, input.button-confirm-black:focus, button.button-confirm-black:hover, button.button-confirm-black:focus, a.button-confirm-black:hover, a.button-confirm-black:focus { background-color: #404040 } input.button-confirm-black:focus::-moz-focus-inner, input.button-confirm-black:active::-moz-focus-inner, button.button-confirm-black:focus::-moz-focus-inner, button.button-confirm-black:active::-moz-focus-inner, a.button-confirm-black:focus::-moz-focus-inner, a.button-confirm-black:active::-moz-focus-inner{ border-color: white; } input.button-confirm-black.button-disabled, input.button-confirm-black:disabled, button.button-confirm-black.button-disabled, button.button-confirm-black:disabled, a.button-confirm-black.button-disabled, a.button-confirm-black:disabled { background-color: #f1630e; border-color: #000; } .button.button-confirm-black.btnCancel { background-color: #fff; border: 2px solid #545454; color: #545454; } .paging:last-of-type { margin: 20px 0; } .paging .paging-list { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .paging .paging-list ul { display: flex; align-items: center; } .paging .paging-list li { margin-left: .7em; } .paging .paging-list li:first-child { margin-left: 0; } .paging .paging-list li a { background-color: #fff; border-radius: 100%; border: 2px solid #000; color: var(--default-text-color); display: flex; height: 35px; line-height: 35px; text-align: center; width: 35px; transition: all 400ms ease 0s; justify-content: center; align-items: center; } .paging .paging-list li a:hover, .paging .paging-list li a:focus { color: var(--default-text-color); background-color: #ccc; } .paging .paging-list li a.btnloader:after { border: 2px solid rgba(0,0,0,0.5); } .paging .paging-list li.active a[aria-current = true] { background-color: var(--button-alternative-color); color: #fff; } .paging .paging-list ul li.active ~ li a { background-color: #fff; border-color: #000; } .paging .paging-list ul li:not(.active) a { background-color: #f7f7f7; border-color: #8a8a8a; } .paging .paging-list ul li:not(.active) a:focus-visible, .paging .paging-list ul li:not(.active) a:hover { background-color: #fff; } .paging .paging-list li.pagerPrev svg { width: 15px; height: 15px; fill: var(--default-text-color); } .paging .paging-list li.pagerNext svg { width: 15px; height: 15px; fill: var(--default-text-color); transform: rotate(180deg);} #paging-count { font-size: .8em; text-align: center; color:var(--default-text-color); margin: 10px 0; } #categoryContent .paging .paging-list li.pagerPrev .pagerButton, #categoryContent .paging .paging-list li.pagerNext .pagerButton { width: 45px; height: 45px; } #categoryContent .paging .paging-list li.pagerPrev svg, #categoryContent .paging .paging-list li.pagerNext svg { width: 20px; height: 20px; } #pageInfoAddon { color: #565656; font-weight: 500; font-size: .8em; } /* Search page */ span.highlight { color: #1387a9; } .search-related { margin: 30px 0; background-color: #fff; padding: 10px; font-size: .9em;} .search-related h4 { margin-bottom: 10px; } .search-related ul { display: flex; gap: 20px; } .search-related ul li { display: inline-flex; } .search-related ul li a { background-color: #8d8d8d; padding: 10px 15px; border-radius: 30px; color: #fff; transition: background-color .3s; } .search-related ul li a:hover, .search-related ul li a:focus { background-color: #000; } /* Search suggest */ div.suggest { font-size:12px; padding:6px; border-top:1px solid #e4e4e4; background: #fff; margin:0; clear:both; height:auto; overflow:auto; } div.suggest:first-child { border-top: 0; } div.suggest:last-child { border-bottom:none; } div.suggest em { float: right; font-size: 12px; } div.suggest div.image { display:block; padding-right:4px; width:10%; float:left; text-align:center; } div.suggest div.data { display:block; margin-right:4px; width:85%; float:left; } div.suggest div.data a { display: block; } div.suggest:hover { background-color: #ecfdff; border-top: 1px solid #cee7ea; } p.empty { margin:0; padding:3px; background: rgba( 233,241,17,0.87 ); } .typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; line-height: 30px; border: 2px solid #ccc; border-radius: 2px; outline: none; } .tt-hint { display: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #20659f; } .tt-menu { /*width:229px !important;*/ width: 100%; border:1px solid #ccc; text-align: left; } p.fullsearch { background:#fff; padding:5px; margin:0; font-size: 12px; } p.suggestHead { background:#363636; color: #fff; padding:5px; margin:0; font-size: 12px; font-weight:300; text-align:left; } .suggest.tt-suggestion.tt-selectable > a { display: block; width: 100%; } .suggestions-data ul li.showall a { background-color: #333; display: inline-flex; color: #fff; justify-content: center; align-items: center; padding: 10px 15px; border-radius: 33px; } ul.fourcolumns { -moz-column-count: 1; -moz-column-gap: 20px; -webkit-column-count: 1; -webkit-column-gap: 20px; column-count: 1; column-gap: 20px; font-size: .9em; } ul.fourcolumns li { -webkit-column-break-inside: avoid; /* Chrome, Safari */ page-break-inside: avoid; /* Theoretically FF 20+ */ break-inside: avoid-column; /* IE 11 */ display: table; /* Actually FF 20+ */ width: 92%; } ul.fourcolumns li ul { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } ul.fourcolumns li a { display: block; width: 100%; height: 100%; padding: 12px 0; } #atozPage h2 { text-align: left; } #atozPage .mImg { height: 100px; width: auto; display: flex; align-items: center; justify-content: flex-start; } #atozPage .mImg img { max-height: 100%; width: auto; } @media (min-width: 768px) { ul.fourcolumns { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } ul.fourcolumns li a { display: block; width: 100%; height: 100%; padding: 8px 0; } } /* Target: 480- */ @media only screen and (max-width : 480px) { input, select, textarea { border: 1px solid #ccc; font-family: inherit; font-size: 16px; } } #prodInfo fieldset.assocRadioWrapper { padding: 1em; border-radius: 7px; background-color: #f7f7f7; } #prodInfo fieldset.assocRadioWrapper legend { background-color: #000; padding: .3em .7em; border-radius: 20px; font-weight: 600; font-size: .9em; color: #fff; } .assocRadioWrapper { display: flex; flex-wrap: wrap; gap: .5em; } .assocRadioWrapper [type="radio"]:checked, .assocRadioWrapper [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .assocRadioWrapper [type="radio"] + label { position: relative; padding-left: 38px; font-weight: normal; outline: 1px solid #bababa; border-radius: 7px; } .assocRadioWrapper [type="radio"]:checked + label { background-color: #002e64 !important; color: #fff; border-radius: 5px; outline: 2px solid #04438e; outline-offset: 1px; } label.assocChoiceLabel.disabled.js-assoc-label.disabled { background-color: #dddddd; outline: 3px solid #b0b0b0; border-radius: 8px; color: #000; } label.assocChoiceLabel.selected.disabled.js-assoc-label.disabled { color: #e3e3e3; } .assocRadioWrapper [type="radio"]:checked + label.disabled:after { background-color: #a4a4a4; } .assocRadioWrapper [type="radio"]:checked + label .mini-bar { background-color: #fff; } .assocRadioWrapper [type="radio"]:checked + label.assocChoiceLabel.disabled .mini-bar { background-color: #555; } .assocRadioWrapper [type="radio"]:not(:checked) + label:hover { background-color: #fafafa; border-radius: 10px; } .assocRadioWrapper [type="radio"]:checked + label:before, .assocRadioWrapper [type="radio"]:not(:checked) + label:before, .assocRadioWrapper [type="radio"]:checked + label:after, .assocRadioWrapper [type="radio"]:not(:checked) + label:after { content: ''; position: absolute; left: 13px; top: 50%; width: 22px; height: 22px; border-radius: 100%; transform: translateY(-50%); } .assocRadioWrapper [type="radio"]:checked + label:before, .assocRadioWrapper [type="radio"]:not(:checked) + label:before { border: 2px solid var(--rdoBorderColor); background: var(--rdoBgColor); } .assocRadioWrapper [type="radio"]:checked + label:before { border-color: #002e64; } .assocRadioWrapper [type="radio"]:checked + label:after { opacity: 1; background-color: #002e64; transition: all 0.2s ease; transform: scale(.6) translateY(-83.3333%); } .assocRadioWrapper [type="radio"]:not(:checked) + label:after { opacity: 0; transition: all 0.2s ease; transform: scale(0) translateY(-50%); } .assocRadioWrapper [type="radio"]:not(:checked) + label:hover:after { background-color: #afafaf; opacity: 1; transform: scale(1) translateY(-50%); } .assocRadioWrapper [type="radio"]:checked + label .assocPrice .aStock .assocInstock { color: #fff; } .assocRow { min-height: 50px; display: flex; flex-basis: 100%; align-items: center; border-radius: 10px; } .assocRow label { height: 100%; margin: 0; flex-basis: 100%; display: flex; padding: 5px 10px 5px 0; align-items: center; cursor: pointer; } .assocRow label .assocImage { height: 35px; align-items: end; gap: 1px; /*flex-basis: 50px;*/ /*align-items: center;*/ justify-content: center; margin: 0 15px 0 10px; text-align: center; } .assocRow label .assocImage img { max-height: 35px; width: auto; /*mix-blend-mode: multiply;*/ border-radius: 100%;} .assocRow label .assocInfo { min-width: 46%; /*flex: 1;*/ display: flex; flex-wrap: wrap; margin-left: 1em; } .assocRow label .assocInfo strong { font-size: .9rem; width: 100%; font-weight: 600; } .assocRow label .assocInfo p { font-size: .7rem; font-weight: normal; margin: 0; flex-basis: 100%; padding: 2px 0 !important; } .assocRow label .assocInfo .unitPrice { font-size: .8rem; margin-top: .2em; } .assocRow label .assocPrice { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-right: 0; margin-left: auto; padding: .4em 0; } .assocRow label .assocPrice .aPrice, .assocRow label .assocPrice .aStock { text-align: right; width: 100%; } .assocRow label .assocPrice .aPrice { font-size: 1rem; } .assocRow label .assocPrice .aStock { font-size: .8rem; font-weight: normal; margin-top: 5px; } .assocRow label .assocPrice .aStock .assocOut { color: #a90000; } .assocRow label .assocPrice .aStock .assocOrder { color: #955100; } .assocRow label .assocPrice .aStock .assocInstock { color: #2a5725; } /* Print */ @page { margin-top: 20mm; margin-left: 6mm; margin-right: 6mm; } @media print { * { font-family: Times New Roman,serif!important; box-shadow: none !important; background: transparent !important; color: #333 !important; } body { padding-top: 30mm; background: white; font-size:12pt; } #topLogo { margin-top: -33mm; } #topLogo img { max-height: 12mm; width: auto; } #topLogo img, #productPageUpper #mimagecont img { mix-blend-mode: normal !important; filter: invert(1) grayscale(100%) brightness(.5) !important; } svg { fill: #333 !important; } .stars svg { display: none; } .stars .cover, .stars .visually-hidden { display: inline-block !important; position: static !important; border: none !important; clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; } #topLogo a { justify-content: flex-start; } .noprint, .cpToggle, .fadeout, .noPrint, #topMenu, .assoc, .anchorLink, .productBuy, #jsBuyBtn, .swiper-pagination, .swiper-button-next, .swiper-button-prev, .col1, .helpttext, #productInfoConditions, #printIcon, #breadcrumbs, #prodAssoc, #prodOthers, #prodSimilars, #footerNewsletter, #backbutton, #btnToggleTable, #leasing-preview-widget, #d9h8mo1ih1go1f8pq9bu6, body.stickyheader #topBar:after, .stickywrap, .prodpagelinks, .spotWishlist, .bracketNotice, #notice_bar { display: none !important; } .collapsed { max-height: none !important; } * { box-shadow: none !important; } .divToPrint { page-break-after: always; } #wrapper { margin-top: 0 !important; } table, img, svg { /*break-inside: avoid;*/ } #footer { background-color: #fff !important; border-top: 3px solid #000; } body.stickyheader #topBar { position: relative; width: 100%; z-index: 11; min-height: 0 !important; transform: translate3d(0,0,0); } table.resp.zebra tr td div { max-height: 100px !important; opacity: 1 !important; padding: 8px !important; } p a::after { content: " (" attr(href) ")"; } h1 { text-align: left !important; } #prodDesc { padding-top: 0 !important; } .accordion-panel {display: block !important;} body, #wrapper,#productPageUpper #prodImage, #prodDesc #prodTabs, .productListContainer, #indexCampaign { background-color: transparent !important; } .productListContainer article { border: 1px solid #ccc; } .productImage img { max-width: 100mm; height: auto; max-height: 300px; width: auto; } .cover { background-color: #fff; } .accordion-wrapper button svg { display: none !important; } } /* Slider, "own" settings, not belonging to the noUiSlider */ .slider-area { display: flex; align-items: end; margin-top:0; justify-content: center; } input.sliderFirst, input.sliderSecond { width: 60px; border-radius: var(--border-radius-small-input); padding: 2px 9px; font-size: 12px; margin-right: 11px; background-color: #fff; color: #333; } input.sliderSecond { margin-left: 11px; margin-right: 0; } input.sliderFirst:focus, input.sliderSecond:focus { padding: 2px 9px; box-shadow: none; margin:0 11px 0 0; background-color: #fff; color: var(--default-text-color); } input.sliderSecond:focus { margin:0 0 0 11px; } input.sliderFirst::-webkit-outer-spin-button, input.sliderFirst::-webkit-inner-spin-button, input.sliderSecond::-webkit-outer-spin-button, input.sliderSecond::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } input.sliderFirst[type=number], input.sliderSecond[type=number]{ -moz-appearance: textfield; } .slider { flex: 1; margin: 0 10px; } /* noUiSlider 15.6.1 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ /* NOTE: This has some changes, so it's not the original styles below */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } /* Wrapper for all connect elements. */ .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 100%; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } /* Offset direction */ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { left: 0; right: auto; } /* Give origins 0 height/width so they don't interfere with clicking the * connect elements. */ .noUi-vertical .noUi-origin { top: -100%; width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; } .noUi-touch-area { height: 100%; width: 100%; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { -webkit-transition: transform 0.3s; transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 6px; } .noUi-horizontal .noUi-handle { width: 24px; height: 24px; right: -12px; top: -10px; border-radius: 100%; cursor: pointer; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; right: -6px; bottom: -17px; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { left: -17px; right: auto; } /* Styling; * Giving the connect element a border radius causes issues with using transform: scale */ .noUi-target { background: #dbdbdb; border-radius: 4px; } .noUi-connects { /*border-radius: 3px;*/ } .noUi-connect { background: #676767; } /* Handles and cursors; */ .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { border: 1px solid #000; border-radius: 3px; background: #000; cursor: default; /* box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;*/ } .noUi-active { /*box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ background: #073653; } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 10px; width: 1px; background: #000; left: 10px; top: 7px; } .noUi-handle:after { left: 14px; } /* .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } */ /* Disabled state; */ [disabled] .noUi-connect { background: #B8B8B8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } /* Base; */ .noUi-pips, .noUi-pips * { box-sizing: border-box; } .noUi-pips { position: absolute; color: #525252; } /* Values; */ .noUi-value { position: absolute; white-space: nowrap; text-align: center; font-size: 9px; top: -8px;} .noUi-value-sub { color: #ccc; font-size: 10px; } /* Markings; */ .noUi-marker { position: absolute; background: #CCC; } .noUi-marker-sub { background: #AAA; } .noUi-marker-large { background: #AAA; } /* Horizontal layout; */ .noUi-pips-horizontal { padding: 10px 0; height: 20px; top: -30px; left: 0; width: 100%; } .noUi-value-horizontal { transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 1px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 8px; } /* Vertical layout; */ .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { transform: translate(0, -50%); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { transform: translate(0, -50%); top: 50%; right: 120%; } .noUi-horizontal .noUi-origin > .noUi-tooltip { transform: translate(50%, 0); left: auto; bottom: 10px; } .noUi-vertical .noUi-origin > .noUi-tooltip { transform: translate(0, -18px); top: auto; right: 28px; } /* .swiper-wrapper { -webkit-backface-visibility: hidden; } .swiper-slide { -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } */ .swiper-button-next, .swiper-button-prev { color: #000 !important; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #171717 !important;} .swiper-wrapper { -webkit-backface-visibility: hidden; } .swiper-slide { justify-content: center; align-items: center; display: flex !important; -ms-transform: translateZ(0); -webkit-backface-visibility:hidden; transform: translateZ(0); } .gallery-thumbs .swiper-slide { height: auto; } .gallery-thumbs .swiper-slide .swiper-slide-container{ height: 100%; } .gallery-top { height: 100%; width: 100%; } .swiper-slide figure { display: flex; height: 100%; width: 100%; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; overflow: hidden; } .gallery-thumbs { /*display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));*/ grid-gap: 5px; } .gallery-thumbs .swiper-slide :first-child { margin-left: 0; } .gallery-thumbs .swiper-slide :last-child { margin-right: 0; } .gallery-thumbs .swiper-slide img { max-height: 60px; width: auto; } /*.gallery-thumbs .swiper-slide.swiper-slide-active .mediawrapper { border-color: #000; }*/ .gallery-thumbs .swiper-slide.swiper-slide-thumb-active .mediawrapper { border-color: #000; } .gallery-thumbs .swiper-slide .mediawrapper { height: 100%; border: 1px solid #d3d3d3; background-color: #fff; padding: 5px; /*width: 90px;*/ display: flex; align-items: center; justify-content: center; } .gallery-thumbs .swiper-wrapper { padding-right: 20px !important; right: 0 !important; } .no_click_overlay {z-index: 1; background-color: rgba(0,0,0,.1); /*background-color: #fff;*/ /*opacity: 0.4; pointer-events: none;*/ position: relative; animation: fadein 2s;} .no_click_overlay:before { position: absolute; top: 200px; left: 0; right: 0; margin: 0 auto; -webkit-animation: spiner .7s linear infinite; animation: spiner .7s linear infinite; border: 3px solid #ddd; border-top: 3px solid #42a5f5; border-radius: 50%; height: 80px; width: 80px; display: block; content: ' '; z-index: 22; } .no_click_overlay_object {z-index: 1; background-color: rgba(0,0,0,.1); /*opacity: 0.4; pointer-events: none;*/ position: relative;} #ajaxLoader.no_click_overlay:before { top: 50%; } #basketItems.no_click_overlay:before { top: 5px; width: 30px; height: 30px; } .shakeit { animation: shakeshake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .focusit { box-shadow: 0 0 10px #0092c7; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; border: 1px solid #ffffff !important; } /* ------------------ START CASHIER RELATED */ #qcPno.ok, input.ok { background-color: #b8ffa9; } #jsCashierForm { font-weight: 700; height: 90px; padding: 20px !important; background-color: #2a8d4d; margin: 20px 0 120px; font-size: 1.8em; margin: 2em auto; } #qcTypeChoice { margin-bottom: 20px; } #qcTypeChoice label { font-weight: normal; padding-left: 0; } #qcTypeChoice label .labelText { z-index: 1; } #qcTypeChoice h3 { text-align: left; font-weight: 600; margin: 10px 0 0 0; padding: 5px 0; font-size: 1em; } #qcTypeChoice .selectArea [type=checkbox]:checked + label, #qcTypeChoice .selectArea [type=checkbox]:not(:checked) + label, #qcTypeChoice .selectArea [type=checkbox]:checked + label, #qcTypeChoice .selectArea [type=checkbox]:not(:checked) + label, #qcTypeChoice .selectArea [type=radio]:checked + label, #qcTypeChoice .selectArea [type=radio]:not(:checked) + label { border-bottom: 0; } .conditions { font-size: 1em; text-align: center; } #cashierChange > .container > form, #cashierPage > .container > form { padding: 0 .5em;} #cashierChange, #cashierPage { max-width: 900px; margin: 0 auto; } #cashierChange h2, #cashierPage h2 { text-align: left; margin: 0; padding: 0 0 .5em; font-size: 1.2em; font-weight: 600; } #cashierChange .cashierSection, #cashierPage .cashierSection { background-color: #fafafa; padding: .5em; border-radius: 8px; margin: .5em 0; } section#cashierBonus { background-color: #fcf2e1 !important; } #cashierCart { } #cashierCart h2 { padding-top: 0; } #cashierChange .horizontalScrollWrapper h2, #cashierPage .horizontalScrollWrapper h2 { margin: 20px 0 10px; } .freefreight { padding: 10px; background-color: #606060; color: #fff; align-items: center; justify-content: center; display: flex; font-weight: 600; } .freefreight.ok { background-color: #117E35; } #cashierCart .cashier-form table { white-space: nowrap; word-wrap: break-word; display: flex; flex-direction: column; flex-wrap: wrap; flex-flow: column; } #cashierCart .cashier-form table td { white-space: normal; text-overflow: ellipsis; padding: 5px; } #cashierCart .cashier-form table .summaryrow td { padding: 0 5px; } #cashierCart .cashier-form table td a { display: flex; } #cashierCart .cashier-form table th { } #cashierCart .cashier-form table tr { position: relative; display: flex; background-color: #ffffff; margin-bottom: 4px; padding: 5px; transition: box-shadow .3s; flex-wrap: wrap; border-radius: 9px; } #cashierCart .cashier-form table tr.summaryrow { margin-bottom: 0; justify-content: flex-end; border: 0; border-radius: 0; background-color: transparent; } #cashierCart .cashier-form table tr.summaryrow:hover { background-color: transparent; box-shadow: none; } #cashierCart .cashier-form table tr.summaryrow.total .vatstate { font-size: .9em; padding: 5px 0; } #cashierCart .cashier-form table tr.summaryrow.total strong { font-size: 1.2em; } #cashierCart .cashier-form table tr.summaryrow.vat { color: #4d4d4d; border: 0; } #cashierCart .cashier-form table tr.summaryrow .summaryrowWrapper { display: flex; flex-wrap: wrap; justify-content: flex-end; } .youSaveTotal { margin: 0; color: var(--sale-color); font-size: .9em; font-weight: 600; flex-basis: 100%; } #cashierCart .cashier-form table tr:hover { box-shadow: -1px 4px 7px #ccc; } #cashierCart .cashier-form table th.col1, #cashierCart .cashier-form table td.col1 { font-size: 0; justify-content: center; display: flex; flex-basis: 20%; align-items: flex-start; } #cashierCart .cashier-form table td.col2, #cashierCart .cashier-form table th.col2 { display: flex; flex: 1; flex-wrap: wrap; flex-basis: 40%; } #cashierCart .cashier-form table td.col3, #cashierCart .cashier-form table th.col3 { justify-content: flex-end; display: flex; flex: 1; font-weight: 600; font-size: 1.2em; flex-basis: 100%; padding-bottom: 0;} #cashierCart .cashier-form table th.col3.tableTotal { margin-top: -1.7em; } #cashierCart .cashier-form .name { flex: 1 0 100%; padding-right: 35px; margin-bottom: .2em; } #cashierCart .cashier-form .name h3 { font-size: .8em; font-weight: 600; } #cashierCart .cashier-form .name .prodno { font-size: .7em; } #cashierCart .cashier-form .name a:focus, #cashierCart .cashier-form .name a:hover { text-decoration: underline; } #cashierCart .cashier-form .unitPrice { flex: 0 0 100%; margin-bottom: 13px; } #cashierCart .cashier-form .cartQtyWrapper { justify-content: flex-start; flex: 1 1 30%; display: flex; flex-wrap: wrap; align-self: flex-start; padding: .5em 0; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus, #cashierCart .cashier-form .cartQtyWrapper .cartPlus { width: 25px; align-items: center; justify-content: center; display: flex; height: 25px; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus button, #cashierCart .cashier-form .cartQtyWrapper .cartPlus button { cursor: pointer; border: 0; display: flex; flex: none; background-color: #9c9c9c; border-radius: 100%; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; } #cashierCart .cashier-form .cartQtyWrapper .cartPlus button { background-color: #000; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus button { background-color: #525252; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartQty { cursor: default; font-size: .9em; font-weight: 600; display: flex; align-items: center; justify-content: center; width: 40px; height: 25px; background-color: #f7f7f7; border-radius: 4px; margin: 0 10px; } #cashierCart .cashier-form .maxreached { flex-basis: 100%; font-size: .7em; color: red; margin-top: 9px;} #cashierCart .cashier-form .cartPlus, #cashierCart .cashier-form .cartMinus { /*display: flex; background-color: #10b1e0; border-radius: 100%; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700;*/ } #cashierCart .cashier-form .cartPlus button:hover, #cashierCart .cashier-form .cartPlus button:focus, #cashierCart .cashier-form .cartMinus button:hover, #cashierCart .cashier-form .cartMinus button:focus { background-color: var(--activeSelectionColor-hover); outline-offset: 2px; } #cashierCart .cashier-form .cartPlus button:focus-visible, #cashierCart .cashier-form .cartPlus button:focus-visible {outline: 2px solid #000; outline-offset: 2px; } #cashierCart .cashier-form .toolbar { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; margin-top: .5em; } #cashierCart .cashier-form .toolbar .stockStatus { font-size: .8em; margin-right: 20px; } #cashierCart .cashier-form .toolbar .stockStatus .stockstatustext { font-weight: normal; } #cashierCart .cashier-form .toolbar .stockStatus .stockstatustext svg { width: 10px; height: 10px; } #cashierCart .cashier-form .toolbar .cartRemove { border: 0; cursor: pointer; background-color: transparent; position: absolute; top: .6em; right: .6em; } #cashierCart .cashier-form .toolbar .cartRemove svg { width: 17px; height: 17px; } #cashierCart .cashier-form .toolbar .cartRemove:focus-visible { outline-offset: 2px; } #cashierCart .cashier-form table td.col3 .priceTotal { margin-top: -1.7em; } #cashierCart .cashier-form .mspec { font-weight: 100; margin: 4px 0; background-color: #f8f8f8; padding: 5px 10px; font-size: .7em; border-radius: 10px; } #cashierCart .cashier-form table tr.greyColor td.col3 .priceTotal { margin-top: -1.8em; } #cashierCart .cashier-form table tr.greyColor td.col2 .cartQtyWrapper, #cashierCart .cashier-form table tr.greyColor td.col2 .toolbar { display: none; } #cashierCart .cashier-form table tr.greyColor td.col1 { height: 20px; } #cashierSummary { /*background-color: #f1ebe1; */ display: flex; align-items: center; justify-content: space-evenly; padding: 20px 0; font-weight: 600; margin: 20px 0 15px; font-size: 1.2em; } #cashierSummary h3 { padding: 0; } #cashierSummary h3 .vatinfo { font-size: .8em; color: #666; } #summaryCashier .sumbutton { display: flex; align-items: center; justify-content: center; } #btnShowSummaryCashier { border: 0; margin: 0 0 15px; background-color: #ccc; border-radius: 20px; padding: 5px 15px; cursor: pointer; transition: all .3s;} #btnShowSummaryCashier:hover, #btnShowSummaryCashier:focus { background-color: #4b4b4b; color: #fff; } #summaryCashierContent { max-height: 0; overflow: hidden; background-color: #fff; position: relative; margin-top: 10px; transition: max-height .3s; } #summaryCashierContent:after { bottom: 100%; left: 50%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 20px; margin-left: -20px; } #summaryCashierContent.open { max-height: 3000px; transition: max-height .3s; box-shadow: 1px -1px 6px 1px #ccc; padding: 15px; overflow: visible; margin-bottom: 25px;} #summaryCashierContent #cashierCart .cashier-form table tr:hover { box-shadow: none; } #summaryCashierContent #cashierCart .cashier-form .name { margin-bottom: 0;} #summaryCashierContent #cashierCart .cashier-form img {max-height: 20px; } #cashierCart .cashier-form table th.col1, #cashierCart .cashier-form table td.col1 { flex-basis: 10%; height: 70px; } #cashierCart .cashier-form table th.col1 img, #cashierCart .cashier-form table td.col1 img { width: auto; } #qcDynamicCashier .couponwrapper, #qcDynamicCashier .commentwrapper { background-color: #f7f7f7; margin: 10px 0; padding: 8px 15px; color: var(--default-text-color); /*border-bottom: 2px solid #525050;*/ } .jsToggleCouponContent, .jsToggleCommentContent { display: none; } .jsToggleComment, .jsToggleCoupon { cursor: pointer; display: block; padding: 4px 0; font-weight: normal; position: relative; width: 100%; border: 0; text-align: left; background-color: transparent; } .jsToggleCoupon:after, .jsToggleComment:after { content: " "; width: 25px; height: 25px; font-size: 20px; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 330 330' %3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; right: 0; display: inline-flex; position: absolute; top: 2px; pointer-events: none; } .jsToggleCoupon[aria-expanded=true]:after, .jsToggleComment[aria-expanded=true]:after{transform: rotate(-180deg);} #qcComment { width: 100%; } #coupon { height: 40px; border-radius: 2px; padding: 2px 4px; } .qcBonusLevels { display: flex; flex-wrap: wrap; flex-basis: 100%; } .qcBonusLevels .innerPad { padding: 15px 10px; display: table; width: 100%; background-color: #fff; font-weight: 600; } .qcBonusLevels .bonus_header { display: flex; flex: 1; flex-wrap: wrap; align-items: center;padding: 7px 8px 7px; background-color: #e9dcc4; } .qcBonusLevels .bonus_header.inactive { background-color: #f4f4f4; } .qcBonusLevels .bonus_header h3 { font-size: 1em; color: #fff; padding: 5px 10px; background-color: #705931; margin-right: 10px; } .qcBonusLevels .bonus_money_left { font-size: .9em; display: flex; color: #e00000; font-weight: 600; margin-right: 0; margin-left: auto;} .qcBonusLevels .bonus_description { font-size: .9em; font-weight: 600;vertical-align: middle; } .qcBonusLevels .bonus_description h2 { padding: 0 !important; } .qcBonusLevels .bonus_description span { font-weight: 600; } .bonus_added_info { border: 1px solid #c6e0e6; background-color: #daf0f5; padding: 7px; font-size: .9em; margin: 2px 0 5px; display: flex; flex: 1; } .qcBonusLevels ul.options { display: flex; flex-direction: column; flex-basis: 100%; flex-wrap: wrap; } .qcBonusLevels ul.options li { border-bottom: 1px solid #eee; } .qcBonusLevels ul.options li.inactive { filter: blur(1px) grayscale(1); opacity: .5; } .qcBonusLevels .qcBonusProduct { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-basis: 100%; background-color: #fff; padding: 10px; min-height: 110px;} .qcBonusLevels .qcBonusProduct .f1 { display: flex; justify-content: flex-start; width: 100px; margin-right: 15px;} .qcBonusLevels .qcBonusProduct .f2 { display: flex; justify-content: flex-start; flex: 1; font-weight: 600; flex-basis: 100%; margin-bottom: 20px; } .qcBonusLevels .qcBonusProduct .f3 { display: flex; justify-content: flex-start; flex: 1; flex-direction: column; text-align: right; } .qcBonusLevels .qcBonusProduct .f4 { display: flex; justify-content: flex-end; flex: 1; text-align: center; } .qcBonusLevels .qcBonusProduct .f4 .button { width: 100px; } .qcBonusLevels .qcBonusProduct .cartMinus { width: 25px; align-items: center; justify-content: center; display: flex; height: 25px; } .qcBonusLevels .qcBonusProduct .cartMinus a { width: 100%; height: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; color: #777; /*border: 1px solid #ccc;*/ border-radius: 4px; font-size: 22px; } .qcBonusLevels .qcBonusProduct .cartMinus a { background-color: #eb7676; color: #fff; } .qcBonusLevels .qcBonusProduct .pill_selected { display: inline-block; margin-left: 10px; font-size: .8em; background-color: #000; color: #fff; border-radius: 15px; padding: 5px 10px; } .qcBonusLevels .qcBonusProduct .regular_price { display: flex; justify-content: flex-end; flex-basis: 100%; text-decoration: line-through; color: #a5a5a5; font-size: .9em; } .qcBonusLevels .qcBonusProduct .new_price { display: flex; justify-content: flex-end; color: #ff0000; font-weight: 600; } .qcBonusLevels .qcBonusProduct .discount { justify-content: flex-end; font-size: .9em; color: #181818; display: block; } @media (min-width: 768px) { .qcBonusLevels .bonus_description { display: inline-block; font-weight: 500; } } #qcButton { display: flex; justify-content: center; flex-basis: 100%; align-items: center; margin: 50px 0 50px 0; } #qcButtonLink svg {width: 15px; height: 15px; fill: #fff; transition: opacity .3s; margin-left: 10px;} #qcButtonLink.btnloader svg {opacity: 0; } #qcButtonBack { display: flex; justify-content: flex-start; flex-basis: 100%; align-items: center; margin: 0; z-index: 3;} #qcButtonBackLink { padding: 10px !important; font-size: .9em; background-color: transparent; color:#000; display: flex; align-items: center; } #qcButtonBackLink:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 2px; } #qcButtonBackLink svg {width: 15px; height: 15px; margin-right: 10px; fill: #000; transition: opacity .3s; transform: rotate(180deg); } #addressLookup { background-color: #efefef; padding: 10px; margin-bottom: 15px; } #loginContainer { background-color: #f1ebe1; padding: 10px; margin:15px 0 15px; } #loginContainer .loginQuestion button { font-weight: 700; border: 0; background-color: #000; padding: 10px 15px; border-radius: 20px; align-items: center; width: max-content; cursor: pointer; color: #fff; transition: background-color .3s ease-in; margin-bottom: 15px; } #loginContainer .loginQuestion button:hover, #loginContainer .loginQuestion button:focus { background-color: #073653; outline: none;} #loginContainer .loginQuestion button:focus-visible { outline: 1px solid #000;} #loginContainer .loginQuestion { display: flex; align-items: center; flex-direction: column; } #loginContainer .loginQuestion h3 { font-weight: 600; font-size: .9em; margin: 10px 0; } #loginContainer .loginQuestion p { font-size: .9em;} #loginContainer #loginForm { display: none; } #loginContainer #loginForm form { display: flex; justify-content: center; flex-wrap: wrap; } #loginContainer #loginForm form .formRow input { width: 100%; } #loginContainer #loginForm form .col1, #loginContainer #loginForm form .col2 { margin-top: 15px; flex-basis: 200px; } #loginContainer #loginForm form .col1 { margin-bottom: 0; } #loginContainer #loginForm form .col3 { flex-basis: 100%; align-items: center; margin-bottom: 0; } #loginContainer #loginForm form .col3 .button { width: 200px; margin-bottom: 17px; margin-top: -15px; } .qcCartTbl .plus, .qcCartTbl .minus { display:-moz-inline-stack; display:inline-block; *display:inline; } #qcGiftWrapSelection { margin-top:10px; } #qcGiftWrapSelection ul { list-style: none; padding:0; margin:0; overflow:auto; height:auto; } #qcGiftWrapSelection li { margin:5px; display:block; float:left; height:140px; width:120px; padding:1px; border:1px solid #ccc; background:#fff; cursor: pointer; position: relative; } #qcGiftWrapSelection li:hover { border: 1px solid #b2e5b2; } #qcGiftWrapSelection img { display:block; margin-left:auto; margin-right:auto; } #qcGiftWrapSelection li.active { border:1px solid #009900; } #qcGiftWrapSelection li.active:before { content: '\2713 '; padding-right: 5px; position: absolute; bottom: 2px; left: 10px; font-size: 120%; color: #009900; font-weight: 600; } #qcGiftWrapSelection li strong { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-size:12px; height:14px; overflow:hidden; } #qcGiftWrapSelection li i { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-style: normal; } .form-steps { display: flex; align-items: center; justify-content: center; padding: 15px 0 10px 0; margin: 15px 0; } .form-steps:after { content: ""; display: table; clear: both; } .form-steps__item { padding: 0; position: relative; display: block; float: left; width: 200px; text-align: center; cursor: default; } .form-steps__item-content { display: inline-block; } .form-steps__item-content a { cursor: pointer; } .form-steps__item-icon { background: lightgray; color: #9c9c9c; border-radius: 100%; text-align: center; width: 40px; height: 40px; margin: 0 auto 4px auto; position: relative; font-size: 13px; font-weight: 700; z-index: 2; display: flex; align-items: center; justify-content: center; } .form-steps__item-text { font-size: 13px; color: #9c9c9c; font-weight: 500; } span.form-steps__item-text { text-transform: capitalize; } .form-steps__item-line { display: inline-block; height: 4px; width: 100%; background: #e4e4e4; float: left; position: absolute; left: -50%; top: 20px; z-index: 1; border: 1px solid #e4e4e4; } .form-steps__item--active .form-steps__item-icon { background: var(--button-default-color); color: white; } .form-steps__item--active .form-steps__item-text { color: #575757; font-weight: 600; } .form-steps__item--active .form-steps__item-line, .form-steps__item--completed .form-steps__item-line { background: var(--button-default-color);} .form-steps__item--completed .form-steps__item-text { color: #4f5e77; } .form-steps__item--completed .form-steps__item-icon { background: var(--button-default-color); background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkuMTIgNyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuMTIgMS4wNkw4LjA2IDAgMy4xOCA0Ljg4IDEuMDYgMi43NiAwIDMuODIgMy4xOCA3bDUuOTQtNS45NHoiLz48L3N2Zz4=); color: transparent; background-size: 10px; background-repeat: no-repeat; background-position: center center; width: 40px; height: 40px; line-height: 40px; } @media only screen and (max-width: 720px) { .form-steps__item { width: 33%; } .form-steps__item-icon, .form-steps__item--completed .form-steps__item-icon { width: 30px; height: 30px; line-height: 30px; } .form-steps__item-line { top: 15px; } } body.cashierrelated #wrapper { background-color: var(--cashier-bg); } body.cashierrelated #wrapper { background-color: var(--cashier-bg); margin-top: 80px; } body.cashierrelated #wrapper h1 { text-align: center; } body.cashierrelated #topLogo a { margin-left: -50px; } /* ------------------ END CASHIER RELATED */ .errorField { outline: 1px solid red; } .columnwrapper { display: flex; flex-wrap: wrap; } .columnwrapper .halfwidth { flex-basis: 100%; } .formWrapper { display: flex; flex-wrap: wrap; background-color: #fff; padding: 5px; flex-direction: column;} .formWrapper h4 { margin: 0 0 10px 0; padding: 15px 8px 15px 12px; background-color: #fbfbfb; font-weight: 600; } .formWrapper .contentHeadBefore { padding: 0 0 0 10px; } .formInner { flex: 1; flex-basis: 100%; background-color: #fff; padding: 25px; } .formInner .formRow input[type=text], .formInner .formRow input[type=password], .formInner textarea { width: 90%; } .formInner .formRow.double input[type=text], .formInner .formRow.double input[type=password], .formInner .formRow.double textarea { width: 80%; } .formRow.double { display: flex; flex-direction: row; flex-wrap: wrap; } .formRow.double div { flex-basis: 100%; } /*.myPages > .formInner { padding: 20px 0; }*/ .requiredinfo { display: flex; align-items: center; flex-basis: 100%; margin: 10px; font-weight: 600; } .selectArea, .selectAreaSpecial { display: flex; flex-wrap: wrap; background-color: var(--selectArea-bg); border-radius: 12px; border: 1px solid #e7e7e7; } .selectArea.simple { flex-wrap: wrap; } .selectArea ul { flex: 0 0 100%; display: flex; flex-direction: column; flex-wrap: wrap; } .selectArea ul li { display: flex; align-items: center; background-color: transparent; flex: auto; position: relative; flex-wrap: wrap; border-bottom: 1px solid #d7d7d7;} .selectArea ul li.active { box-shadow: 0 0 1px #9ebf89; outline: 1px solid #9ebf89; background-color: #fafffa; transform: scale(1.007); border-radius: 4px; } .selectArea ul li label {transition: all 0.3s ease; flex-wrap: wrap; min-height: 66px; display: flex; align-items: center; flex-basis: 100%; cursor: pointer; padding: 15px;} .selectArea.vertical ul li label { padding: 15px 0;} .selectArea ul li label .labelText { flex-wrap: wrap; } .selectArea ul li label .labelImage { margin-right: 0; margin-left: auto; margin-top: 7px; flex-basis: 100%;} .selectArea ul li label img { max-width: 94px; max-height: 55px; } .selectArea ul li:not(.active) label:hover{ /*background-color: #f7f7f7;*/ transform: scale(1.004); } .selectArea ul li input[type=radio] { margin:0 10px; } /*.selectArea ul li.active { background-color: #fff; }*/ .selectArea ul li.active label { color: var(--default-text-color); } .selectArea .selectInfo {flex: 1; /*background-color: #fff;*/ flex-basis: 100%; /*display: none;*/ } .selectArea .selectInfo label { padding: 17px 0 5px!important; min-height: auto !important; margin: 0; } #qcDynamicPayment .selectArea .selectInfo {display: block; } .selectArea .selectInfo .infoImage { margin: 10px 0 20px; } /*.qccashier-pay-info p { max-width: 53ch; }*/ .selectArea ul li.active .selectInfo { margin-top: -15px; } .selectArea .selectInfo .infoImage img { max-height: 70px; } .selectArea .selectInfo select { width: 100%; max-width: 100%; height: 50px; font-size: 16px; padding-left: 10px;} /*.selectArea .selectInfo .qcrow { margin-top: 15px; }*/ .selectArea.simple ul { flex: 0 0 100%; flex-direction: row;} .selectArea.simple ul li { flex: 1 1 250px; } .selectArea [type=radio]:checked, .selectArea [type=radio]:not(:checked) { position: absolute; opacity: 0; width: 1em; height: 1em; top: 25px; } .selectArea [type=radio]:checked:focus-visible + label, .selectArea [type=radio]:not(:checked):focus-visible + label { outline: var(--default-focus-visible-outline); } .selectArea [type=checkbox]:checked + label, .selectArea [type=checkbox]:not(:checked) + label, .selectArea [type=radio]:checked + label, .selectArea [type=radio]:not(:checked) + label { position: relative; padding-left: 45px; cursor: pointer; /*border-bottom: 1px solid var(--inactiveSelectionColor);*/ } .selectArea ul li:last-of-type, .selectArea ul li:last-of-type label { border-bottom: 0 !important; } .selectArea [type=radio]:checked + label:before, .selectArea [type=radio]:not(:checked) + label:before { content: ''; position: absolute; left: 10px; top: 50%; width: 19px; height: 19px; border: 2px solid var(--rdoBorderColor); border-radius: 100%; background: var(--rdoBgColor); transform: translateY(-50%); } .selectArea [type=radio]:checked + label:after, .selectArea [type=radio]:not(:checked) + label:after { content: ''; width: 9px; height: 9px; background-color: var(--activeSelectionColor); position: absolute; top: 50%; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; left: 15px; transform: translateY(-50%); } .selectArea [type=radio]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .selectArea [type=radio]:checked + label:after { opacity: 1; transform: scale(1) translateY(-50%); } .selectArea [type=radio]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; transform: scale(1) translateY(-50%); } .selectArea [type=checkbox]:checked, .selectArea [type=checkbox]:not(:checked) { position: absolute; opacity: 0; width: 1em; height: 1em; top: 25px; } .selectArea [type=checkbox]:checked + label, .selectArea [type=checkbox]:not(:checked) + label { position: relative; cursor: pointer; border-bottom: 1px solid var(--inactiveSelectionColor);} .selectArea ul li [type=checkbox]:checked + label, .selectArea [type=radio]:checked + label { /*background-color: var(--selectAreaCheckedLabel);*/ border-bottom: 1px solid transparent; } .selectArea [type=checkbox]:checked + label:before, .selectArea [type=checkbox]:not(:checked) + label:before { pointer-events: none; content: ''; position: absolute; left: 10px; top: 50%; width: 19px; height: 19px; border: 2px solid var(--rdoBorderColor); border-radius: 100%; background: var(--rdoBgColor); transform: translateY(-50%); } .selectArea [type=checkbox]:checked + label:after, .selectArea [type=checkbox]:not(:checked) + label:after { content: ''; width: 9px; height: 9px; background-color: var(--activeSelectionColor); position: absolute; top: 50%; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; left: 15px; transform: translateY(-50%); } .selectArea [type=checkbox]:not(:checked) + label:after { opacity: 0; } .selectArea [type=checkbox]:checked + label:after { opacity: 1; /*-webkit-transform: scale(1); transform: scale(1);*/ } .selectArea [type=checkbox]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; } .selectArea [type=checkbox]:not(:checked) + label:before, .selectArea [type=checkbox]:checked + label:before, .selectArea [type=checkbox]:checked + label:after, .selectArea [type=checkbox]:not(:checked) + label:after { border-radius: 0; } /* .selectArea [type=checkbox]:checked + label.chkSymbol:after { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6L9 17l-5-5"%3E%3C/path%3E%3C/svg%3E'); background-color: var(--activeSelectionColor); background-position: center; width: 17px; height: 16px; left: 11px; } */ /*.selectArea li.active .selectInfo { border-bottom: 2px solid var(--activeSelectionColor); }*/ /*.selectArea li.active { border-bottom: 1px solid var(--inactiveSelectionColor);}*/ .selectArea [type=checkbox]:focus-visible + label { outline: var(--default-focus-visible-outline); } .selectArea [type=radio]:focus-visible + label { outline: var(--default-focus-visible-outline); } .labelText { width: 100%; display: flex; align-items: center;} .labelText a { width: 100%; height: 100%; display: block; padding: 20px 20px 20px 40px; } .padfix {padding-left: 40px;} .labelText .freightprice { font-size: 1.1em; font-weight: 600; padding-right: 14px; width: 100px; text-align: right; margin-right: 0; margin-left: auto; } .labelInfo { color: #505050; font-weight: normal; padding: 0 15px 15px 45px; font-size: .9em; } .qccashier-pay-info { /*background-color: #f8f8f8;*/ height: 100%; display: flex; flex-direction: column; padding: 15px 15px 15px 45px; } #postalInputWrapper { background-color: #daf0f5; border: 1px solid #c6e0e6; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 20px; margin: 10px 0 0; flex-wrap: wrap; } #postalInputWrapper label { flex-basis: 100%; text-align: center; font-weight: normal; } .zipbuttons { display: flex; align-items: center; padding-top: 10px; flex-wrap: wrap; justify-content: center; gap: 10px;} .zipbuttons input { height: 50px; width: 200px; text-align: center; font-size: 16px; margin: 0; border: 0; } .zipbuttons button { border-radius: 0; height: 50px; border: 0; padding: 0 25px; background-color: var(--button-action-color); } .zipbuttons button:hover, .zipbuttons button:focus-visible { background-color: var(--button-action-color-hover); } .btnloader:after { content: ""; display: inline-block; margin-left: 5px; border-radius: 100%; right: 6px; top: 50%; width: 0; height: 0; margin-top: -2px; border: 2px solid rgba(255,255,255,0.5); border-left-color: #FFF; border-top-color: #FFF; animation: spin .6s infinite linear, grow .3s forwards ease-out; } .buybtnnotice { display: flex; justify-content: center; background-color: #f7f7f7; margin: 5px 0; font-size: .9em; } .buybtnnotice.reached { background-color: #dbfdf7; } @media (min-width: 768px) { .buybtnnotice { font-size: 1em; } } .free-shipping-container { flex-basis: 100%; background: #f1f9ff; text-align: center; font-size: .9em; margin: 0 5px; position: relative; transition: background 0.3s ease; padding: .5em 2em 1em 2em; } .free-shipping-container p { padding: .3em .3em .7em; } #cashierPage #freeFreightNotice { justify-content: center; display: flex; margin: 0 auto .5em; background-color: #f1f9ff; } #cashierPage #freeFreightNotice .free-shipping-container { background-color: transparent; width: 41%; } .shipping-text { margin: 0 0 8px 0; } .progress-bar { height: 10px; background: #e0e0e0; border-radius: 5px; position: relative; } .progress-fill { height: 100%; background: #48c78e; transition: width 0.5s ease; border-radius: 7px; } .truck { position: absolute; top: -18px; transition: left 0.5s ease; font-size: 20px; transform: scaleX(-1); } /* Model selector */ .model-chooser { display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: .8em; padding: 0 2em; } .model-chooser .select-wrapper { flex: 1 1 100%; } #model-select-wrapper { padding: 0 0 25px 0; margin-bottom: 5px; background-color: #1c241a; /*background: #e7e7e7 url(../images/thallen_selector_opt.jpg) no-repeat; background-position: 0 0;*/ background-position: 0 0; background-repeat: no-repeat; /*background-size: 100%; */ box-shadow: 0 4px 32px #999999; background-size: cover; } #model-select-container { } #model-select-wrapper h2 { font-weight: 600; text-align: center; padding: 25px 0; font-size: 1.7em; color: #fff; } #model-select-wrapper label { position: absolute; top: -8px; left: -16px; font-size: .7em; font-weight: 600; color: #ffffff; background-color: rgba(48, 57, 45, 0.82); border-radius: 14px; padding: 2px 7px; transform: rotate(-9deg); } #model-select-wrapper .select-dropdown label{ display: none; } #model-select-wrapper .select-dropdown.passed label { display: block; } #chooserBtn { background-color: #00759B; width: 55%; margin: 0 auto; display: block; text-align: center; padding: 12px 10px; color: #fff; border-radius: 7px; font-size: 1.4em; transform: scale(1); transition: transform 0.3s ease; } #chooserBtn.inactive { background-color: #c8c8c8; transform: scale(.8); } #chooserBtn:focus-visible { outline: 2px solid #34a810; } .select-dropdown { position: relative; background-color: #f8f8f8; border: 2px solid #f8f8f8; border-radius: 7px; width: 90%; max-width: 100%; margin: 0 auto; transform: scale(1); box-shadow: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .select-dropdown select { width: 100%; font-family: 'Quicksand', sans-serif; font-size: 1rem; color: #000; font-weight: 500; max-width: 100%; padding: 14px 24px 14px 10px; border: none; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-dropdown select:active, .select-dropdown select:focus { outline: none; box-shadow: none; } .select-dropdown:focus-within { outline: 2px solid #fff; outline-offset: 2px; } .select-dropdown.active:focus-within { outline: 3px solid #34a810;} .select-dropdown select option[value="-1"][disabled] { display: none; } .select-dropdown::after { content: " "; position: absolute; top: 50%; margin-top: -2px; right: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #aaa; } .select-dropdown select option { font-weight: 500; } .select-dropdown.active { border: 2px solid #ffffff; background-color: #fff; color: #000; outline-offset: 2px; } .select-dropdown.passed { border: 2px solid #aeaeae; color: #333; } .select-dropdown.active select { color: #000; } .select-dropdown.noitems select { color: #ccc; } .select-dropdown.active:not(.passed) { transform: scale(1.1); box-shadow: -2px 4px 4px rgba(0, 0, 0, .7); } #stop_times { width: 80%; margin: -.5em auto 1em;background-color: #d1f1ef; font-size: 1em; padding: 0 1em 1em; border-radius: 8px; } #stop_times::after { right: 100%; top: 17px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(209, 241, 239, 0); border-right-color: #d1f1ef; border-width: 7px; margin-top: -7px; } #stop_times caption { text-align: center; font-size: 1em; font-weight: 600; border-bottom: 1px solid #9fd8d4; padding: 1em; margin-bottom: 4px; } #stop_times table { margin: 5px 0; font-size: .9em; } #pageIndex .circleBannersWrapper, #pageIndex .squareBannersWrapper { display: flex; overflow-x: auto; justify-content: space-between; gap: 20px; } #pageIndex .squareBannersWrapper { align-items: end; } #pageIndex .circleBanner, #pageIndex .squareBanner { min-width: fit-content; } #pageIndex .circleBanner img { max-height: 125px; width: auto; } .bannerArea > div { padding: 2em 0 1em 0; } #pageIndex .circleBanner a, #pageIndex .squareBanner a { display: block; } #qcExpressship { background-color: transparent; width: 100%; padding: 0 15px 0 75px !important; display: flex; align-items: center; } #qcExpressship .labelPrice, #qcExpressship .labelText { font-weight: bold; display: flex; flex-wrap: wrap; align-items: center;font-size: 1em; padding-top: 0; } #qcExpressship .labelText svg { width: 25px; height: 25px; margin-left: .5em; } #qcExpressship .labelPrice .infotext { background-color: transparent; flex-basis: 100%; margin-top: -4px; padding: 0; } #qcExpressship .expresstext { font-weight: normal; font-size: .9rem; } #qcExpressship .expressprice { font-size: 1em; display: flex; text-align: right; justify-content: flex-end; margin-left: .5em; } #qcExpressship .labelImage { margin-right: 15px; margin-left: 10px; flex: 1; justify-content: flex-end; text-align: right; } #qcExpressship::before, #qcExpressship::before { left: 46px; top: 16px; } #qcExpressship::after, #qcExpressship::after { content: "✔"; left: 50px; top: 11px; background-color: transparent; color: #0073f8; } #qcExpressship:hover:after { color: #ccc !important; } input[type="checkbox"]:checked + #qcExpressship:hover:after { color: #0073f8 !important; /* Prevent the color change when the checkbox is checked */ } @media (min-width: 768px) and (max-width: 1400px) { body.stickyheader #topArea, body.stickyheader #navbar, #topContent, #footerContent, #innerWrapper { padding-left: 10px; padding-right: 10px; } #index-slider, #pageIndex .indexh1 { margin: 0 -10px;} body.stickyheader #topContent, body.stickyheader #topMenu{ padding-left: 20px; padding-right: 20px; } } .assocImage { display: none; } @media (min-width: 1100px) { .assocImage { display: flex; } } @media (min-width: 768px) { #mobilecheck { display: none; } .onlyBig {display: block !important; } .onlySmall {display: none !important; } /* "Snus bars" */ .assocImage { line-height: 2em; flex-wrap: wrap; justify-content: flex-start; } .mini-bar { width: 10px; height: 26px; margin-right: 2px; background-color: #555; border-radius: 2px; } .horizontal-bar { width: 10px; height: 6px; transform: rotate(0deg); } #wrapper > .container {padding-top: 5px;} #search01-suggestions-wrapper { height: auto; max-height: calc(100vh - 158px); border-radius: 10px; } body.stickyheader.slideInCartFromRight #topBar.hide #miniCart, body.stickyheader.slideInCartFromRight #topBar.allmostall #miniCart {top: 35px; height: 100vh; } .standardPageContainer #category-wrapper > #category-subcategories { padding: 0; } .infopagesection { gap: 20px;} .infopagesection .infocont { max-width: 215px; } #top-banner { padding: 0;} .bodytext { margin: 0 0 1em 0; padding: 0; } /*.bodytext p { max-width: 85ch; }*/ .bodytext .cpToggle { /*left: 5px; transform:translate3d(5px,0,0);*/ bottom: 5px; z-index: 2;} #category-bodytext-lower .container { padding: 0 2em;} #category-bodytext-lower .container:after, #category-bodytext-lower .container:before { left: 10%; } .md_switch { width: auto; padding: 0; margin: 5px 0; background-color: transparent; font-size: .9em; color: #fff; font-weight: normal; } #top-banner .inner { max-height: none; } .bodytext { /*column-count: 2; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: #e2e2e2;*/ } #ajaxNL .newsletter-field { margin-right: 20px; } #ajaxNL .nlSubmit { margin-top: 0; flex-basis: auto; } #footer { contain-intrinsic-size: auto var(--footer-height); } #footerContent .container { flex-direction: row; padding: 0; gap: 45px; } #footerContent .container .fcol { width: 20%; } .productListContainerHorizontal article .catProdInner {bottom: 35px; } #dealOfTheDay { flex-wrap: nowrap; } #dealOfTheDay .textArea { flex-basis: 50%; } #indexUspArea, #indexUspArea2 { margin: 10px 0; } #indexUspArea .uspRow1 .uspPlate { flex: 1 1 49%; } #indexUspArea2 .uspRow2 { gap: 10px; margin: 10px 0; } #indexUspArea .uspRow2 .uspPlate, #indexUspArea2 .uspRow2 .uspPlate{ flex: 1 1 24%; min-width: 200px; } #indexUspArea .uspRow1, #indexUspArea2 .uspRow1, #indexLowerUspArea .uspRow1 { gap: 10px; } /*.productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); grid-gap: 10px; }*/ .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(278px, 1fr)); grid-gap: 1em; /*background-color: #fafafa; padding: 1em;*/ } #categoryContent .productListContainer .highlight { grid-column-end: span 2; grid-row-end: span 2; } #categoryContent .productListContainer .highlight { display: flex; overflow: hidden; } #categoryContent .productListContainer .highlight .catProdImage { height: 703px; } #categoryContent .productListContainer .highlight .catProdImage img { max-height: 700px; height: auto; } #notit { grid-column: auto / span 2; /*grid-row: auto / span 2;*/ grid-row: auto / span 1 } .symbolContainer { max-width: 125px; } #indexImagesFromCategories .catItem { flex: 1; max-width: 16.666%; } #miniCart { width: 100%; max-width: 710px;} .prodpagelinks li { flex-basis: auto; } #jsRevWritecontainer form { width: 100%; max-width: 600px; margin: 0 auto !important; } #prodReviews .colRew.revAnsw { margin-top: 0;} #prodReviews .colRew.revAnsw:after { right: 100%; top: 15%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(241, 241, 241, 0); border-right-color: #f1f1f1; border-width: 15px; margin-top: -15px; margin-left: auto; } .paging .paging-list { justify-content: flex-end;} .selectArea .selectInfo {display: block; } #cashierCart .cashier-form table td.col2, #cashierCart .cashier-form table th.col2 { flex-basis: 60%; } #cashierCart .cashier-form table th.col3 { font-size: 1.1em; } #cashierCart .cashier-form table td.col3 { font-size: 1.2em; flex-basis: auto; width: 10%; } #cashierCart .cashier-form table td.col3 .priceTotal { margin-top: .35em; } #cashierCart .cashier-form table tr.greyColor td.col3 .priceTotal { margin-top: 0; } #cashierCart .cashier-form .structuralcontent { font-size: .9em;} #cashierCart .cashier-form .name { flex: 1 0 40%; padding-right: 35px; padding-top: .2em; min-height: 2.3em; } #cashierCart .cashier-form .unitPrice { flex: 0 0 20%; margin-bottom: 0; } #cashierSummary { padding: 20px 20% 0; font-size: 1.5em; } #cashierCart .cashier-form .cartQtyWrapper { padding-top: .5em; } #cashierCart .cashier-form table th.col1 img, #cashierCart .cashier-form table td.col1 img { height: 60px; } #loginContainer #loginForm form .col1 { margin-right: 40px; } #qcButtonBack { display: flex; } /* #topBar #qcButtonBack, #topBar #qcButtonBackLink { margin-right: -200px; } */ #qcButtonBackLink { background-color: var(--button-alternative-color); color: #fff; } #qcButtonBackLink svg { fill: #fff; } #qcButtonBackLink:hover, #qcButtonBackLink:focus { background-color: var(--button-alternative-color-hover); } body.cashierrelated #topArea {display: none; } body.cashierrelated #topSearch {display: none; } body.cashierrelated #topContact {display: none; } body.cashierrelated #topLogo { justify-content: center; } body.cashierrelated #topLogo a { justify-content: center; } body.cashierrelated #topMenu { display: none; } body.cashierrelated #topBar { height: 67px; min-height: auto; transition: all .3s ease; } body.cashierrelated.stickyheader #topBar.hide { padding: 0; box-shadow: -13px 6px 9px #dedede;} body.cashierrelated.stickyheader #topBar.hide #topLogo { background-color: transparent; } body.cashierrelated.stickyheader #topBar.hide #topLogo img { min-height: 10px; max-height: 32px; } body.cashierrelated #wrapper { margin-top: 67px; background-color: var(--cashier-bg); } body.cashierrelated #topBar:after { display: none; } body.cashierrelated #topBar > .container { max-width: 1150px; margin: 0 auto; } .columnwrapper .halfwidth { flex-basis: 50%; } .formRow.double div { flex-basis: 50%; } .formInner textarea { width: 27em; } /*.labelInfo { visibility: hidden; display: none; }*/ /*.selectArea, .selectAreaSpecial { flex-wrap: nowrap;}*/ .selectArea ul { /*flex: 0 0 300px;*/ /*flex: 0 0 40%;*/ flex-flow: column; } .selectArea.vertical ul li:after { visibility: hidden; } .selectArea ul li:last-child:after { visibility: hidden; } .selectArea.vertical li.active { background-color: #d3d3d3; position: relative; } .selectArea.vertical li.active label { background-color: transparent; border-bottom: 0; border-left: 2px solid var(--activeSelectionColor); } /*.selectArea.vertical li.active:after { left: 100%; top: 50%; transform: translateY(-50%); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(211, 211, 211, 0); border-left-color: #d3d3d3; border-width: 15px; visibility: visible; }*/ #jsRatingsBtn { text-align: left; justify-content: flex-start; } #jsRatingsBtn span { display: inline; text-decoration: underline; margin-left: 5px; } ul.checked.green li:before { color: #82b440; } ul.checked.green li { padding-left: 25px; color: #333; } #postalInput { width: 80%; margin: 1.3em auto; } .button.bigBuy { width: 80%; box-shadow: 1px 2px 0 #000; } .model-chooser .select-wrapper { flex: 1 1 200px; } .gallery-thumbs .swiper-slide .mediawrapper { padding: 5px; width: 90px; } #cashierCart .cashier-form table th.col3.tableTotal { margin-top: 0; } #cashierCart .cashier-form .toolbar .cartRemove { position: relative; border: 0; cursor: pointer; background-color: transparent; margin-top: -5.5em; } } /* Search */ #search01-suggestions-wrapper { /*display: flex;*/ width: 100%; top: 100%; left: 0; right: 0; position: absolute; z-index: 100; background-color: #fff; height: auto; max-height: calc(100vh - 165px); overflow-y: auto; visibility: hidden; } #search01-suggestions-wrapper.active { visibility: visible; } .suggestions-data-wrapper { display: flex; flex-wrap: wrap; align-self: flex-start; } .suggestions-data-wrapper h3, .suggestions-data-wrapper strong { flex-basis: 100%; background-color: whitesmoke; padding: 7px 15px; font-weight: 600; font-size: .9em; } .suggestions-data { width: 100%; } .suggestions-data ul { display: flex; flex-wrap: wrap; } .suggestions-data ul li { position: relative; display: flex; flex-basis: 100%; border-bottom: 1px solid #e3e3e3; padding: 10px; min-height: 60px;} .suggestions-data ul li.showall { position: sticky; bottom: 0; background-color: #f8f8f8; z-index: 2; width: 100%; border-top: 1px solid #9d9d9d; } .suggestions-data ul li .image { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; z-index:2; } .suggestions-data ul li .data { align-items: end; display: flex; width: 100%; padding-left: 5px; } .suggestions-data ul li .data a.sugProdName { flex: 1; position: absolute; left: 0; height: 100%; top: 0; width: 100%; padding: 10px 75px 10px 60px; z-index:1; font-size: .9em; } .suggestions-data ul li .data a.sugProdName span.highlight { color: #000000; font-weight: 600; } .suggestions-data ul li .data a.sugProdName:hover, .suggestions-data ul li .data a.sugProdName:focus-visible { background-color: #fbfbfb; } .suggestions-data ul li .data .sugProdId { color: #ccc; font-size: .9em; z-index: 2; } .suggestions-data ul li .data .sugProdPrice { margin-right: 0; margin-left: auto; font-size: 1.1em; font-weight: 600; z-index: 2; } #search01-categories-data ul { gap: 10px; display: flex; margin: 10px; } #search01-categories-data ul li, #search01-manufacturer-data ul li { display: inline-flex; flex-basis: auto; background-color: #f7f7f7; height: auto; border-radius: 20px; border: 0; font-size: .9em; padding: 5px; } .chkRdoArea [type=radio]:checked, .chkRdoArea [type=radio]:not(:checked) { position: absolute; opacity: 0; width: 1em; height: 1em; top: 25px; } .chkRdoArea [type=radio]:checked + label, .chkRdoArea [type=radio]:not(:checked) + label { position: relative; padding-left: 35px; cursor: pointer; font-weight: normal; } .chkRdoArea [type=radio]:checked + label:before, .chkRdoArea [type=radio]:not(:checked) + label:before { content: ''; position: absolute; left: 10px; top: 50%; width: 19px; height: 19px; border: 2px solid var(--rdoBorderColor); border-radius: 100%; background: var(--rdoBgColor); transform: translateY(-50%); } .chkRdoArea [type=radio]:checked + label:after, .chkRdoArea [type=radio]:not(:checked) + label:after { content: ''; width: 9px; height: 9px; background-color: var(--activeSelectionColor); position: absolute; top: 50%; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; left: 15px; transform: translateY(-50%); } .chkRdoArea [type=radio]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .chkRdoArea [type=radio]:checked + label:after { opacity: 1; transform: scale(1) translateY(-50%); } .chkRdoArea [type=radio]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; transform: scale(1) translateY(-50%); } .chkRdoArea [type=checkbox]:checked, .chkRdoArea [type=checkbox]:not(:checked) { position: absolute; opacity: 0; width: 1em; height: 1em; top: 25px; } .chkRdoArea [type=checkbox]:checked + label, .chkRdoArea [type=checkbox]:not(:checked) + label { position: relative; cursor: pointer; margin-right: 35px; font-weight: normal; background-color: #dadada; border-radius: 20px; padding: 5px 10px; color: #000; } .chkRdoArea [type=checkbox]:checked + label .markupText { font-size: 0 } .chkRdoArea [type=checkbox]:checked + label .markupText:after { content: attr(data-selected-text); font-size: .9rem; } .chkRdoArea [type=checkbox]:checked + label { background-color: var(--activeSelectionColor); color: #fff; } .chkRdoArea [type=checkbox]:checked + label:before, .chkRdoArea [type=checkbox]:not(:checked) + label:before { pointer-events: none; content: ''; position: absolute; /*left: 10px;*/ right: -30px; top: 50%; width: 25px; height: 25px; border: 2px solid var(--rdoBorderColor); border-radius: 0; background: var(--rdoBgColor); transform: translateY(-50%); } .chkRdoArea [type=checkbox]:checked + label:after, .chkRdoArea [type=checkbox]:not(:checked) + label:after { content: ''; width: 25px; height: 25px; background-color: var(--activeSelectionColor); position: absolute; top: 50%; border-radius: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; /*left: 15px;*/ right: -30px; transform: translateY(-50%); outline: 3px solid #fff; outline-offset: -4px;} .chkRdoArea [type=checkbox]:not(:checked) + label:after { opacity: 0; } .chkRdoArea [type=checkbox]:checked + label:after { opacity: 1; /*-webkit-transform: scale(1); transform: scale(1);*/ } .chkRdoArea [type=checkbox]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; } .expandContent[aria-hidden = true] { display: none; } .expandContent { display: flex; } .userLists .expandContainer { display: flex; flex-wrap: wrap; border: 1px solid #ccc; margin-bottom: 10px; position: relative;} .userLists .expandButton { position: relative; display: flex; align-items: center; flex-basis: 100%; background-color: #fff; padding: 15px; cursor: pointer; transition: background-color .3s ease-in-out, color .3s ease-in-out; border: 0; border-bottom: 1px dotted #a3a3a3; } .userLists .expandButton:after, .userLists .expandButton:after { content: " "; width: 30px; height: 30px; font-size: 20px; font-weight: 600; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 330 330' %3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease, background-color .3s ease-in-out; right: 0; display: inline-flex; margin-right: 0; margin-left: auto;pointer-events: none; border: 1px solid #000; border-radius: 100%; } .userLists .expandButton[aria-expanded=true] { background-color: #292929; color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .userLists .expandButton[aria-expanded=true]:after, .userLists .expandButton[aria-expanded=true]:after{transform: rotate(-180deg); background-color: #fff;} .userLists .expandButton:hover, .userLists .expandButton:focus-visible { background-color: #454545; color: #fff; } .userLists .expandButton:focus-visible { outline: 1px solid #454545; outline-offset: 2px; } .userLists .expandButton:hover:after, .userLists .expandButton:focus-visible:after { background-color: #fff; } .userLists .expandButton svg { max-height: 20px; width: auto; margin-right: 12px; /* fill: #fff; */ border-right: 1px solid #979797; padding-right: 13px; } .userLists .expandButton[aria-expanded=true] svg { fill: #fff; } .userLists .expandButton:hover svg , .userLists .expandButton:focus-visible svg { fill: #fff; } .userLists .created { font-size: .6rem; color: #909090; position: absolute; top: 13px; left: 47px; } .userLists .name { margin-top: 10px; } .userLists .expandContent[aria-hidden = true] { display: none; } .userLists .expandContent { flex-wrap: wrap; background-color: #fff; flex-basis: 100%; } .userLists ul.prodRow { display: flex; flex-wrap: wrap; width: 100%; border-left: 1px solid #cacaca; border-right: 1px solid #cacaca; margin-left: 0; } .userLists ul.prodRow li { display: flex; flex-wrap: wrap; flex-basis: 100%; justify-content: space-between; align-items: center; border-bottom: 1px solid lightgrey; padding: 20px; transition: background-color .3s ease-in-out; } .userLists ul.prodRow li.inactive form { filter: grayscale(1); opacity: .6; pointer-events: none; position: relative;} .userLists ul.prodRow li.inactive .inactive { position: absolute; z-index: 1; font-size: 1.3em; background-color: #333; padding: 15px; color: #fff; left: 50%; transform: translateX(-50%); } .userLists ul.prodRow li form { display: flex; flex-wrap: wrap; flex-basis: 100%; justify-content: space-between; align-items: center; } .userLists ul.prodRow li:hover { background-color: #f7f7f7; } .userLists ul.prodRow li .prodRowImage { isolation: isolate; display: flex; align-items: center; justify-content: center;flex-basis: 100%; margin-right: 1rem; } .userLists ul.prodRow li .prodRowImage a { display: flex; width: 100%; align-items: center; outline: 2px solid transparent; transition: outline-color .3s ease-in-out; } .userLists ul.prodRow li .prodRowImage a:focus-visible { outline-color: #000; } .userLists ul.prodRow li .prodRowImage img { max-height: 60px; mix-blend-mode: multiply; } .userLists ul.prodRow li .prodRowInfo { /*flex: 1;*/ font-size: .9rem; padding-right: 0; flex-basis: 52%;} .userLists ul.prodRow li .prodRowInfo h3 { font-weight: 600; margin-bottom: 6px !important; font-size: .9em !important; } .userLists ul.prodRow li .prodRowInfo .packageSize { font-size: .8rem; } .userLists ul.prodRow li .prodRowInfo .prodno { color: #828282; font-size: .8rem; padding: 9px 0; } .userLists ul.prodRow li .prodRowQuantity { flex: 1; } .userLists ul.prodRow li .prodRowQuantity .rowPrice { font-size: .8rem; padding-top: 3px; padding-left: 25px; } .userLists ul.prodRow li .prodRowQuantity .rowInner { justify-content: flex-start; } .userLists ul.prodRow li .prodRowBuyAction { position: relative; flex: 1; } .userLists ul.prodRow li .prodRowBuyAction .button-confirm { font-size: .9rem; padding: 4px 15px; order: 2; } .userLists ul.prodRow li .prodRowBuyAction .chkRdoArea { order: 3; /*position: absolute; right: -5px; top: -70px;*/ } .userLists ul.prodRow li .prodRowBuyAction .prodRowRemove { border: 0; display: flex; align-items: center; background-color: transparent; cursor: pointer; margin-left: 40px; } .userLists ul.prodRow li .prodRowBuyAction .prodRowRemove svg { max-height: 22px; width: auto; } .userLists ul.prodRow li .prodRowBuyAction .labelInner { width: 40px; display: inline-flex; justify-content: center; } .userLists ul.prodRow li .rowInner { display: flex; flex: 0; align-items: center; justify-content: space-between; } .userLists ul.prodRow li .rowInner .qty { width: 45px; height: 35px; text-align: center; margin-right: 10px; } .userLists ul.prodRow li .rowInner .qty::-webkit-outer-spin-button, .userLists ul.prodRow li .rowInner .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .userLists ul.prodRow li .rowInner .qty[type=number] { -moz-appearance: textfield; } .userLists .prodRowFooter { display: flex; flex-wrap: wrap; flex-basis: 100%; justify-content: flex-end; margin: 10px 0; } .userLists .prodRowFooter hr { width: 100%; height: 0; background-color: transparent; border: 0; } .btnCheckAll { display: flex; align-items: center;cursor: pointer; padding: 5px 15px; border-radius: 20px; background-color: var(--activeSelectionColor); color: #fff; position: relative; border: 0; margin: 10px 5px 0 0; } .btnCheckAll:after { bottom: 100%; left: 50%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(7, 112, 207, 0); border-bottom-color: var(--activeSelectionColor); border-width: 10px; margin-left: -10px; } .btnCheckAll .icon { width: 28px; height: 28px; fill: #fff; margin-right: 10px; background-color: #01549d; border-radius: 100%; padding: 3px; display: inline-flex; align-items: center; justify-content: center; } .btnCheckAll svg { max-height: 16px; width: auto; fill: #fff; } .btnAddAll { align-items: center; display: flex; margin-top: 20px; font-weight: normal !important; flex-wrap: wrap; justify-content: center; } .btnAddAll .icon { width: 28px; height: 28px; margin-right: 10px; background-color: #c9ac13; border-radius: 100%; padding: 3px; display: inline-flex; align-items: center; justify-content: center; } .btnAddAll svg { max-height: 16px; width: auto; fill: #3e3400; } .btnAddAll:disabled { opacity: 0.5; cursor: not-allowed;} .btnAddAll .name { padding: 0 4px; font-weight: 600; margin: 0;} @media (min-width: 768px) { .userLists ul.prodRow li { flex-wrap: nowrap; } .userLists ul.prodRow li .prodRowImage { flex-basis: 60px; } .userLists ul.prodRow li .prodRowBuyAction { margin-right: 0; margin-left: auto; flex: 1; } .userLists ul.prodRow li .rowInner { justify-content: flex-end; } .userLists ul.prodRow li .prodRowBuyAction .button-confirm { order: unset; margin-right: 30px;} .userLists ul.prodRow li .prodRowBuyAction .chkRdoArea { order: unset; position: relative; right: auto; top: auto;} .userLists ul.prodRow li .prodRowInfo { padding-right: 0; flex-basis: 47%; } .userLists ul.prodRow li .prodRowQuantity { flex: 1; } .userLists ul.prodRow li .prodRowQuantity .rowInner { justify-content: flex-start; } .btnCheckAll { margin: 10px 22px 0 0; } .btnAddAll { margin-right: 22px; } } #footerContent .expandContainer, .informationpage .expandContainer { margin-bottom: 20px; } #footerContent .expandContent h2, #footerContent .expandContent h3, #footerContent .expandContent h4, .informationpage .expandContainer h2, .informationpage .expandContainer h3, .informationpage .expandContainer h4 { flex-basis: 100%; } #footerContent button, .informationpage .expandContainer > button { /*width: 100%; background-color: #5a5a5a; color: #fff; cursor: pointer; padding: 10px 14%; font-size: 1.1rem; font-weight: 600; border-radius: 20px; border: 0; justify-content: center; display: flex; align-items: center;*/ width: 100%; background-color: transparent; color: #fff; cursor: pointer; padding: 10px 0; font-size: 1.1rem; font-weight: 600; border-radius: 20px; border: 0; /* justify-content: center; */ display: flex ; align-items: center; border-bottom: 1px solid #606060; border-radius: 0;} #footerContent button[aria-expanded="true"], .informationpage .expandContainer > button[aria-expanded="true"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0; /*background-color: #9a491c; color: #fff;*/ } #footerContent button:focus-visible { outline-offset: 4px; } .informationpage .expandContainer > button:focus-visible { outline-offset: 4px; } #footerContent .expandContent[aria-hidden="false"], .informationpage .expandContainer .expandContent[aria-hidden="false"] { background-color: transparent; color: #fff; padding: 1em 0; border-radius: 0 0 13px 13px; } .informationpage .expandContainer .expandContent[aria-hidden="false"] { background-color: #e6e6e6; } #footerContent .expandContent[aria-hidden="false"] { /*padding: 30px 30px 0 30px;*/ flex-wrap: wrap;} #footerContent .expandContent[aria-hidden="false"] a, .informationpage .expandContainer .expandContent[aria-hidden="false"] a { color: #3ca5f2; } #footerContent .expandContent p { width: 100%; } .infopages { width: 100%;} #footerContent button span, #footerContent .expandContent { font-size: 1.1em; } .informationpage .expandContainer > button span { position: relative; display: inline-flex; } #footerContent button { position: relative; } #footerContent button span, .informationpage .expandContainer > button span { position: absolute; right: 32px; } #footerContent button span:before, #footerContent button span:after, .informationpage .expandContainer > button span:before, .informationpage .expandContainer > button span:after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background-color: #fff;transition: transform 0.2s ease-in-out; } #footerContent button span:before, .informationpage .expandContainer > button span:before { transform: translate(-50%, -50%) rotate(0deg); } #footerContent button span:after, .informationpage .expandContainer > button span:after { transform: translate(-50%, -50%) rotate(90deg); } #footerContent button[aria-expanded="true"] span:before, .informationpage .expandContainer > button[aria-expanded="true"] span:before { transform: translate(-50%, -50%) rotate(0deg); } #footerContent button[aria-expanded="true"] span:after, .informationpage .expandContainer > button[aria-expanded="true"] span:after { transform: translate(-50%, -50%) rotate(0deg); } /*noinspection CssNonIntegerLengthInPixels*/ @media (max-width: 767.98px) { #footerContent .first-heading, .informationpage .expandContainer .first-heading { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } } @media (min-width: 768px) { #footerContent .first-heading, .informationpage .expandContainer .first-heading { display: block; } #footerContent button, .informationpage .expandContainer > button { display: none; } #footerContent .expandContent[aria-hidden = true], .informationpage .expandContainer .expandContent[aria-hidden = true] { display: block; } #footerContent .expandContent[aria-hidden="false"], .informationpage .expandContainer .expandContent[aria-hidden="false"] { background-color: transparent; color: #f6f1e5; padding: 0; border-radius: 0; } } .km-dialog { margin: auto; width: 96%; max-width: 620px; max-height: 90vh; padding: 30px; border: none; border-radius: 5px; opacity: 0; transition: opacity .2s ease; box-shadow: -8px 0 29px rgba(0,0,0,.35); } .km-dialog::backdrop { /*backdrop-filter: blur(4px);*/ background-color: rgb(0 0 0 / .4); opacity: 0; transition: opacity .2s ease; } .km-dialog form { margin: -15px 0; } .km-dialog.km-dialog-100 { height: 100%; } .km-dialog.km-dialog-100 form { position: absolute; inset: 0 0 0 0; margin: 40px; overflow: auto; } .km-dialog.open, .km-dialog.open::backdrop { opacity: 1 } .km-dialog-ok, .km-dialog-cancel, .km-dialog-other { min-width: 165px; cursor: pointer; } .km-dialog input:not([type=radio],[type=checkbox]) { height: 38px; width: 100%; padding: 5px; margin-top: 5px; } .km-dialog-header { font-weight: 600; font-size: 1.2rem; padding: 10px 0; } .km-dialog-title { text-align: left; } .km-dialog-body { margin: 15px 0; } .km-dialog-body p { margin-bottom: 10px; } .km-dialog-body ul { list-style-type: disc; margin-left: 1em; } .km-dialog-body ul li { padding: 2px 0; } .km-dialog-footer { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-evenly; margin: 30px 0; } .km-dialog-close { border: none; background-color: #fff; height: 30px; line-height: 30px; position: absolute; right: 8px; text-align: center; top: 8px; width: 30px; z-index: 10000; cursor: pointer; } .km-dialog-close:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #000000; content: ""; font-size: 1.2em; line-height: 27px; transition: all 200ms ease 0s; cursor: pointer; background-size: 15px; background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 492 492' style='enable-background:new 0 0 492 492;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872 c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872 c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052 L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116 c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952 c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116 c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .km-dialog-close:hover:after, .km-dialog-close:focus:after { transform: rotate(90deg); } .km-dialog .button:focus-visible { outline-offset: 2px; } .km-dialog .button-confirm { background-color: var(--positive-contrast); color: #fff; } .km-dialog .button-confirm:hover, .km-dialog .button-confirm:focus-visible { background-color: var(--positive-contrast-hover); } .km-dialog.popupDontForget.popupDontForget { width: fit-content; max-width: 80%; } .km-dialog.popupDontForget form > h3 { font-weight: 600; color: #35cb08; padding: .5em 0 1em 0; border-bottom: 2px solid #818181; margin-bottom: .5em; } .km-dialog.popupDontForget form > h3 .popupProdName { color: #000; } .km-dialog.popupDontForget form .cashier-button { text-align: center; margin: 20px 0; display: flex; justify-content: space-around; align-items: center; padding: 0 15px; } #data-attributes-wrapper { position: relative; font-family: Helvetica, Arial, sans-serif; flex-direction: column; background-color: #fefefe; border: 1px solid #dfdfdf; padding: 10px 17px 17px; display: flex; border-radius: 4px; margin-top: 10px; } #data-attributes-wrapper h3 { font-weight: 600; margin-bottom: 14px; font-size: 1.1em; padding-top: 8px; } #data-attributes-wrapper.loading::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%); } #data-attributes-wrapper.loading::after{ background-color: rgba(255,255,255,.4); background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='rgb(222 222 222 / 60%)' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E"); animation: fadein 1s; background-repeat: no-repeat; } #data-attributes { display: flex; width: 100%; flex-direction: column; counter-reset: li; list-style-type: none; } #data-attributes li {display: flex; flex-direction: column; margin-bottom: 5px; position: relative; padding-left: 40px;} #data-attributes li:last-child { margin-bottom: 0; } #data-attributes li.disabled {pointer-events: none; opacity: .3;} #data-attributes li.disabled input[type="radio"]:checked + label { background-color: #009300; border-color: var(--button-default-color); } #data-attributes li:before { content: counter(li); counter-increment: li; width: 20px; border-radius: 50%; color: #c1c1c1; text-align: center; position: absolute; left: 0; top: -1px; font-size: 28px; } #data-attributes h4 { display: flex; width: 100%; padding: 5px 0 10px; font-size: .9em; align-items: center;} #data-attributes h4 .unit { font-size: .9em; font-weight: normal; padding-left: 3px; } #data-attributes .attribute-wrapper { display: flex; flex-wrap: wrap;} #data-attributes .attribute { display: flex; margin: 0 10px 10px 0; } #data-attributes label { font-size: .8em; transition: all .2s ease-in-out; display: flex; flex: auto; vertical-align: middle; align-items: center;justify-content: center;text-align: center;cursor: pointer;background-color: #fff;border: 2px solid var(--button-action-color);color: var(--default-text-color);padding: 5px 10px;border-radius: 20px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin-right: 8px; } #data-attributes label:last-of-type { margin-right: 0; } #data-attributes input[type="radio"] { opacity: 0; position: absolute; } #data-attributes input[type="radio"]:focus-visible + label { outline: 2px solid #333; outline-offset: 3px;/* Only keyboard */ } #data-attributes input[type="radio"]:checked + label { border-color: var(--button-action-color); background-color: var(--button-action-color); color: #fff; transform: scale(1.1); /*box-shadow: 0px 2px 6px #ccc;*/ /*box-shadow: 0 2px 0 #007b3d*/ } /*#data-attributes input[type="radio"]:hover:not(:checked) + label { border-color: var(--button-default-color); background-color: #fff; transform: scale(1.1); box-shadow: 0 2px 0 #007b3d} */ #data-attributes input[type="radio"]:hover:not(:checked) + label { border-color: var(--button-action-color); background-color: #fff; transform: scale(1.1);} .possible + label { border:1px solid red;} .impossible, .impossible + label{ pointer-events: none; opacity: .3; } #data-attributes .impossible + label { border-color: #858585;} #data-attrib-result { border-top: 1px dotted #ccc; background-color: #f7f7f7; padding: 10px; margin: 5px -17px -17px; } #attributeSummary { background-color: #ededed; margin: 5px -17px -5px; padding: 0 20px; position: relative; } #attributeSummary:after { bottom: 100%; left: 75px; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border: 10px solid rgba(237, 237, 237, 0); border-bottom-color: #ededed; margin-left: -10px; } #btnResetAttributes { font-family: Helvetica, Arial, sans-serif; font-weight: 700; background-color: #fff; padding: 10px 20px 10px 13px; border-radius: 20px; display: inline-flex; align-items: center; width: max-content; cursor: pointer; color: #333; transition: background-color .3s ease-in; margin: 17px 0 17px auto; border: 2px solid #333; } #btnResetAttributes:focus, #btnResetAttributes:hover { background-color: #e4e4e4; outline: none; transition: background-color .3s ease-out;} #btnResetAttributes .ico { max-height: 20px; width: auto; margin-right: 8px; transition: transform .5s ease-in-out;} #btnResetAttributes:hover .ico, #btnResetAttributes:focus .ico{ transform: rotate(180deg); transform-origin: center; transition: transform .5s ease; } #extraOptions { display: none; position: relative; padding-left: 40px; margin: 20px 0 0 0; border-top: 1px solid #e7e7e7; padding-top: 15px; } #extraOptions.show { display: block;} #extraOptions:before { content: attr(data-step); counter-increment: li; width: 20px; border-radius: 50%; color: #c1c1c1; text-align: center; position: absolute; left: 0; top: 14px; font-size: 28px; } #extraOptions ul { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; } #extraOptions li { margin: 5px 0; flex-basis: 100%; } #extraOptions label { color: var(--default-text-color); padding: 8px 8px 8px 40px; border: 2px solid var(--button-default-color); border-radius: 20px; font-weight: 600; font-size: .8em; } #extraOptions .customRadios [type="radio"]:checked + label:before, #extraOptions .customRadios [type="radio"]:not(:checked) + label:before { left: 7px; top: 7px; } #extraOptions .customRadios [type="radio"]:checked + label:after, #extraOptions .customRadios [type="radio"]:not(:checked) + label:after { top: 13px; left: 13px;} #extraOptions .customRadios [type="radio"]:checked + label { background-color: #009300; color: #fff; box-shadow: 0 2px 0 #007b3d;} .customRadios [type="radio"]:checked, .customRadios [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .customRadios [type="radio"]:checked + label, .customRadios [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 23px; display: flex; align-items: center; color: #666; } .customRadios [type="radio"]:checked + label:before, .customRadios [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 23px; height: 23px; border: 2px solid var(--button-default-color); border-radius: 100%; background: #fff; } .customRadios [type="radio"]:checked + label:before { border-color: #007b3d; } .customRadios [type="radio"] + label { transition: all .2s ease-in-out; } .customRadios [type="radio"]:hover + label {transform: scale(1.02);} .customRadios [type="radio"]:not(:checked):hover + label:after { background-color: #ccc; opacity: 1; transform: scale(1); } .customRadios [type="radio"]:checked + label:after, .customRadios [type="radio"]:not(:checked) + label:after { content: ''; width: 11px; height: 11px; background: #009300; position: absolute; top: 6px; left: 6px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .customRadios [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .customRadios [type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } .customRadios [type="radio"]:focus-visible + label { outline: 2px solid #333; /* Only keyboard */ } .modalRightClose .closeText { font-size: .8em; margin-right: 8px; } @keyframes fadein { from { opacity: .4; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes menuSlideIn { from { transform: translate3d(-100px,0,0); /*z-index: 0*/ opacity: 0.3 } to { transform: translate3d(0,0,0); opacity: 1 /*z-index: 1; visibility: visible;*/ } } @keyframes menuSlideInSecond { from { transform: translate3d(-50px, 0, 0); opacity: 0.3; /*z-index: 0*/ } to { transform: translate3d(0,0,0); opacity: 1; /*z-index: 1; visibility: visible;*/ } } @keyframes menuSlideOut { from { transform: translate3d(0,0,0); /*z-index: 1;*/ } to { transform: translate3d(calc(var(--modal-width) * -1),0,0); /*z-index: 0; visibility: hidden;*/ } } @keyframes spin { to { transform: rotate(359deg); } } @keyframes grow { to { width: 14px; height: 14px; margin-top: 0; right: 13px; } } @keyframes bounceInBottom { 0% { transform: translate3d(0, 300%, 0) } 58% { transform: translate3d(0, -27px, 0) } 73% { transform: translate3d(0, 12px, 0) } 88% { transform: translate3d(0, -8px, 0) } } @keyframes spiner { to { border-top-color: #ec407a; transform: rotate(360deg); } } @keyframes shakeshake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); background-color: #000; } 50% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); background-color: #AF150D; } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background-color: #000; } } @keyframes bounceWithRotFix { 0%, 20%, 50%, 80%, 100% { transform: translateX(0) rotate(180deg); } 40% { transform: translateX(-20px) rotate(180deg); } 60% { transform: translateX(-10px) rotate(180deg); } } @keyframes bounceWithRotFixBack { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(15px); } 60% { transform: translateX(5px); } } .tempFocusWrapper { position: relative; width: 100% } .ajaxTempFocus { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; } .ajaxTempFocus + div { z-index: 1; } .ajaxTempFocus:focus { /*outline: 3px dotted #727272;*/ outline-offset: 3px; border-radius: 7px; } .ajaxTempFocus span { position: absolute; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; overflow: hidden; } .ajaxTempFocus.specialPosition { width: 1px; height: 1px; position: fixed; top: 0; right: 0; left: auto; } body.cashierrelated #topLogo img { padding-left: 0; } @media (forced-colors: active) { .productListContainer article .catProdImage img, .productImage img { mix-blend-mode: normal; } .search-form-new .icon svg, .search-form-new .icon:focus svg { fill: #fff; } #topFavourite.favourites-text.active .dyn-favourites-count { background-color: transparent; } table { border: 1px solid; } table tr { border: 1px solid; } label:after, label span:after { forced-color-adjust: none !important; background-color: #fff !important; } .jsToggleComment, .jsToggleCoupon { border: 1px solid; } .attrRefInner.hex { forced-color-adjust: none !important; } } .hiddenCashierContent:not(.active) { visibility: hidden !important; opacity: 0 !important; transition: opacity 0.3s, visibility 0.3s !important; height: 0; overflow: hidden; } .freightSelectionNotice { display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column; /*color: #fff;*/ padding: 15px; gap: 10px; font-size: 1.1em; text-align: center; margin-top: 0; } .freightSelectionNotice svg { width: 40px; height: 40px; margin-top: -20px; /*fill: #fff;*/ } .bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-10px); transform: translateY(-10px); } 60% { -moz-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }