/*
/**
 * @file
 * Visual styles for inline forms.


.form--inline .form-item {
  float: left; /* LTR *
  margin-right: 0.5em; /* LTR *
}

.form--inline .form-item-separator {
  margin-top: 2.3em;
  margin-right: 1em; /* LTR *
  margin-left: 0.5em; /* LTR *
}

.form--inline .form-actions {
  clear: left; /* LTR *
}

.form-item:not(:last-child),
.form-actions:not(:last-child) {
  margin-bottom:var(--gutter-2);
}



.form-item {
  margin-top: 9px;
  padding-top: 0;
  padding-bottom: 0;
}
.form-type-checkbox {
  margin-top: 6px;
}
.form-checkbox,
.form-radio {
  vertical-align: baseline;
}
/**
 * @file
 * Visual styles for a resizable textarea.

.form-textarea-wrapper textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}



/**
 * @file
 * Visual styles for form components.
 

form .field-multiple-table {
  margin: 0;
}
form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0; /* LTR 
}
[dir="rtl"] form .field-multiple-table .field-multiple-drag {
  padding-left: 0;
}
form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0.5em; /* LTR 
}
[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0;
  padding-left: 0.5em;
}
form .field-add-more-submit {
  margin: 0.5em 0 0;
}

/**
 * Markup generated by Form API.
 
tr.odd .form-item,
tr.even .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85em;
}
label.option {
  display: inline;
  font-weight: normal;
}
.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2.4em; /* LTR 
}

.marker {
  color: #e00;
}
.form-required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  /* Use a background image to prevent screen readers from announcing the text. 
  background-image: url(../../images/icons/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}
abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid red;
}

/* Inline error messages. 
.form-item--error-message::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) no-repeat;
  background-size: contain;
}



.form-item,
.form-actions {
  margin-top: 1em;
  margin-bottom: 1em;
}
tr.odd .form-item,
tr.even .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85em;
}
label.option {
  display: inline;
  font-weight: normal;
}
.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2.4em; /* LTR 
}

.marker {
  color: #e00;
}
.form-required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  /* Use a background image to prevent screen readers from announcing the text. 
  background-image: url(../../images/icons/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}
abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid red;
}

/* Inline error messages. 
.form-item--error-message::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) no-repeat;
  background-size: contain;
}
*/


html {
    --border-radius-button:var(--border-radius-small);
    --border-radius-textfield:var(--border-radius-small);
    --background-textfield:var(--color-white);
    --background-textfield-placeholder:var(--color-white);
    --shadow-button:rgba(255, 255, 255, .4) 0 1px 0 0 inset;
    --shadow-button-text:0px 1px var(--color-link);
    --color-button-border:var(--color-link);

    /*todo*/
    --background-button:var(--color-link);
    --background-button-hover:var(--color-link);
}
            
        /*todo
            background:linear-gradient(rgb(179 201 248) 2%, rgb(129 131 196) 10%,rgb(152 180 200));
            */


/* Basic Input Styles */

    textarea,
    [type="text"],
    [type="number"],
    [type="email"],
    [type="tel"],
    [type="password"],
    [type="search"] {
        border: 0px;
        border-radius: var(--border-radius-textfield);
        padding: 0.4em 0.6em;
        background-color:var(--background-textfield);
        font: var(--font-main);
    }
    
    [type="text"] {
        width:100%;
    }
    
    input[type="number"] {
        -moz-appearance: textfield; /* Firefox */
    }

    [type="radio"],
    [type="checkbox"],
    [type="radio"] ~ label,
    [type="checkbox"] ~ label {
        cursor: pointer;
    }

    [type="radio"],
    [type="checkbox"] {
        accent-color: var(--color-link);
        cursor: pointer;
    }

    input:placeholder-shown,
    input:invalid,
    [type="tel"].error {
        background-color: var(--background-textfield-placeholder);
    }

    form {
        display:flex;
        flex-direction:column;
        gap:var(--gutter-1);
    }

    /* Button */

    input[type="submit"],
    a.button { 
        cursor: pointer;
        display: inline-block;
        border-radius:var(--border-radius-button);
        box-shadow: var(--shadow-button);
        padding:calc(var(--gutter-1)*0.5) var(--gutter-1);
        font:var(--font-small);
        font-weight:bold;
        border:1px solid var(--color-button-border);
        background:var(--background-button);
        color:var(--color-white);
        text-shadow:var(--shadow-button-text);
        outline: none;
        text-align: center;
        text-decoration: none;
    }

    input[type="submit"]:hover,
    a.button:hover {
        background:var(--background-button-hover);
    }

