@font-face{ 
	font-family: 'Chaney';
	src: url('/fonts/chaney/chaney-extended-webfont.eot');
	src: url('/fonts/chaney/chaney-extended-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/chaney/chaney-extended-webfont.woff') format('woff'),
	     url('/fonts/chaney/chaney-extended-webfont.ttf') format('truetype'),
	     url('/fonts/chaney/chaney-extended-webfont.svg#webfont') format('svg');
}
@font-face{ 
	font-family: 'Wotfard';
	src: url('/fonts/wotfard/wotfard-regular-webfont.eot');
	src: url('/fonts/wotfard/wotfard-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/wotfard/wotfard-regular-webfont.woff2') format('woff'),
	     url('/fonts/wotfard/wotfard-regular-webfont.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal; /* Normale stijl */
}
@font-face{ 
	font-family: 'Wotfard';
	src: url('/fonts/wotfard/wotfard-bold-webfont.eot');
	src: url('/fonts/wotfard/wotfard-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/wotfard/wotfard-bold-webfont.woff2') format('woff'),
	     url('/fonts/wotfard/wotfard-bold-webfont.ttf') format('truetype');
    font-weight: 700; /* Regular */
    font-style: normal; /* Normale stijl */
}
@font-face{ 
	font-family: 'Wotfard';
	src: url('/fonts/wotfard/wotfard-medium-webfont.eot');
	src: url('/fonts/wotfard/wotfard-medium-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/wotfard/wotfard-medium-webfont.woff2') format('woff'),
	     url('/fonts/wotfard/wotfard-medium-webfont.ttf') format('truetype');
    font-weight: 500; /* Regular */
    font-style: normal; /* Normale stijl */
}
@font-face{ 
	font-family: 'Wotfard-Light';
	src: url('/fonts/wotfard/wotfard-light-webfont.eot');
	src: url('/fonts/wotfard/wotfard-light-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/wotfard/wotfard-light-webfont.woff2') format('woff'),
	     url('/fonts/wotfard/wotfard-light-webfont.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal; /* Normale stijl */
}

body, html, p, span, input, textarea {
    font-family: 'Wotfard-Light', 'Inter', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.modal {
    padding: 20px;
    border: none;
    -webkit-box-shadow: 0 0 25px rgba(1, 1, 1, 0.3);
    -moz-box-shadow: 0 0 25px rgba(1, 1, 1, 0.3);
    -o-box-shadow: 0 0 25px rgba(1, 1, 1, 0.3);
    -ms-box-shadow: 0 0 25px rgba(1, 1, 1, 0.3);
    box-shadow: 0 0 25px rgba(1, 1, 1, 0.3);
    border-radius: 10px;
}

.modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Scrollbaar als de inhoud te groot is */
  }
  
  .modal-footer {
    margin-top: auto;
  }

.mobile-waiting, .processing-img {
    width: 100%;
    text-align: center;
}

.mobile-waiting img, .processing-img img {
    max-width: 240px;
    margin: 0 auto;
}

#appselector {
    transition: all 0.5s ease;
}

.photo-preview {
    width: 70px;
    height: 70px;
    display: inline-block;
    margin-left:5px;
    margin-right:5px;
    border-radius: 6px;
    background-position: center;
    background-size: cover;
}

#upload-count, #uploads-container {
    text-align: center;
}

.upload-btn-label {
    background-color: indigo;
    color: white;
    padding: 0.5rem;
    font-family: sans-serif;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-top: 1rem;
  }

