body {
  background-color: #FFF;
  padding-bottom: 2rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

#filters,
#pages,
#vacature-search {
  margin-bottom: 2rem;
}

#vacature-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 600px) {
  #vacature-search {
    grid-template-columns: 1fr;
  }
}

#filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

@media screen and (max-width: 1000px) {
  #filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  #filters {
    grid-template-columns: 1fr;
  }
}

#filters label,
#vacature-search label {
  margin-bottom: 0.5em;
  font-size: 1rem;
  color: var(--normaltext_00_foreground);
}

#filters select,
#vacature-search input {
  display: block;
  width: 100%;
  outline: unset;
  border: var(--defaultbutton_19_borderwidth) solid var(--normaltext_00_foreground);
  padding: .5rem 1.5rem;
  font-weight: 500;
}

.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

@media screen and (max-width: 1000px) {
  .page {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
  }
}

.vacature {
  flex-direction: column;
}

.vacature .card-body,
.vacature .card-footer {
  padding: 1rem;
}

.vacature .card-picture,
.vacature .card-img {
  display: block;
}

.vacature .card-img {
  object-fit: cover;
  width: 100%;
  object-position: center;
}

.vacature .card-footer {
  margin-top: auto;
}

.vacature .card-title {
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 54px;
  margin-bottom: 1rem;
}

.vacature .card-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  line-height: 1.5rem;
  list-style-type: none;
}

.vacature .card-list-item {
  padding-left: 2rem;
  position: relative;
}

.vacature .card-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left center;
}

.vacature .card-list-item.location::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23333333' d='M192 0C85.97 0 0 85.97 0 192c0 77.41 26.97 99.03 172.3 309.7C177 508.6 184.5 512 192 512s14.95-3.441 19.72-10.32C357 291 384 269.4 384 192C384 85.97 298 0 192 0zM192 445.8c-17.69-25.46-33.42-47.87-47.38-67.75C57.56 254.1 48 238.9 48 192c0-79.4 64.6-144 144-144s144 64.6 144 144c0 46.88-9.562 62.07-96.62 186.1C225.4 397.1 209.7 420.4 192 445.8zM192 111.1c-44.18 0-80 35.82-80 80S147.8 271.1 192 271.1c44.18 0 80-35.82 80-80S236.2 111.1 192 111.1zM192 224C174.4 224 160 209.6 160 192s14.36-32 32-32s32 14.36 32 32S209.6 224 192 224z'/%3E%3C/svg%3E");
  background-size: .85rem;
}

.vacature .card-list-item.hours::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z'/%3E%3C/svg%3E");
}

.vacature .card-list-item.money::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23333333' d='M335.5 447c2.688 12.97-5.672 25.65-18.64 28.34C301.7 478.5 286.5 480 271.4 480c-58.7 0-115.5-23.12-157.9-65.68c-25.05-25.1-42.65-54.79-53.29-86.34H40c-13.25 0-24-10.74-24-23.98s10.75-24.01 24-24.01h9.494c-1.701-15.96-1.701-32.04 0-47.1H40c-13.25 0-24-10.73-24-23.98c0-13.25 10.75-24.01 24-24.01h20.16c10.65-31.56 28.25-61.26 53.31-86.37c53.34-53.46 129.4-76.21 203.4-60.99c12.97 2.688 21.33 15.37 18.64 28.34c-2.672 13-15.39 21.34-28.36 18.66c-58.16-11.94-117.8 5.904-159.7 47.9C131.9 147.1 120.4 165 111.9 183.1h152.1c13.25 0 24 10.77 24 24.02c0 13.25-10.75 23.97-24 23.97H98.37c-2.18 15.96-2.18 32.04-.002 47.1h165.6c13.25 0 24 10.76 24 24.01s-10.75 23.99-24 23.99H111.9c8.484 18.96 19.99 36.89 35.51 52.43c41.89 42.03 101.6 59.1 159.7 47.93C320.1 425.6 332.8 434 335.5 447z'/%3E%3C/svg%3E");
  background-size: .85rem;
}

