body#html-body {
    background: #fff !important;
}

/* HEADER COLOR */
.wohi-header-color {
    background: #dd0000;
    padding-left: 0px !important;
}

/* HEADER LEVERTIJD COLOR */
.text-wohi-red {
    color: #dd0000;
}

/* HEADER SVG COLORS  */
svg.h-6.w-6.text-slate-800.hover\:text-black,
svg.text-slate-800.hover\:text-black {
    color: #ffffff !important;
}

input.bg-blue-700.p-3.cursor-pointer.w-full.border.border-blue-700.rounded-md.shadow-sm.text-white.hover\:bg-opacity-90.md\:flex-1 {
    background: #dd0000 !important;
    border-color: #dd0000 !important;
}

.sm\:w-1\/2.lg\:w-auto.btn.justify-center.rounded-md.py-3.px-6.text-base.shadow-none.hover\:shadow-lg.active\:shadow.transition.bg-blue-600.text-white.border.border-transparent.hover\:bg-blue-700.focus\:ring-blue-200.active\:bg-blue-700 {
    background: #d00;
}

.sm\:w-1\/2.lg\:w-auto.btn.justify-center.rounded-md.py-3.px-6.text-base.shadow-none.hover\:shadow-lg.active\:shadow.disabled\:shadow-none.transition.bg-white.text-blue-700.border.border-blue-400.hover\:bg-white.focus\:ring-blue-200.disabled\:bg-white.disabled\:border-slate-200.disabled\:text-slate-600.disabled\:opacity-70 {
    border-color: #d00;
    color: #d00;
}

/* LEVERTIJD COLOR */
.text-color-levertijd {
    color: #007000;
    margin-top: 15px;
}

.text-color-achteraf {
    color: #007000;
}

.bg-primary, .btn-primary {
    background: #dd0000 !important;
}

.add-to-cart-color {
    background: #dd0000; 
    color: #fff;
    position: relative;
    border-radius: 8px; /* Voeg ronde hoeken toe aan de knop */
    transition: background-color 0.3s ease; /* Overgang voor achtergrondkleur */
    overflow: hidden;
}

.add-to-cart-color::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Start met een breedte van 0% */
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Lichtgrijze overlay met 50% dekking */
    border-radius: 8px; /* Voeg ronde hoeken toe aan de overlay */
    transition: width 0.5s ease, opacity 0.5s ease; /* Overgang voor breedte en dekking */
}

.add-to-cart-color:hover::before {
    width: 100%; /* Breid de overlay uit naar 100% breedte */
    opacity: 1; /* Maak de overlay zichtbaar bij hover */
}

.add-to-cart-color:hover span {
    color: #fff; /* Maak de tekst wit bij hover */
}

.border-primary {
    border-color: #d00;
}

.btn.justify-center.rounded-md.py-2\.5.px-5.text-sm.shadow-none.hover\:shadow-lg.active\:shadow.transition.bg-blue-600.text-white.border.border-transparent.hover\:bg-blue-700.focus\:ring-blue-200.active\:bg-blue-700 {
    background: #dd0000 !important;
}

.text-blue-700.transition-transform.transform.duration-300.ease-in-out.group-open\:rotate-180 {
    color: #d00000 !important;
}
input[type="range"] {
    --hv-fill-color: #d00 !important;
}

.relative.inline-flex.shrink-0.justify-center.items-center.border.border-slate-300.w-5.h-5.rounded-full.bg-white.after\:opacity-0.after\:absolute.after\:inset-1.after\:bg-white.after\:rounded-full.after\:transition.group-hover\/filter\:bg-primary.group-hover\/filter\:border-primary.group-hover\/filter\:text-white.group-hover\/filter\:after\:opacity-100.group-focus\/filter\:bg-primary.group-focus\/filter\:border-primary.group-focus\/filter\:text-white.group-focus\/filter\:after\:opacity-100:hover {
    background: #d00 !important;
    border-color: #d00 !important;
    color: #d00 !important;
}


.checkout-success svg {
    color: #d00;
}

.inline-flex.w-full.sm\:w-auto.btn.justify-center.rounded-md.py-3.px-6.text-base.shadow-none.hover\:shadow-lg.active\:shadow.transition.bg-blue-600.text-white.border.border-transparent.hover\:bg-blue-700.focus\:ring-blue-200.active\:bg-blue-700 {
    background: #d00;
  }