.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: var(--grey-100);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: calc(100% - var(--table-padding-inline));
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
}
figure.table {
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: var(--table-padding-block) var(--table-padding-inline);
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
    vertical-align: inherit;
}
.table > thead {
    vertical-align: bottom;
}
.table > :not(:first-child) {
    border-top: 2px solid currentColor;
}

.caption-top {
    caption-side: top;
}

.table-sm > :not(caption) > * > * {
    padding: calc(var(--table-padding-block) / 2) calc(var(--table-padding-block) / 2);
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

.table-dark {
    --bs-table-bg: #212529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e;
}

.table-basic {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: inherit;
    --bs-table-active-bg: transparent;
    --bs-table-active-color: inherit;
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: inherit;
    color: inherit;
    border-color: var(--border-color);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.bs-container,
.bs-container-fluid,
.bs-container-xxl,
.bs-container-xl,
.bs-container-lg,
.bs-container-md,
.bs-container-sm,

.wrapper {
    width: 100%;
    box-sizing: border-box;
    /*padding-right: var(--bs-gutter-x, 0.75rem);*/
    /*padding-left: var(--bs-gutter-x, 0.75rem);*/
    padding-left: var(--st-container-space-x, 10px);
    padding-right: var(--st-container-space-x, 10px);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .bs-container-sm, .bs-container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .bs-container-xl, .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .bs-container-xxl, .bs-container-xl, .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 1320px;
    }
}

:root {
    --st-gutter-x: 1.5rem;
    --st-gutter-y: 0;
}

.row {
    --bs-gutter-x: var(--st-gutter-x);
    --bs-gutter-y: var(--st-gutter-y);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

@media (min-width: 320px) {
    .col-xs {
        flex: 1 0 0%;
    }

    .row-cols-xs-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xs-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xs-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xs-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xs-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xs-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xs-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}

/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .col-xxl {*/
/*        flex: 1 0 0%;*/
/*    }*/

/*    .row-cols-xxl-auto > * {*/
/*        flex: 0 0 auto;*/
/*        width: auto;*/
/*    }*/

/*    .row-cols-xxl-1 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 100%;*/
/*    }*/

/*    .row-cols-xxl-2 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 50%;*/
/*    }*/

/*    .row-cols-xxl-3 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 33.3333333333%;*/
/*    }*/

/*    .row-cols-xxl-4 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 25%;*/
/*    }*/

/*    .row-cols-xxl-5 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 20%;*/
/*    }*/

/*    .row-cols-xxl-6 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 16.6666666667%;*/
/*    }*/
/*}*/

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 320px) {
    .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xs-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xs-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xs-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xs-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xs-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xs-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xs-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xs-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xs-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xs-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xs-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xs-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/*@media (min-width: 1400px) {*/
/*    .col-xxl-auto {*/
/*        flex: 0 0 auto;*/
/*        width: auto;*/
/*    }*/

/*    .col-xxl-1 {*/
/*        flex: 0 0 auto;*/
/*        width: 8.33333333%;*/
/*    }*/

/*    .col-xxl-2 {*/
/*        flex: 0 0 auto;*/
/*        width: 16.66666667%;*/
/*    }*/

/*    .col-xxl-3 {*/
/*        flex: 0 0 auto;*/
/*        width: 25%;*/
/*    }*/

/*    .col-xxl-4 {*/
/*        flex: 0 0 auto;*/
/*        width: 33.33333333%;*/
/*    }*/

/*    .col-xxl-5 {*/
/*        flex: 0 0 auto;*/
/*        width: 41.66666667%;*/
/*    }*/

/*    .col-xxl-6 {*/
/*        flex: 0 0 auto;*/
/*        width: 50%;*/
/*    }*/

/*    .col-xxl-7 {*/
/*        flex: 0 0 auto;*/
/*        width: 58.33333333%;*/
/*    }*/

/*    .col-xxl-8 {*/
/*        flex: 0 0 auto;*/
/*        width: 66.66666667%;*/
/*    }*/

/*    .col-xxl-9 {*/
/*        flex: 0 0 auto;*/
/*        width: 75%;*/
/*    }*/

/*    .col-xxl-10 {*/
/*        flex: 0 0 auto;*/
/*        width: 83.33333333%;*/
/*    }*/

/*    .col-xxl-11 {*/
/*        flex: 0 0 auto;*/
/*        width: 91.66666667%;*/
/*    }*/

/*    .col-xxl-12 {*/
/*        flex: 0 0 auto;*/
/*        width: 100%;*/
/*    }*/
/*}*/

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

.order-first {
    order: -1 !important;
}

.order-0 {
    order: 0 !important;
}

.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

.order-3 {
    order: 3 !important;
}

.order-4 {
    order: 4 !important;
}

.order-5 {
    order: 5 !important;
}

.order-6 {
    order: 6 !important;
}

.order-last {
    order: 999 !important;
}

@media (min-width: 320px) {
    .d-xs-flex {
        display: flex !important;
    }

    .d-xs-inline-flex {
        display: inline-flex !important;
    }

    .flex-xs-row {
        flex-direction: row !important;
    }

    .flex-xs-column {
        flex-direction: column !important;
    }

    .flex-xs-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xs-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-xs-start {
        justify-content: flex-start !important;
    }

    .justify-content-xs-end {
        justify-content: flex-end !important;
    }

    .justify-content-xs-center {
        justify-content: center !important;
    }

    .justify-content-xs-between {
        justify-content: space-between !important;
    }

    .justify-content-xs-around {
        justify-content: space-around !important;
    }

    .justify-content-xs-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xs-start {
        align-items: flex-start !important;
    }

    .align-items-xs-end {
        align-items: flex-end !important;
    }

    .align-items-xs-center {
        align-items: center !important;
    }

    .align-items-xs-baseline {
        align-items: baseline !important;
    }

    .align-items-xs-stretch {
        align-items: stretch !important;
    }

    .align-content-xs-start {
        align-content: flex-start !important;
    }

    .align-content-xs-end {
        align-content: flex-end !important;
    }

    .align-content-xs-center {
        align-content: center !important;
    }

    .align-content-xs-between {
        align-content: space-between !important;
    }

    .align-content-xs-around {
        align-content: space-around !important;
    }

    .align-content-xs-stretch {
        align-content: stretch !important;
    }

    .align-self-xs-auto {
        align-self: auto !important;
    }

    .align-self-xs-start {
        align-self: flex-start !important;
    }

    .align-self-xs-end {
        align-self: flex-end !important;
    }

    .align-self-xs-center {
        align-self: center !important;
    }

    .align-self-xs-baseline {
        align-self: baseline !important;
    }

    .align-self-xs-stretch {
        align-self: stretch !important;
    }

    .order-xs-first {
        order: -1 !important;
    }

    .order-xs-0 {
        order: 0 !important;
    }

    .order-xs-1 {
        order: 1 !important;
    }

    .order-xs-2 {
        order: 2 !important;
    }

    .order-xs-3 {
        order: 3 !important;
    }

    .order-xs-4 {
        order: 4 !important;
    }

    .order-xs-5 {
        order: 5 !important;
    }

    .order-xs-6 {
        order: 6 !important;
    }

    .order-xs-last {
        order: 999 !important;
    }
}

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-content-sm-start {
        align-content: flex-start !important;
    }

    .align-content-sm-end {
        align-content: flex-end !important;
    }

    .align-content-sm-center {
        align-content: center !important;
    }

    .align-content-sm-between {
        align-content: space-between !important;
    }

    .align-content-sm-around {
        align-content: space-around !important;
    }

    .align-content-sm-stretch {
        align-content: stretch !important;
    }

    .align-self-sm-auto {
        align-self: auto !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .order-sm-first {
        order: -1 !important;
    }

    .order-sm-0 {
        order: 0 !important;
    }

    .order-sm-1 {
        order: 1 !important;
    }

    .order-sm-2 {
        order: 2 !important;
    }

    .order-sm-3 {
        order: 3 !important;
    }

    .order-sm-4 {
        order: 4 !important;
    }

    .order-sm-5 {
        order: 5 !important;
    }

    .order-sm-6 {
        order: 6 !important;
    }

    .order-sm-last {
        order: 999 !important;
    }
}

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-content-md-start {
        align-content: flex-start !important;
    }

    .align-content-md-end {
        align-content: flex-end !important;
    }

    .align-content-md-center {
        align-content: center !important;
    }

    .align-content-md-between {
        align-content: space-between !important;
    }

    .align-content-md-around {
        align-content: space-around !important;
    }

    .align-content-md-stretch {
        align-content: stretch !important;
    }

    .align-self-md-auto {
        align-self: auto !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }

    .order-md-first {
        order: -1 !important;
    }

    .order-md-0 {
        order: 0 !important;
    }

    .order-md-1 {
        order: 1 !important;
    }

    .order-md-2 {
        order: 2 !important;
    }

    .order-md-3 {
        order: 3 !important;
    }

    .order-md-4 {
        order: 4 !important;
    }

    .order-md-5 {
        order: 5 !important;
    }

    .order-md-6 {
        order: 6 !important;
    }

    .order-md-last {
        order: 999 !important;
    }
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-content-lg-start {
        align-content: flex-start !important;
    }

    .align-content-lg-end {
        align-content: flex-end !important;
    }

    .align-content-lg-center {
        align-content: center !important;
    }

    .align-content-lg-between {
        align-content: space-between !important;
    }

    .align-content-lg-around {
        align-content: space-around !important;
    }

    .align-content-lg-stretch {
        align-content: stretch !important;
    }

    .align-self-lg-auto {
        align-self: auto !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .order-lg-first {
        order: -1 !important;
    }

    .order-lg-0 {
        order: 0 !important;
    }

    .order-lg-1 {
        order: 1 !important;
    }

    .order-lg-2 {
        order: 2 !important;
    }

    .order-lg-3 {
        order: 3 !important;
    }

    .order-lg-4 {
        order: 4 !important;
    }

    .order-lg-5 {
        order: 5 !important;
    }

    .order-lg-6 {
        order: 6 !important;
    }

    .order-lg-last {
        order: 999 !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }

    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xl-start {
        align-items: flex-start !important;
    }

    .align-items-xl-end {
        align-items: flex-end !important;
    }

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-content-xl-start {
        align-content: flex-start !important;
    }

    .align-content-xl-end {
        align-content: flex-end !important;
    }

    .align-content-xl-center {
        align-content: center !important;
    }

    .align-content-xl-between {
        align-content: space-between !important;
    }

    .align-content-xl-around {
        align-content: space-around !important;
    }

    .align-content-xl-stretch {
        align-content: stretch !important;
    }

    .align-self-xl-auto {
        align-self: auto !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .order-xl-first {
        order: -1 !important;
    }

    .order-xl-0 {
        order: 0 !important;
    }

    .order-xl-1 {
        order: 1 !important;
    }

    .order-xl-2 {
        order: 2 !important;
    }

    .order-xl-3 {
        order: 3 !important;
    }

    .order-xl-4 {
        order: 4 !important;
    }

    .order-xl-5 {
        order: 5 !important;
    }

    .order-xl-6 {
        order: 6 !important;
    }

    .order-xl-last {
        order: 999 !important;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .d-xxl-flex {*/
/*        display: flex !important;*/
/*    }*/

/*    .d-xxl-inline-flex {*/
/*        display: inline-flex !important;*/
/*    }*/

/*    .flex-xxl-row {*/
/*        flex-direction: row !important;*/
/*    }*/

/*    .flex-xxl-column {*/
/*        flex-direction: column !important;*/
/*    }*/

/*    .flex-xxl-row-reverse {*/
/*        flex-direction: row-reverse !important;*/
/*    }*/

/*    .flex-xxl-column-reverse {*/
/*        flex-direction: column-reverse !important;*/
/*    }*/

/*    .justify-content-xxl-start {*/
/*        justify-content: flex-start !important;*/
/*    }*/

/*    .justify-content-xxl-end {*/
/*        justify-content: flex-end !important;*/
/*    }*/

/*    .justify-content-xxl-center {*/
/*        justify-content: center !important;*/
/*    }*/

/*    .justify-content-xxl-between {*/
/*        justify-content: space-between !important;*/
/*    }*/

/*    .justify-content-xxl-around {*/
/*        justify-content: space-around !important;*/
/*    }*/

/*    .justify-content-xxl-evenly {*/
/*        justify-content: space-evenly !important;*/
/*    }*/

/*    .align-items-xxl-start {*/
/*        align-items: flex-start !important;*/
/*    }*/

/*    .align-items-xxl-end {*/
/*        align-items: flex-end !important;*/
/*    }*/

/*    .align-items-xxl-center {*/
/*        align-items: center !important;*/
/*    }*/

/*    .align-items-xxl-baseline {*/
/*        align-items: baseline !important;*/
/*    }*/

/*    .align-items-xxl-stretch {*/
/*        align-items: stretch !important;*/
/*    }*/

/*    .align-content-xxl-start {*/
/*        align-content: flex-start !important;*/
/*    }*/

/*    .align-content-xxl-end {*/
/*        align-content: flex-end !important;*/
/*    }*/

/*    .align-content-xxl-center {*/
/*        align-content: center !important;*/
/*    }*/

/*    .align-content-xxl-between {*/
/*        align-content: space-between !important;*/
/*    }*/

/*    .align-content-xxl-around {*/
/*        align-content: space-around !important;*/
/*    }*/

/*    .align-content-xxl-stretch {*/
/*        align-content: stretch !important;*/
/*    }*/

/*    .align-self-xxl-auto {*/
/*        align-self: auto !important;*/
/*    }*/

/*    .align-self-xxl-start {*/
/*        align-self: flex-start !important;*/
/*    }*/

/*    .align-self-xxl-end {*/
/*        align-self: flex-end !important;*/
/*    }*/

/*    .align-self-xxl-center {*/
/*        align-self: center !important;*/
/*    }*/

/*    .align-self-xxl-baseline {*/
/*        align-self: baseline !important;*/
/*    }*/

/*    .align-self-xxl-stretch {*/
/*        align-self: stretch !important;*/
/*    }*/

/*.order-xxl-first {*/
/*    order: -1 !important;*/
/*}*/

/*.order-xxl-0 {*/
/*    order: 0 !important;*/
/*}*/

/*.order-xxl-1 {*/
/*    order: 1 !important;*/
/*}*/

/*.order-xxl-2 {*/
/*    order: 2 !important;*/
/*}*/

/*.order-xxl-3 {*/
/*    order: 3 !important;*/
/*}*/

/*.order-xxl-4 {*/
/*    order: 4 !important;*/
/*}*/

/*.order-xxl-5 {*/
/*    order: 5 !important;*/
/*}*/

/*.order-xxl-6 {*/
/*    order: 6 !important;*/
/*}*/

/*.order-xxl-last {*/
/*    order: 999 !important;*/
/*}*/
/*}*/

.offset-0 {
    margin-left: 0;
}

.offset-1 {
    margin-left: 8.33333333%;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333333%;
}

.offset-5 {
    margin-left: 41.66666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333333%;
}

.offset-8 {
    margin-left: 66.66666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333333%;
}

.offset-11 {
    margin-left: 91.66666667%;
}

@media (min-width: 320px) {
    .offset-xs-0 {
        margin-left: 0;
    }

    .offset-xs-1 {
        margin-left: 8.33333333%;
    }

    .offset-xs-2 {
        margin-left: 16.66666667%;
    }

    .offset-xs-3 {
        margin-left: 25%;
    }

    .offset-xs-4 {
        margin-left: 33.33333333%;
    }

    .offset-xs-5 {
        margin-left: 41.66666667%;
    }

    .offset-xs-6 {
        margin-left: 50%;
    }

    .offset-xs-7 {
        margin-left: 58.33333333%;
    }

    .offset-xs-8 {
        margin-left: 66.66666667%;
    }

    .offset-xs-9 {
        margin-left: 75%;
    }

    .offset-xs-10 {
        margin-left: 83.33333333%;
    }

    .offset-xs-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 576px) {
    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 768px) {
    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.33333333%;
    }

    .offset-md-2 {
        margin-left: 16.66666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.33333333%;
    }

    .offset-md-5 {
        margin-left: 41.66666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.33333333%;
    }

    .offset-md-8 {
        margin-left: 66.66666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.33333333%;
    }

    .offset-md-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 992px) {
    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.33333333%;
    }

    .offset-lg-2 {
        margin-left: 16.66666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.33333333%;
    }

    .offset-lg-5 {
        margin-left: 41.66666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.33333333%;
    }

    .offset-lg-8 {
        margin-left: 66.66666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.33333333%;
    }

    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 1200px) {
    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .offset-xxl-0 {*/
/*        margin-left: 0;*/
/*    }*/

/*    .offset-xxl-1 {*/
/*        margin-left: 8.33333333%;*/
/*    }*/

/*    .offset-xxl-2 {*/
/*        margin-left: 16.66666667%;*/
/*    }*/

/*    .offset-xxl-3 {*/
/*        margin-left: 25%;*/
/*    }*/

/*    .offset-xxl-4 {*/
/*        margin-left: 33.33333333%;*/
/*    }*/

/*    .offset-xxl-5 {*/
/*        margin-left: 41.66666667%;*/
/*    }*/

/*    .offset-xxl-6 {*/
/*        margin-left: 50%;*/
/*    }*/

/*    .offset-xxl-7 {*/
/*        margin-left: 58.33333333%;*/
/*    }*/

/*    .offset-xxl-8 {*/
/*        margin-left: 66.66666667%;*/
/*    }*/

/*    .offset-xxl-9 {*/
/*        margin-left: 75%;*/
/*    }*/

/*    .offset-xxl-10 {*/
/*        margin-left: 83.33333333%;*/
/*    }*/

/*    .offset-xxl-11 {*/
/*        margin-left: 91.66666667%;*/
/*    }*/
/*}*/
.d-grid {
    display: grid !important;
}

@media (min-width: 320px) {
    .d-xs-grid {
        display: grid !important;
    }
}

@media (min-width: 576px) {
    .d-sm-grid {
        display: grid !important;
    }
}

@media (min-width: 768px) {
    .d-md-grid {
        display: grid !important;
    }
}

@media (min-width: 992px) {
    .d-lg-grid {
        display: grid !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-grid {
        display: grid !important;
    }
}

@media (min-width: 1400px) {
    .d-xxl-grid {
        display: grid !important;
    }
}


.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

@media (min-width: 320px) {
    .gap-xs-0 {
        gap: 0 !important;
    }

    .gap-xs-1 {
        gap: 0.25rem !important;
    }

    .gap-xs-2 {
        gap: 0.5rem !important;
    }

    .gap-xs-3 {
        gap: 1rem !important;
    }

    .gap-xs-4 {
        gap: 1.5rem !important;
    }

    .gap-xs-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 576px) {
    .gap-sm-0 {
        gap: 0 !important;
    }

    .gap-sm-1 {
        gap: 0.25rem !important;
    }

    .gap-sm-2 {
        gap: 0.5rem !important;
    }

    .gap-sm-3 {
        gap: 1rem !important;
    }

    .gap-sm-4 {
        gap: 1.5rem !important;
    }

    .gap-sm-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 768px) {
    .gap-md-0 {
        gap: 0 !important;
    }

    .gap-md-1 {
        gap: 0.25rem !important;
    }

    .gap-md-2 {
        gap: 0.5rem !important;
    }

    .gap-md-3 {
        gap: 1rem !important;
    }

    .gap-md-4 {
        gap: 1.5rem !important;
    }

    .gap-md-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 992px) {
    .gap-lg-0 {
        gap: 0 !important;
    }

    .gap-lg-1 {
        gap: 0.25rem !important;
    }

    .gap-lg-2 {
        gap: 0.5rem !important;
    }

    .gap-lg-3 {
        gap: 1rem !important;
    }

    .gap-lg-4 {
        gap: 1.5rem !important;
    }

    .gap-lg-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .gap-xl-0 {
        gap: 0 !important;
    }

    .gap-xl-1 {
        gap: 0.25rem !important;
    }

    .gap-xl-2 {
        gap: 0.5rem !important;
    }

    .gap-xl-3 {
        gap: 1rem !important;
    }

    .gap-xl-4 {
        gap: 1.5rem !important;
    }

    .gap-xl-5 {
        gap: 3rem !important;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .gap-xxl-0 {*/
/*        gap: 0 !important;*/
/*    }*/

/*    .gap-xxl-1 {*/
/*        gap: 0.25rem !important;*/
/*    }*/

/*    .gap-xxl-2 {*/
/*        gap: 0.5rem !important;*/
/*    }*/

/*    .gap-xxl-3 {*/
/*        gap: 1rem !important;*/
/*    }*/

/*    .gap-xxl-4 {*/
/*        gap: 1.5rem !important;*/
/*    }*/

/*    .gap-xxl-5 {*/
/*        gap: 3rem !important;*/
/*    }*/
/*}*/
/* todo: bootstrap styling die we niet nodig hebben weghalen, ook de css variabelen omzetten naar die van nieuwe thema builder */
:root {
    --btn-line-height: 1.5em; /* em unit required - 1em so btn-icon aligns with normal btn */

    /* bereken totale button hoogte */
    --btn-total-height: calc(
            (var(--btn-font-size) * 1.5) +
            (var(--btn-padding-block) * 2) +
            (var(--btn-border-width) * 2)
    );
}

.btn {
    --bs-btn-padding-x: var(--btn-padding-inline);
    --bs-btn-padding-y: var(--btn-padding-block);
    --bs-btn-font-family: var(--btn-font-family);
    --bs-btn-font-size: var(--btn-font-size);
    --bs-btn-font-weight: var(--btn-font-weight);
    --bs-btn-line-height: var(--btn-line-height);
    --bs-btn-color: var(--grey-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--btn-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--btn-border-radius);
    /*--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);*/
    --bs-btn-disabled-opacity: 0.65;
    /*--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);*/
    box-sizing: border-box;
    display: inline-flex; /* was eerst inline-block - veranderd ivm icons in buttons uitlijnen */
    align-items: center;
    justify-content: center;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    text-transform: var(--btn-text-transform);
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}
.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.btn-check:focus + .btn, .btn:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .btn.show {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .btn.show:focus {
    box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    --bs-btn-disabled-color: var(--btn-disabled-text-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg-color);
    --bs-btn-disabled-border-color: var(--btn-disabled-border-color);

    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
    --bs-btn-color: var(--btn-primary-text-color);
    --bs-btn-bg: var(--btn-primary-bg-color);
    --bs-btn-border-color: var(--btn-primary-border-color);
    --bs-btn-hover-color: var(--btn-primary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-primary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-primary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 49, 132, 253;*/
    --bs-btn-active-color: var(--btn-primary-text-color-hover);
    --bs-btn-active-bg: var(--btn-primary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-primary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #0d6efd;*/
    /*--bs-btn-disabled-border-color: #0d6efd;*/
}

.btn-secondary {
    --bs-btn-color: var(--btn-secondary-text-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);
    --bs-btn-border-color: var(--btn-secondary-border-color);
    --bs-btn-hover-color: var(--btn-secondary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-secondary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 130, 138, 145;*/
    --bs-btn-active-color: var(--btn-secondary-text-color-hover);
    --bs-btn-active-bg: var(--btn-secondary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-secondary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #6c757d;*/
    /*--bs-btn-disabled-border-color: #6c757d;*/
}

.btn-tertiary {
    --bs-btn-color: var(--btn-tertiary-text-color);
    --bs-btn-bg: var(--btn-tertiary-bg-color);
    --bs-btn-border-color: var(--btn-tertiary-border-color);
    --bs-btn-hover-color: var(--btn-tertiary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-tertiary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-tertiary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 130, 138, 145;*/
    --bs-btn-active-color: var(--btn-tertiary-text-color-hover);
    --bs-btn-active-bg: var(--btn-tertiary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-tertiary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #6c757d;*/
    /*--bs-btn-disabled-border-color: #6c757d;*/
}


.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--success-600);
    --bs-btn-border-color: var(--success-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success-700);
    --bs-btn-hover-border-color: var(--success-700);
    /*--bs-btn-focus-shadow-rgb: 60, 153, 110;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success-700);
    --bs-btn-active-border-color: var(--success-700);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #198754;*/
    /*--bs-btn-disabled-border-color: #198754;*/
}

.btn-info {
    --bs-btn-color: var(--grey-900);
    --bs-btn-bg: var(--info-500);
    --bs-btn-border-color: var(--info-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--info-600);
    --bs-btn-hover-border-color: var(--info-600);
    /*--bs-btn-focus-shadow-rgb: 11, 172, 204;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--info-600);
    --bs-btn-active-border-color: var(--info-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #0dcaf0;*/
    /*--bs-btn-disabled-border-color: #0dcaf0;*/
}

.btn-warning {
    --bs-btn-color: var(--grey-900);
    --bs-btn-bg: var(--warning-500);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--warning-600);
    --bs-btn-hover-border-color: var(--warning-600);
    /*--bs-btn-focus-shadow-rgb: 217, 164, 6;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--warning-600);
    --bs-btn-active-border-color: var(--warning-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #ffc107;*/
    /*--bs-btn-disabled-border-color: #ffc107;*/
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--error-500);
    --bs-btn-border-color: var(--error-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--error-600);
    --bs-btn-hover-border-color: var(--error-600);
    /*--bs-btn-focus-shadow-rgb: 225, 83, 97;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--error-600);
    --bs-btn-active-border-color: var(--error-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #dc3545;*/
    /*--bs-btn-disabled-border-color: #dc3545;*/
}

.btn-light {
    --bs-btn-color: var(--grey-600);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--grey-300);
    --bs-btn-hover-color: var(--grey-700);
    --bs-btn-hover-bg: var(--grey-100);
    --bs-btn-hover-border-color: var(--grey-400);
    /*--bs-btn-focus-shadow-rgb: 211, 212, 213;*/
    --bs-btn-active-color: var(--grey-700);
    --bs-btn-active-bg: var(--grey-100);
    --bs-btn-active-border-color: var(--grey-400);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #f8f9fa;*/
    /*--bs-btn-disabled-border-color: #f8f9fa;*/
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--grey-800);
    --bs-btn-border-color: var(--grey-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--grey-900);
    --bs-btn-hover-border-color: var(--grey-900);
    /*--bs-btn-focus-shadow-rgb: 66, 70, 73;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--grey-900);
    --bs-btn-active-border-color: var(--grey-900);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #212529;*/
    /*--bs-btn-disabled-border-color: #212529;*/
}

/* TODO*/
/*.btn-outline-primary {*/
/*    --bs-btn-color: #0d6efd;*/
/*    --bs-btn-border-color: #0d6efd;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #0d6efd;*/
/*    --bs-btn-hover-border-color: #0d6efd;*/
/*    --bs-btn-focus-shadow-rgb: 13, 110, 253;*/
/*    --bs-btn-active-color: #fff;*/
/*    --bs-btn-active-bg: #0d6efd;*/
/*    --bs-btn-active-border-color: #0d6efd;*/
/*    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
/*    --bs-btn-disabled-color: #0d6efd;*/
/*    --bs-btn-disabled-bg: transparent;*/
/*    --bs-btn-disabled-border-color: #0d6efd;*/
/*    --bs-gradient: none;*/
/*}*/

/* TODO */
/*.btn-outline-secondary {*/
/*    --bs-btn-color: #6c757d;*/
/*    --bs-btn-border-color: #6c757d;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #6c757d;*/
/*    --bs-btn-hover-border-color: #6c757d;*/
/*    --bs-btn-focus-shadow-rgb: 108, 117, 125;*/
/*    --bs-btn-active-color: #fff;*/
/*    --bs-btn-active-bg: #6c757d;*/
/*    --bs-btn-active-border-color: #6c757d;*/
/*    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
/*    --bs-btn-disabled-color: #6c757d;*/
/*    --bs-btn-disabled-bg: transparent;*/
/*    --bs-btn-disabled-border-color: #6c757d;*/
/*    --bs-gradient: none;*/
/*}*/

.btn-outline-success {
    --bs-btn-color: var(--success-700);
    --bs-btn-border-color: var(--success-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success-500);
    --bs-btn-hover-border-color: var(--success-500);
    /*--bs-btn-focus-shadow-rgb: 25, 135, 84;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success-500);
    --bs-btn-active-border-color: var(--success-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #198754;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #198754;*/
    /*--bs-gradient: none;*/
}

.btn-outline-info {
    --bs-btn-color: var(--info-700);
    --bs-btn-border-color: var(--info-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--info-500);
    --bs-btn-hover-border-color: var(--info-500);
    /*--bs-btn-focus-shadow-rgb: 13, 202, 240;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--info-500);
    --bs-btn-active-border-color: var(--info-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #0dcaf0;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #0dcaf0;*/
    /*--bs-gradient: none;*/
}

.btn-outline-warning {
    --bs-btn-color: var(--warning-700);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--warning-500);
    --bs-btn-hover-border-color: var(--warning-500);
    /*--bs-btn-focus-shadow-rgb: 255, 193, 7;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--warning-500);
    --bs-btn-active-border-color: var(--warning-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #ffc107;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #ffc107;*/
    /*--bs-gradient: none;*/
}

.btn-outline-danger {
    --bs-btn-color: var(--error-700);
    --bs-btn-border-color: var(--error-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--error-500);
    --bs-btn-hover-border-color: var(--error-500);
    /*--bs-btn-focus-shadow-rgb: 220, 53, 69;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--error-500);
    --bs-btn-active-border-color: var(--error-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #dc3545;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #dc3545;*/
    /*--bs-gradient: none;*/
}

 /*TODO*/
/*.btn-outline-light {*/
/*    --bs-btn-color: #f8f9fa;*/
/*    --bs-btn-border-color: #f8f9fa;*/
/*    --bs-btn-hover-color: #000;*/
/*    --bs-btn-hover-bg: #f8f9fa;*/
/*    --bs-btn-hover-border-color: #f8f9fa;*/
/*    !*--bs-btn-focus-shadow-rgb: 248, 249, 250;*!*/
/*    !*--bs-btn-active-color: #000;*!*/
/*    !*--bs-btn-active-bg: #f8f9fa;*!*/
/*    !*--bs-btn-active-border-color: #f8f9fa;*!*/
/*    !*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*!*/
/*    !*--bs-btn-disabled-color: #f8f9fa;*!*/
/*    !*--bs-btn-disabled-bg: transparent;*!*/
/*    !*--bs-btn-disabled-border-color: #f8f9fa;*!*/
/*    !*--bs-gradient: none;*!*/
/*}*/

/*TODO*/
/*.btn-outline-dark {*/
/*    --bs-btn-color: #212529;*/
/*    --bs-btn-border-color: #212529;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #212529;*/
/*    --bs-btn-hover-border-color: #212529;*/
/*    !*--bs-btn-focus-shadow-rgb: 33, 37, 41;*!*/
/*    !*--bs-btn-active-color: #fff;*!*/
/*    !*--bs-btn-active-bg: #212529;*!*/
/*    !*--bs-btn-active-border-color: #212529;*!*/
/*    !*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*!*/
/*    !*--bs-btn-disabled-color: #212529;*!*/
/*    !*--bs-btn-disabled-bg: transparent;*!*/
/*    !*--bs-btn-disabled-border-color: #212529;*!*/
/*    !*--bs-gradient: none;*!*/
/*}*/

.btn-link {
    --bs-btn-font-weight: var(--font-weight-normal);
    --bs-btn-color: var(--link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--link-color-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--link-color-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--grey-400);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline;
}
.btn-link:focus {
    color: var(--bs-btn-color);
}
.btn-link:hover {
    color: var(--bs-btn-hover-color);
}

.btn-lg, .btn-group-lg > .btn {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-font-size: 1.25rem;
    /*--bs-btn-border-radius: 0.5rem;*/
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.875rem;
    /*--bs-btn-border-radius: 0.25rem;*/
}

/* custom - niet Bootstrap original */
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: var(--text-size-xs);
    /*--bs-btn-border-radius: 0.25rem;*/
}




.btn .st-icon {
    --st-icon-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-line-height); /* min-height = line-height, want de icon pakte de line-height zelf niet - nu toch goed uitgelijnd en even hoog als normale btn */
}

/* space between icon and text in button */
/*.btn span + .st-icon,*/
/*.btn .st-icon + span{*/
/*    margin-left: 0.5em;*/
/*}*/

.btn-icon,
.configuration_btn.btn-icon {
    /*padding-block: var(--btn-padding-block);*/
    /*padding-inline: var(--btn-padding-block);*/
    --bs-btn-padding-x: var(--bs-btn-padding-y);
}

.btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-icon .st-icon,
.btn-icon .fa-icon {
    min-width: var(--btn-line-height); /* btn-icon moet vierkant zijn, daarom ook hier de min-WIDTH de line-height */
}
/* todo: bootstrap styling die we niet nodig hebben weghalen, ook de css variabelen omzetten naar die van nieuwe thema builder */

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropdown-menu {
    --bs-dropdown-min-width: 10rem; /* 160px */
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: #212529;
    --bs-dropdown-bg: #fff;
    /*--bs-dropdown-border-color: var(--bs-border-color-translucent);*/
    --bs-dropdown-border-color: var(--border-color);

    --bs-dropdown-border-radius: var(--border-radius-small);
    --bs-dropdown-border-width: 0; /* was 1px - weggehaald om uiterlijk subtieler te maken */

    --bs-dropdown-inner-border-radius: calc(var(--bs-dropdown-border-radius) - var(--bs-dropdown-border-width));
    /*--bs-dropdown-divider-bg: var(--bs-border-color-translucent);*/
    --bs-dropdown-divider-bg: var(--border-color);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-link-color: var(--grey-700);
    --bs-dropdown-link-hover-color: var(--grey-800);
    --bs-dropdown-link-hover-bg: #fff;
    --bs-dropdown-link-active-color: var(--grey-800);
    --bs-dropdown-link-active-bg: #fff;
    --bs-dropdown-link-disabled-color: var(--grey-400);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: var(--grey-700);
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: 0 0 var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius);
    box-shadow: var(--shadow-md);
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
}

.dropdown-menu-start {
    --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
    right: auto;
    left: 0;
}

.dropdown-menu-end {
    --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto;
}

/* Pas aanzetten als we dit nodig hebben. */
/*
@media (min-width: 576px) {
    .dropdown-menu-sm-start {
        --bs-position: start;
    }
    .dropdown-menu-sm-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-sm-end {
        --bs-position: end;
    }
    .dropdown-menu-sm-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 768px) {
    .dropdown-menu-md-start {
        --bs-position: start;
    }
    .dropdown-menu-md-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-md-end {
        --bs-position: end;
    }
    .dropdown-menu-md-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 992px) {
    .dropdown-menu-lg-start {
        --bs-position: start;
    }
    .dropdown-menu-lg-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-lg-end {
        --bs-position: end;
    }
    .dropdown-menu-lg-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 1200px) {
    .dropdown-menu-xl-start {
        --bs-position: start;
    }
    .dropdown-menu-xl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xl-end {
        --bs-position: end;
    }
    .dropdown-menu-xl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 1400px) {
    .dropdown-menu-xxl-start {
        --bs-position: start;
    }
    .dropdown-menu-xxl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xxl-end {
        --bs-position: end;
    }
    .dropdown-menu-xxl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
*/

/* Pas aanzetten als we dit nodig hebben. */
/* DROPUP */
/*
.dropup .dropdown-menu[data-bs-popper] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
    margin-left: 0;
}
*/

/* Pas aanzetten als we dit nodig hebben. */
/* DROPEND */ /*
.dropend .dropdown-menu[data-bs-popper] {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
    margin-left: 0;
}
.dropend .dropdown-toggle::after {
    vertical-align: 0;
}
*/
/* Pas aanzetten als we dit nodig hebben. */
/* DROPSTART */ /*
.dropstart .dropdown-menu[data-bs-popper] {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
}
.dropstart .dropdown-toggle::after {
    display: none;
}
.dropstart .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
    margin-left: 0;
}
.dropstart .dropdown-toggle::before {
    vertical-align: 0;
}
*/

.dropdown-divider {
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    opacity: 1;
}

.dropdown-item {
    display: block;
    box-sizing: border-box; /* fix */
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: var(--font-weight-normal);
    color: var(--bs-dropdown-link-color) !important; /* TODO: important vanwege .topmenu a color - dit fixen zonder important */
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
    text-decoration: underline;
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-header {
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap;
}

.dropdown-item-text {
    display: block;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    color: var(--bs-dropdown-link-color);
}

/* Pas aanzetten als we dark mode nodig hebben */
/*
.dropdown-menu-dark {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #343a40;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd;
}
*/


/* LET OP: Deze styling is aangepast. Wij hebben er variabelen aan toegevoegd. Let hier op bij evt. updaten van Bootstrap versies */

/* globaal */
.form-label {
    margin-bottom: 0.5rem;
}

/* Labels on the side of the input instead of above it */
.col-form-label {
    padding-top: calc(0.375rem + var(--input-border-width));
    padding-bottom: calc(0.375rem + var(--input-border-width));
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-form-label-lg {
    padding-top: calc(0.5rem + var(--input-border-width));
    padding-bottom: calc(0.5rem + var(--input-border-width));
    font-size: var(--text-size-lg);
}

.col-form-label-sm {
    padding-top: calc(0.25rem + var(--input-border-width));
    padding-bottom: calc(0.25rem + var(--input-border-width));
    font-size: var(--text-size-sm);
}

.form-text {
    margin-top: 0.25rem;
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

/* Oude classes */
.general_input_textarea,
.general_input_field,
/* Nieuwe class */
.form-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: var(--input-font-size, 1rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--input-text-color);
    background-color: var(--input-bg-color, #fff);
    background-clip: padding-box;
    border: var(--input-border-width) solid var(--input-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}
.form-control[type=file] {
    overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.form-control:focus {
    color: var(--input-text-color-focus);
    background-color: var(--input-bg-color-focus, #fff);
    border-color: var(--input-border-color-focus);
    outline: 0;
    /* een box-shadow bij focus is echt té Bootstrap */
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}
.form-control::-webkit-date-and-time-value {
    height: 1.5em;
}
.form-control::-moz-placeholder {
    color: var(--input-placeholder-text-color);
    opacity: 1;
}
.form-control::placeholder {
    color: var(--input-placeholder-text-color);
    opacity: 1;
}
.form-control:disabled {
    background-color: var(--grey-200);
    opacity: 1;
}

.form-control::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--grey-900);
    background-color: var(--grey-200);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--input-border-width);
    border-radius: 0;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--grey-900);
    background-color: var(--grey-200);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--input-border-width);
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-control::-webkit-file-upload-button {
        -webkit-transition: none;
        transition: none;
    }
    .form-control::file-selector-button {
        transition: none;
    }
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--grey-300);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--grey-300);
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--grey-900);
    background-color: transparent;
    border: solid transparent;
    border-width: var(--input-border-width) 0;
}
.form-control-plaintext:focus {
    outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
    padding-right: 0;
    padding-left: 0;
}

.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}
.form-control-sm::-webkit-file-upload-button {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
}
.form-control-sm::file-selector-button {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
}

.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: var(--input-lg-border-radius);
}
.form-control-lg::-webkit-file-upload-button {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
}
.form-control-lg::file-selector-button {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
}

textarea.general_input_textarea,
textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

textarea.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
}

textarea.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
}


/* color picker input */
/*
.form-control-color {
    width: 3rem;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer;
}
.form-control-color::-moz-color-swatch {
    border: 0 !important;
    border-radius: 0.375rem;
}
.form-control-color::-webkit-color-swatch {
    border-radius: 0.375rem;
}
.form-control-color.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
}
.form-control-color.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
}
*/

select,
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: var(--input-font-size, 1rem);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--input-text-color);
    background-color: var(--input-bg-color, #fff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-select {
        transition: none;
    }
}