.file-uploader {
    background: #fff;
  }

  .file-uploader .uploader-header {
    display: flex;
    align-items: center;
    border-radius: 5px 5px 0 0;
    justify-content: space-between;
  }
  .uploader-header .file-completed-status {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
  }
  .file-uploader .file-list {
    list-style: none;
    width: 100%;
    padding-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-color: #999 transparent;
    scrollbar-width: thin;
  }
  .file-uploader .file-list:has(li) {
    padding: 10px 30px 0px 10px;
  }
  .file-list .file-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
  }
  .file-list .file-item:last-child {
    margin-bottom: 0px;
  }
  .file-list .file-item .file-extension {
    height: 50px;
    width: 50px;
    color: #fff;
    display: flex;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #5145BA;
  }
  .file-list .file-item .file-content-wrapper {
    flex: 1;
  }
  .file-list .file-item .file-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .file-list .file-item .file-name {
    font-size: 13px;
    font-weight: 600;
  }
  .file-list .file-item .file-info {
    display: flex;
    gap: 5px;
  }
  .file-list .file-item .file-info small {
    color: #5c5c5c;
    margin-top: 5px;
    display: block;
    font-size: 12px;
    font-weight: 500;
  }
  .file-list .file-item .file-info .file-status {
    color: #5145BA;
  }
  .file-list .file-item .cancel-button {
    align-self: center;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    font-size: 1.4rem;
  }
  .file-list .file-item .cancel-button:hover {
    color: #E3413F;
  }
  .file-list .file-item .file-progress-bar {
    width: 100%;
    height: 3px;
    margin-top: 10px;
    border-radius: 30px;
    background: #d9d9d9;
  }
  .file-list .file-item .file-progress-bar .file-progress {
    width: 0%;
    height: inherit;
    border-radius: inherit;
    background: #5145BA;
  }
  .file-uploader .file-upload-box {
    margin-bottom:20px;
    border-radius: 8px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #B1ADD4;
    transition: all 0.2s ease;
  }

  .file-uploader .no-border {
    border: none;
  }
  
  .file-uploader .file-upload-box.active {
    border: 2px solid #5145BA;
    background: #F3F6FF;
  }
  .file-uploader .file-upload-box .box-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #626161;
  }
  .file-uploader .file-upload-box.active .box-title {
    pointer-events: none;
  }
  .file-upload-box .box-title .file-browse-button {
    color: #5145BA;
    cursor: pointer;
  }
  .file-upload-box .box-title .file-browse-button:hover {
    text-decoration: underline;
  }

  .file-upload-box .box-title .btn:active,
  .file-upload-box .box-title .btn:hover,
  .file-upload-box .box-title .btn {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
  }

  #modal-footer p {
    line-height: 54px;
  }


.blocker {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

#message-mobile { display: none; }
#box-title-mobile { display: none; }
.product-details-hidden { display: none; }

#file-browse-text { display: inline; }
#file-browse-text-mobile { display: none; }

.w-220 { width: 220px; }


@media (max-width: 768px) {

    .sm-pt-32 { padding-top: 8rem; }

    .w-220 { width: 100%; }
    #modal-footer p { text-align: center; }

    #message-mobile { display: block; }
    #message-app { display: none; }

    #file-browse-text { display: none; }
    .file-instruction { display: none; }
    #file-browse-text-mobile { display: inline; color: #fff; }

    #mobileselector { display: none; }

    #photos { height: 100% !important; max-height: 100% !important; }

    #close-text { line-height: 22px !important; }

    .file-uploader .file-upload-box { border: none; }
    .file-browse-button {
            background-color: #222;
            padding: 15px 30px;
            color: #fff;
            border-radius: 50px;
    }
    .blocker {
        background-color: rgba(255, 255, 255, 1);
        backdrop-filter: blur(0px);
    }

    .modal a.close-modal {
        position: fixed;
        top: 10px;
        right: 10px;
    }

    .modal {
        height: 100vh;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }
}

.fileuploader-theme-onebutton .fileuploader-input {
    display: inline-block;
}
.fileuploader-theme-onebutton .fileuploader-input .fileuploader-input-caption {
	display: none;
}

.sw-header {
    font-family: 'Wotfard', Arial, sans-serif;
    font-weight: 700;
}

.sw-hero {
    background-position: center;
    background-size: cover;
    background-color: #f0f0f0;
    width: 100%;
    min-height: 350px;
}

.sw-hero-small {
    min-height: 220px;
}

@media (max-width: 768px) {
    .sw-hero {
        margin-top:64px;
    }
}

#mobilemenu {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease; backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.7);
}

h1 { font-weight: 700; font-size: 40px; }
.h1-big { line-height: 70px; font-size: 50px; }

#nav-icon1 span  {
    background-color: #000;
}

@media (min-width: 1536px) {
    .\32xl\:text-5xl {
        line-height: 1.2;
    }
}

@media (min-width: 768px) {
    .home {
        display: flex; justify-content: center; align-items: center;
    }
    .home main {
        margin-top: -100px;
    }

    .mobilecart { display: none !important; }
    .hidden-large { display: none !important; }

}

.bg-white {
    background-color: #ffffff !important;
}

.submit-address {
    position: relative;
    width: 100px;
}

