*:focus {
   outline: 0;
 }

.body-wrapper  {
  background-color: #eae3f3;
}

br {
  display: block;
  margin-bottom: 100px;
}


.choices__input {
  position: relative;
  bottom: 2px;
}

strong {
  color: #2F1E45;
}

span {
  background-color: transparent !important;
}

.choices__input,
.choices__inner {
  background-color: #f4f1f9 !important;
}

.body-container--vacancy-post {
  background-color: #f4f1f9;
  margin-top: -102px;
  padding-top: 102px;
}

.vacatures-blocks {
    padding-top: 60px; 
}

 .vacancy-header {
    display: flex;
   flex-direction:column;
   gap:50px;
 }

  .list > a {
      display: contents;
}

.input-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 32p
}


  
.filter-section::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%232F1E45" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.76 7.48c0-1.5.595-2.94 1.655-4a5.658 5.658 0 0 1 8 8 5.658 5.658 0 0 1-9.655-4zM7.415 0A7.479 7.479 0 0 0-.06 7.41c-.035 4.095 3.32 7.525 7.44 7.545 1.615.01 3.03-.255 4.26-1.125.1-.07.71-.885.62-2.01l.205 1.995 2.08 2.08c.14.14.365.14.505 0l.785-.785a.356.356 0 0 0 0-.505L13.31 12.08a7.461 7.461 0 0 0 1.585-4.605C14.895 3.35 11.545 0 7.415 0z"/></svg>') no-repeat center center;
    background-size: contain;
    pointer-events: none; /* Makes the icon unclickable */
}


.filter-section::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%232F1E45" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.76 7.48c0-1.5.595-2.94 1.655-4a5.658 5.658 0 0 1 8 8 5.658 5.658 0 0 1-9.655-4zM7.415 0A7.479 7.479 0 0 0-.06 7.41c-.035 4.095 3.32 7.525 7.44 7.545 1.615.01 3.03-.255 4.26-1.125.1-.07.71-.885.62-2.01l.205 1.995 2.08 2.08c.14.14.365.14.505 0l.785-.785a.356.356 0 0 0 0-.505L13.31 12.08a7.461 7.461 0 0 0 1.585-4.605C14.895 3.35 11.545 0 7.415 0z"/></svg>') no-repeat center center;
    background-size: contain;
    pointer-events: none; /* Makes the icon unclickable */
}
.marketing-vakgebied-vacancy-link {
  color:#c276ff;
  display:flex;
  gap:5px;
  align-items:center;
}
.marketing-vakgebied-vacancy-link:hover {
  color:#c276ff; 
}
.marketing-vakgebied-vacancy-link svg {
  fill:#c276ff;
}
.vacancy-card {
  transition: all .3s;
}
.vacancy-card .arrow {
  transition: all .3s;
  transform: translateX(-10px);
  opacity:0;
}
.vacancy-card:hover {
  box-shadow:-5px -5px 30px 0px #FFF, 5px 5px 30px 0px rgba(29, 19, 43, 0.40);;
}
.vacancy-card:hover .arrow {
  opacity:1;
  transform:translateX(0px);
}
.icon-right {
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 7px;
  cursor: pointer; /* Ensures it looks clickable */
}

.filterbase-input:focus ~ .icon-right,
.filterbase-input:active ~ .icon-right {
  opacity: 1;
}

.filterbase-input::placeholder {
    font-size: 12px !important; /* Adjust font size */
    font-weight: 600; /* Adjust font weight */
    color: #6e6778 !important; /* Adjust font color */
    font-style: normal; /* Optional: change to italic if needed */
    line-height: normal; /* Match with the input's line-height */
}

.search {
    padding-left: 40px; /* Space for the icon */
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.search::placeholder {
    color: #999;
    font-size: 14px;
}
.filterbase-input {
   padding: 8px 16px 8px 40px;
  border-radius: 20px;
  background-color: #f4f1f9;
  border: none;
  height: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #6e6778;
  width: 100%;
  display: block;
  line-height: normal;
}
.filterbase-dropdown {
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f4f1f9;
  border: none;
  font-size: 12px;
  text-align: left;
  color: #6e6778;
  width: 100%;
  display: block;
  line-height: normal;
  height: 100%;
}
.filterbase-dropdown {
  color: #2f1e45;
  font-size: 12px;
  font-weight: 600;
}

.vakgebied-filter {
  width: 100%;
}

.vacature-post__return-text {
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #2f1e45;
}

.vacature-post__return a {
  display: flex; 
  align-items: center;
  margin-bottom: 16px;
}

.filter-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 42px;
  position: relative;
}

