/**
    Algemene instellingen
 */
* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}

.kb-hidden {
    display: none;
}

.kb-selectable {
    cursor: pointer;
}

.kb-selected {
    background-color: rgba(255, 0, 0, 0.25);
}

/**
    Instellingen van input controls
 */
label {
    align-items: center ;
    cursor: pointer ;
    display: flex ;
}

label input {
    margin: 0px 0px 0px 10px ;
}

button, input[type=button], input[type=submit], input[type=reset] {
    margin: 5px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 15px;
    background: red;
    border: solid 1px red;
    color: white;
    padding: 15px;
}

button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    color: red;
    background: white;
}

button.button-secondary, input[type=button].button-secondary, input[type=submit].button-secondary, input[type=reset].button-secondary {
    background-color: darkgray;
    border-color: darkgray;
}
button.button-secondary:hover, input[type=button].button-secondary:hover input[type=submit].button-secondary:hover, input[type=reset].button-secondary:hover {
    background: white;
    border-color: darkgray;
    color: red;
}

input:not([type=button]):not([type=reset]):not([type=submit]):not([type=image]):not([type=checkbox]) {
    margin: 5px;
    border: solid 1px red;
    border-radius: 15px;
    padding: 15px;
}

input:not([type=image]):focus {
    outline-color: red;
}

input:not([type=button]):not([type=reset]):not([type=submit]):not([type=image]):not([type=checkbox]):not([type=radio]), select {
    width: 80%;
}

/** style SELECT **/
select,
select::before,
select::after,
option,
option::before,
option::after {
    box-sizing: border-box;
}

:root {
    --select-border: red;
    --select-focus: red;
    --select-arrow: var(--select-border);
}

select {
    /* A reset of styles, including removing the default dropdown arrow */
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;

    /* Stack above custom arrow */
    z-index: 1;

    /* Remove dropdown arrow in IE10 & IE11
       @link https://www.filamentgroup.com/lab/select-css.html */
    &::-ms-expand {
        display: none;
    }

    /* Remove focus outline, will add on alternate element */
    outline: none;
}

.select {
    margin: 5px;
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;

    select,
    &::after {
        grid-area: select;
    }

    min-width: 5ch;
    max-width: 30ch;

    border: 1px solid var(--select-border);
    border-radius: 0.25em;
    padding: 0.25em 0.5em;

    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1.1;

    /* Optional styles remove for transparency */
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

    /* Custom arrow */
    &:not(.select--multiple)::after {
        content: "";
        justify-self: end;
        width: 0.8em;
        height: 0.5em;
        background-color: var(--select-arrow);
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }
}

/* Interim solution until :focus-within has better support */
select:focus + .focus {
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   border: 2px solid var(--select-focus);
   border-radius: inherit;
}

select[multiple] {
    padding-right: 0;

    /*
     * Safari will not reveal an option
     * unless the select height has room to
     * show all of it
     * Firefox and Chrome allow showing
     * a partial option
     */
    height: 6rem;

    option {
        white-space: normal;

        /* Only affects Chrome */
        outline-color: var(--select-focus);
    }

    /*
     * Experimental - styling of selected options
     * in the multiselect
     * Not supported crossbrowser
     */
    /*
    &:not(:disabled) option {
      border-radius: 12px;
      transition: 120ms all ease-in;

      &:checked {
        background: linear-gradient(hsl(242, 61%, 76%), hsl(242, 61%, 71%));
        padding-left: 0.5em;
        color: black !important;
      }
    }
     */
}

