/* Copyright (C) Kodmyran AB All Rights Reserved */ @media (min-width: 768px) { body.prevent-scroll { position: fixed; width: 100%; } } @media (max-width: 767.98px) { body.prevent-scroll { /*touch-action: none;*/ overflow: hidden; overscroll-behavior: none; } } /* 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; } } .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: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 .container { display: flex; align-items: center; padding: 20px 20px; } #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.hide { display: none !important; } #skiplinks { left: 10px; position: absolute; top: 6px; z-index: 9999; } #skiplinks a { display: block; position: absolute; top: -500px; background-color: #fff; color: #393939; } #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {background-color: #000; color: #fff; display: inline-block; font-weight: bold; left: 0; padding: 10px; position: absolute; top: 0; white-space: nowrap; } #skiplinksFilter { position: absolute; } #skiplinksFilter a { position: absolute; height: 0; width: 0; overflow: hidden; } #skiplinksFilter a:focus, #skiplinksFilter a:hover, #skiplinksFilter a:active {background-color: #000; color: #fff; display: inline-block; font-weight: bold; left: 0; padding: 10px; white-space: nowrap; position: relative; height: auto; width: auto; overflow: auto; } [inert] > * { opacity: .4; } 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; } /* .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); background-repeat:repeat-y; } .sitemapHline { background:url(../images/hline.gif); background-repeat:repeat-x; } .requiredPill { color: #fff; font-size: .7rem; font-weight: bold; display: inline-block; line-height: normal; padding: 3px 5px; vertical-align: middle; border-radius: 14px; background-color: #8b420b; } .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: 400; 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: 400; 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) { font-size: 1.2rem; margin-bottom: 10px; padding-top: 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: bold;} .standardPageContainer p { padding: .6em 0;} .standardPageContainer h2 + p { padding-top: 0; } #userPage #myPageWrapper { background-color: #f0f0f0; padding: 15px 0; } .formRow ul li { list-style-type: none; } .formRow ul { list-style-type: none; margin-left: 0; } .infotext { background-color: #fff; } #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%; border: solid transparent; 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: bold; 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; } #backbutton { display: inline-block; background-color: #41434e; width: 50px; height: 50px; text-align: center; border-radius: 4px; position: fixed; bottom:105px; right: 10px; transition: background-color .3s, opacity .5s; opacity: 0; z-index: 1000; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 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; } .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.6); 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 15px;} #top-banner h1 { margin: 10px 0 30px 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: 150px; 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%,rgb(255 255 255) 100%); z-index: 1; } .bodytext { margin: 20px 0 30px 0; padding: 15px; } .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: 5px; transform:translate3d(-50%,0,0); z-index: 2;} .bodytext .cpToggle 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; } .bodytext .cpToggle button:hover, .bodytext .cpToggle button:focus { background-color: #fff; color:#000; outline: 2px solid #000; outline-offset: 2px;} .bodytext .cpToggle button:focus-visible { outline: 1px solid #000;} .bodytext p { padding: 8px 0;} .bodytext p:first-of-type { padding-top: 0; } .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; -webkit-transform: scale(1.5); -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: #ddd;color: #2d2d2d; width: 100%;font-size: .9em; margin-top: auto; } #footer a {color: #2d2d2d; padding: 5px 0;margin: 5px 0; /* a11y test -> */ min-height: 44px; display: block; align-items: center; width: 100%; } #footer a:hover {text-decoration: underline;} #footer a:focus-visible { text-decoration:underline; outline: 1px solid #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: #c3c3c3; padding: 30px 0; display: flex; flex-direction: column; flex-basis: 100%; align-items: center; justify-content: center; } #footerNewsletter h3 { color: #2d2d2d; 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; } @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: #C72D25; } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background-color: #000; } } #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: 0; } #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: #2973A8; 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; padding: 10px; } #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: #2d2d2d; font-size: 1em;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; color: var(--default-text-color); flex-basis: 100%;} #footerBottom .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; width: 100%; padding: 20px; } @media (max-width: 1500px) { #footerContent, #footerNewsletter { padding: 15px; } } .spotWishlist { position: absolute; top: 8px; right: 11px; 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: 1px; right: 1px; } .spotWishlist span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .spotWishlist button svg { fill: #d2d2d2; } .spotWishlist button { cursor: pointer; border: none; background: transparent; /*filter: drop-shadow(0 0 0.12em #333);*/ width: 48px; height: 48px; } .spotWishlist button[aria-pressed=true] { /*filter: drop-shadow(0 0 0.12em #333);*/ } .spotWishlist button:focus, .spotWishlist button[aria-pressed=true] svg { fill: #b10000; } .spotWishlist button:active { outline: none; } .spotWishlist use { outline: none !important; } .productImageContainer .spotWishlist { right: 5px; } .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 .heart-flip {--base: 16px;--duration: .6s;--active: #24615d;--inactive: #fff;width: var(--base);height: calc(var(--base) + var(--base) / 2);border-radius: calc(var(--base) / 2) calc(var(--base) / 2) 0 0;position: relative;transform-origin: 50% 66.66%;transform-style: preserve-3d;transform: rotate(var(--rotate, -45deg));transition: background var(--duration), transform var(--duration) ease;background: var(--heart-background, var(--inactive));/* box-shadow: 0 0 17px rgb(0 0 0 / 50%); */filter: drop-shadow(0px 0px 0px #24615d) drop-shadow(0px 0px 0px #24615d) drop-shadow(0px 0px 1px #24615d) drop-shadow(0px 0px 1px #24615d);} .heart .heart-flip:before, .heart .heart-flip:after { content: ""; width: calc(var(--base) / 2); height: var(--base); border-radius: var(--pseudo-border-radius, calc(var(--base) / 2) 0 0 calc(var(--base) / 2)); position: absolute; left: var(--pseudo-left, -50%); transform-origin: var(--pseudo-origin, 100%) 50%; bottom: 0; background: var(--heart-background, var(--inactive)); filter: brightness(var(--pseudo-filter, 50%)); transform: translateX(1%) rotateY(var(--pseudo-rotate, 90deg)) translateZ(0); transition: background var(--duration), transform var(--duration) ease, filter var(--duration); } .heart .heart-flip:after, .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 { background: none; border: none; padding: 0; transform: scale(var(--button-scale, 1)) translateZ(0); transition: transform 0.2s; } .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; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wishList svg use { /*fill: transparent;*/ fill: rgba(255,255,255,.4); stroke: var(--default-text-color); stroke-width: 1.2; transition: all 0.33s ease; } .wishList[aria-pressed=true] svg use { fill:var(--button-alternative-color); stroke: var(--default-text-color); opacity: 0; transform: scale(0.33); transform-origin: center; } .wishList[aria-pressed=true] svg use { stroke: transparent; } .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: 30px; height: 30px; overflow: visible !important; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-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: 10px; margin-bottom: 40px; contain: content; /* [contain] for better scroll performance */} .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; transition: all .2s ease-in-out; } .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 .symbolContainer { padding-left: 5px; max-width: 150px; } .productListContainer article .symbol { transform: scale(.8); margin: 2px 0 1px 0; transform-origin: top left; } .productListContainer article .catProdImage { 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: center; margin-bottom: 30px; 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: bold; font-size: .9rem; border-radius: 100%; width: 40px; height: 40px;} .productListContainer article .configSpot {position: absolute; top: 35px; background-color: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: 10px; text-transform: uppercase; 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 { /*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; } .productListContainer article:hover img { transform:translate3d(0,0,0) scale(.9); /*-webkit-backface-visibility: hidden;*/ -webkit-transform: translate3d(0,0,0) scale(.9); } .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 { display: flex; align-items: baseline; justify-content: center; min-height: 60px; font-size: 1.1em; font-weight: 600; flex-direction: row; flex-wrap: wrap; margin-bottom: 10px; } .productListContainer article .productPrice .pricePrefix { font-size: .7em; } .productListContainer article .from_price { text-align: center; width: 100%; height: 15px; font-size: .6em; color: #575757; margin-top: 3px; } .productListContainer article .priceOld { color: #3c3c3c; font-weight: 500; margin-right: 10px; display: flex; justify-content: center; align-items: baseline; 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 { /*position: absolute; right: 5px; bottom: 5px;*/ font-size: .7em; /*height: 35px;*/ line-height: 18px; font-weight: 100; } .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 .productBuy { display: flex; justify-content: center; align-items: center; } .productListContainer article .productBuy form > div { display: flex; align-items: center; justify-content: center; position: relative;} .productListContainer article .productBuy .button { padding: 10px 0 !important; display: flex; justify-content: center; align-items: center; width: 145px; } .productListContainer article .productBuy .button span { display: block; width: 100%; height: 100%; } .productListContainer article .productBuy .button.selectlink { z-index: 0; } .productListContainer article .productBuy .button.notifyme { position: relative; background-color: #fff; color: var(--button-default-color); border: 2px solid var(--button-default-color); } .productListContainer article .productBuy .button.notifyme:hover, .productListContainer article .productBuy .button.notifyme:focus-visible { background-color: #edf9f3; } .productListContainer article .productBuy .button:focus-visible { outline: var(--default-focus-visible-outline);; outline-offset: 2px; } .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; } .productListContainer article h3 { font-size: .9em; padding: 0; margin-bottom: 10px; font-weight: 600; text-align: center; padding: 0 5px;} .productListContainer article h3 { 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 { outline-offset: -2px; 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*/ } .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 .btnloader:after { border-left-color: #838383; border-top-color: #838383; position: absolute; left: auto !important; top: auto !important; right: 29px !important; } .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: 15px; } .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: bold; margin-top: 5px; } .horizontalScrollWrapper { position: relative; } .horizontalScrollWrapper.active:after, .horizontalScrollWrapper.active:before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 15px; pointer-events: none; width: 8%; } .horizontalScrollWrapper.active:not(.fullNext):after { right: 0; background-image: linear-gradient(to right, rgba(255,255,255,0), white 85%); } .horizontalScrollWrapper.active:not(.fullPrev):before { left: 0; background-image: linear-gradient(to left, rgba(255,255,255,0), white 85%); } .horizontalScrollWrapper h2 { border-bottom: 1px solid #ccc; margin-bottom: 20px; } .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;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%); background-color: transparent; border: 0; } .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; } #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; background: linear-gradient(#fcfcfc, #f6f6f6); padding: 20px; flex-direction: column; overflow: auto; background-color: rgb(217 217 217); box-shadow: 0 1px 4px rgba(0,0,0,.25); } #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;} #notit::-webkit-scrollbar{width:8px} #notit::-webkit-scrollbar-track{background:#f9df98} #notit::-webkit-scrollbar-thumb{background:rgba(203, 122, 0, .9);border-radius:12px;transition:background .25s ease} #notit::-webkit-scrollbar-thumb:hover{background:rgba(203, 122, 0, 1)} #notit::-webkit-scrollbar{width:10px} #prodMisc #notit { max-height: 400px; margin-bottom: 10px; } #prodMisc #notit h2 { border-bottom: 0; margin-bottom: 0; padding-bottom: 5px; } .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; -webkit-transform: rotate(45deg); 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: 10px; 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; height: 65px; line-height: 65px; width: 65px; position: relative; text-align: center; top: 0; z-index: 1; left: 0; font-size: 1em; margin-bottom: 15px; border-radius: 100%; } .spotSale em {display: none;} .spotSale .smalltext { font-size: .85em; } .spotNew { position: relative;width: 80px; height: 50px; line-height: 50px; display: block; background-color: #1937d3; color: white; font-size: 15px; z-index: 2; text-align: center; text-transform: uppercase; pointer-events: none; transform: scale(.8); transform-origin: top left; } .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: -webkit-max-content; width: -moz-max-content; 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-tabs { width: 100%; } .tabs-tab-list { display: flex; list-style: none; margin: 0; padding: 0; font-size: 1em; } .tabs-tab-list li { margin: 0; } .tabs-trigger { border-bottom: none; color: #232323; display: none; margin: 0 5px 0 1px; padding: 15px 20px; text-decoration: none; border-bottom: 2px solid #bfbfbf; font-weight: 600; cursor: pointer;} .tabs-trigger:hover { border-bottom: none; color: var(--default-text-color); } .tabs-trigger.is-selected, .tabs-trigger.is-selected:hover, .tabs-trigger.is-selected:focus { border-bottom: 2px solid #000; color: var(--default-text-color); } .tabs-trigger:active { outline: none; } .tabs-panel { display: block; margin: 0; padding: 0; } .tabs-panel:not(:first-of-type) { /*border-top: 1px solid #dcdcdc;*/ } .tabs-panel { /*border-top: 1px solid #dcdcdc;*/ margin-bottom: 1px; } .tabs-panel:last-child { /*border-bottom: 1px solid #dcdcdc;*/ } .tabs-panel.is-hidden .content { display: none; } .tabs-panel .content { padding: 10px; margin-top: -1px; background-color: transparent;} .tabs-panel:active, .tabs-panel:focus { outline: none; } .is-initialized.tabs-allowed .tabs-panel { display: inherit; } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 10px; background-color: var(--accordion-bg-color); font-weight: 600; font-size: 1em; width: 100%; border: none;} .accordion-trigger:focus {outline: none;} .accordion-trigger:focus-visible {outline: 1px solid #000;} .accordion-trigger-icon { pointer-events: none; } .accordion-trigger h2 { font-size: 1em; border: none; font-weight: 600; padding: 0; color: #fff; } .accordion-trigger-icon { display: inline-block; float: right; background-color: #fff; border-radius: 100%; padding: 6px; } .accordion-trigger-icon svg { margin: 0; } .accordion-trigger header { pointer-events: none;} .accordion-trigger[aria-expanded=true] .toggleIcon:before{ transform: rotate(90deg); } .accordion-trigger[aria-expanded=true] .toggleIcon:after{ transform: rotate(180deg); } .accordion-trigger h2 { pointer-events: none; } .toggleIcon { position: relative; width: 17px; height: 17px; } .toggleIcon:before, .toggleIcon:after{ content: ""; position: absolute; background-color: var(--accordion-bg-color); transition: transform 0.25s ease-out; } .toggleIcon:before{ top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; } .toggleIcon:after{ top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; } [aria-expanded=true] .vert { display: none; } .label--open, .label--close { display: block; border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .label--close { display: none; } .is-open .label--open { display: none; } .is-open .label--close { display: block; } /* 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:15px; height: 15px; fill: #fff;} /* Index related */ #indexCampaign { } #indexCampaign .campaigninfo { background-color: #c70000; padding: 10px; color: #fff; } #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%;} #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;} @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 { } #indexUspArea, #indexUspArea2 { margin: 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; } #indexUspArea .uspRow1, #indexUspArea2 .uspRow1, #indexLowerUspArea .uspRow1 { display: flex; flex-wrap: wrap; 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; justify-content: space-between; align-items: stretch; /*gap: 10px; margin: 10px 0;*/ } #indexUspArea .uspRow2 .uspPlate, #indexUspArea2 .uspRow2 .uspPlate{ flex: 1 1 50%; /*min-width: 200px;*/ } #indexUspArea .uspRow2 .uspPlate img, #indexUspArea2 .uspRow2 .uspPlate img { width: 100%; height: auto; } #indexImagesFromCategories { } #indexImagesFromCategories h2 { border-bottom: 1px solid #ccc; margin-bottom: 20px; } #indexImagesFromCategories > .container { background-color: white; margin: 0 auto; } #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: bold; 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;*/ height: inherit; flex-basis: fit-content;} #indexImagesFromCategories .catItem .header { word-wrap: break-word; word-break: break-word; color: #4a4a4a; max-width: 16.1rem; line-height: 2rem; } #indexImagesFromCategories h3 { font-size: 1em; font-weight: 700; padding: 0; } #indexTopSellers{ } #indexTopSellersFromCategories { margin: 20px 0;} #indexTopSellersFromCategories .catLink {font-size: .9em;margin-top: -6px;margin-bottom: 5px;} #indexTopSellersFromCategories .catLink a {background-color: #1a74e9;border-radius: 10px;padding: 2px 9px;color: #fff;} #indexTopSellersFromCategories .catLink a:hover {background-color: #20659f;} #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);} #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.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; } body.slideInCartFromRight #miniCart .inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 0;} body.slideInCartFromRight #miniCart .inner > h3 { text-align: center; padding: 10px 0 15px; background-color: #f7f7f7; margin-bottom: 8px; font-weight: bold; } 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 .dialog-backdrop.minicart { /*z-index: 10;*/ z-index: 12; } @media (min-width: 900px) { body.slideInCartFromRight #miniCart { max-width: 500px; } } .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; } #miniCart:after { bottom: 100%; right: 77px; border: solid transparent; 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 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: 20%; } #miniCart .cashier-form table td.col2 { align-items: center; display: flex; flex: 1; flex-wrap: wrap; } #miniCart .cashier-form table td.col3 { align-items: center; justify-content: right; display: flex; width: auto; font-size: .9em; } #miniCart .cashier-form .name { font-size: .8em; font-weight: 600; padding-bottom: 15px; width: 100%; } #miniCart .cashier-form .cartQtyWrapper { width: 100%; display: flex; align-items: center; } #miniCart .cashier-form .cartQtyWrapper .cartQty { font-size: .9em; margin-right: 30px; display: flex; flex: 0 0 79px; } #miniCart .cashier-form button.cartPlus, #miniCart .cashier-form button.cartMinus { cursor: pointer; border: 0; display: flex; flex: none; background-color: #6a6a6a; border-radius: 100%; margin-right: 20px; 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 {outline: 2px solid #000; } #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: 10px 0 0 auto; } #miniCart .cashier-form button svg { max-width: 19px; max-height: 19px; fill: #9c9c9c;} #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: bold; } /* 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; } @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); } } .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; color: #191919; font-size: .9em; align-items: center; word-break: break-word; border-bottom: 1px solid #afafaf;} #prodDocuments ul li a:hover, #prodDocuments ul li a:focus { color: #c72d25; border-bottom: 1px solid #c72d25;} #prodDocuments ul li a:focus-visible {outline: 1px solid #000;} #prodDocuments ul li:hover svg { fill: #c72d25; } #prodRelCat { margin: 0 0 25px 0; } #prodRelCat h2 { padding: 15px 0 5px 4px; } #prodRelCat ul { margin: 0 5px; padding: 0; list-style-type: none; } #prodRelCat ul li { display: list-item; position: relative; padding: 6px 0; color: #666; 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 { color: #191919; border-bottom: 1px solid #afafaf; } #prodRelCat ul li a:hover, #prodRelCat ul li a:focus { border-bottom: 1px solid #c72d25; } #prodRelCat ul li a:focus-visible {outline: 1px solid #000;} #prodRelCat ul li:hover svg { fill: #c72d25; } #prodRelCat ul li:hover { color: #e06262; } .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; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none;border-color: transparent; border-top-color: #e7e7e7; border-width: 10px; margin-left: -10px; } .bracketPrice:hover:after { } .bracketNotice { background-color: #e8e8e8; padding: 8px 10px; font-size: .8em; } .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: bold; } .toggleButton { border: 0; border-bottom: 1px solid transparent; background-color: transparent; margin: 6px 5px; color: #c72d25; font-weight: 600; } .toggleButton:focus, .toggleButton:hover { border-bottom: 1px solid #c72d25; 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: #014A82; } #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: #ececec; } table.resp.zebra tbody tr:nth-of-type(even) { background: #f5f5f5; } 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; } .coll { display: flex; flex-wrap: wrap; gap: 4px; max-height: none !important; } .extrainfo { margin: 0 0 20px 0;} .extra_row { margin-bottom: 5px; padding-left: 5px; } .extrainfo .extra_head { width: 25%; display: inline-block; min-width: 120px; } .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 h3 { flex-basis: 100%; text-align: center; font-weight: bold; margin-bottom: 10px; } .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: 16px; } #prodReviews h2, #footerReviews h2 { display: flex; width: 100%; justify-content: center; } #prodReviews .colRew, #footerReviews .colRew { display: flex; justify-content: center; flex: 1; flex-basis: 100%; position: relative; } #prodReviews .colRew.revAnsw { background-color: #f1f1f1; margin-top: 10px;} #prodReviews .colRew.revAnsw:after { bottom: 100%; left: 50%; border: solid transparent; 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;} #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; color: #7f7f7f; display: 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; } #prodReviews .lRevName, #footerReviews .lRevName { font-weight: 600; height: 20px; overflow: hidden; margin-top: 10px; } #prodReviews .lRevName h3, #footerReviews .lRevName h3 { font-weight: 600; } #prodReviews .lRevGrade, #footerReviews .lRevGrade { font-size: .8em; margin: 10px 0 0; } #prodReviews .lRevText, #footerReviews .lRevText { font-size: 0.9em; line-height: 1.3em; position: relative; padding: 10px 20px; text-align: left; } #prodReviews .lRevDate, #footerReviews .lRevDate { font-size: .8em; color: #545454; padding-top: 10px; } #footerReviews .lRevDate { display: block; } #divTellAFriend { background-color: #f7f7f7; } .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; } .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; } /* 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: #c72d25; 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; 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; text-align: center; } .popupProductInfo em { font-weight:600; font-style:normal; display:block; } .popupProductInfo p { margin-top:10px; } .popupProductInfo #notifyEmail { display: block; height: 38px; margin: auto; width: 100%; padding: 5px; margin-top: 5px; } .popupProductInfo .popupProdImage { display: flex; justify-content: center; align-items: center; } .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); } @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; } } .button { font-family: Arial, sans-serif; background-color: hsl(0 0% 60% / 1); background-repeat: repeat-x; background-size: 100% auto; color: var(--button-default-text-color); cursor: pointer; 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: 2px solid #000; } .button:active { outline: none; -moz-user-select: none; transform: translate3d(0,2px,0);; } .button.bigBuy { padding: 10px 20px !important; font-weight: 500; font-size: 1.1em; width: 100%; height: 45px; position: relative; overflow: hidden; letter-spacing: .03em; } .button.bigBuy:focus-visible { outline: var(--default-focus-visible-outline);; outline-offset: 2px; } .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: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; } .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 0s; } .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; outline-offset: -6px; text-decoration: none; transition: background-position 0.1s linear 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: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.active a[aria-current = true] { background-color: var(--button-alternative-color); 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; } /* 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%; } 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; -o-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; } } /* Print */ @page { margin: .5cm; } @media print { .noprint, .cpToggle, .fadeout, .noPrint, #topMenu, .assoc, .anchorLink, .productBuy, #jsBuyBtn, .swiper-pagination, .swiper-button-next, .swiper-button-prev, .col1, .helpttext, #productInfoConditions, #printIcon, #breadcrumbs, #prodRelCat, #prodAssoc, #prodOthers, #prodSimilars, #footerNewsletter, #backbutton, #btnToggleTable, #leasing-preview-widget, #d9h8mo1ih1go1f8pq9bu6, body.stickyheader #topBar:after, .stickywrap, .prodpagelinks { 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; } } /* 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; -moz-box-sizing: border-box; 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%; -ms-transform-origin: 0 0; -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 * { -moz-box-sizing: border-box; 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 { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { -webkit-transform: translate(50%, 50%); 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 { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { -webkit-transform: translate(0, 50%); 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 { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: 120%; } .noUi-horizontal .noUi-origin > .noUi-tooltip { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); left: auto; bottom: 10px; } .noUi-vertical .noUi-origin > .noUi-tooltip { -webkit-transform: translate(0, -18px); 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; -webkit-transform: translateZ(0); -o-transform: translateZ(0); -moz-transform: translateZ(0); -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%; } .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; } .gallery-thumbs .swiper-slide.swiper-slide-active .mediawrapper { border-color: #000; } .gallery-thumbs .swiper-slide .mediawrapper { height: 100%; border: 1px solid #d3d3d3; background-color: #fff; padding: 15px; width: 90px; display: flex; align-items: center; justify-content: center; } .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;} .no_click_overlay_object:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 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; } #ajaxLoader.no_click_overlay:before { top: 50%; } #basketItems.no_click_overlay:before { top: 5px; width: 30px; height: 30px; } @-webkit-keyframes spiner { to { border-top-color: #ec407a; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spiner { to { border-top-color: #ec407a; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .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 15px #3c96b7; -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; } @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); } } /* ------------------ 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; } #qcTypeChoice { } #qcTypeChoice label { font-weight: normal; padding-left: 0; } #qcTypeChoice label .labelText { z-index: 1; } #qcTypeChoice h3 { text-align: left; font-weight: bold; margin: 10px 0 0 0; padding: 5px 0; font-size: 1em; } .conditions { font-size: 1em; text-align: center; } #cashierChange > .container > form, #cashierPage > .container > form { padding: 15px;} #cashierChange, #cashierPage { max-width: 1150px; margin: 0 auto; } #cashierChange h2, #cashierPage h2 { text-align: left; margin: 0; padding: 30px 0 10px 0; font-size: 1.2em; font-weight: 600;} #cashierChange .cashierSection, #cashierPage .cashierSection{ } #cashierCart { } .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 td a { display: flex; } #cashierCart .cashier-form table th { } #cashierCart .cashier-form table tr { display: flex; background-color: #fff; margin-bottom: 2px; padding: 5px; transition: box-shadow .3s; flex-wrap: wrap; /*border-bottom: 1px solid #b1b1b1;*/ } #cashierCart .cashier-form table tr.summaryrow { margin-bottom: 0; justify-content: flex-end; border: 0;} #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: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%;} #cashierCart .cashier-form .name { flex: 1 0 100%; padding-right: 35px; margin-bottom: 20px; } #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; } #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: 20px; } #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; } #cashierCart .cashier-form .toolbar .cartRemove svg { width: 17px; height: 17px; } #cashierCart .cashier-form .toolbar .cartRemove:focus-visible { outline-offset: 2px; } #cashierCart .cashier-form .mspec { font-weight: 100; margin: 4px 0; background-color: #f8f8f8; padding: 5px 10px; font-size: .7em; border-radius: 10px; } #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%; border: solid transparent; 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%; } #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; } #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; } #qcButtonLink.btnloader svg {opacity: 0; } #qcButtonBack { display: none; justify-content: flex-start; flex-basis: 100%; align-items: center; margin: 0; z-index: 3;} #qcButtonBackLink { padding: 10px !important; font-size: .9em; background-color: var(--button-alternative-color); display: flex; align-items: center; } #qcButtonBackLink:hover, #qcButtonBackLink:focus { background-color: var(--button-alternative-color-hover); } #qcButtonBackLink:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 2px; } #qcButtonBackLink svg {width: 15px; height: 15px; margin-right: 10px; fill: #fff; transition: opacity .3s; transform: rotate(180deg); } .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; align-items: center; padding: 7px 8px 7px; background-color: #f7f7f7; } .qcBonusLevels .bonus_header.inactive { background-color: #f4f4f4; } .qcBonusLevels .bonus_header h3 { font-size: 1em; color: #fff; padding: 5px 10px; background-color: #525050; 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 { display: none; font-size: .9em; font-weight: 600; vertical-align: middle; } .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: 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-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: 400; } } #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-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; } .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); } /* ------------------ 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: bold; } .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: bold; } .selectArea, .selectAreaSpecial { display: flex; flex-wrap: wrap; background-color: var(--selectArea-bg); } .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: #fff; flex: auto; position: relative; } .selectArea ul li label { flex-wrap: wrap; min-height: 66px; display: flex; align-items: center; flex-basis: 100%; cursor: pointer; } .selectArea.vertical ul li label { padding: 15px 0;} .selectArea ul li label .labelImage { margin-right: 0; margin-left: auto;} .selectArea ul li label img { max-width: 50px; max-height: 50px; margin-right: 10px;} .selectArea ul li:not(.active) label:hover{ background-color: #f7f7f7; } .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; } #qcDynamicPayment .selectArea .selectInfo {display: block; } .selectArea .selectInfo p { font-size: .9em; } .selectArea .selectInfo .infoImage { margin: 10px 0 20px; } .selectArea .selectInfo .infoImage img { max-height: 70px; } .selectArea .selectInfo select { width: 100%; max-width: 100%; height: 50px; font-size: 16px; } .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; left: -9999px; } .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: 35px; cursor: pointer; border-bottom: 2px solid var(--inactiveSelectionColor); } .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; -webkit-transform: scale(0); transform: scale(0); } .selectArea [type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .selectArea [type=radio]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .selectArea [type=checkbox]:checked, .selectArea [type=checkbox]:not(:checked) { position: absolute; left: -9999px; } .selectArea [type=checkbox]:checked + label, .selectArea [type=checkbox]:not(:checked) + label { position: relative; cursor: pointer; border-bottom: 2px solid var(--inactiveSelectionColor);} .selectArea ul li [type=checkbox]:checked + label, .selectArea [type=radio]:checked + label { background-color: var(--selectAreaCheckedLabel); border-bottom: 2px solid var(--activeSelectionColor); } .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; } .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; } .labelInfo { color: #505050; font-weight: normal; padding: 10px 70px 0 2px; font-size: .9em; } .qccashier-pay-info { background-color: #f8f8f8; height: 100%; display: flex; flex-direction: column; padding: 15px 15px 15px 25px; } #postalInput {} #postalInputWrapper { background-color: #daf0f5; border: 1px solid #c6e0e6; display: flex; align-items: center; justify-content: center; padding: 20px; margin: 20px 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; } @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) } } @media only screen and (max-width: 1320px) and (min-width: 768px) { body.stickyheader #topArea, body.stickyheader #navbar, #innerWrapper{ padding-left: 10px; padding-right: 10px; } body.stickyheader #topContent { padding-left: 20px; padding-right: 20px; } } @media (min-width: 768px) { #mobilecheck { display: none; } .onlyBig {display: block !important; } .onlySmall {display: none !important; } #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: 20px 0 40px 0; padding: 0; } .bodytext .cpToggle { left: 5px; bottom: 5px; transform:translate3d(5px,0,0); z-index: 2;} .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: 10px; } .productListContainer .highlight { grid-column-end: span 2; grid-row-end: span 2; } .productListContainer .highlight { display: flex; overflow: hidden; } .productListContainer .highlight .catProdImage { height: 703px; } .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; } /* Avoid flicker when initilizing page ... */ .accordion-trigger h2 { color: #000; color: #232323; margin: 0 5px 0 1px; padding: 15px 20px; text-decoration: none; border-bottom: 2px solid #bfbfbf; font-weight: 600; } .accordion-trigger { padding: 0; background-color: transparent; color: #000; margin-bottom: -2px;} .accordion-trigger-icon { display: none; } .tabs-panel .content { /*margin-top: 10px; padding: 20px;*/ } .tabs-allowed .accordion-trigger { display: none; } .tabs-allowed .tabs-trigger { display: block; } .tabs-allowed .tabs-trigger:focus {outline: none;} .tabs-allowed .tabs-trigger:focus-visible {outline: 1px solid #000; background-color: #fff;} .tabs-allowed .tabs-panel { display: none; } .tabs-allowed .tabs-panel.is-hidden { display: none; } .tabs-allowed .tabs-panel { border-top: 2px solid #dbdbdb; } .tabs-allowed .tabs-tab-list { margin-bottom: -2px; } /*.tabs-panel:last-child { border: 0;}*/ #indexImagesFromCategories .catItem { flex: 0 0 20%; max-width: 20%; } #miniCart { width: 100%; max-width: 710px;} .prodpagelinks li { flex-basis: auto; } #footerReviews .colRew, #prodReviews .colRew { flex: 0 0 25%; max-width: 25%; } #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%; border: solid transparent; 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.3em; flex-basis: auto; width: 10%; } #cashierCart .cashier-form .structuralcontent { font-size: .9em;} #cashierCart .cashier-form .name { flex: 1 0 40%; padding-right: 35px; } #cashierCart .cashier-form .unitPrice { flex: 0 0 20%; margin-bottom: 0; } #cashierSummary { padding: 20px 20% 0; font-size: 1.5em; } #loginContainer #loginForm form .col1 { margin-right: 40px; } #qcButtonBack { display: flex; } #topBar #qcButtonBack, #topBar #qcButtonBackLink { margin-right: -200px; } body.cashierrelated #topArea {display: none; } body.cashierrelated #topSearch {display: none; } body.cashierrelated #topContact {display: none; } body.cashierrelated #topLogo { justify-content: center; } body.cashierrelated #topMenu { display: none; } body.cashierrelated #topBar { height: 100px; min-height: auto; transition: all .3s ease; } body.cashierrelated.stickyheader #topBar.hide { padding: 15px 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: 44px; margin-top: 14px } body.cashierrelated #wrapper { margin-top: 100px; background-color: #eee; } body.cashierrelated #topBar:after { display: none; } body.cashierrelated #topBar > .container { max-width: 900px; 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:after { border-right: 2px solid #ededed; position: absolute; top: 50%; transform: translateY(-50%); content: ""; right: 0; height: 50%; } .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; } } /* Search */ #search01-suggestions-wrapper { /*display: flex;*/ width: 100%; top: 100%; left: 0; right: 0; position: absolute; z-index: 100; background-color: #fff; height: 100vh; 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; height: 60px;} .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 { 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; left: -9999px; } .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; -webkit-transform: scale(0); transform: scale(0); } .chkRdoArea [type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .chkRdoArea [type=radio]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .chkRdoArea [type=checkbox]:checked, .chkRdoArea [type=checkbox]:not(:checked) { position: absolute; left: -9999px; } .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%; 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: bold; 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 { flex-basis: 49%; 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%; border: solid transparent; 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: bold; 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 { flex-basis: auto; 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: bold; border-radius: 20px; border: 0; justify-content: center; display: flex; align-items: center;} #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: #fff; color: #000; padding: 10px; border-radius: 13px; border-top-right-radius: 0; border-top-left-radius: 0; } .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: #000; } #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); } @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: #000; padding: 0; border-radius: 0; } } .km-dialog { margin: auto; width: 100%; max-width: 620px; max-height: 90vh; padding: 30px; border: none; border-radius: 5px; opacity: 0; transition: opacity .2s ease; } .km-dialog::backdrop { backdrop-filter: blur(4px); background-color: rgb(0 0 0 / .6); 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; /* padding: 13px; color: white; background-color: #1fbb6c; border: none; transition: background-color 0.2s ease; */ } /* .km-dialog-ok:hover { background-color: #13a95d; } .km-dialog-cancel { background-color: #c3c3c3; } .km-dialog-cancel:hover { background-color: #a3a3a3; } .km-dialog-other { background-color: #1f98bb; } .km-dialog-other:hover { background-color: #1a8dae; } */ .km-dialog input:not([type=radio],[type=checkbox]) { height: 38px; width: 100%; padding: 5px; margin-top: 5px; } .km-dialog-title { font-weight: 600; margin: 30px 0; text-transform: uppercase; } .km-dialog-body { margin: 30px 0; } .km-dialog-row { display: flex; 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; } /* @media (prefers-color-scheme: dark) { :root { --wrapper-bg-color: #000; --mobile-bg-cover: #000; --selectArea-bg: #000; --selectAreaCheckedLabel: #000; --cashier-bg: #000; } body, #wrapper, body.stickyheader #topBar, #prodMisc { background-color: #000; color: #fff; } a, #topAreaLeft, #topAreaLeft a, #topAreaLeft li:before, #productInfoConditions, .priceRegular{ color: #fff; } .search-form-new .icon, #productPageUpper, #prodInfo .bracketPrices, #prodInfo .productBuy input, .storerating { background-color: #000; } #topLogin a, #basketItems.hasitems .iconwrapper .basketQty, #btnToCashier a, .button.bigBuy { background-color: #fff; color: #000; } #topFavourite.favourites-text.active svg, #basketItems svg, #prodRelCat ul li svg{fill: #fff; color: #000; } #topFavourite.favourites-text.active .dyn-favourites-count { color: #000; background-color: transparent; } #topLogo img { filter: invert() } #indexImagesFromCategories > .container, #ajaxNL .nlSubmit, .bracketNotice, #brandRow .brndName, #brandRow .brndSeries, .storerating .averageRating, .cover, input.button-confirm, button.button-confirm, a.button-confirm, span.button-confirm { background-color: #000 !important; color: #fff !important; } #indexImagesFromCategories .catItem img { filter: invert()} #indexImagesFromCategories h2, #indexImagesFromCategories .catItem a, #indexImagesFromCategories .catItem .header, #prodRelCat ul li, #prodRelCat ul li a, #footerNewsletter h4, h2, #footerContent h1, #footerContent h2, #footerContent h3, #footerContent h4, #footer a, #footerBottom { color: #fff; } #footerNewsletter { background-color: #282828; color: #fff; } h1, .productListContainer article h2 { color: #000; } #footer { background-color: #1d1d1d; color: #fff; } table.resp.zebra tbody tr:nth-of-type(even) { background: #3c3c3c; } table.resp.zebra:nth-of-type(odd) { background: #5c5c5c; } #productPageUpper .productImageWrapper, #productPageUpper #prodImage, #prodDesc #prodTabs, body.makesticky #prodInfo .productBuy, body.slideInCartFromRight #miniCart .cashierProducts.cashier-form, body.slideInCartFromRight #miniCart, body.slideInCartFromRight #miniCart .inner > h3, #loginContainer, .selectArea ul li, #cashierCart .cashier-form table tr, #qcDynamicCashier .couponwrapper, #qcDynamicCashier .commentwrapper, .qcBonusLevels .innerPad, .qcBonusLevels .qcBonusProduct, .formInner {background-color: #000 !important;} body.slideInCartFromRight #miniCart .miniCartButtns {background-color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartQty {background-color: transparent; } #postalInputWrapper { background-color: #383838; border: 1px solid #ffffff; } .selectArea ul li.active label, .labelInfo { color: #fff;} .catProdInner .cover {background-color: #fff !important;} } */