.form-select:focus {
    border-color: var(--input-border-color-focus);
    outline: 0;
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}
.form-select:disabled {
    background-color: var(--grey-200);
}
.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--grey-900);
}

.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}

.form-select-lg {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: var(--input-lg-border-radius);
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.form-check-reverse {
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
}
.form-check-reverse .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}
.form-check-input[type=radio] {
    border-radius: 50%;
}
.form-check-input:active {
    filter: brightness(90%);
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input:checked {
    background-color: #0d6efd; /* todo: vervangen met custom color swatches, of met css accent-color property */
    border-color: #0d6efd;
}
.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    cursor: default;
    opacity: 0.5;
}

.form-switch {
    padding-left: 2.5em;
}
.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
    padding-right: 2.5em;
    padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
    margin-right: -2.5em;
    margin-left: 0;
}

.form-check-inline {
    display: inline-block;
    margin-right: 1rem;
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-range:focus {
    outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range::-moz-focus-outer {
    border: 0;
}
.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none;
    }
}
.form-range::-webkit-slider-thumb:active {
    background-color: #b6d4fe;
}
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem;
}
.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none;
    }
}
.form-range::-moz-range-thumb:active {
    background-color: #b6d4fe;
}
.form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem;
}
.form-range:disabled {
    pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
    background-color: #adb5bd;
}

/* ###form-floating */
.form-floating {
    --form-floating-label-opacity: 0.75;
    position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-floating > label {
        transition: none;
    }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    padding: 1rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
    color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
    border-width: 1px 0;
}


/*TODO: info kleur, */


/* ###input-group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
    z-index: 3;
}
.input-group .btn {
    position: relative;
    z-index: 2;
}
.input-group .btn:focus {
    z-index: 3;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: var(--input-font-size, 1rem);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--grey-900);
    text-align: center;
    white-space: nowrap;
    background-color: var(--grey-200);
    border: var(--input-border-width) solid #ced4da;
    border-radius: var(--input-border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: var(--text-size-md);
    border-radius: 0.5rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
    padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.form-control-visually-first),
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
    margin-left: calc(-1 * var(--input-border-width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* .btn-input-group heeft dezelfde styling als de input */
.btn-input-group {
    --bs-btn-color: var(--input-text-color);
    --bs-btn-bg: var(--input-bg-color, #fff);
    --bs-btn-border-color: var(--input-border-color);
    --bs-btn-hover-color: var(--input-text-color);
    --bs-btn-hover-border-color: var(--input-border-color);
    --bs-btn-active-color: var(--input-text-color);
    --bs-btn-active-border-color: var(--input-border-color);

    --bs-btn-hover-bg: var(--grey-100);
    --bs-btn-active-bg: var(--grey-100);

    border-width: var(--input-border-width);
}

.input-group:has(.form-control:focus) .btn-input-group {
    --bs-btn-color: var(--input-text-color-focus);
    --bs-btn-bg: var(--input-bg-color-focus, #fff);
    --bs-btn-border-color: var(--input-border-color-focus);
    --bs-btn-hover-color: var(--input-text-color-focus);
    --bs-btn-hover-border-color: var(--input-border-color-focus);
    --bs-btn-active-color: var(--input-text-color-focus);
    --bs-btn-active-border-color: var(--input-border-color-focus);
}

/* als een input group een .btn-input-group heeft, dan moet de form-control geen border-right-color hebben */
.input-group:has(.btn-input-group) .form-control {
    border-right: none;
}

.btn-input-group {
    border-left: none !important;
}



/* validation styling - mag extern - todo: aparte file van maken zodat deze evt. extern kan. De rest intern eventueel als dat nodig is */
/* TODO: kleuren wijzigen */
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #198754;
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: rgba(25, 135, 84, 0.9);
    border-radius: 0.375rem;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
    border-color: #198754;
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.was-validated .form-control-color:valid, .form-control-color.is-valid {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
    border-color: #198754;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
    background-color: #198754;
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: #198754;
}

.form-check-inline .form-check-input ~ .valid-feedback {
    margin-left: 0.5em;
}

.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {
    z-index: 1;
}
.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,
.was-validated .input-group .form-select:valid:focus,
.input-group .form-select.is-valid:focus {
    z-index: 3;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    border-radius: 0.375rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
    border-color: #dc3545;
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
    border-color: #dc3545;
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
    background-color: #dc3545;
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: 0.5em;
}

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
    z-index: 2;
}
.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {
    z-index: 3;
}


.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    /*--bs-card-border-width: var(--card-border-width);*/
    --bs-card-border-color: var(--card-border-color);
    --bs-card-border-color-hover: var(--card-border-color-hover);
    --bs-card-border-radius: var(--card-border-radius);
    /*--bs-card-box-shadow: var(--card-shadow);*/
    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    /*--bs-card-cap-color: ;*/
    /*--bs-card-height: ;*/
    --bs-card-color: var(--body-text-color);
    --bs-card-bg: var(--card-background-color);
    --bs-card-img-overlay-padding: 1.25rem;
    --bs-card-group-margin: 0.75rem;
    --card-font-weight: var(--font-weight-bold);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

/*.card:has(.stretched-link):hover,*/
/*.card:has(.stretched-link):focus {*/
/*    --bs-card-box-shadow: var(--card-shadow-hover);*/
/*}*/


/* Todo: alleen hover styling als card clickable is, nu heb je altijd hover, wat niet wenselijk is */
/*.card:hover,*/
/*.card:focus {*/
/*    border: var(--bs-card-border-width) solid var(--bs-card-border-color-hover);*/
/*}*/

.card > hr {
    margin-right: 0;
    margin-left: 0;
}

.card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
    border-top: 0;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-body .h1,
.card-body .h2,
.card-body .h3,
.card-body .h4,
.card-body .h5,
.card-body .h6 {
    color: var(--bs-card-color);
}

.card-title {
    font-weight: var(--card-font-weight);
}

/* Voorkomt dat een h1-h6 binnen of als .card-title een margin-bottom krijgt */
.card-title,
.card-title > * {
    margin-bottom: 0;
}

/* voorkomen dat het margin-bottom krijgt als het geen item na zich heeft. */
.card-title:not(:last-child) {
    margin-bottom: var(--bs-card-title-spacer-y);
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link + .card-link {
    margin-left: var(--bs-card-spacer-x);
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
    padding-block-end: var(--bs-card-spacer-y);
    padding-inline: var(--bs-card-spacer-x);
    /*color: var(--bs-card-cap-color);*/
    /*background-color: var(--bs-card-cap-bg);*/
    /*border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);*/
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0;
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
    box-sizing: border-box;
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
    margin-bottom: var(--bs-card-group-margin);
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

    .card-group > .card {
        flex: 1 0 0%;
        margin-bottom: 0;
    }

    .card-group > .card + .card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group > .card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-top,
    .card-group > .card:not(:last-child) .card-header {
        border-top-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-bottom,
    .card-group > .card:not(:last-child) .card-footer {
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-top,
    .card-group > .card:not(:first-child) .card-header {
        border-top-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-bottom,
    .card-group > .card:not(:first-child) .card-footer {
        border-bottom-left-radius: 0;
    }
}


/* Aangepaste spacers i.v.m. de ingebakken padding van het Paperform formulier. Wordt gebruikt in Back in Stock Add-on, en ook voor Maatwerk paperform oplossingen. */
.card.card-paperform-embed {
    padding-inline: calc(var(--bs-card-spacer-x) - 25px);
    padding-bottom: calc(var(--bs-card-spacer-y) - 32px);
}


/* card-lg & card-xl are custom */
.card-xl {
    --bs-card-box-shadow: var(--shadow-md);
}

@media (min-width: 576px) {
    .card-xl {
        --bs-card-spacer-y: 1.75rem;
        --bs-card-spacer-x: 2rem;
        --bs-card-box-shadow: var(--shadow-lg);
    }
}

@media (min-width: 768px) {
    .card-lg {
        --bs-card-spacer-y: 1.75rem;
        --bs-card-spacer-x: 2rem;
        --bs-card-box-shadow: var(--shadow-lg);
    }

    .card-xl {
        --bs-card-spacer-y: 2.5rem;
        --bs-card-spacer-x: 3rem;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/


* {
    padding: 0;
    margin: 0;
}

*, a img {
    border: 0;
}

a, button {
    outline: 0;
    cursor: pointer;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

dt {
    font-weight: 700;
    display: inline-block;
}

dd {
    /*margin-bottom: 0.5rem;*/
    margin-left: 0;
    display: inline-block;
}

article, aside, code, details, figcaption, figure, footer, header, hgroup, menu, nav, pre, section {
    display: block;
}

a, a i[class^=icon-] {
    text-decoration: none;
}

button, div#menu_top ul.loggedin-box > li#logged-in-bar > span, div.ac_results li, div.accordion_heading, div.already_account h2, div.basket_wrapper, div.form_section h2.opc.already_account, div.form_section h2.opc.no_account, div.no_account h2, div.searchbox span.searchSubmit, div.table-section table.checkout_payment tr:hover, div.table-section table.checkout_payment_address tr:hover, div.table-section table.checkout_shipping tr:hover, div.table-section table.checkout_shipping_address tr:hover, div.table-section table.onTableRowClick tr, span.checkCoupon {
    cursor: pointer;
}

blockquote, q {
    quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none;
}

.ui-slider-vertical .ui-slider-range-min, div.product-card-slide-image img.subimage1, div.products_gallery_row_imagecontainer img.subimage1, div.products_gallery_row_imagecontainer img.subimage2, div.products_gallery_row_imagecontainer img.subimage_normal {
    bottom: 0;
}

table.inhoud_address_book tr, table.newsletters tr {
    vertical-align: top;
}

div#inner_menu, div.box, div.box div.box_content, div.box div.box_stars, div.box_product_image, div.box_top, div.content_section, div.form_section, div.form_section h2 span, div.form_section h2.opc span, div.stap, div.table-section {
    position: relative;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

:root {
    --section-space-y-min: 1.25rem;
    --section-space-y-max: 2.5rem;

    /* deze clamp functie zorgt dat de spacer schaalt van kleine viewport naar grote viewport - TODO: netter maken, denk aan utopia.fyi generator */
    /* de unit van space is in rem, dus max container width ook uitgedrukt in rem. TODO: dit dynamisch maken afhankelijk van current max container width */
    /*--section-space-y: clamp(var(--section-space-y-min), calc( (var(--section-space-y-max) / 1rem) / 75 * 100vw), var(--section-space-y-max));*/ /* werkt niet want het moet unitless */
    --section-space-y: clamp(var(--section-space-y-min), calc(2.5 / 75 * 100vw), var(--section-space-y-max));
}

/* Spacing */
:root {
    --gutter: 1rem;
    --gutter-half: calc(var(--gutter) / 2);

    --st-spacing-3xs: .125rem;
    --st-spacing-2xs: .25rem;
    --st-spacing-xs: .5rem;
    --st-spacing-sm: .75rem;
    --st-spacing-md: 1rem;
    --st-spacing-lg: 1.125rem;
    --st-spacing-xl: 1.25rem;
    --st-spacing-2xl: 1.5rem;
    --st-spacing-3xl: 1.75rem;
    --st-spacing-4xl: 2rem;
}


:root {
/*
https://www.lockedownseo.com/social-media-colors/
*/

    --whatsapp-green: #25d366;
    --whatsapp-green-dark: #075e54;
    --color-whatsapp: var(--whatsapp-green);

    --facebook-blue: #1877F2;
    --facebook-blue-dark: #3B5998;
    --color-facebook: var(--facebook-blue);

    /*--instagram-gradient: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);*/
    --instagram-magenta: #D300C5;
    --instagram-pink: #FF0069;
    /*--instagram-magenta: #C32AA3;*/
    --color-instagram: var(--instagram-magenta);

    --twitter-blue: #1DA1F2;
    --twitter-black: #000;
    --color-twitter: var(--twitter-black);

    --color-pinterest: #bd081c;

    --color-linkedin-blue: #0a66c2;
    --color-linkedin-pink: #f0b6a8;
    --color-linkedin-white: #fff;
    --color-linkedin-black: #000;


    /* Nog niet in gebruik */
    /*--youtube-red: #FF0000;*/
    /*--youtube-grey: #282828;*/
    /*--color-youtube: var(--youtube-red);*/

    /*--google-blue: #4285F4;*/
    /*--google-red: #DB4437;*/
    /*--google-yellow: #F4B400;*/
    /*--google-green: #0F9D58;*/
    /*--color-google: var(--google-blue);*/

    /*--color-vimeo: #1ab7ea;*/

    /*--snapchat-yellow: #FFFC00;*/
    /*--snapchat-black: #000000;*/
    /*--color-snapchat: var(--color-snapchat-yellow);*/

    /*--color-dribbble: #ea4c89;*/

    /*--color-skype: #00AFF0;*/

    /*--color-yahoo: #430297;*/
}

/******************** Z-INDEX ********************/

/* z-index allemaal bij elkaar zodat je niet hoeft te gissen en maar gewoon 9999 overal invult. */
:root {
    /* Topmenu kan op position:fixed; komen te staan. Moet dus boven andere header onderdelen uitkomen. */
    --topmenu-z-index: 9000;

    --header-z-index: 7770;
    --header-basket-z-index: 7780;

    --header-mobile-z-index: 9999;
    --mobile-menu-flyout-z-index: 10010;

    --site-nav-z-index: 7760;
    --dropdown-z-index: 9999;
    --mega-menu-dropdown-z-index: var(--dropdown-z-index);
    --autocomplete-z-index: 10000;
    --overlay-searchbar-z-index: calc(var(--autocomplete-z-index) - 1);

    --scroll-to-top-link-z-index: 2000;

    --quick-access-panel-z-index: 9999;

    --widget-newsletter-z-index: 10;
    --recaptcha-z-index: calc(var(--widget-newsletter-z-index) + 1);


    --cookie-bar-z-index: 16000003;
}

/* eigenlijk een variable */
:root  {
    --preferred-form-width: 65ch;
}

/******************** FILTER BLUR ********************/
:root {
    --blur-xs: blur(2px);
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(16px);
    --blur-2xl: blur(24px);
    --blur-3xl: blur(40px);
    --blur-4xl: blur(64px);
}
.blur-xs {filter: var(--blur-xs);}
.blur-sm {filter: var(--blur-sm);}
.blur-md {filter: var(--blur-md);}
.blur-lg {filter: var(--blur-lg);}
.blur-xl {filter: var(--blur-xl);}
.blur-2xl {filter: var(--blur-2xl);}
.blur-3xl {filter: var(--blur-3xl);}
.blur-4xl {filter: var(--blur-4xl);}

/******************** BACKDROP BLUR ********************/
:root {
    --backdrop-blur-xs: var(--blur-xs);
    --backdrop-blur-sm: var(--blur-sm);
    --backdrop-blur-md: var(--blur-md);
    --backdrop-blur-lg: var(--blur-lg);
    --backdrop-blur-xl: var(--blur-xl);
    --backdrop-blur-2xl: var(--blur-2xl);
    --backdrop-blur-3xl: var(--blur-3xl);
    --backdrop-blur-4xl: var(--blur-4xl);
}
.backdrop-blur-xs {backdrop-filter: var(--backdrop-blur-xs);}
.backdrop-blur-sm {backdrop-filter: var(--backdrop-blur-sm);}
.backdrop-blur-md {backdrop-filter: var(--backdrop-blur-md);}
.backdrop-blur-lg {backdrop-filter: var(--backdrop-blur-lg);}
.backdrop-blur-xl {backdrop-filter: var(--backdrop-blur-xl);}
.backdrop-blur-2xl {backdrop-filter: var(--backdrop-blur-2xl);}
.backdrop-blur-3xl {backdrop-filter: var(--backdrop-blur-3xl);}
.backdrop-blur-4xl {backdrop-filter: var(--backdrop-blur-4xl);}


/******************** FONT-WEIGHT ********************/
:root {
    --font-weight-thin:         100;
    --font-weight-extralight:   200;
    --font-weight-light:        300;
    --font-weight-normal:       400;
    --font-weight-regular:      var(--font-weight-normal);
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;
    --font-weight-extrabold:    800;
    --font-weight-black:        900;
}
.font-weight-thin {font-weight: var(--font-weight-thin);}
.font-weight-extralight {font-weight: var(--font-weight-extralight);}
.font-weight-light {font-weight: var(--font-weight-light);}
.font-weight-normal {font-weight: var(--font-weight-normal);}
.font-weight-medium {font-weight: var(--font-weight-medium);}
.font-weight-semibold {font-weight: var(--font-weight-semibold);}
.font-weight-bold {font-weight: var(--font-weight-bold);}
.font-weight-extrabold {font-weight: var(--font-weight-extrabold);}
.font-weight-black {font-weight: var(--font-weight-black);}


/******************** BOX-SHADOW ********************/
:root {
    --shadow-rgb: 0,0,0;

    --shadow-xs: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(var(--shadow-rgb), 0.1), 0 1px 2px -1px rgba(var(--shadow-rgb), 0.1);
    --shadow-md: 0 4px 6px -1px rgba(var(--shadow-rgb), 0.1), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.1), 0 4px 6px -4px rgba(var(--shadow-rgb), 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.1), 0 8px 10px -6px rgba(var(--shadow-rgb), 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.25);

    --shadow-xs-light: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.025);
    --shadow-sm-light: 0 1px 3px 0 rgba(var(--shadow-rgb), 0.05), 0 1px 2px -1px rgba(var(--shadow-rgb), 0.05);
    --shadow-md-light: 0 4px 6px -1px rgba(var(--shadow-rgb), 0.05), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.05);
    --shadow-lg-light: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.05), 0 4px 6px -4px rgba(var(--shadow-rgb), 0.05);
    --shadow-xl-light: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.05), 0 8px 10px -6px rgba(var(--shadow-rgb), 0.05);
    --shadow-2xl-light: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.125);

    --shadow-backdrop: 0 0 0 100vh rgba(0,0,0,0.25);

    --shadow-inner-xs: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.05);
    --shadow-inner-sm: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.1);
    --shadow-inner-md: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.15);
    --shadow-inner-lg: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.20);
    --shadow-inner-xl: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.3);
}

.shadow-xs {box-shadow: var(--shadow-xs);}
.shadow-sm {box-shadow: var(--shadow-sm);}
.shadow-md {box-shadow: var(--shadow-md);}
.shadow-lg {box-shadow: var(--shadow-lg);}
.shadow-xl {box-shadow: var(--shadow-xl);}
.shadow-2xl {box-shadow: var(--shadow-2xl);}

.shadow-xs-light {box-shadow: var(--shadow-xs-light);}
.shadow-sm-light {box-shadow: var(--shadow-sm-light);}
.shadow-md-light {box-shadow: var(--shadow-md-light);}
.shadow-lg-light {box-shadow: var(--shadow-lg-light);}
.shadow-xl-light {box-shadow: var(--shadow-xl-light);}
.shadow-2xl-light {box-shadow: var(--shadow-2xl-light);}

.shadow-inner-xs {box-shadow: var(--shadow-inner-xs);}
.shadow-inner-sm {box-shadow: var(--shadow-inner-sm);}
.shadow-inner-md {box-shadow: var(--shadow-inner-md);}
.shadow-inner-lg {box-shadow: var(--shadow-inner-lg);}
.shadow-inner-xl {box-shadow: var(--shadow-inner-xl);}
.shadow-none {box-shadow: none !important;}


/******************** FILTER SHADOW DROP-SHADOW ********************/
:root {
    --drop-shadow-xs: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.05));
    --drop-shadow-sm: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), 0.1)) drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.06));
    --drop-shadow-md: drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.07)) drop-shadow(0 2px 2px rgba(var(--shadow-rgb), 0.06));
    --drop-shadow-lg: drop-shadow(0 10px 8px rgba(var(--shadow-rgb), 0.04)) drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.1));
    --drop-shadow-xl: drop-shadow(0 20px 13px rgba(var(--shadow-rgb), 0.03)) drop-shadow(0 8px 5px rgba(var(--shadow-rgb), 0.08));
    --drop-shadow-2xl: drop-shadow(0 25px 25px rgba(var(--shadow-rgb), 0.15));

    --drop-shadow-xs-light: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.025));
    --drop-shadow-sm-light: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), 0.05)) drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.03));
    --drop-shadow-md-light: drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.035)) drop-shadow(0 2px 2px rgba(var(--shadow-rgb), 0.03));
    --drop-shadow-lg-light: drop-shadow(0 10px 8px rgba(var(--shadow-rgb), 0.02)) drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.05));
    --drop-shadow-xl-light: drop-shadow(0 20px 13px rgba(var(--shadow-rgb), 0.015)) drop-shadow(0 8px 5px rgba(var(--shadow-rgb), 0.04));
    --drop-shadow-2xl-light: drop-shadow(0 25px 25px rgba(var(--shadow-rgb), 0.075));
}
.drop-shadow-xs {filter: var(--drop-shadow-xs);}
.drop-shadow-sm {filter: var(--drop-shadow-sm);}
.drop-shadow-md {filter: var(--drop-shadow-md);}
.drop-shadow-lg {filter: var(--drop-shadow-lg);}
.drop-shadow-xl {filter: var(--drop-shadow-xl);}
.drop-shadow-2xl {filter: var(--drop-shadow-2xl);}

.drop-shadow-xs-light { filter: var(--drop-shadow-xs-light); }
.drop-shadow-sm-light { filter: var(--drop-shadow-sm-light); }
.drop-shadow-md-light { filter: var(--drop-shadow-md-light); }
.drop-shadow-lg-light { filter: var(--drop-shadow-lg-light); }
.drop-shadow-xl-light { filter: var(--drop-shadow-xl-light); }
.drop-shadow-2xl-light { filter: var(--drop-shadow-2xl-light); }

/******************** BORDER-RADIUS ********************/
:root {
    --border-radius-xs: .125rem; /* 2px */
    --border-radius-sm: .25rem;  /* 4px */
    --border-radius-md: .375rem; /* 6px */
    --border-radius-lg: .5rem;   /* 8px */
    --border-radius-xl: .75rem;  /* 12px */
    --border-radius-2xl: 1rem;   /* 16px */
    --border-radius-3xl: 1.5rem; /* 24px */
    --border-radius-4xl: 2rem;   /* 32px */
    --border-radius-5xl: 3rem;   /* 48px */
    --border-radius-6xl: 4rem;   /* 64px */
    --border-radius-pill: 1000px;
}
.border-radius-xs {border-radius: var(--border-radius-xs);}
.border-radius-sm {border-radius: var(--border-radius-sm);}
.border-radius-md {border-radius: var(--border-radius-md);}

.border-radius {border-radius: var(--border-radius);}

.border-radius-lg {border-radius: var(--border-radius-lg);}
.border-radius-xl {border-radius: var(--border-radius-xl);}
.border-radius-2xl {border-radius: var(--border-radius-2xl);}
.border-radius-3xl {border-radius: var(--border-radius-3xl);}
.border-radius-4xl {border-radius: var(--border-radius-4xl);}
.border-radius-5xl {border-radius: var(--border-radius-5xl);}
.border-radius-6xl {border-radius: var(--border-radius-6xl);}
.border-radius-pill {border-radius: var(--border-radius-pill);}


/******************** BORDER-COLORS ********************/
:root {
    --border-color-transparent-dark: rgba(0,0,0,.05);
    --border-color-transparent-light: rgba(255,255,255,.05);
}

/*TODO: deze tiny, small, big en huge zijn classes van CKEditor 5. Het liefst zou ik dat CKEditor 5 ONZE classes er op zet. Kijken of dat kan.*/
.text-size-xs, .text-tiny  {font-size: var(--text-size-xs)!important;}
.text-size-sm, .text-small {font-size: var(--text-size-sm)!important;}
.text-size-md              {font-size: var(--text-size-md)!important;}
.text-size-lg, .text-big   {font-size: var(--text-size-lg)!important;}
.text-size-xl, .text-huge  {font-size: var(--text-size-xl)!important;}


/* Tailwind */
.object-contain {object-fit: contain !important;}
.object-cover {object-fit: cover !important;}
.object-fill {object-fit: fill !important;}
.object-none {object-fit: none !important;}
.object-scale-down {object-fit: scale-down !important;}

/* Bootstrap */
.text-start { text-align: left !important;}
.text-end { text-align: right !important;}
.text-center { text-align: center !important;}

.h-100 { height: 100% !important;}
.w-100 { width: 100% !important;}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

/* als er vraag naar is: media query classes toevoegen voor deze utilities */
.section-my { margin-block: var(--section-space-y)!important;}
.section-mbs { margin-block-start: var(--section-space-y)!important;}
.section-mbe { margin-block-end: var(--section-space-y)!important;}
.section-py { padding-block: var(--section-space-y)!important;}
.section-pbs { padding-block-start: var(--section-space-y)!important;}
.section-pbe { padding-block-end: var(--section-space-y)!important;}