/* Variables 




    

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


/* Basic Form Styles 

    .form-item:not(.webform-section):not(.form-type-number):not(.form-type-checkbox) {
    /*    margin: 0px;
    }

    .form-item .fieldset-legend,
    .form-item:has(.visually-hidden.fieldset-legend) label,
    .form-item.form-type-date label,
    .form-type-webform-time>label,
    .form-type-number>label {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
    }

/* Checkbox 

    .form-type-checkbox {
        position: relative;
    }

    .form-type-checkbox span {
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .form-type-checkbox:not(.form-no-label) [type="checkbox"] {
        display: none;
    }

    .form-type-checkbox [type="checkbox"] ~ label {
        display: inline-flex;
        height: 1.6em;
        align-items: center;
        gap: 10px;
    }

    .form-type-checkbox [type="checkbox"] ~ label:before {
        content: "";
        display: block;
        height: 100%;
        aspect-ratio: 1/1;
        width: auto;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .form-type-checkbox [type="checkbox"] ~ label:after {
        content: "";
        display: none;
        position: absolute;
        left: 0.55em;
        top: 0.15em;
        width: 0.45em;
        height: 0.9em;
        border: solid #ffffff;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        filter: drop-shadow(-1px -1px 1px #3452198a);
    }

    .form-type-checkbox:hover [type="checkbox"]:not(:disabled) ~ label:before {
        background-color: #ffffff;
        box-shadow: var(--shadow-button);
    }

    .form-type-checkbox [type="checkbox"]:checked ~ label:before {
        border-color: var(--color-green);
        background: var(--background-radio);
        background-position-y: 14px;
        box-shadow: var(--shadow-button);
    }

    .form-type-checkbox [type="checkbox"]:checked ~ label:after {
        display: block;
    }

    .form-type-checkbox:has([type="checkbox"]:disabled) {
        color:grey;
    }

    .form-type-checkbox [type="checkbox"]:disabled ~ label,
    .form-type-checkbox [type="checkbox"]:disabled ~ label:before,
    .form-type-checkbox [type="checkbox"]:disabled ~ label:after {
        cursor: not-allowed;
    }

    .form-type-checkbox [type="checkbox"]:disabled ~ label:before {
        opacity:0.7;
    }

    .form-type-checkbox [type="checkbox"]:checked:disabled ~ label:before {
        filter: grayscale(100);
    }


/* Radios 

    .webform-options-display-buttons,
    .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        margin: 0;
    }

    .webform-options-display-buttons {
        display: flex;
        gap: 8px;
    }

    .webform-options-display-buttons-vertical {
        flex-direction: column;
    }

    .webform-options-display-buttons [type="radio"] ~ label {
        text-align: left;
        position: relative;
        background-color: var(--color-white);
        border: 1px solid #ccc;
        color: var(--color-text);
        border-radius: var(--border-radius-textfield);
    }

    .webform-options-display-buttons [type="radio"] ~ label:before,
    .webform-options-display-buttons [type="radio"] ~ label:after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .webform-options-display-buttons [type="radio"] ~ label:before {
        display: block;
        height: 20px;
        width: 20px;
        background-color: #dfdfdf85;
        border: 1px solid #ccc;
        transition: background-color 0.3s;
    }

    .webform-options-display-buttons [type="radio"] ~ label:after {
        display: none;
        width: 12px;
        height: 12px;
        background: radial-gradient(circle, rgb(127 200 59) 0%, #345219 100%);
        border: 1px solid var(--color-green);
        background-position-y: 5px;
    }

    .webform-options-display-buttons input:disabled:hover ~ label.webform-options-display-buttons-label {
        box-shadow:none;
    }
    
    .webform-options-display-buttons input:hover ~ label.webform-options-display-buttons-label,
    .webform-options-display-buttons input:focus ~ label.webform-options-display-buttons-label {
        border-color: var(--color-green-half);
        box-shadow: var(--shadow-button);
    }

    .webform-options-display-buttons [type="radio"]:not(:checked):not(:disabled) ~ label:hover:before {
        background-color: #cccccc8c;
    }

    .webform-options-display-buttons input:checked ~ label.webform-options-display-buttons-label {
        border-color: var(--color-green);
        box-shadow: var(--shadow-button);
        background-color: #f1ffed8a;
    }

    .webform-options-display-buttons [type="radio"]:checked ~ label:after {
        display: block;
    }

    .webform-options-display-buttons input:checked:focus + label.webform-options-display-buttons-label {
        box-shadow: inset 0px 0px 1px var(--color-green), var(--shadow-button);
    }

    .webform-options-display-buttons [type="radio"]:disabled ~ label {
        color:grey;
    }




    .webform-options-display-buttons .form-item label .description {
        margin: 0px;
    }


/* Number 

    .form-type-number {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-wrap: wrap;
    }

    .form-type-number > label {
        margin: 0px;
    }

    .form-type-number:not(:has(.description)) label,
    .form-type-number .description {
        flex-grow: 1;
    }

    .form-type-number .description {
        padding-left: 10px;
    }

    .form-type-number span {
        padding-right: 10px;
    }

    .form-type-number input {
        order: 2;
    }

    button.input_number {
        display: block;
        justify-self: flex-end;
    }

    button.input_number,subtract {
        order: 1;
    }

    button.input_number.subtract::before {
        content: "-";
    }
    
    button.input_number.add {
        order: 3;
    }

    button.input_number.add::before {
        content: "+";
    }



/* Form Required 

    [type="checkbox"] ~ .form-required::after {
        vertical-align: super;
        background-image: none;
        background-repeat: no-repeat;
        background-size: 6px 6px;
        margin: 0px;
    }

    .form-type-checkbox:has(.form-required):after {
        background-image: url(../images/icons/required.svg);
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0px;
        content: "";
        vertical-align: super;
        background-repeat: no-repeat;
        background-size: 6px 6px;
    }



/* Form Summary 

    .webform-submission-data details {
        border-radius: var(--border-radius-textfield);
        padding: 10px;
        margin-top: 0px;
        margin-bottom: 2em;
        border: 1px solid var(--color-green);
        box-shadow: inset 0px 0px 1px var(--color-green);
    }

    .webform-submission-data summary {
        font-weight: bold;
    }

    .webform-submission-data .details-wrapper {
        display: grid;
        grid-template-columns: max-content 1fr;
        row-gap: 10px;
        column-gap: 14px;
    }

    .webform-submission-data .details-wrapper section,
    .webform-submission-data .details-wrapper .webform-section-wrapper {
        display: contents;
    }

    .webform-submission-data .details-wrapper .form-item:not(section) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/3;
    }


/* Reservatie - Contactinformatie 


    .form-item.js-form-type-tel+strong.error.form-item--error-message {
        margin-top: 0px;
    }

    .iti {
        z-index: 0;
        margin-bottom: 10px;
    }

    .form-item-privacyverklaring {
        grid-column: 2;
        display: flex;
    }

    /* Desktop Only 

    @media only screen and (min-width:768px) {
      

        .form-type-processed-text {
            grid-column: 1/3;
        }

        fieldset.webform-type-webform-name .fieldset-wrapper {
            display: flex;
            gap: 8px;
            width: 100%;
        }

        fieldset.webform-type-webform-name .fieldset-wrapper div {
            width: 100%;
            flex-grow: 1;
        }

        .form-item.form-type-email input,
        .form-item.form-type-email .error {
            width: 100%;
            grid-column: 2;
        }
    }




.webform-submission-data .webform-section-title {
    display: none;
}
.webform-element--title-inline>label {
    padding-right: 8px;
}


input[value="blotevoetenpad"] ~ [data-drupal-selector="edit-reservatiedetails"] .form-item-aantal-personen-min {
   display:flex!important;
}

.form-item {
    margin-left:0px;
    margin-right:0px;
}

.webform-options-display-buttons .form-item {
    margin:0px;
}

[data-drupal-selector="edit-contactinformatie"] .form-item:not(.form-type-checkbox) {
    margin:0px;
}

.form-type-textarea {
    margin-bottom:20px;
}

.form-item-allergieen {
    
    margin-left:20px;
    
}

.form-type-textarea label {
    font-weight:bold;
    margin-bottom:10px;
    display:block;
}

.webform-submission-data .details-wrapper .form-item:not(section) {
    margin:0px;
}