.cart {
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 40px;
    border-radius: 10px;
    --tw-shadow: 0 15px 50px -12px rgb(0 0 0 / 0.4);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.addressfield::placeholder {
    color: #fff;
    opacity: 0;
}

.addressfield::-webkit-input-placeholder {
    color: #fff;
    opacity: 0;
}

.faq-open {
    max-height: 500px; /* Zorg ervoor dat dit groot genoeg is om de inhoud te bevatten */
  }

@media (max-width: 768px) {

    .hidden-small { display: none !important; }

    .rainbows  { display: none; }
    .home-image-lg { display: none; }
    .home-image { margin-left: -20px; margin-right: -20px; } 
    .addressfield::placeholder {
        font-weight: bold; /* Maak de tekst vet */
        color: #666; /* Pas de kleur aan, indien gewenst */
        opacity: 0.8; /* Zorg ervoor dat de kleur volledig zichtbaar is */
    }
    .addressfield::-webkit-input-placeholder {
        font-weight: bold;
        color: #666;
        opacity: 0.8;
    }    
    .addresscontainer input { border: 0px; line-height: 200%; }
    .border-bottom { border-bottom: 1px rgba(0,0,0,0.2) solid; }
    #addressform label { display:none; margin-left: -10px; font-weight: bold; }
    .submit-address {
        position: relative;
        width: 100%;
    }
    .cart-container {
        background-color: rgba(255, 255, 255, 0.5);
        margin-left: -40px;
        margin-right: -40px;
        padding: 15px;
    }
    .cart {
        padding: 20px 40px;
        border-radius: 10px;
    }

    input:focus {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        -webkit-appearance: none;
    }

    input::-webkit-focus-ring-color {
        outline: none !important;
    }

}

a.disabled {
    color: gray; /* Grijze kleur om te laten zien dat het "disabled" is */
    pointer-events: none; /* Schakel klikbare functionaliteit uit */
    cursor: not-allowed; /* Verander de cursor naar een verbodsteken */
    text-decoration: none; /* Verwijder de onderstreping */
}

/* Loader styling */
.submit-address.loading {
    color: transparent !important;
}
.submit-address.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% - 8px);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #333;
    animation: spin 0.5s linear infinite;
}

button:disabled {
    cursor: not-allowed; /* Cursor verandert in een 'verboden' teken */
    opacity: 0.7; /* Maak de button semi-transparant */
}

.address-container {
    position: relative;
}

.address-container input:disabled {
    background-color: #f0f0f0;
}

.address-loader {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #333;
    animation: spin 0.5s linear infinite;
}

.address-container-loader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #333;
    animation: spin2 0.5s linear infinite;
}

.input-loader {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    /* position: absolute; */
    animation: spin2 0.5s linear infinite;
    margin: 0 auto;
}

@keyframes spin2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.extra-hidden { display: none !important; } 
.rounded-full { border-radius: 50px; }

#loader {
    width: 100%;
}

#loader div {
    content: "";
    position: absolute;
    margin-top: 70px;
    left: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #333;
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.shadow {
    -webkit-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.25);
}


.lijn {
    height: 100px;
    top: 24px;
}

.slide-in-div {
    transform: translateX(150%); /* Start buiten het scherm */
    transition: transform 1s ease; /* Smooth animatie */
}

.orderdetails-circle {
    background-color: #000;
}
.orderdetails-line {
    background-color: #000;
}
.orderdetails-line.todo {
    background-color: rgba(255, 255, 255, 0);
}
.orderdetails-circle.todo {
    background-color: #999;
}
.todo {
    color: #999;
}

#mobileNav {
  
}

#mobileNavOrder {
    border-top: 2px #ccc solid;
    max-width: 240px;
    padding-top: 24px;
}

#mobileNavFooter {
    position: absolute;
    bottom: 0px;
    
}

.ui-widget-content .ui-state-default {
    text-align: center;
    border: 1px #fff solid;
    background: #fff;
    font-weight: 600;
    color: #444;
}

.ui-widget-content .ui-state-hover {
    border: 1px #f0f0f0 solid;
    border-radius: 3px;
    background: #f0f0f0;
    font-weight: 600;
    color: #222;
}

.ui-widget-content .ui-state-active {
    border: 1px #999 solid;
    border-radius: 4px;
    background: #fff;
    font-weight: 600;
    color: #222;
}

.ui-widget-header {
    border: 1px solid #fff;
    background: #fff;
    color: #222;
    font-weight: 600;
}

.ui-datepicker-title {
   font-size: 15px; 
   font-weight: 600;
}

.ui-widget.ui-widget-content {
    border: 1px solid #fff;
    border-radius: 8px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ui-datepicker-multi .ui-datepicker-group {
    padding: 10px;
}

.ui-datepicker td {
    border: 0;
    padding: 4px 2px;
}


.ui-datepicker .ui-datepicker-next {
    border: 0px !important;
    border-radius: 0px !important;
    background-color: #fff !important;
    top:1px;
    right:1px;
}

.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -22px;
    top: 50%;
    margin-top: -14px;
    background-image: url(/assets/img/arrow-right.png);
    background-position: -5px -5px;
    width: 24px;
    height: 24px;
}


.ui-datepicker .ui-datepicker-prev {
    border: 0px !important;
    border-radius: 0px !important;
    background-color: #fff !important;
    top:1px;
    right:1px;
}

.ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: 50%;
    margin-top: -14px;
    background-image: url(/assets/img/arrow-left.png);
    background-position: -5px -5px;
    width: 24px;
    height: 24px;
}


.ui-datepicker-multi .ui-datepicker-group {
    display: block;
    min-width: 250px;
}

.ui-datepicker-inline {
    width: auto !important;
}
    
  *, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

#fade-content { display: none; }
    
.bg-blue { background: #effbf8; }

#result {
 width: 100%;
 max-width:870px;
 cursor: pointer;
 overflow-y: auto;
 max-height: 400px;
 box-sizing: border-box;
}

#result li {
  padding: 15px 10px;
  border-bottom: 1px #eee solid;
}

.week-hidden {
  display: none;
}


.link-class:hover{
 background-color:#f1f1f1;
}
    
    
.bubble {
  background-color: #fff;
  -webkit-box-shadow: 0px 6px 40px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 6px 40px 2px rgba(0,0,0,0.3);
  box-shadow: 0px 6px 40px 2px rgba(0,0,0,0.3);
  line-height: 2;
  border-radius: 10px;
  padding: 20px 20px;
  margin-top: 60px;
}
  .bubble:after {
      content: '';
      display: block;
      position: relative;
              margin-top: -34px;
              padding-top: 0px;
              bottom: -50px;
              left: 20px;
              border-width: 30px 0 0 30px;
              border-style: solid;
              border-color: #fff transparent;	
              width: 2px;
      border-radius: 0 0 40px 0;
          }

    
.bubble .detail {
      font-style: italic;
              display: inline;
              float: right;
}
    
    .success { border-color: #84cc16 !important; }
#mobileNav a p {
transition: all ease-in-out 0.2s;
}
#nav a p {
transition: all ease-in-out 0.2s;
}
    
    
* {
margin: 0;
padding: 0; 
}

/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 26px;
height: 45px;
position: relative;
margin: 22px 22px 0px 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 2px;
border-radius: 9px;
opacity: 1;
left: 0;
width: 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
top: 2px;
}

#nav-icon1 span:nth-child(2) {
top: 10px;
width: 78%;
}

#nav-icon1 span:nth-child(3) {
top: 18px;
width: 100%;
}

#nav-icon1.open span:nth-child(1) {
top: 14px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

#nav-icon1.open span:nth-child(3) {
top: 14px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
    
.blocker { z-index: 99; }






.modal {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: none;
    width: 80%;
    max-width: 840px;
    min-height: 500px;
    max-height: 600px;
}

.modal-header, .modal-body, .modal-footer {
padding: 10px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e5e5e5;
}

.input-container {
    display: flex;
    align-items: center;
    position: relative;
}

.input-container input {
    padding-right: 40px; /* Ruimte voor 'cm' */
    width: 100%;
    border: 1px #e5e7eb solid;
    border-radius: 0.375rem;
    line-height: 1.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.input-container span {
    position: absolute;
    right: 10px; /* Plaats 'cm' aan de rechterkant */
    pointer-events: none; /* Voorkomt dat 'cm' het invoerveld beïnvloedt */
}

#submit-div div {
    display: none;
}

#footer{
    position: fixed;
    bottom:-155px;
    right: 3rem;
    width: calc(100vw - 30rem);
    height: 155px;
    z-index: 99;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 30px;
}

#footer div {
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 8px;
    text-align: center;
    padding: 30px;
    max-width: 960px;
    margin: 0 auto;
}

.cm-editor { max-height: 200px; border: 1px solid silver; font-size: 14px }
.cm-scroller { overflow: auto; }

/* Code highlighting styles */
.tok-keyword, .fn, .keyword {color: #708;}
.tok-atom, .tok-bool {color: #219;}
.tok-number, .prim {color: #164;}
.tok-variableName.tok-definition, .tok-attribute {color: #30b;}
.tok-variableName2, .tok-typeName, .type {color: #05a;}
.tok-comment {color: #a50;}
.tok-string, .string {color: #a11;}
.tok-string2 {color: #f50;}
.tok-meta {color: #555;}
.tok-tag {color: #170;}
.tok-invalid {color: #c00;}

@media (max-width: 1024px) {
    #footer{
        width: calc(100vw );
        right: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;     
    }
}
    
@media (max-width: 768px) {
    .sm-extra-mt { margin-top:77px; }
    .sm-extra-mt-extra { margin-top:120px; }

    .mobilecart { border-radius: 8px; overflow: hidden; backdrop-filter: blur(6px); background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 75px; left: 15px; z-index: 99;display:block !important; width: calc(100% - 30px); height:60px; }
    .mobilecart.open { position: fixed; top: 75px; z-index: 99;display:block !important; height: calc(100vh - 250px); }


    .mobilecart #product-list li {
        background-color: #f0f0f0;
        border-radius: 6px;
    }

    .modal {
        width: 100%;
    }
}

.slope-column {
    position: relative;
    overflow: hidden;
}

.slope-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: skewX(-4deg);
    transform-origin: top left;
    z-index: 1;
    background: #fff;
}

.slope-column-content {
    position: relative;
    z-index: 999; /* Zorg dat de inhoud bovenop de schuine lijn staat */
    height: 100%;
    padding: 20px; /* Optioneel: Voeg wat padding toe */
}

.bgi-position-center {
    background-position: right;
}

  

  /*end decoration*/
  
  .visuallyhidden{
    position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);
  }
  .product-review-stars label:after{
      content: "★";
      color: inherit;
      -webkit-transform: scale(4);
      position: absolute;
      z-index: 4;
      left: 0px;
      transition: all .4s;
      opacity: 0;
      color: inherit;
      visibility: hidden;
     
  }
  
  .product-review-stars input:checked + label:after{
      visibility: visible;
      -webkit-transform: scale(1);
      opacity: 1;
  }
  
  .product-review-stars  {
    unicode-bidi: bidi-override;
    direction: rtl;
  }
  
  .product-review-stars label{
      font-family: "icomoon";
      font-size: 2em;
      position: relative;
      cursor: pointer;
      color: #DFE3E4;
  }
  .product-review-stars input:checked ~ label:before{
      opacity: 1;
  }
  .product-review-stars:hover input ~ label:before{
      opacity: 0;
  }
  
  .product-review-stars input + label:before{
      content: "\2605";
      position: absolute;
      right: 0;
      opacity: 0;
      transition: opacity .3s ease-in-out, color .3s ease-in-out;
      backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
  }
  .product-review-stars input + label:hover:before,
  .product-review-stars input + label:hover ~ label:before
  {
      opacity: 1;
  }
  .product-review-stars input + label:nth-of-type(1):after,
  .product-review-stars input + label:nth-of-type(1):before,
  .product-review-stars input +  label:nth-of-type(1):hover:before,
  .product-review-stars input + label:nth-of-type(1):hover ~ label:before,
  .product-review-stars input:nth-of-type(1):checked ~ label:before{
      color: #2ecc71;
  }
  .product-review-stars input + label:nth-of-type(2):after,
  .product-review-stars input + label:nth-of-type(2):before,
  .product-review-stars input + label:nth-of-type(2):hover:before,
  .product-review-stars input + label:nth-of-type(2):hover ~ label:before,
  .product-review-stars input:nth-of-type(2):checked ~ label:before{
      color: #f1c40f;
  }
  .product-review-stars input + label:nth-of-type(3):after,
  .product-review-stars input + label:nth-of-type(3):before,
  .product-review-stars input + label:nth-of-type(3):hover:before,
  .product-review-stars input + label:nth-of-type(3):hover ~ label:before,
  .product-review-stars input:nth-of-type(3):checked ~ label:before{
      color: #F39C12;
  }
  .product-review-stars input + label:nth-of-type(4):after,
  .product-review-stars input + label:nth-of-type(4):before,
  .product-review-stars input + label:nth-of-type(4):hover:before,
  .product-review-stars input + label:nth-of-type(4):hover ~ label:before,
  .product-review-stars input:nth-of-type(4):checked ~ label:before{
      color: #e74c3c;
  }
  
  .product-review-stars input + label:nth-of-type(5):after,
  .product-review-stars input + label:nth-of-type(5):before,
  .product-review-stars label:nth-of-type(5):hover:before,
  .product-review-stars input:nth-of-type(5):checked ~ label:before{
      color: #d35400;
  }
  
  .product-review-stars label:nth-of-type(5):hover:before{
      color: #d35400 !important;
  }