/* 
    Opmerkingen :   Dit is alle 'custom' css voor het project. Wordt later ingeladen dan style.css 
                    Er zijn enkele elementen welke niet zo heel vaak wijzigen, deze vind je terug in de elements.css file
    Author     :    Probu Online
*/

:root {
  --maincolor: #9c8346;
  --secundairycolor: #84d7d1;
  --thirdcolor: #84d7d1;
  --fourthcolor: #ebd395;

  --textcolor: #131313;
  --textcolorlsowdark: #fff;
  --textcolorlsowdarka: #d7d7d7;
  --transparant: rgba(0, 0, 0, 0);
  --mainfont: "Montserrat", "Open Sans", verdana, arial, tahoma, sans-serif;
  --headingfont: "Montserrat", "Open Sans", verdana, arial, tahoma, sans-serif;
  --logo: url(../images/logo_casa.svg) !important;
  --logoalt: url(../images/logo_casa.svg) !important;
  --footertextcolor: #fff;
  --footertextheading: #fff;
  --footertexta: #fff;
  --sitebackgroundcolor: #fffdf8;
  /* dark background */
  /* --sitebackgroundcolor: #131313;
  --textcolor: #fff;
  --textcolorlsowdark: #131313;
  --textcolorlsowdarka: #464646; */
}

body {
  background-color: var(--sitebackgroundcolor) !important;
}

.site-container {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Typography Styles */
body,
body > div,
html {
  font-size: 15px;
  color: var(--textcolor) !important;
}

html,
body,
p {
  font-family: var(--mainfont);
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--maincolor);
  font-family: var(--headingfont);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.5rem;
}

/* @media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.5rem;
  }
  h6 {
    font-size: 1.25rem;
  }
} */

.blog-list .lsow-portfolio-wrap h3 a {
  color: #333 !important;
}

a {
  color: var(--maincolor);
  text-decoration: none;
}

a:hover {
  color: var(--secundairycolor);
}

.lsow-dark-bg,
.lsow-dark-bg p,
.lsow-dark-bg h1,
.lsow-dark-bg h2,
.lsow-dark-bg h3,
.lsow-dark-bg h4,
.lsow-dark-bg h5,
.lsow-dark-bg h6 {
  color: var(--textcolorlsowdark) !important;
}

.lsow-dark-bg a {
  color: var(--textcolorlsowdarka) !important;
}

/* button css */
/* button css */
/* button css */
.button,
input.button,
input#submit,
.ow-button-base a {
  border: 2px solid var(--secundairycolor) !important;
  color: var(--secundairycolor) !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.ow-button-base a * {
  color: var(--secundairycolor) !important;
}
.button:hover,
input.button:hover,
input#submit:hover,
.ow-button-base:hover a {
  background: var(--secundairycolor) !important;
  color: #fff !important;
}
.ow-button-base:hover a * {
  color: #fff !important;
}

/* Styles for .alt-button */
.alt-button .button,
.alt-button input.button,
.alt-button input#submit,
.alt-button .ow-button-base a,
.alt-button.ow-button-base a {
  border: 0 !important;
  color: #fff !important;
  background: var(--secundairycolor) !important;
}
.alt-button.ow-button-base a *,
.alt-button .ow-button-base a * {
  color: #fff !important;
}

.alt-button .button:hover,
.alt-button input.button:hover,
.alt-button input#submit:hover,
.alt-button .ow-button-base:hover a,
.alt-button .ow-button-base:hover a {
  background: var(--maincolor) !important;
}

/* Styles for .lsow-dark-bg */
.lsow-dark-bg .button,
.lsow-dark-bg input.button,
.lsow-dark-bg input#submit,
.lsow-dark-bg .ow-button-base a {
  border: 0 !important;
  color: var(--maincolor) !important;
  background: #fff !important;
}
.lsow-dark-bg .ow-button-base * {
  color: var(--maincolor) !important;
}

.lsow-dark-bg .button:hover,
.lsow-dark-bg input.button:hover,
.lsow-dark-bg input#submit:hover,
.lsow-dark-bg .ow-button-base:hover a {
  background: var(--secundairycolor) !important;
}

/* Other Styles */
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: dotted 1px var(--secundairycolor);
}

.bold-text * {
  font-weight: 700 !important;
}

.button.btn-two {
  background: var(--secundairycolor) !important;
}

