body{background: #f5f5f5;}
#slider{display: none;}

.btn.dyellow{color: #1A2B3C}

/**** Messages ****/
.config_messages{border-radius: 4px; overflow: hidden;margin: 0 0 35px;}
.config_message{padding: 10px 25px; margin: 0 0 10px;}
.config_message ul{padding-left: 19px;}
.config_message:last-child{margin-bottom: 0;}
.config_message.success{background: #e6ffe3; border: 1px solid #3AB92C}
.config_message.success li{color: #3AB92C!important;}
.config_message.errors{background: #f8cccc; border: 1px solid #DC0401;}
.config_message.errors li{color: #DC0401!important;}
.config_message li:before{color: inherit!important;}
.config_message.edit{background: #fff8d6; border: 1px solid #FFD500;}
.config_message.edit p{margin: 0 0 6px; color: #1A2B3C;}
.config_message.edit p:last-child{margin-bottom: 0;}

#config_block{margin: 0 0 70px 0}

.btn{border-radius: 30px; text-align: center}

.config_loader{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgb(200, 200, 200, 0.5); z-index: 2}
.config_loader i{font-size: 48px; color: #fff;}

.config_block_steps{background: #fff; padding: 35px 25px; margin: 0 0 35px}
.config_block_steps_list{width: 100%; display: flex; position: relative; overflow: hidden;}
.config_block_steps_list:before{content: ''; width: 100%; height: 6px; background: #f5f5f5; position: absolute; left: 0; bottom: 5px;}
.cbs_item{width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; gap: 15px; color: #1A2B3C; position: relative; z-index: 2}
.cbs_item span{width: 16px; height: 16px; border-radius: 100%; background: #f5f5f5; flex-shrink: 0; position: relative; z-index: 2;}
.cbs_item.current span,
.cbs_item.done span{background: #FFD500;}
.cbs_item.done_next span{background: #FFF1AA;}

a.cbs_item:hover span,
a.cbs_item:hover:before{background: #FFD500; z-index: 6}

.cbs_item.done_next:hover{z-index: 5;}
.cbs_item.current,
.cbs_item.done{z-index: 4;}
.cbs_item.done_next{z-index: 3;}

.cbs_item:last-child:after,
.cbs_item:before{content: ''; float: left; width: 100vw; right: 50%; bottom: 5px; height: 6px; background: #f5f5f5; position: absolute; pointer-events: none;}
.cbs_item:last-child:after{left: 50%; right: auto!important; background: #fff!important;}

.cbs_item:first-child{z-index: 9}
.cbs_item:first-child:before{background: #fff!important;}

/*.cbs_item:last-child{z-index: 9}*/

.cbs_item.current:before,
.cbs_item.done:before{background: #FFD500;}
.cbs_item.done_next:before{background: #FFF1AA;}

.config_block{display: flex; gap: 50px}
.config_block_right{width: 350px; flex-shrink: 0;}

.config_block_list{display: flex; flex-direction: column; gap: 35px}
.config_block_item{display: flex; flex-direction: column; background: #fff;}
.config_block_item_head{display: flex; gap: 25px; padding: 15px 50px; background: #1A2B3C; align-items: center; justify-content: space-between;}

.config_block_item_head_right{display: flex; gap: 15px;}
.config_block_item_head_right .btn{white-space: nowrap;}

.config_block_item_body{padding: 35px 50px; display: flex; flex-direction: column; gap: 30px; position: relative;}
.config_block_item_foot{padding: 25px 50px; background: #f5f5f5;}

.config_item_list{display: flex; gap: 28px; flex-wrap: wrap;}
.config_item_list_item{display: flex; width: calc(25% - 21px); flex-direction: column;}
.cili_container{display: flex; flex-direction: column; border: 2px solid #CBCFD3; position: relative; flex: 1;}
input:checked + .cili_container{background: #fff; border-color: #FFD500; box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);}
input:checked + .cili_container + .input_select_button .btn.y_border{background: #FFD500; border-color: #FFD500; color: #1A2B3C; font-size: 0; line-height: 0;}
input[type="radio"]:checked + .cili_container + .input_select_button .btn.y_border{cursor: default;}
input:checked + .cili_container + .input_select_button .btn.y_border:after{content: 'Geselecteerd'; font-size: 13px!important; line-height: 120%!important;}
input[type="checkbox"]:checked + .cili_container + .input_select_button .btn.y_border:before{content: '\f1f8'; font-weight: bold; font-family: fontawesome; font-size: 11px!important; line-height: 120%!important; margin: 0 10px 0 0}
input:disabled + .cili_container{opacity: 0.25;}
input:disabled + .cili_container + .input_select_button{pointer-events: none; display: none;}
.config_item_list_item input{display: none;}
.config_item_list_item label:hover{cursor: pointer;}
.config_item_list_item:hover{border-color: #FFD500;}
.cili_image{width: 100%; position: relative;}
.cili_image_spacer{padding: 100% 0 0;}
.cili_image a{position: absolute; right: 20px; bottom: 20px;}
.cili_image_item{position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border: 2px solid transparent; background-color: #f5f5f5;}
.cili_content{padding: 5px 15px 15px; text-align: center; display: flex; flex-direction: column; flex: 1; gap: 15px; align-items: center;}
.cili_content .h5{flex: 1;}
.cili_content .h4 small{font-weight: 400;}

@media screen and (min-width: 1350px){
    [data-step="kleur"] .config_item_list_item{width: calc(20% - 23px)}
}
[data-step="kleur"] .config_item_list_item .cili_content .h5{font-size: 13px;}

.input_select_button{width: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; margin: 12px 0 0}
.input_select_button .xs_btn{font-size: 13px;}
.input_select_button button{box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);}

.extra_price{position: absolute; right: 0; top: 8px; background: #FFD500; font-weight: bold; padding: 5px 8px; min-height: 30px; border-radius: 6px 0 0 6px; font-size: 13px; display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center;}
.extra_price small{opacity: 0.6; font-style: italic; font-weight: 400;}

.type_color .config_item_list_item{width: calc(16.6666% - 24px);}
.type_color .cili_image_item{border-color: #dcdcdc; border-radius: 100%;}
.type_color .cili_image_item{left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px);}

.config_item_list_item.type_product{width: calc(50% - 14px)}
.type_product .cili_container{flex-direction: row;}
.type_product .cili_image{width: 50%; flex-shrink: 0;}
.type_product .cili_content{align-items: flex-start; text-align: left; padding: 45px 25px}
.points{font-size: 93%; display: flex; flex-direction: column; gap: 15px;}
.points li{display: flex; align-items: flex-start; line-height: 14px;}
.points li i{margin: 0 10px 0 0; flex-shrink: 0; color: #FFD500; line-height: 14px; font-size: 90%;}
.points li i.fa-minus-circle{color: #939598}

.sizes_calculators{display: flex; gap: 105px; justify-content: space-between; padding: 0 25px}
.sizes_calculator{width: 100%; display: flex; flex-direction: column; gap: 30px; justify-content: center; text-align: center;}

.ui-slider-horizontal{height: 6px!important; border: none!important; border-radius: 3px; background: #D5D9DD!important;}
.ui-slider-horizontal .ui-slider-range{background: #FFD500!important; border-radius: 3px;}
.ui-slider .ui-slider-handle{width: 124px!important; height: 40px!important; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 14px; box-sizing: border-box; border: none!important; margin: 0 0 0 -62px!important; border-radius: 20px; background: #FFD500!important; color: #1A2B3C!important; top: -17px!important; font-weight: bold!important; font-size: 14px!important; cursor: grab; box-shadow: 0 3px 10px rgba(26, 43, 60, 0.25); touch-action: none;}
.ui-slider .ui-slider-handle:active{cursor: grabbing;}
.ui-slider .ui-slider-handle:focus{outline: 2px solid #1A2B3C; outline-offset: 2px;}
.ui-slider .ui-slider-handle i{font-size: 11px; opacity: 0.7;}
.ui-slider .ui-slider-handle *{pointer-events: none;}
.sizes_calculator_slider{touch-action: none;}
.ui-slider .ui-slider-handle.sizes_nudge{animation: sizes_nudge 1.4s ease-in-out 0.5s 1;}
@keyframes sizes_nudge{0%, 100%{transform: translateX(0);} 25%{transform: translateX(-10px);} 50%{transform: translateX(10px);} 75%{transform: translateX(-4px);}}
.sizes_hint{text-align: center; margin: 0 0 30px; font-size: 15px; color: #1A2B3C;}
.sizes_hint i{color: #FFD500; margin: 0 6px 0 0;}
.sizes_calculator_scale{display: flex; justify-content: space-between; margin: -18px 0 0; font-size: 13px; color: #8C959D;}
.sizes_calculator_input{display: flex; align-items: center; justify-content: center; gap: 10px;}
.sizes_calculator_input label{display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: #1A2B3C;}
.sizes_calculator_input .sizes_input{width: 84px; height: 40px; padding: 0 8px; border: 1px solid #C9CED3; border-radius: 6px; text-align: center; font-size: 16px; font-weight: bold; color: #1A2B3C; background: #fff; -moz-appearance: textfield;}
.sizes_calculator_input .sizes_input::-webkit-outer-spin-button, .sizes_calculator_input .sizes_input::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
.sizes_step{width: 40px; height: 40px; border-radius: 50%; border: 2px solid #1A2B3C; background: #fff; color: #1A2B3C; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.sizes_step:hover{background: #FFD500; border-color: #FFD500;}
.sizes_confirm{text-align: center; margin: 35px 0 10px;}
@media (prefers-reduced-motion: reduce){ .ui-slider .ui-slider-handle.sizes_nudge{animation: none;} }

.config_summary{background: #fff; position: relative;}
.config_summary_head{padding: 25px;}
.config_summary_body{padding: 25px; border-top: 2px solid #f5f5f5}
.config_summary_foot{padding: 10px; background: #1A2B3C; color: #fff; display: flex; flex-direction: column;}
.config_summary_foot_top{display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center; padding: 15px;}
.config_summary_foot_top[data-price="0"]{display: none;}
.config_summary_foot_top b{color: #FFD500}
.config_summary_foot_bottom{display: flex; justify-content: center; gap: 20px; padding: 15px 15px 5px; border-top: 1px solid rgba(255,255,255,0.2)}
.config_summary_foot_right{display: flex; flex-direction: column; align-items: flex-end;}

.fancybox-content .config_summary_foot_bottom{display: none;}
.fancybox-content .shopping_cart_pu_btn{display: none;}

.summary_table{width: 100%; border-collapse: collapse; font-size: 93%;}
.summary_table td{padding: 4px 0;}
/*
.summary_table tr.feature_value td{padding: 5px 5px;}
.summary_table tr.feature_value.odd td{background: #f5f5f5;}
*/
.summary_price{white-space: nowrap;}

.summary_table .summary_spacer td{padding: 15px 0 0}

button[name="nextConfigStep"]:disabled{opacity: 0.5; cursor: default; pointer-events: none;}
button[name="nextConfigStep"].is_loading:disabled{opacity: 1; cursor: wait;}
.cart_choice.is_disabled{opacity: 0.4; pointer-events: none; transition: opacity 0.2s;}
.cart_choice_wait{margin: 12px 0 0; font-size: 14px; text-align: center; opacity: 0.8;}

.config_form_data{display: flex; flex-wrap: wrap; gap: 16px 40px;}
.config_form_data hr{width: 100%; border: none; height: 1px; background: #f5f5f5;}
.config_form_row{width: calc(50% - 20px);}
.config_form_item{display: flex; gap: 15px; align-items: flex-start;}
.config_form_item > label{width: 160px; flex-shrink: 0; min-height: 44px; display: flex; align-items: center;}
.config_form_item_input{width: 100%;}
.config_form_item_input textarea,
.config_form_item_input select,
.config_form_item_input input{width: 100%; height: 44px; border-radius: 4px; padding: 0 12px; border: 1px solid #1A2B3C;}
.config_form_data span.required{color: red}

.config_form_item_input textarea{height: 120px; padding: 10px 12px}
.config_form_item_input select{background: #fff; color: #1A2B3C; cursor: pointer;}

.validate_error input,
.validate_error select{border-color: red;}

.config_form_item_input input[type="radio"],
.config_form_item_input input[type="checkbox"]{display: none;}

.radio_checkbox .config_form_item_input{display: flex; flex-wrap: wrap; gap: 12px;}
.radio .config_form_item_input label{padding: 6px 12px; min-height: 44px; border-radius: 3px; display: inline-flex; align-items: center; cursor: pointer; border: 1px solid #1A2B3C; gap: 12px;}
.radio .config_form_item_input .checker{display: inline-flex; width: 18px; height: 18px; border-radius: 100%; flex-shrink: shrink; border: 1px solid #1A2B3C; position: relative; flex-grow: 0; flex-shrink: 0;}
.radio .config_form_item_input input:checked + label{background: #fff; color: #FFD500; border-color: #FFD500}
.radio .config_form_item_input input:checked + label .checker{background: #fff; border-color: #FFD500;}
.radio .config_form_item_input input:checked + label .checker:after{content: ''; float: left; width: 10px; height: 10px; background: #FFD500; position: absolute; left: 3px; top: 3px; border-radius: 100%;}

.error_list{font-size: 12px; color: red; border: 1px solid red; padding: 10px; background: rgb(255, 222, 222); margin: 2px 0 0; display: flex; flex-direction: column;}
.error_list li{display: inline-flex; line-height: 12px; margin: 4px 0 0; align-items: flex-start;}
.error_list li span{width: 15px; line-height: 12px; flex-shrink: 0;}

.config_form_item_payment_method{width: 100%!important;}
.config_form_item_payment_method .config_form_item_input > div{width: 100%!important;}

.config_form_item_payment_method .config_form_item_input input + label select{display: none;}
.config_form_item_payment_method .config_form_item_input label select{background: #f5f5f5; border:  1px solid #f5f5f5; border-radius: 4px; padding: 8px 5px;}
.config_form_item_payment_method .config_form_item_input input:checked + label select{display: block;}
.config_form_item_payment_method .config_form_item_input label{padding: 20px 12px;}

.cart_choices{display: flex; gap: 30px;}
.cart_choice{display: flex; gap: 20px; flex-direction: column; width: calc(50% - 15px); background: #f5f5f5; padding: 25px; border-radius: 4px;}
.cart_choice_single{width: 100%;}
.cart_payment_methodes{display: flex; justify-content: center; flex-wrap: wrap; font-size: 0; gap: 14px; background: #fff; padding: 10px 14px; border-radius: 4px;}
.cart_payment_methodes img{height: 28px!important;}

.cart_choices_top .h5{color: #FFD500}
.cart_choices_content{flex: 1;}

#CookiebotWidget{display: none;}
.shopping_cart_pu_btn{display: none;}

@media screen and (max-width: 1400px){
    @media screen and (min-width: 1201px){
        .type_product .cili_container{flex-direction: column;}
        .type_product .cili_content{padding: 25px;}
        .type_product .cili_image{width: 100%;}
    }
}

@media screen and (max-width: 1200px){
    .config_block{flex-direction: column;}
    .config_summary{position: fixed; left: 0; bottom: 0; z-index: 4; width: 100%;}
    .config_block_right{width: 100%;}

    .config_summary_foot{}

    .shopping_cart_pu_btn{display: inline-flex;}
    .config_summary .config_summary_body{display: none;}
    .shopping_cart_pu_btn{align-self: start; width: 50px; position: absolute; left: calc(50% - 25px); top: -12px}

    .sizes_calculators{gap: 40px;}

    .config_item_list{gap: 16px}
    .config_item_list_item{width: calc(25% - 12px);}
    .type_color .config_item_list_item{min-width: 120px;}
    .config_item_list_item.type_product{width: calc(50% - 8px);}
}

@media screen and (max-width: 900px){

    .config_block_item_head{padding: 15px 16px; gap: 16px;}
    .config_block_item_body{padding: 20px 16px;}
    .config_block_steps{padding: 15px 0; overflow: hidden;}
    .config_block_steps_list{width: calc(100% + 30px); margin: 0 -15px}

    .type_product .cili_container{flex-direction: column;}
    .type_product .cili_content{padding: 10px 15px 15px;}
    .type_product .cili_image{width: 100%; max-width: 100%;}

    .cbs_item{gap: 10px}
    .cbs_item b{display: none;}
    .cbs_item.current b{display: block;}
    .cbs_item span{justify-self: flex-end; margin: auto 0 0;}
}

@media screen and (max-width: 767px){

    .config_item_list_item{width: calc(33.3333% - 11px)}

    .config_block_item_head_right .s_btn{font-size: 12px; padding: 7px 12px}

    .sizes_calculators{flex-direction: column; gap: 20px; padding: 0}
    .sizes_calculator{background: #F1F1F1; padding: 15px 16px 30px;}
    .cili_content .xxs_btn{font-size: 11px; min-height: 24px;}

    .extra_price{font-size: 11px; padding: 5px 6px; top: -2px; right: -2px}

    .cbs_item b{display: none!important}

    .config_form_item{flex-direction: column; gap: 10px}
    .config_form_item > label{min-height: 0;}

    .config_summary_foot{padding: 0;}
    .config_summary_foot .n_btn{font-size: 13px!important; padding: 5px 14px!important; min-height: 36px!important;}
}

@media screen and (max-width: 610px){
    .type_color .config_item_list_item{width: calc(25% - 12px); min-width: 0;}
    .cili_content{font-size: 12px;}

    .config_block_steps{padding: 10px}

    .cart_choices{flex-direction: column;}
    .cart_choice{width: 100%}
    .cart_choice:not(:first-child){position: relative; margin: 50px 0 0;}
    .cart_choice:not(:first-child):before{content: 'OF'; font-size: 40px; font-weight: bold; text-align: center; width: 100%; line-height: 50px; position: absolute; left: 0; bottom: calc(100% + 15px);}
}

@media screen and (max-width: 500px){
    .config_item_list_item{width: calc(50% - 8px)}
    .type_color .config_item_list_item{width: calc(33.3333% - 11px);}
    .type_color .cili_image_item{left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px);}
    .cili_content{padding: 5px 10px 10px}

    .type_product .cili_content{padding: 5px 10px 10px;}

    .config_form_row{width: 100%;}

    input:checked + .cili_container + .input_select_button .btn.y_border:after{font-size: 12px!important;}
    [data-step="kleur"] .config_item_list_item .cili_content .h5,
    .input_select_button .xs_btn{font-size: 12px;}
    
}
/* On phones the sticky bar at the bottom already has "Volgende" */
@media screen and (max-width: 767px){
    .sizes_confirm{display: none;}
    .sizes_hint{font-size: 14px;}
}