/* 
###
BACKSTAGE 5.1 CSS > SHOP PLUGIN
###
*/

*.mob {
    display: none;
}

/* ##### */
/* ##### */
/* ##### */
/* PRODUCT_CATEGORY_LISTING > shopcategory.php */


/* NOG TE SORTEREN */

.shop_products { position: relative; display: flex; flex-direction: column; flex: 1; padding: 75px; width: 100%; border-radius: 10px; box-sizing: border-box; background-color: #fff; }
.content #submenu + .shop_products { }
body.webshop .shop_products { padding: 0; width: 100%; max-width: none; border-radius: 0; background-color: transparent; }
.shop_products h1 { width: 100%; }

.shop_products .page_content { padding: 0!important; border-radius: 0!important; background-color: transparent!important; }
.shop_products .shop_products_intro { }

body.pid119 .shop_products .shop_products_intro p:last-of-type { margin-bottom: 40px; }

.shop_products .shop_products_container { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; order: 3; width: 100%; }

body.pid592 .shop_products { margin-right: auto; max-width: 1010px; }


/* SHOPCATEGORY */

/* delen */
.share { display: flex; align-items: center; order: 2; column-gap: 10px; margin-top: 42px; }
body.news .share { margin-top: 60px; }
.share span { position: relative; top: -1px; margin-right: 5px; font-size: 16px; color: #323232; font-weight: 700; opacity: 0.85; }
.share .item { width: 36px; height: 36px; border: 1px solid #ccc; border-radius: 50%; }
.share .item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.share .item a img { display: block; width: 16px; height: 16px; opacity: 0.65; }
.share .item:hover { border: 1px solid #32aaa1; }
.share .item:hover a img { filter: invert(60%) sepia(11%) saturate(2285%) hue-rotate(127deg) brightness(94%) contrast(83%); opacity: 1; }

.product_column.second .share { flex-wrap: wrap; gap: 10px; margin-top: 15px; padding: 45px; padding-top: 35px; border-radius: 10px; background-color: #fff; }
.product_column.second .share span { width: 100%; font-size: 20px; color: #1a6060; }

.shop_products_container h2 { margin-top: 25px; margin-bottom: 25px; width: 100%; font-size: 21px; font-weight: 800; }
.shop_products_container h2:first-of-type { margin-top: 10px; }

body:not(.webshop) .shop_products .share + .shop_products_container { padding-top: 60px!important; border-top: 1px solid #ddd; }
body:not(.webshop) .shop_products .share + .shop_products_container h2 { margin-top: 25px; margin-bottom: 25px; width: 100%; font-size: 21px; font-weight: 800; }
body:not(.webshop) .shop_products .share + .shop_products_container h2:first-of-type { margin-top: -15px; }

body:not(.webshop) .shop_products .shop_products_container .anchor { top: -165px; }

/* producten (niet in webshop) */
body:not(.webshop) .shop_products .shop_products_container { gap: 30px; margin: 0; margin-top: 60px; padding: 0; padding-top: 30px; width: 100%; border-top: 1px solid rgb(50 170 161 / 25%); }
/*body:not(.webshop) .shop_products .shop_products_container:before { margin-bottom: 30px; content: "Producten"; font-family: 'Manrope', sans-serif; font-size: 24px; color: #333; font-weight: 900; line-height: 1.3; }*/

body:not(.webshop) .shop_products .products { position: relative; width: 100%; z-index: 1; }
body:not(.webshop) .shop_products .products.producten:after { position: absolute; top: 65px; left: 0; width: 30px; height: 30px; content: ""; z-index: -1; background-image: url("/images/icons/loading.gif"); background-position: center; background-size: contain; background-repeat: no-repeat; }

body:not(.webshop) .shop_products .product { position: relative; margin: 0; margin-bottom: 20px; width: 100%; border-radius: 5px; overflow: hidden; box-sizing: border-box; background-color: #eaf6f5; }
body:not(.webshop) .shop_products .product:last-of-type { margin-bottom: 0; }
body:not(.webshop) .shop_products .product:hover { background-color: rgb(50 170 161 / 7%); }
body:not(.webshop) .shop_products .product a { display: flex; text-align: center; color: var(--main); }
body:not(.webshop) .shop_products .product a .img { width: 20%; background-color: #32aaa1; }
body:not(.webshop) .shop_products .product a .img img { position: relative; display: block; width: 100%; box-sizing: border-box; opacity: 0.85; filter: grayscale(0.5); }
body:not(.webshop) .shop_products .product a .img .icon { display: none; }
body:not(.webshop) .shop_products .product a .product_info { display: flex; padding: 0; width: 80%; }
body:not(.webshop) .shop_products .product a .product_info span.title { display: flex; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; font-weight: 400; line-height: 1.2; text-align: left; box-sizing: border-box; }
body:not(.webshop) .shop_products .product a .product_info span.price { display: flex; align-items: center; justify-content: flex-start; margin: 0; width: 20%; font-size: 18px; font-weight: 700; }
body:not(.webshop) .shop_products .product a .product_info .view { display: none; }
body:not(.webshop) .shop_products .product a .product_info .arrow { position: relative; display: flex; right: 0; width: 30px; height: 100%; }
body:not(.webshop) .shop_products .product a .product_info .arrow img { width: 100%; }

body:not(.webshop) .shop_products .product:not(.bol) + .product.bol { /*overflow: visible;*/ }
body:not(.webshop) .shop_products .product:not(.bol) + .product.bol:after { position: absolute; top: 0; left: 0; content: "Het laden van de producten van bol.com kan even duren..."; z-index: -1; }

/* producten (klachten) */
body.klachten .product.bol > div:last-of-type { position: relative; display: flex; padding: 0!important; width: 100%!important; border-radius: 5px; overflow: hidden; background-color: transparent; }

body.klachten .product.bol .left-div.imgwrap_tout { position: relative; margin: 0 !important; margin-top: 0px !important; width: 20% !important; aspect-ratio: 3 / 2; background-color: #dcf0ef; }
body.klachten .product.bol .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
body.klachten .product.bol .left-div.imgwrap_tout a img { position: absolute; display: block; width: auto; max-width: 80% !important; height: auto; max-height: 70% !important; mix-blend-mode: multiply; }

body.klachten .product.bol .media__body.right-div-preview { display: flex; align-items: center; justify-content: flex-start; flex: 1; padding: 0 !important; height: auto; }
body.klachten .product.bol .media__body.right-div-preview > a { display: flex; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; font-weight: 400; line-height: 1.2; text-align: left; box-sizing: border-box; }
body.klachten .product.bol .media__body.right-div-preview > a span.product_title { font-family: 'Inter', sans-serif; font-size: 16px; color: #333; line-height: 1.2; text-align: left; }
body.klachten .product.bol .media__body.right-div-preview span.rating { display: none!important; }
body.klachten .product.bol .media__body.right-div-preview a + div:after,
body.klachten .product.bol .media__body.right-div-preview span.rating + div:after { position: relative; display: flex; align-items: center; content: "Niet leverbaar"; font-family: 'Inter', sans-serif; font-size: 14px; }
body.klachten .product.bol .media__body.right-div-preview span.price-bol:before { margin-right: 5px; content: "€"; }
body.klachten .product.bol .media__body.right-div-preview span.price-bol,
body.klachten .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { display: flex; align-items: center; justify-content: flex-start; top: 0; margin: 0; width: 20%; font-family: 'Inter', sans-serif !important; font-size: 18px; color: var(--main); font-weight: 700; }
body.klachten .product.bol .media__body.right-div-preview .product-delivery { display: none; }
body.klachten .product.bol .media__body.right-div-preview a.btn--primary { position: absolute; top: 0; right: 0; margin: 0 auto; margin-top: 0; padding: 9px 15px 10px 15px !important; width: 105px; font-family: 'Inter', sans-serif; font-size: 13px !important; font-weight: 400; line-height: 1; border: none; border-radius: 0 !important; border-bottom-left-radius: 8px !important; }

    /* producten (Leefstijl & training > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
    body.pid59 .product.bol > div:last-of-type { position: relative; display: flex; padding: 0!important; width: 100%!important; border-radius: 5px; overflow: hidden; background-color: transparent; }

    body.pid59 .product.bol .left-div.imgwrap_tout { position: relative; margin: 0 !important; margin-top: 0px !important; width: 20% !important; aspect-ratio: 3 / 2; background-color: #dcf0ef; }
    body.pid59 .product.bol .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
    body.pid59 .product.bol .left-div.imgwrap_tout a img { position: absolute; display: block; width: auto; max-width: 80% !important; height: auto; max-height: 70% !important; mix-blend-mode: multiply; }

    body.pid59 .product.bol .media__body.right-div-preview { display: flex; align-items: center; justify-content: flex-start; flex: 1; padding: 0 !important; height: auto; }
    body.pid59 .product.bol .media__body.right-div-preview > a { display: flex; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; font-weight: 400; line-height: 1.2; text-align: left; box-sizing: border-box; }
    body.pid59 .product.bol .media__body.right-div-preview > a span.product_title { font-family: 'Inter', sans-serif; font-size: 16px; color: #333; line-height: 1.2; text-align: left; }
    body.pid59 .product.bol .media__body.right-div-preview span.rating { display: none!important; }
    body.pid59 .product.bol .media__body.right-div-preview a + div:after,
    body.pid59 .product.bol .media__body.right-div-preview span.rating + div:after { position: relative; display: flex; align-items: center; content: "Niet leverbaar"; font-family: 'Inter', sans-serif; font-size: 14px; }
    body.pid59 .product.bol .media__body.right-div-preview span.price-bol:before { margin-right: 5px; content: "€"; }
    body.pid59 .product.bol .media__body.right-div-preview span.price-bol,
    body.pid59 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { display: flex; align-items: center; justify-content: flex-start; top: 0; margin: 0; width: 20%; font-family: 'Inter', sans-serif !important; font-size: 18px; color: var(--main); font-weight: 700; }
    body.pid59 .product.bol .media__body.right-div-preview .product-delivery { display: none; }
    body.pid59 .product.bol .media__body.right-div-preview a.btn--primary { position: absolute; top: 0; right: 0; margin: 0 auto; margin-top: 0; padding: 9px 15px 10px 15px !important; width: 105px; font-family: 'Inter', sans-serif; font-size: 13px !important; font-weight: 400; line-height: 1; border: none; border-radius: 0 !important; border-bottom-left-radius: 8px !important; }

    /* producten (Kennis opdoen > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
    body.pid175 .product.bol > div:last-of-type { position: relative; display: flex; padding: 0!important; width: 100%!important; border-radius: 5px; overflow: hidden; background-color: transparent; }

    body.pid175 .product.bol .left-div.imgwrap_tout { position: relative; margin: 0 !important; margin-top: 0px !important; width: 20% !important; aspect-ratio: 3 / 2; background-color: #dcf0ef; }
    body.pid175 .product.bol .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
    body.pid175 .product.bol .left-div.imgwrap_tout a img { position: absolute; display: block; width: auto; max-width: 80% !important; height: auto; max-height: 70% !important; mix-blend-mode: multiply; }

    body.pid175 .product.bol .media__body.right-div-preview { display: flex; align-items: center; justify-content: flex-start; flex: 1; padding: 0 !important; height: auto; }
    body.pid175 .product.bol .media__body.right-div-preview > a { display: flex; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; font-weight: 400; line-height: 1.2; text-align: left; box-sizing: border-box; }
    body.pid175 .product.bol .media__body.right-div-preview > a span.product_title { font-family: 'Inter', sans-serif; font-size: 16px; color: #333; line-height: 1.2; text-align: left; }
    body.pid175 .product.bol .media__body.right-div-preview span.rating { display: none!important; }
    body.pid175 .product.bol .media__body.right-div-preview a + div:after,
    body.pid175 .product.bol .media__body.right-div-preview span.rating + div:after { position: relative; display: flex; align-items: center; content: "Niet leverbaar"; font-family: 'Inter', sans-serif; font-size: 14px; }
    body.pid175 .product.bol .media__body.right-div-preview span.price-bol:before { margin-right: 5px; content: "€"; }
    body.pid175 .product.bol .media__body.right-div-preview span.price-bol,
    body.pid175 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { display: flex; align-items: center; justify-content: flex-start; top: 0; margin: 0; width: 20%; font-family: 'Inter', sans-serif !important; font-size: 18px; color: var(--main); font-weight: 700; }
    body.pid175 .product.bol .media__body.right-div-preview .product-delivery { display: none; }
    body.pid175 .product.bol .media__body.right-div-preview a.btn--primary { position: absolute; top: 0; right: 0; margin: 0 auto; margin-top: 0; padding: 9px 15px 10px 15px !important; width: 105px; font-family: 'Inter', sans-serif; font-size: 13px !important; font-weight: 400; line-height: 1; border: none; border-radius: 0 !important; border-bottom-left-radius: 8px !important; }

    /* producten (Kennisbank zorgprofessionals > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
    body.pid551 .product.bol > div:last-of-type { position: relative; display: flex; padding: 0!important; width: 100%!important; border-radius: 5px; overflow: hidden; background-color: transparent; }

    body.pid551 .product.bol .left-div.imgwrap_tout { position: relative; margin: 0 !important; margin-top: 0px !important; width: 20% !important; aspect-ratio: 3 / 2; background-color: #dcf0ef; }
    body.pid551 .product.bol .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
    body.pid551 .product.bol .left-div.imgwrap_tout a img { position: absolute; display: block; width: auto; max-width: 80% !important; height: auto; max-height: 70% !important; mix-blend-mode: multiply; }

    body.pid551 .product.bol .media__body.right-div-preview { display: flex; align-items: center; justify-content: flex-start; flex: 1; padding: 0 !important; height: auto; }
    body.pid551 .product.bol .media__body.right-div-preview > a { display: flex; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; font-weight: 400; line-height: 1.2; text-align: left; box-sizing: border-box; }
    body.pid551 .product.bol .media__body.right-div-preview > a span.product_title { font-family: 'Inter', sans-serif; font-size: 16px; color: #333; line-height: 1.2; text-align: left; }
    body.pid551 .product.bol .media__body.right-div-preview span.rating { display: none!important; }
    body.pid551 .product.bol .media__body.right-div-preview a + div:after,
    body.pid551 .product.bol .media__body.right-div-preview span.rating + div:after { position: relative; display: flex; align-items: center; content: "Niet leverbaar"; font-family: 'Inter', sans-serif; font-size: 14px; }
    body.pid551 .product.bol .media__body.right-div-preview span.price-bol:before { margin-right: 5px; content: "€"; }
    body.pid551 .product.bol .media__body.right-div-preview span.price-bol,
    body.pid551 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { display: flex; align-items: center; justify-content: flex-start; top: 0; margin: 0; width: 20%; font-family: 'Inter', sans-serif !important; font-size: 18px; color: var(--main); font-weight: 700; }
    body.pid551 .product.bol .media__body.right-div-preview .product-delivery { display: none; }
    body.pid551 .product.bol .media__body.right-div-preview a.btn--primary { position: absolute; top: 0; right: 0; margin: 0 auto; margin-top: 0; padding: 9px 15px 10px 15px !important; width: 105px; font-family: 'Inter', sans-serif; font-size: 13px !important; font-weight: 400; line-height: 1; border: none; border-radius: 0 !important; border-bottom-left-radius: 8px !important; }


/* WEBSHOP */

/* delen */
/* Wat doet dit regeltje???? */
body.webshop .shop_products .share { display: none; }

/* producten */
body.webshop .shop_products_container { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; margin-top: 15px; z-index: 1; }
body.webshop .shop_products_container .product { position: relative; display: flex; flex-direction: column; border-radius: 5px; overflow: hidden; background-color: #fff; }
body.webshop .shop_products_container .product > a { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
body.webshop .shop_products_container .product .img { position: relative; width: 100%; aspect-ratio: 1/1; background-color: #32aaa1; }
body.webshop .shop_products_container .product .img:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0.5; background-color: #000; background: rgb(50,170,161); background: linear-gradient(20deg, rgba(50,170,161,1) 0%, rgba(50,170,161,0) 50%); }
body.webshop .shop_products_container .product .img img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; filter: grayscale(0.5); }
body.webshop .shop_products_container .product .product_info { position: relative; display: flex; flex-direction: column; flex: 1; bottom: 0; padding: 30px 30px; width: 100%; text-align: center; box-sizing: border-box; z-index: 1; }
body.webshop .shop_products_container .product .product_info span.title { display: block; font-size: 21px; color: #333; font-weight: 700; line-height: 1.2; }
body.webshop .shop_products_container .product .product_info span.price { display: block; font-size: 21px; color: #33aaa1; font-weight: 600; }
body.webshop .shop_products_container .product .product_info .view { margin-top: 5px; text-decoration: underline; }
body.webshop .shop_products_container .product:hover .product_info .view { text-decoration: none; }

body.webshop .shop_products_container:after { position: absolute; top: 15px; left: 0; width: 30px; height: 30px; content: ""; z-index: -1; background-image: url("/images/icons/loading.gif"); background-position: center; background-size: contain; background-repeat: no-repeat; }

/* producten (bol) */
body.webshop .product.bol > div:last-of-type { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 105px 0!important; width: 100%!important; height: 100%; border-radius: 5px; box-sizing: border-box; }

body.webshop .product.bol .left-div.imgwrap_tout { position: relative; margin: 0!important; margin-top: -5px!important; margin-bottom: -15px!important; width: 100%!important; aspect-ratio: 4 / 3; }
body.webshop .product.bol .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
body.webshop .product.bol .left-div.imgwrap_tout a img { position: absolute; display: block; width: auto; max-width: 60%!important; height: auto; max-height: 50%!important; }

body.webshop .product.bol .media__body.right-div-preview { display: flex; flex-direction: column; align-items: center; flex: 1; margin-top: 0; padding: 0!important; width: 80%!important; text-align: center; box-sizing: border-box; z-index: 1; }
body.webshop .product.bol .media__body.right-div-preview > a { flex: 1; }
body.webshop .product.bol .media__body.right-div-preview > a span.product_title { font-family: 'Inter', sans-serif; font-size: 21px; color: #333; font-weight: 700; line-height: 1.2; text-align: center; }
body.webshop .product.bol .media__body.right-div-preview span.rating { display: none!important; }
body.webshop .product.bol .media__body.right-div-preview a + div:after,
body.webshop .product.bol .media__body.right-div-preview span.rating + div:after { position: relative; display: flex; align-items: center; top: -10px; width: 100%; height: 100%; content: "Niet leverbaar"; font-family: 'Inter', sans-serif; font-size: 16px; }

body.webshop .product.bol .media__body.right-div-preview span.price-bol { display: flex; margin-top: 5px!important; }
body.webshop .product.bol .media__body.right-div-preview span.price-bol:before { margin-right: 5px; content: "€"; }
body.webshop .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { top: auto; }
body.webshop .product.bol .media__body.right-div-preview span.price-bol,
body.webshop .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { margin: 0; font-family: 'Inter', sans-serif!important; font-size: 21px!important; color: #33aaa1!important; font-weight: 700!important; line-height: 1.7; }

body.webshop .product.bol .media__body.right-div-preview .product-delivery { display: none; }
body.webshop .product.bol .media__body.right-div-preview a.btn--primary { position: absolute; bottom: 45px; left: 0; right: 0; margin: 0 auto; margin-top: 0; padding: 12px 30px 14px 30px !important; width: 155px; font-family: 'Inter', sans-serif; font-size: 16px !important; font-weight: 400; line-height: 1; border: none; border-radius: 45px !important; }
body.webshop .product.bol .media__body.right-div-preview a.btn--primary:hover { filter: brightness(1.05); }


@media screen and (max-width: 1100px) {
    
    body.webshop .shop_products_container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 0; }
    body.webshop .shop_products_container .product { }
    body.webshop .shop_products_container .product > a { display: flex; flex-direction: row; }
    body.webshop .shop_products_container .product .img { width: 90px; }
    body.webshop .shop_products_container .product .product_info { justify-content: center; padding: 0 20px; text-align: left; }
    body.webshop .shop_products_container .product .product_info span.title { font-size: 14px; }
    body.webshop .shop_products_container .product .product_info span.price { margin-bottom: 0; font-size: 14px; }
    body.webshop .shop_products_container .product .product_info .view { position: absolute; bottom: 10px; right: 15px; margin-top: 5px; font-size: 13px; text-decoration: underline; }
    
    /* PRODUCT_CATEGORY_LISTING */
    .shop_products { padding: 0; width: 100%; background-color: transparent; }
    .shop_products .product { width: 100%; margin-bottom: 0; }
    .shop_products .product a { display: flex; flex-direction: column; /*align-items: flex-start;*/ text-align: left; }
    .shop_products .product .img { width: 40%; }
    .shop_products .product .img img { display: block; width:  100%; height: 100%; object-fit: cover; }
    .shop_products .product .product_info { width: 60%; padding: 20px 30px; padding-right: 0; box-sizing: border-box; }
    .shop_products .product span.price { margin-bottom: 20px; }
    .shop_products .product:first-of-type { padding-top: 0; }
    .shop_products .product:last-of-type { margin-bottom: 0; }
    
    /* SHOPCATEGORY */

    /* delen */
    .share { flex-wrap: wrap; margin-top: 45px; margin-bottom: 15px; }
    body.shopcategory.pid175 .share { margin-top: 45px; margin-bottom: 0; } /* Kennis opdoen */
    body.shopcategory .share { margin-top: 15px; margin-bottom: -15px; }
    body.news .share { margin-top: 45px; }
    
    .share span { margin-right: 0; margin-bottom: 10px; width: 100%; }
    .share .item { border: 1px solid #32aaa1; background-color: #32aaa1; }
    .share .item:hover { opacity: 0.75; }
    .share .item a img { opacity: 1; filter: invert(1)!important; }
    
    .product_column.second .share { margin-bottom: 0; padding: 30px; padding-top: 25px; }
    .product_column.second .share span { margin-bottom: 0; font-size: 16px; }
    
    body:not(.webshop) .shop_products .product a .img { width: 100%; }
    body:not(.webshop) .shop_products .product a .product_info { flex-direction: column; padding: 30px; width: 100%; }
    body:not(.webshop) .shop_products .product a .product_info span.title { margin-bottom: 5px; padding: 0; width: 100%; font-size: 16px; font-weight: 400; }
    body:not(.webshop) .shop_products .product a .product_info span.price { padding: 0; width: 100%; }
    
    /* producten (bol) */
    body.webshop .product.bol .media__body.right-div-preview a + div:after,
    body.webshop .product.bol .media__body.right-div-preview span.rating + div:after { top: 0; margin: 15px 0 5px 0; }
    
    /* producten (klachten) */
    body.klachten .product.bol > div:last-of-type { flex-direction: column; }
    body.klachten .product.bol .left-div.imgwrap_tout { width: 100%!important; }
    body.klachten .product.bol .media__body.right-div-preview { flex-direction: column; padding: 30px!important; width: 100%; box-sizing: border-box; }
    body.klachten .product.bol .media__body.right-div-preview > a { align-items: flex-start; padding: 0; width: 100%; }
    body.klachten .product.bol .media__body.right-div-preview > a span.product_title { margin-bottom: 5px; }
    body.klachten .product.bol .media__body.right-div-preview span.price-bol,
    body.klachten .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { width: 100%; }
    
    body.klachten .product.bol .media__body.right-div-preview span.rating + div { width: 100%; }
    
        /* producten (Leefstijl & training > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
        body.pid59 .product.bol > div:last-of-type { flex-direction: column; }
        body.pid59 .product.bol .left-div.imgwrap_tout { width: 100%!important; }
        body.pid59 .product.bol .media__body.right-div-preview { flex-direction: column; padding: 30px!important; width: 100%; box-sizing: border-box; }
        body.pid59 .product.bol .media__body.right-div-preview > a { align-items: flex-start;padding: 0; width: 100%; }
        body.pid59 .product.bol .media__body.right-div-preview > a span.product_title { margin-bottom: 5px; }
        body.pid59 .product.bol .media__body.right-div-preview span.price-bol,
        body.pid59 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { width: 100%; }

        body.pid59 .product.bol .media__body.right-div-preview span.rating + div { width: 100%; }

        /* producten (Kennis opdoen > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
        body.pid175 .product.bol > div:last-of-type { flex-direction: column; }
        body.pid175 .product.bol .left-div.imgwrap_tout { width: 100%!important; }
        body.pid175 .product.bol .media__body.right-div-preview { flex-direction: column; padding: 30px!important; width: 100%; box-sizing: border-box; }
        body.pid175 .product.bol .media__body.right-div-preview > a { align-items: flex-start;padding: 0; width: 100%; }
        body.pid175 .product.bol .media__body.right-div-preview > a span.product_title { margin-bottom: 5px; }
        body.pid175 .product.bol .media__body.right-div-preview span.price-bol,
        body.pid175 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { width: 100%; }

        body.pid175 .product.bol .media__body.right-div-preview span.rating + div { width: 100%; }

        /* producten (Kennisbank zorgprofessionals > TIJDELIJKE CSS, KOPIE VAN producten (klachten) HIERBOVEN) */
        body.pid551 .product.bol > div:last-of-type { flex-direction: column; }
        body.pid551 .product.bol .left-div.imgwrap_tout { width: 100%!important; }
        body.pid551 .product.bol .media__body.right-div-preview { flex-direction: column; padding: 30px!important; width: 100%; box-sizing: border-box; }
        body.pid551 .product.bol .media__body.right-div-preview > a { align-items: flex-start;padding: 0; width: 100%; }
        body.pid551 .product.bol .media__body.right-div-preview > a span.product_title { margin-bottom: 5px; }
        body.pid551 .product.bol .media__body.right-div-preview span.price-bol,
        body.pid551 .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { width: 100%; }

        body.pid551 .product.bol .media__body.right-div-preview span.rating + div { width: 100%; }
    
    /* temp CSS */
    
    body:not(.webshop) .shop_products .shop_products_container { gap: 20px; }
    .shop_products_container h2 { margin-bottom: 15px; font-size: 18px; }
    .shop_products .product a { flex-direction: row; }
    body:not(.webshop) .shop_products .product { margin-bottom: 15px; }
    body:not(.webshop) .shop_products .product a .img { width: 90px; aspect-ratio: 1 / 1; }
    body:not(.webshop) .shop_products .product a .product_info { flex-direction: column; justify-content: center; flex: 1; padding: 0 20px; width: 100%; }
    body:not(.webshop) .shop_products .product a .product_info span.title { margin-bottom: 0; width: 100%; font-size: 14px; }
    body:not(.webshop) .shop_products .product a .product_info span.price { font-size: 14px; }
    body:not(.webshop) .shop_products .product a .product_info .arrow { display: none; }
    
    body.klachten .product.bol > div:last-of-type { flex-direction: row; }
    body.klachten .product.bol .left-div.imgwrap_tout { width: 90px!important; aspect-ratio: 1/1; }
    body.klachten .product.bol .media__body.right-div-preview { justify-content: center; flex: 1; padding: 0 20px!important; width: 100%; }
    body.klachten .product.bol .media__body.right-div-preview > a { align-items: flex-start; padding: 0; width: 100%; }
    body.klachten .product.bol .media__body.right-div-preview > a span.product_title { margin-bottom: 2px; font-size: 14px; }
    body.klachten .product.bol .media__body.right-div-preview span.price-bol,
    body.klachten .product.bol .media__body.right-div-preview span.price-bol span.price-fraction { font-size: 14px; }
    body.klachten .product.bol .media__body.right-div-preview span.rating + div { width: 100%; }
    body.klachten .product.bol .media__body.right-div-preview a.btn--primary { padding: 6px 8px 6px 8px!important; width: auto; font-size: 8px!important; border-bottom-left-radius: 4px!important; }
        
}

body:not(.webshop) .bol_sitebar_box { display: flex; margin: 0!important; padding: 0!important; width: 100%!important; background-color: transparent!important; }

body:not(.webshop) .bol_sitebar_box .left-div.imgwrap_tout { position: relative; margin: 0!important; padding-bottom: calc((20% / 3) * 2); width: 20%!important; height: 0; background-color: #fff; }
body:not(.webshop) .bol_sitebar_box .left-div.imgwrap_tout a { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; border-right: 1px solid rgb(50 50 50 / 10%); box-sizing: border-box; background-color: rgb(50 170 161 / 10%); }
body:not(.webshop) .bol_sitebar_box .left-div.imgwrap_tout a img { display: block; width: auto; max-width: 80%!important; height: auto; max-height: 80%!important; opacity: 0.9; mix-blend-mode: multiply; }

body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview { display: flex; width: 80%!important; height: auto!important; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview > a { display: flex!important; align-items: center; justify-content: flex-start; padding: 0 30px; width: 80%; box-sizing: border-box; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview > a span.product_tag { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.2; text-align: left; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview span.rating { display: none!important; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview a + div:after,
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview span.rating + div:after { display: flex; align-items: center; width: 100%; height: 100%; content: "Niet leverbaar"; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview span.product-price-bol { display: flex; align-items: center; justify-content: flex-start; margin: 0; width: 20%; font-family: 'Inter', sans-serif!important; font-size: 17px!important; color: #122a33!important; font-weight: 700!important; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview .product-delivery { display: none; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview a.btn--primary { position: absolute; top: 0; right: 0; padding: 3px 7px 3px 10px!important; font-family: 'Inter', sans-serif!important; font-size: 12px!important; border-radius: 0!important; border-bottom-left-radius: 5px!important; }
/*body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview a.btn--primary { position: absolute; top: 50px; left: 178px; padding: 0!important; width: auto; font-size: 12px!important; color: #36c!important; font-weight: 700; border-radius: 0!important; background-color: transparent!important; }*/

body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview span.price-bol { display: flex; align-items: center; justify-content: flex-start; margin: 0; width: 20%; font-family: 'Inter', sans-serif!important; font-size: 18px!important; color: var(--main)!important; font-weight: 700!important; }
body:not(.webshop) .bol_sitebar_box .media__body.right-div-preview span.price-fraction { font-size: 14px!important; color: var(--main)!important; }

/* ##### */
/* ##### */
/* ##### */
/* PRODUCT_SINGLE_ITEM > shopproduct.php */

.page_content.product { display: flex; gap: 60px; width: 100%; }
.page_content.product .product_column { width: 50%; box-sizing: border-box; } /* size/order two columns */

.page_content.product .product_column.first { display: flex; flex-direction: column; gap: 30px; flex: 1; }
.page_content.product .product_column.first .productmedia { padding: 75px; padding-top: 60px; padding-bottom: 60px; border-radius: 10px; background-color: #fff; }
.page_content.product .product_column.first .productmedia .product-images { }

.page_content.product .product_column.first .description { padding: 45px; border-radius: 10px; box-sizing: border-box; background-color: #fff; }

.page_content.product .product_column.second { position: sticky; top: 160px; align-self: flex-start; width: 30%; }

/* elements in columns 
.page_content.product .product_column .productmedia {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 60px;
}
.page_content.product .product_column .productmedia a,
.page_content.product .product_column .productmedia a img {
    display: block;
    width: 100%;
    position: relative;
}
.page_content.product .product_column .productmedia a img {
    display: block;
    width: 100%;
}
.page_content.product .product_column .productmedia .product-main-image {
    
}
.page_content.product .product_column .productmedia .product-all-media {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    background: var(--accents);
}
.page_content.product .product_column .productmedia .product-all-media a {
    height: 70px;
    width: auto;
    display: block;
    margin: 30px 20px;
}
.page_content.product .product_column .productmedia .product-all-media a img {
    display: block;
    height: 100%;
    width: auto;
}*/

/* right column */
.page_content.product .product_column .description,
.page_content.product .product_column .order {
    width: 100%;
}
.page_content.product .product_column .links {
    padding: 45px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fff;
}
.page_content.product .product_column .links a {
    padding: 8px 0;
    border-bottom: 1px solid #efefef;
    text-decoration: none;
}
.page_content.product .product_column .links a:hover {
    opacity: 0.8;
}
.page_content.product .product_column .links a:first-of-type {
    border-top: 1px solid #efefef;
}
.page_content.product .product_column .links a svg {
    transform: translateY(1px);
}
.page_content.product .product_column .order {
    padding: 45px;
    padding-top: 40px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fff;
}
.page_content.product .product_column .order h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 28px;
    line-height: 1;
}
.page_content.product .product_column .order > span {
    display: block;
}
.page_content.product .product_column .order span.title {
    font-size: 1.4em;
}
.page_content.product .product_column .order span.price {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}
.page_content.product .product_column .order .product_variant,
.page_content.product .product_column .order .product_option,
.page_content.product .product_column .order .product_quantity {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
}
.page_content.product .product_column .order .product_quantity {
    border-top: 2px solid rgb(50 170 161 / 10%);
    padding-top: 20px;
}
.page_content.product .product_column .order input[type=text],
.page_content.product .product_column .order textarea,
.page_content.product .product_column .order .product_option select,
.page_content.product .product_column .order .product_variant select,
.page_content.product .product_column .order .product_quantity select {
    margin-top: 0;
    padding: 10px 15px;
    width: 55%;
    box-sizing: border-box;
    border: none;
    background-color: var(--background);
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    border-radius: 5px;
}
.page_content.product .product_column .order textarea {
    height: 100px;
    resize: none;
}
.page_content.product .product_column .order .product_option select,
.page_content.product .product_column .order .product_variant select,
.page_content.product .product_column .order .product_quantity select {
    background-color: rgb(26 96 96 / 8%);
    background-image: url('../../images/icons/arrow-down.svg');
    background-size: 12px 12px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat; 
}
.page_content.product .product_column .order .product_option span.opt_name,
.page_content.product .product_column .order .product_variant span.var_name,
.page_content.product .product_column .order .product_quantity span.opt_name {
    display: flex;
    align-items: center;
    width: 45%;
}
.page_content.product .product_column .order .btn {
    margin-top: 30px;
    width: 100%;
}

@media screen and (max-width: 1100px) {
    
    .page_content.product { flex-direction: column; gap: 20px; }
    
    .page_content.product .product_column.first { /*order: 1;*/ gap: 20px; }
    .page_content.product .product_column.first .productmedia { padding: 30px 20px; }
    .page_content.product .product_column.first .description { padding: 30px; }
    
    .page_content.product .product_column.second { /*order: 0;*/ position: relative; top: auto; margin-bottom: 0; }
    
    .page_content.product .product_column,
    .page_content.product .product_column.first,
    .page_content.product .product_column.second { width: 100%; padding-right: 0; }
    
    .page_content.product .product_column .order { padding: 30px; }
    .page_content.product .product_column .order h1 { font-size: 24px; }
    .page_content.product .product_column .order .btn { margin-top: 10px; }
    
    /*.page_content.product .product_column .productmedia { position: relative; top: auto; width: 100%; margin-bottom: 2em; }
    .page_content.product .product_column .productmedia a:hover:after { display: none; }
    .page_content.product .product_column .productmedia .product-all-media a { height: 30px; }*/
    
    .page_content.product .product_column .order .product_option,
    .page_content.product .product_column .order .product_variant,
    .page_content.product .product_column .order .product_quantity {
        flex-direction: column;
    }   
     .page_content.product .product_column .order input,
    .page_content.product .product_column .order textarea,
    .page_content.product .product_column .order .product_option select,
    .page_content.product .product_column .order .product_variant select,
    .page_content.product .product_column .order .product_quantity select,
    .page_content.product .product_column .order .product_option span.opt_name,
    .page_content.product .product_column .order .product_variant span.var_name,
    .page_content.product .product_column .order .product_quantity span.opt_name {
        width: 100%;
    }
    
    .page_content.product .product_column .links { padding: 30px; }

}

/* ##### */
/* ##### */
/* ##### */
/* SHOP-CTA-BUTTONS
.shopbtn,
.page_content.product .product_column .order input.shopbtn {
    background: var(--primarycta);
    border: 0 none;
    color: var(--background);
    cursor: pointer;
    margin-top: 30px;
    padding: 20px 25px!important;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    display: block;
    height: auto;
    font-weight: bold;
    text-align: center;
    border: 0;
    box-sizing: border-box;
    font-size: 1.2em;
    -webkit-appearance: none;
}
.shopbtn:hover,
.page_content.product .product_column .order input.shopbtn:hover {
    background: var(--main);
    color: var(--background);
}
.shopbtn.grey {
    background: #666;
}
.shopbtn.grey:hover {
    background: #999;
}
@media screen and (max-width: 1100px) {
}*/


/* ##### */
/* ##### */
/* ##### */
/* SHOP NOTIFICATION > shopproduct.php */
.shopNotification {
    position: fixed;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    z-index: 9999;
    overflow: hidden;   
}
.shopNotification.show {
    height: 100%;
    opacity: 1;
}
.shopNotification .outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 150ms ease;
}
.shopNotification.show .outer {
    background: rgba(0, 0, 0, .6);
}
.shopNotification .inner {
    width: 100%;
    max-width: 300px;
    background: var(--background);
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    box-sizing: border-box;
    opacity: 0;
    z-index: 2;
    transition: opacity 150ms ease 0ms, transform 0ms ease 150ms;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.shopNotification.show .inner {
    opacity: 1;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
}
.shopNotification.show .inner .basket {
    margin-bottom: 20px;
}
/*.shopNotification .inner .left {
    width: 60%;
    padding: 30px;
    box-sizing: border-box;
}
.shopNotification .inner .right {
    width: 40%;
    padding: 30px;
    box-sizing: border-box;
    background: var(--accents);
}*/
.shopNotification .inner .full /* used @ besteltraject for notices, zoals adres not found */ {
    width: 100%;
    padding: 30px;
    text-align: center;
    box-sizing: border-box;
}
.shopNotification .inner .title {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.2;
    display: block;
    margin-bottom: 1em;
}
.shopNotification .inner .left .product {
    display: block;
}
.shopNotification.show .inner .close.txt {
    margin-top: 20px;
    cursor: pointer;
    display: block;
    text-transform: lowercase;
}

@media screen and (max-width: 1100px) {
    
    /* SHOP NOTIFICATION */
    .shopNotification .inner {
        flex-direction: column;
    }
    .shopNotification .inner .left,
    .shopNotification .inner .right {
        width: 100%;
    }
    .shopNotification.show .inner .close.txt {
        position: static;
        margin-top: 20px;
    }
    .shopNotification .inner .right .shopbtn {
        margin-top: 20px;
    }
    
}

/* ##### */
/* ##### */
/* ##### */
/** SHOP_CART > shopcart.php **/
.shop_cart {
    width: 100%;
    border: 2px solid var(--accents);
    box-sizing: border-box;
}
.shop_cart .header,
.shop_cart .row {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--accents);
}
.shop_cart .header {
    color: #999;
}
.shop_cart div {
    box-sizing: border-box;
    width: 17.5%;
}
.shop_cart div.artikel {
    width: 30%;
}
.shop_cart div.artikel span.title {
    font-weight: bold;
}
.shop_cart div.artikel span.option {
    display: block;
}
.shop_cart div.img img {
    display: block;
    width: 70%;
    margin: 0 auto;
}
.shop_cart div select {
    font-size: inherit;
    font-family: inherit;
    border-color: #ccc;
    padding: 5px;
}
.shop_cart div span.optname {
    color: #999;
}
.shop_cart select {
    background-image: url('../../images/icons/arrow-down.svg');
    background-size: 12px 12px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat; 
    -webkit-appearance: none;
    font-family: inherit;
    width: 60px;
    border-radius: 0;
    line-height: 1;
}
.shop_cart .row span.remove_item {
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-top: 5px;
    margin-left: 6px;
    cursor: pointer;
    background-image: url(/images/icons/close.svg);
    background-size: 12px 12px;
    opacity: 0.5;
}
.shop_cart .row span.remove_item:hover {
    opacity: 1;
}
.shop_cart .totals {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}
.shop_cart .totals span {
    display: block;
}
.shop_cart .totals span.value {
    font-weight: bold;
    font-size: 1.2em;
    white-space: nowrap;
}
.shop_cart .shopbtn-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 30px; 
    padding-top: 0;
}
.shop_cart .shopbtn-row a.shopbtn.toOrder {
    width: 25%;
    max-width: 100%;
    margin: 0;
}
@media screen and (max-width: 1100px) {
    
    /* CART */
    .shop_cart .header {
        display: none;
    }
    .shop_cart .row {
        flex-wrap: wrap;
        padding: 1em;
    }
    .shop_cart div,
    .shop_cart div.artikel {
        width: 100%;
    } 
    .shop_cart div.img {
        margin-bottom: 10px;
    }
    .shop_cart div.img img {
        width: 30%;
        margin: 0;
    }   
    .shop_cart .totals {
        padding: 1em;
    } 
    .shop_cart .totals span.value{
        font-size: 1em;
    }
    .shop_cart div span.optname,
    .mob {
        color: #999;
        display: inline-block;
        width: 50%;
    }
    .mob:after {
        content: ": ";
    }
    .shop_cart .shopbtn-row a.shopbtn.toOrder {
        width: 100%;
    }
    
}

/* ##### */
/* ##### */
/* ##### */

/** BESTELTRAJECT > shoporder.php **/
.shop_order_form {
    display: flex;
}
.shop_order .shop_order_form div.column {
    width: 33.333%;
    width: 50%;
    border: 2px solid var(--accents);
    box-sizing: border-box;
    padding: 2em;
    padding: 45px;
    position: relative;
    min-height: 250px;
}
.shop_order .shop_order_form div.column.contact {
    border-right: none;
}
.shop_order .shop_order_form div.column.delivery {
    
    border-left: 0;
    border-right: 0;
}
.shop_order .shop_order_form div.column.half {
    width: 50%;
}
.shop_order .shop_order_form div.column .shopbtn.bottomright /* add class to the button and get it out formelem */ {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 30px;
    width: calc(100% - 60px)
}
.shop_order .shop_order_form div.column div.formelem {
    width: 100%;
    display: block;
    margin-bottom: 1em;
    display: flex;
    position: relative;
}
.shop_order .shop_order_form div.column div.formelem.flexcolumnized {
    flex-direction: column;
}
.shop_order .shop_order_form div.column div.formelem span {
    display: block;
    /*font-size: .8em;*/
    width: 50%;
    line-height: 2.1em;
    box-sizing: border-box;
    padding-right: 1em;
}
.shop_order .shop_order_form div.column h3 {
    font-size: 1.3em;
    font-weight: normal;
    margin-bottom: .4em;
}
.shop_order form input[type=text], .shop_order form textarea, .shop_order form select {
    border: 1px solid #d5d5d5;
    background-color: var(--background);
    border-radius: 0px;
    box-sizing: border-box;
    color: #333;
    float: left;
    font-family: inherit;
    font-size: inherit;
    padding: 5px;
    padding: 10px;
    width: 50%;
    transition: border 150ms ease;
    -webkit-appearance: none;
    font-size: .9em;
}
.shop_order form select {
    background-image: url('../../images/icons/arrow-down.svg');
    background-size: 12px 12px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat; 
}
.shop_order form input.telefoon {
    width: 40%;
}
.shop_order form input.postcode {
    width: 30%;
}
.shop_order form input.huisnr {
    width: 15%;
}
.shop_order form input[readonly] {
    background: #f5f5f5;
}
.shop_order label.radiobtn, 
.shop_order label.checkbox {
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 5px;
    padding-left: 35px;
    float: left;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /*font-size: .8em;*/
}
.shop_order label.radiobtn input,
.shop_order label.checkbox input {
    position: absolute;
    margin: 0;
    top: 4px;
    left: 0;
    background: var(--accents);
    border: 1px solid #d5d5d5;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 14px;
    cursor: pointer;
}
.shop_order label.radiobtn input:checked,
.shop_order label.checkbox input:checked {
    background-image: url('../../images/icons/checkmark.svg');
    background-size: 12px 12px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.shop_order label.error {
    background: rgba(191, 0, 0, 1);
    color: var(--background);
    font-size: 12px;
    width: auto;
    text-align: center;
    padding: 2px 4px;
    display: block;
    position: absolute;
    left: 37%;
    top: -17px;
    line-height: 1.2;
    border-radius: 2px 2px 0 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9;
    transition: all 150ms ease;
    opacity: 0;
}
.shop_order label.error[for=akkoord] {
    opacity: 1;
    left: auto;
    right: 0;
}
.shop_order form input.error:not([readonly]), .shop_order form textarea.error, .shop_order form select.error {
    border: 1px solid rgba(191, 0, 0, 1);
}
.shop_order *:focus:not([readonly]) + label.error {
    opacity: 1;
}
div.shop_order div.subset {
    width: 100%;
    float: left;
    clear: both;
}
div#bezorgadresoptie, div#bezorgadres {
    display: none;
    opacity: 0;
}
div.shop_order div.shop_cart div.row, div.shop_order div.shop_cart div.row > div {

}
.shop_order div.column.half.forty {
    width: 40%;
    border-right: 2px solid var(--accents);
}
.shop_order div.column.half.sixty {
    width: 60%;
    border-right: 2px solid var(--accents);
}
div.shop_order div.shop_cart {
    box-sizing: border-box;
    width: 100%;
    font-size: .8em;
    margin-top: 1em;
}
div.shop_order div.shop_cart div.totals {
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    width: 100%;
}
div.shop_order div.shop_cart div.totals div {
    display: flex;
    width: 100%;
}
div.shop_order div.shop_cart div.totals div span {
    width: 50%;
}
div.shop_order div.shop_cart div.totals div span:nth-of-type(2) {
    text-align: right;
}
div.shop_order div.shop_cart div.totals div.totaal {
    color: #666;
    font-weight: bold;
    font-size: 1.2em;
}
div.shop_order .orderset .itm {
    width: 100%;
    display: block;
    border-bottom: 1px solid #ddd;
    margin-bottom: .25em;
    padding-bottom: .25em;
    display: flex;
    font-size: .9em;
}
div.shop_order .orderset .itm > span {
    display: inline-block;
}
div.shop_order .orderset .itm > div {
    display: block;
}
div.shop_order .orderset .itm > .k {
    width: 45%;
    color: #999;
}
div.shop_order .orderset .itm > .v {
    width: 55%;
}
div.shop_order .orderset .block {
    display: block;
    width: 100%;
    float: left;
    margin-bottom: .5em;
}
div.shop_order div.afronden {
    display: block;
    width: 100%;
    float: left;
    margin-top: 1em;
}
div.shop_order div.afronden .extra {
    margin-bottom: 30px;
    padding: 30px 30px 30px 20px;
    font-size: .8em;
    line-height: 1.7;
    border-radius: 5px;
    font-style: normal;
    background-color: #f4fafa;
}
div.afronden .shopbtn {
    float: right;
}
div.shop_order div.goback {
    margin-top: 20px;
}
div#paymentloading {
    background: var(--accents);
    float: left;
    margin: 10px 0 20px;
    padding: 16px 24px;
    background-image: url(../../images/icons/loading.gif);
    background-size: 16px 16px;
    background-position: 16px center;
    background-repeat: no-repeat;
    padding-left: 48px;
    width: 100%;
    box-sizing: border-box;
    display: none;
}
div#ordercancelled {
    display: none;
}
div.addressloading {
    width: 16px;
    height: 16px;
    background-image: url(../../images/icons/loading.gif);
    background-size: 16px 16px;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 6px 0 0 6px;
    float: left;
    display: none;
}
div.shop_paymentreturn .shopbtn {
    float: left;
    margin-right: 1em;
}

@media screen and (max-width: 1100px) {
    
    .shop_order_form {
        flex-direction: column;
        background-color: #fff;
        background-color: transparent;
    }
    .shop_order .shop_order_form div.column.delivery {
        border: 2px solid var(--accents);
        border-top: 0;
        border-bottom: 0;
    }    
    .shop_order .shop_order_form div.column.payment {
        margin-top: 15px;
    }    
    .shop_order .shop_order_form div.column {
        width: 100%;
        padding: 0;
        min-height: 0;
        border: none;
    }
    .shop_order .shop_order_form div.column div.formelem {
        flex-direction: column;
    }
    .shop_order form input[type=text], .shop_order form textarea, .shop_order form select {
        width: 100%;
    }
    /* stap 2 */
    .shop_order div.column.half.forty {
        width: 100%;
        border-right: 2px solid var(--accents);
        border-bottom: 2px solid var(--accents);
    }
    .shop_order div.column.half.sixty {
        width: 100%;
        border-right: 2px solid var(--accents);
    }
    /* stap 3 */
    div.shop_order .orderset .itm > div {
        display: block;
        float: none;
    }
    div.shop_order .orderset .itm {
        flex-direction: column;
    }    
    div.shop_order .orderset .itm > .k,
    div.shop_order .orderset .itm > .v {
        width: 100%;
    }
    div.shop_order div.shop_cart div.totals {
        padding: 1em;
    }
    div.shop_order div.shop_cart div.totals div.totaal {
        white-space: nowrap;
    }
    
}