/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
:root { --dark-blue: #072344; --primary-blue: #46d7ef; --secondary-blue: #c2f6ff; }
header.header { border-bottom: 1px solid #e4e8eb; }
footer .above-footer-section { padding: 0 !important; }
.menu--desktop ul li.menu__item a.menu__link.menu__link--active-link { border-bottom: 1px solid #072344; padding-bottom: 5px !important; font-weight: bold; color: #072344; }
.fw_header_section .title { margin-top: -30px !important; }
#hs-eu-confirmation-button, #hs-eu-decline-button, #hs-modal-accept-all, #hs-modal-save-settings { /* padding: 0 40px; */ width: 220px; }
#hs-eu-decline-button { display: none !important; }
.blurb_voordelen:not(.blurb_voordelen_last) .blurb_flex-item { margin-bottom: 100px; }
.blurb_voordelen .blurb_img-icon { margin-top: -100px; }
.blurb_voordelen .blurb_flex-item:nth-child(5), .blurb_voordelen .blurb_flex-item:nth-child(6) { margin-bottom: 0; }
.blurb_werken:not(.blurb_werken_last) .blurb_flex-item { margin-bottom: 100px; }
.blurb_werken .blurb_img-icon { margin-top: -100px; }
.job-detail-rich-text-class h1 { font-size: 30px; color: var(--dark-blue); }
.job-detail-rich-text-class h2 { font-size: 20px; color: var(--primary-blue); }
.job-detail-rich-text-class h3 { font-size: 18px; color: var(--dark-blue); }
.job-detail-form-class { padding: 64px; background-color: #dcf7fc; border-radius: 32px; }
.job-detail-form-class .form-title { text-align: center; margin-bottom: 48px; font-size: 40px; color: var(--dark-blue); }
.job-detail-button .btn-contact { margin-left: 15px; }
.job-detail-button { display: flex; justify-content: end; }
.hs_submit { display: flex; justify-content: center; }
form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=tel], form input[type=text], form select, form textarea { font-size:16px; }
form textarea { height: 160px; }
td, th { border: 1px solid var(--primary-blue); }
.address .email { font-family: Muli; }
.address .email:hover { color: var(--primary-blue) !important; text-decoration: none; }
span.btn-arrow-left { padding-right: 10px; }


@media (min-width: 320px) and (max-width: 640px)
{
/*   .cell_17356351816353-margin { margin-top: 0px !important; } */
}

@media only screen and (min-width: 640px) and (max-width: 768px)
{
}

@media only screen and (min-width: 768px) and (max-width: 800px)
{
  #hs_cos_wrapper_widget_1734938467007 .office-filter-form,
  #hs_cos_wrapper_widget_1734943489890 .office-filter-form,
  #hs_cos_wrapper_module_1735634825837 .office-filter-form,
  #hs_cos_wrapper_dnd_area_listing-module-5 .office-filter-form { width:unset !important; }
  #hs_cos_wrapper_dnd_area_detail-module-2 .detail-page .office-description { flex-basis: 100%; -moz-flex-basis: 100%; -webkit-flex-basis: 100%; -o-flex-basis: 100%; }
}

@media only screen and (min-width: 800px) and (max-width: 980px)
{
  #hs_cos_wrapper_widget_1734938467007 .office-filter-form,
  #hs_cos_wrapper_widget_1734943489890 .office-filter-form,
  #hs_cos_wrapper_module_1735634825837 .office-filter-form,
  #hs_cos_wrapper_dnd_area_listing-module-5 .office-filter-form { width:unset !important; }
  #hs_cos_wrapper_dnd_area_detail-module-2 .detail-page .office-description { flex-basis: 100%; -moz-flex-basis: 100%; -webkit-flex-basis: 100%; -o-flex-basis: 100%; }
}

@media only screen and (min-width: 980px) and (max-width: 1024px)
{
  #hs_cos_wrapper_dnd_area_listing-module-5 .office-filter-form { width:unset !important; }
}
@media (max-width: 767px) {
  .dnd-column.cell_17356351816353-margin,
  .dnd-column.cell_17356354313694-margin,
  .dnd-column.cell_17356348418662-margin { margin-top: 0px !important; }
  .blurb_voordelen .blurb_flex-item:nth-child(5)  { margin-bottom: 100px; }
  #hs_cos_wrapper_widget_1734938467007 .office-filter-form,
  #hs_cos_wrapper_widget_1734943489890 .office-filter-form,
  #hs_cos_wrapper_module_1735634825837 .office-filter-form,
  #hs_cos_wrapper_dnd_area_listing-module-5 .office-filter-form { width:unset !important; }
  #hs_cos_wrapper_dnd_area_listing-module-5 .form-inline .form-group { flex-direction: column; }
  .detail-page .btn.btn-canvas { width: 90% !important; }
  #welzijnsbijdrage_blurb_last .blurb_box.img_icon_placement-top { padding: 0 0; }
  .faq_blurb_box .blurb_box { padding: 0 0 !important; }
  .veelgestelde_vragen_blurb .blurb_box { padding: 0 0 !important; }
}

.body-container--offices > .row-fluid, .body-container--jobs > .row-fluid  { max-width: 1424px; margin: 0 auto; }
.text-primary { color: var(--primary-blue) !important; }
.office-img { max-width: 100%; height: auto; }
.address .email { font-weight: 700; }
.office-address {
    display: flex !important;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
}
#leaflet_map_canvas, #map_wrapper {
    height: 480px;
}
.office_location .flex {
	margin-right: -15px;
	margin-left: -15px;	
}
.office_location .flex .flex-item {
	padding: 15px;
}
.office_location .flex .flex-item.column-4 {
	flex-basis: 25%;
	-moz-flex-basis: 25%;
	-webkit-flex-basis: 25%;
	-o-flex-basis: 25%;  
}
.office_location .flex .flex-item.column-3 {
	flex-basis: 33.33%;
	-moz-flex-basis: 33.33%;
	-webkit-flex-basis: 33.33%;
	-o-flex-basis: 33.33%;  
}
.office_location .flex .flex-item.column-2 {
	flex-basis: 50%;
  -moz-flex-basis: 50%;
  -webkit-flex-basis: 50%;
	-o-flex-basis: 50%;	
}
.office_location .flex .flex-item.column-1 {
	flex-basis: 100%;
	-moz-flex-basis: 100%;
	-webkit-flex-basis: 100%;
	-o-flex-basis: 100%;  
}
@media (max-width: 1024px) {
	.office_location .flex .flex-item.column-4 {
		flex-basis: 33.33%;
		-moz-flex-basis: 33.33%;
		-webkit-flex-basis: 33.33%;
		-o-flex-basis: 33.33%;		
	}
}
@media (max-width: 768px) {
	.office_location .flex .flex-item.column-4,
	.office_location .flex .flex-item.column-3 {
		flex-basis: 50%;
		-moz-flex-basis: 50%;
		-webkit-flex-basis: 50%;
		-o-flex-basis: 50%;		
	}
}
@media (max-width: 767px) {	
	.office_location .flex {
		margin-left: 0!important;
		margin-right: 0!important;
	}
	.office_location .flex .flex-item  {
		flex-basis: 100%!important;
		-moz-flex-basis: 100%!important;
		-webkit-flex-basis: 100%!important;
		-o-flex-basis: 100%!important;
		padding: 0!important;
		margin-bottom: 15px;
	}
}
.content-text .title {
	font-weight: 600;
} */

.office_location .tabs-nav .tab-title {
	margin-bottom: 0;
}
.office_location ul.tabs-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	position: relative;
	z-index: 1;
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.office_location ul.tabs-nav li {
  float: left;
  margin-right: 15px;  
  border-radius: 5px;  
  cursor: pointer;
}
.office_location ul.tabs-nav li:last-child {
	margin-right: 0!important;
}
.office_location ul.portfolio-tabs li a.nav-link {
  text-decoration: none;
	display: inline-block;
	padding: 15px;
}
.office_location .portfolio-pane {
	padding-top: 30px;
}
.office_location .content-text {
	padding-top: 20px;
}
.content-image {
	max-width: 100%;
	width: 100%;
	max-height: 200px;
	min-height: 200px;
	height: 100%;
	object-fit: cover;
}


.ot-tab_portfolio .portfolio-tabs {
	display: none!important;
}
@media(min-width:768px) {
	.ot-tab_portfolio .portfolio-tabs {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex!important;
	}
	.ot-tab_portfolio .portfolio-pane {
		border: none;
	}
	.ot-tab_portfolio .portfolio-pane .card-header {
		display: none!important;
	}
	.ot-tab_portfolio .portfolio-pane .collapse {
		display: block!important;
	}
}

@media (max-width:767px) {
	.ot-tab_portfolio .portfolio-content > .portfolio-pane {
		display: block !important;
		opacity: 1;
	}
	.ot-tab_portfolio .flex {
		margin-top: 20px;
	}
}
.ot-tab_portfolio a.collapsible::after {
	font-family: FontAwesome;
	content: "\f067";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	-webkit-font-smoothing: antialiased;
	margin-right: 0;
	margin-left: auto;
	text-align: right;
	vertical-align: middle;
	position: absolute;
	right: 30px;
}
a.collapsible[aria-expanded="true"]:after {
	content: "\f068"!important;
}
.ot-tab_portfolio a.collapsible {
	display: inline-block;
	text-decoration: none;
	width: 100%;
}
.ot-tab_portfolio .card-header {
	padding: 15px 30px;	
}
.ot-tab_job-post .card-pane:last-child .card-header {
	border-bottom: 0!important;
}
.ot-tab_portfolio .portfolio-pane {
	display: none;
}
.ot-tab_portfolio .portfolio-pane.active {
	display: block!important;
}
.office_location .btn_area {
	/*padding-top: 20px;*/
  margin-bottom: -36px;
  float: right;
  bottom: 25px;
  position: relative;
}


.office_location .content-img-relative {
	position: relative;
	z-index: 0;
}
.office_location .category {
	position: absolute;
	z-index: 1;	
	padding: 5px 20px;	
	margin: 10px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
}
.office_location .category.top-left {
	bottom: auto;
	top: 0;
	left: 0;
}
.office_location .category.top-right {
	top: 0;
	right: 0;
	left: auto;
	bottom: auto;	
}
.office_location .category.bottom-right {
	bottom: 0;
	right: 0;
	left: auto;
}
.office_location .category.bottom-left {	
	bottom: 0;
	left: 0;
	right: auto;
}
.office_text {
    font-size: 22px;
    width: calc(100% / 2);
    margin: 0 auto;
}
.office_text p {
    line-height: 1.6;
}


.ot-tab_portfolio .portfolio-content .collapse {
	animation: fadeIn 0.5s ease 1 forwards;
}

.office_location ul.portfolio-tabs li a.nav-link:focus {
  outline: none;
}
.office_location ul.portfolio-tabs li a.nav-link:focus .tab-title {
  text-decoration: underline;
}
.flex-item-link {
  text-decoration: none;
  color: inherit;
}
.flex-item-link:hover {
  color: inherit;
  text-decoration: none;
}

.all-job-details .text-primary {
    color: var(--dark-blue) !important;
}

.accordion .card {
    border: 1px solid var(--primary-blue) !important;
}

.accordion .card-header { background-color: #fff; padding: 24px 16px; display: flex; align-items: self-end; justify-content: space-between; }
.accordion .card-header .job-title { font-size: 19px; }
.accordion .card-header:hover { background-color: var(--primary-blue); }
.accordion .card-header:hover .job-title { color: var(--light); }
.accordion .card-header:after {
    font-family: "Font Awesome 6 Free";  
    content: "\f068";
    float: right; 
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight:900;
}
.accordion .card-header.collapsed:after { content: "\f067"; }
.accordion .card-body { padding: 48px; }
.accordion .card-body h3 { font-size: 16px; }

/* Back-to-top op mobiel: hoger, kleiner, en pas zichtbaar na twee
   schermhoogtes. child.js zet/haalt de class btt-hold. */
@media (max-width: 767px) {
  #ot-back_to_top_btn { bottom: 180px; width: 36px; height: 36px; padding: 6px; }
  #ot-back_to_top_btn i { font-size: 14px; }
  #ot-back_to_top_btn.btt-hold { opacity: 0 !important; visibility: hidden !important; }
}

/* Kantoorpagina mobiel: sectievolgorde detail -> cijfers -> team -> kaart -> nieuws.
   De secties blijven op hun plek in kantoren-v2.html; alleen de weergave klapt om. */
@media (max-width: 767px) {
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 { display: flex; flex-direction: column; }
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section { order: 9; }
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > [class*="dnd_area_detail-row-0-"] { order: 1; } /* kantoordetail */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > [class*="dnd_area_detail-row-3-"] { order: 2; } /* cijfers */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > [class*="dnd_area_detail-row-1-"] { order: 3; } /* team + formulier */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > [class*="dnd_area_detail-row-4-"] { order: 4; } /* kaart */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > [class*="dnd_area_detail-row-2-"] { order: 5; } /* nieuws */

  /* De drie cijfers als een rij chips in plaats van een hoge sectie. */
  [class*="dnd_area_detail-row-3-"] .blurb_flex {
    display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center;
  }
  [class*="dnd_area_detail-row-3-"] .blurb_flex-item.column-3 {
    flex: 1 1 0; min-width: 0; padding: 0;
  }
  [class*="dnd_area_detail-row-3-"] .blurb_box {
    background: rgba(255,255,255,.12); border-radius: 12px; padding: 10px 6px; height: 100%;
  }
  [class*="dnd_area_detail-row-3-"] .blurb_img-icon { display: none; }
  [class*="dnd_area_detail-row-3-"] .blurb_text .desc span:first-child { font-size: 20px; font-weight: 700; }
  [class*="dnd_area_detail-row-3-"] .blurb_text .desc span + span { font-size: 12px; }
  [class*="dnd_area_detail-row-3-"] .blurb_text .desc { line-height: 1.25; }
}

/* A1/A2: kantorenlijst met zoekresultaat — resultaten direct onder de H1.
   Volgorde in kantoren-v2.html blijft ongewijzigd; alleen de weergave klapt om. */
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 { display: flex; flex-direction: column; }
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section { order: 5; }
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section:first-child { order: 1; }   /* H1 */
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-3-padding { order: 2; } /* resultaten */
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-1-padding { order: 3; } /* zoekformulier */
.has-results > .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-2-padding { order: 4; } /* kaart */
/* A2: knop "Kantoren" verbergen zodra er een zoekresultaat is */
.has-results #hs_cos_wrapper_dnd_area_listing-module-3 { display: none; }



/* Kantorenoverzicht /nl/kantoren mobiel: zoeken -> lijst (compacte kaarten) -> kaart.
   Desktop en tablet (>= 768px) blijven ongewijzigd. Zoekresultaten (.has-results) behouden
   hun bestaande volgorde H1 -> resultaten -> zoekformulier -> kaart. */
@media (max-width: 767px) {
  /* volgorde zonder zoekopdracht */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section:first-child:not([class*="dnd_area_detail"]) { order: 1; }
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-1-padding { order: 2; } /* zoeken */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-3-padding { order: 3; } /* lijst */
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd_area_listing-row-2-padding { order: 4; } /* kaart */

  /* kop: compacter, knop "Kantoren" (link naar deze pagina) weg */
  .body-container--about-us-2 .ot-office-section-heading .title { font-size: 30px !important; line-height: 1.2; margin-bottom: 0; }
  #hs_cos_wrapper_dnd_area_listing-module-3 { display: none; }
  .body-container--about-us-2 > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section:first-child:not([class*="dnd_area_detail"]) { padding-top: 28px !important; padding-bottom: 8px !important; }

  /* zoekblok */
  .dnd_area_listing-row-1-padding { padding-top: 12px !important; padding-bottom: 8px !important; }
  .office-filter-form { padding: 20px 18px !important; margin: 0 !important; }
  .office-filter-form label { font-size: 17px !important; line-height: 1.4; margin-bottom: 10px; }
  .office-filter-form .form-group, .office-filter-form .input-group { display: block; width: 100%; margin: 0; }
  .office-filter-form .input-group input { width: 100% !important; max-width: none; margin: 0 !important; font-size: 17px; height: 50px; border-radius: 10px; padding: 0 16px; box-sizing: border-box; }
  .office-filter-form .button { width: 100%; margin-top: 12px !important; height: 50px; border-radius: 25px; background: #46d3ec !important; border-color: #46d3ec !important; color: #fff !important; font-weight: 600; letter-spacing: .04em; }

  /* lijst */
  .dnd_area_listing-row-3-padding { padding-top: 16px !important; padding-bottom: 24px !important; }
  .ot-offices-listing-module .listing-page > h3 { font-size: 24px !important; line-height: 1.3 !important; margin: 28px 0 14px !important; }
  .ot-offices-listing-module .flex { display: block; }
  .ot-offices-listing-module .flex-item { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 0 12px !important; }
  .ot-offices-listing-module .flex-item-link { display: block; text-decoration: none; }
  .ot-offices-listing-module .flex-item-link .content {
    display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; row-gap: 0; align-items: center; align-content: center;
    padding: 12px; border: 1px solid #e4e8eb; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 8px rgba(7, 35, 68, .05);
  }
  .ot-offices-listing-module .content-img { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0 !important; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: #f0f2f4; }
  .ot-offices-listing-module .listing-page .content-img img.office_img { width: 96px !important; height: 96px !important; min-height: 0 !important; max-height: none !important; object-fit: cover; display: block; }
  .ot-offices-listing-module .content-img .hover-img { display: none; }
  .ot-offices-listing-module .content-text { display: contents; }
  .ot-offices-listing-module .content-text .office_title,
  .ot-offices-listing-module .content-text .address,
  .ot-offices-listing-module .content-text .office-distance { grid-column: 2; }
  .ot-offices-listing-module .content-text .office_title { font-size: 18px !important; margin: 0 0 2px; }
  .ot-offices-listing-module .content-text .address { font-size: 15px !important; line-height: 1.45; margin: 0; }
  .ot-offices-listing-module .content-text .office-distance { justify-self: start; margin: 0 0 6px !important; }
  .ot-offices-listing-module .btn_area { grid-column: 1 / -1; margin: 12px 0 0 !important; text-align: center !important; }
  .ot-offices-listing-module .btn_area .btn { display: block; width: 100%; padding: 8px 16px; font-size: 15px; line-height: 1.4; border-radius: 22px;
    background: transparent !important; color: #072344 !important; border: 1.5px solid #46d3ec !important; box-shadow: none !important; }
  .ot-offices-listing-module .flex-item-link:active .content { border-color: #46d3ec; }

  /* kaart onderaan, iets lager */
  .dnd_area_listing-row-2-padding .mapboxgl-map { height: 360px !important; border-radius: 16px; }

  /* zoekresultaten: tweede (dubbele) kop in de lijst weg */
  .has-results .ot-offices-listing-module .office-list-title { display: none; }
}