@media (min-width: 576px) {
    .section-my-sm { margin-block:    var(--section-space-y)!important;}
    .section-mbs-sm { margin-top:      var(--section-space-y)!important;}
    .section-mbe-sm { margin-bottom:   var(--section-space-y)!important;}
    .section-py-sm { padding-block:   var(--section-space-y)!important;}
    .section-pbs-sm { padding-top:     var(--section-space-y)!important;}
    .section-pbe-sm { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 768px) {
    .section-my-md { margin-block:    var(--section-space-y)!important;}
    .section-mbs-md { margin-top:      var(--section-space-y)!important;}
    .section-mbe-md { margin-bottom:   var(--section-space-y)!important;}
    .section-py-md { padding-block:   var(--section-space-y)!important;}
    .section-pbs-md { padding-top:     var(--section-space-y)!important;}
    .section-pbe-md { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 992px) {
    .section-my-lg { margin-block:    var(--section-space-y)!important;}
    .section-mbs-lg { margin-top:      var(--section-space-y)!important;}
    .section-mbe-lg { margin-bottom:   var(--section-space-y)!important;}
    .section-py-lg { padding-block:   var(--section-space-y)!important;}
    .section-pbs-lg { padding-top:     var(--section-space-y)!important;}
    .section-pbe-lg { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 1200px) {
    .section-my-xl { margin-block:    var(--section-space-y)!important;}
    .section-mbs-xl { margin-top:      var(--section-space-y)!important;}
    .section-mbe-xl { margin-bottom:   var(--section-space-y)!important;}
    .section-py-xl { padding-block:   var(--section-space-y)!important;}
    .section-pbs-xl { padding-top:     var(--section-space-y)!important;}
    .section-pbe-xl { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 1400px) {
    .section-my-xxl { margin-block:    var(--section-space-y)!important;}
    .section-mbs-xxl { margin-top:      var(--section-space-y)!important;}
    .section-mbe-xxl { margin-bottom:   var(--section-space-y)!important;}
    .section-py-xxl { padding-block:   var(--section-space-y)!important;}
    .section-pbs-xxl { padding-top:     var(--section-space-y)!important;}
    .section-pbe-xxl { padding-bottom:  var(--section-space-y)!important;}
}


/* vertical spacings die net zo groot zijn als een gutter-x */
.my-gutter { margin-block: var(--st-gutter-x)!important;}
.mbs-gutter { margin-block-start: var(--st-gutter-x)!important;}
.mbe-gutter { margin-block-end: var(--st-gutter-x)!important;}
.py-gutter { padding-block: var(--st-gutter-x)!important;}
.pbs-gutter { padding-block-start: var(--st-gutter-x)!important;}
.pbe-gutter { padding-block-end: var(--st-gutter-x)!important;}

/* border utilities */
.border {
    border: var(--border);
}

.border-top {
    border-top: var(--border);
}

.border-bottom {
    border-bottom: var(--border);
}

.border-block {
    border-top: var(--border);
    border-bottom: var(--border);
}

.border-left {
    border-left: var(--border);
}

.border-right {
    border-right: var(--border);
}

.border-inline {
    border-left: var(--border);
    border-right: var(--border);
}

/******************** CARD-COLORS ********************/
.card.card-main-light {
    --bs-card-bg: var(--main-100);
    --bs-card-color: var(--main-900);
}

.card.card-main-dark {
    --bs-card-bg: var(--main-800);
    --bs-card-color: var(--main-50);
}

.card.card-supporting-light {
    --bs-card-bg: var(--supporting-100);
    --bs-card-color: var(--supporting-900);
}

.card.card-supporting-dark {
    --bs-card-bg: var(--supporting-800);
    --bs-card-color: var(--supporting-50);
}

.card.card-accent-light {
    --bs-card-bg: var(--accent-100);
    --bs-card-color: var(--accent-900);
}

.card.card-accent-dark {
    --bs-card-bg: var(--accent-800);
    --bs-card-color: var(--accent-50);
}

.card.card-info-light {
    --bs-card-bg: var(--info-100);
    --bs-card-color: var(--info-900);
}

.card.card-info-dark {
    --bs-card-bg: var(--info-800);
    --bs-card-color: var(--info-50);
}

.card.card-success-light {
    --bs-card-bg: var(--success-100);
    --bs-card-color: var(--success-900);
}

.card.card-success-dark {
    --bs-card-bg: var(--success-800);
    --bs-card-color: var(--success-50);
}

.card.card-light {
    --bs-card-bg: var(--grey-50);
    --bs-card-color: var(--grey-900);
}

.card.card-dark {
    --bs-card-bg: var(--grey-900);
    --bs-card-color: var(--grey-50);
}

.card.card-dark .form-control {
    background-color: var(--grey-900);
    border-color: var(--grey-700);
    color: var(--grey-50);
}

/******************** DISPLAY ********************/
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

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

/* DEPRECATED - Hieronder is oud. Niet meer gebruiken. Waar het nog gebruikt wordt vervangen indien mogelijk */

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

/* todo: kijken of deze nog moeten blijven of niet EDIT: Weg er mee! Wegsmijten bij nieuwe .tpl's!*/
.no-border-top {
    border-top: 0;
}

.box-shadow, .hover-box-shadow:hover {
    box-shadow: 0 1px 6px 0 #CCC;
}

.box-corner-radius-5x {
    border-radius: .25rem;
}

.box-corner-radius-10x {
    border-radius: .5rem;
}

.box-corner-radius-15x {
    border-radius: 1.25rem;
}

.box-corner-radius-5x-top {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.box-corner-radius-10x-top {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.box-corner-radius-15x-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.box-corner-radius-20x-top {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.box-positioning-absolute {
    position: absolute;
}

.box-textalign-right {
    text-align: right;
}

.box-textalign-left {
    text-align: left;
}

.box-textalign-center {
    text-align: center;
}

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

.display-flex {
    display: flex;
}

span.required {
    margin: 0 .25rem;
    color: var(--error-700);
}

div.no-padding {
    padding: 0;
}

div.no-border {
    border: 0;
}

div.corner {
    border-radius: .25rem;
}

div.halfwidth {
    position: relative;
    width: 49%;
}

div.left {
    float: left;
}

div.right {
    float: right;
}

div.top {
    margin-top: .5rem;
}

div.last {
/*    float: right;*/
    margin-right: 0;
}

.break_rule {
    width: 100%;
}

/* Bij oude spaarpunten popup als ingelogd */
.box-padding-10x {
    padding: .5rem;
}

:root {
    --fx-duration: .2s;
    --fx-timing-function: ease-in-out;

    --fx-scale: 1;
    --fx-scale-hover: 1.0375;

    --fx-darken: brightness(1);
    --fx-darken-hover: brightness(0.85);

    --fx-brighten: brightness(1);
    --fx-brighten-hover: brightness(1.1);

    --fx-opacity: opacity(1);
    --fx-opacity-hover: opacity(0.75);

    /*
    --fx-vivid: saturate(1) brightness(1);
    --fx-vivid-hover: saturate(1.1) brightness(1.05);
     */

    --fx-greyscale: grayscale(0);
    --fx-greyscale-hover: grayscale(100%);

    --fx-colorize: grayscale(100%);
    --fx-colorize-hover: grayscale(0);
}

.img-fx {
    height: auto;
    overflow: hidden!important;
}

.img-fx img {
    transition-property: transform, filter;
    transition-duration: var(--fx-duration), var(--fx-duration);
    transition-timing-function: var(--fx-timing-function), var(--fx-timing-function);
    transform-origin: center center;
}

/* De hover media query zorgt er voor dat hover niet triggert als je op mobiel eroverheen swipet, maar alleen bij een tap. En natuurlijk muis-cursor-hover. */
@media (hover: hover) {
    /* ZOOM */
    .img-fx-scale img {transform: scale(var(--fx-scale));}
    .img-fx-scale:hover img {transform: scale(var(--fx-scale-hover));}

    /* DARKEN */
    .img-fx-darken img {filter: var(--fx-darken);}
    .img-fx-darken:hover img {filter: var(--fx-darken-hover);}

    /* BRIGHTEN */
    .img-fx-brighten img {filter: var(--fx-brighten);}
    .img-fx-brighten:hover img {filter: var(--fx-brighten-hover);}

    /* Greyscale */
    .img-fx-greyscale img {filter: var(--fx-greyscale);}
    .img-fx-greyscale:hover img {filter: var(--fx-greyscale-hover);}

    /* COLORIZE */
    .img-fx-colorize img {filter: var(--fx-colorize);}
    .img-fx-colorize:hover img {filter: var(--fx-colorize-hover);}

    /* Opacity */
    .img-fx-opacity img {filter: var(--fx-opacity);}
    .img-fx-opacity:hover img {filter: var(--fx-opacity-hover);}

    /* VIVIDNESS */
    /*
    .img-fx-vivid img {filter: var(--fx-vivid);}
    .img-fx-vivid:hover img {filter: var(--fx-vivid-hover);}
    */
}

/* Geen effect als gebruiker heeft ingesteld dat hij verminderde beweging wilt. */
@media (prefers-reduced-motion) {
    .img-fx img {
        transition: none;
        filter: none;
        transform: none;
    }

    .img-fx:hover img {
        filter: none !important;
        transform: none;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

:root {
    --selection-bg-color: var(--main-500);
    --selection-text-color: var(--main-50);

    --scroll-margin-top-min: 1rem;
    --scroll-margin-top-preferred: 3vw;
    --scroll-margin-top-max: 2rem;
    --scroll-margin-top-fluid: clamp(var(--scroll-margin-top-min), var(--scroll-margin-top-preferred), var(--scroll-margin-top-max));
    --scroll-margin-top: calc(var(--all-sticky-headers-height, 0px) + var(--scroll-margin-top-fluid)); /* de fallback moet met px unit */
}


/* In dynamic4000.css.tpl staat een toevoeging met scroll-margin-top als mobile header sticky is */
[id] {
    scroll-margin-top: var(--scroll-margin-top, 1rem);
}

/* Dit moet in aparte selectors, anders werkt het niet. */
::-moz-selection { /* Code for Firefox */
    color: var(--selection-text-color);
    background: var(--selection-bg-color);
}
::selection {
    color: var(--selection-text-color);
    background: var(--selection-bg-color);
}


@media screen and (min-width: 767px) and (max-width: 991px) {
    iframe {
        max-width: 962px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    iframe {
        max-width: 1200px;
    }
}


/*LET OP: position:sticky; (wordt gebruikt voor de sticky headers)  werkt alleen als een parent div GEEN overflow-x: HIDDEN; heeft.*/
/* Daarom is body ingesteld op overflow-x: CLIP;*/
html,
body {
    overflow-x: clip;
}


@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

.page_placeholder_layover,
#wishlist_popup,
#mobile_menu_container,
#quickview_overlay,
#quickview_holder,
.floating_basket_wrapper
/*,*/
/*.mobile_menu_search_bar */
{
    display: none;
}

.clear {
    clear: both;
}

body {
    background-color: var(--webshop-background-color);
    color: var(--body-text-color);
}

.st-usp-bar a,
.st-usp-list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--link-color-hover);
}

.wrapper.header_bottom .bottom-menu-usps,
.st-usp-bar {
    display: flex;
}

.st-usp-bar * {
    font-size: var(--text-size-sm);
}

.wrapper.header_bottom .bottom-menu-usps ul,
.st-usp-bar ul,
.st-usp-bar,
.st-usp-list,
.st-custom-list {
    display: flex;
    width: 100%;
    list-style: none !important;
    margin-inline-start: 0 !important;
}

.st-usp-list,
.st-custom-list {
    flex-direction: column;
}

.wrapper.header_bottom .bottom-menu-usps ul > li,
.st-usp-bar ul > li,
.st-usp-list > li,
.st-custom-list > li {
    position: relative;
}

.wrapper.header_bottom .bottom-menu-usps ul > li,
.st-usp-bar ul > li,
.st-usp-bar > li {
    margin-block: .75rem;
    margin-inline: .5rem 1rem;
}

.st-usp-list > li,
.st-custom-list > li {
    display: flex;
}

.st-usp-list > li {
    margin-block: .5rem;
}

ol {
    margin-inline-start: 1rem;
}

:root {
    --usp-icon-color: var(--success-500)
}

.wrapper.header_bottom .bottom-menu-usps ul > li:before,
.st-usp-bar ul > li:before,
.st-usp-bar > li:before,
.st-usp-list > li:before {
    --st-icon-size: var(--text-size-xl);
    content: '';
    margin-inline-end: var(--st-spacing-xs);
    -webkit-mask-image: var(--usp-check-icon);
    mask-image: var(--usp-check-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--usp-icon-color);
    min-width: 1em;
    min-height: 1em;
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: text-bottom;
}

a {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-color-hover);
}

blockquote {
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-size-lg);
    --text-line-height: 2;
    border-left: .25rem solid var(--grey-300);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em
}

blockquote p:first-of-type:before {
    content: open-quote;
}

blockquote p:last-of-type:after {
    content: close-quote;
}

hr {
    border: var(--border-width) solid var(--border-color);
    margin-top: 3em;
    margin-bottom: 3em
}

code,
pre {
    white-space: pre;
    background-color: #ededed;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    width: 100%;
    margin: .25rem 0;
    padding: .25rem;
    line-height: 125%;
    overflow: hidden;
}

#pages ol li,
#pages ul:not(.dropdown-menu) li {
    margin-left: 1rem;
}

span.content-header {
    display: block;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

#content ul {
    margin-left: 1rem;
}

.changetable img {
    max-width: 100%;
    vertical-align: top;
}

.contentBlockContainer {
    position: relative;
}

.contentBlock {
    position: relative;
}

.contentBlock img {
    vertical-align: top;
}

.contentBlock.topBlock {
    margin-bottom: var(--gutter);
}

.contentBlock_left {
    position: relative;
    float: left;
    width: calc(50% - .25rem);
}

.contentBlock_right {
    position: relative;
    float: right;
    width: calc(50% - .25rem);
}

.contentBlock.double_height, .contentBlock.half_height {
    width: 100%;
}

/* kaders kopje */
table thead,.opc_melding,
a.ui-spinner-button .ui-button-text {
    background-color: var(--webshop-background-color);
}

/*kaders*/
hr.grafeer_spacer{
    background-color: var(--border-color);
}

.form_section, table.checkout_shipping, table.checkout_payment, .box-border, .cart-notification{
    border-color: var(--border-color);
}

.form_section a:not(.configuration_button_general){
    color: var(--body-text-color);
}

.clearfix:after,
.menu_top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*todo: uitzoeken waar de styles die hieronder staan moeten komen*/
.minimalistBlack {
    border: 0 solid #ddd;
    border-collapse: collapse;
    margin-top: .25rem;
    text-align: left;
    width: 78%;
}

.ac_results {
    width: 155px !important;
    background: #fff;
    box-shadow: 0 2px 4px 1px #CCC;
    z-index: 100;
    color: #000;
}

.ac_results li {
    display: block;
    list-style: none;
    padding: 3px 0 3px 10px;
    margin: 0;
}

.ac_results li:hover {
    background-color: #f0f0f0;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw div, .gm-style .gm-style-iw label, .gm-style .gm-style-iw span {
    color: #000;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

@media only screen and (max-width: 768px) {
    :root {
        --h1-font-size: var(--h1-font-size-mobile) !important;
        --h2-font-size: var(--h2-font-size-mobile) !important;
        --h3-font-size: var(--h3-font-size-mobile) !important;
        --h4-font-size: var(--h4-font-size-mobile) !important;
        --h5-font-size: var(--h5-font-size-mobile) !important;
        --h6-font-size: var(--h6-font-size-mobile) !important;

        --display-1-font-size: var(--display-1-font-size-mobile) !important;
        --display-2-font-size: var(--display-2-font-size-mobile) !important;
        --display-3-font-size: var(--display-3-font-size-mobile) !important;
        --display-4-font-size: var(--display-4-font-size-mobile) !important;
        --display-5-font-size: var(--display-5-font-size-mobile) !important;
        --display-6-font-size: var(--display-6-font-size-mobile) !important;
    }
}

:root {
    --text-color-muted: var(--grey-600);
    --body-text-size: var(--text-size-md);
    --text-line-height: 1.5;

    --heading-font-weight: var(--font-weight-bold);
    --heading-line-height: 1.2;
    --heading-letter-spacing: 0;

    --display-heading-font-weight: var(--font-weight-bold);
    --display-heading-line-height: 1.2;
    --display-heading-letter-spacing: 0;

    --max-width-text: 40em;
}
.max-width-text {max-width: var(--max-width-text);}
.text-muted { color: var(--text-color-muted);}

.lead {
    font-size: var(--text-size-lg);
}

.body-font-family {
    font-family: var(--body-font-stack) !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    color: var(--display-color) !important;
    font-family: var(--display-font-stack) !important;
    font-weight: var(--display-heading-font-weight) !important;
    line-height: var(--display-heading-line-height) !important;
    letter-spacing: var(--display-heading-letter-spacing) !important;
}

.display-1 {font-size: var(--display-1-font-size) !important;}
.display-2 {font-size: var(--display-2-font-size) !important;}
.display-3 {font-size: var(--display-3-font-size) !important;}
.display-4 {font-size: var(--display-4-font-size) !important;}
.display-5 {font-size: var(--display-5-font-size) !important;}
.display-6 {font-size: var(--display-6-font-size) !important;}

/* BODY TEXT */
body, p, a, span.text {
    font-family: var(--body-font-stack);
    font-size: var(--body-text-size);
    line-height: var(--text-line-height);
}

/* HEADINGS */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.content-header {
    color: var(--heading-color);
    font-family: var(--heading-font-stack);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

.h1,h1 {
    font-size: var(--h1-font-size);
}

.h2, h2,
.content-header,
.aanbevolen_artikelen_title.content-header,
.alternatieve_artikelen_title.content-header {
    font-size: var(--h2-font-size);
}

.h3,h3 {
    font-size: var(--h3-font-size);
}

.h4,h4 {
    font-size: var(--h4-font-size);
}

.h5,h5 {
    font-size: var(--h5-font-size);
}

.h6,h6 {
    font-size: var(--h6-font-size);
}

h1 {
    margin-bottom: var(--st-spacing-xs);
}

.content-header,
#leeftijdcontrole h2,
h2,
.box_product_name h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    margin-bottom: var(--st-spacing-sm);
}

/* Sidebar en Footer headings */
#filterContainer div.filter-header,
.box_top p {
    font-size: var(--box-heading-font-size);
}

.box ul li a.active_cat_bold,
span.required {
    font-weight: var(--font-weight-bold);
}

.productinfo_attribute .optie_select_strong,
.box .box_content p,
.user_input p,
.productinfo_description p,
.productinfo_short_description p,
#content .bottom_mainpage p,
#content .top_mainpage p {
    margin-bottom: var(--st-spacing-xs);
}

.box .box_content p:last-child,
.user_input p:last-child,
.productinfo_description p:last-child,
.productinfo_short_description p:last-child,
#content .bottom_mainpage p:last-child,
#content .top_mainpage p:last-child {
    margin-bottom: 0;
}
/*------ CKEditor ------*/
/*------ Image Alignment ------*/
/* block */
.content_section figure.image,
.changetable figure.image,
.widget-texteditor__content figure.image,
.box_content figure.image,
.tep-section-content figure.image {
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
}

/* inline left */
.content_section .image-style-align-left,
.changetable .image-style-align-left,
.widget-texteditor__content .image-style-align-left,
.box_content .image-style-align-left,
.tep-section-content .image-style-align-left {
    float: left;
    margin-inline-end: 1.5em !important;
}

/* inline right */
.content_section .image-style-align-right,
.changetable .image-style-align-right,
.widget-texteditor__content .image-style-align-right,
.tep-section-content .image-style-align-right,
.box_content .image-style-align-right {
    float: right;
    margin-inline-start: 1.5em !important;
}

/* block left */
.content_section .image-style-block-align-left,
.changetable .image-style-block-align-left,
.widget-texteditor__content .image-style-block-align-left,
.box_content .image-style-block-align-left,
.tep-section-content .image-style-block-align-left {
    display: block;
    margin-inline-start: 0 !important;
}

/* block right */
.content_section .image-style-block-align-right,
.changetable .image-style-block-align-right,
.widget-texteditor__content .image-style-block-align-right,
.box_content .image-style-block-align-right,
.tep-section-content .image-style-block-align-right {
    display: block;
    margin-inline-end: 0 !important;
}
/*
Met de .prose class kan je eenvoudig vanilla HTML stylen zonder op elk HTML element een class te plaatsen.
Plaats de .prose class in een parent element.


Als je ergens een stukje content wilt tonen zonder de prose styling, gebruik dan .not-prose.
VOORBEELD:
<div class="prose">
    [content gestyled met prose]
    <div class="not-prose">
        [geen prose]
    </div>
</div>


UITLEG van de selectors
elk strong element die binnen een .prose zit, behalve als er een .not-prose omheen zit.
.prose :where(strong):not(:where([class~=not-prose] *)) {...}
*/


/* settings */
/* hr & blockquote styling zijn als standaard toegevoegd in _global.css */
.prose {
    --st-prose-link-text-decoration: underline;
    --st-prose-marker-color: var(--grey-400);
    /*--st-prose-hr-color: var(--border-color);*/
    --st-prose-figcaption-color: var(--text-color-muted);
    --st-prose-figcaption-font-size: var(--text-size-sm);
    /*--st-prose-blockquote-font-size: var(--text-size-lg);*/
    /*--st-prose-blockquote-border-color: var(--grey-300);*/
}

.prose {
    --text-line-height: 1.75;
}

.prose :where(strong):not(:where([class~=not-prose] *)) {
    font-weight: 700
}

.prose :where(ol):not(:where([class~=not-prose] *)) {
    list-style-type: decimal;
    padding-left: 1.625em
}


/*
Deze styling is om lijstjes met bijvoorbeeld Romeinse tekens aan te geven.
Niet nodig voor nu dus niet loze code inladen.
Ondertussen staat het hier niet in de weg. */

/*
.prose :where(ol[type=A]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-alpha
}

.prose :where(ol[type=a]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-alpha
}

.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-alpha
}

.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-alpha
}

.prose :where(ol[type=I]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-roman
}

.prose :where(ol[type=i]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-roman
}

.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-roman
}

.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-roman
}

.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)) {
    list-style-type: decimal
} */

.prose :where(ul):not(:where([class~=not-prose] *)) {
    list-style-type: disc;
    padding-left: 0
}

/* het getalletje */
.prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
    font-weight: var(--font-weight-normal);
}

/* de kleur van de bullet */
.prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
    color: var(--st-prose-marker-color);
}


/* hr styling is als standaard toegevoegd in _global.css */
/*.prose :where(hr):not(:where([class~=not-prose] *)) {*/
/*    border: 1px solid var(--st-prose-hr-color);*/
/*    margin-top: 3em;*/
/*    margin-bottom: 3em*/
/*}*/


/* Blockquote styling is als standaard toegevoegd in _global.css */
/*.prose :where(blockquote):not(:where([class~=not-prose] *)) {*/
/*    font-weight: 500;*/
/*    font-style: italic;*/
/*    font-size: var(--st-prose-blockquote-font-size);*/
/*    --text-line-height: 2;*/
/*    border-left: .25rem solid var(--st-prose-blockquote-border-color);*/
/*    quotes: "\201C""\201D""\2018""\2019";*/
/*    margin-top: 1.6em;*/
/*    margin-bottom: 1.6em;*/
/*    padding-left: 1em*/
/*}*/

/*.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before {*/
/*    content: open-quote*/
/*}*/

/*.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after {*/
/*    content: close-quote*/
/*}*/

.prose :where(h1):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: min(.9em,1.8rem);
    line-height: 1.1
}

.prose :where(h2):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em, 3rem);
    margin-bottom: min(.65em, 1.3rem);
    line-height: 1.3
}

.prose :where(h3):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em,3rem);
    margin-bottom: min(.6em,1.2rem);
    line-height: 1.4
}

.prose :where(h4):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em,1rem);
    margin-bottom: min(.5em,1rem);
    line-height: 1.5;
}

.prose :where(h5):not(:where([class~=not-prose] *)) {
    margin-top: min(1.25em,2.5rem);
    margin-bottom: min(1.25em,2.5rem);
}

.prose :where(h6):not(:where([class~=not-prose] *)) {
    margin-top: min(1.25em,2.5rem);
    margin-bottom: min(1.25em,2.5rem);
}



.prose :where(p):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where(img):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(video):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(figure):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(figure>*):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0
}

.prose :where(figcaption):not(:where([class~=not-prose] *)) {
    color: var(--st-prose-figcaption-color);
    font-size: var(--st-prose-figcaption-font-size);
    line-height: 1.4;
    margin-top: .85em
}

.prose :where(li):not(:where([class~=not-prose] *)) {
    margin-top: .5em;
    margin-bottom: .5em
}

.prose :where(ol>li):not(:where([class~=not-prose] *)) {
    padding-left: .375em
}

.prose :where(ul>li):not(:where([class~=not-prose] *)) {
    padding-left: .5em;
    position: relative
}

.prose>:where(ul>li p):not(:where([class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em
}

.prose>:where(ul>li>:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em
}

.prose>:where(ul>li>:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 1.25em
}

.prose>:where(ol>li>:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em
}

.prose>:where(ol>li>:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 1.25em
}

.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em
}

.prose :where(hr+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h2+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h3+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h4+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose>:where(:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 0
}
/* als <header> first-child is, en de first-child daar weer van, die mot geen margin-top :)  */
.prose header:first-child > :where(:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 0;
}

.prose>:where(:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 0
}

/*.prose :where(h1,h2,h3):not(:where([class~=not-prose] *)) {*/
/*    letter-spacing: -.025em*/
/*}*/

.prose :where(a):not(:where([class~=not-prose] *)):not(.btn) {
    text-decoration: var(--st-prose-link-text-decoration);
}

.prose :where(a strong):not(:where([class~=not-prose] *)) {
    color: inherit;
    font-weight: inherit
}

.prose :where(figure>figcaption):not(:where([class~=not-prose] *)) {
    margin-top: .85em
}
/*icon styles*/
.has_icon_left i[class*="fa-"] {
    margin-inline-end: .5rem;
}

.has_icon_right i[class*="fa-"] {
    margin-inline-start: .5rem;
}

i.fa-star {
    color: var(--stars-color);
}

i.fa-check {
    color: var(-usp-icon-color);;
}
/* Tipso Bubble Styles */
.tipso_bubble,.tipso_bubble > .tipso_arrow{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tipso_bubble{position:absolute;text-align:center;border-radius:6px;z-index:9999}.tipso_style{cursor:help;border-bottom:1px dotted}.tipso_title{border-radius:6px 6px 0 0}.tipso_content{word-wrap:break-word;padding:0.5em;background-color:#fff;color:#333;border:1px solid#ccc;border-radius:4px;font-size:14px}.tipso_bubble.tiny{font-size:0.6rem}.tipso_bubble.small{font-size:0.8rem}.tipso_bubble.default{font-size:1rem}.tipso_bubble.large{font-size:1.2rem;width:100%}.tipso_bubble > .tipso_arrow{position:absolute;width:0;height:0;border:8px solid;pointer-events:none}.tipso_bubble.top > .tipso_arrow{border-top-color:#000;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;top:100%;left:50%;margin-left:-8px}.tipso_bubble.bottom > .tipso_arrow{border-bottom-color:#000;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent;bottom:100%;left:50%;margin-left:-8px}.tipso_bubble.left > .tipso_arrow{border-left-color:#000;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;top:50%;left:100%;margin-top:-8px}.tipso_bubble.right > .tipso_arrow{border-right-color:#000;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;top:50%;right:100%;margin-top:-8px}.tipso_bubble .top_right_corner,.tipso_bubble.top_right_corner{border-bottom-left-radius:0}.tipso_bubble .bottom_right_corner,.tipso_bubble.bottom_right_corner{border-top-left-radius:0}.tipso_bubble .top_left_corner,.tipso_bubble.top_left_corner{border-bottom-right-radius:0}.tipso_bubble .bottom_left_corner,.tipso_bubble.bottom_left_corner{border-top-right-radius:0}
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 50ms ease-in-out;-moz-transition:height 50ms ease-in-out;-ms-transition:height 50ms ease-in-out;-o-transition:height 50ms ease-in-out;transition:height 50ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0,0)}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{display:none}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:transparent}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:45%;top:45%;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.play-btn__svg{fill: #d6d6d6;}
.owl-theme .owl-nav{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1;*display:inline}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;-ms-transition:opacity 200ms ease;-o-transition:opacity 200ms ease;transition:opacity 200ms ease;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
/**
 * Swiper 8.4.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 17, 2023
 */

/* TODO: effecten die we niet gebruiken commenten */

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: calc((var(--text-size-md) * 1.5) + (var(--btn-padding-block) * 2) + (var(--btn-border-width) * 2));
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    /*top: calc(50% + var(--st-icon-size));*/
    top: 50%;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next + .swiper-slide,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
/*
CSS onderverdeling
Welke pagina's / globaal: PDP. Is deze file alleen voor PDP swiper of voor alle swipers?
Is het cruciaal boven de vouw?: Ja op PDP wel

dus ---> Intern inladen op PDP sowieso
*/

.productinfo-image-item {
    display: flex;
    place-content: center;
}

.productinfo-image-popup-link {
    display: inline-flex;
    width: 100%;
}


.swiper-slide * {
    user-select: none;
    -webkit-user-select: none;
}

/* images in main slider en thumb slider */
.swiper-slide img {
    display: inline-block;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}

.productinfo-layover-image {
    width: 100%;
}


/* THUMBNAILS */
.productinfo-thumbs {
    --number-of-productinfo-thumbs-desktop: 5;
    --number-of-productinfo-thumbs-mobile: 3;
}

.productinfo-thumbs .swiper-slide {
    --gutter: 4rem;
    --thumb-space-between: 10px;
    /*--container-width: calc(50% - calc(var(--gutter) / 2));*/
    --max-space-between: calc(var(--thumb-space-between) * (var(--number-of-productinfo-thumbs-desktop) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((100% - var(--max-spacing)) / var(--number-of-thumbs));
    width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-desktop));
    margin-right: var(--thumb-space-between);
}

@media screen and (max-width: 767px) {
    .productinfo-thumbs .swiper-slide {
        --max-space-between: calc(var(--thumb-space-between) * (var(--number-of-productinfo-thumbs-mobile) - 1));
        width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-mobile));
    }
}

.productinfo-thumbs {
    margin-top: 10px;
}

.hide-from-swiper {
    display: none !important;
}

/* Todo: dit nog beter testen */
/*.swiper-slide {*/
/*    cursor: grab;*/
/*}*/

.productinfo-thumbs .swiper-slide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    cursor: pointer;
}

.productinfo-thumbs .swiper-slide-thumb-active {
    --pdp-swiper-thumb-active-outline-color: var(--grey-300);
    z-index: 1;
    outline: 2px solid var(--pdp-swiper-thumb-active-outline-color);
    outline-offset: -2px;
}

.swiper-thumbs-center {
    justify-content: center;
}

/* merken en product card sliders */
.swiper-navigation {
    display: inline-flex;
    gap: .5rem;
}

.swiper-header {
    --swiper-header-margin-block-end: var(--gutter);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block-end: var(--swiper-header-margin-block-end);
}

.swiper-header h2,
.swiper-header .h2 {
    margin-bottom: 0;
}

.merken-swiper .swiper-wrapper,
.meebestellen-swiper .swiper-wrapper,
.product-history-swiper .swiper-wrapper {
    display: flex;
}

/* product card sliders */
.meebestellen-swiper,
.product-history-swiper {
    position: relative;
}

.product-card-slide,
.homepage-categories-slide {
    margin-bottom: 8px; /* ruimte ivm shadow op hover - TODO: EDIT-Andert: shadow issue opgelossen met zelf-compenserende margin of iets anders */
}

.swiper:has(.product-card-slide) .swiper-button-next,
.swiper:has(.product-card-slide) .swiper-button-prev,
.swiper:has(.homepage-categories-slide) .swiper-button-next,
.swiper:has(.homepage-categories-slide) .swiper-button-prev {
    top: calc(50% - 8px);
}

/* PRODUCT CARD SLIDE */
.product-card-slide,
.card-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    outline: var(--card-border);
    outline-offset: -1px;
    background-color: var(--card-background-color);
    border-radius: var(--card-border-radius);

    transition-property: box-shadow, outline;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.swiper-slide.product-card-slide,
.swiper-slide.product-card-slides,
.swiper-slide.card-slide {
    height: auto;
}

.product-card-slide:hover,
.product-card-slide:focus,
.card-slide:hover,
.card-slide:focus {
    box-shadow: var(--card-shadow-hover);
    outline: var(--card-border-hover);
}

.product-card-slide .products_gallery_row {
    height: 100%;
}

/* PRODUCT CARD SLIDE - IMAGE */
.product-card-slide-image {
    position: relative;
    margin-inline: auto;
    margin-block: var(--gutter-half);
}

.product-card-slide-image img {
    border-radius: var(--card-border-radius) var(--card-border-radius) var(--border-radius-small) var(--border-radius-small);
}

.product-card-slide-image img.subimage_normal {
    z-index: 3;
}

/* PRODUCT CARD SLIDE - ARTICLE LAYOVER*/
.product-card-slide #artikellayover {
    height: auto !important;
}

/* PRODUCT CARD SLIDE - NAME */
.product-card-slide-name {
    flex: 1 1 auto;
    line-height: 1.2;
    margin-inline: var(--gutter-half);
}

.product-card-slide-name a {
    font-size: var(--text-size-md);
    color: var(--body-text-color);
    font-family: var(--body-font-stack);
    font-weight: var(--font-weight-bold);
}

.product-card-slide:hover .product-card-name a {
    color: var(--body-text-color);
}

/* PRODUCT CARD SLIDE - PRICE */
.product-card-slide-price {
    margin: var(--gutter-half);
}

.product-card-slide-price .oldPrice {
    font-size: var(--text-size-md);
}


.product-card-slide-price .normalPrice,
.product-card-slide-price .specialPrice {
    font-size: var(--text-size-xl);
}

/* PRODUCT CARD SLIDE - BUTTONS */
.product-card-slide-buttons {
    margin-inline: .5rem;
    margin-block-end: .5rem;
}

.product-card-slide-buttons a.btn {
    width: -webkit-fill-available;
    width: -moz-available;
}

.swiper-product-card .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols));
    margin-right: var(--slider-space-between);
}

.product-history-swiper.swiper-product-card .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols));
    margin-right: var(--slider-space-between);
}

.merken-swiper .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--merken-slider-space-between) * (var(--merken-slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols));
    margin-right: var(--merken-slider-space-between);
}

.testimonials-swiper .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(16px * (3 - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / 3);
    margin-right: 16px;
}

@media screen and (max-width: 991px) {
    .swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols-tablet));
    }

    .product-history-swiper.swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols-tablet));
    }

    .merken-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--merken-slider-space-between-tablet) * (var(--merken-slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols-tablet));
        margin-right: var(--merken-slider-space-between-tablet);
    }
}

@media screen and (max-width: 767px) {
    .swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols-mobile));
    }

    .product-history-swiper.swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols-mobile));
    }

    .merken-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--merken-slider-space-between-mobile) * (var(--merken-slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols-mobile));
        margin-right: var(--merken-slider-space-between-mobile);
    }

    .testimonials-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(16px * (1 - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / 1);
        margin-right: 16px;
    }
}

/* Video */
.swiper-video {
    width: inherit;
}

.swiper-video iframe {
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
}

/* Inline Swiper navigation buttons*/
.swiper-col {
    position: relative;
}

.swiper-button-inline-next:after,
.swiper-button-inline-prev:after,
.swiper-button-next:after,
.swiper-button-prev:after {
    content: '';
}

/* navigation buttons */
@media screen and (min-width: 992px) {
    .swiper-button-inline-next,
    .swiper-button-inline-prev,
    .swiper-button-next,
    .swiper-button-prev {
        --st-icon-size: var(--text-size-md);
        --swiper-nav-inline-icon-color: var(--body-text-color);
    }

    .swiper-button-inline-next:hover,
    .swiper-button-inline-next:focus,
    .swiper-button-inline-prev:hover,
    .swiper-button-inline-prev:focus,
    .swiper-button-next:hover,
    .swiper-button-next:focus,
    .swiper-button-prev:hover,
    .swiper-button-prev:focus {
        --swiper-nav-inline-icon-color: var(--main-500);
    }

    .swiper-button-inline-next:after,
    .swiper-button-inline-prev:after,
    .swiper-button-next:after,
    .swiper-button-prev:after {
        -webkit-mask-image: var(--swiper-nav-inline-icon);
        mask-image: var(--swiper-nav-inline-icon);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: var(--swiper-nav-inline-icon-color);
        cursor: pointer;
        min-width: var(--st-icon-size);
        min-height: var(--st-icon-size);
        height: var(--st-icon-size);
        display: inline-block;
        vertical-align: text-bottom;
    }

    .swiper-button-inline-next:after,
    .swiper-button-next:after {
        --swiper-nav-inline-icon: var(--chevron-right-icon);
    }
    .swiper-button-inline-prev:after,
    .swiper-button-prev:after {
        --swiper-nav-inline-icon: var(--chevron-left-icon);
    }
}

/* pagination */
.st-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--text-size-md) * var(--text-line-height));
    margin-block-start: .5rem;
}

.swiper-pagination-bullet {
    background-color: var(--btn-disabled-bg-color);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--main-500);
}

/* gallery slider */
.gallery-slide {
    display: flex;
    justify-content: center;
}
:root {
    /* self-alias variabelen met fallback om ellende te voorkomen als thema niet goed inlaad ofzo */
    --st-container-space-x: var(--custom-st-container-space-x, 10px);
    --sidebar-width: var(--custom-sidebar-width, 20%);
    --actual-container-width: calc(var(--max-container-width) - (var(--st-container-space-x, 10px) * 2));
}

.content:not(.col_left) #column_left,
.content:not(.col_right) #column_right {
    --sidebar-width: 0;
}

.wrapper {
    position: relative;
}

.container {
    padding-block: .5rem;
    margin: 0 auto;
    position: relative;
}

.st_homepage .container {
    padding-top: 0;
}

#column_left, #column_right {
    box-sizing: border-box;
    position: relative;
    float: left;
}

/* these are supposed to be different values */
#column_left { --padding-column-left: 1rem; padding-right: var(--padding-column-left); }
#column_right { --padding-column-right: 2rem; padding-left: var(--padding-column-right); }

/* wordt gebruikt bij checkout page */
.col-50 {
    flex: 50%;
}

@media screen and (max-width: 767px) {
    div.halfwidth {
        position: relative;
        float: left;
    }

    div.changetable td {
        border: none;
    }

    div.changetable.user_input td {
        border: none;
        width: 100%;
    }

    div.changetable .form_section table tr td, div.changetable .form_section table tr th {
        padding-bottom: 0;
        padding-top: 0;
    }

    div.changetable .table-section table tr td:first-child, div.changetable .table-section table tr th:first-child {
        padding-left: 0;
    }

    div.changetable .table-section table tr td:last-child, div.changetable .table-section table tr th:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    div.changetable textarea {
        min-width: 95%;
        max-width: 95%;
        width: 95%;
    }

    div.changetable select.big {
        width: 90%;
    }
}

@media screen and (max-width: 991px) {
    .wrapper {
        position: relative;
        width: 100%;
        float: none;
    }

    .lastViewedProduct_box_container .lastViewedProduct_box { margin-inline: calc(var(--st-container-space-x) * -1); }
    .lastViewedProduct_box_container .lastViewedProduct_box .lastViewedProduct:first-of-type { margin-inline-start: var(--st-container-space-x); }
    .lastViewedProduct_box_container .lastViewedProduct_box .lastViewedProduct:last-of-type { margin-inline-end: var(--st-container-space-x); }


    #column_left, #column_right {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    #column_left, #column_right {
        width: var(--sidebar-width);
    }

    /********* NO SIDEBARS *********/
    .wrapper.content.no_col #content {
        position: relative;
        width: 100%;
    }

    .wrapper.content.no_col #content:empty {
        display: none;
    }

    /********* LEFT OR RIGHT SIDEBAR *********/
    .wrapper.content #content.col_left,
    .wrapper.content #content.col_right {
        position: relative;
        float: left;
        width: calc(100% - var(--sidebar-width));
    }
}


/* Dit werkt niet lekker, want door die compensating margin is het element wel groter, en overlapt het buttons enzo die er na komen.
Daarom zijn die niet meer klikbaar die buttons dan, dus andere oplossing zoeken voor shadow-afkap */
/* Dit is bedoeld zodat de schaduwen niet afgekapt worden */
/*
:root {
    --compensating-offset: 50px;
}
.swiper:has(.product-card-slide) {
    margin-bottom: calc(-1 * var(--compensating-offset)) !important;
}
.swiper-wrapper:has(.product-card-slide) {
    margin-bottom: var(--compensating-offset) !important;
}
*/


/* TEST NIEUW */

/* container max width */
.wrapper:not(.full),
#slider-homepage.standaard,
.bs-container {
    max-width: var(--max-container-width) !important;
}

@media screen and (min-width: 992px) {
    .wrapper:not(.full),
    #slider-homepage.standaard,
    .bs-container{
        width: 98% !important;
        /* TODO bij deze media query geen padding-inline, zodat de container bijv. 1200px ipv 1180px breed wordt. Nu komt de waarde overeen met BOWU 'maximale containerbreedte'. Dit is handiger voor klanten met het maken van afbeeldingen. */
        /*padding-inline: 0;*/
    }
}

@media screen and (max-width: 991px) {
    :root {
        --gutter: var(--st-container-space-x);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

section.tep-section div ul {
    margin-left: 20px;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Listing pagina's (Home, PLP, PDP)
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

.listing,
.home_page_listing.categoriesclass,
.home_page_listing.productsclass {
    display: grid;
    grid-column-gap: var(--gutter);
    grid-row-gap: var(--gutter);
}

.home_page_listing.productsclass.clear {
    display: none;
}

/* categorie listing */
.home_page_listing.categoriesclass {
    grid-template-columns: repeat(var(--categorie-listing-number-of-cols), 1fr);
    margin-block: var(--gutter);
}

.home_page_listing.categoriesclass:not(:has(.categories_row)) {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .home_page_listing.categoriesclass {
        --categorie-listing-number-of-cols-tablet: 3;
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-tablet), 1fr) !important;
    }
}

@media screen and (max-width: 767px) {
    .home_page_listing.categoriesclass {
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-mobile), 1fr) !important;
    }
}

/* product listing */
.home_page_listing.productsclass {
    grid-template-columns: repeat(var(--listing-number-of-cols), 1fr);
    margin-block: var(--gutter);
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .home_page_listing.productsclass {
        grid-template-columns: repeat(var(--listing-number-of-cols-tablet), 1fr);
    }
}

@media screen and (max-width: 767px){
    .home_page_listing.productsclass {
        grid-template-columns: repeat(var(--listing-number-of-cols-mobile), 1fr);
    }
}

/* widget listings - categories en products */
.widget-homepage-categories .home_page_listing,
.widget-homepage-products .home_page_listing {
    margin-block: 0;
}

/* blog listing */
.blog-listing {
    grid-template-columns: repeat(var(--blog-listing-number-of-cols), 1fr);
    margin-block-end: var(--gutter);
}

:root {
    --blog-listing-number-of-cols: 2;
}

@media screen and (max-width: 575px) {
    :root {
        --blog-listing-number-of-cols: 1;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???????
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/




:root {
    --st-icon-size: var(--text-size);
}

.icongreen,
.st-icon-green .st-icon {
    color: var(--success-500);
}

.iconred,
.st-icon-red .st-icon {
    color: var(--error-500);
}

.iconpink {
    color: var(--error-300);
}

.iconorange,
.st-icon-orange .st-icon {
    color: var(--warning-500);
}

.iconyellow {
    color: var(--warning-300);
}

.iconblue {
    color: var(--info-500);
}

.search-icon {
    -webkit-tap-highlight-color: transparent;
}

.icon_spin {
    display: inline-block;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

table i.btw.icon-checkmark {
    color: green;
}

table i.btw.icon-cross {
    color: red;
}

/* NIEUW */
.st-icon {
    --st-icon-color: inherit;
    color: var(--st-icon-color);
    display: inline-flex;
}

:root {--st-icon-min-size: 1em;}

.st-icon > svg {
    fill: currentColor;
    min-width: var(--st-icon-min-size);
    min-height: var(--st-icon-min-size);
    height: var(--st-icon-size);
}

.loader {
    display: inline-flex;
}

.loader {
    -webkit-animation: icon-spinning 2s infinite linear;
    animation: icon-spinning 2s infinite linear;
}

@keyframes icon-spinning {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* todo: font-family op span kan weggehaald worden als icomoon niet meer gebruikt wordt*/
/*.icon-left span,*/
/*.icon-right span {*/
/*    font-family: var(--body-font-stack);*/
/*}*/
/* eind to-do */

.icon-right-text span.button-text,
.has_icon_left .st-icon,
.has_icon_left .fa-icon {
    margin-right: .5rem;
}

.icon-left-text span.button-text,
.has_icon_right .st-icon,
.has_icon_right .fa-icon {
    margin-left: .5rem;
}

/* DUOTONE ICONS */
.fa-secondary {
    opacity:.4;
}

[class*="st-icon-caret-"] svg,
.fa-icon.fa-icon-caret-left:before,
.fa-icon.fa-icon-caret-right:before,
.fa-icon.fa-icon-caret-down:before,
.fa-icon.fa-icon-caret-up:before {
    --st-icon-caret-height: .875em;
    min-height: var(--st-icon-caret-height);
    min-width: var(--st-icon-caret-height);
    max-height: var(--st-icon-caret-height);
    max-width: var(--st-icon-caret-height);
}

.show-chevron-right .st-icon-chevron-down,
.show-chevron-down .st-icon-chevron-right {
    display: none;
}

/* ICONS */
.fa-icon {
    position: relative;
}

.fa-icon:before {
    --text-size-around-icon: var(--text-size-md);
    --icon-color: currentColor;
    --st-icon-size: calc(var(--text-size-around-icon) * var(--text-line-height));
    --icon-align-y: text-bottom;

    content: '';
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--icon-color);
    min-width: 1em;
    min-height: 1em;
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: var(--icon-align-y);
}

.fa-icon.fa-icon-check:before {
    --icon: var(--usp-check-icon);
    --icon-color: var(--usp-icon-color);
}

.fa-icon.fa-icon-circle-check:before {
    --icon: var(--usp-circle-check-icon);
    --icon-color: var(--usp-icon-color);
}

.fa-icon.fa-icon-envelope:before {
    --icon: var(--envelope-icon);
}

.fa-icon.fa-icon-arrow-left:before {
    --icon: var(--arrow-left-icon);
}

.fa-icon.fa-icon-arrow-right:before {
    --icon: var(--arrow-right-icon);
}

.fa-icon.fa-icon-chevron-left:before {
    --icon: var(--chevron-left-icon);
}

.fa-icon.fa-icon-chevron-right:before {
    --icon: var(--chevron-right-icon);
}

.fa-icon.fa-icon-chevron-down:before {
    --icon: var(--chevron-down-icon);
}

.fa-icon.fa-icon-chevron-up:before {
    --icon: var(--chevron-up-icon);
}

.fa-icon.fa-icon-caret-left:before {
    --icon: var(--caret-left-icon);
}

.fa-icon.fa-icon-caret-right:before {
    --icon: var(--caret-right-icon);
}

.fa-icon.fa-icon-caret-down:before {
    --icon: var(--caret-down-icon);
}

.fa-icon.fa-icon-caret-up:before {
    --icon: var(--caret-up-icon);
}

.fa-icon.fa-icon-star:before,
.fa-icon.fa-icon-star-full:before {
    --icon: var(--star-full-icon);
}

.fa-icon.fa-icon-star-empty:before {
    --icon: var(--star-empty-stroke-icon);
}

.fa-icon.fa-icon-star-half:before {
    --icon: var(--star-half-stroke-icon);
}

.fa-icon.fa-icon-home:before {
    --icon: var(--home-icon);
}

.fa-icon.fa-icon-thumbs-up:before {
    --icon: var(--thumbs-up-icon);
}

.fa-icon.fa-icon-user:before {
    --icon: var(--user-icon);
}

.fa-icon.fa-icon-phone:before {
    --icon: var(--phone-icon);
}

.fa-icon.fa-icon-facebook:before {
    --icon: var(--facebook-icon);
}

.fa-icon.fa-icon-facebook-f:before {
    --icon: var(--facebook-f-icon);
}

.fa-icon.fa-icon-square-facebook:before {
    --icon: var(--facebook-square-icon);
}

.fa-icon.fa-icon-instagram:before {
    --icon: var(--instagram-icon);
}

.fa-icon.fa-icon-youtube:before {
    --icon: var(--youtube-icon);
}

.fa-icon.fa-icon-linkedin:before {
    --icon: var(--linkedin-icon);
}

.fa-icon.fa-icon-linkedin-in:before {
    --icon: var(--linkedin-in-icon);
}

.fa-icon.fa-icon-twitter:before {
    --icon: var(--twitter-icon);
}

.fa-icon.fa-icon-square-twitter:before {
    --icon: var(--twitter-square-icon);
}

.fa-icon.fa-icon-whatsapp:before {
    --icon: var(--whatsapp-icon);
}

.fa-icon.fa-icon-dribbble:before {
    --icon: var(--dribbble-icon);
}

.fa-icon.fa-icon-pinterest:before {
    --icon: var(--pinterest-icon);
}

.fa-icon.fa-icon-pinterest-p:before {
    --icon: var(--pinterest-p-icon);
}

.fa-icon.fa-icon-square-pinterest:before {
    --icon: var(--pinterest-square-icon);
}

.fa-icon.fa-icon-vimeo:before {
    --icon: var(--vimoe-icon);
}

.fa-icon.fa-icon-vimeo-v:before {
    --icon: var(--vimoe-v-icon);
}

.fa-icon.fa-icon-plus:before {
    --icon: var(--plus-icon);
}

.fa-icon.fa-icon-minus:before {
    --icon: var(--minus-icon);
}

.fa-icon.fa-icon-location-dot:before {
    --icon: var(--location-dot-icon);
}

.topmenu {
    background-color: var(--topmenu-bg-color);
    height: var(--topmenu-height);
    width: 100%;
    z-index: var(--topmenu-z-index);
}

.topmenu,
.topmenu a {
    color: var(--topmenu-text-color);
}

/*TODO: mooier oplossen als t ff kan*/
.user_pass_forgotten,
.user_create_account {
    --topmenu-text-color: var(--bs-dropdown-link-color);
}

.topmenu a:hover {
    color: var(--topmenu-text-color-hover);
}

.topmenu * {
    font-size: var(--text-size-sm);
}

.topmenu .fa-icon:before {
    --text-size-around-icon: var(--text-size-sm);
}

.topmenu ul {
    list-style: none;
}

.topmenu-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}


.topmenu-inner-col {
    display: flex;
    height: 100%;
    width: auto;
}

.topmenu-content {
    display: flex;
    align-items: center;
}

.topmenu-nav {
    display: flex;
}

/* line-height aanpassen zodat alles uitgelijnd staat */
.topmenu-content *,
.topmenu-nav-item > a,
.login-button a {
    line-height: normal;
}

.topmenu-nav-item {
    display: flex;
    align-items: center;
}

.topmenu-nav-item > a,
.login-button,
.login-button > a,
ul.loggedin-box,
.logged-in-bar {
    display: flex;
    height: 100%;
    align-items: center;
}

.topmenu-nav-item > a,
.login-button > a,
.loggedin,
.logout {
    padding-inline: var(--topmenu-items-padding-x);
}

/* Hide 'Create account' / 'Account aanmaken' menu item if user is logged in */
body.logged-in .topmenu-nav a[href$="create_account.php"] {
    display: none;
}

/* Top-menu USP's */
.top-menu-usps {
    display: flex;
}

.top-menu-usps li:not(:last-child) {
    margin-inline-end: var(--st-spacing-sm);
}

.top-menu-usps .fa-icon:before {
    --st-icon-size: var(--text-size);
}
/* NIEUWE STYLING */
.site-header {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    z-index: var(--header-z-index);
}

.site-header a:hover,
.site-header a:focus {
    color: var(--header-text-color-hover);
}

/* remove options to set height and width of logo and make sure logo is always not bigger than the dropdown items */
/*.site-header-small .col-logo img {*/
/*    --header-logo-padding: calc(var(--header-logo-padding-top) + var(--header-logo-padding-bottom));*/
/*    max-height: calc(var(--site-nav-height) - var(--header-logo-padding)) !important;*/
/*}*/

/* site-header column padding. Except for logo, it has its own custom vertical padding */
.site-header-inner > *:not(.col-logo):not(.col-nav) {
    padding-block: .5rem;
}

.site-header {
    --header-searchbar-max-width: 50rem;
}

.site-header.site-header-large-logo-center {
    --header-searchbar-max-width: 18rem;
}

/* Zoekbalk */
.site-header-searchbar {
    max-width: var(--header-searchbar-max-width);
}

.site-header-searchbar .form-control,
.mobile-searchbox .form-control {
    /*De zoekbalk in de header mag wel een volledige ronde hoek aan linkerzijde*/
    --input-border-radius: var(--btn-border-radius);
}

.site-header-large-logo-left .site-header-searchbar,
.site-header-small-nav-left .site-header-searchbar {
    margin-inline: auto;
    padding-inline: 5%;
    width: 100%;
    box-sizing: border-box;
}

/* Icon navigatie in Site Header */
:root {
    --header-icons-btn-size: 40px;
}

.site-header-nav {
    align-items: center;
}

.site-header-nav-item {
    --header-icons-border-radius: var(--border-radius-pill);
    --header-icons-border-width: var(--btn-border-width);

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-icons-btn-size);
    height: var(--header-icons-btn-size);
    border-radius: var(--header-icons-border-radius);
    color: var(--header-icons-color);
    background-color: var(--header-icons-bg-color);
    border: var(--header-icons-border-color) solid var(--header-icons-border-width);
}

.site-header-nav-item .st-icon-caret-down {
    margin-inline-start: .25em;
}

.site-header-nav-item:not(.site-header-language-popup) a {
    color: var(--header-icons-color);
}

.site-header-nav-item:not(.site-header-language-popup):hover a,
.site-header-nav-item:not(.site-header-language-popup):focus a,
.header-account:hover .site-header-nav-item a,
.header-account:focus .site-header-nav-item a {
    color: var(--header-icons-color-hover);
}

.site-header-nav-item:not(.site-header-language-popup):hover,
.site-header-nav-item:not(.site-header-language-popup):focus {
    color: var(--header-icons-color-hover) !important;
}

.site-header-nav-item:hover,
.site-header-nav-item:focus {
    /*background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.2) 100%);*/
    background-color: var(--header-icons-bg-color-hover);
    border: var(--header-icons-border-color-hover) solid var(--header-icons-border-width);
}

.site-header-nav-item .st-icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.site-header-basket-wrapper .site-header-nav-item a:last-of-type {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
}

/* width icon button with text */
.site-header-nav .site-header-nav-item-containing-text {
    width: max-content;
}

.site-header-nav .site-header-nav-item-containing-text .st-icon:last-of-type {
    margin-inline-end: 0;
}

.header-account .dropdown-item {
    font-size: var(--text-size-sm);
}

/* EINDE Icon navigatie in Site Header */

/*********************************** HEADER SHOPPING CART ************************************/
/* ---- CART ---- */
.basket_wrapper {
    position: relative;
    margin-inline-start: 1rem;
}

.site-header-basket-wrapper.basket_wrapper {
    margin-inline-start: 0;
}

.site-header-basket-button {
    --bs-btn-color: var(--btn-cart-text-color);
    --bs-btn-bg: var(--btn-cart-bg-color);
    --bs-btn-border-color: var(--btn-cart-border-color);
    --bs-btn-hover-color: var(--btn-cart-text-color-hover);
    --bs-btn-hover-bg: var(--btn-cart-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-cart-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 211, 212, 213;*/
    --bs-btn-active-color: var(--btn-cart-text-color-hover);
    --bs-btn-active-bg: var(--btn-cart-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-cart-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #f8f9fa;*/
    /*--bs-btn-disabled-border-color: #f8f9fa;*/
}

.cart_content a {
    color: var(--btn-cart-text-color);
}

.site-header-basket-button:hover .cart_content a,
.site-header-basket-button:focus .cart_content a {
    color: var(--btn-cart-text-color-hover);
}

.cart_content a:last-of-type {
    display: inline-flex;
}

.basket_wrapper,
.site-header-basket-wrapper {
    z-index: var(--header-basket-z-index);
}

.site-header-basket-wrapper {
    position: relative;
}

.cart_content {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* CART BUTTON ICON (ICON FONT) */
.cart_content span.st-icon {
    /*margin-left: 1rem;*/ /* waarvoor is deze margin-left? Om welke icon gaat dit? Is deze selector uberhaupt nog nodig? */
    font-size: var(--btn-font-size);
}

.header-mobile-icon.shopping-icon {
    position: relative;
}

/******************** BASKET WEIGHT  ********************/
.shopping_cart_basket-weight {
    text-align: right;
    margin: 0.5rem;
}

/******************** QUANTITY BADGE  ********************/
/* Bij de quantity tekstje zijn bg en color inverse van de cart-button zelf (alleen bij de button type, niet bij de icon type) */
.site-header-basket-wrapper .site-header-nav-item .quantity,
.cart_content .quantity,
.header-mobile-icon .quantity {
    font-size: var(--text-size-xs);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    min-height: .8rem;
    min-width: .8rem;
    width: fit-content;
    width: -moz-fit-content;
    padding: 4px;
    border-radius: 100px;
    line-height: 1;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.site-header-basket-wrapper .site-header-nav-item .quantity,
.cart_content span.quantity {
    margin-left: .5rem;
}

.site-header-basket-wrapper .site-header-nav-item .quantity {
    background-color: var(--header-icons-color);
    color:  var(--header-bg-color);
}

.site-header-basket-wrapper .site-header-nav-item:hover .quantity {
    background-color: var(--header-icons-color-hover);
}

.cart_content .quantity {
    background-color: var(--btn-cart-text-color);
    color:  var(--btn-cart-bg-color);
}

.cart_content:hover .quantity,
.site-header-basket-button:hover .cart_content .quantity {
    color: var(--btn-cart-bg-color-hover);
    background-color: var(--btn-cart-text-color-hover);
}

.header-mobile-icon .quantity {
    position: absolute;
    top: .5rem;
    right: -2px;
    background-color: var(--header-mobile-text-color);
    color:  var(--header-mobile-bg-color);
}
/*------ Searchbar Overlay on Focus ------*/
.overlay-searchbar {
    position: fixed;
    background-color: rgba(0,0,0,.25);
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--overlay-searchbar-z-index);
    opacity: 0;
    transition: width, height, opacity 0.3s ease-in-out;
}


body:has(.site-header-searchbar input.form-control:focus) .overlay-searchbar {
    opacity: 1;
    width: 100vw;
    height: 100vh;
}

body:has(.site-header-searchbar input.form-control:focus) .site-header-searchbar form[name="advanced_search"] {
    z-index: 99999;
    position: relative;
}

body:has(.site-header-searchbar input.form-control:focus) .topmenu {
    z-index: -1;
}

:root {
    --site-nav-height: 50px;
}

.site-nav {
    --site-nav-item-padding-x: 1em;
    --site-nav-item-padding-y: 1rem;


    /* GEEN BORDER-BOTTOM - Want dan kan je niet goed hoveren naar de dropdown, en er is vaak een ongewenste rand.
      ipv border-bottom extra box-shadow gebruiken of een outline als dat werkt. */

    background-color: var(--nav-bg-color);
    height: var(--site-nav-height);
    z-index: var(--site-nav-z-index);
}

.site-header-large .site-nav {
    box-shadow: var(--shadow-xs);
}

/* header small height en kleuren */
.site-nav.site-nav-header-small {
    background-color: var(--header-bg-color);
}

.site-nav.site-nav-header-small .site-nav-container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* header small mega menu alignment */
.site-header-small-logo-left .hasSubChilds.mega-menu,
.site-header-small-logo-left .all-cats-mega-menu {
    --logo-padding-x: calc((var(--bs-gutter-x) * .5) * 2);
    --menu-padding-x: var(--st-container-space-x, 10px);

    left: calc((var(--logo-padding-x) + var(--desktop-logo-max-width)) * -1);
}

/* header big height, kleuren, border en box-shadow */
.site-nav.site-nav-header-big {
    height: var(--site-nav-height);
    background-color: var(--nav-bg-color);
    box-shadow: var(--shadow-xs);
    z-index: var(--site-nav-z-index);
}


.site-nav * {
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

/* <li> */
.site-nav.site-nav-header-big .site-nav-item--level-0 {
    height: var(--site-nav-height);
}

/* <a> */
.site-nav-item-link {
    transition-property: background-color, color;
    transition-duration: .2s;
}

.site-nav-item-link--level-0 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-inline: var(--site-nav-item-padding-x);
    color: var(--nav-text-color);
}

/* hover first level nav-item - colors */
.site-nav-item--level-0:hover,
.site-nav-item--level-0:focus,
.site-nav-item-link--level-0:hover,
.site-nav-item-link--level-0:focus,
.js-hover .site-nav-item-link--level-0 {
    background-color: var(--nav-items-bg-color);
    color: var(--nav-text-color-hover) !important;
}

/* Als alle dropdown-menu items een dropdown hebben, toon dan geen dropdown pijltje  */
/* (afgeleid van grote webshops zoals Coolblue die ook geen pijltje hebben omdat alles dropdown is) */
/* if .site-nav hasn't got a .site-nav-item-link that is not also a .dropdown-toggle, then disable the after element on the .dropdown-toggle  */

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(.dropdown-toggle))) .dropdown-toggle:after {*/
/*    display: none;*/
/*}*/

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(.dropdown-toggle))) .dropdown-toggle:after {*/
/*    display: none;*/
/*}*/

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(:has(.st-icon)))) ..site-nav-item-link--level-0 > .st-icon {*/
/*    display: none;*/
/*}*/

/*TODO: bovenstaande testen met icons */



.site-nav.site-nav-header-big .site-nav--justify-content-center {
    justify-content: center;
}
.site-nav.site-nav-header-big .site-nav--justify-content-between {
    justify-content: space-between;
}
.site-nav--justify-content-between .site-nav-item--level-0 {
    flex-grow: 1;
}


.site-nav-inner {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
}
.all-cats-mega-menu {
    --all-cats-max-image-width: 20px;
    --all-cats-image-placeholder-width: var(--all-cats-list-item-inner-height);
    --all-cats-image-placeholder-height: var(--all-cats-list-item-inner-height);
    --all-cats-empty-image-width: calc(var(--all-cats-max-image-width) + var(--all-cats-item-gutter));
}

.all-cats-mega-menu__list-item-link--image {
    display: flex;
    align-items: var(--all-cats-item-link-alignment);
    max-height: var(--all-cats-image-placeholder-height);
    max-width: var(--all-cats-image-placeholder-width);
}

.all-cats-mega-menu__list-item-link--image .menu-title-img {
    max-width: var(--all-cats-max-image-width);
    max-height: var(--all-cats-image-placeholder-height);
}

.menu-title-img-empty {
    margin-inline-start: var(--all-cats-empty-image-width);
}

:root {
    --header-mobile-height: 50px;
}

#mobile_menu_container .bs-container {
    width: 100% !important;
    margin: 0 !important;
}

/*----------------------------------------*/
/*------------- MOBILE MENU --------------*/
/*----------------------------------------*/

.header-mobile {
    display: flex;
    height: var(--header-mobile-height);
    background-color: var(--header-mobile-bg-color);
    box-shadow: var(--shadow-xs);
    z-index: var(--header-mobile-z-index);

    border-bottom: 1px solid var(--border-color-transparent-dark);
/*    We're not using "box-sizing:border-box;" here since the border pushes the logo upwards considerably, even with a border-width of just 1px. */
}


/*TODO: Zie Monday 3876000247*/
/* header mobile layout opties */
/*.header-mobile.header-mobile--logo-left .header-mobile-col:last-child {*/
/*    margin-left: auto;*/
/*}*/

/*.header-mobile.header-mobile--logo-center .header-mobile-col {*/
/*    flex: 1;*/
/*}*/

/*@media screen and (max-width: 767px) {*/
/*    .header-mobile.header-mobile--space-between .header-mobile-container {*/
/*        justify-content: space-between;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 768px) {*/
/*    .header-mobile.header-mobile--space-between .header-mobile-col {*/
/*        flex: 1;*/
/*    }*/
/*}*/
/*END TODO: Zie Monday 3876000247*/




/*align-items: center; werkt niet ivm counter element*/
.header-mobile-container {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

.header-mobile-col {
    display: flex;
}


.header-mobile-icon {
    cursor: pointer;
    color: var(--header-mobile-text-color);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.header-mobile-icon:hover{
    color: var(--header-mobile-text-color-hover);
    background-color: var(--header-mobile-bg-color-hover);
    -webkit-tap-highlight-color: var(--header-mobile-bg-color-hover);
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.header-mobile-icon > a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.header-mobile .header-mobile-icon,
.header-mobile .header-mobile-icon a,
.header-mobile-open .header-mobile-icon,
.header-mobile-open .header-mobile-icon a {
    font-size: 1.25rem;
}

#mobile_menu_close,
.header-mobile .header-mobile-icon,
.header-mobile .header-mobile-icon a {
    color: var(--header-mobile-text-color);
}

/*TODO: logo moet fullheight clickable*/
/* mobile logo */
.header-mobile-logo {
    /*box-sizing: border-box;*/
    /*height: 100%;*/
    padding: .5rem;
}
.header-mobile-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.header-mobile-logo-image {
    /*box-sizing: border-box;*/
    max-height: 100%;
    /*padding: .5rem;*/
}

/* Standaard zoekbalk verborgen zetten */
.js-header-mobile-search {
    display: none;
}

.header-mobile-search {
    --header-mobile-searchbox-padding-y: .25rem;
}

/* Zonder border-bottom of bg-color is er geen padding-bottom nodig  */
.header-mobile-search {
    padding-bottom: var(--header-mobile-searchbox-padding-y);
    background-color: var(--grey-50);
    border-bottom: 1px solid var(--border-color); /* Todo: ipv de border op header-mobile-search, de border-top op .wrapper.content - dan is de animatie wat eleganter */
    box-shadow: var(--shadow-inner-xs);
}

/* Mobiele zoekbalk onder de header */
.mobile-searchbox {
    padding-top: var(--header-mobile-searchbox-padding-y);
}

/*----------------------------------------*/
/*----------- MOBILE MENU OPEN -----------*/
/*----------------------------------------*/
/* stop scrolling van body wanneer flyout active is */
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* overlay */
#mobile_menu_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--mobile-menu-flyout-z-index) - 1);
}

/* mobile menu fly-out */
#mobile_menu.mobile_menu_open {
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 2rem);
}

#mobile_menu {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    z-index: var(--mobile-menu-flyout-z-index);
    transition-duration: .4s;
    transition-property: left;
    left: -101%;
}

#mobile_menu .header-mobile-col {
    flex: 1;
}

#mobile_menu,
.menu-header a {
    color: var(--body-text-color);
}

#mobile_menu,
.menu-header {
    background-color: #fff;
}

#mobile_menu.mobile_menu_open {
    display: block;
    left: 0;
    right: 0;
    transition-duration: .4s;
    transition-property: left;
    position: fixed;
    z-index: var(--mobile-menu-flyout-z-index);
}

#mobile_menu_container.mobile_menu_open {
    display: block;
    overflow-x: unset;
}

#mobile_menu .box_top,
#mobile_menu .box_content,
#mobile_menu select,
#mobile_menu input {
    font-size: var(--text-size-md);
}

.header-mobile-open {
    position: relative;
    display: flex;
    height: var(--header-mobile-height);
    z-index: var(--mobile-menu-flyout-z-index);

    border-bottom: 1px solid var(--border-color-transparent-dark);
}

.header-mobile-open .header-mobile-container {
    width: 100%;
    padding-inline: .5rem;
    background-color: var(--header-mobile-bg-color);
}

.mobile-menu-header {
    margin-bottom: 0;
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--header-mobile-text-color);
}

.header-mobile-open .header-mobile-icon,
.header-mobile-open .header-mobile-icon a {
    color: var(--header-mobile-text-color);
}

#mobile_menu .box {
    background-color: transparent !important;
}

.mobile_menu_extra_items {
    display: flex;
}

.mobile_menu_language,
.mobile_menu_currencies {
    height: var(--header-mobile-height);
}

.mobile_menu_currencies #language {
    padding-left: .5rem;
}

/* Mobile categories */
#cols_mobile {
    overflow-y: auto;
    height: calc(100% - var(--header-mobile-height));
}

.mobile_box .box_content {
    padding: 0;
}

.mobile_box .menu-header a.active_cat_bold {
    font-weight: 700;
}

.mobile_box .menu-header {
    position: relative;
}

.mobile_box .menu-header span.item,
.sub-menu-mobile__top-menu-content .top_menu li[class*="item"] {
    --mobile-menu-item-border: 1px solid var(--border-color);

    display: block;
    padding: 0 var(--header-mobile-item-padding-x);
    height: var(--header-mobile-height);
    line-height: var(--header-mobile-height);
    cursor: pointer;
}

.mobile_box .menu-header span.item {
    border-top: var(--mobile-menu-item-border);
}

.sub-menu-mobile__top-menu-content .top_menu li[class*="item"] {
    border-bottom: var(--mobile-menu-item-border);
}

.mobile_box .menu-header .expand {
    position: absolute;
    top: .25rem;
    right: 0;
    line-height: var(--header-mobile-height);
    height: var(--header-mobile-height);
    width: var(--header-mobile-height);
    text-align: center;
    cursor: pointer;
}

.categories_box.mobile_box {
    border: 0;
}

.categories_box.mobile_box .box_content .menu-content {
    display: none;
}

@media screen and (min-width: 992px) {
    #mobile_menu.mobile_menu_open {
        max-width: calc(100% - 3rem);
    }
}

.header-mobile-top-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background-color: var(--webshop-background-color);
}

.header-mobile-top-logo-image {
    width: auto;
}

#mobile_menu_container.contains_submenu #mobile_menu.mobile_menu_open #cols_mobile #categories {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 70px);
}

.sub-menu-mobile {
    border-top: 1px solid var(--border-color);
}

.sub-menu-mobile .top_menu li[class*="item"] a {
    color: var(--body-text-color);
}

.mobile-menu-socialmedia {
    margin-top: 1rem;
    margin-left: .5rem;
}

.sub-menu-mobile__social-media-items .menu-top-content__social-media-items {
    font-size: 1.5em;
}

.sub-menu-mobile__social-media-items .mobile-menu-socialmedia .social-media-item {
    font-size: var(--text-size-xl);
    padding: .5rem;
}

.sub-menu-mobile__social-media-items .mobile-menu-socialmedia a.social-media-item {
    color: var(--grey-500);
}

.social-media-item.facebook:hover,
.social-media-item.facebook:focus {
    color: var(--color-facebook) !important;
}

.social-media-item.twitter:hover,
.social-media-item.twitter:focus {
    color: var(--color-twitter) !important;
}

.social-media-item.pinterest:hover,
.social-media-item.pinterest:focus {
    color: var(--color-pinterest) !important;
}

.social-media-item.linkedin:hover,
.social-media-item.linkedin:focus {
    color: var(--color-linkedin-blue) !important;
}

.social-media-item.instagram:hover,
.social-media-item.instagram:focus {
    color: var(--color-instagram) !important;
}

.wwk--sidebar-mobile.wwk--sidebar-mobile-bottom {
    z-index: 99998 !important;
}

/* Van toepassing bij header-review-widget.tpl */
.header-review-link {
    margin-inline-end: var(--st-spacing-xs);
}

.header-review-count {
    font-size: var(--text-size-xs);
    color: var(--header-text-color);
    opacity: .8;
}

.header-review-count:hover,
.header-review-count:focus {
    color: var(--header-text-color-hover);
}

.header-review-score-value {
    --header-review-score-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-review-score-size);
    height: var(--header-review-score-size);
    aspect-ratio: 1;
    background-color: var(--header-text-color);
    border-radius: var(--border-radius-pill);
    margin-inline-end: .5rem;
    color: var(--header-bg-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size);
    line-height: normal;
}

.header-review-stars {
    --st-icon-min-size: var(--st-icon-size);
    display: flex;
    gap: .1em;
    margin-block-end: .25em;
}

/* zorgen dat bij duotone icon style de halve ster outline zelfde opacity heeft als lege ster outline */
.header-review-stars .st-icon-style-duotone.st-icon-star-half-stroke .fa-secondary {
    opacity: 1;
}

/* Note for Andert : dit oplossen met gap ipv margin-left */

.loggedin .st-icon,
.login-button .st-icon,
.site-nav-item-link .st-icon:not(.st-icon-home) {
    margin-left: .255em;
}

.loggedin-bar .st-icon {
    margin-right: .255em;
}
:root {
    --message-border-width: var(--border-width);
    --message-padding: .5rem 1rem;
    --message-my: .5rem;

    --message-font-weight: var(--font-weight-normal);

    --message-error-text-color: var(--error-700);
    --message-error-border-color: var(--error-700);
    --message-error-background-color: var(--error-100);

    --message-warning-text-color: var(--warning-700);
    --message-warning-border-color: var(--warning-700);
    --message-warning-background-color: var(--warning-100);

    --message-success-text-color: var(--success-700);
    --message-success-border-color: var(--success-700);
    --message-success-background-color: var(--success-100);

    --message-info-text-color: var(--info-700);
    --message-info-border-color: var(--info-700);
    --message-info-background-color: var(--info-100);
}

.notification {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size-sm);
    font-family: var(--body-font-family);
    font-weight: var(--message-font-weight);
    padding: var(--message-padding);
    border-radius: var(--btn-border-radius);
    text-align: center;
}

.notification-info {
    background-color: var(--message-info-background-color);
    color: var(--message-info-text-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
}

.messageStackError,
.messageStackSuccess,
.messageStackWarning {
    padding: 0;
    border: 0;
}

.messageStackInfo .message,
.messageStackSuccess .message,
.messageStackWarning .message,
.messageStackError .message,
.checkout_opc .payment_error,
#st_miscellaneous .upload_image_message {
    display: block;
    font-family: var(--body-font-family);
    font-weight: var(--message-font-weight);
    padding: var(--message-padding);
    border-radius: var(--btn-border-radius);
    text-align: center;
}

.cart-notification div[data-bind="css: message_class"]:not(:last-of-type),
.cart-notification div[data-bind="if: position() == 'top'"]:not(:last-of-type),
.checkout_opc .payment_error:not(:last-of-type),
.messageStackErrorLeftAlign .message:not(:last-of-type),
#st_miscellaneous .upload_image_message:not(:last-of-type),
#st_miscellaneous .upload_image_message:not(:last-of-type) {
    margin-block-end: var(--message-my);
}

/*--- Error aligned left ---*/
.messageStackErrorLeftAlign .message {
    border-radius: var(--btn-border-radius);
    margin-inline-start: var(--message-my);
    text-align: left;
    background-color: var(--message-error-background-color);
    border: var(--message-border-width) solid var(--message-error-border-color);
    color: var(--message-error-text-color);
}

/*--- Error colors ---*/
.checkout_opc .payment_error,
.messageStackError .message {
    background-color: var(--message-error-background-color);
    border: var(--message-border-width) solid var(--message-error-border-color);
    color: var(--message-error-text-color);
    margin-bottom: 2px;
}

.messageStackWarning .message {
    background-color: var(--message-warning-background-color);
    border: var(--message-border-width) solid var(--message-warning-border-color);
    color: var(--message-warning-text-color);
}

.messageStackSuccess .message {
    background-color: var(--message-success-background-color);
    border: var(--message-border-width) solid var(--message-success-border-color);
    color: var(--message-success-text-color);
}

.messageStackInfo .message {
    background-color: var(--message-info-background-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
    color: var(--message-info-text-color);
}

/*--- Error icon spacing ---*/
/*.messageStackError .message i,*/
/*.messageStackSuccess .message i {*/
/*    margin-inline-end: var(--message-icon-mxe);*/
/*}*/

/*------ Shopping cart ------*/
#st_miscellaneous .error_checkout a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--message-error-text-color) !important;
    font-family: var(--body-font-family);
}

#st_miscellaneous .upload_image_message {
    color: var(--message-info-text-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
    background-color: var(--message-info-background-color);
}

/*------ Checkout ------*/
.checkout-notification-container .error_checkout {
    margin-block-start: var(--message-my);
}

.checkout-notification-container .error_checkout a {
    display: flex;
    align-items: center;
    color: var(--message-error-text-color);
}

.checkout_opc .not_active_area.opc_error_red,
.checkout_opc .opc_error_red,
.checkout_opc .checkout_payment.opc .opc_error_red {
    border: var(--error-message-border-width) solid var(--message-error-border-color);
}
/* zorgen dat tussen widgets boven elkaar evenveel ruimte hebben als naast elkaar */
/* we gebruiken row-gap want dan heb je alleen maar ruimte tussen columns in de row, niet een de buitenzijde - zag er raar uit */

/* dit klopt nu eigenlijk niet. Op mobiel is container gutter --st-container-space-x , die is anders dan --bs-gutter-x */
/* Daarnaast zou dit niet een halve maar hele --bs-gutter-x moeten zijn. Maar dat valt nu nog niet op omdat de columns pas bij -lg breakpoint hebben */
/* todo: --bs-gutter-x en --st-container-space-x mergen - dan deze onderstaande niet * 0.5 ,
    de gutter zal dan smaller zijn op desktop, dan kunnen we met een media query de gutter overal op mobile kleiner maken en groter op desktop  */
.row-gutter-y {
    row-gap: calc(var(--bs-gutter-x) * .5);
}

.row-gutter-y-none {
    row-gap: 0;
}

/* De padding staat standaard aan dus deze class heeft nu nog geen toegevoegde waarde. */
/*.row-gutter-x {*/
/*    */
/*}*/

/* ik gebruik geen .gx-0 want dan is gelijk --bs-gutter-x op 0. Die kan ik dan niet gebruiken, dat is niet wenselijk. */
.row-gutter-x-none.row>* {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.widget-container-fullwidth-with-gutter {
    padding-inline: calc(var(--st-gutter-x) / 2);
}


/* is p-fluid goede naam? Aangezien het gebaseerd is op gutter? Is het met een gutter-min-value algemeen genoeg? */
:root {
    --p-fluid-min: calc(var(--st-gutter-x) * .5);
    --p-fluid-preferred: 8.33333333%; /* equal to one bootstrap column (100% / 12) */
    --p-fluid-max: 5rem;
    --p-fluid: clamp(var(--p-fluid-min), var(--p-fluid-preferred), var(--p-fluid-max));
}

.p-fluid {padding: var(--p-fluid);}
.py-fluid {padding-block: var(--p-fluid);}
.pbs-fluid {padding-block-start: var(--p-fluid);}
.pbe-fluid {padding-block-end: var(--p-fluid);}
.px-fluid {padding-inline: var(--p-fluid);}
.pis-fluid {padding-inline-start: var(--p-fluid);}
.pie-fluid {padding-inline-end: var(--p-fluid);}


/* zorgen dat .wrapper.content fullwidth is, zodat widget-sections ook fullwidth kunnen zijn */
.pagebuilder-infopage .wrapper.content {
    width: 100% !important;
    margin-inline: auto;
    padding-inline: 0;
    max-width: unset !important;
}

.pagebuilder-category .widget-container-fullwidth-with-gutter,
.pagebuilder-category .widget-container.bs-container {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen ?????
*/


.form_section table tr td,
.form_section table tr th {
    text-align: left;
}

.form_section {
    margin-bottom: var(--gutter);
}

.form_section.nomargin {
    margin-bottom: 0;
}

.form_section.nomargin.margintop {
    margin-top: var(--gutter);
}

.form_section h2 span {
    left: .25rem;
    margin-right: .5rem;
}

.form_section h2 span.rating_stars {
    margin-right: 0;
}

.form_section h2 span.left {
    position: relative;
    top: .25rem;
    float: left;
    margin-right: .5rem;
}

input.general_input_field.no-border {
    border: 0;
    border-radius: 0;
}

.form-section .login input:not(:last-of-type) {
    margin-bottom: var(--gutter);
}

label {
    display: block;
}

input.general_input_field.medium {
    width: 125px;
}

input.general_input_field.mediumfull {
    width: 310px;
}

input.general_input_field.small {
    width: 80px !important;
}

select.big {
    width: 521px;
}

select.normal {
    width: 175px;
}

select.auto_invullen {
    width: auto;
}

.has-js .label_check,
.has-js .label_radio {
    padding-left: 34px;
}

.has-js .label_radio.no_text {
    padding-left: 22px;
}

.has-js .label_radio.no_text.small {
    padding-left: 12px;
}

.has-js .label_radio {
    background: url(/themes/11.0/images/radio/radio-off.png) no-repeat;
}

.has-js .label_check {
    background: url(/themes/11.0/images/checkbox/check-off.png) no-repeat;
}

.has-js label.c_on {
    background: url(/themes/11.0/images/checkbox/check-on.png) no-repeat;
}

.has-js label.r_on {
    background: url(/themes/11.0/images/radio/radio-on.png) no-repeat;
}

.has-js .label_check input, .has-js .label_radio input {
    position: absolute;
    left: -9999px;
}

label.label_check, label.label_radio {
    position: relative;
    /*top: 5px;*/
    cursor: pointer;
    display: inline-block;
    height: 22px;
}

label.label_check.notext {
    padding-left: 22px;
}

span.status {
    position: relative;
    margin-right: 5px;
    top: 1px;
}

.dynamic_number_input {
    min-width: 30px !important;
    max-width: 65px !important;
    transition: width .3s;
    text-align: center;
}

a.address_selected {
    display: none;
    right: 30px !important;
    color: var(--success-500);
}

.optionSelected a.address_selected {
    display: block;
}

input, select, textarea {
    font-family: var(--input-font-stack);
}

textarea {
    font-size: var(--text-size-md);
}

.form_section.box-border {
    border-color: var(--border-color);
}

/* Nieuw: */

.form-col {
    margin-bottom: 1rem;
}

input[readonly].form-control {
    background-color: var(--grey-100);
}

input[readonly].form-control::placeholder{
    color: var(--grey-500);
}

/* CSS specific to iOS devices - only Safari iOS supports -webkit-touch-callout */
@supports (-webkit-touch-callout: none) {
    /* Minimaal 1rem/16px font-size i.v.m. iOS input Zoom */
    input {
        font-size: 1rem; /* Fallback */
        --input-font-size: var(--text-size-md);
        font-size: max(1rem, var(--input-font-size));
    }
}

textarea {
    height: 6em;
    resize: vertical;
}

/* Geboortedatum datepicker */
.ui-datepicker {
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

/* account_edit.php */
body[class~="account-edit.php"] form[name="account_edit"],

/* account_options.php */
body[class~="account-options.php"] form[name="contact_us"],

/* account_newsletter.php */
body[class~="account-newsletters.php"] form[name="account_newsletter"],

/* account_password.php */
body[class~="account-password.php"] form[name="account_password"],

/* password_forgotten.php */
.password-forgotten-section,

/* guestbook_sign.tpl */
.form-guestbook,

/* create_account.php */
.form-create-account {
    max-width: var(--preferred-form-width);
    margin-inline: auto;
}

/* RECAPTCHA min-height CLS */
.g-recaptcha[data-size="compact"] {
    min-height: 140px;
}

.g-recaptcha { 
    z-index: 3000;
    z-index: var(--recaptcha-z-index);
}

/* Numeric input field with no spinners */
.numeric-field_no-spinner {
    -moz-appearance: textfield; /* Voor Firefox */
    -webkit-appearance: none; /* Voor Safari en Chrome */
    appearance: none;
}

.numeric-field_no-spinner::-webkit-outer-spin-button,
.numeric-field_no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Verwijdert de extra ruimte */
}



/*
CSS onderverdeling
Welke pagina's / globaal: Dit zijn twee onderdelen in feite: header login en login page.
Is het cruciaal boven de vouw?: Ja, login box wel - loginpage alleen bij login page

dus ---> onderverdelen en loginpage intern op loginpage, en loginbox intern globaal bij desktop? of ook mobiel nodig?
*/




/*----------------------------------------------*/
/*----------------- LOGIN PAGE -----------------*/
/*----------------------------------------------*/
body[class~="login.php"] form[name="login"] {
    margin-top: var(--gutter);
}

body[class~="login.php"] form[name="login"] .message {
    margin-bottom: var(--gutter);
}

.login-create-account-section {
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
}

.guest-account-section,
.login-create-account-section,
.login-account-section {
    padding: var(--gutter-half) var(--gutter);
}

.guest-account-section .content_section,
.login-create-account-section .content_section,
.login-account-section .content_section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.login-account-content .login {
    margin-bottom: var(--gutter);
}

.login-account-buttons {
    margin-top: var(--gutter);
}

a.user_pass_forgotten:hover,
a.user_pass_forgotten:focus {
    color: var(--link-color-hover);
}

@media screen and (min-width: 992px) {
    .login-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: var(--gutter);
    }

    .guest-account-section,
    .login-create-account-section,
    .login-account-section {
        margin-bottom: 0;
    }
}

/*----------------------------------------------*/
/*----------------- LOGIN BOX IN HEADER ------------------*/
/*----------------------------------------------*/
.login-button,
.header-account {
    position: relative;
}

.login-box li.login-button.clicked > a,
.login-box li.login-button.clicked > a > i {
    color: var(--topmenu-text-color-hover) !important;
}

.loggedin-bar,
#login-bar {
    position: absolute;
    z-index: var(--topmenu-z-index);
}

#loggedin-bar,
#login-bar {
    top: var(--topmenu-height, 40px);
}

#loggedin-bar-header {
    --loggedin-bar-top: calc(var(--header-icons-btn-size, 40px) + .25em);
    top: var(--loggedin-bar-top, 40px);
    right: 0;
}

.loggedin-bar {
    display: none;
    background-color: transparent;
}

/* Geen absolute, want dan zie je de animatie nog. Anders heb je een delay */
.loggedin-bar .dropdown-menu {
    position: relative;
}

.loggedin-bar .dropdown-menu i {
    display: none;
}

.loggedin-bar .dropdown-menu a {
    line-height: 2;
}

#login-bar {
    right: 0;
    width: 275px;
    padding-block: 1.5rem;
    padding-inline: 1rem;
}

#login-bar-password,
.login-bar-submit,
#login-bar-password-forgotten,
#login-bar-create-account {
    margin-top: .5rem;
}

#login-bar-password-forgotten a:hover,
#login-bar-create-account a:hover {
    color: var(--link-color-hover);
}

.login-bar-submit {
    display: flex;
    justify-content: flex-end;
}

.loggedin {
    display: inline-flex;
    align-items: center;
}

.loggedin-bar li .dropdown-item {
    display: flex;
    align-items: center;
}

/* todo: kijken of dit weg kan of anders waar dit moet komen te staan */
/*div.ac_results {*/
/*    border-radius: var(--border-radius-sm, 4px);*/
/*}*/






.form-create-account__login-link {
    text-align: center;
    margin-top: 1rem;
}

.form-create-account__login-link a {
    text-decoration: underline;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Is dit shoppingcart page?
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/


#st_miscellaneous #shoppingcart {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

#winkelwagen_addon,
.cart-notification,
#shipping_form {
    grid-column: 1 / span 2;
}

#st_miscellaneous #shipping_form > .form_section,
#st_miscellaneous #shipping_form > .form_section .form_section:last-of-type {
    margin-bottom: 0;
}

#st_miscellaneous #shoppingcart .shopping_cart_coupons,
#st_miscellaneous #shoppingcart .shopping_cart_totals,
#st_miscellaneous #shoppingcart .shopping_cart_shipping {
    width: auto;
    margin-bottom: 0;
}

#st_miscellaneous #shoppingcart > .cart-notification {
    margin-block-end: var(--section-space-y);
}


/* Bespreken: geen extra margin toevoegen. Er is namelijk al een flex-gap, anders is de afreken knop niet direct zichtbaar. */
/*#st_miscellaneous #shoppingcart .shopping_cart_coupons,*/
/*#st_miscellaneous #shoppingcart .form_section.shopping_cart_totals,*/
/*#st_miscellaneous #shoppingcart .shopping_cart_shipping,*/
/*#st_miscellaneous #shoppingCartContainer .shopping-cart_buttons {*/
/*    margin-block-start: var(--section-space-y);*/
/*}*/

@media screen and (max-width: 991px) {
    #st_miscellaneous #shoppingcart .shopping_cart_coupons,
    #st_miscellaneous #shoppingcart .shopping_cart_totals,
    #st_miscellaneous #shoppingcart .shopping_cart_shipping {
        grid-column: 1 / span 2;
    }
}

#st_miscellaneous .shopping_cart_padding .form_section {
    border: var(--border);
    border-radius: var(--border-radius);
}

#st_miscellaneous .shopping_cart.products {
    padding: 1rem;
    margin-bottom: 1rem;
}

#st_miscellaneous .shopping_cart .shopping_cart_image {
    width: 75px;
    height: 75px;
    padding: 1rem 0 1rem 1rem;
}

#st_miscellaneous .shopping_cart .product_image img.subimage_small {
    width: 75px;
}

#st_miscellaneous .shopping_cart .shopping_cart_name {
    padding: 1rem;
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name,
#st_miscellaneous .shopping_cart .shopping_cart_name .product_name small {
    font-size: var(--text-size-xs);
}

#st_miscellaneous .shopping_cart .shopping_cart_name b {
    font-size: var(--text-size-md);
}

#st_miscellaneous .shopping_cart .shopping_cart_name b:after {
    content: "\a";
    white-space: pre;
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name a {
    color: var(--body-text-color);
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name a:hover {
    color: var(--link-color-hover);
}

#st_miscellaneous .shopping_cart .shopping_cart_total {
    padding: 1rem 1rem 1rem 0;
    text-align: right;
}

#st_miscellaneous .shopping_cart thead .shopping_cart_name,
#st_miscellaneous .shopping_cart thead .shopping_cart_total {
    padding-block: .5rem;
    padding-inline: 0;
}

@media screen and (min-width: 412px) {
    #st_miscellaneous .shopping_cart .shopping_cart_total {
        min-width: 85px;
    }
}

@media screen and (max-width: 575px) {
    .shopping_cart.products tr[valign="top"] {
        display: flex;
    }

    .shopping_cart.products .shopping_cart_image,
    .shopping_cart.products .shopping_cart_total {
        flex: 1;
    }

    .shopping_cart.products .shopping_cart_name {
        flex: 2;
    }

    .shopping_cart.products .shopping_cart_total {
        display: inline-flex;
        justify-content: flex-end;
    }
}

#st_miscellaneous .shopping_cart_price .cart_aantal {
    padding-right: .5rem;
    min-height: 38px;
    display: flex;
    align-items: center;
}

#st_miscellaneous .shopping_cart_price .cart_count {
    margin-right: 1rem;
}

#st_miscellaneous .shopping_cart_price .cart_spinner {
    margin-right: .5rem;
}

@media screen and (max-width: 359px) {
    #st_miscellaneous .shopping_cart_price .cart_aantal {
        padding-right: .25rem;
    }

    #st_miscellaneous .shopping_cart_price .cart_count {
        margin-right: .25rem;
    }

    #st_miscellaneous .shopping_cart_price .cart_spinner {
        margin-right: .25rem;
    }
}

#st_miscellaneous .shopping_cart_price .cart_remove a {
    color: var(--body-text-color);
}

/*.shopping_cart_price .cart_spinner,*/
/*.shopping_cart_price .cart_remove {*/
/*    margin-top: 2px;*/
/*}*/

@media screen and (min-width: 120px) and (max-width: 479px) {
    #st_miscellaneous .shopping_cart tr td.col1 {
        width: 50px;
    }

    #st_miscellaneous .shopping_cart tr td.col1 div.product_image {
        height: 50px;
        text-align: center;
    }
}

@media screen and (min-width: 480px) and (max-width: 724px) {
    #st_miscellaneous .shopping_cart tr td.col1 {
        width: 75px;
    }

    #st_miscellaneous .shopping_cart tr td.col1 div.product_image {
        height: 75px;
        text-align: center;
    }
}

@media screen and (min-width: 120px) and (max-width: 962px) {
    #st_miscellaneous #shoppingcart div.form_section {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

@media screen and (min-width: 725px) and (max-width: 962px) {
    #st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_name {
        width: 474px;
    }

    #st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_name div.product_name {
        position: relative;
        width: 474px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_price,
#st_miscellaneous .shopping_cart.mobile tr th.shopping_cart_price {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

#st_miscellaneous #content #shoppingcart td.shopping_cart_price a {
    text-decoration: none;
}

#st_miscellaneous #shoppingcart .cart_button,
#st_miscellaneous #shoppingcart .cart_button a,
#st_miscellaneous #shoppingcart .cart_button input {
    position: relative;
    float: left;
}

#st_miscellaneous #shoppingcart .cart_button.cart_remove,
#st_miscellaneous #shoppingcart .opc_cart_price {
    position: relative;
    float: right;
}

#st_miscellaneous #shoppingcart div.cart_button.cart_remove i {
    position: relative;
    left: 1px;
}

#st_miscellaneous #shoppingcart div.cart_button.cart_remove a {
    display: block;
}

#st_miscellaneous #shoppingcart div.cart_button.pointer {
    cursor: pointer;
}

#st_miscellaneous #shoppingcart div.ui-spinner {
    position: relative;
    top: 2px;
    margin-left: 10px;
}

#st_miscellaneous #shoppingcart table.checkout_shipping tr:hover {
    cursor: unset;
}

#st_miscellaneous #shoppingcart table.checkout_shipping tr:hover td {
    background-color: inherit;
}

#st_miscellaneous #shoppingcart .coupon tbody tr {
    display: grid;
    grid-template-columns: repeat(2, auto);
}

#st_miscellaneous #shoppingcart .coupon tbody tr td {
    display: flex;
    padding: 0;
}

#st_miscellaneous #shoppingcart .coupon tbody tr td:last-of-type {
    justify-content: flex-end;
    align-items: flex-start;
}

#st_miscellaneous .coupon-wrapper-cart {
    margin-inline-end: var(--st-spacing-md) !important;
}

@media screen and (max-width: 375px) {
    #st_miscellaneous .coupon-wrapper-cart,
    #st_miscellaneous .coupon-wrapper-cart input {
        width: 120px;
    }
}

@media screen and (min-width: 415px) {
    #st_miscellaneous #shoppingcart .coupon tbody tr td {
        align-items: center;
    }
}

@media screen and (max-width: 399px) {
    #st_miscellaneous #shoppingcart .cart_button.cart_remove {
        float: unset !important;
    }

    #st_miscellaneous #shoppingcart .cart_button {
        margin-top: .5rem;
    }
}

#st_miscellaneous #shoppingcart #total {
    background-color: var(--grey-100);
}

#st_miscellaneous #shoppingcart > div:nth-of-type(5) .store_info_text {
    border: 1px solid var(--info-700);
    color: var(--info-700);
    background-color: var(--info-50);
    padding: .25rem .5rem;
    margin: 1rem 0;
    border-radius: var(--border-radius);
}

#st_miscellaneous #shoppingcart > div:nth-of-type(5) .store_info_text tbody > tr > td:nth-of-type(2) {
    display: inline-flex;
    align-items: center;
}

#st_miscellaneous #shoppingcart #total,
#st_miscellaneous #shoppingcart > div:nth-of-type(3),
#st_miscellaneous #shoppingcart > div:nth-of-type(5) {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 1rem;
}

#shoppingcart .form_section.shopping_cart_totals tr.order_total td:last-of-type {
    text-align: right;
}

/*cart notifications*/
.cart-notification {
    box-shadow: none;
}

.cart-notification h2 {
    padding-block: .25rem;
}

#st_miscellaneous .shopping-cart_buttons {
    --shopping-cart-buttons-margin-y: var(--gutter);

    display: flex;
    justify-content: space-between;
    margin-top: var(--shopping-cart-buttons-margin-y);
}

@media screen and (max-width: 767px) {
    #st_miscellaneous .shopping-cart_buttons {
        flex-direction: column;
    }

    #st_miscellaneous .shopping-cart_buttons .checkout-nav-options,
    #st_miscellaneous .shopping-cart_buttons a,
    #st_miscellaneous .shopping-cart_buttons button,
    #st_miscellaneous .error-message {
        width: -webkit-fill-available;
        width: -moz-available;
    }

    #st_miscellaneous .shopping-cart_buttons .back_buttons > div,
    #st_miscellaneous .shopping-cart_buttons .checkout_buttons > div:not(:last-of-type) {
        margin-bottom: .5rem;
    }
}

#st_miscellaneous .checkout_buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#st_miscellaneous .checkout_buttons .error-message {
    margin-top: .5rem;
}

/* UPLOAD IMAGE */
#st_miscellaneous .upload_image p {
    font-size: var(--text-size-xs);
}

#st_miscellaneous .upload_image_message span {
    color: inherit !important;
}

#st_miscellaneous .upload_image_message-uploaded {
    margin-block-start: .5rem;
}

/* spaarpunten op winkelwagenpagina */
.savings_cards {
    margin-block-end: var(--gutter);
}

/*!* hoort bij kader op shopping_cart *!*/
/*table.shopping_cart a{*/
/*    color: var(--body-text-color);*/
/*}*/

/*todo: waar komt #shopping-cart-carrousel voor? */
/*!*Items same height with flex properties on parents and children*!*/
/*#shopping-cart-carrousel .owl-stage {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    float: left;*/
/*}*/

/*#shopping-cart-carrousel .owl-item {*/
/*    display: flex;*/
/*    margin-right: 10px;*/
/*}*/

/*#shopping-cart-carrousel .item {*/
/*    border: 1px solid #eaeaea;*/
/*    border-radius: 5px;*/
/*    min-width: 150px !important;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-wrap: wrap;*/
/*    flex: auto;*/
/*}*/

/*#shopping-cart-carrousel .products_gallery_row_name {*/
/*    flex: 1 1 auto;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

/*#shopping-cart-carrousel .item {*/
/*    border: 1px solid #eaeaea;*/
/*    min-width: 150px !important;*/
/*    width: calc(100% - 20px);*/
/*}*/

/*@media screen and (max-width: 725px){*/
/*    #shopping-cart-carrousel .item {*/
/*        width: calc(100% - 20px);*/
/*    }*/
/*}*/

/*#shopping-cart-carrousel .owl-item {*/
/*    margin-right: 10px;*/
/*}*/

/*#shopping-cart-popup-carrousel .owl-nav{*/
/*    display: none;*/
/*}*/

/*!**/
/*CSS onderverdeling*/
/*Welke pagina's / globaal: Checkout iig*/
/*Is het cruciaal boven de vouw?: JA*/

/*dus ---> Intern inladen op sws checkout*/
/**!*/

.checkout-form {
    --checkout-radio-button-width: 22px;
    --checkout-radio-button-height: 22px;
    --checkout-product-image-width: 75px;
    --checkout-product-image-height: 75px;
    --checkout-grid-price-cell-width: 75px;
    --checkout-header-price-cell-width: calc(var(--checkout-grid-price-cell-width) + var(--checkout-radio-button-width));
    --checkout-payment-image-width: 65px;
    --checkout-payment-image-height: 40px;
}

.checkout-form {
    margin-block-start: var(--gutter);
}

.checkout_opc .checkout-form {
    display: grid;
    gap: var(--gutter);
}

@media screen and (max-width: 767px) {
    .checkout_opc .checkout-form {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) {
    .checkout_opc .checkout-form {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*------ Columns ------*/
.left_col_opc .checkout-customer-col,
.left_col_opc .checkout-customer-col #cpCustomer,
.mid_col_opc #cpShipping > div,
.mid_col_opc #cpPayment > div,
.right_col_opc #cpConfirm > div {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--gutter);
}

.mid_col_opc #cpPayment {
    margin-block-start: var(--gutter);
}

/*------ Steps ------*/
.checkout-form .stap-container {
    display: flex;
    align-items: center;
    gap: var(--st-spacing-xs);
}

.checkout-form .stap-container .stap-heading h2 {
    margin-bottom: 0;
}

.checkout-form .stap {
    --stap-text-color: var(--success-600);
    --stap-bg-color: var(--success-50);
    --stap-border-color: var(--success-500);
    --stap-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: var(--stap-size);
    height: var(--stap-size);
    line-height: var(--stap-size);
    font-size: var(--text-size-lg);
    background-color: var(--stap-bg-color);
    color: var(--stap-text-color);
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--stap-border-color);
}

/*------ Radio buttons ------*/
.checkout-form .checkout_payment .radio,
.checkout-form .checkout_shipping .radio,
.checkout-form .shipping_methods .radio {
    background-position: center center;
    background-image: url(/themes/11.0/images/radio/radio-off.png);
    background-repeat: no-repeat;
    width: var(--checkout-radio-button-width);
    height: var(--checkout-radio-button-height);
    cursor: pointer!important;
}

.checkout-form .checkout_payment .optionSelected .radio,
.checkout-form .checkout_shipping .optionSelected .radio,
.checkout-form .shipping_methods .optionSelected .radio,
.checkout-form .checkout_shipping .timeframes .option.active .radio {
    background-position: center center;
    background-image: url(/themes/11.0/images/radio/radio-on.png);
    background-repeat: no-repeat;
    width: var(--checkout-radio-button-width);
    height: var(--checkout-radio-button-height);
}

/*------ Active row option ------*/
.checkout-form .optionSelected {
    background-color: var(--grey-50);
    border-radius: var(--border-radius);
}

/*------ Checkout Customer ------*/
.checkout-customer-section-divider {
    --divider-line-width: 1px;
    --divider-color: var(--grey-300);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gutter);
}

.checkout-customer-section-divider p {
    color: var(--divider-color);
    font-size: var(--h4-font-size);
}

.checkout-customer-section-divider::before,
.checkout-customer-section-divider::after {
    content: "";
    border-top: var(--divider-line-width) double var(--divider-color);
    align-self: center;
}

/*--- Already customer ---*/
.checkout-form #already_account {
    display: none;
}

.checkout-form #cpCustomer .already_account {
    background-color: var(--grey-100);
}

.checkout-form .already_account {
    position: relative;
}

.checkout-form #already_account .row_checkout {
    flex-direction: column;
    width: -webkit-fill-available;
    width: -moz-available;
}

.checkout-form .checkout_page_login_input_fields input.general_input_field {
    padding: 0 .25rem;
    height: 35px;
}

.checkout-form .checkout_page_login_input_fields input {
    width: 90%;
}

.checkout-form #cpCustomer .already_account .checkout_page_password_forgotten {
    padding: 0 .5rem;
}

.checkout-form #cpCustomer .already_account .user_pass_forgotten{
    cursor: pointer;
}

.checkout-form #cpCustomer .already_account .user_pass_forgotten:hover {
    color: var(--link-color-hover);
}

.checkout-form #cpCustomer .already_account,
.checkout-form #cpCustomer .no_account {
    padding: .5rem;
}

.checkout-form #already_account .button_checkout {
    justify-content: flex-end;
}

@media screen and (min-width: 768px) {
    .checkout-form #already_account .button_checkout {
        margin-top: 0 !important;
    }
}

/*--- Direct checkout ---*/
.checkout-form .no_account {
    position: static;
}

.checkout-form .button_checkout.submitOPC {
    display: inline-flex;
}

.checkout-form .checkout_page_gender {
    width: 100%;
    padding: 1rem 0;
}

.checkout-form .checkout_page_country {
    width: 100%;
}

.checkout-form .checkout_page_country select {
    height: 35px;
    width: 96%;
}

/*--- Create account ---*/
.checkout-form #cpCustomer .optionSelected {
    padding: .5rem;
}

.checkout-form .checkout_page_checkbox {
    display: flex;
    align-items: start;
}

.checkout-form .checkout_page_password_login {
    margin-top: 1rem;
}

.checkout-form .checkout_page_password_control {
    margin-top: 1rem;
}

.checkout-form .checkout_page_password_control_bar {
    margin-top: 1rem;
    margin-left: 0;
    width: 100%;
}

.checkout-form .page_placeholder_layover img.opc_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.5rem;
    margin-top: -.5rem;
}

.checkout-form .checkout_page_input_fields input.general_input_field {
    padding: 0 .25rem;
    height: 35px;
}

.checkout-form .row_checkout {
    display: inline-flex;
    flex-wrap: wrap;
    padding: .5rem .5rem 0 .5rem;
}

.checkout-form .checkout_page_input_fields input {
    width: 90%;
    padding-bottom: 1rem;
}

#st_checkout .tep_meta_continue,
#st_checkout .tep_meta_login {
    padding: 0 !important;
}

@media screen and (max-width: 767px) {
    #st_checkout .tep_meta_continue .configuration_btn,
    #st_checkout .tep_meta_login .configuration_btn {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

#st_checkout .tep_meta_continue {
    position: relative;
    float: right;
}

#st_checkout .tep_meta_login {
    position: relative;
}

#st_checkout .tep_meta_continue a,
#st_checkout .tep_meta_general a {
    position: relative;
}

@media only screen and (max-width: 480px) {
    .checkout-form .checkout_page_input_fields {
        width: 100%;
        padding-bottom: 10px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 1200px) {
    .checkout-form .checkout_page_input_fields {
        width: 50%;
        padding-bottom: 10px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 1200px) {
    .checkout-form .checkout_page_input_fields {
        width: 50%;
        padding-bottom: 10px;
    }

    .checkout-form .row_checkout.login {
        display: block;
    }
}

@media screen and (min-width: 1200px) {
    .checkout-form .checkout_page_input_fields {
        width: 49%;
        padding-bottom: 10px;
    }
}

/*--- Create account - huisnummer en toevoeging ---*/
.checkout-form .checkout_page_huisnummer.checkout_page_input_fields .general_input_field {
    display: inline-block;
}

.checkout-form .checkout_page__input--huisnummer, .checkout_page__input--huisnummer-toevoeging {
    display: inline-block;
    width: auto;
}

.checkout-form #cpCustomer .optionSelected td {
    padding: .5rem;
    border-radius: var(--border-radius-small);
}

/*--- Shipping methods ---*/
.checkout-form .store_info_text {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.checkout-form div[data-bind="css: { optionSelected: id() == $parent.currentShippingModule() }"] {
    display: grid;
    grid-template-columns: 1fr var(--checkout-grid-price-cell-width) var(--checkout-radio-button-width);
    gap: .5rem;
    padding: .5rem;
}

.checkout-form .checkout_shipping_header {
    display: grid;
    grid-template-columns: 1fr var(--checkout-header-price-cell-width);
    gap: .5rem;
    padding: .5rem 1rem .5rem .5rem;
}

.checkout-form .checkout_shipping_heading {
    font-weight: var(--font-weight-bold);
}

#st_checkout .bezorgmethode_placeholder .checkout_shipping.opc .currency_procent {
    display: none;
}

.checkout-form .checkout_shipping .timeframes {
    padding: var(--st-spacing-xs) 0 var(--st-spacing-xs) var(--st-spacing-xs);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider ul.option-list {
    list-style: none;
    margin-inline-start: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--st-spacing-xs);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option {
    border-radius: var(--border-radius);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option:hover,
.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option:focus,
.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option.active {
    background-color: var(--grey-50);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option .content {
    display: flex;
    gap: var(--st-spacing-md);
    align-items: center;
    padding: var(--st-spacing-xs);
}

/*--- Payment methods ---*/
.checkout-form div[data-bind="css: { optionSelected: id() == $parent.currentPaymentModule() }"] {
    display: grid;
    grid-template-columns: 1fr var(--checkout-radio-button-width);
    padding: .5rem;
}

.checkout-form .checkout-payment-item {
    display: grid;
    /*grid-template-columns: var(--checkout-payment-image-width) 1fr 1fr 0;*/
    grid-template-columns: var(--checkout-payment-image-width) 1fr 0;
    gap: .5rem;
}

.checkout-form .checkout-payment-item:has(div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"]:not([style="display: none;"])) {
    grid-template-columns: var(--checkout-payment-image-width) 1fr 2fr 0;
}

.checkout-form .checkout-payment-item:has(select:empty) {
    grid-template-columns: var(--checkout-payment-image-width) 1fr 0;
}

.checkout-form .checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list {
    display: grid;
    grid-template-columns: var(--checkout-radio-button-width) 1fr;
    gap: .5rem;
}

.checkout-form .checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list .pay_issuer_image {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;

    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .5rem;
}

.checkout-form .checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list .pay_issuer_image.paynl_ideal {
    display: block;
}

.checkout-form .checkout-payment-image img {
    max-width: var(--checkout-payment-image-width);
    max-height: var(--checkout-payment-image-height);
    vertical-align: middle;
}

/*--- Totals ---*/
.checkout-form .shopping_cart_item {
    display: grid;
    grid-template-columns: var(--checkout-product-image-width) 1fr var(--checkout-product-image-width);
    padding: .5rem;
    margin-block: .5rem;
    gap: .5rem;
    background-color: var(--grey-50);
    border-radius: var(--border-radius);
}

.checkout-form .shopping_cart_image img {
    max-width: var(--checkout-product-image-width);
    max-height: var(--checkout-product-image-height);
    border-radius: var(--border-radius);
    vertical-align: middle;
}

.checkout-form .shopping_cart_price {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-end;
}

.checkout-form .cart_button.cart_aantal {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

.checkout-form .opc_cart_price {
    font-weight: var(--font-weight-bold);
}

.checkout-form .order_total {
    display: grid;
    grid-template-columns: 1fr var(--checkout-grid-price-cell-width);
    gap: .5rem;
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--grey-200);
}

.checkout-form .order_total:last-child {
    border-bottom: 0;
}

.checkout-form .order_total_confirmation .order_total div:not([data-bind="html: title"]) {
    text-align: right;
}

.checkout-form .order_total_confirmation .order_total:nth-child(3) {
    font-weight: var(--font-weight-bold);
}

/*--- Totals - Buttons ---*/
#st_checkout .checkout_totals_submit {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit.has_icon_right .st-icon {
    margin-left: 0;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit.has_icon_right div {
    margin-left: .5rem;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit div[data-bind="visible: !busyCheckingOut()"] {
    display: inline-flex;
    align-items: center;
}

/*--- Coupon ---*/
.checkout-form .coupon {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.checkout-form .coupon label {
    display: none;
}

/*--- Terms and conditions ---*/
.algemene_voorwaarden > div:not(:first-child){
    margin-top: .5rem;
}

/*--- Terms and conditions - Checkboxes ---*/
.checkout_page_checkbox,
.terms-and-conditions .opc_label {
    display: flex;
    align-items: start;
}

/*--- Retour ---*/
textarea#retour_commenting {
    width: 300px;
    height: 50px;
    min-height: 50px;
    min-width: 300px;
    max-height: 50px;
    max-width: 300px;
}

div.retour_image img {
    margin-right: .5rem;
    max-height: 75px !important;
    max-width: 75px !important;
}

.form_section.form_section--retour textarea {
    min-height: 75px !important;
    max-height: 75px !important;
    height: 75px !important;
}

/* LET OP: Ook CSS aanwezig in views/bernini/cssbuilder/dynamic4000.css.tpl zoek op: "Language Switch" */
/*-------- CSS in dynamic4000.css.tpl is gerelateerd aan language sswitch in topmenu */

.language-popup {
    display: none;
}

.language-popup.active {
    display: block;
}

.language-popup-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--st-spacing-xs);
}

.language-popup-button .language-flag {
    display: flex;
}

.language-popup .form_section label {
    font-weight: var(--font-weight-bold);
}

.language-popup-button_text {
    display: flex;
    gap: .25em;
    color: var(--header-icons-color);
}

.language-popup-button_lang-key,
.language-popup-button_valuta-key {
    text-transform: uppercase;
}

.language-popup-button_valuta-key {
    display: flex;
    gap: .25em;
}

.language-popup-button_valuta-key > span:empty {
    display: none;
}

.language-popup-close {
    cursor: pointer;
}

.language-popup .modal-content {
    max-width: var(--preferred-form-width);
}
/* Topmenu en mobiel menu weergave van valuta */
.topmenu #currencies_container,
#mobile_menu .mobile_menu_currencies {
    display: flex;
    justify-content: center;
    align-items: center;
}

.topmenu .currencies_controller select[name="currency"],
#mobile_menu .currencies_controller select[name="currency"] {
    border: none;
    cursor: pointer;
}

.topmenu .currencies_controller select[name="currency"] {
    --input-text-color: var(--topmenu-text-color);
    --input-bg-color: var(--topmenu-bg-color);
}

.topmenu #currencies_container:before,
#mobile_menu .mobile_menu_currencies:before {
    content: "";
    height: 1.5em;
    width: var(--border-width);
    background-color: var(--topmenu-text-color);
    margin-inline: var(--st-spacing-2xs);
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen - zeker weten
*/

#breadcrums,
#breadcrums a {
    font-size: var(--text-size-sm);
}

#breadcrums span {
    display: inline-block;
    /*margin-bottom: .25rem;*/
}

#breadcrums a {
    float: left;
}

#breadcrums span.raquo, #breadcrums span.space {
    float: left;
    margin: 0 .25rem;
}

div#breadcrums span.last-bread,
div#breadcrums a {
    color: var(--body-text-color);
}

div#breadcrums span.last-bread,
div#breadcrums a:hover,
div#breadcrums span.last-bread,
div#breadcrums a:focus,
div#breadcrums span.last-bread,
div#breadcrums a:active {
    color: var(--link-color-hover);
}

/*============================== BREADCRUMBS ==============================*/
@media screen and (max-width: 768px) {
    #breadcrums.breadcrumbs_mobile_inline {
        width: 100%;
        overflow: hidden;
    }

    /* 16px was te veel, geen mb kon ook wel */
    /*.breadcrumbs_mobile_inline {*/
    /*    margin-bottom: 16px;*/
    /*}*/

    #breadcrums.breadcrumbs_mobile_inline .breadcrumbs-listing {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-height: none; /* for Firefox */
        scrollbar-width: none; /* for Firefox */
    }

    #breadcrums.breadcrumbs_mobile_inline .breadcrumbs-listing::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

.cart_button.cart_spinner,
.cart_button.cart_remove,
a.configuration_btn,
.configuration_btn,
#wishlist_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-border-radius);
    border-style: solid;
    border-width: var(--btn-border-width);
    text-transform: var(--btn-text-transform);
    line-height: var(--btn-line-height);
}

.cart_button {
    cursor: pointer;
}

/*hack - voortaan gwn btn class gebruiken*/
.cart_button.cart_remove > a {
    line-height: .5 !important;
}

a.configuration_btn,
.configuration_btn,
#wishlist_button {
    font-size: var(--btn-font-size);
    padding: var(--btn-padding);
}

/* Nieuw */
a.configuration_btn i[class*="icon"],
.configuration_btn i[class*="icon"]{
    font-size: .8em;
}

.cart_button.cart_spinner,
.cart_button.cart_remove {
    padding: var(--btn-padding-block);
}


/*weggehaald - wenselijk dit per geval apart te bepalen. Met een class zoals 'btn-block' + 'btn-md-auto' ofzo  */
/*@media screen and (max-width: 767px) {*/
/*    .btn {*/
/*        width: -moz-available;*/
/*        width: -webkit-fill-available;*/
/*    }*/

/*    .back_to_listing .btn,*/
/*    .btn-wishlist.btn,*/
/*    .input-group .btn {*/
/*        width: auto;*/
/*    }*/
/*}*/



/* ---- PRIMARY ---- */
.configuration_button_productinfo, /*artikelinformatiepagina winkelwagen button*/
.configuration_button_submit { /*winkelwagen, afrekenknop button*/
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
}

.configuration_button_productinfo:hover,
.configuration_button_productinfo:focus,
.configuration_button_submit:hover,
.configuration_button_submit:focus {
    color: var(--btn-primary-text-color-hover) !important;
    background-color: var(--btn-primary-bg-color-hover);
    border-color: var(--btn-primary-border-color-hover);
}
/* ---- END PRIMARY ---- */

/* ---- PRIMARY ---- */
.configuration_button_listing_submit { /*artikeloverzicht winkelwagen button*/
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
}

.configuration_button_listing_submit:hover,
.configuration_button_listing_submit:focus {
    color: var(--btn-primary-text-color-hover);
    background-color: var(--btn-primary-bg-color-hover);
    border-color: var(--btn-primary-border-color-hover);
}
/* ---- END PRIMARY  ---- */

/* ---- SECONDARY ---- */
.configuration_btn.product_listing_quotation_button,
.configuration_button_general { /*artikeloverzicht details button*/
    color: var(--btn-secondary-text-color);
    background-color: var(--btn-secondary-bg-color);
    border-color: var(--btn-secondary-border-color);
}

.configuration_btn.product_listing_quotation_button:hover,
.configuration_btn.product_listing_quotation_button:focus,
.configuration_button_general:hover,
.configuration_button_general:focus {
    color: var(--btn-secondary-text-color-hover);
    background-color: var(--btn-secondary-bg-color-hover);
    border-color: var(--btn-secondary-border-color-hover);
}
/* ---- END SECONDARY ---- */

/* ---- TERTIARY ---- */ /*Overige knoppen*/

/* productlisting detailsknop */
.configuration_button_listing {
    color: var(--btn-tertiary-text-color);
    background-color: var(--btn-tertiary-bg-color);
    border-color: var(--btn-tertiary-border-color);
}


/* productlisting detailsknop */
.configuration_button_listing:hover,
.configuration_button_listing:focus {
    color: var(--btn-tertiary-text-color-hover);
    background-color: var(--btn-tertiary-bg-color-hover);
    border-color: var(--btn-tertiary-border-color-hover);
}

.configuration_button_general {
    padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
    margin: 0 var(--btn-onhover-underline-margin-inline);
}

/* underline tertiairy button styling */
/*.configuration_button_general:not(.btn-prev-next):before {*/
/*    display: var(--btn-onhover-underline-display);*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 0;*/
/*    height: var(--btn-onhover-underline-height);*/
/*    bottom: var(--btn-onhover-underline-bottom);*/
/*    left: 0;*/
/*    background-color: var(--btn-tertiary-text-color-hover);*/
/*    visibility: hidden;*/
/*    transition: all 0.3s ease-in-out;*/
/*    border-radius: var(--btn-onhover-underline-border-radius);*/
/*}*/

/*.configuration_button_general:not(.btn-prev-next):hover:before {*/
/*    visibility: visible;*/
/*    width: 100%;*/
/*}*/
/*---- END TERTIARY ----*/

.btn .fa-icon:before {
    --st-icon-size: var(--btn-line-height);
    --icon-align-y: bottom;
}

.btn-icon .fa-icon:before {
    min-width: 0;
}

.btn-primary .fa-icon:before {
    --icon-color: var(--btn-primary-text-color);
}

.btn-primary:hover .fa-icon:before,
.btn-primary:focus .fa-icon:before {
    --icon-color: var(--btn-primary-text-color-hover);
}

.btn-secondary .fa-icon:before {
    --icon-color: var(--btn-secondary-text-color);
}

.btn-secondary:hover .fa-icon:before,
.btn-secondary:focus .fa-icon:before {
    --icon-color: var(--btn-secondary-text-color-hover);
}

.btn-tertiary .fa-icon:before {
    --icon-color: var(--btn-tertiary-text-color);
}

.btn-tertiary:hover .fa-icon:before,
.btn-tertiary:focus .fa-icon:before {
    --icon-color: var(--btn-tertiary-text-color-hover);
}

.btn-transparent .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color);
}

.btn-transparent:hover .fa-icon:before,
.btn-transparent:focus .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color-hover);
}

/*---- START TRANSPARENT ----*/

.cart_button.cart_remove,
.cart_button.cart_remove i,
.cart_button.cart_spinner,
.btn-transparent {
    --btn-transparent-text-color: var(--grey-900);
    --btn-transparent-text-color-hover: var(--grey-500);
    --btn-transparent-bg-color: transparent;
    --btn-transparent-bg-color-hover: transparent;
    --btn-transparent-border-color: transparent;
    --btn-transparent-border-color-hover: transparent;
    --btn-transparent-danger-text-color-hover: var(--error-600);
    --btn-transparent-danger-bg-color-hover: transparent;
    --btn-transparent-danger-border-color-hover: transparent;

    color: var(--btn-transparent-text-color);
    background-color: var(--btn-transparent-bg-color);
    border-color: var(--btn-transparent-border-color);
}

.cart_button.cart_spinner:hover,
.cart_button.cart_spinner:focus,
.btn-transparent:hover,
.btn-transparent:focus {
    color: var(--btn-transparent-text-color-hover);
    background-color: var(--btn-transparent-bg-color-hover);
    border-color: var(--btn-transparent-border-color-hover);
}

.btn-icon.btn-transparent .fa-icon:before {
    padding: 0 5px;
}

.btn-transparent .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color);
}

.btn-transparent:hover .fa-icon:before,
.btn-transparent:focus .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color-hover);
}

/* DANGER BUTTONS */
.cart_button.cart_remove:hover,
.cart_button.cart_remove:focus,
.cart_button.cart_remove:hover .st-icon,
.cart_button.cart_remove:focus .st-icon {
    color: var(--btn-transparent-danger-text-color-hover);
    background-color: var(--btn-transparent-danger-bg-color-hover);
    border-color: var(--btn-transparent-danger-border-color-hover);
}

/*---- END TRANSPARENT ----*/

.configuration_btn i {
    margin-right: 4px;
}

.configuration_btn i.align-right {
    margin-right: 0;
    margin-left: 4px;
}

.wrapper.col_right:not(.col_left) #PRODUCT_INFO_PRICE_BOX #productinfo_price_buttons_right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#PRODUCT_INFO_PRICE_BOX #productinfo_price_buttons_right {
    display: inline-flex;
    justify-content: flex-end;
}

#PRODUCT_INFO_PRICE_BOX #productinfo_price_box_buttons {
    display: inline-flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.productinfo_sold_out_overzicht span.configuration_button_listing_submit,
.productinfo_sold_out_overzicht:hover span.configuration_button_listing_submit{
    color: var(--color-error) !important;
    background-color: transparent !important;
}

/*close buttons*/
.btn-close,
.close,
.closein3 {
    color: var(--grey-400);
}

.btn-close:hover,
.btn-close:focus,
.close:hover,
.closein3:hover,
.close:focus,
.closein3:focus {
    color: var(--grey-700);
    cursor: pointer;
}

.btn-close .st-icon > svg,
.close .st-icon > svg,
.closein3 .st-icon > svg {
    min-width: 1.5em;
    min-height: 1.5em;
}

/*whatsapp button*/
.whatsapp-button {
    position: fixed;
    bottom: 0;
    left: 10px;
    z-index: 4;
    filter: var(--drop-shadow-sm);
}