.vacature .card-list-item.vakgebied::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M448 96h-64V64c0-35.35-28.65-64-64-64H192C156.7 0 128 28.65 128 64v32H64C28.65 96 0 124.7 0 160v256c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C512 124.7 483.3 96 448 96zM192 48h128c8.837 0 16 7.163 16 16v32h-160V64C176 55.16 183.2 48 192 48zM64 144h384c8.8 0 16 7.2 16 16v96h-416V160C48 151.2 55.2 144 64 144zM448 432H64c-8.8 0-16-7.2-16-16V304H192V320c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V304h144V416C464 424.8 456.8 432 448 432z'/%3E%3C/svg%3E");
}

.btn {
  /* --defaultbutton_19_foreground: #FFFFFF;
  --defaultbutton_19_background: #954A5D;
  --defaultbutton_19_bordercorner: 0px;
  --defaultbutton_19_borderwidth: 1px;
  --defaultbutton_19_bordercolor: #954A5D;
  --defaultbutton_19_hoverforeground: #FFFFFF;
  --defaultbutton_19_hoverbackground: #A46775;
  --defaultbutton_19_hoverbordercolor: #A46775;
  --defaultbutton_19_activebordercolor: #D6D6D6;
  --defaultbutton_19_activeforeground: #929292;
  --defaultbutton_19_activebackground: #F4E9EB; */
  padding: .5rem 1.5rem;
  display: block;
  font-weight: 500;
  transition: all ease-in-out 250ms;
  text-align: center;
  background-color: var(--defaultbutton_19_background);
  color: var(--defaultbutton_19_foreground);
  border-radius: var(--defaultbutton_19_bordercorner);
  border: var(--defaultbutton_19_borderwidth) solid var(--defaultbutton_19_bordercolor);
}

.btn:hover,
.btn:focus {
  background-color: var(--defaultbutton_19_hoverbackground);
  color: var(--defaultbutton_19_hoverforeground);
  border-radius: var(--defaultbutton_19_hoverbordercorner);
  border: var(--defaultbutton_19_borderwidth) solid var(--defaultbutton_19_hoverbordercolor);
}

.btn:active {
  background-color: var(--defaultbutton_19_activebackground);
  color: var(--defaultbutton_19_activeforeground);
  border-radius: var(--defaultbutton_19_activebordercorner);
  border: var(--defaultbutton_19_borderwidth) solid var(--defaultbutton_19_activebordercolor);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--breadcrumbtrail_16_foreground);
  --bs-pagination-bg: var(--view_20_background);
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: var(--view_20_background);
  --bs-pagination-border-radius: 0px;
  --bs-pagination-hover-color: var(--hyperlink_10_hoverforeground);
  --bs-pagination-hover-bg: var(--breadcrumbtrail_16_hoverforeground);
  --bs-pagination-hover-border-color: var(--breadcrumbtrail_16_hoverforeground);
  --bs-pagination-focus-color: var(--hyperlink_10_hoverforeground);
  --bs-pagination-focus-bg: var(--defaultbutton_19_activebordercolor);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(241, 241, 241, 0.25);
  --bs-pagination-active-color: var(--defaultbutton_19_foreground);
  --bs-pagination-active-bg: var(--defaultbutton_19_background);
  --bs-pagination-active-border-color: var(--defaultbutton_19_background);
  --bs-pagination-disabled-color: var(--defaultbutton_19_activeforeground);
  --bs-pagination-disabled-bg: var(--breadcrumbtrail_16_background);
  --bs-pagination-disabled-border-color: var(--view_20_background);
  display: flex;
  padding-left: 0;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  font-weight: 700;
}

@media (prefers-reduced-motion:reduce) {
  .page-link {
    transition: none
  }
}

.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color)
}

.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow)
}

.active>.page-link,
.page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color)
}

.disabled>.page-link,
.page-link.disabled {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color)
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(var(--bs-border-width) * -1)
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius)
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius)
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg)
}