.select--disabled {
    cursor: not-allowed;
    background-color: #eee;
    background-image: linear-gradient(to top, #ddd, #eee 33%);
}

label {
    font-size: 1.125rem;
    font-weight: 500;
}

.select + label {
    margin-top: 2rem;
}
/** end style SELECT **/

/** Checkbox styling */
/*
    Only apply custom styles to browsers that are going to support them. This is
    important because even old browsers will apply SOME of these CSS properties;
    and, we don't want to create Frankenstein checkboxes.
*/
@supports ( appearance: none ) or ( -moz-appearance: none ) or ( -webkit-appearance: none ) {

    input[type="checkbox"] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 2px solid currentcolor;
        border-radius: 52px 52px 52px 52px;
        box-sizing: content-box;
        color: #999999;
        height: 18px;
        padding: 2px 2px 2px 2px;
        transition-duration: 300ms;
        transition-property: border-color, color; /* Safari needed border-color. */
        transition-timing-function: ease;
        width: 52px;
        margin: 0 1em 0 1em;
    }

    input[type="checkbox"]:checked {
        color: #ff3366;
    }

    /*
        NOTE: The ::after pseudo-selector is being applied to the INPUT itself,
        not a parent element. I had no idea this even works! I can't find any
        documented support on this (just some StackOverflow threads).
    */
    input[type="checkbox"]::after {
        background-color: currentcolor;
        border-radius: 10px 10px 10px 10px;
        content: "";
        display: block;
        height: 18px;
        transform: translateX(0px);
        transition: transform 300ms ease;
        width: 24px;
    }

    input[type="checkbox"]:checked::after {
        transform: translateX(27px);
    }
}
/** End checkbox styling */

/**
    Keuzehulp button
 */
div.kb-keuzehulp-button {
    text-align: center;
}

div.kb-keuzehulp-button::before {
    content: "\24D8";
    margin-right: 1em;
}

/**
    Modal dialog
 */
/* The Modal (background) */
.kb-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    /* Dit is de truc */
    justify-content: center;
    align-items: center;
}

/* Modal Content/Box */
.kb-modal-content {
    background-color: #fefefe;
    padding: 0 20px;
    border: 1px solid #888;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: kb-animatetop;
    animation-duration: 0.4s
}

@media (min-width: 800px) {
    .kb-modal-content {
        width: 80%;
        max-height: 80%;
    }
}

/* Modal Header */
.kb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
    padding: 2px 16px;
    background-color: #ff0000;
    color: white;
}

/* The Close Button */
.kb-modal-close {
    color: #ffffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.kb-modal-close:hover,
.kb-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Body */
.kb-modal-body {
    padding: 2px 16px;
}

/* Modal Footer */
.kb-modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@keyframes kb-animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/**
    Foutmeldingen en waarschuwingen
 */

div.kb-fout {
    border: solid 3px rgb(255, 32, 4);
    background-color: rgba(236, 167, 173, 0.35);
    border-radius: 15px;
    color: red;
    padding: 15px;
    margin: 15px 0;
}

input.kb-fout,
select.kb-fout {
    border: solid 3px rgb(255, 32, 4) !important;
}

div.kb-waarschuwing {
    color: yellow;
    border: 1px solid yellow;
    background-color: rgb(141, 112, 73);
    border-radius: 15px;
    margin: 5px;
    padding: 15px;
}

/**
    De winkelwagen
 */
div.kb-winkelwagen-knoppenbalk {
    display: none;  /* Standaard niet laten zien, alleen voor brede schermen */
}

#kb-winkelwagen-receipt {
    margin: 75px 10px 10px 10px;
}

#kb-winkelwagen {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

@media (min-width: 800px) {
    #kb-winkelwagen {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        max-width: 1000px;
    }

    /* Kolom met abonnementen */
    #kb-winkelwagen-selectie-container {
        flex-grow: 1;
    }

    #kb-winkelwagen-receipt {
        position: sticky;
        top: 50px;
        margin: 0 10px 10px 10px;
        min-width: 250px;
    }

    div.kb-winkelwagen-knoppenbalk {
        display: block;
    }
}

/* Selectie zakelijk of particulier */
.kb-zakelijk-of-particulier {
    display: flex;
    gap: 15px;
}

.kb-zakelijk-of-particulier div {
    flex-grow: 1;
}

/* Abonnement */
.kb-abonnement {
    display: flex;
    column-gap: 25px;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 25px;
    border: 1px solid red;
}

/* Sub-kolom met image van abonnement */
.kb-abonnement-image {

}

img.kb-abonnement-image {
    max-width: 80px;
}

@media (min-width: 800px) {
    img.kb-abonnement-image {
        max-width: 160px;
    }
}

/* Sub-kolom met informatie over het abonnement */
.kb-abonnement-info {

}

.kb-abonnement-naam {
    font-weight: bold;
}

.kb-abonnement-omschrijving {
    font-style: italic;
}