.button.btn-two:hover {
  background: var(--maincolor) !important;
}

a.back-to-top {
  background: var(--maincolor) !important;
}

.so-widget-lsow-portfolio-default-58a26905627a-359
  .lsow-block-header-6
  .lsow-block-header
  .lsow-taxonomy-filter
  .lsow-filter-item.lsow-active:after {
  border-color: var(--maincolor);
}

.lsow-block-header-6 .lsow-taxonomy-filter .lsow-filter-item.lsow-active:after {
  border-bottom: 3px solid var(--maincolor);
}

/*###########################
    HEADERHEADER
############################*/
#probu-header {
  z-index: 999;
  position: relative;
}
.site-inner {
  z-index: 300;
  position: relative;
}
#probu-header .wrap {
  padding: 0 15px;
}
.header-widget-area {
  padding: 0;
}

.probu-container {
  padding: 0;
}

.header-widget-area {
  padding-right: 30px;
} /* weird fix, why */

#header {
  background-color: transparent;
}
#genesis-nav-primary {
  background-color: transparent;
}
.nav-secondary {
  background-color: transparent;
}

/* color overlay over the slide-image */
/* #carousel .carousel-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0.4;
  background-color: #000;
  z-index: 10;
}

#carousel .carousel-item .slide {
  z-index: 115;
  position: relative;
} */

/* @media (min-width: 992px) {
  .carousel-item {
    min-height: 66vh;
  }
} */

.search-form-input {
  background: url("https://onlineresources.nl/wp-content/themes/probu-thema/images/search-icon.png");
  background-repeat: no-repeat;
  background-position: center right 10px !important;
  background-size: 20px;
}

/*####    logo header / svg-afbeelding ipv header text
############################*/
.probu-header .site-title p {
  font-size: 5px;
  color: rgba(0, 0, 0, 0);
}

.probu-header .title-area {
  padding: 0 15px;
}
.probu-header .site-title a {
  color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  background-position: left center !important;
}

#mega-menu-wrap-max_mega_menu_1 .mega-logo a,
.probu-header .site-title a {
  background: var(--logo) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
}
.probu-header .site-title {
  position: relative;
  min-height: 120px;
  width: 100%;
  margin-top: 0;
}
.header-image .site-title > a {
  min-height: 80px;
}

/*####    bloglist
############################*/

.blog-list .entry-summary::before,
.blog-list .lsow-project-image {
  display: none !important;
}
.blog-list .lsow-entry-text-wrap {
  text-align: left !important;
}
/* news/blog title */
.lsow-portfolio-wrap h3 a {
  color: var(--maincolor) !important;
}

/*####    navbar
############################*/
/* max mega menu */
/* max mega menu */
.mega-menu * {
  font-family: var(--headingfont) !important;
}
@media (min-width: 992px) {
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item.mega-current-menu-item
    > a.mega-menu-link,
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item.mega-current-menu-ancestor
    > a.mega-menu-link,
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-item.mega-current-page-ancestor
    > a.mega-menu-link {
    color: var(--maincolor) !important;
  }
  a.mega-menu-link:hover {
    color: var(--maincolor) !important;
  }
}

/* mega toggle aanpassing */
.mega-toggle-block .mega-toggle-animated-inner::after {
  background-color: rgba(0, 0, 0, 0) !important;
  width: 45px !important;
  left: -3px;
  top: 25px !important;
  height: 20px !important;
  content: "Menu" !important;
  color: var(--textcolor) !important;
  line-height: 0 !important;
  font-weight: 400;
  font-size: 0.9rem !important;
}

#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner,
#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner::before,
#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner::after {
  background-color: var(--textcolor);
}
/* .mega-menu-toggle {
  float: right;
}
#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner,
#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner::before,
#mega-menu-wrap-max_mega_menu_1
  .mega-menu-toggle
  .mega-toggle-block-0
  .mega-toggle-animated-inner::after {
  background-color: #fff;
}

/* max mega menu */
/* max mega menu */

/* genesis navbar */
/* genesis navbar */
ul.menu {
  padding: 0;
}
.menu-toggle:focus,
.menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
  color: var(--maincolor);
}

ul.sub-menu {
  padding-left: 0 !important;
}

