@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


:root {
  --black: #181818;
  --grey: #252525;
  --red: #E84855;
  --gold: #395448;
  --green: #00A676;
  --wp-admin: 0px;

  --white-70: rgba(255, 255, 255, 0.7);
}

/* .admin-bar{--wp-admin: 32px !important;} */

*{margin: 0; padding: 0; box-sizing: border-box;
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
}

body {display: flex;  background-color: var(--black);}
.wrapper {    width: calc(100% - 250px);height: 100%; float: left;height: calc(100vh - var(--wp-admin)); margin-left: 250px; padding-bottom: 32px; overflow-y: auto;}
.pointer { cursor: pointer;}

/* Header */
.header-wrapper {background-color: var(--grey); max-width: 250px; width: 100%; height: calc(100vh - var(--wp-admin));position: fixed; top: 0;}
.header-wrapper .header-container {display: flex; justify-content: space-between; flex-direction: column; height: 100%; align-items: center; gap:16px; overflow-y: auto;}
.header-wrapper .header-container .logo {display: flex; align-items: center; justify-content: center;}
.header-wrapper .header-container .logo.logo-2 img {max-width: 50%; margin-top: 16px;}
.header-wrapper .header-container .link-container {display: flex; flex-direction: column; width: 100%; align-items: left; gap: 24px; max-width: calc(100% - 24px - 24px); text-align: left;}
.header-wrapper .header-container .link-container a {color: #fff; text-decoration: none; opacity: 0.4; font-size: 16px; line-height: 1; font-weight: 600; display: flex; gap: 16px;}
.header-wrapper .header-container .link-container a i {color: var(--white-70);}
.header-wrapper .header-container .link-container a .empty{width: 24px; height: 24px;}
.header-wrapper .header-container .link-container a .fa-solid {color: var(--green);     width: 22px;height: 22px;background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 50%; color: #fff;}
.header-wrapper .header-container .link-container a.active{opacity: 1;}
.header-wrapper .header-container .information {color: #fff; padding: 16px; font-size: 16px; font-weight: 100; align-items: flex-start; display: flex; width: 100%; flex-direction: column;}
.header-wrapper .header-container .information a {font-size: 16px; font-weight:normal; display: flex; gap: 12px; padding: 16px 24px;}
.header-wrapper .header-container .information a.image {padding: 8px 0 16px 0;}
.header-wrapper .header-container .information p {font-weight: 600;}
/* Configuration list */
/* .config-wrapper {position:fixed; bottom:0; right:140px; background-color:#fff; border-radius:16px 16px 0 0; overflow: hidden;  transform:translateY(100%); z-index:99999; width:560px; max-width:100%; transition: transform 0.5s;}
.config-wrapper .config-toggle {padding: 16px 30px; -webkit-box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); display: flex; align-items: center; cursor:pointer !important;}
.config-wrapper .config-toggle * {cursor: pointer !important;}
.config-wrapper .config-toggle button.config-button {margin-right: 20px;}
.config-wrapper .config-toggle button.config-button ,
.config-wrapper .config-toggle span {font-size: 24px; font-weight: 600; border: none !important; background-color: #fff;  margin-left: 20px; cursor: pointer;}
.config-wrapper .config-toggle span {font-weight: normal !important;}
.config-wrapper .config-toggle .arrow {border: none; background-color: var(--gold); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; line-height: 1; line-height: 1; margin-top: 2px;}
.config-wrapper .config-toggle .arrow i {transition:.3s;}
.config-wrapper .config-list {display: flex; flex-direction: column; padding: 0 24px; max-height: 75vh; overflow-y: auto;}
.config-wrapper .config-list span.item {gap:4px; border-bottom:1px solid var(--black);display:flex; flex-direction:column; padding:12px 20px;} */


.config-wrapper {position:fixed; bottom:0; right:32px; background-color:#fff; border-radius:16px 16px 0 0; overflow: hidden;  transform:translateY(100%); z-index:99999; width:500px; max-width:100%; transition: transform 0.5s;}
.config-wrapper .config-toggle {padding:16px 32px; -webkit-box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); box-shadow: 0px -9px 14px 0px rgba(0,0,0,0.4); display: flex; align-items: center; cursor:pointer !important;}
.config-wrapper .config-toggle * {cursor: pointer !important;}
.config-wrapper .config-toggle button.config-button {margin-right:16px;}
.config-wrapper .config-toggle button.config-button ,
.config-wrapper .config-toggle span {font-size:16px; font-weight: 600; border: none !important; background-color: #fff;  margin-left: 10px; cursor: pointer;}
.config-wrapper .config-toggle span {font-weight:normal;}
.config-wrapper .config-toggle .priceWrapper {display: flex; gap: 6px; align-items: center;}
.config-wrapper .config-toggle .price {font-weight:bold;}
.config-wrapper .config-toggle .priceWrapper.price {font-size: 16px;  color: rgba(1, 1, 1, 0.7); font-weight: inherit;} 
.config-wrapper .config-toggle .price[data-config="price"] {font-size: 20px; color: rgba(1, 1, 1, 0.7);}
.config-wrapper .config-toggle .arrow {border: none; background-color: var(--gold); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; line-height: 1; line-height: 1; margin-top: 2px;}
.config-wrapper .config-toggle .arrow i {transition:.3s;} 
.config-wrapper .config-list {display: flex; flex-direction: column; padding: 0 24px; max-height: 75vh; overflow-y: auto;}
.config-wrapper .config-list span.item {gap:4px; border-bottom:1px solid var(--black);display:flex; flex-direction:column; padding:8px 16px;}
.config-wrapper .config-list span.item h3 {font-size:16px;}
.config-wrapper .config-list span.item p {font-size:14px;}

.fas,.fa,.far,.fa-regular, .fasr,.fa-light, .fasl{ font-weight: 500 !important;}

.loading {background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; -webkit-animation: shine 1s ease infinite; animation: shine 1s ease infinite; }

.config-wrapper[data-open="true"] .config-toggle .arrow i {transform:scaleY(-1);}

/* Sliders */
.swiper-wrapper .swiper-slide { height: unset; }
.swiper-wrapper { align-items: stretch; }
.post-wrapper#configurator .swiper {/*width: calc(420px * 3)!important; width:100%; margin-left: 0px; */ }
.swiper-button-next,.swiper-button-prev {z-index: 1000; width: 46px; height: 46px; border-radius: 50%; background-color: var(--gold); color: #fff; transition: 0.5s all; font-weight: bold;}

.swiper-button-prev {left:-23px;}
.swiper-button-next {right:-23px;}

/*.swiper-button-prev {left: calc(335px + 32px + 8px)} */
.swiper-button-prev.swiper-button-disabled {opacity: 1;}
/*.swiper-button-next {right: 48px } */
.swiper-button-next i,.swiper-button-prev i {font-weight: bold;}
.swiper-button-next:hover,
.swiper-button-prev:hover {background-color: #fff; color: var(--gold);}
.swiper-button-next::after,
.swiper-button-prev::after {display: none;}

.slide-progress {display: flex; justify-content: center; padding-top: 24px;}
.slide-progress span { display: inline-block; color: #fff; font-size: 14px; } 
.swiper-pagination-progressbar-fill { background: #fff; }
.slide-progress .swiper-pagination { width: 160px; height: 2px; margin: auto 10px; display: inline-block; position: static; background: rgba(255, 255, 255, 0.3); }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #fff;}

/* .post-wrapper#configurator .swiper::after{position: absolute; right: -350px; top:0; background-color: #181818; opacity: 0.6; height: 100%; width: 360px; content: ''; z-index: 1090; background: rgb(24,24,24); background: linear-gradient(270deg, rgba(24,24,24,1) 0%, rgba(24,24,24,1) 35%, rgba(0,0,0,0) 100%);} */
/* .post-wrapper.slider .slider-container {}
.post-wrapper.slider .slider-container .swiper-slide {gap:24px; background-color:var(--grey); padding:32px; border-radius:16px; color:#fff!important; cursor: pointer;border: 1px solid var(--grey); -webkit-transition: background-color 0.5s ease, border-color 0.5s ease;-moz-transition: background-color 0.5s ease, border-color 0.5s ease;transition: background-color 0.5s ease, border-color 0.5s ease; display: flex; flex-direction: column;}
.post-wrapper.slider .slider-container .swiper-slide.active{border: 1px solid #F1F2F4; background-color: #333333;}
.post-wrapper.slider .slider-container .swiper-slide .image {width:100%; border-radius:8px; overflow:hidden; max-height:240px!important; position:relative; height:100%;}
.post-wrapper.slider .slider-container .swiper-slide .image.large {max-height: 425px !important;}
.post-wrapper.slider .slider-container .swiper-slide .image img {width: 100%;  object-fit: cover; height: 100%;}
.post-wrapper.slider .slider-container .swiper-slide .container {display:flex; flex-direction:column; gap:16px;}
.post-wrapper.slider .slider-container .swiper-slide .container h3 {font-size:28px; line-height:1.2;}
.post-wrapper.slider .slider-container .swiper-slide .container span {color: var(--white-70);}
.post-wrapper.slider .slider-container .swiper-slide .container span.bullet {color:#fff; display:flex; gap:8px; font-size:18px;}
.post-wrapper.slider .slider-container .swiper-slide .container span.bullet i {color:var(--gold);}

.post-wrapper.slider .slider-container .swiper-slide .information {position: absolute; width: 30px; height: 30px; font-size: 30px; right: 10px; bottom: 18px;}

.post-wrapper.single .single-outer-container {display:flex; gap:32px;}
.post-wrapper.single .single-container {background-color:var(--grey); max-width:480px; border-radius:16px; padding:32px; color: #fff; width: 100%;}
.post-wrapper.single .single-container h3 {font-size:28px; line-height:1.2;}
.post-wrapper.single .single-container span.information {color: var(--white-70);}
.post-wrapper.single .single-container .answers {display: flex; flex-direction: column; gap: 10px; margin-top: 32px;}
.post-wrapper.single .single-container .answers span {padding: 15px 30px; background-color: #464646; border-radius: 10px; border: 1px solid #464646; transition: border 0.5s; transition: all 0.5s; cursor: pointer;}
.post-wrapper.single .single-container .answers span.active { border: 1px solid #fff; background-color: #6F6F6F;} */

/* Configurator */
.post-wrapper#configurator {display:flex; gap: 48px; flex-direction:column; padding:48px; overflow:hidden;}
.post-wrapper#configurator .post-title {font-size: 32px; color: #fff; line-height:1.1;}
.post-wrapper#configurator .title-wrapper {display: flex; align-items: center; gap:32px;}
.post-wrapper#configurator .title-wrapper p i {font-size: 24px; cursor: pointer;}
.post-wrapper#configurator .title-wrapper p:hover {opacity: 0.6;}
.post-wrapper#configurator .title-wrapper p {color: #fff; font-size: 14px;}
.page-template-aanvraag .post-wrapper#configurator .title-wrapper p {display: none;}
.post-wrapper#configurator .swiper {width:100%; overflow:visible;}
.post-wrapper#configurator .single {width:100%; max-width:400px; gap:24px; background-color:var(--grey); padding:32px; border-radius:16px; color:#fff!important; cursor: pointer;border: 1px solid var(--grey); -webkit-transition: background-color 0.5s ease, border-color 0.5s ease;-moz-transition: background-color 0.5s ease, border-color 0.5s ease;transition: background-color 0.5s ease, border-color 0.5s ease; display: flex; flex-direction: column;}
.post-wrapper#configurator .single.active{border: 1px solid #F1F2F4; background-color: #333333;}
.post-wrapper#configurator .single .image {width:100%; border-radius:8px; overflow:hidden; height:200px; position:relative;}
.post-wrapper#configurator .single .image.large {height:348px;}
.post-wrapper#configurator .single .image img {width:100%; object-fit:cover; height:100%;}
.post-wrapper#configurator .single .image .information {position:absolute; font-size:24px; right:16px; bottom:16px; line-height:1; transition:.3s;}
.post-wrapper#configurator .single .image .information:hover {transform:scale(1.1);}
.post-wrapper#configurator .single .container {display:flex; flex-direction:column; gap:16px; flex:1;}



.post-wrapper#configurator .single .container  .selected-icon {
  display: none;
  position: absolute;
  top: -12px;
  right: -12px;
  font-size: 32px;
  color: var(--gold);
}

.post-wrapper#configurator .single.active .container  .selected-icon {display: block;     border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: #fff;}

.post-wrapper#configurator .single .container h3 {font-size:24px; line-height:1.2;}
.post-wrapper#configurator .single .container .description {color:var(--white-70); font-size:16px; }
.post-wrapper#configurator .single .container .bullet-wrapper {display:flex; flex-direction:column; gap:8px;}
.post-wrapper#configurator .single .container .bullet-wrapper .bullet {color:#fff; display:flex; gap:8px; font-size:16px; align-items:center;}
.post-wrapper#configurator .single .container .bullet-wrapper .bullet i {color:var(--gold);}
.post-wrapper#configurator .single .container .answer-wrapper {display:flex; flex-direction:column; gap:8px; margin-top:auto;}
.post-wrapper#configurator .single .container .answer-wrapper .answer {padding:16px 32px; background-color:#464646; border-radius:8px; border: 1px solid #464646; transition: border 0.5s; transition: all 0.5s; cursor: pointer;}
.post-wrapper#configurator .single .container .answer-wrapper select.answer {color: #fff;}
.post-wrapper#configurator .single .container .answer-wrapper .answer.active {border:1px solid #fff; background-color:#6F6F6F;} 

/* Buttons */
.btn-wrapper {display:flex; gap:32px;}
.btn {border-radius:999px; background-color:var(--gold); padding:16px 32px; color:#fff; border:none; line-height:1; cursor:pointer; text-decoration:none; display:inline-flex; transition: all .3s;}
.btn:not(.inactive):hover {background-color:#fff; color:var(--gold);}
.btn.white {background-color:transparent!important; color: #fff!important; padding:0!important; transition: color 0.4s;}
.btn.white:hover{ color: var(--gold) !important;}
.btn.inactive {opacity:0.5!important; cursor:not-allowed!important;}



.btn[data-config] {border: 2px solid var(--gold); gap: 4px}
.btn[data-config] i {margin-left:12px;}
.btn[data-config]:hover {border: 2px solid #fff}
.btn[data-config="prevBtn"] {border: 2px solid #fff; background-color: transparent;}
.btn[data-config="prevBtn"] i {margin-left: auto; margin-right: 12px;}
.btn[data-config="prevBtn"]:hover {border: 2px solid #fff}

.btn.secondary {border: 2px solid #fff; background: transparent; padding: 16px 32px !important; transition: 0.3s all;} 
.btn.secondary:hover {color: var(--gold); background: #fff !important;}


/* Summary */
.samenvatting-wrapper {display:flex; width:100%; max-width:1400px; background:#252525; border-radius:16px; color:#fff!important; align-items:stretch;}
.samenvatting-wrapper .left {flex:1; padding:32px; display:flex; flex-direction:column; justify-content:space-between;}
.samenvatting-wrapper .left h3 {margin-bottom:32px; color:#fff; font-size:40px;}
.samenvatting-wrapper .left h4 {margin-bottom: 16px; }
.samenvatting-wrapper .left p {color: var(--white-70);}
.samenvatting-wrapper .right {width:320px; background-color:#333; border-radius:16px; padding:32px; display:flex; flex-direction:column; gap: 32px;}
.samenvatting-wrapper .right img {aspect-ratio: 1/1; object-fit: cover; border-radius: 8px;}
.samenvatting-wrapper .right.big { flex: 1; /* Makes the right side flexible if necessary */ }
.samenvatting-wrapper .right h4 { font-size: 30px; margin-bottom: 15px;}
.samenvatting-wrapper .right p { font-size: 26px; margin-bottom:0px;}
.samenvatting-wrapper .right span {font-size: 16px; color: var(--white-70); margin-bottom: 20px;}

.samenvatting-wrapper .container-items {display:grid; grid-template-columns:repeat(2,1fr); }
.samenvatting-wrapper .container-items .left-items {border-right:1px solid #707070; padding-right:32px;}
.samenvatting-wrapper .container-items .right-items {padding-left:32px;}
.samenvatting-wrapper .container-items .container-item {display:flex; gap:6px; flex-direction:column; border-bottom:1px solid #707070; padding:16px 0; position:relative;}
.samenvatting-wrapper .container-items .container-item.with-image {padding-bottom: calc(16px + 24px);}
.samenvatting-wrapper .container-items .container-item h4 {font-size: 21px; margin-bottom: 12px;}
.samenvatting-wrapper .container-items .container-item  .item-information  {display: flex; align-items: right; justify-content: space-between;}
.samenvatting-wrapper .container-items .container-item p {font-size: 16px; color: var(--white-70);}
.samenvatting-wrapper .container-items .container-item small {right: 16px;border: 16px;bottom: 16px; font-size: 16px; color: var(--white-70); float: right;}
.samenvatting-wrapper .container-items .container-item small {min-width: 110px; text-align: right; display: flex; justify-content: left; align-items: left; }
.samenvatting-wrapper .container-items .container-item img {margin-bottom: 16px;}
.samenvatting-wrapper h4 {font-size: 30px;}


[data-information-wrapper] {position: fixed; z-index: 10000; background-color: rgba(0,0,0, 0.7); top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; pointer-events: none; user-select: none; transition: 0.5s opacity; opacity: 0;}
[data-information-wrapper].active {opacity: 1; user-select: auto; pointer-events: all;}
[data-information-wrapper] div {max-width: 550px; background-color: #fff; border-radius: 24px; padding: 24px; position: relative;}
[data-information-wrapper] .close {position: absolute; z-index: 1000; font-size: 32px; right:-24px; top:-24px; line-height:1; color: #fff; transition: 0.5s opacity; cursor: pointer;}
[data-information-wrapper] .close:hover {opacity: 0.7;}


.page-template-aanvraag .samenvatting-wrapper .left h3 {margin-bottom: 16px;}

.samenvatting-wrapper .btn {margin-top: 16px; width: 100%; text-align: center !important;     justify-content: center;}

.samenvatting-wrapper .right .container { border-top: #707070 solid 1px; margin-top: 24px; }

.page-template-aanvraag .samenvatting-wrapper .right .container {margin-top: 0; border-top: 0px;}

.samenvatting-wrapper .right small { color: var(--white-70); }

.order-2 {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 20px;}
.order-1 textarea,.order-2 input {background-color: #FFFFFF; padding: 15px 20px; border-radius: 10px; border: none;}
.order-1 textarea { width: 100% ; resize: none; margin-bottom: 12px;}



.request-template .request-form h3 {margin-bottom: 16px; font-size: 30px;}
.request-template .request-form button {float: right; font-size: 16px;}
.request-template .request-form .terms-and-conditions a {color:var(--gold); text-decoration:none;}


.image-upload {     }
.image-upload span {padding: 15px 20px; background: #464646; border-radius: 10px; display: inline-block; margin-bottom: 24px; border: none; color: #fff; font-size: 20px;line-height: 1; cursor: pointer; resize: none; width: 100%;}
.image-upload span i {margin-right: 12px;}
.image-upload span:hover {opacity: 0.7;}
.image-wrapper {    display: grid; grid-template-columns: repeat(3, 1fr); max-width: 300px; overflow: hidden; height: 75px; overflow-y: auto; gap: 16px; }
.image-wrapper img {width: 100%; object-fit: cover; border-radius: 10px; width: 75px; height: 75px; margin: 0 auto; cursor: pointer;}

.cable-options { display: flex; flex-direction: column; justify-content: start; }
.footer-options h5,
.cable-options h5 { font-size: 16px; margin-bottom: 12px;}

.cable-options textarea, .cable-options label { padding: 15px 20px; background: #464646; border-radius: 10px; display: inline-block; margin-bottom: 24px; border: none; color: #fff; font-size: 20px;line-height: 1; cursor: pointer; resize: none;}
.cable-options label input {display: none;}
.cable-options label { transition: 0.3s ;}
.cable-options label.selected { background-color: #6F6F6F; }


.footer-options {display: grid; grid-template-columns: repeat(2,1fr); margin-top: 24px; gap: 24px;}


/* .thankyou-wrapper {width: 100%; display: flex; align-items: center;}
.thankyou-wrapper .thankyou-container {color: #fff; text-align: left; padding: 24px 38px;}
.thankyou-wrapper .thankyou-container p {max-width: 400px; margin-top: 24px;} */


.image-preview:hover {background-color: rgba(180, 35, 35, 0.686); opacity: 0.6;}
 

.request-titlebar {display: flex; border-bottom: 1px solid #707070; padding: 12px 0; margin-bottom: 12px; flex-direction: column;}
.request-titlebar .price {flex: 1; font-size: 24px; color: var(--white-70); line-height: 1 !important; color:#fff !important;}
.request-titlebar .price.small {font-size:16px; margin-bottom:8px; color:var(--white-70) !important}
.request-titlebar small.price {font-size: 24px; border-left: 1px solid #fff; padding-left: 24px;}


.hamburger-container {position: fixed; top: 16px; display: none; color: #fff; background-color: var(--grey); left: 0px; z-index: 99999999;}



.page-template-dislaimer .title-wrapper,
.page-template-thank-you-page .title-wrapper {display: none !important;}

.thankyou-wrapper {    width: 100%; height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center;}
.thankyou-wrapper .thankyou-container {max-width: 700px;  text-align: center; color: #fff;}
.thankyou-wrapper .thankyou-container h1 {margin-bottom: 40px; font-size: 60px;}
.thankyou-wrapper .thankyou-container p {color: var(--white-70); margin-bottom: 24px;}
.thankyou-wrapper .thankyou-container a {color:#fff; text-decoration: none;}



.swipe-indicator-wrapper {position: fixed; left: 0%; width: 100%; top: 300px; z-index: 10000; display: none !important; pointer-events: none;}

.page-template-dislaimer .header-wrapper {display: none !important;}
.page-template-dislaimer .wrapper {margin-left: 0; width: 100%;}

.x-hand {
  font-size:4em;
  height:100px;
  left:calc(50% - 22px);
  opacity:.8;
  position:absolute;
  top:calc(50% - 5px);
  transform-origin:bottom;
  width:100px;
  color: #fff;
}

.x-swipe-msg{
  position: absolute;
  top: calc(50% - 30px);
  left : 40%;
  font-weight : bold;
}
.x-swipe-indicator {
  position: absolute;
  top: calc(50% - 60px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px dotted transparent;
  animation: swipe-animation 4s linear infinite; 
  transform: rotate(45deg)
}

@keyframes swipe-animation {
  0% {
    left: 90%;
    border-color: #fff;
  }
  50% {
    left: 40%;
  }
  100% {
    left: 90%;
  }
}


[data-error="message"] {color: var(--red);}


@media screen and (max-width: 800px) {
  .samenvatting-wrapper {flex-direction: column;}
  .order-2 {grid-template-columns: repeat(1,1fr);}
  .post-wrapper#configurator { padding: 64px 12px;}

  .config-wrapper .config-toggle span { font-size: 18px; margin-left: 0; color: #181818;}
  .config-wrapper .config-toggle .price {margin-left: 12px;}
  .post-wrapper#configurator .post-title { font-size: 32px;}
  
  .swiper-button-prev {left: 24px }
  .swiper-button-next {right: 24px }
  .post-wrapper#configurator .swiper {width: 100% !important; margin-left: 0px;}
  .post-wrapper#configurator .single {width: 100%  !important;}
  .config-wrapper .config-toggle .arrow {display: none;}
  .config-wrapper .config-toggle button.config-button {font-size: 16px; margin-left: 0px; display: none !important;}
  .config-wrapper .config-toggle .priceWrapper, .config-wrapper .config-toggle .priceWrapper .price{font-size: 14px !important; }
  .config-wrapper .config-toggle .price {margin-left: 8px;}
  .request-titlebar .price {font-size: 16px !important;}

  .swipe-indicator-wrapper {display: block !important;}

  .post-wrapper#configurator .single .image.large {height: 200px;}


  .post-wrapper#configurator .single { padding: 16px;}

  .post-wrapper {gap: 32px !important;}

  /* OLD */
  .samenvatting-wrapper .container-items {grid-template-columns: repeat(1,1fr);}
  .post-wrapper.single .single-outer-container {flex-direction: column;}
  .samenvatting-wrapper .right {width: 100%;}
  .samenvatting-wrapper .container-items .left-items {border: none !important; padding-right: 0;}
  .samenvatting-wrapper .right .container {display: flex; gap: 16px; flex-direction: column; justify-content: start; align-items: flex-start;}
  .post-title {margin-top: 24px;}
  .header-wrapper{transform: translateX(-100%); transition: transform 0.5s; z-index: 1000000;}
  .menu-active .header-wrapper{transform:  translateX(0%);}
  .menu-active .hamburger-container {left: 335px; top: 16px;}
  .hamburger-container {display: block; padding: 16px 24px;  border-radius: 0px 16px 16px 0; transition: left 0.5s;}
  .post-wrapper {padding: 32px 24px;}
  .samenvatting-wrapper .container-items .right-items {padding-left: 0;}
  .footer-options {grid-template-columns: repeat(1,1fr);}
  .image-wrapper {max-width: 100%;}
  .image-wrapper img {width: 100%; height: auto; aspect-ratio: 1/1;}
  .wrapper {margin-left: 0px; width: 100%; padding-bottom: 84px;}
  .config-wrapper{ left: 0; width: 100vw;} 
}

@media screen and (max-width: 680px) {
  .hide-mobile {display: none !important;}
  .config-wrapper{ left: 0; width: 100vw;} 
}


/** TEST */

.error-message {color: var(--red);}



@-webkit-keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}


/* Cookiebot */
body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {color:var(--gold); border-bottom-color:var(--gold)}
body #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {border-color:var(--gold)}

body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {color:var(--gold)}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, 
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, 
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {background:var(--gold); border-color:var(--gold)}

body #CookiebotWidget .CookiebotWidget-logo svg circle {fill:var(--gold)}

body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {background-color:var(--gold); border-color:var(--gold)}
body #CookiebotWidget .CookiebotWidget-consent-details button {color:var(--gold)}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, 
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {border-color:var(--gold)}

body #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {background:var(--gold)}

body #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {fill:var(--gold)}

body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {border-color:var(--gold)}

body #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a, 
body #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a, 
body #CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a, 
body #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a, 
body #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink, 
body #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink, 
body #CybotCookiebotDialogDetailBodyContentTextAbout a {color:var(--gold)}