/* CSS door CM Specialist.nl */ /* Versie 6.3.0 */ /* Instellingen categorie en artikelweergave */ .shopHeader {clear: both;} .shopHeader img {height: auto !important; max-width: 100%;} .shopSortPres {width: 20px; text-align: center;} .shopSortPres a {color:#999; font-size:16px;} .shopSortPres a:hover {color:#000;} .shopSortPres a.actief {color:#000;} .shopSortOptie {display: flex; padding: 10px; border: 1px solid #ddd; margin: 0 0 10px; border-radius: 3px;} .shopSortOptie > * {margin: auto 10px auto 0;} .shopSortOptie > .pdfKnop {margin: auto 0 auto auto;} .shopSortOptie > .downloadKnop {margin: auto 0 auto 10px;} .shopFooter {margin-top:20px;} .slidingProduct {box-shadow: 0 1px 10px rgba(0,0,0,.3); border-radius:10px; overflow:hidden; z-index: 999 !important; pointer-events: none; max-width: 200px;} /* Einde instellingen categorie en artikelweergave */ /* Categorie sortering en weergave */ .shopSortOptie a {text-decoration: none;} .shopSortOptie a.actief {color: #000 !important; background: #f2f2ef;} .shopSortOptie a.actief.asc::after {content:"\f0d7"; font-family: "Font Awesome 5 Pro"; margin: auto; margin-left:5px; font-weight: bold;} .shopSortOptie a.actief.desc::after {content:"\f0d8"; font-family: "Font Awesome 5 Pro"; margin: auto; margin-left:5px; font-weight: bold;} .presentatieWijze, .sorteerKnoppen {display: flex; box-sizing: border-box; background: #fff; border: 1px solid #ddd; border-radius: 3px;} .presentatieWijze a, .sorteerKnoppen a {width: 33.333% !important; padding: 8px 10px !important; display: flex; line-height: normal; transition: .3s all ease; color: #777 !important; position: relative; border-right: 1px solid #ddd;} .presentatieWijze a:last-child, .sorteerKnoppen a:last-child {border-right: 0;} .presentatieWijze a .icon, .sorteerKnoppen a .icon {margin: auto;} .presentatieWijze a i {font-weight: bold;} .presentatieWijze a:hover, .sorteerKnoppen a:hover {color:#000;} .presentatieWijze a .titel, .sorteerKnoppen a .titel {position: absolute; bottom: 43px; transform-origin: center; transition: .3s ease 0s; padding: 5px 9px; background: #000; color: #fff; font-size: 12px; line-height: 1.25em; border-radius: 3px; opacity: 0; pointer-events: none; text-align: center; display: inline-block; box-sizing: border-box; white-space: nowrap; left: 50%; transform: translateX(-50%);} .presentatieWijze a:hover .titel, .sorteerKnoppen a:hover .titel {opacity: 1;} .presentatieWijze a .titel::before, .sorteerKnoppen a .titel::before {content: ""; width: 8px; height: 8px; background: inherit; position: absolute; left: -50%; right: -50%; margin: 0 auto; bottom: -3px; transform: rotate(45deg); z-index: -1;} .presentatieWijze select {border:0;} .shopAfdrukkenKnop .pdfKnop, .shopAfdrukkenKnop .downloadKnop {margin-left: 5px; display: inline-block;} .shopNavigatie {margin: 10px 0; vertical-align: middle; width:100%;} .shopNavigatieVorige {text-align:left; width:30%;} .shopNavigatieVolgende {text-align:right; width:30%;} .shopNavigatieLijst {text-align:center; width:40%;} .shopNavigatie .button {white-space: nowrap;} /* Einde Categorie sortering en weergave */ /* Categorieen */ .shopCategorieHolder {display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));} .shopCategorieHolder .categorie {position: relative; border: 1px solid #eee; box-sizing: border-box;} .shopCategorieHolder .categorie:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);} .shopCategorieHolder .categorie a {text-indent: -9999px; position: absolute; left: 0; right: 0; overflow: hidden; top: 0; bottom: 0; z-index: 1;} .shopCategorieHolder .categorie .titel {padding: 10px; position: relative; text-align: center;} .shopCategorieHolder .categorie .titel h2 {color: #000; font-size:14px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; margin: 0;} .shopCategorieHolder .afbeeldingHouder {position: relative; width: 100%;} .shopCategorieHolder .afbeeldingHouder img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;} .shopCategorieHolder .afbeeldingHouder .verhouding {display: block; padding-bottom: 100%;} .shopCategorieHolder ol, .shopCategorieHolder ul {list-style-type: none; margin: 0;} .shopCategorieHolder a:link, .shopCategorieHolder a:visited {text-decoration:none;} .shopCategorieLijst2 .kolomA {float: left; width: 40%; margin-right: 10px;} .shopCategorieLijst2 .kolomB {float: left; width: 40%;} .shopCategorieLijst3 .kolomA {float: left; width: 30%; margin-right: 10px;} .shopCategorieLijst3 .kolomB {float: left; width: 30%; margin-right: 10px;} .shopCategorieLijst3 .kolomC {float: left; width: 30%;} .shopCategorieLijstDiep ul {padding-left: 0;} .shopCategorieLijstDiep .ankers {display:none;} .shopCategorieLijstDiep .titel {margin: 5px;} .shopCategorieLijstDiep .titelMet {font-weight: bold; margin: 5px;} .shopCategorieLijstDiep .inhoud {background-color: #fff; border-radius: 5px 5px 5px 5px; padding: 10px 15px; border: 1px solid #CACACA;} .shopCategorieLijstDiep .kolomA {float: left; width:30%; margin-right: 10px;} .shopCategorieLijstDiep .kolomB {float: left; width:30%; margin-right: 10px;} .shopCategorieLijstDiep .kolomC {float: left; width:30%;} /* Einde categorieen */ /* Algemeen voor Lijst, Tegel, Compact en Detail */ .artikel .afbeeldingHouder {position: relative; width: 100%;} .artikel .afbeeldingHouder img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important; object-fit: contain;} .artikel .afbeeldingHouder .verhouding {display: block; padding-bottom: 100%;} .artikel .afbeelding {position: relative;} .artikel .labels {top: 0; left: 0; position: absolute; z-index: 1; pointer-events: none; line-height: normal; font-size: 12px;} .artikel .labels .label {padding: 6.5px; margin: 5px 5px 0; background-color: #f2f2ef; border-radius: 3px;} .artikel .labels .label img { max-width: 70px;} .artikel h2.titel a {text-decoration: none;} .artikel .artikelnr {color: #777; font-size: 12px;} .artikel .artikelnr > .titel {margin-right: 0.25em;} .artikel .artikelnr > .nummer {text-transform: uppercase;} .artikel .voorraad {margin: 0 0 5px;} .artikel .voorraad .status .image {display: none;} .artikel .voorraad .status .toelichting.positief::before {content:"\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-right: 5px; color: #64A43A;} .artikel .voorraad .status .toelichting.negatief::before {content:"\f00d"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-right: 5px; color: #d55929;} .artikel .voorraad .getal .opVoorraad {margin-left: 0.25em;} .artikel .voorraad .opVoorraad {margin-left: .25em;} .artikel .extraUitleg {margin: 0 0 10px;} .artikel .prijzen .valuta {margin-right: 0.25em;} .artikel .prijzen .prijs {font-weight: bold; color: #000;} .artikel .prijzen .van {text-decoration: line-through; opacity:.7;} .artikel .prijzen .voor {color: #64d064;} .artikel .prijzen .vanaf {font-size: 80%; font-weight:normal; padding-right:0.3em;} .artikel .prijzen .prijsinfo > span::after {content: "/"; margin: 0 0 0 .25em;} .artikel .prijzen .prijsinfo > span:last-child::after {display: none;} .artikel .displayprijs .toelichting {margin-right: .25em;} .artikel .bestellen {position: relative;} .artikel .bestellen .bestelknop a.wButBestel {background: #000; color: #fff; line-height: 1.95em;} .artikel .bestellen .bestelknop input {text-align: center; margin-right: 10px;} .artikel .bestellen .bestelknop {display: flex;} .artikel .bestellen .bestelknop > .knopFomuleConfig {width: 100% !important;} .artikel .bestellen .doosVerkoop {margin-bottom: 10px; line-height: 1.35em;} .artikel .bestellen .doosVerkoop .doos, .artikel .bestellen .doosVerkoop .stuk { display: flex; align-items: center; margin-bottom:5px;} .artikel .bestellen .doosVerkoop .totaal {margin:5px 0; line-height:1.35em;} .artikel .aantalMinPlus, .artikel .aantalVolgorde {max-width: 150px; margin-right: 10px; background: #fff; border: 1px solid #ddd; border-radius: 3px; display: grid; grid-template-columns: 1fr 1fr 1fr;} .artikel .aantalMinPlus > *, .artikel .aantalVolgorde > * {padding: 8px; box-sizing: border-box; margin: 0; line-height: normal; display: flex; border-radius: 0 !important; border-top: 0; border-bottom: 0; transition: .3s all ease; color: #000; background: transparent; text-align: center;} .artikel .aantalMinPlus .min, .artikel .aantalMinPlus .plus, .artikel .aantalVolgorde .up, .artikel .aantalVolgorde .down {min-width:24px;} .artikel .aantalMinPlus .min:hover, .artikel .aantalMinPlus .plus:hover, .artikel .aantalVolgorde .up:hover, .artikel .aantalVolgorde .down:hover {cursor: pointer; background: #f2f2ef;} .artikel .aantalMinPlus > * > i, .artikel .aantalVolgorde > * > i {margin: auto;} .artikel .aantalMinPlus input, .artikel .aantalVolgorde input {min-width:30px} .artikel .aantalMinPlus .inactive {color: #ccc; cursor: not-allowed; pointer-events: none;} .artikel .favorieten {position: relative; margin: 10px 0;} .artikel .favorieten a {text-decoration: none; transition: none;} .artikel .favorieten .image {padding-right: 0.6em;} .artikel .favorieten .image img {position: relative; top: 2px;} .artikel .favorieten.aan .image i {font-weight: bold;} .artikel .verlang {position: relative;} .artikel .verlang a {text-decoration:none;} .artikel .verlang .image {padding-right:0.6em;} .artikel .verlang .image img {vertical-align: middle;} .artikel .verlang.aan .image i {font-weight: bold;} .artikel .variatie select {width: 100%; margin-bottom: 0.25em;} .artikel .variatie .opmerking textarea {width: 100%;} .artikel .project {font-size:12px; clear:both; margin:0.5em 0; padding: 10px 10px 5px 10px; background-color:#eee; border-radius:5px;} .artikel .project select {width:100%;} .artikel .project a {text-decoration:none;} .artikel .project .image {padding-right: 0.6em;} .artikel .project .image img {position: relative; top: 2px;} .artikel .artikelGroepPrijs .toelichting {margin-right: 0.25em;} .artikel .relatieBtwPrijs {color: #777; display: block; font-size: 12px; font-weight: normal; line-height: normal; white-space: nowrap;} .artikel .relatieBtwPrijs .exBtwToelichting {margin-left: 0.25em;} .artikel .relatieBtwTotaalPrijs {display: block; font-size:.8em; color:#666; font-weight: normal;} .samengesteldeArtikel .h3, .samengesteldeArtikelen .h3 {font-size:inherit; margin-bottom:0; line-height: inherit;} /* Einde algemeen voor Lijst, Tegel, Compact en Detail */ /* Lijstweergave 1*/ .shopLijst .artikel {background-color: #fff; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 10px; padding: 15px; position: relative; transition: all 0.3s ease 0s;} .shopLijst .artikel:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15); z-index: 1;} .shopLijst .artikel > a {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-indent: -9999px;} .shopLijst .artikel .inner {display: flex;} .shopLijst .artikel .inner .afbeeldingHouder {margin-right: 15px; width: 90px;} .shopLijst .artikel .inner .afbeeldingHouder .labels img {width: 50px; height:auto;} .shopLijst .artikel .inner .inhoud {display: flex; width: 100%;} .shopLijst .artikel .omschrijving {margin: auto 15px auto 0;} .shopLijst .artikel .omschrijving h2.titel {font-size: 16px; line-height: 1.25em; margin: 0;} .shopLijst .artikel .omschrijving h2.titel a {font-size:inherit; margin:0; color:#000;} .shopLijst .artikel .omschrijving .artikelnr {font-size: 12px; font-weight: normal;} .shopLijst .artikel .prijzen {margin: auto 0 auto auto; width: 245px;} .shopLijst .artikel .prijzen .prijs {font-size: 18px;} .shopLijst .artikel .prijzen .van {display: block; font-size: 80%;} .shopLijst .artikel .prijzen .voor {display: block; font-size: inherit;} .shopLijst .artikel .prijzen .btwinfo, .shopLijst .artikel .prijzen .artikelEenheid {display: block; color: #777; font-size: 11px; font-weight: normal; line-height: 1.25em; white-space: nowrap;} .shopLijst .artikel .voorraad {margin: 5px 0 10px;} .shopLijst .artikel .meerinfo {font-size: 12px; line-height: 1.25em;} .shopLijst .artikel .detailKnop {display: none;} .shopLijst .artikel .bestellen {margin: 10px 0 0;} /* Einde Lijstweergave 1 */ /* Tegelweergave 2 */ .shopTegel { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));} .shopTegel .artikel {position: relative; display: flex;} .shopTegel .artikel .inner {height: auto; width:100%; position: relative; border: 1px solid #ddd; transition: all .3s ease; padding: 15px; background: #fff; display: flex; flex-direction: column; box-sizing: border-box;} .shopTegel .artikel .inner:hover {box-shadow: 0 0 60px 5px rgba(0, 0, 0, 0.1);} .shopTegel .artikel .inner > a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-indent: -9999px;} .shopTegel .artikel .inner .top10 {position: absolute; left: 0; top: 0; z-index: 2; font-size: 20px; line-height: 1; padding: 15px; color: #000; font-weight: bold;} .shopTegel .artikel .inner .top10::after {content:".";} .shopTegel .artikel .inner .rechtsboven {position: absolute; right: 0; top: 0; display: flex; line-height: 1;} .shopTegel .artikel .inner .rechtsboven div {margin: 5px 5px 0; font-size: 14px;} .shopTegel .artikel .inner .rechtsboven div a {padding: 8px; display: block; background: #f2f2ef; color: #777; border-radius: 3px;} .shopTegel .artikel .inner .rechtsboven div a i {font-weight: bold;} .shopTegel .artikel .inner .rechtsboven div.aan a {color: #eccb12;} .shopTegel .artikel .inner .rechtsboven div .toelichting {display:none;} .shopTegel .artikel .inner .rechtsboven div .image {padding: 0;} .shopTegel .artikel .inner .afbeeldingHouder {position: relative; width: 100%; margin: 0 0 10px;} .shopTegel .artikel .inner .afbeeldingHouder .labels img {width: 50px; height: auto;} .shopTegel .artikel .omschrijving h2.titel {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25em; font-size: inherit; font-weight: bold; display: block; margin: 0;} .shopTegel .artikel .omschrijving h2.titel a {font-size: inherit; font-weight: inherit;} .shopTegel .artikel .meerinfo {margin-top: auto;} .shopTegel .artikel .prijzen .prijs {font-size: 17px;} .shopTegel .artikel .bestellen {z-index: 2; position: relative; margin: 10px 0 0;} .shopTegel .artikel .bestellen .variatie select {width: 100%;} .shopTegel .artikel .bestellen .bestelknop input {margin: 0; border-radius: 3px 0 0 3px; border-color: #ddd; width: 45px;} .shopTegel .artikel .bestellen .bestelknop a.wButBestel {width: 100%; text-align: center;} .shopTegel .artikel .bestellen .bestelknop a.wButBestel.knopMoederArtikel, .shopTegel .artikel .bestellen .bestelknop a.wButBestel.knopFomuleConfig {border-radius: 3px;} .shopTegel .artikel .bestellen .detailKnop {display: none;} .shopTegel .artikel .verlang {display: block;} .shopTegel .artikel .opDeHoogteHoudenKnop {background-color: #000; border: 0; color: #fff; font-size: 13px; padding: 10px; text-decoration: none; transition: all 0.3s ease 0s; line-height: normal; border-radius: 3px; cursor: pointer; position: absolute; top: 0; display: flex; margin: auto; width: 100%; flex-direction: column; text-align: center; box-sizing: border-box; bottom: 0;} /* Einde Tegelweergave 2 */ /* Compacte weergave 3*/ .shopCompact .artikel {background-color: #fff; position: relative; border-bottom: 1px solid #ddd; transition: all .3s ease; display: flex; padding: 5px;} .shopCompact .artikel:first-child {border-top: 0;} .shopCompact .artikel:nth-child(even) {background-color: #fcfcfc;} .shopCompact .artikel .inhoud { display: flex; width: 100%; } .shopCompact .artikel .omschrijving {margin: auto 10px auto 0;} .shopCompact .artikel .omschrijving .voorraad {display: none;} .shopCompact .artikel .prijzen {margin: auto 10px auto auto; text-align: right; line-height: 1.25em;} .shopCompact .artikel .prijzen .voor {font-size:100%;} .shopCompact .artikel .bestellen {margin: auto 0; z-index: 1; width: 245px; min-width: 245px;} .shopCompact .artikel .bestellen a.wButBestel.knopMoederArtikel {border-radius: 3px;width: 100%;} .shopCompact .artikel .bestellen a.wButBestel.knopMoederArtikel::before {display: none;} .shopCompact .artikel .bestellen a.wButBestel.knopMoederArtikel span {display: inline-block;width: 100%;white-space: nowrap;} .shopCompact .artikel a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-indent: -9999px;} .shopCompact .artikel .afbeeldingHouder {width: auto; margin: auto 10px auto 0; min-width: 45px;} .shopCompact .artikel .artikelnr {margin: auto 10px auto 0;} .shopCompact .artikel h2.titel, .shopCompact .artikel h2.titel a {margin: 0; font-weight: bold; line-height: 1.25em; font-size:14px;} .shopCompact .artikel .artikelnr .titel {display:none;} .shopCompact .artikel .merk {display: none;} .shopCompact .artikel .col1 {width: 30px;} .shopCompact .artikel .col2 {line-height: 1.25em;} .shopCompact .artikel .col3 {white-space: nowrap;} .shopCompact .artikel .col4 {width: 150px; line-height: 1.25em;} .shopCompact .artikel .btwinfo {font-size: 11px; font-weight: normal; display: block;} .shopCompact .artikel .variatie select {margin-right: 0.5em; width:auto;} /* Einde Compacte weergave 3 */ /* Artikel detailscherm */ .artikel.detail .detailinkollommen {display: flex; margin: 0 -10px;} .artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width:calc(50% - 20px); margin: 0 10px;} .artikel.detail .detailinkollommen .links .afbeeldingPersonalisatieHolder {display: flex; position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;} .artikel.detail .detailinkollommen .links .afbeeldingPersonalisatieHolder .afbeeldingPersonalisatie {margin:auto; position: relative; line-height: 0;} .artikel.detail .detailinkollommen .links .afbeeldingPersonalisatieHolder .afbeeldingPersonalisatie .afbeeldingPersonalisatieInput {position: absolute; z-index: 1; color: #fff; font-size: 20px; line-height: normal; overflow: hidden; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;} .artikel.detail .detailinkollommen .links .afbeeldingPersonalisatieHolder .afbeeldingPersonalisatie img {position: relative;} .artikel.detail h1 {line-height: 1.25em; font-size: 22px; margin: 0;} .artikel.detail .artikelEenheid {display:block;} .artikel.detail .artikelBestelEenheid {display:block;} .artikel.detail .rechts .bestellen .bestelknop input {width: 65px !important;} .artikel.detail .rechts .bestellen .bestelknop .aantalMinPlus input {width: unset !important; margin-right: 0;} .artikel.detail .bestellen .bestelknop .wButBestel::before {content: "\f291"; font-family: "Font Awesome 5 Pro"; margin: 0px 10px 0px 0px; font-weight: normal;} .artikel.detail .bestellen .prijzen {display: inline-block; margin: 0px 0px 0px 10px;} .artikel.detail .prijzen .prijs {font-size: 18px;} .artikel.detail .artikelGewicht:empty {display: none;} .artikel.detail .artikelBestelEenheid {display: block;} .artikel.detail .gekoppeldeCategorie {border-bottom: 1px solid #eee; margin: 0 0 10px; padding: 0 0 10px;} .artikel.detail .gekoppeldeCategorie ul {list-style-type: none; margin: 0; padding: 0;} .artikel.detail .gekoppeldeCategorie li {line-height: 25px;} .artikel.detail .gekoppeldeCategorie li a {color: #000; text-decoration: none;} .artikel.detail .gekoppeldeCategorie li a:hover {color: #909090;} .artikel.detail .gekoppeldeCategorie li a .seperator {margin: 0px 5px;} .artikel.detail .gekoppeldeCategorie li::before {content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin: 0px 10px 0px 0px;} .artikel.detail .shopDetailModernKenmerken {margin: 20px 0;} .artikel.detail .tijdelijkTest {background:rgba(0,0,0,.05); margin:30px 0; padding:30px;} .artikel.detail .tijdelijkTestBlauw {background:rgba(0,0,255,.05); margin:30px 0; padding:30px;} .artikel.detail .tijdelijkTestRood {background:rgba(255,0,0,.05); margin:30px 0; padding:30px;} .artikel.detail .tijdelijkTestGroen {background:rgba(0,255,0,.05); margin:30px 0; padding:30px;} .artikel.detail .multiBestellenHouder {margin: 20px 0;} .artikel.detail .multiBestellenHouder .multiBestellen {display:table; white-space: nowrap;} .artikel.detail .multiBestellenHouder .multiBestellen .regel {display: table-row;} .artikel.detail .multiBestellenHouder .multiBestellen .regel > *{display:table-cell; padding: 5px;} #tabSerieInhoud .shopHolder {margin-bottom: 10px;} #tabSerieInhoud .artikel .labels, #tabSerieInhoud .artikel .prijzen, #tabSerieInhoud .artikel .bestellen, #tabSerieInhoud .artikel .artikelGewicht, #tabSerieInhoud .artikel .favorieten, #tabSerieInhoud .artikel .verlang, #tabSerieInhoud .artikel .displayprijs, #tabSerieInhoud .artikel .artikelGroepPrijs, #tabSerieInhoud .artikel .adviesprijs, #tabSerieInhoud .artikel .shopDetailModernKenmerken, #tabSerieInhoud .artikel .formuleHolder, #tabSerieInhoud .shopTegel .artikel .omschrijving, #tabSerieInhoud .shopLijst .artikel .inner .col3, #tabSerieInhoud .shopLijst .artikel .inner .meerinfo {display: none;} #tabSerieInhoud .shopLijst .artikel {padding: 10px} #tabSerieInhoud .shopLijst .artikel .omschrijving {margin: 0;} #tabSerieInhoud .shopLijst .artikel .inner .col1 {width: 70px; padding-right: 10px;} #tabSerieInhoud .shopTegel .artikel .inner {border-width: 2px; border-radius: 3px; box-shadow: none !important; padding: 10px;} #tabSerieInhoud .shopTegel .artikel .inner .afbeeldingHouder, #tabSerieInhoud .shopTegel .artikel .meerinfo {margin: 0;} #tabSerieInhoud .shopTegel .artikel:hover .inner {border-color: #d0d0d0;} #tabSerieInhoud .shopTegel .artikel.artikelSerieActief .inner {border-color: #000;} #tabSerieInhoud .shopTegel .artikel .voorraad {position: absolute; top: 0; display: flex; bottom: 0; left: 0; right: 0; text-align: center;} #tabSerieInhoud .shopTegel .artikel .voorraad .status {margin: auto 5px; width: 100%;} #tabSerieInhoud .shopTegel .artikel .voorraad .status .toelichting {color: #000; background: rgba(255,255,255,.75); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 1.25em; padding: 3px 0; display: block;} #tabSerieInhoud .shopTegel .artikel .voorraad .status .toelichting.positief {display: none;} #tabSerieInhoud .shopTegel .artikel .voorraad .status .toelichting.negatief {display: block;} #tabSerieInhoud .shopTegel .artikel .voorraad .status .toelichting.negatief::before {display: none;} #tabSerieInhoud .shopTegel .artikel .voorraad .aantal {color: #000; background: rgba(255,255,255,.75); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 1.25em; padding: 3px 0; margin: auto 5px; width: 100%;} .kenmerkgroepKeuze {margin-bottom: 10px;} .kenmerkgroepKeuze.afbeeldingen {display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px;} .kenmerkgroepKeuze.afbeeldingen .artikel {width: calc(25% - 5px); max-width: 90px; position: relative; display: flex; border-width: 2px; border-radius: 3px; box-shadow: none !important; padding: 0; border: 2px solid #d0d0d0; box-sizing: border-box; margin: 2.5px;} .kenmerkgroepKeuze.afbeeldingen .artikel:hover {border-color: #aaa;} .kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: #41ae28;} .kenmerkgroepKeuze.afbeeldingen .artikel a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; text-indent: -9999px;} .kenmerkgroepKeuze.afbeeldingen .artikel img {border-radius: 3px;} .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo {position: absolute; z-index: 2; left: 5px; top: 5px; } .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo .kenmerkAfbeelding {position: relative; line-height: 0;} .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo .kenmerkAfbeelding img {border-radius: 50px; overflow: hidden; max-width: 15px; border: 2px solid #fff;} .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo .kenmerkAfbeelding .titel {position: absolute; top: -30px; transform-origin: center; transition: .3s ease 0s; padding: 5px 9px; background: #000; color: #fff; font-size: 12px; line-height: 1.25em; border-radius: 3px; opacity: 0; pointer-events: none; text-align: center; display: inline-block; box-sizing: border-box; white-space: nowrap; left: 50%; transform: translateX(-50%);} .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo .kenmerkAfbeelding:hover .titel {opacity: 1;} .kenmerkgroepKeuze.afbeeldingen .artikel .kenmerkInfo .kenmerkAfbeelding .titel::before {content: ""; width: 8px; height: 8px; background: inherit; position: absolute; left: -50%; right: -50%; margin: 0 auto; bottom: -3px; transform: rotate(45deg); z-index: -1;} .kenmerkgroepKeuze.kenmerkAfbeeldingen {display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel {width: 30px; max-width: 90px; position: relative; display: flex; border-width: 2px; border-radius: 3px; box-shadow: none !important; padding: 2px; border: 2px solid #d0d0d0; box-sizing: border-box; margin: 2.5px;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel:hover {border-color: #aaa;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel.actief {border-color: #41ae28;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; text-indent: -9999px;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel .titel {position: absolute; top: -30px; transform-origin: center; transition: .3s ease 0s; padding: 5px 9px; background: #000; color: #fff; font-size: 12px; line-height: 1.25em; border-radius: 3px; opacity: 0; pointer-events: none; text-align: center; display: inline-block; box-sizing: border-box; white-space: nowrap; left: 50%; transform: translateX(-50%);} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel:hover .titel {opacity: 1;} .kenmerkgroepKeuze.kenmerkAfbeeldingen .artikel .titel::before {content: ""; width: 8px; height: 8px; background: inherit; position: absolute; left: -50%; right: -50%; margin: 0 auto; bottom: -3px; transform: rotate(45deg); z-index: -1;} .kenmerkgroepKeuze.tags .artikel {position: relative; line-height: 1; padding: 10px; border: 2px solid #d0d0d0; display: inline-block; margin: 0 5px 5px 0; border-radius: 3px; font-weight: bold;} .kenmerkgroepKeuze.tags .artikel:hover {border-color: #aaa;} .kenmerkgroepKeuze.tags .artikel.actief {border-color: #41ae28;} .kenmerkgroepKeuze.tags .artikel a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; text-indent: -9999px;} .houdMeOpHoogteVoorraad {background: #eee; padding: 20px; margin-bottom: 15px;} .houdMeOpHoogteVoorraad input#houdOphoogteEmail {margin-bottom: 20px;} .geenVoorkeursCategorie {display: none;} /* Einde artikel detailscherm */ /* Gallery artikeldetail */ .volledigGallery .carousel-cell-groot {position: relative; width: 100%; margin: 0 0 10px;} .volledigGallery .carousel-cell-groot img, .volledigGallery .carousel-cell-groot video {position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important; object-fit: contain;} .volledigGallery .carousel-cell-groot .verhouding {display: block; padding-bottom: 100%;} .fotoAlbum .volledigGallery .carousel-cell-groot .verhouding {padding-bottom: 60%;} .flickity-button {opacity: 0; transition: .3s all ease;} .galleryHouder:hover .flickity-button {opacity: 1;} .galleryHouder:hover .flickity-button:disabled {opacity: .3;} .flickity-prev-next-button .flickity-button-icon {position: absolute; left: 35%; top: 35%; width: 30%; height: 30%;} .flickity-button {width: 35px; height: 35px;} .thumbnailGallery .carousel-cell img {margin: 5px; border: 2px solid #f2f2f2; border-radius: 3px; width: auto !important; height: auto !important; max-width: unset !important;} .thumbnailGallery .carousel-cell-yt img {margin: 5px; border: 2px solid #f2f2f2; border-radius: 3px; height: auto !important; max-width: unset !important;} .thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: #000;} .thumbnailGallery .flickity-button {height: 100%; background: hsla(0, 0%, 100%, 0.75); border-radius: 0; z-index: 2;} .thumbnailGallery .flickity-button.previous {left: 0;} .thumbnailGallery .flickity-button.next {right: 0;} .volledigGallery .carousel-cell-groot.videoGroot img::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(37, 40, 45, .40);} .volledigGallery .carousel-cell-groot.videoGroot .playKnop {position: absolute; top: 45%; bottom: 0; left: 0; right: 0; margin: 0 auto; text-align: center; color: #FFF; font-size: 50px;} /* Einde gallery artikeldetail */ /* Bestelmatrix */ .bestelmatrixHolder {width: 100%; overflow-x: auto;} .bestelmatrixHolder table {width: 100%; min-width: 1070px;} .bestelmatrixHolder table tr th {text-align: left; border-right: 1px solid #eee;} .bestelmatrixHolder table tr th:last-child {border-right: 0;} .bestelmatrixHolder table tr th .artikel {display: grid; grid-gap: 10px; grid-template-columns: 50px 1fr;} .bestelmatrixHolder table tr th .artikel .omschrijving {display: flex; flex-direction: column;} .bestelmatrixHolder table tr th .artikel .omschrijving h2.titel {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25em; font-size: inherit; font-weight: bold; display: block; margin: auto 0;} .bestelmatrixHolder table tr th .artikel .omschrijving h2.titel a {font-size: inherit; font-weight: inherit;} .bestelmatrixHolder table tr td {border-top: 1px solid #eee; border-right: 1px solid #eee; padding: 10px;} .bestelmatrixHolder table tr td:last-child {border-right: 0;} .bestelmatrixHolder table tr td .artikel h2.titel {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25em; font-size: inherit; font-weight: bold; display: block;} .bestelmatrixHolder table tr td .artikel h2.titel a {font-size: inherit; font-weight: inherit;} .bestelmatrixHolder table tr td .artikel .bestellen .bestelknop .alInWinkelmand {margin: auto 0 auto auto; text-align: right; font-weight: bold;} .bestelmatrixHolder table tr td .artikel .bestellen .bestelknop .alInWinkelmand:empty {display: none;} .bestelmatrixHolder table tr td .artikel .bestellen .bestelknop .alInWinkelmand::after { content: "\f07a"; font-family: "Font Awesome 5 Pro"; margin-left: 5px; font-weight: normal; } .bestelmatrixHolder table tr:nth-child(even) td {background: #fafafa;} .bestelmatrixHolder .knoppen { display: flex; margin: 10px 0 0; border-top: 1px solid #eee; padding: 20px 0;} .bestelmatrixHolder .knoppen .bestellen {margin-left: auto;} .bestelmatrixHolder .knoppen .bestellen .klein {text-align: center;} /* Einde bestelmatrix */ /* Kassa */ .kassaTitelB {width:110px;text-align:right;} .kassaTitelC {text-align:right;padding-right:15px;width:95px;} .kassaTitelD {width:20px;} .shopLijst1Prijs1A_1, .shopLijst1Prijs1A_2 {font-size:18px; font-weight:normal;} /* Einde Kassa */ .shopLijst1Variatie_1, .shopLijst1Variatie_2 {font-size: 11px; font-weight: normal; text-decoration: none;} .artT2AA_1, .artT2AA_2 {padding-left:10px; text-align:right; vertical-align:top; width:150px;} .artT4_1, .artT4_2 {height:60px;} .artT4A_1, .artT4A_2 {font-weight: bold; font-size: 18px; margin-top:5px;} .artT4B_1, .artT4B_2 {width:50px;} .artT4C_1, .artT4C_2 {width:30px;} .artT4D_1, .artT4D_2 {font-weight: bold; text-align:center;} .artT4E_1, .artT4E_2 {font-weight: bold; text-align:right;} .artT21B {width:80px; vertical-align:middle; text-align:right;} .artT21C {text-align:right; padding-right:15px; vertical-align:middle; width:125px;} .artT22B {width:200px; vertical-align:middle; text-align:right;} .artT22C {text-align:right; padding-right:15px; vertical-align:middle; width:120px;} .artT23AA, .artT23BB, .artT23CC {background-color: #EFEFEF; height:26px; padding:3px; text-align:right; width:80px;} .artT23A, .artT23B, .artT23C {height:22px; padding:3px; text-align:right;} .artT23DD {background-color: #EFEFEF;} .lev2A {width:30px; vertical-align:top; height:26px; padding-top: 4px;} .lev2B {vertical-align:top; height:22px; padding-top:6px; padding-left: 4px;} .lev2C {width:100px; padding-right:15px; text-align:right; font-weight: bold; background-color: #EFEFEF; border-top:1px solid #BFBFBF;} .lev3 {height:10px;} #vwShow {background-color: #fefefe; border: 1px solid #ccc; border-radius: 0; height: 200px; overflow: auto; padding: 10px;} #vwShow:hover {background-color:#F2F2F2; overflow:auto;} /* Artikel tabsV2 */ .tabsV2 {clear:both;} .tabsV2 .titels {display:flex; padding:0;} .tabsV2 .titels > div {top:1px; font-weight: bold; border-top:3px solid #fff; padding: 6px 10px; border-bottom:0; cursor: pointer; text-align: center; position: relative; background:#f5f5f5; margin-right: 1px; border-radius: 3px 3px 0 0;} .tabsV2 .titels > div.actief {background-color: #fff; border: 1px solid #eee; border-bottom:1px solid #fff; border-top:3px solid #000; color: #000; z-index:1;} .tabsV2 .titels > div:hover {color: #000;} .tabsV2 > .inhoud {clear:both; border:1px solid #eee; padding:20px; box-sizing: border-box; background: #fff; position: relative;} .tabsV2 > .inhoud > div {display:none;} .tabsV2 > .inhoud > div.actief {display:block;} .tabsV2 > .inhoud > div {display:none;} /* Einde artikel tabsV2 */ /* Menu style ------------- */ .catMenu0ul, .catMenu1ul, .catMenu2ul, .catMenu3ul {margin: 0 !important; list-style: none; padding:0 !important;} .catMenuLink0li, .catMenuLink0liSel { color: #777 !important; display: inline-block; font-size: 14px; font-weight: normal; line-height: 1.25em; margin: 5px 0; padding: 0; text-decoration: none !important; } .catMenuLink0liSel {color: #000 !important; font-weight: bold;} .catMenuLink1li, .catMenuLink1liSel { color: #777 !important; display: inline-block; font-size: 13px; line-height: 1.75em; text-decoration: none !important; padding: 0 0 0 15px; font-weight: normal; margin: 2px 0; } .catMenuLink1liSel {color: #000 !important; font-weight: bold;} .catMenuLink2li, .catMenuLink2liSel { color: #777 !important; display: inline-block; font-size: 13px; line-height: 1.75em; text-decoration: none !important; padding: 0 0 0 15px; font-weight: normal; margin: 2px 0; margin-left: 30px; } .catMenuLink2liSel {color: #000 !important;} .catMenu2li > a:hover, .catMenu3li > a:hover, .catMenu4li > a:hover {text-decoration: underline !important;} .catMenu2liSel > a:hover, .catMenu3liSel > a:hover, .catMenu4liSel > a:hover {text-decoration: underline !important;} /* Einde Menu */ #voorraadTT {white-space:nowrap;float:left; font-size:12px;} #voorraadTT a, #voorraadTT a:link, #voorraadTT a:visited {text-decoration:none; cursor: pointer;} #voorraadTX {font-size:11px;white-space:nowrap;float:left; line-height: 91%;} .voorraadTT {white-space:nowrap;float:left; font-size:11px;} .voorraadTT a, .voorraadTT a:link, .voorraadTT a:visited {text-decoration:none; cursor: pointer;} .voorraadTX {font-size:11px;white-space:nowrap;float:left; line-height: 91%;} #lijst3TT {width: 7em;white-space:nowrap;} #lijst3TT a, #lijst3TT a:link, #lijst3TT a:visited {text-decoration:none; cursor: pointer;} .tooltip {position: relative; display: inline-block; cursor: pointer;} .tooltip .titel {padding:5px 10px; margin:0.5em 0; background-color: #eee; border-radius:5px;} .tooltip .omschrijving {background: #FFF; box-shadow:1px 1px 3px #ccc; border-radius: 5px; top: 125%; color: inherit; border: 1px solid #ccc; padding: 10px; position: absolute; transition: .3s all ease; left: 50%; font-size: inherit; transform: translateX(-50%); opacity: 0; pointer-events: none; width: 400px; z-index: 40; line-height: 1.5em;} .tooltip:hover .omschrijving {opacity: 1;} .tooltip::before {content: "\f059"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #000; display: none;} /* Account wijzigen 3.0 */ .blokholder.accountWijzigen .titel {color: #000; font-size: 16px; font-weight: bold; margin: 20px 0 0; background: #eee; padding: 10px 15px; border-radius: 2px;} .blokholder.accountWijzigen .content {padding:15px;} .accountMelding {background: #eabdbc40; color: #ef6868; padding: 14px; text-align: center; border-radius: 3px; font-style: italic; font-weight: bold; border: 2px solid #fdc8c8;} .clearTabel {width: 100%; padding: 0; border-spacing: 0; margin: 0 0 10px;} .clearTabel td {padding: 0;} .clearTabel .beschrijving {vertical-align: middle; padding:5px 0;} .clearTabel .invoer {vertical-align: middle; padding:5px 0;} .accountWijzigen input[type="text"], .accountWijzigen input[type="password"], .accountWijzigen input[type="email"], .accountWijzigen input[type="tel"], .accountWijzigen textarea {margin:0; width:100%; box-sizing: border-box;} .accountWijzigen textarea {height:80px;} .accountWijzigen select {width:100%;} .typeKlant div, .geslacht div {display:inline-block; margin-right:5px; position: relative;} .typeKlant input[type="radio"], .geslacht input[type="radio"] {display: none;} .typeKlant label, .geslacht label {display: inline-block; background: #fff; padding: 7px 15px; padding-left:35px; cursor: pointer; transition: all .3s ease; border:1px solid #ccc; border-radius:3px; text-transform: capitalize;} .typeKlant input[type="radio"]+label:hover, .geslacht input[type="radio"]+label:hover {border-color:#41ae28;} .typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color:#41ae28; color:#000;} .typeKlant input[type="radio"]+label::before, .geslacht input[type="radio"]+label::before {content: "\f0c8"; font-size: 15px; font-family: "Font Awesome 5 Pro"; font-weight: bold; line-height: 1em; color:#ccc; position: absolute; top:13px; left:13px; transition: all .3s ease;} .typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {content: "\f14a"; color: #41ae28;} .nawVeld {position: relative; margin: 0 0 8px 0;} .nawVeld.labelBinnenkant input {padding: 12px 10px;} .nawVeld.labelBinnenkant textarea {padding: 12px 10px;} .nawVeld.labelBinnenkant label {box-sizing: border-box; display: block; font-size: 10px; line-height: 1; opacity: 0; overflow: hidden; padding: 7px 10px; pointer-events: none; position: absolute; text-overflow: ellipsis; top: 0; text-align: left; transform: translateY(3px); transition: all .2s ease-out; user-select: none; white-space: nowrap; width: 100%; z-index: 1;} .nawVeld.labelBinnenkant.nawVeldGevuld label {opacity: 1; transform: none;} .nawVeld.labelBinnenkant.selectieVeld label {opacity: 1;} .nawVeld.labelBinnenkant.nawVeldGevuld input {padding-top: 18px; padding-bottom:6px;} .nawVeld.labelBinnenkant.nawVeldGevuld textarea {padding-top: 18px; padding-bottom:6px;} .bedrijfsGegevens {transition: all .3s ease; max-height:0px; overflow: hidden; opacity: 0;} .bedrijfsGegevens.zakelijkTonen {display: block; opacity: 1; max-height:100%;} .btwcontrole {padding: 5px; line-height: 1; background: #eee; border-radius: 3px; margin: 5px 0 0 10px; display: inline-block; font-size: 11px;} .btwcontrole:empty {display: none;} .btwcontrole.goed {background: #41ae28; color: #fff;} .btwcontrole.fout {background: #d55929; color: #fff;} .accountWijzigen .contactpersoon {display:flex;} .accountWijzigen .contactpersoon .voornaam {width:39%; margin-right:10px;} .accountWijzigen .contactpersoon .tussenvoegsel {width:22%; margin-right:10px;} .accountWijzigen .contactpersoon .achternaam {width:39%;} .accountWijzigen .telefoon {display: flex;} .accountWijzigen .telefoon .vast {width:50%; margin-right:10px;} .accountWijzigen .telefoon .mobiel {width:50%;} .postPlaats {display: flex;} .postPlaats .postcode {width:30%; margin-right:10px;} .postPlaats .plaats {width:70%;} .straat {display: flex;} .straat .straatnaam {width:70%; margin-right:10px;} .straat .huisnummer {width:30%;} .adresHolder {display: block; width: 100%; border-top: 1px solid #eee; padding: 10px 0;} .adresHolder:first-child {border: 0;} .adresHolder .kop {font-size: 16px; font-weight: bold; margin: 0px 0 10px;} .adresHolder .adressen {display: flex; flex-wrap: wrap;} .adresHolder .adressen .item {padding: 10px; margin: 0 10px 10px 0; border: 2px solid #ccc; border-radius: 3px; position: relative; flex-basis: calc(33.333% - 10px); box-sizing: border-box; display: flex; flex-direction: column-reverse;} .adresHolder .adressen .item.default {border: 2px solid #41ae28 !important;} .adresHolder .adressen .item.default:before {background: #41ae28;opacity: 1;} .adresHolder .adressen .item.default .defaultTekst {position: absolute; right: 0; top: 0; padding: 4px 6px; font-size: 12px; line-height: 1; border-bottom-left-radius: 3px; transition: all .3s ease; background: #41ae28; color: #fff;} .adresHolder .adressen .item .adresRow .bedrijfsnaam {font-weight: bold;} .adresHolder .adressen .item .adresRow .knoppen {margin: 5px 0 0;} .adresHolder .adressen .item .adresRow .knoppen a {padding: 8px; text-decoration: none; margin-right: 5px; color: #606060; background: #eee; line-height: 1; display: inline-block; border-radius: 3px;} .adresHolder .adressen .item .adresRow .knoppen a i {margin-right: 5px;} .adresHolder .adressen .item .adresFormulier.open td {display: block;} .adresHolder .adressen .item .adresFormulier.open .beschrijving {padding: 0;} .adresHolder .adressen .item .adresFormulier.open td.invoer {padding: 0px 0 10px;} .adresHolder .adressen .item .adresRow.open {display: none;} .adresHolder .adressen .item.open {position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 10; background: #fff; box-shadow: var(--box-shadow-venster); padding: 35px;} #adressenlijst {position: relative;} #adressenlijst .adresHolder {display: block; width: 100%;} #adressenlijst .adresHolder .adresFormulier {display: none;} #adressenlijst .adresHolder .adresFormulier.open {display: block;} .adresToevoegenFormulier {display: none;} .adresToevoegenFormulier.open {display: block; background: #eee; padding: 30px; margin: 20px 0 0;} .adresToevoegenFormulier.open select {background-color: #fff;} /* Zoekveld Orders */ .zoekenOrders {display: table; position: relative; margin: 0 0 15px; border: 1px solid #c4c4c4;} .zoekenOrders.open {z-index: 20;} .zoekenOrders .veld {display: table-cell;position: relative; overflow: hidden; border-radius: 3px 0 0 3px;} .zoekenOrders .veld input {border: 0; box-shadow: none; padding: 10px; font-size: 14px; font-style: italic; border-radius: 0px; margin: 0; width: 150px; transition: all .3s ease; line-height: 1.1em;} .zoekenOrders .knop {display: table-cell; color:#999; position: relative; padding: 5px 12px; transition: all .3s ease; cursor: pointer; background-color: #fff;} /* Einde Zoekveld Orders */ /* Order status */ .account_txtBlok {margin-bottom:15px;} .account_txtBlok:after {content: " "; visibility: hidden; display: block; height: 0; clear: both;} /* Einde order status */ .mijnAccountSortOptie {display: flex; align-items: center; margin: 0 0 15px;} .mijnAccountSortOptie .zoekenOrders {margin: 0;} .mijnAccountSortOptie #statusLijst {margin-left: auto;} .mijnAccountAlleFacturenDetailHolder h1, .mijnAccountAlleOrdersDetailHolder h1 {margin: 10px 0;} .detailOrderHolder {display: flex; flex-wrap: wrap; margin: 15px -10px 15px; align-items: flex-start;} .detailOrderHolder .detailOrderBlok {width: calc(50% - 20px); font-size: 13px; border: 1px solid #eee; box-sizing: border-box; margin: 10px; border-radius: 3px;} .detailOrderHolder .detailOrderBlok table.lijst {margin: 0;} .detailOrderHolder .detailOrderBlok table.lijst td {padding: 5px 10px} .detailOrderHolder .detailOrderBlok table.lijst tr:last-child td {border-bottom: 0;} .detailOrderHolder .detailOrderBlok .titel {font-weight: bold; color: #666; text-transform: uppercase;} /* Einde Account wijzigen 3.0 */ /* Winkelmandje opslaan */ .mijnAccountOrderHolder .item {position: relative; background-color: #fff; border: 1px solid #dfdfdf; border-radius: 3px; display: flex; margin-bottom: 10px;} .mijnAccountOrderHolder .item a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;} .mijnAccountOrderHolder .item .inhoud {display: flex; flex-direction: column; padding: 15px; border-right: 1px dashed #dfdfdf; flex: 1;} .mijnAccountOrderHolder .item .inhoud .omschrijving {color: #000; font-style: normal; font-weight: bold; line-height: 1.25em; font-size: 14px; overflow: hidden; display: block; margin: 0; hyphens: auto; -webkit-hyphens: auto;} .mijnAccountOrderHolder .knoppen {margin-top: auto; padding-top:10px;} .mijnAccountOrderHolder .knoppen a {z-index: 2; margin:10px 10px 0 0;} .mijnAccountOrderHolder .knoppen a i {margin-right: 5px;} .mijnAccountOrderHolder .subtotaal {line-height: 1.5em;} .mijnAccountOrderHolder .subtotaal .prijs {display: block; font-weight: bold; font-size: 17px; color: #000;} .mijnAccountOrderHolder .item .artikelen {display: inline-flex; width: 330px; margin: auto 0 auto auto; padding: 10px;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder {position: relative; width: calc(33.333% - 10px); margin: 5px; border: 1px solid #dfdfdf; border-radius: 3px; overflow: hidden; box-sizing: border-box;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;padding: 5px; box-sizing: border-box;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder .verhouding {display: block; padding-bottom: 100%;} /* fancy */ .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder:nth-child(1)::before {transition: .3s all ease .1s;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder:nth-child(2)::before {transition: .3s all ease .2s;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder:nth-child(3)::before {transition: .3s all ease .3s;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder:before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;} .mijnAccountOrderHolder .item:hover .artikelen .afbeeldingHouder:before {background: rgba(54, 82, 95, .06);} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje {display: flex; border: 1px dashed #dfdfdf;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .plus {margin: auto; font-size: 20px; color: #aaa;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .meeraantal {position: absolute; top: 0; right: 0; background: #000; line-height: 1; padding: 5px 8px; color: #fff; border-radius: 0 3px 0px 3px; font-size: 13px; vertical-align: baseline; font-weight: bold;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .meeraantal span {font-weight: normal; margin-left: 2px;} .mijnAccountOrderHolder .item .pijl {display: flex; font-size: 20px; color: #aaa; padding: 15px 15px 15px 0;} .mijnAccountOrderHolder .item .pijl i {margin: auto; font-weight: bold;} .mijnAccountOrderHolder.detail .omschrijving {display: flex; margin: 0 0 10px; background: #fff; border: 1px solid #dfdfdf; border-radius: 3px; padding: 10px 15px;} .mijnAccountOrderHolder.detail .omschrijving .titel {font-size: 16px; font-weight: bold; margin: auto; margin-left: 0; line-height: 1.25em;} .mijnAccountOrderHolder.detail .omschrijving .titel .datum {color: #666; font-size: 13px; font-weight: normal;} .mijnAccountOrderHolder.detail .omschrijving .knoppen {margin: auto; margin-right: 0;} .mijnAccountOrderHolder.detail .omschrijving .knoppen a {margin: 0 0 0 10px;} .mijnAccountOrderHolder.detail table {width: 100%; margin: 0 0 10px; background: #fff; border: 1px solid #dfdfdf; border-radius: 3px; padding: 10px 15px;} .mijnAccountOrderHolder.detail .onderkant {display: flex; margin: 0 0 10px; background: #fff; border: 1px solid #dfdfdf; border-radius: 3px; padding: 10px 15px; } .mijnAccountOrderHolder.detail .onderkant .formulier {margin: 0;} .mijnAccountOrderHolder.detail .onderkant .formulier form {display: flex;} .mijnAccountOrderHolder.detail .onderkant .formulier form .nawVeld {margin: 0 5px 0 0;} .mijnAccountOrderHolder.detail .onderkant .subtotaal {line-height: 1.5em; text-align: right; margin: auto; margin-right: 0;} .meldingHouder .melding .formulierArtikelToevoegen select {width: 100%; margin-bottom: 10px;} /* Einde winkelmandje opslaan */ .shopLijst3LabelNieuw3A {position: absolute;z-index: 5;margin-top:3px;margin-left:2px;} .shopLijst3LabelAanbieding3A {position: absolute;z-index: 5;margin-top:3px;margin-left:2px;} .praT {width:100%;} .prAanb1, .prAanb3 {font-size: 11px; font-weight: normal; position: absolute; text-transform: lowercase; visibility: hidden;} .prAanb2 {text-decoration:line-through; font-size:13px;} .prAanb4 {color: #000; position:relative; left:7px;} /* Tell A friend */ .tafT {border-spacing: 3px;} .taf1 {max-width: 350px; width: 100%;} #taf10 {max-width: 350px; width: 100%; height: 50px;} .tafHolder .kop {color: #000; font-size: 14px; font-weight: bold; margin: 15px 0 5px;} /* Einde Tell A friend */ /* Prijsafspraken en kortingstabellen */ .kortTab1 {width:100%;} .kortTab2 {font-weight: bold; border-bottom:1px solid #BFBFBF;} .kortTab1 .prijsNaKorting {font-weight: bold;} .houdMeOpHoogteVoorraad {background: #eee; padding: 20px; margin-bottom: 15px;} .houdMeOpHoogteVoorraad input#houdOphoogteEmail {margin-bottom: 20px;} .prijsafspraakLos .kortTab1 .toelichting {display: none;} .prijsafspraakLos .kortTab1 .toelichting span {display: none;} .prijsafspraakLos .kortTab1 {width: auto;} .prijsafspraakInLijst {display: none;} .prijsafspraakInLijst .kortTab1 .toelichting {display: none;} .prijsafspraakInLijst .kortTab1 .toelichting span {display: none;} .prijsafspraakInLijst .kortTab1 {width: auto;} /* Einde prijsafspraken en kortingstabellen */ /* Rechterkant artikelen */ .artRechtsAfb1 {float:left; height:96px;width:96px;border:1px solid #BFBFBF;text-align:center;vertical-align: middle;} .artRechtsAfb2 {height:96px;width:96px;text-align:center;vertical-align: middle;} .artRechtsOmsc1 {width: 106px;float:left;height:110px;padding-left:10px;} .artRechtsOmsc2 {max-height:72px;overflow:hidden;} .artRechtsOmsc3 {font-size: 15px; font-weight: bold;} /* Up-Selling */ .UPScontainer .UPSacc_trigger {padding: 5px; font-weight: bold; box-shadow: 0 1px 4px rgba(0,0,0,.1); margin: 10px 0;} .UPScontainer .UPSacc_trigger a {text-decoration: none;} .UPScontainer .UPSacc_trigger.active {box-shadow: 0 1px 4px rgba(0,0,0,.3);} .UPScontainer .UPScatPlaatje {padding: 0 10px 0 0; width: 40px;} /* Einde Up-Selling */ /* Serieartikelen */ .SERIEcatHeader {height:52px; vertical-align:middle;} .SERIEcontainer {width: 100%; margin: 0 auto;} .SERIEcatPlaatje {padding: 0 0 0 12px; width:90px;} .SERIEacc_trigger {padding: 0; margin: 0; background-color: #CFCFCF; height: 52px; line-height: 34px; width: 100%; font-weight: bold; float: left;} .SERIEacc_trigger a {text-decoration: none; display: block; padding: 0 0 0 1px;} .SERIEactive {background-position: left bottom;} .SERIEacc_container {overflow: hidden; clear: both;} /* Einde Serieartikelen */ /* Kortingsboncode */ .kbcode {width:100%; padding:5px; background-color: #EFEFEF;} .kbcode3 {font-weight: bold; text-align:right; padding-right:10px;} /* Paneelopties */ .PaneelUser {display: block; font-weight: normal; font-size: 13px;} .PaneelKnoppen {font-size: 12px; line-height: 1.25em;} .PaneelTextField {width: 100%;} .offertePR0 {width:260px;} .offertePR1 {width:260px;} .offertePR2, .offertePR2 a:link, .offertePR2 a:visited {float:left; text-decoration:none !important; position:relative; top:-10px;} .offertePR3 {padding-right:5px;} /* Moederartikel */ #mArt_titel {display:block; padding:0;} #mArt_holder {text-decoration:none; margin-bottom:0.5em;} .mArt_tabel1_td {border:1px solid #ccc; background-color:#fff;} .mArt_tabel1_td:hover {border:1px solid #000;} /* Upload preview */ .upPreHolder {width: 400px; height: 400px; background-color: #ddd; overflow: hidden;} .upPrePNG {position: absolute; width:400px; height: 400px; z-index: 1;} .upPreImage {height: 400px; overflow: hidden; position: absolute; width: 400px;} .upPreImage2 {width:2000px; height: 2000px; position: absolute; top:-800px; left: -800px;} /* Cadeaubon */ .cadeauHolder {background-color: #eee; padding: 20px; position: relative;} .cadeauHolder .cadeauAfbeeldingHolder img {border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,.1);} .cadeauHolder h2 {} .cadeauHolder .cadeauTextField, .cadeauHolder .cadeauTextArea {display: block; margin: 0 0 5px;} .cadeauHolder .cadeauTextArea {height: 74px;} .cadeauHolder .cadeauBedrag {} .cadeauHolder .cadeauBedrag span {font-size: 22px; margin-right: 10px;} .cadeauHolder .cadeauBedrag #cadeauBedrag {display: inline-block; font-size: 22px; padding: 5px; width: 120px; text-align: right;} .cadeauHolder .cadeauGeldig {font-size: 11px;} .cadeauHolderOpties {padding: 10px 0;} .cadeauHolderOpties .cadeauKnop {float: right;} .cadeauHolderOpties .cadeauDirectA {float: left;} .bedragKeuzes {display:flex; gap:10px; padding:10px 0} .bedragKeuzes a.voorgesteldBedrag {cursor:pointer; padding:5px 15px; font-weight: bold; color:#000; border-radius:5px; border:2px solid #ccc; transition: all .3s ease; text-decoration: none;} .bedragKeuzes a.voorgesteldBedrag:hover {border-color:#000;} .bedragKeuzes a.voorgesteldBedrag.actief {color:#fff; border:2px solid #000; background-color:#000;} /* Einde cadeaubon */ /* Orderproces Algemeen */ .kassainkollommen {display: flex; box-sizing: border-box;} .kassainkollommen > .links {flex: 1;} .kassainkollommen > .rechts {margin-left: 20px; width: 380px;} .stap.twee .links, .stap.drie .links {display: flex; flex-wrap: wrap; margin: 0 -10px;} .stap.twee .links>div, .stap.drie .links>div {width: calc(50% - 20px); background: #fff; box-sizing: border-box; margin: 0 10px 10px;} .kassainkollommen > .rechts .blok, .couponcodeHouder {display: block; background: #f2f2f0; border-radius: 3px; padding: 20px; margin-bottom: 20px; min-height: 1px;} .couponcodeHouder .blok:empty {display: none;} .kassainkollommen > .rechts .blok:empty {display: none;} .kassainkollommen > .rechts .sticky {top: 20px; position: sticky; position: -webkit-sticky; margin-bottom: 20px;} .stap .totalen .stappenKnop a {display:block; padding: 12px; text-align: center; font-weight: bold; background-color: #000; color: #fff;} .stap .totalen .stappenKnop a.disabled {opacity:.5; pointer-events: none;} .stap textarea, .stap input[type="text"], .stap input[type="password"], .stap input[type="email"], .stap input[type="tel"], .stap input[type="number"] {background-color: #fff;} .kassainkollommen .knoppenHouder {margin:20px 0;} .artikel.extraKosten, .kassaArtikel.extraKosten {transform: scale(.9); transform-origin: top right;} /* Stappenbalk orderproces Type 1 */ .stappenbalk {margin-bottom:30px;} .stappenbalk::after {content:""; display:table; clear:both;} .stappenbalk ul {list-style-type: none; padding: 0; margin: 0;} .stappenbalk li {display: block; float:left; box-sizing: border-box; width:25%; text-align: center; font-size:10px; line-height:1.25em; text-transform: uppercase; position:relative;} .stappenbalk li::before {background-color: #ddd; border-radius: 100px; color: #fff; content: ""; display: block; font-size: 13px; font-weight: bold; height: 25px; line-height: 25px; position: relative; text-align: center; width: 25px; margin:0 auto 5px;} .stappenbalk li::after {content:""; border-top:2px solid #ddd; width:100%; position: absolute; top:12px; left:50%; z-index: -1;} .stappenbalk li:last-child::after {display: none;} .stappenbalk .stap1:before {content: "1";} .stappenbalk .stap2:before {content: "2";} .stappenbalk .stap3:before {content: "3";} .stappenbalk .stap4:before {content: "4";} .stappenbalk .bezig .naam {color: #000; font-weight: bold;} .stappenbalk .bezig::before {background-color: #000;} .stappenbalk .klaar::before {display: none;} .stappenbalk .klaar::after {border-color:#41ae28;} .stappenbalk .klaar a {color: inherit; text-decoration: none; display: block;} .stappenbalk .klaar a::before {border-radius: 100px; display: block; font-size: 13px; font-weight: normal; height: 25px; line-height: 25px; position: relative; text-align: center; width: 25px; background-color: #41ae28; color: #fff; content: "\f00c"; font-family: "Font Awesome 5 Pro"; margin:0 auto 5px;} /* Einde stappenbalk Type 1 */ /* Losse orderproces elementen */ .valuta {margin-right:0.25em;} a.wButControleer, a.wButControleerBTW, a.wButVoorwaarden {margin-top: 5px;} .offertePdf {bottom: 15px; left: 20px; position: absolute;} /* Einde Losse orderproces elementen */ /* Orderproces Stap 1 */ .stap .blokholder {margin-bottom: 20px; padding: 20px; border-radius: 3px; background: #f2f2f0;} .stap .blokholder > .titel {color: #000; font-size: 16px; font-weight: bold; margin-bottom: 15px;} .kassaArtikelen table {width:100%;} .kassaArtikelen th {text-align: left; font-size: 11px; text-transform:uppercase; padding-bottom:10px; border-bottom: 1px solid #ddd; line-height:1.25em; vertical-align: bottom; white-space: nowrap;} .kassaArtikelen th.regelStuk, .kassaArtikelen th.regelTotaal {text-align: right;} .kassaArtikelen .aantallen {text-align: center;} .kassaArtikelen .aantallen .verwijderen {font-size: 12px;} .kassaArtikelen .artikel {line-height: normal;} .kassaArtikelen .artikel td {border-bottom: 1px solid #eee; padding: 10px 0 10px 10px;} .kassaArtikelen .artikel:last-child td {border-bottom:0;} .kassaArtikelen .artikel td.regelStuk, .kassaArtikelen .artikel td.regelTotaal {text-align: right; white-space: nowrap;} .kassaArtikelen .regelStuk {text-align: center;} .kassaArtikelen .artikel td.aantallen .verpakkingsEenheid {display: block; color: #777; font-size: 12px; font-weight: normal; line-height: normal;} .kassaArtikelen .artikel .aantallen .eenheid {display: block; margin: 0 0 5px;} .kassaArtikelen .artikel .aantalMinPlus, .kassaArtikelen .artikel .aantalVolgorde {margin: 0 auto; max-width:120px;} .kassaArtikelen .artikel .aantalMinPlus > *, .kassaArtikelen .artikel .aantalVolgorde > * {padding: 5px;} .kassaArtikelen .artikel .artikelPrijsEenheid {display: block;} .kassaArtikelen .artikel .tekst {vertical-align:middle; hyphens: auto;} .kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: bold; text-decoration: none; color: #000;} .kassaArtikelen .artikel .tekst .meerinfo {margin-top: 5px;} .kassaArtikelen .artikel .verwijderKnop {padding-left:10px;} .kassaArtikelen .artikel .verwijderKnop:empty {display: none;} .kassaArtikelen .artikel.gratis {color:#41ae28;} .kassaArtikelen .artikel.gratis input {border:0;} .kassaArtikelen .artikel.gratis a.kassaArtikelTitel {color:#41ae28;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder {vertical-align: middle; text-align: center; padding-left: 0px; width: 80px;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder {position: relative;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder .verhouding {display: block; padding-bottom: 100%;} .kassaArtikelen .artikel .tekst .voorraad .opVoorraad {margin-left: .25em;} .kassaArtikelen .artikel .tekst .opmerkingHolder {margin: 5px 0;} .kassaArtikelen .artikel .tekst .formule {display: inline-block;} .kassaArtikelen .artikel .tekst .variatie, .kassaArtikelen .artikel .tekst .formule .formuleVolume {font-size: 12px; background: #f2f2f0; padding: 10px; border-radius: 3px; display: inline-flex; margin: 0 0 5px;} .kassaArtikelen .artikel .tekst .variatie .variatieRegel, .kassaArtikelen .artikel .tekst .formule .formuleVolume > div {margin-right: 10px; } .kassaArtikelen .artikel .tekst .variatie .variatieRegel:last-child, .kassaArtikelen .artikel .tekst .formule .formuleVolume > div:last-child {margin-right: 0px;} .kassaArtikelen .artikel .tekst .variatie .titel, .kassaArtikelen .artikel .tekst .formule .formuleVolume > div .wCVarTitle {display: block;} .kassaArtikelen .artikel .tekst .variatie .eenheid, .kassaArtikelen .artikel .tekst .formule .formuleVolume > div .wCVarText {font-weight: bold; font-size: 14px; display: block; } .kassaArtikelen .artikel .kortingsbon .titel {margin-top:7px; display: inline-block;} .kassaArtikelen .artikel .artikelConfiguratieRegels {font-size: 12px; background: #f2f2f0; padding: 10px; border-radius: 3px; margin: 0 0 5px;} .kassaArtikelen .artikel .artikelConfiguratieRegels .artikelConfiguratieRegel {display: flex; gap: 10px;} .kassaArtikelen .artikel .samengesteldeArtikelen {font-size: 12px; background: #f2f2f0; padding: 10px; border-radius: 3px; margin: 0 0 5px;} .kassaArtikelen .artikel .samengesteldeArtikelen .samenGesteldArtikel {display: flex; gap: 10px;} .kassaArtikelen .artikel .samengesteldeArtikelen .samenGesteldArtikel .artikelnummer {display: none;} .kassaArtikelen .artikel.nietMeerLeverbaar {background-color: rgba(255,0,0,.1);} .kassaArtikelen .artikel.nietMeerLeverbaar > td:first-child {padding-left:10px;} .kassaArtikelen .artikel.nietMeerLeverbaar > td:last-child {padding-right:10px;} .kassaArtikelen .artikel .tekst .nietMeerLeverbaar {color: #fff; border-radius: 3px; line-height: normal; padding: 5px 10px; display: inline-block; background-color: #f00; opacity: 1 !important;} .kassaArtikelen .nietMeerLeverbaarTitel {border-radius: 3px; background-color: rgba(255,0,0,.1); padding: 20px 25px; margin: 0 0 20px 0; display:flex; align-items: center; flex-wrap:wrap; gap:10px;} .kassaArtikelen .nietMeerLeverbaarTitel .titel {color: #f00; line-height: normal;} .kassaArtikelen .nietMeerLeverbaarTitel a.knop {margin-left:auto;} .kortingsbonCode {display: inline-block; border: 1px solid #00bb00; border-radius: 5px; font-size: 10px; text-transform: uppercase; color: #00bb00; line-height: 1.75em; font-weight: bold; overflow: hidden; vertical-align: middle; white-space: nowrap;} .kortingsbonCode .valuta {margin-left:5px;} .kortingsbonCodeCode {margin-right:5px;} .kortingsbonCode a {color: #fff; background: #00bb00; padding: 3px 6px;} #klarna-payments-container {display: inline-block; width: 50%;} .winkelmandDelen .formulier {display: flex;} .winkelmandDelen .formulier .nawVeld {margin: 0; flex: 1;} .winkelmandDelen .formulier .nawVeld input {width: 100%; border-radius: 3px 0 0 3px;} .winkelmandDelen .formulier .button {border-radius: 0 3px 3px 0; padding: 14px 12px; text-align: center; min-width: 60px;} .stap .labels {position: relative;} .stap .pdfKnop {display: inline-block;} .stap .totalen table {width:100%;} .stap .gewicht {padding-left:5px; color:#aaa; font-size:11px; line-height:1em;} .stap .totalen .bedrag {text-align: right; white-space: nowrap;} .stap .totalen .bedrag .gratis {display: inline-block; background-color: #00bb00; color: #fff; line-height: 1; padding: 3px; border-radius: 3px; font-weight: bold; font-size: 11px; text-transform: uppercase;} .stap .totalen .bedragExclusiefRelatie {text-align: right;} .stap .totalen .negatief {color:#00bb00;} .stap .totaalExclBtw td {border-top: 1px solid #ccc; color: #000; font-weight: bold; padding: 5px 0;} .stap .totalen .totaalTeBetalen td {border-top: 1px solid #ccc; color: #000; font-weight: bold; padding: 5px 0; font-size: 130%;} .stap .totalen .totaalSubtotaal td {border-top: 1px solid #ccc;} .stap .totalen .typeBtw {display: inline-block; vertical-align: middle; border: 1px solid #00bb00; border-radius: 5px; padding: 3px 7px; font-size: 10px; text-transform: uppercase; color: #00bb00; line-height: 1.25em; font-weight: bold; margin-left: .75em;} .stap .totalen .totaalCadeaubon {width: 50%; padding: 20px; background: #eee; border-radius: 3px; float: right; clear: both;} .stap .totalen .totaalCadeaubon .restantRegel {font-weight: bold; color: #000; font-size: 120%; line-height: 1.85em;} .stap .totalen .coupon_afdrukken {display: flex; margin-top: 10px;} .stap .totalen .coupon_afdrukken .pdfKnop .button {line-height: 1.5em; padding: 8px 10px; margin-right: 10px;} .stap .totalen .coupon_afdrukken .couponcodeHouder {flex-basis: 100%;} .stap .totalen .coupon_afdrukken .couponcodeHouder .couponcode {margin: 0;} .totaalTeBetalenSpacing td {padding-top: 5px;} .cadeaubonRegel .cadeaubonCode {display: inline-block; border: 1px solid #00bb00; border-radius: 5px; font-size: 10px; padding:0 0 0 5px; text-transform: uppercase; color: #00bb00; line-height: 1.75em; font-weight: bold; overflow: hidden; vertical-align: middle; white-space: nowrap;} .cadeaubonRegel .cadeaubonCode .cadeaubonCodeCode {margin-right:5px;} .cadeaubonRegel .cadeaubonCode a {color: #fff; background: #00bb00; padding: 3px 6px;} .totaalKortingsBon .kortingsbonCode .kortingsbonCodeCode {padding-left:5px;} .couponcodeHouder:empty {display: none;} .couponcodeHouder .couponcode {display: table; width: 100%; background: #f5f5f5; box-sizing: border-box;} .couponcodeHouder .couponcode #CouponCodeV {display: table-cell; vertical-align: middle; margin: 0 10px 0 0; border-radius: 3px 0 0 3px; text-transform: uppercase; background: #fff;} .couponcodeHouder .couponcode #CouponCodeV::placeholder {text-transform: none;} .couponcodeHouder .couponcode a.wButControleer {display: table-cell; border-radius: 0 3px 3px 0; padding: 5px 12px; line-height: 1em; text-align: center; white-space: nowrap;} .totGratisVerzending {padding:5px 10px; background:#00bb00; color:#fff; font-weight: bold; text-align: center; margin-top:10px; border-radius: 5px;} /* Einde Orderproces Stap 1 */ /* Orderproces Stap 2 */ .stap.twee .resBestaandeklant {display: none;} .stap.twee input[type="text"], .stap.twee input[type="password"], .stap.twee input[type="email"], .stap.twee input[type="tel"], .stap.twee textarea {margin:0; width:100%; box-sizing: border-box;} .stap.twee textarea {height:80px;} .stap.twee select {width:100%;} .stap.twee .contactpersoon {display:flex;} .stap.twee .contactpersoon .voornaam {width:39%; margin-right:10px;} .stap.twee .contactpersoon .tussenvoegsel {width:22%; margin-right:10px;} .stap.twee .contactpersoon .achternaam {width:39%;} .stap.twee .telefoon {display: flex;} .stap.twee .telefoon .vast {width:50%; margin-right:10px;} .stap.twee .telefoon .mobiel {width:50%;} .stap.twee .geboortedatum {display:flex;} .stap.twee .geboortedatum .geboorteDag, .stap.twee .geboortedatum .geboorteMaand, .stap.twee .geboortedatum .geboorteJaar {width: 33%;} .stap.twee .geboortedatum .geboorteMaand {margin: 0 10px;} .nieuwAdres {position: relative;} .stap.twee #adressenlijst .adres {background:#f5f5f5; padding:15px; border-radius: 3px;} .stap.twee #factuuradresGelijk {border: 0; margin-bottom: 5px;} .stap.twee #stap2_factuuradres {position: relative; display:none;} .stap.twee #stap2_bewaaraccountB {line-height: 2em;} .stap.twee .bestaandAdres {background-color: #fff; border:2px solid #ccc; padding: 10px 15px; border-radius: 5px; transition: all .3s ease; cursor: pointer; position: relative; margin-bottom:10px;} .stap.twee .bestaandAdres:hover {border:2px solid #aaa;} .stap.twee .bestaandAdres .bedrijfsnaam {font-weight: bold;} .stap.twee .adres {max-height:950px; transition:all .3s ease; opacity:1; border-radius: 3px; position: relative;} .stap.twee .adres input[type="radio"] {display: none;} .stap.twee .adres.ingeklapt {max-height:0px; overflow:hidden; opacity:0; border:2px solid transparent;} .stap.twee .adres .geselecteerd {opacity:1; border:2px solid #41ae28 !important; padding: 15px; border-radius:3px; background:#fff;} .stap.twee .tekstNieuwAdres a {background-color: #000; text-align: center; border-radius: 3px; color: #fff; cursor: pointer; display: inline-block; font-size: 12px; line-height: 1.25em; padding: 7px 10px; position: relative; text-decoration: none; outline: none;} .stap.twee .bestaandAdres.geselecteerd {position: relative; *background: #f5f5f5; padding:10px 15px;} .stap.twee .bestaandAdres:before, .stap.twee .nieuwAdres:before {content:"\f00c"; position: absolute; right:0; top:0; padding:4px; font-size:12px; background:rgba(255,255,255,0); color:rgba(255,255,255,0); font-family: "Font Awesome 5 Pro"; line-height: 1em; border-bottom-left-radius: 3px; transition: all .3s ease;} .stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background:#41ae28; color:rgba(255,255,255,1);} .stap.twee #stap2_factuuruitklap, .stap.twee #stap2_bewaaraccount {padding:3px 5px; cursor:pointer; box-sizing: border-box;} .stap.twee .blok .inloggen input {margin: 0 0 10px;} .stap.twee .blok .inloggen .knoppen {display: flex;} .stap.twee .blok .inloggen .knoppen a {margin: auto 10px auto 0;} /* Postcode check */ .nieuwAdres.postcodechecker .postPlaats .postcode, .nieuwAdres.postcodechecker .postPlaats .huisnummer {width: 30%;} .nieuwAdres.postcodechecker .straat .straatnaam {width: 70%; margin: 0 10px 8px 0;} #afleverAdresStraat:disabled, #afleverAdresPlaats:disabled, #factuurAdresStraat:disabled, #factuurAdresPlaats:disabled {background:#eee; border-color: #ccc;} /* Einde Postcode check */ /* Einde Orderproces Stap 2 */ /* Orderproces Stap 3 */ .stap.drie .regel {position: relative; display: flex; padding: 5px 10px; line-height: normal; margin-bottom: 5px; cursor: pointer; background: #fff; border-radius: 3px; border: 2px solid #ccc; transition: all .3s ease; min-height: 35px;} .stap.drie .regel .select {margin: auto 10px auto 5px;} .stap.drie .regel .select input {margin: 0;} .stap.drie .regel .select:empty {display: none;} .stap.drie .regel:hover {border: 2px solid #aaa;} .stap.drie .regel.actief {position: relative; background: #e5e5e5; border: 2px solid #000; cursor: default;} .stap.drie .regel .label {line-height: 0; min-width: 48px; max-width: 48px; margin: auto 10px auto 0;} .stap.drie .regel .label img {width: 100%;} .stap.drie .regel .label:empty {display: none;} .stap.drie .regel .inhoud {margin: auto 10px auto 0;} .stap.drie .regel .inhoud .omschrijving {font-weight: bold;} .stap.drie .regel .bedrag {margin: auto 0 auto auto; font-weight: bold;} .stap.drie .regel .bedrag .gratis {display: inline-block; background-color: #00bb00; color: #fff; line-height: 1; padding: 3px; border-radius: 3px; font-weight: bold; font-size: 11px; text-transform: uppercase;} .stap.drie input.betaalExtraInfo {width:100%;} .stap.drie .nietActief {background-color:#ff00001f;} .stap.drie .dealerHolder {clear: both;} .stap.drie .dealerHolder .omschrijving {display: none;} .stap.drie .dropdown.dealerHolder .plaats {float:right; text-transform: capitalize; margin-right:5px;} .stap.drie .dropdown.dealerHolder .km {float:right; font-weight: bold; padding-left:10px;} .stap.drie .dropdown.dealerHolder .keuze .km {padding-right:10px;} .stap.drie .sendcloudResultaat.actief {padding: 20px; box-sizing: border-box; margin: 20px 0; background: #eee; border-radius: 3px; max-width: 400px;} .stap.drie .sendcloudResultaat.actief .openingsTijden {margin-left: auto;} .stap.drie .sendcloudResultaat.actief .adresInfoHouder {display: flex;} /* Einde Orderproces Stap 3 */ /* Orderproces Stap 4 */ .stap.vier .dealerGegevens {margin: 0 0 15px; border-left: 4px solid #ddd; padding-left: 10px;} .stap.vier .dealerGegevens .toelichting {font-weight: bold; color:#000;} .stap.vier .gegevens .algemeen {margin: 0 0 15px; border-left: 4px solid #ddd; padding-left: 10px;} .stap.vier .factuurAfleverHouder {width:100%;} .stap.vier .factuurAfleverHouder td {vertical-align:top;} .stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {width: 47%; box-shadow: 0 3px 3px rgba(0,0,0,.1); padding: 15px; border-radius: 3px; background: #fff; box-sizing: border-box;} .stap.vier .factuurAfleverHouder .midden {width:6%;} .stap.vier .factuurAfleverHouder h3 {margin: 0 0 5px; font-size: 15px;} .stap.vier .factuurAfleverHouder h3 a {float: right; color: #aaa; opacity: 0; transition: .3s all ease;} .stap.vier .factuurAfleverHouder h3 a:hover {color: #666;} .stap.vier .factuurAfleverHouder .links:hover h3 a, .stap.vier .factuurAfleverHouder .rechts:hover h3 a {opacity: 1;} .stap.vier .btwNummer {text-transform: uppercase;} .stap.vier .totalen .vwHolder {margin: 0 0 20px 0;} .stap.vier .totalen .vwHolder .vwTonen {display: grid; grid-template-columns: 25px 1fr;} .stap.vier .totalen .vwHolder .vwTonen input[type="checkbox"] {margin-top: 6px;} /* Einde Orderproces Stap 4 */ /* Einde Orderproces volledig */ /*Verlanglijstje */ .shopVerlanglijstTekst {border: 1px solid #ccc; background-color: #fefefe; margin-bottom: 10px; border-radius:5px; overflow: hidden;} .shopVerlanglijstTekst .titel {color: #000; font-weight: bold; border-bottom: 1px solid #ccc; padding: 5px 10px; background-color: #eee;} .shopVerlanglijstTekst .content {padding: 10px;} .shopVerlanglijstEmailAdd .titel span, .shopVerlanglijstTekst .titel span { margin-right: 0.25em;} .shopVerlanglijstEmailAdd {border: 1px solid #ccc; background-color: #fefefe; margin-bottom: 10px; border-radius:5px; overflow: hidden;} .shopVerlanglijstEmailAdd .titel {color: #000; font-weight: bold; border-bottom: 1px solid #ccc; padding: 5px 10px; background-color: #eee;} .shopVerlanglijstEmailAdd .content {padding: 10px;} .shopVerlanglijstEmailAdd .lijst {width: 55%; float: left; margin-right: 15px; border-right:1px solid #ccc; min-height:163px;} .shopVerlanglijstEmailAdd .toevoegen {width: 40%; float: left;} .shopVerlanglijstEmailAdd span {font-weight:bold;} .shopVerlanglijstEmailAdd .melding {font-style:italic; font-weight:normal;} .shopVerlanglijstTekst textarea, .shopVerlanglijstEmailAdd textarea {display: block; font-family: Arial,Helvetica,sans-serif; font-size: 13px; height: 100px; padding: 5px; text-indent: 0; width: 97%;} .shopVerlanglijstEmailAdd ul {list-style: none outside none; margin:5px; padding: 0;} .shopVerlanglijstEmailAdd ul img {margin-left: 5px;} .verlanglijstVerkocht {opacity:0.5;} .verlangStatus {background: url(images/slash.png) no-repeat scroll center center transparent; border-radius: 10px 10px 10px 10px; box-shadow: 1px 1px 4px #ccc; margin: 10px 0; font-size: 10px; padding: 15px; width: 125px;} .verlangGewenst {float: right; width:50px;} .verlangBesteld {float: left; width:50px;} .verlangStatus .beschrijving { color: #000; display: block; font-size: 10px; text-align: center;line-height: 1em; width: initial;} .verlangStatus .aantal {color: #000; display: block; font-size: 30px; text-align: center;line-height: 1em;} .widgetInloggen input {max-width: 240px;} .widgetInloggen .registreer {display: none;} /* Einde verlanglijstje */ /* Barcode */ .EANbarcode {margin-top: 10px; display: inline-block; padding-bottom:0px;} /* Einde Barcode */ /* Print functie */ .printHolder {margin:25px; color:#666;} .printHolder h2 {margin-bottom: 15px; padding-bottom: 5px; border-bottom:1px solid #ccc;} .printTabel {table-layout:fixed;} .printTabel td {vertical-align:top; text-align:left; padding:10px;} .printKnop {margin-top:5px; padding-top:5px;text-align:center;border-top:1px solid #ccc;} .printNormaal, .printTechnisch {border-radius:5px; height:240px; box-shadow:0 1px 3px #ddd;} .printTussen {padding:0; width:20px;} .printNormaal:hover, .printTechnisch:hover {box-shadow:0 2px 5px #bbb;} .printHolder img {margin:8px; text-align:center;} .printOptie {padding-left:5px;} .printOpties {height:70px;} .printOptieCheck {border:0; margin-right:5px;} /* Einde print functie */ /*Product carousel */ .productCarrousselHolder {position: relative; margin-top: 30px; text-align: left;} .productCarrousselHolder .jcarousel-container {width: 100%; padding: 0;} .productCarrousselHolder .jcarousel-clip {box-sizing: border-box; margin: 0 auto; max-width: 1015px; padding: 10px; width: 100%;} .productCarrousselHolder .jcarousel-next, .productCarrousselHolder .jcarousel-prev {background-color: transparent !important;} .productCarrousel {overflow: visible !important; display: inline-flex;} .productCarrousel li {height: auto; line-height: 1.95em; margin: 0 15px 0 0 !important; position: relative; width: 240px;} .productCarrousel li .artikel {width: 100%; margin: 0;} .productCarrousel li .artikel .inner {box-sizing: border-box; border: 1px solid #ddd !important;} .productCarrousel li .artikel .inner:hover {box-shadow: none !important;} /*Einde Product carousel */ /*Product carousel Flickity */ .productCarousel {display: block; margin: 0 30px;} .productCarousel .flickity-slider {display: flex;} .productCarousel .flickity-button {opacity: 1; width: 34px; height: 34px; background: none;} .productCarousel .flickity-button:hover {background: none;} .productCarousel .flickity-button.previous {left: -40px;} .productCarousel .flickity-button.next {right: -40px;} .productCarousel .flickity-page-dots {position: relative; margin: 20px 0 0; display: none;} .productCarousel .artikel {width: calc(20% - 15px); margin: 0 7.5px;} .productCarousel .artikel .inner {background: #fff; padding: 15px; border: 1px solid #ddd;} .productCarousel.flickity-resize .artikel {min-height: 100%;} /*Einde Product carousel Flickity */ /* Account 2.0 */ .extrabovenkantHolder {background-color: #fff; position: relative;} .extrabovenkantHolder .extrabovenkant {position: relative; display: flex; padding: 0 30px; max-width: 1580px; margin: 0 auto; box-sizing: border-box;} .extrabovenkantHolder .extrabovenkant:empty {display: none;} .extrabovenkantHolder .extrabovenkant .slogan {padding: 5px 5px 5px 0;} .extrabovenkantHolder .extrabovenkant .slogan:empty {display: none;} .account {list-style-type: none; margin: auto 0 auto auto; padding: 0; display: flex;} .account li {position: relative; padding: 10px; line-height: normal; border-right: 1px solid #eee;} .account li:last-child {padding-right: 0; border-right: 0;} .account li .houder {line-height: 1.95em} .account .seperator {display: none;} .account .houder {position: absolute; right:0; background-color:#fff; box-shadow:var(--box-shadow-venster); width:400px; top:-9999px; transform:translateY(-10px); opacity:0; z-index: 20; transition:opacity .3s ease, transform .3s ease;} .account .openGeklapt .houder {opacity: 1; top: 100%; transform:translateY(0);} .account .houder .houder1, .account .houder .houder2 {padding:20px;} .account .houder .houder2 {background-color:#f5f5f5; border-top:1px solid #ddd;} .account .houder .accountKop {font-style: normal; margin: 0 0 10px 0; line-height: 1.25em; color: #000000; font-size: 17px;} .account .welkom {font-weight: bold; color: #000;} .account .welkom .bericht {padding-right: 5px; font-weight: normal;} .account .onderdrukken {opacity: 0.1; position: absolute;} .account .inloggenKnop, .account .favorietenKnop, .account .verlanglijstKnop, .account .mijnAccountKnop {cursor: pointer; text-decoration: none; color: inherit;} .account .openGeklapt .inloggenKnop, .account .openGeklapt .favorietenKnop, .account .openGeklapt .verlanglijstKnop, .account .openGeklapt .mijnAccountKnop {cursor: pointer; color: #000; text-decoration: underline;} .account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {color: #000; text-decoration: underline;} .account .inloggen .email input, .account .inloggen .wachtwoord input, .account .inloggen .wachtwoord2 input {width: 100%; margin: 0 0 10px;} .account .inloggen .inlogKnop {display: flex;} .account .inloggen .inlogKnop .wachtwoordKwijt {line-height: normal; margin: auto; margin-left: 10px;} .account .verlanglijst .code input {width: 100%;} .account .verlanglijst .code2 {padding-top: 3px;} .account .verlanglijst .mijnverlanglijst2 {border-top: 1px dashed #ccc; line-height: 20px; margin: 15px 0 0; padding: 10px 0 0;} .account .mijnAccount .houder {width:220px;} .inloggenBg, .mijnAccountBg, .verlanglijstBg, .winkelwagenHouderBg, .speedsearchResultBg {z-index: 15; opacity: 0; position: fixed; left: 0; top: 0; right: 0; background-image: url('images/zwart/20.png'); background-repeat: repeat; transition: opacity 0.3s ease 0s;} .inloggenBg.open, .mijnAccountBg.open, .verlanglijstBg.open, .winkelwagenHouderBg.open, .speedsearchResultBg.open {opacity: 1; bottom: 0;} /* Einde Account 2.0 */ /* Winkelmandje 2.0 */ .winkelwagenHouder {position: relative;} /* Winkelmandje knop */ .winkelwagenHouder .winkelknop {cursor: pointer; background: #f2f2ef; z-index: 13; padding: 7px 7px 7px 5.5px; border-radius: 3px; margin-left: 10px;} .winkelwagenHouder .winkelknop .titel {display: none; line-height: 30px; font-weight: bold;} .winkelwagenHouder .winkelknop .bedrag {display: none;} .winkelwagenHouder .winkelknop .icoon {position: relative; line-height: normal;} .winkelwagenHouder .winkelknop .icoon:before {content:"\f07a"; font-family: "Font Awesome 5 Pro"; font-size: 22px;} .winkelwagenHouder .winkelknop .aantal {background: #000; border-radius: 3px; box-shadow: 0 6px 11px -5px rgba(0,0,0,.4); color: #fff; font-size: 11px; font-weight: bold; line-height: 18px; padding: 0px 6px; position: absolute; right: -20px; text-align: center; top: -14px;} .winkelwagenHouder .winkelknop .relatieBtwTotaalPrijs {display: none;} /* Winkelmandje Inhoud */ .winkelwagenHouder .winkelwagen {position: absolute; top: 80%; right: 0; width: 700px; border-radius: 3px; opacity: 0; pointer-events: none; transition: all .3s ease; padding: 0px; background-color: #f2f2ef; box-shadow: var(--box-shadow-venster); overflow: hidden;} .winkelwagenHouder.openGeklapt .winkelwagen {opacity:1; top: 100%; z-index: 20; pointer-events: all;} .winkelwagenHouder .winkelwagen .kassaknop {position: relative;} .winkelwagenHouder .winkelwagen .offerteknopExtra {position: relative;} .winkelwagenHouder .winkelwagen .inhoud {padding: 20px;} .winkelwagenHouder .winkelwagen .inhoud.artikelen {background-color: #fff; max-height: calc(100vh - 300px); overflow-y: auto;} .winkelwagenHouder .winkelwagen .inhoud.artikelen .voorraad {display: none;} .winkelwagenHouder .artikel .kassaArtikelAfbeeldingHolder {width: 50px;} .winkelwagenHouder .artikel .regelStuk {display: none;} .winkelwagenHouder .winkelwagen .inhoud.totaal {display: flex; line-height: normal;} .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a {margin-right: 10px;} .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: #000; color: #fff;} .winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen {margin: auto 0 auto auto; text-align: right;} .winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {font-weight: bold; font-size: 16px; color: #000; line-height: 1em;} .winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .relatieBtwPrijs { color: #777; display: block; font-size: 12px; font-weight: normal; line-height: normal; white-space: nowrap;} .winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .relatieBtwPrijs .exBtwToelichting {margin-left: 0.25em;} .winkelmandjeLeeg {padding: 20px; background-color: #fff; border-bottom: 1px solid #ccc;} /* Einde winkelmandje 2.0 */ /* Zoekveld 2.0 */ .zoeken {display: flex; position: relative; z-index: 13; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; min-width: 0;} .zoeken.open {z-index: 20;} .zoeken .veld {z-index: 10; overflow: hidden;} .zoeken .veld #zoekWoordID {border: 0; box-shadow: none; line-height: normal; background: none;} .zoeken .knop {margin: auto; padding: 8px 10px; line-height: normal;} .zoeken .knop:before {content:"\f002"; font-family: "Font Awesome 5 Pro"; font-size:16px;} .zoeken .knop img {display:none;} .zoeken .legen {display: table-cell; border-radius: 0 3px 3px 0; width: 10px; color: #999; position: relative; padding: 5px 12px 5px 0px; transition: all .3s ease; cursor: pointer; z-index: 10; background-color: #fff;} .zoeken .legen:before {content: "\f00d"; font-family: "Font Awesome 5 Pro"; font-size: 16px;} /* Einde Zoekveld 2.0 */ /* Zoekresultaten */ #speedsearchResult {top: calc(100% + 10px); position: absolute; right: 0; z-index: 20;} #speedsearchResult .houder {background-color: #fff; border: 1px solid #ddd; border-radius: 3px; box-shadow: var(--box-shadow-venster); max-height: 500px; overflow: scroll; padding: 0; width: 450px; font-size: 13px; line-height: normal;} #speedsearchResult .houder .speedSearch .resultaat {padding: 10px;} #speedsearchResult .houder .speedSearch .resultaat a.knopAlles {text-decoration: none; float: right;} #speedsearchResult .houder .speedSearch ul {list-style: none; margin:0; padding: 0;} #speedsearchResult .houder .speedSearch ul li {margin: 0px 10px 5px;} #speedsearchResult .houder .speedSearch ul li:last-child {margin-bottom: 10px;} #speedsearchResult .houder .speedSearch ul li a {display: block; text-decoration: none; padding: 5px; background: #fff; border: 1px solid #ddd;} #speedsearchResult .houder .speedSearch ul li a::after {content: ""; clear: both; display: block;} #speedsearchResult .houder .speedSearch ul li a strong {font-weight: normal; position: relative; display: inline; border-bottom: 1px solid #aaa; line-height: 1;} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {float: left; height: 50px; width: 50px; margin-right: 10px; text-align: center; overflow: hidden; position: relative;} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail::after {content: "";display: block; padding-bottom: 100%;} #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {color: #777; font-size: 12px;} #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .titel {margin-right:5px;} #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .nummer {text-transform: uppercase;} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie {color: #777; font-style: italic; font-size: 12px;} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie .titel {float:left; margin-right:5px;} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie ul {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie ul li {display: inline-block; margin: 0 0.5em 0 0;} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie ul li::after {content: ", ";} #speedsearchResult .houder .speedSearch.artikelen ul li a .categorie ul li:last-child::after {content: "";} .speedsearchLoader {position: absolute; right: 1px; top: 6.5px;} .speedsearchLoader i {color:#000; font-size:16px;} #speedsearchResult .houder .knopAllesOnder {width: 100%;} #speedsearchResult .houder .knopAllesOnder a {background-color: #f5f5f5; border-radius: 0; display: block; font-weight: bold; margin: 0; padding: 10px; text-align: center; text-decoration: none;} #speedsearchResult .houder .knopAllesOnder a:hover {background-color: #e5e5e5;} .algemeneZoekResultaat ul {padding: 0; margin: 0; list-style-type: none;} .algemeneZoekResultaat {border: 1px solid #ddd; margin: 20px 0;} .algemeneZoekResultaat ul li {border-bottom: 1px solid #ddd; padding: 5px 15px; transition: .3s all ease;} .algemeneZoekResultaat ul li:last-child {border-bottom: 0;} .algemeneZoekResultaat ul li:hover {background: #eee;} /* Einde zoekresultaten */ /* Merken */ .merkUl {list-style: none; margin:0; padding:0;} .merkUl li {margin:0; padding:0;} .merkUl .merkCheck {margin:0 5px 0 0; padding:0;} /* Einde Merken */ /* Filter */ .filters {border: 1px solid #ddd; -webkit-user-select: none;} .filters .kenmerkgroepHouder {margin:0; padding:0; list-style:none;} .filters .kenmerkgroep {position: relative; margin: 0; list-style: none; border-top: 1px solid #ddd; padding: 20px;} .filters .kenmerkgroep:first-child {border-top: 0;} .filters .kenmerkgroep a.titel {cursor: default; text-decoration: none; display: block; margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.25em;} .filters .kenmerkgroep a.titel img {display: none;} .filters .kenmerkgroep .kenmerken {padding: 0px 5px; overflow: hidden; position: relative; margin-top: 0px; opacity: 1; margin: 0 -5px; list-style:none;} .filters .kenmerkgroep .kenmerken .kenmerk {border-radius: 3px; padding: 0 5px; margin: 0 -5px;} .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: #f2f2f0;} .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"] {position: relative; top: 1px;} .filters .kenmerkgroep .kenmerken label {padding: 0; display:block; cursor: pointer;} .filters .kenmerkgroep .kenmerken label .aantal {margin-top: 8px; white-space: nowrap; float: right; color: #666; font-size: 13px; line-height: 1;} .filters .kenmerkgroep .kenmerken label .aantal::before {content:"(";} .filters .kenmerkgroep .kenmerken label .aantal::after {content:")";} .filters .kenmerkgroep .kenmerken label.nietBeschikbaar {cursor: default;} .filters .nietBeschikbaar {opacity:.5; -moz-pointer-events:none; pointer-events:none; display: none;} .filters .nietBeschikbaar .aantal {display:none !important;} .filters .toelichting, .filters .beschikbaar {font-size: 20px; font-weight: 700; color: #76b82a; margin: 25px 0 0px; display: none;} .filters .beschikbaar .aantal {font-weight:bold;} .filters .actieveKenmerken {display: block; box-sizing: border-box; color: #656568; line-height: normal; padding: 20px 20px 10px; border-top: 1px solid #ddd;} .filters .actieveKenmerken:empty {display: none;} .filters .actieveKenmerkenLijst {list-style:none; padding:0; margin:0;} .filters .actieveKenmerkenLijst:after {content: ""; clear: both; float: none; position: relative; display: block;} .filters .actiefKenmerk {display: inline-block; background: #f2f2f0; border-radius: 3px; line-height: 1; margin: 0 5px 5px 0; font-size: 14px; padding: 5px; font-weight: normal;} .filters .actiefKenmerk img {position:relative; top:3px; margin-right:3px;} .filters .actieveKenmerkenLijst {display: block; box-sizing: border-box; color: #656568;} .filters .actiefKenmerk a {text-decoration: none;} .filters .actiefKenmerk a::before {font-family: "Font Awesome 5 Pro"; content: "\f00d"; color: #a51c18; margin-left: 5px;} .filters .actiefKenmerk img {display: none;} /* Als kenmerken algemeen */ .kenmerkArt, .artikelGewicht {padding: 5px 0px; width: 100%; box-sizing: border-box; transition: all .3s ease; border-bottom: 1px solid #eee; display: flex;} .kenmerkArt .groep, .artikelGewicht .titel {min-width: 60px; color: #aaa; padding-right: 10px;} .kenmerkArt .kenmerken .kenmerk {display: inline-block;} .kenmerkArt .kenmerken .kenmerk::after {content:", "; margin-right: .25em;} .kenmerkArt .kenmerken .kenmerk:last-child::after {display: none;} .kenmerkArt .kenmerken .kenmerk .toevoeging {color: #aaa;} .kenmerkArt .kenmerken .kenmerk .toevoeging:empty {display: none;} .kenmerkArt .kenmerken .kenmerk .toevoeging::before {content: " (";} .kenmerkArt .kenmerken .kenmerk .toevoeging::after {content: ")";} /* Einde Filters */ /* PrijsFilter */ .prijsFilterHolder .prijsfilterVelden {display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;} .prijsFilterHolder .prijsfilterInput {background: #eee;} .prijsFilterHolder .prijsfilterVelden input {width: 70px; height: 35px; text-align: center; font-size: inherit; border: 0; outline: none; background: #eee;} .prijsFilterHolder .prijsfilterVelden .valuta {color: #a7a7a7; margin-left: 10px;} .prijsFilterHolder .prijsfilterKnop {background: #000; padding: 6px 18px; cursor: pointer; color: #FFF; font-size: 21px;} .prijsFilterHolder .noUi-target {background: #eee; border-radius: 2px; margin-top: 15px; height: 4px; position: relative; direction: ltr; -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;} .prijsFilterHolder .noUi-target .noUi-base {width: 100%; height: 100%; position: relative; z-index: 1;} .prijsFilterHolder .noUi-target .noUi-base .noUi-connect, .prijsFilterHolder .noUi-target .noUi-base .noUi-origin {will-change: transform; position: absolute; z-index: 1; top: 0; left: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat;} .prijsFilterHolder .noUi-target .noUi-base .noUi-connect {background: #000; height: 100%; width: 100%;} .prijsFilterHolder .noUi-target .noUi-base .noUi-origin {width: 10%; height: 0; left: auto; right: 0;} .prijsFilterHolder .noUi-target .noUi-base .noUi-origin .noUi-handle {width: 16px; height: 16px; left: -9px; top: -7px; outline: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; border: 1px solid #D9D9D9; border-radius: 50%; background: #FFF; cursor: ew-resize; right: -9px; left: auto;} .prijsFilterHolder .noUi-target .noUi-base .noUi-origin .noUi-handle .noUi-touch-area {height: 100%; width: 100%;} /* Einde prijsFilter */ /* Dropdown menu ipv selectboxes */ .dropdown {position:relative; cursor:pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select:none; margin: 0 0 10px;} .dropdown .keuze {color: #000; display: flex; background: #fff; border: 1px solid #ddd; padding: 8px 10px; border-radius: 3px; transition: all .3s ease; line-height: normal;} .dropdown .keuze:after {content: "\f0d7"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin: auto 0 auto auto; color: #777;} .dropdown ul {position: absolute; list-style: none; padding:0; margin:0; max-height:0em; overflow:hidden; transition:all .3s ease; z-index: 9; box-shadow:0 1px 3px rgba(0,0,0,.2); width:100%; border-radius: 0 0 3px 3px;} .dropdown.openGeklapt .keuze {border-radius:3px 3px 0 0;} .dropdown.openGeklapt ul {display: block; max-height:20em; margin-bottom:1em; overflow: scroll; z-index: 10;} .dropdown ul li {list-style: none; padding:0; margin:0; border-bottom: 1px solid #eee;} .dropdown ul li a {text-decoration: none; display: block; transition: all .3s ease; background-color: #fff; padding: 8px 10px; line-height: normal; color: inherit;} .dropdown ul li a:hover {background-color:#eee;} .dropdown ul li.active {border: 0;} .dropdown ul li.active a {background-color:#eee; color:#000; font-weight:bold;} /* Einde Dropdown menu ipv selectboxes */ /* Supermenu */ .supermenu ul.laatste {margin-right:0 !important;} .supermenu ul.laatste li {display: none;} .supermenu ul.laatste li.title {display: list-item;} .supermenuInhoud ul.laatste li.title {margin-top:0;} .supermenuTrigger {user-select: none; -moz-user-select: none; left: 310px; position: absolute; top: 1px;} .supermenuTrigger:hover {cursor: pointer;} .supermenuTrigger .fa {margin: 0 5px 0 0;} .supermenuInhoud {background-color: #fff; box-shadow: none; opacity: 0; pointer-events: none; position: absolute; top: 90%; transition: all 0.3s ease 0s; width: 100%; box-sizing: border-box; padding: 35px; line-height: 23px; visibility: hidden; z-index: 13;} .supermenuInhoud .supermenu {max-height: calc(100vh - 210px); overflow-y: scroll;} .supermenuInhoud.open {opacity: 1; pointer-events: all; top: 100%; box-shadow: var(--box-shadow-venster); visibility: visible;} .supermenuInhoud::before {background-image: url("images/hMenuActiefGroot.png"); background-position: center bottom; background-repeat: no-repeat; content: ""; display: block; height: 14px; position: absolute; right: 290px; top: -14px; width: 32px;} .supermenu ul {margin:0px; padding:0px; list-style:none; float: left;} .supermenu ul.kolom7 {width:13.3%; margin-right:1%;} .supermenu ul.kolom6 {width:15.7%; margin-right:1%;} .supermenu ul.kolom5 {width:19.1%; margin-right:1%;} .supermenu ul.kolom4 {width:24.1%; margin-right:1%;} .supermenu ul.kolom3 {width:32.5%; margin-right:1%;} .supermenu ul.kolom2 {width:49.4%; margin-right:1%;} .supermenuInhoud ul {list-style-type: none; margin: 0; padding: 0;} .supermenuInhoud ul li.leeg {display: none;} .supermenuInhoud ul li a {color: #737373; text-decoration: none; font-size:13px;} .supermenuInhoud ul li a:hover {text-decoration: underline;} .supermenuInhoud ul li.title:first-of-type {margin-top:0;} .supermenuInhoud ul li.title {margin-top:23px;} .supermenuInhoud ul li.title a {color: #003e5d; font-weight: bold; font-size: 15px; white-space: nowrap;} /* Einde supermenu */ /* Abonnementen */ .aboHolder .abonnement {border:1px solid #eee; margin-bottom:30px; padding:20px;} .abonnement .links {display: block; float:left; width:40%;} .abonnement .rechts {display: block; float:right; width:55%;} .abonnement .links .abonnementnummer .nummer {padding-left:0.25em;} .abonnement .links .afbeelding img.afbeelding {width:100%; height:auto;} .abonnement .rechts .leverdagSelectie {margin-top:40px;} .abonnement .rechts .kalender {margin-top:20px;} .abonnement .agenda {width:100%;} .focus {box-shadow: 0 1px 7px 2px rgba(200,0,0,.3);} .agenda .gepauzeerd {text-decoration: line-through; opacity:.8;} .leverdagSelectie .dropdown .keuze {display: none;} .leverdagSelectie .dropdown .keuze:before {display: none;} .leverdagSelectie .dropdown ul {display: block; max-height: none; list-style: none; padding:0; margin:0; position:relative; box-shadow:none; overflow: visible;} .leverdagSelectie .dropdown.openGeklapt ul {display: block; max-height: none; margin:0; overflow: visible; padding:0;} .leverdagSelectie .dropdown ul li {display: inline-block; border:0; width:22%; margin: 5px 10px 5px 0;} .leverdagSelectie .dropdown ul li a {border: 2px solid #ddd; padding:5px 12px; text-align: center; border-radius:5px; font-weight: bold;} .leverdagSelectie .dropdown ul li a:hover {border: 2px solid #000; background-color:#fff;} .leverdagSelectie .dropdown ul li.active a {background-color:#fff; border:2px solid #000; color:#000;} .leverdagBox {padding:10px 15px; background-color:#eee; border-radius:5px;} .leverdagBox a.pauzeerLevering {display: block; text-align: center;} .leverdagBox a.hervatLevering {display: block; text-align: center;} /* Einde Abonnementen */ /* PDF keuze holder */ .pdfkeuzeholder .beschrijving {margin: 0 0 15px;} .pdfkeuzeholder .beschrijving p:last-child {margin: 0;} .pdfkeuzeholder .pdfkeuze {border: 1px solid #ddd; margin: 0 0 10px; padding: 10px; position: relative; transition: .3s all ease;} .pdfkeuzeholder .pdfkeuze:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);} .pdfkeuzeholder .pdfkeuze:last-child {margin: 0;} .pdfkeuzeholder .pdfkeuze .inner {display: table; width: 100%;} .pdfkeuzeholder .pdfkeuze .inner .col1 {display: table-cell; vertical-align: middle; width: 90px;} .pdfkeuzeholder .pdfkeuze .inner .col2 {display: table-cell; vertical-align: top; width: auto; padding: 0 15px;} .pdfkeuzeholder .pdfkeuze .inner .col3 {display: table-cell; vertical-align: middle; width: 125px;} .pdfkeuzeholder .pdfkeuze .inner .titel {margin: 0 0 15px;} .pdfkeuzeholder .pdfkeuze .inner .titel h3 {color: #666;} .pdfkeuzeholder .pdfkeuze .inner .button {box-sizing: border-box; margin: 0 0 5px; padding: 8px 2px !important; text-align: center; width: calc(50% - 2px);} .pdfkeuzeholder .pdfkeuze .inner .button.download {border: medium none;} .pdfkeuzeholder .pdfkeuze .inner .button.printen {background-color: #dbdbdb; border: medium none; color: #565656;} /* Einde PDF keuze holder */ /* Kenteken tool */ .kenteken {padding:20px; background-color: #eee; border: 1px solid #dfdfdf; border-radius: 5px} .kenteken .opKenteken .kentekenplaat {float:right; margin-left:1em;} .kenteken .opKenteken .kentekenplaatHouder {background:url("images/kenteken.png"); background-size: cover; border-radius:5px; margin-left:1em; display: inline-block;} .kenteken .opKenteken .kentekenplaat input {outline: none; padding:0; line-height:36px;background:transparent; border:0; margin:0 0 0 30px; font-weight: bold; color:#000; font-size:18px; width:100px; text-transform: uppercase;} .kenteken .opMerk {clear:both;} .kenteken .opMerk .keuzeHouder {display: inline-block; position:relative; margin-right:10px;} .kenteken .opMerk .keuzeHouder select {-moz-appearance: none; box-shadow: none; -webkit-appearance: none; -webkit-box-shadow: none; outline:0; border:0; background-color:#fff; padding: 7px 30px 7px 10px; height: auto; float: none !important; margin: 0 !important; font-size:inherit; font-family: inherit; width:100%;} .kenteken .opMerk .keuzeHouder:after {content: ' '; position: absolute; top: 50%; right: 10px; border: 4px transparent solid; border-bottom: none; border-top-color: #333; z-index: 1; margin-top: -2px; pointer-events: none;} .kenteken a.kentekenZoeken {padding:0px 20px; font-size:15px; line-height:36px; position: relative; top: -1px;} .kentekenMeerdere {background-color: #eee; border: 1px solid #dfdfdf; border-radius: 5px; padding:20px; margin-top:20px;} .kentekenMeerdere table {width:100%; border-spacing: 0;} .kentekenMeerdere tr th {text-align: left; font-weight: bold;} .kentekenMeerdere tr td {border:0; border-bottom:1px solid #eee; transition: all .3s ease; padding:8px 12px; background-color:#eee; cursor: pointer;} .kentekenMeerdere tr:hover td {background-color:#000; color:#fff;} .kentekenMeerdere tr:last-of-type td {border:0;} /* Einde Kenteken tool */ /* Melding na artikel toevoegen aan winkelmandje */ #extraSchermWinkelmand {z-index: 200; display: table; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-image: url('images/zwart/20.png'); height: 100%; width: 100%;} #extraSchermWinkelmand .schermWinkelMandje {display: table-cell; vertical-align: middle; text-align: center;} #extraSchermWinkelmand .schermWinkelMandje .melding {background-color: #fff; border-radius: 3px; box-shadow: var(--box-shadow-venster); box-sizing: border-box; display: inline-block; margin: 10px; max-height: calc(100vh - 20px); max-width: 450px; min-width: 450px; padding: 0; position: relative; text-align: left; z-index: 201;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven {padding: 20px; display: flex; position: relative;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #64a43a; opacity: .1; border-radius: 3px 3px 0 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder {position: relative; width: 100%; max-width: 70px; margin-right: 15px;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder img {position: absolute; top: 0; right: 0; left: 0;bottom:0; max-height: 100%; max-width: 100%; margin: auto; height: auto !important; width: auto !important;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder .verhouding {display: block; padding-bottom: 100%;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud {margin: auto 15px auto 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud .h3 {color: #64a43a;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud p {margin: 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .icoon {background-color: #64a43a; border-radius: 3px; color: #fff; font-size: 11px; padding: 4px; position: relative; margin: auto 0 auto auto; line-height: 1;} #extraSchermWinkelmand .schermWinkelMandje .melding .meeBestellenTekst {padding: 20px; text-align: center;} #extraSchermWinkelmand .schermWinkelMandje .melding .meeBestellenTekst p {margin: 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meebestellen {max-height: 45vh; overflow: hidden; overflow-y: auto;} #extraSchermWinkelmand .schermWinkelMandje .melding .h3 {margin: 0;} #extraSchermWinkelmand .schermWinkelMandje .knoppen {padding: 20px 15px; display: flex; border-top: 1px solid #eee;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a {width: calc(50% - 10px); margin: 0 5px;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a i {margin-left: .5em;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a:hover {cursor: pointer;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {background: #000; color: #fff;} .schermWinkelMandje.meebestellenActief .melding {max-width: 650px !important;} .schermWinkelMandje .artikelnr > .titel {padding-right: 0.3em;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding: 0 20px 20px;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .afbeeldingHouder {max-width: 50px; margin-right: 15px; } #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .prijzen {width: 120px; text-align: right;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen, #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .favorieten, #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .meerinfo, #extraSchermWinkelmand .schermWinkelMandje .shopCompact .artikel .bestellen {display: none;} #extraSchermWinkelmand .schermWinkelMandje .shopTegel {margin: -5px 5px 5px;} #extraSchermWinkelmand .schermWinkelMandje .shopTegel .artikel {width: calc(33.3333% - 10px);} /* Einde Melding na artikel toevoegen aan winkelmandje */ /* Formules met variaties */ .formuleHolder {text-align: left; position: relative; z-index: 3;} .formuleHolder > .titel {font-style: normal; text-decoration: none; margin: 0 0 10px 0; line-height: 1.35em; color: #222; font-size: 16px; font-weight: bold;} .formuleHolder .formuleInputVeldHolder {display: flex; margin-bottom:10px;} .formuleHolder .formuleInputVeldHolder .formuleInputVeld {width: 50%;} .formuleHolder .formuleInputVeldHolder .formuleInputVeld:nth-child(1) {margin-right: 10px;} .formuleHolder .formuleInputVeldHolder .formuleInputVeld:nth-child(3) {margin-left: 10px;} .formuleHolder label {display: block;} .formuleHolder input[type="text"] {display: block; width:100%;} .formuleHolder .formuleMeerprijs .prijs {font-size: inherit !important;} .formuleHolder.reset {margin:0;} .formuleHolder.reset > .titel {display: none;} .formuleHolder.reset .content {background:transparent; padding:0;} /* Einde Formules met variaties */ /* Hover Menu */ /* .winkelmenu.art-menu li {position: static;} */ .winkelmenu.art-menu li .t.hoverMenuActief::after {font-size: 13px; content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin: auto auto auto 5px; color: #777;} .hoverMenu {background-color: #fff; text-align: left; left: 0; position: absolute; width: 400px; border-radius: 3px; box-shadow: var(--box-shadow-venster); overflow: hidden; transition: .3s all ease; opacity: 0; pointer-events: none; transform: translateY(-10px); visibility: hidden; z-index: 10;} .hoverMenu.open {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11;} .hoverMenu .categorie {padding: 20px 20px 0;} .hoverMenu .categorie .afbeelding {float: left; margin: 0 20px 0 0;} .hoverMenu .categorie .afbeelding.geen {display: none;} .hoverMenu .categorie .kop {margin: 0; line-height: 1.35em; color: #222; font-size: 16px; font-weight: bold} .hoverMenu .categorie .aankeiler {line-height: 1.95em;} .hoverMenu .kolommen {padding: 0 20px 20px 20px; display: flex; flex-wrap: wrap;} .hoverMenu .kolommen .kolom {width: 50%; padding: 5px 0; box-sizing: border-box; hyphens: auto;} .hoverMenu .kolommen .kolom a {color: #777} .hoverMenu .kolommen .kolom a:hover {text-decoration: underline;} .hoverMenu .kolommen .kolom .afbeelding.geen {display: none;} .hoverMenu .kolommen .kolom > ul {font-size: 12px;} .hoverMenu .kolommen .kolom > ul li {line-height: 1.75em; display: list-item;} .hoverMenu .kolommen .kolom > ul li.separatorHouder {display: none;} .hoverMenu img {width:100px; height:100px;} /* Einde Hover Menu */ /* Social media knoppen */ .shareKnoppen {position: relative;} .shareKnoppen a.deelKnopje {display: inline-block; position: relative; margin: 5px 2px 0 0; text-decoration: none; padding: 6px 10px; background: #eee; border-radius: 3px; line-height: normal; font-size: 13px;} .shareKnoppen a.deelKnopje:hover {background: #ddd;} .shareKnoppen a.deelKnopje i {margin-right: 5px; width: 15px; text-align: center;} /* Einde Social media knoppen */ /* Snelbestellen */ .snelbestellenHolder {background-color: #f2f2f0; border-radius: 3px; padding: 20px; margin-bottom: 20px; position: relative;} .snelbestellenHolder .hidden {display: none;} .snelbestellenHolder .invoer {display: flex;} .snelbestellenHolder .invoer .titel {font-weight: bold; font-size: 16px; color: #000;} .snelbestellenHolder .invoer .inputAantal input {width: 75px;} .snelbestellenHolder .invoer > div {margin: auto 10px auto 0;} .snelbestellenHolder .invoer > .snelbestellenKnop {margin: auto 0 auto auto;} .snelbestellenHolder .invoer #snelbestellenArtikelomschrijving {line-height: normal;} .snelbestellenHolder .invoer #snelbestellenPrijs {font-weight: bold; white-space: nowrap;} .snelbestellenKnop.verborgen {opacity:.3;} .snelbestellenKnop.verborgen a {cursor: not-allowed;} .autocomplete-selected {background:#eee;} .snelbestellenHolder .autocomplete-suggestions {position: absolute !important; top: 100% !important; left:0; right:0; background: #fff; width: 100% !important; padding: 0; box-sizing: border-box; border: 1px solid #ddd; border-radius: 3px; box-shadow: var(--box-shadow-venster); max-height: 470px !important; overflow-y: auto;} .snelbestellenHolder .autocomplete-suggestions .autocomplete-suggestion {padding: 5px 10px; border-bottom: 1px solid #ddd; cursor: pointer;} .snelbestellenHolder .autocomplete-suggestions .autocomplete-suggestion:hover {background-color: #eee;} .snelbestellenHolder .autocomplete-suggestions .autocomplete-suggestion strong {color:#000;} .snelbestellenHolder .omschrijving {width: 150px; display: inline-block;} .snelbestellenHolder .invoer > div.snelBestellenUpload {position: relative; margin-left: 10px;} .snelbestellenHolder .snelBestellenUpload {position: relative;} .snelbestellenHolder .snelBestellenUpload input[type=file] {position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; right: 0; bottom: 0; width: 100%;} .snelbestellenHolder .tooltip.sbUpload {margin-right: 0;} .snelbestellenHolder .tooltip.sbUpload::before {display: block;} /* Einde Snelbestellen */ /* Instellingen scherm */ table.instellingen {width: 100%; border:0; border-spacing: 0; table-layout: fixed;} table.instellingen tr td {vertical-align: middle;} table.instellingen .beschrijving {width:200px;} table.instellingen tr td input {width:100%; box-sizing: border-box;} /* Einde instellingen scherm */ /* Nieuwe lijsten */ /* Lijsten */ .lijstOpties {margin-bottom: 20px;} .lijstOpties .knoppen {float:right;} .lijstOpties .knoppen a.knop {margin-right:0;} /* Zoeken */ .lijstOpties .zoek {display: inline-table; position: relative;} .lijstOpties .zoek .veld {display: table-cell; z-index: 10; position: relative; overflow: hidden; border-radius: 3px 0 0 3px; background:#eee;} .lijstOpties .zoek .veld input {margin:0; border-right:0; border-top-right-radius: 0; border-bottom-right-radius: 0; background:#fff;} .lijstOpties .zoek .knop {border:1px solid #ccc; display: table-cell; color:#999; position: relative; padding:0 8px; transition: all .3s ease; cursor: pointer; z-index: 1; border-radius: 0 3px 3px 0; vertical-align: middle; background:#eee; line-height: 0;} .lijstOpties .zoek .knop:hover {color:#468ff7;} .lijstOpties .zoek a.toonAlles {border-left: 1px solid #ccc; padding-left: 20px; margin-left: 20px;} table.lijst {width:100%; border-spacing: 0; table-layout: auto; margin: 0 0 20px; background-color: #fff; border: 1px solid #ddd; border-bottom-width: 2px; border-radius: 5px; margin-bottom: 15px; line-height: normal;} table.lijst tr th {border-bottom: 1px solid #ddd;} table.lijst tr th, table.lijst tr td {text-align: left; padding: 10px;} table.lijst tr td a {color: inherit;} table.lijst tr:nth-child(even) th, table.lijst tr:nth-child(even) td {background: #f5f5f5} table.lijst tr.inactief td {color:#aaa;} table.lijst tr td.id {width: 30px;} table.lijst tr td.omschrijving a {text-decoration: none;} table.lijst tr td.omschrijving .online:empty {display: none;} table.lijst tr td.omschrijving .online {display: inline-block; background: #ededed; border-radius: 3px; line-height: 1; padding: 6px 8px 4px; margin-left: 10px; font-size: 12px;} table.lijst tr th.bedrag, table.lijst tr td.bedrag {text-align: right; white-space: nowrap;} table.lijst tr td.knoppenHouder {font-size: 16px; text-align: right; white-space: nowrap;} table.lijst tr td.knoppenHouder a {font-size: inherit; padding: 0 5px; position: relative;} table.lijst tr td.knoppenHouder a .tekst {background: #444; border-radius: 3px; top: -33px; color: #fff; line-height: 1.25em; white-space: nowrap; padding: 5px 9px; position: absolute; transition: .3s all ease; left: 50%; font-size: 11px; transform: translateX(-50%); opacity: 0; pointer-events: none; font-weight: normal;} table.lijst tr td.knoppenHouder a .tekst::before {border: solid; border-color: #444 transparent; border-width: 6px 6px 0px 6px; bottom: -4px; content: ""; position: absolute; transition: .3s all ease; left: 50%; transform: translateX(-50%);} table.lijst tr td.knoppenHouder a:hover .tekst {opacity: 1; pointer-events: all;} table.lijst tr.footer td {border-top: 1px solid #ddd; font-weight: bold; color: #464646;} table.lijst tr.footer td.bedrag {font-size: 17px;} /* Einde nieuwe lijsten */ /* Groothandel en dealers */ .dealerAanmakenVeld {padding:0 30px; background:#eee; overflow:hidden; max-height: 0; transition: all .3s ease; opacity:0; margin-bottom:20px; border-radius: 4px;} .dealerAanmakenVeld.open {padding:30px; max-height:999px; opacity: 1;} .dealerImportVeld {padding:0 30px; background:#eee; overflow:hidden; max-height: 0; transition: all .3s ease; opacity:0; margin-bottom:20px; border-radius: 4px;} .dealerImportVeld.open {padding:30px; max-height:999px; opacity: 1;} .dealerImportVeld input[type="file"] {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;} .dealerImportVeld input[type="file"] + label {font-size:inherit; color: #fff; background-color: #000; display: inline-block; cursor: pointer; padding:5px 10px;} .dealerImportVeld input[type="file"]:focus + label, .dealerImportVeld input[type="file"] + label:hover {background-color:#000;} .dealerOrdersTonen {background:#fff;} .dealerOrders {padding:0 30px; background:#eee; overflow:hidden; height:0; transition: all .3s ease; opacity:0; margin-bottom:20px; border-radius: 4px;} .dealerOrders.open {padding:30px; height:auto; opacity: 1;} .mijnDealersOrdersSluiten {float:right;} .stap.twee .groothandelSelectie ul {list-style: none; padding:0; margin:0;} .stap.vier .groothandelSelectie {margin-bottom:10px;} /* Barcodescanner */ a.barcodescannerLink {text-decoration: none; position: absolute;} a.barcodescannerLink img {width:40px; height:auto;} a.barcodescannerSluiten {position: absolute; top: 0; right:0; background:#d55929; color:#fff; padding:10px 15px; text-decoration: none; border-radius: 0 0 0 5px;} .barcodescannerHouder {display: none;} .barcodescannerHouder.open {display: block; padding:30px; background:#fff; border-radius:5px; overflow:hidden; position: fixed; top:10%; left:50%; width:700px; margin-left:-350px; z-index:500; box-shadow: var(--box-shadow-venster); box-sizing: border-box;} .barcodescannerHouder ::before {bottom:auto; transition: all .3s ease;} .barcodescannerHouderBg {display: none;} .barcodescannerHouderBg.open {display: block; position: fixed; top:0%; bottom:0; left:0; right:0; z-index:499; content:" "; background: rgba(255,255,255,.7)} #barcodeScannerCamera {position: relative; min-height:200px; background:url(images/loader.gif) no-repeat center center;} #barcodeScannerCamera video {position: relative; border-radius: 5px;} #barcodeScannerCamera canvas {top:0; left:0; position: absolute; z-index: 1; width:100%; height:auto;} #barcodeScannerCamera::before { display: block; position: absolute; top: 50%; left: -10px; right: -10px; border-bottom: 4px solid #d55929; content: ""; height: 0; z-index: 1; border-radius: 5px; animation: MoveUpDown 2s ease infinite; } @keyframes MoveUpDown {0% {top: 30%; opacity: .3;} 70% {top: 70%; opacity: .8;} 100% {top: 30%; opacity: .3;}} /* Einde Barcodescanner */ /* Valuta's */ .extrabovenkantHolder .valuta {position: relative; cursor: pointer; margin: auto 0 auto 10px; width: 80px; height: 30px;} .extrabovenkantHolder .valuta .titel {display: none;} .extrabovenkantHolder .valuta ul {margin: 0; width: 100%; padding: 0; position: absolute; list-style: none; overflow: hidden; max-height: 30px; transition: .3s all ease;} .extrabovenkantHolder .valuta:hover {z-index: 5;} .extrabovenkantHolder .valuta:hover ul {max-height: 150px; box-shadow: var(--box-shadow-venster); border-radius: 0 0 3px 3px; background:rgba(255,255,255,1);} .extrabovenkantHolder .valuta ul li {padding: 0 8px; line-height: 30px;} .extrabovenkantHolder .valuta ul li:last-child {border: 0;} .extrabovenkantHolder .valuta ul li a {color: inherit; text-decoration: none;} .extrabovenkantHolder .valuta ul li .symbool {font-weight: bold; float: right; margin-left: 5px; padding-left: 5px;} /* Einde valuta's */ /* Configuratie artikeldetail */ .configurator {max-width:1200px; margin:0 auto;} .configurator .tekstblokBoven {margin-bottom: 50px;} .configuratieOptie {display:grid; grid-template-columns: 1fr 2fr; gap:20px; transition: all .3s ease; padding:0; background:#fff; margin-bottom:50px;} .configuratieOptie:last-of-type {margin-bottom:0;} .configurator p:last-of-type {margin-bottom:0;} .configuratorAlert {border: 4px solid #d55929;} .configuratieOptie .optie {position:relative; cursor:pointer; display:grid; grid-template-columns: 1fr 5fr 1fr; border:2px solid #ddd; border-radius:5px; overflow:hidden; margin-bottom: 10px; transition: all .3s ease; background:#fff;} .configuratieOptie .optie:hover {border:2px solid #000;} .configuratieOptie .optie::before {position: absolute; top:10px; left:10px; content:"\f058"; font-family: "Font Awesome 5 Pro"; color:#64A43A; font-weight: 900; font-size:24px; padding:3px; border-radius: 100%; background:#fff; line-height: 1; opacity:0; transition: all .3s ease;} .configuratieOptie .standaard::after {position: absolute; top:10px; right:10px; font-size:12px; content:"Standaard"; color:#fff; background:#468ff7; padding:0px 10px; border-radius: 5px;} .configuratieOptie .optie .afbeelding {line-height:0;} .configuratieOptie .optie .afbeelding img {width:150px; height:auto;} .configuratieOptie .optie .tekst {padding: 20px; display:flex; flex-direction: column; justify-content: center;} .configuratieOptie .optie .prijsInfo {padding: 20px; display:flex; flex-direction: column; justify-content: center; font-weight: bold; color:#000;} .configuratieOptie .optie .prijsInfo .btw {white-space: nowrap; display:none; font-weight: normal; font-size:80%;} .configuratieOptie .optie .prijsInfo .configuratieAantalOpTeGeven {z-index:21} .configuratieOptie.fout {background:rgba(255,0,0,.1); padding:30px; border-radius: 5px;} .configuratieOptie .prestypeCompact {display:flex; gap:10px} .configuratieOptie .optie.compact {text-align: center; display: block;} .configuratieOptie .optie.compact .tekst {padding:10px; line-height: 1.35em;} .configuratieOptie .optie.compact .dochterOmschrijving {font-weight: bold;} .configuratieOptie .optie.compact .prijsInfo {padding:10px;} .configuratieTotaal {background:#eee; padding:20px; margin-top:50px; position: sticky; bottom:0; display: flex; z-index:20; border-radius: 0;} /* .configuratieTotaal .bestellen {} */ .configuratieAantalTeBestellen {margin-left: auto;} .configuratieTotaal .bestellen .configuratieBestelknop.disabled { pointer-events: none; opacity: .5} .optieHolder {position: relative;} .optieHolder.uitgesloten {opacity: .5;} .configuratieOptie input:checked ~ div.optie {border:2px solid #64A43A;} .optieHolder > input:checked ~ .optie:before {opacity:1;} .optieHolder > input {position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; z-index: 20; opacity: 0;} .optieNietOpVoorraad {border:2px solid yellow;} /* Einde configuratie artikeldetail */ /* Maatwerk */ .shopArtikel .shopLijst1Bestel_1, .shopArtikel .shopLijst1Bestel_2 {background-color:#eee; margin:15px; margin-right:0; margin-top:30px; padding:10px; border-radius:5px;} .shopArtikel .wButBestel {background-color: #000; border: 0 none; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); font-size: 14px; padding: 7px 35px !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);} .shopArtikel .shopLijst1Aantal {font-size: 14px; font-weight: normal; height: 28px; margin: 0; padding: 0 5px; width: 32px;} .artikelGroepPrijs {display:none;} .klantoordeel {display: inline-block; background: #eee; border-radius: 3px; padding: 10px; box-sizing: border-box;} .klantoordeel > a {font-weight: bold; text-decoration: none;} .klantoordeel > a strong {margin-left: 10px;} .klantoordeel > div {display: flex;} .klantoordeel > div strong {margin: auto 0 auto auto;} /* --- */ .kenmerkgroepKeuze .artikel.actief {} .kenmerkgroepKeuze .artikel.actief a.link {cursor: default;} .kenmerkgroepKeuze .artikel.bestaatNiet {opacity: .3; cursor: not-allowed;} .kenmerkgroepKeuze .artikel.bestaatNiet a.link {pointer-events: none; } /* Bedrukken */ .bedrukkenSets {margin-top: var(--space20);} .bedrukkenSets p {margin: 0 0 var(--space10) 0;} .bedrukkenSet {padding:var(--space15); border-radius: var(--border-radius); margin-bottom: var(--space10); background-color:var(--color3);} .bedrukkenSetTitel {display: flex; align-items: center; font-weight: bold;} .bedrukkenHelpKnop {margin: 0 0 0 auto;} .bedrukkenOptiesUitleg {margin-bottom: var(--space10);} .bedrukkenOptiesHouder {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space10);} .bedrukkenOptie {padding:var(--space10); background-color:#fff; border-radius: var(--border-radius); border:1px solid var(--borderColor);} .bedrukkenOptie:hover, .bedrukkenOptie:has(input:checked) {border-color: var(--color1);} .bedrukkenOptie, .bedrukkenOptie * {cursor: pointer;} .bedrukkenOptie label {} .bedrukkenOptie label .omschrijving {} .bedrukkenOptie label .afbeelding {margin-top:5px;} .bedrukkenOptie label .afbeelding img {width:100%; height:auto;} .bedrukkenOptieDetails {padding: var(--space10); border-radius: var(--border-radius); border: 1px solid var(--borderColor); margin: var(--space10) 0; background-color: #FFF;} .bedrukkenOptieDetails .bedrukkenOptieAfbeelding img {max-width: 200px; height:auto; width:100%;} .bedrukkenOptieDetailsInhoud .kolommen {display: grid; grid-template-columns: 1fr 2fr; gap: var(--space20);} .bedrukkenOptieLogoInhoudHouder, .bedrukkenOptieTekstInhoudHouder, .bedrukkenOptieLaterInhoudHouder {margin-left: var(--space20); background: var(--color3); padding: var(--space10); border-radius: var(--border-radius);} /* Logo/afbeelding upload */ .bedrukkenOptieLogoUpload .bedrukkenLogoUploadKnop {margin-bottom: var(--space10);} .bedrukkenOptieLogoInhoud {padding: var(--space10);} .bedrukkenLogoUploadKnop {position: relative; width: fit-content;} .bedrukkenLogoUploadKnop .bedrukkenOptieLogoUploadInput {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; opacity: 0; cursor: pointer;} .bedrukkenOptieUploadAfbeeldingPad {line-height: 1.35em;} .knop.knopUploadVerwijderen {background: #b92223;} .knop.knopUploadVerwijderen:hover {background: #a61c1f;} .bedrukkenOptieLogoUploadPreview img {max-width: 100%; max-height: 200px;} /* Einde logo/afbeelding upload */ /* Teskt optie */ .bedrukkenOptieTekstStyle {margin-bottom: var(--space10);} .bedrukkenOptieTekstStyle .bedrukkenOptieTekstKleur {height: calc(15px + 20px);} .bedrukkenOptieTekstVoorbeeld {margin-top: var(--space10); background: url(/skin_default/images/checkboard.svg); line-height: 1; padding: var(--space10); min-height: 60px;} .bedrukkenOptieTekstVoorbeeld span {font-size: 40px !important;} /* Einde tekst optie */ /* Bedrukken winkelmandje */ .artikelBedrukkenSet {margin-top: var(--space10); background: var(--color3); padding: var(--space10); border-radius: var(--border-radius);} .artikelBedrukkenSet .artikelBedrukkenSetOmschrijving {font-weight: bold;} .artikelBedrukkenSetOpties {padding-left: var(--space15) !important;} .artikelBedrukkenSetOptieTitel {padding-top: var(--space10); font-weight: bold; line-height: 1.85em;} .bedrukkenSetRegelsHouder {margin: 0 var(--space20); position: relative; background-color: #FFF; padding: var(--space10); border-radius: var(--border-radius);} .bedrukkenSetRegelOptieTitel {line-height: 1.35em; font-weight: bold;} .bedrukkenSetRegelOptieContent {padding-left: var(--space20); line-height: 1.35em;} .kassaArtikelen .artikel td.regelStuk, .kassaArtikelen .artikel td.aantallen, .kassaArtikelen .artikel td.regelTotaal {vertical-align: baseline;} /* Einde bedrukken */ .currentStaffel {background-color: #eef;border-radius: 3px;} .prijsafspraakLos td {padding: 3px 6px;} .prijsafspraakLos tr {display: block; box-sizing: border-box;}