select {
  -webkit-appearance: none; /* Removes default styling on WebKit browsers */
  -moz-appearance: none;    /* Removes default styling on Firefox */
  appearance: none;         /* Removes default styling on all browsers */

  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231D132B' viewBox='0 0 16 16'%3E%3Cpath d='M8.469 9.365l3.9-3.9a.616.616 0 0 0 .18-.435v-.315a.3.3 0 0 1 .3-.3h.844a.3.3 0 0 1 .3.3v1.106a.136.136 0 0 1-.046.105L8.44 11.435c-.24.24-.63.24-.87 0L2.15 6.013s-.128-.128-.128-.32v-.978a.3.3 0 0 1 .3-.3h.844a.3.3 0 0 1 .3.3v.57l.143.143 3.926 3.926c.21.21.352.472.412.761l.06.454.06-.465c.06-.281.2-.536.402-.739z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
ul {
/*   list-style-type: none; */
      padding: 0 0 0 14px;
}

li {
margin-bottom: 16px;
}

li::marker {
 color: #2f1e45;
  height: 8px;
  width: 8px;
}

.h2 {
  max-width: 340px;
}
.cta-block {
  border-radius: 30px;
  background-color: #dcb0ff;
  margin-bottom: 80px;
}

.vacancy-post__banner {
  padding: 30px 24px 80px;
  
}

.vacature-post__button-section {
  display: flex;
}

.vacature-post__share-button {
  background-color: transparent !important;
  padding: 13px !important;
  display: flex;
  max-width: 50px;
  min-width: 50px;
}
.vacature-post__share-button:hover, .vacature-post__share-button.activetoggle {
  background-color:#00fff1!important; 
  outline:none;
  border-color:#00fff1;
}
.vacature-post__share-button svg {
  background-color: transparent !important;
}

.vacature-post__button {
  width: 100%;
  margin-right: 24px;
  max-width: 282px;
}

.cta-image {
  height: 183px;
  width: 100%;
  padding-right: 20px;
  max-width: 292px; 
  border-radius: 50px 270px 270px 0;
  object-fit: cover;
}

.cta-button {
  min-width: 224px;
}
.cta-button:hover {
  background-color:#1D132B;
  color:#f4f1f9;
  outline-color:#1D132B;
  border-color:#1D132B;
}

.cta-button:focus {
  background-color:#442C63;
  color:#f4f1f9;
  outline-color:#442C63;
  border-color:#442C63;
}
.vacancy-image img{
  height: 350px;
  width: calc(100% - 24px);
  max-width: 626px; 
  border-radius: 0 270px 270px 0;
  object-fit: cover;
}

.cta-text {
  padding: 24px;
}

  
  .text-section {
    display: flex; 
    flex-direction: column;
    max-width: 493px;
  }

  .total-vacancies {
    font-family:Power Grotesk Ultrabold, sans-serif;
    font-size: 14px;
    color: #c276ff;
    line-height: normal;
  }
  
  .statistics {
    display: flex;
  }
  
  .statistics p {
    margin: 0;
    display: flex;
    align-items: center;
    font-weight:600;
  }
  .statistics p svg {
    margin-right: 8px;
  }
  
  .tag {
    margin-bottom: 12px;
  }

  .list{
    display: flex;
    width: 100%;
    align-items: end;

    flex-direction: column;
   
  }

  .vacancy {
    width: 100%; 
    background-color: #f4f1f9;
    padding: 24px;
    border-radius: 30px;
    margin-bottom: 24px;
  }

  .vacancy > div {
    position: relative;
  }

  .arrow{
    position: absolute;
    right: -10px;
    bottom: 3px;
  }
.pagination-container {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
.pagination-container.no-pagination {
  display:none;
}
.pagination {
  list-style-type: none;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
  .vacature-post__share-icons {
    padding: 0 !important;
    position: absolute;
    top: 70px;
  }
.vacature-post__share-icons .button {
  padding: 9px 11px;  
}
@media screen and (min-width: 768px) {
  .arrow {
    right: 0;
    bottom: -5px;
  }

  .h2 {
    max-width:100%; 
  }
  .icon-right {
  opacity: 0;
  position: absolute;
  right: 25px;
    top: 7px;
    cursor: pointer; /* Ensures it looks clickable */
  }
  .filter-section::before {
    top: 15px; 
  }
  
  
.filter-section::after {
display: none;
}

  .not-found {
  margin-top: 110px;
    max-width: 734px;
    margin-bottom:80px;
  }
  
  .vacature-post__button {
    max-width: 100%;
    margin-right: 24px;
  }
 
  .cta-block {
    margin-bottom: 150px;
  }

  .vacancy-post__banner {
    display: flex;
    align-items: end;
    margin-right: 24px;
  }
  
  .vacancy-post__banner {
        padding: 0 24px 48px;
  }
  


  .vacancy-image img {
    max-width: 710px;
    height: 530px;
    border-radius: 0 500px 500px 0;
  }
  .filterbase-input
  font-size: 14px;
}

.filterbase-dropdown {
  font-size: 12px;
}

  .container {
      flex-direction: row;
    }


    .text {
      max-width: 412px;
      margin-bottom: 16px;
    }

    .list {
      flex-direction: column;
      margin: 0;
    }


  }


.pagination, .pagination__link {
  align-items: center;
  display: flex;
  justify-content: center;
    list-style-type: none; /* Remove bullets */
  padding: 0;
  margin: 0;
}

.pagination {
  margin-bottom: 70px;
  gap: 16px;
}

.pagination li {

  padding: 10px;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #2f1e45;
  text-decoration: none;
}

.pagination li a {
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 600;
  color: #2f1e45;

}


.pagination li.active {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.92;
  color: #f4f1f9;
  gap: 10px;
  padding: 0 10px;
  border-radius: 100px;
  background-color: #181024;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination li.active a {
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: center;
  color: #f4f1f9;
}

.filterbase {
  display: flex;
    flex-direction: column;
  }

  .vacatures-section {
    display: flex;
    flex-direction: column;
  }

}

  .button {
      min-width: auto !important;
  }
.vacature-post__button { 
  min-width: auto !important;
}

.filterbase-section>div>label:before {
  background: url(//14542817.fs1.hubspotusercontent-na1.net/hubfs/14542817/raw_assets/public/werkenext/images/module-icons/search.svg) 50% / contain no-repeat;
  bottom: 0;
  content: "";
  left: 14px;
  position: absolute;
  top: 3px;
  width: 24px;
}
.vacature-index-list-text {
  display: none;
}

.filter-item {
  width: 100%;
  margin: 0;
}

@media (min-width: 1023px) {

  .vacatures-section {
    position: fixed;
    top: 162px;
  }
  .h2 {
  max-width: 340px;
}
  .vacancy-header {
    flex-direction:row;
    gap:50px;
  }
  .filterbase {
    min-width: 412px;
  }


  .filter-section {
    flex-direction: column;
    gap: 24px;
  }
  .vacancy {
    max-width: 734px;
  }

  .vacature-index-list-text {
    display: block;
    font-size: 20px;
    font-weight: 700; 
    margin-bottom: 20px;
  }
  .hs-search-field {
    width: 100%;
    max-width: 412px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
@media (min-width:1280px) {
  .vacancy-image img {
    height:630px;
  }
}
.vacature-post__share-button-link {
  min-width: auto;
  height: 50px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 25px;
  width: 50px;
  background-color: #181024 !important;
  border: 1px solid #181024 !important;
  margin-bottom: 8px;
}
.blog-tag-heading {
  display: none !important;
}

/* --------------------------------- */
/* vacancy post single item */
/* --------------------------------- */


.vakgebied-banner__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vacature-post__details-section p {
  display: flex;
  align-items: center;
}
.vacature-post__details-section svg {
  margin-right: 8px;
}

.vacature-post__details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vacature-post__description {
  margin-bottom: 31px;
}

.vacature-post {
  margin-bottom: 70px;
}

.vacature-post__share-icons {
  align-items: center;
  height: 100%;
  padding: 11px 0;
}

.vacancy-post__banner-text {
  max-width: 1023px;
  width:100%;
  margin: 0 auto;
}

#beforeText p{
  font-family:Power Grotesk Ultrabold, sans-serif;
  font-size: 18px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.44;
  letter-spacing: normal;
  text-align: left;
  color: #2f1e45;
}

.vacature-post__image {
  width: 100%;
  filter: drop-shadow(0px 24px 34px rgba(0, 0, 0, 0.04));
  border-radius: 8px;
  height: 206px;
  object-fit: cover;
}

.vacancy-post {
  margin: 0 auto;
  max-width: 1060px;
  padding: 150px 0 35px;
  border-radius: 50px;
  background-color: #eae3f3;
  margin-bottom: 150px;
}

.image-thank-you {
  width: 100%;
  margin-bottom: -40px;
}

@media (min-width: 767px) {
  
  .cta-image {
    height: 310px;
    width: 100%;
    max-width: 626px; 
    border-radius: 50px 270px 270px 0;
    object-fit: cover;
    object-position: center -150px;
  }


  
  .vacature-wrapper {
      padding: 0 108px;
  }
  
  
  .vacancy-post__banner {
    padding: 0 0 48px 24px;
  }


  .vacature-post__title {
    font-size: 60px;
  }

  
  .vacancy-header {
    display: flex;
    max-width: 1440px;
    margin: 0 auto 50px;
  }


  .vacature-post__description {
    margin-bottom: 33px;
  }

  .vacature-post__description > div > span {
    color: #FFF;
    font-size: 18px;
    line-height: 30px
  }
  
  .vacancy-post .content-wrapper {
    padding:0 100px;
  }

}

.vacature-list__container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
}

.vacature-index__post {

  margin-bottom: 24px;
  padding: 24px 26px 24px 24px;
  border-radius: 30px;
  background-color: #f4f1f9
}

.vacature-list__details-section {
  display: flex;
  align-items: center;
  min-width: 150px;

}

.cta-button {
  background-color: #2f1e45;
  border: 1px solid #2f1e45;
  color: #f4f1f9;
}

.vacature-list__details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


@media (min-width: 1023px) {
  .vacancy-header {
    margin:0 auto 150px; 
  }
  .vacancy-post__banner-text {
    max-width: 460px;
  }
  .vacancy-post__banner {
    padding: 0 0 48px 30px;
  }
  .vacancy-post__banner {
    display: flex;
    align-items: end;
    margin-right: 25px;
  }
  .filterbase-dropdown {
    max-width: 412px;
  }
  .vacature-list__details-section {
    display: flex;
    align-items: center;
    margin-right: 30px;
    min-width: auto;
  }

  .vacature-list__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .vacature-list__details {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 0;
  }

}
/* Sticky behavior when scrolling */
@media (max-width: 768px) {
  
  .vacancy-card .arrow {
    opacity:1;
    transform:unset;
  }
  .vacancy-post {
    padding:80px 0px; 
  }

  .vacatures-blocks {
    padding-top: 50px
  }
  .h2, h1 {
    font-size: 50px;
    font-weight: 800;
    line-height: 0.93;
  }
.filter-section {
    display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 10; /* Make sure it stays above other content */
  }
  .filter-section::before {
    display: none;
  }
  .fixed::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%232F1E45" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.76 7.48c0-1.5.595-2.94 1.655-4a5.658 5.658 0 0 1 8 8 5.658 5.658 0 0 1-9.655-4zM7.415 0A7.479 7.479 0 0 0-.06 7.41c-.035 4.095 3.32 7.525 7.44 7.545 1.615.01 3.03-.255 4.26-1.125.1-.07.71-.885.62-2.01l.205 1.995 2.08 2.08c.14.14.365.14.505 0l.785-.785a.356.356 0 0 0 0-.505L13.31 12.08a7.461 7.461 0 0 0 1.585-4.605C14.895 3.35 11.545 0 7.415 0z"/></svg>) no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }

  .fixed {
    position: fixed; /* Make it fixed when scrolled to 102px */
    top: 102px; /* Position it at 102px from the top */
    width: 100%;
    left: 0;
    padding: 24px 24px;
    box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.25);
    background-color: #eae3f3;
  }
  
  .fixed .filterbase-input {
    height: 32px;
    width: 100%;
    background-color: #f4f1f9;
  }
    
  .fixed .icon-right{
    top: 32px;
    right: 40px;
  }


}

@media (max-width: 400px) {
    h1, h1.mega {
        font-size: 45px;
    }
}

/* @media (min-width: 390px) {
   .filterbase-input:focus,
  .filterbase-input:active {
    position: absolute;
    width: 100%;
    box-shadow: 5px 5px 30px 0 rgba(29, 19, 43, 0.4), -5px -5px 30px 0 #fff;
  } 
  
   .input-container:focus,
.input-container:active {
  position: absolute;
}
  
    .fixed .filterbase-input {
    height: 32px;
    width: calc(100% - 48px); 

    background-color: #f4f1f9;
  }
 
} */


@media (max-width:390px) {
  .filter-section {
    flex-direction:column;
  }
  .filter-section::after {
    top:19%;
  }
  
  .fixed::after {
     top:30%;
  }
}