/*product options (product info page)*/
ul.addon_radios_ul{
    list-style-type: none;
    margin-left: 0 !important;
}
ul.addon_radios_ul .addon_product_option{
    --btn-product-options-text-color: var(--grey-800);
    --btn-product-options-border-color: var(--grey-200);
    --btn-product-options-bg-color: var(--grey-50);

    --btn-product-options-text-color-selected: var(--supporting-800);
    --btn-product-options-border-color-selected: var(--supporting-400);
    --btn-product-options-bg-color-selected: var(--supporting-200);

    --btn-product-options-text-color-inactive: var(--grey-400);
    --btn-product-options-border-color-inactive: var(--btn-product-options-border-color);
    --btn-product-options-bg-color-inactive: var(--btn-product-options-bg-color);

    --btn-product-options-border-radius: var(--btn-border-radius);
    --btn-product-options-border-width: 1px;
    --btn-product-options-padding: 1rem;

    display: inline-block;
    margin: .125rem;
    height: 0;
    line-height: 0;
    border-radius: var(--btn-product-options-border-radius);
}

ul.addon_radios_ul .addon_product_option input.hidden_radios{
    display: none;
    visibility: hidden;
}

/* Active */
ul.addon_radios_ul .addon_product_option{
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color);
    color: var(--btn-product-options-text-color);
    background-color: var(--btn-product-options-bg-color);
    padding: var(--btn-product-options-padding);
    line-height: 0;
    cursor: pointer;
    transition: 300ms all ease;
}

/* Active, selected / hover */
ul.addon_radios_ul .addon_product_option.addon_selected_option,
ul.addon_radios_ul .addon_product_option:hover,
ul.addon_radios_ul .addon_product_option:focus {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color-selected);
    color: var(--btn-product-options-text-color-selected);
    background-color: var(--btn-product-options-bg-color-selected);
    /*padding: var(--btn-product-options-padding);*/
    /*transition: 300ms all ease;*/
}


/* NOT active */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option {
    color: var(--btn-product-options-text-color-inactive);
    position: relative;
}

/* NOT active, NOT selected */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color-inactive);
    background-color: var(--btn-product-options-bg-color-inactive);
}

/* NOT active, selected or hover */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:hover,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--error-500) !important;
    background-color: var(--error-100) !important;
}

/* schuine streep bij opties die niet op voorraad zijn bijv. */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:before,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:hover:before,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option:before {
    position: absolute;
    content: "";
    left: .5rem;
    top: 50%;
    right: .5rem;
    transform:rotate(-27deg);
    border-top: var(--btn-product-options-border-width) solid;
    border-color: var(--error-500);
}




/*Disabled*/
.st-swiper-button.swiper-button-disabled,
.configuration_btn.disabled,
button:disabled,
button[disabled] {
    color: var(--btn-disabled-text-color);
    background-color: var(--btn-disabled-bg-color);
    border-color: var(--btn-disabled-border-color);
    cursor: default;
}

.st-swiper-button.swiper-button-disabled:hover,
.st-swiper-button.swiper-button-disabled:focus,
.configuration_btn.disabled:hover,
.configuration_btn.disabled:focus,
button:disabled:hover,
button:disabled:focus,
button[disabled]:hover,
button[disabled]:focus {
    color: var(--btn-disabled-text-color-hover);
    background-color: var(--btn-disabled-bg-color-hover);
    border-color: var(--btn-disabled-border-color-hover);
}

.st-swiper-button.btn-icon.swiper-button-disabled .fa-icon:before {
    --icon-color: var(--btn-disabled-text-color);
}

.btn-empty-space {
    background-color: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: 0 !important;
    cursor: auto !important;
    width: 100%;
}

/*button lists*/
.configuration_tep_meta.general {
    margin-top: var(--st-spacing-md);
}

.configuration_tep_meta.general,
.configuration_tep_meta.general .tep_meta_continue,
.configuration_tep_meta.general .tep_meta_general {
    display: inline-flex;
    width: 100%;
}

.configuration_tep_meta.general .tep_meta_general {
    justify-content: flex-start;
}

.configuration_tep_meta.general .tep_meta_continue {
    justify-content: flex-end;
}

@media screen and (max-width: 767px) {
    .configuration_tep_meta.general {
        flex-direction: column;
        gap: var(--st-spacing-xs);
    }

    .configuration_tep_meta.general .tep_meta_continue .configuration_btn,
    .configuration_tep_meta.general .tep_meta_general .configuration_btn {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

/* backorder */
.btn-backorder{
    --btn-font-size: var(--text-size-xs);
    border-radius: var(--btn-border-radius);
}
.btn-backorder,
.btn-backorder:hover,
.btn-backorder:focus {
    background-color: var(--error-50);
    border: var(--border-width) solid var(--error-700);
    color: var(--error-700);
    cursor: default;
}

/* soldout button */
.soldout-textonly {
    color: var(--error-500);
}

/*link button*/
.btn-link span.st-icon {
    color: var(--bs-btn-color);
}

.btn-link span.fa-icon:before {
    background-color: var(--bs-btn-color);
}

.btn-link:hover span.st-icon,
.btn-link:focus span.st-icon {
    color: var(--bs-btn-hover-color);
}

.btn-link:hover span.fa-icon:before,
.btn-link:focus span.fa-icon:before {
    background-color: var(--bs-btn-hover-color);
}

/*------ Button Groups ------*/
.btn-group {
    display: flex;
    gap: var(--st-spacing-xs);
    margin-block-start: var(--st-spacing-md);
    flex-wrap: wrap;
}

.card-footer .btn-group {
    margin-block-start: 0;
}

.btn-group.btn-fill .btn {
    flex: 1;
}

.btn-group.btn-fullwidth {
    flex-direction: column;
}

@media screen and (max-width: 767px) {
    .btn-group.btn-fill .btn {
        flex: unset;
    }

    .btn-group.btn-fullwidth {
        flex-direction: unset;
    }

    .btn-group.btn-fill-mobile .btn {
        flex: 1;
    }

    .btn-group.btn-fullwidth-mobile {
        flex-direction: column;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen - zeker weten. Ivm CLS
*/

a img, img {
    height: auto;
    max-width: 100%;
}

img.header-logo-image {
    width: auto;
}

/* Deze optie is niet meer actief */
/*
.product-card-slide-image.langwerpig {
    aspect-ratio: auto 5 / 6;
}
 */

.product-card-slide-image.vierkant {
    aspect-ratio: auto 1 / 1;
}

.product-card-slide-image img,
.products_gallery_row_imagecontainer img,
.categories_imagecontainer img,
#mobile_menu_logo img,
#preview img {
    width: auto;
    height: auto;
}

/* Als er binnenkort meer afbeeldingen met width en height attributes komen,
 dan kan de styling globaler en alleen op de <img> tag*/

/*!* Header (top) *!*/
/*.menu_top_content img,*/
/*    !* Header (onder menu) *!*/
/*.header_bottom img,*/
/*    !* Footer *!*/
/*.site-footer-socket img,*/
/*    !* boxes *!*/
/*.box_content img,*/
/*    !* Product descriptions *!*/
/*#PRODUCT_INFO_DESCRIPTION_BOX img,*/
/*    !* Artikelpagina's USP's *!*/
/*.price_box img,*/
/*    !* Blog post *!*/
/*#blog img,*/
/*    !* Globaal *!*/
/*.changetable img {*/
/*    height: auto;*/
/*}*/
/*
CSS onderverdeling
Welke pagina's / globaal: Overal waar de zijbalken aan staan. (en footer misschien ook)
Is het cruciaal boven de vouw?: Ja, voor de zijbalken

dus ---> Intern inladen: overal of overal waar zijbalk aan staat?
*/

[id^=column_] .box,
[id^=column_] #filterContainer {
    margin-bottom: 1.25rem; /* slightly larger compared with filter margin bottom */
}

/* TODO: Voor nu standaard dat box-headings en filter-headings een border-bottom hebben.
    In latere fase evt. optioneel maken. Goed kijken naar padding en margin van filter-headings etc. Deze zijn specifiek zo ingesteld in combinatie met border-bottom */
/* TODO: is geen filter maar andere box heading - combineren en makkelijker optie maken wel of geen border-bottom overal in sidebar */
[id^=column_]:not(:has(.category_search_box)) .box_top {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: .5rem;
}
/* TODO: is geen filter maar andere box heading - combineren en makkelijker optie maken wel of geen border-bottom overal in sidebar */
#filterContainer .filter-header {
    color: var(--body-text-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: .5rem; /* Ruimte boven eerste filter optie - is met .5rem in balans met filter optie padding */
    font-weight: var(--box-titles-font-weight);
}

[id^=column_] .box:last-child {
    margin-bottom: 0;
}

[id^=column_] .box ul li td.liicon {
    width: 20px;
}

.box ul li {
    list-style: none;
}

[id^=column_] .box ul li li {
    padding-left: 10px;
}

[id^=column_] .box_top {
    width: 100%;
    text-transform: var(--box-titles-transform);
    font-weight: var(--box-titles-font-weight);
}

[id^=column_] .box_top p {
    position: relative;
}

[id^=column_] .box_content .icon-li {
    font-size: var(--text-size-xs);
}


/*#column_left .box_content li {*/
/*    line-height: 2.2em;*/
/*}*/
[id^=column_] .box_content li {
    line-height: 1.2em;
    margin-block: .85em;
}

/* nog geen alternatieve goede styling gemaakt */
/*.box_content .icon-li {*/
/*    display: none;*/
/*}*/

[id^=column_] .active_cat {
    color: var(--link-color) !important;
    text-decoration: underline;
    font-weight: var(--font-weight-bold);
}

/*[id^=column_] .box input.input_styling {*/
/*    position: relative;*/
/*    float: left;*/
/*    height: 28px;*/
/*    width: -moz-calc(100% - 42px);*/
/*    width: -webkit-calc(100% - 42px);*/
/*    width: calc(100% - 42px);*/
/*    border-right: 0;*/
/*    border-radius: 5px 0 0 5px;*/
/*    padding: 0 5px;*/
/*}*/

[id^=column_] .box_top,
[id^=column_] .box_top a {
    color: var(--body-text-color);
}

[id^=column_] .box_content a {
    color: var(--body-text-color);
}

[id^=column_] .box_content a:hover{
    color: var(--link-color);
}

.column-widget li a {
    display: inline-flex;
    align-items: center;
}

/* Manufacturers */
/*.box_content form[name="manufacturers"]*/

/* Category Search Box */
.category_search_box {
    padding: var(--st-spacing-xs) var(--st-spacing-md) var(--st-spacing-md);
    background-color: var(--grey-200);
    border-radius: var(--border-radius);
}

.category_search_box .form-col {
    margin-block-end: var(--st-spacing-xs);
}
.box_product {
    padding: var(--gutter-half);
    text-align: center;
}

.box_product .box_product_image img {
    border-radius: var(--border-radius);
}

.box_product .box_product_name {
    padding-block: var(--st-spacing-xs);
}

.box_product .box_stars {
    display: flex;
    justify-content: center;
    padding-block: var(--st-spacing-xs);
}

.box_product .box_review-text a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    hyphens: auto;
    font-size: var(--text-size-sm);
}
/**/

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal op desktop
Is het cruciaal boven de vouw?: Alleen bij hover op de cart.

dus ---> Extern omdat het pas bij hover zichtbaar is, of intern omdat het direct zichtbaar is? -
alleen inladen als desktopheader actief is? (dus kijken naar breakpointsetting in BO)
*/


.floating_basket_wrapper {
    display: none;
    padding: 10px;
    box-shadow: var(--shadow-md);
    color: var(--grey-700); /* todo: dropdown variabelen voor bg en txt colors */
    background-color: #fff;
}

/* todo: hover transition delay bij mouse exit */

.basket_wrapper:hover .floating_basket_wrapper,
.site-header-basket-wrapper:hover .floating_basket_wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 30px;
    right: 0;
    width: 375px;
    border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
}

.basket_wrapper .loading {
    height: 100px;
}

.basket_content {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}

.load_cart_content {
    position: relative;
    display: block;
    float: right;
    height: 15px;
    right: 6px;
    width: 15px;
    top: 7px;
    background: url(../cart_content_loader.gif) no-repeat !important;
}

.basket_content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

.basket_content::-webkit-scrollbar {
    width: 4px;
    background-color: inherit;
}

.basket_content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #777;
}

.basket_content table tr td {
    border-bottom: 1px dotted #fff;
}

.basket_content table tr td.product_image_cell {
    padding: 5px 0;
    text-align: center;
    width: 75px;
    height: 75px;
}

.basket_content table tr td.product_image_cell .product_image {
    position: relative;
    height: 75px;
}

.basket_content table tr td.product_name_cell {
    padding: 0 5px;
}

.basket_content table tr td.product_name_cell p:first-of-type,
.basket_content table tr td.product_name_cell a {
    color: var(--body-text-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.basket_content table tr:hover td.product_name_cell,
.basket_content table tr:hover td.product_name_cell a,
.basket_content table tr:hover td.product_name_cell span,
.basket_content table tr:hover td.product_name_cell p {
    color: var(--body-text-color);
}

.basket_content table tr td.product_price_cell {
    width: 30px;
    text-align: center;
}

.basket_content table tr td.product_price_cell:hover {
    color: var(--color-error);
}

.floating_basket_total {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-top: .5rem;
}

.floating_basket_total a {
    position: relative;
    margin-left: auto;
}

.floating_basket_total h4,
.floating_basket_total .floating_basket_total_price {
    position: relative;
    color: var(--price-text-color);
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
}

span.basket_content_product_name {
    font-weight: var(--font-weight-bold);
}

.basket_content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

table {
    --table-padding-block: .5rem;
    --table-padding-inline: .5rem;
}

table tr td.col_25 {
    width: 25px;
}

table tr td.col_35 {
    width: 35px;
}

table tr td.col_50 {
    width: 50px;
}

table tr td.col_75 {
    width: 75px;
}

table tr td.col_100 {
    width: 100px;
}

table tr td.col_125 {
    width: 125px;
}

table tr td.col_150 {
    width: 150px;
}

table tr td.col_175 {
    width: 175px;
}

table tr td.col_200 {
    width: 200px;
}

table tr td.col_225 {
    width: 225px;
}

table tr td.col_250 {
    width: 250px;
}

.wrapper.content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: calc(100% - var(--table-padding-inline));
}

tr.onHover td {
    transition: background .5s ease 0s;
}

.table-section table tr td:last-child, .table-section table tr th:last-child {
    padding-right: 0;
}

table tr:first-child td, table tr:first-child th {
    border-top: 0;
}

table.top {
    margin-top: 10px;
}

div table.no-padding tr td, div table.no-padding tr th {
    padding-left: 0;
}

div table.no-border tr td, div table.no-border tr th, table.price_box td {
    border: 0;
}

table.border {
    border: 1px solid #d9d9d9;
}

tr.required td {
    color: #fff;
    background: red;
}

table.inner_image tr {
    vertical-align: bottom;
}

table.inner_image tr td {
    height: 75px;
    width: 75px;
}

table.inner_image tr td img {
    max-height: 75px;
    max-width: 75px;
}


/* conflicteert met ckeditor tabel styling */
/*.table {*/
/*    display: table;*/
/*}*/

/*.tableHeading {*/
/*    display: table-header-group;*/
/*}*/

/*.tableBody {*/
/*    display: table-row-group;*/
/*}*/

/*.tableRow {*/
/*    display: table-row;*/
/*}*/

/*.divTableHead, .tableCell {*/
/*    display: table-cell;*/
/*}*/

/*.tableFoot {*/
/*    display: table-footer-group;*/
/*}*/

/*.table img {*/
/*    vertical-align: middle;*/
/*}*/

/*
CSS onderverdeling
Welke pagina's / globaal: Listings: Zoekresultaten, PLP, Blog
Is het cruciaal boven de vouw?: Ja, bij PLP

dus ---> Intern inladen (?) - zo ja, waar allemaal?
*/

.sortby {
    display: flex;
    align-items: center;
}

.sortby.product_listing_sorting {
    margin-block-start: var(--gutter);
    justify-content: flex-end;
}

.sortby.product_listing_pagination {
    margin-top: var(--gutter);
}

.product_listing_sorting-total_articles {
    border-right: 1px solid var(--border-color);
    padding-inline-end: .75rem;
    margin-inline-end: .75rem;
}

.total_articles-content p span {
    font-weight: var(--font-weight-bold);
}

.sortby.product_listing_pagination {
    justify-content: center;
}

/* PAGINATION BUTTONS */
.pagination_buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-pagination {
    --btn-pagination-border-radius: var(--border-radius-small);
    --btn-pagination-font-weight: var(--btn-font-weight);
    --btn-pagination-padding-block: .5rem;
    --btn-pagination-padding-inline: 1rem;
    --btn-pagination-margin-block-start: .5rem;
    --btn-pagination-margin-inline-start: .25rem;
    --btn-pagination-margin-inline-end: 0;
    --btn-pagination-next-prev-padding-inline: .75rem;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-start: var(--btn-pagination-margin-block-start);
    margin-inline-start: var(--btn-pagination-margin-inline-start);
    margin-inline-end: var(--btn-pagination-margin-inline-end);
    padding: var(--btn-pagination-padding-block) var(--btn-pagination-padding-inline);
    border-radius: var(--btn-pagination-border-radius);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-pagination-font-weight);
    cursor: pointer;
}

.btn-pagination-next,
.btn-pagination-previous {
    padding-inline: var(--btn-pagination-next-prev-padding-inline);
}

.btn-pagination {
    color: var(--btn-pagination-text-color);
    background-color: var(--btn-pagination-bg-color);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color);
}

.btn-pagination:hover,
.btn-pagination:focus {
    color: var(--btn-pagination-text-color-hover);
    background-color: var(--btn-pagination-bg-color-hover);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color-hover);
}

.btn-pagination-active,
.btn-pagination-active:hover,
.btn-pagination-active:focus {
    color: var(--btn-pagination-text-color-active);
    background-color: var(--btn-pagination-bg-color-active);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color-active);
}

.btn-pagination-dots,
.btn-pagination-dots:hover,
.btn-pagination-dots:focus {
    color: var(--body-text-color);
    background-color: var(--webshop-background-color);
    border-color: var(--webshop-background-color);
}

.btn-pagination-disabled {
    color: var(--btn-disabled-text-color);
    background-color: var(--btn-disabled-bg-color);
    border-color: var(--btn-disabled-border-color);
    cursor: default;
}

.btn-pagination-disabled:hover,
.btn-pagination-disabled:focus {
    color: var(--btn-disabled-text-color-hover);
    background-color: var(--btn-disabled-bg-color-hover);
    border-color: var(--btn-disabled-border-color-hover);
}

/* SORTING */
.product_sorting-select input.submit-btn {
    display: none;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Listings bij setting. En altijd op PDP
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen?
*/

:root {
    --stars-color: #ffb400;
}

.rating_stars {
    display: inline-flex;
    align-items: center;
}

.rating_stars .st-icon {
    color: var(--stars-color);
}

.rating_stars .st-icon svg {
    --st-icon-size: var(--text-size-sm);
    --st-icon-min-size: var(--st-icon-size);
}

.rating_stars .fa-icon:before {
    --icon-color: var(--stars-color);
}

.rating_stars .st-icon:not(:last-of-type),
.rating_stars .fa-icon:not(:last-of-type) {
    --stars-spacing: .125rem;
    margin-right: var(--stars-spacing);
}



/* Alleen de daadwerkelijke rating stars geel maken */
.rating_stars .st-icon.st-icon-star-empty {
    color: var(--grey-300);
}

.rating_stars .fa-icon.fa-icon-star-empty:before {
    --icon-color: var(--grey-300);
}
/*
CSS onderverdeling
Welke pagina's / globaal: Listings bij setting. En altijd bij PDP
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

.normalPrice,
.specialPrice {
    --price-font-weight: var(--font-weight-bold);

    font-weight: var(--price-font-weight);
}

.oldPrice {
    --old-price-font-weight: var(--font-weight-normal);

    color: var(--grey-500);
    font-weight: var(--old-price-font-weight);
}

.specialPrice {
    color: var(--action-price-text-color);
}

.normalPrice {
    color: var(--price-text-color);
}

.strikethrough {
    --strikethrough-border-width: 2px;

    position: relative;
}

.strikethrough:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: var(--strikethrough-border-width) solid;
    border-color: inherit;
    border-radius: var(--border-radius-small);
    transform:rotate(-5deg);
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Denk het niet? Tooltip pas zichtbaar na een user-interaction

dus ---> Extern en nonrenderblocking inladen
*/

.tooltipster-light {
    border-radius: 5px;
    border: 1px solid #cccccc;
    background: #ededed;
    color: #666666;
}
.tooltipster-light .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 10px;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Homepage als slider aan staat, en bij merkenslider. Winkelwagenextended popup.
Is het cruciaal boven de vouw?: JA bij homepage slider wel.

dus ---> Als homepage slider aan staat sowieso intern. Wat bij merkenslider? Wat bij WWextended?

Wat is handig, de ene keer wel intern en de andere keer niet?
Of als je het ene doet omdat homepage slider aan staat dat je het dan overal intern houd als WWExtended aan hebt staan?
*/




/* Inner dot */
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot span {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    margin: 4px;
    background-color: transparent;
    border: 1px solid var(--supporting-500);
    border-radius: 100px;
}

/* inner dot - Active and hover color */
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot.active span,
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--supporting-500);
}

/* Outer button */
button.owl-dot {
    border-radius: 100px;
    transition-duration: .2s;
    transition-property: border, background-color;
}

.productinfo_imagecontainer .owl-theme .owl-nav {
    margin-top: unset;
}

.owl-prev path,
.owl-next path {
    stroke: var(--grey-400) !important;
}

.owl-prev.disabled path,
.owl-next.disabled path {
    stroke: var(--grey-300) !important;
}

#owl-carousel-thumb .owl-item.current .owl-thumb {
    border: 1px solid var(--supporting-500) !important;
}

div#owl-carousel-thumb div.owl-stage div.owl-item {
    border: none !important;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ????
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp {
    padding:0;
    margin:0;
    border:0;
    outline:none;
    vertical-align:top;
}

.fancybox-wrap {
    position:absolute;
    top:0;
    left:0;
    z-index:8020;
}

.fancybox-skin {
    position:relative;
    background:#f9f9f9;
    color:#444;
    text-shadow:none;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.fancybox-opened {
    z-index:8030;
}

.fancybox-opened .fancybox-skin {
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.fancybox-outer,.fancybox-inner {
    position:relative;
}

.fancybox-inner {
    overflow:hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling:touch;
}

.fancybox-error {
    color:#444;
    font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin:0;
    padding:15px;
    white-space:nowrap;
}

.fancybox-image,.fancybox-iframe {
    display:block;
    width:100%;
    height:100%;
}

.fancybox-image {
    max-width:100%;
    max-height:100%;
}

#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span {
    background-image:url(/themes/11.0/images/fancybox/fancybox_sprite.png);
}

#fancybox-loading {
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-22px;
    margin-left:-22px;
    background-position:0 -108px;
    opacity:.8;
    cursor:pointer;
    z-index:8060;
}

#fancybox-loading div {
    width:44px;
    height:44px;
    background:url(/themes/11.0/images/fancybox/fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
    position:absolute;
    top:-18px;
    right:-18px;
    width:36px;
    height:36px;
    cursor:pointer;
    z-index:8040;
}

.fancybox-nav {
    position:absolute;
    top:0;
    width:40%;
    height:100%;
    cursor:pointer;
    text-decoration:none;
    background:transparent url(/themes/11.0/images/fancybox/blank.gif);
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    z-index:8040;
}

.fancybox-prev {
    left:0;
}

.fancybox-next {
    right:0;
}

.fancybox-nav span {
    position:absolute;
    top:50%;
    width:36px;
    height:34px;
    margin-top:-18px;
    cursor:pointer;
    z-index:8040;
    visibility:hidden;
}

.fancybox-prev span {
    left:10px;
    background-position:0 -36px;
}

.fancybox-next span {
    right:10px;
    background-position:0 -72px;
}

.fancybox-nav:hover span {
    visibility:visible;
}

.fancybox-tmp {
    position:absolute;
    top:-99999px;
    left:-99999px;
    visibility:hidden;
    max-width:99999px;
    max-height:99999px;
    overflow:visible!important;
}

.fancybox-lock {
    overflow:hidden!important;
    width:auto;
}

.fancybox-lock body {
    overflow:hidden!important;
}

.fancybox-lock-test {
    overflow-y:hidden!important;
}

.fancybox-overlay {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    display:none;
    z-index:8010;
    background:url(/themes/11.0/images/fancybox/fancybox_overlay.png);
}

.fancybox-overlay-fixed {
    position:fixed;
    bottom:0;
    right:0;
}

.fancybox-lock .fancybox-overlay {
    overflow:auto;
    overflow-y:scroll;
}

.fancybox-title {
    visibility:hidden;
    font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position:relative;
    text-shadow:none;
    z-index:8050;
}

.fancybox-opened .fancybox-title {
    visibility:visible;
}

.fancybox-title-float-wrap {
    position:absolute;
    bottom:0;
    right:50%;
    margin-bottom:-35px;
    z-index:8050;
    text-align:center;
}

.fancybox-title-float-wrap .child {
    display:inline-block;
    margin-right:-100%;
    padding:2px 20px;
    background:transparent;
    background:rgba(0,0,0,0.8);
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    text-shadow:0 1px 2px #222;
    color:#fff;
    font-weight:700;
    line-height:24px;
    white-space:nowrap;
}

.fancybox-title-outside-wrap {
    position:relative;
    margin-top:10px;
    color:#fff;
}

.fancybox-title-inside-wrap {
    padding-top:10px;
}

.fancybox-title-over-wrap {
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    padding:10px;
    background:#000;
    background:rgba(0,0,0,0.8);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {
    #fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span {
        background-image:url(/themes/11.0/images/fancybox/fancybox_sprite@2x.png);
        background-size:44px 152px;
    }

    #fancybox-loading div {
        background-image:url(/themes/11.0/images/fancybox/fancybox_loading@2x.gif);
        background-size:24px 24px;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Zijbalken iig, en checkout
Is het cruciaal boven de vouw?: Ja (?)

dus ---> Intern inladen
*/


.has-js .label_radio {
    background: url("/themes/11.0/images/radio/radio-off.png") no-repeat;
}

.has-js .label_check {
    background: url("/themes/11.0/images/checkbox/check-off.png") no-repeat;
}

.has-js label.c_on {
    background: url("/themes/11.0/images/checkbox/check-on.png") no-repeat;
}

.has-js label.r_on {
    background: url("/themes/11.0/images/radio/radio-on.png") no-repeat;
}

.has-js .label_check input,
.has-js .label_radio input {
    position: absolute;
    left: -9999px;
}

label.label_check,
label.label_check span.checkboxtext,
label.label_radio,
label.label_radio span.checkboxtext {
    position: relative;
    display: inline-block;
}

label.label_check.checkbox_only,
label.label_radio.radio_only {
    margin-left: 5px;
    margin-right: 5px;
    width: 21px;
}

label.label_radio {
    /*top: 5px;*/
    margin-right: 20px;
    cursor: pointer;
}

label.no_margin_right {
    margin-right: 0;
}

.input-radio-container {
    margin-bottom: .5rem;
}

/*label.label_radio span.checkboxtext {*/
/*    top: -7px;*/
/*}*/

label.label_check {
    /*top: 5px;*/
    cursor: pointer;
}

/*label.label_check span.checkboxtext {*/
/*    top: -3px;*/
/*}*/

label.label_check:last-child,
label.label_radio:last-child {
    margin-bottom: 0;
}

label.label_check.error {
    border: 1px solid red;
}

label.label_radio.r_disabled {
    opacity: 0.5;
}
/*color swatches*/
.filter-color[style*="background-color"],
#productinfo_attributes .addon_product_option[style*="background-color"] {
    --color-swatches-light-shadow: rgba(0, 0, 0, .05);
    --color-swatches-dark-shadow: rgba(255, 255, 255, .1);
    --color-swatches-bg: linear-gradient(to right, var(--color-swatches-light-shadow) 0, var(--color-swatches-light-shadow) 50%, rgba(0, 0, 0, .0) 50%, rgba(0, 0, 0, .0) 100%);
    --color-swatches-bg-dark-swatch: linear-gradient(to right, var(--color-swatches-dark-shadow) 0, var(--color-swatches-dark-shadow) 50%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .0) 100%);
    --color-swatches-border-color: var(--grey-300);
    --color-swatches-border-color-selected: var(--grey-50);
    --color-swatches-border-width: 2px;
    --color-swatches-outline: 1px;
    --color-swatches-width: 20px;
    --color-swatches-border-radius: var(--border-radius-pill);

    position: relative;
    border-radius: var(--color-swatches-border-radius);
    /*border: var(--color-swatches-border-width) solid var(--color-swatches-border-color);*/
    /*outline: var(--color-swatches-outline) solid var(--color-swatches-border-color);*/
    box-shadow:
            0 0 0 var(--color-swatches-border-width) var(--color-swatches-border-color),
            0 0 0 calc(var(--color-swatches-outline) + var(--color-swatches-border-width)) var(--color-swatches-border-color);
}

.filter-color[style*="background-color"]::before,
#productinfo_attributes .addon_product_option[style*="background-color"]::before {
    --color-swatches-border-width-total: calc(var(--color-swatches-border-width) * 2);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-swatches-bg);
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
    max-height: calc(var(--color-swatches-width) * 2 - var(--color-swatches-border-width-total) - 1px);
    border-radius: var(--color-swatches-border-radius);
}

.filter-color[style*="#000000"]::before,
#productinfo_attributes .addon_product_option[style*="#000000"]::before {
    --color-swatches-bg: var(--color-swatches-bg-dark-swatch);
}

.filter-color[style*="background-color"] .label_check.c_on:after,
#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option:after {
    position: absolute;
    content: var(--color-swatches-check-icon);
    width: var(--color-swatches-width);
}

/* filter colors */
.filter-color[style*="background-color"] .label_check {
    padding-left: 34px;
    height: 20.5px;
}

.filter-color[style*="background-color"] .label_check,
.filter-color[style*="background-color"] .label_check.c_on {
    background-image: none;
}

.filter-color[style*="background-color"] .checkboxtext.filter_name {
    display: none;
}

.filter-color[style*="background-color"] {
    padding-block: .25rem;
    width: fit-content;
    width: -moz-fit-content;
}

.filter-color[style*="background-color"]:has( > .label_check.c_on),
.filter-color[style*="background-color"]:hover,
.filter-color[style*="background-color"]:focus,
#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option,
#productinfo_attributes .addon_product_option[style*="background-color"]:hover,
#productinfo_attributes .addon_product_option[style*="background-color"]:focus {
    box-shadow:
            0 0 0 var(--color-swatches-border-width) var(--color-swatches-border-color-selected),
            0 0 0 calc(var(--color-swatches-outline) + var(--color-swatches-border-width)) var(--color-swatches-border-color);
    /*border-color: var(--color-swatches-border-color-selected);*/
}

.filter-color[style*="background-color"] .label_check.c_on:after {
    top: .125rem;
    left: .5rem;
}

/*PDP product options*/
/*#productinfo_attributes .addon_product_option[style*="background-color"] {*/
/*    box-shadow: none;*/
/*}*/

#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option,
#productinfo_attributes .addon_product_option[style*="background-color"]:hover,
#productinfo_attributes .addon_product_option[style*="background-color"]:focus {
    position: relative;
    /*border: var(--color-swatches-border-width) solid var(--color-swatches-border-color-selected);*/
}

#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option:after {
    top: .35rem;
    left: .45rem;
}

/* If there is also a normal checkbox between the swatches */
.filter-color-swatches.swatches-with-normal-checkboxes > li:not(.filter-color) {
    flex-basis: 100%;
    order: -1;
    padding-block-end: 0;
}

.filter-color-swatches.swatches-with-normal-checkboxes:not(:has(li.filter-color)) {
    display: block;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Sowieso Checkout, waar nog meer?
Is het cruciaal boven de vouw?: Nee

dus ---> Extern en non-renderblocking inladen, altijd of alleen op bepaalde pagina's?
*/

#ui-datepicker-div {
    background: #f5f5f5;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0;
}

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

.ui-datepicker td a, .ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

#ui-datepicker-div .ui-icon {
    width: 16px;
    height: 16px;
    text-indent: -9999px;
}

#ui-datepicker-div .ui-icon, #ui-datepicker-div .ui-state-active .ui-icon, #ui-datepicker-div .ui-state-default .ui-icon, #ui-datepicker-div .ui-state-error .ui-icon, #ui-datepicker-div .ui-state-error-text .ui-icon, #ui-datepicker-div .ui-state-focus .ui-icon, #ui-datepicker-div .ui-state-highlight .ui-icon, #ui-datepicker-div .ui-state-hover .ui-icon, #ui-datepicker-div .ui-widget-content .ui-icon, #ui-datepicker-div .ui-widget-header .ui-icon {
    background-image: url(/themes/11.0/images/jqueryui/ui-icons_222222_256x240.png);
}

#ui-datepicker-div .ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

#ui-datepicker-div .ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Nee

dus ---> Extern en non-renderblocking inladen. Want modal is pas zichtbaar na user-interaction
*/


@media screen and (max-width: 991px) {
    .modal-content {
        width: 80% !important;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 10011;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    background-color: var(--webshop-background-color);
    padding: 1rem 1.5rem;
    /*margin: 5% auto;*/
    border-radius: var(--border-radius-small);
    color: var(--body-text-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.modal-title {
    margin-bottom: 0 !important;
}

.modal-body ul {
    margin-block: .75rem;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Is dit de prijs range slider?
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/


div.ui-slider .ui-state-default, div.ui-slider .ui-widget-content div.ui-slider .ui-state-default {
    border: 1px solid var(--grey-400);
    background: var(--grey-400);
    font-weight: 700;
    color: #1c94c4;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
}

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    background-color: var(--grey-100);
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-inner-xs);
}

.ui-slider-horizontal {
    border: 1px solid var(--grey-100);
    height: .8em;
    margin: 0 8px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
    cursor: pointer;
}

.ui-slider-horizontal .ui-slider-range {
    height: 100%;
    top: 0;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ??? Sowieso op PDP als social-share buttons onder productimage aan staan. Nog op andere plekken?
Is het cruciaal boven de vouw?: Ja, als setting aan staat.

dus ---> ... inladen
*/


/*.js-social-popup {*/
/*    width: 53px;*/
/*}*/


.socialshare-button-container {
    display: flex;
    gap: .5rem;
}

.btn-socialshare--facebook {
    --st-icon-color: var(--color-facebook);
    --bs-btn-hover-border-color: var(--color-facebook);
}
.btn-socialshare--twitter {
    --st-icon-color: var(--color-twitter);
    --bs-btn-hover-border-color: var(--color-twitter);
}
.btn-socialshare--pinterest {
    --st-icon-color: var(--color-pinterest);
    --bs-btn-hover-border-color: var(--color-pinterest);
}

.socialshare-count {
    display: none;
}

/* Wordt gebruikt in de Back in Stock Add-on, en ook voor Maatwerk paperform oplossingen. */
/* Kan ook elders gebruikt worden los. */
/*
 Voorbeeld van gebruik:

 .st-loading-content:has(iframe) .st-loader {
    display: none;
}

*/

.st-loader {
    --st-loader-size: 50px;
    --st-loader-border-width: 8px;
    border: var(--st-loader-border-width) solid var(--grey-300);
    border-top: var(--st-loader-border-width) solid var(--grey-700);
    border-radius: 50%;
    width: var(--st-loader-size);
    height: var(--st-loader-size);
    margin: auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Alleen als promotiebanner is geactiveerd
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen als promotiebanner aan staat
*/

#wrapper_promotion_banner {
    background-color: transparent;
}

#container_promotion_banner {
    padding: 20px;
}

a#anchor_promotion_banner {
    padding: 5px;
    text-decoration: none;
    display: block;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.categories {
    --categories-name-padding-block: .5rem;
    --categories-name-padding-inline: .5rem;
    --categorie-name-link-opacity-hover: .8;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);

    position: relative;
}

.categories_row:hover {
    box-shadow: var(--card-shadow-hover);
}

.categories_row {
    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
}

.categories_row:hover {
    border: var(--card-border-hover);
}

.categories_name_heading {
    display: flex;
    align-items: var(--category-titles-align-items);

    padding-block: var(--categories-name-padding-block);
    padding-inline: var(--categories-name-padding-inline);

    font-size: var(--text-size-md) !important;
    margin-bottom: 0 !important;
    container: categories-name-heading / inline-size;
    word-break: break-word;
}

@container categories-name-heading (max-width: 9rem) {
    .categories_name_link {
        font-size: var(--text-size-sm) !important;
    }
}

.categories_name_link {
    color: var(--body-text-color);
    width: -webkit-fill-available;
    width: -moz-available;
}

.categories_name_link:hover,
.categories_name_link:focus,
.categories_row:hover .categories_name_link {
    color: var(--body-text-color);
    opacity: var(--categorie-name-link-opacity-hover);
}

.categories_imagecontainer {
    position: relative;
    text-align: center;
}

.categories_imagecontainer img {
    border-radius: var(--border-radius);
}

.categories_imagecontainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    max-width: 100%;
    max-height: 100%;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/


/* --------------------------------------- */
/* ------- PRODUCT LISTING GENERAL ------- */
/* --------------------------------------- */

.products_gallery_row,
.products_lijst_row {
    position: relative;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.products_gallery_row,
.products_lijst_row {
    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--border-radius);
}

.products_lijst_row:hover,
.products_lijst_row:focus,
.products_gallery_row:hover,
.products_gallery_row:focus {
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

.products_lijst_row:hover .products_lijst_row_name a,
.products_lijst_row:focus .products_lijst_row_name a,
.products_gallery_row:hover .products_gallery_row_name a,
.products_gallery_row:focus .products_gallery_row_name a {
    color: var(--link-color-hover);
}

.products_gallery_row_buttons,
.products_lijst_row_buttons,
.products_gallery_row_compare,
.products_lijst_row_compare {
    margin-top: var(--gutter-half);
}




/* TODO: deze in gallery en list plaatsen */
/*.products_gallery_row_price,*/
/*.products_gallery_row_model,*/
/*.products_gallery_row_levertijden,*/
/*.products_gallery_row_description,*/
/*.products_gallery_row_meebestellen,*/
/*.products_lijst_row_price,*/
/*.products_lijst_row_model,*/
/*.products_lijst_row_levertijden,*/
/*.products_lijst_row_description,*/
/*.products_lijst_row_meebestellen {*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.products_gallery_row_price,*/
/*.products_lijst_row_price {*/
/*    margin-top: 1rem;*/
/*}*/

/*.products_gallery_row_review_stars,*/
/*.products_lijst_row_review_stars {*/
/*    margin-bottom: 1rem;*/
/*}*/




/* PRODUCT IMAGE */
.products_lijst_row_imagecontainer,
.products_gallery_row_imagecontainer {
    position: relative;
}

.products_lijst_row_imagecontainer.vierkant,
.products_gallery_row_imagecontainer.vierkant {
    aspect-ratio: 1 / 1;
}

/* todo: relatieve border-radius obv calc() rekening houdende met buitenste border-radius */
.products_lijst_row_imagecontainer img,
.products_gallery_row_imagecontainer img {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

div.box_product_image img.subimage1,
div.box_product_image img.subimage2,
div.box_product_image img.subimage_normal,
div.products_gallery_row_imagecontainer img,
div.products_lijst_row_imagecontainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
    max-width: 100%;
    max-height: 100%;
}

div.product_image img {
    max-height: 100%;
    max-width: 100%;
}

div#preview img {
    max-width: 100%;
}

/* PRODUCT NAME */
.products_name_heading {
    --product-name-heading-font-weight: var(--font-weight-bold);

    font-family: var(--body-font-stack);
    color: var(--body-text-color);
    font-weight: var(--product-name-heading-font-weight);
}

/* MANUFACTURER */
.products_lijst_row_manufacturer p,
.products_gallery_row_manufacturer p {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

/* PRICE */
.products_price .normalPrice,
.products_price .specialPrice,
.custom_price_mtw_listing .normalPrice,
.custom_price_mtw_listing .specialPrice {
    font-size: var(--text-size-xl);
}

/* Aangezien de lege div ruimte innam comment ik dit nu. Bij 20 shops heb ik getest. Bij veel gaat de prijs beter staan zonder min-height. /Andert */
/* DIT HIERONDER MOET ZELFDE ZIJN ALS FONT-SIZE WAARDE VAN DE PRIJS */
/* .products_gallery_row_price:not(:has(.normalPrice:empty)) */
/*.products_gallery_row_price {*/
/*    min-height: var(--actual-text-xl-line-height);*/
/*}*/

.products_price .oldPrice,
.custom_price_mtw_listing .oldPrice {
    font-size: var(--text-size-sm);
}

/* REVIEW STARS */
.products_review_stars {
    display: inline-flex;
}

/* ARTICLENUMBER */
.product_listing_productmodel {
    font-size: var(--text-size-sm);
    font-style: normal;
}

/* DESCRIPTION */
.products_description p {
    font-size: var(--text-size-sm);
}

.products_lijst_row_description p,
.products_gallery_row_description p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    /* number of lines to show */
    -webkit-line-clamp: var(--number-of-lines-plp-description);
    line-clamp: var(--number-of-lines-plp-description);

    /*word-wrap: break-word;*/
    /*-webkit-hyphens: auto;*/
    /*-ms-hyphens: auto;*/
    /*hyphens: auto;*/
}

 /*BUTTONS*/
/*.products_lijst_row .configuration_btn,*/
/*.products_gallery_row .configuration_btn {*/
/*    min-height: 20px;*/
/*}*/

/*.productcatalog_backorder,*/
/*.product_listing_sold_out_button .configuration_btn {*/
/*    min-height: 26px;*/
/*    line-height: 1.1em;*/
/*}*/

.product_listing_quotation_button,
.products_lijst_row_buttons,
.products_gallery_row_buttons,
.product_listing_buttons,
.buttons_shoppingcart {
    gap: var(--gutter-half);
}

/*.products_lijst_row input[name="product_cart_quantity"],*/
/*.products_gallery_row input[name="product_cart_quantity"],*/
.products_lijst_row select[name="product_cart_quantity"],
.products_gallery_row select[name="product_cart_quantity"] {
    width: 80px !important;
    padding-inline-end: 0;
    padding-block: 0;
}

@media screen and (max-width: 1399px) {
    .products_gallery_row input[name="product_cart_quantity"],
    .products_gallery_row select[name="product_cart_quantity"] {
        width: 50px !important;
    }
}

@media screen and (max-width: 767px) {
    .products_gallery_row input[name="product_cart_quantity"],
    .products_gallery_row select[name="product_cart_quantity"] {
        /*width: 50px !important;*/
        /*padding-left: .75rem;*/
        background-position: right .25rem center;
    }
}

/* SHOW SIZE */
div.show_sizes_onhover {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 9999;
    padding-left: .25rem;
    padding-right: .25rem;
    width: -moz-available;
    width: -webkit-fill-available;
    background: rgba(255, 255, 255, .9);
    font-size: var(--text-size-sm);
    color: var(--grey-500);
    text-align: center;
    overflow-y: auto;
    max-height: 90%;
}

span.show_sizes_onhover_title {
    display: inline-block;
    padding-top: .25rem;
    font-weight: 700;
    color: var(--grey-700);
}

/**
 * Price label (https://shoptrader.atlassian.net/browse/PLAT-6609)
 */
.products_price,
.productlisting_price_label {
    position: relative;
    clear: both;
    width: 100%;
}

/* CONTAINER QUERY */
/* Dit werd gebruikt o de shopping cart buttons te laten wrappen, maar dat gebeurt nu altijd automatisch, als het nodig is. */
/*
.products_gallery_row .buttons_shoppingcart a {
    container: shopping-card-button / inline-size;
}

@container shopping-card-button (min-width: 140px) {
    .buttons_shoppingcart {
        flex-wrap: wrap;
    }
}
*/

/* Back in Stock button in PLP: ervoor zorgen dat de tekst zo lang mogelijk op 1 lijn blijft staan */
.products_gallery_row .backinstock-button {
    container: back-in-stock-btn / inline-size;
}

@container back-in-stock-btn (max-width: 236px) {
    .backinstock-button span:not(.st-icon) {
        font-size: var(--text-size-xs);
    }

    .backinstock-button {
        padding-inline: .5rem;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/


/*----------------------------------------------*/
/*------------------ GLOBAL --------------------*/
/*----------------------------------------------*/
.col4.order-status-row-price,
.col6.order-status-row-totals {
    text-align: right;
}

.col7.order-status-row-icons {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--actual-text-md-line-height);
}

@media screen and (min-width: 768px) {
    .col7.order-status-row-icons {
        width: 100%;
    }
}

/*----------------------------------------------*/
/*----------------- ACCOUNT --------------------*/
/*----------------------------------------------*/
.account-table .col2 {
    width: 75px;
}

.account-table .col3 {
    text-align: center;
    width: 100px;
}

.return-request-open {
    color: var(--error-500);
}

.return-request-almost-done {
    color: var(--warning-500);
}

.return-request-done {
    color: var(--success-500);
}

@media screen and (max-width: 767px) {
    .account-overview-details {
        overflow-x: scroll;
    }

    .col7.order-status-row-icons {
        min-width: 75px;
    }
}

.account-list-information-section {
    --account-list-section-margin-block-start: 1.5rem;
    margin-top: var(--account-list-section-margin-block-start);
}

.account-list-information-section a {
    color: var(--body-text-color);
}

.account-list-information-section.prose a {
    --st-prose-link-text-decoration: none;
}

.account-list-information-section a:hover,
.account-list-information-section a:focus {
    color: var(--link-color-hover);
}

.mijn_account ul {
    list-style: none;
    margin-left: 0 !important;
}

.mijn_account a {
    display: inline-flex;
    align-items: center;
}

/*----------------------------------------------*/
/*--------------- EDIT ACCOUNT -----------------*/
/*----------------------------------------------*/
/* Bij het maken van nieuwe .tpl's dit doen zoals bij create_account.php met bootstrap etc. */
.account_edit td.col1 {
    margin-top: 1rem;
}

/*----------------------------------------------*/
/*--------------- FORGET PASSWORD --------------*/
/*----------------------------------------------*/
.password_forgotten_form {
    margin-top: 1rem;
}

/*----------------------------------------------*/
/*--------------- CREATE ACCOUNT --------------*/
/*----------------------------------------------*/
.password-help {
    display: inline-flex;
}

/*----------------------------------------------*/
/*--------------- ACCOUNT OPTIONS --------------*/
/*----------------------------------------------*/
.recaptcha-security-image {
    display: flex;
    flex-direction: column;
}

.recaptcha-security-image img#captcha {
    max-width: 50%;
    margin-top: .5rem;
}

a.user_pass_forgotten,
a.no-security-code {
    font-size: var(--text-size-sm);
}

a.user_pass_forgotten:hover,
a.no-security-code:hover {
    color: var(--link-color-hover);
}

/*----------------------------------------------*/
/*--------------- RETURN REQUEST ---------------*/
/*----------------------------------------------*/
.return-request-header {
    display: inline-flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

#return-request-table .number_product {
    min-width: 75px;
}

#return-request-table .order-status-row-product {
    display: flex;
    gap: .5rem;
}

#return-request-table .order-status-row-product .order-product_image {
    max-width: 75px;
}

#return-request-table .order-status-row-product .order-product_name {
    display: flex;
    align-items: center;
    width: 100%;
}

@media screen and (max-width: 767px) {
    #return-request-table .col1 {
        min-width: 225px;
    }

    .order-status-row-status {
        min-width: 100px;
    }

    .col4.order-status-row-price {
        min-width: 75px;
    }
}

/* ACCOUNT HISTORY INFO */
.account-history-info-section {
    margin-top: 1.5rem;
}

.account-history-info-heading {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.account-history-info-order-status {
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--success-700);
}

.account-history-info-order-overview {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.account-history-info-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--gutter);
}

.account-history-info-box {
    padding: .5rem;
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
}

.account-history-info-box h2 {
    font-size: var(--h4-font-size) !important;
}

.account-history-info-savings {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.account-history-info-savings-item {
    display: grid;
    grid-template-columns: 200px max-content;
    grid-column-gap: .5rem;
}

.account-history-info-savings-not-processed {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 767px) {
    .account-history-info-order-overview {
        flex-direction: column;
    }
}

.account-history-info-table a {
    color: var(--body-text-color);
}

.account-history-info-table a:hover,
.account-history-info-table a:focus {
    color: var(--link-color-hover);
}

.order-overview-row-product-image {
    width: 44px;
}

.account-history-info-overview .col1.order-overview-row-product {
    text-align: left;
}

.account-history-info-overview .col3.order-overview-row-download,
.account-history-info-overview .col2.order-overview-row-price {
    text-align: right;
}

.account-history-info-overview .col2.order-overview-row-price {
    padding-inline-end: .5rem;
}

.order-total-confirmation {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    margin-right: 0.5rem;
}

.order-total-confirmation-item {
    display: grid;
    grid-template-columns: 250px 50px;
    grid-column-gap: .5rem;
    padding-block: .25rem;
}

.order-total-confirmation-item:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
}

.order-total-confirmation-item-price {
    text-align: right;
}

.col1.order-history-row-date,
.col2.order-history-row-status,
.col3.order-history-row-tracking,
.col1.order-history-row-comment{
    text-align: left;
}

.button-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.5rem;
}

.button-list-left {
    display: flex;
    gap: .5rem;
}

.button-list-right {
    display: flex;
    justify-content: flex-end;
}

.button-list .tep_meta_continue,
.button-list .tep_meta_general {
    width: auto !important;
}

@media screen and (max-width: 767px) {
    .order-total-confirmation-item {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .button-list {
        display: flex !important;
        flex-direction: column;
        gap: .5rem;
    }

    .button-list-left {
        flex-direction: column;
    }

    .button-list a,
    .button-list button,
    .button-list-left form,
    .button-list-right form {
        width: -webkit-fill-available;
        width: -moz-available;
    }

    .button-list-left .tep_meta_continue {
        margin-top: 0 !important;
    }
}










/*table.account_edit tr td.col1,*/
/*table.account_password tr td.col1 {*/
/*    width: 200px;*/
/*}*/

/*table.checkout_payment_address tr td.col2,*/
/*table.checkout_payment_address tr th.col2,*/
/*table.checkout_shipping_address tr td.col2,*/
/*table.checkout_shipping_address tr th.col2 {*/
/*    text-align: center;*/
/*}*/

/*#cpCustomer div.already_account.active_area {*/
/*    margin-bottom: 20px;*/
/*}*/

.label_check.create_account_label {
    padding-left: 30px !important;
}

#ChangePasswordForm .box,
#checkout_page .box,
#create_account_form .box,
#password-strength .box {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}

#ChangePasswordForm .box,
#password-strength .box {
    position: relative;
    width: calc(90% + 10px);
    height: 35px;
    background-color: var(--grey-200);
}

#create_account_form .box {
    position: relative;
    width: 100%;
    height: 25px;
    background-color: var(--grey-200);
}

#create_account_form .box div.bar-text,
#ChangePasswordForm .box div.bar-text,
#password-strength .box div.bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #000;
    text-align: center;
    font-size: var(--text-size-xs);
    z-index: 3;
    line-height: 25px;
}

#create_account_form .box div.bar,
#cpCustomer .box div.bar,
#ChangePasswordForm .box div.bar {
    position: absolute;
    width: 0;
    height: 100%;
    z-index: 2;
    transition: 1s;
}

#create_account_form .medium .box div.bar-text,
#create_account_form .normal .box div.bar-text,
#create_account_form .strong .box div.bar-text,
#create_account_form .vstrong .box div.bar-text,
#ChangePasswordForm .medium .box div.bar-text,
#ChangePasswordForm .normal .box div.bar-text,
#ChangePasswordForm .strong .box div.bar-text,
#ChangePasswordForm .vstrong .box div.bar-text,
#cpCustomer .medium .box div.bar-text,
#cpCustomer .normal .box div.bar-text,
#cpCustomer .strong .box div.bar-text,
#cpCustomer .vstrong .box div.bar-text {
    color: #000;
}

#create_account_form .normal .box div.bar,
#ChangePasswordForm .normal .box div.bar,
#cpCustomer .normal .box div.bar {
    background: var(--error-500);
    border-radius: 5px;
    width: 25%;
}

#create_account_form .medium .box div.bar,
#ChangePasswordForm .medium .box div.bar,
#cpCustomer .medium .box div.bar {
    background: var(--warning-500);
    border-radius: 5px;
    width: 50%;
}

#create_account_form .strong .box div.bar,
#ChangePasswordForm .strong .box div.bar,
#cpCustomer .strong .box div.bar {
    background: var(--info-500);
    border-radius: 5px;
    width: 75%;
}

#create_account_form .vstrong .box div.bar,
#ChangePasswordForm .vstrong .box div.bar,
#cpCustomer .vstrong .box div.bar {
    background: var(--success-500);
    border-radius: 5px;
    width: 100%;
}

/*----------------------------------------------*/
/*---------------- ADDRESS BOOK ----------------*/
/*----------------------------------------------*/
.inhoud_address_book .address_book_border:not(:last-of-type) {
    height: 3rem;
}


/*
CSS onderverdeling
Welke pagina's / globaal: Zoekresultaten
Is het cruciaal boven de vouw?: Ja ? - Maar pas zichtbaar na user interaction.

dus ---> Extern en non renderblocking inladen
*/

/* TODO: Het liefst ff unieke class op die form plaatsen - nog beter om gelijk een goed ontwerp te maken met evt. een zijbalk en minder gigantisch blok bovenaan */
body[class*="advanced-search-result.php"] #content form[name="advanced_search"] {
    padding-top: .5rem;
    padding-inline: .75rem; /* zelfde als pagination/sortby block */
    padding-bottom: .75rem;
    background-color: var(--grey-50); /* kader/box/widget background similarities - maybe introduce new color-variable  */
    border-radius: var(--border-radius-sm); /* zelfde als pagination/sortby block. Zou mooi zijn dat die visueel gelijk waren. */
    border: 1px solid var(--border-color);
}

@media screen and (min-width: 992px) {
    body[class*="advanced-search-result.php"] #content form[name="advanced_search"] {
        padding-inline: 1rem; /* zelfde als pagination/sortby block */
        padding-bottom: 1rem;
    }
}

.advanced-search__price-slider {
    margin-block: auto;
}

body[class*="advanced-search-result.php"] #content form[name="advanced_search"] .configuration_tep_meta {
    margin-top: var(--gutter);
}

body[class*="advanced-search-result.php"] #content form[name="advanced_search"] .form_section {
    margin-bottom: 0;
}

/* slider is te klein op mobiel, en je kan trouwens ook niet echt vegen met touch device - grondige verbetering nodig */
@media screen and (max-width: 767px) {
    .advanced-search__price-slider {
        display: none;
    }
}


/* uitgebreid zoeken dropdown */
#containerDropdown{
    display: flex;
    gap: 10px;
    font-size: 21px;
    cursor: pointer;
    width: max-content;
}

/* display none voor dropdown functie */
.priceSlider,
.options,
.categorySelect,
.dropdownIconUp{
    display: none;
}



/*
CSS onderverdeling
Welke pagina's / globaal: Alleen op infopages die formulier hebben en/of contact details
Is het cruciaal boven de vouw?: Ja?

dus ---> Intern inladen als formulier / company details aan staan
*/



/* CONTACT FORM + COMPANY DETAILS */

/*the section on infopages with google maps, form and company details*/
.infopage-contact-section {
    margin-top: var(--section-space-y);
}

/* geen margin-block-end gebruiken want het moet inline styling overschrijden */
.infopage__map {
    margin-bottom: var(--section-space-y) !important;
}

.infopage__map:empty {
    display: none;
}

.company-details__address,
.company-details__phone,
.company-details__email,
.company-details__phone a,
.company-details__email a {
    display: flex;
    gap: .5rem
}

.company-details__icon {
    display: flex;
}

.company-details__address {
    margin-bottom: 1rem;
}

.company-details__address .company-details__icon {
    margin-top: .25rem;
}

.company-details__phone,
.company-details__email,
.company-details__phone a,
.company-details__email a {
    align-items: center;
}

.company-details address {
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    padding: .5rem var(--gutter);
}

.company-additional-info {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-column-gap: .5rem;
    margin-bottom: 1rem;
}

.company-additional-info-title {
    font-weight: var(--font-weight-bold);
}

textarea.form-control.contactform-message {
    min-height: 10em;
}

@media screen and (min-width: 768px) {
    .company-details address {
        width: fit-content;
        width: -moz-fit-content;
    }
}

/*
CSS onderverdeling
Welke pagina's / globaal: Manufacturers.php en ???
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

/*------------------------------------------*/
/*------- MANUFACTURERS CATEGORY PAGE ------*/
/*------------------------------------------*/
.manufacturer-page .categories_info p {
    margin-bottom: 1rem;
}

div.manufacturer_image img {
    max-width: 300px;
    max-height: 300px;
    border-radius: var(--border-radius-small);
}

/*------------------------------------------*/
/*----------- MANUFACTURERS PAGE -----------*/
/*----------- manufacturers.php ------------*/
/*------------------------------------------*/
.manufacturers-listing {
    display: grid;
    grid-template-columns: repeat(var(--categorie-listing-number-of-cols), 1fr);
    grid-column-gap: var(--gutter);
    grid-row-gap: var(--gutter);
    margin-block: var(--gutter);
}

.manufacturers-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    text-align: center;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.manufacturers-card:hover {
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

.manufacturers-card_image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    height: -webkit-fill-available;
    height: -moz-available;
}

.manufacturers-card_image a {
    width: 100%;
}

.manufacturers-card_image img {
    display: block;
    width: -webkit-fill-available;
    width: -moz-available;
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.manufacturers-card_name {
    padding-block: .5rem;
}

.manufacturers-card_name h2 {
    overflow: hidden;
    padding: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manufacturers-card_name-heading {
    font-size: var(--text-size-md) !important;
    margin-bottom: 0 !important;
    container: categories-name-heading / inline-size;
}

.manufacturers-card_name-heading a {
    color: var(--body-text-color);
}

@media screen and (max-width: 767px) {
    .manufacturers-listing {
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-mobile), 1fr);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

@media only screen and (max-width: 480px) {
    .product_review_image img {
        max-width: 200px;
        max-height: 200px;
    }
}

@media only screen and (min-width: 800px) {
    .left_review_column {
        width: 60%;
    }

    .right_review_column {
        width: 40%;
        float: right;
    }

    .product_review_your_review {
        width: 90%;
    }

    .product_review_image {
        width: 100%;
        text-align: right;
    }
}

div.user_review_control {
    position: relative;
    margin-left: 5px;
    margin-top: 15px;
    float: left;
    background-color: #d9d9d9;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
}

div.user_review_control a {
    position: relative;
    display: block;
    float: left;
    z-index: 3;
}

div.user_review_control a#share-it-review {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

div.user_review_control i {
    padding: 2px 6px 3px;
}

div.user_review_control i span {
    display: none;
}

.product_review_fields input {
    height: 35px;
    margin-right: 10px;
}

.product_review_image img {
    max-width: 300px;
    max-height: 300px;
}

.row_review {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
}

.product_review_your_review {
    padding: 5px;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked) > input {
    position: absolute;
    display: none;
}

.rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #F4C737;
}

.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label {
    color: #F4C737;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* review stars zonder tabbladen*/
h2 span.rating_stars{
    font-size: var(--text-size-md);
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.quotation-form {
    --gutter: 4rem;
    display: grid;
    grid-template-columns: repeat(2, max(calc(50% - calc(var(--gutter) / 2))));
    column-gap: var(--gutter);
    margin-top: 2rem;
}

.quotation-form-product-image {
    margin-bottom: 1rem;
}

.quotation-form-product-image img {
    border-radius: var(--border-radius-small);
}

.quotation-form-additional-info {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.quotation-form-additional-info-item {
    display: grid;
    grid-template-columns: 150px 1fr;;
}

@media screen and (max-width: 767px) {
    .quotation-form {
        display: flex;
        flex-direction: column;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Checkout zo te zien.
Is het cruciaal boven de vouw?: Nee ?

dus ---> ... inladen
*/



table.algemene_voorwaarden a {
    text-decoration: underline;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.sitemap ul, .sitemap ul > ul {
    margin-left: 15px;
}

/* Homepage block content */
.contentBlockContainer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--gutter);
    margin-bottom: var(--section-space-y);
}


@media screen and (max-width: 575px) {
    .w25, .w33, .w50, .w66, .w75, .w100, .wrapper {
        grid-column: span 12;
    }

    .contentBlock:not(.last) {
        margin-bottom: var(--gutter);
    }
}

@media screen and (min-width: 576px) {
    .w25 {
        grid-column: span 3;
    }

    .w33 {
        grid-column: span 4;
    }

    .w50 {
        grid-column: span 6;
    }

    .w66 {
        grid-column: span 8;
    }

    .w75 {
        grid-column: span 9;
    }

    .w100 {
        grid-column: span 12;
    }
}
/* Homepage slider */
#slider-homepage #preview img {
    margin: auto;
}

#owl-carousel-homepage img {
    height: auto;
}


/* Merkenslider */
#owl-carousel-merkenslider {
    margin-top: 2.5rem;
}
/* Dit is het standaard thema van het platform - de leidraad is Mantel.com / Coolblue - Uiteindelijk kan deze wellicht als thema 'strak, eenvoudig, oid' gebruikt worden  */

/* todo: sommige variabelen hoeven helemaal geen thema te zijn. Vaak is het voor alle shops goed of voor geen een. Bijv. input placeholder txt color of sidebar width.
    Bij verzoek om aan te passen best practice handhaven en anders maatwerk, geen thema - waar dan variabelen plaatsen? Liever in een echte css file  */

:root {
    /*LAYOUT*/
    --custom-st-container-space-x: 10px; /* de ruimte aan de linker en rechter kant van de container op mobiel */
    --custom-sidebar-width: clamp(270px, 20%, 320px); /* todo: min, max, preferred width toevoegen? Value ontleden voor betere flexibiliteit? */

    /*MEGAMENU*/
    --mega-menu-dropdown-border-radius: 0;

    /* FORMS AND INPUTS */
    /* todo: border-radius afhankelijk maken van gekozen button-border-radius in thema builder */
    --input-border-radius-max: .5rem;
    --input-sm-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));
    --input-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));
    --input-lg-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));

    --input-font-stack: var(--body-font-stack);
    --input-border-width: 1px;
    --input-text-color: var(--grey-700);
    --input-bg-color: #fff;
    --input-border-color: var(--border-color);
    --input-placeholder-text-color: var(--grey-400);

    --input-text-color-focus: var(--input-text-color);
    --input-bg-color-focus: var(--input-bg-color);
    --input-border-color-focus: var(--grey-400);


    /* CARDS (products, categories, laatst bekeken) */
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --card-background-color: #fff;
    --card-border-width: 1px;
    --card-border-color: var(--border-color-transparent-dark);
    --card-border-color-hover: var(--border-color-transparent-dark);
    --card-border: var(--card-border-width) solid var(--card-border-color);
    --card-border-hover: var(--card-border-width) solid var(--card-border-color-hover);
    --card-border-radius: var(--border-radius);

    --card-shadow-hover-duration: .1s;
    --card-shadow-hover-timing-function: ease;

    /*BOX HEADINGS*/
    --box-heading-font-size: var(--text-size-lg);
}
.header-mobile-search-inside-menu {
    --header-mobile-searchbox-inside-menu-padding-y: var(--st-spacing-xs);
    --header-mobile-searchbox-inside-menu-padding-x: var(--header-mobile-item-padding-x);

    padding-block: var(--header-mobile-searchbox-inside-menu-padding-y);
    padding-inline: var(--header-mobile-searchbox-inside-menu-padding-x);
}
/*-----------------------*/
/*-------- POPUP --------*/
/*-----------------------*/
.warningBox-popup-carrousel {
    width: 80%;
    max-height: calc(90vh - 5%);
    overflow: auto;
}

@media screen and (min-width: 992px) {
    .warningBox-popup-carrousel {
        width: 800px;
    }
}

.warningBox-popup-carrousel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    font-size: var(--text-size-sm);
    padding: 1rem;
    z-index: 9999;
}

.uadWarningBoxtext{
    height: 367px;
    overflow-y: auto;
}

.uadWarningBoxButtons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

@media screen and (max-width: 820px) {
    .uadWarningBoxButtons {
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    .uadWarningBoxButtons .btn{
        margin-top:10px;
    }
}

    /* BACKGROUND OVERLAY */
#lightBoxOpacity {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 9998;
    opacity: 0.2;
}

/* LOADER */
img#ajax-loader {
    border: 0;
}

/* BUTTONS */
.popup_cart_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

#continue_shopping {
    cursor: pointer;
}

#checkout {
    cursor: pointer;
}

/* POPUP TITLES */
.popup_add_product_container_title,
.popup_add_product_container_title_aanbevolen{
    font-size: var(--h4-font-size);
    font-family: var(--body-font-stack);
    font-weight: var(--font-weight-bold);
}

/* PRODUCT */
.popup_add_product_container_wrapper {
    display: flex;
    margin-top: 1rem;
}

@media screen and (max-width: 767px) {
    .popup_add_product_container_wrapper {
        display: flex;
    }
}

/* PRODUCT NAME */
.popup_product_name {
    font-size: var(--text-size-md);
    font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 575px) {
    .recommended-products-slider .item .products_gallery_row_name {
        min-height: unset;
    }
}

/* PRODUCT INFO */
.popup_product_info_container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: .75rem;
}
.popup_product_info_container .product_options p {
    font-size: var(--text-size-sm);
}

.popup_product_content {
    max-width: 80%;
}

/* PRODUCT IMAGE */
.popup_product_image_container {
    width: 75px;
    display: inline-block;
}

.recommended-products-slider__title {
    margin-bottom: .5rem;
}

/* PRODUCT PRICE */
.popup_product_price {
    font-size: var(--text-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--price-text-color);
}

@media screen and (max-width: 575px) {
    .popup_product_price {
        display: inline-flex;
    }
}
/*---------------------------------*/
/*------ POPUP CROSS SELLING ------*/
/*---------------------------------*/
@media screen and (min-width: 120px) and (max-width: 767px) {
    .popup_cart_footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .popup_cart_footer #continue_shopping {
        margin-bottom: .5rem;
    }

    .popup_cart_footer #continue_shopping,
    .popup_cart_footer #checkout {
        width: -moz-available;
        width: -webkit-fill-available;
    }
}

.shopingCartPopup {
    margin-top: 1.5rem;
}

/*----------------------*/
/*------ CAROUSEL ------*/
/*----------------------*/
.winkelwagen-extended-recommended-products-slider .products_name_heading {
    margin-block-start: var(--gutter-half);
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price .custom_price_mtw_listing {
    display: flex;
    flex-direction: column;
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price .custom_price_mtw_listing > span {
    width: max-content;
}

/* PRODUCT LISTING FOOTER (Price + button inline) */
.winkelwagen-extended-recommended-products-slider .products_gallery_header {
    flex: 1 1 auto;
    /*padding-inline: .5rem;*/ /* padding op card zelf plaatsen? */
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--gutter-half);
    gap: var(--gutter-half);
    /*padding: 0 .5rem .5rem .5rem;*/ /* padding op card zelf plaatsen? */
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer_buttons  {
    flex-direction: row;
}

/* TODO: Bij aantal input button andere styling - geen column en geen fill-available */
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price,
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_buttons,
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .btn.btn-icon {
    width: fit-content !important;
    width: -moz-fit-content !important;
}

@media screen and (min-width: 120px) and (max-width: 479px) {
    hr.grafeer_spacer {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    tr.grafeer_row td {
        display: block;
    }

    table.shopping_cart tr td table.grafeer tr td:first-child, table.shopping_cart tr td table.grafeer tr td:last-child {
        padding: 0 10px;
    }
}

table.shopping_cart tr td table.grafeer tr td, table.shopping_cart.addon-grafeer tr td {
    border: 0;
}

table.shopping_cart.addon-grafeer th.shopping_cart_total {
    text-align: right;
}

table.shopping_cart tr td table.grafeer tr td:first-child {
    padding-left: 10px;
}

table.shopping_cart tr td table.grafeer tr td:last-child {
    padding-right: 10px;
}

hr.grafeer_spacer {
    position: relative;
    height: 1px;
}
.guestbook_header h1 {
    margin-block-end: var(--gutter);
}

[class*="guestbook.php"] table:has(.message) {
    margin-block-end: var(--gutter);
}
.meebestelmodule {
    margin-block-start: var(--section-space-y);
}

.newsletters .col1 {
    display: flex;
}

div.box input.newsletter.input_styling {
    width: inherit;
}

div.addthis_default_style {
    position: relative;
    float: left;
    margin-top: 19px;
    z-index: 10;
}
.productinfo_spraypay-price * {
    font-size: var(--text-size-sm);
}

.productinfo_price_box:has(.productinfo_in3-price) .productinfo_spraypay-price .productinfo__geld-lenen-kost-geld-logo {
    display: none;
}
.in3-price-text,
.in3-price-text * {
    font-size: var(--text-size-sm);
}

.st-icon.in3-logo svg{
    margin-bottom: 2px;
    --st-icon-size: 1.2em;
}


#aanbevolen_artikelen,
#alternatieve_artikelen,
.recommended_products,
.alternative_products {
    margin-block-start: var(--section-space-y);
}

#aanbevolen_artikelen .products_gallery_row,
#alternatieve_artikelen .products_gallery_row {

    /*Max height werd geintroduceerd voor mho en benu, bij andere shops gaf dit issues. Daarom nu weggehaald in bij mho/benu in default gezet.*/
    /*--alternative-aanbevolen-card-max-height: 350px;*/
    /*max-height: var(--alternative-aanbevolen-card-max-height);*/

    /*height: -webkit-fill-available;*/
    /*height: -moz-available;*/
    height: auto;
    flex-grow: 1;
}

/* TODO: onderstaande alleen inladen als reacties aan staan */
.st-comment-listing {
    margin-block-start: var(--st-spacing-4xl);
}

.st-comment:not(:last-of-type) {
    padding-block-end: var(--st-spacing-2xl);
    border-bottom: 1px solid var(--border-color); /* Toepassen op alle elementen behalve het laatste item */
    margin-block-end: var(--st-spacing-2xl);
}

.st-comment-author {
    font-weight: var(--font-weight-bold);
}

.st-comment-details {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: .05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.st-comment-details-divider:after {
    content:"\00a0"; /* hiermee kan je een spatie plaatsen achter een element */
}
/*
CSS onderverdeling
Welke pagina's / globaal: PLP - alleen als relevante optie aan staat
Is het cruciaal boven de vouw?: JA?

dus ---> ... inladen
*/


/* --------------------------------------- */
/* ------- PRODUCT LISTING GALLERY ------- */
/* --------------------------------------- */

.products_gallery_row {
    display: flex;
    flex-direction: column;
    font-size: var(--text-size);
    padding: var(--gutter-half);
}

.products_gallery_header {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.product_listing_productmodel {
    font-size: var(--text-size-xs);
    color: var(--text-color-muted);
    line-height: 1em;
    min-height: 1em;
    margin-top: var(--gutter-half);
}

.products_gallery_row_manufacturer {
    margin-top: auto;
    padding-top: 2px;
}

.products_gallery_row_review_stars {
    --plp-review-stars-margin-top: var(--gutter-half);
    margin-top: var(--plp-review-stars-margin-top);
    font-size: var(--text-size-md);
    --st-icon-size: 1em;
}

.products_gallery_row_description {
    margin-top: var(--gutter-half);
    min-height: calc( var(--number-of-lines-plp-description) * var(--actual-text-sm-line-height) );
}


/* DELIVERY TIMES */
.products_gallery_row_levertijden,
.products_gallery_row_levertijden p {
    font-size: var(--text-size-sm);
}
.products_gallery_row_levertijden {
    min-height: calc(1 * var(--actual-text-sm-line-height));
}

@supports selector(:has(a, b)) {
    /* If listing does not contain ANY description or ANY delivery time, hide it. */
    .home_page_listing:not(:has(.products_gallery_row_description p)) .products_gallery_row_description,
    .home_page_listing:not(:has(.products_gallery_row_levertijden p)) .products_gallery_row_levertijden,
    .home_page_listing:not(:has(.product_listing_quotation_button)) .btn-empty-space--quotation {
        display: none;
    }
}

/*.products_gallery_row_price,*/
/*.products_gallery_row_model,*/
/*.products_gallery_row_levertijden,*/
/*.products_gallery_row_description,*/
/*.products_gallery_row_meebestellen {*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.products_gallery_row_price {*/
/*    margin-top: 1rem;*/
/*}*/

/*.products_gallery_row_review_stars {*/
/*    margin-bottom: 1rem;*/
/*}*/


/*.products_gallery_row .product_listing_quotation_button.quotation_shoppingcart_button {*/
/*    margin-bottom: .5rem;*/
/*}*/




/* PRODUCT NAME */
.products_name_heading {
    font-size: var(--text-size-md);
    line-height: 1.2;
    margin-top: calc(var(--gutter-half) / 2);
    margin-bottom: 0;
}


.products_gallery_row_name {
    min-height: calc(var(--article-names-reserved-height-desktop) * var(--actual-text-md-line-height));
}

@media screen and (max-width: 767px) {
    .products_gallery_row_name {
        min-height: calc(var(--article-names-reserved-height-mobile) * var(--actual-text-md-line-height));
    }
}

/* PRICE WITH TAX */
.products_price-tax {
    display: flex;
    flex-direction: column;
}

/* PRICE */
.products_gallery_row_price {
    display: flex;
    align-items: baseline;
    column-gap: .25rem;
}


/* BUTTONS */
.products_gallery_row_buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@container products-gallery-row (max-width: 180px) {
    .products_gallery_row_buttons .configuration_btn {
        /* De teksten in de buttons kleiner maken wanneer de product card smaller is */
        font-size: var(--text-size-sm);
    }
}

.products_gallery_row_buttons .configuration_btn {
    /* De teksten in de buttons niet kunnen laten wrappen */
    white-space: nowrap;
}

.products_gallery_row_buttons .product_listing_sold_out_button .configuration_btn {
    /* De teksten in de sold out button wel kunnen laten wrappen */
    white-space: unset;
}

.products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
.products_gallery_row_buttons .product_listing_buttons.details_button.out_of_stock_button,
.products_gallery_row_buttons .product_listing_buttons.details_button.backorder_button,
.products_gallery_row_buttons .product_listing_buttons.shopping_and_details_button {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter-half);
}

.product_listing_details_button,
.product_listing_quotation_button,
.product_listing_sold_out_button {
    display: flex;
}

.products_gallery_row_buttons .buttons_shoppingcart {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.products_gallery_footer .buttons_shoppingcart {
    justify-content: flex-end;
    width: auto;
}

.products_gallery_row_buttons .product_listing_buttons:not(.details_button) .product_listing_sold_out_button {
    width: 100%;
}

.products_gallery_row_buttons .product_listing_buttons.backorder_button {
    flex-direction: column;
}

.products_gallery_row_buttons .product_listing_buttons.backorder_button .btn-backorder,
.products_gallery_row_buttons .product_listing_buttons .configuration_btn,
.products_gallery_row_buttons .product_listing_quotation_button,
.products_gallery_row_buttons .product_listing_sold_out_button button {
    flex-grow: 1;
}

.product_gallery_footer_buttons-extra .btn {
    width: 100%;
}

/* COMPARE PRODUCTS */
.products_gallery_row_compare {
    padding-top: calc(var(--gutter-half) / 4);
    border-top: 1px solid var(--border-color);
}

/* PRODUCT LISTING FOOTER (Price + button inline) */
.product_gallery_footer {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-half);
}

.product_gallery_footer_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--gutter-half);
    gap: var(--gutter-half);
}

.product_gallery_footer_buttons .shopping_and_details_button {
    grid-template-columns: 1fr max-content !important;
}

.product_gallery_footer_buttons .details_button.backorder_button {
    grid-template-columns: 1fr !important;
}

.product_gallery_footer_buttons .products_gallery_row_price {
    flex-wrap: wrap;
    flex: 1;
}

.product_gallery_footer_buttons .products_gallery_row_buttons {
    margin-block-start: 0;
}

.product_gallery_footer_buttons .buttons_shoppingcart a {
    container: unset;
}

/* Andert: Deze code is uitgezet omdat de combinatie van de detailsknop (hernoemd naar 'meer info') en de bestel-icon-button leidde tot wrapping issues. De code is gecommentarieerd om aan te geven dat dit eerder anders was. */
/*.product_gallery_footer_buttons .products_gallery_row_buttons .configuration_btn {*/
/*     white-space: normal;*/
/*}*/

.product_gallery_footer_buttons .product_listing_quotation_button {
    width: 100%;
}

@media screen and (max-width: 456px) {
    .product_gallery_footer .products_gallery_row_buttons {
        width: 100%;
    }

    .product_gallery_footer .product_listing_details_button {
        width: -moz-available;
        width: -webkit-fill-available;
    }
}

/* CONTAINER QUERY */
.products_gallery_row {
    container: products-gallery-row / inline-size;
}

@container products-gallery-row (max-width: 9rem) {
    .products_name_heading {
        font-size: var(--text-size-sm);
    }
}

@container products-gallery-row (max-width: 223px) {
    .products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
    .products_gallery_row_buttons .product_listing_buttons,
    .products_gallery_row_buttons .product_listing_buttons.details_button.out_of_stock_button,
    .products_gallery_row_buttons .product_listing_buttons.details_button.backorder_button,
    .products_gallery_row_buttons .product_listing_buttons.shopping_and_details_button {
        display: flex;
    }

    .products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
    .products_gallery_row_buttons .product_listing_buttons,
    .products_gallery_row_buttons .product_listing_buttons.out_of_stock_button {
        flex-direction: column;
    }

    /* TODO: Bij aantal input button andere styling - geen column en geen fill-available */
    /* EDIT-Andert : Deze width fill-available heb ik weggehaald en op .product_gallery_footer flex-wrap:wrap geplaatst zodat er geen container-query meer nodig is maar het automatisch wrapt als er geen ruimte meer is.  */
    /*
    .products_gallery_row_buttons .configuration_btn,
    .product_gallery_footer .products_gallery_row_price,
    .product_gallery_footer .products_gallery_row_buttons {
        width: -moz-available !important;
        width: -webkit-fill-available !important;
    }
     */

    .product_gallery_footer .shopping_and_details_button {
        flex-direction: row !important;
    }

    /*.product_gallery_footer .btn.btn-icon {*/
    /*    width: 100%;*/
    /*}*/
}
@media screen and (min-width: 768px) {
    .categories_name_heading {
        max-height: calc(var(--category-titles-reserved-height-desktop) * var(--actual-text-md-line-height));
    }

    .categories_name_link {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /* number of lines to show */
        -webkit-line-clamp: var(--category-titles-reserved-height-desktop);
        line-clamp: var(--category-titles-reserved-height-desktop);
    }
}
@media screen and (max-width: 767px) {
    .categories_name_heading {
        max-height: calc(var(--category-titles-reserved-height-mobile) * var(--actual-text-md-line-height));
    }

    .categories_name_link {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /* number of lines to show */
        -webkit-line-clamp: var(--category-titles-reserved-height-mobile);
        line-clamp: var(--category-titles-reserved-height-mobile);
    }
}
.categories_name {
    text-align: center;
}
.categories_row {
    display: flex;
    flex-direction: column;
}

.categories_name {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-arrow:after,.mfp-arrow:before,.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:7882;overflow:hidden;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:7883;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}

/* ##################################################################### */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* ##################################################################### */  /*

LET OP!:
Deze styling is bijna deprecated.
- Owl slider wordt vervangen met waarschijnlijk Swiper.js
- De homepage carousel krijgt dan een redesign

*/
/* ##################################################################### */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* ##################################################################### */



#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-big.owl-carousel.owl-theme .item {
    display: none !important;
}
#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-big.owl-carousel.owl-theme.owl-loaded .item {
    display: block !important;
}

#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-thumb.owl-carousel.owl-theme .item {
    display: none !important;
}
#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-thumb.owl-carousel.owl-theme.owl-loaded .item {
    display: block !important;
}

#owl-carousel-big .item, #owl-carousel-big .item {
    margin: 5px auto;
    color: #FFF;
    border-radius: 3px;
    text-align: center
}

#owl-carousel-big .owl-carousel .owl-stage-outer {
    transition: 0.1s;
}

.item-video.photoswipe {
    max-height: 400px !important;
}

#owl-carousel-thumb .item {
    cursor: pointer
}

#owl-carousel-thumb .item h1 {
    font-size: 18px
}

.owl-theme .owl-nav [class*=owl-] {
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease
}

.owl-theme .owl-nav [class*=owl-].disabled:hover {
    background-color: transparent
}

#owl-carousel-big {
    position: relative;
    overflow: hidden;
}

#owl-carousel-big + #owl-carousel-thumb:not(owl-loaded) .owl-thumb {
    border: 0;
}

#owl-carousel-big.owl-carousel .owl-stage-outer {
    transition: 0.1s;
}

#owl-carousel-big:not(.owl-loaded) a.popup {
    margin: 0 auto;
}

#owl-carousel-homepage.owl-theme .owl-next,
#owl-carousel-homepage.owl-theme .owl-prev,
#owl-carousel-big.owl-theme .owl-next,
#owl-carousel-big.owl-theme .owl-prev {
    width: 42px;
    height: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#owl-carousel-big.owl-theme .owl-prev,
#owl-carousel-homepage .owl-prev {
    left: 10px
}

#owl-carousel-big.owl-theme .owl-next,
#owl-carousel-homepage .owl-next {
    right: 10px
}

#owl-carousel-homepage.owl-theme .owl-dots .owl-dot span {
    border-radius: 100%;
}

#owl-carousel-homepage .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.owl-theme .owl-dots .owl-dot {
    background: transparent !important
}

.owl-theme .owl-dots .owl-dot span {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.owl-theme .owl-nav [class*=owl-] {
    background-color: transparent
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: 0 0
}

.owl-thumb {
    border: 1px solid #D6D6D6
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: pointer
}

.item a {
    outline-color: transparent !important
}

.owl-stage {
    margin: auto
}

div#preview {
    height: auto
}

.owl-carousel .owl-item img {
    width: unset;
}

div.zoomContainer {
    z-index: 1 !important
}

.preload {
    display: none !important;
}

div#beschrijving > ul > li {
    float: left;
    list-style: none;
}

div#owl-carousel-thumb div.owl-stage {
    display: flex;
}

div#owl-carousel-thumb div.owl-stage div.owl-item {
    display: flex;
    border: 1px solid #d6d6d6;
    margin: 0px 2.5px;
}

div#owl-carousel-thumb div.owl-stage div.owl-item div.item {
    align-self: center;
    border: none;
    text-align: center;
}

.owl-carousel .owl-video-play-icon {
    height: 72px !important;
    width: 72px !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAA8pJREFUeNrs2+2LVVUUx/HL2GjNlOUIWhljNo4MVhONOalFDyJBSEMiUVlCGFEGRlQYBlKRPVCmMZSlmC+M1MYkK8geMUSzpvv68+9Mb/aFy2Ee7p17Hva5zYvf27P373vvOXutvdaqTExMVP7PqswBmJioIEstQD8exvN4F5/iS5zAcXyOA9iNx7EOPY2uESuALqzFLhzFz/gb1Rl0HmfwDrZgWdkADOI1/NSA2UY0jkN4FNfEDGAobLSaoX7Fs+iOCcByHM7Y+GSvyZMxAHgOl3M2X69j6CsCwNLwFa9GoHFsyRPA7fgtEvP12pMHgPvwb4Tma/oQnVkB2Bj+btXIdSALALfhnxKYr+ntNAH0phjU5KmdaQE4XELzNW1sFcDOEpuvRY49swUwgL9KDqCK3bMFcKgNzNe0vlkAw21kvorRZgGMprTwBWyL5N801CiAoRSjvfFwjFbwVMjiCosSGwXwasoL99c9ezHeKgjAH1g6E4Br8WOGAGq6taBscvtMAO7KYNH+aeKMreGszgvA/pkA7MoZQAXz8UpOucafydcgCeBoAQBq6sORHCAMTwWgO4P3vxkANT2I7zME8Aw6kgA6sSqj0LdZABVcgRdxMYP97MXiJIAl4banGgmAmm4IFaM093MEK5MAerE5QgD1ofk3Ke3nawwmAawMR1KsACqYh+0pRJOn65OjGoCBELPHDKD++/BFC/v5AZuSAFaFqmzsALpCTtFK8HQWDyQBrMBI5AAeSSlqPIU1SQDL8FCkAAZSDpCOY3USwMKQBscEYBH2ZLCfj3HTZJHg9SFlLBpARziRLmT0g7yErqlygbGCAdwZzuksc4HN0yVD7xUE4Ea8n1NK3DcdgJGcAXTiaVzKyfxJLJgOwPIcAdwfgpJCawST3QkezBhALz4p6F7w3kYAPJYRgG68XGCJfazRW+GFOJfSopfDa7U2xWfOVtuaKYzsSGnRSyH7Krq34BwWNQOgB7+0UWlsx2yKo0+0ifmx+siv2f6Az9oAwIZWGiT6StYblNSbabTIbC2p+WOYn1aX2BslM38RN6fdJ/hBicwPZ9UperAEAO7JslW2A/siNX5+qi6QLLrFX4jM/AmsyHteYH0oNxdtfh/mFTUwcR1eL8j42TBdFsXM0FCL1Zpm9HuYG7oqxqmxQXyUUVn7TCjfXV2GucEl4a5vtMXvxOkwTHl3GQcn61PrdaEzY2+o8pzEt+FO8LtQ+v4K+8O9/QhuCZempZ0cnSyG6Aml+DuwAZvC5egarA4luiubffbc8PQcgNnrvwEAsxcdIYUgbTwAAAAASUVORK5CYII=) no-repeat center center;
}

.owl-caption a {
    font-size: 4em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 15px #222;
}

/*Mobile scroll possible (product page only)*/
#owl-carousel-big .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
    touch-action: auto;
}

@media (max-width: 576px) {
    .hidden-sm {
        display: none !important;
    }
}

/*--Elevate zoom--*/
div#preview img {
    width: unset !important;
    left: 0;
    right: 0;
}

/*--Magnify zoom--*/
.magnify {
    height: unset !important;
}


/***************************************** Slider home *****************************************/

#owl-carousel-homepage {
    z-index: unset;
}

#owl-carousel-homepage .owl-caption {
    display: none;
    bottom: 10px;
    font-size: 20px;
    padding: 5px 10px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .8)
}


#owl-carousel-homepage img {
    margin: auto;
    width: 100%;
}


#owl-carousel-homepage .owl-nav {
    height: 0;
    margin-top: 0;
}

#slider-homepage {
    position: relative;
}

#static_slider_content {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


#static_slider_content h1 {
    --text-shadow-lg: 0 .025em .25em rgba(0,0,0,.25);
    --text-shadow-sm: 0 .025em .1em rgba(0,0,0,0.5);
    color: #fff;
    text-shadow: var(--text-shadow-sm), var(--text-shadow-lg);
    /* display: none; */
    margin-bottom: 0.5em;
}


@media screen and (max-width: 963px) {
    #owl-carousel-homepage.owl-theme .owl-next,
    #owl-carousel-homepage.owl-theme .owl-prev{
        display: none
    }
}

@media screen and (max-width: 500px) {
    div#static_slider_content {
        width: 80%;
    }

    .owl-stage-outer .btn-carousel {
        display: none !important;
    }
}



.btn-carousel {
    --bs-btn-color: var(--btn-carousel-color);
    --bs-btn-bg: var(--btn-carousel-bg-color);
    --bs-btn-border-color: var(--btn-carousel-border-color);
    --bs-btn-hover-color: var(--btn-carousel-hover-color);
    --bs-btn-hover-bg: var(--btn-carousel-hover-bg-color);
    --bs-btn-hover-border-color: var(--btn-carousel-hover-border-color);
}
/* artikel layover */
.eyecatcher_imagecontainer .subimage1,
.product-card-slide-image .subimage1,
.box_product_image .subimage1,
.products_gallery_row_imagecontainer .subimage1,
.products_wishlist_imagecontainer .subimage1,
.products_lijst_row_imagecontainer .subimage1{
    z-index: 3;
}

.eyecatcher_imagecontainer .subimage2,
.product-card-slide-image .subimage2,
.box_product_image .subimage2,
.products_gallery_row_imagecontainer .subimage2,
.products_wishlist_imagecontainer .subimage2,
.products_lijst_row_imagecontainer .subimage2{
    display: none;
    z-index: 4;
}

.productinfo-layover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5;
    height: 100%;
    width: 100%;
    border-radius: var(--card-border-radius) var(--card-border-radius) var(--border-radius-small) var(--border-radius-small);
}

.product-card-slide-image img.subimage2 {
    z-index: 4;
}

#artikellayover img,
.products_gallery_row_imagecontainer .layover img,
.meebestellen-layover {
    z-index: 6;
}

.product-card-slide-image img.subimage2,
.products_gallery_row_imagecontainer .layover img,
#artikellayover img,
.meebestellen-layover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
a#top-link {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: var(--scroll-to-top-link-z-index);
}

a#top-link span {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--scroll-to-top-link-z-index) + 1);
    width: 40px;
    height: 40px;
    border-radius: 100px;
    /*border: 1px solid var(--border-color);*/
    background: rgba(255,255,255,.75);
    line-height: 40px;
    text-align: center;
    color: var(--grey-500);
    filter: var(--drop-shadow-sm);
    backdrop-filter: var(--backdrop-blur-md);
}

a#top-link span:hover{
    background-color: var(--grey-100)
}
/* alleen mobiel */
@media screen and (max-width: 724px) {

    #filterPriceSlider {
        font-size: 2em;
    }

    #filterContent .ui-slider .ui-slider-handle {
        cursor: pointer;
        top: -0.25em;
    }

    .filter-content ul li:not(.filter-color) label.label_check {
        background-position: center left;
    }

    .filter-content ul li:not(.filter-color) label span.checkboxtext {
        position: relative;
        top: 0;
    }

}

/* tablet layout */
@media screen and (min-width: 725px) and (max-width: 962px) {

    #filterPriceSlider {
        font-size: 2em;
    }

    #filterContent .ui-slider .ui-slider-handle {
        cursor: pointer;
        top: -0.25em;
    }

    .products_listing_filter .filter-content ul {
        column-count: 2;
    }

    .filter-content ul li:not(.filter-color) label.label_check {
        background-position: center left;
    }

    .filter-content ul li:not(.filter-color) label span.checkboxtext {
        position: relative;
        top: 0;
    }
}

@media screen and (min-width: 963px) {

    #filterContent .ui-slider .ui-slider-handle {
        cursor: pointer;
        top: -0.25em;
    }

    .products_listing_filter .filter-content ul {
        column-count: 3;
    }

    .filter-content ul li:not(.filter-color) label.label_check {
        background-position: center left;
        top: 0;
    }

    .filter-content ul li:not(.filter-color) label span.checkboxtext {
        position: relative;
        top: 0;
    }
}

.products_listing_filter ul {
    display: block;
}

/* box in linker of rechter kolom */
#filterContainer {
    position: relative;
}

.filter-content ul li:not(.filter-color) {
    /*padding: 4px 0 0 8px;*/
    padding-left: .5rem;
    padding-block: .5rem;
    /*margin-bottom: 10px;*/
}

.filter-content ul li:not(.filter-color) label {
    height: auto;
}



/* filter in box */
.box_content #filterContent .filter-content {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

/* Boven listing  */
.products_listing_filter {
    position: relative;
    margin-block-start: var(--gutter);
}

.filter-header {
    position: relative;
}

.filter-header span.item {
    position: relative;
}

.filter-header.filter_accordion span.item {
    position: relative;
}

.filter-content {
    display: none;
}

.filter-content ul li {
    list-style: none;
}

/* op de pagina */
#content .filter-header span.item {
    display: block;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    color: #333;
    cursor: pointer;
}

#content .filter-header span.expand_filter {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    right: 0;
    line-height: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.products_listing_filter .filter-content {
    margin-bottom: 1rem;
}

.products_listing_filter .filter-content > ul {
    margin-left: .5rem !important;
}

/* in de box (met #filterContainer is het in de zijbalk) */
#filterContainer #filterContent.filter-content {
    border: 0;
    padding: 0;
}

#filterContainer .filter-header span.expand_filter {
    position: absolute;
    top: .5rem;
    right: 10px;
    font-size: var(--text-size-sm);
    text-align: center;
    cursor: pointer;
}

#filterContainer .filter-header span.item {
    display: block;
    cursor: pointer;
    position: relative;
    padding-top: .25rem;
    padding-bottom: .5rem;
    padding-right: 2rem; /* Ruimte voor collapse icon */
}

#filterContainer .filter-box-wrapper {
    margin-block: var(--box-margin-y);
}

#filterContainer .filter-content {
    margin-bottom: 1rem; /* slightly smaller compared with sidebar-box margin bottom */
    color: var(--body-text-color);
}

/* selected filter */
#filterSelectedContent:empty {display: none;}
#filterSelectedContent {
    position: relative;
    margin-top: 1rem;
}

#filterSelectedContent > .cat_name {
    position: relative;
    float: left;
    margin-right: .5rem;
    margin-bottom: .5rem;
}

/*#filterSelectedContent .cat_name span.cat_name {*/
/*    font-weight: var(--font-weight-bold);*/
/*}*/

#filterSelectedContent span[data-input-id] {
    display: block;
    position: relative;
    float: left;
    padding-left: 1rem;
    padding-right: 2rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    height: 2rem;
    line-height: 2rem;
    cursor: pointer;
}

#filterSelectedContent .cat_name span[data-input-id]:last-child {
    margin-right: 0;
}

/*#filterSelectedContent i.icon-cross {*/
/*    position: absolute;*/
/*    top: 1px;*/
/*    cursor: pointer;*/
/*    right: 1rem;*/
/*    !*color: #ff0000;*!*/
/*    font-size: 10px;*/
/*}*/

/* op de pagina */
#content #filterContent .price_max,
#content #filterContent .price_min {
    margin-top: 25px;
}

/* in de box */
#filterContainer #filterContent .price_max,
#filterContainer #filterContent .price_min {
    margin-top: 5px;
}

/* price slider */
#filterContent .price_min {
    position: relative;
    margin-left: 15px;
    float: left;
}

#filterContent .price_max {
    position: relative;
    margin-right: 15px;
    float: right;
    text-align: right;
}

/* Box */
#filterContainer #filterContent #filterPriceSliderContainer {
    position: relative;
    padding-bottom: 1rem;
}

/* Boven */
.products_listing_filter #filterContent #filterPriceSliderContainer {
    position: relative;
    padding-bottom: 2rem;
}

#filterContent #filterPriceSlider {
    position: relative;
    margin: 10px 25px 0;
}

#loading_splash {
    background: #fff none repeat scroll 0 0;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/*filter colors*/
ul.filter-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-half);
}

/* todo: kijken waar deze gebruikt worden en of dit opgelost is door de class .filter-color-swatches */
/*@supports selector(:has(a, b)) {*/
/*    div[class*="wrapper-filter-Kies"][class*="kleur"] ul:has(.filter-color),*/
/*    div[class*="wrapper-filter-kies"][class*="kleur"] ul:has(.filter-color),*/
/*    div[class*="color"] ul:has(.filter-color),*/
/*    div[class*="Color"] ul:has(.filter-color) {*/
/*        display: flex;*/
/*        flex-wrap: wrap;*/
/*        gap: var(--gutter-half);*/
/*    }*/
/*}*/

/*@supports not selector(:has(a, b)) {*/
/*    div[class*="wrapper-filter-Kies"][class*="kleur"] ul,*/
/*    div[class*="wrapper-filter-kies"][class*="kleur"] ul,*/
/*    div[class*="color"] ul,*/
/*    div[class*="Color"] ul {*/
/*        display: flex;*/
/*        flex-wrap: wrap;*/
/*        gap: var(--gutter-half);*/
/*    }*/
/*}*/

/*filters price slider*/
.priceRange input {
    display: unset;
}

table.priceRangeSlider tr td.col1 {
    width: 125px;
}

table.priceRangeSlider tr td.col3 {
    width: 110px;
    text-align: right;
}

/*filters headers*/
#content .filter-header {
    /*background-color: var(--grey-50);*/
}

#content .filter-header.filter_accordion span.item {
    border: 1px solid var(--border-color);
}

#content #filterContent {
    border-left: var(--border-width) solid var(--border-color);
    border-right: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

#content .filter-header span.item
/*, #filterContent .filter-content */
{
    border-top: 1px solid var(--border-color);
}

#content .filter-content {
    background-color: var(--webshop-background-color);
}

/*selected content*/
#filterSelectedContent .cat_name span[data-input-id] {
    position: relative;
    background-color: var(--webshop-background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

#filterSelectedContent .cat_name span[data-input-id]:hover {
    color: var(--link-color-hover);
    background-color: var(--grey-50);
}

#filterSelectedContent .cat_name span[data-input-id]:hover:after {
    content: var(--close-icon-hover);
}




#filterSelectedContent span[data-input-id]:after {
    position: absolute;
    content: var(--close-icon);
    width: 8px;
    height: 8px;
    top: 0.125rem;
    right: 1rem;
}




/*  TESTEN */

/*div.box_top,*/
/*.blog .box_top.boxBgShine00,*/
/*.filter-header span.item {*/
/*    text-transform: uppercase;*/
/*}*/

/*div.box_top,*/
/*.blog .box_top.boxBgShine00,*/
/*div#filterContainer div.filter-header {*/
/*    padding-bottom: 10px;*/
/*    line-height: 1em;*/
/*    border-bottom: 1px solid rgba(0, 0, 0, .1);*/
/*}*/

/*div.box_top,*/
/*div#filterContainer div.filter-header {*/
/*    margin-bottom: 10px;*/
/*}*/

/*div.box_top strong,*/
/*div#filterContainer div.filter-header span.item {*/
/*    font-weight: 500;*/
/*}*/

/*div#filterContent div.filter-content {*/
/*    border-top: none;*/
/*}*/

/*div.box div.box_content {*/
/*    padding: 5px 10px;*/
/*}*/

/*div#filterContent div#filterPriceSliderContainer {*/
/*    padding-bottom: 33px;*/
/*}*/

/*div#column_right div.box,*/
/*div#column_left div.box,*/
/*.filter-content {*/
/*    margin-bottom: 33px;*/
/*}*/


/*#column_left .box,*/
/*#column_left #filterContainer,*/
/*#column_left #filterContainer ,*/

/*Wishlist button Product overview*/
#wishlist_button.product_listing_btn-wishlist {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 4px;
    background-color: var(--webshop-background-color);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--grey-100);
}

#wishlist_button.product_listing_btn-wishlist:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--grey-200);
}

/*Wishlist button Product Details Page*/
.productinfo_btn-wishlist {
    /*margin-left: .5rem;*/
    border-color: var(--grey-400);
}


/*Wishlist button Product Details Page & Product overview*/
.btn-wishlist:hover,
.btn-wishlist:focus {
    border-color: var(--grey-600);
}

.btn-wishlist span {
    color: var(--grey-400);
}

.btn-wishlist:hover span,
.btn-wishlist:focus span {
    color: var(--grey-600);
}

/*wishlist popup*/
#st_index:not(.logged-in) .wishlist__content > .table-section,
#st_product:not(.logged-in) .wishlist__content > .table-section {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1199px) {
    .wishlist__content > .table-section {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    #st_index:not(.logged-in) .wishlist__content > .table-section,
    #st_product:not(.logged-in) .wishlist__content > .table-section {
        flex-direction: column;
    }
}

.wishlist__content h2 {
    margin-bottom: .5rem;
}

#wishlist_popup td {
    padding-bottom: 0;
}

#wishlist_popup .form_section {
    margin-bottom: 0;
}

.wishlist__content .table-section #new_customer,
.wishlist__content .table-section #login {
    flex: 1;
    padding: 1rem;
}

.wishlist__content .table-section #new_customer {
    background-color: var(--grey-100);
}

.wishlist__content .table-section #login {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wishlist_popup .button_checkout {
    margin-top: 1rem;
}

/* Wishlist account page */
#wishlist_container .form_section {
    margin-bottom: 0;
}

.wishlist_section-header,
.wishlist_section-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
}

.wishlist_section-header-title,
.wishlist_row-product {
    grid-column: 1 / span 6;
}

.wishlist_section-header-total,
.wishlist_row-price {
    grid-column: 7 / span 2;
}

.wishlist_section-header-quantity,
.wishlist_row-quantity,
.wishlist_row-soldout {
    grid-column: 9 / span 2;
}

.wishlist_row-delete {
    grid-column: 12;
}

.wishlist_section-row {
    --wishlist-row-border: var(--card-border);
    border: var(--wishlist-row-border);
    border-radius: var(--border-radius);
}

.wishlist_section-row:not(:last-of-type) {
    margin-bottom: var(--gutter);
}

.wishlist_section-row > div {
    padding-block: var(--gutter);
}

.wishlist_section-row > div:first-of-type {
    padding-inline-start: var(--gutter);
}

.wishlist_section-row > div:last-of-type {
    padding-inline-end: var(--gutter);
}

.wishlist_row-product {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
}


.wishlist_row-image img {
    max-width: 75px;
    max-height: 75px;
}

.wishlist_row-options span {
    font-size: var(--text-size-xs);
}

.wishlist_row-name b:after {
    content: "\a";
    white-space: pre;
}

.wishlist_row-soldout .h3 {
    font-size: var(--text-size-md);
}

.wishlist_row-check .label_check {
    margin-top: .125rem;
}

.wishlist_row-delete a {
    float: right;
}

@media screen and (max-width: 767px) {
    .wishlist_section-header-quantity {
        display: none;
    }

    .wishlist_section-header-title,
    .wishlist_row-product {
        grid-column: 1 / span 9;
    }

    .wishlist_section-header-total,
    .wishlist_row-price {
        grid-column: 10 / span 3
    }

    .wishlist_row-soldout,
    .wishlist_row-quantity {
        grid-column: 1 / span 6;
        padding-inline-start: var(--gutter);
    }

    .wishlist_row-soldout {
        display: flex;
        align-items: center;
    }

    .wishlist_row-soldout .h3 {
        margin-bottom: 0;
    }

    .wishlist_row-check {
        grid-column: 7 / span 2;
    }

    .wishlist_row-delete {
        grid-column: 11 / span 2;
    }
}

#st_account table tr td.messageStackSuccess div {
    margin-bottom: 1rem;
}
/****************************************/
/************* BLOG LISTING *************/
/****************************************/
.blog-card {
    --card-shadow: none;
}

.blog-card:hover .blog-card-image {
    filter: brightness(1.05); /* todo: evt. uitbreiden naar meer values voor utilities */
}

.blog-card-image {
    --blog-card-image-aspect-ratio: 2 / 1; /* todo: evt. backoffice optie van maken */
    background: var(--grey-100);
    object-fit: cover !important;
    aspect-ratio: var(--blog-card-image-aspect-ratio);
    transition: filter .1s ease;
}

.blog-card-info {
    margin-bottom: .5rem;
    font-size: var(--text-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.blog-card-heading {
    font-family: var(--heading-font-stack);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    font-size: var(--text-size-lg);
}

.blog-card-text {
    font-size: var(--text-size-sm);
}

/* TODO: deze media query vervangen met container query */
@media (min-width: 992px) {
    .blog-card-heading {
        font-size: var(--text-size-xl);
    }

    .blog-card-text {
        font-size: var(--text-size-md);
    }
}


/******************************************/
/************* BLOG POST PAGE *************/
/******************************************/
.blog-post-featured-image img {
    height: auto;
    width: 100%;
}

.blog-post-author {
    font-weight: var(--font-weight-bold);
}

.blog-post-date {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: .05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.blog-post__socialshare-button-container {
    margin-top: .5rem;
}

.blog-post-content {
    margin-top: 1rem;
}

.blog-post-content p {
    margin-bottom: 1rem;
}
div.wrapper.smallScreen.sticky_dropdownmenu,
div.wrapper.wideScreen.sticky_dropdownmenu{
	position: fixed;
	top: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
	margin-top: 0px;
}
.ui-menu {
    --autocomplete-image-border-width: 1px;
    --autocomplete-image-border-color: var(--border-color);
    --autocomplete-image-max-width: 50px;
    --autocomplete-image-max-height: 50px;
    --autocomplete-padding: var(--st-spacing-xs);
    --autocomplete-border-radius: var(--border-radius-small);
}

ul.ui-autocomplete {
    width: unset !important;
    box-shadow: var(--shadow-lg);
    border: none;
    z-index: var(--autocomplete-z-index);

}

ul.ui-autocomplete,
.autocomplete-item-wrapper.ui-menu-item:last-of-type {
    border-bottom-left-radius: var(--autocomplete-border-radius);
    border-bottom-right-radius: var(--autocomplete-border-radius);
}

.ui-menu a {
    color: var(--grey-600);
}

.ui-menu a:hover {
    color: var(--grey-800);
}

.ui-menu span {
    display: table-cell;
    text-align: center;
    border: var(--autocomplete-image-border-width) solid var(--autocomplete-image-border-color);
    border-radius: var(--autocomplete-border-radius);
}

.ui-menu span img {
    max-width: var(--autocomplete-image-max-width);
    max-height: var(--autocomplete-image-max-height);
    border-radius: var(--autocomplete-border-radius);
}

li.autocomplete-item-wrapper:hover {
    background: var(--grey-100);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    padding: var(--autocomplete-padding);
}

.autocomplete-item img {
    vertical-align: middle;
}

.autocomplete-text {
    padding-left: var(--autocomplete-padding);
    width: 250px;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

.autocomplete-price {
    margin-left: auto;
    padding-inline: var(--autocomplete-padding);
    font-weight: var(--font-weight-bold);
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px
}

/*.ui-autocomplete .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap
}*/

.ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none
}
div#owl-carousel-merkenslider .owl-stage {
    display: flex;
    align-items: center;
}

#owl-carousel-merkenslider .owl-item img {
    margin: 0 auto;
    max-height: 60px;
}

div#owl-carousel-merkenslider div.owl-nav {
    height: 0px !Important;
}
div#owl-carousel-merkenslider .owl-nav.disabled {
    display: block;
}

div#owl-carousel-merkenslider .owl-prev,
div#owl-carousel-merkenslider .owl-next {
    width: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
}

div#owl-carousel-merkenslider .owl-prev {
    left:0%;
}div#owl-carousel-merkenslider .owl-next {
    right:0%;
}

div#owl-carousel-merkenslider .owl-dots {
    display: none;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Nee

dus ---> ... inladen - Uittesten met CLS?
*/


/*
--section-space-y was hier te krap. Omdat de footer een andere bg color heeft en veel content bevat moet deze meer ademruimte hebben dan normale secties.
*/

.site-footer {
    /*--footer-margin-y: .5rem;*/
    --footer-padding-y: clamp(2rem, calc(3 / 75 * 100vw), 3rem);
    --footer-font-size: var(--text-size-sm);
    --footer-margin-y-start: clamp(2rem, calc(3 / 75 * 100vw), 3rem);

    --footer-socket-font-size: var(--text-size-sm);
    --footer-socket-padding-y: 2rem;

    --footer-caret-icons-display: flex;

    margin-block-start: var(--footer-margin-y-start);
    color: var(--footer-text-color);
    background-color: var(--footer-bg-color);
}

/* Footer grid */
.site-footer .one,
.site-footer .two,
.site-footer .three,
.site-footer .four {
    position: relative;
}

.site-footer-inner {
    --footer-box-gutter: var(--gutter);
    --footer-box-gutter-y: var(--footer-box-gutter);
    --footer-box-gutter-x: var(--footer-box-gutter);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--footer-box-gutter-x);
    grid-row-gap: var(--footer-box-gutter-y);
}

@media screen and (max-width: 575px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 12;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 6;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 4;
    }
}

@media screen and (min-width: 992px) /*and (max-width: 1199px)*/ {
    .site-footer .one {
        grid-column: span 12;
    }
    .site-footer .two {
        grid-column: span 6;
    }
    .site-footer .three {
        grid-column: span 4;
    }
    .site-footer .four {
        grid-column: span 3;
    }
}

.site-footer-inner .clear {
    display: none;
}

/* Footer styling */


.site-footer-inner {
    padding-block: var(--footer-padding-y);
}

/* Misschien is in percentage niet heel mooi - wellicht met breakpoints werken */
.site-footer .box {
    margin-right: 10%;
    margin-bottom: 1rem;
}

/* FOOTER HEADINGS */
.site-footer .box_top {
    width: 100%;
    margin-bottom: var(--box-margin-y);
    text-transform: var(--box-titles-transform);
}
.site-footer .box_top p {
    font-weight: var(--box-titles-font-weight);
}
.site-footer .box_top h2 {
    margin: 0;
}

/* FOOTER BOX CONTENT */
.site-footer .box_content * {
    font-size: var(--footer-font-size);
}

.poweredby a:not(.btn),
.site-footer-inner > a:not(.btn),
.site-footer-inner .box_top,
.site-footer-inner .box_top a:not(.btn),
.site-footer-inner .box_content,
.site-footer-inner .box_content a:not(.btn) {
    color: var(--footer-text-color);
}

.poweredby a:not(.btn):hover,
.site-footer-inner > a:not(.btn):hover,
.site-footer-inner .box_top a:not(.btn):hover,
.site-footer-inner .box_content a:not(.btn):hover,
.poweredby a:not(.btn):active,
.site-footer-inner > a:not(.btn):active,
.site-footer-inner .box_top a:not(.btn):active,
.site-footer-inner .box_content a:not(.btn):active,
.poweredby a:not(.btn):focus,
.site-footer-inner > a:not(.btn):focus,
.site-footer-inner .box_top a:not(.btn):focus,
.site-footer-inner .box_content a:not(.btn):focus {
    color: var(--footer-text-color-hover);
}

.site-footer .box_content li span.st-icon-caret-right {
    display: var(--footer-caret-icons-display);
}

.site-footer .column-widget li {
    margin-block: .5em;
}

/***************** SOCKET (balk onder de footer) ********************/
.site-footer-socket {
    background-color: var(--footer-socket-bg-color);
    text-align: center;
}

.site-footer-socket,
.site-footer-socket * {
    font-size: var(--footer-socket-font-size);
    color: var(--footer-socket-text-color);
}

.site-footer-socket a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.site-footer-socket a:hover {
    color: var(--footer-socket-text-color-hover);
}

.site-footer-socket-inner {
    padding-block: var(--footer-socket-padding-y);
}
/* Algemene variabelen */
:root {
	--heading-font-weight: var(--font-weight-regular);
  	--box-heading-font-size: var(--text-size-md);
  	--stars-color: var(--grey-900);
    --card-shadow: none;
}

/* Aanpassingen voor de site-header */
.site-header-nav-item {
    --header-icons-border-radius: 0;
}

/* Aanpassingen voor widget-kaarten */
.widget-card {
	--card-border-color: var(--grey-500);
    --bs-card-spacer-y: 2rem;
}

/* Aanpassingen voor kaarttitels */
.card-title {
    font-weight: var(--card-font-weight);
    font-family: var(--heading-font-stack);
    font-size: var(--text-size-xl);
    font-weight: 400;
}

/* Aanpassingen voor beoordelingssterren */
.rating_stars {
  	--st-icon-size: .85em;
	--st-icon-min-size: var(--st-icon-size);
}

/* Aanpassingen voor productnaamkoppen */
.products_name_heading {
    font-family: var(--heading-font-stack);
    --product-name-heading-font-weight: var(--font-weight-regular);
}

/* Aanpassingen voor productprijzen */
.products_price .normalPrice, .products_price .specialPrice, .custom_price_mtw_listing .normalPrice, .custom_price_mtw_listing .specialPrice {
    font-size: var(--text-size-md);
}
.normalPrice, .specialPrice {
    --price-font-weight: var(--font-weight-regular);
}

/* Aanpassingen voor productlijstingsboxen: inhoud centreren */
.products_gallery_header {
    text-align: center;
}
.products_gallery_body {
    text-align: center;
}
.products_price.products_gallery_row_price {
    justify-content: center;
}