.kb-abonnement-tarief-omschrijving {

}

.kb-abonnement-korting {
    font-weight: bold;
}

/* Keuze tarieven */
#kb-abonnement-keuzetarieven {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 25px;
    border: 1px solid red;
}

.kb-keuzetarief-header {
    font-size: large;
    font-weight: bold;
}

.kb-abonnement-keuzetarief {

}

/** Correspondentie adres */
@media (min-width: 480px) {
    div.afwijkend_correspondentieadres {
        display: flex; gap: 1em;
    }
}

div.correspondentieadres {
    margin: 15px 0;
}

/** Bevestiging en akkoord met incasso */
div.bevestigen_en_incasso_akkoord {
    margin: 15px 0;
}

/** Disclaimer */
div.disclaimer .titel p {
    font-weight: bold;
}

div.disclaimer .content {
}

/** Receipt */
.kb-winkelwagen-receipt-header {
    font-size: large;
    font-weight: bold;
}

table.kb-receipt {
    border-collapse: collapse;
    width: 100%;
}

table.kb-receipt td,
table.kb-receipt th {
    text-align: left;
}

table.kb-receipt th {
    padding-right: 1em;
}

table.kb-receipt th.kb-title {
    color: red;
}

table.kb-receipt td.kb-valuta {
    text-align: right;
}

table.kb-receipt tr.kb-group-start {
    border-top: solid 1px lightgrey;
}

table.kb-receipt tr.kb-group-end {
    border-bottom: solid 1px lightgrey;
}

table.kb-receipt tr.kb-receipt-samenvatting {
    border-top: double 3px black;
    font-weight: bold;
}

table.kb-receipt tr.kb-receipt-samenvatting th,
table.kb-receipt tr.kb-receipt-samenvatting td {
    padding-bottom: 1em;
}

table.kb-receipt tr.kb-receipt-samenvatting-korting {

}

table.kb-receipt tfoot th,
table.kb-receipt tfoot td {
    font-size: 0.8em;
    font-style: italic;
    padding-bottom: 1em;
}

.kb-loader {
    height: 5px;
    width: 100%;
    --c:no-repeat linear-gradient(#ff0000 0 0);
    background: var(--c),var(--c),rgba(255, 0, 0, 0.25);
    background-size: 60% 100%;
    animation: l16 3s infinite;
}
@keyframes l16 {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
}

div.kb-addon-categorie-titel,
div.kb-addon-categorie-titel p,
p.kb-addon-categorie-titel {
    margin-top: 0.5em;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
}

div.kb-addon-categorie-omschrijving,
div.kb-addon-categorie-omschrijving p,
p.kb-addon-categorie-omschrijving {

}

img.kb-addon-afbeelding {
    max-width: 50px;
    max-height: 50px;
    vertical-align: middle;
    margin-right: 2em;
}

.kb-addon-titel {
    padding: 15px 0;
    font-weight: bold;
}

.kb-addon-omschrijving p {
    margin-left: 20px;
    font-style: italic;
    font-size: small;
}

.kb-addon-korting-omschrijving {
    margin-left: 20px;
    font-weight: bold;
    font-style: italic;
    font-size: small;
}

/**
    Persoonsgegevens
 */
@media (min-width: 800px) {
    div.geslacht_en_naam {
        display: flex;
        gap: 1em;
        align-items: baseline;
    }
}

/**
    Togglers
 */
@media (min-width: 800px) {
    .kb-toggle-container {
        display: flex;
        column-gap: 25px;
    }
}

.kb-toggle-titel {
    font-weight: bold;
    padding: 0 15px;
    margin: 5px;
}

.kb-toggle,
.kb-toggle-50 {
    cursor: pointer;
    border-radius: 25px;
    padding: 5px 15px;
    margin: 5px;
}

@media (min-width: 800px) {
    .kb-toggle,
    .kb-toggle-50 {
        padding: 0 15px;
    }
}

/**
    Cards
 */
.kb-card-container,
.kb-card-container-1-2 {
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.kb-card {
    width: auto;
}

@media (min-width: 600px) {
    .kb-card-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .kb-card-container-1-2 {
        grid-template-columns: 20% auto;
    }
}