#genesis-nav-primary {
  padding: 0;
}
#genesis-nav-primary ul,
.nav-secondary ul {
  margin-left: 0;
  padding-left: 0;
}

.genesis-nav-menu a {
  color: #666;
  font-family: var(--headingfont);
}

.sf-with-ul span::after {
  font-size: 0.8rem;
}

.genesis-nav-menu li:last-child ul.sub-menu {
  right: 0 !important;
  left: auto !important;
}

.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
  color: var(--maincolor);
  text-decoration: none;
}

/*navmenu flexbox*/
.genesis-nav-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: flex-start;
  /*justify-content: space-between;*/
}

.genesis-nav-menu li.vacatures {
  margin-left: auto;
}
/* genesis navbar */
/* genesis navbar */

/*####    dropdown menu
############################*/
/*reg nav*/
/*reg nav*/

.genesis-nav-menu .sub-menu,
.genesis-nav-menu .sub-menu a,
.genesis-nav-menu .sub-menu li {
  color: #000;
  padding: 0;
  margin: 0;
  border: 0;
}
.genesis-nav-menu .sub-menu a {
  padding: 15px;
  font-size: 1rem;
}
.genesis-nav-menu .sub-menu a:hover {
  color: #666;
}
.genesis-nav-menu .sub-menu {
  background-color: rgba(255, 255, 255, 0.7);
}

/*####    sidenav
############################*/
#mega-menu-wrap-max_mega_menu_1 .mega-sluiten * {
  background: url(../images/menu-close-white.png) no-repeat center center !important;
  /* background: url(../images/menu-close-black.png) no-repeat center center !important; */
  background-size: 25px !important;
}

@media (max-width: 991.98px) {
  #mega-menu-wrap-max_mega_menu_1
    .mega-menu-toggle
    + #mega-menu-max_mega_menu_1 {
    background: var(--maincolor);
  }
  #mega-menu-wrap-max_mega_menu_1 a {
    color: #fff !important;
  }
  #mega-menu-wrap-max_mega_menu_1
    #mega-menu-max_mega_menu_1
    > li.mega-menu-flyout
    ul.mega-sub-menu
    li.mega-menu-item
    a.mega-menu-link {
    background: rgba(255, 255, 255, 0.01) !important;
    background: var(--maincolor) !important;
    color: #fff !important;
  }
}

#mega-menu-wrap-max_mega_menu_1 .mega-logo {
  background-position: left 10px center !important;
  margin-bottom: 20px !important;

  /* voor als de kleur niet mooi is */
  mix-blend-mode: screen;

  /* background-color: #fff !important;
  padding: 10px !important;
  background-size: auto 80% !important; */
}
/* ander logo voor mobiel */
/* #mega-menu-wrap-max_mega_menu_1 .mega-logo {
  background:var(--logoalt);
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
} */

#probu_cta .container {
  padding: 0px 25px;
}
#probu_cta * {
  text-transform: uppercase;
  font-size: 0.8rem;
}

.mega-close {
  display: none;
}
/*###########################
    CONTENTCONTENT
############################*/
.so-widget-so-premium-mirror-widget .sow-tabs .sow-tabs-tab-container {
  background-color: transparent !important;
}

.waves {
  position: relative;
  background-image: url(/wp-content/uploads/2025/01/mijn-png-1.png);
  background-image: url(/wp-content/uploads/2025/01/bdcaff91-725f-4fef-844e-4ea529bfab50.webp);
  background-position: center center;
  background-size: 600px 300px;
  background-color: rgba(255, 255, 255, 0.9); /* Transparantie van 10% */
  background-blend-mode: overlay; /* Zorgt ervoor dat de transparantie wordt toegepast */
  border-bottom: 4px solid #ebe8e0;
  border-top: 4px solid #ebe8e0;
}

.box-shadow {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.padding {
  padding: 30px;
}
.white-bg {
  background-color: white;
}
.border-radius,
.img-radius img {
  border-radius: 15px;
}
.site-inner {
  padding: 30px 30px !important;
}
.ul-checkmark ul {
  list-style: none !important; /* Verwijder standaard opsommingstekens */
  padding-left: 0; /* Verwijder standaard padding */
}

.ul-checkmark ul li {
  position: relative;
  list-style: none !important; /* Verwijder standaard opsommingstekens */
  padding-left: 25px; /* Ruimte voor de checkmark */
}

.ul-checkmark ul li:before {
  content: "\f00c"; /* FontAwesome code voor een checkmark */
  font-family: "Font Awesome 5 Free"; /* Zorg dat de juiste FontAwesome wordt gebruikt */
  font-weight: 900; /* Gebruik de solide versie */
  color: var(--fourthcolor); /* Kleur van de checkmark */
  position: absolute;
  left: 0;
  top: 0;
}

.entry,
aside,
.sidebar,
.site-inner {
  background-color: var(--sitebackgroundcolor) !important;
}

.entry,
aside,
.sidebar {
  background-color: var(--sitebackgroundcolor) !important;
  padding: 0;
}
.entry .widget,
.aside .widget,
.sidebar .widget {
  padding: 0;
}

.breadcrumb {
  padding: 0;
  font-size: 0.8rem;
  justify-content: flex-end !important;
  flex-wrap: nowrap;
}

.loggedinonly {
  display: none;
}
.logged-in .loggedinonly {
  display: block;
}
.archive-pagination a:focus,
.archive-pagination a:hover,
.archive-pagination .active a {
  background-color: var(--maincolor);
}
.entry-title a,
.sidebar .widget-title a {
  color: var(--secundairycolor);
}

.single .entry-footer {
  display: none;
}

.slick-slider .testimonial-content img {
  min-width: 1px;
}
.slick-slider .testimonials-credentials img {
  min-width: 1px;
}

/*###########################
    FOOTERFOOTER
############################*/
.site-footer {
  background-color: var(--maincolor);
  color: var(--footertextcolor);
  /*padding:60px 25px;*/
}
.site-footer,
.site-footer div,
.site-footer p {
  /*color:#fff;*/
  color: rgba(255, 255, 255, 0.7);
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: var(--footertextheading);
}
.site-footer a {
  color: var(--footertexta);
  /*border-bottom: 1px dotted #fff;*/
  transition: all 0.5s ease;
}
.site-footer a:hover {
  color: var(--footertexta);
  opacity: 0.5;
}
.site-footer .testimonial-content {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 30px !important;
  margin-bottom: 15px;
}
.site-footer .testimonials-portrait {
  max-width: 40px;
}
.footer-container {
  padding: 60px 30px 30px 30px;
}
#snelnaar ul {
  list-style-type: none !important;
}
#snelnaar ul li li {
  display: none;
}
#snelnaar a[href$="#"] {
  display: none;
}

.credits {
  font-size: 0.8rem;
  padding-top: 0px;
  padding-bottom: 30px;
}
.credits .container {
  padding: 0 30px;
}

@media (max-width: 767.98px) {
  .credits,
  .credits * {
    text-align: center !important;
  }
}

.postnav {
  padding: 15px;
}
.postnav.right {
  text-align: right !important;
}

@media (max-width: 767.98px) {
  .postnav {
    text-align: center !important;
  }
}

.post-type.product .one-third.first {
  clear: none;
}
#loaded {
  background-color: #555 !important;
  color: #fff !important;
  cursor: no-drop;
}
.button-container {
  width: 100% !important;
  display: block;
  float: left;
}

.site-footer aside {
  background-color: rgba(0, 0, 0, 0) !important;
}

/*####    search results
############################*/

#type-page article,
#type-post article,
#type-product article {
  display: none;
}
.post-type.product {
  display: flex;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.post-type.product article {
  flex: 1 0 30%; /* explanation below */
  margin: 5px;
}

@media (max-width: 991.98px) {
  .post-type.product article {
    flex: 1 0 48%;
  }
}
@media (max-width: 591.98px) {
  .post-type.product article {
    flex: 1 0 100%;
  }
}

/*###########################
    Posts display 
    https://nl.wordpress.org/plugins/recent-posts-widget-with-thumbnails/
############################*/

.rpwwt-widget a img {
  display: block !important;
  min-width: 100%;
}
.rpwwt-widget ul {
  display: flex;
  flex-direction: row;
}

/*####    cookie notice
############################*/
#cookie-notice {
  z-index: 99998;
  background: #666 !important;
  padding: 0 15px;
}
#cookie-notice a {
  color: #c6c6c6 !important;
  border-bottom: 1px dotted #c6c6c6;
}
#cookie-notice .button {
  background: #333 !important;
  color: #fff !important;
  padding: 5px 10px !important;
}
@media (max-width: 767.98px) {
  #cookie-notice .cookie-notice-container {
    font-size: 0.7rem !important;
  }
}
@media (max-width: 991.98px) {
  #cookie-notice .cookie-notice-container {
    font-size: 0.8rem;
  }
}

/*###########################
    mobile only
############################*/

@media (max-width: 767.98px) {
  .probu-header .title-area a {
    background-position: left center !important;
    margin-bottom: 10px;
  }
}

@media (max-width: 767.98px) {
  .site-header .title-area a {
    margin: 0 0px;
  }

  #header .social-media-button-container {
    text-align: center !important;
  }
}

header.site-header {
  padding: 0 !important;
}

/* zoekfunctie*/

.stickycontent .stickycontent {
  position: sticky;
  top: 0;
}

/* masonry overlay text */

.showtitle .so-widget-sow-simple-masonry .so-premium-image-overlay {
  opacity: 0.8 !important;
}
.showtitle
  .so-widget-sow-simple-masonry
  .sow-masonry-grid-item:hover
  .so-premium-image-overlay {
  opacity: 1 !important;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1350px;
  }
}
@media (max-width: 991.98px) {
  .container {
    max-width: 100%;
  }
}

.caption {
  display: block !important;
}
@media (max-width: 991.98px) {
  .caption * {
    font-size: 1rem !important;
  }
  body .caption h1,
  body .caption h2,
  body .caption h3,
  body .caption h4,
  body .caption h5,
  body .caption h6,
  body .caption h1 strong,
  body .caption h2 strong,
  body .caption h3 strong,
  body .caption h4 strong,
  body .caption h5 strong,
  body .caption h6 strong {
    font-size: 2rem !important;
  }
  .caption .button {
    margin: 5px !important;
  }
}

/* chrome outline button fix on focus */
button:focus {
  outline: 0;
}

@media (max-width: 991.98px) {
  html,
  body {
    overflow-x: none !important;
  }
  #probu-header {
    max-width: 100vw;
    overflow-x: hidden !important;
  }
}

#videocontainer {
  width: unset !important;
  max-width: unset !important;
  margin: unset !important;
}

#probu_cta > .container > .row {
  padding-left: 15px;
  padding-right: 15px;
}

.slick-slider .testimonials-portrait {
  max-width: 150px !important;
  min-width: 115px !important;
}

@media (max-width: 767.98px) {
  .custom_probu_flipboxes {
    margin-right: 0px !important;
  }
}

#testimonialslider .slick-center {
  color: inherit;
}
#testimonialslider .slick-slider {
  margin-left: 0px !important;
}
#testimonialslider .slick-current {
  opacity: 1;
}

/* geef de rij de class .bg-overlay en achtergrondafbeelding */
.bg-overlay::after {
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  backdrop-filter: blur(10px) grayscale(50%); /* Apply the blur, grayscale, and blue hue effects */
  background-color: rgba(
    3,
    92,
    157,
    0.4
  ); /* Semi-transparent white background for legibility */
  mix-blend-mode: color;
}
.bg-overlay {
  position: relative;
}
.bg-overlay * {
  position: relative;
  z-index: 10;
}

/* css for mirror-layout */
#carousel .panel-layout.parent-mirror .so-panel,
#carousel .panel-layout.parent-mirror .panel-grid,
#carousel .panel-layout.parent-mirror .panel-grid-cell {
  position: static !important;
}

.entry-content
  .panel-layout.parent-mirror
  .panel-grid.parent-mirror
  .panel-grid,
.entry-content
  .panel-layout.parent-mirror
  .panel-grid.parent-mirror
  .panel-grid-cell,
.entry-content .panel-layout.parent-mirror .panel-grid.parent-mirror .so-panel {
  position: static !important;
}

.widget_so-premium-mirror-widget.parent-mirror,
.entry-content .panel-layout.parent-mirror .panel-grid.parent-mirror {
  width: 100vw;
  left: calc(-50vw + 50%);
}
/* css for mirror-layout */

.gradientbg {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.col2-set .col-1 {
  float: left !important;
}
.col2-set .col-2 {
  float: right !important;
}
.col2-set .col-1,
.col2-set .col-2 {
  width: 48% !important;
  min-width: 48% !important;
  max-width: 48% !important;
  padding: 0 !important;
}

@media (max-width: 991.98px) {
  .col2-set .col-1,
  .col2-set .col-2 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
/* hbook */

#quickbook select,
#quickbook input {
  background-color: #f4f3f2;
  border: 0;
  min-height: 75px;
  padding: 15px 30px;
}

#quickbook .hb-search-submit-wrapper input {
  width: 100%;
  background-color: var(--secundairycolor);
  font-weight: bold !important;
}

.select_accomodation {
  position: relative;
  margin-bottom: 15px;
  width: 100% !important;
}
.select_accomodation select {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.select_accomodation::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f078"; /* chevron down */
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
#quickbook .hb-check-dates-wrapper::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f133"; /* FontAwesome calendar icon */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--secundairycolor);
  pointer-events: none;
}
#quickbook .hb-people-wrapper-adults::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900; /* Solid style */
  content: "\f0c0"; /* FontAwesome users icon */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--secundairycolor);
  pointer-events: none;
}

#quickbook .hb-people-wrapper-children::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900; /* Solid style */
  content: "\f1ae"; /* FontAwesome child icon */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--secundairycolor);
  pointer-events: none;
}

#quickbook .hb-title {
  display: none;
}

.iconcontainer {
  text-align: center;
}

.iconcontainer .fa-stack-1x {
  color: var(--secundairycolor);
}

.iconcontainer .fa-ban {
  color: var(--fourthcolor);
}

@media (min-width: 660px) and (max-width: 991.98px) {
  .hb-booking-search-form .hb-search-fields {
    display: flex;
    flex-wrap: wrap;
    margin-right: -24px;
  }

  /* Zorg ervoor dat Check-in en Check-out naast elkaar staan */
  .hb-booking-search-form .hb-search-fields .hb-check-dates-wrapper {
    width: calc(50% - 20px);
  }

  .hb-booking-search-form
    .hb-search-fields
    .hb-check-dates-wrapper:nth-child(2n) {
    padding-right: 0;
  }

  /* De overige velden (Volwassenen, Kinderen, Aantal accommodaties) krijgen ook 50% breedte */
  .hb-booking-search-form .hb-search-fields .hb-accom-number-wrapper,
  .hb-booking-search-form .hb-search-fields .hb-people-wrapper {
    width: calc(50% - 20px);
  }

  /* Verwijder de padding voor het laatste veld op een regel */
  .hb-booking-search-form
    .hb-search-fields
    .hb-accom-number-wrapper:nth-child(2n),
  .hb-booking-search-form .hb-search-fields .hb-people-wrapper:nth-child(2n) {
    padding-right: 0;
  }

  /* Zorg ervoor dat de zoekknop goed uitgelijnd is */
  .hb-booking-search-form .hb-search-submit-wrapper,
  .hb-booking-search-form .hb-search-button-wrapper {
    width: 100%;
    margin-right: 24px;
  }

  /* Zorg ervoor dat invoervelden en select-elementen goed worden weergegeven */
  .hb-booking-search-form .hb-search-fields input,
  .hb-booking-search-form .hb-search-fields select {
    width: 100%;
  }
}

#quickbook .hb-search-fields {
  display: flex;
}

#quickbook .hb-check-dates-wrapper {
  width: 15%;
  margin-right: 10px;
}

#quickbook .hb-people-wrapper {
  /* width: 20%; */
  width: 20%;
  margin-right: 10px;
}

#quickbook .hb-search-submit-wrapper {
  flex: 1;
}

/* Responsive CSS for tablet and mobile */
@media (max-width: 991px) {
  #quickbook .hb-search-fields {
    display: flex;
    flex-wrap: wrap;
  }

  #quickbook .hb-check-dates-wrapper {
    width: 48% !important;
    margin-right: 10px !important;
  }

  #quickbook .hb-people-wrapper {
    width: 48% !important;
    margin-right: 10px !important;
  }

  #quickbook .hb-change-search-wrapper {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #quickbook .hb-search-submit-wrapper {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 790px) {
  #quickbook .hb-search-fields {
    display: block !important;
  }

  #quickbook .hb-check-dates-wrapper,
  #quickbook .hb-people-wrapper,
  #quickbook .hb-change-search-wrapper,
  #quickbook .hb-search-submit-wrapper {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
}

.hb-searched-summary *::before {
  display: none;
}