/* Copyright (C) Kodmyran AB All Rights Reserved */ @media print { .noprint { display: none; } } @page { margin: 0.5cm; } .resize-animation-stopper * { animation: none !important; transition: none !important; animation-play-state: paused !important; transitionDuration: 0 !important;} body.prevent-scroll { overflow: hidden; } section.cookies { position: fixed; left: 0; bottom: 0; right: 0; background: #A92626; opacity: .9; color: #fff; z-index: 999999; font-size: .8em; padding-left: 5px; box-shadow: 0 0 4px 2px rgba(194, 194, 194, 0.5); } section.cookies a { color: #fff; text-decoration: underline; } section.cookies .container { display: flex; align-items: center; padding: 20px 20px; } section.cookies .btn { font-family: Arial, sans-serif; cursor: pointer; border: 0; background-color:#000; padding: 10px 40px; border-radius: 3px; color: #fff; font-size: 16px;} section.cookies.hide { display: none !important; } #skiplinks { left: 10px; position: absolute; top: 6px; z-index: 9999; } #skiplinks a { display: block; position: absolute; top: -500px; } #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; } input::placeholder { color: #d2d2d2; } input:focus::placeholder { color: transparent; } input[type="text"] { -webkit-user-select: text; } .styled-select { overflow: hidden; background: #fff; border: 1px solid #DDDDDD; height: 40px; border-radius:2px; position: relative; } .styled-select select::-ms-expand { display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; } .styled-select select { width: 100%; height: 100%; border: 0; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; appearance: none; padding: 0 10px; padding-right: 35px !important; } .styled-select:after { content: ""; width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: 94%; transition: transform 0.3s ease; display: block; position: absolute; z-index: 1; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; } .styled-select:focus-within::after { transform: translateY(-50%) rotate(180deg); } .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); } body.stickyheader #topBar.hide #topLogo {background-color: #161616 !important;} input[type=text] { -webkit-user-select: text; } .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: #666;} .textLightItalic {color: #7c7c7c;font-style: italic;} .textRight {text-align: right;} .textCenter {text-align: center;} .textLeft {text-align: left;} .dispNone {display: none;} .grey {color: #6b6b6b;} .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; } .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 #993333; background: #f2e7e7; color: #993333; } .error:before { content: '!'; font-size: 40px; font-weight: 400; left: 17px; position: absolute; top: 7%; color: #993333; } .observe { color: #993333; border: 1px dashed #993333; } ul.checked li { display: list-item; position: relative; padding: 2px 0 2px 20px; } ul.checked li:before { content: 'c'; position: absolute; left: 3px; top: -4px; height: inherit; color: #25c793; } .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; position: relative; padding: 8px 0 2px 0; } .standardPageContainer h3 { padding: 1.2em 0 .6em; } #informationPage #contentWrapper { padding: 0 15px; } #mobilecheck { display: block; } #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_innerwrapper .md_switch__toggle { position: relative; cursor: pointer; } .md_switch [type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .md_switch .md_switch_innerwrapper .md_switch__toggle::before, .md_switch .md_switch_innerwrapper .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_innerwrapper .md_switch__toggle::after { background: #4e4e4e; } .md_switch .md_switch_innerwrapper .md_switch__toggle::before { height: 1.3em; width: 3em; border-radius: 0.65em; opacity: 1; } .md_switch .md_switch_innerwrapper .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_innerwrapper .md_switch__toggle { cursor: not-allowed; filter: grayscale(100%); opacity: 0.6; } .md_switch [type=checkbox]:disabled+.md_switch_innerwrapper .md_switch__toggle::after { box-shadow: none; } .md_switch [type=checkbox]:checked+.md_switch_innerwrapper .md_switch__toggle::before { background: #fff; } .md_switch [type=checkbox]:checked+.md_switch_innerwrapper .md_switch__toggle::after{ background: #3B97D8; } .md_switch [type=checkbox]:checked+.md_switch_innerwrapper .md_switch__toggle::after { transform: translate(calc(3em - 100%), -50%); } .md_switch_innerwrapper { display: flex; gap: 5px; flex-direction: column-reverse; } @media (min-width: 720px) { .md_switch { width: auto; padding: 0; margin: 5px 0; background-color: transparent; font-size: .9em; color: #fff; font-weight: normal; } } .dialog-backdrop.active { display: block; z-index: 100;} .dialog-backdrop { background: rgba(0, 0, 0, 0.6); } .dialog-backdrop { display: none; position: fixed; overflow-y: auto; top: 0; right: 0; bottom: 0; left: 0; } #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; } @media (min-width: 720px) { #top-banner .inner { max-height: none; } } .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%,rgba(247, 247, 247, 1) 100%); } .bodytext { margin: 60px 0; } .bodytext.collapsed.expand { max-height: 9999px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); padding-bottom: 50px; } .bodytext .cpToggle { display: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .bodytext .cpToggle button { font-family: Arial, sans-serif; font-weight: 700; border: 0; background-color: #10b1e0; 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: #1498bf; outline: none;} .bodytext .cpToggle button:focus-visible { outline: 1px solid #000;} .bodytext p { padding: 8px 0;} .bodytext p:first-of-type { padding-top: 0; } @media (min-width: 720px) { .bodytext { /*column-count: 2; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: #e2e2e2;*/ } } .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; } .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; } .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; } #sticky-buy { position: fixed; bottom: 0; left: 0; right: 0; box-shadow: 0 -2px 14px 0 rgba(0,0,0,.15); transform: scaleY(0); transition: transform .2s ease; transform-origin: bottom; z-index: 10; background-color: #fff; } #sticky-buy.show { transform: scaleY(1); transition: transform .4s ease; transform-origin: bottom; } #sticky-buy .inner { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 10px; height: 100px; } #sticky-buy .buy-image-cont { display: flex; width: 50px; justify-content: center; align-items: center; } #sticky-buy .buy-image { width: 100%; height: auto; } #sticky-buy .buy-brand { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 20px 0 10px; min-width: 160px; } #sticky-buy .buy-brand h3 { font-size: .7em; font-weight: 400; margin-bottom: 3px; } #sticky-buy .buy-brand h4 { max-height: 45px; font-size: .7em; word-break: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #sticky-buy .buy-actions { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 100px; } #sticky-buy .buy-actions .button { font-size: .9em; width: 100%; } #sticky-buy .buy-actions .priceRegular { font-size: .9em; font-weight: 600; padding-top: 3px; } #footer { content-visibility: auto; contain-intrinsic-size: 630px; display: flex; flex-direction: column; background-color: #161616;color: #d4d4d4;width: 100%;font-size: .9em; margin-top: auto; } #footer a {color: #ccc;padding: 5px 0;margin: 5px 0;} #footer a:hover {text-decoration: underline;color: #c72d25;} #footer a:focus-visible { text-decoration:underline; outline: 1px solid #fff; color: #c72d25;} #footer h3 { margin-top: 15px; font-size: 1.4em; font-weight: 700; } #footerLogos { padding: 20px 0; display: flex; background-color: #343434; } #footerLogos .container { display: flex; justify-content: center; align-items: center; width: 100%; } #footerLogos a { margin: 0 40px; } #footerNewsletter { background-color: #202020; padding: 30px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #footerNewsletter h4 { color: #fff; 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: center; justify-content: center; margin: 0 20%; } #ajaxNL .newsletter-field, #mc-embedded-subscribe-form .newsletter-field { width: 100%; padding: 10px; border: 0; } #ajaxNL .nlSubmit, #mc-embedded-subscribe-form .nlSubmit { border: 0; margin-top: 15px; padding: 10px 20px; border-radius: 30px; background-color: #3b97d8; color: #fff; } #footerContent { padding: 40px 0 0 0; display: flex; } #footerContent .container { display: flex; 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 .fcol.fcol3 a { text-decoration: none; } #footerContent h4 { color: #FFFFFF; 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; margin: 15px 0;} #footerBottom { padding: 40px 0; display: flex; font-size: .9em; color: #9f9f9f; } #footerBottom .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; width: 100%; padding: 20px; } @media (min-width: 720px) { #ajaxNL .newsletter-field, #mc-embedded-subscribe-form .newsletter-field { width: auto; margin-right: 20px; } #ajaxNL .nlSubmit, #mc-embedded-subscribe-form .nlSubmit { margin-top: 0; } #footerContent .container { flex-direction: row; padding: 0; gap: 45px; } #footerContent .container .fcol { width: 25%; } #sticky-buy.show {display: none;} } @media (max-width: 1500px) { #footerContent, #footerNewsletter { padding: 15px; } } .spotWishlist { position: absolute; top: 8px; right: 11px; width: 30px; height: 30px; background-color: transparent; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; z-index: 3; } .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);*/ } .spotWishlist button[aria-pressed="true"] { /*filter: drop-shadow(0 0 0.12em #333);*/ } .spotWishlist button:focus, .spotWishlist button[aria-pressed="true"] svg { fill: #b10000; } .productImageContainer .spotWishlist { right: -10px; } .heart { cursor: pointer; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .heart .heart-flip {--base: 16px;--duration: .6s;--active: #24615d;--inactive: #ffffff;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: #000; stroke-width: 1.2; transition: all 0.33s ease; } .wishList svg use:last-child { fill:#000; stroke: #000; opacity: 0; transform: scale(0.33); transform-origin: center; } .wishList[aria-pressed="true"] svg use { stroke: transparent; } .wishList[aria-pressed="true"] svg use:last-child { 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; } .listProduct .spotWishlist { top: 25px; } .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 { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); grid-gap: 10px; }*/ .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(177px, 1fr)); grid-gap: 10px; } @media (min-width: 538px) { .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); grid-gap: 10px; } } .productListContainer {grid-auto-rows: minmax(0, 407px);} .productListContainer.withbuybuttons {grid-auto-rows: minmax(0, 465px);} .productListContainer article { content-visibility: auto; contain-intrinsic-size: 407px; 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: rgb(0 0 0 / 19%) 0 10px 30px, rgb(0 0 0 / 23%) 0 6px 10px; } .productListContainer.withbuybuttons article { content-visibility: auto; contain-intrinsic-size: 455px; } .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 { position: relative; height: 240px; display: flex; justify-content: center; align-items: center; margin-bottom: 50px; overflow: hidden; /* This is the space we need for the absolute positioned href! (see below) */ } .productListContainer article .catProdImage img { max-height: 240px; width: auto; transition: 0.6s ease; -webkit-backface-visibility: hidden;} .productListContainer article .catProdImage img.config { width: 70%; } .productListContainer article .catProdImage .innerImage { display: flex; flex-direction: column; gap: 17px; } .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 { flex-basis: 100%; justify-content: center;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:hover img { transform:translateZ(0) scale(1.06); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.06); } .productListContainer article .catProdInner { flex: 1; padding: 0 10px 25px 10px; } .productListContainer article .productPrice { display: flex; align-items: baseline; justify-content: flex-end; font-size: .9em; font-weight: 600; flex-direction: row; flex-wrap: wrap; margin-bottom: 3px; } .productListContainer article .productPrice .pricePrefix { font-size: .7em; } .productListContainer article .from_price { text-align: right; width: 100%; height: 16px; font-size: .6em; color: #8b8b8b; } .productListContainer article .priceOld { color: #3c3c3c; font-weight: 500; margin-right: 10px; } .productListContainer article .shortText { font-size: .75em; font-family: 'Contrail One', cursive; 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; font-family: 'Contrail One', cursive; line-height: 18px; font-weight: 100; } .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 .button { padding: 6px 25px !important; width: 100%;} .productListContainer article .productBuy .button.notifyme { position: relative; } .productListContainer article h3 { font-size: .9em; } .productListContainer article a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; padding: 243px 10px 0 10px; } .productListContainer article a span { height: 35px; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .productListContainer article a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 250ms ease; } .productListContainer article a:hover::after, .productListContainer article a:focus::after { content: ""; outline: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .productListContainer article a:focus-visible { outline: 1px solid black; } .productListContainer article a.selectlink { position: relative; top: auto; left: auto; height: auto; width: auto; padding: 5px 15px; } #dealOfTheDay { display: flex; flex-wrap: wrap; } #dealOfTheDay .textArea { display: flex; background-color: #3b97d8; flex-basis: 100%; justify-content: center; align-items: center; color: #fff; padding: 15px; } #dealOfTheDay .dealText { text-align: center;} #dealOfTheDay .dealText h2 { font-size: 1.9em; padding: 0; margin: 0 0 10px 0; text-align: center; } .productListContainerHorizontal { display: flex; flex: 1; } .productListContainerHorizontal article { background-color: #b2d6f0; display: flex; flex: 1; position: relative; padding: 5px; } .productListContainerHorizontal article .catProdImage { display: flex; order: 10; width: 168px; } .productListContainerHorizontal article header { display: flex; order: 20; padding: 15px; } .productListContainerHorizontal article header h3 { font-weight: 600; } .productListContainerHorizontal article .catProdInner { display: flex; order: 30; position: absolute; left: 183px; bottom: 11px; } .productListContainerHorizontal article .catProdInner .productPrice { align-items: center; justify-content: center; display: flex; flex-wrap: wrap; } .productListContainerHorizontal article .catProdInner .productPrice .priceOld { flex-basis: 100%; } .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; } @media (min-width: 720px) { #dealOfTheDay { flex-wrap: nowrap; } #dealOfTheDay .textArea { flex-basis: 50%; } } #notit { display: flex; /*background-color: #fff2cc;*/ background: linear-gradient(#fcfcfc, #d8d8d8); padding: 20px; flex-direction: column; overflow: auto; background-color: rgb(217 217 217); box-shadow: 0 1px 4px rgb(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:rgb(203 122 0 / 90%);border-radius:12px;transition:background .25s ease} #notit::-webkit-scrollbar-thumb:hover{background:rgb(203 122 0 / 100%)} #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; } @media (min-width: 720px) { /*.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(165px, 1fr)); grid-gap: 10px; } .productListContainer .highlight { grid-column-end: span 2; } .productListContainer .highlight { display: flex; overflow: hidden; } #notit { grid-column: auto / span 2; /*grid-row: auto / span 2;*/ grid-row: auto / span 1 } } @media (min-width: 880px) { .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(211px, 1fr)); grid-gap: 10px; } } /* Index related */ @media (max-width: 1111px) { /* This is a bit special, if the list contains 5 elements, hide the last one */ .hideLastMobile article:nth-last-child(n+5) ~ article:nth-last-child(1) { display: none; } /* This is a bit special, if the list contains 10 elements, hide the last two */ .hideLastMobile article:nth-last-child(n+10) ~ article:nth-last-child(1) { display: none; } .hideLastMobile article:nth-last-child(n+10) ~ article:nth-last-child(2) { display: none; } } @media (max-width: 720px) { .hideLastMobile article:nth-last-child(n+10) ~ article:nth-last-child(1) { display: flex; } .hideLastMobile article:nth-last-child(n+10) ~ article:nth-last-child(2) { display: flex; } } /* div:nth-last-child(n+2) ~ div:last-child{ margin-bottom: 40px; } ... the above css will style the last div element only if there exists a container that has at least 2 child divs */ .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: 0; 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; } /* .symbol.symbol_18_4425 { order: 30; z-index: 1; width: 50px; height: 50px; background-image: url("../images/symbol_eco.svg"); background-size: 24px; background-repeat: no-repeat; background-color: rgb(255 255 255 / 80%); border-radius: 100%; background-position: center center; border: 1px solid #39a800; transition: filter 0.5s ease-in-out;} .symbol.symbol_18_4425 .symboltext {display: none;} .symbol.symbol_24_4427 { order: 40; z-index: 1; width: 50px; height: 60px; background-image: url("../images/symbol_fire.svg"); background-size: 24px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid #e67000; background-color: #e67000; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_24_4427 .symboltext {display: none;} */ /* Symbol ESD */ .symbol.symbol_727_72981 { order: 10; z-index: 1; width: 50px; height: 50px; background-image: url("../images/symbol_esd.svg"); background-size: 40px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_727_72981 .symboltext {display: none;} /* Symbol Svenskt */ .symbol.symbol_727_72979 { order: 20; z-index: 2; width: 50px; height: 50px; background-image: url("../images/symbol_swedish.svg"); background-size: 38px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_727_72979 .symboltext {display: none;} /* Symbol Stöld */ .symbol.symbol_727_72980 { order: 30; z-index: 3; width: 50px; height: 50px; background-image: url("../images/symbol_theft.svg"); background-size: 42px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_727_72980 .symboltext {display: none;} /* Symbol brand */ .symbol.symbol_727_72982 { order: 40; z-index: 4; width: 50px; height: 50px; background-image: url("../images/symbol_fire_1.svg"); background-size: 42px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_727_72982 .symboltext {display: none;} /* Symbol garanti */ .symbol.symbol_33_4505 { order: 2; z-index: 2; width: 110px; height: 40px; border-radius: 30px; border-bottom-left-radius: 0; border: 1px solid transparent; background-color: #a99652; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_33_4505 .symboltext { font-size: 30px; line-height: 30px; } .symbol.symbol_33_4505 .symboltext:after { content: "års garanti"; font-size: 12px; width: 40px; display: inline-block; vertical-align: middle; padding-left: 4px; line-height: 12px; margin-top: -4px; } @media (min-width: 720px) { .symbolContainer { max-width: 125px; } } .subscriptionSpot { position: absolute; top: 14px; font-size: .8em; background-color: #ccc; padding: 5px 10px; border-radius: 30px; } .spotSale { display: inline-block; background-color: #ec4c36; 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%; font-family: 'Contrail One', cursive; } .spotSale em {display: none;} .spotSale .smalltext { font-size: .85em; } .spotNew { font-family: 'Contrail One', cursive; position: relative;width: 80px; height: 50px; line-height: 50px; display: block; background-color: #0086aa; color: white; font-size: 15px; z-index: 2; text-align: center; text-transform: uppercase; pointer-events: none; transform: scale(.8); transform-origin: top left; } .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 { font-family: 'Contrail One', cursive; border-bottom: none; color: #666; display: none; margin: 0 5px 0 1px; padding: 15px 20px; text-decoration: none; border-bottom: 2px solid #bfbfbf; font-weight: 600;} .tabs-trigger:hover { border-bottom: none; color: #000; } .tabs-trigger.is-selected, .tabs-trigger.is-selected:hover, .tabs-trigger.is-selected:focus { border-bottom: 2px solid #3b97d8; color: #000; } .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: #fff;} .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: #e6e6e6; font-weight: 600; font-size: 1em; } .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; } .accordion-trigger-icon { display: inline-block; float: right; background-color: #3c3c3c; 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: #fff; 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; } @media (min-width: 720px) { .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;}*/ } /* Medium button */ .mediumButton { background-color: #10b1e0; color: #fff; cursor: pointer; font-size: 0.9em; font-weight: 600; padding: 10px 20px; transition: all 400ms ease 0s; display: inline-block; border-radius: 20px; } .mediumButton:hover, .mediumButton:focus { color: #fff; background-color: #1498bf; } .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: #13507b; border-radius: 100%; color: #fff; text-align: center; transition: all 400ms ease 0s; display: flex; align-items: center; justify-content: center; padding: 10px; } .smallButton a:hover, .smallButton a:focus { color: #fff; background-color: #073653; } .smallButton svg { width:15px; height: 15px; fill: #fff;} #indexCampaign { } #indexCampaign .campaigninfo { background-color: #ec4c36; padding: 10px; color: #fff; } #indexCampaign .campaignbutton { display: flex; justify-content: center; margin: 10px 0; } #indexCampaign .campaignbutton a { background-color: #10b1e0; 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: #1498bf; } #indexSlideShow {} #indexSlideShow img {width: 100%;} .sliderSection { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } .sliderSectionBox { display: flex; width: 100%; overflow: hidden; } .sliderSectionBox img { max-height: 400px; /*width: auto;*/ width: 100%; } .sliderSectionBox > div{ display: flex; width: 100%; overflow: hidden; } .disabled_swiper_button { opacity: 0; cursor: auto; pointer-events: none; } @media (min-width: 720px) { .sliderSectionBox { width: 33.3333%; } } /* .slider_mobile { animation: fadein 1s; } .slider_desktop { animation: fadeout 1.4s; } @media all and (min-width: 900px) { .slider_mobile { animation: fadeout 1.4s; } .slider_desktop { animation: fadein 1s; } } */ #indexSlideShow.slider_mobile { min-height: 210px; } #indexSlideShow.slider_desktop { /*min-height: 520px;*/ } @media only screen and (max-width: 1200px) and (min-width: 720px) { #indexSlideShow.slider_desktop { min-height: auto; } } @media only screen and (min-width: 2300px) { #indexSlideShow.slider_desktop { min-height: 760px; } } #pageIndex { } #indexUspArea, #indexUspArea2 { /*margin: 10px 0;*/ } #indexLowerUspArea { margin: 40px 0; } #indexUspArea .uspPlate p, #indexUspArea2 .uspPlate p, #indexLowerUspArea .uspPlate p {margin: 0; padding: 0; line-height: 0; } #indexUspArea .uspRow1, #indexUspArea2 .uspRow1, #indexLowerUspArea .uspRow1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px; } #indexUspArea .uspRow1 .uspPlate, #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 24%; min-width: 200px; } #indexUspArea .uspRow2 .uspPlate img, #indexUspArea2 .uspRow2 .uspPlate img { width: 100%; height: auto; } #indexImagesFromCategories { } #indexImagesFromCategories h2 { padding-top: 0; } #indexImagesFromCategories > .container { background-color: white; margin: 0px auto; padding: 20px; } #indexImagesFromCategories .catWrapper { display: flex; flex-wrap: wrap; } #indexImagesFromCategories .catItem { flex:0 0 47%; max-width: 47%; margin-bottom: 15px; } #indexImagesFromCategories .catItem a { position: relative; display: flex; flex-direction: column; text-align: center; font-weight: 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 { border-radius: 100%; max-width: 145px; max-height: 100%; /*max-width: 100%; height: auto;*/ /*max-width: fit-content;*/ height: inherit;} #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: #10b1e0; 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: #1498bf;} @media (min-width: 720px) { #indexImagesFromCategories .catItem { flex: 0 0 20%; max-width: 20%; } } #pageIndex h2 { text-align: left; margin-bottom: 19px; padding: 16px; background-color: #161616; color: #fff; } /* Mini cart */ #miniCart { display: none; position: absolute; top: 55%; right: 3px; width: 600px; padding: 0 0 15px 15px; background-color: #fff; box-shadow: 0 1px 4px rgb(50 50 50 / 30%); max-height: 76vh; overflow-y: auto; z-index: 200; overflow: initial; } #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 .cashierProducts.cashier-form { overflow: auto; max-height: 61vh; margin-bottom: 14px; background-color: #fff; padding: 20px 15px 15px 0; } #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; margin-bottom: 20px; border-bottom: 1px solid #b1b1b1; padding-bottom: 10px; } #miniCart .cashier-form table tr:last-of-type { margin-bottom: 0px; } #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: 25%; 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; } #miniCart .cashier-form a.cartPlus, #miniCart .cashier-form a.cartMinus {display: flex; background-color: #9c9c9c; border-radius: 100%; margin-right: 20px; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; } #miniCart .cashier-form a.cartPlus { background-color: #4da96c; } #miniCart .cashier-form a.cartPlus:hover, #miniCart .cashier-form a.cartPlus:focus, #miniCart .cashier-form a.cartMinus:hover, #miniCart .cashier-form a.cartMinus:focus { /*background-color: #1498bf;*/ } #miniCart .cashier-form a.cartPlus:focus-visible, #miniCart .cashier-form a.cartPlus:focus-visible {outline: 1px solid #000; } #miniCart .cashier-form a.cartRemove { border: 2px solid #cbcbcb; border-radius: 100%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin: 10px 0 0 auto; } #miniCart .cashier-form a svg { max-width: 9px; fill: #cbcbcb; } #miniCart .cashier-form a.cartRemove:hover svg { fill: #333; } #miniCart .cashier-form a.cartRemove:hover { border-color: #333; } #miniCart .button-confirm { padding: 10px 20px; margin: 0 5px 5px 0; } .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; } /* 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; /*background-color: rgba(255,255,255,.7); border-radius: 100%; pointer-events: none;*/ } #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 #C72D25; } .axloader .inner.two { right: 0; top: 0; animation: rotate-two 1s linear infinite; border-right: 3px solid #C72D25; } .axloader .inner.three { right: 0; bottom: 0; animation: rotate-three 1s linear infinite; border-top: 3px solid #C72D25; } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } .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; } .prodpagelinks { margin: 5px 0 15px; } .prodpagelinks ul { display: flex; flex-wrap: wrap; gap: 10px; } .prodpagelinks li { flex-basis: 100%; } .prodpagelinks a { padding: 7px 10px 3px; border-bottom: 2px solid #3B97D8; background-color: #3B97D8; border-radius: 20px; color: #fff; font-size: .85em; display: flex; align-items: center; justify-content: center; } .prodpagelinks a:after { content: " "; display: inline-flex; width: 15px; height: 15px; margin-left: 7px; font-size: 20px; font-weight: 600; order:2; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%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); } #prodDocuments { margin-bottom: 25px; } #prodDocuments ul { margin: 5px; padding: 0; list-style-type: none; } #prodDocuments ul li { display: list-item; position: relative; padding: 2px 0; color: #aaa; } #prodDocuments ul li svg { width: 18px; height: 18px; margin-right: 5px; } #prodDocuments ul li a {display: flex; color: #191919; font-size: .9em; align-items: center; word-break: break-word; width: 120px; height: 100px; border: 1px solid #3b97d8; padding: 5px; border-radius: 10px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: .8em;} #prodDocuments ul li a svg { fill: #3b97d8; width: 35px; height: 35px; } #prodDocuments ul li a span { text-align: center; } #prodDocuments ul li a:hover, #prodDocuments ul li a:focus { color: #166399; } #prodDocuments ul li a:focus-visible {outline: 1px solid #000;} #prodDocuments ul li:hover svg, #prodDocuments ul li a:focus-visible svg { fill: #166399; } #prodRelCat { margin: 0 0 25px 0; background-color: #f9f9f9; padding: 10px; } #prodRelCat h2 { padding: 15px 0 5px 4px; } #prodRelCat ul { margin: 5px; padding: 0; list-style-type: none; } #prodRelCat ul li { display: list-item; position: relative; padding: 6px 0; color: #aaa; word-break: break-all; } #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 { color: #c72d25; 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; } .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; left: 0; width: 100%; height: 100%; } #prodAttributes { margin-bottom: 25px; } table.resp.zebra { width: 100%; border-spacing: 0; margin: 5px 0 } table.resp.zebra:nth-of-type(odd) { background: #f8f8f8; } table.resp.zebra tbody tr:nth-of-type(even) { background: #ededed; } table.resp.zebra th { padding: 8px 14px; } table.resp.zebra th { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; 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:first-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; } .extrainfo { font-size: .8em; margin: 0 0 20px 0;} .extra_row { margin-bottom: 5px; padding-left: 5px; } .extrainfo .extra_head { width: 100px; display: inline-block; } @media (min-width: 720px) { .prodpagelinks li { flex-basis: auto; } } #prodReviews .container, #footerReviews .container { display: flex; flex-wrap: wrap; position: relative; background-color: #fcfcfc; padding: 16px; } #prodReviews header, #footerReviews header { 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%; } @media (min-width: 720px) { #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; } } #jsRatingsBtn { display: flex; align-items: center; justify-content: center; 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 .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; } #prodReviews .lRevDate, #footerReviews .lRevDate { display: none; font-size: .7em; color: #666; } #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 li { display:-moz-inline-stack; display:inline-block; *display:inline; position: relative; width: .9em; color: #ccc; font-size: 1.6em; line-height: .9em; vertical-align: bottom; } .rating.grade-1 li:nth-child(-n+1){ color: #f9d100; } .rating.grade-2 li:nth-child(-n+2){ color: #f9d100; } .rating.grade-3 li:nth-child(-n+3){ color: #f9d100; } .rating.grade-4 li:nth-child(-n+4){ color: #f9d100; } .rating.grade-5 li:nth-child(-n+5){ color: #f9d100; } /* 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; } /* Popup - Notify */ #notifyPopup { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #notifyPopupPane { margin:15px; padding-bottom: 8px; } #notifyPopupPane em { font-weight:600; font-style:normal; display:block; text-transform: uppercase; } #notifyPopupPane p { margin-top:10px; } #notifyPopupPane #notifyEmail { display: block; height: 38px; margin: auto; width: 100%; padding: 5px; margin-top: 5px; } #notifyPopupPane #notifyPopupPaneButtonBar { margin:auto; margin-top:20px; text-align: center; } #notifyPopupPane #notifyPopupPaneButtonBar input { margin-left:3px; margin-right:3px; } #notifyPopupPane #notifyPopupOk { padding: 6px 20px; } /* popupProductInfo */ #popupProductInfo { display: none; position: fixed; background-color: #fff; padding: 10px; top: 50%; transform: translate3d(0,-50%,0); right: 0; left: 0; margin-right: auto; margin-left: auto; height: auto; width: auto; max-width: 800px; min-width: 300px; max-height: 80vh; overflow-y: auto; overflow-x: hidden; } #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 #notifyPopupPaneButtonBar { margin-top:20px; display: flex; justify-content: space-between; } #popupProductInfo #notifyPopupPaneButtonBar input { width: 46%; } #popupProductInfo #notifyPopupOk { padding: 6px 20px; } #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 .ajaxPopupContent.productPopup { 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; } } /* ajaxPopupWindow */ #ajaxPopupWindow { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #ajaxPopupClose, .ajaxPopupClose { background-color: #fff; height: 30px; line-height: 30px; position: absolute; right: 2px; text-align: center; top: 2px; width: 30px; z-index: 10000; cursor: pointer; } #ajaxPopupClose:hover:after, #ajaxPopupClose:focus:after, .ajaxPopupClose:hover:after, .ajaxPopupClose:focus:after{ color: #000; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #ajaxPopupClose:after, .ajaxPopupClose:after { color: #767676; content: "x"; font-size: 1.2em; height: 100%; left: 0; line-height: 30px; position: absolute; top: -1px; transition: all 200ms ease 0s; width: 100%; cursor: pointer; } .ajaxPopupHeader { font-weight: 600; margin-bottom: 5px; margin-top: 5px; text-align: center; text-transform: uppercase; } .ajaxPopupContent { padding:5px; } .ajaxPopupContent p:first-child { padding:0; margin:0; } /* ajaxPopupWindow */ #ajaxPopupNotify { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } .button { background-color: #eee; background-repeat: repeat-x; background-size: 100% auto; border-color: #C8C8C8 #C8C8C8 #BBBBBB; border-style: solid; color: #fff !important; cursor: pointer; display:-moz-inline-stack; display:inline-block; *display:inline; line-height: 24px; padding: 6px 10px; text-align: center; text-decoration: none; vertical-align: middle; text-shadow: none; border: 0; -webkit-appearance: none; outline:none; position: relative; border-radius: 4px; z-index: 2; transition: all 200ms ease 0s; } .button:focus-visible { outline: 1px solid #000; } .button:active { outline: none; -moz-user-select: none; transform: translateY(2px); } .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.button-confirm.buybutton, .button.button-confirm.selectlink { padding: 12px 25px !important; font-weight: 500; font-size: 1.1em; position: relative; overflow: hidden; letter-spacing: .03em; } .button.button-confirm.jsAddOk: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 { 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='utf-8'%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: 4px; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.jsAddOk, .button.jsAddFail, .button.jsAddOk:hover, .button.jsAddFail:hover { color: transparent !important; } .button.jsAddOk { color: transparent; 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: #333333; color: #ffffff !important; background-position: 0 -15px; outline-offset: -6px; text-decoration: none; transition: background-position 0.1s linear 0s; } .button.button-disabled, .button:disabled { background-color: #EEEEEE; border-color: #E1E1E1; background: none repeat scroll 0 center transparent; box-shadow: none; cursor: default; font-style: italic; text-shadow: none; } input.button-confirm, button.button-confirm, a.button-confirm { font-family: 'Contrail One', cursive; background-size: 100% auto; border-color: #165b16 #165b16 #165b16; color: #fff !important; background-color: #3AA40E; font-size: 1em; } input.button-confirm:hover, input.button-confirm:focus, button.button-confirm:hover, button.button-confirm:focus, a.button-confirm:hover, a.button-confirm:focus { background-color: #30860c; } input.button-confirm:focus::-moz-focus-inner, input.button-confirm:active::-moz-focus-inner, button.button-confirm:focus::-moz-focus-inner, button.button-confirm:active::-moz-focus-inner, a.button-confirm:focus::-moz-focus-inner, a.button-confirm:active::-moz-focus-inner{ border-color: white; } input.button-confirm.button-disabled, input.button-confirm:disabled, button.button-confirm.button-disabled, button.button-confirm:disabled, a.button-confirm.button-disabled, a.button-confirm:disabled { background-color: #f1630e; border-color: #165b16; } input.button-confirm-black, button.button-confirm-black, a.button-confirm-black{ background-size: 100% auto; background-color: gray; font-size: 1em; font-family: 'Contrail One', cursive } 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: #787878; } 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; } .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: #13507b; border-radius: 100%; color: #fff; 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: #fff; background-color: #073653; } .paging .paging-list li.active a[aria-current = "true"] { background-color: #ccc; color: #000; } .paging .paging-list li.pagerPrev svg { width: 15px; height: 15px; fill: #fff; } .paging .paging-list li.pagerNext svg { width: 15px; height: 15px; fill: #fff; transform: rotate(180deg);} #paging-count { font-size: .8em; text-align: center; color:#000; margin: 10px 0; } @media (min-width: 720px) { .paging .paging-list { justify-content: flex-end; margin-top: 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 #cccccc; 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%; } /* Target: 480- */ @media only screen and (max-width : 480px) { input, select, textarea { border: 1px solid #ccc; font-family: inherit; font-size: 16px; } } /* Print */ @media print { .divToPrint { page-break-after: always; } .noPrint { display: none !important; } #wrapper { margin-top: 0 !important; } #topMenu { display: none !important; } #prodDesc {page-break-before: always; } .assoc, .anchorLink { display: none !important; } .productBuy { display: none !important; } #sticky-buy { display: none !important; } #jsBuyBtn { display: none !important; } .swiper-pagination { display: none !important; } .swiper-button-next { display: none !important; } .swiper-button-prev { display: none !important; } .col1 { display: none !important; } * { box-shadow: none !important; } .helpttext { display: none !important; } #productInfoConditions { display: none !important; } #printIcon { display: none !important; } #breadcrumbs { display: none !important; } #prodRelCat { display: none !important; } #prodAssoc { display: none !important; } #prodOthers { display: none !important; } #prodSimilars { display: none !important; } #footer { display: none !important; } #backbutton { display: none !important; } #btnToggleTable { display: none !important; } #leasing-preview-widget { display: none !important; } #d9h8mo1ih1go1f8pq9bu6 { display: none !important; } body.stickyheader #topBar:after { display: none !important; } #topLogo {background-color: #161616 !important;} table, img, svg { /*break-inside: avoid;*/ } body.stickyheader #topBar { /*display: none !important;*/ position: relative; width: 100%; z-index: 11; min-height: 0 !important; transform: translateY(0); } table.resp.zebra tr td div { max-height: 100px !important; opacity: 1 !important; padding: 8px !important; } } /* BASE */ *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ajaxPopupWindow */ #ajaxPopupWindow { display: none; position:fixed; background-color: #fff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 90%; max-width: 700px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #ajaxPopupClose, .ajaxPopupClose { border: 1px solid #dbdbdb; background-color: #fff; border-radius: 100%; height: 30px; line-height: 30px; position: absolute; right: 2px; text-align: center; top: 2px; width: 30px; z-index: 10000; cursor: pointer; } #ajaxPopupClose:hover:after, #ajaxPopupClose:focus:after, .ajaxPopupClose:hover:after, .ajaxPopupClose:focus:after{ color: #000; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #ajaxPopupClose:after, .ajaxPopupClose:after { color: #767676; content: ""; font-size: 1.2em; height: 100%; left: 0; line-height: 27px; position: absolute; top: 0; transition: all 200ms ease 0s; -webkit-transition: all 200ms ease 0s; width: 100%; 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='utf-8'%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"); } .ajaxPopupHeader { font-weight: 700; margin-bottom: 5px; margin-top: 5px; text-align: center; text-transform: uppercase; } .ajaxPopupContent { padding:5px; overflow: auto; } .ajaxPopupContent table { width: 100% !important; } .ajaxPopupContent td, .ajaxPopupContent th { padding: 5px; font-size: .9em; } /*! nouislider - 14.6.3 - 11/19/2020 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. https://cdnjs.com/libraries/noUiSlider */ .slider-area { display: flex; align-items: end; margin-top: 8px; justify-content: center; } input.sliderFirst, input.sliderSecond { width: 60px; border-radius: 18px; padding: 2px 9px; font-size: 12px; margin-right: 11px; background-color: #f7f7f7; color: #787878; } 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: #000; } 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; } .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; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } .noUi-connect { height: 100%; width: 100%; } .noUi-origin { height: 10%; width: 10%; } /* 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 { 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-handle:focus { outline: none; /*background-color: #159b57;*/ background-color: #000; } .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: 10px; } .noUi-horizontal .noUi-handle { width: 24px; height: 24px; right: -12px; top: -8px; border-radius: 100%; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; right: -6px; top: -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: #1fbb6c;*/ background: #10b1e0; } /* Handles and cursors; */ .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { /*border: 1px solid #159b57;*/ border-radius: 3px; /*background: #5b5b5b;*/ background: #13507b; cursor: pointer; /*box-shadow: 0 0 7px rgb(0 0 0 / 30%);*/ } .noUi-active { /*box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ /*background-color: #159b57;*/ background: #073653; } .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 10px; width: 1px; background: #fff; left: 10px; top: 7px; } .noUi-handle:after { left: 14px; } /* .noUi-handle:before { content: ""; display: block; position: absolute; height: 10px; width: 10px; background: #159b57; left: 8px; top: 8px; border-radius: 100%; } .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: #999; } /* 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; font-size: 10px; } .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; } .slider.noUi-state-tap .noUi-connect, .slider.noUi-state-tap .noUi-origin { -webkit-transition: transform 700ms; transition: transform 700ms; } .noUi-pips .noUi-value-large { color: #8b8b8b; } /** * Swiper 6.5.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 23, 2021 */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff'); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #565656; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-container-pointer-events { touch-action: pan-y; } .swiper-container-pointer-events.swiper-container-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide figure { display: flex; height: 100%; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-fraction { font-size: .9em;} .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; width: 100%; height: 2px; left: 0; bottom: 0; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: auto; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0;top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent;} .swiper-lazy-preloader-white { --swiper-preloader-color: #fff;} .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } .swiper-lazy:not(.swiper-lazy-loaded) { display: none; } /* Hide the empry image-icon, and alt text while loading image */ @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%;} .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-container-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-slide .video-container { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; top: 50%; transform: translateY(-50%); } .swiper-slide .video-container iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); grid-gap: 5px; } .gallery-thumbs .swiper-slide { margin-right: 10px; width: 90px;} .gallery-thumbs .swiper-slide :last-child { margin-right: 0; } .gallery-thumbs .swiper-slide :first-child { margin-left: 0; } .gallery-thumbs .swiper-slide .mediawrapper:hover { border-color: #dddddd; } .gallery-thumbs .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; } .gallery-thumbs .swiper-slide .mediawrapper { border: 1px solid #d3d3d3; background-color: #fff; padding: 15px; width: 90px; display: flex; align-items: center; justify-content: center; } .gallery-thumbs .swiper-slide img { max-height: 60px; } .gallery-thumbs .swiper-slide svg { max-height: 40px; } .gallery-thumbs .swiper-slide.swiper-slide-active .mediawrapper {border-color: #10b1e0; } .gallery-top { height: 100%; width: 100%; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 20%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-active { opacity: 1; } .no_click_overlay {z-index: 1; background-color: #fff; /*opacity: 0.4;*/ pointer-events: none; position: relative; animation: fadein 2s;} .no_click_overlay:before { position: absolute; top: 200px; left: 50%; -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; } #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; } @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: 70px; padding: 20px !important; background-color: #2a8d4d; margin: 20px 0 120px; font-size: 1.8em; } #qcTypeChoice { } #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, #cashierPage { max-width: 900px; margin: 0 auto; } #cashierChange h2, #cashierPage h2 { text-align: left; font-weight: normal; margin: 0; padding: 12px 0; font-size: 1.6em; } #cashierChange .cashierSection, #cashierPage .cashierSection{ margin-bottom: 35px; } #cashierCart { } #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: 7px; 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: #adadad; 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 { 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: .9em; flex-basis: 100%;} #cashierCart .cashier-form .name { flex: 1 0 100%; padding-right: 35px; margin-bottom: 20px; } #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: center; flex: 0 0 15%; display: flex; } #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 a, #cashierCart .cashier-form .cartQtyWrapper .cartPlus a { width: 100%; height: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; color: #777; /*border: 1px solid #ccc;*/ border-radius: 4px; font-size: 22px; } #cashierCart .cashier-form .cartQtyWrapper .cartPlus a { background-color: #4da96c; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus a { background-color: #eb7676; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartQty { 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 a.cartPlus, #cashierCart .cashier-form a.cartMinus {display: flex; background-color: #10b1e0; border-radius: 100%; margin-right: 20px; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; } #cashierCart .cashier-form a.cartPlus:hover, #cashierCart .cashier-form a.cartPlus:focus, #cashierCart .cashier-form a.cartMinus:hover, #cashierCart .cashier-form a.cartMinus:focus { background-color: #1498bf; } #cashierCart .cashier-form a.cartPlus:focus-visible, #cashierCart .cashier-form a.cartPlus:focus-visible {outline: 1px solid #000; } #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 .stockStatus .cartRemove { } #cashierCart .cashier-form .toolbar .cartRemove svg { width: 17px; height: 17px; } #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: -15px 0 5px; 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%; } @media (min-width: 720px) { #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.1em; flex-basis: auto; } #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; } } #qcDynamicCashier .couponwrapper, #qcDynamicCashier .commentwrapper { background-color: #15507b; margin: 10px 0; padding: 8px 15px; border-radius: 20px; color: #fff; } .jsToggleCouponContent, .jsToggleCommentContent { display: none; } .jsToggleComment, .jsToggleCoupon { cursor: pointer; display: block; padding: 4px 0; font-weight: normal; position: relative; } .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='%23fff' 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: flex-end; flex-basis: 100%; align-items: center; margin: 0 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: #13507b; display: flex; align-items: center; } #qcButtonBackLink svg {width: 15px; height: 15px; margin-right: 10px; fill: #fff; transition: opacity .3s; transform: rotate(180deg); } #addressLookup { background-color: #efefef; padding: 10px; margin-bottom: 15px; } #loginContainer { background-color: #f1ebe1; padding: 10px; margin:15px 0 15px; } #loginContainer .loginQuestion button { font-family: Arial, sans-serif; font-weight: 700; border: 0; background-color: #13507b; 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; } @media (min-width: 720px) { #loginContainer #loginForm form .col1 { margin-right: 40px; } } .qccashier-bonus { } .qcBonusLevels {} .qcBonusLevels ul {} .qcBonusLevels li {} .qcBonusLevels li:hover { background: #fff; } .qcBonusProduct { border-bottom: 1px dotted #e3e3e3; } .qcBonusProduct .f1 { } .qcBonusProduct .f1 img { display:block; margin:auto; } .qcBonusProduct .f2 {} .qcBonusProduct .f3 {} .qcBonusProduct .f3 select {} .qcBonusProduct .f4 { font-weight:600; } .qcBonusProduct .f5 { } .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 #cccccc; background:#ffffff; 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; } .form-steps:after { content: ""; display: table; clear: both; } .form-steps__item { padding: 0; position: relative; display: block; float: left; width: 25%; text-align: center; } .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; border: 2px solid; 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: green; color: white; border-color: mediumseagreen; } .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: green; border: 2px solid mediumseagreen; } .form-steps__item--completed .form-steps__item-text { color: #4f5e77; } .form-steps__item--completed .form-steps__item-icon { background: green; 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; border: 2px solid mediumseagreen; } @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; } } @media (min-width: 720px) { #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: 120px; min-height: auto; } body.cashierrelated #wrapper { margin-top: 135px; } body.cashierrelated #topBar:after { display: none; } body.cashierrelated #topBar > .container { max-width: 900px; margin: 0 auto; } } /* ------------------ END CASHIER RELATED */ .errorField { outline: 1px solid red; } .columnwrapper { display: flex; flex-wrap: wrap; } .columnwrapper .halfwidth { flex-basis: 100%; } @media (min-width: 720px) { .columnwrapper .halfwidth { flex-basis: 50%; } } .formWrapper { display: flex; flex-wrap: wrap; background-color: #f1ebe1; 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%; } .formRow.double { display: flex; flex-direction: row; flex-wrap: wrap; } .formRow.double div { flex-basis: 100%; } @media (min-width: 720px) { .formRow.double div { flex-basis: 50%; } .formInner textarea { width: 27em; } } .requiredinfo { display: flex; align-items: center; flex-basis: 100%; margin: 10px; font-weight: bold; } .selectArea, .selectAreaSpecial { display: flex; flex-wrap: wrap; background-color: #f1ebe1; padding: 5px; } .selectArea.simple { flex-wrap: wrap; } .selectArea ul { flex: 0 0 100%; display: flex; flex-direction: column; flex-wrap: wrap; } .selectArea ul li { display: flex; flex: 1; align-items: center; background-color: #fff; flex: auto;; } .selectArea ul li label { display: flex; align-items: center; flex-basis: 100%; padding: 15px 0; cursor: pointer; } .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: #000; } .selectArea .selectInfo {flex: 1; background-color: #d2cabd; padding: 7px; flex-basis: 100%; } .selectArea .selectInfo p { font-size: .9em; } .selectArea .selectInfo .infoImage { margin: 10px 0 20px; } .selectArea .selectInfo .infoImage img { max-height: 70px; } .selectArea.simple ul { flex: 0 0 100%; flex-direction: row; gap: 5px; } .selectArea.simple ul li { flex: 1 1 250px; } .selectArea [type="radio"]:checked, .selectArea [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .selectArea [type="radio"]:checked + label, .selectArea [type="radio"]:not(:checked) + label { position: relative; padding-left: 35px; cursor: pointer; } .selectArea [type="radio"]:checked + label:before, .selectArea [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 7px;top: 50%; transform: translateY(-50%);width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .selectArea [type="radio"]:checked + label:after, .selectArea [type="radio"]:not(:checked) + label:after { content: ''; width: 10px; height: 10px; background-color: #10b1e0; position: absolute; top: 50%; left: 11px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .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; padding-left: 35px; cursor: pointer; } .selectArea ul li [type="checkbox"]:checked + label, .selectArea [type="radio"]:checked + label { background-color: #d2cabd; border-top: 4px solid #10b1e0; } .selectArea [type="checkbox"]:checked + label:before, .selectArea [type="checkbox"]:not(:checked) + label:before { content: ''; position: absolute; left: 7px; top: 13px; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .selectArea [type="checkbox"]:checked + label:after, .selectArea [type="checkbox"]:not(:checked) + label:after { content: ''; width: 10px; height: 10px; background-color: #10b1e0; position: absolute; top: 17px; left: 11px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .selectArea [type="checkbox"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(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; -webkit-transform: scale(1); transform: scale(1); } .labelText { width: 100%; display: flex; justify-content: space-between; } .labelText .freightprice { font-weight: 600; padding-right: 14px; width: 100px; text-align: right; } @media (min-width: 720px) { .selectArea ul { /*flex: 0 0 300px;*/ flex: 0 0 100%; flex-flow: row; } } .qccashier-pay-info { background-color: #f7f4ee; height: 100%; display: flex; flex-direction: column; padding: 15px; } #qcNewsLetterToggle:before {top: 0;} #qcNewsLetterToggle:after {top: 4px;} .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; } } @media (min-width: 720px) { #mobilecheck { display: none; } .onlyBig {display: block !important; } .onlySmall {display: none !important; } #wrapper > .container {padding-top: 5px;} #jsRatingsBtn { text-align: left; justify-content: flex-start; } #jsRatingsBtn span { display: inline; } ul.checked.green li:before { color: #82b440; } ul.checked.green li { padding-left: 25px; color: #333; } } /* Ripple effect */ .navbar-menu a { position: relative; overflow: hidden; } .navbar-menu a .ripple {border-radius: 50%; background-color: rgba(225,225,225,1); position: absolute; transform: scale(0); animation: ripple 0.3s linear; pointer-events: none; } @keyframes ripple{ to{ transform: scale(2.5); opacity: 0; } } /* The "more" button */ /* #navbar:not(.jsfied) { overflow-x: auto; padding-left: 17px; } #navbar .--hidden { display: none; } #navbar button { border: 0; width: 100%; height: 100%; display: block; font-size: 1em; line-height: 1.2; text-align: center; color: #FAF3DD; background-color: transparent; } #navbar .-primary > li > button { white-space: nowrap; padding: 0 25px; } #navbar .-primary > li > button:hover { } #navbar .-primary > li > button:active {} #navbar .-primary .-more { background-color: #ab221a; } #navbar .-primary .-more > button span { display: inline-block; transition: transform 0.2s; } #navbar .-secondary a, #navbar .-secondary button { padding: 0.6em; } #navbar .-secondary button:hover { background-color: #961534; } #navbar .-secondary button:active { background-color: #D51E49; } #navbar.--show-secondary .-secondary { display: block; } */ @keyframes anim { 0% { height: 10px; } 50% { height: 40px; } 100% { height: 10px; } } @-webkit-keyframes anim { 0% { height: 10px; } 50% { height: 40px; } 100% { height: 10px; } } @-moz-keyframes anim { 0% { height: 10px; } 50% { height: 40px; } 100% { height: 10px; } } @-ms-keyframes anim { 0% { height: 10px; } 50% { height: 40px; } 100% { height: 10px; } } @-ie-keyframes anim { 0% { height: 10px; } 50% { height: 40px; } 100% { height: 10px; } } .bar { width: 8px; height: 100%; background-color: #13507b; position: absolute; bottom: 0; margin-bottom: -2px; -webkit-animation-name: anim; -webkit-animation-iteration-count: infinite; -moz-animation-name: anim; -moz-animation-iteration-count: infinite; -ms-animation-name: anim; -ms-animation-iteration-count: infinite; -o-animation-name: anim; -o-animation-iteration-count: infinite; animation-name: anim; animation-iteration-count: infinite; } #bar-one { -webkit-animation-duration: 1.9s; -moz-animation-duration: 1.9s; -ms-animation-duration: 1.9s; -o-animation-duration: 1.9s; animation-duration: 1.9s; left: 0px; } #bar-two { -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -ms-animation-duration: 0.7s; -o-animation-duration: 0.7s; animation-duration: 0.7s; left: 10px; } #bar-three { -webkit-animation-duration: 1.1s; -moz-animation-duration: 1.1s; -ms-animation-duration: 1.1s; -o-animation-duration: 1.1s; animation-duration: 1.1s; left: 20px; } .spinner { height: 40px; width: 30px; display: block; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }